@import url(../_res/css/nea.css);

.home { background-image: url(../_res/images/nea-academy/bg-home-academy.gif); }
.home #bg-extra { background-image: url(../_res/images/nea-academy/bg-home-academy-extra.gif); }
.home #content { background-image: url(../_res/images/design/bg-home-2-boxes.gif); }

.home #nav-tools,
.home #nav-section {display: none;}

.drill #bg-extra { background-image: url(../_res/images/nea-academy/bg-drill-academy-extra.gif); }
.drill { background-image: url(../_res/images/nea-academy/bg-drill-academy.gif); }

.chart {
  font-family: Verdana, Arial, sans-serif;
}

.chart-labels {
  font-family: Verdana, Arial, sans-serif;
  font-weight: bold;
  font-size: 12px;
}

.chart-link {
  text-decoration: none;
}
.chart-link-wrap {
  border-bottom: 1px solid lightgrey;
  vertical-align: bottom;
  margin-bottom: 2px;
  
  font-family: Verdana, Arial, sans-serif;
  font-weight: bold;
  font-size: 10px;
}
.chart-link-cell { width: 100%; }

.chart-bar { border-left: 2px solid lightgrey; border-right: 2px solid lightgrey; }

.chart-bar a {display: block}

.chart-bar.first {
  border-top: 2px solid lightgrey;
}
.chart-bar.cell {
  border-width: 0px 1px 1px 0px;
  border-style: solid;
  border-color: lightgrey;
}

.chart-legend {
  color: darkblue;
  background-color: lightgrey;
  font-family: Verdana, Arial, sans-serif;
  font-weight: bold;
  font-size: 10px;
  text-transform: uppercase;
  padding-bottom: 10px;
  padding-left: 8px;
}

.chart-legend p {
  font-size: 9px;
  margin-bottom: 4px;
}

.chart-legend .color-square {
  width: 8px;
  height: 8px;
  border: 1px solid black;
  float: left;
  margin-top: 1px;
}

.chart-legend .color-square.average {
  background-color: #340034;
}
.chart-legend .color-square.sd {
  background-color: #707098;
}
.chart-legend .color-square.all-schools {
  /*background-color: #ff7034;*/
  background-image: url('/images/results/all_schools_fill.png');
}
.chart-legend .color-square.ninetieth {
  /*background-color: #ffbb34;*/
  background-image: url('/images/results/ninetieth_percentile_fill.png');
}

.chart-legend .color-label {
  font-size: 8px;
  float: left;
  margin: 1px 8px 4px 3px;
}

.logo-sub img { margin: 9px 0 0 19px; }

/* remove NEA panel until its site targets exist
#nea-panel, #nea-panel-menu {display: none;}
#brand {border-top: 3px solid #002E68;}
 */


/* nav items are academy only! */
#nav-main { height: 55px; }
#nav-main li {
	width: 239px;
	height: 55px;
 }
#nav-main li#nav-three { width: 240px; }  /* 192px for 5 tabs */

#nav-one span { background-image: url(../images/keys/nav-about4.gif) }
#nav-two span { background-image: url(../images/keys/nav-schools4.gif) }
#nav-three span { background-image: url(../images/keys/nav-survey4.gif) }
#nav-four span { background-image: url(../images/keys/nav-facilitator4.gif) }
/* #nav-five span { background-image: url(../images/keys/nav-coachs.gif) } */

/*	#nav-one li { background-image: url(../_res/images/nea-academy/bg-nav-main-dots-online.gif); }  */
	#nav-one li { background-image: url(../images/keys/bg-nav-main-dots-online239.gif); }  
	#nav-five li { background-image: url(../_res/images/nea-academy/bg-nav-main-dots-deans.gif); }

	/* hover styles-subnav */
	#nav-one ul li a:hover { 
		background-color: #021449;
		background-image: url(../_res/images/nea-academy/bg-nav-main-online.gif);
		color: #aec9ff;
	}
	
	#nav-two ul li a:hover { 
		background-color: #6c6300;
		background-image: url(../_res/images/design/bg-nav-main-olive.gif);
		color: #e3dc4d;
	}
	#nav-three ul li a:hover { 
		background-color: #b25900;
		background-image: url(../_res/images/design/bg-nav-main-orange.gif);
		color: #f8d789;
	}
	#nav-four ul li a:hover { 
		background-color: #7e0806;
		background-image: url(../_res/images/design/bg-nav-main-red.gif);
		color: #ffc3b1;
	}
	
	#nav-five ul li a:hover {
		background-color: #1c67a2;
		background-image: url(../_res/images/nea-academy/bg-nav-main-deans.gif);
		color: #aad1e5;
	}

	#nav-main li li a:link,
	#nav-main li li a:visited {
		width: 204px; /* prev 156px */
	}




/* li.o only exists for js rolloevers */
/*   - background position applies based on site/height */
#nav-main li:hover a span,
#nav-main li.o a span,
#nav-main a span.on { background-position: 0 -55px; }

.home #content-col-a div p a { color: #ED8E00; }

.home #content-col-a h2 a, 
.home #content-col-a a h2 { font-weight: normal; }

.home #content-col-a h2,
.home #content-col-a div.box a { color: #b31f17; }

.home #content-col-a li a { background-image: url(../_res/images/nea-academy/bg-list-dots.gif); }
/* .home #content-col-a div p { margin: 15px 0 10px 19px; }
.home #content-col-a div.box p { margin: 0; } */
.home #content-col-b a { color: #ed8e00; }

#content .rail-login p.rail-ad-more a,
#content .rail-login p.rail-ad-more {
	color: #21439c;
}

#site-info { background-image: url(../images/keys/bg-4-siteinfo.gif); }

/* obiki enhancements */
/*div.obiki-component-static {
  position: relative;
  top: 0;
  left: 0;
}
div.obiki-component-buttons {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1000;
}
*/

/* obiki workarounds */
#content-blurb div.obiki-component-static,
#content-blurb div.obiki-component-buttons,
#content-col-a div.obiki-component-static,
#content-col-a div.obiki-component-buttons,
#content-col-b div.obiki-component-static,
#content-col-b div.obiki-component-buttons {
	border: none;
	color: inherit;
	padding: 0;
}

.home #content-col-a div.obiki-component-buttons li a,
.home #content-col-b div.obiki-component-buttons li a,
.home #content-rail div.obiki-component-buttons li a{
  width: auto;
}
/* a table of data */
table.data th {
  background:#CCC;
}
table.data tr.alt {
  background:#EEE;
}
table.data tr.tfoot td, table.data tr.tfoot th {
  border-top:2px solid #000;
}
table.data th h2 {
  padding:0; margin:
}

/* things that the NEA stylesheet missed */
ol {
  padding-left: 2em;
}
ol li {
  list-style: outside;
  list-style-type: decimal;
}
blockquote {
  padding-left: 1em;
}

/* keys overrides of specific nea styles */
.drill #content form ul.options li {
  background: none;
  padding-left: 0;
}
.survey #content-cols { /* copied from nea.css .tour #content-cols */
  width: 930px; /* this was 960 for tour, but AFAICT it should've been 930 */
}
/* nav-crumbs and nav-utils are both 45% in original sheet, but we have long
   crumbs and currently no utils */
#nav-tools {
 padding-right:20px;
}
#nav-crumbs {
  width: 70%;
}
#nav-utils {
  float: right;
  width: 30%;
  margin:0;
}
#nav-utils li {
  width: auto;	
}
/* and finally some KEYS-specific styles */
.survey-nav,
#survey-questions table {
  margin: 1em auto;
  width: 930px;
  border-top: 1px solid #3d3d3d;
}
#survey-questions .question-number {
  font-size: 30px;
  text-align: right;
  vertical-align: top;
  width: 50px;
}
#survey-questions th {
  text-align: left;
  padding-right: 10px;
}
#survey-questions .choice {
  text-align: center;
  vertical-align: center;
  width:8%;
}
#survey-questions th.choice {
  vertical-align: bottom;
}
#survey-questions .choice label {
  display:block;
  width:auto; height:30px; 
}
#survey-questions .instructions {
  padding-top: 10px;
}
ul.survey-nav {
  list-style: none;
  position: relative;
  top: 0;
  left: 0;
}
ul.survey-nav li {
  display: inline;
}
ul.survey-nav input,
ul.survey-nav #progress {
  position: absolute;
  top: 15px;
}
ul.survey-nav .action-previous {
  left: 66px; /* the extra 6 pixesl account for table cell padding */
}
ul.survey-nav #progress {
  left: 250px;
}
ul.survey-nav .action-next {
  left: 870px;
}
ul.survey-nav .action-save {
  left: 750px;
}
ul.survey-nav #progress img {
  position: relative;
  left: 0;
  top: 3px;
}

.attention { 
  background-color: #fbf4e3;
  border: 1px solid #d59709;
  padding: 5px;
  margin: 20px 5px;
  font-family: Verdana, Arial, sans-serif;
}

p.button {  /* e.g. "take the survey" */
  background-color: #fbf4e3;
  border: 1px solid #d59709;
  padding: 5px;
  width: 250px;
  margin-left: 20px;
  margin-top: 5px;
  text-align: center;
  font-family: Verdana, Arial, sans-serif;
}
p.button a:link, p.button a:visited, p.button a:hover {
  text-decoration: none;
  color: #000;  /* #154888 dark blue */
}

/* user profile --------------------------- */

body.user_profile #content h1 {
  margin-bottom: 0;
}

div#user_stats_wrap {
	float: left;
	width: 350px;
	margin: 0 0 20px 0;
}
dl.user_stats {
	width: 350px;
	padding-top: 10px;
}
dl.user_stats dt,
dl.user_stats dd {
	display: block;
	float: left;
	margin-bottom: .5em;
	min-height: 1.5em;
}
dl.user_stats dt {
	font-weight: bold;
	width: 70px;
}
dl.user_stats dd {
	margin-left: 10px;
	width: 260px;
}
dl.user_stats dt.alt,
dl.user_stats dd.alt  {
	width: 350px;
	clear: both;
	margin-left: 0;
}
div#user_sidebar {
	width: 200px;
	margin-top: 10px;
	float: right;
}
p.password,
p.token {
  text-align: center;
  font: 48px Arial, Helvetica, Sans-Serif;
	background-color: #f7f5ed;
	padding: 16px;
	margin: 10px 0;
}

/* Schools and District */

.admin-tools {
	border: 1px solid #ffc3b1;
	background-color: #ffeeee;
	padding: 0.5em;
	margin:1em 0;
}
.admin-tools h4 {
	padding:0; 
	margin:0; 
}
.admin-tools .edit-report {
  font-style: italic;
}
#search_schools_results ul {
	margin-left: 2em;
	margin-bottom: 1em;
}

#search_schools_results ul {
        margin-left: 4em;
        margin-bottom: 1em;
}
#content ul.report-list li {
	background:none;
	list-style-type:circle;
	list-style-image:url(/images/keys/pdf.gif) !important;
}

/* Manage Affialtes */
.auto_complete {
	background-color:#FFF;
	border: 1px solid #ffc3b1;
}

.auto_complete ul {
	list-style-type:none;
}
.auto_complete li {
	cursor:hand;
}

div#content.clearfix { height: 400px; } /*  stopgap fix for busted pgs, ie6 version */

div>div#content.clearfix { height: auto; min-height: 400px; } /*  stopgap fix for busted pgs */

/* overrides of _res/css/nea.css to accomodate obiki editable regions */

html .blurb #content-blurb div {
	position: static;
}

.blurb #content-blurb div.col3 {
	position: absolute;
	bottom: 33px;
	left: 465px;
	border: 0;
	margin: 0;
	padding: 0;
}

.blurb #content-blurb div.h2 {
	font-size: 20px;
	margin: 0; padding: 0; 
	font-weight: normal;
	color: #21439C;
}

#content-blurb div.col3 {
	border: 1px solid #fff;
	padding: 18px 25px 18px;
	background-color: transparent;
	color: #002e68;
}
div.clear { clear: both }

/* this have is used in the survey signup demographics form */
#keys_signup_nav {
  overflow:hidden;
}
#keys_signup_nav input {
  margin:1px !important;
  border:0 !important;
  font-family: Arial !important;
  font-size: 9.5px !important;
  text-transform:uppercase;
  text-align:left;
  vertical-align:top;
  height:32px;
  width:125px; /* FF 3.5 wants 100 here .... grrr */
  padding:0 0 0 25px !important;
  line-height:1.1em;
  color:#FFF;
  background-color:#00C;
  background-repeat:no-repeat;
  background-image:url('/images/checkmark.png');
  background-position:0px center;
  cursor:pointer;
}
#keys_signup_nav input.p1 {
  background-color:#154888;
}
#keys_signup_nav input.p2 {
  background-color:#a69f00;
}
#keys_signup_nav input.p3 {
  background-color:#d59709;
}
#keys_signup_nav input.p4 {
  background-color:#b32e27;
}
#keys_signup_nav input.p5 {
  background-color:#cdc285;
}

/* Gear */
div#reportOptionsWrap {
	position: relative;
}
div#reportOptions {
	float: right;
	clear: right;
	top: 5px;
	right: 0;
	z-index: 50;
	padding: 5px 30px 5px 10px;
	border: 1px solid #cbd0d3;
	background-color: #ecf2ff;
}
div#reportOptionsPlaceholder {
	float: right;
	top: 5px;
	right: 0;
	width: 130px;
	height: 1px;
}
div#reportOptions.closed {
	margin-top: 4px;
	width: auto;
}
div#reportOptions.closed form {
	display: none;
}
div#reportOptions.open {
	position: absolute;
	width: auto;
	height: auto;
	padding-bottom: 10px;
}
div#content div#reportOptions.closed a.trigger {
	text-decoration: underline;
	padding-bottom: 5px;
}
div#content div#reportOptions.open a.trigger {
	color: #666666;
	margin-top: 0;
	font-weight: bold;
	text-decoration: none;
}
div#reportOptions label {
	display: block;
	width: 210px;
	margin: 10px 0 2px;
}
div#content div#reportOptions.open a.trigger img.gear {
	position: absolute;
	top: 5px;
	right: 5px;
}
div#content div#reportOptions.closed a.trigger img.gear {
	position: absolute;
	top: 11px;
	right: 6px;
}