/*
	--  ----- --  ----- --  ----- -- 
	Title:     		PCS layout CSS file
	Amended:   		January 2010
	Created By:		Lynsey Buckley-Ratcliff - me@lynseybuckley.me.uk
	--  ----- --  ----- --  ----- -- 
	
*/
/* GLOBAL
---------------------------------------------------------- */
			* { margin: 0; padding: 0; list-style-type: none; outline: none}
			body { margin: 0; padding: 0; font-size: 100%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #000; text-align: center; background: url(../images/background.gif) repeat 0 0;}
			
			img { border: none; margin: 0; padding: 0;}
			a img { border: none; margin: 0; padding: 0;}
			
			div,p,form,h1,h2,h3,h4,h5,hr,ul,dl,dd,dt ul,ol,li,object,param,table,tr,td,th
			{ margin: 0; padding: 0;}
			
			input,textarea,button,select { font-family: Arial, Helvetica, sans-serif;}
			table { display: block; border-collapse: collapse; border: none;}
			th { text-align: left;}
			
/* STRUCTURE STYLES
---------------------------------------------------------- */
			#outer-container { width: 952px; margin-left: auto; margin-right: auto; background: url(../images/sides-bg.png) 0 0 repeat-y;}
			#container { width: 928px; margin-left: auto; margin-right: auto; text-align: left; background: #ffffff;}

			/* HEADER
			---------------------------------------------------------- */
			#header { width: 928px; height: 132px; background-color: #F3F1EF;}
			#logo { float: left; position: relative; width: 200px;}
			#top-links { width: 893px; background-color: #242422; text-align: right; padding: 8px 35px 8px 0;}
			#top-links a, #top-links a:visited, #top-links a:hover { color: #917045; font-size: 75%; text-decoration: none; font-weight: normal;}
			
			#header-subnav { width: 928px; height: 136px;}
			#subnav { float: left; position: relative; width: 236px; height: 136px; background-color: #A7A49F;}
			#subnav-img { float: right; position: relative; display: inline; width: 692px; height: 136px;}
											
			/* MAIN LAYOUT
			---------------------------------------------------------- */			
			#wrapper { width: 928px;}
			#leftcol { float: left; position: relative; width: 235px; padding: 0; margin-top: 78px;}
			#maincol { float: right; position: relative; display: inline; width: 673px; padding: 0; margin-left: 20px;}
			
			#maincol-1 { width: 474px; float: left; position: relative; margin-right: 22px;}
			#maincol-2 { width: 200px; float: right; display: inline; position: relative;}
			
			.leftpanel { width: 299px; margin-right: 37px; margin-top: 10px; float: left; position: relative;}
			.rightpanel { width: 299px; margin-right: 23px; margin-top: 10px; float: right; display: inline; position: relative;}

			#request-quote { clear: both;}
			
/* NAVIGATION
---------------------------------------------------------- */	
				
			/* MAIN NAVIGATION */
			#nav { width: 688px; float: left; position: relative; margin: 50px 0 0 30px; font-size: 70%;}
			ul#navlist { padding: 0; margin: 0;}
			#navlist li { float: left; display: inline; list-style-type: none; border-right: 1px solid #585857;}
			#navlist li a { padding: 0 9px 8px 8px; color: #242422; text-decoration: none;}
			#navlist li a:hover, #navlist li a.active { color: #917045; text-decoration: none;}
			
			#navlist .last { border: 0;}
			
			/* SUB NAVIGATION */
			ul#subnavlist { margin: 0; padding: 0; font-size: 70%;}
			#subnavlist li { margin: 0; padding: 8px 0 9px 22px;}
			#subnavlist li a { color: #ffffff; text-decoration: none;}
			#subnavlist li.active { color: #917045; text-decoration: none; background-color: #C5C6C7;}
			
			/* BREADCRUMB */
			#breadcrumb { float: left; display: inline; width: 928px; height: 24px; font-size: 70%; background-color: #323133;}
			#breadcrumb ul { list-style: none; margin: 0; padding: 4px 0 0 254px;}
			#breadcrumb li {  display: inline; list-style-type: none; color: #868788;}
			#breadcrumb a { color: #ffffff; text-decoration: none;}
			#breadcrumb a:hover, #breadcrumb a.active { color: #ffffff; text-decoration: underline;}
			#breadcrumb .active { color: #ffffff; text-decoration: none;}
			#breadcrumb li.on { color: #ffffff;}
			
			/* FOOTER NAVIGATION */
			ul#nav-bottom { margin-left: 333px; padding: 0;}
			#nav-bottom li { float: left; display: inline; font-size: 60%; padding: 0 4px 0 4px; color: #000000; border-right: 1px solid #000000;}
			#nav-bottom .last { border-right: 0;}
			#nav-bottom a, #nav-bottom a:visited,#nav-bottom a:hover, #nav-bottom a.active { color: #000000; text-decoration: none;}
			#nav-bottom a:hover, #nav-bottom a.active { color: #c4262e; text-decoration: none;}
				
/* CONTENT STYLES
--------------------------------------------------------- */
				
			/* MAIN CONTENT */
			#main-content { margin: 0; padding: 0 15px 0 0; color: #323133;}
			#main-content h1 { font-size: 120%; font-weight: normal; color: #9D7141; margin: 26px 0 22px 0;}
			#main-content h2 { font-size: 120%; font-weight: normal; color: #9D7141; margin: 16px 0 22px 0;}
			#main-content h3 { font-size: 75%; font-weight: bold; color: #917045; margin-bottom: 0;}
			#main-content p { font-size: 75%; line-height: 18px; margin-bottom: 20px; color: #323133;}
			
			#main-content ul { font-size: 75%; margin: 0; padding-bottom: 20px; color: #323133;}
			#main-content ul li { padding-left: 17px; line-height: 18px; margin-bottom: 10px; background: url(../images/bullet.gif) 0 6px no-repeat;}
			
			#main-content ol { font-size: 75%; margin: 0; padding-bottom: 10px; color: #585857;}
			#main-content ol li { padding-left: 25px; margin-bottom: 5px; list-style: decimal; margin-bottom: 10px;}
			
			#main-content a, #main-content a:visited { color: #917045; text-decoration: none;}
			#main-content a:hover, #main-content a.active { color: #917045; text-decoration: underline;}
			
			#main-content-text { float: left; position: relative; width: 438px; margin-right: 10px;}
			#main-content-img { float: right; display: inline; position: relative; width: 185px; margin: 75px 40px 0 0;}
			
			#warranty-direct, #wilson-group { float: right; position: relative; background-color: #EBEBEB; width: 200px; height: 200px; padding: 10px; margin: 0 20px 0 20px;}
			#servicingUSP { float: right; position: relative; background-color: #EBEBEB; width: 200px; padding: 10px 10px 0 10px; margin: 0 20px 10px 20px;}
			#warranty-direct h4, #wilson-group h4 { color: #000000; font-size: 80%; padding-bottom: 10px}
			#warranty-direct p, #wilson-group p { color: #000000; margin-bottom: 5px; font-size: 70%;}
			
			.disclaimer { color: #9B9C9D; font-size: 70%; margin-bottom: 20px; margin-right: 25px; line-height: 17px;}
			
			.highlight, .required { color: #c4262e;}
			.required { position: absolute; vertical-align: top; left: 134px; margin-left: 15px;}
			.required2 { color: #c4262e; margin-left: 10px;}
			
			/* CONTENT BOX */
			.contentbox { background: url(../images/leftnav-bg.jpg) 0 0 no-repeat; width: 194px; height: 340px; padding: 10px; margin-left: 21px;}
			.contentbox h1 { color: #ffffff; font-size: 100%; margin-bottom: 15px; font-weight: normal;}
			.contentbox h2 { color: #ffffff; font-size: 75%; margin-bottom: 15px; font-weight: normal;}
			.contentbox p { font-size: 75%; line-height: 17px; color: #ffffff; margin-bottom: 15px;}			
			.contentbox a { font-size: 100%; color: #917045; text-decoration: none;}
			.contentbox a:hover, .contentbox a.active { color: #917045; text-decoration: underline;}
				
			/* SEARCH BOX */	
			#searchbox { float: right; display: inline; position: relative; width: 175px; height: 26px; padding-top: 5px;}
			#searchform { margin: 0; padding: 0; text-align: right;}
			#search { vertical-align: middle; padding: 0;}
			
			#Search { border: 1px solid #a0a3a3; color: #585857; font-size: 70%;}
			#Topichere { border: 1px solid #a0a3a3; color: #585857; font-size: 70%;}

			.topic_highlight { padding-bottom: 6px; width: 120px; border-bottom: 6px solid #c4262e;}

			/* QUOTES (blockquote) */
			#main-content blockquote p { font-size: 75%; line-height: 16px; color: #585857; margin-top: 5px;}
			#main-content blockquote .bqend { float: right; position: relative; width: 47px; vertical-align: top}	
			#main-content blockquote .name { color: #666666; font-size: 80%; padding-top: 40px; float: left; position: relative; width: 100px; margin-top: 10px;}
			#main-content blockquote .title { color: #666666; font-size: 80%; clear: left; float: left; position: relative; width: 100px;}			
				
/* FOOTER
---------------------------------------------------------- */
			#footer { clear: both; width: 928px; height: 37px; background-color: #242422; font-size: 80%;}
			#footer li { display: inline; border-right: 1px solid #ffffff; padding: 0 9px 0 6px; color: #ffffff;}
			#footer a, #footer a.active { color: #ffffff; text-decoration: none;}
			#footer a:hover { text-decoration: underline;}
			#footer .last { border: 0;}

			#nav-col1 { width: 545px; float: left; position: relative; text-align: left; padding: 10px 0 11px 20px;}
			#nav-col2 { width: 328px; float: right; position: relative; display: inline; text-align: right; padding: 10px 20px 11px 0;}
			
/* FORMS
---------------------------------------------------------- */			
			.form { font-size: 100%; margin: 25px 0 25px 0;}
			.form p { margin: 0; padding: 0;}
			.form a { font-weight: bold; color: #585857; text-decoration: underline; margin-right: 20px;}
			.form a:hover { color: #c4262e; text-decoration: underline;}

			.form fieldset { border: none; margin-bottom: 10px;}
			.form legend { display: none;}
			.form label { width: 100px; float: left; text-align: left; padding-right: 10px; margin: 0;}
			.form input { width: 350px; padding: 3px; margin: 0 10px 0 0;}
			
			.form .clear, .form .formsubmit { clear: both;}
			
			.form .txt-short { width: 111px;}
			.form .positining { float: left; display: inline; position: relative;}
					
			.form .value { width: 70px; float: left; display: inline; position: relative; margin-bottom: 15px;}
			.form .mileage { width: 100px; float: left; display: inline; position: relative; margin-bottom: 15px; margin-left: 52px}
			.form span.lmileage { white-space: nowrap;}
			
			.form .submit { width: 90px; padding: 0; }
			.form .clearform { border: none; width: 90px;}
			
			.notification_error
			{
			border: 1px solid #A25965;
			font-size: 80%;
			height: auto;
			width: 90%;
			padding: 4px;
			background: #F8F0F1;
			text-align: left;
			-moz-border-radius: 5px;
			}
			
			.notification_ok
			{
			border: 1px #567397 solid;
			font-size: 80%;
			height: auto;
			width: 90%;
			padding: 8px;
			background: #f5f9fd;
			text-align: center;
			-moz-border-radius: 5px;
			margin-bottom: 25px;
			}

/* ADDITIONAL STYLES
---------------------------------------------------------- */ 
			.clearfix:after { content: " "; display: block; height: 0; clear: both; visibility: hidden;}
			.clearfix { display: inline-table;}
			/* Hides from IE-mac \*/
			* html .clearfix { height: 1%;}
			.clearfix { display: block;}
			/* End hide from IE-mac */

