/* this template was created for and by Phase New Media -- 

this page is broken into six section :

-- universal styles
-- header - including bnav and logo
-- hero img
-- anav
-- main content - for a number of cols
-- footer 

-- colours

dark blue: #07194C
anav blue: #0066CC
pale blue: #E0F5FF (txt background)
blue box: #EDF6FA
green: #336600
orange: #FF9900
grey: #EFEFEF (border colour)
home page txt blue: #C5CAD4
*/



/* **************************************************************** */
/* ********************** universal styles ************************ */
/* **************************************************************** */

/* Add scrollbars */
html { height: 101%; } /* add scrollbars to borwsers that do not have them - this eliminates page shift between long and short pages */ 

.clear { clear: both; }

body { background: url(../images/background.jpg) repeat-x top #000; font-size: 1em; font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; text-align:center; }

img { border: none; margin:0px; padding:0px;}


#flashcontent1 {float:left; height:174px; background: #13317A; }

#flashcontent_home {float:left; height:290px; background: #13317A; }

#flashcontent2 {float:right; height:174px; background: #EE7F30; }

#flashcontent3 {height:152px; clear:both; padding: 5px 0px 0px 0px; }	


/* Centre page */
#centrer { width: 700px; margin: 0 auto 20px; background: #292929; text-align:left; position:relative; }
/*#centrer { width: 700px; margin-top:0px; margin:auto; background: #F7FCFF; }*/
/* **************************************************************** */
/* ************************ header styles ************************* */
/* **************************************************************** */

#header { padding: 0; position: relative; height: 74px; background: #FFF; } /* the relative position here helps the absolute positioning for containing elements. it also allows you to use height */
#address { position: absolute; top: 27px; left: -140px; font-size: 70%; color: #999; text-align: right; } /* removed p tags to get consistent positioning */
#logo { position: absolute; top: 18px; left: 0; }
#logocommunity { position: absolute; top: 28px; left: 436px; }
#survey { position: absolute; top: 28px; left: 450px; }
#logofpv { position: absolute; top: 74px; left: 268px; }
#logoford { position: absolute; top: 74px; left: 412px; }

	

/* **************************************************************** */
/* ************************** Hero img **************************** */
/* **************************************************************** */
#hero_img { border: none; padding:0px; margin: 69px 0px 0px 0px; height:297px; background: #07194C;}
#hero_img ul { list-style: none; padding: 0px; margin: 0px; }
#hero_img li { padding: 0px; margin: 0px; }
.fiximggap {margin: -3px 0px 0px 0px;}
#hero_img_default { border: none; padding:0px; margin: 69px 0px 0px 0px; height:290px; background: #07194C;}
#hero_img_home { border: none; padding:0px; margin: 69px 0px 0px 0px; height:420px; background: #07194C;}
#hero_img_home ul { list-style: none; padding: 0px; margin: 0px; }
#hero_img_home li { padding: 0px; margin: 0px; }
#hero_img_home_drive { border: none; padding:0px; margin: 69px 0px 0px 0px; height:326px; background: #07194C;}
#hero_img_home_drive ul { list-style: none; padding: 0px; margin: 0px; }
#hero_img_home_drive li { padding: 0px; margin: 0px; }
#hero_img2 { border: none; padding:0px;	margin: 69px 0px 0px 0px; height:305px;}
#hero_img3 { border: none; padding:0px;	margin: 69px 0px 0px 0px; height:314px;}
#hero_img4 { border: none; padding:0px;	margin: 69px 0px 0px 0px; height:345px;}
#hero_img5 { border: none; padding:0px;	margin: 10px 0px 0px 0px; height:345px;}
#herospecials { border: none; padding:0px;	margin: 69px 0px 0px 0px; height:209px;}
#hero_flash img{ 
	/*float: left;*/
	padding:0px;
	margin:0px;
	border-bottom: 0px; 
	
}
#hero_flash{ 
	display:block;
	text-align:center;
	/*float:left;*/
	border-bottom: 0px; 
	margin:0px;
	padding: 0px;

}
/* **************************************************************** */
/* **************************** Anav  ***************************** */
/* **************************************************************** */
#anav { display: block;height:28px; overflow:hidden;}
#anav ul { list-style: none; padding: 0; margin: 0; }
#anav li { float: left; padding: 0; margin: 0px; height:28px;}

/* **************************************************************** */
/* ************************ Home Content  ************************* */
/* **************************************************************** */

#homebodycontent { position: relative; background: url(../images/background_home.jpg) no-repeat top; width: 700px; height: 211px; color: #FFF; } /* position relative here works with position absolute to place the metrofordlife logo. Did this to float the logo independently of the previous 2 columns, ie instead of containing the the metrofordlife logo in a 3rd col  */
#homebodycontent h1 { font-size: 70%; font-weight: bold; margin: 2px 0 2px 0; padding: 0; color: #C5CAD4;}
#homebodycontent p { font-size: 70%; margin: 0 5px 10px 0; padding: 0; color: #C5CAD4; line-height: 98%; }
#homebodycontent a { color: #E0F5FF; }
#homebodycontent a:hover { color: #999; }

#logometrofordlife { position: absolute; top: 0px; left: 512px;  padding: 0; margin: 0; } /* png 8 file index transparency  */


#default-homebodycontent { display:block; float:left; position: relative; background: url(../images/background_home2.jpg) no-repeat top; width: 700px; height: 211px; color: #FFF; } /* position relative here works with position absolute to place the metrofordlife logo. Did this to float the logo independently of the previous 2 columns, ie instead of containing the the metrofordlife logo in a 3rd col  */
#default-homebodycontent2 { display:block; float:left; background: url(../images/background_home2.jpg) no-repeat top; width: 700px; height: 195px; color: #FFF; } 
#default-homebodycontent h1 { font-size: 70%; font-weight: bold; margin: 2px 0 2px 0; padding: 0; color: #C5CAD4;}
#default-homebodycontent p { font-size: 70%; margin: 0 5px 10px 0; padding: 0; color: #C5CAD4; line-height: 98%; }
#default-homebodycontent a { color: #E0F5FF; }
#default-homebodycontent a:hover { color: #999; }

#homepromo { width:700px; position:relative; z-index:100; }
#homepromo ul { list-style: none; padding: 0px 0 0 0px; margin: 0px; }
#homepromo li { padding: 0px 2px 0 0 ; margin: 5px 0 0 0px; display:inline; }
#homepromo li img { margin:5px 0 -4px 0px;}

.homecol1 { float: left; width: 300px; margin-top: 3px;}
.homecol2 { float: left; width: 300px; margin-top: 3px; z-index:3;}
.homebanner { clear: left; float: left; padding: 0; margin: 3px 5px 7px 0; }

#stocksearch { display:block; float:left; position: relative; background-color:#061E5C; width: 700px; height: 120px; color: #FFF; margin:0; padding:0;}
#stocksearchframe {width:410px; height:100px; margin:10px 0px; padding:0px; background-color:#061E5C; overflow:hidden; float:left;}

#default-logometrofordlife { position: absolute; top: -162px; left: 417px;  padding: 0; margin: 0; z-index:2; } /* png 8 file index transparency  */
#default-logometrofordlife2 { position: absolute; top: -162px; left: 417px;  padding: 0; margin: 0; z-index:0; } /* png 8 file index transparency  */


/* *** */







/* **************************************************************** */
/* ************************ Main Content  ************************* */
/* **************************************************************** */

#bodycontent h1 { clear: both; font-size: 240%; display: block; margin: 0 10px 5px 8px; padding: 0; color: #07194C; }
#bodycontent h2 { clear: left; font-size: 16px; margin: 5px 10px; padding: 10px 0 0 16px ; color: #fff; text-transform: uppercase; line-height:20px;}
#bodycontent h3 { clear: left; font-size: 100%; display: block; margin: 10px 10px 0px 25px; padding: 0; color: #999; text-transform: uppercase;  }
#bodycontent p {
	font-size: 100%;
	display: block;
	color: #CCC;
	margin: 0;
	padding:10px 25px 10px 25px;
	line-height: 150%;
}
#bodycontent a { color: #fff; text-decoration:none;}
#bodycontent a:hover { color: #999; text-decoration:none; }
#timer {padding:5px; font-size:65%; width:270px; position: absolute; top:500px; right:0px; background:#444444; border:1px dashed #666;}
#timer a { color:#2E8FFC; text-decoration:underline; }
#timer a:hover  { color:#2E8FFC; text-decoration:underline; }

#vipcontent { margin: 80px 0px 0px 0px;}
#vipcontent h1 { clear: both; font-size: 240%; display: block; margin: 0 10px 5px 8px; padding: 0; color: #07194C; }
#vipcontent h2, #preownedcontent h2 { clear: left; font-size: 16px; margin: 5px 10px; padding: 0; color: #07194C; text-transform: uppercase; line-height:20px;}
#vipcontent h3 { clear: left; font-size: 70%; display: block; margin: 5px 10px; padding: 0; color: #333; text-transform: uppercase;  }
#vipcontent p { font-size: 70%; display: block; color: #333; margin: 0; padding: 10px; line-height: 130%; }
#vipcontent a { color: #07194C; }
#vipcontent a:hover { color: #999; }

#landing { colour:#015697;padding:15px;height:230px;margin:0px;background: url(../images/landing/mstewart.jpg) no-repeat center bottom;font-size:75%; background-color:#FFFFFF;}
#landing ul { width:240px; float:left;padding:0px 0 15px 0;margin:0px;list-style:none;colour:#015697;}
#landing li { padding:0px 0 15px 15px;margin:0px;list-style:none;background:url(../images/landing/bullet.gif) no-repeat left 4px;colour:#015697;}
.col2 { width:260px; float:right;}
.mstewart {font-size:80%; colour:#015697;padding:5px 0 0 45px;}
.biline {padding:5px 0 0 18px; }

#vip { colour:#015697; padding:15px; height:150px; margin:0px 0px 0px 0px; font-size:75%; background-color:#FFFFFF;}
#vip ul { width:320px; float:left;padding:0px 0 15px 0;margin:0px;list-style:none;colour:#015697;}
#vip li { padding:0px 0 15px 15px;margin:0px;list-style:none;background:url(../images/landing/bullet.gif) no-repeat left 4px;colour:#015697;}
.colvip { width:300px; float:right; padding:0px;}

.crumb { float: left; position: relative; top: 7px; left: 3px; color: #ccc;}
.crumb a:link, .crumb a:visited { color: #ccc; }
.crumb a:hover { color: #fff; }

/* bnav */
.bnav ul { float: right; width: 450px; font-size: 70%; display: inline; margin: 10px 10px 0 10px; padding: 10px; background: #FFF; list-style: none; border: #EFEFEF 1px dotted; }
.bnav li { float: right; display: inline; margin-right: 10px; padding: 0 0 0 10px; background: url(../images/bullet.gif) no-repeat left 4px; line-height: 120%; } /* float float left to affect display element */	
.bnav a { color: #07194C; }
.bnav a:hover { color: #999; }
.bnav .red {font:bold; color: #CC0000; }

.img_left { float: left; padding: 5px; background-color: #FFFFFF; border: #EFEFEF 1px dotted; margin: 5px 10px 10px; }
.img_right { float: right; padding: 5px; background-color: #FFFFFF; border: #EFEFEF 1px dotted; margin: 5px 10px; }
.rh_img { background: #FFF; border: #EFEFEF 1px dotted; }

#models { margin-left: 5px; } /* margin works (cb) when .models_ind float and display elements are introduced */
#models h1 { font-size: 70%; font-weight: bold; margin: 2px 0 2px 0; padding: 5px; color: #333; }
#models h2 { display: block; font-size: 100%; margin: 5px 10px 5px 6px; padding: 0; color: #07194C; text-transform: uppercase; clear: both; }
#models p {	font-size: 70%;	margin: 0 5px 5px 0;	padding: 0 5px 5px 5px;	color: #666;	line-height: 112%;}
#models a { color: #999; }
#models a:hover { color: #ccc; }

.models_ind { float: left; display: inline; background: #EDF6FA; width: 214px; height: 260px;  border: dotted 1px #EFEFEF; padding: 2px; margin: 5px; } /* float left to create the columns; display inline for cross browser */	

.models_new { float: left; display: inline; background: #1E1E1E; width: 214px; border: solid 1px #161616; padding: 2px; margin: 5px; } 
.models_ind1 { float: left; display: inline; background: #EDF6FA; width: 214px; height: 90px;  border: dotted 1px #EFEFEF; padding: 2px; margin: 5px; } 
.models_ind2 { float: left; display: inline; background: #EDF6FA; width: 214px; height: 196px;  border: dotted 1px #EFEFEF; padding: 2px; margin: 5px; } 
.models_ind3 { float: left; display: inline; background: #EDF6FA; width: 214px; height: 330px;  border: dotted 1px #EFEFEF; padding: 2px; margin: 5px 5px 10px; }
.models_ind4 { float: left; display: inline; background: #EDF6FA; width: 214px; height: 150px;  border: dotted 1px #EFEFEF; padding: 2px; margin: 5px; } 

.list ul { float: left; width: 330px; font-size: 70%; display: block; margin: 0 5px 10px; padding: 10px; background: #EDF6FA; list-style: none; border: #EFEFEF 1px dotted; }
.list li { display: block; margin: 0 0 5px; padding: 0 0 0 10px; background: url(../images/bullet.gif) no-repeat left 4px; line-height: 125%; }
.list a { color: #07194C; }
.list a:hover { color: #999; }

.list1 ul { float: left; width: 600px; font-size: 70%; display: block; margin: 0 5px 10px; padding: 10px; background: #EDF6FA; list-style: none; border: #EFEFEF 1px dotted; }
.list1 li { display: block; margin: 0 0 10px; padding: 0 0 0 10px; background: url(../images/bullet.gif) no-repeat left 4px; line-height: 125%; }
.list1 a { color: #07194C; }
.list1 a:hover { color: #999; }

.top { clear: both; float: right; margin: 10px; }

/* **************************************************************** */
/* ************************ FPV Content  ************************* */
/* **************************************************************** */
.fpv ul { width:240px; float:left;padding:0px 0 15px 0;margin:-10px 0 0 0;list-style:none;colour:#015697;}
.fpv li {	padding:0px 0 0px 15px;	color:#ccc;	margin:0px;	line-height:150%;	list-style:none;	background: url(../images/bullet.gif) no-repeat left 8px;	colour:#015697;	font-size:100%;}


/* **************************************************************** */
/* ************************ Preowned Content  ************************* */
/* **************************************************************** */

#preownedcontent { font-size: 70%; display: block; color: #333; margin: 0; line-height: 130%; }
#preownedcontent h1 { clear: both; font-size: 300%; display: block; margin: 0 10px 5px 10px; padding: 0; color: #07194C; }
/* #preownedcontent h2 { clear: left; font-size: 100%; margin: 5px 10px; padding: 0; color: #07194C; text-transform: uppercase; } */
#preownedcontent h3 { clear: left; font-size: 70%; display: block; margin: 5px 10px; padding: 0; color: #333; text-transform: uppercase;  }
#preownedcontent h4 { display: block; margin: 5px 10px; padding: 0; }
#preownedcontent p { font-size: 70%; display: block; color: #333; margin: 0; padding: 10px; line-height: 130%; }
#preownedcontent a { color: #07194C; }
#preownedcontent a:hover { color: #999; }

/* bnav */
.preownedbnav ul { float: right; width: 450px; font-size: 100%; display: inline; margin: 10px 10px 0 10px; padding: 10px; background: #FFF; list-style: none; border: #EFEFEF 1px dotted; }
.preownedbnav li { float: right; display: inline; margin-right: 10px; padding: 0 0 0 10px; background: url(../images/bullet.gif) no-repeat left 4px; line-height: 120%; } /* float float left to affect display element */	
.preownedbnav a { color: #07194C; }
.preownedbnav a:hover { color: #999; }

.preownedwhite { font-size: 70%; }


/*----------------Forms-------------------------------------------*/


.form_container {
	clear: both;
	float: left;
	margin: 0 0 20px 2px;
}

.form_container2 {
	clear: both;
	float: left;
	margin: 0 0 0px 2px;
}

.formcell {
	width: 150px;
/*--height: 40px;--*/
	padding: 7px;
	display: block;
	float: left;
	margin: 0 3px 3px 1px;
	color: #333;
	text-decoration: none;
	font-size: 70%;
	}

.formcell1{
	width: 150px;
	height: 110px;
	padding: 7px;
	display: block;
	float: left;
	margin: 0 3px 3px 1px;
	color: #333;
	text-decoration: none;
	font-size: 70%;
	}
	
.descriptioncell {
	width: 322px;
/*--height: 40px;--*/
	padding: 5px;
	display: block;
	float: left;
	margin: 0 3px 3px 1px;
	color: #333;
	text-decoration: none;
	font-size: 70%;
	}
	
.formheading {
	display: block;
	float: left;
	color: #333;
	font-size: 70%;
	}
		
/* **************************************************************** */
/* *************************** Footer  **************************** */
/* **************************************************************** */
#footer { display:block; float:left; background:#FFF; padding: 15px; margin: 0; color: #999; font-size: 70%; height:100px; width:670px; }
#footer a { color: #666; }
#footer a:hover { color: #999; }
#footer2 { display:block; float:left; background:#FFF; padding: 15px; margin: 0; color: #000; font-size: 70%; height:200px; width:670px; }
#footer2 a { color: #666; }
#footer2 a:hover { color: #999; }
.float_left { float: left; padding:0px; margin:0px; }
.float_right {float: right; text-align:right; width: 460px; padding:0px; margin:0px; }

/* ***************************** SPECIAL OFFERS *************************** */

.new_container {
	clear: both;
	display: inline;
	float: left;
	margin: 10px 0 20px 10px;
	padding:0;
	
}

.new_container img {
	padding: 0 0 0 2px ;
	margin:0;
	background: #fff;
width: 100%;

}

a.model_btn {
	width: 410px;
	height: 220px;
	padding: 0 ;
	display: block;
	float: left;
	margin: 0;
	color: #666666;
	text-decoration: none;
	font-size: 85%;
	background: #edf6fa;
	border-bottom: #c8792C 15px solid;
	}
	
	
a.model_btn2 {
	border-bottom: #c8792C 1px solid;
	border-bottom: #c8792C 1px solid;
	width: 270px;
	padding:0 0 0 0;
	display: block;
	float: left;
	margin: 0;
	color: #000;
	text-decoration: none;
	font-size: 70%;
	background: #edf6fa;
	background-repeat:no-repeat;
	}
	
.specials_hdr { height: 50px;background-color:#EBEBEB;color: #666666;padding: 5px 0 0 10px;display: block; font-weight: bold; margin: 0 0 0 0 ; text-transform:uppercase; }

#specials_body{
	padding: 10px 11px 0 11px;	
}

.specialshdr_right {
	font-size:180%;
	color: #07194c;
	font-weight:bolder;
	margin:0px;
	padding:0px;
}