/*
	DO NOT edit this file for skin/theme customization!! Use theme.css!

	General CSS concepts used:
		1) Horiz dims are specified in PX, Vert dims are EM
		2) Max screen size supported is 960px
		3) When using two columns gutter should be 40px (sectionWidth - column1Width - columnWidth = 40px)
		4) CSS aimed at specific templates must all use the template id as the root
			selector. Example: #template-intro div {...}. This will allow us to merge
			all rules into one stylesheet later, and avoid conflicts.
		5) Rules that depend on javascript should start start the selector with ".js"

	@todo This CSS has gotten a little too complex and bloated. Simplify it!
			Entire thing should be percentage based perhaps, instead of just below 960px?
*/

html, body {padding:0; margin:0; line-height:normal; font-family:Calibri, Helvetica, sans-serif;}

audio {display:block;}
.js audio {display:none;} /* Set to display:block via script (prevents flashing) */

h1, h2, h3, h4, h5, h6, dt, select, button, input {font-family:"Trebuchet MS", Helvetica, sans-serif;}

h1, .js header .progress, .js header .instructions, nav, section, #narration {width:960px; margin:0 auto; position:relative;}
#narration {*z-index:1000;} /* make sure buttons are clickable in old IE (above main menu) */

section section {width:auto; margin:auto;}

header {
	background:#dff0f7 url('../images/banner-x.png') repeat-x top center;
	zoom:1;
}
header h1 {
	height:70px;
	text-indent:-999em;
	background:transparent url('../images/banner.png') no-repeat top center;
}

header h2 {
	_display:none;
	height:1px;
	margin:0;
	text-indent:-999em;
}

.js header .progress, .js header .instructions {color:#3b5ba8; font-size:90%; padding:5px 0;}
.js header .progress {z-index: 1; margin-bottom:-28px;}
.js header .instructions {width:840px; padding-left:120px; text-align:right;}

nav {z-index:999;}

.js .main-menu {float:right; position:relative; margin:0; padding:0; z-index:999; width:245px; height:45px; background:transparent url(../images/menu.png) no-repeat; _background-image:url(../images/menu-ie6.png);}
.js .main-menu li {position:absolute; top:0; width:45px; height:45px; margin:0; padding:0; list-style-type:none;}
/* This is set to display:block after the JS for the page finishes */
.js .main-menu a {display:none; height:100%; width:100%; background:transparent url(../images/menu.png) no-repeat; _background-image:url(../images/menu-ie6.png); text-indent:-999em;}

.js .main-menu .intro {left:0;}
.js .main-menu .intro a {background-position:0 -45px;}
.js .main-menu .intro a:hover, .js .main-menu .intro a:focus {background-position:0px -90px;}
.js .main-menu .tools {left:50px;}
.js .main-menu .tools a {background-position:-50px -45px;}
.js .main-menu .tools a:hover, .js .main-menu .tools a:focus {background-position:-50px -90px;}
.js .main-menu .checked a {background-position:-50px -135px;} /* tools checked */
.js .main-menu .checked a:hover, .js .main-menu .checked a:focus {background-position:-50px -180px;}
.js .main-menu .test {left:100px;}
.js .main-menu .test a {background-position:-100px -45px;}
.js .main-menu .test a:hover, .js .main-menu .test a:focus {background-position:-100px -90px;}
.js .main-menu .back {left:150px;}
.js .main-menu .back a {background-position:-150px -45px;}
.js .main-menu .back a:hover, .js .main-menu .back a:focus {background-position:-150px -90px;}
.js .main-menu .next {left:200px;}
.js .main-menu .next a {background-position:-200px -45px;}
.js .main-menu .next a:hover, .js .main-menu .next a:focus {background-position:-200px -90px;}
.js .main-menu .summary {left:0; width:245px;}
.js .main-menu .summary a {background-color:#fff; background-position:0 -225px;}
.js .main-menu .summary a:hover, .js .main-menu .summary a:focus {background-position:0 -270px;}

/* 
	top value must match ".main-menu li" height + (its top and bottom margin)
	left value is 960 - width of #main-menu
*/
.js .tools-menu {display:none; background:#f3f9ff; border:2px dotted #3b5ba8; width:auto; position:absolute; left:0; top:50px; margin:0; padding:3px 0; box-shadow:5px 5px 5px rgba(0,0,0,.25);}
.js .tools-menu li {float:none; position:relative; margin:0; height:auto; width:188px;} /* IE requires a specific width */
.js .tools-menu a {background:#f3f9ff; text-indent:0; color:#3b5ba8; text-decoration:none; font-weight:bold;}
.js .tools-menu a:hover, .js .tools-menu a:focus {background:#f3f9ff;}
.js .tools-menu a:hover span, .js .tools-menu a:focus span {background-color:#8FD6EE;}
.js .tools-menu span {display:block; background:#E0F0FE url(../images/menu.png) no-repeat; _background-image:url(../images/menu-ie6.png); padding:6px 10px 6px 35px; margin:5px; border-radius:5px; border:2px solid #3b5ba8;}
.js .tools-menu .resources span {background-position:10px -390px;}
.js .tools-menu .glossary span {background-position:10px -490px;}
.js .tools-menu .print span {background-position:10px -590px;}
.js .tools-menu .bookmark span {background-position:10px -690px;}
.js .tools-menu .open-bookmark span {background-position:10px -790px;}

section {clear:both;}

/* Skip navigation link */
#skip-to-main {position:absolute; right:10px; color:#fff; z-index:2; height:1.5em; margin-top:-1.5em;}
#skip-to-main:focus {margin-top:0;}
#main {outline:0;}

h3 {font-size:1.5em; font-weight:bold; color:#3b5ba8; margin:1em 0; text-shadow:3px 3px 3px rgba(0,0,0,.2);}

/* tabIndex -1 is only used to set focus via Javascript, and we don't want/need the outline */
[tabindex="-1"] {outline:none;}

footer {position:relative; top:20px; text-align:right; clear:both; padding:1em 0; margin:1em 0; zoom:1; background:transparent url(../images/footer.png) no-repeat 50% 100%;}

.topics {padding-left:20px; list-style:none; zoom:1;} /* Thanks IE6 */
.topics li {margin:0 0 .25em 0; padding-left:30px; background:transparent url(../images/internal-buttons.png) no-repeat 0 -700px; _background-image:url(../images/internal-buttons-ie6.png);}

.template .correct-option {background:transparent url(../images/internal-buttons.png) no-repeat 4px -1200px; _background-image:url(../images/internal-buttons-ie6.png);}

button {width:4.5em; margin-right:10px;}

#feedback {padding:5px;}
.feedback-correct {background:#e6efc2; border:2px solid #c6d880; color:#264409; box-shadow:3px 3px 3px rgba(0,0,0,.25);}
.feedback-try-again {background:#fff6bf; border:2px solid #ffd324; color:#514721; box-shadow:3px 3px 3px rgba(0,0,0,.25);}
.feedback-incorrect {background:#fbe3e4; border:2px solid #fbc2c4; color:#8a1f11; box-shadow:3px 3px 3px rgba(0,0,0,.25);}

/*
	Messages to display when no javascript is present
*/
.no-js-message strong {background:#fff6bf; border:2px solid #ffd324; color:#514721; display:block; font-size:1.5em; margin:1em auto 0 auto; padding:.5em;}
.js .no-js-message {display:none;}

/* Back to Top link hidden by default (set to visible by jQuery when needeed) */
.back-to-top {display:block; height:45px; width:45px; background:transparent url(../images/internal-buttons.png) no-repeat 0 -200px; _background-image:url(../images/internal-buttons-ie6.png); text-indent:-999em; text-align:left; opacity:0.4; filter:alpha(opacity=40);}
.js .back-to-top {display:none; position:absolute;}
.back-to-top:hover, .back-to-top:focus {opacity:0.6; filter:alpha(opacity=60);}

/* Glossary & Resources */
.glossary header, .resources header {background-color:transparent; height:auto; text-indent:0; zoom:1;} /* Thanks IE6 */
.glossary h2, .resources h2 {width:920px; margin:0 auto; color:#3b5ba8; line-height:45px; padding:0 20px; text-indent:0; height:auto; _display:block;}
.glossary header ul, .resources header ul {width:890px; margin:-45px auto 0 auto; padding:0 35px; overflow:hidden; height:45px; list-style-type:none;}
.glossary header li, .resources header li {float:right;}
.glossary header a, .resources header a {text-indent:0; color:#3b5ba8; text-decoration:none; font-weight:bold;}
.glossary header a:visited, .resources header a:visited {color:#3b5ba8;}
.glossary header a:hover, .glossary header a:focus, .resources header a:hover, .resources header a:focus {background:#8FD6EE;}
.glossary header a:hover span, .glossary header a:focus span, .resources header a:hover span, .resources header a:focus span {background-color:#8FD6EE;}
.glossary header span, .resources header span {display:block; padding:6px 10px 6px 35px; margin:5px; border-radius:5px; border:2px solid #3b5ba8; background:#E0F0FE url(../images/menu.png) no-repeat; _background-image:url(../images/menu-ie6.png);}
.glossary header .print span, .resources header .print span {background-position:10px -590px;}
.glossary header .close span, .resources header .close span {background-position:10px -890px;}
.glossary h3 {position:absolute; left:-999em;} /* how best to hide from sitghted users, but leave for screen readers?  */
.glossary nav {background:#dde8c7; margin-top:0;}
.glossary nav ol {padding:0 20px; margin:0; overflow:auto;} /* 35px * 26 letters + 50px padding = 960px */
.glossary nav li {float:left; width:35px; height:40px; text-align:center; line-height:40px; font-weight:bold; color:#a1a1a1;}
.glossary nav a {display:block; width:35px; height:40px; color:#3b5ba8; text-decoration:none;}
.glossary nav a:hover {color:#4baccb; background:#fff;} /* adjust height, width, and line height to account for borders */
.glossary nav a:visited {color:#3b5ba8;}
.glossary dl {margin:1em 20px;}
.glossary dt {color:#3b5ba8; font-weight:bold;}
.glossary dd {margin:.25em 0 1em 40px;}
.resources h2, .resources header ul {width:920px; padding:0 20px;}
.resources h3 {position:absolute; left:-999em;} /* how best to hide from sighted users, but leave for screen readers?  */
.resources table {width:100%; margin:0 auto;}
.resources th {padding:10px 20px; text-align:left; font-size:1.15em;}
.resources td {padding:10px 20px;}
.resources tr.even {background:#eee;}
.resources thead {background:#dde8c7; color:#34660D;}
.glossary footer, .resources footer {position:static; background:none; border:0;}

/* Only used during content development (graphic description in place of image) */
.template .media-container .media-placeholder {overflow:auto; background:#ddd; color:#666; overflow-y:auto; overflow-x:hidden; width:100%; height:100%;}
.template .media-container .media-placeholder div {padding:10px;}
.template .media-container .media-placeholder h4 {text-align:center; margin:0 auto 5px auto;}
.template .media-container .media-placeholder ul {margin-top:0;}

/* Main Narration Audio Player */
#narration .mejs-audio {position:absolute; right:255px; top:7px; *top:-38px; background:none; border-radius:5px; border:2px solid #1773B4;}
#narration .mejs-controls {
	background: #E4F2FE; /* fallback */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#D3EAFE), to(#F7FBFF)); /* Safari 4-5, Chrome 1-9 */
	background: -webkit-linear-gradient(top, #F7FBFF, #D3EAFE); /* Safari 5.1, Chrome 10+ */
	background: -moz-linear-gradient(top, #F7FBFF, #D3EAFE); /* Firefox 3.6+ */
	background: -ms-linear-gradient(top, #F7FBFF, #D3EAFE); /* IE 10 */
	background: -o-linear-gradient(top, #F7FBFF, #D3EAFE); /* Opera 11.10+ */
}
#narration .mejs-button button {background:transparent url(../images/audio-controls.png) no-repeat;}
#narration .mejs-pause button {background-position:0 -16px;}
#narration .mejs-mute button {background-position:-16px -16px;}
#narration .mejs-unmute button {background-position:-16px 0;}
#narration .mejs-time span {color:#1C3E79;}
#narration .mejs-time-total, #narration .mejs-horizontal-volume-total{background:#4BACCB;}
#narration .mejs-time-current, #narration .mejs-horizontal-volume-current {background:#39578A;}

/* 
	Fixes for template CSS breaking mejs

	This isn't pretty, but it is better than adding tons of classes to elements on
	each template. We could also get around this with a > selector, but that isn't 
	supported in IE6. :(

	These will need to be re-verified [in each template] if mejs is updated.
*/
.js .template .mejs-container div {margin:auto; width:auto;}
.js .template div.mejs-overlay-button {width:100px; margin:-50px 0 0 -50px;}
.js .template .mejs-container .mejs-inner {width:100%;}
.js .template .mejs-container .mejs-controls {width:100%;}
.js .template .mejs-container .mejs-controls div {margin:0; width:26px; float:left;}
.js .template .mejs-container .mejs-controls .mejs-time {width:auto; float:left;}
.js .template .mejs-container .mejs-controls .mejs-time-rail {padding-top:5px;}
.js .template .mejs-container .mejs-controls .mejs-volume-slider {width:25px;}
.js .template .mejs-container .mejs-controls .mejs-horizontal-volume-slider {width:60px;}
.js .template .mejs-container .mejs-controls .mejs-horizontal-volume-total {width:50px;}
.js .template .mejs-container .mejs-controls .mejs-horizontal-volume-current {width:50px;}
.js .template .mejs-container .mejs-controls .mejs-volume-total {width:2px;}
.js .template .mejs-container .mejs-controls .mejs-volume-current {width:2px;}
.js .template .mejs-container .mejs-controls .mejs-volume-handle {width:16px;}
.js .template .mejs-container .mejs-controls .mejs-captions-selector {width:130px;}
.js .template .mejs-container .mejs-captions-position {width:100%;}
.js .template .mejs-container .mejs-overlay-loading {width:80px; margin:-40px 0 0 -40px;}


/*
	For "winning the internet"

	http://www.netmagazine.com/features/five-steps-gettin-flexy-responsive-web-design
*/
@-webkit-viewport {width:device-width;}
@-moz-viewport {width:device-width;}
@-ms-viewport {width:device-width;}
@-o-viewport {width:device-width;}
@viewport {width:device-width;}

@media only screen and (max-width: 960px) {
	nav {width:100%;}
	
	#narration {width:auto; padding:0 10px;}
	.js header .progress, .js header .instructions, section {width:auto;}
	
	.js header .progress {padding-left:10px;}
	.js header .instructions {padding-right:10px;}
	.js .main-menu {margin:0 10px;}
	
	.glossary header ul, .resources header ul {width:100%; padding:0;}
	.glossary nav, .resources nav {width:auto;}
}

@media only screen and (max-width: 600px) {
	header {background-image:url(../images/banner-phone-x.jpg);}
	header h1 {width:100%; height:40px; background-image:url(../images/banner-phone.jpg);}
	
	.js header .progress {position:static; background:#dff0f7; text-align:center; padding:5px 5px; margin:0;}
	.js header .instructions {display:none;}
	.js .main-menu {float:none; margin:0 auto;} /* width is total width of buttons + margins */
	
	section h3 {text-align:center;}
	
	footer {position:static; text-align:center; background:none;}
	
	.glossary h2 {width:auto; padding:0 15px;}
	.resources h2 {width:auto; padding:0 5px;}
	.glossary nav ol, .resources nav ol {padding:0 10px;}
	.glossary dl {margin:1em 10px;}
	.glossary dd {margin:.1em 0 .5em 15px;}
	.resources th, .resources td {padding:10px;}
	
	#narration {margin-top:10px;}
	#narration .mejs-audio {position:relative; top:0; right:0; margin:0 auto;}
}

@media only screen and (max-width: 480px) {
	.glossary nav ol, .resources nav ol {padding:0 5px;}
	.resources th, .resources td {padding:5px;}
}

@media print{
	header {overflow:hidden; height:auto; text-indent:0; background:none; width:960px; margin:0 auto;}
	header h1 {height:auto; width:auto; text-indent:0; background:none;}
	
	.main-menu {display:none;}
	
	.glossary h2, .resources h2 {width:auto; margin:0; padding:0; color:#000;}
	.glossary header ul, .resources header ul {display:none;}
	.glossary nav {display:none;}
}