body {
   color: #333333;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   margin: 10px;
   background: #676767;
   min-width: 800px;
   text-align: center;
}

#container {
   margin: 0px auto;
   border: 1px solid #676767;
   background: url(../images/shaded_background.png) repeat-y;
   width: 800px;
   text-align: left;
   color: #333333;
}

#banner {
   background: url(../images/imgTitle.png);
   height: 50px;
   width: 800px;
}

#banner h1 {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 13px;
   margin: 3px;
   padding: 10px 16px;
   color: #888888;
}

#banner #profile {
   float: right; 
   padding: 30px 18px 0px 0px;
}

#nav {
   float: left;
   width: 131px;
   margin-left: 6px;
   padding-top: 4px;
}

/* IE Hack */
html>body #nav {
   margin-left: 12px;
   padding-left: 0px;
}

#nav p {
   margin-top: 0px;
}

#content {
   padding: 4px 8px 4px 8px;
   margin-left: 147px;
   width: 624px;
   background: #ffffff;
}

#content p {
   font-size: 11px;
   margin-top: 4px;
   padding: 5px 0px 0px;
}

#content p.header, p.headerLarge {
   font-size: 13px;
   color: #ff0000;
   font-weight: bold;
   text-align: center;
}

#content p.headerLarge {
   font-size: 16px;
   color: #0000ff;
   margin-bottom: 0px;
}

#content p.footnote {
   font-size: 9px;
   text-align: center;
   color: #777777;
}

#copyright {
   margin-left: 8px;
   margin-top: 4px;
   clear: both;
   background: #ffffff;
   padding-top: 4px;
   padding-bottom: 0px;
   width: 780px;
   height: 13px;
   text-align: right;
   border-top: 1px solid #676767;
   font-size: 10px;
   color: #777777;
}

#footer {
   clear: both;
   background: #ffffff url(../images/imgFooter.png);
   width: 800px;
   height: 22px;
}

a:active {
   color: #000000;
   text-decoration: none;
}

a:link,a:visited {
   color: #0000ff;
   text-decoration: none;
}

a:hover {
   color: #0000ff;
   text-decoration: underline;
}

/*
   Base menu and button code generated from
   http://www.webmaster-toolkit.com/css-menu-generator.shtml
*/
.buttonscontainer {width: 125px;}

.buttons a {
   color: #000000;
   background: #cccccc;
   padding: 2px;
   padding-left: 3px;
   display: block;
   border-left: 7px solid #666666;
   font-size: 11px;
   text-decoration: none;
   text-align: left;
   margin-top: 1px;
}

.buttons a:hover {
   border-left: 7px solid #3333ff;
   text-decoration: none;
   color: #000000;
   background: #9999ff;
}

.buttons #current {
   background:#ff9999;
   border-left:7px solid #cc3333;
   color:#000000;
   text-decoration:none;
}

.buttons #currentSub {
   background:#ffcccc;
   border-left:7px solid #cc3333;
   color:#000000;
   text-decoration:none;
}

.buttons #currentSubSelected {
   background:#ffcccc;
   border-left:11px solid #cc3333;
   color:#000000;
   text-decoration:none;
}

input, select {
   font-size: 11px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
}

input {
  /* display: block; */
   margin-bottom: 2px;
}

button {
   float: right;
}

td.plain {
   font-size: 11px;
}

fieldset {
   padding: 5px;
   border: 1px solid #cccccc;
}

p.small {
  color: #777777;
  font-size: 10px;
}

#fs {
   width: 251px;
}

#registration, #login {
   width: 475px;
}

legend {
   color: #333333;
}

#status {
    background: #ffeeaa url(../images/information.png) no-repeat 5px 50%;
    border-color: #ffdd00;
    border-style: solid;
    border-width: 2px;
    color: #000000;
    margin: 10px 0;
    padding: 0.5em 0.5em 0.5em 25px;
}

#status span {
    font-weight: bold;
}








form {  /* set width in form, not fieldset (still takes up more room w/ fieldset width */
/*  font:100% verdana,arial,sans-serif; */
  margin: 0;
  padding: 0;
/*  min-width: 500px;
  max-width: 600px;
   width: 560px;  */
}

form fieldset {
  / * clear: both; note that this clear causes inputs to break to left in ie5.x mac, commented out */
  border-color: #000;
  border-width: 1px;
  border-style: solid;
  padding: 10px;        /* padding in fieldset support spotty in IE */
  margin: 0;

}

form label { 
	display: block;  /* block float the labels to left column, set a width */
	float: left; 
	width: 130px; 
	padding: 0; 
	margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
	/*
	text-align: right; 
	*/
}

form input, form textarea {
	/* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
	width:auto;      /* set width of form elements to auto-size, otherwise watch for wrap on resize */
	margin:2px 0 0 10px; /* set margin on left of form elements rather than right of
                              label aligns textarea better in IE */
}

form input#reset {
	margin-left:0px; /* set margin-left back to zero on reset button (set above) */
}

textarea { 
   overflow: auto; 
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   resize: none;
}

form small {
   display: block;
   margin: 0 0 5px 160px; /* instructions/comments left margin set to align w/ right column inputs */
   padding: 1px 3px;
   font-size: 88%;
}

form .required {
   font-weight: bold;
} /* uses class instead of div, more efficient */

form br {
	clear:left; /* setting clear on inputs didn't work consistently, so brs added for degrade */
}

.noMargins {
   margin: 0px;
}

table.dottedhorizontal {
    border-spacing: 0px;
    border-collapse: collapse;
    border-top: 4px solid #666666;
    border-bottom: 1px solid #666666;
}
table.dottedhorizontal th.center {
    text-align: center;
    font-weight: bold;
    padding: 0.2em 0.5em;
    border-top: 1px dotted #cccccc;
}

table.dottedhorizontal th {
    text-align: left;
    font-weight: bold;
    padding: 0.2em 0.5em;
    border-top: 1px dotted #cccccc;
}

table.dottedhorizontal td {
    text-align: left;
    border-top: 1px dotted #cccccc;
    padding: 0.2em 0.5em;
}

table.dottedhorizontal td.center {
    text-align: center;
}

table.dottedhorizontal td.right {
    text-align: right;
}

strong.online {
    color: #339900;
}

strong.offline {
    color: #aaaaaa;
}

strong.away {
    color: #cc0000;
}

strong.busy {
    color: #3333cc;
}

span.joinable {
   text-decoration: underline;
}

span.motto {
   color: #aaaaaa;
}

table.dottedhorizontal td.joinable {
   text-decoration: underline;
}


table.dottedhorizontal td.online {
    color: #339900;
}
table.dottedhorizontal td.offline {
    color: #aaaaaa;
}
table.dottedhorizontal td.away {
    color: #cc0000;
}
table.dottedhorizontal td.busy {
    color: #3333cc;
}

table.dottedhorizontal td.highPercent {
    color: #00FF00;
}
table.dottedhorizontal td.middlePercent {
    color: #999999;
}
table.dottedhorizontal td.lowPercent {
    color: #FF0000;
}

table.dottedhorizontal thead th {
    text-align: center;
    border-bottom: 1px solid #cccccc;
}
table.dottedhorizontal th.Corner {
    text-align: left;
}

/* ------------------------ MENUS -------------------------*/

#menu ul {
   margin: 0;
   padding: 0;
   list-style: none;
   width: 131px; /* Width of Menu Items */
   }

#menu ul li {
   position: relative;
   }
   
#menu li ul {
   position: absolute;
   left: 132px; /* Set 1px less than menu width */
   top: 0;
   display: none;
   }

/* Styles for Menu Items */
#menu ul li a {
   display: block;
   background: #cccccc;
   border-bottom: 0;
   border-left: 7px solid #666666;
   font: #000000 11px;
   margin-top: 1px;   
   padding: 2px;
   padding-left: 3px;
   text-align: left;
   text-decoration: none;
   outline: none;
}

#menu ul li a:link, #menu ul li a:visited {
   color: #000000;
   text-decoration: none;
}
   
#menu ul li a#current {
   background: #ff9999;
   border-left: 7px solid #cc3333;
   color: #000000;
   text-decoration: none;
}   

#menu ul li a#current-sub {
   background: #ff9999 url(/images/arrow-submenu.gif) right center no-repeat;
   border-left: 7px solid #cc3333;
}   

#menu ul li a#sub {
   background: #cccccc url(/images/arrow-submenu.gif) right center no-repeat;
} 

#menu ul li a:link#sub {
   background: #cccccc url(/images/arrow-submenu.gif) right center no-repeat;
} 

/* Fix IE. Hide from IE Mac \*/
 * html #menu ul li { float: left; height: 1%; }
 * html #menu ul li a { height: 1%; }
/* End */

/* Hover Styles */
#menu ul li a:hover { 
   border-left: 7px solid #3333ff;
   text-decoration: none;
   color: #000000;
   background: #9999ff;
   outline: none;
} 

#menu ul li a:hover#sub { 
   background: #9999ff url(/images/arrow-submenu.gif) right center no-repeat;
   outline: none;
}

/* Sub Menu Styles */      
#menu li ul li a { 
   padding: 2px;
   padding-left: 3px;
   outline: none;
} 

/* The magic */      
#menu li:hover ul, #menu li.over ul { 
   display: block; 
} 

/* Styles used for form fields in error. */
input.error, textarea.error, select.error {
    background-color: #ff9999;
    color: #b72222;
}

label.error {
    color: #b72222;
    border-bottom: 1px dashed #b72222;
}

.tiny {
   font-size: 9px;
}