/*
-------------------------------------------------------------------------------
Drivers' Club Oy Screen Styles
Author: Frametic
Version: 26.01.2010

Copyright (c) 2009-2010 Frametic. All rights reserved.
---------------------------------------------------------------------------- */

body {
    background: url(../images/img_body_bg.jpg) 0 60px repeat-x #efefef;
    color: #787773;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: small;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1.4em;
    margin: 0;
    padding: 0;
}

/* Layout changes
---------------------------------------------------------------------------- */

body.index #container {
    background: url(../images/img_container_front_bg.png) 0 0 no-repeat transparent;
    height: 225px;
    margin-top: -65px;
    padding: 7px 20px;
    width: 810px;
}

body.sidebar #content {
    clear: right !important;
    float: right !important;
    padding: 0 15px 7px 15px !important;
    width: 540px !important;
}

body.sidebar #footer {
    background: url(../images/img_footer_sidebar_bg.png) 0 0 no-repeat transparent;
}

/* Global definitions
---------------------------------------------------------------------------- */

a,
a:visited {
    border: none;
    color: #d9261c;
    text-decoration: none;
}

a:hover,
a:visited:hover {
    border-bottom: 1px dotted #d9261c;
    color: #d9261c;
    text-decoration: none;
}

a img {
    border: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #d9261c;
    letter-spacing: -1px;
    margin: 0.8em 0;
}

h1 {
    font-size: 180%;
    font-weight: bold;
    line-height: 0.9em;
}

h1 small {
    color: #aaa;
    font-size: 70%;
    font-weight: bold;
}

h2 {
    font-size: 150%;
    font-weight: bold;
}

hr {
    border: none;
    border-top: 1px dotted #ccc;
    height: 0;
    margin: 1.2em 0;
}

.note {
    background-color: #ffffe0;
    color: #333;
    font-family: Palatino, "Palatino Linotype", Georgia, "Times New Roman", serif;
    font-size: 120%;
    font-style: italic;
    padding: 12px;
    text-align: center;
}

.note strong {
    color: #d9261c;
}

.italic {
    font-style: italic;
}

.small {
    font-size: 90%;
}

.strike {
    text-decoration: line-through;
}

/* Structure
---------------------------------------------------------------------------- */

body {
    font-size: 90%;
}

.center {
    clear: both;
    margin: 0 auto;
    padding: 0;
    width: 850px;
}

#header {
    background: url(../images/img_header_bg.jpg) 0 0 repeat-x #505050;
    border-bottom: 5px solid #eae6de;
    clear: both;
    float: left;
    height: 75px;
    margin: 0 0 20px 0;
    padding: 5px 0;
    position: relative;
    width: 100%;
    z-index: 200 !important;
}

#container {
    background: url(../images/img_container_bg.gif) 0 0 no-repeat transparent;
    clear: both;
    margin: 0 auto;
    padding: 15px 0 0 0;
    position: relative;
    width: 850px;
    z-index: 100 !important;
}

#container #map {
    background-color: #fff;
    height: 350px;
    width: 100%;
}

#container #map strong {
    color: #d9261c;
}

#container #interior {
    background-color: #fff;
    border-left: 1px solid #eae6de;
    border-right: 1px solid #eae6de;
    clear: both;
    float: left;
    width: 848px;
}

#container #interior #sidebar {
    background-color: #f5f5f5;
    border-top: 1px solid #eae6de;
    border-right: 1px solid #eae6de;
    border-bottom: 1px solid #eae6de;
    clear: left;
    float: left;
    line-height: normal;
    margin: -5px 0 0 0;
    padding: 10px 25px;
    position: relative;
    width: 220px;
}

#container #interior #content {
    clear: both;
    min-height: 315px;
    padding: 0 15px 7px 435px;
    position: relative;
    width: 398px;
}

#footer {
    background: url(../images/img_footer_bg.png) 0 0 no-repeat transparent;
    clear: both;
    color: #aaa;
    font-size: 85%;
    line-height: 1.3em;
    margin: 0 auto;
    padding: 15px 0 5px 0;
    text-align: center;
    position: relative;
    width: 850px;
    z-index: 100 !important;
}

/* The DC overlay-logo */
#overlay-logo {
    bottom: 0;
    right: 0;
    position: fixed;
    /* Set the overlay-logo to show at the very lowest layer */
    z-index: 1 !important;
}

/* Header
---------------------------------------------------------------------------- */

/* Logo */
#header h1 {
    background: url(../images/img_drivers_club_logo.gif) 0 0 no-repeat transparent;
    float: left;
    height: 58px;
    margin: 7px 0 0 15px;
    text-indent: -5000px;
    width: 264px;
}

/* Navigation
---------------------------------------------------------------------------- */

#nav {
    background: url(../images/img_nav_bg.gif) 0 0 no-repeat transparent;
    color: #fff;
    float: right;
    font-size: 12px;
    font-weight: bold;
    height: 33px;
    list-style: none;
    margin: 20px 0 0 0;
    padding: 0;
    text-transform: uppercase;
    width: 465px;
}

#nav li {
    float: left;
    margin: 0 0 0 15px;
    
}

#nav li#language {
    float: right;
    margin: -3px 0 0 0;
}

#nav li.active a {
    color: #d9261c !important;
}

#nav li a,
#nav li a:visited {
    border: none;
    color: #fff;
    display: block;
    padding: 7px 5px;
    text-decoration: none;
}

#nav li a:hover,
#nav li a:visited:hover {
    border: none;
    color: #d9261c;
    text-decoration: none;
}

/* ----- Sub-navigation ----- */

#subnav {
    clear: right;
    color: #fff;
    float: right;
    font-size: 85%;
    font-weight: bold;
    list-style: none;
    margin: 0;
    padding: 0 10px;
    width: 445px;
}

#subnav li {
    float: left;
    margin: 0 7px 0 0;
    padding: 2px 10px;
}

#subnav li.active a {
    color: #d9261c !important;
}

#subnav li a,
#subnav li a:visited {
    border: none;
    color: #fff;
    text-decoration: none;
}

#subnav li a:hover,
#subnav li a:visited:hover {
    border: none;
    color: #d9261c;
    text-decoration: none;
}

/* Front-page styling
---------------------------------------------------------------------------- */

#banner {
    margin: 0 auto;
    position: relative;
    width: 850px;
    z-index: 100 !important;
}

#countdown {
    clear: left;
    float: left;
    width: 245px;
/*    text-align: center;*/
}

.calendar {
    clear: both;
}

#countdown h1,
#news h1 {
    color: #fff;
    font-size: 150%;
    line-height: normal;
    margin: 0;
    padding: 0.2em 0;
}

/* ----- Countdown ----- */

#countdown .clock {
    background-color: #333;
    border-bottom: 1px dotted #505050;
    clear: both;
    float: left;
    margin: 0;
    padding: 0 2px 0 3px;
}

#countdown .clock .element {
    background: url(../images/img_counter_element_bg.gif) 0 0 no-repeat #000;
    color: #fff;
    float: left;
    font-weight: bold;
    margin: 0 2px 0 0;
    text-align: center;
    text-transform: uppercase;
    width: 58px;
}

#countdown .clock .element div.days,
#countdown .clock .element div.hours,
#countdown .clock .element div.minutes,
#countdown .clock .element div.seconds {
    font-size: 230%;
    height: 23px;
    padding: 14px 2px;
}

#countdown .clock .element div.description {
    background-color: #333;
    color: #787773;
    font-size: 60%;
    line-height: normal;
    padding: 2px 2px;
}

#countdown .clock span {
    clear: both;
    display: block;
    font-size: 60%;
    font-weight: bold;
    margin: 0 0 0 12px;
    text-transform: uppercase;
}

/* ----- Calendar ----- */

.calendar li a,
.calendar li a:visited {
    border: none;
    color: #fff;
    text-decoration: none;
}

.calendar li a:hover,
.calendar li a:visited:hover {
    border: none;
    color: #d9261c;
    text-decoration: none;
}

.calendar {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.calendar li.first {
    background: url(../images/img_calendar_arrow.gif) 50% 0 no-repeat #333;
    border: none;
    padding-top: 10px;
}

/* Overdrive */
#news .calendar li.first {
    background: none;
    border: none;
}

.calendar li {
    background: none !important;
    border-top: 1px solid #505050;
    clear: both;
    float: left;
    font-size: 90%;
    padding: 4px 0;
    width: 100%;
}

.calendar li p {
    font-size: 100%;
}

.calendar li span.summary {
    float: right;
    line-height: normal;
    width: 195px;
}

.calendar li span.summary strong {
    color: #fff;
}

.calendar li div.icon {
    background-color: #fff;
    border: 1px solid #d9261c;
    float: left;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    width: 30px;
}

.calendar li div.month {
    background-color: #d9261c;
    color: #fff;
    font-size: 60%;
    line-height: 1.5em;
    margin: -1px -1px 0 -1px;
    padding: 0 3px;
}

.calendar li div.day {
    background-color: #fff;
    color: #363532;
    font-size: 110%;
    padding: 0 3px;
}

/* ----- /Calendar ----- */

#news {
    border-left: 1px dotted #505050;
    border-right: 1px dotted #505050;
    float: left;
    height: 221px;
    margin: 0 7px;
    overflow: hidden;
    padding: 0 10px;
    width: 235px;
}

/* Overdrives */

#news .calendar li div.icon {
    border: 1px solid #009900;
}

#news .calendar li div.month {
    background-color: #009900;
}

/* ----- Info ----- */

#info {
    clear: right;
    color: #fff;
    float: left;
    font-size: 90%;
    height: 221px;
    line-height: 1.2em;
    margin: 0 0 0 3px;
    overflow: hidden;
    padding: 0 5px 5px 15px;
    position: relative;
    width: 270px;
}

#info h2, 
#info strong {
    color: #fff !important;
}

#info ul {
    margin: 0;
    padding: 0 15px;
}

#info ul li {
    margin: 0;
    padding: 0;
}

/* --- Course (the button) --- */

#course {
    clear: both;
    float: left;
    margin: 0 0 15px 0;
    text-align: center;
    width: 100%;
}

body.index #course {
    margin: 15px 0 0 0;
}

#course a.button, 
#course a.button:visited {
    background-color: #d7190e;
    border-radius: 6px;
        -moz-border-radius: 6px;
        -o-border-radius: 6px;
        -webkit-border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.51);
        -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.51);
        -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.51);
        -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.51);
    border: 1px solid #9c1614;
    color: #ffffff;
    display: inline-block;
    font-size: 80%;
    font-weight: bold;
    line-height: 1.3em;
    margin: 0 auto;
    padding: 13px 20px 12px 20px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

#course a.button:hover, 
#course a.button:visited:hover {
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.51);
        -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.51);
        -o-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.51);
        -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.51);
    color: #fff;
    text-decoration: none;
}

#course a.button:active {
    box-shadow: inset 0 1px 1px #9b1614 !important;
        -moz-box-shadow: inset 0 1px 1px #9b1614 !important;
        -o-box-shadow: inset 0 1px 1px #9b1614 !important;
        -webkit-box-shadow: inset 0 1px 1px #9b1614 !important;
    color: #fff;
    text-decoration: none;
}

/* Sidebar
---------------------------------------------------------------------------- */

#container #interior #sidebar h1 {
    font-size: 150%;
    padding: 0;
}

#container #interior #sidebar h1 span {
    color: #aaa;
    font-size: 85%;
}

/* ----- Calendar (sidebar releated customizations) ----- */

#container #interior #sidebar .calendar {
    margin: 0 0 15px 0;
}

#container #interior #sidebar .calendar.news li div.icon {
    border: 1px solid #009900;
}

#container #interior #sidebar .calendar.news li div.month {
    background-color: #009900;
}

#container #interior #sidebar .calendar li a,
#container #interior #sidebar .calendar li a:visited {
    color: #d9261c;
}

#container #interior #sidebar .calendar li {
    border: none !important;
}

#container #interior #sidebar .calendar li span.summary {
    width: 175px !important;
}

#container #interior #sidebar .calendar li span.summary strong {
    color: #d9261c;
}

/* ----- /Calendar ----- */

/* Content
---------------------------------------------------------------------------- */

/* ----- Quotes ----- */

#content blockquote {
    background: url(../images/img_quote_begin.gif) 10px 5px no-repeat #ffe077;
    border-top: 4px solid #ffcf2c;
    border-bottom: 4px solid #ffcf2c;
    color: #333;
    font-family: Palatino, "Palatino Linotype", Georgia, "Times New Roman", serif;
    font-size: 120%;
    /* letter-spacing: -1px; */
    text-align: center;
    margin: 15px 20px;
    padding: 0 25px;
}

#content blockquote #quote {
    background: url(../images/img_quote_end.gif) right bottom no-repeat transparent;
}

#content blockquote #author {
    font-size: 80%;
    letter-spacing: normal;
}

#content ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#content ul li {
    background: url(../images/img_list_item.gif) 0 0 no-repeat transparent;
    margin: 3px 0;
    padding: 1px 0 1px 28px;
}

/* Polaroid image */
#content #polaroid {
    bottom: 0;
    left: 0;
    position: absolute;
}

#content #polaroid.top {
    left: 0 !important;
    top: 25px !important;
}

#content #licence {
    position: absolute;
    right: 10px;
    top: 0;
}

#content #licence img {
    position: relative;
    top: 7px;
}

/* ----- Tables ----- */

#content table {
    border-collapse: collapse;
    clear: both;
    margin: 0;
    width: 100%;
}

#content table caption {
    font-size: 120%;
    font-weight: bold;
    margin: 0 0 15px 0;
    text-align: left;
}

#content table th,
#content table td {
    border-bottom: 1px solid #fff;
    margin: 0;
    padding: 2px 5px; 
    text-align: left;
}

#content table tr.alt {
    background-color: #f5f5f5;
}

/* ----- Content footer ----- */

#container #interior #content-footer {
    background: url(../images/img_content_footer_bg.jpg) 0 0 repeat-x #eee;
    border-top: 1px solid #eae6de;
    clear: both;
    float: left;
    padding: 20px 15px 15px 15px;
    width: 818px;
}

#content-footer h1 {
    font-size: 150%;
    padding: 0 15px;
}

#content-footer h1 span {
    color: #aaa;
    font-size: 85%;
}

#content-footer .row {
    clear: both;
    float: left;
    margin: 0 0 20px 0;
    width: 100%;
}

#content-footer .box {
    border: 1px solid #eae6de;
    background-color: #fff;
    float: left;
    margin: 5px 13px;
    padding: 3px;
    text-align: center;
    width: 100px;
}

#content-footer .box a {
    font-size: 85%;
    font-style: italic;
    font-weight: bold;
}

#content-footer .courses .box {
    width: 233px !important;
}

#content-footer .courses span.summary {
    float: right;
    line-height: normal;
    margin: 17px 0 0 0;
    text-align: left;
    width: 150px;
}

#content-footer .courses span.summary strong {
    color: #d9261c;
}

#content-footer .courses div.icon {
    background-color: #fff;
    border: 3px solid #d9261c;
    float: left;
    font-weight: bold;
    margin: 0 15px 0 0;
    text-align: center;
    text-transform: uppercase;
    width: 62px;
}

#content-footer .courses div.month {
    background-color: #d9261c;
    color: #fff;
    font-size: 60%;
    line-height: 1.5em;
    margin: -1px -1px 0 -1px;
    padding: 2px 3px;
}

#content-footer .courses div.day {
    background-color: #fff;
    color: #363532;
    font-size: 180%;
    padding: 12px 3px;
}

/* ----- Content footer (contact-card / profile) ----- */

#content-footer #contact-information {
    clear: left;
    float: left;
    width: 395px;
}

#content-footer #contact-information .contact-info {
    background-color: #ffffe0;
    border: 1px solid #eae6de;
    clear: both;
    float: left;
    line-height: normal;
    margin: 0 0 15px 15px;
    padding: 0 15px;
    width: 330px;
}

#content-footer #contact-information .contact-card {
    background-color: #f5f5f5;
    border: 1px solid #eae6de;
    clear: both;
    float: left;
    margin: 0 0 15px 15px;
    width: 360px;
}

#content-footer #contact-information .contact-card .box {
    margin: -1px 10px -1px -1px;
}

#content-footer #contact-form h1 {
    padding: 0;
}

#content-footer #contact-form {
    clear: right;
    float: right;
    width: 400px;
}

#content-footer #contact-form form #important {
    background-color: #ffff99;
    border: 1px solid #ddd;
    margin: 5px 0 15px 0;
    padding: 3px 10px;
    text-align: left;
}

#content-footer #contact-form form input {
    font-size: 140%;
    width: 345px;
}

#content-footer #contact-form form textarea {
    font-size: 100%;
    width: 345px;
}

#content-footer #contact-form form input.medium {
    width: 290px;
}

#content-footer #contact-form form .checkbox {
    width: 16px;
}

#content-footer #contact-form form #important ul {
    list-style: disc;
    margin: 0 0 15px 25px;
    padding: 0;
}

#content-footer #contact-form form #important ul li {
    background: none;
    color: #ff0000;
    padding: 0;
}

#content-footer #contact-form form dl {
    background-color: #f5f5f5;
    border: 1px solid #eae6de;
    padding: 20px 20px 5px 20px;
}

#content-footer #contact-form form dl hr {
    border: none;
    border-top: 1px dotted #ccc;
    height: 0;
    margin: 0 0 15px 0;
}

#content-footer #contact-form form dl dt {
    font-weight: bold;
}

#content-footer #contact-form form dl dd {
    margin: 0 0 15px 0;
    padding: 0;
}

#content-footer #contact-form form #control input {
    font-size: 100%;
    width: 200px;T
}

/* Footer
---------------------------------------------------------------------------- */

#footer a,
#footer a:visited {
    border: none;
    color: #aaa;
    text-decoration: none;
}

#footer a:hover,
#footer a:visited:hover {
    border-bottom: 1px dotted #aaa;
    color: #aaa;
    text-decoration: none;
}