/*************************************************

Child and Family Services Review Board
December 2007
BY 76design


***************************************************
    GENERIC
    */


HTML {
    font: 62.5%/140% Verdana, Arial, Helvetica, sans-serif;
    background:#FFF url('../images/header_bkg.gif') repeat-x;
    color: #222222;
    }

BODY {
    margin: 0px;
    padding: 0px;
    text-align: center;
    }

A{
    color:#1d6db3;
    text-decoration:none;
        }
A:hover{color:#67b8ff;}

A IMG {border:0;}

.left {float:left;}
.right {float:right;}
.noborder {border:none !important;}
.bold 			{ font-weight:bold; }
.italic 		{ font-style:italic; }
.underline 		{ border-bottom:1px solid; }
.highlight 		{ background:#ffc; }

H1,H2,H3,H4,H5,H6,UL,LI,OL,BLOCKQUOTE,IMG {
    margin:0;
    padding:0;
    list-style:none;
    }
.clearfix {
    clear:both;
}
/***************************************************
    TABLES
     */

TABLE{
        clear: both;
        margin:20px 0;
        width: 100%;
        padding:0;
        border-collapse: collapse;
                font-size:90%;
        }
TABLE THEAD {
    background:url(../images/table-bkg.gif) no-repeat;
    }

TABLE THEAD TH {
        line-height:120%;

        }

TABLE TBODY TR {
        color:#AAA;
        }



TABLE TH {
        padding:0 5px;
        margin:0;
        vertical-align:middle;
        color:#222;
        font-weight:bold;
        border-bottom: 1px solid #c8c8c8;

        }

TABLE TR TD {
        font-size: 100%; line-height: 140%;
        margin:0;
        padding:2px 5px;
        border-bottom: 1px solid #c8c8c8;
        }

/***************************************************
    FORMS
     */
LABEL {
        display:block;
        float:left;
        width:120px;
        color:#4b626d;
        font-weight:bold;

        clear:both;
        }

INPUT,
TEXTAREA {
        border: 1px solid #CCC;
        color: #222;
        font-size:100%;
        margin:0;
        padding:0 6px;

        color:#787878;
        }

.submit {
    background:#1D6CB1;
    border:none;
    color:#FFF;
    }

#sendtofriend-form TEXTAREA {
    width:150px;
    }


/***************************************************
    WRAPPER
     */
#wrapper {
    width:870px;
    margin: 0px auto;
    text-align:left;
    overflow:hidden;
    }

/***************************************************
    HEADER
    */
#header {
    padding:20px 0 0 0;
    margin:0 0 10px 0;
    overflow:hidden;
}

#header-logo{
    display:inline;
}

.logo {
    margin:5px 0 0 0;
    width:231px;
    float:left;
}

#social-logo{
    margin:5px 0 0 0;
    padding:5px 55px 0 0;
    color:#636466;
    float:right;
    font-family: "Lucida Sans", Helvetica, sans-serif;
    font-size:14px;
    text-align:right;
    background: transparent url(../images/social-justice.png) no-repeat 100% 50% scroll;
    height:38px;
    font-weight:bold;
}

.fr #social-logo{
    padding:0 55px 0 0;
    height:43px;
}

#social-logo:hover{
    color:#000;
}



/***************************************************
    UTILITY MENU
    */

#utility {
    overflow:hidden;
    margin:0 0 20px 0;
    zoom:1;

    }

#utility LI  {
    list-style:none;
    float:right;
    padding:0 10px 0 0;
    margin:0 10px 0 0;
    border-right:solid 1px #ccc;
    }

#utility LI.last {
    border-right:none;
    margin:0;
    padding:0;
    }

#utility A {
    display:block;
    color:#787878;
    text-decoration:none;
    }

#utility A:hover {
    color:#c60b46;
    }

/***************************************************
    MAIN MENU
    */

#topmenu {
    float:right;
    overflow:hidden;
    height:25px;
    margin:20px 0 0 0;
    }

#topmenu LI  {
    height:25px;
    line-height:25px;
    margin:0 4px;
    list-style:none;
    float:left;
    background:url(../images/topmenu-left.gif) top left no-repeat;

    }

.fr #topmenu LI,
#topmenu LI.topmenu-smaller-font{
    font-size:80%;
}


#topmenu A {
    display:block;
    padding:0 5px;
    margin:0;
    font-size:120%;
    color:#222;
    font-weight:bold;
    text-decoration:none;
    background:url(../images/topmenu-right.gif) top right no-repeat;
    }

#topmenu A:hover {
    color:#c60b46;
    }

/***************************************************
    SIDEBAR
     */
#sidebar {
     width:200px;
    margin:30px 30px 0 0;
    float:left;
    }

 #sidebar LI {
    border:solid 1px #CCC;
    margin:5px 0;
    line-height:20px;

    }

 #sidebar LI A {
    display:block !important;
    height:1%;
    }

 #sidebar LI A:hover {
    background:#c60b46;
    color:#fff;
    }

#sidebar H3 {
    background:url(../images/sidebar-h2-blue.jpg) no-repeat;
    width:180px;

    margin:0;
    font-size:110%;
    color:#1D6CB1;
    padding:5px 0 5px 20px;
    }

#sidebar .active-scenario {
    border:solid 1px #ccc;
    margin-top:0;
    }

#sidebar .active-scenario LI{
    margin:0;
    border:0;
    background:url(../images/active-scenario-border.gif) bottom left no-repeat;

    }

#sidebar .active-scenario LI A{
    font-weight:normal;
    color:#222;
    display:block;
    padding:5px 0 5px 30px;
    background:url(../images/bullet-blue.gif) 15px 8px no-repeat;
    }

#sidebar .active-scenario LI A:hover {
    color:#1d6db3;
    background:#dbe9f5 url(../images/bullet-blue.gif) 15px 8px no-repeat;
    }

#sidebar UL{
    margin:15px 0;
    }

#sidebar .site-links LI{
    background:#f4f4f4;
    }

.default #sidebar .site-links{
    margin-top: 0;
    }


#sidebar .active-scenario .selected A{
    background:#1d6db3;
    color:#fff;
    }

#sidebar ul.scenarios li.dark-orange A:link,
#sidebar ul.scenarios li.dark-orange A:visited{
    background: #ff7800;
    color:#FFF;
}
#sidebar ul.scenarios li.dark-orange A:hover{
    background: #ffc75b;
}


#sidebar ul.scenarios li.orange A:link,
#sidebar ul.scenarios li.orange A:visited{
    background: #ffa800;
    color:#FFF;
}
#sidebar ul.scenarios li.orange A:hover{
    background: #ffc75b;
}

#sidebar ul.scenarios li.blue A:link,
#sidebar ul.scenarios li.blue A:visited{
    background: #1d6db3;
    color:#FFF;
}
#sidebar ul.scenarios li.blue A:hover{
    background: #67b8ff;
}

#sidebar ul.scenarios li.green A:link,
#sidebar ul.scenarios li.green A:visited{
    background: #a3b179;
    color:#FFF;
}
#sidebar ul.scenarios li.green A:hover{
    background: #ced9ad;
}

#sidebar ul.scenarios li.purple A:link,
#sidebar ul.scenarios li.purple A:visited{
    background: #af0a7f;
    color:#FFF;
}
#sidebar ul.scenarios li.purple A:hover{
    background: #ce79b5;
}

#sidebar ul.scenarios li.pink A:link,
#sidebar ul.scenarios li.pink A:visited{
    background: #cd3e6b;
    color:#FFF;
    }

#sidebar ul.scenarios li.pink A:hover{
    background: #ce79b5;
    }

#sidebar LI A {
    padding:6px 0 6px 10px;
    font-weight:bold;
    font-size:110%;
    color:#c60b46;
    line-height:120%;}



/***************************************************
    HOMEPAGE � FEATURE
     */

#feature {
    width:870px;
    height:292px;
    position:relative;
    }

.cfsrb {background:url(../images/cfsrb/header-cfsrb.jpg) no-repeat;}
.crb {background:url(../images/crb/header-crb.jpg) no-repeat;}

#feature #crb-button-en,
#feature #cfsrb-button-en,
#feature #crb-button-fr,
#feature #cfsrb-button-fr{
    position:absolute;
    right:10px;
    bottom:0;
    height:52.5px;
    width:225px;
    display:block;
    text-indent:-9000px;
    }
#feature #crb-button-en{	background:url(../images/crb-button-en.gif) top left no-repeat;}
#feature #crb-button-fr{	background:url(../images/crb-button-fr.gif) top left no-repeat;} /* should be -fr, leave en for now */
#feature #cfsrb-button-en{	background:url(../images/cfsrb-button-en.gif) top left no-repeat;}
#feature #cfsrb-button-fr{	background:url(../images/cfsrb-button-fr.gif) top left no-repeat;} /* should be -fr, leave en for now */

#feature #crb-button:hover {
    background:url(../images/crb-button.gif) bottom left no-repeat;
    }

/***************************************************
    HOMEPAGE � SCENARIOS
     */

.orange .more {background:#ffa800}
.orange .more:hover {background:#ffc75b}
.orange H2 {color:#ffa800;}
.orange .scenario-header{background:#ffa800 url(../images/scenario-header.gif) top left no-repeat;}
.blue H2 {color:#1d6db3;}
.blue .more {background:#1d6db3}
.blue .more:hover {background:#67b8ff}
.blue .scenario-header{background:#1d6db3 url(../images/scenario-header.gif) top left no-repeat;}
.green h2 {color:#a3b179;}
.green .more {background:#a3b179}
.green .more:hover {background:#ced9ad}
.green .scenario-header{background:#a3b179 url(../images/scenario-header.gif) top left no-repeat;}
.purple H2 {color:#af0a7f;}
.purple .more {background:#af0a7f}
.purple .more:hover {background:#ce79b5}
.purple .scenario-header{background:#af0a7f url(../images/scenario-header.gif) top left no-repeat;}
.pink H2 {color:#cd3e6b;}
.pink .more {background:#cd3e6b}
.pink .more:hover {background:#c37d93}
.pink .scenario-header{background:#cd3e6b url(../images/scenario-header.gif) top left no-repeat;}
.brown H2 {color:#630523;}
.brown .more {background:#630523}
.brown .more:hover {background:#997f6b}
.brown .scenario-header{background:#630523 url(../images/scenario-header.gif) top left no-repeat;}
.dark-orange H2 {color:#ff7800;}
.dark-orange .more {background:#ff7800}
.dark-orange .more:hover {background:#ff9232}
.dark-orange .scenario-header{background:#ff7800 url(../images/scenario-header.gif) top left no-repeat;}

.scenario-header {
    display:block;
    height:8px;
    overflow:hidden;
    }

.scenario-text {
    margin:0 0 0 26px;
    display:block;
    }

.more {
    padding:4px;
    color:#FFF;
    font-weight:bold;
    }
.more:hover {
    color:#FFF;
    }

#scenarios {
    margin:20px 0;
    padding:0;
    }
#scenarios H2 {
        height:30px;
        }
#scenarios LI{
    float:left;

    width:275px;
    margin:0 20px 0 0;
    overflow:hidden;
    }
#wrapper.en #scenarios LI {
    height:370px;
}
#wrapper.fr #scenarios LI {
    height:410px;
}

#scenarios LI.last {
    margin:0;
    }

#scenarios LI H2 {
    margin:20px 0 10px 0;
    }
#scenarios BLOCKQUOTE {
    overflow:hidden;
    }
#wrapper.en #scenarios BLOCKQUOTE {
    height:250px;
}
#wrapper.fr #scenarios BLOCKQUOTE {
    height:290px;
}

/***************************************************
    CONTENT
     */
.default #content,
.scenarios #content{
    font-size:120%;

    }

.thin{
    width:550px;
    float:left;
    margin:20px 50px 20px 0;
    }
#content.scenarios  {
    width:440px;
    float:left;
    margin:20px 30px 0 0;
}
.wide{
    width:620px;
    float:left;
    margin:20px 0px 0 0;
    }
.default #content UL,
.default #content OL {
    margin:10px 0 10px 10px;
    padding:10px;
    }
.default #content UL LI {
    display:block;
    padding:2px 0 2px 30px;
    background:url(../images/bullet-blue.gif) 15px 8px no-repeat;
    }
.default #content OL LI {
    list-style-type:decimal;
    margin:10px 0 10px 20px;
    }

#content {
    font-size:110%;
    line-height:160%;
    }

#content H1 {
    font-size:240%;
    line-height:120%;
    margin:10px 0;
    color:#1D6CB1;
    }

#content H2{
    font-size:140%;
    margin:10px 0;
    }

#content H3 {
    font-size:130%;
    margin:10px 0;
    }

#content BLOCKQUOTE {
    font-size:100%;
    line-height:160%;
    color:#9e9e9e;
    margin:15px 0;
    }

.brown .more,.pink .more,.green .more,.purple .more,.blue .more,.orange .more, .dark-orange .more,
.brown .more:hover,.pink .more:hover,.green .more:hover,.purple .more:hover,.blue .more:hover,.orange .more:hover,.dark-orange .more:hover {
    color:#FFF;
    }
/***************************************************
    CONTENT � Dark ORANGE
     */

.dark-orange #content H1 {
    color:#ff7800;
}

.dark-orange #right-column h3 {
    color:#ff7800;
}

.dark-orange INPUT.submit {
    background:#ff7800;
    }

.dark-orange A {
    color:#ff7800;
    }

.dark-orange A:hover {
    color:#ffa232;
    }

.dark-orange #sidebar H3 {
    background:url(../images/sidebar-h2-dark-orange.jpg) no-repeat;
    color:#ff7800;

    }
.dark-orange #sidebar .active-scenario LI.selected A{
    background:#ff7800 url(../images/bullet-white.gif) 15px 8px no-repeat;
    color:#FFF;

}
.dark-orange #content UL LI,
.dark-orange #sidebar .active-scenario LI A{
    background:url(../images/bullet-dark-orange.gif) 15px 8px no-repeat;
    }

.dark-orange #sidebar .active-scenario LI A:hover {
    background:#FFCa5B url(../images/bullet-dark-orange.gif) 15px 8px no-repeat;
    color:#fff;
    }
.dark-orange #sidebar .active-scenario .selected A{
    background:#ff7800;
    color:#fff;
}

/***************************************************
    CONTENT � ORANGE
     */
.orange #content H1 {
    color:#ffa800;
}

.orange #right-column h3 {
    color:#ffa800;
}


.orange INPUT.submit {
    background:#ffa800;
    }

.orange A {
    color:#ffa800;
    }

.orange A:hover {
    color:#ffc75b;
    }

.orange #sidebar H3 {
    background:url(../images/sidebar-h2-orange.jpg) no-repeat;
    color:#ffa800;

    }
.orange #sidebar .active-scenario LI.selected A{
    background:#ffa800 url(../images/bullet-white.gif) 15px 8px no-repeat;
    color:#FFF;

}
.orange #content UL LI,
.orange #sidebar .active-scenario LI A{
    background:url(../images/bullet-orange.gif) 15px 8px no-repeat;
    }

.orange #sidebar .active-scenario LI A:hover {
    background:#f0d49e url(../images/bullet-orange.gif) 15px 8px no-repeat;
    color:#ffa800;
    }
.orange #sidebar .active-scenario .selected A{
    background:#ffa800;
    color:#fff;
}
/***************************************************
    CONTENT � PINK
     */
.pink #content H1 {
    color:#cd3e6b;
}

.pink #right-column h3 {
    color:#cd3e6b;
}

.pink INPUT.submit {
    background:#cd3e6b;
    }
.pink A {
    color:#cd3e6b;
    }
.pink A:hover {
    color:#c37d93;
    }
.pink #sidebar H3 {
    background:url(../images/sidebar-h2-pink.jpg) no-repeat;
    color:#cd3e6b;
    }
.pink #sidebar .active-scenario LI.selected A{
background:#cd3e6b url(../images/bullet-white.gif) 15px 8px no-repeat;
color:#FFF;
}
.pink #content UL LI,
.pink #sidebar .active-scenario LI A{
    background:url(../images/bullet-pink.gif) 15px 8px no-repeat;
    }

.pink #sidebar .active-scenario LI A:hover {
    background:#eecad5 url(../images/bullet-pink.gif) 15px 8px no-repeat;
    color:#cd3e6b;
    }
.pink #sidebar .active-scenario .selected A{
    background:#cd3e6b;
    color:#fff;
    }

/***************************************************
    CONTENT � BROWN
     */
.brown #content H1 {
    color:#630523;
}

.brown #right-column h3 {
    color:#630523;
}

.brown INPUT.submit {
    background:#630523;
    }
.brown A {
    color:#630523;
    }
.brown A:hover {
    color:#997f6b;
    }
.brown #sidebar H3 {
    background:url(../images/sidebar-h2-brown.jpg) no-repeat;
    color:#630523;
    }
.brown #sidebar .active-scenario LI.selected A{
background:#630523 url(../images/bullet-white.gif) 15px 8px no-repeat;
color:#FFF;
}
.brown #content UL LI,
.brown #sidebar .active-scenario LI A{
    background:url(../images/bullet-brown.gif) 15px 8px no-repeat;
    }

.brown #sidebar .active-scenario LI A:hover {
    background:#faded7 url(../images/bullet-brown.gif) 15px 8px no-repeat;
    color:#630523;
    }
.brown #sidebar .active-scenario .selected A{
    background:#630523;
    color:#fff;
    }

/***************************************************
    CONTENT � GREEN
     */
.green #content H1 {
    color:#a3b179;
}

.green #right-column h3 {
    color:#a3b179;
}

.green INPUT.submit {
    background:#a3b179;
    }
.green A {
    color:#a3b179;
    }
.green A:hover {
    color:#ced9ad;
    }

.green #sidebar H3 {
    background:url(../images/sidebar-h2-green.jpg) no-repeat;
    color:#a3b179;
    }
.green #sidebar .active-scenario LI.selected A{
    background:#a3b179;
    color:#FFF:
}
.green #content UL LI,
.green #sidebar .active-scenario LI A{
    background:url(../images/bullet-green.gif) 15px 8px no-repeat;
    }

.green #sidebar .active-scenario LI A:hover {
    background:#e9f1d2 url(../images/bullet-green.gif) 15px 8px no-repeat;
    color:#a3b179;
    }
.green #sidebar .active-scenario  LI.selected A{
    background:#a3b179 url(../images/bullet-white.gif) 15px 8px no-repeat;
    color:#fff;
    }
/***************************************************
    CONTENT � PURPLE
     */
.purple #content H1 {
    color:#af0a7f;
}

.purple #right-column h3 {
    color:#af0a7f;
}

.purple INPUT.submit {
    background:#af0a7f;
    }
.purple A {
    color:#af0a7f;
    }
.purple A:hover {
    color:#ce79b5;
    }

.purple #sidebar H3 {
    background:url(../images/sidebar-h2-purple.jpg) no-repeat;
    color:#af0a7f;
    }
.purple #sidebar .active-scenario LI.selected A {
    color:#FFF;
    background:#af0a7f url(../images/bullet-white.gif) 15px 8px no-repeat;
    }
.purple #content UL LI,
.purple #sidebar .active-scenario LI A{
    background:url(../images/bullet-purple.gif) 15px 8px no-repeat;
    }

.purple #sidebar .active-scenario LI A:hover {
    background:#f4d3eb url(../images/bullet-purple.gif) 15px 8px no-repeat;
    color:#af0a7f;
    }
.purple #sidebar .active-scenario .selected A{
    background:#af0a7f;
    color:#fff;
    }

/***************************************************
    CONTENT � BLUE

    Blue is the default, but it has also been defined as white.
    I realize this is confusing - not my call.

     */

.blue #content H1 {
    color:#1d6db3;
}

.blue #right-column h3 {
    color:#1d6db3;
}

.blue INPUT.submit {
    background:#1d6db3;
    }
.blue A {
    color:#1d6db3;
    }
.blue A:hover {
    color:#67b8ff;
    }

.blue #sidebar H3 {
    background:url(../images/sidebar-h2-blue.jpg) no-repeat;
    color:#1d6db3;
        line-height:140%;
        display:block;
    }
#sidebar .active-scenario LI.selected A,
.white #sidebar .active-scenario LI.selected A,
.blue #sidebar .active-scenario LI.selected A {
    background:#1d6db3 url(../images/bullet-white.gif) 15px 8px no-repeat;
    color:#FFF;
    }

.blue #sidebar .active-scenario LI A{
    background:url(../images/bullet-blue.gif) 15px 8px no-repeat;
    }
.blue #sidebar .active-scenario LI A:hover {
    background:#dbe9f5 url(../images/bullet-blue.gif) 15px 8px no-repeat;
    color:#1d6db3;
    }

.blue #sidebar .active-scenario .selected A{
    background:#1d6db3;
    color:#fff;
}

/***************************************************
    RIGHT-COLUMN
     */
#right-column {
    margin:70px 0 0 0;
    float:left;
    width:170px;

    }

#right-column UL {
    margin:0 0 50px 0;
    }
#right-column  LI {
    font-size:110%;
    margin:15px 0;
    }

#right-column H3 {
    color:#1d6db3;
    }

#right-column A {
    color:#000;
    padding:2px 0 2px 20px;
    //background:url(../images/bullet-blue.gif) 5px 8px no-repeat;
    display:block;
    }


#right-column A.send-to-friend  {
    background:#efefef url('../images/email.gif') no-repeat 5px 50%;
    padding:5px 5px 5px 30px;
    //cursor:pointer;
    }

#right-column TEXTAREA {
    height:80px;
    font-size:120%;
}
#right-column #comments{
    height:200px;
}

/***************************************************
    CONTENT � RESULTS
     */
.default #content OL.results{
margin:0;
padding:0;
}
.default #content OL.results LI{
    list-style:none;
    margin:0;
    padding:18px;
    border-top:solid 1px #e5e5e5;
    }

.default #content OL.results LI H5 A{
    font-size:160%;
    font-weight:normal;
    }


.record_nav  P {
    padding:5px;
    text-align:right;
    margin:0;
    }
.record_nav  P.viewing {
    border-top:solid 1px #e5e5e5;
    padding:2px 5px;
    background:#fbfbfb;
    font-size:90%;
    margin:0 0 30px 0;
}

.record_nav P A.next{
    padding:2px 5px;
}

.record_nav P A.prev{
    padding:2px 5px;
}

.dark {
    background:#F5f5f5;}


/***************************************************
    FOOTER
     */

#footer {
    margin-top:40px;
    background:#f5f5f5;
    padding:5px;
    }

#footer P {
    float:right;
    margin:5px 10px;
    padding:0;
    }


#footer A{
    color:#5f5f5f;
    text-decoration:none;
    display:block;
    float:left;
    padding:10px;
    }

#footer A:hover {
    color:#cd3e6b;
    }