﻿
html { font-size: 75%; line-height: 1.5; }

/* Reset defaults */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #333333;
    }

img { border: 0; }
a { color: #007934; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
p { margin: 0 0 1em 0; }

/* Site wide styles */
body { background: #007934 url(../images/page_bg.png) repeat-x top left; }
.ccbg { background-image: url(../images/page_bg_call_centre.png); }
body.popup { background-color: #fff; background-image: none; }

h1, h2, h3, h4 { font-weight: normal; line-height: 1; margin: 0 0 1em 0; }
h1 { color: #007934; font-size: 1.455em; }
h2 { font-size: 1.182em; }

table { border-collapse: collapse; margin: 0; padding: 0; width: 682px; }
table caption { color: #007934; font-weight: bold; padding: 0 0 10px 0; text-align: left; text-transform: uppercase; }
table th { background: #89c14d url(../images/table_header_bg.png) repeat-x top left; border: 1px solid #8ac14f; line-height: 1; padding: 12px 10px; }
table td { border: 1px solid #8ac14f; padding: 5px 10px; }
table td.mobile, table td.email { white-space: nowrap; }

#heading .logo { background: url(../images/logo.png) no-repeat top left; display: block; height: 100px; overflow: hidden; text-indent: -999em; width: 958px; }
.ccbg #heading .logo { background-image: url(../images/logo_cc.png); }

#nav { background: url(../images/nav_bg.png) no-repeat top left; height: 30px; margin: 0 0 10px 0; padding: 0 0 0 149px; width: 818px; }
#nav ul { display: inline; list-style: none; margin: 0; padding: 0; }
#nav li { display: inline; margin: 0; padding: 0; }
#nav a, #nav span { float: left; height: 30px; overflow: hidden; text-indent: -999em; }
#nav .home a, #nav .home span { background-image: url(../images/nav_home.png); width: 87px; }
#nav .activate a, #nav .activate span { background-image: url(../images/nav_activate.png); width: 182px; }
#nav .check a, #nav .check span { background-image: url(../images/nav_check.png); width: 164px; }
#nav .faqs a, #nav .faqs span { background-image: url(../images/nav_faqs.png); width: 250px; }
#nav .contact a, #nav .contact span { background-image: url(../images/nav_contact.png); width: 126px; }
#nav a { background: transparent no-repeat; }
#nav span { background-position: 0 -30px; }
#nav a.after { background-position: 0 -60px; }
#nav a:hover { background-position: 0 -90px; }
#nav a.after:hover { background-position: 0 -120px; }

/* Master page styles */

#page { font-size: 0.917em; margin: 30px auto; width: 978px; }
#contentBackground { background: #ffffff url(../images/dropshadow.png) repeat-x bottom left; clear: both; padding: 10px 10px 22px 10px; width: 958px; }
#main { background: #ffffff url(../images/content_bg.png) repeat-y top left; overflow: hidden; width: 958px; }
#content { float: left; min-height: 300px; padding: 20px 23px 20px 20px; width: 684px; }
#modules { float: left; width: 231px; }
.popup #content { width: auto; float: none; }

#mainHomepage { background: #ffffff; overflow: hidden; width: 958px; }
#mainHomepage #content { padding: 0 10px 10px 0; width: 714px; }
#mainHomepage #content a { display: block; line-height: 1; }
#mainHomepage #modules { width: 234px; }

/* General styles */

.PageTitle { color: #007934; font-size: 1.455em; line-height: 1; margin: 0 0 1em 0; }
.PageSubHeading { font-size: 1.182em; font-weight: bold; margin: 0 0 0.5em 0; }
.PageNoticeText { color: #007934; margin-bottom: 6px; }
.PageText { margin-bottom: 1em; }
.Separator { clear: both; height: 1px; width: 100%; border-bottom: dotted 1px #98CB01; margin-bottom: 10px; }
.SmallPrint { font-style:italic; }
.Attention { border: 1px solid #98CB01; margin: 20px 0; padding: 7px 7px 7px 62px; background: #B3D946 url(../images/EmailIcon.png) no-repeat 9px 50%;  }
.EmailIcon { float: left; height: 100%; margin: 0 7px 0 0; vertical-align:middle; }

/* Question styles */

.QuestionTitle { color: #007934; font-weight: bold; text-transform: uppercase; padding-top: 8px; clear:both; }
.Question { clear: both; overflow: hidden; width: 100%; }
.QuestionLabel { font-weight: bold; }
.MandatoryFieldMark { color: #007934; font-weight: normal; }
.QuestionLHS { clear: left; float:left; line-height: 3em; padding-left: 6px; vertical-align: middle; width: 235px; }
.QuestionRHS { float: left; line-height: 3em; min-width: 200px; vertical-align: middle; }
.QuestionRHS select { vertical-align: middle; width: 167px; }
.QuestionRHS input { vertical-align: middle; }
.QuestionExample { font-style: italic; }
.dob select { width: auto; }
.rbl label { margin-right: 2em; }
.buttons { border-top: dotted 1px #98CB01; clear: both; margin: 10px 0 0 0; padding: 10px 0 0 0; }

/* Detail styles */

.DetailTitle { color: #007934; font-weight: bold; padding-top: 8px; text-transform: uppercase; clear: both; }
.Detail { min-height: 20px; }
.DetailLHS { clear: left; float: left; padding-left: 6px; width: 250px; }
.DetailRHS { }

/* Module Styles */

.module { border-bottom: solid 10px #FFFFFF; }
.module img { display: block; }
.moduleBottommost { margin-bottom: 0px; }
.moduleFooter { margin-right: 10px; float: left; }
.moduleFooter a { display: block; line-height: 1; }
.moduleFooter img { display: block; }
.moduleFooterRightmost { float: left; }
.moduleFooterRightmost a { display: block; line-height: 1; }
.moduleRandomPlayer { background-color: #519F2F; }

/* Validation errors */

.errors { border: 1px solid #CC0000; color: #CC0000 !important; margin: 5px 0 10px 0; padding: 10px 33px; background: #ffffff url(../images/error_icon.png) no-repeat 10px 10px; font-weight: bold; }
.errors ul { margin: 0; padding: 0; font-weight: normal; color: #CC0000 !important; list-style: disc; }
.errors li { color: #CC0000 !important; font-weight: normal; margin-top: 5px; margin-left: 20px; }
.errorsInline { background: url(../images/error_icon.png) no-repeat center left; clear: both; color: #CC0000 !important; float: left; line-height: 1.636; margin: 0 0 0 241px; padding: 0 0 0 21px; width: 400px; }
.leftAligned { margin-left: 5px; width: 640px; }

/* Card picker styles */

.CardPicker { border: solid 1px #98CB01; overflow: hidden; background: #ffffff url(../images/cardpickerbackground.jpg) repeat-x; margin-bottom: 6px; padding: 5px 0; width: 682px; }
.CardPickerOptions { clear: both; margin: 0 0 5px 0; overflow: hidden; padding: 0 5px; width: 682px; }
.CardPickerOption { float: left; padding: 5px 10px; text-align: center; width: 64px; }
.CardPicker .QuestionLHS { padding-left: 5px; }
.firstOption { clear: left; }

/* Team picker styles */

.TeamPicker { border: solid 1px #98CB01; background: #ffffff url(../images/cardpickerbackground.jpg) repeat-x; position: relative; }
.TeamPickerOptions { clear: both; margin: 0 0 10px 0; overflow: hidden; width: 600px; }
.TeamPickerOption { float: left; padding: 10px 0 0 10px; text-align: center; width: 65px; }

/* Footer styles */

.footer { color: #94C902; text-align: center; padding: 0 10px; }
.footer a { text-decoration: none; color: #ffffff; }
.footer a:hover { text-decoration: underline; }

/* Progress Bar styles */

.progress_bar {height: 27px; margin: 0 0 2em 0; width: 684px; }
.online_activation { background: url(../images/progress_bar_online_activation.png) no-repeat 0 0; }
.call_centre_activation { background: url(../images/progress_bar_call_centre_activation.png) no-repeat 0 0; }
.step1_active { background-position: 0 0; }
.step2_active { background-position: 0 -27px; }
.step3_active { background-position: 0 -54px; }
.step4_active {background-position: 0 -81px;  }
.progress_bar ol { display: block; list-style: none; margin: 0; padding: 0; }
.progress_bar li { display: inline; margin: 0; padding: 0; }
.progress_bar li a { float: left; height: 27px; overflow: hidden; text-indent: -999em; }

.online_activation .step1 { width: 154px; }
.online_activation .step2 { width: 164px; }
.online_activation .step3 { width: 184px; }
.online_activation .step4 { width: 182px; }

.call_centre_activation .step1 { width: 218px; }
.call_centre_activation .step2 { width: 228px; }
.call_centre_activation .step3 { width: 238px; }


/* FAQs styles */

#faqs h2 { font-size: 1em; font-weight: bold; }
#faqs p { margin: 0 0 1em 0; }
#faqs ul.faq_list { border-bottom: dotted 1px #98cb01; list-style: none; margin: 0 0 1em 0; padding: 0 0 1em 0; }
#faqs ul.faq_list li { background: transparent url(../images/arrow_right.png) no-repeat center left; margin: 0 0 0.5em 0; padding: 0 0 0 12px; }
#faqs p.return { border-top: dotted 1px #98cb01; font-size: 0.833em; line-height: 1; margin: 0 0 2em 0; padding: 0.25em 0 0 0; text-align: right; }
#faqs p.return a { background: transparent url(../images/arrow_up.png) no-repeat center left; padding: 0 0 0 16px; text-decoration: none; }
