/*
****************************************************************
CORE SCREEN HTML STYLES

Generic rules applied to core html types, a, p img etc. for screen targeted styles
*****************************************************************
*/

html
{
	height : 100.1%;
}

body
{
	margin              : 0px;
	padding             : 0px;
	background-color	: #B1C7C5;
	text-align          : center;
	font-family			: Verdana;
}
    
a
{
	text-decoration : none;
}
a img
{
    border : none;
}

h1
{
    font-size   : 14px;
    line-height : 16px;
    font-weight : bold;
    line-height : 18px;
    margin      : 0px 0px 0px 0px;
    padding     : 0px 0px 0px 0px;
    color		: #656A70;
}
    
h2
{
    font-size   : 12px;
    line-height : 14px;
    font-weight : bold;
    margin      : 0px 0px 0px 0px;
    padding     : 0px 0px 0px 0px;
    color		: #656A70;
}

h3
{
    font-size   : 11px;
    font-weight : bold;
    margin      : 0px 0px 0px 0px;
    padding     : 0px 0px 0px 0px;
}

p 
{
    font-size   : 11px;
    line-height : 16px;
	margin      : 0px 0px 0px 0px;
    padding     : 0px 0px 0px 0px;
    color		: #656A70;
}

.none { display : none; }


/* 
 *  IMPORTANT NOTES:
 *
 *  - LAYING OUT ELEMENTS [ie v.7] & [ff v.2.0.0.11]:
 *      
 *    When using [position : relative] : position (top, left, right, bottom) is taken from 0,0 in parent and IGNORS any border setting on the parent
 *      e.g. if (elementLeft = 10 && parentBorder = 5) THEN elementFinalLeft = 10 (i.e. no change)
 *
 *    When using [position : absolute] : position (top, left, right, bottom) is taken from 0,0 in parent PLUS border width OR from the parents (width/height - border width)
 *      e.g. if (elementLeft = 10 && parentBorder = 5) THEN elementFinalLeft = 15 !!!
 */

/*
****************************************************************
SCREEN LAYOUT HTML STYLES
*****************************************************************
*/

div.root
{
	width : 770px;	
	margin : 0px auto;
	background-color : White;
	border : solid 3px #808080;	
}
div.root div.header
{
	width : 770px;
	padding : 110px 0 0 0;
}
div.root div.content
{
	padding : 15px 10px 25px 10px;
	margin : 0px auto;
	width : 734px;
	text-align : left;
	vertical-align : top;
	font-size : 11px;
	font-weight : normal;	
	color : #656A70;	
}
div.root div.content a
{
}
div.root div.content div.column
{
	float : left;
}
div.root div.content div.column.single
{
	width : 100%;
	padding : 10px 0px 5px 0px;
	margin : 0px;
	text-align : left;
	vertical-align : top;	
}
div.root div.content div.column.single p
{
	padding : 5px 0px;
}
div.root div.content div.column.single p img
{
	margin : 0px 0px 10px 10px;
}
div.root div.content div.column.left
{
	width : 242px;
	padding : 0px 0px 5px 0px;
	text-align : left;
	vertical-align : top;
}
div.root div.content div.column.left p
{
	padding : 5px 0px;
}
div.root div.content div.column.left p a
{
	text-decoration : underline;
	color : #656A70;
}
div.root div.content div.column.right
{
	width : 488px;
	margin-left : 4px;
	padding : 0px 0px 5px 0px;
	text-align : left;
	vertical-align : top;	
}
div.root div.content div.column.right div.flash_offers,
div.root div.content div.column.right div.flash_offers span
{
	width : 488px;
	height : 200px;
}

div.root div.content div.detail
{
	margin : 0px;
	padding : 15px 5px;	
}
div.root div.content div div.detail div.divNewCarsFranchiseList,
div.root div.content div div.detail div#divLocationSummary
{
	width : 100%;
}
div.root div.content div.detail h2
{
	text-align : center;
	font-size : 14px;
	margin : 0;
	padding : 0px 0px 10px 0px;
	color : #656A70;	
}
div.root div.content div.detail img.logo,
div.root div.content div.detail img.image
{
	margin : 5px auto;
	display : block;
	border : 0;
	padding : 0;
}
div.root div.content div.detail p
{
	padding : 10px 0 5px 0;
}

div.root div.footer
{
	padding : 10px 0px 15px 0px;
}

/* Main Quick Navigation Panels */
div.root div.header div.panel.collection
{
	width : 734px;
	height : 170px;
	margin : 0px auto;
	padding : 5px 0 0 0;
}
div.root div.header div.panel.collection div.item
{
	width : 240px;
	height : 125px;
	float : left;
}
div.root div.header div.panel.collection div.item.middle
{
	margin : 0px 4px;
}

/* Quick Used Car Locator Panel */
div.panel.quickUsedCarLocator
{
	margin : 0;
	padding : 0px 15px;
	height : 35px;
	width : 740px;
	background-color : #B1C7C5;
}
div.panel.quickUsedCarLocator form.quicksearch { padding-top : 5px; }
div.panel.quickUsedCarLocator div.divTitle
{
	font-size : 11px;
	font-weight : bold;
	color : White;
	padding : 5px 100px 0px 0px;
	margin : 0;
	float : left;
}
div.panel.quickUsedCarLocator span
{
	color : #656A70;
	display : block;
	font-size : 11px;
	font-weight : bold;
	padding : 13px 0px 10px 0px;
	cursor : default;
}
div.panel.quickUsedCarLocator fieldset
{
	border-width : 0px;
	padding : 0px;
	margin : 3px 0px 0px 0px;
	float : left;
	width : 395px;
}
div.panel.quickUsedCarLocator fieldset.buttons
{
	
}
div.panel.quickUsedCarLocator fieldset.buttons a
{
	float : right;
	color : White;
	font-size : 10px;
	font-weight : bold;
	margin : 0;
	padding : 5px 0 7px 0;
	display : block;
	width : 70px;
}
div.panel.quickUsedCarLocator fieldset.buttons a:hover
{
	color : Black;
}
div.panel.quickUsedCarLocator fieldset legend
{
	display : none;
}
div.panel.quickUsedCarLocator fieldset div.mfr
{
	float : left;
	width : 210px;
	height : 20px;
	padding : 0px;	
}
div.panel.quickUsedCarLocator fieldset div.rge
{
	float : left;
	width : 167px;
	height : 20px;
	padding-left : 15px;
}
div.panel.quickUsedCarLocator fieldset label
{
	font-size : 11px;
	font-weight : normal;
	color : #656A70;
	float : left;
	padding-top : 2px;
}
div.panel.quickUsedCarLocator fieldset select
{
	font-size : 11px;
	font-weight : normal;
	color : Black;	
	width : 125px;	
	float : right;	
}
div.panel.quickUsedCarLocator input
{
	border-top : solid 2px #656A70;
	border-left : solid 1px #DADADA;
	border-right : solid 1px #DADADA;
	border-bottom : solid 1px #DADADA;
	background-color : White;
	color : #656A70;
	font-size : 10px;
	font-weight : bold;
	width : 70px;
	height : 25px;
	margin : 0;
	padding : 0;
	cursor : pointer;
	float : right;
	display : block;
}
div.panel.quickUsedCarLocator input:hover
{
	color : White;
	background-color : #656A70;
}

/* Enquiries Contact Tel Panel */
div.panel.enquiries
{
	margin : 5px 0px;
	padding : 0px;
	width : 100%;
	height : 15px;
}
div.panel.enquiries div
{
	float : right;
	margin-right : 15px;
}
div.panel.enquiries div span
{
	color : #656A70;
	display : block;
	cursor : default;
	float : left;	
}
div.panel.enquiries div span.label
{
	font-size : 12px;
	font-weight : normal;
	margin : 0px 10px 0px 0px;
}
div.panel.enquiries div span.telephone
{
	font-size : 12px;
	font-weight : bold;
}

/* Special Offers Link Panel */
div.panel.specialOffersLink
{
	margin : 5px 0px;
	padding : 0px;
	width : 240px;
	float : left;
	height : 70px;
	display : block;
}
div.panel.specialOffersLink img
{
	display : block;
	width : 240px;
	height : 70px;
}

/* Quick New Car Franchise Selector */
div.panel.franchiseSelector span
{
	color : #656A70;
	display : block;
	font-size : 11px;
	font-weight : bold;
	padding : 23px 0px 10px 0px;
	cursor : default;
}
div.panel.franchiseSelector img
{
	width : 60px;
	height : 60px;	
}

/* Aftersales Panel */
div.panel.aftersales
{
	width : 486px;
	text-align : center;
	padding : 10px 0;
	margin : 5px 4px 5px 0px;
	float : left;
	height : 50px;
}
div.panel.aftersales h2
{
	padding : 0px 0px 5px 0px;
}
div.panel.aftersales ul
{	
    list-style : none;
    list-style-image : none;
    margin : 5px 0 5px 25px;
    padding : 0;
    float : left;	        
}
div.panel.aftersales ul li
{
	float : left;
	padding : 5px 20px;	
}
div.panel.aftersales ul li a
{
	color : #656A70;
	text-decoration : none;
	display : block;	
	font-size : 9px;
}
div.panel.aftersales ul li a:hover
{
	text-decoration : underline;
}

/* Featured Items Panel */
div.panel.featureditems
{
	padding : 5px 0px;
	width : 100%;	
	float : left;
}
div.panel.featureditems div.item
{
	width : 240px;
	height : 140px;
	float : left;
	text-align : center;
	overflow : hidden;		
}
div.panel.featureditems div.item.even
{
	margin : 0px 4px;
}
div.panel.featureditems div.item div.title
{
	padding : 10px 0px;
	margin : 0px 3px;
	height : 14px;
	overflow : hidden;
}
div.panel.featureditems div.item div.image img
{
	width : 240px;
	height : 140px;	
}
div.panel.featureditems div.item div.description
{
	padding : 5px;
	text-align : left;	
}
div.panel.featureditems div.item div.description p
{
	line-height : 14px;
}

/* Special Offers Panel */
div.panel.specialoffers
{
	padding : 5px 0px 15px 0px;
	width : 100%;
}
div.panel.specialoffers div.item
{
	width : 240px;
	height : 140px;
	float : left;
	text-align : center;
	overflow : hidden;		
}
div.panel.specialoffers div.item.even
{
	margin : 0px 4px;
}
div.panel.specialoffers div.item div.title
{
	padding : 10px 0px;
	margin : 0px 3px;
	height : 14px;
	overflow : hidden;
}
div.panel.specialoffers div.item div.image img
{
	width : 240px;
	height : 140px;	
}
div.panel.specialoffers div.item div.description
{
	padding : 5px;
	text-align : left;	
}
div.panel.specialoffers div.item div.description p
{
	line-height : 14px;
}

/* Franchise Logos Panel */
div.panel.franchiseLogos
{
	text-align : center;
	width : 100%;
}
div.panel.franchiseLogos div.logos
{
	width : 240px;
	margin : 0 auto;
}
div.panel.franchiseLogos div.logos img.franchiseLogo
{
	width : 60px;
	height : 60px;
	margin : 0px 10px;
	padding : 0;	
	float : left;
}


/* News Ticker */
div.panel.newsTicker
{
	width : 734px;
	height : 20px;
	margin : 0px auto;
	padding-bottom : 10px;	
}
div.panel.newsTicker div
{
	float : left;
}
div.panel.newsTicker div.tickerLabel
{
	width : 50px;
	height : 20px;
	color : White;
	font-size : 11px;
	font-weight : bold;
	padding : 3px 0 0 0;
	margin : 0;
	cursor : default;
	border : solid 1px #656A70;
}
div.panel.newsTicker div.tickerFeed
{
	width : 659px;
	height : 18px;	
	color : Black;
	font-size : 11px;
	font-weight : normal;
	padding : 5px 10px 0 10px;
	margin : 0;
}
div.panel.newsTicker div.tickerFeed marquee
{
	/*width : auto;*/
	display : block;
}
div.panel.newsTicker div.tickerFeed marquee a
{
	color : #656A70;
	padding : 0px 10px;
}
div.panel.newsTicker div.tickerFeed marquee a:hover
{
	color : Black;
}

/*******************************************************
Form Styles
********************************************************/
div.formTitle
{
	background-color : #DADADA;
}
div.formTitle h2
{
	color : Black;
	padding : 5px 0 5px 10px;	
}
form.twocolumn 
{   
    margin-bottom : 10px;
}

form.twocolumn h2
{
    padding : 15px 0 15px 5px;
    margin : 0 0 0 -5px;
}

form.twocolumn fieldset
{
    margin : 10px 0px 10px 10px;
    padding : 0;
    border-width : 0px;
    width : 727px;
}
form.twocolumn fieldset div.item
{
	margin : 5px 0px;
}

form.twocolumn fieldset table
{
    width : 727px;
}

form.twocolumn fieldset.radio_group 
{
    margin-bottom : 0;    
}

form.twocolumn legend
{
    margin : 0 0 10px -7px;
    padding : 0 0 0 0;
    font-size : 14px;
    font-weight : bold;
    color :  #656A70;
}

form.twocolumn div.divider
{
    margin : 0 0 5px 0;
    padding : 0 0 3px 0;
    border-bottom : 1px solid #eee;
}

form.twocolumn p
{
    margin : 0;
    padding : 0 0 10px 0;
    font-size : 10px;
}

form.twocolumn label
{
    display : block;
    float : left;
    position : relative;
    width : 30%;
    color : #656A70;
    margin : 2px 0 0 0;
    font-weight : bold;
}

form.twocolumn fieldset.radio_group label
{
    float : left;
    display : block;
    width : auto;
    margin : 3px 0 0 0;
    font-size : 10px;
    font-weight : normal;
}

form.twocolumn label abbr
{
    border : 0px;
}

form.twocolumn label img
{
    padding : 0;
    border : none;
    vertical-align : text-top;
    position : absolute;
    right : 5px;
    top : 50%;
    margin-top : -5px;
}

form.twocolumn span.advice,
form.twocolumn span.field_error
{
    margin : 5px 60px 0 220px;
    display : block;
    color : #999;
    font-size : 10px;
}

form.twocolumn span.advice {color : #999;}

form.twocolumn span.readonly
{
    display : block;
    padding-top : 2px;
    color : #656A70; 
    font-weight : bold;
}

form.twocolumn span.field_error 
{
    color : #b82713; 
    font-weight : bold;
}

form.twocolumn select 
{
    width : 20%;
}

form.twocolumn input,
form.twocolumn textarea 
{
    width : 40%;
}
form.twocolumn fieldset.radiogroup { width : auto; }
form.twocolumn fieldset.radiogroup input { float : left; clear : left; width : 5%; }

form.twocolumn textarea
{
    height : 100px; 
    min-height : 100px;
    overflow : auto;
}

form.twocolumn span.checkbox input
{
    width : auto;
    border : none;
    vertical-align : middle;
}

form.twocolumn fieldset.radio_group input
{
    float : left;
    clear : left;
    width : auto;
    display : block;
    border : none;
}

form.twocolumn fieldset.radio_group input
{
    height : 20px;
}

form.twocolumn img.calendar 
{   
    margin : -1px 0 0 3px; 
    vertical-align : middle;
}

form.twocolumn div.submit 
{
    padding : 0 0 0 0;
}

form.twocolumn div.submit input
{
    width : 70px;
    height : 25px;
    margin : 0 10px 5px 598px;
    padding : 0;
    font-size : 10px;
    color : #656A70;
    font-weight : bold;
    white-space : nowrap;
    background-color : White;
    border : 1px solid #DADADA;
    border-top : solid 2px #656A70;    
    cursor : hand;
    cursor : pointer;
}

form.twocolumn div.submit input:hover 
{   
    color : White;
    background-color : #656A70;    
}

form.twocolumn div.submit span
{
    text-align : right;
    padding : 0 0 5px 0;   
}

form.twocolumn caption
{
    font-weight : bold;
    font-size : 12px;
    text-align : left;
    margin : 0 0 0 0;
    padding : 3px 0 3px 10px;
    width : 727px;
    background-color : #2E5379;
    color : #ffffff;
}

form.twocolumn thead
{
   background-color : #DEEBF7;
   border : 0;
   margin : 0;
   padding : 0;  
}

div.divider input
{
    padding : 0 2px 0 2px;
    color : #414c98;
    font-size : 10px;
    height : 16px;
    border : 1px solid #819CB7;
}

form td.center.blank
{
    width : 110px;
}

form td.center.blank input
{
    margin : 0;
    padding : 0;
    text-align : center;
    line-height : 10px;
    color : #fff;
    background-repeat : no-repeat;
    border : none;
    background-color : transparent;
    cursor : pointer;
}

form td.center.blank input
{
    width : 100px;
    height : 22px;
    font-weight : bold;
    font-size : 12px;
    background-image : url(/assets/vospers/images/submit.button.inactive.bkgd.gif);
    background-repeat : no-repeat; 
    background-color : transparent;
}
/*******************************************************/

/***************************************************************
##Form Feedback
***************************************************************/
div.divFormFeedBack
{
	padding : 10px;
}
div.divFormFeedBack h1
{
	padding-bottom : 10px;
}
div.divFormFeedBack a 
{
	text-decoration : none;
	color : #656A70;
	font-weight : bold;
}
div.divFormFeedBack a:hover
{
	text-decoration : underline;
}
/*******************************************************/

/***************************************************************
##Form Error Summary
***************************************************************/
div.error.summary
{
    margin : 5px 5px 10px 5px;
    padding : 10px;
    color : Black;
    background-color : #DADADA;
    border : 1px solid #656A70;
}

div.error.summary h2
{
    margin : 0 0 5px 0;
    font-size : 14px;
    color : #b82713;
}

div.error.summary p {margin : 0 0 5px 0;}
/***************************************************************/


/***************************************************************
##Calendar Pop-Up Styles
***************************************************************/
div.calendar 
{
    background-color : #fff;
}

div.calendar table 
{
    border : none;
}

.cpYearNavigation,
.cpMonthNavigation
{
    background-color : #eee;
    text-align : center;
    vertical-align : middle;
    text-decoration : none;
    color : #000;
    font-weight : bold;
}

.cpDayColumnHeader,
.cpYearNavigation,
.cpMonthNavigation,
.cpCurrentMonthDate,
.cpCurrentMonthDateDisabled,
.cpOtherMonthDate,
.cpOtherMonthDateDisabled,
.cpCurrentDate,
.cpCurrentDateDisabled,
.cpTodayText,
.cpTodayTextDisabled,
.cpText 
{
    font-size : 9px;
}

td.cpDayColumnHeader
{
    text-align : right;
    border-color : #C0C0C0;
    border-style : solid;
    border-width : 0px 0px 1px 0px;
}

.cpCurrentMonthDate,
.cpOtherMonthDate,
.cpCurrentDate  
{
    text-align : right; 
    text-decoration : none;
}

.cpCurrentMonthDateDisabled,
.cpOtherMonthDateDisabled,
.cpCurrentDateDisabled 
{
    color : #D0D0D0; 
    text-align : right; 
    text-decoration : line-through;
}

.cpCurrentMonthDate,
.cpCurrentDate 
{
    color : #000000;
}

.cpOtherMonthDate 
{
    color : #808080;
}

td.cpCurrentDate
{
    color : #fff;
    background-color : #eee;
    border : solid 1px #800000;
}

td.cpCurrentDateDisabled 
{
    border-width : 1px; 
    border : solid 1px #FFAAAA;
}

td.cpTodayText,
td.cpTodayTextDisabled  
{
    border : solid 1px #C0C0C0; 
    border-width : 1px 0px 0px 0px;
}

a.cpTodayText,
span.cpTodayTextDisabled 
{
    height : 20px;
}

a.cpTodayText 
{
    color : #000;
}

.cpTodayTextDisabled 
{
    color : #D0D0D0;
}

.cpBorder 
{
    border : solid 1px #666;
}
/***************************************************************/

/***************************************************************
##Breadcrumb Styles
***************************************************************/
div#breadcrumb
{	
	border : solid 1px #C4C4C4;
	font-size : 11px;
	height : 15px;
	text-decoration : none;
	width : 722px;	
	padding : 5px;	
	margin : 5px 0px;
	cursor : default;
}
div#breadcrumb a.label
{
	float : left;
	font-size : 11px;
	font-weight : bold;
	color : Black;
	padding-right : 5px;
}
div#breadcrumb ol
{
	text-decoration : none;
	list-style : none;
	list-style-image : none;
	list-style-type : none;
	margin : 0;
	padding : 0;		
	height : 11px;
}
div#breadcrumb ol li
{
	float : left;
	padding : 0 5px;
}
div#breadcrumb ol li a
{
	color : #656A70;	
	cursor : pointer;
	text-decoration : none;
}
div#breadcrumb ol li a:hover { text-decoration : underline; }
div#breadcrumb ol li.selected { color : Black; }
div#breadcrumb ol li.seperator { color : #656A70; }
/***************************************************************/

/***************************************************************
##Sitemap Styles
***************************************************************/
#sitemap h2
{
	font-size : 11px;
	line-height : 11px;
	padding : 5px 0 0 0;
}
#sitemap h2 a:hover
{
	text-decoration : underline;
}
#sitemap h2 a
{
	background-color : #DADADA;
	color : Black;
	font-size : 11px;
	font-weight : bold;
	display : block;
	text-align : left;
	padding : 5px 5px 5px 10px;
}
#sitemap ul.site_index
{
	list-style : none;
	list-style-image : none;
	padding : 10px 5px 10px 15px;	
}
#sitemap ul.site_index li
{
	padding : 0 0 3px 0;
}
#sitemap ul.site_index li a
{
	color : #656A70;
	text-decoration : none;
}
#sitemap ul.site_index li a:hover
{
	text-decoration : underline;
}
/***************************************************************/

/***************************************************************
##GoogleMap Styles
***************************************************************/
div#googleMapContainer
{
	/* Google increases height by 90px, as such this needs to be taken into consideration. */
	width : 357px;
	height : 267px;
	border : solid 1px #DADADA;
	float : right;
}
/***************************************************************/