/***************************************************************
##Base HTML Styles
***************************************************************/
h1
{
    font-size : 14px;
	font-weight : bold;
	color : #476B07;
}

h2
{
    font-size : 14px;
	font-weight : bold;
	color : #666;
}

p
{
    font-size : 10px;
	color : #666;   
}

/*img { behavior: url(iepngfix.htc); }*/
/***************************************************************/


/***************************************************************
##Generic CSS Classes
***************************************************************/
*.left { float : left; }
*.right { float : right; }
*.none { display : none; }
*.inline { display : inline; }
*.block { display : block; }
/***************************************************************/


/***************************************************************
##Vehicle Detail Specific
***************************************************************/
div.vehicleDetail 
{
    width : 794px;
    font-family : Arial, Helvetica, sans-serif;
    
    background-image : url(/assets/citygate/images/white_left.gif);
    background-position : left top;
    background-repeat : repeat-y; 
}

div.vehicleDetail *
{
    margin : 0;
    padding : 0;
}

div.vehicleDetail div.header
{  
    background-image : url(/assets/citygate/images/carview_header.jpg);
    background-position : left top;
    background-repeat : no-repeat;
}

div.vehicleDetail div.header h1
{    
    padding : 13px 15px 6px 15px;
    margin : 0;  
}

div.vehicleDetail div.content h2
{    
    padding : 5px 0 5px 0px;
    margin : 0;  
}

div.vehicleDetail div.content
{  
    padding : 0 15px 0 15px;
    height : auto;
     
    background-image : url(/assets/citygate/images/white_right.gif);
    background-position : right top;
    background-repeat : repeat-y;
}

div.vehicleDetail div.column01 {width : 495px;}
div.vehicleDetail div.column02 {width : 255px; clear : none;}

div.vehicleDetail div.footer
{
    height : 15px;
    clear : both; 
    
    background-image : url(/assets/citygate/images/white_bottom.gif);
    background-position : left bottom;
    background-repeat : repeat-x;  
}

div.vehicleDetail div.vehicleDescription {padding-left : 2px; padding-top: 5px;}
div.vehicleDetail div.vehicleDescription p.error {color : #ff0000; font-weight : bold; font-size : 12px; padding : 5px 0 5px 0;}

div.vehicleDetail div.vehicleSummary
{
    height : 35px;
    background-image : url(/assets/citygate/images/carview_footer.jpg);
    background-position : left top;
    background-repeat : no-repeat;
}

div.vehicleDetail div.vehicleSummary ul
{
    list-style : none;
}

div.vehicleDetail div.vehicleSummary li
{
    width : 20%;
    float : left;
    text-align : center;
    
    font-weight : bold;
    font-size : 11px;
    color : #666; 
}

div.vehicleDetail div.vehicleSummary li span
{
    display : block;
    
    font-size : 10px;
    font-weight : normal;
}

div.vehicleDetail div.vehicleSummary li#vehiclePrice
{
    padding-top : 6px;
    font-size : 16px;
    color : #fff;
}
div.vehicleDetail div.vehicleSummary li#vehiclePrice span {display : none;}
/***************************************************************/


/***************************************************************
##Vehicle Detail.Compact Specific
***************************************************************/
div.vehicleDetail.compact {}
div.vehicleDetail.compact div.content {height : 200px;}
div.vehicleDetail.compact div.header{background : none;}

div.vehicleDetail.compact div.header h1 {padding : 0 0 5px 0;}
div.vehicleDetail.compact div.header h1 a {color : #476B07; text-decoration : none;}

div.vehicleDetail.compact div.column01,
div.vehicleDetail.compact div.column02,
div.vehicleDetail.compact div.column03
{
    float : left;
    padding : 5px 10px 5px 10px;
    margin : 0 0 0 0;
    height : 145px; 
    border-right : 1px dashed #ccc;
    overflow : hidden;
}

div.vehicleDetail.compact div.column01 {width : 28%; border-left : 1px dashed #ccc;}

div.vehicleDetail.compact div.column02 {width : 23%;}

div.vehicleDetail.compact div.column03 {width : 38%; border-right-width : 0px;}

div.vehicleDetail.compact div.span {width : auto; height : 20px; clear : both; margin-left : 10px;}
div.vehicleDetail.compact div.span img {border : none; margin-right : 10px;}

div.vehicleDetail.compact div.vehicleDescription {padding : 0; background : none;}

div.vehicleDetail.compact div.vehicleDescription h2 {padding-top : 0px; font-size : 12px;}

div.vehicleDetail.compact div.vehicleSummary
{
    height : auto;
    background : none;
}

div.vehicleDetail.compact div.vehicleSummary li
{
    width : 100%;
    text-align : left;
}

div.vehicleDetail.compact div.vehicleSummary li span
{
    display : inline-block;
    width : 70px;
    float : left;
    font-size : 10px;
    font-weight : normal;
}

div.vehicleDetail.compact div.vehicleSummary li#vehiclePrice {font-size : 11px; color : #666;}
div.vehicleDetail.compact div.vehicleSummary li#vehiclePrice span {display : inline;}
/***************************************************************/


/***************************************************************
##Vehicle Navigation Specific
***************************************************************/
div.vehicleDetail div.navigation
{
    margin-left : 5px;
    height : 50px;
}

div.vehicleDetail div.navigation div.button
{
    float : left;
    display : inline;
}

div.vehicleDetail div.navigation img
{
    border-width : 0px;
}
div.vehicleDetail div.navigation input.visible {visibility : visible;}
div.vehicleDetail div.navigation input.hidden {visibility : hidden;}
/***************************************************************/


/***************************************************************
##Centre Specific
***************************************************************/
div.centreAddress p.maplink
{
    width : 85%;
    margin-top : 10px;
    font-size : 11px;
    font-weight : bold;
}

div.centreAddress p.maplink a
{
    color : #fff;
    text-decoration : none;
}

div.centreAddress p.maplink img
{
    margin-left : 5px;
    border-width : 0px;
    float : right;
}
/***************************************************************/


/***************************************************************
##Vehicle Images Specific
***************************************************************/
div.vehicleImages
{
    direction : rtl;
}

div.vehicleImages div.otherImages {position : absolute;}

div.vehicleImages div.otherImages img
{
    cursor : pointer;
    width : 82px;
    height : 53px;
    
    border : 1px solid #fff;
    border-top-width : 0px;
    border-right-width : 0px;
}

div.vehicleImages img#mainImage
{
    border-width : 0px;
}

div.vehicleImages div.otherImages img.zoom
{
    width : auto;
    height : auto;
    border : none;
    display : block;
    margin : 2px 5px 0 0;
    width: 14px;
    height: 14px;
}
/***************************************************************/


/***************************************************************
##Alert Specific
***************************************************************/
div.alert
{
    width :  250px;
    height : 100px;
    position : absolute;
    float : left;
    top : 150px;
    left : 130px;
    z-index : 10;
    
    font-family : Arial, Helvetica, sans-serif;
    font-weight : bold;
    font-size : 12px;
    
    background-color : #fff;
    border : 1px solid #999;
    border-right-width : 2px;
    border-bottom-width : 2px;
}

div.alert p
{
    margin : 0;
    padding : 10px;
    
    color : #666;
    font-weight : bold;
    font-size : 12px;
}

div.alert p img
{
    margin : 0 5px 5px 0;
    text-align : left;
    float : left;
}

div.alert div.close
{
    padding : 3px;
    text-align : right;
    background-color : #eee;
    border : none;
    border-bottom : 1px solid #999;
}

div.alert div.close img
{
    border : none;
    cursor : pointer;
    text-align : right;
}
/***************************************************************/


/***************************************************************
##Lozenge Specific
***************************************************************/
div.lozenge
{
    background-position : left top;
    background-repeat : repeat-y;
    
    font-size : 10px;
    color : #fff;
}

div.lozenge strong {font-size : 14px; display : block;}

div.lozenge div.header
{
    background-position : left top;
    background-repeat : repeat-x; 
    height : 14px;
}

div.lozenge div.content
{
    padding : 0 15px 0 15px;
    clear : both;
    
    background-position : right top;
    background-repeat : repeat-y; 
}

div.lozenge div.footer
{
    background-position : left bottom;
    background-repeat : repeat-x; 
    height : 14px;
}
/***************************************************************/


/***************************************************************
##Green Lozenge Specific
***************************************************************/
div.green.lozenge
{
    margin : 10px 0 10px 0;
    
    background-image : url(/assets/citygate/images/green_left.gif);
    background-color : #71bd0e;
}
div.green.lozenge div.header {background-image : url(/assets/citygate/images/green_top.gif);}
div.green.lozenge div.content {background-image : url(/assets/citygate/images/green_right.gif);}
div.green.lozenge div.footer {background-image : url(/assets/citygate/images/green_bottom.gif);}
/***************************************************************/