/*
State of California master template
Version 2010.12.09
*/

/* *************** CSS Reset *************** */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

textarea
{
  font-size:100%;
}


/* *************** Outer structure *************** */

body
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78em;
    background: #fff url(../images/design01/body_background.png) repeat-x;
     color: black;
    line-height: 1.2;
}


/* *************** Header *************** */

#header
{
    width: 968px;
    height: 154px;
    margin: 0 auto;
    position: relative;
    background: transparent url(../images/design01/header_bg.png) no-repeat top right;
    z-index: 10;
}

#skip_to_content a, #skip_to_content a:hover, #skip_to_content a:visited
{
    position: absolute;
    left: 0px;
    top: -500px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

#skip_to_content a:active, #skip_to_content a:focus
{
    position: static;
    width: auto;
    height: auto;
    color: #00f;
    background: #fff;
    padding: 1px 2px;
}

#header .head_cagov_logo
{
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 10;
}
#header .head_organization_banner
{
    position: absolute;
    top: 60px; /* Adjusts the position of your organization banner */
    left: 150px; /* Adjusts the position of your organization banner */
    z-index: 20;
}

#head_links
{
    position: absolute;
    top: 46px;
    left: 566px;
    font-size: .9em;
    color: #c2e5f4;
}
#head_links a
{
    color: #c2e5f4;
    background-color: #012b41;
    margin: 0 8px;
}
#head_links a:hover
{
    color: #fff;
}


/* Search */

#head_search
{
    position: absolute;
    left: 730px;
    top: 71px;
    z-index: 10;
}

.textfield_container
{
    width: 183px;
    height: 20px;
    background: transparent url(../images/design01/header_search_textfield.png) no-repeat;
    float: left;
}
#search_ca_textfield, #search_local_textfield
{
    border: 0;
    background-color: transparent;
    padding: 3px 0 0 8px;
    width: 175px; /* 183 - 8 */
    color: #505050;
    font-size: 0.92em;
}
.submit_container
{
    position: absolute;
    top: 0px;
    left: 183px;
}
.javascript_off #radio_container
{
    display: none;
}
#radio_container
{
    position: absolute;
    top: 20px;
    left: 40px;
    color: #fff;
    font-size: .9em;
    width: 172px; /* Fix FF3 issue where increasing font size causes radio buttons to wrap to two lines */
}
#header .radiobutton
{
    position: relative;
    top: 2px;
}
.javascript_on #header .radiobutton
{
    position: absolute;
    left: -2000px;
}
.javascript_on #radio_container label
{
    padding: 0 0 0 24px;
    background: url(../images/design01/header_search_radiobutton.png) no-repeat 12px 3px;
}

.gsc-completion-container
{
    z-index: 50; /* fix issue where Google autocomplete dropdown appears behind header images */
}


/* Navigation */

#navigation
{
    position: absolute;
    top: 95px;
    left: 16px;
    padding-left: 128px; /* adjusts the horizontal position of the top-level nav */
}
#navigation ul
{
    padding: 0;
    margin: 0;
    list-style: none;
}
#navigation li
{
    float: left;
    background: transparent url(../images/common/nav_divider.png) no-repeat bottom right;
    padding: 0 0 0 0px;
}
#navigation li.last_nav_item
{
    background-image: none;
}

#navigation a.nav_level1_link
{
    text-decoration: none;
    display: block;
    padding: 0 15px 0 17px; /* adjust the width of the tabs by adjusting the left & right padding */
    margin-right: 2px; /* add 1px gap on right side of tab */
    height: 23px; /* 47 - 24 */
    color: #eee;
    text-transform: uppercase;
    font-size: 1.21em;
    text-shadow: #000 1px 1px 3px; /* This is valid in CSS 2 and 3 but not 2.1 */
    padding-top: 24px;
    white-space: nowrap; /* fix IE8 comp mode issue where nav text wraps */
}

#navigation li.last_nav_item a.nav_level1_link
{
    margin-right: 0px;
}

#nav_list :first-child a.nav_level1_link
{
    padding-left: 45px; /* Add padding so the entire background highlight can be seen */
}

.highlighted_nav_item a.nav_level1_link, .body_home #nav_list :first-child .nav_level1_link
{
    background: transparent url(../images/common/nav_highlight.png) no-repeat bottom right; /* current page item, home, spec 0-2-1, 1-3-0 */
}
#navigation #nav_list.unhighlight_nav_item a.nav_level1_link
{
    background-image: none; /* unhighlight current page item, spec 2-2-1 */
}
#header #navigation #nav_list li:hover a.nav_level1_link
{
    background: transparent url(../images/common/nav_highlight.png) no-repeat bottom right; /* hovered item, spec 3-2-2 */
}

/* Ribbon */

.add_ribbon #img_ribbon
{
    width: 968px;
    height: 115px;
    background: transparent url(../images/common/ribbon.png) no-repeat;
    position: absolute;
    top: 364px;
    z-index: 20;
}
.add_ribbon #main_content
{
    padding: 38px 0 0 0; /* reserve space for ribbon */
}

/* *************** page_container *************** */

#page_container
{
    background: transparent url(../images/common/page_content_shadow.png) repeat-y; /* background:transparent url(../images/common/page_content_shadow_extended.png) repeat-y; */
    width: 968px;
    margin: -11px auto 0 auto;
    min-height: 500px;
}

#banner, #main_content
{
    width: 936px;
    margin: 0 auto;
    color: #505050;
}

/* *************** Banner *************** */

#banner
{
    height: 285px;
}

/* *************** Main Content *************** */

#main_content
{
    position: relative;
    padding: 10px 0 0 0;
}

.add_padding
{
    padding: 16px;
}

.content_left_column
{
    width: 570px;
    float: left;
}
.content_right_column
{
    width: 320px;
    float: left;
    padding: 0 0 0 12px;
}

.breadcrumbs
{
    padding: 5px 5px 5px 10px;
}
.breadcrumbs img
{
    padding: 0 4px;
}


/* *************** Footer *************** */

#footer_2
{
    width: 968px;
    margin: 0 auto;
    background: transparent url(../images/design01/footer_bottom_shadow.png) no-repeat;
    text-align: center;
    padding: 34px 0 20px 0;
    color: #000000;
    font-size: 0.92em;
    font-weight: bold;
}
#footer_2 a
{
    color: #000000;
    padding: 0 4px;
}

/* ================================================================================= */

/* *************** Content *************** */

ol, ul
{
    padding-left: 40px;
}

.half_width_column
{
    width: 120px;
    float: left;
    margin-bottom: 20px;
}

p
{
    margin: .8em 0;
}

h1
{
    font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
    font-size: 2em;
    font-weight: normal;
    background: url(../images/content/bullet_arrow_right_green.png) no-repeat;
    margin: 0.6em 0;
    padding: 0 0 0 38px;
}

h2
{
    /* font-family: "Arial Narrow", Arial, Helvetica, sans-serif; */
    font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
    font-size: 1.4em;
    font-weight: bold;
    margin: 0.6em 0;
}
h2 img
{
    vertical-align: middle;
    padding-right: 6px;
}
h3
{
    font-size: 1.1em;
    font-weight: bold;
    margin: 1em 0;
    border: 1px solid #d6d7db;
    padding: 2px;
    background-color: #e7eaef;
    text-transform: uppercase;
}
h4
{
    font-size: 1.1em;
    font-weight: normal;
    margin: 0 0 .4em 0;
}

a
{
    text-decoration: none;
    color: #1f70a7;
}
a:hover
{
    text-decoration: underline;
}

.hidden
{
    /* Hide from regular displays.  Screen readers can still read it. */
    display: block;
    position: absolute;
    left: -9999px;
    top: 0;
}

.cleaner
{
    clear: both;
    height: 2px;
    font-size: 1px;
    border: none;
    margin: 0;
    padding: 0;
    width: auto;
    float: none;
}

.list_style_1
{
    list-style-type: none;
    padding-left: 10px;
}
.list_style_1 li
{
    background: transparent url(../images/content/bullet_blue_disc.png) no-repeat 0px 2px;
    padding: 0 0 14px 18px;
}
.list_style_1 a
{
    font-size: 1.1em;
    font-weight: bold;
}
.list_style_1 div
{
    margin: .4em 0 0 0;
}

.list_style_2, .list_style_2 ul
{
    list-style-type: none;
    padding-left: 10px;
}
.list_style_2 li
{
    background: transparent url(../images/content/bullet_blue_disc.png) no-repeat 0px 2px;
    padding: 0 0 16px 18px;
}
.list_style_2 li li
{
    margin: 6px 0 0 0;
    padding: 0 0 0 18px;
}

/* list with white > on blue disc bullets */
#main_content .list_style_4
{
    list-style-type: none;
    padding-left: 10px;
    float: left;
}
#main_content .list_style_4 li
{
    float: none;
    background: transparent url(../images/content/bullet_blue_disc.png) no-repeat 0px 1px;
    padding: 0 0 5px 18px;
}


.indent
{
    padding-left: 42px;
}


/* *************** Custom styles *************** */
/******** classes a-e ********/
.absoluteTop
{
    position:absolute;
    top:0;
}
.alignTop
{
    vertical-align:top !important;
}
.alignMiddle
{
    vertical-align: middle !important;
}
.margin-bottom-10
{
    margin-bottom: 10px !important;
}
.containerSpace
{
    margin-top:8px;
}
.divider
{
    display:inline-block;
    width:90%;
    height: 0px; 
    margin-left:5%;
    border-bottom:1px solid #c5c5c5; 
    background-color: #c5c5c5;
}
.errorMessage
{
    color: Red;
}

/******** f-l ********/

.fieldset-note
{
    margin-top:.5em;
    margin-bottom:1.5em;
    font-style: italic;
}

.fixedheadercell
{
    font-weight: bold;
    font-size: 10pt;
    width: 200px; /* color: white;  */
    font-family: Arial;
}
.fixedheadertable
{
    left: 0px;
    position: relative;
    top: 0px;
    padding-right: 2px;
    padding-left: 2px;
    padding-bottom: 2px;
    padding-top: 2px;
}
.font-gray
{
    color: #C0C0C0;
}
.leftFloat
{
    float: left;
}
.leftFloatClear
{
    float: left;
    clear: left;
}

/********* m-r ********/
.noDisplay
{
    display: none !important;
}
.noWrap
{
    white-space:nowrap;
} 
.paddingLeft50
{
    padding-left: 50px;
}
.paddingLeft20
{
    padding-left: 20px;
}
.paddingLeft10
{
    padding-left: 10px;
}
.paddingTop50Percent
{
    padding-top: 50%;   
}
.paddingLeftRight
{
    padding-left:30px;
    padding-right:30px;
}
.pager-linkbutton
{
    margin: 0px 1px 0px 0px;
}
.pager-current-page-label
{
    margin: 0px 1px 0px 0px;
    font-weight: bolder !important;
    font-size: 1.1em !important;
    color: #234F32 !important;
}
.pager-arrow-image
{
    font-weight:bold;
    margin: 5px 2px 0px 2px;
}
.pager-panel
{
    padding: 5px 4px 5px 0px !important; /* margin-right: 2px !important; */
    white-space: nowrap;
    max-width: 50% !important;
    vertical-align: middle !important;
}
.positionRelativeTop
{
    position:relative;
}  

.rightAlign
{
    width: 100%;
    text-align:right;
}
.rightFloat
{
    float: right;
}
.rightFloatClear
{
    float: right;
    clear: right;
}
.rightPadding10
{
    padding-right: 10px;
}

/********** s-v **********/

.scrollingDiv
{
    zoom: 1;
    overflow: auto;
}
.height100Percent
{
    height: 100%;   
}
.scrollingDiv-no-zoom
{
    overflow:auto;
}
.sectionFrame
{
    width:100%;
    border: 1px solid black;
    padding: 5px 10px 0px 10px;
}
.sectionFrame50Percent
{
    width:45%;
    float: left;
    margin-left: 10px;
    border: 1px solid black;
    padding: 5px 10px 5px 10px;
}
.sectionFrame30Percent
{
    width:30%;
    float: left;
    margin-left: 10px;
    border: 1px solid black;
    padding: 5px 10px 5px 10px;
}
.textAlignCenter
{
    text-align: center;
}  
.vAlignTop
{
    vertical-align:top;   
}
/*********** w-z **************/
.width100Percent
{
    width: 100%;
    padding-bottom: 3px;
    position: relative;
    top: 0px;
    left: 0px;
     display: inline-block;
}
.width90Percent
{
    width: 90%;
    position: relative;
    display: inline-block;
    padding: 0px 0px 3px 0px;
}
.width80Percent
{
    width: 80%;
    position: relative;
    display: inline-block;
    padding: 0px 0px 3px 0px;
}
.width75Percent
{
    width: 74%;
    padding-bottom: 3px;
    position: relative;
    display: inline-block;
}
.width66Percent
{
    width: 65%;
    position: relative;
    display: inline-block;
    padding: 0px 0px 3px 0px;
}
.width60Percent
{
    width: 59%;
    padding-bottom: 3px;
    position: relative;
     display: inline-block;
}
.width50Percent
{
    width: 49%;
    padding-bottom: 3px;
    position: relative;
     display: inline-block;
}
.width40Percent
{
    width: 39%;
    padding-bottom: 3px;
    position: relative;
     display: inline-block;
}
.width17Percent
{
    width: 17%;
  padding-bottom: 3px;
  position: relative;
  display: inline-block;
}
.width15Percent
{
  width: 14%;
  padding-bottom: 3px;
  position: relative;
  display: inline-block;
}
.width25Percent
{
    width: 24%;
    padding-bottom: 3px;
    position: relative;
     display: inline-block;
}
.width20Percent
{
    width: 20%;
    padding-bottom: 3px;
    position: relative;
     display: inline-block;
}
.width30Percent
{
  width: 29%;
  padding-bottom: 3px;
  position: relative;
  display: inline-block;
}
.width33Percent
{
    width: 32%;
    padding-bottom: 3px;
    position: relative;
    display: inline-block;
}
.width67Percent
{
    width: 66%;
    padding-bottom: 3px;
    position: relative;
    display: inline-block;
}
.width70Percent
{
  width: 69%;
  padding-bottom: 3px;
  position: relative;
  display: inline-block;
}
  
/********** id selectors ***********/

ul#ulCOE li div.width50Percent
{
    float:left;
    margin-right:5px;
}
#additionalPagesButtons
{
    width: 150px;
    margin: 0px;
    padding: 1em 0px 5px 20em;
    position: relative;
    display: inline-block;    
}
#ExtraPointsDiv
{
    width: 130px;
    margin-left: 25px 0px 0px -20px;
    padding: 5px 0px 5px 10px;
    border: 1px solid black;
    text-align: left;
    position: relative;
    top:0px;
}
#TenureTimebaseFieldset 
{
    width: 200px;
    white-space: nowrap;
    padding: 10px 0px 0px 15px;
    margin-top: 20px;
    border: 1px solid black;
}
#ListRestrictionsDiv
{
    width: 200px;
    white-space: nowrap;
    padding: 10px 0px 10px 0px;
    margin: 10px 0px 0px 25px;
    border: 1px solid black;
}
#fldExtraPointsNewFieldset
{
    
    margin-left: 50px;
    padding: 5px 0px 5px 10px;
    position: relative;
}
#lblCurrentEligibilityMonthsLabel, #lblOriginalEligibilityMonthsLabel, #lblCurrentExpirationDateLabel, #lblOriginalExpirationDateLabel
{
    width: 145px !important;
}
#pnlOrPanel
{
    margin:5px 0px 5px 30px;
}
#pnlClassDept
{
    width:700px;
}

/********** gridview overflow ***********/

.grdover
{
    overflow-x:scroll;
}