@charset "utf-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b1 | 201101 
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
/* remember to define visible focus styles! 
:focus {
	outline: ?????;
} */

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
body {
	color: #000;
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 400;
}
#slideshow #slidesContainer {
	margin:0;
	width:800px;
	height:450px;
	position:absolute;
	top: 30px;
	left: 0;
	background-image:url(skin/bg.png);
}
#slideshow #slidesContainer .slide {
	margin:0 auto;
	width:780px; /* reduce by 20 pixels to avoid horizontal scroll */
	height:450px;
	position: relative;
	top: 0;
}
.header {
	width: 800px;
	height: 20px;
	padding: 5px 0px 5px 0px;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: white;
	background-image:url('skin/header.png');
}
.footer {
	width: 800px;
	height: 31px;
	position: fixed;
	top: 449px;
	left: 0px;
	background-color: #666;
	background-image: url(skin/play_bar.png);
}
/**
 * Slideshow controls style rules.
 */
.control {
	display:block;
	width:100px;
	height:22px;
	position:fixed;
	cursor: pointer;
}
#prevBtn {
	top:452px;
	left:0;;
	background-image: url(skin/prevBtn.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
}
#nextBtn {
	top:452px; 
	left: 700px;
	background-repeat: no-repeat;
	background-position: right bottom;
	background-image: url(skin/nextBtn.jpg);
}
/*------- DISPLAY TWEAKS ----------*/
.O60 {
	background:url(skin/BG_opacity60.png) repeat;
}
.button {
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;
	cursor: pointer;
}
strong {
	font-weight: 700;
}
.intro {
	height: 480px;
	width: 800px;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 999;
	background: url(../images/bg.jpg)no-repeat;
	overflow:hidden;
}
.intro .begin {
	position: absolute;
	right: 0px;
	top: 350px;
}
.intro .redBar {
	position: absolute;
	left: 0px;
	top: 150px;
	background: url(skin/mainTitle.png)no-repeat;
	width: 390px;
	height: 75px;
	padding: 30px 0 0 200px;
	color: #fff;
	font: 900 26px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
<!--intro--> 
.introPage {
	position:absolute;
	left:0px;
	top:0px;
	z-index:999;
	height:480px;
	width:800px;
	background-image:url(skin/bg.png);
}
;
#mainTitleTxt {
	padding:5px 20px 0px 300px;
	color:#FFF;
	font-weight:bold;
	font-size:26px;
	text-align:right;
}
#mainTitle {
	width:740px;
	height:110px;
	margin:125px 0px 0px -150px;
	background-image:url('skin/mainTitle.png');
	position:fixed;
}
#beginBtn {
	clear:both;
	width:175px;
	height:39px;
	background-image:url('skin/beginBtn.png');
	position:fixed;
	cursor:pointer;
	margin:350px 0px 0px 625px;
}
.btnTxt {
	color:#FFF;
	font-weight:bold;
	font-size:16px;
	text-align:center;
	padding:7px 0px 0px 0px;
}
.dShadow {
	-moz-box-shadow: 2px 2px 5px #CCC;
	-webkit-box-shadow: 2px 2px 5px #CCC;
	box-shadow: 2px 2px 5px #CCC;
}
/* slide 1  instructions*/

.instructSlide1 {
	position:absolute;
	width:750px;
	top:20px;
	left:25px;
	font-size:14px;
	text-align:center;
}
/*.box {
	height:30px;
	background-image:url(../images/lastBoxN.png);
	background-repeat:no-repeat;
}*/
.slider-nav {
	position:absolute;
	top:0;
	z-index:980;
	width:250px;
	margin:150px 0px 0px 10px;
}
.slider-nav li {
	list-style:none;
	height:40px;
	margin:5px 0px 0px 0px;
	border-width:0 0 1px 0;
	background-repeat:no-repeat;
	text-align:center;
	font-size:14px;
}
.slider-nav li a {
	display:block;
	width:250px;
	height:40px;
	padding:7px 0px 0px 0px;
	text-decoration:none;
	color:#FFF;
}

.currBox {
	font-weight:bold;
	background-image:url(../images/lastBox1.png);
	background-repeat:no-repeat;
}

.slider-nav li a:hover, .slider-nav li.active a {
	background-image:url(../images/lastBox1.png);
	background-repeat:no-repeat;
}
.s3Title {
	font-weight:bold;
	position:absolute;
	top:10px;
	left: 0px;
	width:500px;
	font-size:15px;
}
#large1 {
	font-size:13px;
}
.s3Text {
	position:absolute;
	left:0px;
	top:32px;
	font-size:11.5px;
	width:475px;
}
.instEx {
	width: 475px;
	padding:62px 0 0;
}
.container {
	width: 800px;
	height:450px;
	position:absolute;
}
.imageExample {
	background:#FFFFFF;
	padding:10px 5px 30px 5px;
	margin:5px;
	height:125px;
	float:left;
	text-align:center;
}
.imageExample a {
	text-decoration:none;
	color:#333;
	font-size: 14px;
}
/**  Replay Stuff **/
.replayBox {
	position:absolute;
	width:798px;
	margin-top:150px;
	border-style:solid;
	border-width:1px;
	border-color:#FFF;
	background-color:#8A8A8B;
}
.replayTxt {
	margin:10px 10px 10px 50px;
	color:#FFF;
	width:700px;
}
.replayIcon {
	margin-top:250px;
	margin-left:357px;
	position:absolute;
	cursor:pointer;
}
/* detail view */


.detailTitle {
	font-weight:bold;
	font-size:16px;
	padding:4px;
}
.inExample {
	width:600px;
	height:400px;
	font-size:14px;
	margin:5px;
	padding:10px 15px 10px 15px;
}
.inImage {
	float:left;
	margin:10px;
}
.instructLink {
	text-align:right;
	color:#000;
}
.instructLink a {
	text-decoration:none;
	cursor:pointer;
}
;
iframe {
	margin: -8px 0 0 -8px;
}
.ivideo {
	position: absolute;
	left: 42px;
	top: -9px;
}

div.titleTxt {
	margin: 20px 0px 0px 0px;
	font-size:16px;
	font-weight:bold;
}
table.target {
	width: 100%;
	height: 100px;
	font:14px Arial, Helvetica, sans-serif;
	color: #666666;
	border: solid 2px #666666;
	border-collapse: collapse;
	margin:50px 0px 0px 0px;
	-moz-box-shadow: 2px 2px 5px #CCC;
	-webkit-box-shadow: 2px 2px 5px #CCC;
	box-shadow: 2px 2px 5px #CCC;
}
th.target {
	background-color: #666666;
	color: white;
	padding: 4px;
}
td.target {
	padding: 4px;
	border: solid 1px #666666;
	cursor:pointer;
}
tr.label {
	background-color:#FFF;
	border: solid 1px #666666;
	text-align: center;
}
tr.label2 {
	background-color:#FFF;
	border: solid 1px #666666;
	text-align: center;
	cursor:pointer;
}
.mainBox tr.highlight {
	background-color: #eee;
}

.mainBox tr.highlightCorrect {
	background-color: #090;
	color:#FFF;
	font-weight:bold;
}

.mainBox tr.highlightIncorrect {
	background-color: #C33;
		color:#FFF;
	font-weight:bold;
}

div.corretBox {
	width:600px;
	border:1px solid #090;
	font-size:16px;
	margin:10px 0px 0px 30px;
	padding:15px;
	background-color:#FFF;
	-moz-box-shadow: 2px 2px 5px #CCC;
	-webkit-box-shadow: 2px 2px 5px #CCC;
	box-shadow: 2px 2px 5px #CCC;
}

div.incorretBox {
	width:600px;
	border:1px solid #C33;
	font-size:16px;
	margin:10px 0px 0px 30px;
	padding:15px;
	background-color:#FFF;
	-moz-box-shadow: 2px 2px 5px #CCC;
	-webkit-box-shadow: 2px 2px 5px #CCC;
	box-shadow: 2px 2px 5px #CCC;
}


#correctTxt {
	font-size:18px;
color:#090;
	font-weight:bold;
}
#incorretTxt {
	font-size:18px;
color:#C33;
	font-weight:bold;
}