/* 
    Document   : chromo_page.css
    Created on : Nov 27, 2012, 5:39:46 PM
    Author     : ChromoSoft
    Description:
        Purpose of the stylesheet follows.
*/

@import url('chromo_page_fields.css');

/*
| view : request/login
*/
.ch_login_hhldr{
    background:rgba(252, 203, 212, 0.9);
    border-color: #000;
    border-style: solid;
    border-width: 1px 0px 1px 0px;
    height: 36px;
    margin-top: 28px;
    position: relative;
    width: 100%;
}
.ch_login_hhldr img.ch_login_img_h, .ch_login_hhldr span {
    display:inline-block;
    float:left;
    position:relative;
}
.ch_login_hhldr img.ch_login_img_h{
    margin:-7px 7px 0px 21px;
}
.ch_login_hhldr span{
    font-size:11pt;
    line-height: 29pt;
    text-shadow: 0px 1px 0px #FFF;
}

.ch_login_flds_hldr{
    margin:101px auto 0 auto;
    height:10em;
    width:17em;
}

/*
| view : permission
*/
.ch_perm_hldr{
    color:#494949;
    display:inline-block;
    float:left;
    font-size:10pt;
    height:100%;
    margin:0em;
    min-height:399px;
    overflow:hidden;
    padding:0em;
    position:relative;
    text-shadow:0px 1px 1px #FFF;
    z-index:2;
}
.ch_perm_hldr:nth-child(1){
    background:#fff2f2;
    border-right:1px dashed #353535;
    width:49%;
}
.ch_perm_hldr:nth-child(2){
    background:#f0eded;
    margin-right:-1%;
    width:50.8%;
}
.ch_perm_hldr:after, .ch_perm_hldr ul:after{
    clear:both;
    content:".";
    display:block;
    font-size:0pt;
    line-height:0pt;
}

.ch_perm_hldr ul{
    list-style-type: none;
    padding: 5px 5px 5px 22px;
    position:relative;
    width:100%;
}
.ch_perm_hldr>ul{
    padding: 0px 0px 0px 11px;
}
.ch_perm_hldr ul li{
    clear:both;
    display:inline-block;
    min-height:25px;
    position:relative;
    width:94%;
}

.ch_perm_hldr ul li *{
    cursor:default;
}
.ch_perm_hldr ul li>span, .ch_perm_hldr ul li>input[type=checkbox]{
    clear:both;
    display:inline-block;
    position:relative;
}
.ch_perm_hldr ul li>span{
    margin-left:7px;
    top:0px;
}
.ch_perm_hldr ul li:hover>span{
    color:#000;
}
.ch_perm_hldr ul li>input[type=checkbox]{
    top:2px;
}
.ch_perm_hldr ul li>div.ch_perm_intmdtstte{
    background:#b1d6f8;
    display:none;
    float:left;
    height:9px;
    left:6px;
    position:absolute;
    top:7px;
    width:9px;
    z-index: 1;
    
    -moz-box-shadow:0px 0px  3px rgba(0,0,0,0.6) inset;
    -webkit-box-shadow:0px 0px  3px rgba(0,0,0,0.6) inset;
    box-shadow:0px 0px  3px rgba(0,0,0,0.6) inset;
}

div.ch_perm_hldr_fx{
    bottom:0em;
    height:1000em;
    left:0em;
    position:absolute;
    width:100%;
    z-index:1;
}
div.ch_perm_hldr_fx>div{
    display:inline-block;
    float:left;
    height:100%;
    position:relative;
}
div.ch_perm_hldr_fx>div:nth-child(1){
    background:#fff2f2;
    border-right:1px dashed #353535;
    width:49%;
}
div.ch_perm_hldr_fx>div:nth-child(2){
    background:#f0eded;
    margin-right:-1%;
    width:50.8%;
}

/*
| view : pedigree
*/
table.ch_pedigree_typ1{
    /*table-layout: fixed;*/
    border-collapse: collapse;
    margin: 0em auto 3px auto;
    padding:0em;
    width:99.6%;
}
table.ch_pedigree_typ1 td{
    border:1px solid #000;
    height: 25px;
    padding:1px;
    text-align: center;
    vertical-align: middle;
}

/*
| view : lines
*/
table.ch_lines_typ1{
    /*table-layout: fixed;*/
    border-collapse: collapse;
    margin: 0em 2px 3px 2px;
    padding:0em;
    table-layout: fixed;
}
table.ch_lines_typ1 td{
    border:0px none;
    height: 25px;
    padding:2px;
    text-align: center;
    vertical-align: middle;
    width:10em;
}

/*
| others : headers
*/
.ch_fld_header, .ch_fld_sub_header, .ch_fld_settngs_header{
    margin:2px auto 2px auto;
    overflow:visible;
    /*min-width:45em;*/
    position:relative;
}
.ch_fld_header, .ch_fld_sub_header{
    min-height:2em;
    width:99.2%;
}
.ch_fld_header{
    background: #bec0c1;
    border:1px solid #414141;
    font-size: 11pt;
    line-height: 20pt;
    min-height: 36px;
}
.ch_fld_header, .ch_fld_header *{
    cursor:default;
}
.ch_fld_header:hover{
    background: #a1a1a1;
    border:1px solid #242424;
    text-shadow: 0px 1px 1px #FFF;
}
.ch_fld_header img.ch_fld_header_logo{
    display:inline-block;
    float:left;
    margin:4px 2px 0px 10px;
    position:relative;
    top:2px;
}
.ch_fld_header span{
    display:inline-block;
    margin-left:6px;
    position:relative;
    top:6px;
}
.ch_fld_header img.btn{
    margin: 8px 0px 0px 8px;
}
.ch_fld_header img.btn:hover{
    filter:alpha(opacity=80);
    opacity:60;
}
.ch_fld_header img.btn:last-child{
    margin: 8px 8px 0px 8px;
}


.ch_fld_sub_header{
    border-bottom:1px dashed #000;
}

.ch_fld_settngs_header{
    background:#f0f0f0;
    border-bottom:1px dashed #353535;
    min-height: 38px;
    width:99.8%;
}
.ch_fld_settngs_header:hover{
    background:#e8e8e8;
}

.ch_fld_settngs_header button.ch_flds_btn{
    margin:2px 2px 2px 0px !important;
}
.ch_fld_settngs_header button.ch_flds_btn:first-child{
    margin-left:2px !important;
}
.ch_fld_settngs_header button.ch_flds_btn[name=addItem]{
    background-image:url('../images/fico_add.png');
    background-repeat:no-repeat;
    background-position: 3px center;
    padding-left:25px;
}

.ch_fld_settngs_header div.ch_fld_hldr img{
    margin:7px 0px 4px 4px !important;
}
.ch_fld_settngs_header div.ch_fld_hldr img:hover{
    filter:alpha(opacity=30);
    opacity:0.3;
}
.ch_fld_settngs_header div.ch_fld_hldr img:last-child{
    margin-right: 4px !important;
}

.ch_fld_settngs_header div.ch_fld_hldr{
    float:right;
}
.ch_fld_settngs_header span.title_header,
.ch_fld_settngs_header span.title_info{
    color:#000;
    display:inline-block;
    position:relative;
    text-shadow:0px 1px 1px #D8D8D8;
}
.ch_fld_settngs_header span.title_header{
    display:inline-block;
    font-size:11pt;
    margin-left:8px;
    position:relative;
    top:11px;
}
.ch_fld_settngs_header span.title_info{
    font-size:13pt;
    line-height:27pt;
    margin-left:17px;
}
.ch_fld_settngs_header img.ch_fld_settings_logo{
    display:inline-block;
    float:left;
    margin:5px 0px 0px 7px;
    position:relative;
    top:2px;
}
.ch_fld_settngs_header span.ch_flds_span_typ_02{
    font-size:11pt;
    left:-4px;
    text-shadow: 0px 1px 1px #FFF;
    top:-9px;
}
.ch_fld_settngs_header input.ch_flds_radio{
    margin-left:4px;
    padding:0px;
    top:-7px;
}

.ch_fld_settngs_header input.ch_flds_txtbox{
    display:inline-block;
    float:left;
    position:relative;
    top:-2px;
}

/*
| others : toggle filters holders
*/
.ch_fld_fltr_tgglr{
    background: rgba(253, 253, 253, 0.5);
    display:none;
    float:left;
    margin:0em;
    overflow:visible;
    padding:0em;
    position:relative;
    width:100%;
}
.ch_fld_fltr_tgglr table{
    table-layout: fixed;
    border-collapse: collapse;
    margin: 0em 0em 3px 0em;
    padding:0em;
    width:99.6%;
}
.ch_fld_fltr_tgglr table tr{
    border-bottom:1px solid #FFF;
}
.ch_fld_fltr_tgglr table tr:last-child{
    border-bottom:0px none;
}
.ch_fld_fltr_tgglr table td{
    background: rgba(239, 239, 239, 0.9);
    padding: 1px 0px 2px 0px;
}
.ch_fld_fltr_tgglr table td.col_title{
    background: rgba(215, 215, 215, 0.9) !important;
    color: #3e4012;
    padding:0px 5px 0px 5px;
    text-shadow: 0px 1px 1px #FFF;
    width:21%;
}
.ch_fld_fltr_tgglr table td.col_title span.ch_flds_span_typ_01{
    font-size:10pt;
}
.ch_fld_fltr_tgglr table td.col_title{
    border-color: #FFF;
    border-style: solid;
    border-width: 0px 1px 0px 1px;
}
.ch_fld_fltr_tgglr table tr>td.col_title:first-child{
    border-width: 0px 1px 0px 0px;
}

.ch_fld_fltr_tgglr table td input.ch_flds_txtbox{
    display:inline-block;
    width:95%;
}

.ch_fld_fltr_tgglr:after{
    clear:both;
    content:".";
    display:block;
    font-size:0pt;
    line-height: 0pt;
}

.ch_fld_fltr_tgglr div.toggler_loader{
    background:rgba(255,255,255, 0.9);
    font-size:10pt;
    height:100%;
    left:0em;
    padding-top: 5%;
    position:absolute;
    text-align:center;
    text-shadow: 0px 0px 1px #e3e3e3;
    top:0em;
    width:100%
}

/*
| others : content holders
*/
.ch_fld_cont_hldr{
    display:inline-block;
    float:left;
    margin:0em;
    /*overflow:hidden;*/
    padding:0em;
    position:relative;
    width:100%;
}
.ch_fld_cont_hldr:after{
    clear:both;
    content:".";
    display:block;
    font-size:0pt;
    line-height: 0pt;
}

/*
| others : holders
*/
div.ch_fld_hldr{
    display:inline-block;
    float:left;
    height:100%;
    margin:0em;
    padding:0em;
    position:relative;
}

/*
| others : footer holders
*/
.ch_fld_fttr_hldr{
    background:none;
    border-top:1px dashed #353535;
    min-height:24px;
    overflow:hidden;
    position:relative;
    text-align:right;
    width:100%;
}
.ch_fld_fttr_hldr img.imgBtn{
    display: inline;
    float: left;
    position: relative;   
    margin: 5px 0px 0px 5px;
}
.ch_fld_fttr_hldr img.imgBtn:hover{
    filter:alpha(opacity=30);
    opacity: 0.3;
}
li div.ch_fld_fttr_hldr .ch_flds_btn{
    margin: 5px -2px 5px 0px;
}
li div.ch_fld_fttr_hldr .ch_flds_btn:last-child{
    margin: 5px 5px 5px 0px;
}

/*
| others : loaders
*/
div.ch_main_loader, div.ch_main_cont_loader, div.ch_main_modal_loader{
    background:url('../images/fico_loader.gif') no-repeat center center rgba(255,255,255, 0.95);
    height:100%;
    left:0em;
    min-height: 474px;
    top:0em;
    width:100%;
    z-index: 10;
}
div.ch_main_loader{
    display:none;
    position:fixed;
}
div.ch_main_cont_loader, div.ch_main_modal_loader{
    display:none;
    position:absolute;
}

/*
| others : pictures
*/
div.ch_picture_hldr{
    background:#FFF;
    border:5px solid rgba(240,240,240,0);
    float:left;
    margin:8px 0px 0px 8px;
    min-height:179px;
    min-width:100px;
    overflow: hidden;
    position:relative;
    
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    
    /*-moz-box-shadow : 0px 0px 3px rgba(0,0,0,0.6);
    -webkit-box-shadow : 0px 0px 3px rgba(0,0,0,0.6);
    box-shadow : 0px 0px 3px rgba(0,0,0,0.6);*/
}
div.ch_picture_overlay{
    height:100%;
    left:0em;
    position:absolute;
    top:0em;
    width:100%;
    z-index:2;
}
div.ch_picture_overlay:hover div.ch_picture_cmd_hldr
{
    display:inline-block;
}
div.ch_picture_info_area{
    color:#FFF;
    display:block;
    height:100%;
    left:0em;
    position:absolute;
    top:0em;
    width:65%;
    text-align: left;
    text-shadow: 0px 0px 1px #000;
}
div.ch_picture_info_area>span{
    cursor:default;
    line-height: 29pt;
    margin-left: 11px;
    position: relative;
}
div.ch_picture_cmd_hldr{
    background:rgba(255,255,255, 0.2);
    border-top:1px dashed #353535;
    bottom:0em;
    display:none;
    min-height:35px;
    position:absolute;
    text-align: right;
    width:100%;
    z-index: 3;
}
div.ch_picture_cmd_hldr img.imgBtn{
    cursor:pointer;
    filter:alpha(opacity=70);
    opacity:0.7;
    position:relative;
    margin:5px 5px 0px 0px;
}
div.ch_picture_cmd_hldr img.imgBtn:hover{
    filter:alpha(opacity=100);
    opacity:1;
}

/*
| others : uploads
*/
div.ch_upload_hldr{
    height:100%;
    position:relative;
    width:100%;
}
div.ch_upload_hldr:after{
    content:".";
    display: block;
    font-size:0pt;
    line-height: 0pt;
    position:relative;
    visibility: hidden;
}
div.ch_upload_hldr input[type=file]{
    display:block;
    filter:alpha(opacity=0);
    opacity: 0;
    position:absolute;
    right:0px;
    top:6px;
    z-index:  2;
}
div.ch_upload_hldr>img.ch_upload_btn{
    display:inline-block;
    filter:alpha(opacity=50);
    margin-left:6px;
    opacity: 0.5;
    position:relative;
    top:6px;
}
div.ch_upload_hldr:hover>img.ch_upload_btn{
    filter:alpha(opacity=100);
    opacity: 1;
}

/*
| others : transitions
*/
.ch_fld_header, .ch_perm_hldr ul li>span,
.ch_fld_settngs_header,
.ch_fld_settngs_header div.ch_fld_hldr img,
.ch_fld_fttr_hldr img.imgBtn,
div.ch_picture_cmd_hldr,
div.ch_picture_cmd_hldr img.imgBtn,
div.ch_upload_hldr>img.ch_upload_btn{
    -moz-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

/*
| others : error message
*/
.ch_err_msg_hldr{
    background: rgba(255,0,0, 0.5);
    border:1px solid #470606;
    font-size:10pt;
    line-height: 20pt;
    margin: 82px auto 5px auto;
    min-height:2em;
    padding:5px 5px 5px 20px;
    position:relative;
    width:94%;
    text-shadow: 0px 1px 1px #FFF;
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}