html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}
body {
	background-color: #e6e6e6;
	font-family: Helvetica Neue, Arial, sans-serif;
	color: #333;
}

.attention { color: #fa1312; }

a img {
	border: none;
}
a.nonchalant { color: inherit; text-decoration: inherit; }
a.nonchalant:hover { text-decoration: underline; }

#header {
	position: relative;
	background-color: #bfbfbf;
	min-height: 86px;
	_height: 83px;
	padding: 3px 20px 0 20px;
}
#header #logo {
	vertical-align: middle;
}
#header #title {
	font-family: Georgia, Time New Roman, Times, serif;
	font-size: 30px;
	margin: 10px 6px;
	vertical-align: middle;
}
#tabs {
	position: absolute;
	bottom: 0;
	left: 20px;
}
#tabs a {
	display: block;
	float: left;
	margin: 0 2px 0 0;
	height: 20px;
	padding: 4px 10px 2px 10px;
	border-color: #b5b5b5;
	border-width: 1px 1px 0 0;
	border-style: solid;
	background-color: #999999;
	color: white;
	font-weight: bold;
	text-decoration: none;
	font-size: 14px;
	text-align: center;
}
#tabs a.selected {
	background-color: #e6e6e6;
	border-color: #c8c8c8;
	color: #333;
}
#tabs a:hover {
	background-color: white;
	border-color: #c8c8c8;
	color: #333;
}

.headerBlock {
	margin: -12px -12px 15px -12px;
	padding: 12px;
	padding-top: 12px;
	background-color: #ebf3ff;
}

#breadcrumb {
	font-size: 11px;
	font-weight: normal;
	color: #4e4e4e;
}
#breadcrumb a {
	color: #4e4e4e;
}

.headerBlock h1 {
	margin: 0;
}
.headerBlock h1 + p.subtitle {
	margin-top: 2px;
	margin-bottom: 0;
}


#user {
	padding: 0;
	margin: 0;
	font-size: 11px;
	font-weight: normal;
	position: absolute;
	right: 20px;
	top: 11px;
	color: #4e4e4e;
}
#user a {
	color: #4e4e4e;
}

#main {
	min-width: 750px;
	_width: 750px;
	padding: 20px 20px 0 20px;
	margin-bottom: 20px;
}

#dialog {
	width: 450px;
	margin-top: 1em;
	margin-left: auto;
	margin-right: auto;
}
#dialog form {
	position: relative;
	margin: 40px 14px;
}

#columns {
	position: relative;
	_width: 100%;
}
#columns #content {
	width: 70%;
}
#sidebar {
	position: absolute;
	left: 70%;
	right: 0;
	top: 1px;
}
.sidebar {
	padding-left: 20px;
	font-size: smaller;
}

#footer {
	margin: 30px 0;
	padding: 0 20px;
	text-align: center;
	font-size: 11px;
}
#footer a {
	color: #4e4e4e;
}

h1 { font-size: 24px; }
h2 { font-size: 16px; }

.shadowBox {
	position: relative;
	background-color: transparent !important;
	background-color: #e6e6e6;
	margin: 0 -11px 20px 0;
	padding: 0px 10px 11px 0px;
	zoom: 1; /* for IE */
}

.shadowBox .corner, .shadowBox .side {
	display: block !important;
	display: none;
	background-color: transparent !important;
	background-color: #e6e6e6;
	position: absolute;
}

.shadowBox .r {
	width: 10px;
	right: 0;
	top: 11px;
	bottom: 14px;
	background-image: url('shadowR.png');
	background-repeat: repeat-y;
}
.shadowBox .b {
	height: 11px;
	bottom: 0;
	left: 11px;
	right: 14px;
	background-image: url('shadowB.png');
	background-repeat: repeat-x;
}

.shadowBox .bl {
	left: 0;
	bottom: 0;
}
.shadowBox .br {
	right: 0;
	bottom: 0;
}
.shadowBox .tr {
	top: 0;
	right: 0;
}
.shadowBox div.content {
	position: relative;
	border-right: solid #cccccc 1px;
	background-color: white;
	padding: 12px;
}

.sidebar h2 {
	font-size: 14px;
	font-weight: normal;
	border-bottom: solid #333 1px;
	margin-top: 0;
}
.sidebar h3 {
	font-size: 110%;
	font-weight: bold;
}
#content h2 {
	background-image: url("headingBackground.png");
	background-repeat: repeat-x;
	background-color: #808080;
	color: white;
	_color: black; /* For some reason IE6 will only display the background on these headers once per page so you need a dark color so it's not white on white. */
	text-shadow: #333 1px 1px 1px;
	font-size: 100%;
	margin: 1em -4px;
	padding: 7px 4px 8px 4px;
}

img.icon { border: none; }
a.iconAndLink { text-decoration: none; }
a.iconAndLink img.icon { vertical-align: middle; }
a.iconAndLink span.link { text-decoration: underline; }

a.iconAndLink.nonchalant:hover { text-decoration: inherit; }
a.iconAndLink.nonchalant:hover span.link { text-decoration: underline }

img.majorIcon { float: left; z-index: 1; width: 48px; height: 48px; }
div.major { margin-left: 60px; min-height: 48px; _height: 48px; margin-bottom: 1em; padding: 1px; font-size: smaller; }
div.major h3 { font-size: 120%; margin: 0.2em 0 0.5em 0; }

.note { color: #555; font-size: 88%; }
.note:before { content: "Note: "; color: black;}
.unspecified { color: #aaa; font-style: italic; }
.disabled { color: #aaa; }


table { border-spacing: 0px }
th { text-align: left; }
th.column { font-size: smaller; text-decoration: underline; }
.odd { background-color: #f0f0f0; }
td, th { vertical-align: top; }
td.number { text-align: right; }
td.line, th.line { white-space: nowrap; }
td.narrow, th.narrow {width: 10px; }

table.list { border-collapse: collapse; }
table.list th, table.list td { padding-right: 1em; }

table.form { border-collapse: collapse; }
table.form th { padding-right: 1em; vertical-align: top; }
table.form td label { margin-right: 1em }

.required { font-weight: bold; }
.required:after { content: "*"; color: red; }
.errors { color: red; font-weight: bold; margin: 0px; }
ul.errors { list-style: none; padding: 0px; }
.error {
	background-color: #fdd !important;
	background-image: url("/files/SilkIcons/error.png");
	background-repeat: no-repeat;
	background-position: 98% 0;
}
.error-message {
	background-color: #fcc;
	color: darkred;
	padding: 5px;
}

.warning {
	padding: 5px 10px;
	border: solid 2px gold;
	background-color: #ffc;
}

.example { font-style: italic }

.description { font-size: smaller; color: #555 }
.subdued { color: #777; }
.subdued:hover { color: blue; }
.actions { font-size: smaller; white-space: nowrap }

@media screen {
	.printOnly { display: none; }
}

table.results {
	width: 100%;
	border-collapse: collapse;
	border: solid black 2px;
	margin: 1em 0;
	font-size: smaller;
}
table.results .title {
	font-weight: bold;
	background-color: yellow;
	vertical-align: middle;
}
table.results td, table.results th {
	padding: 5px;
	border: solid black 1px;
}
table.results td { text-align: center; }
table.results td {
	border: solid 1px black;
}
table.results td.measureName {
	font-weight: bold;
}
table.results td.measureColor {
	padding: 0;
	height: 10px;
}
table.results td.season {
	font-weight: bold;
}
table.results tr.seasons th, table.results tr.targets td { 
	border-bottom-width: 2px;
}


.interpretationMatrix { border-collapse: collapse; }
.interpretationMatrix th.column { text-align: center; }
.interpretationMatrix td { vertical-align: middle; text-align: center; }
.interpretationMatrix input { display: block; height: 20px; font-size: 15px; margin: 3px; width: 50px; text-align: center; }
.interpretationMatrix .threshold { display: block; font-size: 18px; margin: 5px; padding: 2px; width: 50px; text-align: center; }
.interpretationMatrix .graphProxy { 
	width: 100px;
	height: 29px;
	font-size: smaller;
	border-top: solid black 1px;
	padding: 0 5px;
}
.interpretationMatrix .graphProxy.max { 
	border-top: none;
}
.interpretationMatrix .graphProxy.below { 
	height: 30px;
}
.interpretationMatrix .graphProxy div { 
	height: 100%;
	line-height: 29px;
}
.interpretationMatrix .graphProxy.above div { 
	background-color: #AAAAFF;
}
.interpretationMatrix .graphProxy.meets div { 
	background-color: #AAFFAA;
}
.interpretationMatrix .graphProxy.below div { 
	background-color: #FFFFAA;
}
.interpretationMatrix .graphProxy.risk div {
	background-color: #FFAAAA;
}

#lightbox .content {
	min-height: 100px;
	_height: 100px;
}
#lightbox h1 {
	border-bottom: 1px solid #D9D9D9;
	margin: -12px -12px 20px -12px;
	padding: 12px 12px 12px 12px;
	background-color: #F6F1B2;;
	width: 100%; /* for IE */
}

p.formControls {
	text-align: right;
}
p.formControls img {
	vertical-align: middle;
	margin-right: 0.5em;
}

input[type="image"], .button {
	vertical-align: middle;
	margin-right: 0.5em;
}

p.withRule {
	margin-top: 20px;
	padding-top: 20px;
	border-top: solid #c0c0c0 1px;
}

.nowrap {
	white-space: nowrap;
}

#flash .notice {
	background-image: url(/files/SilkIcons/accept.png);
	background-repeat: no-repeat;
	background-position: 8px 11px;
	border: solid 2px darkgreen;
	background-color: lightgreen;
	padding: 10px 10px 10px 30px;
	margin-bottom: 10px;
}
#flash .error {
	background-image: url(/files/SilkIcons/error.png);
	background-repeat: no-repeat;
	background-position: 8px 11px;
	border: solid 2px darkred;
	background-color: #fdd;
	padding: 10px 10px 10px 30px;
	margin-bottom: 10px;
}
.clear {
	clear: both;
	}
.center {text-align: center;}	

.aboveStandard { 
	background-color: #AAAAFF;
}
.meetsStandard { 
	background-color: #AAFFAA;
}
.belowStandard { 
	background-color: #FFFFAA;
}
.atRisk {
	background-color: #FFAAAA;
}
#incompatibleBrowser a {
	font-size: 11px;
	position: absolute;
	right: 20px;
	top: 30px;
	height: 1.25em;
	text-align: right;
	color: white; 
	background: #FF9999; 
	padding: 2px 2px 2px 4px; 
	font-style: italic; 
	font-weight: bold; 
	text-decoration: none;
}
#incompatibleBrowser a:hover { text-decoration: underline; }

a.delete {
	color: red;
}
.hasPlaceholder {
	color: #777;
}

.gradingKeyDetail {
	margin: 1em 5%;
	width: 90%;
}