/* Use a master stylesheet to reset the browser default styles */
@import url("master.css");

/* Use this stylesheet for debug styles */
@import url("debug.css");


/*  ***Color Constants***
   Dark Blue (background): #1A3F86;
   Light Blue (buttons, tabs, links): #5786DF;
   Red (stop): #D02B28;
   Green (start): #31861A;
   White (text): #FEFCF8;
   Gray (background): #E5E5E5;
   Gray (accent): #EFEFEF;
   Blue Gray (accent): #ECF3FC;

   Background Gray: #E5E5E5;
   Header Gray: #DAD9D9;
   Highlight Gray: #F5F5F5;

   Background Blue (footer): #07255E;
   Header Blue: E0EAFD;
   Highlight Blue (inline forms): #ADD6FF;
   Light Blue (zebra table): #ECF2FE;
   Accent Blue: #D5DFF3;


*/


/* -----------------------------------*/
/* ---------->>> GLOBAL <<<-----------*/
/* -----------------------------------*/

html,body
{
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

html
{
    overflow: auto;
}


body
{
    font: 68.75% Tahoma, Arial, Helvetica, sans-serif;
    color: black;
}

#pageWrapper
{
    background-color: #E5E5E5;
    width: 100%;
    min-height: 100%;
    position: relative;
}

* html #pageWrapper {height: 100%;} /* for IE/Win */


a, a:link, a:visited {
    color: #006298;
    text-decoration: none;
    }
a:hover, a:active { color: #6cf; }

input, select, textarea { font: 1em Tahoma, Arial, Helvetica, sans-serif; }

.pipe
{
    color: #5786DF;
}

ul.bullets li
{
    list-style-type: circle
}

.bold
{
    font-weight: bolder;
}

div.clearer
{
    clear: left;
    line-height: 0;
    height: 0;
}

.size-larger
{
    font-size: larger;
}

/* ---------------------------------------*/
/* ---------->>> COMPONENTS <<<-----------*/
/* ---------------------------------------*/

/* ---------- Button -----------------*/
/* CSS style to support a sliding-door button.   */
.button
{
    padding: 0px;
}


.button
{
    margin: 10px 0px;
}

.right
{
    text-align: right;
}

/* right now the button is created like this:
 *  	<div class="button"> <a = ""><span>Button Text</span></a> </div>
 *
 *  if we ever need to support horizontally floating buttons <button1>  <button2>  <button3>
 *  	we probably should do somthing like this:
 *  	<div class="clear">
 *  		<a="" class="button"><span>Button Text</span></a>
 *  		<a="" class="button"><span>Button 2 Text</span></a>
 *  	</div
 */
.button { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}

.button a{
    background: transparent url(../../img/button-a.png) no-repeat scroll top right;
    color: #fff;
    font-weight: bolder;
    white-space:nowrap;
    display: block;
    float: left;
    line-height: 15px;
    padding-right: 9px; /* sliding doors padding */
    text-decoration: none;
}

.button span {
    background: transparent url(../../img/button-span.png) no-repeat;
    display: block;
    line-height: 15px;
    padding: 2px 0 2px 9px;
}

.button a:hover {
    background-position: bottom right;
    outline: none; /* hide dotted outline in Firefox */
}

.button a:hover span {
    background-position: bottom left;
    /*padding: 6px 0 4px 18px;  push text down 1px */
}

/* Use this class if we need the buttons displayed in a horizontal line */
.horizontal
{
    display: inline;
}

.horizontal a
{
    margin-right: 30px;
}

.buttonClear
{
    clear:both;
    margin-bottom: 15px;   
}


/* IE6 hack to fix padding bug  -- doesn't appear as if we need this with the
 * current method.  */
/* * html .button a {padding:0px 0px 0px 8px;}

/* ------------- Drop Shadow styling ------------- */
.img-shadow
{
    float:left;
    background: url(../../img/shadowAlpha.png) no-repeat bottom right;/* !important;*/
    /*behavior: url(/static_media/includes/css/iepngfix.htc?version=5);*/
    /*background: url("../../img/shadow.gif") no-repeat bottom right;*/
    margin: 10px 0 0 10px !important;
    margin: 10px 0 0 5px;
}

.img-shadow img
{
    display: block;
    position: relative;
    background-color: #fff;
    border: 1px solid #a9a9a9;
    margin: -6px 6px 6px -6px;
    padding: 4px;
}

/* ------------- Pipe styling ------------- */
.pipe
{
    color: #48659E;
}

/* ------------- Rounded Corners ------------- */
.cornerTL, .cornerTR, .cornerBL, .cornerBR
{
    background: url(../../img/corners.gif) 0 0 no-repeat;
    height: 13px;
    width: 13px;
    position:absolute;
}

.cornerTL
{
    left: -3px;
    top: -3px;
}

.cornerTR
{
    background-position: -13px 0;
    right: -3px;
    top: -3px;
}

.cornerBL
{
    background-position: -52px -13px;
    left: -3px;
    bottom: -3px;
}

.cornerBR
{
    background-position: -65px -13px;
    right: -3px;
    bottom: -3px;
}

.selected .cornerTL, .selected_bottombase .cornerTL
{
    background-position: -26px 0;
}

.selected .cornerTR, .selected_bottombase .cornerTR
{
    background-position: -39px 0;
}

.selected_bottombase .cornerBL
{
    background-position: -26px -13px;
}

.selected_bottombase .cornerBR
{
    background-position: -39px -13px;
}


/* ------------- Updating Icon ------------- */
.updatingIcon
{
    background: url(../../img/updating.gif);
    height: 16px;
    width: 16px;
}

.selected .updatingIcon
{
    background: url(../../img/updating-blue.gif);
}


/* ------------- Standard Forms ------------- */
.formError
{
    color: red;
    white-space: nowrap;
}

form .error
{
    color: red;
}

.standardForm .formLabel
{
    font-weight: 700;
    width: 100px;
}

.standardForm .formText
{
    font-weight: 700;
}

.standardForm .formField
{
    text-align: left;
    width: 100px;
}

.standardForm .formHelp
{
    text-align: left;
    width: 100px;
}

.standardForm .formError
{
    color: red;
    text-align: left;
    white-space: nowrap;
    width: 100%;
}

.standardForm input {
    /*border: 1px solid #999;*/
    padding: 3px;
    margin-bottom: 4px;
}

.standardForm input:focus {
    border: 1px solid #000;
}

/* Standard form dojo widget styles */
.tundra .standardForm .dijitInputContainer input, .tundra .standardForm .dijitTextBox {
    padding-left: 3px;
}

/* ------------- Flash Message ------------- */
#flashMessage
{
    background-color: #FFFF88;
    border: solid 3px white;
    color: black;
    float: left;
    position: absolute;
    right: 50%;
    top: 0%;
    margin: 0px;
    padding: 10px;
}

#flashMessage.error
{
    background-color: #CC6600;
}

#flashMessage.warn
{
    color: white;
    background-color: #1A3F86;
}

#flashMessage a, #flashMessage a:link, #flashMessage a:visited {
    color: #87AAF3;
    text-decoration: none;
    }
#flashMessage a:hover, #flashMessage a:active { color: #C6D7F9; }

.poolTitle #flashMessage
{
    right: 0%;
    border-top: none;
    margin-right: 20px;
}

/* ------------- News Ticker ------------- */
.newsticker {
    list-style-type: none;
    background: #E5E5E5;
}
#newsTicker {
    font-size: 1.2em;
    clear: both;
}

#newsTicker .title{
    font-weight: bolder;
    margin-right: 6px;
    float: left;
}

/* -----------------------------------*/
/* ---------->>> HEADER <<<-----------*/
/* -----------------------------------*/

#topBar a, #topBar a:link, #topBar a:visited {
    color: #87AAF3;
    text-decoration: none;
    }
#topBar a:hover, #topBar a:active { color: #C6D7F9; }

div#topBar
{
    height: 121px;
    background: url(../../img/header-background.gif) #1A3F86 repeat-x;
    color: #FEFCF8;
    position: relative;
    left: 0px;
    top: 0px;
}

ul#accountBar
{
    float: left;
    position: absolute;
    right: 0%;
    bottom: 0%;
    margin: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 30px;
}

ul#accountBar li
{
    float: left;
    padding: 0px 5px;
}

div#modeMessage
{
    color: red;
    float: left;
    position: absolute;
    right: 0%;
    top: 0%;
    margin: 0px;
    padding: 10px;
}


/* ---------------------------------------*/
/* ---------->>> NAVIGATION <<<-----------*/
/* ---------------------------------------*/
#mainNavigation a, #mainNavigation a:link, #mainNavigation a:visited,
#topBar a:hover, #topBar a:active
{
    color: #FEFCF8;
}

#mainNavigation
{
    bottom: 0px;
    clear: both;
    float: left;
    left: 60px;
    line-height: normal;
    margin: 0px;
    padding: 0px;
    position: absolute;
}

* html #mainNavigation {bottom: -1px} /* for IE/Win */

#mainNavigation ul
{
    float: left;
    left: 50px;
    list-style: none;
    margin: 0;
    padding:10px 10px 0;
}

#mainNavigation li
{
    background: url(../../img/nav-tabs-center.png) 0 0 #5786E2 repeat-x;
    float: left;
    margin: 0px 1px;
    padding:0 0 0 9px;
}

#mainNavigation a
{
    background: url(../../img/nav-tabs-center.png) 0 0 #5786E2 repeat-x;
    color: #5786DF;
    display: block;
    font-weight: bold;
    font-size: 1.2em;
    padding:5px 15px 4px 6px;
    width:.1em;
    white-space:nowrap;
}


#mainNavigation > ul a {width:auto;}

#mainNavigation li.current
{
    background-position: 0 -54px;
}

#mainNavigation li.current a
{
    background-position: 0 -54px;
    color: #1A3F86;
    padding-bottom:5px;
}

#mainNavigation li.hover
{
    background-position: 0 -27px;
}

#mainNavigation li.hover a
{
    color: #FFF;
    background-position: 0 -27px;
}


/* These are needed for the right endcap rounded corner */
li#right-end
{
    background: url(../../img/nav-tabs-right.png) 0 0 no-repeat;
    height: 25px;
    width: 15px;
    margin: 0px;
    padding: 0px;
}

body.Firefox.Mac li#right-end
{
    height: 26px;
}

#mainNavigation .current-right-end
{
    background-position: 0 -54px;
    height: 26px;
}

body.Firefox.Mac #mainNavigation .current-right-end
{
    height: 27px;
}

#mainNavigation .right-end-hover
{
    background-position: 0 -27px;
}

#mainNavigation li.right
{
    margin-right: 0px;
    padding-right: 0px;
}

#mainNavigation li.right a
{
    padding-right: 0px;
}


/* These are needed for the left endcap rounded corner */
li#left-end
{
    background: url(../../img/nav-tabs-left.png) 0 0 no-repeat;
    height: 25px;
    width: 15px;
    margin: 0px;
    padding: 0px;
}

body.Firefox.Mac li#left-end
{
    height: 26px;
}

#mainNavigation .current-left-end
{
    background-position: 0 -54px;
    height: 26px;
}

body.Firefox.Mac #mainNavigation .current-left-end
{
    height: 27px;
}

#mainNavigation .left-end-hover
{
    background-position: 0 -27px;
}

#mainNavigation li.left
{
    margin-left: 0px;
    padding-left: 0px;
}

#mainNavigation li.left a
{
    padding-left: 0px;
}

/* IE6 can't handle transparent pngs...so just use a gif with background. */
* html #mainNavigation li, #mainNavigation a { background: url(../../img/nav-tabs-center.gif) 0 0 #5786E2 repeat-x; }
* html li#left-end {background: url(../../img/nav-tabs-left.gif) 0 0 no-repeat;} /* for IE/Win */
* html li#right-end {background: url(../../img/nav-tabs-right.gif) 0 0 no-repeat;} /* for IE/Win */


/* ----------- VERTICAL MENU ----------------
 */

#verticalMenu a, #verticalMenu a:link, #verticalMenu a:visited,
#verticalMenu a:hover, #verticalMenu a:active
{
    color: #FEFCF8;
}

#verticalMenu
{
    bottom: 0px;
    clear: both;
    line-height: normal;
    margin: 0px;
    padding: 0px;
}

#verticalMenu ul
{
    list-style: none;
    margin: 0;
    padding: 20px 0px 20px 20px;
}

#verticalMenu li
{
    background: url(../../img/nav-tabs-center.png) 0 0 #5786E2 repeat-x;
    margin: 0px 11px;
    padding:0 0 0 9px;
    border-left: 2px solid white;
}

#verticalMenu a
{
    background: url(../../img/nav-tabs-center.png) 0 0 #5786E2 repeat-x;
    color: #5786DF;
    display: block;
    font-weight: bold;
    font-size: 1.2em;
    padding:5px 15px 4px 6px;
    width:220px;
    white-space:nowrap;
}

#verticalMenu li.current
{
    margin-right: 0px;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    background: none;
    background-color: #DAD9D9

}

#verticalMenu li.top
{
    border-top: 2px solid white;
}

#verticalMenu li.bottom
{
    border-bottom: 2px solid white;
}

#verticalMenu li.hover
{
    background-position: 0 -27px;
}

#verticalMenu li.hover a
{
    color: #FFF;
    background-position: 0 -27px;
}

#verticalMenu li.current a
{
    color: #1A3F86;
    background: none;
    background-color: #DAD9D9   
}



/* -----------------------------------------*/
/* ---------->>> CONTENT AREA <<<-----------*/
/* -----------------------------------------*/

div#contentArea
{
    background-color: #E5E5E5;
    clear: both;
    padding-top: 20px;
    padding-bottom: 60px;  /* height of the footer */
    width: 100%;
    min-height: 450px;
}

* html #contentArea {height: 100%;} /* for IE/Win */

/* -----------------------------------*/
/* ---------->>> FOOTER <<<-----------*/
/* -----------------------------------*/

#footer a, #footer a:link, #footer a:visited {
    color: #87AAF3;
    text-decoration: none;
    }
#footer a:hover, #footer a:active { color: #C6D7F9; }


div#footer
{
    background-color: #1A3F86;
    bottom: 0%;
    clear: both;
    color: #FEFCF8;
    font-size: .8em;
    height: 60px;
    width: 100%;
    position: absolute;
}

ul#footerBar
{
    height: 12px;
    overflow: hidden;
    margin-top: 25px;
}


ul#footerBar li
{
    float: left;
    padding: 0px 5px;
    line-height: 12px;
    vertical-align: middle;
}



/* -----------------------------------------*/
/* ---------->>> SIMPLE PANE <<<------------*/
/* -----------------------------------------*/

div#simplePane
{
    padding-bottom: 50px;
}

div#simplePaneContainer
{
    background-color: #FFFFFF;
    border: solid 3px #FFFFFF;
    position: relative;
    min-height: 1%;     /* for IE7 */
    margin: 50px auto;
    display: block;
    width: 800px;
    text-align: left;
}

#simplePaneTitle
{
    background-color: #E0EAFD;
    color: #CC6600;
    font-size: 1.7em;
    font-weight: bold;
    height: 40px;
    padding: 10px 5px 5px 5px;
    text-align: center;
}

#simplePaneContent
{
    background-color: #DAD9D9;
    color: #333;
    padding: 20px;
}

#simplePaneContainer .cornerTL
{
    background-position: -26px 0;
}

#simplePaneContainer .cornerTR
{
    background-position: -39px 0;
}

#simplePaneContainer .cornerBL
{
    background-position: 0 -13px;
}

#simplePaneContainer .cornerBR
{
    background-position: -13px -13px;
}

#simplePaneContainer p
{
    padding: 0px 0px 10px;
}

#simplePaneContainer h2, #simplePaneContainer b
{
    color: #1A3F86;
}

#simplePaneContainer ol
{
    list-style-image: url(../../img/bullet.gif);
    margin-left: 10px;
    padding: 0px;
}

#simplePaneContainer li
{
    margin: 2px 15px;
    border:none;
    padding: 0px;
}

/* Specific pane styling */
div#simplePane .standard
{
    width: 800px;
}

div#simplePane .narrow
{
    width: 300px;
}



/* ---------------------------------------------*/
/* ---------->>> SPLIT PANE <<<-----------------*/
/* ---------------------------------------------*/

#splitPane
{
    margin: 0px auto;
    display: block;
    width: 1000px;
 }
 
 #splitPaneTitle
 {
    background-color: #E0EAFD;
    color: #CC6600;
    font-size: 1.7em;
    font-weight: bold;
    height: 40px;
    padding: 10px 5px 5px 5px;
    text-align: center;
 }
 
#splitPane .cornerTL
{
    background-position: -26px 0;
}

#splitPane .cornerTR
{
    background-position: -39px 0;
}
    
#splitPane .cornerBL
{
    background-position: -78px -13px;
}

.leftPane
{
    background: url(../../img/gradient.gif) top right repeat-y #E5E5E5;
    /*font-size: 1.2em;*/
    width: 300px;
    padding: 0px;
}

.leftPane .textBlock
{
    padding: 20px 30px;
}

.leftPane p
{
    margin: 10px 0px;
}

.leftPane h3
{
    color:#05255E;
    font-size:1.4em;
    font-weight: bold;
    margin-bottom: 20px;
}

.leftPane h4
{
    font-size:1.2em;
    font-weight: bold;
}

.leftPane ol
{
    list-style-image: url(../../img/bullet.gif);
    margin-left: 10px;
    padding: 0px;
}

.leftPane li
{
    margin: 10px 15px;
    border:none;
    padding: 0px;
}

.rightPage h4
{
    margin: 15px 0px;
}

.tableContainer
{
    margin-bottom: 15px;
}


.planTable th
{
    border-left: solid 1px #FFFFFF;
    color: #333333;
    padding: 8px;
    text-align: center;
}

.planTable td
{
    border-left: solid 1px #DCD8D9;
    color: #333333;
    padding-left: 10px;
    text-align: center;
}

#currentPlan
{
    margin: 20px auto;
    padding: 5px 10px;
    background-color: #F5F5F5;
    border: 1px solid black;
    width: 200px;
}



/* -----------------------------------------------*/
/* ---------->>> SIDEBAR PANE <<<-----------------*/
/* -----------------------------------------------*/

/* -- Corners of container --*/
.sidebarContainer .cornerTL
{
    background-position: -26px 0px;
}

.sidebarContainer .cornerTR
{
    background-position: -39px 0px;
}

.sidebarContainer .cornerBL
{
    background-position: -26px -13px;
}

.sidebarContainer .cornerBR
{
    background-position: -39px -13px;
}

.leftSidebar
{
    padding: 50px 0px 10px 30px;
    width: 300px;
    /*background: url(../../img/sidebar-gradient.jpg)  #E0EAFD 0% 0% no-repeat;*/
    background-color: #E0EAFD;
    vertical-align:top;
}

.leftSidebar ol
{
    border-bottom: solid 1px #fff;
}

.leftSidebar ul
{
    list-style-image: none;
    margin: 0px;
    padding: 0px;
    font-size: 1.1em;
}

.leftSidebar li
{
    position: relative;
    border-bottom: solid 2px white;
    background-color: #5786DF;
    /*margin: 10px 5px;*/
    padding: 7px;
    font-weight: bold;
}

.leftSidebar .spacer
{
    border-bottom: solid 1px white;
    margin-bottom:5px;
    padding-top:10px;
}

.leftSidebar li.current
{
    background-color: #DAD9D9;
}

.leftSidebar li a
{
    color: #FEFCF8;
    padding-left: 10px;
}

.leftSidebar li.current a, li:hover a
{
    color: #1A3F86;
}

.leftSidebar li:hover
{
    background-color: #C6D7F9;
}

.leftSidebar .last
{
    border-bottom: none;
}

/* Rounded Corners */
.leftSidebar div.corner, .leftSidebar div.cornerR
{
    width: 15px;
    height: 15px;
    position: absolute;
}

.leftSidebar li.first div.corner
{
    background: url(../../img/menu-corners.gif) #5786DF 0px 0px no-repeat;
    left: 0px;
    top: 0px;
}

.leftSidebar li.current.first div.corner
{
    background: url(../../img/menu-corners.gif) #DAD9D9 -60px 0px no-repeat;
}

.leftSidebar li.first:hover div.corner
{
    background: url(../../img/menu-corners.gif) #C6D7F9 -30px 0px no-repeat;
}

.leftSidebar li.last div.corner
{
    background: url(../../img/menu-corners.gif) #5786DF 0px -15px no-repeat;
    left: 0px;
    bottom: 0px;
}

.leftSidebar li.last.current div.corner
{
    background: url(../../img/menu-corners.gif) #DAD9D9 -60px -15px no-repeat;
}

.leftSidebar li.last:hover div.corner
{
    background: url(../../img/menu-corners.gif) #C6D7F9 -30px -15px no-repeat;
}


/* Right-side corners */
.leftSidebar li.first div.cornerR
{
    background: url(../../img/menu-corners.gif) #5786DF -15px 0px no-repeat;
    right: 0px;
    top: 0px;
}

.leftSidebar li.current.first div.cornerR
{
    background: url(../../img/menu-corners.gif) #DAD9D9 -75px 0px no-repeat;
}

.leftSidebar li.first:hover div.cornerR
{
    background: url(../../img/menu-corners.gif) #C6D7F9 -45px 0px no-repeat;
}

.leftSidebar li.last div.cornerR
{
    background: url(../../img/menu-corners.gif) #5786DF -15px -15px no-repeat;
    right: 0px;
    bottom: 0px;
}

.leftSidebar li.last.current div.cornerR
{
    background: url(../../img/menu-corners.gif) #DAD9D9 -75px -15px no-repeat;
}

.leftSidebar li.last:hover div.cornerR
{
    background: url(../../img/menu-corners.gif) #C6D7F9 -45px -15px no-repeat;
}

/* Don't use rounded corners in IE6 since they look bad. */
body.Explorer.v6 .leftSidebar li div.corner { background: none; }
body.Explorer.v6 .leftSidebar li div.cornerR { background: none; }


.rightPane
{
    background-color: #E0EAFD;
    /*background: url(../../img/gradient.gif) top left repeat-y #DAD9D9;*/
    padding: 10px 30px;
    vertical-align: top;
}

.rightPane p
{
    padding: 10px 0 10px 0px;
    font-size: 1.1em;
}

.rightPane .even
{
    background-color:#DAD9D9;
}



.rightPane ul
{
    list-style-image: url(../../img/bullet.gif);
    margin-left: 20px;
    padding: 0px;
}


.sidebarContainer h1
{
    border-bottom: solid 1px white;
    color: #05255e;
    font-size: 2.5em;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.sidebarContainer h2
{
    color: #05255e;
    font-size: 1.8em;
    text-align: left;
    padding: 3px 0 0 0;
    margin: 0 0 0 0;
}


#sidebarContact
{
    background-color: #DAD9D9;
    padding: 10px;
    margin: 40px;
    font-size: 1.2em;
    text-align: center;
}

#sidebarContact b
{
    font-size: 1.6em;
    font-weight: bold;
}

#sidebarContact
{
    position:relative;
}

#sidebarContact .cornerTL,
#sidebarContact .cornerTR,
#sidebarContact .cornerBL,
#sidebarContact .cornerBR
{
    height: 15px;
    width: 15px;
    position:absolute;
}

#sidebarContact .cornerTL
{
    background: url(../../img/menu-corners.gif) -60px 0px no-repeat;
    left: 0px;
    top: 0px;
}

#sidebarContact .cornerBL
{
    background: url(../../img/menu-corners.gif) -60px -15px no-repeat;
    left: 0px;
    bottom: 0px;
}

#sidebarContact .cornerTR
{
    background: url(../../img/menu-corners.gif) -75px 0px no-repeat;
    right: 0px;
    top: 0px;
}

#sidebarContact .cornerBR
{
    background: url(../../img/menu-corners.gif) -75px -15px no-repeat;
    right: 0px;
    bottom: 0px;
}

/* Don't use rounded corners in IE6 since they look bad. */
body.Explorer.v6 #sidebarContact .cornerTL { background: none; }
body.Explorer.v6 #sidebarContact .cornerTR { background: none; }
body.Explorer.v6 #sidebarContact .cornerBL { background: none; }
body.Explorer.v6 #sidebarContact .cornerBR { background: none; }




/* -----------------------------------------*/
/* ---------->>> LOGIN FORMS <<<------------*/
/* -----------------------------------------*/


div#simplePane .formRow label
{
    display: inline;
    font-weight: 700;
    margin-bottom: 8px;
    margin-right: 4px;
}

div#simplePane .formRow .text
{
    background-color: #fff;
    border: 1px solid #999;
    display: inline;
    margin-bottom: 4px;
    padding: 3px;
    width: 90%;
}


div#simplePane .forgot {
    font-weight: 900;
}

.error_message, .error_heading
{
    color: red;
}

#loginButton .login
{
    margin-right: 4px;
    margin-bottom: 20px;
    text-align: left;
    display: block;
    font-weight: 700;
    font-size: 1.2em;
}



/* -----------------------------------*/
/* ---------->>> INTRO <<<------------*/
/* -----------------------------------*/

#splashContainer
{
    padding: 10px 30px;
    width: 800px;
    position: relative;
    min-height: 1%;     /* for IE7 */
    margin: 10px auto;
    display: block;
}

#splashContainer h2
{
    border-bottom: solid 1px #CCC;
    color: #05255e;
    font-size: 2.5em;
    text-align: center;
    text-transform: uppercase;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

#splashContainer .splash-header,#splashContainer .splash-header2
{
    border-bottom: solid 1px #CCC;
    height: 42px;
    width: 789px;
    background: url(../../img/splash-header.gif) top center no-repeat;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

#splashContainer .splash-header2
{
    background: url(../../img/splash-header3.gif) top center no-repeat;
}


#splashContainer h2 img
{
    margin-left: 30px;
}

#splashContainer h2 b
{
    color: #93B9FF;
}

#splashContainer a
{
    font-weight: bold;
    font-size: 1.0em;
}

#splashContainer #gridPic
{
    background: url(../../img/grid.jpg) top center no-repeat;
    margin-left: 180px;
    height: 243px;
    width: 442px;
}


/* -------------------------------------*/
/* ---------->>> WELCOME <<<------------*/
/* -------------------------------------*/


.pageContainer .cornerTL
{
    background-position: -52px 0;
}

.pageContainer .cornerBR
{
    background-position: -13px -13px;
}

.pageContainer #gridPic
{
    background: url(../../img/grid.jpg) top center no-repeat;
    margin-left: 30px;
    height: 243px;
    width: 442px;
}

.textArea
{
    color: #333;
    padding: 20px 70px 30px 70px;
}

.textArea .indent
{
    padding-left: 15px;
    padding-top: 5px;
}

.pageContainer, .sidebarContainer
{
    background-color: #FFFFFF;
    border: solid 3px #FFFFFF;
    position: relative;
    min-height: 1%;     /* for IE7 */
    width: 100%;
}

.leftPage
{
    padding: 10px 30px;
    width: 500px;
}

.rightPage
{
    /*background: url(../../img/gradient.gif) top left repeat-y #DAD9D9;*/
    background-color: #DAD9D9;
    padding: 10px 30px;
}


.pageContainer h2
{
    border-bottom: solid 1px #CCC;
    color: #05255e;
    font-size: 2.5em;
    text-align: center;
    text-transform: uppercase;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.pageContainer h2 b, .sidebarContainer h2 b
{
    color: #3F78C9;
}

.pageContainer table, .pageContainer tbody, .sidebarContainer table, .sidebarContainer tbody
{
    padding: 0px;
    margin: 0px;
    width: 100%;
}

.leftPage a
{
    font-size: 1.4em;
}

.rightPage h4
{
    color: #05255e;
    font-size: 1.4em;
}

.rightPage ol
{
    border-bottom: solid 1px #fff;
}

.rightPage ol
{
    list-style-image: url(../../img/bullet.gif);
    margin: 0px;
    padding: 0px;
}

.rightPage li
{
    border-bottom: dashed 1px #333;
    margin: 10px 15px;
    padding-bottom: 10px;
}

.rightPage .last
{
    border-bottom: none;
}

#contactUs
{
    font-weight: bold;
    padding: 20px 15px;
    border-bottom: solid 1px #fff;
}

#contactUs b
{
    color: #05255e;
    font-size: 1.3em;
}

.rightPage #login
{
    padding: 20px 15px;
}


/* -----------------------------------*/
/* ---------->>> POOLS <<<------------*/
/* -----------------------------------*/


#mainArea
{
    margin-bottom: 40px;
    padding: 0px;
    padding-left: 50px;
    width: 740px;
}

#contentTable
{
    margin-left: 20px;
}

#sidebar
{
    padding: 0px;
    padding-left: 30px;
    width: 250px;
    min-height: 1%;     /* for IE7 */
}


#poolList
{
    padding: 0px;
}

#poolList h4
{
    color: #1A3F86;
    font-size: 1.2em;
    font-weight: bold;
    margin-left: 20px;
}


.poolEntry, #sidebarWrapper
{
    background-color: #FFFFFF;
    border: solid 3px #FFFFFF;
    margin: 20px 0px;
    position: relative;
    min-height: 1%;     /* for IE7 */
}

.poolEntry
{
    min-width: 600px;
}

#sidebarDrop
{
    min-height: 1%;     /* for IE7 */
}

* html .poolEntry, #sidebarWrapper {height: 1%;} /* for IE/Win */
* html .poolEntry {height: auto;} /* for IE5/Mac */


.poolTitle, #sidebarTitle
{
    background-color: #DAD9D9;
    height: 40px;
    padding: 10px 10px 10px 26px;
}

.poolTitle .updatingIcon
{
    float: right;
}

.selected .poolName a
{
    color: #CC6600;
}

.poolTitleTab
{
    background-color: #DAD9D9;
    border: solid 3px #FFFFFF;
    border-right: none;
    display:none;
    height: 40px;
    width: 50px;
    padding: 10px 3px 10px 3px;
    position: absolute;
    /* left = width + wrapper.padding-left */
    left: -50px;
    top: -3px;
}

.selected .poolTitle, #sidebarTitle, .selected .poolTitleTab
{
    background-color: #E0EAFD;
}

.tabBorder
{
    background: url(../../img/tab-border.gif) 0 0 no-repeat;
    float: left;
    width: 13px;
    height: 66px;
    position: absolute;
    left: -12px;
    top: -3px;
}

.selected .tabBorder
{
    background-position: -13px 0;
}


.poolTitleTab ol
{
    padding: 0px;
}

/* Garbage can icons */
.poolTitleTab a.delete img {width: 15px; height: 15px; border-width: 0;}
.poolTitleTab a.delete img {background: url(../../img/garbage.gif) top left no-repeat;}
.poolTitleTab a:hover.delete img {background-position: 0 -15px;}
.selected .poolTitleTab a.delete img {background-position: -15px 0;}
.selected .poolTitleTab a:hover.delete img {background-position: -15px -15px;}


.poolName
{
    font-size: 1.7em;
}

.poolName a
{
    font-weight: bold;
    text-decoration: underline;
}

#sidebarTitle
{
    color: #CC6600;
    font-size: 1.7em;
    font-weight: bold;
}


.poolState
{
    margin-left: 20px;
}

.poolState .starting
{
    color: blue;
}

.poolState .started, .poolState .True
{
    color: #31861A;
}

.poolState .stopped, .poolState .False
{
    color: #D02B28;
}

.poolState .stopping
{
    color: orange;
}

.poolName .disabled, .poolDataInfo .disabled
{
    color: gray;
    text-decoration: underline;
}


.poolInfo
{
    color: #333;
    font-size: 1.2em;
    padding: 5px 0px;
}

* html .poolInfo {padding: 0px;} /* for IE/Win - fix the double padding bug */


.poolInfo b
{
    font-weight: bold;
}


.executeNodeTitle, .sidebarInfo
{
    border-top: solid 3px #FFFFFF;
    padding: 0px;
}

.executeNodeTitle li
{
    position: relative;
}

.nodeEntry
{
    background-color: #F5F5F5;
    border-bottom: solid 1px #FFFFFF;
    color: #0066CC;
    font-size: 1.2em;
    height: 20px;
    padding: 3px 5px 3px 20px;
}

.sidebarInfo li
{
    background-color: #ECF2FE;
    border-bottom: solid 1px #FFFFFF;
    color: #333333;
    font-size: 1.2em;
    padding: 5px 10px 5px 20px;
    height: 1%;
}

.sidebarInfo li.base
{
    background-color: #E0EAFD;
    border-bottom: none;
    height: 1%;
}

.sidebarInfo li.accent
{
    background-color: #D5DFF3;
    height: 1%
}

.nodeTab
{
    background-color: #F5F5F5;
    border: solid 1px #FFFFFF;
    border-right: none;
    display:none;
    height: 20px;
    width: 50px;
    padding: 3px 5px 3px 3px;
    position: absolute;
    left: -50px;
    top: -1px;
}

.nodeTab .tabBorder
{
    background: url(../../img/smalltab-border.gif) top left no-repeat;
    float: left;
    width: 12px;
    height: 34px;
    position: absolute;
    left: -10px;
    top: -1px;
}

.nodeControls
{
    padding: 0px;
    margin: 0px;
    min-height: 1%;     /* for IE7 */
}

.nodeControlForm, #addPoolBlock
{
    background-color: #ADD6FF;
    border-bottom: solid 1px #FFFFFF;
    margin-left: 0px;
    padding: 5px;
    min-height: 1%;     /* for IE7 */
}


* html .nodeControls, .nodeControlForm, #addPoolBlock {height: 1%;} /* for IE/Win */
*>html .nodeControls, .nodeControlForm, #addPoolBlock {height: auto;} /* for IE5/Mac */


.nodeControlForm a.close img {width: 15px; height: 14px; border-width: 0;}
.nodeControlForm a.close img {background: url(../../img/close-icon.gif) 0 0 no-repeat;}
.nodeControlForm a:hover.close img {background-position: -15px 0;}

.nodeControlForm a.start img {width: 44px; height: 19px; border-width: 0; margin-left: 20px;}
.nodeControlForm a.start img {background: url(../../img/button-start.gif) 0 0 no-repeat;}
.nodeControlForm a:hover.start img {background-position: -44px 0;}

.nodeControlForm a.stop img {width: 41px; height: 19px; border-width: 0; margin-left: 20px;}
.nodeControlForm a.stop img {background: url(../../img/button-stop.gif) 0 0 no-repeat;}
.nodeControlForm a:hover.stop img {background-position: -41px 0;}

.nodeControlForm a.working img {width: 16px; height: 16px; border-width: 0; margin-left: 20px;}
.nodeControlForm a.working img {background: url(../../img/updating-xparent.gif) 0 0 no-repeat;}
.nodeControlForm a:hover.working img {background: url(../../img/updating-xparent.gif) 0 0 no-repeat;}

.nodeControlButton
{
    padding: 10px 10px 0px 20px;
}


.nodeControlButton a img {width: 81px; height: 19px; border-width: 0;}
.nodeControlButton a img {background: url(../../img/button-startnodes.gif) 0 0 no-repeat;}
.nodeControlButton a:hover img {background-position: -81px 0;}


.poolBlockBase
{
    background-color: #FFFFFF;
    border: solid 3px #FFFFFF;
    margin: 5px;
}


.nodeControlForm .close
{
    float: right;
}


.controlTab a, .controlTab a:link, .controlTab a:visited {
    color: #990000;
    font-weight: bold;
    font-size: 1em;
    text-decoration: none;
    }
.controlTab a:hover, .controlTab a:active { color: #FF0000; }



.addPoolButton a img {width: 154px; height: 30px; border-width: 0;}
.addPoolButton a img {background: url(../../img/button-createpool-tiled.png) 0 0 no-repeat;}
.addPoolButton a:hover img {background-position: -154px 0;}


.createPoolButton a img {width: 81px; height: 19px; border-width: 0;}
.createPoolButton a img {background: url(../../img/button-createpool-small.png) 0 0 no-repeat;}
.createPoolButton a:hover img {background-position: -81px 0;}


.saveOptionsButton a img {width: 81px; height: 19px; border-width: 0;}
.saveOptionsButton a img {background: url(../../img/button-pooloptions.gif) 0 0 no-repeat;}
.saveOptionsButton a:hover img {background-position: -81px 0;}

.addPoolButton
{
    margin: 0px;
}

#registration
{
    padding: 40px 20px 0px 15px;
}

.formName
{
    font-size: 1.7em;
    font-weight: bold;
    text-align: left;
    padding: 0px;
    margin: 0px;
}

.formInfo
{
    background-color: #F5F5F5;
    border-bottom: solid 1px #FFFFFF;
    border-top: solid 3px #FFFFFF;
    padding: 0px;
    font-size: 1.2em;
    height: 20px;
    padding: 3px 5px 3px 20px;
}

#autoStop
{
    margin-left: 5px;
}


/* -------------------------------------*/
/* ---------->>> BILLING <<<------------*/
/* -------------------------------------*/


#billingArea
{
    padding: 0px 0px 40px 50px;
    width: 67%;
    min-width: 800px;
}

#billingBlock h2
{
    margin: 0px;
    padding: 0px;
    font-size: 2em;
    font-weight: bold;
}

#billingBlock h3
{
    font-size: 1.5em;
    font-weight: normal;
}

#billingBlock
{
    background-color: #FFFFFF;
    border: solid 3px #FFFFFF;
    margin: 20px 0px;
    position: relative;
    min-height: 1%;     /* for IE7 */
    padding-bottom: 30px; /* Take this out if we're not using buttons */
}

* html #billingBlock {height: 1%;} /* for IE/Win */
*>html #billingBlock {he\ight: auto;} /* for IE5/Mac */

#billingBlock table
{
    width: 100%;
}

#buttons
{
    margin-left: 30px;
}
.billingTitle
{
    background-color: #DAD9D9;
    color: #333333;
    padding: 10px 10px 10px 20px;
}

.billingTable th
{
    border-left: solid 1px #FFFFFF;
    color: #333333;
    padding: 8px;
}

.billingTable td
{
    border-left: solid 1px #DCD8D9;
    color: #333333;
    padding-left: 10px;
}

.whiteborder td
{
    border-left: solid 1px #FFFFFF;
}


.billingItem td
{
    padding: 3px 8px;
}

.billingCategory td
{
    background-color: #C6D7F9;
    font-weight: bold;
    padding: 3px 8px;
}

.tableHeader th
{
    background-color: #666666;
    border-top: solid 3px #FFFFFF;
    color: #FFFFFF;
}

.poolTotal th
{
    background-color: #E8E4E5;
    border-left-color: #DCD8D9;
    border-bottom: 3px solid #DCD8D9;
    color: #666666;
    empty-cells: show;
}


.subTotal th
{
    background-color: #3485D7;
    border-top: solid 3px #FFFFFF;
    color: #FFFFFF;
}

.accountTotal th
{
    background-color: #0066CB;
    border-top: solid 3px #FFFFFF;
    color: #FFFFFF;
}

.accountTotal a, .accountTotal a:link, .accountTotal a:visited
{
    color: #FFFFFF;
}

.accountTotal a:hover
{
    color: #66CCFF;
}

.whiteborder
{
    border-bottom: solid 1px #FFFFFF;
    border-right: solid 1px #FFFFFF;
}

.whiteborder .tableHeader th
{
    border-top: solid 1px #FFFFFF;
}
.whiteborder td
{
    border-left: solid 1px #FFFFFF;
}

.whiteborder th
{
    border-left: solid 1px #FFFFFF;
}



/* for zebra-table */
.odd
{
    background-color: #F5F5F5;
}

/* handle the first column as special case */
.billingTable  .first
{
    border-left: none;
    padding-left: 20px;
}

.billingItem .first
{
    background-color: #FFFFFF;
    color: #CC6600;
    font-size: 1.2em;
    font-weight: bold;
}

.borderless, .borderless td
{
    border-style: none;
}


#id_count
{
    width: 2em;
}


/* ---------------------------------------------*/
/* ---------->>> ACCOUNT REQUEST <<<------------*/
/* ---------------------------------------------*/

#accountDescription
{
    padding: 10px 30px;
    width: 500px;
}

#accountDescription h3
{
    color:#05255E;
    font-size:1.4em;
    font-weight: bold;
    margin-bottom: 20px;
}

#accountDescription h4
{
    font-size:1.2em;
    font-weight: bold;
}

#accountDescription ol
{
    list-style-image: url(../../img/bullet.gif);
    margin-left: 10px;
    padding: 0px;
}

#accountDescription li
{
    margin: 10px 15px;
}

#accountDetails li
{
    border:none;
    padding: 0px;
}


/* ---------------------------------------------*/
/* ---------->>> PAYMENT/PAYPAL <<<-------------*/
/* ---------------------------------------------*/

#PaypalButton #id_quantity
{
    width: 25px;
}

#PaypalButton label
{
    font-weight: bold;
}

#PaypalButton input
{
    display: inline;
    margin-left: 0px;
}

.paypalTotal
{
    font-weight: bold;
}

/* -----------------------------------------*/
/* ---------->>> AUDIT PAGE <<<-------------*/
/* -----------------------------------------*/

#generateReport .formField
{
    min-width: 150px;
}

/* -------------------------------------------*/
/* ---------->>> REGISTRATION <<<-------------*/
/* -------------------------------------------*/

#registration li
{
    margin: 1px 15px;
}

#registration h3
{
    margin-bottom: 10px;
}

/* ---------------------------------------*/
/* ---------->>> TUTORIAL <<<-------------*/
/* ---------------------------------------*/

#pdfViewer
{
    margin: 30px;
}