/* CSS Stylesheet for a PBS Surveys pages template
The banner text is Garamond.
Colors in this application:
white: #FFFFFF
orange: #FF6600 (header, navbar background)
light blue: #66CCFF (banner background)
silver gray: #CCCCCC (subheader, subfooter background)
dark blue: #003399 (banner text, subheader title, footer background)
black: #000000
In UltraWebGrids:
NavajoWhite: #FFDEAD
OldLace: #FDF5E6
WhiteSmoke: #F5F5F5
LightSkyBlue: #87CEFA
For the edit template in datagrids:
Medium Seagreen: #3CB371
In the menu:
FloralWhite: #FFFAF0
With photos:
Photo table background and image border: #696969 (a dark gray).
For captions: Gainsboro: #dcdcdc"
description font: #000066
For floating descripions, pick a light color that contrasts with the dominant
color of the image, such as:
linen FAF0E6 
cornsilk FFF8DC 
ghostwhite F8F8FF 
lavender E6E6FA 
ivory FFFFF0 
lightsteelblue B0C4DE  
lightyellow FFFFE0 

Candidate colors (some better than others)
Gold: #FFD700
Brown: A52A2A
Chocolate: D2691E
Crimson: DC143C
Dark Khaki: BDB76B
Dark Seagreen: 8FBC8B
Light green: 90EE90

To adjust the page size for this site, take the following steps:
  1. The header, banner, bannerimage, centerarea, and contentarea widths must have the
     desired width.
  2. The header, chartTableWrapper, and chartFooter must have the
     same width in the Charts.css sheet.
  3. The chartTable must have a width approximately 25-30 pixels less.
  4. Related rules may need to be changed in the Print.css sheet.*/

body
{
	text-align: left;
	font-family: Verdana, Arial, Sans-Serif;
	font-size: 0.9em;
	font-style: normal;
	margin: 0px;
	background-color: #FFFFFF;
}

.newsList
{
	width: 100%;
}

.newsTitle
{
	width: 100%;
	background-color: LightSkyBlue;
	border: none;
	font-size: 1em;
	font-weight: bold;
}

.newsDate
{
	width: 60px;
	background-color: NavajoWhite;
	text-align:left;
	border: none;
	font-size: 0.8em;
	font-weight:normal;
}

.newsText
{
	width: 100%;
	background-color: White;
	border: none;
	font-size: 0.9em;
	font-weight: normal;
	font-style: italic;
}

.newsBody
{
	width: 100%;
	background-color: White;
	border: none;
	font-size: 0.9em;
	font-weight: normal;
}

.newsLink
{
	display:inline;
	font-size: 0.8em;
}

.infoPageBody, .popupBody
{
	margin-left: 1em;
	margin-right: 1em;
	margin-bottom: 1em;
	background-color: oldlace;
}

.helpImage
{
	border: none;
	/*If the border is none, the color shouldn't matter, but Firefox disagrees.*/
	border-color:White;
}

#header
{
	width: 760px;
	height: 144px;
	margin: 0;
	text-align:right;
	background-color: #FF6600;
}

.banner
{
	/*width: 778px;*/
	width: 760px;
	/*height: 175px;*/
	height: 144px;
	background-color: #FF6600;
}

.bannerReport
{
	width: 100%;
	background-color: #66CCFF;
}

#bannerImage
{
	position:relative;
	right: 0;
	top: 0;
	width: 760px;
	border: 0px;
	margin: 0px;
	padding: 0px;
}

.bannerImageReport
{
	width: 760px;
	position:relative;
	left: 0;
	top:0;
}

.bannerInfoArea
{
	float: left;
	margin-top: 0.2em;
	margin-right: 0.2em;
	margin-bottom: 0.2em;
	margin-left: 0.2em;
}

.bannerInfoTable
{
	border-collapse:collapse;
	background: #FFFFFF;
}

.bannerInfoRow
{
	background-color: #FFFFFF;
	vertical-align:top;
	height: 1.1em;
}

.bannerInfoCell
{
	text-align:left;
	vertical-align:top;
	padding-right: 0.25em;
	padding-left: 0.25em;
	padding-bottom: 0.25em;
	background: #F5F5F5;
}

.bannerInfoTitle
{
	font-size: 0.75em;
	font-weight: bold;
}

.bannerInfoImage
{
	vertical-align:top;
	width: 94px;
	height: 70px;
}

.bannerInfoName
{
    text-align:left;
	font-size: 0.75em;
}

.bannerInfoSchoolAddress
{
	display:block;
	font-size: 0.75em;
	line-height: normal;
	padding-left: 1em;
}

.applicationAlert
{
    font-size: 1em;
    font-weight: bold;
    color: Black;
}

#centerarea
{
	position: relative;
	top: 0px;
	left: 0px;
	width: 760px;
	margin: 0;
	padding: 0;
}

#contentarea
{
	/*width: 778px;*/
	width: 760px;
	background-color: #CCCCCC;
}

#subheader
{
	display: block;
	margin-left: 1%;
	margin-right: 1%;
	margin-bottom: 1%;
	background-color: #CCCCCC;
}

#contentmain

{
	left:0;
	padding: 1%;
	margin-left: 1%;
	margin-right: 1%;
	height: auto;
	background-color: #FFFFFF;
	font-size: 1em;
	width: 723px;
}

#tblTwoCols
{
	padding: 0px;
	margin: 0px;
	border: none;
	width: 100%;
	vertical-align:top;
}

#contentmainalt
{
	display: none;
	left:0;
	padding: 1%;
	margin-left: 1%;
	margin-right: 1%;
	height: auto;
	background-color: #FFFFFF;
	font-size: 1em;
}

.selectionArea
{
	padding-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	width: 100%;
	background-color: navajowhite;
}

.selectTable
{
	padding:1px;
	width:100%;
	border-collapse:collapse;
	border: none;
}

.selectInstructions
{
	padding-left:3px;
	padding-right:1px;
	padding-top:1px;
	padding-bottom:1px;
	border: none;
	text-align:left;
	font-size:0.9em;
	font-weight:bold;
}

.selectControls
{
	padding-left:3px;
	padding-right:1px;
	padding-top:1px;
	padding-bottom:1px;
	border: none;
	font-size:0.8em;
}

.photoTable
{
	float:right;
	padding:0.25em;
	margin-left: 0.25em;
	border-collapse:collapse;
	border: none;
	/*background-color:#696969;*/
	background-color: Black;
}

.photoImage
{
	border: none;
	/*border-top: #696969 thin solid; 
	border-right: #696969 solid;
	border-bottom: #696969 solid;
	border-left: #696969 thin solid;*/
}

.photoCaption
{
	font-family:Lucida Sans;
	font-size:smaller;
	background-color:gainsboro;
}

.docTable
{
	width: 100%;
	border: black thin solid;
	border-collapse: collapse;
}

.docHeaderCell
{
	background-color: #ffdead;
	padding-left:3px;
	padding-right:1px;
	padding-top:1px;
	padding-bottom:1px;
	border: 1px #000 solid;
	font-size:1em;
	font-weight:bold;
	text-align:center;
}

.docRowHeaderCell
{
	background-color: #87cefa;
	padding-left:3px;
	padding-right:1px;
	padding-top:1px;
	padding-bottom:1px;
	border: 1px #000 solid;
	font-size:0.9em;
	font-weight:bold;
	text-align:left;
}

.docCell
{
	padding-left:3px;
	padding-right:1px;
	padding-top:1px;
	padding-bottom:1px;
	border: 1px #000 solid;
	font-size:0.8em;
	text-align:left;
}

.docMenu
{
	/*font-family:Lucida Sans Unicode, Sans-Serif;*/
	font-family:Trebuchet MS, Helvetica, Sans-Serif;
	font-size: 1.1em;
	font-weight: bold;
}

.docLink
{
	font-family:Trebuchet MS, Helvetica, Sans-Serif;
	font-size:1.1em;
	font-weight:bold;
	color: Blue;
	text-decoration: underline;
}

.docCommand
{
	font-family:Tahoma, Geneva, Sans-Serif;
	font-size:1.1em;
	font-weight:bold;
	background-color: lightgrey;
	margin:0.1em;
}

.docControl, .docForm
{
	font-family:Verdana, Geneva, Sans-Serif;
	font-size:1em;
	font-weight:bold;
}

.docForm
{
	text-decoration:underline;
}

.pageWarningMsg
{
	/*Default is no display. */
	display:none;
	/* combination of width and padding-left and right settings
	works for both IE and Firefox.*/
	width: 98%;
	height: 2em;
	background-color: firebrick;
	color: White;
	margin-bottom: 0.5em;
	padding-top: 0.25em;
	padding-bottom: 0.25em;
	padding-left: 1%;
	padding-right: 1%;
	font-weight: bold;
	text-align:left;
	vertical-align:middle;
}

#subfooter
{
	display:block;
	margin-top: 1%;
	margin-left: 1%;
	margin-right: 1%;
}

.subHeaderTable, .subFooterTable
{
	width: 100%;
	border: none;
}

.subHeaderColLeft, .subFooterColLeft
{
	width: 40%;
	border: none;
	text-align: left;
	vertical-align: top;
}

.subHeaderColRight, .subFooterColRight
{
	width: 60%;
	border: none;
	text-align: right;
	vertical-align:top;
}

#frmTeamChecklist1 .subHeaderColRight

{
	text-align: left;
}

.subHeaderName, .subFooterName
{
	font-weight: bold;
	font-size: 1em;
	text-decoration: underline;
	color: #003399;
}

.subHeaderTitle, .subFooterTitle
{
	font-weight: bold;
	font-size: 1.3em;
	color: #003399;
}

.subHeaderInfo
{
	width: 60%;
	font-size: 0.9em;
	font-weight: bold;
	text-align:left;
}

.subHeaderVersion, .subFooterVersion
{
	font-size: 0.9em;
	font-weight: bold;
	text-align: left;
	text-decoration: none;
	color: #003399;
}

.helpBar
{
	float:right;
	width:100%;
}

.surveyLink, .surveyLinkChart
{
	height: 1.5em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	color: #FFFFFF;
	text-align: center;
	text-decoration: none;
	font-size: 1em;
	font-weight: bold;
	background: #003399;
	border-style: solid;
	border-width: 1px;
	border-color: #006699;
}

.surveyLinkChart
{
	height: 100%;
	width: 100%;
	font-size: 1em;
}

a.surveyLink:hover, a.surveyLinkChart:hover
{
	height: 1.5em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	color: #000000;
	text-align: center;
	text-decoration: none;
	font-size: 0.9em;
	font-weight: bold;
	background-color: #FFFFCC;
	border-style: solid;
	border-width: 1px;
}

a.surveyLinkChart:hover
{
	font-size: 1em;
}
	
.surveyCommand
{
	font-weight: bold;
}

.explanatoryText
{
	font-size: 0.9em;
}

#contentaltTable
{
	width: 100%;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
	border-bottom-style: none;
}

.contentaltMessage1
{
	font-size: 1.4em;
	font-weight: bold;
}

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

.contentmainHeader
{
	width: 100%;
	margin-top: 1.5em;
	text-align: left;
	font-size: 1.2em;
	font-weight: bold;
	color: #003399;
	border-top-style: solid;
	border-top-width: medium;
	border-top-color: Green;
}

#contentmain h3
{
	font-size: 1em;
	text-decoration: underline;
	font-weight: bold;
}

#contentmain h4
{
	font-size: 0.9em;
	font-weight: bold;
}

.contentmainLabel
{
	vertical-align: top;
	font-size: 0.9em;
	font-weight: bold;
}

.reference
{
	font-style: italic;
}

.dataHeader
{
	width: 100%;
	background-color: NavajoWhite;
	font-weight:bold;
}

.dataItem
{
	background-color: LightSkyBlue;
	width: 100%;
	border:none;
	padding:0.5em;
	margin:none;
}

#subfooterEmpty
{
	position: relative;
	left: 1%;
	width: 98%;
	height: 10px;
}

#footer
{
	position: relative;
	width: 100%;
	border-style: none;
}

.footerPanel
{
	width: 100%;
	border-top-style: solid;
	border-top-width: 5px;
	border-top-color: #000000;
	background-color: #003399;
}

.footerCell
{
	width: 60%;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	font-size: 0.7em;
	color: #FFFFFF;
}

.footerCellRight
{
	width: 40%;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	font-size: 0.7em;
	color: #FFFFFF;
	text-align: right;
}

a.footerLink.link { color: White; text-decoration: underline; }
a.footerLink:active { color: White; text-decoration: underline; }
a.footerLink:visited { color: White; text-decoration: underline; }
a.footerLink:hover { color: White; text-decoration: underline; }

.footerlogo
{
	width: 200px;
	float: right;
}

.surveyFooterSection1
{
	position: relative;
	top: 5px;
	width: 100%;
	text-align: left;
	border: none;
	height: 30px;
}

.surveyFooterSection2
{
	position: relative;
	top: 0px;
	width: 100%;
	text-align: left;
	border: none;
	height: 33px;
}

.surveyCopyright
{
	font-size: 0.7em;
	color: #003399;
}

.messageAlert
{
	font-size: 1.2em;
	font-weight: bold;
	color: Black;
	text-align:left;
}

.messageWarning
{
	font-size: 1.2em;
	font-weight: bold;
	color: Red;
	text-align:left;
}

.messageWarningTitle
{
	font-size: 1.4em;
	font-weight: bold;
	color: Red;
	text-align:right;
}

.popupMsgTitle
{
	font-size: 1.2em;
	font-weight:bold;
	text-align:center;
}

.popupMsgBody
{
	font-size: 1em;
	font-weight:normal;
	text-align:left;
}

.infoLink
{
	float:right;
	padding-left: 1em;
	padding-right: 1em;
	border-left: teal thin outset; 
	border-top: teal thin outset;
	border-right:teal thin outset;
	border-bottom: teal thin outset; 
	font-weight: normal;
	font-size: smaller; 
	text-decoration: none;
	color: white; 
	background-color: Navy;
}

/*Modal Popup*/
.modalBackground {
	background-color:Gray;
	filter:alpha(opacity=70);
	opacity:0.7;
}

.modalPopup {
	background-color:#ffffdd;
	border-width:3px;
	border-style:solid;
	border-color:Gray;
	width:250px;
}

.modalPopupBody {
	padding:3px;
	width:250px;
}

.modalPopupHeader
{
	background-color: #999999;
	width: 250px;
	height: 20px;
	font-weight: bold;
	font-variant: normal;
}