/* The yui reset-fonts-grids.css & base.css must be loaded first */


/* the h1 page title */
H1#wst-pagetitle {
    margin-top: 2.3em;
/*    margin-bottom: 2.3em;*/
}

#wst-pagesubtitle {
    margin-top: 2em;
    margin-bottom: 2em;
}

.fieldWithErrors {
  border: 2px solid red;
  padding: 2px;
  background-color: red;
  display: table;
}

.fieldWithErrors.input {
  background-color: red;
}

#errorExplanation {
  width: 350px;
  border: 2px solid red;
  padding: 7px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}

#errorExplanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px -7px 12px -7px;
  background-color: #c00;
  color: #fff;
}

#errorExplanation p {
  color: #333;
  margin-bottom: 0;
  padding: 5px;
}

#errorExplanation ul li {
  font-size: 93%;
  line-height: 1.3em;
  list-style: square;
}


.note {
    border: 1px solid black;
    margin-right: 1em;
    margin-bottom: 2em;
    padding: 2em;
    color: green;
    background-color: #ddd;
}

.errnote {
    border: 1px solid black;
    margin: 2em;
    padding: 2em;
    color: red;
    background-color: #ddd;
}

/* boxes around text */
.inbox {
    border: 1px solid #ccc;
	margin-left: 2em;
    margin-bottom: 2em;
    padding: 1em;
}
.inbox h6.inboxtitle {
    margin-top: 1em;
    margin-bottom: 2em;
    color: black;
}

.nobox {
    margin-right: 1em;
    margin-bottom: 2em;
    padding: 1em;
}

.formbutton {
    cursor: pointer;
    border: outset 1px #ccc;
    background: #999;
    color: #333;
    font-weight: bold;
    font-size: 108%;
    padding: 0.5em 1em;
    background: url('../images/formbttn.gif') repeat-x left top;
}
a.cancel,
a.cancel:link,
a.cancel:visited { color: darkred; }

div.tablebgd {
    background: #919191;
}

table.nolinestbl {
/* TO DISPLAY BACKGROUND */
/*    position: relative; */
/*    top: -4px; */
/*    left: -4px; */
    border-collapse: separate;
    background-color: #eef;
    border: 1px solid gray;
}
table.nolinestbl caption {
    text-align: center;
    border: 1px solid gray;
    border-bottom: none;
    background-color: #b4b9dc;
}
table.nolinestbl th {
    background-color: #c5caed;
    border-color: transparent;
    border-style: none;
}
table.nolinestbl tr { text-align: center; }
table.nolinestbl td {
    border-color: transparent;
    border-style: none;
    padding: 0.45em;
/*    padding: 6px;*/
}
table.nolinestbl tr.Line0 { background-color: #e1e1f1; }
table.nolinestbl tr.Line1 { background-color: #eef; }
table.nolinestbl td a:link { background-color: #eef; color: darkred; }
table.nolinestbl td a:visited { background-color: #eef; color: darkred; }
table.nolinestbl td a:hover { background-color: #eef; color: darkred; }
table.nolinestbl td a:active { background-color: #eef; color: darkred; }

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

.align-center {
    text-align: center;
}

.width-30em {
    width: 30em;
}

.width-30_5em {
    width: 30.5em;
}


table.normaltbl {
/* TO DISPLAY BACKGROUND */
/*    position: relative; */
/*    top: -4px; */
/*    left: -4px; */
    border-collapse: collapse;
    background-color: #eef;
    width: 536px;
}
table.normaltbl caption {
    text-align: center;
    border: 1px solid gray;
    border-bottom: none;
    background-color: #b4b9dc;
}
table.normaltbl th { background-color: #c5caed; border: 1px solid gray; }
table.normaltbl tr { text-align: left; }
table.normaltbl td {
    text-align: left;
    border: 1px solid gray;
    padding: 0.45em;
/*    padding: 6px;*/
}
table.normaltbl td.td-center { text-align: center; }

table.normaltbl td label { padding-left: 0.5em; }

table.normaltbl td a:link { background-color: #eef; color: darkred; }
table.normaltbl td a:visited { background-color: #eef; color: darkred; }
table.normaltbl td a:hover { background-color: #eef; color: darkred; }
table.normaltbl td a:active { background-color: #eef; color: darkred; }


h1,h2,h3,h4,h5,h6 {
/*    color: #1e2140;*/
    color: #3e4160;
}


/* body */
body {
    background: #cccddd repeat scroll 0%;
    border: 1px solid black;
	font-family: verdana,arial,helvetica,clean,sans-serif;
}


/* header */
div#hd {
    background: #444455 url('../images/HdrLogo-Slice4x116.jpg') repeat-x scroll 0% 50%;
    height: 116px;
/*    border: 1px solid orange;*/
}
div#hd #hdr-links {
    margin: 0em;
    min-height: 88px;
    position: relative;
}
div#hd #hdr-link1 {
    position: relative;
}
div#hd #hdr-link2 {
    position: absolute;
    left: 45%;
    top: 60%;
}
div#hd a#hdr-link-logo {
/*    margin: 0px;
    padding: 0px;
    text-decoration: none;
    color: black;
*/
/*    border: 2px solid yellow;*/
}
div#hd a img#wstlogo {
    /* image is 220x95, 220x116 */
/*    float: left;*/
    height: 95px;
    padding: 0 0 1.4em 1em;
/*    margin: 2em;*/
    width: 220px;
}
div#hd a#hdr-link-name {
    text-decoration: none;
    color: black;
/*    border: 2px solid yellow;*/
}
div#hd a h2#wst-name {
    font-weight: normal;
    font-size: 167%;
    margin: 0em;
    padding: 0em;
/*    border: 1px solid black;*/
}
div#hd a:link { background-color: transparent; color: transparent; }
div#hd a:visited { background-color: transparent; color: transparent; }
div#hd a:hover { background-color: transparent; color: transparent; }
div#hd a:active { background-color: transparent; color: transparent; }

/* Menu bar on top */
div#menubar {
    height: 29px;
    margin: 0px;
    position: relative;
    width: 100%;
/*    border: 1px solid white;*/
}
div#menubar ul {
    /*IMPORTANT: Re-do menubar image to be 37 pixels for Firefox (IE???) -- maybe */
    background: transparent url('../images/MenuBar2-Slice750x1.jpg') repeat-y scroll 0% 50%;
    height: 29px;
    line-height: 16px;
    margin: 0px;
    padding: 0px 0px 0px 24.5em;
    position: relative;
}
div#menubar li {
    float: left;
    list-style-type: none;
    margin: 6px 0px;
    padding: 0px;
    white-space: nowrap;
}
div#menubar li a {
    background: transparent;
    text-decoration: none;
    font-size: x-small;
    padding: 2px 16px;
    color: white;
}
div#menubar li a:link { color: white; }
div#menubar li a:visited { color: white; }
div#menubar li a:hover {
    background-color: #b1cbb7;
    color: black;
    /* border: 1px solid black;  */
    background-image: url('../images/ltbluemenu.gif');
    background-repeat: norepeat;
    background-position: 0% 50%;
}
div#menubar li a:active {
    background-color: #b1cbb7;
    color: white;
    /* border: 1px solid black; */
}


/* body div where most everything goes */
/* wrap all sections into a div id=yui-b, then a div class=inbox */
/* only 1 page title as h1 id=pagetitle */
div#bd {
    background-color: #f7f6f0;
    /*WANT: min-height to cover length of sidebar, IE7.js fixes work! */
    min-height: 684px;
}
#yui-main {
    background: #f7f6f0 url('../images/WhiteSideGrayGrad-Clipped-Sliced4x55.gif') repeat-x scroll 0% 0%;
}
#tagline {
	height: 55px;
	width: 332px;
	padding-left: 2em;
	padding-bottom: 2.5em;
}


/* sidebar */
div#sidebar {
    background: #f7f6f0 url('../images/SideBarItalics2WithSideLines-180x328.jpg') no-repeat scroll 0% 0%;
    margin-top: 1px;
    height: 328px; /* No min-height For IE, but height ok for Firefox */
	margin-left: 2em;
    padding-top: 1em;
	width: 180px;
/*    border: 1px solid yellow;*/
}
div#sidebar ul {
    padding-top: 1em;
/*    padding-top: 2em;  For IE Only, see HTML */
}
div#sidebar ul li {
/*    border: 1px solid black;*/
    list-style-type: none;
    font-size: 85%;
/*    display: block;*/
    line-height: 100%; /* NEEDED for IE ONLY to calc box height */
    padding: 0.5em 0em; /* NEEDED for IE and FF -- to be same as li a */
/*  margin: -0.2em 0em;  NEEDED for IE ONLY, see HTML-to remove extra space between li's */
}
div#sidebar li a {
    text-decoration: none;
    color: black;
    line-height: 100%;/* NEEDED for IE and FF to calc box height */
    padding: 0.5em 0em; /* NEEDED for IE and FF -- to be same as li */
/*    margin: -0.2em 0em;  NEEDED for IE ONLY, see HTML-to remove extra space within li's */
    display: block;  /* NEEDED for IE and FF */
}
div#sidebar li a:link { color: black; }
div#sidebar li a:visited { color: black; }
div#sidebar li a:hover {
    background-color: blue;
    color: white;
/*    border: 1px solid black;*/
    background: silver url('../images/BlueHdrImage.gif') repeat scroll 0% 50%;
    padding: 0.5em 1em 0.5em 0em;
/*    padding: 0.68em 1em 0.68em 0em; --works in Firefox, too big for IE */
    line-height: 100%; /* NEEDED for IE */
}
div#sidebar li a:active {
    background-color: #b1cbb7;
    color: white;
    /* border: 1px solid black; */
}
div#sidebar .subsidebar {
    margin-left: 1em;
    padding-top: 0em;
}
div#sidebar .subsidebar li {
    padding: 0.2em 0em;
}
div#sidebar .subsidebar li a {
    padding: 0.2em 0em;
}
img#dividerln {
    float: right;
    margin-top: -1em;
    min-height: 312px;
}
.sidenote {
    display: block;
    border: 1px solid black;
/*    background-color: #dddeee;*/
    background-color: #d7d5fc; /*WAS cornsilk(fff8dc); MAYBE bg color of info box #d7d5fc*/
    margin: 10em 0.75em 0em 0.75em;
    padding: 1em;
}

/* footer */
div#ft {
    background-color: #f7f6f0;
/*    text-align: center;*/
    height: 8em;
}
div#wstfoot {
/*    border: 1px solid blue;*/
    padding: 1.5em 12em 1em 12em;
}
div #footbox {
    margin: 0em 2em;
    padding: 1em 0em;
    position: relative;
}
div#footbox  ul {
    /* color: #00274b - used to extend the box verically in a table cell */
	background-color: #1e2140;
	border: 1px solid #ccc;
    height: 2em;
	margin: 0px;
	padding: 0.1em 2em;
	text-align: center;
}
div#footbox li {
    float: left;
    list-style-type: none;
    margin: 4px 0px;
    padding: 0px;
    white-space: nowrap;
    background: transparent;
	color: white;
}
div#footbox li a {
    background: transparent;
    text-decoration: none;
	display: inline;
    font-size: 85%;
    padding: 0em 3.1em;
/*    background-color: #f7f6f0;
    color: #00287A;*/
	background-color: transparent;
	color: white;
}
div#footbox a:link { background-color: #f7f6f0; color: #00287A; 
	background-color: transparent;
	color: white;
	}
div#footbox a:visited { background-color: #f7f6f0; color: #00287A; 
	background-color: transparent;
	color: white;
	}
div#footbox a:hover { background-color: #f7f6f0; color: #00287A; 
	background-color: transparent;
	color: white;
    background-color: #b1cbb7;
    color: black;
    /* border: 1px solid black;  */
    background-image: url('../images/ltbluemenu.gif');
    background-repeat: norepeat;
    background-position: 0% 50%;
	}
div#footbox a:active { background-color: #f7f6f0; color: #00287A; 
	background-color: transparent;
	color: white;
	}

#bottomline { padding-top: 0.5em; text-align: left; }
#copyr { margin-left: 2em; font-size: x-small; color: gray; }