/* >> Base HTML Styles
=====================================*/
* { font-family : Verdana, Helvetica, Sans-Serif; }
html {height : 100.01%}
a:link, a:visited {color: #1C3C79; text-decoration: none;}
a:hover {color: #1C3C79; text-decoration: underline;}
a:link.underline, a:visited.underline {text-decoration:underline;}
body { margin:auto; font-size:0.7em; color:#1C3C79; text-align:center; width:814px; background-color : #CCCCCC; }
h2 {color:#1C3C79; font-size:150%; font-weight:bold; padding: 5px 0 5px 0; margin:0;}
h3 {color:#1C3C79; font-size:130%; font-weight:bold; padding: 5px 0 5px 0; margin:0;}
h4 {color:#1C3C79; font-size:110%; font-weight:bold; padding: 5px 0 5px 0; margin:0;}
address {font-style:normal;}
/* MDG - Need to sort out this table stuff */
.table { border: solid 1px #ccc;}
.table tr.header{ line-height:30px;}
.table td{text-align:left; padding:7px;}
.center {text-align:center;}
/* TODO - Panel causing a few styling issues need to review
.panel{background: url(../../images/v_gradient_bevel2.jpg) repeat-x; width: 318px;}
*/
.panelInner{ border: solid 1px #ccc; padding: 10px; width:auto; }
.panelHeading{ border: solid 1px #ccc; padding: 10px; width:370px; height:160px;}
.panelHeader{}
.wide {width: auto;}
.formContainer { padding: 10px;}
#outercontainer {margin : 0px auto 0px auto; padding : 5px 5px 0px 5px; width:810px; text-align : left;
background-color : #fff;
background-image : url(background_white.gif); background-repeat : repeat-y; }
#root
{
width : 786px;
margin : 10px 12px 0 12px;
}
img {border:0}
/* >> Main Page Divisions
================================== */
#mainContent
{
width: 785px;
float:left;
margin: 10px 0 0 0;
}
#subHeader {width: 100%; float:left; margin: 10px 0 0 0; padding: 0px;}
#headerImagePicture {float:right; border: solid 1px #1C3C79; width:390px; height:180px;}
#contentHeader {width: 100%; padding:10px 0 5px 0; float: left;}
#contentHeader h2 { color:#1d3c8f; font-size:150%; font-weight:bold; margin: 0 0 0 10px; padding:2px; width:300px; text-align: left; float:left; text-transform: uppercase;}
#header{width: 786px; margin:0px;padding:0px;}
.approvedImage {vertical-align:middle;}
.approvedImageSmall {vertical-align:middle; margin: 5px;}
.error { font-size:xx-small;}
/* >> Logo
================================== */
headerlogo {float: left; padding:0; margin:5px 0 0px 0;}
#rightHeader {float:right; margin-top: -45px; margin-right:50px;}
#rightHeader img{ visibility:hidden; height:0px; }
/* >> Main Menu
>>
>> (When "Approved Programme" link is added, change from 262px to 196px below...)
>>
================================== */
ul#mainNav {float: left; list-style: none; text-transform: uppercase; font-weight: bold; font-size: 8px; padding:0; margin:0; width: 786px;}
#mainNav li {float: left; display: inline; padding:0; margin:0; margin-top:5px;}
#mainNav a:link, #mainNav a:visited { float: left; width: 262px; height: 21px; line-height: 21px; color: #fff; text-decoration: none;
background: #1C3C79; padding: 0px; margin:0px; text-align: left;}
#mainNav a:hover {background-color: #B4C3DA; background-position: right top; color: #eef; padding:0; margin:0;}
#mainNav a:link.menuitemselected,
#mainNav a:visited.menuitemselected,
#mainNav a:hover.menuitemselected {background-color: #B4C3DA; background-position: right top; color: #fff; padding:0; margin:0;}
#mainNavUnderBar {clear:both; line-height: 0px; height: 0px; padding:0px; margin: 0 0 2px 0; width: 758px;}
.menuspace {padding: 0 0 0 5px;}
/* >> Not Found
==================================*/
.notFound
{
visibility:hidden;
/*border:#1C3C79 solid 1px; color:#1C3C79; width:630px; padding: 5px; margin-bottom:5px; display:block;*/
}
/* TODO put the background on the link */
.notFound:hover {background:#ccc;}
.nocars
{
background:#eee; border:#1C3C79 solid 1px; color:#1C3C79; width:630px; padding: 5px; margin-bottom:5px; display:block;
}
/* >> SubMenu
======================*/
#results .submenu{text-transform:lowercase;}
#_results .submenu {float:right; margin: 0px 15px 15px 5px; width: 320px; text-align:right;}
#_results .submenu a:link, #submenu a:visited, #submenu a:hover {text-transform: lowercase;}
#_results .resultsheader {margin-top: 5px; float:left;}
#results .submenu {float:right; margin: 5px; width: 320px; text-align:right;}
#results .submenu a:link, #submenu a:visited, #submenu a:hover {text-transform: lowercase;}
#results .resultsheader {margin-top: 5px; float:right; margin-bottom:5px; width:780px; }
/* >> Totem
================================== */
#totem { visibility:hidden; display:none;}
/* >> Approved Programme
================================== */
a.approvedDealerLink:link, a.approvedDealerLink:visited {float:right; color: #fff; text-decoration: none; background-color: #1C3C79; padding: 5px; width:150px;}
a.approvedDealerLink {color: #eef; width:115px; display:block; border: #1C3C79 1px solid; margin: 0 5px 0 5px; text-align:center;}
a.approvedDealerLink:hover {background-color: #369; color: #eef; border: #fff 1px solid;}
/* >> Results
================================== */
#results {float: left; width:auto; margin: 0 0px 0 0; }
#results h2 {float: left; display: inline; margin: 10px 0 10px 0;}
#results .resultlist {float: left;}
/* >> Result Item
================================== */
#results .resultitem{margin: 0px; margin: 0 0 5px 0; float:left; width: auto; border-right: silver 1px solid; border-top: silver 1px solid; border-left: silver 1px solid; border-bottom: silver 1px solid }
#results .resultitem .cardata {float:left; width: 510px; height: 85px;}
#results .resultitem .dotlinerow {background : height: 1px; line-height:1px;margin: 0 0 0px 125px; width: 510px; font-size:1px;}
#results .resultitem .rowheader {width: 635px; height: 21px; background-color:#003399;}
#results .resultitem .rowheadercorner {height: 21px;}
#results .resultitem .carcheckbox {float:right; margin: 0px 20px 0 0; padding:0;}
#results .resultitem a:link.cartitle, #results a:hover.cartitle , #results a:visited.cartitle {float:left; color: #fff; margin: 2px 0 0 15px;font-weight: bold; text-decoration: none;}
#results .resultitem .previousprice {text-decoration: line-through;}
#results .resultitem .cardata td, #results .resultitem .cardata th {background-color:#f2f2f2;}
#results .resultitem .col1 {background : #fff; width:120px;background-color:#f2f2f2;}
#results .resultitem .col2 {width: 120px;}
#results .resultitem .col3 {width: 120px;}
#results .resultitem .col4 {width: 120px;}
#results a:link.cartitle, #results a:hover.cartitle , #results a:visited.cartitle {float:left; color: #fff; margin: 2px 0 0 15px; font-weight: bold; text-decoration: none;}
/* >> Result Paging
================================== */
.resultpaging {float:left; height: 50px; width: 625px; padding: 10px 10px 10px 10px;}
.pagerbackground { font-size:9px;}
.pagerbackground table{margin-right:50px;}
.carimagecell {float: left; width: 125px; margin: 0 0 0 0;}
.pageof {float:left; margin: 0 10px 0 10px; position:relative; left:0px; top:-20px; font-size:9px;}
.pagelist {margin: 0 0 0 25px;}
.pageprevnext {float:right; position:relative; top:-32px; right:10px; margin: 0 10px 0 10px; font-size:9px;}
.x-pager {position:relative; top: -20px;}
.prices { width: 75px; float:left; }
/* >> Forms
================================== */
fieldset { padding: 0px; margin: 0; border : 0px solid #aaa;}
fieldset p { padding: 0px; margin-top: 10px; border : 0px solid #aaa;}
select {width: 150px; padding: 0; margin: 0; border: solid 1px #aaa; font-size: x-small;}
input {font-size: x-small;}
legend {font-weight: bold; display:none;}
label {float:left; cursor: pointer; width: 125px; font-size: x-small; }
textarea {border: 1px solid #aaa; margin: 10px 0 0 0; height: 75px;}
textarea:focus, select:focus, .input:focus { border: 1px solid #000; background-color : #eee;}
/* .form { background: url(../../images/h_gradient.gif) repeat-x; padding: 5px 0 0 0; margin: 0 15px 0 15px; width:auto;} */
.form { padding: 15px; width:auto; border: solid 1px #ccc}
.wideformfield {width: 300px;}
.verywideformfield {width: 360px;}
.narrowFormField {width: 100px;}
.rightcolcheckbox {margin: 0 0 0 150px;}
.button {width: 75px; border: 1px solid #888; font-size: xx-small;}
.widebutton{width: 100px; border: 1px solid #888; font-size: xx-small;}
.verywidebutton{width: 175px; border: 1px solid #888; font-size: xx-small;}
.buttonset {margin: 5px 0px 5px 0px;}
.dotline { height: 1px; display: block;}
.input {border: 1px solid #ccc; width: 170px; font-size: x-small;}
#emaildealerform textarea { height: 150px;}
/* >> Drop Shadow
================================== */
.img-wrapper{}
.img-outer {}
.img-inner {}
.img-wrapper p { background-color: #fff; border: 1px solid #a9a9a9; padding: 0px; display: block;}
/* >> Car Detail
===================================*/
#cardetail { }
#cardetail #leftcol {float: left; width: 390px; border: solid 1px #ccc; margin-right: 5px;}
#cardetail #rightcol
{
float: left; width: 350px; border: solid 1px #ccc;
}
#cardetail #carimages a {float:right;clear:none; display: block;}
#cardetail #carimages .MainVehicleImage {float:left;}
#cardetail #SmallImage1Container {float:left; top: 250px; z-index:1001;}
#cardetail #SmallImage2Container {float:left; top: 250px; z-index:1002;}
#cardetail #pricecontainer {font-size: x-large; padding: 15px; width: 305px;}
#cardetail #price {float: left;}
#cardetail .approved { visibility:hidden; display:none }
#cardetail #vehicledetail {margin: 0 0 0 15px;}
#cardetail .dealerdetails { padding: 15px;}
#results .dealerdetails {background: #eee; padding: 5px; width: auto;}
#cardetail #cartitle {padding: 10px 5px 5px 3px; border-collapse:collapse; width: auto; font-size: small; font-weight: bold;}
#cardetail #vehicledetail th {width: 125px;}
#cardetail #vehicledetail {padding: 15px 0 15px 0;}
#cardetail .vehicleoptions { padding: 15px 0 15px 15px; }
#cardetail .vehicleoptions ul {list-style-type: none; width: 125px; text-indent: -40px; float: left; margin-top: 0px; color: Purple;}
#cardetail #leftcol .zoomcontainer{border:0px; height:26px; padding-left: 315px; line-height:26px;}
#cardetail .previousPrice {text-decoration: line-through; font-size: medium;}
div.vehicleImages {height : 260px; direction : rtl; }
div.vehicleImages div.otherImages {position : absolute; margin: 215px 30px 0 0; }
img.zoom {
width:57px; height:24px; line-height:24px;
display : block;
padding : 2px 0 0 0;
}
/* >> Car Detail SubMenu
======================*/
#cardetail #submenu {float: right; font-size: xx-small; color: #1C3C79; margin: 0 0 5px 0; height: 20px; text-transform: lowercase;}
#cardetail .returnToStock {float:left; height:25px;}
/* Region List
==============*/
.genericTable { background: #eee; width: 500px;}
.genericTable .header{ background: #ccc;}
.genericTable .row_off{ background: #fff;}
/* My Selection Compact
==================================*/
div.mySelectionCompact {margin: 20px 3px 0px 3px; width: 130px; visibility:hidden; display:none;}
div.mySelectionCompact h4 { text-transform: uppercase; margin: 0px 0px 10px 10px; }
div.mySelectionCompact ul {list-style: none; margin: 0; padding: 0px; }
div.mySelectionCompact li {padding:0; margin:0; font-size: xx-small; background-repeat: no-repeat; background-position: 0 5px; padding-left: 10px;}
div.mySelectionCompact a:hover {text-decoration: underline; }
div.mySelectionCompact .mySelectionLinkButton {font-size: 9px;}
/* >> Search Panel
==================================*/
div.searchPanel { float:left; height: 170px; padding: 5px; margin: 0px; border: 1px solid #1C3C79; width: 380px; }
div.searchPanel .searchtype {padding: 0 0 0 0;}
div.searchPanel ul {list-style: none; margin: 0px; padding: 10px 0 0 0; text-align:left;}
div.searchPanel li {padding:0; margin:0; padding-left: 7px;}
div.searchPanel li.selected {font-weight: bold; background-repeat: no-repeat; background-position: 0 5px;}
div.searchPanel .searchTypeTitle {font-size: small; font-weight:bold; }
div.searchPanel select {width:115px; }
div.searchPanel select.ModelList {width:244px; }
div.searchPanel td {padding: 3px;}
div.searchPanel input{width:110px;}
div.searchPanel .button{background-color:#1C3C79; color:White; margin-top:11px;}
div.searchPanel label {text-align:left; cursor: pointer; width: 100px; font-size: x-small; }
div.searchPanel option.manufacturer {background: #ccf;}
div.searchPanel .progress { position:fixed; background-color:white; width:16px; height:16px; margin-top:-10px; margin-left:50px; }
/* Alerting
==================================*/
/* div.alerting{width: 380px; padding: 10px; margin:0; background: url(../../images/v_gradient_bevel2.jpg) repeat-x; border: solid 1px #ccc; height:160px;} */
div.alerting { visibility:hidden; }
div.alerting fieldset {line-height: 25px; }
div.alerting h4 {text-transform: uppercase; font-size: x-small; padding: 0px; margin: 0px; }
div.alerting select {width: 110px;}
div.alerting select.model {width: 365px;}
div.alerting select.kilometre {width: 135px; }
div.alerting input.email {width: 220px;}
div.alerting a:hover {text-decoration: underline; }
/* >> Utility Styles
================================== */
.none {display : none;}
.block {display : block;}
.left {float : left;}
.right {float : right;}
.strong {font-weight : bold;}
p.strong {font-size : 120%; color : #b82713;}
.clear {line-height:0px; clear:both; }
.alignright {text-align:right;}
.required {color:#f00;}
.aligncenter {text-align:center;}
/* .white {background : url(../../images/gradient.jpg) repeat-x; text-indent: 15px;}*/
/* >> Footer
==================================*/
/* >> Footer
==================================*/
div.footer
{
height: 75px;
background-image: url(background_footer.gif);
background-repeat: no-repeat;
background-position :top right;
width: 817px;
}
div.footer p { padding: 0 0 0 0px; font-size: 10px; margin: 5px 0px 0px 15px; }
div.pageEnd{ padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px auto 20px; width: 869px; padding-top: 0px; background-repeat: no-repeat; }
div.pageEnd p { padding-right: 0px; padding-left: 0px; font-size: 10px; padding-bottom: 0px; margin: 5px 0px 0px; padding-top: 0px; }
/* New car results*/
.carRow {width:780px; height:120px; border: solid 0px #1C3C79; color: #1C3C79; background-image: url(car_details_background.gif); background-position :-34px -82px; background-repeat:no-repeat; margin-bottom:5px;}
.carRow .carHeader { height:24px; font-weight:bold; border : solid 1px #1C3C79; }
.carRow .carTitle { margin:5px;float:left;}
.carRow .carSelect { margin-left:750px; }
.carRow .carImage { float:left;border:solid 0px #1C3C79;}
.carRow th {text-align:left; width:180px; padding-top:4px;}
.carRow td { text-align:left; width:150px; padding-top:4px; }
.carRow .previousprice {text-decoration: line-through; }
/*New styles for page: Subaru/ApprovedProgramme_es-ES.aspx*/
.BoldText
{
padding-top: 20px;
font-weight: bold;
font-size: 13px;
padding-left: 23px;
}
.ListHeading
{
font-size: 12px;
}
.ListContents
{
margin-left: 2px;
padding-left: 50px;
line-height: 20px;
}