/*
     filename    : ivs/stylesheets/style.css

     description : This stylesheet is a general purpose stylesheet to control
     		   layout and design of base web and jsp pages.
     		   This stylesheet will be geared at making the stylesheet look good in 
                   Netscape 4.x.
                   
       history   : Robert Stuart
                   
                   
        notes    : Added .divtable class in this file.
*/

a {
	color : Blue;
	font-size :small;
	text-decoration: underline;
}

a:hover{ 
	color: Black;  
	text-decoration: underline;  
}

body {
	font-family : Arial, Helvetica, sans-serif;
	font-size :medium  ;
}

h2 {
	color : #FF9900;
	font-size : larger;
	font-weight : bold; 
}

h3 {
	color : #003366;
	font-size : large;
	font-weight : bold;
}

input {
	font-family : Arial, Helvetica, sans-serif;
	font-size : small;
}

th{
	color: #315191;
}

td {
	font-family : Arial, Helvetica, sans-serif;
	font-size : small;
}

div {
	font-family : Arial, Helvetica, sans-serif;
	font-size : small;
}

textarea {
	font-family : Arial, Helvetica, sans-serif;
	font-size : small;
}

/* Includes Section */
/*
the div tag that holds the header image doesn't need to float, it 
should span the whole top of the page
*/
#header{
	background-image: url("../images/elksBG1.gif");
	background-repeat: repeat;
	width: 750px;
	height: 160px;
	  /*border: solid 2px TEAL;*/
}

/* this is a white space id used with DIV tag, which can be used before the 
   heading in all the JSP pages instead of using  's.*/
#wtspacer{
/*	background-color: #FF0000;*/
	background-image: url("../images/wtspace.gif");	
  text-align: right;
  text-decoration: underline;
  width: 350px;
	height: 10px;
}

#pics{
/*	background-color: #FF0000;*/
/*  text-align: right;*/
  text-decoration: underline;
}

.picborder{
	border-width:14px;
	border-color: black;
	border-style: ridge;
	/* none dotted dashed solid double groove ridge inset outset */

}
img#pct25{
	width: 220px;
	height: 344px;
/*  border: solid 1px yellow; */
}
.picborderRed{
	border-width:14px;
	border-color: red;
	border-style: ridge;
	/* none dotted dashed solid double groove ridge inset outset */

}/*
The "float: left;" style used here places the menu to the left underneath the header div tag on  
page.  without it, the divs will all be stacked on top of each other.
*/
#menu{
	float: left;
	width: 150px;
	height: 300px;
/*  border: solid 1px yellow; */
}
/*
	The border attributes here are what are used to display the lines that separate the menu links in 
the menu section of the page.
*/

.menubkgd{
	text-align: left;
	border-style: solid;
	border-color: gray white white white;
	border-top-width: thin;
}

/*
The a.menulink style is used to create the "hover" effect that the page displays when you move your 
cursor over a link on the menu.  (text will be black until hovered over then will turn blue)
*/
a.menulink{
	color: #201074;
	font-family : Arial, Helvetica, sans-serif;
	font-size : small;
	font-weight : bold;
	text-decoration : none;

}

a.menulink:hover {
	color: #5637F3;
	font-family : Arial, Helvetica, sans-serif;
	font-size : small;
	font-weight : bold;
	text-decoration : none;
}
/*
The a.menulink style is used to create the "hover" effect that the page displays when you move your 
cursor over a link on the menu.  (text will be black until hovered over then will turn blue)
*/
a.calendarlink{
	color: blue;
	font-family : Arial, Helvetica, sans-serif;
	font-size : xx-small;
	text-decoration : underline;

}

a.calendarlink:hover {
	color: red;
	font-family : Arial, Helvetica, sans-serif;
	font-size : xx-small;
	text-decoration : underline;
}
a.bannerlink{
		font-size : x-small;
		font-weight: bold;
		text-decoration: none;
	color: #FF9900;
}

a.bannerlink:hover {
		font-size : x-small;
		font-weight: bold;
		text-decoration: underline;
	color: #FF9900;
}

/*
The a.menulink style is used to create the "hover" effect that the page displays when you move your 
cursor over a link on the menu.  (text will be black until hovered over then will turn blue)
*/
a.archivelink{
	color: blue;
	font-family : Arial, Helvetica, sans-serif;
	font-size : x-small;
	text-decoration : underline;

}

a.archivelink:hover {
	color: red;
	font-family : Arial, Helvetica, sans-serif;
	font-size : x-small;
	text-decoration : underline;
}


/*
The linkspacer style is used to have a 'separator' between links in the menu.  Level 2 compliance requires
'something other than whitespace' between links.  Everything else that separates the links in the menu are 
generated by the stylesheet and considered 'whitespace'.
*/
.linkspacer{
	display:none;
}

/*
The background image styles below display the background image behind the text so it matches the header background.
background color is set in case the image isn't found.  The 'margin-top:452px;' is used to keep the footer below the 
side menu when the content pane has less lines than the menu.  Otherwise the menu would end up over top on the menu
*/
	
#footerbkgd {
	color : #000982;
	text-align: center;
	float: left;
/*	margin-top:452px;*/
/* border: solid 2px red; */

}

/*
The a.footerlink style is used to create the "hover" effect that the page displays when you move your 
cursor over a link in  the footer.  ( text will be white until hovered over then will be white underlined)
*/
a.footerlink{
	color: white;
	text-decoration: none;
}

a.footerlink:hover {
	color: white;
	text-decoration: underline;
}

/*Page Layout Section */
/*
The page is designed for a screen resolution of 800 pixels across.
*/
#main{
  width: 750px;
  border: solid 2px #201074;  /* THIS STAYS */

}


/* 
The border is required here for Netscape 4.x compatibility.  
   without it, the footer will not appear in the proper place. 
*/
#docbody{
	width: 100%;
/*   border: solid 2px MAROON; */

}

/*
The "margin-left: 1%" style here is required for proper rendering in Netscape 4.x
Netscape 4.x renders it incorrectly, and this will be overriden in the other
stylesheet since Netscape 6.x+ and Internet Explorer render this command differently

For this page to work correctly, please DO NOT add a "float:right;" style.  If you do
the footer will move directly underneath the header div tag.

Please note that the height command isn't recognized in Netscape 4.x and will be used
in the other stylesheet.
*/

#contentarea{
	width: 720px;
	margin-left: 25px;
 /* border: solid 2px #00045C; */
}

/*
The pagelabel style is needed for the label at the top left that displays a title for this particular page.  (ie. 
"Home" with the line underneath.  
*/
#pagelabel {
	font-size : medium;
	font-weight: bold;
	text-decoration: none;
	text-align: right;
	color: #989898;
	font-family: "Times New Roman";
	border: thin;
	border-color: White;
	border-style: solid;
}


/*Justification Section */

.text-center{
	text-align: center;
}
.text-right{
  text-align:right;
}
.floatright{
	float: right;
}

.floatleft{
	float: left;
}

/* Headings, Titles and Text Section */
/*
The a.titlelink style is used to create the "hover" effect that the page displays when you move your 
cursor over a link in  the footer.  (text will be blue until hovered over then will be blue underlined)
*/
a.titlelink{
	color:  #315191;
	font-size : medium;
	font-weight: bold;
	text-decoration: none;
}

a.titlelink:hover {
	color:  #315191;
	font-size : medium;
	font-weight: bold;
	text-decoration: underline;
}


/*
This is a common label for items like the labels for the "Email:" and "Message:" text areas on the submit feedback page. 
label is blue and olabel is orange
*/
.blabel {
	font-size : small;
	font-weight: bold;
	text-decoration: none;
	color: #315191;
}

.olabel {
	font-size : medium;
	font-weight: bold;
	text-decoration: none;
	color: #FF9900;
}
.olabelSmall {
	font-size : x-small;
	font-weight: bold;
	text-decoration: none;
	color: #FF9900;
}
.blueb{
	font-size : small;
	font-weight : bold;
	text-decoration: none;
	color: #315191;	
}

.blackx{
	font-size : x-small;
	font-style: italic;
	color: black;	
}
td.blackx{
	font-size : x-small;
	font-style: italic;
	color: black;	
}
td.blackxb{
	font-size : x-small;
	font-style: italic;
	font-weight: bold;
	color: black;	
}
td.blackxx{
	font-size : xx-small;
	font-style: italic;
	color: black;	
}
td.blackxxb{
	font-size : xx-small;
	font-style: italic;
	font-weight: bold;
	color: black;	
}
td.black{
	font-size : medium;
	font-weight: bold;
	color: black;	
}
td.browns{
	font-size : small;
	font-weight: bold;
	color: #C68C29;	
}
td.purple{
	font-size : medium;
	font-weight: bold;
	color: #00005A;	
}
.bluen{
	font-size : small;
	text-decoration: none;
	color: #315191;	
}

.tableheading{
	background-color: #053364;
	color: White;
}

/*
This style is used on pages where there is an informational message such as 'There is currently a scheduled
outage occurring' to format the message.
*/

#labeldescription2{
	color : black;
	font-family : Arial, Helvetica, sans-serif;
	font-size : large;
	font-weight : bold;
	text-align: center;
	border-style: solid;
	border-color: black white black white;
	border-width: thin;
	width: 550px;
}

/*Error Section */

.errordescription{
	color : #FF0000;
	font-family : Arial, Helvetica, sans-serif;
	font-weight : bold;
	text-align: center;
}

#errordescription3{
	color : #FF0000;
	font-family : Arial, Helvetica, sans-serif;
	font-size : medium;
	font-weight : bold;
	text-align: center;
	width: 550px;
}


/* Virtual Table Section */
/*
The following styles are used to create 'columns' of data on pages where tables aren't appropriate
or can't be used for W3C compliance.  'colxx' styles below are used to create columns of data.
Both 'col25' and 'col75'(for example) are designed to be used with a DIV tag holding data for each respective column, these 
two DIVs would be contained in a DIV tag associated with the 'row' style.
The 'row' style is used in conjunction with 'col25' and 'col75' to create a row of data.  The respective DIV
tags that use the 'col25' and 'col75' styles would be inside a DIV tag using the 'data' ID.

Netscape Navigator 4 requires the border in order to render the page properly.  It is white to essentially make it invisible

*/


.divrow{
	width: 571px;
	text-align: left;
	margin-left: 1%;
	border: thin;
	border-color: white;
	border-style: solid;
}

.divtable{
  width: 650px;
  height: 300px;
  text-align: left;
  border: 1px solid black;
  overflow: scroll;
}

#cell{
/*  border-color: none;*/
  border-width: 1px;
	border-style: none;
}
#cellright{
  text-align:right;
  height: auto;
/*  border: RED 2px solid; */
}
#headingrow{
  width: 97.5%;
  background-color: #BBBBBB;
  color: #000000;
  border: 2px;
  border-color: black;
	border-style: double;
  font-weight: bold;
}  

#divrowtable{
  width: 97.5%;
  text-align: center;
/*  border:PURPLE solid 2px; */
}  

#divrow1{
	background-color: #FFFFFF;
	width: 100%;
	text-align: left;	
	font-family : verdana, Arial, Helvetica, sans-serif;
	font-size : 10px;	
}

#divrow2{
	background-color: #C7DEC8;
	width: 100%;
	text-align: left;	
	font-family : verdana, Arial, Helvetica, sans-serif;
	font-size : 10px;
}
a.rowlink{
	color:  blue;
	text-decoration: underline;
}


.arialFont{
  font-family: Arial; 
}

.col8{
	
	width:8%;
  text-align: center;
	border: thin;  
	border-color: White;
	border-style: solid;
}
.col10{	
	width:10%;
	text-align: left;
	border: thin;  
	border-color: White;
	border-style: solid;
}

.col15{
	width:15%;
  text-align: center;
	border: thin;  
	border-color: White;
	border-style: solid;
}

.col20{
	
	width:20%;
	text-align: left;
	border: thin;  
	border-color: White;
	border-style: solid;
}

.col25{
	
	width:25%;
	border: thin;  
	border-color: White;
	border-style: solid;
}

.col30{
	
	width:30%;
	text-align: left;
	border: thin;  
	border-color: White;
	border-style: solid;
}

.col32{
	
	width:32.5%;
	text-align: left;
	border: thin;
	border-color: White;
	border-style: solid;
}

.col35{
	
	width:35%;
	border: thin;
	border-color: White;
	border-style: solid;
}

.col37{
	
	width:37%;
	border: thin;
	border-color: White;
	border-style: solid;
}

.col40{
	
	width:40%;
	text-align: left;
	border: thin;
	border-color: White;
	border-style: solid;
}

.col45{
	
	width:45%;
	text-align: left;
	border: thin;
	border-color: White;
	border-style: solid;
}

.col50{
	
	width:50%;
	text-align: left;
	border: thin;
	border-color: White;
	border-style: solid;
}
.col55{
	width:55%;
	text-align: left;
	border: thin;
	border-color: White;
	border-style: solid;
}
.col60{
	
	width:60%;
	text-align: left;
	border: thin;
	border-color: White;
	border-style: solid;
}

.col55{
	
	width:55%;
	text-align: left;
	border: thin;
	border-color: White;
	border-style: solid;
}

.col65{
	float:left;
	width:65%;
	border: thin;
	border-color: White;
	border-style: solid;
}

.col75{
	float:left;
	width:75%;
	border: thin;
	border-color: White;
	border-style: solid;
}

.col85{
	float:left;
	width:85%;
	text-align: left;
	border: thin;
	border-color: White;
	border-style: solid;
}

.col95{
	float:left;
	width:95%;
	text-align: left;
	border: thin;
	border-color: White;
	border-style: solid;
}
/* pad classes simultate cellpadding as used in table tag */
.pad3{
  padding-left: 3px;
  padding-right: 3px;
  padding-top: 3px;
  padding-bottom: 3px;
}  
.pad5{
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
}