/* Flash Files
---------------------------------------------------------- */
object,
embed {
	width: 100%;
	height: 100%;
}



/* Basic
---------------------------------------------------------- */
body {
	overflow: hidden;
}
body.resourcePageBody {
	height: 100%;
}
.clear {
	clear: both;
	height: 1px;
	margin-top: -1px;
	overflow: hidden;
}
#ResourcePage {
	text-align: center;
	background: black;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#ResourcePage #Splash img {
	width: 100%;
}

#ResourcePage #BasicNavigation,
#ResourcePage .mainNavigation {
	position: absolute;
}
#ResourcePage .mainNavigation {
	bottom: 20px;
	right: 20px;
	z-index: 1000;
}
#ResourcePage #LessonsNavigationBar {
	position: absolute;
	bottom: 20px;
	right: 20px;
}

#ResourcePage #BasicNavigation {
	width: 250px;
	height: 500px;
	top: 25px;
	left: 25px;
}
#ResourcePage #BasicNavigation a {
	width: 160px;
	padding: 4px 25px;
	margin-bottom: 10px;
}
#ResourcePage .mainNavigation a.pageNumber {
	font-weight: bold;
	position: absolute;
	right: -10px;
	bottom: -10px;
	background: white;
	padding: 0 3px 0 3px;
}


/* Generic
---------------------------------------------------------- */
.fullScreen,
.sizedScreen {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
.fullScreen img {
	width: 100%;
}
.pointer img {
	cursor: pointer;
}
#ContainerRevealGroups,
#ContainerMatch,
#ContainerMover,
#DrawCanvas,
#WriteCanvas {
	display: none;
}


/* Page Turner
---------------------------------------------------------- */
.lessonPageTurner {
	background: black;
}
#OpenTurner,
.openTurner {
	position: absolute;
	display: block;
	top: 0;
	left: 50%;
	height: 100%;
}
#ContainerTP,
.containerTP {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2000;
}
#ContainerTP #TurnerCloseButton,
.containerTP .turnerCloseButton {
	position: absolute;
	bottom: 30px;
	right: 200px;
	z-index: 1000;
}
#TurnerPages #pageBackgroundRight2 img,
#TurnerPages #pageBackgroundLeft2 img,
#TurnerPages #pageBackgroundRight img,
#TurnerPages #pageBackgroundLeft img {
	height: 100%;
}


/* Other Content
---------------------------------------------------------- */
.otherContent {
	overflow-y: auto;
}
.otherContent * {
	width: 100%;
}

/* Reveal
---------------------------------------------------------- */
.mainNavigation .next {
	margin-right: 50px;
}


/* Match
---------------------------------------------------------- */
#ContainerMatch .draggable {
	position: absolute;
	top: 0;
	left: 0;
}
#ContainerMatch .match1 {
	top: 70%;
	left: 5%;
}
#ContainerMatch .match2 {
	top: 80%;
	left: 25%;
}
#ContainerMatch .match3 {
	top: 60%;
	left: 50%;
}
#ContainerMatch .match4 {
	top: 75%;
	left: 75%;
}
#ContainerMatch .match5 {
	top: 60%;
	left: 15%;
}


/* Mover
---------------------------------------------------------- */
#ContainerMover .draggable,
.writeCanvas .draggable {
	position: absolute;
}


/* Reveal Multi
---------------------------------------------------------- */



/* Draw Canvas
---------------------------------------------------------- */
#DrawCanvas,
#CanvasCover,
#WriteCanvas,
#WriteCanvasCover {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	cursor: crosshair;
}
#CanvasCover span,
#BrushSize div,
#WriteCanvasCover span,
#WriteBrushSize div {
	border-radius: 50px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	cursor: crosshair;
	position: relative;
	behavior: url(PIE.htc);
}
#Tools,
#WriteTools {
	position: absolute;
	top: 505px;
	left: 5px;
	width: 460px;
	height: 50px;
}
#BrushSize div,
#WriteBrushSize div {
	cursor: pointer !important;
	overflow: hidden;
	text-indent: -9999px;
	float: left;
	margin-left: 5px;
}
#BrushSize #d20,
#WriteBrushSize #Write20 {
	background: red;
	width: 20px;
	height: 20px;
	margin-top: 15px;
}
#BrushSize #d30,
#WriteBrushSize #Write30 {
	background: red;
	width: 30px;
	height: 30px;
	margin-top: 10px;
}
#BrushSize #d40,
#WriteBrushSize #Write40 {
	background: red;
	width: 40px;
	height: 40px;
	margin-top: 5px;
}
#BrushSize #textButton,
#WriteBrushSize #textButton {
	background: #e7e7e7;
	color: red;
	font-weight: bold;
	font-family: "Comic Sans MS";
	width: 40px;
	height: 40px;
	margin-top: 5px;
	text-indent: 0;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	font-size: 30px;
	position: relative;
	behavior: url(PIE.htc);
}
.eraser,
.undo {
	background: #e7e7e7 url(../images/eraser.gif) no-repeat 5px 5px;
	color: red;
	font-weight: bold;
	font-family: "Comic Sans";
	width: 40px;
	height: 40px;
	margin-top: 5px;
	margin-left: 5px;
	text-indent: 0;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	font-size: 30px;
	float: left;
	cursor: pointer;
	position: relative;
	behavior: url(PIE.htc);
}
.undo {
	background: #e7e7e7 url(../images/undo.gif) no-repeat 5px 5px;
}
.jColorSelect {
	overflow:hidden; /* for IE6 */
	padding-left: 10px;
}
.jColorSelect div{
	background:url(../js/syronex-colorpicker.gif) no-repeat;
	float:left;
	width:13px;
	height:13px;
	cursor:pointer;
	overflow:hidden; /* for IE6 */
	border:1px solid #666666;
	margin:1px;
}
.jColorSelect .checkwht {
	cursor:default;	
	background-position:-13px 0;
}
.jColorSelect .checkblk {
	cursor:default;	
	background-position:-26px 0;
}


.mediaAudio {
	display: block;
	position: absolute;
	margin-top: 400px;
	left: 350px;
	width: 50px;
	height: 50px;
}
.mediaAudio div {
	
}
.mediaAudio embed {
	opacity: .01;
	position: absolute;
	margin-left: -5px;
}

/* Lessons
---------------------------------------------------------- */
#TheLessons .lesson {
	display: none;
}
#TheLessons .lesson .lessonPage {
	height: 100%;
}
#TheLessons .lesson .lessonPage .lessonBackground {
	background: black;
	height: 100%;
	width: 100%;
}
#LessonsNavigation {
	position: absolute;
	top: 30px;
	left: 8%;
	width: 90%;
}
#LessonsNavigation h1 {
	font-size: 3em;
	font-weight: bold;
}
#LessonsNavigation a.lessonButton {
	display: block;
	width: 200px;
	height: 150px;
	overflow: hidden;
	margin-right: 30px;
	margin-bottom: 50px;
	float: left;
	background: white;
	background: rgba(255,255,255,0.5);
}
#LessonsNavigation a.lessonButton img {
	width: 200px;
}
#LessonsNavigation a.lessonButton h2 {
	position: absolute;
	margin-top: 150px;
	width: 200px;
	font-weight: bold;
	font-size: 18px;
	background: white;
	background: rgba(255,255,255,0.5);
}
	#LessonsNavigation.manyItems a.lessonButton,
	#LessonsNavigation.manyItems a.lessonButton img,
	#LessonsNavigation.manyItems a.lessonButton h2 {
		width: 150px;
	}
	#LessonsNavigation.manyItems a.lessonButton {
		height: 110px;
	}
	#LessonsNavigation.manyItems a.lessonButton h2 {
		margin-top: 110px;
		line-height: 1.1;
		font-size: 1.3em;
	}

#TheLessons a.home {
	margin-left: 50px;
}
#TheLessons a.next {
	margin: 0;
}
#TheLessons .fullScreen img {
	height: 100%;
	width: 100%;
}
#TheLessons .fullScreen.otherContent img {
	height: auto;
	width: auto;
}

#TheLessons .mediaAudio {
	top: 0;
	left: 0;
}
#TheLessons .containerMover,
#TheLessons .containerFlipCards {
	overflow: hidden;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
#TheLessons .containerMover .draggable,
#TheLessons .containerMover .droppable,
#TheLessons .containerRevealMulti .underImage,
#TheLessons .containerRevealMulti .overImage,
#TheLessons .mainUnderImage,
#TheLessons .draggableImage,
#TheLessons .containerFlipCards .flipCard,
#TheLessons .containerFlipCards .flipCardCover {
	position: absolute;
}

#TheLessons .containerRevealMulti .overImage .audioObject {
	display: block;
}

.writeCanvas,
.writeCanvasCover,
.writeWriteMask,
.writeWriteMaskImage,
.highlightCanvas,
.highlightCanvasCover {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	cursor: crosshair;
}
.writeWriteMaskImage img {
	width: 100%;
}
.writeBrushSize div,
.writeCanvasCover span {
	border-radius: 50px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	cursor: crosshair;
	position: relative;
	behavior: url(PIE.htc);
}
.writeCanvasCover span,
.writeCanvasCover input {
	
}
.writeCanvasCover textarea {
	outline: none;
}
.writeTools {
	position: absolute;
	bottom: 5px;
	left: 5px;
	width: 460px;
	height: 50px;
	border-radius: 14px;
	-moz-border-radius: 14px;
	-webkit-border-radius: 14px;
	padding: 5px;
}
.writeTools,
.writeTools div {
	z-index: 9999;
}
.writeBrushSize div {
	cursor: pointer !important;
	overflow: hidden;
	text-indent: -9999px;
	float: left;
	margin-left: 5px;
}
.writeBrushSize div.active {
	outline: 2px solid #6a9e2c;
}
.writeBrushSize .write20 {
	background: red;
	width: 20px;
	height: 20px;
	margin-top: 15px;
}
.writeBrushSize .write30 {
	background: red;
	width: 30px;
	height: 30px;
	margin-top: 10px;
}
.writeBrushSize .write40 {
	background: red;
	width: 40px;
	height: 40px;
	margin-top: 5px;
}
.writeBrushSize .textButton,
.writeBrushSize .textButtonSmall,
.writeBrushSize .textButtonLarge {
	background: #e7e7e7;
	color: red;
	font-weight: bold;
	font-family: "Comic Sans MS";
	width: 40px;
	height: 35px;
	margin-top: 5px;
	text-indent: 0;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding-top: 5px;
	font-size: 20px;
	position: relative;
	behavior: url(PIE.htc);
}
.writeBrushSize .textButtonLarge {
	font-size: 30px;
	overflow: hidden;
	height: 40px;
	padding-top: 0;
}
.writeBrushSize .textButtonSmall {
	padding-top: 15px;
	font-size: 10px;
	height: 25px;
}

.highlightCanvasCover {
	opacity: 0.5;
}
.highlightCanvasCover span {
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	behavior: url(PIE.htc);
}
.highlightOn {
	color: black;
	background: yellow;
}

.draggableImage {
	cursor: move;
	top: 0;
	left: 0;
}

.frameSound {
	display: none;
}
.clickToPlay {
	z-index: 1000;
	cursor: pointer;
}
.flipCard {
	cursor: move;
}

.loadingAnimation {
	line-height: 500px;
	color: white;
	background: black;
	background: rgba(0,0,0,0.6);
}

.postit {
	position: absolute;
	width: 200px;
	background: url(../images/postit.png) bottom center;
}
.postit .pnTop,
.postit .pnBot {
	height: 15px;
	cursor: move;
}
.postit .pnMid .closeConfirm {
	display: none;
}
.postit .pnTop a {
	cursor: pointer;
	padding-right: 20px;
	padding-left: 10px;
}
.postit div textarea {
	background: none;
	border: none;
	height: auto;
	width: 160px;
	margin-left: 20px;
	font-family: "Comic Sans MS";
	font-size: 26px;
	outline: none;
}

/* Slideshow */

.containerSS {
	text-align: center;
}
ul.slideShowImages {
	width: 400px;
	height: 300px;
	top: 15%;
	left: 25%;
	list-style: none;
	overflow: hidden;
	position: absolute;
}
ul.slideShowImages li {
	list-style: none;
	width: 400px;
	height: 300px;
	position: absolute;
}

.slideShowPrev {
	position: absolute;
	left: 15%;
	top: 50%;
	display: block;
}
.slideShowNext {
	position: absolute;
	right: 15%;
	top: 50%;
	display: block;
}

.vertical .slideShowPrev {
	top: 15%;
	left: 48%;
}
.vertical .slideShowNext {
	top: 80%;
	right: 48%;
}