/************************************************/
/*  Child & Families Comission of Orange County   
    All Right Reserved                          */
/************************************************/



body
{
    background-color: #fff;
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 72.5%;
    color: #333333;
}

a
{
    color: #cb6107;
    text-decoration: underline;
    cursor: pointer;
}

a:hover, a:focus, a:active
{
    text-decoration: none;
}

.cursor
{
    cursor: pointer !important;
}
.floatLf
{
    float: left;
}
.floatRt
{
    float: right;
}
.floatFluid
{
    float: left;
    width: 100%;
}

p
{
    margin: .5em 0 1em;
}

ul,ol
{margin:0; padding:0;}
ul li, ol li
{margin:0; padding:0; list-style-type: none;}

img
{
    border: none;
}

img.floatLf
{
     float: left;
    margin: 0px 5px 0px 0px;
    padding:3px;
    border: 1px solid #cbcbbb;
}

img.floatRt
{
     float: right;
    margin: 0px 0px 0px 5px;
    padding:3px;
    border: 1px solid #cbcbbb;
}

table
{
    border-collapse: collapse;
    border-spacing: 0;
}

.noBorder
{
    border: none;
}

/* Lists
------------------------------------------- */

.MainContentDiv ul
{
    margin:0px 0 0 20px;
    padding: 3px 0px 2px 1px;
}

.MainContentDiv ul li
{
    list-style:none;
    background: url(/Images/orange_bullet.png) 0px 4px no-repeat;
    margin:0px 0 0 10px;
    padding:0px 0px 8px 10px;
}

.MainContentDiv a img
{padding: 5px;border: 1px solid #cbcbcb;}

ul.strong-list
{
    margin:0px 0 0 20px;
    padding: 3px 0px 2px 1px;
}

ul.strong-list li
{
    background: none;
    margin:0px 0 0 20px;
    padding:0px 0px 5px;
}

ul.strong-list li strong
{
    color: #ef8820;
}

a.more
{
    width: 200px;
    float:right;
    text-align:right;
    margin:0px 15px 0px 5px;
    padding:0px;
}

ul.img-list, ul.mtg-list
{
    list-style:none;
    margin:0px 0 0 20px;
    padding: 3px 0px 2px 1px;
}

ul.img-list li, ul.mtg-list li
{
    list-style:none;
    background: none;
    margin:0px 0 0 20px;
    padding:0px 0px 5px;
    zoom:1;
    overflow:hidden;
}

ul.mtg-list li h3
{margin:1em 0; padding: 0;}

ul.img-list li img
{
   width: 150px;
   margin: 0px;
   padding: 0px 10px 10px 0px;
}

ul.img-list li h3, ul.img-list li p
{

    margin: 0px 10px 4px 200px;
    padding:0px;
}

/* BUILDERS
------------------------------------------- */

.builders
{
    float: left;
    clear:both;
    width: 530px;
    margin:10px 200px 20px 0px;
}

.builders table
{
    width:300px;
    margin: 0px 0px 10px 0px;
    float:left;
    clear:left;
}

.builders img
{
    float:right;
}

.builders table th
{
    width:25%;
    text-align:right;
    padding: 5px;
    vertical-align:top;
    
}

.builders table td
{
    width:25%;
    text-align:center;
    padding: 5px;
    vertical-align:top;
    
}

.builders table thead td
{
     text-align:left !important;
     border-bottom: 1px solid #999;
     padding:0px;
}

.builders table thead td h3
{
    margin:0px;
     padding:0px;
}



/* SPRITES
------------------------------------------- */
/*#Navi li a, */
.Facebook, .Blogger, .twitter, .RSS, .ourBlog
{
    background: url(/Images/Sprite_main.png) no-repeat;
    display: block;
    text-indent: -10001px;
}

.contactUs, .newsLetter
{
    background: url(/Images/Sprite_main.png) no-repeat;
    display: block;
}

footer, header
{
    background: url(/Images/Sprite_bg.png) repeat-x;
}


/***********************************************
HEADING
************************************************/
ul, ol, dl, table, pre, h1, h2, h4
{
    margin-bottom: 8px;
}

h1
{
    font-size: 2.0em;
    color: #19394e;
    font-weight: normal;
}

h2
{
    font-size: 1.6em;
    color: #197171;
    padding: 6px 4px 4px 0;
    margin: 0px;
}

h3
{
    font-size: 1.2em;
    color: #5eb1b1;
    padding: 4px 0px 3px 0;
    margin: 0px;
}

.Breadcrumb ul li
{
    display: inline-block;
    *display:inline;
    zoom:1;
    margin: 15px 5px 10px 0;
    font-size: 11px;
    color: #cb6107;
}
.Breadcrumb ul li.select
{
    text-decoration: none;
    color: #999;
    font-weight: bold;
}


/***********************************************
LAYOUT
************************************************/
header, footer, section, aside, nav, article, figure, .logo
{
    display: block;
}

#Frame
{
    width: 996px;
    margin: 0 auto;
}

header, footer, nav
{
    overflow: hidden;
}

header
{
    height: 115px;
    background-position: 0 0;
    padding-top: 15px;
    margin: 0 auto;
}

.logo
{
    left: 25px;
    position: relative;
}

nav
{
    background: url(/Images/navBg.png) repeat-x;
    border-bottom: 3px solid #ea730f;
}

#ContentBox
{
    overflow:hidden;
    zoom:1;
    width: 945px;
    margin: 0 auto;
}

.TopNavi
{
    overflow: hidden;
    margin: 0 0 0 30px;
    z-index:9;
}
.TopNavi li
{
    float: left;
    margin: 0 0 0 3px;
}
.TopNavi li:hover, .TopNavi li.highlight
{
    border: 1px solid #ea730f;
    margin: 0 0 0 3px;
    background: url(/Images/naviBg.jpg) repeat-x;
    border-bottom: 0;
}
.TopNavi li.highlight a, .TopNavi li:hover a
{
    color: White;
    font-weight: bolder;
    padding: 12px 18px 7px 18px;
}
.TopNavi li a
{
    color: #3c3928;
    font-weight: bolder;
    text-transform: uppercase;
    text-decoration: none;
    padding: 13px 19px 6px 19px;
    display:block;
}
.TopNavi li ul.TopNaviDD
{
    display: none;
    position:absolute;
    background: #e9e9c7;
    border: 0;
    border-top: 3px solid #ea730f;
    padding: 0;
    margin: 0;    
    z-index: 9;
}
.TopNavi li ul.TopNaviDD li
{
    float:none;
    display:block;
    background: #e9e9c7;
    border: 0;
    padding: 0;
    margin: 0;
}
.TopNavi li ul.TopNaviDD li a
{
    font-size: 12px;
    display: block;
    border-bottom: 1px solid white;
    padding: 10px 30px 10px 10px;
    color: #687a47;
    text-transform: uppercase;
    font-weight: normal;
    line-height:15px;
}

.TopNavi li ul.TopNaviDD li:hover a
{
    color: white;
    background: url(/images/naviBg.jpg);
    border: 1px solid #ea730f;
    font-weight:bold;
    padding: 9px 29px 9px 9px;
}

.TopNavi li:hover .TopNaviDD
{
    display: block;
}

.LeftColumn
{
    width: 230px;
    float: left;
}

ul.SubNavi
{

    margin: 0px;
    padding: 0px;
    list-style:none;
}

ul.SubNavi li
{
    margin: 0;
    padding: 0;
    zoom:1;
}
ul.SubNavi li.navi a
{
    color: #9fb56d;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2em;
    line-height:19px;
    display:block;
    margin: 0px;
    padding: 10px 10px 10px 20px;
    background: #f5f4e2;
    
}

ul.SubNavi li ul li
{  
   margin: 0px;
   padding: 0;
  background: #f5f4e2;
}

ul.SubNavi li ul li.navi a
{
    font-size: 1.1em;
    padding: 8px 10px 8px 20px;
    margin-left: 20px;
    background: #f2f1dc;
    border-bottom: 1px solid #fff;
}

ul.SubNavi li.navi a:hover
{
    color: #9fb56d;
    background: #e1e9c4 url(/Images/blue_arrow_light.png) 0px 50% no-repeat;
  
}

ul.SubNavi li.highlight a, ul.SubNavi li ul li.highlight a , ul.SubNavi li ul li.highlight a:hover, ul.SubNavi li.highlight a:hover
{
    color: #fff;
    background: #b0ce78 url(/Images/blue_arrow.png) 0px 50% no-repeat;
   
}

ul.SubNavi ul
{  
   margin: 0;
   padding: 0;
    
}


/***********************************************
Content
/**********************************************/
.MainContentDiv
{
    width: 690px;
    float: right;
    margin-right: 0;
}
#EkContent
{
    width: 690px;
    float: right;
    margin-right: 0;
}
.EkContentImage
{
    margin: 10px 0 10px 10px;
}

.dataPager
{
    background-color: #eeeeee;
    border: 1px solid #aaaaaa;
    padding: 6px;
    overflow:hidden;
    zoom:1;
}

.dataPagerNumber
{
    background-color: #ffffff;
    border: 1px solid #aaaaaa;
    padding: 3px 5px;
    margin:0px 1px;
}

.dataPagerNumberCurrent
{
    color: #fff;
    background-color: #197171;
    border: 1px solid #aaaaaa;
    padding: 3px 5px;
    margin:0px 1px;
}

.dataPagerCurrent
{
    color: #ffffff;
    background-color: #197171;
    border: 1px solid #aaaaaa;
    padding: 3px 5px;
    margin:0px 1px;
}

.NewsList li
{
    float: left;
    width: 690px;
    padding: 10px 0;
    border-bottom: 1px dotted gray;
    background-color: White;
}

.itemTitle
{
    font-size: 1.6em;
    color: #197171;
    padding: 0 4px 0px 0;
    margin: 0px;
}

/***********************************************
HOME
/**********************************************/
.Carousel
{
    width: 926px;
    height: 308px;
    float: left;
    margin-top: 0;
    background: url(/Images/carousel/cfcoc_carousel.jpg) no-repeat;
}
.Carousel ul li
{
    width: 910px;
    height: 294px;
    margin: 6px;
    background: url(/Images/carousel/left_panel.jpg) no-repeat;
    font-family: Georgia;
    color: #645438;
}
.Carousel ul li a
{
    color: #645438;
    display: block;
    text-decoration: none;
}
.CarouselTextBox
{
    padding: 210px 23px 0px;
    line-height:27px;
    width: 200px;
    height: 294px;
    background: url(/Images/carousel/brown_arrow.png) 224px 220px no-repeat;
}
.Carousel h2
{
    text-align:right;
    font-size: 12px;
    line-height: 15px;
    font-style: normal;
    font-weight:bold;
    color: #4f3301;
    font-family: Arial, Helvetiva, Sans-Serif;
}
.Carousel h4
{
    font-size: 14px;
    font-style: normal;
    font-weight:normal;
    color: #645438;
    font-family: Arial, Helvetiva, Sans-Serif;
}
.Carousel li img
{
    display: block;
    width: 657px;
    float:right;
}

#CarouselPrev
{
    float: left;
    display: block;
    position: relative;
    top: 296px;
    left: 834px;
    width: 33px;
    height: 28px;
    z-index: 300;
    cursor: pointer;
    background: url(/Images/carousel/left_arrow.png) no-repeat;
}

#CarouselNext
{
    float: left;
    display: block;
    position: relative;
    top: 296px;
    left: 840px;
    width: 33px;
    height: 28px;
    z-index: 300;
    cursor: pointer;
    background: url(/Images/carousel/right_arrow.png) no-repeat;
}

/* Commission Highlights */
.HighlighTitle
{
    background: url(/Images/comm_ed.jpg) no-repeat;
    height: 35px;
    text-indent: -10000px;
    padding: 0;
}

#Highlight
{
    width: 650px;
    float: left;
    line-height: 20px;
    color: #737272;
    padding-right: 10px;
}

#Highlight ul li
{
    margin: 12px 0;
    border-bottom: 1px dotted #737272;
    zoom: 1;
    overflow:hidden;
    padding-bottom: 12px;
    /* height: 184px; */
}
#Highlight ul li a
{
    color: #cb6107;
    display: block;
    text-align: right;
}

#Highlight ul li img
{
    border: 1px solid #cbcbbb;
    margin-right: 10px;
    padding: 5px;
    float: left;
    width: 160px;
}

#Highlight ul li p
{
    margin: 1em 0;
}

/* News & Announcements */
aside.rightBox
{
    float: right;
    font-size: 11px;
    padding: 10px 25px;
    background-color: #eaeaea;
    width: 225px;
}

.newsBox
{
    margin-bottom: 35px;
    display: block;
}
.newsBox h2
{
    color: #143c4f;
    border-bottom: 2px solid #737272;
}
.newsBox li
{
    padding: 5px 0;
    border-bottom: 1px dotted #737272;
}
.newsBox li a
{
    color: #379595;
    text-decoration: none;
}

.reportBox
{
    margin-bottom: 35px;
    display: block;
}

.reportBox img
{
    border: 1px solid #cbcbbb;
    margin: 5px 0;
}

.ourBlog
{
    background-position: -822px -314px;
    margin-bottom: 35px;
    height: 54px;
}

.date
{
    color: #737272;
    display: block;
    font-size: 10px;
}

/***********************************************
FOOTER
************************************************/
footer
{
    font-size: 10px;
    padding: 15px;
    width: 965px;
    height: 200px;
    margin-top: 50px;
    background-position: 0 -135px;
}

footer h2
{
    font-family: Georgia;
    font-weight: lighter;
    font-size: 2.2em;
    color: #143c4f;
}

footer .footerMenu
{
    color: #a9e2fe;
    float: left;
}

footer .footerMenu
{
    margin: 0 0 0 -10px;
    padding: 0;
}

footer .footerMenu li
{
    padding: 0 10px;
    float: left;
    font-size: 11px;
    border-right: 1px solid #a9e2fe;
    margin: 25px 0 0 0;
}

footer .footerMenu a
{
    color: #a9e2fe;
    text-decoration: none;
}

/* Our Newsletter  */
#newsLetter
{
    width: 260px;
    border-left: 1px dotted #83c2c1;
    padding-bottom: 65px;
    padding-left: 20px;
}

.newsLetter
{
    background-position: -950px -100px;
    margin-bottom: 10px;
    color: White;
    padding: 0 30px 15px 75px;
}

.newsBtn
{
    border: 1px solid #ea730f;
    background-color: #f38f17;
    font-size: 11px;
    padding: 2px 10px;
    color: #fff;
}

/* Contact Us */
.contactUsBox
{
    width: 580px;
    margin-left: 20px;
}

.contactUs
{
    width: 370px;
    font-weight: bold;
    font-size: 12px;
    padding: 15px 0 15px 70px;
    background-position: -950px 0;
    color: #fff;
}


/***********************************************
    Social Media
***********************************************/
.socialMedia
{
    margin: 10px 0 0 0;
}

.socialMedia li
{
    float: left !important;
}

.Facebook, .Blogger, .twitter, .RSS
{
    height: 33px;
    width: 32px;
    float: left;
    margin-left: 5px;
    display: block;
}

.Facebook
{
    background-position: -667px -314px;
}
.Blogger
{
    background-position: -706px -314px;
}
.twitter
{
    background-position: -784px -314px;
}
.RSS
{
    background-position: -745px -314px;
}


.FAQs p strong
{font-size: 1.1em;}

.MainContentDiv ul.commissioner-list
{margin: 1em 0;}

.MainContentDiv ul.commissioner-list li
{zoom:1;
 overflow:hidden;
 background:transparent !important;padding:0;}
 
.MainContentDiv ul.commissioner-list li img
{zoom:1;
 overflow:hidden;
 background:transparent;padding: 5px;border: 1px solid #cbcbcb;float: left;
margin: 0 20px 20px 0;}

.MainContentDiv ul.commissioner-list li p
{margin-left: 110px;}

.search
{border: 1px outset #efeecf; border-top: none; background: #efeecf; padding: 5px; margin: -9px 40px 0 0;}
.search input
{vertical-align: middle; line-height: 35px;border: 0;height: 35px;}

.search input.searchTexBox
{text-indent: 1em;color: #4c4c4c;font-style: italic;font-family: Cambria, Georgia, serif;font-size: 14px;}

.search input.searchTexBox.empty
{opacity: #;filter: alpha(opacity=75)}


.image 
{
   top:10px;
   left:35px;
   position:relative;
   width: 100%; /* for IE 6 */
   display: block;   margin-left: auto;   margin-right: auto;
}

.ErrorHeading 
{
   font-family: Arial, Helvetica, sans-serif;
   font-size: 50px;
   font-weight:bold;
   position: absolute;
   top: 90px;
   left: 20px;
   width: 100%;
}
.sorryMessage
{
   font-family: Arial, Helvetica, sans-serif;
   font-size:40px;
   font-weight:bold;
   position: absolute;
   top: 150px;
   left: 20px;
   width: 100%;
}
.Errormessage 
{
   font-family: Arial, Helvetica, sans-serif;
   font-size:20px;
   font-weight:bold;
   position: absolute;
   top: 200px;
   left: 20px;
   width: 100%;
}