/*--------------------------------------------------------------------------------------- Website: Just Driving Author: Created: October 2009 ---------------------------------------------------------------------------------------*/ @import "default.css"; html { height: 100%;} body { background: #2292c5; height: 100%; min-width: 949px;} /*--------------------------------------------------------------------------------------- Base Typography ---------------------------------------------------------------------------------------*/ /*------------------------------------ Links ------------------------------------*/ a:link, a:visited, a:active { color: #bf6464;} a:hover { color: #2f93c5;} /*------------------------------------ Type ------------------------------------*/ body { font: 62.5% arial, tahoma, arial, helvetica; color: #333;} #container, #footer { font-size: 1.2em; line-height: 1.4em; text-align: left;} p { padding: 0 0 1.4em 0;} /*------------------------------------ Headers ------------------------------------*/ h1 { font-size: 1.8em; padding-bottom: 13px; margin-bottom: 13px; border-bottom: 1px solid #999; line-height: 1.2em;} h2 { font-size: 1.5em; padding: .7em 0; } h3 { font-size: 1.4em; padding: 0 0 1em;} /*--------------------------------------------------------------------------------------- Layout ---------------------------------------------------------------------------------------*/ /*------------------------------------ Container ------------------------------------*/ #outerbackground { background: url('../images/outerbackground.jpg') repeat-x #f3f7fa; } #innerbackground { background: url('../images/innerbackground.jpg') no-repeat top center;} #container { width: 949px; margin: 0 auto; overflow: hidden;} #masthead { width: 100%; overflow: hidden;} img#logo { float: left;} img#mastheadImg { float: right;} #footerContainer { background: url('../images/footer.png') repeat-x;} #footer { width: 909px; padding: 10px 20px; margin: 0 auto; overflow: hidden; font-size: 1.1em; color: #fff; background: transparent; } #copyright { float: left; width: auto; } /*--------------------------------------------------------------------------------------- Content ---------------------------------------------------------------------------------------*/ /*------------------------------------ Common ------------------------------------*/ .instructorsearch { background: url('../images/instructorsearch.png') no-repeat; width:400px; height: 53px; padding: 12px 0 0 52px; color: #fff; font-weight: bold; float: none; margin: 25px 5px 0 0;} #instuctorsearchForm { font-weight: normal; padding-top: 3px; padding-left: 25px; } #instuctorsearchForm .input { border-width:1px; border-color:#706b6f #e6eaeb #d4d4d4 #a2a4a1; padding: 2px 5px; vertical-align: middle; width: 190px;} #instuctorsearchForm .input.blur { color: #42a5d0;} #instuctorsearchForm .submit { margin: 0 0 0 7px; width: 71px; height: 23px; background: url('../images/search2.png') no-repeat; text-indent: -9999px; overflow: hidden; vertical-align: middle;} #instuctorsearchForm .submit:hover { background-position: bottom left;} body.fullpage .instructorsearch { float: right; margin: -10px 5px 0 0; width: 282px; padding: 12px 0 0 0; background: url('../images/instructorsearch-small.png') no-repeat; height: 60px;} body.fullpage .instructorsearch span { display: block; padding: 0 20px 0 52px;} body.fullpage .instructorsearch .input { width: 130px !important; margin-left: 52px; margin-top: 5px;} body.fullpage .instructorsearch .input.blur { color: #42a5d0;} body.fullpage .instructorsearch .submit { margin-top: 5px !important;} body.fullpage .instructorsearch label { display: block; margin-left: 52px;} /*------------------------------------ Home Page ------------------------------------*/ #banner { margin-top: 5px; background: url('../images/banner-phone.jpg') no-repeat; text-indent: -9999px; overflow: hidden; width: 949px; height: 245px; } p.highlight { font-size: 1.5em; font-family:Tahoma, Geneva, sans-serif; line-height: 1.3em; color: #000; float: left; margin-top: 15px; padding-top: 7px; border-top: 1px solid #999; width: 604px;} body.fullpage p.highlight { width: 235px; padding-top: 0; margin-top: 0; border-top: 0; padding: 0 20px; margin-top: 15px;} p.highlight span { color:#2f93c5;} #sideCol .highlight { float: left;} body.fullpage #sideCol { padding:10px 0 0; width:293px;} body.fullpage #features { overflow: hidden; margin-left: -32px; clear:both;} body.fullpage .feature { float: left; width: 267px; height: 165px; margin-left: 10px; padding: 6px 5px; background: url('../images/feature.png') no-repeat; position: relative;} body.fullpage .feature a span { position: absolute; bottom: 14px; left: 5px; width: 267px; display: block; color: #fff; font-size: 1.4em; background: url('../images/featurebg.png') repeat-x; height: 35px; line-height: 35px; text-align: center;} /*------------------------------------ Inner Pages ------------------------------------*/ /* Layout */ #content { width: 949px; overflow: hidden; background: url('../images/content-top.png') no-repeat #fff; margin-top: 5px; } #mainCol { float: left; width: 644px; padding-left:10px; padding-top: 15px; } #theoryCol { float: left; width: 644px; padding-left:25px; padding-top: 10px; } #sideCol { float: left; width: 243px; background: url('../images/sidecol_new.png') no-repeat bottom left; min-height: 450px; padding-top: 15px; padding-right: 15px; padding-bottom: 0px; padding-left: 10px; } #sideCol h2 { line-height: 1.2em; border-bottom: 1px solid #74878b; margin-bottom: 10px; padding-bottom: 10px;} #innerbanner { width:604px; height: 156px; margin-bottom: 15px;} #mainCol ul li { padding-bottom: .7em;} /* Lesson Form */ #lessonForm { overflow: hidden;} #lessonForm .formLeft { width: 100%;} #lessonForm .input, #lessonForm .textarea { border-width:1px; border-color:#706b6f #e6eaeb #d4d4d4 #a2a4a1; width: 214px !important; padding: 2px 5px; font-family:Arial, Helvetica, sans-serif; font-size: 14px; color: #333;} #lessonForm .textarea { height: 65px;} #lessonForm .submit { margin: 0; width: 71px; height: 23px; background: url('../images/send.png') no-repeat; text-indent: -9999px; overflow: hidden; float: left;} #lessonForm .submit:hover { background-position: bottom left;} /* Features */ #featuresInner { overflow: hidden; margin-left: -17px;} .feature { float: left; width: 277px; height: 165px; margin-left: 27px; padding: 6px 5px; background: url('../images/feature-inner.png') no-repeat;} .feature-booknow { width: 224px; height: 132px; margin-left: 10px; padding: 6px 5px; background: url('../images/feature-booknow-inner.gif') no-repeat; } /* Mailing List */ #mailinglist { overflow: hidden; padding-bottom: 10px;} #mailinglist .input { border-width:1px; border-color:#706b6f #e6eaeb #d4d4d4 #a2a4a1; width: 150px !important; margin-right: 5px; padding: 2px 5px 3px; font-family:Arial, Helvetica, sans-serif; font-size: 14px; color: #333; float: left;} #mailinglist .submit { margin: 0; width: 71px; height: 23px; background: url('../images/join.png') no-repeat; text-indent: -9999px; overflow: hidden; float: left;} #mailinglist .submit:hover { background-position: bottom left;} /* MailinglistHome */ #mailinglisthome { padding: 0 20px; float: left; width: 250px; } /*------------------------------------ FAQ ------------------------------------*/ #faq { padding-bottom: 1.4em;} #faq .question { padding-bottom: 3px;} #faq .question a { text-decoration: none; font-weight: bold; color: #333;} #faq .question a:hover { color: #2f93c5;} /*------------------------------------ News ------------------------------------*/ #news { padding-bottom: 1.4em;} #news .item { padding-bottom: 1.4em;} #news .title { font-weight: bold; font-size: 1.2em;} #news .abstract { } #news .link { } /*------------------------------------ Useful Links Page ------------------------------------*/ #usefullinks { padding-bottom: 2.8em;} #usefullinks h5 {font-size:1em; font-weight: bold; margin-top: 25px; } #usefullinks a { color: #2F93C5; line-height: 1.6em;} #usefullinks a:hover { color: #BF6464;} /*------------------------------------ Contact ------------------------------------*/ #contactform { overflow: hidden; padding-top: 1.4em;} #contactform .input, #contactform .textarea { width: 200px; padding: 3px 5px; font-family:Arial, Helvetica, sans-serif; font-size: 14px;} #contactform .input.blur { color: #42a5d0;} #contactform .textarea { height: 60px;} /*------------------------------------ Shop Pages ------------------------------------*/ #shoplisting { } #shoplisting .item { overflow: hidden; border-bottom: 1px solid #c5c5c6; padding: 0 0 15px 0; margin-bottom: 15px;} #shoplisting .item .img { float: left; width: 216px; border: 1px solid #a4a4a4; padding: 5px; background: #fff;} #shoplisting .item .img img { width: 215px; height: 160px;} #shoplisting .item .infocol { float: left; width: 210px; padding: 30px 25px 0;} #shoplisting .item .title { font-size: 1.6em; font-weight: bold; line-height: 1.2em;} #shoplisting .item .abstract { margin-top: 20px;} #shoplisting .item .info2col { float: left; width: 115px; padding: 30px 0 0 0;} #shoplisting .item .price { font-size: 1.6em; font-weight: bold; line-height: 1.2em;} #shoplisting .item .links { margin-top: 25px;} #shoplisting .item .links a { display: inline-block; padding: 0 10px; background: url('../images/shopbutton.png') repeat-x #0c0c0c; color: #fff; text-decoration: none; border: 1px solid #777; margin-bottom: 5px; line-height: 17px;} #shoplisting .item .links a:hover { background-position: bottom left;} #shopitem { overflow: hidden;} #shopitem .title { font-size: 1.6em; font-weight: bold; color: #ef231c; padding: 25px 0;} #shopitem .productinfo { position: relative; overflow: hidden;} #shopitem .info { width: 200px; position: absolute; bottom: 0; right: 15px;} #shopitem .img { float: left; width: 348px; border: 1px solid #a4a4a4; padding: 5px; background: #fff; margin-right: 25px;} #shopitem .img img { width: 346px; height: 288px;} #shopitem .price { font-size: 1.6em; line-height: 1.2em;} #shopitem .price span { color: #ef231c;} #shopitem .ref { font-size: 1.2em;} #shopitem .ref span { color: #ef231c;} #shopitem .quantity { margin-top: 10px; font-size: 1.6em; line-height: 1.2em;} #shopitem .quantity .input { width: 20px; padding: 2px; font-size: 14px; text-align: center;} #shopitem .links { width: 152px; margin-top: 40px;} #shopitem .links a { width: 130px; display: block; padding: 0 10px; background: url('../images/shopbutton.png') repeat-x #0c0c0c; color: #fff; text-decoration: none; border: 1px solid #777; margin-bottom: 5px; line-height: 17px;} #shopitem .links a:hover { background-position: bottom left;} #shopitem .abstract { margin-top: 20px;} #shopitem .abstract h5 { font-size: 1.3em; padding-bottom: 15px;} /*------------------------------------ Highway Code ------------------------------------*/ #highwaycode { margin: 0 0 0 65px; display: block; width: 110px; height: 88px; background: url('../images/highway/highwaycode.jpg') no-repeat 1px 1px; text-indent: -9999px; overflow: hidden; padding: 1px; border: 1px solid #999;} body.fullpage #highwaycode { margin: 30px 0 0 85px; float: left;} body.highwayPage #sideCol {display: none; } body.highwayPage #mainCol { width: 899px;} #highway { overflow: hidden;} #highway h3 { font-size: 1.4em; padding: 0 0 5px; } #highway .itemHighlight { border: 1px solid #E0E0E0; float:left; margin:5px 0 15px; padding:0; width:897px; background: #eff7fa;} #highway .itemHighlight p { padding: 0;} #highway .itemHighlight div { overflow:hidden; padding:10px 10px 8px;} #highway .itemHighlight img { border:1px solid #E0E0E0; height:88px; width:110px; float:left; margin:0 10px 3px 0;} #highway .linksContainer { float:left; width:100%;} #highway .itemContainer { clear:left; float:left; padding:0 5% 7px 0; width:45%;} #highway .introText { font-size: 1.2em; line-height: 1.2em; padding-bottom: 1.1em;} #highway .linkSummary { background: #eff7fa; border:1px solid #E0E0E0; color:#000000; height:1%; margin:10px 0; overflow:hidden; padding:0;} #highway .linkSummary h3 { color:#000000; font-size: 1.1em; margin-bottom:4px; padding:6px 0 8px 36px; font-weight: bold; background: url('../images/highway/nextpage.png') no-repeat 10px 50% #e0e9ec;} #highway .linkSummary ul { float:left; list-style:none outside none; margin:0; padding:5px 10px 4px 5px;} #highway .linkSummary li { clear:left; margin:0; overflow:hidden; padding:0 0 4px; width:100%; margin-bottom:6px; margin-left:15px;} #highway .linkSummary a { background:url("../images/highway/blacklink.gif") no-repeat 1px 5px transparent; color:#000; float:left; margin-left:2px; padding:0 0 0 15px;} #highway ul.subLinks { float: left; list-style:none outside none; margin: 0 0 .6em!important; overflow:hidden; padding:0 0 10px; width:100%;} #highway ul.subLinks li { float:left; margin:0; padding:0 0 8px !important; width:100%;} #highway ul.subLinks li a { background: url("../images/highway/redlink.gif") no-repeat 3px 5px #FFFFFF; padding:0 0 4px 15px;} #highway .subContent { float:left; margin:0; padding:0; width:100%;} #highway .subContent h4 { clear:left; font-size:1em; margin:3px 0 0; padding:0 5px 3px; font-weight: bold; background: #f3f8fa; margin-bottom: 5px;} #highway .subContent p { padding: 0 5px 1.4em;} #highway .subContent ul { padding-bottom: 1.4em; margin-left: 40px; clear:left;} #highway .subContent ul li { padding-bottom: 2px;} #highway div.ImageAndCaption_largeImage { float:left; font-size:85%; margin:4px 5px 2.4em 0; width:322px;} #highway .ImageAndCaption_largeImage img { border:1px solid #E0E0E0; height:260px; width:320px;} #highway .subContent h3 { border-top: 1px solid #E0E0E0; padding-top: 1em;} #highway table { border:1px solid #E0E0E0; border-collapse:collapse; font-size:100%; margin:7px 0 10px; padding:0; width:897px;} #highway table th#X0Y0 { border-left:1px solid #E0E0E0;} #highway table th { background:none repeat scroll 0 0 #F2F1EF; border:1px solid #E0E0E0; color:#000000; padding:5px; text-align:left; vertical-align:top;} #highway table td p { margin:0; padding:0 !important; text-align:left;} #highway table th p { margin:0; padding:0 !important;} #highway table td { border-color:-moz-use-text-color #E0E0E0 #E0E0E0; border-right:1px solid #E0E0E0; border-style:none solid solid; border-width:medium 1px 1px; padding:5px; text-align:left; vertical-align:top; width:auto;} #highway table caption { caption-side:bottom; text-align: left; padding: 10px 0 20px 15px; font-style:italic;} #highway .ImageAndCaption img { border:1px solid #E0E0E0; height:120px; width:150px;} #highway .ImageAndCaption { float:left; font-size:85%; margin:0; padding:4px 10px 10px 0;} /*--------------------------------------------------------------------------------------- Navigation ---------------------------------------------------------------------------------------*/ /*------------------------------------ MainNav ------------------------------------*/ ul#mainNav { margin: 0; padding: 0; list-style: none; width: 100%;line-height: 1.0; } ul#mainNav li { margin: 0; padding: 0; float: left; display: inline; width: auto; position:relative;} ul#mainNav li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } ul#mainNav li a { float: left; display: block; height: 46px; width: auto; background: url('../images/nav.png') no-repeat; text-indent: -9999px; position: relative;} ul#mainNav li.nav-home a { width: 169px; background-position: 0 0;} ul#mainNav li.nav-home a:hover { background-position: 0 -46px;} ul#mainNav li.nav-home a.selected { background-position: 0 -92px;} ul#mainNav li.nav-lessons a { width: 144px; background-position: -169px 0;} ul#mainNav li.nav-lessons a:hover { background-position: -169px -46px;} ul#mainNav li.nav-lessons a.selected { background-position: -169px -92px;} ul#mainNav li.nav-instructor a { width: 221px; background-position: -313px 0;} ul#mainNav li.nav-instructor a:hover { background-position: -313px -46px;} ul#mainNav li.nav-instructor a.selected { background-position: -313px -92px;} ul#mainNav li.nav-franchise a { width: 104px; background-position: -534px 0;} ul#mainNav li.nav-franchise a:hover { background-position: -534px -46px;} ul#mainNav li.nav-franchise a.selected { background-position: -534px -92px;} ul#mainNav li.nav-carhire a { width: 158px; background-position: -638px 0;} ul#mainNav li.nav-carhire a:hover { background-position: -638px -46px;} ul#mainNav li.nav-carhire a.selected { background-position: -638px -92px;} ul#mainNav li.nav-shop a { width: 70px; background-position: -796px 0;} ul#mainNav li.nav-shop a:hover { background-position: -796px -46px;} ul#mainNav li.nav-shop a.selected { background-position: -796px -92px;} ul#mainNav li.nav-contact a { width: 83px; background-position: -866px 0;} ul#mainNav li.nav-contact a:hover { background-position: -866px -46px;} ul#mainNav li.nav-contact a.selected { background-position: -866px -92px;} ul#mainNav ul { background: url('../images/dropdownnav.png') repeat-x #1d7bb9; border: 1px solid #072167; border-top: 0;} ul#mainNav ul li a { text-indent: 0; color: #fff; text-decoration: none; background: transparent; height: auto; padding: 10px 0 10px 25px; border-bottom: 1px solid #32d8ea; font-weight: bold;} ul#mainNav ul li.last a { border: 0;} ul#mainNav ul li a:hover { background: url('../images/subnavhover.png');} /* Dropdown */ #mainNav ul { position:absolute; top:-999em; margin: 0; width: 10em; /* left offset of submenus need to match (see below) */ } #mainNav li:hover ul, #mainNav li.sfHover ul { left:0; top: 46px; /* match top ul list item height */ z-index: 99999; } ul#mainNav li:hover li ul, ul#mainNav li.sfHover li ul { top: -999em; } ul#mainNav li li:hover ul, ul#mainNav li li.sfHover ul { left: 10em; /* match ul width */ top: 0; } ul#mainNav li li:hover li ul, ul#mainNav li li.sfHover li ul { top: -999em; } ul#mainNav li li li:hover ul, ul#mainNav li li li.sfHover ul { left:10em; /* match ul width */ top: 0; } /*** arrows **/ #mainNav a.sf-with-ul { padding-right: 0; min-width:1px; /* trigger IE7 hasLayout so spans position accurately */ } .sf-sub-indicator { position:absolute; display: block; right:.75em; top:1.05em; /* IE6 only */ width:10px; height:10px; text-indent: -999em; overflow:hidden; background:url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */ } a > .sf-sub-indicator { /* give all except IE6 the correct values */ top:.8em; background-position: 0 -100px; /* use translucent arrow for modern browsers*/ } /* apply hovers to modern browsers */ a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator { background-position: -10px -100px; /* arrow hovers for modern browsers*/ } /* point right for anchors in subs */ #mainNav ul .sf-sub-indicator { background-position: -10px 0; } #mainNav ul a > .sf-sub-indicator { background-position: 0 0; } /* apply hovers to modern browsers */ #mainNav ul a:focus > .sf-sub-indicator, #mainNav ul a:hover > .sf-sub-indicator, #mainNav ul a:active > .sf-sub-indicator, #mainNav ul li:hover > a > .sf-sub-indicator, #mainNav ul li.sfHover > a > .sf-sub-indicator { background-position: -10px 0; /* arrow hovers for modern browsers*/ } /*------------------------------------ MinorNav ------------------------------------*/ ul#minorNav { margin: 0; padding: 0; list-style: none; float: right; width: auto;} ul#minorNav li { margin: 0; padding: 0; float: left; width: auto; display: inline; margin: 0 7px 0 0; padding: 0 7px 0 0; background: url('../images/footerDiv.png') no-repeat center right;} ul#minorNav li.last { background: none; margin: 0; padding: 0;} ul#minorNav li a { float: left; color: #fff; width: auto; text-decoration: none; padding-bottom: 2px; background: transparent;} ul#minorNav li a:hover { border-bottom: 1px dotted #fff; padding-bottom: 1px;} ul#minorNav li a.selected { font-weight: bold; text-decoration: underline;} /*--------------------------------------------------------------------------------------- Misc. ---------------------------------------------------------------------------------------*/ /*------------------------------------ ErrorPage ------------------------------------*/ body#errorPage {} body#errorPage #content { margin-top: 45px;} body#errorPage #content p { padding: 100px 0; text-align: center;} /* Backlink */ .backLink { margin-top: 1.4em;} .backLink a { background: url('../images/back.png') no-repeat; center left; padding-left: 20px;} #highwaycode_large { margin: 0 0 0 35px; display: block; width: 165px; height: 132px; background: url('../images/highway/highwaycode_large.jpg') no-repeat 1px 1px; text-indent: -9999px; overflow: hidden; padding: 1px; border: 1px solid #999; } #menu a, #menu a:visited { font-family:Arial, Helvetica, sans-serif; font-size:14px; text-decoration:none; font-weight:bold; text-align:left; color:#2AADD4; display:block; width:13em; padding:1em; margin:0.0em auto; } #menu a:hover { color:#1D80BB; no-repeat 0px 0px; } #locationlist { font-family:Arial, Helvetica, sans-serif; font-size:12px; text-decoration:none; font-weight:normal; text-align:left; display:block; padding:1em; margin:0.0em auto; } #facebook_logo a, #facebook_logo a:visited { margin: 0 0 0 0px; display: block; float: left; width: 28px; height: 28px; background: url('../images/facebook_logo.png') no-repeat 1px 1px; text-indent: -9999px; overflow: hidden; padding: 1px; } #facebook_logo a:hover { background: url('../images/facebook_logo.png') no-repeat -27px 1px } #twitter_logo a, #twitter_logo a:visited { margin: 0 0 0 15px; display: block; float: left; width: 28px; height: 28px; background: url('../images/twitter_logo.png') no-repeat 1px 1px; text-indent: -9999px; overflow: hidden; padding: 1px; } #twitter_logo a:hover { background: url('../images/twitter_logo.png') no-repeat -27px 1px } #youtube_logo a, #youtube_logo a:visited { margin: 0 0 0 15px; display: block; float: left; width: 27px; height: 28px; background: url('../images/youtube_logo.png') no-repeat 1px 1px; text-indent: -9999px; overflow: hidden; padding: 1px; } #youtube_logo a:hover { background: url('../images/youtube_logo.png') no-repeat -27px 1px } #facebook_logo_main a, #facebook_logo a:visited { margin: 0 0 0 20px; display: block; float: left; width: 28px; height: 28px; background: url('../images/facebook_logo.png') no-repeat 1px 1px; text-indent: -9999px; overflow: hidden; padding: 1px; } #facebook_logo_main a:hover { background: url('../images/facebook_logo.png') no-repeat -27px 1px } #facebook_like { margin-top: 5px; margin-right: 0; margin-bottom: 0; margin-left: 5px; padding-top: 10px; clear: both; } #theoryTest { margin-top: 25px; margin-right: auto; margin-bottom: 0; margin-left: auto; padding-top: 10; clear: both; width: 805px; height: auto; clear: none; }