html, body {
background: url(../images/bg.jpg) no-repeat;
background-color: #000000;
background-position: 50% 0%;
margin: 0;
padding: 0;
text-align: left;
height: 100%;
z-index: 0;
}
/* Common Functions ================ */
.clear { clear: both; }
.trans { border: 0; }
.image-left { display: block; clear: left; float: left; }
.image-right { display: block; clear: right; float: right; }
/* Wrappers ======================== */
#intro-bar {
display: block;
width: 100%;
height: 44px;
background-color: #bd1a1f;
text-align: center;
}
#intro-bar h1 {
display: inline-block;
width: 446px;
height: 42px;
background: url(../images/intro.jpg) no-repeat;
text-indent: -9999px;
}
#wrapper {
display: block;
position: relative;
top: 0px;
left: 50%;
margin-left: -490px;
width: 980px;
}
/* Header --------------------------------- */
#header {
width: 980px;
height: 78px;
margin-top: 42px;
clear: both;
}
#logo {
display: block;
float: left;
width: 330px;
height: 78px;
background: url(../images/logo.png) no-repeat;
outline: 0;
}
#logo:hover {
background-position: 0px -78px;
}
#nav {
display: block;
width: 650px;
height: 78px;
float: left;
}
#nav a {
display: block;
float: left;
height: 78px;
background: url(../images/navigation.png) no-repeat;
outline: 0;
text-indent: -9999px;
}
#nav a.home { background-position: 0px -78px; width: 103px; }
#nav a.home:hover { background-position: 0px 0px; }
#nav a.about { background-position: -103px -78px; width: 89px; }
#nav a.about:hover { background-position: -103px 0px; }
#nav a.courses { background-position: -192px -78px; width: 186px; }
#nav a.courses:hover { background-position: -192px 0px; }
#nav a.gifts { background-position: -378px -78px; width: 165px; }
#nav a.gifts:hover { background-position: -378px 0px; }
#nav a.contact { background-position: -543px -78px; width: 107px; }
#nav a.contact:hover { background-position: -543px 0px; }
/* Introduction -------------------------------------------- */
#intro {
display: block;
width: 980px;
height: 420px;
border-bottom: 3px solid #2f2f2f;
padding-bottom: 10px;
}
#intro-copy {
width: 319px;
height: 258px;
background: url(../images/intro-copy.png) no-repeat;
padding-top: 164px;
padding-left: 23px;
padding-right: 33px;
display: block;
float: left;
}
#intro-copy h2 {
font-family: lucida sans,arial,sans-serif;
font-size: 33px;
letter-spacing: -2px;
color: #fff;
width: 319px;
}
#intro-copy p {
width: 319px;
color: #fff;
font-size: 15px;
font-family: arial,sans-serif;
margin-top: 15px;
line-height: 30px;
}
#intro-image {
width: 605px;
height: 422px;
display: block;
float: left;
}
/* Midsection ------------------------------ */
#mid {
display: block;
width: 980px;
border-bottom: 3px solid #2f2f2f;
padding-top: 20px;
padding-bottom: 10px;
}
#welcome {
display: block;
float: left;
width: 621px;
padding-left: 20px;
}
#welcome img {
display: block;
float: right;
clear: right;
width: 275px;
height: 214px;
border: 0;
margin-top: -40px;
margin-right: -5px;
}
#welcome h1, #welcome-list h1, #base h1 {
display: block;
font-size: 35px;
color: #fff;
padding-bottom: 10px;
margin-bottom: 15px;
background: url(../images/underline.gif) repeat-x;
background-position: 0% 100%;
font-family: lucida sans,arial,sans-serif;
letter-spacing: -2px;
}
#welcome h1 {
width: 350px;
}
#welcome p, #base p {
font-size: 12px;
font-family: arial,sans-serif;
color: #fff;
line-height: 23px;
margin-bottom: 15px;
}
#welcome-list {
display: block;
float: left;
width: 305px;
padding-left: 34px;
}
#welcome-list ul, .content-copy ul {
font-size: 12px;
color: #fff;
font-family: arial,sans-serif;
padding-left:
}
.content-copy a {
font-weight: bold;
color: #dc2d2b;
text-decoration: none;
}
.content-copy a:hover {
color: #f6221f;
}
#welcome-list ul li, .content-copy ul li {
background: url(../images/bullet.gif) no-repeat;
background-position: 0px 2px;
display: block;
margin-bottom: 10px;
padding-left: 20px;
line-height: 17px;
}
#welcome-list li a {
font-weight: bold;
color: #dc2d2b;
text-decoration: none;
}
#welcome-list li a:hover {
color: #f6221f;
}
.content-left ul {
padding-left: 30px;
}
/* Base --------------------------------------------------- */
#base {
display: block;
width: 980px;
clear: both;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 20px;
height: auto;
border-bottom: 3px solid #2f2f2f;
}
#the-car, #courses-prices {
display: block;
width: 220px;
margin-right: 20px;
float: left;
}
#enquiries {
display: block;
float: left;
width: 470px;
}
#courses-1, #courses-2, #courses-3 {
display: block;
float: left;
margin-right: 25px;
width: 300px;
}
#base h1 {
font-size: 24px;
}
#courses-1 h2, #courses-2 h2, #courses-3 h2 {
display: block;
color: #fff;
font-family: lucida sans,arial,sans-serif;
font-size: 14px;
font-weight: bold;
padding-bottom: 10px;
margin-bottom: 15px !important;
background: url(../images/underline.gif) repeat-x;
background-position: 0% 100%;
}
#courses-1 h1, #courses-2 h1, #courses-3 h1 {
padding-bottom: 5px;
margin-bottom: 0px;
background: none !important;
}
a.view, a.book {
display: block;
width: 220px;
height: 21px;
background: url(../images/more-info.gif) no-repeat;
text-indent: -9999px;
}
a.book {
width: 300px !important;
background: url(../images/book.gif) no-repeat !important;
}
.quick-contact textarea {
display: block;
clear: left;
width: 228px;
height: 107px;
background: url(../images/enquiry.gif) no-repeat;
border: 0;
padding: 10px;
font-family: arial,sans-serif;
font-size: 12px;
color: #fff;
font-style: oblique;
overflow: auto;
}
.quick-contact input.text {
width: 187px;
height: 24px;
float: right;
clear: right;
display: inline-block;
background: url(../images/input.gif) no-repeat;
border: 0;
margin-bottom: 8px;
font-family: arial,sans-serif;
font-size: 12px;
color: #fff;
font-style: oblique;
padding-left: 10px;
padding-right: 10px;
padding-top: 7px;
}
.quick-contact input.submit {
display: block;
clear: right;
float: right;
width: 124px;
height: 39px;
background: url(../images/submit.gif) no-repeat;
border: 0;
cursor: pointer;
margin-right: 83px !important;
margin-top: 7px;
}
/* Internal Pages --------------------------------- */
#banner {
display: block;
width: 980px;
height: 262px;
clear: both;
margin-bottom: 20px;
margin-top: 25px !important;
}
.about { background: url(../images/about-banner.png) no-repeat; }
.courses { background: url(../images/courses-banner.png) no-repeat; }
.gift { background: url(../images/gift-banner.png) no-repeat; }
.contact { background: url(../images/contact-banner.png) no-repeat; }
.thanks { background: url(../images/thanks.png) no-repeat; }
.content-copy {
display: block;
padding-left: 20px;
padding-right: 10px;
padding-bottom: 20px;
border-bottom: 3px solid #2f2f2f;
}
.content-copy p {
font-size: 12px;
color: #fff;
line-height: 22px;
font-family: arial,sans-serif;
margin-bottom: 15px;
text-align: justify;
}
.content-left {
display: block;
float: left;
width: 650px;
margin-right: 25px;
}
.content-right {
display: block;
float: left;
width: 275px;
}
.content-copy h1 {
display: block;
font-size: 35px;
color: #fff;
padding-bottom: 10px;
margin-bottom: 15px;
background: url(../images/underline.gif) repeat-x;
background-position: 0% 100%;
font-family: lucida sans,arial,sans-serif;
letter-spacing: -2px;
}
.content-copy ul strong {
font-weight: bold;
font-size: 13px;
}
.content-copy ul span {
font-style: oblique;
font-size: 11px;
}
/* Contact Page ----------------------------------- */
.contact-form fieldset {
background-color: #292929;
border: 1px solid #121212;
padding: 15px;
margin-bottom: 15px;
display: block;
float: left;
width: 280px;
position: relative;
top: 15px;
height: 170px;
}
.contact-form legend {
font-weight: bold;
font-size: 11px;
color: #fff;
position: absolute;
top: -7px;
}
.contact-form p {
display: block;
clear: both;
margin-bottom: 0px !important;
}
.contact-form input.text {
display: block;
float: left;
width: 145px;
height: 16px;
padding: 6px;
border: 1px solid #212121;
font-size: 11px;
color: #545454;
}
.contact-form label {
display: block;
float: left;
width: 100px;
background-color: #212121;
padding: 6px;
height: 18px;
margin-right: 4px;
padding-left: 8px;
font-size: 11px;
margin-bottom: 5px !important;
}
.contact-form label em {
color: #df3438;
font-style: normal;
}
.contact-form select {
display: block;
float: left;
width: 159px;
height: 30px;
padding: 6px;
border: 1px solid #212121;
font-size: 11px;
color: #545454;
}
.contact-form textarea {
display: block;
float: left;
width: 145px;
height: 70px;
padding: 6px;
border: 1px solid #212121;
font-size: 11px;
color: #545454;
overflow: auto;
}
.contact-form input.submit {
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #bd2724;
border: 1px solid #b51d1a;
padding: 4px;
font-weight: bold;
color: #fff;
font-size: 11px;
margin-top: 10px;
float: right;
margin-right: 3px;
cursor: pointer;
}
.contact-form input.submit:hover {
background-color: #e32420;
}
/* Footer ----------------------------------------- */
#footer {
display: block;
padding-top: 20px;
width: 980px;
font-size: 11px;
color: #fff;
}
#footer a {
color: #b92e31;
}
#footer a:hover {
color: #e1242c;
}
.bf {
font-weight: bold;
text-decoration: none;
}
#footer-nav {
color: #b92e31 !important;
}
#copy {
width: 25%;
display: block;
float: left;
text-align: left;
padding-bottom: 15px;
}
#footer-nav {
display: block;
width: 50%;
text-align: center;
float: left;
}
#designed-by {
display: block;
float: left;
width: 25%;
text-align: right;
}
/* Theory Test Pro Integration - 09/2011 */
#free-theory-test {
display: block;
position: absolute;
left: 50%;
top: 157px;
width: 178px;
height: 178px;
z-index: 10;
margin-left: 310px;
}
#free-theory-test a {
display: block;
width: 178px;
height: 178px;
background: url(/images/free-theory-test.png) no-repeat;
text-indent: -9999px;
overflow: hidden;
}
.internal {
margin-left: 270px !important;
}