/* 
-----------------------------------------------------------------
	BRANZ
	home.css
	
	Used only by the home page
	
	Inherits from:
	internal.css, skins.css
	
	Target Browsers:
		PC: IE6+, FF1.5+
		Mac: Safari 2+, FF2+	
	
	Updates:
		BRA 3122 - Level Home Page Refresh	
		DS, September 2010	
		
		Tested:
		- XP: IE6, IE7, FF1.5.0.1, FF2.0.0.20, FF3.0.17, FF3.5.12, FF3.6.10, Chrome 4.0.223.11, Chrome 6.0.472.63
		- Win 7: IE8, Safari 3.0.4
		- OS X 10.4.11: FF3.6.10, Safari 2.0.4, Safari 3.0.4, Safari 4.0.5
				
		Issues:		
		- Safari 2/3 - legacy bug where the stacked Search label extends beyond the field [minor]
		-	Safari 2 - Search input field retains it's border [unresolvable]
		-	FF2 - slight alignment issue in RH search box [minor]
		- Chrome 4 - slight outdent on RH search form [minor]
		
		Notes:		
 		- text-shadow - not supported in FF <3.5, any IE to date
-----------------------------------------------------------------
*/

/*
	@ #shell
	--------------------------------------------------------------	
	--------------------------------------------------------------
*/	
	
	#shell {
		background-image: url(/resources/images/ui/homepage-refresh/bg-tile-columns-no-nav.gif);
	}
	#shell-liner {
		background-image: url(/resources/images/ui/homepage-refresh/drop-shadows-no-nav.jpg);
		min-height: 1080px; /* allow the bg gradient to play out */
	} 
	#shell .liner { /* 2x .liner elements remaining: 1x in the search box, 1x in the footer */
		background-image: none; /* override internal.css */
	}	
	
/*
	@ .row .left/.center/.left-center	.right			
	--------------------------------------------------------------	
	New layout helpers that appear within .row
	--------------------------------------------------------------
*/	

	.left {
		float: left;	
		width: 233px;	
	}
	.center {
		float: left;		
		width: 545px;
	}
	.left-center {
		float: left;		
		width: 779px;			
	}		
	.right {
		width: 178px;
		float: left;
		overflow: hidden;
	}		
	
/*
	@ #header
	--------------------------------------------------------------	
	--------------------------------------------------------------
*/			
	
	#header {
		margin: 0 4px 0;
	}	
	#header p.logo {
		/* override internal.css */	
		position: static;	
	}	
	#header p#level	{
		/* override internal.css */
		left: auto;
		top: auto;
	}
	#header p#branz	{	
		/* override internal.css */
		left: auto;
		top: auto;
	}	
	
/*
	@ #header .center#content
	--------------------------------------------------------------	
	Grey angled-corner box in header
	
	#content and #summary IDs retained, 
	to allow children to inherit styling
	--------------------------------------------------------------
*/ 	
	
	#content {	
		width:545px; /* width:724px; */
		min-height: 0;
		margin: 0; 
	}
	html>body #content {
		width:545px; /* width:724px; */
		margin: 0; 
	}	
	
	/* summary */
	
	#summary { 
		background: #ececec url(/resources/images/ui/summary-top-shadow.png) no-repeat;		
		float: none; /* internal.css */
		padding-top: 10px;
	}			
	#home #content #summary {
	 /* html>body overides */	 
		margin-left: 0;
		margin-bottom: 0;		
	}	
	.cs-lightgrey #summary {
	/* emulating skins.css */	
		background-color: #ececec;
	}		
	
	/* summary liner */	
	
	#shell #summary-liner {
	/* emulating internal.css */
		background: url(/resources/images/ui/summary-gradient-btm.png) no-repeat 100% 100%;		
		padding: 40px 0 15px 0;	
	}	
	
/*
	@ #body .left-center #primary-nav-home
	--------------------------------------------------------------	
	Used to be #navbox	
	
	Note: text emboss effect will only display in browsers
	that support text-shadow
	
	Tried a box shadow but the design varies the shadow intensity,
	so it was easier to go with the IE fallback for all browsers.
	--------------------------------------------------------------
*/ 	

	#primary-nav-home {
		margin-bottom: 1.6em;
		margin-left: 1px;
	}
	#primary-nav-home ul,
	#primary-nav-home li	{
		background-image: none;
		list-style: none;
		padding: 0;
		margin: 0;
	}
	#primary-nav-home li {
		display: inline;
	}
	#primary-nav-home a {
		position: relative; /* AP */
		display: block;
		float: left;
		
		width: 83px;
		
		font-family: Arial, Helvetica, sans-serif;
		font-weight: bold;
		text-decoration: none;		
		text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);		
		text-transform: uppercase;
		
		color: #fff; /* light text on dark background */	
		background-repeat: no-repeat;
		background-position: 0 4px;
		
		border: 1px solid;	
		margin-left: 1px;	
	}
	#primary-nav-home a .box-liner {
		display: block;
		/*background: url(/resources/images/ui/box-shadow-top.png) no-repeat;*/
		background-repeat: repeat-x;
		background-position: 0 100%;
		min-height: 46px; /* 62 - 16px top offset */		
		padding: 12px 9px 0 9px;		
		margin-top: 4px;
		
		width: 65px;
		overflow: hidden;			
	}
	#primary-nav-home a .box-fold {
		position: absolute;
		bottom: -1px;
		right: -1px;
		background-repeat: no-repeat;	
		min-height: 0;
		width: 10px;
		height: 10px;
		overflow: hidden;				
		padding: 0;
		border: 0;
		margin: 0;
		
		-box-shadow: none;			
		-moz-box-shadow: none;
		-webkit-box-shadow: none;		
	}		
	
	/* brown */
		
	#primary-nav-home .cs-brown a {
		background-color: #a18164;
		background-image: url(/resources/images/ui/homepage-refresh/box-shadow-cs-brown.gif); /* IE8- */
		border-top-color: #cebdad;
		border-right-color: #806750;
		border-bottom-color: #64503d;		
		border-left-color: #c6b4a3;		
	}	
	#primary-nav-home .cs-brown a .box-liner {
		background-image: url(/resources/images/ui/homepage-refresh/box-gradient-cs-brown.jpg);		
	}	
	#primary-nav-home .cs-brown a .box-fold {
		background-image: url(/resources/images/ui/homepage-refresh/box-fold-cs-brown.gif);
	}
	
	/* red (orange) */	
	
	#primary-nav-home .cs-red a {
		background-color: #ec6b1c;
		background-image: url(/resources/images/ui/homepage-refresh/box-shadow-cs-red.gif); /* IE8- */
		border-top-color: #f5b187;
		border-right-color: #a83e10;
		border-bottom-color: #9a310d;		
		border-left-color: #e79b77;		
	}		
	#primary-nav-home .cs-red a .box-liner {
		background-image: url(/resources/images/ui/homepage-refresh/box-gradient-cs-red.jpg);		
	}	
	#primary-nav-home .cs-red a .box-fold {
		background-image: url(/resources/images/ui/homepage-refresh/box-fold-cs-red.gif);
	}	
	
	/* lightgreen */		
	
	#primary-nav-home .cs-green a {
		background-color: #b8c441;
		background-image: url(/resources/images/ui/homepage-refresh/box-shadow-cs-green.gif); /* IE8- */
		border-top-color: #dae09a;
		border-right-color: #949d34;
		border-bottom-color: #747c26;		
		border-left-color: #c4ca88;		
	}		
	#primary-nav-home .cs-green a .box-liner {
		background-image: url(/resources/images/ui/homepage-refresh/box-gradient-cs-green.jpg);		
	}	
	#primary-nav-home .cs-green a .box-fold {
		background-image: url(/resources/images/ui/homepage-refresh/box-fold-cs-green.gif);
	}		
	
	/* teal */
	
	#primary-nav-home .cs-teal a {
		background-color: #6596a1;
		background-image: url(/resources/images/ui/homepage-refresh/box-shadow-cs-teal.gif); /* IE8- */
		border-top-color: #adc8ce;
		border-right-color: #507780;
		border-bottom-color: #3d5e65;		
		border-left-color: #9fb9c0;		
	}		
	#primary-nav-home .cs-teal a .box-liner {
		background-image: url(/resources/images/ui/homepage-refresh/box-gradient-cs-teal.jpg);		
	}	
	#primary-nav-home .cs-teal a .box-fold {
		background-image: url(/resources/images/ui/homepage-refresh/box-fold-cs-teal.gif);
	}			
	
	/* grey */
	
	#primary-nav-home .cs-grey a {
		background-color: #898989;
		background-image: url(/resources/images/ui/homepage-refresh/box-shadow-cs-grey.gif); /* IE8- */
		border-top-color: #c1c1c1;
		border-right-color: #676767;
		border-bottom-color: #585858;		
		border-left-color: #b2b2b2;		
	}		
	#primary-nav-home .cs-grey a .box-liner {
		background-image: url(/resources/images/ui/homepage-refresh/box-gradient-cs-grey.jpg);		
	}	
	#primary-nav-home .cs-grey a .box-fold {
		background-image: url(/resources/images/ui/homepage-refresh/box-fold-cs-grey.gif);
	}	
	
	/* darkgreen */
	
	#primary-nav-home .cs-darkgreen a {
		background-color: #a19b65;
		background-image: url(/resources/images/ui/homepage-refresh/box-shadow-cs-darkgreen.gif); /* IE8- */
		border-top-color: #cecbad;
		border-right-color: #7e794e;
		border-bottom-color: #64603d;		
		border-left-color: #c5c1a2;		
	}	
	#primary-nav-home .cs-darkgreen a .box-liner {
		background-image: url(/resources/images/ui/homepage-refresh/box-gradient-cs-darkgreen.jpg);		
	}	
	#primary-nav-home .cs-darkgreen a .box-fold {
		background-image: url(/resources/images/ui/homepage-refresh/box-fold-cs-darkgreen.gif);
	}	
	
	/* purple */
	
	#primary-nav-home .cs-purple a {
		background-color: #a86f6f;
		background-image: url(/resources/images/ui/homepage-refresh/box-shadow-cs-purple.gif); /* IE8- */
		border-top-color: #d1b3b3;
		border-right-color: #855858;
		border-bottom-color: #6f4343;		
		border-left-color: #be9e9e;		
	}		
	#primary-nav-home .cs-purple a .box-liner {
		background-image: url(/resources/images/ui/homepage-refresh/box-gradient-cs-purple.jpg);		
	}	
	#primary-nav-home .cs-purple a .box-fold {
		background-image: url(/resources/images/ui/homepage-refresh/box-fold-cs-purple.gif);
	}		
	
	/* gold */
	
	#primary-nav-home .cs-gold a {
		background-color: #dcbd2a;
		background-image: url(/resources/images/ui/homepage-refresh/box-shadow-cs-gold.gif); /* IE8- */
		border-top-color: #eddd8e;
		border-right-color: #b09821;
		border-bottom-color: #8b7716;		
		border-left-color: #e8d681;		
	}		
	#primary-nav-home .cs-gold a .box-liner {
		background-image: url(/resources/images/ui/homepage-refresh/box-gradient-cs-gold.jpg);		
	}	
	#primary-nav-home .cs-gold a .box-fold {
		background-image: url(/resources/images/ui/homepage-refresh/box-fold-cs-gold.gif);
	}		
	
	/* lightgrey */
	
	#primary-nav-home .cs-lightgrey a {
		background-color: #d3d3d3;
		background-image: url(/resources/images/ui/homepage-refresh/box-shadow-cs-lightgrey.gif); /* IE8- */
		color: #585757;
		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); /* dark text on light background */		
		border-top-color: #e8e8e8;
		border-right-color: #a9a9a9;
		border-bottom-color: #9c9c9c;		
		border-left-color: #dddddd;		
	}	
	#primary-nav-home .cs-lightgrey a .box-liner {
		background-image: url(/resources/images/ui/homepage-refresh/box-gradient-cs-lightgrey.jpg);		
	}	
	#primary-nav-home .cs-lightgrey a .box-fold {
		background-image: url(/resources/images/ui/homepage-refresh/box-fold-cs-lightgrey.gif);
	}		
	
/*
	@ #body .right #search-wrapper
	--------------------------------------------------------------	
	--------------------------------------------------------------
*/ 		

	#search-wrapper {
		background: none;
		color: #666; 
	}
	#search { /* fieldset */
		background: #f8f8f8 url(/resources/images/ui/homepage-refresh/search-box-bg.jpg) no-repeat 0 100%;		
		padding: 0.5em 0 0.5em 0; 
		margin-left: -3px;
		margin-top: -2px;
	}
	#shell #search p.input {
		width: 110px; /* this nudges the submit button into place */
	}
	
	#body #search p { 
		margin:0; 
		padding:0; 
	}	
		
	#body .stacked-labels .group, 
	#body .stacked-labels .liner { 
		background:none;
		margin:0; 
	}
	#body .stacked-labels .group {
		padding-left: 10px;
	}	
	#body .stacked-labels .submit {
		margin-top: -3px;
	}		
	#body .text .input span,
	html>body #body .text .input span {
		background-image: url(/resources/images/ui/homepage-refresh/textfield-footer-no-shadow.gif);
	}		
	#search .text .input span input {
		padding-bottom: 1px;
	}
	
/*
	@ #body #content-home 
	--------------------------------------------------------------	
	Copying from #content in internal.css
	--------------------------------------------------------------
*/ 		

	#content-home {
		color: #4d4d4d;
		min-height: 0; /* TODO: #content was 817px, now 817 less the height of #content */
	}	
	#content-home h2 { 
		display:inline;
		color:#333;
		font-size:1.1em;
		font-weight: normal;
		padding-right: 85px; /* increase width of border */
		padding-bottom: 0.45em;
		border-bottom:3px double #e1dbd4; 		
		margin:0;		
	}		
	#content-home p,
	#content-home li {
		line-height: 1.45em;
	}
	#content-home p { 		
		margin-bottom:1em;		
	}	
	#content-home ul,
	#content-home li {	
		list-style: none;
		padding-left: 0;
		margin-left: 0;
	}
	#content-home ul {
		margin-top: 1.45em;
		margin-left: 5px;
	}	
	#content-home li {	
		background: url(/resources/images/ui/homepage-refresh/list-bullet.gif) no-repeat 0 0.6em;
		padding-left: 9px;
		margin-bottom: 1em;
	}	
	#content-home a,
	#content-home .link-arrow { 
		color: #934925;
	}			
	
/*
	@ #body #content-home .left-center #intro
	--------------------------------------------------------------	
	#intro was #content #intro in home.css
	--------------------------------------------------------------
*/ 	
	
	#intro { 
		padding:0 27px; 
	} 
	#intro h1,
	#intro p {
		display: inline; /* run together as an intro paragraph */
		
		color: #aba8a8;		
		
		font-family: "Times New Roman",Times,serif;
		font-weight: normal;		
		font-size: 1.8em;
		
		line-height: 1.1;	
		
		padding:0; 
		margin:0;					
	}
	#intro h1 {
		color: #7e7979;
	}	
	#intro .rule {  
		height: 3px; 
		background: url(/resources/images/ui/border.gif) repeat-x scroll 0 100%;
		margin: 1em 0 1.9em;
		padding-bottom: 3px;				
	}
	html>body #intro .rule { 
		margin-top: 1.4em; 
	}	
	
/*
	@ #body #content-home .left-center #hero 
	--------------------------------------------------------------	
	Note that the mass of extra HTML is as per the legacy Typo3 markup
	--------------------------------------------------------------
*/ 		

	/* csc-textpic-image */

	#hero .csc-textpic-image {
		float: left; /* just in case, also in the typo3 stylesheet */
		width: 385px;
	}
	
	/* csc-textpic-text */	
		
	#hero .csc-textpic-text { 
		padding-top: 0.2em; 
		margin-left: 400px;
	}		
	#hero .csc-textpic-text h2 {
		font-weight: bold;
		color: #393939;
		margin:0;		
	}
	#hero .csc-textpic-text h3 {
		font-weight: normal;
		color: #000;
		font-size: 1em;
		line-height: 1.4;
		margin-top: 1.5em;
		margin-bottom: 0.2em;
	}	
	#hero .csc-textpic-text p.date {
		text-transform: uppercase;
		font-size: 0.8em;
		color: #837d5f;
		margin-bottom: 0.2em;
	}		
	
/*
	@ #body #content-home .left-center .cols-2
	--------------------------------------------------------------	
	--------------------------------------------------------------
*/		

	.cols-2 {
		padding: 0 17px 0 27px;
		margin-bottom: 1.9em;
	}
	.col-1 { 
		float:left;
		width: 385px;
	}
	.col-2 { 
		margin-left: 400px;
	}		
	
/*
	@ #footer-nav
	--------------------------------------------------------------	
	--------------------------------------------------------------
*/		
	
	#home #footer-nav {
		font-size: 0.85em;		
		color: #414142;
		padding-top: 0;
		border-top: 0;		
	}
	.cs-lightgrey #footer-nav .liner a {
		color: #934925; /* overwrite skins.css */
	}
	#footer-nav ul {
		padding-top: 2.4em;
		margin: 2.1em 13px 0;
	}	
	#footer-nav p {
		padding-bottom: 20px;
		margin: 0.4em 13px 0.5em;
	}	
	#shell #footer-nav #backtotop {
		background:url(/resources/images/ui/homepage-refresh/footer-bg-to-white.jpg) no-repeat;
		margin: -160px 0 0 -239px;
		padding: 88px 0 32px;
		width: 239px;
	}
	#footer-nav #backtotop-mirror {
		right: 1px;
	}