/* ----- OUTWORK 2010 --------------

	By. jason@esterling.co.uk
	Date. 31 March '10
	
	Index
	0. Global
	1. Layout
	2. Homepage
	3. Services
	4. Gallery

------------------------------------ */ 


/* ---------- 0. GLOBAL */

body {
	background: black url("../images/main-bg.jpg") center top no-repeat;
	color: white;
	font: 12px Georgia, Times, serif;
}

div,li,a,span,img{
	behavior: url("../css/iepngfix.htc");
}
.header2 {color:#83b7ef; font-size:16px;}

.fl{float:left;}
.fr{float:right;}

a:link, a:visited, a {
	color: #4C929C;
	text-decoration: none;
}

em{color:#83b7ef; font-weight:bold;}
span.star{color:#F00; font-weight:bold;}

a:hover, a:active {
	color: white;
	text-decoration:none;
}

a:focus, a:active { outline: none; }

p { line-height: 1.6em; }

.container {
	display: block;
	width: 989px;
	margin: 0 auto;
}

.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.justify { text-align: justify; display: block; }
.bpad { padding-bottom: 20px; }
.relative { position: relative; }

.constan {
	font-size: 1.46em;
	color: white;
	text-transform: uppercase;
	color: #83b7ef;
}

#home-text-col h2.constan {
	font-size: 1.46em;
	color: white;
	text-transform: uppercase;
	color: #7f6c7f;
}

* ul, * ul li { list-style-type: none; }

/* Icons */
.map 		{ background: url("../images/icons/map.gif") top left no-repeat; }
.telephone	{ background: url("../images/icons/telephone.gif") top left no-repeat; }
.home 		{ background: url("../images/icons/home.gif") top left no-repeat; }
.mail 		{ background: url("../images/icons/mail.gif") top left no-repeat; }

/* ---------- 1. LAYOUT */

#wrapper {
	display: block;
}

#top-bar {
	padding: 25px 0 15px 0;
	width: 986px;
	display: inline-block;
}

	#top-bar #main-logo {
		background: url("../images/logo.png") no-repeat;
		width: 236px;
		height: 53px;
		display: block;
		margin-top:20px;
	}
	
	#top-bar #design-a-ring {
		background: url("../images/headings/as-unique-as-you-are.png") no-repeat bottom;
		width: 358px;
		height: 65px;
	}
	
	#top-bar .tel{
		float:right;
		color:#4271a4;
		text-transform:uppercase;
		font-size:14px;
		padding-right:20px;
	}
		#top-bar .tel em{
			font-size:25px;
			color:#66a0df;
			font-style:normal;
		}

/* Lists */

.standard-list {
	display: block;
	padding: 30px 0 0 55px;
	margin: 0;
}

.standard-list li {
	background: url("../images/bullet.gif") center left no-repeat;
	display: block;
	margin: 0;
	padding: 3px 0 3px 18px;
}


/* Navbar */
ul#navbar {
	display: block;
	width: 949px;
	padding: 20px 0 20px 40px;
	margin: 0;
	background: transparent url("../images/nav-background.png") repeat;
	float: left;
	position: relative;
	overflow: hidden;
}
	ul#navbar li {
		display: block;
		float: left;
		padding: 0;
		margin: 0;
	}
		ul#navbar li a {
			color: white;
			text-decoration: none;
			display: inline-block;
			padding: 0 9px;
			text-transform: uppercase;
			font-size: 11px;
			width: auto;
		}
			
			ul#navbar li.sep {
				height: 9px;
				width: 9px;
				display: block;
				float: left;
				background: url("../images/nav-seperator.png") no-repeat center;
				margin: 3px 0 0 0;
			}
		
			ul#navbar li a:hover { color: #4C929C; }

/* Main Area */
#main-content {
	width:989px;
	min-height:300px;
	height:auto !important;
	height:300px;
	clear: both;
	float: left;
	margin: 15px 0 0 0;
}


#left-col {
	display: block;
	float: left;
	width: 281px;
}

#fb_Link{float:right;}
#fb_Link img{margin-right:20px;}

#main-col {
	display: inline;
	float: left;
	width: 650px;
	margin-left: 10px;
	background: transparent url("../images/black-background.png") repeat;
	padding: 20px;
	overflow: hidden;
}

#home-text-col {
	display: inline;
	float: right;
	width: 650px;
	margin-right:8px;
	margin-top:10px;
	background: transparent url("../images/welcome_bg.jpg") repeat;
	padding: 20px;
	overflow: hidden;
}

#full-col {
	display: block;
	float: left;
	width: 946px;
	margin-left: 0;
	background: transparent url("../images/black-background.png") repeat;
	padding: 20px;
}

.full-block {
	display: block;
	width: 635px;
	float: left;
}

.bigger-block {
	display: block;
	width: 585px;
	float: left;
}

.big-block {
	display: block;
	width: 375px;
	float: left;
	margin-right: 20px;
}

.med-block {
	display: block;
	width: 300px;
	float: left;
	margin-right: 30px;
}

.smallish-block {
	display: block;
	width: 310px;
	float: left;
}

.small-block {
	display: block;
	width: 240px;
	float: left;
}

/* Buttons */

/* nice button */
a.nice-button {
	display: block;
	padding: 9px 10px 0;
	position: relative;
	height: 42px;
	background: url("../images/buttons/nice-button/mid.gif") repeat-x;
	text-decoration: none;
	color: white;
	text-align: center;
	font-size: 1.1em;
	font-family: Helvetica, Arial, sans-serif;
}
	a.nice-button:hover { color: #ccc; }	
	
	a.nice-button .l {
		display: block;
		position: absolute;
		height: 38px;
		width: 5px;
		top: 0;
		left: -4px;
		background: url("../images/buttons/nice-button/l.gif") top left no-repeat;
	}
	
	a.nice-button .r {
		display: block;
		position: absolute;
		height: 38px;
		width: 5px;
		top: 0;
		right: -4px;
		background: url("../images/buttons/nice-button/r.gif") top left no-repeat;
	}

/* /Buttons */

#footer {
	display: block;
	width: 986px;
	background: url("../images/footer-grad.jpg") top left no-repeat;
	float: left;
	padding: 31px 0 50px 0;
	color: #2b4b6d;
	text-transform: uppercase;
	font-size: 0.69em;
	font-family: Helvetica, Arial, sans-serif;
	margin-top:15px;
}

	#footer a { color: #477db4; text-decoration: none; }
		#footer a:hover { color: #5698DB; }
	
	#footer .copyright { display: block; color: #461c3e; margin-top: 20px; }
	
ul#footer-links {
	display: block;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
}

	ul#footer-links li {
		list-style-type: none;
		display: block;
		float: left;
		padding: 0;
		margin: 0;
	}
	
		ul#footer-links li a {
			display: block;
			padding: 0 13px 0 0;
			color: #732d65;
		}
			ul#footer-links li a:hover { color: #9856A4; }
			
ul#footer-links2 {
	display: block;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
}

	ul#footer-links2 li {
		list-style-type: none;
		display: block;
		float: left;
		padding: 0;
		margin: 0;
	}
	
		ul#footer-links2 li a {
			display: block;
			padding: 0 13px 0 0;
			color: #732d65;
		}
			ul#footer-links2 li a:hover { color: #9856A4; }


/* ---------- 2. HOMEPAGE */

/* Block Links */
ul#push-links {
	display: block;
	float: left;
	padding: 0;
	margin: 0;
	width: 281px;
}

	ul#push-links li {
		display: block;
		float: left;
		list-style-type: none;
		margin: 0 0 20px 0;
		width: 281px;
		height: 122px;
		padding: 0;
	}
	
	ul#push-links li.last {
		display: block;
		float: left;
		list-style-type: none;
		margin: 0 0 00px 0;
		width: 281px;
		height: 122px;
		padding: 0;
	}
	
		ul#push-links li.about-link {
			display: block;
			background: url("../images/about-link.png") center no-repeat;
			margin-bottom:55px;
		}
		ul#push-links li.gallery-link {
			display: block;
			background: url("../images/gallery-link.png") center no-repeat;
			margin-bottom:55px;
		}
		ul#push-links li.contact-link {
			display: block;
			background: url("../images/contact-link.png") center no-repeat;
		}
		ul#push-links li.services-link {
			display: block;
			background: url("../images/services-link.png") top center no-repeat;
			margin-bottom:51px;
		}
	
		ul#push-links li a {
			display: block;
			width: 261px;
			height: 72px;
			text-decoration: none;
			padding: 60px 0 0 20px;
		}
		
			ul#push-links li a span.head1 {
				display: block;
				font-size: 18px;
				text-transform: uppercase;
				font-family:Arial, Helvetica, sans-serif;
				font-weight:300;
			}
			
			ul#push-links li a span.head2 {
				display: block;
				font-size: 12px;
				font-family:Arial, Helvetica, sans-serif;
			}
			
			ul#push-links li.about-link a span.head1 { color: #449ca6 !important; }
			ul#push-links li.about-link a span.head2 { color: #82adb2 !important; }      
			ul#push-links li.gallery-link a span.head1 { color: #449ca6 !important; }
			ul#push-links li.gallery-link a span.head2 { color: #82adb2 !important; }      
			ul#push-links li.contact-link a span.head1 { color: #467ab1 !important; }
            ul#push-links li.contact-link a span.head2 { color: #6A9ABD !important; }
			ul#push-links li.services-link a span.head1 { color: #a74493 !important; }
            ul#push-links li.services-link a span.head2 { color: #9E7EA4 !important; }
			
			ul#push-links li.about-link a:hover span.head1 { color: #7fcbd4 !important; }
			ul#push-links li.about-link a:hover span.head2 { color: #b5d9dd !important; }      
			ul#push-links li.gallery-link a:hover span.head1 { color: #7fcbd4 !important; }
			ul#push-links li.gallery-link a:hover span.head2 { color: #b5d9dd !important; }      
			ul#push-links li.contact-link a:hover span.head1 { color: #78a9dc !important; }
            ul#push-links li.contact-link a:hover span.head2 { color: #9fc4de !important; }
			ul#push-links li.services-link a:hover span.head1 { color: #d07dbf !important; }
            ul#push-links li.services-link a:hover span.head2 { color: #c7b4cb !important; }

.big-ring {
	background: url("../images/homepage/big-ring.png") center no-repeat;
	width: 346px;
	height: 383px;
}


/* Image Stylrs */
.img-right {
	margin: 10px 0 20px 20px;
	float: right;
}

.img-left {
	margin: 10px 20px 20px 0;
	float: left;
}

/* ---------- 3. SERVICES */

/* ---------- 4. GALLERY */

#slider-clip {
	display: block;
	float: left;
	width: 240px;
	height: 371px;
	overflow: hidden !important;
}

#gallery-slider {
	display: block;
	list-style-type: none;
	padding: 0;
	margin: 0;
	float: left;
	width: 250px;
	overflow: visible;
}

	#gallery-slider li {
		list-style-type: none;
		display: block;
		float: left;
		margin: 0 20px 20px 0;
		width: 105px;
		height: 75px;
	}
	
		#gallery-slider li a.active { opacity: 0.4; }
	
#gallery-controller {
	display: block;
	list-style-type: none;
	padding: 0;
	margin: 0;
	float: right;
	margin-top: 40%;
	width: 30px;
}

	#gallery-controller li {
		list-style-type: none;
		display: block;
		float: left;
	}
		
		#gallery-controller li.up a {
			display: block;
			float: left;
			width: 30px;
			height: 30px;
			background: url("../images/buttons/sprite.gallery-scroller.gif") 0 0 no-repeat;
		}
			#gallery-controller li.up a:active { background: url("../images/buttons/sprite.gallery-scroller.gif") -30px 0 no-repeat; }
			
		#gallery-controller li.down a {
			display: block;
			float: left;
			width: 30px;
			height: 30px;
			background: url("../images/buttons/sprite.gallery-scroller.gif") 0 -30px no-repeat;
		}
			#gallery-controller li.down a:active { background: url("../images/buttons/sprite.gallery-scroller.gif") -30px -30px no-repeat; }
			
	#gallery-controller li.indicator ul {
		list-style-type: none;
		display: block;
		float: left;
		width: 9px !important;
		margin: 11px;
		padding: 0;
	}
	
	#gallery-controller li.indicator ul li {
		display: block;
		width: 9px;
		height: 9px;
		margin: 2px 0;
		background: url("../images/sprite.gallery-selector.gif") 0 -9px no-repeat;
	}
		#gallery-controller li.indicator ul li.on { background: url("../images/sprite.gallery-selector.gif") 0 0 no-repeat; }
		
p#gallery_message {
	background: black;
	color: #777;
	display: inline-block;
	padding: 20px;
	margin: 30% 0 0 100px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

#main-gallery-img {
	display: block;
	padding: 0;
	margin: 0 0 0 20px;
	float: left;
}

#main-gallery-img li {
	list-style-type: none;
	display: block;
}

/* Forms */
.textfield, textarea {
	display: block;
	background: #142933 !important;
	border: 1px solid #82B6EE !important;
	padding: 6px;
	width: 300px;
	color: white;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
}

textarea { height: 120px; }

.required {
	border-left: 4px solid #E42645 !important;
}

.req { color: #E42645; }

.validation-message {
	color: #E42645;
}

ul#contact-details {
	list-style-type: none;
	display: block;
	margin: 0;
	padding: 0;
}

	ul#contact-details li {
		display: block;
		list-style-type: none;
		padding: 0 0 10px 0;
		padding-left: 25px !important;
		margin-bottom: 10px;
		float: left;
		width: 220px;
	}
	
		ul#contact-details li a { color: white; }

.selection{
	width:200px;	
	background: #142933 !important;
	border: 1px solid #82B6EE !important;
	border-left: 4px solid #E42645 !important;
		padding: 6px;
	color:#FFF;
}

/* create a ring */

.heading { padding: 6px; background-color: #000000; }

.smallish-block select { padding: 4px; }

#stones p{padding-left:6px; font-size:11px; padding-top:7px; padding-bottom:0px; margin-bottom:0px;}

li.hiddenArea div.description{color:#737373; margin-top:5px; font-size:11px;}

#create_Left{width:745px;}
#create_Right{width:206px; float:right; background: transparent url("../images/nav-background.png") repeat; padding:10px;}
	#create_Right div{display:block; width:206px; height:36px; background:url(../images/bottom_Border.png) repeat-x bottom; padding-top:17px;}
	#create_Right div a{font-size:12px; color:#6089b6; float:right; text-decoration:none;}
	#create_Right div img{float:left; margin-right:15px; margin-top:-5px;}
	
#progress{width:744px; height:61px; float:left; margin-bottom:20px;}
	#progress div{width:96px; height:61px; float:left; background:url(../images/sprite.progress.png); margin-right:12px;}
	#progress div.intro{background-position:0px 0px;}	
		#progress div.intro.active{background-position:0px -69px;}
		#progress div.intro.finish{background-position:0px -138px;}
		
	#progress div.stone{background-position:-109px 0px;}	
		#progress div.stone.active{background-position:-109px -69px;}
		#progress div.stone.finish{background-position:-109px -138px;}
		
	#progress div.head{background-position:-216px 0px;}	
		#progress div.head.active{background-position:-216px -69px;}
		#progress div.head.finish{background-position:-216px -138px;}
		
	#progress div.shank{background-position:-324px 0px;}
		#progress div.shank.active{background-position:-324px -69px;}
		#progress div.shank.finish{background-position:-324px -138px;}
		
	#progress div.metal{background-position:-432px 0px;}	
		#progress div.metal.active{background-position:-432px -69px;}
		#progress div.metal.finish{background-position:-432px -138px;}
		
	#progress div.size{background-position:-540px 0px;}	
		#progress div.size.active{background-position:-540px -69px;}	
		#progress div.size.finish{background-position:-540px -138px;}	
		
	#progress div.complete{background-position:-648px 0px; margin:0px !important;}
		#progress div.complete.active{background-position:-648px -69px; margin:0px !important;}
		#progress div.complete.finish{background-position:-648px -138px; margin:0px !important;}
		
#create_Content{display:block; font-size:12px;}
	#create_Content a.buttons{ background:transparent url('../images/button_Right.png') no-repeat scroll  top right; display:block; float:left; height:38px; text-decoration:none; font-size:12px; font-weight:bold; letter-spacing:1px; text-transform:uppercase; padding-right:13px; line-height:35px;}
	#create_Content a.buttons span {background:transparent url('../images/button_Left.png') no-repeat; display:block; height:38px; font-family:"Myriad Pro", "Arial Black", Gadget, sans-serif; color:#FFF; text-decoration:none; padding-left:13px;}		
	#create_Content img.image_Select{flaot:left; margin:5px;}

table#create_Form{ float:left; width:445px !important;}


.metal_Choice{margin:0px 20px 20px 0px;}

table#sizes{width:100%;}
table#sizes td{text-align:center; vertical-align:middle;}



/*----------------------------*/

.glossary{width:200px; float:left; margin-right:45px; margin-bottom:20px; font-size:12px; text-align:left;}
.glossary h2{color:#83b7ef; font-size:16px;}
.glossary hr{border:0px; color:#484848; background-color:#484848; height:1px;}
.glossary.no_Margin{margin-right:0px;}
/*----------------------------*/

/* override the arrow image of the tooltip */
.tooltip.bottom {
	background:url(/tools/img/tooltip/black_arrow_bottom.png);
	padding-top:40px;
	height:55px;
}

.tooltip.bottom {
	background:url(/tools/img/tooltip/black_arrow_bottom.png);
}

/* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
	display:none;
	background:transparent url(../images/tooltip.png);
	font-size:12px;
	width:169px;
	height:40px;
	color:#fff;	
	padding:14px 5px 0px 5px;
	text-align:center;
}

/* style the trigger elements */
#dyna img {
	border:0;
	cursor:pointer;
	margin:0 8px;
	text-decoration:none;
}


#services_Tbl td{ padding-bottom:18px; padding-top:18px; border-bottom:1px solid #212e3e;}