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

Validate
v 2.1

**************************************************************/
/*html, body {border: 0; margin: 0; padding: 0;} */

body{
    font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;	/* Font to use */
    margin:0px;
    background-color:#317082;
}
div.centered
{
text-align: center;
}
div.centered table
{
margin: 0 auto;
text-align: left;
}

/*IF CHANGING WIDTH OF tableContainer change width of el0 and el2 as well*/
#tableContainer {
    width:800px;
    margin-left:auto;
    margin-right:auto;
    background-color:#E2EBED;
    border-width:1px;
    border-style:solid;
    border-color:#317082;
}
#pageContainer {
    width:100%;

}
#pageContainerIE {
    width:100%;
     background-color:#E2EBED;
     font-size:18px;
     text-align:center;
     color:#317082;
}
#pageContainerUnderConstruct {
    width:100%;
     background-color:#E2EBED;
     font-size:18px;
     text-align:center;
     color:#317082;
}
#usersBrowser {
    width:100%;
     background-color:#E2EBED;
     font-size:14px;
     text-align:left;
     margin-left:20px;
     margin-right:20px;
     color:#317082;
}

#accordion {
    margin:20px 0px;
}

h3.toggler{	/* Styling question */
    /* Start layout CSS */
    font-size:0.9em;
    width:95%;
    background: #317082;
    color:#E2EBED;
    margin-bottom:2px;
    margin-top:2px;
    padding-left:20px;
    padding-right:20px;
    background-repeat:no-repeat;
    background-position:top right;
    height:20px;

    /* End layout CSS */

    overflow:hidden;
    cursor:pointer;
}
h3.bottomLine{	/* Styling question */
    /* Start layout CSS */
    font-size:0.9em;
    width:95%;
    background: #317082;
    /* color:#FFFFCC; */
    color:#E2EBED;
    margin-bottom:2px;
    margin-top:2px;
    padding-left:20px;
    padding-right:20px;
    background-repeat:no-repeat;
    background-position:top right;
    height:20px;

    /* End layout CSS */

    overflow:hidden;
    cursor:pointer;
}

/*div.element p {
    margin:0px;
    padding-right:20px;
    padding-left:20px;
}*/
div.element p {
    margin:0px;
    padding-right:20px;
    padding-left:20px; 
}
.table-tr-selected{
    font-size:14px;
    color:maroon;
}
.table-tr-hovered{
     font-size:16px;
    color:blue;
}
.tableRowClass {
    color:green;
}
 #regForm {
  
    padding: 0px;
} 

#regForm p {
    margin-bottom: 5px;
} 

#regForm label {
    float: left;
    font-size:14px;
    width: 100px;
}

#regForm input, #regForm select {
    width: 200px;
    background-color: white
    /*      background-color: white !important */
}

#passForm {
    padding: 5px;
}

#passForm p {
    margin-bottom: 5px;
}

#passForm label {
    float: left;
    width: 400px;
}

#passForm input, #passForm select {
    width: 200px;
    background-color: white
    /*      background-color: white !important */
}

#passForm {
    padding: 5px;
}

#requestForm {
    padding: 5px;
}

#requestForm p {
    margin-bottom: 5px;
}

#requestForm label {
    float: left;
    width: 200px;
    margin-left: 15px;
}

#requestForm input, #requestForm select {
    width: 200px;
    background-color: white
    /*      background-color: white !important */
}

#requestForm {
    padding: 5px;
}
#validateForm {
    padding: 5px;
}

#validateForm p {
    margin-bottom: 5px;
}

#validateForm label {
    float: left;
    width: 150px;
    margin-left: 100px;
}

#validateForm input, #validateForm select {
    width: 200px;
    background-color: white
    /*      background-color: white !important */
}

#validateForm {
    padding: 5px;
}
#profileForm p {
    margin-bottom: 5px;
}

#profileForm label {
    float: left;
    width: 350px;

}

#profileForm input, #profileForm select {
    width: 200px;
    background-color: white
    /*      background-color: white !important */
}

.validation-failed {
    border: 1px solid #3366FF;
}
.validation-passed {
    border: 1px solid #317082;
}
.validation-advice {
    margin: 2px;
    padding: 2px;
    color:#fff;
   background-color:#317082;
   
}
.warning {
    border: 1px solid #c66;
}
.warning-advice {
    margin: 2px;
    padding: 2px;
    color:#fff;
    background-color:#bbb;
}

#summary table{
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    /*    border-style:solid;
    border-width:1px;
    border-color:#317082; */

}
#summary thead th {
    text-align: left;
    font-size:12px;
    color:#317082;
    /*  border-style:solid;
    border-width:1px;
    border-color:#317082; */
}
#summary tbody td.tlabel{
    text-align: left;
    font-size:12px;
    color:#317082;
    font-weight:bold;
    text-align:center;
    /*    border-style:solid;
    border-width:1px;
    border-color:#317082; */
}
#summary tbody td.tvalue{
    text-align: left;
    font-size:12px;
    color:black;
    font-weight:normal;
    text-align:center;
    /*    border-style:solid;
    border-width:1px; 
     border-color:#317082;*/
}

#el0 {
    width:800px;
    margin-left:auto;
    margin-right:auto;
}

#divDecide1 {
    width:30%;
    height:450px;
    float:left;
    text-align:left;
    border-width:1px;
    border-style:none;
    border-color:transparent;
    color:#317082;
   /* background-color:red; */


}
#divDecide2 {
    width:65%;
    height:450px;
    float:left;
    text-align:left;
    border-width:1px;
    border-style:none;
    border-color:transparent;
    color:#317082;
/*      background-color:green; */

}

#divDecide3 {
    width:5%;
    height:450px;
    float:left;
    text-align:left;
    border-width:1px;
    border-style:none;
    border-color:transparent;
    color:#317082;
  /*    background-color:orange; */

}
#divDecideFooter {
    width:100%;
    text-align:center;
    color:#317082;
    font-size:12px;
}

#divRegSideL {
    width:10%;
    height:500px;
    float:left;
    /*    background:blue; */
    border-width:1px;
    border-style:none;
    border-color:transparent;
}
#divRegTopR {
    width:90%;
    height:50px;
    float:left;
    border-width:1px;
    border-style:none;
    border-color:transparent;
    
    
}
#divRegBottomR {
    width:90%;
/*    height:450px; */
    height:650px;
    float:left;
    border-width:1px;
    border-style:none;
    border-color:transparent;
 
}
#divRegSideR {
    width:10%;
    height:450px;
    float:left;
    font-size:14px;
    /*    background:blue; */
    border-width:1px;
    border-style:none;
    border-color:transparent;
 
}
#divRegSideRTop {
    width:100%;
    height:50px;
    float:left;
     font-size:14px;
    /*    background:red; */
    border-width:1px;
    border-style:none;
    border-color:transparent;
   
}
#divRegCenter {
    width:40%;
    height:500px;
    float:left;
     font-size:14px;
    /*    background:red; */
    border-width:1px;
    border-style:none;
    border-color:transparent;
   
}

#divRegCenterTop {
    width:100%;
    height:50px;
    float:left;
     font-size:14px;
    /*    background:red; */
    border-width:1px;
    border-style:none;
    border-color:transparent;
  
}

#el2 {
     width:800px;
    
    margin-left:auto;
    margin-right:auto;
}
#divAvailCenter  {
    height:550px;
    font-size:12px;
    width:475px;
    float:left;
    
}
#divAvailSideL {
    height:550px;
    text-align:left;
    font-size:14px;
    color:black;
    margin-left:2px;
    width:200px;
    float:left;
  
}
#divAvailSideR  {
    height:550px;
    text-align:left;
    font-size:14px;
    color:black;
    margin-left:10px;
    width:75px;
    float:left;
 
}

.help_section {
    text-align:left;
    margin-top:5px;
    margin-left:0px;
    /* color:#317082;*/
}
#calendar_section {
    text-align:left;
    margin-top:20px;
    margin-left:0px;
    color:maroon;

}

#divProfileLeft {
    width:20%;
    height:1000px;
    float:left;
    font-size:12px;
    /*    background:pink; */
    border-width:1px;
    border-style:none;
    border-color:transparent;
}
#divProfileCenter {
    width:60%;
    height:1500px;
    float:left;
    font-size:12px;
  /*  background:green; */
    border-width:1px;
    border-style:none;
  /*  border-color:transparent; */
    border-color:red;
}
#divProfileCenterRight {
    width:50%;
    height:500px;
    float:left;
    font-size:12px;
  /*  background:orange; */
    border-width:1px;
    border-style:none;
    border-color:transparent; 
    border-color:red;
}
#divProfileCenterLeft {
    width:50%;
    height:500px;
    float:left;
    font-size:12px;
   /* background:blue;*/
    border-width:1px;
    border-style:none;
    border-color:transparent; 
    border-color:red;
}
#divProfileRight {
    width:18%;
    height:1000px;
    float:left;
    font-size:12px;
    /*      background:red; */
    border-width:1px;
    border-style:none;
    border-color:transparent;
}
#divRequestHeader {
    width:100%;
    height:175px;
    float:left;
    /*      background:red; */
    border-width:1px;
    border-style:none;
    border-color:transparent;
}
#divRequestLeft {
    width:550px;
    height:250px;
    float:left;
    /*     background:red; */
    border-width:1px;
    border-style:none;
    border-color:transparent;
}
#divRequestRight {
    width:150px;
    height:250px;
    float:left;
    /*       background:green; */
    border-width:1px;
    border-style:none;
    border-color:transparent;
}
#divRequestFooter {
    width:100%;
    height:50px;
    float:left;
    /*       background:orange; */
    border-width:1px;
    border-style:none;
    border-color:transparent;
}

#divValidateHeader {
    width:100%;
    height:50px;
    float:left;
    text-align:center;
    /*       background:red; */
    border-width:1px;
    border-style:none;
    border-color:transparent;
}
#divValidateLeft {
    width:550px;
    height:250px;
    float:left;
    /*      background:blue; */
    border-width:1px;
    border-style:none;
    border-color:transparent;
}
#divValidateRight {
    width:150px;
    height:250px;
    float:left;
    /*       background:green; */
    border-width:1px;
    border-style:none;
    border-color:transparent;
}
#divValidateFooter {
    width:100%;
    height:50px;
    float:left;
    /*       background:orange; */
    border-width:1px;
    border-style:none;
    border-color:transparent;
}
a.help:link { COLOR: #3366FF; font-weight: bold;text-decoration: none;}
a.help:visited { COLOR: #3366FF;  font-weight: bold;text-decoration: none;}
a.help:active { COLOR: #3366FF;font-weight: bold;text-decoration: none;  }
a.help:hover { COLOR: #317082; font-weight: bold;text-decoration: none;}
a.browser:link { COLOR: #E2EBED; font-weight: bold;text-decoration: none;}
a.browser:visited { COLOR: #E2EBED;  font-weight: bold;text-decoration: none;}
a.browser:active { COLOR: #E2EBED;font-weight: bold;text-decoration: none;  }
a.browser:hover { COLOR: red; font-weight: bold;text-decoration: none;}
/*a.resizer{color:#3366FF;font-weight: bold;}*/
a.resizer{color:maroon;font-weight: bold;text-decoration: none;}
a.trigger:link{color:#3366FF;font-weight: bold;text-decoration: none;}
a.trigger:visited { COLOR: #3366FF;  font-weight: bold;text-decoration: none;}
a.trigger:active { COLOR: #3366FF;font-weight: bold;text-decoration: none;  }
a.trigger:hover { COLOR: #317082; font-weight: bold;text-decoration: none;}
a.swcforms:link{color:#3366FF;font-weight: bold;text-decoration: none;}
a.swcforms:visited { COLOR: #3366FF;  font-weight: bold;text-decoration: none;}
a.swcforms:active { COLOR: #3366FF;font-weight: bold;text-decoration: none;  }
a.swcforms:hover { COLOR: #317082; font-weight: bold;text-decoration: none;}


/* The main calendar widget.  DIV containing a table. */

.calendar {
    position: relative;
    display: none;
    border-top: 2px solid #fff;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    border-left: 2px solid #fff;
    font-size: 11px;
    color: #000;
    cursor: default;
    /* background: #c8d0d4; */
    /*  background: #317082; */
    background:#E2EBED;
    font-family: tahoma,verdana,sans-serif;
}

.calendar table {
    border-top: 1px solid #000;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #000;
    font-size: 11px;
    color: #000;
    cursor: default;
    /* background: #c8d0d4; */
    /* background: #317082; */
    background:#E2EBED;
    font-family: tahoma,verdana,sans-serif;
}

/* Header part -- contains navigation buttons and day names. */

.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
    text-align: center;
    padding: 1px;
    border-top: 1px solid #fff;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    border-left: 1px solid #fff;
}

.calendar .nav {
    background: transparent url(menuarrow.gif) no-repeat 100% 100%;
}

.calendar thead .title { /* This holds the current "month, year" */
    font-weight: bold;
    padding: 1px;
    border: 1px solid #000;
    /* background: #788084; */
    background: #317082;
    color: #fff;
    text-align: center;
}

.calendar thead .headrow { /* Row <TR> containing navigation buttons */
}

.calendar thead .daynames { /* Row <TR> containing the day names */
}

.calendar thead .name { /* Cells <TD> containing the day names */
    border-bottom: 1px solid #000;
    padding: 2px;
    text-align: center;
    background: #e8f0f4;
}

.calendar thead .weekend { /* How a weekend day name shows in header */
    /* color: #f00; */
    color: #317082;
}

.calendar thead .hilite { /* How do the buttons in header appear when hover */
    border-top: 2px solid #fff;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    border-left: 2px solid #fff;
    padding: 0px;
    background-color: #d8e0e4;
}

.calendar thead .active { /* Active (pressed) buttons in header */
    padding: 2px 0px 0px 2px;
    border-top: 1px solid #000;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #000;
    background-color: #b8c0c4;
}

/* The body part -- contains all the days in month. */

.calendar tbody .day { /* Cells <TD> containing month days dates */
    width: 2em;
    text-align: right;
    padding: 2px 4px 2px 2px;
}
.calendar tbody .day.othermonth {
    font-size: 80%;
    color: #aaa;

}
.calendar tbody .day.othermonth.oweekend {
    /* color: #faa; */
    color:#aaa;

}

.calendar table .wn {
    padding: 2px 3px 2px 2px;
    border-right: 1px solid #000;
    background: #e8f4f0;
}

.calendar tbody .rowhilite td {
    background: #d8e4e0;
}

.calendar tbody .rowhilite td.wn {
    background: #c8d4d0;
}

.calendar tbody td.hilite { /* Hovered cells <TD> */
    padding: 1px 3px 1px 1px;
    border: 1px solid;
    border-color: #fff #000 #000 #fff;
}

.calendar tbody td.active { /* Active (pressed) cells <TD> */
    padding: 2px 2px 0px 2px;
    border: 1px solid;
    border-color: #000 #fff #fff #000;
}

.calendar tbody td.selected { /* Cell showing selected date */
    font-weight: bold;
    padding: 2px 2px 0px 2px;
    border: 1px solid;
    border-color: #000 #fff #fff #000;
    background: #d8e0e4;
}

.calendar tbody td.weekend { /* Cells showing weekend days */
    /* color: #f00; */
    color:#317082;
}

.calendar tbody td.today { /* Cell showing today date */
    font-weight: bold;
    color: #00f;
}

.calendar tbody .disabled { color: #999; }

.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
    visibility: hidden;
}

.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
    display: none;
}

/* The footer part -- status bar and "Close" button */

.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
}

.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
    background: #e8f0f4;
    padding: 1px;
    border: 1px solid #000;
    /* background: #788084; */
    background: #317082;
    color: #fff;
    text-align: center;
}

.calendar tfoot .hilite { /* Hover style for buttons in footer */
    border-top: 1px solid #fff;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    border-left: 1px solid #fff;
    padding: 1px;
    background: #d8e0e4;
}

.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
    padding: 2px 0px 0px 2px;
    border-top: 1px solid #000;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #000;
}

/* Combo boxes (menus that display months/years for direct selection) */

.calendar .combo {
    position: absolute;
    display: none;
    width: 4em;
    top: 0px;
    left: 0px;
    cursor: default;
    border-top: 1px solid #fff;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    border-left: 1px solid #fff;
    background: #d8e0e4;
    font-size: 90%;
    padding: 1px;
    z-index: 100;
}

.calendar .combo .label,
.calendar .combo .label-IEfix {
    text-align: center;
    padding: 1px;
}

.calendar .combo .label-IEfix {
    width: 4em;
}

.calendar .combo .active {
    background: #c8d0d4;
    padding: 0px;
    border-top: 1px solid #000;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #000;
}

.calendar .combo .hilite {
    background: #048;
    color: #aef;
}

.calendar td.time {
    border-top: 1px solid #000;
    padding: 1px 0px;
    text-align: center;
    background-color: #e8f0f4;
}

.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
    padding: 0px 3px 0px 4px;
    border: 1px solid #889;
    font-weight: bold;
    background-color: #fff;
}

.calendar td.time .ampm {
    text-align: center;
}

.calendar td.time .colon {
    padding: 0px 2px 0px 3px;
    font-weight: bold;
}

.calendar td.time span.hilite {
    border-color: #000;
    background-color: #667;
    color: #fff;
}

.calendar td.time span.active {
    border-color: #f00;
    background-color: #000;
    color: #0f0;
}




div.bothscroller {
    height: 400px;
 /*   width: 500px; */
    width: 450px;
    margin-left: 20px;
    margin-top: 20px;
    /*	border: 1px solid #ddd; */
  /*  border: 1px solid #317082; */
     border: 1px solid black;
}
div.bothscroller .content {
    height: 390px; 
 /*   width: 490px; */
    width: 440px;
    overflow: hidden;
    float: left;
}
div.bothscroller .content ol {
    margin-left: 30px;
} 
div.bothscroller .content p {
    margin-left: 10px;
    width: 1700px;
}
div.bothscroller .wscrollarea {
    clear:both;
    height: 9px;
 /*   width: 490px; */
    width: 440px;
    /*	border-top: 1px solid #ddd; */
    /*   border-top: 1px solid #317082; */
    border-top: 1px solid black; 
    cursor: pointer;
}
div.bothscroller .wscrollarea div.scrollBarContainer {
  /*  width: 470px; */
    width: 410px;
    margin-right: 2px;
    height: 7px;
    float: left;
}
div.bothscroller .wscrollarea .scrollKnob {
    height: 5px;
    margin: 1px;
    border: 1px solid #999;
    background: #ccc;
    min-width: 10px;
}
div.bothscroller .wscrollarea .scrollForward, div.bothscroller .wscrollarea .scrollBack {
    float: left;
    height: 5px;
    margin: 1px;
    border: 1px solid #999;
    background: #ccc;
    width: 5px;
}

div.bothscroller .vscrollarea {
    height: 390px;
    width: 9px;
    float: left;
    /*	border-left: 1px solid #ddd; */
    /*   border-left: 1px solid #317082; */
    border-left: 1px solid black; 
    cursor: pointer;
}
div.bothscroller .vscrollarea div.scrollBarContainer {
    height: 370px;
}
div.bothscroller .vscrollarea .scrollKnob {
    width: 5px;
    margin: 1px;
    border: 1px solid #999;
    background: #ccc;
    min-height: 10px;
}
div.bothscroller .vscrollarea .scrollForward, div.bothscroller .vscrollarea .scrollBack {
    width: 5px;
    margin: 1px;
    border: 1px solid #999;
    background: #ccc;
    height: 5px;
}