@charset "utf-8";
/* 
Self-evaluation styles
© BTSR 2008-11
developed by Mark Iliff, Talespinner www.talespinner.co.uk
*/






	#maintClose {padding: 1em; border: 3px solid gray}
	#maintClose h3 {margin-top: 0}
	#maintClose th, maintClose td {padding: 0.2em 2em 0.2em 0}
	





/* Key colour
--------------------*/
	h3, th, strong, p.sMsg, #savePrompt1, .accent, .accent a, a.accent {color: #724d8b}
	#savePrompt1, #savePrompt2, .accent a, a.accent {border-color: #724d8b}
	h1 {background-color: #724d8b}


/* Globals
--------------------*/
	body {max-width: 56em} 
	h1 {font-size: 140%; color: white; 
		background: url(/images/topBar.gif) center left no-repeat; 
		padding: .5ex .5em; margin-left: -20px; padding-left: 20px}
	h2 {font-size: 180%}
	h1, h2, h3 {font-family: Tahoma, Geneva, Arial, sans-serif; font-weight: normal}
	h3 {font-size: 140%}

	li {margin: 1ex 0}
	
	a {color: #25408f}
	a {border-bottom-color: #25408f}
	
	strong {letter-spacing: .05em}

	th {text-align: left; font-size: 1.1em}

	fieldset {clear: both; margin-bottom: 4ex; padding: 2ex 0; 
		background-color: #e3e7f3; border: 1px solid #ced5ea}
	fieldset br {clear: both}

	legend {color: #25408f; font-size: 130%; margin-left: 1em; 
		border: 1px solid #b9c3e1; padding: 0 0.5em; background: #ced5ea}

	label, select, textarea {margin-top: 1ex}
	input[type='text'], input[type='password'] {margin-top: 1ex}
	label {width: 100px; float: left; text-align: right; margin-right: 10px; font-weight: bold}
	label {width: 200px}

	textarea {font-size: 100%}

	input, select, textarea, div.asField {width: 450px; float: left; padding: 1px 2px}
	select, textarea {background: white}
	input[type='text'], input[type='password'] {background: white}
	input[type='checkbox'] {width: 20px}
	input[type='radio'] {width: 20px; float: none; vertical-align: middle}
	input[type='submit'], input[type='reset'] 
		{width: 150px; float: right; margin-top: 1ex; margin-right: 10px}
	div.asField {margin-top: 1ex; margin-bottom: 1.5ex; background: white; border: 1px solid silver} 
	fieldset.locked, fieldset.locked input, fieldset.locked label 
		{font-size: 90%; color: gray; font-weight: normal; background: #eee; border-width: 1px}

	@media print {
		h1 {width: 100%; border-bottom: 1px solid black}
		input[type='submit'] {display: none}
	}


/* ID: main body
--------------------*/
	#mainContent {position: relative; min-height: 350px}

/* IDs: filters
--------------------*/
	form#filters {font-size: 85%}
	form#filters fieldset {margin: 0; background: #f8f8f8; border-color: #ddd; border-width: 1px 0;
		padding: 0 0 0 0.1em}
	form#filters legend {font-size: 160%; color: #57a490; background: #f8f8f8; border-color: #ddd}
	form#filters div.checkWrap {margin-bottom: 0.3em; padding-left: 0.5em; 
		border-right: 1px solid #ddd; font-weight: bold; color: #57a490}
	form#filters div.last {border-right: none}
	form#filters div.unf {float: right; border-right: none}
	form#filters input[type="checkbox"] {float: none; width: 15px}
	form#filters input[type="submit"] {font-size: 90%; width: 5em}
	form#filters div.checkWrap label {margin-right: 0.5em; font-weight: normal; color: #444}


/* IDs: Navigation
--------------------*/
	#navTop {margin: -2ex 0 4ex 0; padding: 0}
	#navTop li {display: inline; margin: 0; padding: 0}
	#navTop {margin-bottom: 1ex; padding: 0; font-size: 0.9em}
	#navTop a {color: #724d8b; border-bottom-color: #724d8b}
	#navTop a.eo {color: #52aac8; border-bottom-color: #52aac8}
	#navTop a.ts {color: #724d8b; border-bottom-color: #724d8b}

	#filter {margin: -2ex 0 2ex 0; background: #f8f8f8; padding: 0.3em 0.2em; 
		border-top: 1px solid #eee; border-bottom: 1px solid #eee}
	#filter li {display: inline; margin-right: 1em}
	
	#navFoot {clear: both; margin-top: 2em}
	#navFoot a {}

	@media print {#navTop, #filter, #levelDown, #levelUp, #navFoot {display: none}}

/* Strand-hop controls
--------------------*/
	#strandHop {position: absolute; right: 5px; top: 90px; width: 120px; height: 40px}
	#ctrlBack, #ctrlEject, #ctrlFwd {float: left; width: 40px; height: 40px; 
		background: 0 -40px no-repeat}
	#ctrlBack span, #ctrlEject span, #ctrlFwd span {display: none}
	#ctrlBack {background-image: url(/images/ctrlBack.png)}
	#ctrlEject {background-image: url(/images/ctrlEject.png)}
	#ctrlFwd {background-image: url(/images/ctrlFwd.png)}
	a:hover #ctrlBack, a:hover #ctrlEject, a:hover #ctrlFwd {background-position: 0 -80px}
	#ctrlBack.ctrlDead, #ctrlFwd.ctrlDead {background-position: 0 0}

/* IDs: Display
--------------------*/
	#userDisplay {display: block; float: right; width: 50%; margin: 1ex 0; 
		font-size: 0.6em; color: white}
	#userDisplay span {display: block; text-align: right; margin: 0; 
		line-height: 1.2; height: 1.2em; overflow: hidden}
	#userDisplay a {color: #ddd; font-size: 90%}
	#userDisplay a:hover {color: #fff}

	#edStatus {float: right; margin: 1ex 5px 2ex 0; background: black; color: yellow; 
		font-size: 0.8em; padding: 2px 8px; text-align: right; font-weight: bold}
	
	#locked {float: right; width: 32px; height: 47px; margin-top: -10px}

	#confSave {position: absolute; right: 5px; top: 140px; text-align: right; 
		width: 150px; margin-bottom: 5em; color: green; 
		background: white /*Last item fixes IE pixellation*/}

	#savePrompt1, #savePrompt2 {visibility: hidden; text-align: center; 
		border: 1px solid; padding: 5px}
	#savePrompt1 {position: absolute; top: -10px; left: 20px; 
		background: url(/images/white90.png) repeat}
	#savePrompt2 {width: 300px; margin-left: 110px; background-color: #fffbe1}
	#savePrompt1.overbut {left: 70%; right: 5px; top: 90px; min-height: 25px; padding-top: 8px}
	/* = over hop buttons - needs a class to hook IE6 corrective */
	#sqlErr {margin: 10px 0; color: #cd2748}

	#iconPlus {vertical-align: middle; width: 25px; height: 25px; margin-right: 0.5em}
	.icon20 {vertical-align: middle; width: 20px; height: 20px}
	.icon40 {margin-left: -18px; vertical-align: middle; width: 40px; height: 48px}

	#eoMap {width: 45%; float: left; margin-bottom: 1em}
	#eoMap th, #eoMap td {width: 25%; padding: 10px 5px}
	#eoMap th {padding-left: 0}
	#eoMap td {text-align: center; vertical-align: middle; border: 1px solid silver; font-weight: bold}
	#eoMap .wrap {position: relative}
	#eoMap .wrap .icon20 {position: absolute; z-index: 10; right: -5px; bottom: -10px}
	


/* IDs: footer (SE-specific elements)
--------------------------------------*/
	#commentRequest {clear: both; text-align: center; font-size: 0.9em; color: #ddd;
		border: solid silver; border-width: 1px 0; margin: 5ex 0 0 0; 
		padding: 0.5ex 0; background-color: #25408f; 
		font-family: Tahoma, Geneva, Arial, sans-serif; font-weight: normal}
	
	#devCred span {display: none}								/* Removes "& content" from developer credit */


/* Tag classes
--------------------*/
	div.checkWrap {margin-top: 1ex}
	div.checkWrap {float: left; padding: 0.2ex 0; padding-right: 1em}
	div.checkWrap input[type='radio'] {margin: 0; padding: 0; vertical-align: middle}
	div.checkWrap label {float: none; margin-right: 1em; white-space: nowrap;}

	div.parting {width: 100%; height: 0; border-bottom: 1px solid silver; 
		margin: 0.5em 0; padding: 0.5em 0} /* Padding is an IE tweak */

	div.clipBox {position: absolute; right: 30px; top: 0; width: 200px; 
		background: white; border: 1px solid silver; padding: 0.1ex 0.2em}
	div.clipBox h4 {color: silver; padding: 0; margin: 0; font-size: 100%; margin-bottom: 1ex}

	tr.shimmyDown th, tr.shimmyDown td {padding-top: 1.5em; padding-bottom: 0}
	tr.shimmyDown p {margin-bottom: 0; font-style: italic; text-align: justify; 
		border-top: 1px solid #eee}
	th.sandwich, td.sandwich {border: solid gray; border-width: 1px 0}

	p.cue {clear: both; width: 450px; margin: 0 0 1ex 210px; font-size: 90%; color: #4d66b1}
	p.cue span.toomuch {color: #cd2748; font-weight: bold}

	p.sMsg {font-size: 110%; font-style: italic; padding: 5px; background: #ffffc0}
	p.sMsg, ul.sMsg {border: 1px solid silver}

	span.mand, div.mand {border: 1px solid #e4d094}
	.mand {background-color: #ebe1e6}
	.err, span.err, div.err {border: 2px solid #cd2748}

	form.slim, p.slim {width: 500px}
	input.slim, textarea.slim, form.slim input, form.slim textarea, form.slim p.cue {width: 200px}
	form.slim input[type='submit'] {width: 120px; margin-right: 75px}

	input.mand, select.mand, textarea.mand, span.mand, div.mand {background-color: #e9e2cd}
	input[type='text'].crossHatch, select.crossHatch, textarea.crossHatch, .crossHatch 
		{background: url(/images/crossHatch.gif) repeat}
		
	ul.pic li, li.pic {list-style-image: url(/images/bullP.png);}
	
	img.led {float: left; width: 10px; height: 10px; margin-top: 1px; vertical-align: middle}


/* Workforce data
--------------------*/
	#wdProgress {width: 40%; float: right; clear: right; border-collapse: collapse; 
		margin: 1ex 0 1em 1em; font-size: 70%; border: 2px ridge; background: white}
	#wdProgress td {width: 17%; vertical-align: middle; padding: 0 0.3em; border: 1px solid gray}
	#wdProgress a {color: #666; border-bottom: none}
	#wdProgress a:hover {color: black}
	#wdProgress img.icon20 {float: left; margin: 0.5ex 0.5em 0 0}
	#indicatorCue {background: #3ac3e4; color: white; font-size: 125%}
	#summPrompt a {border-bottom: 1px dotted #52aac8}
	#summPrompt a:hover {border-bottom-style: solid}
	#summPrompt span {font-size: 95%}
		
	#procNav {width: 55%; float: left; margin-right: 1em; margin-bottom: 2em; font-size: 85%}
	#procNav td {width: 25%; height: 3em; font-weight: bold; text-align: center; 
		vertical-align: middle; border: 1px solid gray}
	#procNav td img {width: 8px; height: 10px}
	#procNav td.this {font-size: 110%; border: 2px solid black}
	#procNav td.fill {border: none}
	#procNav a {color: inherit; border-color: #444}

	#entries #selector {text-align: left; vertical-align: top; 
		font-size: 135%; padding: 10px; line-height: 1.1}
	#entries #selector span, #entries #selector a {color: #666; font-size: 65%}
	#entries #selector span {border: none}
	#entries th.major {width: 15%; padding-top: 1ex; vertical-align: top}
	#entries th.major span {border: dotted #bed3d8; border-width: 1px 0;}
	#entries th.minor {width: 10%}
	#entries td {text-align: right}
	#entries input {float: right; width: 70%; text-align: right}
	#entries input[disabled='disabled'] {border: 1px solid #bed3d8; background-color: #f3fafb}
	#entries #prompt {margin-left: 5.5%; text-align: center; color: #52aac8; 
		font-style: italic; font-size: 90%; border: solid #bed3d8; border-width: 1px 0; 
		background-color: #f3fafb}
	#entries th span {border: dotted #abd3d9; border-width: 1px 0}
	#entries a {border-color: #444}

	#empLevels th {vertical-align: bottom}

	#ncdLabel {float: right; width: 100%; margin-top: 2em; margin-right: 0}
	#ncdLabel input[type="checkbox"] {float: right; margin-right: 0}

	#recalc {float: right; height: 40px; width: 40px; margin-bottom: 1ex}
	#ncdPrompt, #wdSavePrompt {float: right; width: 350px; text-align: right; 
		color: #52aac8; font-size: 85%; font-style: italic}
	#wdSavePrompt {margin-bottom: 1ex}
	#ncdPrompt strong, #wdSavePrompt strong {color: #2e7d92; letter-spacing: 0}

	div.prove {position: relative}
	div.prove img {position: absolute; left: 30%; top: 1.8ex}
	
	td.divide {background: #f6f8f8}

	.thread1 {color: #00807d; background-color: #d8eceb}
	.thread2 {color: #807e00; background-color: #ecebd8}
	.thread3 {color: #7c0080; background-color: #ebd8ec}


/* Recurring elements
--------------------*/
	h2 + div.complet {margin-top: -1em; margin-bottom: 2em}
	div.completion {float: left; width: 100px; height: 12px; margin-right: 0.5em; margin-top: 0.2em; 
		padding: 1px 5px;  background: black}
	

/* Shading: H, M & L
--------------------*/
	td.rankH, tr.rankH td, tr.zebra td.rankH, span.rankH {background-color: #7dff91}
	td.rankM, tr.rankM td, tr.zebra td.rankM, span.rankM {background-color: #ffc569}
	td.rankL, tr.rankL td, tr.zebra td.rankL, span.rankL {background-color: #f8989a}


/* Open classes
--------------------*/
	.contrast {color: #ea5244}
	.contrast a, a.contrast {color: #ea5244; border-bottom-color: #ea5244}

	.secForm label {text-align: left; width: 300px; font-weight: normal; padding-left: 0.5em}
	.secForm textarea, .secForm select {width: 350px}
	.secForm input[type='text'] {width: 350px}
	.secForm input[type='submit'] {width: 150px}
	.secForm p.cue {margin-left: 320px; width: 350px}
	.secForm h3 label, h3 label 
		{margin: 0 0 0 0.3em; padding: 0.3ex 0; font-size: 0.8em; color: #25408f}

	.col1 {background-color: #e3e7f3}
	.col2 {background-color: #ced5ea}
	.col3 {background-color: #b9c3e1}
	.col4 {background-color: #a4b1d8}
	.prev {border: 1px solid #aaa; background-color: #ffffc0}

	tr.zebra th, tr.zebra td, th.zebra, td.zebra {background-color: #fbf3fb}
	.washOrange {background: #fdf1f2}
	.washPurple {background: #fbf3fb}
	
	.blue {color: #25408f}
	.sandbox {color: #5d7c4b}
	p.sandbox {padding: 0.3em 0.2em; font-style: italic; background: #e6ede1; 
		border-color: #b9ceac; border-style: solid; border-width: 1px 0}
	
	.exempt, .exempt h3 {color: #d64a44}


/* Cop-out: manual background colouring for EO levels by thread */
	.col1-0 {background-color: #d8eceb}
	.col2-0 {background-color: #b2d9d8}
	.col3-0 {background-color: #8cc6c4}
	.col1-1 {background-color: #ecebd8}
	.col2-1 {background-color: #d9d8b2}
	.col3-1 {background-color: #c6c58c}
	.col1-2 {background-color: #ebd8ec}
	.col2-2 {background-color: #d7b2d9}
	.col3-2 {background-color: #c48cc6}


/* IE hacks (see separate stylesheet for IE6-specific buggerations)
-------------------------------------------------------------------*/
/*
	fieldset {position: relative; padding-top: 1em}
	legend {position: absolute; top: -0.6em; left: 0} 
*/
		/* Together, compensate for leakage of background colour in IE */

	p.cue {border: 0}
	span.mand {line-height: 2.5}
	.elastic {font-size: 14px; line-height: 18px} /* IE needs sizes in px */


/* CSS3
-------------------------------------------*/
	h1 {
		text-shadow: 0 0 8px white;
		-moz-border-radius-topright: 60px;
		-moz-border-radius-bottomright: 60px;
		-webkit-border-radius-topright: 60px;
		-webkit-border-radius-bottomright: 60px;
		border-radius-topright: 60px;
		border-radius-bottomright: 60px;
		}
	fieldset, legend {
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		border-radius: 4px;
		}
	#savePrompt1, #savePrompt2 {
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius-radius: 10px;
		-moz-box-shadow: 0px 0px 20px #ffea01;
		-webkit-box-shadow: 0px 0px 20px #ffea01;
		box-shadow: 0px 0px 20px #ffea01;
		}
	#commentRequest {
		-moz-border-radius-topright: 30px;
		-moz-border-radius-bottomright: 30px;
		-webkit-border-radius-topright: 30px;
		-webkit-border-radius-bottomright: 30px;
		border-radius-topright: 30px;
		border-radius-bottomright: 30px;
		}
	div.completion, #edStatus {
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		}
	p.sMsg {
		text-shadow: 2px 2px 5px silver;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		}
	#procNav td.this {
		text-shadow: 1px 1px 5px silver;
		-moz-box-shadow: 2px 2px 5px gray;
		-webkit-box-shadow: 2px 2px 5px gray;
		box-shadow: 2px 2px 5px gray;
		}
	#entries #selector {
		-moz-border-radius: 20px;
		-webkit-border-radius: 20px;
		border-radius: 20px;
		}
	#wdProgress {
		background-color: rgba(255, 255, 255, 0.7); 
		-moz-box-shadow: 1px 1px 5px gray;
		-webkit-box-shadow: 0px 0px 20px #ffea01;
		box-shadow: 0px 0px 20px #ffea01;
		}