@import url("reset.css");


/* Basics
__________ */

/* SET UP
__________ */

* {margin: 0; padding: 0;}

body { 
margin:0;
padding:0;
font-family: "lucida sans", arial, helvetica, sans-serif; 
color: #000; 
background-color: #e9e9e9;
font: 62.5%/1.6em;
background-image: url(../images/backgrounds/background.png); 
background-repeat: repeat-x;
background-position: top;}

.page {background-image:url(../images/backgrounds/background2.png); }


/* IE6
_________________ */


#ie6 {display: none; _display: block; _height: 30px; background-color: #ffff99;}

#ie6-content {_width: 850px; _margin-left: auto; _margin-right: auto;}

#ie6 p, #ie6 h3, #ie6 a {color: #000;}

#ie6 a {text-decoration: underline;}


 
/* Fonts etc
_________________ */

p, h1, h2, h3 {line-height: 180%; color: #000; margin-top: 8px;}

p {font-size: 0.8em; margin-bottom: 8px;}

ul {list-style-type: none; }

li {list-style-position:outside; padding:0;}

a {text-decoration: none; color: #000;}


/* Useful Stuff
_________________ */

.clearer {clear: both; height: 1px;}

.clearer-with-space {clear: both; height: 40px;}



/* Forms
_________________ */

input, form, textarea {background: none; border: none; float: left;}

#wrapper {width: 972px; margin-left: auto; margin-right: auto;}

.textfield, .textbox {font-family: "lucida sans", arial, helvetica, sans-serif; font-size: 0.7em; padding-left: 0; margin-left: 0;}

.textfield {padding-left: 20px;}

input.sendbutton {padding: 10px; background-color: #333; color: #fff;}



/* flags
_________________ */

#flags-and-logo {width: 972px; margin-left: auto; margin-right: auto; padding: 0; margin-top: 0;}

.logo {float: left; width: 303px; height: 129px;}
.flags {float: right; margin-top: 5px;}

.flags img {float: right; margin-left: 5px;}

.phone-number {float: right; clear: right; width: 238px; height: 20px; margin-top: 25px;}

#navigation {clear: right; float: right; margin-top: 25px; width: 465px; _width: 480px; position: relative;}

.navigation-button {float: left; width: 85px; height: 28px; margin-left: 8px;}






/* main body
_________________ */

#line {width: 100%; height: 2px; background-image: url(../images/utilities/line.png); background-repeat: repeat-x; margin-top: 20px;}

#sub-header-wrapper {width: 972px; margin-left: auto; margin-right: auto;}

#sub-header {width: 100%; height: 60px; margin-top: 20px; margin-left: 22px; _display: none;}

#sub-header.about {background-image: url(../images/headers/about.png); background-repeat: no-repeat;}
#sub-header.blank {background-image: url(../images/headers/blank.png); background-repeat: no-repeat;}

#sub-header.contact {background-image: url(../images/headers/contact.png); background-repeat: no-repeat;}
#sub-header.services {background-image: url(../images/headers/services.png); background-repeat: no-repeat;}
#sub-header.trainers {background-image: url(../images/headers/trainers.png); background-repeat: no-repeat;}

#sub-header .ticker {float: left; margin-top: 20px;}


#main-body {width: 972px; float: left; margin-left: 22px;}

#main-body .top {width: 952px; background-image: url(../images/backgrounds/maintop.png); _display: none; height: 17px;}
#main-body .middle {width: 952px; background-image: url(../images/backgrounds/mainmiddle.png); _background-image: none; _background-color: #fff;}
#main-body .bottom {width: 952px; background-image: url(../images/backgrounds/mainbottom.png); _display: none; height: 13px;}


/* Left column */

#main-body .left-column {width: 550px; float: left; margin-left: 20px; }

.fbcol1 {width: 250px; float: left; margin-left: 20px; }

.fbcol2 {width: 240px; float: right; margin-left: 10px; }



#main-body .left-column p.headline {color: #ca1111; font-weight: bold; font-size: 1.2em; display: block; padding-bottom: 6px; border-bottom: 1px dotted #999;}
#main-body .left-column p.intro {color: #000; font-size: 0.9em; font-weight: bold;}
#main-body .left-column p.intronotbold {color: #000; font-size: 0.7em; font-weight: normal;}

#main-body .left-column p.crosshead,  p.crosshead {font-variant: small-caps; color: #333; font-weight: bold; font-size: 0.9em; display: block; width: 100%; margin-bottom: 3px; border-bottom: 1px dotted #999;}
#main-body .left-column a {color: #333; border-bottom: 1px solid #333;}
#main-body .left-column a:hover {color: #999; border-bottom: 1px solid #999;}



#main-body .left-column .crosshighlight {width: 225px; min-height: 370px; float: left; background-color: #777; padding: 8px; margin-right: 5px; margin-top: 5px;}

#main-body .left-column .crosshighlight p {font-size: 0.8em; color: #fff;}
#main-body .left-column .crosshighlight li {font-size: 0.8em; color: #fff; list-style-type: disc; list-style-position: outside; margin-left: 15px; margin-bottom: 5px;}
#main-body .left-column .crosshighlight h2 {font-size: 1.1em; margin-bottom: 1px; display: inline; padding: 0; color: #fff;}

#main-body .left-column .crosshighlight2 {background-color: #999;}
#main-body .left-column .crosshighlight2 p, #main-body .left-column .crosshighlight2 h2 { color: #000;}


#main-body .left-column .highlight-column {width: 160px; background-color: #999; float: left; padding: 5px; margin-right: 5px; height: 400px;}
#main-body .left-column .highlight-column li {font-size: 0.75em; list-style-type: disc; list-style-position: inside; margin-bottom: 5px;}

#main-body .right-column {width: 260px; float: right; margin: 0 20px;}
#main-body .right-column p.headline {color: #333; font-weight: bold; font-size: 1.2em; display: block; padding-bottom: 6px; border-bottom: 1px dotted #999; text-align: left;}
#main-body .right-column h2 {color: #999; font-weight: bold; font-size: 1.2em; display: block; padding-bottom: 6px;}

#main-body .right-column ul, #main-body .right-column li {list-style-type: disc; list-style-position: inside; text-align: left;}
#main-body .right-column li, #main-body .right-column p.sidebar {font-size: 0.8em; line-height: 200%; color: #666; }
#main-body .right-column p.sidebar {margin-top: 0; font-size: 0.7em; line-height: 200%; color: #333;}

#main-body .right-column li.description {list-style-type: none; margin-left: 12px; margin-bottom: 5px;} 
#main-body .right-column li.description2 {list-style-type: none; margin-bottom: 5px; margin-left: 0;} 


#main-body img.float-left {float: left; margin: 10px 20px 10px 0; border: 1px solid #999;}
#main-body img.float-right {float: right; margin: 10px 0 10px 20px; border: 1px solid #999;}



/* About */

#about {}

/* Contact */

#contact {}

/*#contact input, #contact textarea {background-color: #cecece; border: 1px solid #666; border-collapse: collapse; float: left; color: #000; padding: 5px; margin-top: 5px; width: 240px; font-family: "lucida sans", arial, helvetica, sans-serif; font-size: 0.7em; }

#contact textarea {padding: 5px 5px 5px 0px;}

.textfield {padding-left: 20px;}

#contact input.sendbutton {width: 120px; background-color: #333; color: #fff;}

#contact textarea {height: 50px;}

#contact form {margin-top: 5px;}

*/

/* Contact form */

#name, #company-name, #postcode, #contact-number, #email-address, #enquiry, #country, #simple-maths {display: inline-block; width: 240px; background-color: #cecece; border: 1px solid #666; border-collapse: collapse; font-family: "lucida sans", arial, helvetica, sans-serif; font-size: 0.7em; color: #666; padding: 3px; height: 20px; margin-bottom: 5px;}

#contactform input, #contactform .select {float: left; clear: left; display: inline-block; width: 240px; background-color: #cecece; border: 1px solid #666; border-collapse: collapse; font-family: "lucida sans", arial, helvetica, sans-serif; font-size: 0.7em; color: #666; padding: 3px; height: 20px; margin-bottom: 5px;}

#contactform .select {width: 200px;}

#contactform .req-label, #contactform .opt-label, #contactform .explain, #results .error, #results p {float: left; clear: left; font-family: "lucida sans", arial, helvetica, sans-serif; font-size: 0.7em; color: #666; font-weight: normal; width: 240px; margin-bottom: 5px;}

#message {display: inline-block; width: 240px; background-color: #cecece; border: 1px solid #666; border-collapse: collapse; font-family: "lucida sans", arial, helvetica, sans-serif; font-size: 0.7em; padding: 3px; height: 120px; margin-bottom: 5px}

.main-label {display: none;}

#enquiry {height: 100px;}

#contact input.button {width: 100px; background-color: #333; color: #fff; height: 30px; margin-top: 10px;}

#contact form p {font-size: 0.8em; margin-bottom: 2px;}



/* Services */

#services {}

/* Trainers */

#trainers {}

#trainers .training-column {width: 260px;}

#trainers .a-trainer, #trainers .a-trainer-right {width: 120px; float: left; margin-top: 10px;}

#trainers .a-trainer-right {margin-left: 15px;}

#trainers .a-trainer img {border: 1px solid #999;}

#trainers .a-trainer a {font-size: 0.7em; color: #333; text-decoration: underline;}

#trainers .trainer-row {clear: both; width: 100%; height: 81px; padding-bottom: 35px;}

#facebooklanding {margin-top: 60px;}

#facebooklanding .a-trainer, #trainers .a-trainer-right {width: 100px; float: left; margin-top: 10px;}

#facebooklanding .a-trainer-right {margin-left: 25px;}

#facebooklanding .a-trainer img {border: 1px solid #999;}

#facebooklanding .a-trainer a {font-size: 0.7em; color: #333;}

#facebooklanding .trainer-row {clear: both; width: 100%; height: 81px; padding-bottom: 35px;}



/* footer
_________________ */


#footer {clear: both; width: 972px; margin-left: 22px; margin-botom: 40px;}

#footer .footer-navigation, #footer .rightangles, #footer .rb {float: left; height: 25px; margin-top: 4px;}

#footer .rb {clear: both; float: right; width: 400px; margin-top: 25px; _display: none; text-align: right; margin-right: 20px; }

#footer ul {margin-top: 27px; height: 50px;}

#footer li {display: inline;}

#footer li {margin-right: 20px; color: #999; }

#footer a {color: #999; font-size: 0.8em; !important}

#footer a:hover {color: #666; border-bottom: 1px solid #666;}

#footer .rightangles {float: right;  _display: none; width: 300px; height:50px;}

#footer .rightangles img {float: right; margin-right: 20px;}

#footer .facebook {float: left; margin-top: 23px; display:none;}

#footer .facebook-home {float: left; margin-top: 4px; display:none;}



/* Ticker */



.tickercontainer { /* outer div */
border: none;
background: none; 
width: 945px; 
height: 20px; 
margin: 0; 
padding: 0;
overflow: hidden; 
}
.tickercontainer .mask { /* serves as a mask */
position: relative;
left: 0px;
top: 0px;
width: 945px;
overflow: hidden;
}
ul.newsticker { /* the list */
position: relative;
float: left;
left: 945px;
font-family: "lucida sans", arial, helvetica, sans-serif; 
font-size: 0.7em;
list-style-type: none;
margin: 0;
padding: 0;

}
ul.newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
margin: 0;
padding: 0;
background: none;
list-style-type: none;
display: inline;
width: 945px;
}

ul.newsticker li.second {
font-weight: normal;
}

ul.newsticker span {
margin: 0 20px 0 0;
} 


/* Overrides */

h2.red, p.red {color: #ca1111 !important;}

.round {border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;}

#results {border: 1px solid #990000; padding: 5px; font-size: 0.9em; color: #990000; margin-bottom: 10px;}

p.success {font-size: 1.2em; color: #990000;}

#tweet-this {clear: both; float: left;}

#tips ol {list-style-type: decimal; padding-left: 20px; font-size: 0.8em; margin-top: 20px;}

#tips ol li {margin-bottom: 10px; line-height: 150%;}


/* SEO */

#main-body .seo a, #main-body .seo a:hover {color: #2b2b2b; border-bottom: 1px solid #2b2b2b;}


#main-body .right-column .seo p {font-size: 0.7em;}
#main-body .right-column .seo a {text-decoration: underline;}


/* Help */

#help {clear: both; width: 972px; margin-left: auto; margin-right: auto; margin-top: 10px;}

#help p {font-size: 0.6em; color: #999; margin-left: 20px;}

#help a {color: #666;}