/* =====================================================================	
	home.css
========================================================================	
   	Author:	James Dacosta
   	Date:	15/06/06
------------------------------------------------------------------------
	Comments
------------------------------------------------------------------------
   	
   	Styles that are only used on the home page
   	
========================================================================*/  

/* =layout
------------------------------------------------------------------------*/
body.home #content {
	padding-top: 27px;
	}
body.home #content-wrap{
	width:582px;
	float:left;
	margin:0;
	padding:0;
}

body.home div#content-wrap div#col1{
	width: 346px;
	float:right;
	margin:0;
}

body.home div#content-wrap div#col2{
	width: 228px;
	float:left;
}

body.home #col1, body.home #col2 {
	margin-top: 0px;
}

body.home div#col3{
	width: 346px;
	float:right;
	margin-top: 0px;
}

body.home h2 {						
	font-size: 1.25em;
	color: #344454;
	font-family: "Trebuchet MS", arial, sans-serif;
	background:transparent url("../img/structure/white-arrow.gif") center left no-repeat;
	margin-bottom:10px;
	margin-top:0;
	padding-left:17px;
	border-bottom:1px solid #ccc;
}

body.home h2 a {
	color: #344454;
	text-decoration: none;
}
body.home h2 a:hover {
	color:#333;
}

/* fix issues with opencms inserting <p> tags  */
body.home h3 p {
	margin:0;
	padding:0;
}
/* =homepage promotion styles (top section)
------------------------------------------------------------------------*/

body.home div#promo div {
	margin-right: 8px;
}

body.home div#promo div div {
	margin: 0px;
	padding: 0px;
}

body.home div.graphicLink{
	width: 228px;
	float: left;
}

body.home div.flashbanner{						/* flash animation */
	width: 346px;
	float: left;
	color: #666;
}

body.home div.portal {						/* how can we help you and location selector */
	min-height: 165px;
	height: auto !important;
	height: 165px;
	background-color: #E6B800;				/* golden yellow */
	width: 346px;
	float: left;
	margin-right: 0px !important;
	position: relative;
}

body.home div.portal h3, body.home div.portal h4 {
	font-family: "Trebuchet MS", verdana, sans-serif;	
	font-size:1.1em;
	line-height:1.15em;
}

body.home div.portal a {
	color: #fff;
	font-size: 0.95em;
	text-decoration: none;
}
body.home div.portal a:hover { text-decoration: underline; }

body.home div.portal #help {				/* how can we help you box */
	position: relative;
	top: 0px;
	margin: 0px;
	padding: 0px;
	z-index: 0;
	background: #336799;
}

body.home div.portal #help h3 {
	padding: 9px 0 0 9px;
	color: #B1D4F4;
	width: 115px;
	w\idth: 100px;
	position: absolute;
	top: 0px;
	z-index: 1;
	left: 0px;
	font-size: 125%;
}

body.home div.portal #help ul {
	width: 226px;
	float: right;
	padding: 9px 0 7px 0;
}

body.home div.portal #help ul li {
	float: left;
	margin: 0 2px 2px 0;
}

body.home div.portal #help ul li a {
	background: #24486C url("../img/structure/blue-arrow.gif") no-repeat;
	background-position: 5px center;
	border: 1px solid #6994BE;
	float: left;
	padding: 1px 5px 1px 18px;
	width: 9.3em;
	w\idth: 7em;
	font-size: 0.95em;
}

body.home div.portal #help h3 em {
	display: block;
	color: #fff;
	font-style: normal;
}

/* replacement parts link */
body.home div.portal div#parts {					
	background: #24486C;
	padding: 5px 0px;
}

body.home div.portal div#parts a {
	float:left;
	background: url("../img/structure/blue-arrow.gif") left center no-repeat;
	padding: 0 0 0 13px;
	margin-left: 126px;
}

/* locations box */
body.home div.portal #selectcountry {			
	background: #E6B800;
	text-align: right;
	float: left;
	width: inherit;
	border-top: 8px solid #fff;
}

body.home div.portal #selectcountry h3 {
	color: #58430A;
	width: 169px;
	w\idth: 160px;
	text-align: left;
	font-size: 1em;
	position: relative;
	float:left;
}

body.home div.portal #selectcountry h3 span, body.home div.portal #selectcountry h3 em {
	height: 30px;
	width: 169px;
	w\idth: 160px;
	text-decoration: none;
	position: absolute;
	top: 14px;
	left: 9px;
}

body.home div.portal #selectcountry h3 span {
	color: #58430A;
	overflow: hidden;
	text-decoration: none;
}

body.home div.portal #selectcountry h3 em {
	background: url("../img/promo/home_locations.jpg") top left no-repeat;
}
/* cater for multiple languages */
body.home div.portal #selectcountry h3 em.de { background: url("../img/promo/home_locations_de.gif") top left no-repeat; }
body.home div.portal #selectcountry h3 em.ja { background: url("../img/promo/home_locations_ja.gif") top left no-repeat; }
body.home div.portal #selectcountry h3 em.zh { background: url("../img/promo/home_locations_zh.gif") top left no-repeat; }
body.home div.portal #selectcountry h3 em.it { background: url("../img/promo/home_locations_it.gif") top left no-repeat; height:32px; }
body.home div.portal #selectcountry h3 em.pt { background: url("../img/promo/home_locations_pt.gif") top left no-repeat; }

body.home div.portal #selectcountry h4 {
	font-size: 1em;
	position: relative;
	height: 15px;
	width: 169px;
	w\idth: 160px;
	text-decoration: none;
	color: #58430A;
	padding: 10px 5px 0 0;
}

body.home div.portal #selectcountry h4 span, body.home div.portal #selectcountry h4 em {
	height: 12px;
	width: 149px;
	text-decoration: none;
	position: absolute;
	top: 10px;
	left: 0px;
}

body.home div.portal #selectcountry h4 span {
	color: #58430A;
	overflow: hidden;
}

body.home div.portal #selectcountry h4 em {
	background: url("../img/promo/home_closer.jpg") top left no-repeat;
}
/* cater for multiple languages */
body.home div.portal #selectcountry h4 em.de { background: url("../img/promo/home_closer_de.gif") top left no-repeat;}
body.home div.portal #selectcountry h4 em.ja { background: url("../img/promo/home_closer_ja.gif") top left no-repeat;}
body.home div.portal #selectcountry h4 em.zh { background: url("../img/promo/home_closer_zh.gif") top left no-repeat;}
body.home div.portal #selectcountry h4 em.it { background: url("../img/promo/home_closer_it.gif") top left no-repeat; height:14px;}
body.home div.portal #selectcountry h4 em.pt { background: url("../img/promo/home_closer_pt.gif") top left no-repeat;}

body.home div.portal #selectcountry #closer {
	float: right;
	width: 50%;
	text-align: left;
}



/* =latest news list
------------------------------------------------------------------------*/
#latestnews li {
	padding: 0 0 15px 0;
	color: #888;
	line-height: 1.6em;}

#latestnews li a, ul.fancy li a  { color: #506171;}
#latestnews li a p {				/* opencms has a habit of inserting <p> tags  */
	margin:0;padding:0;
	display: inline;
}

/* =looking for something
------------------------------------------------------------------------*/

#looking {
	border: 1px solid #CBD0D6;
	background: #EAEFF5;
	width: 65%;
	w\idth: 61%;
	padding: 0 0 0 10px;
	float: left;
	margin-right: 8px;
}

#looking h3 {
	color: #426480;
	font-size: 1.1em;
	margin-top:5px;
}

#looking, ul.aftermarket {
	min-height: 65px;
	height: auto !important;
	height: 65px;
	margin: 15px 0;
}

ul.aftermarket {
	float: right;
	width: 32%;
	w\idth: 26%;
	border: 1px solid #CBD0D6;
	background: #EAEFF5;
	font-size: 1.1em;
	line-height: 1.2em;
	padding: 0px 10px;
}

ul.aftermarket li {
	background: transparent url("../img/structure/light-blue-arrow.gif") no-repeat;
	background-position: 2px 1px;
	list-style-image: url("../img/structure/arrowspace.gif");
	list-style-position: inside;
	margin:5px 0;
}
ul.aftermarket li a {text-decoration: none; }
ul.aftermarket li a:hover {text-decoration: underline; }

ul.aftermarket li a p {
	display: inline; 
	margin:0; padding:0;
}

/* =big quote
------------------------------------------------------------------------*/
blockquote.home {
	display: block;
	float: left;
	font-size: 1.3em;
	color: #426480;
	width: 250px;
	line-height: 1.4em;
	background: url("../img/structure/blue-quote.jpg") top left no-repeat;
	padding-left: 65px;
	margin-top: 10px;
}