@import url(reset.css);

body {
    background-color: #000000;
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px;
    line-height: 16px;
    color: #000000;
    margin: 10px 0 10px;
    padding: 0;
}
/* some overrides for everything */
table {
    font-size: 1em;
}
.cleaner {
    clear: both;
    height: 1px;
}
strong {
    font-weight: bold;
}
em {
    font-style: italic;
}

a {
    outline: none;
    text-decoration: none;
    color: #E45E18;     /* this is set in parent/teacher/everyone_else.css I just want to have a default of orange (parents)*/
}

a:hover {
    text-decoration: underline;
}
img {
    border: 0;
}
ul.checklist li{
    list-style-type: square;
}

hr {
    border: 4px solid;
    margin: 20px 15px;
    color: #E45E18;
}

/* main elements */

#site_container{
    margin: 0 auto;
    width: 989px;
    position: relative;
}

#header {
    background: url(/images/header.jpg) no-repeat bottom left;
    width: 989px;
    height: 237px;
    
}

#logo {
    float: left;
    height: 189px;
    padding-top: 28px;
    padding-left: 25px;
    width: 192px;
}

#header_right {
    margin-left: 17px;
    margin-top: 2px;
    float: left;
    
}
#header_nav {       /* image is now specified in parent.css */
    height: 156px;
    width: 754px;
}



#header_nav ul {
    float: left;
    list-style-type: none;
    margin-top: 34px;
    margin-left: 15px;
}

#header_nav ul li {
    float: left;
    padding-right: 18px;
}

#header_nav ul li a {
    color: #FFFFFF;
    display: block;
    font-weight: bold;
    text-transform: uppercase;
    
}
#language_selector {
    float: left;
    margin-left: 100px;
    margin-top: 18px;
}

#toplogo {
    display: block;
    width: 51px;
    height: 50px;
    background: url(/images/c3p_logo.jpg) no-repeat 0 0;
}

#toplogo:hover {
    background-position: 0 -50px;
}

#toplogo span {
    display: none;
}

#language_selector img {
    vertical-align: middle;
    margin-right: 12px;
}
#language_selector a {
    color: #FFFFFF;
    text-transform: uppercase;
    font-weight: bold;
}

#header_seperator {
    height: 42px;
}

#header_secnav {
    width: 720px;
    height: 40px;
    margin-left: 20px;
}

#breadcrumb {
    background-color: #f8eb30;
    min-height: 25px;
    margin-left: 23px;
    margin-top: 4px;
    padding: 9px 0px 0px 11px;
    width: 710px;
    vertical-align: middle;
}
#breadcrumb span.you_are_here {
    color: #E45E18;
    font-weight: bold;
}
#breadcrumb span.breadcrumb {
    text-transform: uppercase;
    font-weight: bold;
    color: #E45E18;
}
#breadcrumb span.breadcrumb a {
    color: #000000;
}

#breadcrumb_landing {
    background-color: #f8eb30;
    min-height: 25px;
    margin-left: 23px;
    margin-top: 2px;
    padding: 9px 10px 0px 11px;
    width: 700px;
    vertical-align: middle;
}
#breadcrumb_landing span.you_are_here {
    color: #000;
    font-weight: bold;
}

#left-bar {
    float: left;
    width: 229px;
}

#left-header {
    width: 229px;
    height: 173px;
}

#left-header-age {
    width: 229px;
    height: 127px;
}

#left-header-age-prev-arrow {
    float: left;
    width: 18px;
    margin-top: 73px;
    margin-left: 10px;
}

#left-header-age-image {
    float: left;
    width: 172px;
    margin-top: 15px;
    margin-left: 2px;
}

#left-header-age-next-arrow {
    float: left;
    width: 18px;
    margin-top: 72px;
    margin-left: 6px;
}

#left-header-category {
    background-color: #f8eb30;
    width: 183px;
    min-height: 40px;
    height: auto;
    _height: 40px;
    padding: 3px 5px 5px 12px;
    margin-top: -44px;
    margin-left: 23px;
}

#left-nav {
    min-height: 200px;
    height: auto;
    _height: 551px;
    width: 190px;
    background: #e6e7e8 url(/images/left_bottom.jpg) no-repeat bottom left;
    margin-left: 30px;
    margin-bottom: 20px;
    padding-bottom: 40px;
}

#left-nav ul {
    margin: 0;
    padding: 0;
    margin-left: 25px;
    margin-right: 10px;
    line-height: 14px;
}

#left-nav li {
    list-style-type: none;
    margin-left: -7px;
    padding: 15px 0 0 0;
}

#left-nav li.bold{
    font-weight: bold;
}

#left-nav a.selectedoption, .left_nav a.selectedoption {
    color: #e35e17;
}

#left-nav a {
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px;
    color: #000000;
    display:table-cell;
    text-decoration: none;
}

#left-nav a:hover {
    color: #e35e17;
    text-decoration: underline;
}

#left-header-category {
    font-weight: bold;
    font-size: 14px;
    text-align: center;
}

/* landing pages (parents/teachers/everyone) left sidebar */
.left-header-category {
    font-weight: bold;
    margin-top: -1px;
    
}

#left-header-landing-top {
    background: url(/images/left_header_landing_top.jpg) no-repeat top left;
    width: 202px;
    height: 34px;
    padding: 12px 0px 0px 21px;
    text-align: center;
}

#left-header-landing-bottom {
    background: url(/images/left_header_landing_bottom.jpg) no-repeat top left;
    width: 199px;
    height: 32px;
    margin: 0 0 0 23px;
    padding: 16px 0px 0px 0px;
    text-align: center;
}

.left_nav {
    background-color: #e6e7e8;
    min-height: 150px;
    width: 190px;
    margin-left: 28px;
    padding-top: 5px;
    padding-bottom: 10px;
}

.left_bottom {
    background: #e6e7e8 url(/images/left_bottom.jpg) no-repeat bottom left;
    padding-bottom: 20px;
}

.left_nav ul {
    margin: 0;
    padding: 0;
    margin-left: 30px;
    margin-right: 10px;
    margin-bottom: 15px;
    line-height: 14px;
}

.left_nav ul li {
   margin-left: -7px;
   padding: 15px 0 0 0;
}

.left_nav ul li a {
    line-height: 16px;
    color: #000000;
    font-weight: bold;
}

.left_nav ul li a:hover {
    text-decoration: underline;
    color: #e35e17;
}

#yellow_category {
    margin:10px 10px 5px 3px;
}

#centre-wrapper {
    float: left;
    width: 531px;
    margin: 13px 12px 0;
}

#right-bar {
    margin-top: 9px;
    float: left;
}

#footer {
    margin: 30px auto;
    width: 540px;
    height: 65px;
}
#footer a {
    color: #969696;
    font-weight: bold;
    text-decoration: none;
    font-size: 12px;
}

#footer a:hover {
    text-decoration: underline;
}

#footer p {
    color: #969696;
    padding: 0 10px 0 0px;
    font-size: 12px;
}

#footer ul li {
    float: left;
    margin-top: 11px;
}

#footer ul li.logo {
    margin-top: 0px;
}

#c3pfooter {
    display: block;
    width: 166px;
    height: 41px;
    background: url(/images/footer_en.jpg) no-repeat 0 0;
}

#c3pfooter:hover {
    background-position: 0 -41px;
}

#c3pfooter span {
    display: none;
} 

#footerlogo:hover {
    background-position: 0 -41px;
}

#footerlogo span {
    display: none;
}

/* content section */

#content-wrapper {
    background: #FFFFFF url(/images/content_bottom.jpg) no-repeat bottom left;
    width: 531px;
}

#content {
    width: 475px;
    background: url(/images/content_top.jpg) no-repeat top left;
    padding: 30px 25px 50px 25px;
    font-size: 14px;
    line-height: 20px;
}

#content a {
    font-weight: bold;
}

#content em {
    color: #000;
}

#content h1 {
    
    font-size: 24px;
    line-height: 28px;
    padding: 5px 15px 3px 25px;
    margin: 10px 0;
}

#content h2 {
    margin: 10px 0;
    padding: 10px 15px 5px 15px;
    font-size: 20px;
    line-height: 24px;
    color: #777;
}
#content h3 {
    font-size: 16px;
    padding: 10px 15px 5px 15px;
    margin: 5px 0;
}

#content ul {
    list-style-type: disc;
    padding-left: 40px;
}

#content ul li {
    padding: 5px 5px 5px 0;
}

#content ul li ul {
    list-style-type: circle;
}

#content ul li ol {
    padding-left: 3em;
}

#content ol {
    list-style-type: decimal;
    padding-left: 40px;
}


#content ol li {
    padding: 5px 5px 5px 0;
}

#content ul.none {
    list-style-type: none;
    padding-left: 2em;
}

#content ul.none li {
    text-indent: -1.5em;
}


#content p {
    margin: 10px 0;
}

#content p, ul, ol {
    color: #444;
    padding: 0 15px 0 15px;
}

#content h4, h5, h6 {
    padding: 10px 15px;
}



/*landing page content */
/* these will all move to the parent css I think (well at least the backgrounds, I guess the sizes could stay the same)*/
#slider_container {
    width: 526px;       /* 524 is size of image, need it slightly bigger for overlap */
    height: 334px;
    margin-bottom: 20px;
    position: relative;
    
}
.slider_arrow {
    height: 43px;
    position: absolute;
    top: 137px;
    width: 42px;
    z-index: 2;
}
#slider_left_arrow {
    left: -9px;
}

#slider_right_arrow {
    
   
    left: 494px;
}

#slider_window {
    width: 480px;
    height: 245px;
    position: absolute;
    overflow: hidden;
    left: 23px;
    top: 29px;
    
    
}

#slideshow_mover {
    left: 0;
    position: absolute;
    width: 2400px;
}
.slider {
    width: 480px;
    height: 245px;
    float: left;
}

.slider_image {
    width: 480px;
    height: 174px; 
}


.slider_choose_age ul {
    float: left;
    list-style-type: none;
    margin: 0;
    padding: 10px 0 0 52px;
}

.slider_choose_age ul li {
    float: left;
}

div.slider_choose_age ul li a {
    display: block;
    height: 48px;
    width: 75px;
    z-index: 200;
}

div.slider_choose_age ul li a:hover {
    background-position: 0 -48px;
}


/* category selection */
#slider_category_selection {
    position: absolute;
    top: 279px;
    left: 9px;
    height: 58px;
    width: 501px;
}

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

#slider_category_selection ul li {
    float: left;
}
#slider_category_selection ul li a {
    background-position: 0 -58px;
    height: 58px;
    display: block;
}
#slider_category_selection ul li a.slider_category_selected {
    background-position: 0 0;
}



/* end of slider for parent */
div.div_box {
    background-color: #e6e7e8;
    padding: 18px;
    margin: 14px;
}

div.div_box strong {
    color: #E45E18;
}

div.small_box {
    margin: 5px 14px;
    width: 43%;
}

div.align_right {
    float: right;
}

td.align_top {
    vertical-align: top;
}

ul.checklist {
    list-style-image: url(/images/tick.png);
}

ul.roman {
    list-style-type: upper-roman;
}

ol.alpha {
    list-style-type: lower-alpha;
}

span.underline {
    text-decoration: underline;
}

/* Right Bar */

#search_box {
    background: url(/images/search_box.jpg) no-repeat top left;
    font-size: 22px;
    margin-top: 4px;
    height: 97px;
    width: 202px;
}
#search_box span {
    display: block;
    font-weight: bold;
    padding-top: 13px;
    padding-left: 55px;
    
}

#search_box input {
    margin-top: 12px;
    margin-left: 15px;
    border: 0;
    height: 28px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #58595b;
    padding: 9px 10px 0 10px;
    width: 151px;
}

#sponsor {
    background: url(/images/sponsor_bg.jpg) top left no-repeat;
    margin-top: 20px;
    margin-left: 5px;
    padding-top: 10px;
    padding-left: 10px;
    width: 182px;
    height: 118px;
    font-weight: bold;
}

#psa {
    background: url(/images/view_psa.jpg) top left no-repeat;
    margin-top: 20px;
    margin-left: 5px;
    padding-top: 10px;
    padding-left: 10px;
    width: 182px;
    height: 118px;
    font-weight: bold;
    cursor: pointer;
}

#psa a {
    display: block;
    height: 118px;
    width: 182px;
    padding-left: 39px;
    padding-top: 21px;
    text-decoration: none;
}

#sid_brochures {
    background: url(/images/sid_brochures_download.jpg) top left no-repeat;
    margin-top: 20px;
    margin-left: 5px;
    padding-top: 10px;
    padding-left: 10px;
    width: 182px;
    height: 118px;
    font-weight: bold;
    cursor: pointer;
}

#sid_brochures a {
    display: block;
    height: 118px;
    width: 182px;
    padding-left: 39px;
    padding-top: 21px;
    text-decoration: none;
}

.brochures{
    margin-top: 20px;
    margin-left: 5px;
    padding-top: 10px;
    padding-left: 10px;
    width: 100px;
    height: 155px;
    font-weight: bold;
    cursor: pointer;
}
.brochures a {
    display: block;
    height: 155px;
    width: 100px;
    padding-left: 39px;
    padding-top: 21px;
    text-decoration: none;
}

#ask_an_expert {
    height: 221px;
    margin-top: 15px;
    width: 201px;
}
#ask_an_expert a {
    display: block;
    height: 221px;
    width: 201px;
    padding-left: 39px;
    padding-top: 21px;
    text-decoration: none;
}

#ask_an_expert a span {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 18px;
}

#comments_container{
    padding: 20px;
    /*background-color: #F8F8F8;*/
    background-color: #ededed;
    margin-top: 20px;
    color: #666666;
}
#add_comment_container{
    text-align: right;
}
#add_comment_container textarea{
    width: 437px;
    height: 120px;
    display: block;
}
.comment{
    padding: 10px 0px;
    border-bottom: 1px solid #000000;
}
.comment .reply{
    padding: 20px 0px 0px 40px;
}
.comment .title .author{
    font-weight: bold;
}
.comment .title .date{
    color: #01194A;
    font-size: 12px;
}

/* Quiz stuff */
#quiz_container{
    
}
#quiz_body{
    
}

#quiz_container .header{
    
}

#quiz_intro{
    padding: 15px 0px 0px 55px;
    
}
#quiz_container .big_selection{
    
    
}
#quiz_container .big_selection a{
    text-decoration: none;
    color: #000000;
    display: block;
    background-repeat: no-repeat;
    background-position: 0 0;
    padding: 21px 0px 30px 80px;
    outline: none;
}
#quiz_container #bigbox1{
    background-image: url(/images/bigchoice_box1.png);
}
#quiz_container .big_selection a#bigbox1:hover{
    background-image: url(/images/bigchoice_box1_checked.png);
}
#quiz_container #bigbox2{
    background-image: url(/images/bigchoice_box2.png);
}
#quiz_container .big_selection a#bigbox2:hover{
    background-image: url(/images/bigchoice_box2_checked.png);
}

#quiz_container .quiz_question{
    font-size: 14px;
    line-height: 20px;
    color: #444;
}
#quiz_container a.quiz_answer{
    display: block;
    padding-left: 10px;
    color: #000000;
    text-decoration: none;
    outline: none;
}
#quiz_container td.spacer{
    height: 10px;
}
#quiz_container td.quiz_answer_icon{
    background-position: 0 50%;
    background-repeat: no-repeat;
}
#quiz_container td.quiz_answer_icon a{
    display: block;
    width: 38px;
    height: 33px;
    outline: none;
}
#quiz_container td.quiz_question1{
    background-image: url(/images/pq_answer1.png);
}
#quiz_container td.quiz_correct1{
    background-image: url(/images/pq_answer1_correct.png);
}
#quiz_container td.quiz_wrong1{
    background-image: url(/images/pq_answer1_wrong.png);
}
#quiz_container td.quiz_question2{
    background-image: url(/images/pq_answer2.png);
}
#quiz_container td.quiz_correct2{
    background-image: url(/images/pq_answer2_correct.png);
}
#quiz_container td.quiz_wrong2{
    background-image: url(/images/pq_answer2_wrong.png);
}
#quiz_container td.quiz_question3{
    background-image: url(/images/pq_answer3.png);
}
#quiz_container td.quiz_correct3{
    background-image: url(/images/pq_answer3_correct.png);
}
#quiz_container td.quiz_wrong3{
    background-image: url(/images/pq_answer3_wrong.png);
}
#quiz_nextbtn{
    margin-top: 20px;
}
#quiz_nextbtn a{
    width: 160px;
    height: 78px;
    background-image: url(/images/popquiz_next_btn.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    display: block;
    outline: none;
}

#quiz_score_container{
    padding-left: 45px;
}
#quiz_score{
    color: #4e7300;
    font-weight: bold;
}

#quiz_message_container{
    padding-top: 10px;
}
#quiz_container a.answered{
    color: #cccccc;
}
#quiz_container .incorrect a, #quiz_container .correct a{
    font-weight: bold;
    color: #000000;
}


.submit_btn{
    width: 128px;
    height: 62px;
}
.submit_btn a{
    display: block;
    width: 128px;
    height: 62px;
    background-image: url(/images/submit_btn.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    color: #FFFFFF;
    padding-top: 20px;
    text-align: center;
    font-size: 16px;
}
.submit_btn a:hover{
    text-decoration: none;
}
#expert_form_container{
    position: relative;
}
#expert_form_container .submit_btn{
    position: absolute;
    top: 208px;
    left: 332px;
}
#expert_form_container textarea{
    width: 470px;
    height: 168px;
}
#expert_form_container textarea, #expert_form_container input.textbox{
    background-color: #f0f0f1;
    color: #58595b;
    padding: 10px;
    border: none;
    font-size: 12px;
    font-weight: bold;
    font-family: helvetica, arial, sans-serif;
    display: block;
    margin-top: 10px;
}
#expert_form_container input.textbox{
    width: 270px;
}

.validation_message{
    color: #ff0000;
    font-weight: bold;
    font-size: 12px;
    font-family: helvetica, arial, sans-serif;
}
#expert_form_container input.validation_fail, #expert_form_container textarea.validation_fail{
    background-color: #fd9e9e;
}