@charset "utf-8";
/* 
Styles applicable to the guidebooks
From 2009 cycle onwards, this style sheet is additive to se.css (before it was an alternative)
---------------------------------------------------------------------------------------------*/

/* Globals
--------------------*/
	body {width: 95%; max-width: 1000px; color: #666}
	a {color: #832b7b}

	#txtWrap {max-width: 700px}


/* EO Polo mint
--------------------*/
	#spinner {width: 120px; height: 120px; float: right; margin-top: -40px}


/* Tabbed page content
--------------------*/
	#tabContent {margin-bottom: 2ex; border: 1px solid #666; clear: both;
		padding: 0.5em 1.5em; min-height: 300px;}
	#tabContent h4 {margin-bottom: 0.2em; font-size: 110%}
	#tabContent h4 + p {margin-top: 0}
	#tabContent h4, #tabContent p, #tabContent ul {max-width: 56em}
	#tabContent table {width: 100%}
	#tabContent td {padding: 0.5ex 0.5em}
	#tabContent td {border: 1px solid silver}
	#tabContent th.mid, #tabContent td.mid {text-align: center}
	@media print {#tabContent {border-width: 0; padding: 0}}

	div.uah {float: left; background: #832b7b}
	div.uahBag {float: left; background: #f8f8f8; border: 1px solid #888; margin-right: 0.5em}
	@media print {div.uah {border-left: 1px solid #888; border-right: 1px solid #888}}


/* Navigation
--------------------*/
	#navTop {margin: -2ex 0 4ex 0; padding: 0}
	#navTop li {display: inline; margin: 0; padding: 0}

	#navTop ul {display: inline; margin: 0; padding: 0}
	#navSub1 li, #navSub2 li, #navSub3 li {display: none; font-size: 85%}
	#navSub1 a, #navSub2 a, #navSub3 a {color: #25408f}

	#levelDown {text-align: left}
	#levelUp {text-align: right}
	#levelDown, #levelUp {width: 15%; background-color: #eee; vertical-align: top; 
		padding: 3ex 1em; font-size: 1.1em; color: #25408f}
	#levelDown a, #levelUp a {color: #25408f}

	#descriptor {border: 1px solid silver; padding: 1px 5px; position: relative; 
		min-height: 100px}
	#descriptor p {font-size: 120%; padding-top: 0.5ex}
	#descriptor div {padding: 2px; background: white; color: #888; 
		position: absolute; top: -0.85em; left: 20px}

	@media print {#navTop, #levelDown, #levelUp {display: none}}


/* Tooltips
--------------------*/
	a.tt {position: relative; z-index:24; 
		text-decoration: none; border: 1px dotted #832b7b; padding: 0 0.2ex}
	a.tt span {display: none}
	a.tt:hover {z-index: 25} /* IE hack - something must be changed in the a tag for IE to execute it */
	a.tt:hover span {display: block; position: absolute; top: -1.5ex; left: 1em; width: 200px; 
		color: #444; font-size: 90%; text-decoration: none;
		padding: 0.5ex; border: 1px solid #832b7b; background: url(/images/white90.png) repeat}
	/* Adapted from http://trentrichardson.com/examples/csstooltips/ */


/* Comment display
--------------------*/
	#comments, #leaveComment {width: 400px; float: left; margin-bottom: 4ex}
	#leaveComment {width: 450px}
	#comments {margin-right: 2em}
	
	.cZone1, .cZone2, .cZone3 {margin: 0; padding: 2px 1em; border-color: #e8e8e8; border-style: solid}
	.cZone1, .cZone3 {background-color: #f0f0f0; border: 1px solid #e8e8e8}
	.cZone1 {border-width: 1px}
	.cZone2 {border-width: 0 1px 1px 1px}
	.cZone3 {border-width: 0 1px 1px 1px}
	.cZone1 h4 {color: black}
	.cZone1 h4, .cZone1 p {margin: 1ex 0}
	
	#allComments td {padding: 0.5ex 0.5em}
	#allComments td {border: 1px solid silver}
	#allComments th.mid, #tabContent td.mid {text-align: center}


/* Comment form
--------------------*/
	h2 {position: relative}
	#savePrompt1, #savePrompt2 {visibility: hidden; text-align: center; 
		border: 1px solid #832b7b; padding: 5px}
	#savePrompt1 {position: absolute; top: -10px; left: 20px; color: #832b7b; 
		background: url(/images/white90.png) repeat}
	#savePrompt2 {width: 300px; margin-left: 110px; background-color: #fffbe1}
	#userPlus {display: none}
	#captchaImg {margin: 10px 0 0 110px; width: 180px; height: 60px; border: 0}
	#sqlErr {margin: 10px; color: #cd2748}
	#captchaPrompt {margin: 0 10px 0 110px}
	#captchaErrMsg {margin: 0 0 0 110px; color: #cd2748}
	#loading {width: 24px; height: 24px; margin-top: 1ex; float: right; padding: 1px 2px}
	
	fieldset {border: 1px solid #e8e8e8; background: #f0f0f0; padding: 2ex 0}
	fieldset br {clear: both}
	legend {border: 1px solid #ddd; background: #f0f0f0}
	label {width: 100px; float: left; text-align: right; margin-right: 10px; font-weight: bold}
	input, select, textarea {width: 300px; float: left; padding: 1px 2px}
	input[type=submit] {width: 150px; float: right; margin-right: 10px}
	
	p.cue {clear: both; width: 300px; margin: 0 0 10px 110px; font-size: 90%}
	span.toomuch {color: #cd2748; font-weight: bold}
	
	input.mand, select.mand, textarea.mand, span.mand {background-color: #ebe1e6}
	.err {border: 2px solid #cd2748}
	
	@media print {#leaveComment {display: none}}


/* Case studies
--------------------*/
	body.case {max-width: 700px; background: url(/images/txtCaseStudy.gif) no-repeat 500px 80px}
	h2.case {color: white; background: #832b7b; padding: 5px; font-weight: bold; 
		font-size: 1.4em; max-width: 350px; margin-left: -20px; padding-left: 20px}
	#caseIntro {font-size: 1.6em; color: #8894b8}
	#caseIntro strong {color: #3e559c}
	#block1, #block2, #block3, #block4, #block5, #block6, #block7, #block8
		{float: left; font-size: 1.1em; font-weight: bold; text-align: center; color: white; 
			width: 12px; margin: 0 3px; padding: 2px 5px} 
	#block1, th.bgStrand1, tr.bgStrand1 th {background-color: #ffdd00}
	#block2, th.bgStrand2, tr.bgStrand2 th {background-color: #faa61a}
	#block3, th.bgStrand3, tr.bgStrand3 th {background-color: #ef4223}
	#block4, th.bgStrand4, tr.bgStrand4 th {background-color: #9e161a}
	#block5, th.bgStrand5, tr.bgStrand5 th {background-color: #8d297b}
	#block6, th.bgStrand6, tr.bgStrand6 th {background-color: #25408f}
	#block7, th.bgStrand7, tr.bgStrand7 th {background-color: #0089cf}
	#block8, th.bgStrand8, tr.bgStrand8 th {background-color: black}
	td.bgStrand1, tr.bgStrand1 td {background-color: #fff6d2}
	td.bgStrand2, tr.bgStrand2 td {background-color: #ffeacd}
	td.bgStrand3, tr.bgStrand3 td {background-color: #fdd6c3}
	td.bgStrand4, tr.bgStrand4 td {background-color: #e4c3b6}
	td.bgStrand5, tr.bgStrand5 td {background-color: #decbda}
	td.bgStrand6, tr.bgStrand6 td {background-color: #c8c7df}
	td.bgStrand7, tr.bgStrand7 td {background-color: #c7ddf3}
	#contact {width: 350px; clear: both; margin-top: 3ex}
	#contact th {width: 30%; font-weight: normal}
	#contact td {width: 70%; color: #888; font-size: 1.1em}
	table.caseContent {width: 100%; margin-bottom: 2ex}
	table.caseContent th {color: white; font-weight: bold; background: #2d2a7a}
	table.caseContent th, table.caseContent td {border: 1px solid #25408f; padding: 2px 4px}

/* General
--------------------------------------*/	
	ol.letter {list-style-type: upper-alpha}
	ol.numeric {list-style-type: decimal}
	ol.roman {list-style-type: upper-roman}
