/**
 * core.css
 * CSS Document for cd117
 * @author Tony Collings, Hayley King
 * @version 1.0 
 */
 
/*	NOTES : 690px is total width with 0px padding and 0px margin - all absolute measurements are calculated on this */ 



/*	HTML OVERRIDES
	------------------------------------------------------------- */

	body { background: #000 url('img/yc_bk.jpg') top left repeat-x; 
		font-family:Arial, Helvetica, sans-serif;
  		font-size: 12px;
        color: #fff;
		margin: 0px; padding: 0px; 
		
	}
	a:link, a:visited { color: #fff; text-decoration: none; }
	a:hover, a:active { color: #fff; text-decoration: underline; }
	h1,h2, h3, h4 { margin: 3px 0px; padding: 0px; text-align: left; }
	h4 { font-size: 14px; }
	ul, ol, li, p { margin: 0px; padding: 0px; }
	p { padding: 8px 0px; }
	

 
/*	MODIFIERS
	------------------------------------------------------------- */
	.clear { clear: both; line-height: 0px; height: 0px; font-size: 1px; display: block;  }
	.red-text {color: #c7232e; }
	.white {color: #fff; }
	.bold {font-weight: bolder; }
	
	/* Headings */
	h1 { color: #278cb8; font-size: 18px; font-weight: normal; margin: 0px; padding: 15px 0px; text-transform: uppercase; }
	h2 { font-size: 16px; font-weight: normal; margin-bottom: 15px; }
	sup,sub {font-size: 9px; }
	
	img.icon { margin-right: 5px; vertical-align: middle;  }

		
	
	/* GFX Rounded corners */
	.round_corner.horiz  {
		height:4px;
		width:5px;
		float:left;
		font-size:1px;
		line-height:1px;
	}
	
	.round_corner.horiz.top_left {
		background:url("img/rounded-corners/px-nw-corner.gif") no-repeat scroll left top #FFFFFF;;
	}
	.round_corner.horiz.center.top {
		background:url("img/rounded-corners/px-pixel-rule.gif") repeat-x scroll left top #FFFFFF; width: 775px; /* (786-10px(corners)-2(border) Need to adjust for correct page width */ 
	}
	.round_corner.horiz.top_right {
		background:url("img/rounded-corners/px-ne-corner.gif") no-repeat scroll right top #FFFFFF;;
	}
	.round_corner.horiz.bottom_left {
		background:url("img/rounded-corners/px-sw-corner.gif") no-repeat scroll left bottom #FFFFFF;;
	}
	.round_corner.horiz.center.bottom {
		background:url("img/rounded-corners/px-pixel-rule.gif") repeat-x scroll left bottom #FFFFFF;  width: 775px;
	}
	.round_corner.horiz.bottom_right {
		background:url("img/rounded-corners/px-se-corner.gif") no-repeat scroll right bottom #FFFFFF;;
	}
		
	
	/* HALO effect. Left in, just in case...  (Will not show on IE6 (_background: none) this is deliberate) */
	.halo-bg{
		position:				absolute;
		width:					33px;
		height:					40px;
	}
	
	.halo-bg-n{
		left:					0;
		top:					-40px;
		width:					100%;
		background:				url("img/halo/bg_n.png") repeat-x;
		_background: none; 
	
	}
	.halo-bg-ne{
		right:					-33px;
		top:					-40px;
		background:				url("img/halo/bg_ne.png") no-repeat;
		_background: none; 
	
	}
	.halo-bg-e{
		right:					-33px;
		top:					0;
		height:					100%;
		background:				url("img/halo/bg_e.png") repeat-y;
		_background: none; 
	
	}
	.halo-bg-se{
		right:					-33px;
		bottom:					-40px;
		background:				url("img/halo/bg_se.png") no-repeat;
		_background: none; 
	}
	.halo-bg-s{
		left:					0;
		bottom:					-40px;
		width:					100%;
		background:				url("img/halo/bg_s.png") repeat-x;
		_background: none; 
	}
	.halo-bg-sw{
		left:					-33px;
		bottom:					-40px;
		background:				url("img/halo/bg_sw.png") no-repeat;
		_background: none; 
	}
	.halo-bg-w{
		left:					-33px;
		top:					0;
		height:					100%;
		background:				url("img/halo/bg_w.png") repeat-y;
		_background: none; 
	}
	.halo-bg-nw{
		left:					-33px;
		top:					-40px;
		background:				url("img/halo/bg_nw.png") no-repeat;
		_background: none; 
	
	}
	




/*	LAYOUT
	------------------------------------------------------------- */

	/* GLOBAL */ 
	div#global-wrapper { width: 910px; position: absolute; z-index: 2; left: 50%; margin-left: -455px; text-align: left; background: none; padding-bottom: 50px; }
	
	div#background-image { width: 1024px; /* Width of Flash/Image */ position: absolute; z-index:1; left: 50%; margin-left: -512px; text-align: center; }
	
	
	div#header { margin-top: 20px; background-color: transparent; }
	div#footer { text-transform: uppercase; }
	
	div#logo { float: left; }
	
	div#main-nav-wrapper { height: 20px; }
	div#main-nav-left, div#main-nav-right { float: left; width: 5px; }
	div#main-nav { float: left; width: 900px; background: url('img/nav/top_nav_bg.jpg') top left repeat-x;  color: #3e3f51;  
	
		/*
		-moz-border-radius-topleft: 5px; 
		-moz-border-radius-topright: 5px;
		
		-khtml-border-top-left-radius: 5px; 
		-khtml-border-top-right-radius: 5px;
		
		-webkit-border-top-left-radius: 5px; 
		-webkit-border-top-right-radius: 5px; 
		
		border-top-left-radius: 5px; 
		border-top-right-radius: 5px;
	    */
		
	
	}
	div#main-nav-items { display: inline; float: left; }
	div#main-nav-items a { color: #000; text-decoration: none; } /*#3d3f57*/
	/*div#main-nav-items a:hover { color: #000; text-decoration: underline; }*/
	div#main-nav-items ul { display: block; padding: 3px 20px 0px 20px; text-transform: uppercase; }
	div#main-nav-items ul li { height: 20px; line-height: 9px; list-style-type: none; float: left; margin: 0px; margin-right: 20px; }
	div#main-nav-items ul li a:link, div#main-nav-items ul li a:visited { border: 1px solid transparent; padding: 2px 10px; display: block; text-decoration: none; }
	div#main-nav-items ul li a:hover, div#main-nav-items ul li a:active { border: 1px solid #696566; text-decoration: none;}
	div#main-nav-items ul li a:link.selected, div#main-nav-items ul li a:visited.selected { border: 1px solid #696566; text-decoration: none;}
	
	
	div#aux-nav { float: right; margin-top: 3px; margin-right: 10px; /* Fake bottom alignment */ }
	div#aux-nav ul { display: inline; }
	div#aux-nav a:link, div#aux-nav a:visited { color: #920a12; text-decoration: none; }
	div#aux-nav a:hover, div#aux-nav a:active { color: #920a12; text-decoration: underline; }
	div#aux-nav ul { display: inline; }
	div#aux-nav ul li {list-style-type: none; display: inline; border-right: 1px solid #920a12; /*#c6b78c*/ padding: 0px 5px 0px 5px; }
	div#aux-nav ul li.last-item {border-right: none; }
	
	div#footer-wrapper { height: 21px; }
	div#footer { height: 18px; padding-top: 3px; float: left; background: #d5d1ca url('img/footer-gradient.jpg') bottom left repeat-x; width: 896px; color: #575256; text-align: right; margin: 0px; 
	/*
		-moz-border-radius-bottomleft: 5px; 
		-moz-border-radius-bottomright: 5px;
		
		-khtml-border-bottom-left-radius: 5px; 
		-khtml-border-bottom-right-radius: 5px;
		
		-webkit-border-bottom-left-radius: 5px; 
		-webkit-border-bottom-right-radius: 5px; 
		
		border-bottom-left-radius: 5px; 
		border-bottom-right-radius: 5px;	

	
		text-shadow: #bebbb4 1px 1px 0px; -- Requires CSS3 aware browsers FF/Safari/Chrome etc.., sorry IE ! *evil* 
	*/
	
	}
	div#footer-left, div#footer-right { float: left; width: 7px; }

	
	div#content-wrapper { margin: 0px; padding: 0px; margin-top: 5px; background: #13121a url('../images/layout/model-left-col-fpo.jpg') top left no-repeat; padding: 6px 11px 0px 0px;  }
	div#content { float: left; margin-left: 205px; /* Width of gfx */ min-height: 496px; /* 512 - 6 - 10 */  width: 650px; background-color: #fff; border-left: 1px solid #3b3d54; border-right: 5px solid #3b3d54; padding: 0px 20px 10px 20px; color: #6f6f71;  }
	div#content a:link, div#content a:visited  {color: #c7232e; }
	div#content a:hover, div#content a:active {color: #c7232e; text-decoration: underline; }
	
	
	/* PAGE SPECIFIC */ 
	/* index.tpl */ 
	/* Override global #content */
	body#homepage #content { float: none; width: 100%; border: 0px; background-image: none; margin: 0px; padding: 0px; height: 512px; width: 910px; }
	body#homepage div#content-wrapper { padding: 0px; }
	/* for original layout with video player separate from background 
	body#homepage #right-col { position: absolute; z-index: 3; right: 20px; top: 125px; text-align: center; width: 385px; / width of video.player /  }*/
	body#homepage #right-col { position: absolute; z-index: 3000; right: 20px; top: 550px; text-align: center; width: 385px;}
	div.intro-text-copy { z-index: 4; text-align: center; color: #b5b2ad;  width: 280px; /*margin: 145px auto 0px auto; top margin when video is in background - otherwise top margin = 20 */ line-height: 26px; font-size: 13.5px; /* Override <body> of 12px */  font-weight: normal; }
	/* for copy in html */
	/*div.intro-text-copy { text-align: center; color: #b5b2ad;  width: 280px; margin: 20px auto 0px auto;line-height: 26px; font-size: 13.5px;   font-weight: normal; }  /* top margin when video is in background - otherwise top margin = 20 */ /* Override <body> of 12px */
	span.learn-more-btn {display: block; clear: both; margin-top: 10px; }
	span.fb-link { display: block; position: absolute; z-index: 10; bottom: -40px; right: -5px; font-weight: normal; font-size: 11.5px; }
	
	body#homepage span.fb-link a:link, body#homepage span.fb-link a:visited { color: #fff; }

	span.fb-link img { vertical-align: middle; margin-left: 10px; }
	
	/* features.tpl */ 
	body#features #content { background: #fff url('../images/layout/features-wand-fpo.jpg') bottom right no-repeat; font-size: 12px; }
	body#features ul#left-col,
	body#features ul#right-col { margin: 0px; padding: 0px; float: left; font-weight: bolder; color: #3a3c51; }
	body#features ul#left-col { margin-right: 100px; }
	body#features ul#left-col li,
	body#features ul#right-col li { list-style-type: none; padding: 5px 0px; }
	body#features ul#left-col ul,
	body#features ul#right-col ul {margin: 0px; padding: 0px; margin-top: 8px; padding-left: 20px; font-weight: normal; color: #6f6f71; }
	body#features ul#left-col ul li,
	body#features ul#right-col ul li{ padding: 5px 0px; list-style-image: url('img/li-dot.gif');   }	
	
	/* howto.tpl */ 
	body#howto #content { /*width: 690px; */ }
	body#howto #col-wrapper { padding: 0px 20px 10px 0px; width: 650px;   }
	body#howto #left-col { float: left; width: 300px; }
	body#howto #right-col {float: right; width: 300px; }
	body#howto ol { display: block; }
	body#howto ol li { /*padding: 0px 20px; background: url('img/how-to-bullet.gif') top left no-repeat;*/ }
	
	span.number {display: block; float: left;  margin-right: 5px; width: 15px; height: 15px; line-height: 15px; vertical-align: middle; text-align: center; background: url('img/how-to-bullet.gif') top left no-repeat;
	}
	span.step { display: block; float: left; width: 275px; }
	
	div#video-and-ib { background-color: #f4f3f1; }
	div.ib { padding: 0px 0px 15px 15px; }
	div.ib div#ib-note { padding-left: 28px; font-size: 11px; }
	
	div#expert-tips { position: absolute; z-index: 10; bottom: 71px; right: 14px; color: #fff; }
	div#expert-tips-tab { background-color: #7a150d; padding: 5px 0px 0px 10px; text-transform: uppercase; width: 100px; font-weight: bolder; 
		
		-moz-border-radius-topleft: 5px; 
		-moz-border-radius-topright: 5px;
		
		-khtml-border-top-left-radius: 5px; 
		-khtml-border-top-right-radius: 5px;
		
		-webkit-border-top-left-radius: 5px; 
		-webkit-border-top-right-radius: 5px; 
		
		border-top-left-radius: 5px; 
		border-top-right-radius: 5px;
	
	}
	div#expert-tips-content { background-color: #7a150d; padding: 15px; width: 640px; }
	
	ul#tips { margin: 0px; padding: 0px; padding-left: 10px; }
	ul#tips li {list-style-type: none; list-style-image: url('img/tips-li-dot.gif'); line-height: 24px;  }
	
	/* wtb.tpl */ 
	body#wtb #col-wrapper {}
	body#wtb #left-col {float: left; margin-top: 20px; /* Drop down marginally */ }
	body#wtb #left-col p {padding-left: 10px; padding-top: 10px; /* Position relative to 'button' */ }
	body#wtb #right-col {float: right; }
	img#asotv-image {border: 1px solid #ebebeb; }
	
	div#wtb-scroller {width: 608px; /* 690px - 40px content.padding - 40px this.padding - 2px this.border */ height: 220px; border: 1px solid #ebebeb; overflow: auto; padding: 10px 20px; margin-top: 20px; }
	div#wtb-scroller div#wtb-retailers { margin-top: 10px; }
	body#wtb .wtb-retailer { float: left; width: 175px; height: 65px; text-align: center; }
	
	/* contact.tpl */ 
	p.privacy-notice {font-size: 11px; font-weight: normal; }
	
	
	div#contact-form-content { background-color: #f2f2f2; margin: 10px; padding: 10px; }	
	

/*	FORMS	
	--------------------------------------------------------------- */
	form {margin: 0px; } 
	label {}
	
	input,
	select,
	textarea {font-family:Arial, Helvetica, sans-serif; padding: 3px; color: #6f6f71;  font-size: 12px;}
	
	.form-field {border: 1px solid #858585;  }

	
	span.error,
	ul.error, 
	li.error  {color: #c7232e; }
	textarea.errors,
	input.errors {color: #c7232e; border: 1px solid #c7232e !important;  }
	

	/* Form Specific */
	/* contact.tpl */ 
	div#contact-form-content { width: 480px; }
	div#contact-form-content ul li { display: block; clear: both; margin-top: 10px; list-style-type: none;  }
	div#contact-form-content ul li label { width: 100px; text-align: left; margin-right: 10px; display: block; float: left; font-size: 11px;   }
	div#contact-form-content input,
	div#contact-form-content textarea { float: left; }
	div#contact-form-content ul li textarea { width: 320px; /* Prevent right 'bleed' on the mac' */ }

	div#contact-form-content div#form-buttons { float: right; margin: 10px 0px; margin-right: 35px; }
	
	div#contact-form-content div#errors { color: #c7232e; font-size: 10px; line-height: 11px; }
	div#contact-form-content div#errors ul { color: #c7232e; margin: 0px; padding: 0px; margin-left: 20px; }
	div#contact-form-content div#errors ul li { list-style-type: disc; }
			
		

/*	HIDDEN PANELS
	--------------------------------------------------------- */
	#overlay{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%; 
		height: 2000px;
		background-color: #000; 
		filter:alpha(opacity=60);
		-moz-opacity: 0.6;
		opacity: 0.6;
		line-height: 0px; 
		z-index: 2000; 
	}
	#overlay-content {border: 5px solid #3b3d54; background-color: #fff; padding: 10px; width: 680px; position: absolute; z-index: 2001; left: 50%; top: 100px; margin-left: -350px; color: #6f6f71; }
	#overlay-content a {color: #c7232e;}
	#overlay-content a:hover {color: #c7232e;}