/* TEMPLATE */

/*

very light blue : E1E4F3
light blue : 5876B8
dark blue : 0055A4
orange : F78F1E

*/

body, table {
    color: black;
    text-align: left;
    font-size: 12px;
}
body {
    text-align: center; /* for IE, because margin:auto doesn't work */
}
a {
    text-decoration: none;
    color: #0055A4;
}
a:hover,
a:active {
    color: #F78F1E;
}
.link {
    color: #F78F1E;
}
h3 {/* title of paragraph */
    margin-top: 10px;
    font-weight: bold;
}
p {
    margin-bottom: 10px;
}
p.note {
    font-size: 10px;
}
#page {
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 819px;
    text-align: left;
}
#header {
    background: white url(../img/template/header_bg.png) no-repeat;
    width: 819px;
    height: 200px;
    position: relative;
    margin-bottom:10px;
}
#header #homeLink {
    width: 173px;
    height: 174px;
    position: absolute;
    top: 0;
    left: 0;
}
#header #homeLink:hover {
    background: white url(../img/template/header_bg_hover.png) no-repeat;
    cursor: pointer;
}
#header #languageSwitch {
    position: absolute;
    top: 180px;
    left: 0;
}
#content {
}
#footer {
    clear: both;
    text-align: center;
    padding-top: 60px;
    margin-bottom: 20px;
    font-size: 10px;
}
.roadSlideshow {
    float: left;
    height: 174px;
    width: 175px;
    margin-right: 20px;
    margin-bottom: 20px;
}
#header #animBike {
    position: absolute;
    /* original position */
    top:107px;
    left:115px;
}

/* NAVIGATION */

#header #navigation {
    position: absolute;
    top: 145px;
    left: 180px;
    z-index: 50;
}
#header #navigation li {
    list-style-image: none;
    list-style-type: none;
    display: block;
    float: left;
    padding-left: 30px;
}
#navigation li a {
    display: block;
    width: 90px;
    height: 19px;
}
#navigation li a:hover,
#navigation li a:active {
    background-position: 0 -38px;
}
#navigation li.activeNav a {
    background-position: 0 0;
}

/*
#header #navigation li a {
    text-decoration: none;
    font-size: 18px;
    color: #5876B8;
}
#header #navigation li a:hover {
    color: #F78F1E;
}
#header #navigation li a:active {
    color: white;
}
#header #navigation li.activeNav a,
#header #navigation li.activeNav a:hover,
#header #navigation li.activeNav a:active {
    color: white;
}
*/
.fr #navproducts a {
    background: url(../img/template/navig/products_fr.png) no-repeat;
    background-position: 0 -19px;
}
.en #navproducts a {
    background: url(../img/template/navig/products_en.png) no-repeat;
    background-position: 0 -19px;
}
.fr #navhealth a {
    background: url(../img/template/navig/health_fr.png) no-repeat;
    background-position: 0 -19px;
}
.en #navhealth a {
    background: url(../img/template/navig/health_en.png) no-repeat;
    background-position: 0 -19px;
}
.fr #navsponsors a {
    background: url(../img/template/navig/sponsors_fr.png) no-repeat;
    background-position: 0 -19px;
}
.en #navsponsors a {
    background: url(../img/template/navig/sponsors_en.png) no-repeat;
    background-position: 0 -19px;
}
.fr #navcontact a {
    background: url(../img/template/navig/contact_fr.png) no-repeat;
    background-position: 0 -19px;
}
.en #navcontact a {
    background: url(../img/template/navig/contact_en.png) no-repeat;
    background-position: 0 -19px;
}
.fr #navlinks a {
    background: url(../img/template/navig/links_fr.png) no-repeat;
    background-position: 0 -19px;
}
.en #navlinks a {
    background: url(../img/template/navig/links_en.png) no-repeat;
    background-position: 0 -19px;
}

/* CSS BOX */

.cssbox {
    color: #0055A4;
    margin: 10px;
}
.cssbox .expanderLink {
    display: block;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 10px;
}
.cssbox_body {
    margin-right: 0;
}
.cssbox_body_expanded {
    position: absolute;
    left:-10000px;
}

/* see http://www.modxcms.com/simple-rounded-corner-css-boxes.html */

/* set the image to use and establish the lower-right position */
.cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2 {
    background: white url(../img/template/box.png) no-repeat bottom right;
}
.cssbox:hover, .cssbox:hover .cssbox_body, .cssbox:hover .cssbox_head, .cssbox:hover .cssbox_head h2 {
    background: white url(../img/template/box_hover.png) no-repeat bottom right;
}
.cssbox, .cssbox:hover {
    width: 335px; /* default total box width - padding-right(next) */
    padding-right: 15px; /* the gap on the right edge of the image (not content padding) */
}

/* set the top-right image */
.cssbox .cssbox_head,
.cssbox:hover .cssbox_head {
    background-position: top right; margin-right: -15px; /* pull the right image over on top of border */
    padding-right: 20px; /* right-image-gap + right-inside padding */
}

/* set the top-left image */
.cssbox .cssbox_head h2,
.cssbox:hover .cssbox_head h2 {
    background-position: top left;
    margin: 0; /* reset main site styles*/
    border: 0; /* ditto */
    padding: 0 0 15px 15px; /* padding-left = image gap + interior padding ... no padding-right */
    height: auto !important; height: 1%; /* IE Holly Hack */
}

/* set the lower-left corner image */
.cssbox .cssbox_body,
.cssbox:hover .cssbox_body {
    background-position: bottom left;
    padding: 0 0 15px 15px; /* mirror .cssbox_head right/left */
}

/* HOME */

#home {
    min-height:400px;
    position:relative;
}
#home #slogans {
    height:294px;
    left:250px;
    position:relative;
    top:-245px;
    width:623px;
    z-index:20;
    display:block;
}
#home p {
    position:relative;
    top:-100px;
    left: 315px;
    width:500px;
    z-index:30;
}

/* PRODUCTS */

#products #productsLeft {
    width: 200px;
    float: left;
}
#products #productsRight {
    float: right;
    width: 570px;
}
#products .cssbox {
    float: left;
}
#products #box3 {
    clear: left;
}

/* HEALTH */

#health #box2,
#health a.download {
    clear: both;
}
#health .cssbox,
#health a.download {
    float: right;
    margin: 0;
    margin-bottom: 5px;
}
#health ul {
    padding-left: 15px;
}
#health li {
    list-style: circle;
    margin-bottom: 5px;
}
#health table {
    width: 100%;
    border: 0;
    border-top: 1px solid #0055A4;
    border-right: 1px solid #0055A4;
    color: #0055A4;
    margin-bottom: 30px;
}
#health th {
    font-weight: bold;
}
#health td,
#health th {
    padding: 3px;
    border: 0;
    border-bottom: 1px solid #0055A4;
    border-left: 1px solid #0055A4;
}

/* SPONSORS */

#sponsors table {
    width: 600px;
}
#sponsors td {
    text-align: center;
    padding: 10px;
}

/* CONTACT */

#contact input,
#contact textarea {
    border: 1px solid white;
    background-color:white;
    width: 400px;
    margin:0;
    margin-right:10px;
    margin-left:10px;
}
#contact input:hover {
    border-bottom: 1px dotted #F78F1E;
}
#contact #contactForm,
#contact #contactThankYou {
    float: right;
}
#contact .checkbox {
    width: 30px;
}
#contact .submitBtn {
    color: #0055A4;
    float: right;
    width: 100px;
    border: 0;
}
#contact .submitBtn:hover {
    color: #F78F1E;
    border: 0;
}

/* LINKS */

#links table {
    width: 600px;
}
#links td {
    text-align: center;
    padding: 10px;
}