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

.spinner {
	position: absolute;
	opacity: 0.9;
	filter: alpha(opacity=90);
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
	z-index: 999;
	background: #fff;
}
.spinner-msg {
	text-align: center;
	font-weight: bold;
}

.spinner-img {
	background: url(images/spinner.gif) no-repeat;
	width: 24px;
	height: 24px;
	margin: 0 auto;
}

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



#vertical_slide {
    width: 100%;
    padding: 10px;
    color: #FFFAFA;
    background-color:#004080;
    font-weight:bold;
}

#vertical_slide .loginContent {
    width: 550px;
    height: 80px;
    margin: 0 auto;
    padding-top: 25px;
    text-align: left;
    font-size: 0.85em;
}
#vertical_slide .loginContent form {
    margin: 0 0 5px 0;
    height: 26px;
}

#vertical_slide .loginContent input.field {
    border: 1px #1A1A1A solid;
    background: #FFFAFA;
    margin-right: 10px;
    margin-top: 4px;
    color: white;
    height: 16px;
}

#vertical_slide .loginContent input:focus.field {
    background: #545454;
}

#vertical_slide .loginContent input.rememberme {
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
}

#vertical_slide .loginContent input.button_login {
    width: 47px;
    height: 20px;
    cursor: pointer;
    border: none;
    background: transparent url(images/button_login.jpg) no-repeat 0 0;
}

#vertical_slide .loginClose {
    display: block;
    position: relative;
    left: 700px;
    top: 2px;
    width: 80px;
    font-size: 0.8em;
    text-align: left;
   
}
#vertical_slide   .loginClose a {
    display: block;
    width: 100%;
    height: 20px;
    /*	background: url(images/button_close.jpg) no-repeat right 0; */
   /* padding-right: 20px;*/
    border: none;
    font-size: 0.9em;
    color: white;
}


#vertical_slide  .loginClose a:hover {
    /*	background: url(images/button_close.jpg) no-repeat right -20px; */
}


#top {
    /*	background: url(images/login_top.jpg) repeat-x 0 0; */
   height: 20px;
   position: relative;
   /*left:100px;*/
   left:10px;
   margin-bottom: 10px;
}

#top ul.login {
    display: block;
    position: relative;
    float: right;
    clear: right;
    height: 20px;
    width: auto;
    font-weight: bold;
    line-height: 38px;
    margin: 0;
  /*  right: 150px; */
    /*right: 100px;*/
    right: 10px;
    /* 	color: white; */
    color:#3366FF;
    font-size: 80%;
    text-align: center;
    /*	background: url(images/login_r.jpg) no-repeat right 0; */
 /*   padding-right: 45px; */
    /*padding-right: 20px;*/
    padding-right: 5px;
}

#top ul.login li.left {
    /* 	background: url(images/login_l.jpg) no-repeat left 0; */
    height: 20px;
    /* width:45px; */
    width: 10px;
    padding: 0;
    margin: 0;
    display: block;
    float: left;
}

#top ul.login li {
    text-align: left;
   /* padding: 0 6px; */
    padding: 0 3px;
    display: block;
    float: left;
    height: 20px;
    /*	background: url(images/login_m.jpg) repeat-x 0 0; */
}

#top ul.login li a {
    color:#3366FF;
    font-weight:bold;
    text-decoration:none;
}
#paymybill a {
    color:#3366FF;
    font-weight:normal;
    text-decoration:none;
    margin-left:25px;
}
#paymybill a:hover {
    color: #004080;
}
#top ul.login li a:hover {
   /* color: #317082; */
    color: #004080;
}

#accordion {
    margin:20px 0px;
}

h3.toggler{	/* Styling question */
    /* Start layout CSS */
    font-size:0.9em;
    width:95%;
    background: #6374AB; ;
    color:#D3D3D3;
    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: #6374AB; ;
    /* color:#FFFFCC; */
    color:#D3D3D3;
    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.bottomLine1{	/* Styling question */
    /* Start layout CSS */
    font-size:0.9em;
    width:95%;
    background:#D3D3D3;
    /* color:#FFFFCC; */
    color:#6374AB;
    margin-bottom:2px;
    margin-top:2px;
    padding-left:20px;
    padding-right:20px;
    background-repeat:no-repeat;
    background-position:top right;
    height:500px;

    /* 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;
    color:black;
}
div.element input {
    background-color:#D3D3D3;
}
.table-tr-selected{
    font-size:14px;
    color:maroon;
}
.table-tr-hovered{
     font-size:16px;
    color:blue;
}
.tableRowClass {
    color:red;
}
 #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 */
}


#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 #004080;
}
.validation-advice {
    margin: 2px;
    padding: 2px;
    color:#fff;
   background-color:#004080;

}
.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:#004080; */

}
#summary thead th {
    text-align: left;
    font-size:12px;
    color:#004080;
    /*  border-style:solid;
    border-width:1px;
    border-color:#004080; */
}
#summary tbody td.tlabel{
    text-align: left;
    font-size:12px;
    color:#004080;
    font-weight:bold;
    text-align:center;
    /*    border-style:solid;
    border-width:1px;
    border-color:#004080; */
}
#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:#004080;*/
}

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

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


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

}
#divDecide2 input {
    width:50px;

}
#divaddNewUser p {
    color:#004080;
}
#divDecide3 {
    width:5%;
    height:600px;
    float:left;
    text-align:left;
    border-width:1px;
    border-style:none;
    border-color:transparent;
  /*  color:#004080; */
  /*    background-color:orange; */

}
#divDecideFooter {
    width:100%;
    text-align:center;
   /*  color:#004080; */
    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:525px;
    font-size:12px;
    width:475px;
    float:left;

}


#divAvailSideL {
    height:525px;
    text-align:left;
    font-size:14px;
 /*   color:black; */
    margin-left:2px;
    width:200px;
    float:left;

}
#divAvailSideR  {
    height:525px;
    text-align:left;
    font-size:14px;
  /*   color:black; */
    margin-left:10px;
    width:75px;
    float:left;

}
#divAvailSideR input {
    background-color:white;
    }

#divAvailFooter {
    height:200px;
    float:left;
}
.help_section {
    text-align:left;
    margin-top:5px;
    margin-left:0px;
    /* color:#004080;*/
}
#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:50px;
    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.decidelink:link { COLOR: #004080; font-weight: normal;text-decoration: none;}
a.decidelink:visited { COLOR: #004080;  font-weight: normal;text-decoration: none;}
a.decidelink:active { COLOR: #004080;font-weight: normal;text-decoration: none;  }
a.decidelink:hover { COLOR: #3366FF; font-weight: normal;text-decoration: none;}
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: #004080; font-weight: bold;text-decoration: none;}
a.browser:link { COLOR: #E9E9EC; font-weight: bold;text-decoration: none;}
a.browser:visited { COLOR: #E9E9EC;  font-weight: bold;text-decoration: none;}
a.browser:active { COLOR: #E9E9EC;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: #004080; 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: #004080; 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: #004080; */
    background:#D3D3D3;
    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: #004080; */
    background:#D3D3D3;
    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: #004080;
    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: #004080;
}

.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:#004080;
}

.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: #004080;
    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: 500px;
 /*   width: 500px; */
    width: 450px;
    margin-left: 20px;
    margin-top: 20px;
    /*	border: 1px solid #ddd; */
  /*  border: 1px solid #004080; */
     border: 1px solid black;
}
div.bothscroller .content {
    height: 490px;
 /*   width: 490px; */
    width: 440px;
    overflow: hidden;
    float: left;
}
div.bothscroller .content ol {
    margin-left: 30px;
}
div.bothscroller .content p {
    margin-left: 10px;
    width: 1700px;
}