﻿fieldset {
    background: #fff;
    border: solid 1px #ccc;
    margin: 10px 20px;
    padding: 10px 20px;
}
fieldset.small {
    background: #fff;
    border: solid 1px #ccc;
    margin: 5px;
    padding: 5px;
}
fieldset h3.caption { margin-top: -20px; }
fieldset h3.caption span { padding: 0 3px; background: #fff; }

.field-group {
    clear: both;
    margin: 20px 0;
    padding: 10px;
    border: solid 2px #eee;
    position: relative; 
    width: 95%;
}
.field-group-content { position: relative; width: 100%; overflow: hidden; }
.field-group-caption {
    font-weight: bold;
    color: #ccc;
    margin-top: -20px;
    font-size: 12px;
    line-height: 15px;
    height: 15px;
    padding-left: 15px;
    background-position: 0 50%;
    background-repeat: no-repeat;
    cursor: pointer;  
}
.field-group-caption span { background-color: #fff; padding:0 5px; }
.field-group-caption, .field-group-caption:active { outline: none; }

.field {
    position: relative;
    width: 100%;
    margin: 10px 0px 60px 0px;
    clear: both;    
}
.field .f-left, .field .f-right {
    display: block;
    float: left;
}
.field .f-left {
    width: 140px;
    margin-bottom: 20px;
}
.field .f-left.small, fieldset.small .field .f-left { width: 90px; }
fieldset.big .field .f-left { width: 290px; }

.field > label {
    font-weight: bold;
    margin-right: 15px;
    text-align: right;
    display: block;
    line-height: 100%;
}
.field label span {
    display: block;
    font-weight: normal;
    font-size: 80%;
}

span.required:after {
    content: "\2002\2022";
    color: #EC2227;
    font-weight: bold;
    cursor: help;
}
.textbox, .selectbox {
    margin: 0;
    padding: 2px 5px;
    font-size: 10px;
    line-height: 10px;
    letter-spacing: 1px;    
}
textarea { color: #000; }
textarea.textbox { font-size: 12px; }
.selectbox option, table.selectbox input, table.selectbox label { margin: 5px; }
table.selectbox label { color: #111; }
table.selectbox label span { display: block; margin-left: 30px; }


.block { display: block; }
.button-group {
    clear: both;
    margin: 20px 0 20px 20px;
    border-top: solid 1px #ccc;
    padding: 20px;
}
fieldset.small .button-group {
    margin: 10px 0 10px 20px;
    padding: 10px 10px 0 10px;
}
.button-group.right {
    text-align: right;
}
.button-group-no-border {
    clear: both;
    margin: 10px 0 10px 10px;
    padding: 10px;
}
.button-group button, .button-group input, .button-group-no-border button, .button-group-no-border input,
button.button-normal, input.button-normal, 
button.normal-button, input.normal-button  {
    margin-right: 20px;
    font-size: 10px;
    line-height: 20px;
    padding: 0 5px;
}
.preferred {
    font-weight: bold;
    letter-spacing: 1px;
}
.small-button, .button-group .small-button {
    border-top: solid 1px #ddd;
    border-bottom: solid 1px #ccc;
    border-left: solid 1px #ddd;
    border-right: solid 1px #ccc;
    background: #f0f0f0;
    padding: 3px;
    font-size: 9px;
    line-height: 9px;
    color: #900;
    cursor: pointer;
}
.big-button, .button-group .big-button {
    border-top: solid 1px #ddd;
    border-bottom: solid 1px #ccc;
    border-left: solid 1px #ddd;
    border-right: solid 1px #ccc;
    background: #f0f0f0;
    padding: 3px 8px;
    font-size: 16px;
    font-weight: bold;
    line-height: 16px;
    color: #900;
    cursor: pointer;
}

input.checkbox, span.checkbox > input, table.checkbox input { margin-right: 10px; }

/* idle & focus fields */
.focus-field {
    border: solid 2px #73A6FF;
    background-color: #EFF5FF;
    color: #000;
    outline: none;
}
.idle-field {    
    border: solid 2px #999;
    background-color: #FEFEFE;
    color: #555;
}
.disabled-field {    
    border: solid 2px #DFDFDF;
    background-color: #aaa;
    color: #fff;
    font-weight: bold;
    letter-spacing: 1px;
}

/* radio-list */
.radio-list { border: solid 1px #eee; margin-bottom: 5px; padding: 5px 10px; }
.radio-list label, .radio-list input {
    display: inline;
    margin-left: 20px;
}


/* fancy */
.selectbox.fancy {
    background: #d6ebff;
    color: #000;
}
.selectbox.fancy option {
    background: #d6ebff;
    color: #ccc;
}
input[type=button].fancy { 
    color: #427CC5;
    font-weight: bold;
    letter-spacing: 1px;
}
input[type=submit].delete { 
    color: #910B0B;
    letter-spacing: 1px;
}

/* basic fieldset */
fieldset.full { width: 100%; }
fieldset.basic .row {
    position: relative;
    width: 90%;
    overflow: hidden;
    clear: both;
    margin: 10px 0;    
    
}
fieldset.basic .row label {
    float: left;
    width: 150px;
    margin-right: 10px;
    text-align: right;
    color: #000;
    font-size: 85%;
}    
fieldset.basic .row .textbox, fieldset.basic .row .selectbox, fieldset.basic .row div.content {
    float: left;    
} 
fieldset.basic .row div.content { width: 200px; }
/* wizard */
div.wizard-wrapper { background: #fff; border: solid 5px #ddd; padding: 5px 10px; }
.wiz td { vertical-align: top; }
.wizSideBar {
    border-right: solid 1px #eee;
}
.wizStep {
    padding-left: 10px;
}
.wizButton {
    margin-left: 20px;
    padding-left: 5px;
    padding-right: 5px;
}
.wizard-feedback {
    border: solid 1px #ccc; 
    padding: 5px 10px;   
    margin-bottom: 20px;
    height: 25px;
    line-height: 25px;
    background-color: #efefef;
}

.wizard-feedback span {
    display: block;
    float: left;
    color: #999;    
    text-align: left;
    overflow: hidden;
}

.wizard-feedback span.step {
    padding-left: 20px;
    font-size: 12px;
    width: 70px;
    margin-right: 10px; 
    border-right: solid 1px #ccc;   
}
.wizard-feedback span.step.last {
    margin-right: 0; 
    border-right: none;   
}
.wizard-feedback span.step.active {
    color: #000;    
    font-weight: bold;
}
.wizard-feedback span.step1 { background: transparent url(../images/art/wiz-step-1.png) left 50% no-repeat; }
.wizard-feedback span.step2 { background: transparent url(../images/art/wiz-step-2.png) left 50% no-repeat; }
.wizard-feedback span.step3 { background: transparent url(../images/art/wiz-step-3.png) left 50% no-repeat; }
.wizard-feedback span.step4 { background: transparent url(../images/art/wiz-step-4.png) left 50% no-repeat; }
.wizard-feedback span.step5 { background: transparent url(../images/art/wiz-step-5.png) left 50% no-repeat; }
.wizard-feedback span.active.step1 { background: transparent url(../images/art/wiz-step-active-1.png) left 50% no-repeat; }
.wizard-feedback span.active.step2 { background: transparent url(../images/art/wiz-step-active-2.png) left 50% no-repeat; }
.wizard-feedback span.active.step3 { background: transparent url(../images/art/wiz-step-active-3.png) left 50% no-repeat; }
.wizard-feedback span.active.step4 { background: transparent url(../images/art/wiz-step-active-4.png) left 50% no-repeat; }
.wizard-feedback span.active.step5 { background: transparent url(../images/art/wiz-step-active-5.png) left 50% no-repeat; }

/* listview */
table.listview {
    margin: 10px 0;
    padding: 5px 10px;
    border: solid 1px #ccc;
}
table.listview tr td, table.listview tr th {
    padding: 3px 5px;
}
table.listview tr.alt td {
    background: #CFA8AA;
}
table.listview tr th, table.listview tr th a {
    background: #910B0B;
    color: #fff;
    font-weight: bold;
    letter-spacing: 1px;
}
table.listview th a.ASC {
    background: transparent url(../images/art/ir-up-white.png) left 50% no-repeat;
    padding-left: 12px;
}
table.listview th a.DESC {
    background: transparent url(../images/art/ir-down-white.png) left 50% no-repeat;
    padding-left: 12px;
}
/* other */
.edit-btn {
    display: inline;
    margin-left: 15px;
    padding-left: 10px;
    font-size: 70%;
    background: transparent url(../images/art/ir-edit-btn.png) left 50% no-repeat;
    height: 12px;
    width: 20px;
    cursor: pointer;
}
.error-box {
    border: solid 4px #f00; 
    padding: 10px 20px; 
    width: 300px; 
    font-weight:bold; 
    letter-spacing: 1px; 
    background: #000;
    color: #c00;
}
div.toggle-button {
    border-top: solid 1px #ddd;
    border-bottom: solid 1px #ccc;
    border-left: solid 1px #ddd;
    border-right: solid 1px #ccc;
    background: #f0f0f0;
    padding: 3px;
    font-size: 11px;
    line-height: 11px;
    color: #999;
    text-align: center;
    cursor: pointer;
}
div.toggle-button span.attention {
    color: #6E0909;
}
.quick-list, .quick-list-basic {
    color: #000;
    letter-spacing: 1px;
    font-size: 80%;
    padding: 3px 5px;
    margin: 5px 0;
    cursor: pointer;
}
.quick-list {
    background: #CCB28C;
}
.quick-list-basic { border: solid 1px #000; }
.quick-list-basic.type-0 { border-color: #900; }
.quick-list-basic.type-1 { border-color: #009; }
.quick-list-basic.enrolled { background: #FDC3CB; }
.quick-list-basic.prospective { background: #CEF9C0; }

.quick-list-over { 
    background: #CCA875;
}
.quick-list-basic-over { 
    background: #FFFFC4;
    border: dashed 1px #000;
}

.updated { font-style: italic; color: Fuchsia; letter-spacing: 1px; }
