/* 
 * HTML5 ✰ Boilerplate
 *
 * What follows is the result of much research on cross-browser styling. 
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 * 
 * ==|== normalize ==========================================================
 */


/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Force vertical scrollbar in non-IE
 * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */

* {margin:0;}

html {  font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height:100%;}

body { margin: 0; font-size: 13px; line-height: 1.231; height:100%; }

body, button, input, select, textarea { font-family: sans-serif; color: #222; }

/* 
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 */

::-moz-selection { background: #0c71d7; color: #fff; text-shadow: none; }
::selection { background: #0c71d7; color: #fff; text-shadow: none; }


/* =============================================================================
   Links
   ========================================================================== */

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }


/* =============================================================================
   Typography
   ========================================================================== */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 15px 0; padding: 0 0 0 40px; }
ul li, ol li {margin:5px 0;}
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/e 
 */

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/*
 * Correct overflow not hidden in IE9 
 */

svg:not(:root) { overflow: hidden; }


/* =============================================================================
   Figures
   ========================================================================== */

figure { margin: 0; }


/* =============================================================================
   Forms
   ========================================================================== */

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }

/* 
 * 1. Correct color not inheriting in IE6/7/8/9 
 * 2. Correct alignment displayed oddly in IE6/7 
 */

legend { border: 0; *margin-left: -7px; padding: 0; white-space:normal; }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 * 2. Correct inner spacing displayed oddly in IE6/7
 */

button, input { line-height: normal; *overflow: visible; }

/*
 * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
 */

table button, table input { *overflow: auto; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 */

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

/*
 * Consistent box sizing and appearance
 */

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/* 
 * Remove inner padding and border in FF3/4: h5bp.com/l 
 */

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/* 
 * 1. Remove default vertical scrollbar in IE6/7/8/9 
 * 2. Allow only vertical resizing
 */

textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }


/* =============================================================================
   Tables
   ========================================================================== */

table {/* border-collapse: collapse;*/ border-spacing: 0; }
td { vertical-align: top; }


/* ==|== primary styles =====================================================
   Author: Ben Young, Phil Heywood (Redweb)
   ========================================================================== */

/* basic structure */
body {
	background:#3f4040 url(../img/page-bg.gif) no-repeat center top; 
/*	background:#3f4040 url(../img/layout.jpg) no-repeat center top;*/
	color: #fff;
	font-family:Arial,sans-serif;
}
.no-js body {
	background-position: center 30px!important;	
}
div#container {
	width:960px; margin:0 auto;min-height:100%;
}

.no-js div#container {
	margin-top: 30px;
}

a, a:visited, a:hover {
	color: #fff;
}

a:hover {
text-decoration:none;	
}

p, ul li, ol li, dl dd {
font-family:Arial, sans-serif;	
line-height:1.5;
}

ol li {
display:list-item;
}

h1,h2,h3,h4,h5 {
margin:20px 0 10px 0;
padding:0px;
}

/* Header */

header {
	display:block;
}	
header h1 {
	margin:28px 0 0 230px;
	font-size:1.4em;
	color:#ddf0fc;
}
header h2 {
	margin:5px 0 12px 230px;
	font-size:2.8em;
}
nav#global {
	width:405px;
	height:29px;
	margin:0 auto;
	padding:8px 0 0 0;
}	
nav#global ul li {
	float:left;	
	margin:0 20px 0 0;
}
nav#global ul li a {
	font-size:0.9em;
	padding-left:20px;
}
#global li.home {background:url(../img/icon-home.png) no-repeat 0 0;}
#global li.sa {background:url(../img/icon-sa.png) no-repeat 0 3px;}
#global li.selectModule {background:url(../img/icon-selectmodule.png) no-repeat 0 0;}
#global li.glossary {background:url(../img/icon-glossary.png) no-repeat 0 0;}
#global li.help {background:url(../img/icon-help.png) no-repeat 0 0;}

nav#global ul li.help {
 	margin:0;
}

/* Module Navigation */

nav#packageBrowser {
	width:229px;
	float:left;
}
.ie6 nav#packageBrowser 
{
    width:226px!important
}
#packageBrowser h3 {
margin:0 0 0 31px;
font-size:1.2em;
font-weight:normal;
width:177px;	
}
#packageBrowser h3 span {
display:block;
margin:0;
font-size:1.1em;
font-weight:bold;
color: #ddf0fc;
}
nav#packageBrowser ol {
	display:none;
	list-style-type:decimal;
	padding:0 20px 0 35px;
	font-size:18px;
	font-weight:bold;
	position:relative;
}
.no-js nav#packageBrowser ol {
	display:block;
	height: 410px;
	overflow: auto;
}
nav#packageBrowser ol li {
	position:relative;
	padding-top:2px;
	color:#aaa;
	zoom:0!important;
}

nav#packageBrowser ol li.current 
{
    color:#fff;
}

nav#packageBrowser ol li.current a
{
    text-decoration:underline;
}

nav#packageBrowser ol li a {
	position:relative;
	top:-0px;
	font-size:12px;	
	color:#ccc;
	text-decoration:none;
}
nav#packageBrowser ol li a:hover {
	color:#fff;
	text-decoration:underline;
}

nav#packageBrowser ol li.current a {
	color: #fff;
	font-weight: bold;
}
nav#packageBrowser ol li div a:hover {
	text-decoration:underline;
}
#packageBrowser ol img {
	display:none;
	width:160px;
	height:90px;
}
div#thumbnailViewer {
	width:302px;
	height:159px;
	position: absolute;
	top: -1000px;
	left: -1000px;
}
div#thumbnailViewer img {
	position: absolute;
	top: 11px;
	left: 82px;
	width:206px;
	height:133px;
}
div#thumbnailViewer div {
	position: absolute;
	top: 0;
	left: 0;
	width:302px;
	height:159px;
	background: url(../img/popover-thumbnail.png) no-repeat;
}
div.prevpages,
div.nextpages {
	cursor: default;
	background-color: #555;
	margin: 10px 25px 7px 0;
	padding: 0;
}
div.prevpages {
	cursor: default;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-topleft: 5px;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}

div.prevpages a {
	padding: 3px 3px 3px 25px;
	background: url(../img/icon-page-up.gif) 5px 7px no-repeat;	
	display: block;
	visibility: hidden;
}
div.nextpages {
	cursor: default;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}
div.nextpages a {
	padding: 3px 3px 3px 25px;
	background: url(../img/icon-page-down.gif) 5px 7px no-repeat;	
	display: block;
}

.no-js div.prevpages,
.no-js div.nextpages {
	display: none;
}

/* Main */

#stage h3 
{
    font-size:2.3em; 
}

div#main {
	width:731px;
	/*margin-left:229px;*/
	position:relative;
	padding-bottom:165px;
	display:inline-block;
}



/* Level select */

/* Tip */

div#levelSelectTip 
{
  color:#222;
  background:transparent url(../img/level-select-tip.png) no-repeat left top;
  display: none;
  width: 287px;
  height: 86px;
  position: absolute;
  top: -41px;
  left: 192px;
  padding: 10px 10px 10px 20px;
  font-size:0.9em;
}

div#levelSelectTip strong {font-size:1.1em;}

div#levelSelectTip a.close, div#levelSelectTip a.close:visited
{
    text-indent:-9999px;
    display:block;
    position: absolute;
    top: 9px;
    right: 7px;
    width: 16px;
    height:16px;
    top: 8px;
    background:url(../img/tip-close.gif) no-repeat left top;
}

div#levelSelectTip a.close:hover
{
    background:url(../img/tip-close.gif) no-repeat 0 -16px;
}

div#levelSelectTip p
{
    margin-top:3px;
}

div#levelSelectTip a,div#levelSelectTip a:visited
{
    color:#222;
}

nav#levelSelect {
	font-family:Arial, sans-serif;
	position:relative;
	padding:6px 10px 8px 10px;
	width:711px;
	height:12px;
	background:#555;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-topleft: 5px;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}	

nav#levelSelect span {
	float: left;
	display: block;
	width: 110px;
}


nav#levelSelect a#level, nav#levelSelect a#level:visited {
	display: block;
	height: 20px;
	width: 62px;
	margin-left: 116px;
	padding: 5px 7px 4px 7px;
	position: absolute;
	top: -3px;
	left: 0;
	text-decoration:none;
	background:#606161 url(../img/arrows.gif) no-repeat 62px 10px;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-topleft: 5px;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}

.ie6 nav#levelSelect a#level 
{
    height:24px!important;
}


nav#levelSelect a span {
	float: none;
	display: inline;
	width: auto;
	font-weight:bold;
	font-size:1.3em;
}
nav#levelSelect a span.levelA {color:#c9e5c5;}
nav#levelSelect a span.levelB {color:#ddf0fc;}
nav#levelSelect a span.levelC {color:#fdf8c4;}
nav#levelSelect a span.levelD {color:#fac2c3;}
nav#levelSelect a span.levelAll {color:#fff;font-size:1.1em}


nav#levelSelect ol {
	display: block;
	position: absolute;
	top: 26px;
	left: 16px;
	background: #616161;
	-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.71);
	-moz-box-shadow:    2px 2px 6px rgba(0, 0, 0, 0.71);
	box-shadow:         2px 2px 6px rgba(0, 0, 0, 0.71);
	width: 700px;
	height:396px;
	display:none;
}

.no-js nav#levelSelect ol 
{
    float:left;
    position:relative;
    top:auto;
    left:auto;
    display:block!important;
}

nav#levelSelect ol li {
	padding:12px 74px 17px 15px;
	margin:0px;
	width:611px;
	height:56px;
	position:relative;
	float:left;
}

nav#levelSelect ol li#levelAll {
	height:27px;
}

nav#levelSelect ol li:hover {
cursor:pointer;
background:#6e6e6e;
}

nav#levelSelect ol li.active:hover {
cursor:default;
background:none;
}

nav#levelSelect li.active {
	background:url(../img/active-level.gif) no-repeat 0 0!important;	
}

nav#levelSelect li span {
	width: 40px;
	height: 35px;
	display: block;
	float: left;
	text-indent:-9999px;
}

nav#levelSelect ol li#levelA span {background:url(../img/levelA.png) no-repeat 0 11px;}
nav#levelSelect ol li#levelB span {background:url(../img/levelB.png) no-repeat 0 11px;}
nav#levelSelect ol li#levelC span {background:url(../img/levelC.png) no-repeat 0 11px;}
nav#levelSelect ol li#levelD span {background:url(../img/levelD.png) no-repeat 0 11px;}
nav#levelSelect ol li#levelAll span {background:url(../img/levelAll.png) no-repeat 0 0;height:25px;margin-top:10px;}

nav#levelSelect li p {
	margin:0;
	width:571px;
	float:left;
	line-height:1.3;
	padding-top: 7px;
}

nav#levelSelect ol li a 
{
    display: block;
    text-indent: -9999px;
    width: 700px;
    height: 88px;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
	z-index:9999;
	background:url(../img/transPixel.gif) no-repeat left top;
}

nav#levelSelect ol li.active a {
	height:85px;
}

nav#levelSelect ol li#levelAll a {
	height:59px;
}

nav#levelSelect ol li#levelAll a {
	height:59px!important;
}

nav#levelSelect ol li a:hover 
{

}

.ie6 nav#levelSelect ol li a
{
    text-indent:0!important;
    display:inline!important;
    position:static;
    
}

a#showResourceInfo {
	font-family:Arial, sans-serif;
	display:block;
	position:relative;
	float:right;
	width:126px;
	background:url(../img/icon-info.png) no-repeat 0 0;
	margin:0 10px 0 0;
	padding:0 0 2px 22px;
	font-size:0.85em;
	overflow:auto;
}

/* Stage */

article#stage {
	display:block;
	width:729px; /* 729px minus 30px exclusion zone */
	height:410px; /* 410px minus 30px exclusion zone */
	position:relative;
	left:0;
	border:1px solid #999;	
	overflow: hidden;
}
.no-js article#stage {
	height: auto;
	overflow: default;

}

nav#paginationControls {
	position: absolute;
	background: #6c6c6c;
	bottom: 0;
	left: 295px;
	width: 140px;
	height: 30px;
	display: none;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-topleft: 5px;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	-webkit-box-shadow: 0 2px 6px rgba(0, 50, 50, 0.71);
	-moz-box-shadow:    0 2px 6px rgba(0, 50, 50, 0.71);
	box-shadow:         0 2px 6px rgba(0, 50, 50, 0.71);
}
nav#paginationControls div.prev {
	position: absolute;
	top: 0;
	left: 0;
	width: 25px;
	height: 30px;
	
}
nav#paginationControls div.next {
	position: absolute;
	top: 0;
	right: 0;
	width: 25px;
	height: 30px;
}
nav#paginationControls div.prev a {
	text-indent: -9999px;
	width: 25px;
	height: 30px;	
	display: block;
	background: url(../img/icon-small-arrow-left.png) center center no-repeat;
	opacity: 0.25;
}
nav#paginationControls div.next a {
	text-indent: -9999px;
	width: 25px;
	height: 30px;	
	display: block;
	background: url(../img/icon-small-arrow-right.png) center center no-repeat;
}
nav#paginationControls div.sceneInfo {
	position: absolute;
	top: 0;
	left: 25px;
	width: 90px;
	height: 30px;
	background-color: #868686;
	color: #fff;
	text-shadow: 0 0 5px #333;
	text-align: center;
	font-weight: bold;
	font-size: 1.4em;
	padding: 4px 0 0 0
}

/* sample stage background */
article#stage {
    
}

/* scene background codes */

div.gg /* gg = green gradient */ {background:url(../img/stageBgGreenGradient.jpg) repeat-x left top;}
div.yg /* yg = yellow gradient */ {background:url(../img/stageBgyellowGradient.jpg) repeat left top!important; color: #222}
div.yg p a, div.yg p a:visited {color:#643f2d}
div.bg /* bg = blue gradient */ {background:url(../img/stageBgblueGradient.jpg) repeat left top!important;}
div.drag /* drag & drop layout example */ {background:url(../img/drag-scene-bg.jpg) no-repeat left top!important;}

div.scene 
{
    float:left;
    position: absolute;
    width:729px;
    height:410px;
    
}
div.scene.slidesh 
{
    float:left;
	position: absolute;
	width:729px;
	height:410px;
	padding: 0;
}
.no-js div.scene {
	position: relative;
	width:729px;
	height:auto;
	min-height:350px; 
	border-bottom:1px solid #999;
}

/* previous/next package control */

nav#previousNext {
	background:#555;
	float:left;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	width:711px;
	padding:13px 10px;
}

nav#previousNext ul {
	float:left;
	width:710px;
}

nav#previousNext ul li {
	float:left;
	width:335px;
}

#previousNext li {
color:#ccc;
}

#previousNext li.prev {
	text-align:left;
	background:url(../img/icon-arrow-left.png) no-repeat 0 0;
	padding-left:20px;
}

#previousNext li.next {
	text-align:right;
	background:url(../img/icon-arrow-right.png) no-repeat right 0;
	padding-right:20px;
	float:right;
}

#previousNext li a {
color:#fff;
font-weight:bold;
}

/* Further reading */

div#leftColumn {
float:left;
width:355px;
margin:15px 0px 0 0;
}

.ie6 #leftColumn {margin:0px;}

div#rightColumn {
float:left;
width:355px;
margin:15px 0 0 0;
}

section#relatedLinks {
    clear: both;
	display:inline-block;
    width:731px;
    margin: 13px 0 30px 0;
	position:relative;
}

.ie6 section#relatedLinks 
{
    width:729px;
}

section#relatedLinks h3 {
	border-bottom:1px solid #727272;
	font-size:1.4em;
	padding-bottom:4px;
}

section#relatedLinks ul {
	margin:20px 0 0 0;
	padding:0px;
	float:left;	
}

.ie6 section#relatedLinks ul 
{
    width: 717px;
}

section#relatedLinks ul li {
    float: left;
    list-style: none outside none;
    margin: 0 20px 0 0;
    padding: 10px 0 5px;
    width: 340px;
}

.ie6 section#relatedLinks ul li 
{
    width:330px;
}

section#relatedLinks ul li a {
	padding:5px 0 13px 47px;	
	display: inline-block;
}

section#relatedLinks ul li.leftItem 
{
    clear:both;
}

section#relatedLinks h4 {
	clear: both;
    padding-top: 50px;
}

.ie6 section#relatedLinks h4 {
	margin-top: 30px;
}

section#relatedLinks p {
	padding-bottom: 10px;
}

/* document types */

section#relatedLinks ul li a.bmp {background:url(../img/icon-bmp.png) no-repeat 0 0;}
section#relatedLinks ul li a.flv {background:url(../img/icon-flv.png) no-repeat 0 0;}
section#relatedLinks ul li a.gif {background:url(../img/icon-gif.png) no-repeat 0 0;}
section#relatedLinks ul li a.jpg {background:url(../img/icon-jpg.png) no-repeat 0 0;}
section#relatedLinks ul li a.mov {background:url(../img/icon-mov.png) no-repeat 0 0;}
section#relatedLinks ul li a.mp3 {background:url(../img/icon-mp3.png) no-repeat 0 0;}
section#relatedLinks ul li a.mp4 {background:url(../img/icon-mp4.png) no-repeat 0 0;}
section#relatedLinks ul li a.mpg {background:url(../img/icon-mpg.png) no-repeat 0 0;}
section#relatedLinks ul li a.pdf {background:url(../img/icon-pdf.png) no-repeat 0 0;}
section#relatedLinks ul li a.png {background:url(../img/icon-png.png) no-repeat 0 0;}
section#relatedLinks ul li a.ppt {background:url(../img/icon-ppt.png) no-repeat 0 0;}
section#relatedLinks ul li a.psd {background:url(../img/icon-psd.png) no-repeat 0 0;}
section#relatedLinks ul li a.pub {background:url(../img/icon-pub.png) no-repeat 0 0;}
section#relatedLinks ul li a.ram {background:url(../img/icon-ram.png) no-repeat 0 0;}
section#relatedLinks ul li a.swf {background:url(../img/icon-swf.png) no-repeat 0 0;}
section#relatedLinks ul li a.wav {background:url(../img/icon-wav.png) no-repeat 0 0;}
section#relatedLinks ul li a.web {background:url(../img/icon-web.png) no-repeat 0 0;}
section#relatedLinks ul li a.wma {background:url(../img/icon-wma.png) no-repeat 0 0;}
section#relatedLinks ul li a.wmv {background:url(../img/icon-wmv.png) no-repeat 0 0;}
section#relatedLinks ul li a.doc {background:url(../img/icon-doc.png) no-repeat 0 0;}
section#relatedLinks ul li a.docx {background:url(../img/icon-doc.png) no-repeat 0 0;}
section#relatedLinks ul li a.zip {background:url(../img/icon-zip.png) no-repeat 0 0;}

/* Resource info */

section#resourceInfo {
    clear: both;
	display:inline-block;
    margin: 13px 0 50px;
    width: 731px;
	position:relative;
}

section#resourceInfo h3 {
	border-bottom:1px solid #727272;
	font-size:1.4em;
	padding-bottom:4px;
}

#resourceInfo dl {
	width:335px;
	padding:0 30px 0 0;
	float:left;
	margin:0 0 20px 0;
}

#resourceInfo dl dt {
	font-weight:bold;
	color:#ddf0fc;
	font-size:1.1em;
}

#resourceInfo dl dd {
	margin:3px 0 0 0;	
	font-size:0.9em;
}

a.backToTop {
	font-family:Arial, sans-serif;
    position: absolute;
    right: 0;
    top: 24px;
	background:url(../img/icon-arrow-up.png) no-repeat 0 0;
	padding-left:16px;
	font-size:0.9em;
}

/* Footer */

footer {
	font-family:Arial, sans-serif;
	width:100%;
	position:relative;
	margin:-165px auto 0 auto;
	height:165px;
	clear:both;
	background:#555555 url(../img/footer-bg.jpg) repeat-x center top;
	
	}

footer div {
	width:960px;
	margin:0 auto;
	padding:20px 0 0 0;
	color:#ccc;
}

span#copyright {
	float:left;
	display:inline-block;
	padding:0 0 10px 0;
	width:604px;
}

a#dfeLink {
	float:left;
	display:inline-block;
	margin:0 0 0 0;
	clear:left;
	width:260px;
}

.ie6 span#copyright, .ie6 a#tdaLink {
	
}

span#version {
	float:right;
	margin:0 0 10px 0;
	text-align:right;
	width:200px;
}

span#lastUpdated {
	float:right;
	clear:right;
	text-align:right;
	width:200px;
	position:relative;
}

div#jsMessage {
	display: none;
}
.no-js div#jsMessage {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 25px;
	text-align: center;
	background: #FDF8C4;
	color: #444;
	font-weight: bold;
	padding-top: 5px;
}
.no-js div#jsMessage a {
	color: #D12627;	
}

div#infobar 
{
    position:absolute;
    top:0;
    left:15px;
    display:none;
    width:698px;
    background-color:#515253;
    -webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
    overflow:visible!important;
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.71);
	-moz-box-shadow:    0 2px 6px rgba(0, 0, 0, 0.71);
	box-shadow:         0 2px 6px rgba(0, 0, 0, 0.71);
}
    
#infobar p {margin:0;padding:15px 15px 35px 15px;visibility:hidden}
    
#infobar a {
    width: 51px;
    margin: 0 auto -11px auto;
    display: block;
    position: absolute;
    bottom: 0px;
    left: 300px;
    background: url(../img/infobar-button.png) no-repeat left top;
    padding: 5px 19px 10px 10px;
    font-size:0.9em;
    font-weight:bold;
    text-decoration:none;
    text-align:right;
}

#infobar a.hide span 
{   
    display:block;
    background: url(../img/icon-page-up.gif) no-repeat 3px 5px;
}

#infobar a.show span 
{   
    display:block;
    background: url(../img/icon-page-down.gif) no-repeat 3px 5px;
}

/* Homepage */

body.home #main
{
    width:960px;
}

body.home header h1
{
    margin-left:0px;
    margin-bottom:20px;
    font-size:2.8em;
    color:#fff;
}

body.home article#stage 
{
    width:958px;
}

body.home div.scene 
{
    width: 898px;
    padding:30px;
}

body.home nav#previousNext {
    width:940px;
}

body.home nav#previousNext ul li {
    width:450px;
}

body.home div.scene .tabContent a  
{
    font-weight:bold;
    color:#7e2d29;
}

section#getStarted 
{
    clear:both;
    float:left;
    width:960px;
    margin:30px 0 30px 0;
    padding-bottom:30px;
}

section#getStarted h2 
{
    font-size:2em;
    border-bottom: 1px solid #727272;
    padding-bottom: 4px;
}

section#getStarted p 
{
    margin-bottom:15px;
} 

/* Equal height pods */

section#getStarted div 
{
    position:relative;
    padding-bottom:60px;
}

section#getStarted #chooseModule, section#getStarted #studyPlan
{
    width: 300px;
    margin-right: 30px;
    float: left;
}

section#getStarted div a 
{
    position:absolute;
    bottom:0;
    left:0;
}

/* Any Firefox */
@-moz-document url-prefix() 
  { 
  section#getStarted div { margin-right: 29px!important; width: 301px!important;  }
  section#getStarted div#workOffline { width: 271px!important; }
  }

/* Firefox 3.6+ Filter */
@-moz-document url-prefix() 
  { 
  @media -moz-scrollbar-start-backward 
    { 
    section#getStarted div { margin-right: 30px!important; width: 300px!important; } 
    section#getStarted div#workOffline { width: 300px!important; }
    }
  }


/* standard squared off button styles */

section#getStarted #chooseModule a, section#getStarted #studyPlan a, section#getStarted #chooseModule a:visited, section#getStarted #studyPlan a:visited
{
    padding: 15px 9px;
    width: 260px;
    display: block;
    text-align: center;
    font-size: 1.4em;
    text-decoration: none;
        
    background: #28552c; /* Old browsers */
    background: -moz-linear-gradient(top, #5ab863 0%, #28552c 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5ab863), color-stop(100%,#28552c)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #5ab863 0%,#28552c 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #5ab863 0%,#28552c 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #5ab863 0%,#28552c 100%); /* IE10+ */
    background: linear-gradient(top, #5ab863 0%,#28552c 100%); /* W3C */
    
    -webkit-box-shadow: 0 2px 6px rgba(50, 50, 50, 0.71);
	-moz-box-shadow:    0 2px -1px rgba(50, 50, 50, 0.71);
	box-shadow:         0 2px 6px rgba(50, 50, 50, 0.71);
}

.ie7 section#getStarted #chooseModule a, .ie7 section#getStarted #studyPlan a, .ie8 section#getStarted #chooseModule a, .ie8 section#getStarted #studyPlan a , .ie97 section#getStarted #chooseModule a, .ie9 section#getStarted #studyPlan a  
{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5ab863', endColorstr='#28552c',GradientType=0 ); /* IE6-9 */
}

section#getStarted #chooseModule a:hover, section#getStarted #studyPlan a:hover
{
    filter:none;
    background: #52a85a!important;
}

section#getStarted #workOffline
{
    width: 300px;
    float: left;
}

section#getStarted #workOffline a, section#getStarted #workOffline a:visited
{
    font-size: 1.3em;
    font-weight: bold;
    bottom: 18px;
}

nav#levelSelect {
	background:#555;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-topleft: 5px;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}	


/* Drag and drop */

div.dragAndDrop 
{
    position:absolute;
    top:30px;
    left:0px;
    width:665px
}

div.draggable 
{
    position:absolute;
    top:80px;
    left:30px;
    height:260px;
    width:185px;
    padding:0;
    z-index:150;
}

div.draggable div 
{
    line-height:1;
    width:139px;
    height:16px;
    padding:8px 10px 5px 26px;
    margin:0 0 11px 0;
    background:transparent url(../img/draggable-field.png) no-repeat left top;
    cursor:pointer;
    color:#000;
    -webkit-border-top-right-radius: 6px;
	-webkit-border-top-left-radius: 6px;
	-webkit-border-bottom-right-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-topright: 6px;
	-moz-border-radius-topleft: 6px;
	-moz-border-radius-bottomright: 6px;
	-moz-border-radius-bottomleft: 6px;
	border-top-right-radius: 6px;
	border-top-left-radius: 6px;
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 6px;
    -webkit-box-shadow: 2px 2px 6px rgba(0, 50, 50, 0.71);
	-moz-box-shadow:    2px 2px 6px rgba(0, 50, 50, 0.71);
	box-shadow:         2px 2px 6px rgba(0, 50, 50, 0.71);
	font-weight:bold;
	z-index:150;
}

div.draggable div span 
{
    float:right;
}

div.droppable 
{
    position:absolute;
    top:79px;
    left:223px;
    height:240px;
    width:270px;
    padding:0;
    z-index:90;
}
/* Firefox only */
@-moz-document url-prefix() { 
    div.droppable  {
        top:79px;
    }
}

div.droppable div 
{
    line-height:1;
    width: 160px;
    height: 13px;
    padding: 7px;
    margin: 0 0 9px 0;
    border:2px solid #5ca5d3;   
    -webkit-border-top-right-radius: 7px;
	-webkit-border-top-left-radius: 7px;
	-webkit-border-bottom-right-radius: 7px;
	-webkit-border-bottom-left-radius: 7px;
	-moz-border-radius-topright: 7px;
	-moz-border-radius-topleft: 7px;
	-moz-border-radius-bottomright: 7px;
	-moz-border-radius-bottomleft: 7px;
	border-top-right-radius: 7px;
	border-top-left-radius: 7px;
	border-bottom-right-radius: 7px;
	border-bottom-left-radius: 7px;
	color:#d6e7f3;
	z-index:90;
}

div.droppable div.hovered 
{
    background-color: #1e4b68;
}

div.ui-draggable-dragging 
{
    z-index:160;
}

div.draggable div.ui-draggable-disabled 
{
    line-height:1;
    margin: 0 0 8px -1px!important;
    height:16px;
    width: 160px;
    padding: 6px 5px 2px 9px;
    border:4px solid #163b55;
    -webkit-border-top-right-radius: 8px;
	-webkit-border-top-left-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	-webkit-border-bottom-left-radius: 8px;
	-moz-border-radius-topright: 8px;
	-moz-border-radius-topleft: 8px;
	-moz-border-radius-bottomright: 8px;
	-moz-border-radius-bottomleft: 8px;
	border-top-right-radius: 8px;
	border-top-left-radius: 8px;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
	background:#fff url(../img/dropped-return.png) no-repeat 152px center;
	background-color:#fff!important;
	-webkit-box-shadow:none!important;
	-moz-box-shadow:   none!important;
	box-shadow:        none!important;
	z-index:100;
}

div.draggable div.dropped 
{
    cursor:default;
    z-index:100!important
} 

div.draggable span 
{
    display:block;
    text-indent:-9999px;
}

.ie7 div.draggable span 
{
    margin-top:-16px;
}

div.ui-draggable-disabled span 
{
    float: right;
    width: 17px;
    height: 17px;
    cursor:pointer;
    display:block;
    text-align:-9999px;
} 




/* Tabbed content asset */

div.inPageTabs
{
    float:left;
    clear:left;
    width:728px;
    margin: -30px;
}

.ie6 div.inPageTabs {padding-left:30px;}

div.inPageTabs h3
{
    font-size:2.6em;
    color:#bc4f17;
}

div.inPageTabs ul.tabNav {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	background-color:#8b3525;
	width: 200px;
    float: left;
    height: 410px;
}

.no-js div.inPageTabs ul.tabNav 
{
    display:none;
}

div.inPageTabs ul.tabNav li {
	float: left;
	margin: 0;
	padding: 0;
	line-height: 31px; /*--Vertically aligns the text within the tab--*/
	margin-right:0px;
	overflow: hidden;
	position: relative;
	background:#8b3525 url(../img/tabNavBgRust.jpg) repeat-y left bottom;
	height:101px;
	width:200px;
	border-top:1px solid #9f411f;
	border-bottom: 1px solid #6f2b1e;
}

div.inPageTabs ul.tabNav li a {
	font-weight:bold;
	color:#fffeef;
	display: block;
	font-size: 1.5em;
	padding: 34px 20px 38px 30px;
	border: 0; /*--Gives the bevel look with a 1px white border inside the list item--*/
	text-decoration:none;
}

div.inPageTabs ul.tabNav li.active a
{
    color:#fffeef;
}

div.inPageTabs ul.tabNav li a:hover, div.inPageTabs ul.tabNav li a:focus {
	background:#903929;
}


html div.inPageTabs ul.tabNav li.active a  { /*--Makes sure that the active tab does not listen to the hover properties--*/
	background: #bf4933 url(../img/tabNavBgRustActive.jpg) repeat-y left bottom;
	text-decoration:none;
    border-bottom:1px solid #6f2b1e;
}

/* style double lined tabs */

div.inPageTabs ul.tabNav li a.doubleLine 
{
    padding:21px 20px 18px 30px;
}

div.inPageTabs .tabContainer {
	overflow: hidden;
	clear: both;
	float: left; 
	width: 100%;
	/*height:500px;*/
}
div.inPageTabs .tabContent {
	float:left;
	padding: 30px;
	color:#7e2d29;
	width:468px;
}

div.inPageTabs .tabContent p 
{
    margin:0 0 20px 0;
}

.no-js .tabContent 
{
    display:block!important;
}

.no-js div.tabs div 
{
    min-height:350px;
}

/* Image gallery asset */

.placeholder 
{
    display:none;
}

.no-js a.launchGallery 
{
    display:none;
}

#modal-overlay {
    position: fixed;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}

.ie6 #modal-overlay, .ie7 #modal-overlay 
{
    background:none;
}

.galleryContainer
{    
    display:none;
    position:absolute;
    top:0;
    left:82px;
    width:530px;
}

.ie6 .galleryContainer, .ie7 .galleryContainer 
{
    margin-top:10px;
}

.no-js .galleryContainer 
{
    display:block;
    position:relative;
    width:668px;
    top:0;
    left:0;
}

.slider { 
    
    /* You MUST specify the width and height */
    width:300px;
    height:300px;
    position:absolute;  
    top:35px;
    left:30px;
    overflow:hidden;
}

.no-js .slider 
{
    position:relative;
    top:0;
    left:0;
    width:300px;
    height:auto;
}
 
.mask-gallery   
{ 
    overflow:hidden;    
}
 
.gallery {     
    /* Clear the list style */
    list-style:none;
    margin:0;
    padding:0;      
    /* width = total items multiply with #mask gallery width */
    width:900px;
    overflow:hidden;
}

.no-js .gallery 
{
    width:300px;
}
 
 .gallery li {         
    /* float left, so that the items are arrangged horizontally */
    float:left;
    }
  
.mask-excerpt {     
    /* Set the position */
    position:relative;  
    top:35px;
    left:330px;
    /* width should be lesser than #slider width */
    width:200px;
    overflow:hidden;         
}

.no-js .mask-excerpt 
{
    height:auto;
    position:absolute;
    top:0;
    left:300px;
}
     
.excerpt {
     
    /* Clear the list style */
    list-style:none;
    margin:0;
    padding:0;
     
    /* Set the position */
    position:absolute;
    top:0;
    left:0;
     
    /* Set the style */
    width:200px;
    background-color:#FFF;
    overflow:hidden;
    font-size:1em;
    color:#000; 
}

.no-js .excerpt 
{
    position:relative;
}
 
.excerpt li {
    padding:15px;
}

.no-js .excerpt li 
{
    height:285px;
    padding:15px 15px 0 15px;
}

.buttons {
    position: relative;
    top: 50px;
    left: 30px;
    width:500px;
}

.no-js .buttons 
{
    display:none;
}

.buttons a.btn-prev 
{
    float:left;
    padding:8px 12px;
    background-color:#444;
}

.buttons a.btn-next 
{
    float:right;
    text-align:right;
    padding:6px 12px;
    background-color:#444;
}

.buttons a:hover 
{
    background:#777;
}


/* true/false reveal */

div.statementAnswerPair 
{
    display: block;
    width: 324px;
    height: 168px;
    border: 3px solid #21597F;
    float: left;
    position:relative;
    margin: 0 8px 8px 0;
}

div.statementAnswerPair section 
{
    display: block;
    width: 324px;
    height: 168px;
    float:left;
    position: relative;
    top: 0;
    left: 0;
    padding: 0;
    overflow:hidden;
}

div.odd 
{
    margin-right:0px;
}

.statement {}

/* Styles for statement panel */

.statement p 
{
    width: 150px;
    height: 112px;
    margin: 18px 18px 0 18px;
    color: #3D1C00;
    font-size: 1.1em;
    }

p.trueOrFalse 
{
    height: 22px;
    background: url(../img/trueFalseTextBg.gif) repeat-x 0 0;
    display: block;
    font-size:1.4em;
    font-weight:bold;
    color:#3d1c00;
    width: 308px;
    margin: 0;
    padding: 8px;
    }
    
p.trueOrFalse a 
{
    font-size: 0.9em;
    float: right;
    background-color: #D12627;
    padding: 0 14px;
    border: 2px solid #751919;
    margin: -2px 0 0 0;
    text-decoration: none;
}

.ie7 p.trueOrFalse a, .ie6 p.trueOrFalse a {
    margin:-29px 0px 0px;
}

p.trueOrFalse a:hover, p.trueOrFalse a:focus
{
    background-color:#980000;
} 

/* styles for answer panel */

 p.answer 
 {
     display:none;
 }

.unflipped p.answer 
{
    display:none!important;
}

.flipped p.answer 
{
    font-weight:bold;
    font-size:2em;
    color:#fff;
    text-align: center;
    width: 324px;
    margin: 65px 0 0 0;
    line-height:1.5;
    }
    
a.revert 
{
    display:none;
    position: absolute;
    bottom: 15px;
    right: 15px;
}

/* True/false without JavaScript */

.no-js p.answer 
{
    display: block;
    margin: 0;
    position: absolute;
    top: 52px;
    right: -347px;
    font-size: 3em;
}

.no-js .quickFlipCta 
{
    display:none;
}
    
    
/* icons */

section.family { background: #FFFDF2 url(../img/family-small.gif) no-repeat 185px 32px}
section.pencil { background: #FFFDF2 url(../img/pencil-small.gif) no-repeat 185px 32px}
section.ball { background: #FFFDF2 url(../img/ball-small.gif) no-repeat 185px 32px}
section.coins { background: #FFFDF2 url(../img/coins-small.gif) no-repeat 185px 32px}

section.flipped 
{
    background-image:none;
}

section.unflipped {
background-position:185px 32px!important;
}


nav#packageBrowser ol li 
{
    line-height:1.1!important;
    margin:0;
}

nav#packageBrowser ol li a {
	line-height: 1.2!important;
}


/* Video */

.videoLink 
{
    display:block!important;
    font-size: 0.85em;
    left: 0px;
    position: absolute;
    top: 209px;
    width: 370px;
    line-height: 1.4!important;
}

.vjs-fullscreen-control 
{
    display:none; /* hide fullscreen button */
}

div.videoContainer {
	height: 412px;
}
div.video.position {
	position: absolute;
	top: 30px;
	right: 30px;
}
ul.videoList {
	color: black;
	margin: 0;
	padding: 0;
	list-style-type: none;
}
ul.videoList li {
	padding: 0 0 10px 0;
}
ul.videoList li span.label {
	font-size: 1.5em;
}
ul.videoList li.current span.label {
	font-weight: bold;
}
ul.videoList li div.transcript {
	width: 250px;
	height: 300px;
	overflow: auto;
	font-weight: normal;
}
ul.videoList li div.transcript.closed {
	display: none;
}
ul.videoList li a.transcript {
	display: none;
	color: black;
}
ul.videoList li.current a.transcript {
	display: block;
}


/* Choose a module page */

body.selectModule 
{
    background: #444 url(../img/page-bg-plain.gif) repeat-x center top;
}

.selectModule header {
    border-bottom: 1px solid #727272;
    padding-bottom:30px;
}

.selectModule header h1, .selectModule header h2, .moduleDownload header h1, .moduleDownload header h2
{
    margin-left:0px;
}

.selectModule section.stream {
    border-bottom: 3px solid #666;
    padding-bottom: 30px;
    margin-bottom: 40px;
    width:960px;
}

.selectModule section#s4 
{
    border-bottom:none;
}

.selectModule section.stream p, .selectModule header p, .moduleDownload p
{
    padding-bottom:20px;
}

.selectModule section.stream h2 
{
    font-size:2.5em;
}

section.stream .module 
{
    position:relative;
    width:930px;
    padding: 15px 15px 15px 15px;
    margin-bottom: 15px;
    background-color:#3c3c3c;
}

section.stream .module.odd
{
    background-color:transparent;
}

section.stream .module h3 
{
    font-size:1.7em;
    margin:0 0 10px;
    padding:0;
    width:780px;
}

body #main section.stream .module h3 a, body #main section.stream .module h3 a:visited
{
    padding:0;
    margin:0;
    color:#fff!important;
    background:none!important;
    border:0!important;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    display:inline;
    text-decoration:underline;
}

body #main section.stream .module h3 a:hover 
{
    text-decoration:none;
}

section.stream .module a, section.stream .module a:visited, .moduleDownload a.downloadNow, .moduleDownload a.downloadNow:visited {
   padding: 8px 19px;
   -webkit-border-radius: 7px;
   -moz-border-radius: 7px;
   border-radius: 7px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   color: white;
   font-size: 1.6;
   font-family: Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   display: block;
   width: 220px;
   text-align:center;
   border-top: 1px solid #84e08d;
   background: #2f8a38;
   background: -webkit-gradient(linear, left top, left bottom, from(#59bb63), to(#2f8a38));
   background: -webkit-linear-gradient(top, #59bb63, #2f8a38);
   background: -moz-linear-gradient(top, #59bb63, #2f8a38);
   background: -ms-linear-gradient(top, #59bb63, #2f8a38);
   background: -o-linear-gradient(top, #59bb63, #2f8a38);
   }
   
#main section.stream .module a.update, #main section.stream .module a.update:visited {   
    display: inline-block;
    background: none!important;
    border: 0;
    margin: 0;
    padding: 0;
    margin: 15px 0 0 0;
    text-decoration: underline;
    border: 0;
   -webkit-box-shadow:  none!important;
   -moz-box-shadow: none!important;
   box-shadow: none!important;
   width: 400px;
    text-align: left;
    color:#fff!important;
}

#main section.stream .module a.update:hover 
{
    text-decoration:none;
}

/*section.stream .module a, section.stream .module a:visited
{
     display:block;
     width:175px;
     color:#222;
     font-weight:bold;
     font-size:1.1em;
     text-align:center;
     text-decoration:none;
     padding:8px 11px;
     margin:20px 0 0 0;
     border:2px solid #333;
}*/

span.lastUpdated 
{
    position: absolute;
    font-weight:bold;
    font-size:1.1em;
    right: 20px;
    top: 20px;
}

/* stream colours */

#s1 h2, 
#s2 h2, 
#s3 h2, 
#s4 h2 {color: #c9e5c5;}
/*
#s2 h2 {color: #ddeffb;}
#s3 h2 {color: #fac2c3;}
#s4 h2 {color: #fef8c5;}
*/

#s1 .module a, .moduleDownload a.s1,
#s2 .module a, .moduleDownload a.s2,
#s3 .module a, .moduleDownload a.s3,
#s4 .module a, .moduleDownload a.s4
{
   border-top: 1px solid #84e08d;
   background: #2f8a38;
   background: -webkit-gradient(linear, left top, left bottom, from(#59bb63), to(#2f8a38));
   background: -webkit-linear-gradient(top, #59bb63, #2f8a38);
   background: -moz-linear-gradient(top, #59bb63, #2f8a38);
   background: -ms-linear-gradient(top, #59bb63, #2f8a38);
   background: -o-linear-gradient(top, #59bb63, #2f8a38);
   }
/*   
#s2 .module a, .moduleDownload a.s2 {
   border-top: 1px solid #96d1f8;
   background: #3288c2;
   background: -webkit-gradient(linear, left top, left bottom, from(#3ca4e9), to(#3288c2));
   background: -webkit-linear-gradient(top, #3ca4e9, #3288c2);
   background: -moz-linear-gradient(top, #3ca4e9, #3288c2);
   background: -ms-linear-gradient(top, #3ca4e9, #3288c2);
   background: -o-linear-gradient(top, #3ca4e9, #3288c2);
   }

#s3 .module a, .moduleDownload a.s3 {
   border-top: 1px solid #ff9e99;
   background: #d12626;
   background: -webkit-gradient(linear, left top, left bottom, from(#ff4b41), to(#d12626));
   background: -webkit-linear-gradient(top, #ff4b41, #d12626);
   background: -moz-linear-gradient(top, #ff4b41, #d12626);
   background: -ms-linear-gradient(top, #ff4b41, #d12626);
   background: -o-linear-gradient(top, #ff4b41, #d12626);
   }
   
#s4 .module a, .moduleDownload a.s4 {
   border-top: 1px solid #fff9b2;
   background: #c9be22;
   background: -webkit-gradient(linear, left top, left bottom, from(#f9ec38), to(#c9be22));
   background: -webkit-linear-gradient(top, #f9ec38, #c9be22);
   background: -moz-linear-gradient(top, #f9ec38, #c9be22);
   background: -ms-linear-gradient(top, #f9ec38, #c9be22);
   background: -o-linear-gradient(top, #f9ec38, #c9be22);
   color:#222!important;
   }
*/
#s1 .module a:hover, #s1 .module a:active, .moduleDownload a.s1:hover, .moduleDownload a.s1:active,
#s2 .module a:hover, #s2 .module a:active, .moduleDownload a.s2:hover, .moduleDownload a.s2:active,
#s3 .module a:hover, #s3 .module a:active, .moduleDownload a.s3:hover, .moduleDownload a.s3:active,
#s4 .module a:hover, #s4 .module a:active, .moduleDownload a.s4:hover, .moduleDownload a.s4:active
{
   border-top-color: #59bb63;
   background: #59bb63;
   color: #ffffff;
   }
/*
#s2 .module a:hover , #s2 .module a:active, .moduleDownload a.s2:hover, .moduleDownload a.s2:active    
{
   border-top-color: #40aff9;
   background: #40aff9;
   color: #fff;
   }

#s3 .module a:hover, #s3 .module a:active, .moduleDownload a.s3:hover, .moduleDownload a.s3:active  
{
   border-top-color: #ff4b41;
   background: #ff4b41;
   color: #fff;
   }
   
#s4 .module a:hover, #s4 .module a:active, .moduleDownload a.s4:hover, .moduleDownload a.s4:active  
{
   border-top-color: #f9ec38;
   background: #f9ec38;
   color: #222;
   }
*/

/* Module download */

.moduleDownload header {border:none;}
.moduleDownload h3 {font-weight:normal;font-size:1.6em;}
.moduleDownload h3 span {font-weight:bold;}

.moduleDownload a.return, .moduleDownload a.return:visited
{
    color:#cbccce;
    clear: left!important;
    float: left;
    margin-top: 20px;
    margin-bottom: 50px;
}

.ie6 .moduleDownload a.return, .ie6 .moduleDownload a.return:visited, .ie7 .moduleDownload a.return, .ie7 .moduleDownload a.return:visited
{
    line-height:5;
}

.clear {
    clear:both; 
}

.moduleDownload a.update, .moduleDownload a.update:visited {
clear: left;
margin-top: 15px;
}

.moduleDownload a.update.downloadpage, .moduleDownload a.update.downloadpage:visited {
float: left;
}

/* Needs assessment tool - styles */

body.nat {background:#444 url(../img/page-bg-plain.gif) repeat-x center top;}

.nat .formLegend p
{
    margin: 0 0 15px 0;
    font-weight: bold;
    font-size: 1.2em;
}

.nat header h1 
{
    margin: 28px 0 0 0;
    font-size: 1.4em;
    color: #DDF0FC;
}

.nat header h2 
{
    margin: 5px 0 12px 0;
    font-size: 2.8em;
}

.nat h3.formTitle 
{
    font-size:2em;
    margin-bottom:5px
}

.nat p.summary 
{
    width:660px;
    margin:10px;
}

.skip, .skip:hover
{
    margin: 20px 7px 30px 0;
    color: white;
    display: inline-block;
    background: #3C3C3C url(../img/arrow-skip.png) no-repeat 93% 12px;
    border: 1px solid #4E4E4E;
    padding: 10px 31px 12px 9px;
    border-image: initial;
    text-decoration:underline;
}

.skip:hover 
{
    background-color:#333333;
    text-decoration:none;
}

.exit, .exit:hover
{
    margin: 20px 0 30px 0;
    color:#fff;
    display: inline-block;
    background: #3C3C3C url(../img/door-open.png) no-repeat 9px 12px;
    border: 1px solid #4E4E4E;
    padding: 10px 9px 12px 29px;
    margin-right:6px;
    text-decoration:underline;
}

.exit:hover 
{
    background-color:#333333;
    text-decoration:none;
}

.backHome, .backHome:hover
{
    margin: 20px 0 30px 0;
    color:#fff;
    display: inline-block;
    background: #3C3C3C url(../img/icon-home.png) no-repeat 9px 10px;
    border: 1px solid #4E4E4E;
    padding: 10px 9px 12px 29px;
    margin-right:6px;
    text-decoration:underline;
}

.backHome:hover 
{
    background-color:#333333;
    text-decoration:none;
}

.back, .back:hover, .backBtm, .backBtm:hover
{
    margin: 20px 0 30px 0;
    color:#fff;
    display: inline-block;
    background: #3C3C3C url(../img/arrow-back.png) no-repeat 9px 12px;
    border: 1px solid #4E4E4E;
    padding: 10px 9px 12px 29px;
    margin-right:6px;
    text-decoration:underline;
}

.backBtm {
    clear: left;
    float: left;
    margin-top: 20px;
}

.back:hover, .backBtm:hover 
{
    background-color:#333333;
    text-decoration:none;
}

/* Warning message */

p.warning 
{
    background: url(../img/exclamation.png) no-repeat 0 0.9px;
    padding-left: 25px;
    width:570px;
}

p.warning strong 
{
    font-weight:normal;
}

p.warning span 
{
    clear:left;
    display:block;
    color:#ccc;
}

.nat .content p 
{
    margin:0 0 20px 0;
}

.nat #main 
{
    width:960px;
}

.nat form 
{
    float:left;
    padding-bottom:20px;
}

.nat fieldset 
{
    float:left;
    width:650px;
    margin-right:60px;
}


.nat legend, .nat h3
{
    margin: 0 0 20px 0;
    line-height:1.4;
    font-weight: bold;
    font-size: 1.2em;
}

/* ie only legend width fix */

.ie6 legend,.ie7 legend,.ie8 legend,
.ie6 legend span,.ie7 legend span,.ie8 legend span {float:left;}
.ie6 .fieldset-content, .ie7 .fieldset-content, .ie8 .fieldset-content  {clear:both;}

.nat .form 
{
    margin: 20px 0;
    padding:0;
    line-height:1.4;
    display: inline-block;
}

.nat .form li
{
    width:600px;
    margin: 0 0 20px 0;
    line-height:1.4;
    list-style-type:none;
}

.nat .form li input
{
    float:left;
    margin-top:2px;
}

.nat .form li label
{
    margin-left:25px;
    display:block;
    font-size:1.1em;
}

.nat .formContinue 
{
   margin:0 0 30px 0;
   padding: 8px 19px;
   -webkit-border-radius: 7px;
   -moz-border-radius: 7px;
   border-radius: 7px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   color: white;
   font-size: 16px;
   font-family: Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   margin-top:20px;
   display: block;
   width: 158px;
   text-align:center;
   border:none!important;
   border-top: 1px solid #84e08d;
   background: #2f8a38;
   background: -webkit-gradient(linear, left top, left bottom, from(#59bb63), to(#2f8a38));
   background: -webkit-linear-gradient(top, #59bb63, #2f8a38);
   background: -moz-linear-gradient(top, #59bb63, #2f8a38);
   background: -ms-linear-gradient(top, #59bb63, #2f8a38);
   background: -o-linear-gradient(top, #59bb63, #2f8a38);
   float:left;
   clear:left;
}

.nat .formContinue:hover {
   border-top-color: #59bb63;
   background: #59bb63;
   color: #ffffff;
}

.nat .continueTo 
{
    float: left;
    margin: 29px 0 0 10px;
    font-weight: bold;
    font-size: 1.2em;
}

.nat .formContinue.theme 
{
    width:168px
}

.nat .formContinue.report 
{
    /*width:190px*/width:209px;
}

.nat a.back 
{
   float:left;
   clear:both;
}

.disabled 
{
    background:#ccc!important;
    color:#888!important;
    cursor:default!important;
}

.disabled:hover 
{
    background:#ccc!important;
}

/* Grouped radio button lists */

.nat ol li.group
{
    list-style-type:decimal;
    font-size:2em;
}

.nat ul li.group
{
    list-style-type:none!important;
    font-size:2em;
}

.nat ol li.group p, .nat ol li.group label
{
    list-style-type:decimal;
    font-size:0.5em;
}

.nat ul li.group p, .nat ul li.group label 
{
    list-style-type:disc;
    font-size:0.5em;
}

/* IE only */

.ie7 .nat .form, .ie6 .nat .form
{
    list-style-position:inside;
}

.ie6 .nat .form li, .ie7 .nat .form li
{
    margin-left:-15px;
}

.ie6 .nat .form li.group, .ie7 .nat .form li.group
{
    padding-left:15px;
    margin-left:0px!important;
    vertical-align:text-top;
}

.ie6 .nat .form li.group ol, .ie7 .natl.form li.group ol, .ie6 .nat .form li.group ul, .ie7 .nat .form li.group ul 
{
    padding-left:0px;
}



.nat nav#global {
	width: 405px;	
}
.nat #whatIntro img {
	 width: 300px;
	 height: 200px;
	 float: left; 
	 margin-right: 30px; 
	 border: 1px solid #999999;
}

.nat #whatIntro div.content ul {
	padding-left: 360px;
}

.nat h1,
.nat h2 {
	margin-left: 0;
}

/* NAT screens without progress bar (e.g. interest) */

.interest fieldset 
{
    width:960px!important;
    margin-right:0px!important;
}

.interest .homeWarning fieldset 
{
    width:auto!important;
    
}

.interest .form li 
{
    width:960px;
    list-style:none;
    font-size:1em!important;
}

.interest .form li.group 
{
    padding-left:0px!important;
    list-style-type:none;
}

/* IE only */

.ie6 .interest .form li.group, .ie7 .interest .form li.group, .ie8 .interest .form li.group 
{
    margin-left:-15px;
}

.interest .form li.group p
{
    font-size:1.1em!important;
}

.interest .form li.group ul, .interest .form li.group ol
{
    margin-bottom:60px!important;
}

.ie7 .interest .form li.group ul, .ie7 .interest .form li.group ol 
{
    margin-bottom:20px!important;
}

.interest .form li li 
{
    list-style:disc!important;
    width:680px!important;
}

.interest .form li label 
{
    font-size:1.5em!important;
    font-weight:bold!important;
}

.interest .form li label.selected 
{
    /*color:#69db75;*/
}

.interest .form li input 
{
    margin-top:6px!important;
}

.interest .form li img 
{
    float:right!important;
    margin:-22px 0 0 0!important;
}

.progress ol
{
    list-style:none!important;
    margin-left:0!important;
    padding-left:0!important;    
}

.progress ol li 
{
    font-weight:bold!important;
}

.progress ol li a 
{
    font-weight:normal!important;
}

/* Study Plan */

div.keepCopy {
    display: block;
    width: 200px;
    background:#303030;
    color:#fff;
    border: 1px solid #222;
    padding: 20px;
    position:absolute;
    top:-50px;
    right:0px;
    
    -webkit-border-top-right-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	
	-webkit-box-shadow: inset 0 -1px 1px rgba(31,31,31,0.3);
    -moz-box-shadow   : inset 0 -1px 1px rgba(31,31,31,0.3);
    box-shadow        : inset 0 -1px 1px rgba(31,31,31,0.3);
}

div.keepCopy a, div.keepCopy a:visited
{
    color:#fff;
    margin:10px 0 0 0;
    display:inline-block;
    padding-left:22px;
}

div.keepCopy strong 
{
    font-size:1.1em;
}

.keepCopy .print {background: transparent url(../img/printer-medium.png) no-repeat 0 1px;}
.keepCopy .download {background: transparent url(../img/drive-download.png) no-repeat 0 1px;}


/* Study plan tables */

.studyPlan td a, .studyPlan td a:visited {color:#222;}

table.studyPlan
{
  float:left;
  width: 100%;
  margin: 30px 0 0 0;
  border-collapse: separate;
  text-shadow: 0 1px 0 #fff;
  color: #2a2a2a;
  background: #fafafa;
  
}

.studyPlan td
{
  line-height: 50px;
  padding: 15px 20px 18px;
  -moz-box-shadow: 0 1px 0 white;
  -webkit-box-shadow: 0 1px 0 white;
  white-space: nowrap;
  text-align: left;
  padding-top:15px;border:1px solid #dbdbdb;
}

.studyPlan tr.odd-row td {background:#e8e8e8;}
.studyPlan thead tr.odd-row td {background:none;}

/* Table Body */
.studyPlan tbody td
{
  text-align: left;
  font: normal 12px Verdana, Arial, Helvetica;
  width: 150px;
}

.studyPlan tbody td:first-child
{
  width: auto;
  text-align: left;
}

.studyPlan td:nth-child(4)
{
  background: #e7f3d4;
  background: rgba(184,243,85,0.3)!important;
}

.ie6 .studyPlan td.first, .ie7 .studyPlan td.first
{
    width:125px;
}

.ie6 .studyPlan td.modulename, .ie7 .studyPlan td.modulename
{
    width:285px;
}

.ie6 .studyPlan td.studylevel, .ie7 .studyPlan td.studylevel
{
    width:200px;
}

.ie6 .studyPlan td.last, .ie7 .studyPlan td.last
{
    width:130px;
}


/* Table Header */
.studyPlan thead td
{
  font: bold 1.3em 'trebuchet MS', 'Lucida Sans', Arial;
  border-top: 1px solid #eaeaea;
  padding-top:10px;
}

.studyPlan thead td:first-child
{
  border-top: none;
}

/* Table Footer */

.studyPlan tfoot td
{
  font: bold 1.4em Georgia;
  border-bottom: 1px solid #dadada;
}

.studyPlan tfoot td:first-child
{
  border-bottom: none;
}

.studyPlan thead td:nth-child(4) 
{
    background:#F6F6F6!important;
}

section#furtherInfo 
{
    clear:both;
    float:left;
    width:960px;
    margin:30px 0 30px 0;
    /* padding-bottom:30px; removed to fix footer issue in Chrome */
}

section#furtherInfo h2 
{
    font-size:2em;
    border-bottom: 1px solid #727272;
    padding-bottom: 4px;
}

section#furtherInfo div 
{
    position:relative;
    /*padding-bottom:60px;  removed to fix footer issue in Chrome */
}
section#furtherInfo div p
{
    padding-bottom: 10px;
}

section#furtherInfo #howWork, section#furtherInfo #studyPlan
{
    width: 300px;
    margin-right: 30px;
    float: left;
}
section#furtherInfo #CTA
{
    width: 300px;
    float: left;
    padding-top: 53px;
}
section#furtherInfo a.pdf {
	display: block;
	height: 30px;
	padding: 5px 0 0 40px;
	background:url(../img/icon-pdf.png) no-repeat 0 0;
}

section#furtherInfo #CTA a, #CTA a:visited
{
    padding: 15px 9px;
    width: 260px;
    display: block;
    text-align: center;
    font-size: 1.4em;
    text-decoration: none;
        
    background: #28552c; /* Old browsers */
    background: -moz-linear-gradient(top, #5ab863 0%, #28552c 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5ab863), color-stop(100%,#28552c)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #5ab863 0%,#28552c 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #5ab863 0%,#28552c 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #5ab863 0%,#28552c 100%); /* IE10+ */
    background: linear-gradient(top, #5ab863 0%,#28552c 100%); /* W3C */
    
    -webkit-box-shadow: 0 2px 6px rgba(50, 50, 50, 0.71);
	-moz-box-shadow:    0 2px 6px rgba(50, 50, 50, 0.71);
	box-shadow:         0 2px 6px rgba(50, 50, 50, 0.71);
}

section#furtherInfo #CTA a:hover
{
    filter:none;
    background: #52a85a!important;
}

section#furtherInfo #studyLevels
{
    width: 465px;
    margin-right: 30px;
    float: left;
}
section#furtherInfo #whatsNext
{
    width: 465px;
    float: left;
}

/* progress bar */

div.progress 
{
    width:250px;
    float:right;
}

div.progress strong {
    font-size: 1.4em;
    font-weight: bold;
    margin: 0 0 30px 0;
    display:block;
}

div.progress .bar
{
    float:left;
    padding:5px;
    width:20px;
    /*height:400px;*/
    -webkit-border-top-right-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
    -moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
    box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
	background:#222 url(../img/progressIndicatorEmpty.gif) no-repeat 5px 5px;
}

div.progress .bar span 
{
     display: block;
        width: 20px;
           -webkit-border-top-right-radius: 3px;
        -webkit-border-bottom-right-radius: 3px;
               -moz-border-radius-topright: 3px;
            -moz-border-radius-bottomright: 3px;
                   border-top-right-radius: 3px;
                border-bottom-right-radius: 3px;
            -webkit-border-top-left-radius: 3px;
         -webkit-border-bottom-left-radius: 3px;
                -moz-border-radius-topleft: 3px;
             -moz-border-radius-bottomleft: 3px;
                    border-top-left-radius: 3px;
                 border-bottom-left-radius: 3px;
        background-color: rgb(43,194,83);
        background-image: -webkit-gradient(
          linear,
          left bottom,
          left top,
          color-stop(0, rgb(43,194,83)),
          color-stop(1, rgb(84,240,84))
         );
        background-image: -webkit-linear-gradient(
          center bottom,
          rgb(43,194,83) 37%,
          rgb(84,240,84) 69%
         );
        background-image: -moz-linear-gradient(
          center bottom,
          rgb(43,194,83) 37%,
          rgb(84,240,84) 69%
         );
        background-image: -ms-linear-gradient(
          center bottom,
          rgb(43,194,83) 37%,
          rgb(84,240,84) 69%
         );
        background-image: -o-linear-gradient(
          center bottom,
          rgb(43,194,83) 37%,
          rgb(84,240,84) 69%
         );
        -webkit-box-shadow:
          inset 0 2px 9px  rgba(255,255,255,0.3),
          inset 0 -2px 6px rgba(0,0,0,0.4);
        -moz-box-shadow:
          inset 0 2px 9px  rgba(255,255,255,0.3),
          inset 0 -2px 6px rgba(0,0,0,0.4);
        position: relative;
        overflow: hidden;
        
}

div.progress ol.stages {
    list-style: none;
    margin: 0 0 0 25px;
    padding: 0;
    /*height:500px;*/
    width:215px;
    float:left;
}

div.progress ol.stages li
{ 
    font-size:1.1em;
    font-weight:normal;
    line-height:1.2;
    color:#dcdcdc;
    height:32px!important;
    margin-bottom:5px;
    margin-left:10px;
}

.ie6 div.progress ol.stages li, .ie7 div.progress ol.stages li 
{
    display:list-item;
}

div.progress ol.stages li.seen 
{
    color:#fff;font-weight:bold;
}

div.progress ol.stages li.start 
{
 color:#fff;
 height:32px!important;
 margin-top:-3px!important;
 font-weight:bold;
 margin-bottom:15px;
}

div.progress ol.stages li.minorStep 
{
    background:url(../img/minorStep.gif) no-repeat left 28%!important;
    height:30px!important;
}

/*
div.progress ol.stages li.minorStep {
    background: #fff;
    height: 1px!important;
    margin-top:3px!important;
    margin-bottom: 22px;
    width: 10px;
}
*/
.ie6 div.progress ol.stages li.minorStep, .ie7 div.progress ol.stages li.minorStep 
{
    margin-bottom:0px!important;
    height:32px!important
    background:url(../img/minorStep.gif) no-repeat left 35%!important;
}

.ie6 div.progress ol.stages li.start, .ie7 div.progress ol.stages li.start
{
    margin-bottom:5px;
}
/*
.ie6 div.progress ol.stages li.minorStep, .ie7 div.progress ol.stages li.minorStep
{
    margin-bottom:10px;
}
*/
/* no-js fallback */

/* hide progress bar */

.no-js div.progress div.bar 
{
    display:none;
}

.no-js div.progress ol.stages 
{
    margin:0;
    padding:0;
}

/* show ticks next to completed stages */

.no-js div.progress ol.stages li
{
    height:auto!important;
    padding:10px 0 0 40px;
    margin:0 0 15px 0;
}

.no-js div.progress ol.stages li.start, .no-js div.progress ol.stages li.seen
{
    background:url(../img/tick.png) no-repeat 0 0;
    color:#fff;
}

.no-js div.progress ol.stages li.current 
{
    background:none;
    color:#fff!important;
}

/* Form sliders */

.nat .form li .formSlider li 
{
    position:relative;
}

.nat .form li .formSlider label
{
    cursor:default;
    margin:0;
    padding:0;
}

div.sliderControl 
{
    margin:10px 0 35px 0;
}

div.sliderControl {
    font-size:0.5em; /* reset inherited 2em font size */
    }
    
.nat .form li .formSlider input.sliderValue {
    font-size: 0.5em;
    margin: 10px 0 0 0;
    background: 0;
    border: 0;
    color: #fff;
    font-size: 0.8em;
    font-weight: bold;
    width: 100px;
    margin: 0 auto;
    display: block;
    clear: none;
    float: none;
    text-align:center;
}

.ie6 .nat .form li .formSlider input.sliderValue, .ie7 .nat .form li .formSlider input.sliderValue
{
    padding-left:18px;
}

.nat .form li .formSlider span.min, .nat .form li .formSlider span.max {
    font-size: 0.6em;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 15px;
    font-weight: bold;
}

.nat .form li .formSlider span.min {
    left: 0;
}

.nat .form li .formSlider span.max {
    right: 0;
}

/* Colours */

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 1px solid #3c8f44!important;
    background: #43a14c!important;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus 
{
    background: #59bb63!important;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active
{
    background: #fff!important;
    border: 1px solid #D4CCB0!important;
}

/* Slider controls without JS */

.no-js .nat .form li .formSlider input.sliderValue 
{
    border: 1px solid #222!important;
    background: #fff!important;
    width: 50px;
    font-size: 0.6em;
    float: left;
    margin: 0 0 20px 0;
    text-align:left;
    color:#000;
    font-weight:normal;
    font-size:0.5em;
    padding:2px;
}

.no-js .nat .form li .formSlider span.min, .no-js .nat .form li .formSlider span.max {
    display:none;
}

.no-js .nat .form li .formSlider label 
{
    clear:left;
    margin: 20px 0;
}


/* Alert to remind users to download or print their study plan */
/* These styles also used for NAT exit warning */

div.reminder, .exitWarning, .homeWarning, .bookmarked
{
    padding:15px;
    display:none;
    width: 400px;
    background:#fff;
    color:#111;
    font-size:1em;
    border:4px solid #ccc;
    
	-webkit-box-shadow: 0px 0px 10px rgba(75, 75, 75, 1);
	-moz-box-shadow:    0px 0px 10px rgba(75, 75, 75, 1);
	box-shadow:         0px 0px 10px rgba(75, 75, 75, 1);
}

.bookmarked form, .bookmarked form fieldset, div.reminder form, div.reminder form fieldset, .exitWarning form, .exitWarning form fieldset, .homeWarning form, .homeWarning form fieldset
{
    width:auto;
    margin:0;
}

.bookmarked form fieldset strong, div.reminder form fieldset strong, .exitWarning form fieldset strong, .homeWarning form fieldset strong {
    font-size:1.2em;
    margin: 0 0 7px 0;
    display: block;
}

.bookmarked form fieldset p, div.reminder form fieldset p, .exitWarning form fieldset p, .homeWarning form fieldset p
{
    margin: 0 0 10px 0;
}

.bookmarked li, div.reminder li, .exitWarning li, .homeWarning li
{
    margin:0 0 10px 0;
}

.bookmarked li label, div.reminder li label, .exitWarning li label, .homeWarning li label
{
    padding-left:10px;
}

.bookmarked a#continue, div.reminder a#continue, .exitWarning a#yes, .homeWarning a#yes
{
   padding: 8px 19px;
   -webkit-border-radius: 7px;
   -moz-border-radius: 7px;
   border-radius: 7px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   color: white;
   font-size: 16px;
   font-family: Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   margin-top:20px;
   display: block;
   text-align:center;
   border-top: 1px solid #96d1f8;
   background: #3288c2;
   background: -webkit-gradient(linear, left top, left bottom, from(#3ca4e9), to(#3288c2));
   background: -webkit-linear-gradient(top, #3ca4e9, #3288c2);
   background: -moz-linear-gradient(top, #3ca4e9, #3288c2);
   background: -ms-linear-gradient(top, #3ca4e9, #3288c2);
   background: -o-linear-gradient(top, #3ca4e9, #3288c2);
   color: #ffffff!important;
   float:left;
   clear:left;
}

.bookmarked a#continue:hover, .bookmarked a#continue:active, div.reminder a#continue:hover, div.reminder a#continue:active, .exitWarning a#yes:hover, .exitWarning a#yes:active, .homeWarning a#yes:hover, .homeWarning a#yes:active
{
   
   background: #40aff9;
   color: #fff!important;
}

input.setCookie 
{
    margin-left: 20px;
    clear: left;
    float: left;
}

label.setCookie 
{
    padding-left: 10px;     
    float: left;
}

/* Stacking order */
.reminder {z-index:301;}
.bookmarked {z-index:301;}
.exitWarning, .homeWarning {z-index:301;}

.excerpt {z-index:205;} 

.buttons {z-index: 300;}
.galleryContainer{z-index:202;}
.mask-excerpt{z-index:202;}
.gallery {z-index:201;}
.slider {z-index:201;} /* image gallery */

#modal-overlay {z-index:200;} /* all modal windows to be above 200 */

div#thumbnailViewer {z-index:199;}
div#thumbnailViewer div {z-index:198;}
div#thumbnailViewer img {z-index:197;}

a#showResourceInfo {z-index:196;}
div#levelSelectTip {z-index: 196;}

nav#levelSelect {z-index:195;}
nav#levelSelect ol {z-index:194;}

div#infobar a {z-index:193;}
div#infobar {z-index:192;}

/* No js - hide audio player */

.no-js .jp-player, .no-js .jp-audio 
{
    display:none!important;
}

/* Audio transcript */

.audioTranscript 
{
    float: right;
    width: 209px;
    padding:8px;
    height: 210px;
    position: relative;
    display: inline-block;
    margin: -115px 0 0 0;
    overflow-y: scroll;
    overflow-x: hidden;
    background:#fff;
    color:#222;
    border: 1px solid #fff;
    visibility:hidden;
}

.no-js .audioTranscript 
{
    visibility: visible!important;
    position: absolute;
    bottom: 20px;
    left: 20px;
    height: 160px;
    width: 550px;
}

.ie6 .audioTranscript 
{
    margin-top:15px;
}

.audioTranscript p 
{
    margin:10px 0;
}

.showTranscript 
{
    float:left;
    clear:left;
    margin: 5px 0 0 0;
    font-size: 0.9em;
}

.no-js .showTranscript 
{
    display:none;
}


span.url
{
    display:none;
}

img.openDoor
{
    position: absolute;
    top: 100px;
    right: 30px;
}


/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }



/* ==|== media queries ======================================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */

}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */

}



/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
 
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
  nav#global,
div.keepCopy,
div.reminder, 
div.bookmarked, 
.exitWarning,
.homeWarning,
#jsMessage,
.studyPlan td a, .studyPlan td a:visited
{
    display:none;
}
section#furtherInfo {width:900px}
.nat #main {width:900px}
span#lastUpdated, span#version
{
float: left;
clear: both;
width: auto;}
body {margin:20px;}
}


/* sticky footer */


footer {position: relative;
	margin-top: -165px; /* negative value of footer height */
	height: 165px;
	clear:both;} 

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

.ie6 #container, .ie8 #container, .ie9 #container {display:table;height:100%}

/* Override for hidden inputs in NAT */

 .hiddenField 
 {
     float:none!important;
     margin:0!important;
     padding:0!important;
 }
 
 .minorStep 
 {
     font-size: 1em!important;
 }
 
 /* Bookmark link */
 a.bookmark {
	padding: 10px 0 10px 0;
	float: right;
	margin-top: -40px;
	display: block;
	position: relative;
 }
 
 /* NAT error message */
 p.missedQuestion {
 	background-color: #9b1c1d;
 	color: #FDF8C4;
 	padding: 10px;
 	-webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    width: 650px;
    margin-top: 20px;
 }
 
 .exitWarning a, .homeWarning a
 {color:#222!important
 }