/* YUI 3.7.3 (build 5687) Copyright 2012 Yahoo! Inc. All rights reserved. Licensed under the BSD License. http://yuilibrary.com/license/*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}

body {
	user-select: none;
}

#main {
	/*position: relative;*/
	position: absolute;
	overflow: hidden;
	display: block;
	left: 0px;
	top: 0px;
	width: 1024px;
	height: 768px;
	-moz-user-select: none;
	user-select: none;
}

p + p {
		text-indent: .75em;
	}

img {
	position: absolute;
	left: 0px;
	top: 0px;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

div {
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

.bulb {
	position: absolute;
}

.tcbutton {
	position: absolute;
	width: 90px;
	height: 25px;
	background-color: black;
	border-radius: 5px 0px 0px 5px;
	top: 682px;
	left: 935px;
	z-index: 4
}

.tc {
	position: absolute;
	width: 1000px;
	left: 10px;
	top: -230px;
	height: 200px;
	background-color: black;
	border-radius: 0px 0px 10px 10px;
	z-index: 5;
	font-family: "Lato";
	font-weight: bold;
	word-spacing: 4px;
	color: white;
	font-size: 16px;
	text-transform: uppercase;
}

.tctext {
	width: 160px;
	text-align: center;
	position: absolute;
	top: 160px;
	display: block;
}

.tctab {
	width: 100px;
	height: 38px;
	position: absolute;
	top: 189px;
	left: 450px;
	border-radius: 0px 0px 10px 10px;
	background-color: black;
}

@font-face {
	font-family: "Lato-Bold";
	font-style: normal;
	font-weight: bold;
	src: url('../fonts/Lato-Bol.ttf') format('truetype')
}

@font-face {
	font-family: "Lato";
	font-style: italic, oblique;
	font-weight: normal;
	src: url('../fonts/Lato-RegIta.ttf') format('truetype')
}

@font-face {
	font-family: "Lato-Reg";
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/Lato-Reg.ttf') format('truetype')
}

/*@font-face {
	font-family: "Helvetica";
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/HelveticaLTStd-Roman.ttf') format('truetype')
}

@font-face {
	font-family: "Minion Pro";
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/MinionPro-Regular.ttf') format('truetype')
}
@font-face {
	font-family: "Minion Pro";
	font-style: normal;
	font-weight: bold;
	src: url('../fonts/MinionPro-Bold.ttf') format('truetype')
}*/


#content {
	width: 295px;
	height: 640px;
	overflow: hidden;
	position: absolute;
	top: 36px;
	left: 36px;
	font-family: "Minion Pro";
	user-select: none;
	cursor: default;
}

#content p {
	font-family: "Minion-Pro-1", "Minion-Pro-2","Minion Pro", Georgia, "Times New Roman", serif;
	font-size: 24px;
	line-height: 29px;
	cursor: default;
}

#pageNo {
	position: absolute;
	left: 960px;
	top: 650px;
	font-family: "Helvetica";
	font-weight: bold;
	color: white;
	font-size: 22px;
}

#scrollImage {
	left: 335px;
	top: 61px;
}

#scrollRight {
	left: 966px;
	top: 30px;
}

#scrollRightH {
	left: 920px;
	top: 30px;
}


.video {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
}
.videobox {
	width: 90%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 90px;
	z-index: 1001;
}

.videoButton {
	/*top: 280px;*/
	top: 345px;
	left: 468px;
}

/*===============*/
.full-screen{
	position:absolute;
	width:1024px;
	height:768px;
	left:0px;
	top:0px;
}

.revealer{
	position:absolute;
	background-repeat:no-repeat;
	z-index:1000;
}

/*added by brice*/
.teacher-guide-button{
	position:absolute;
	/*background-color:#FC0;*/
	background-image:url(../images/teachers-guide.png);
	left:740px;
	top:700px;
	width:50px;
	height:50px;
	-webkit-border-radius:5px;
	z-index:1001;
	cursor:pointer;
}

.sticky-note{
	position:absolute;
	left:700px;
	top:450px;
	width:300px;
	height:250px;
	opacity:0.9;
	color:#000;
	font-size:30px;
	overflow:hidden;
	font-family:'Helvetica';
	z-index:100001000;
	cursor:pointer;
}

.sticky-note-textbox{
	color:#000;
	background-color:#fff;
	font-size:30px;
	padding:10px;
	width:93%;
	height:100%;
	float:left;
	overflow:hidden;
	font-family:'Helvetica';
	z-index:100001000;
}

.sticky-note-button{
	position:absolute;
	/*background-color:#FC0;*/
	background-image:url(../images/sticky-note-button.png);
	left:810px;
	top:700px;
	width:50px;
	height:50px;
	-webkit-border-radius:5px;
	z-index:1001;
	cursor:pointer;
}

.sticky-note-submit{
	position:absolute;
	background-color:#F60;
	background-image:url(../images/sticky-note-submit.png);
	left:950px;
	top:650px;
	width:50px;
	height:50px;
	-webkit-border-radius:5px;
	z-index:100002000;
	cursor:pointer;
	
}

.vocab{
	font-family:'Lato-Bold';
	position:relative;
	float:left;
	
}

.quiz-question{
	float:left;
	width:100%;
	font-family:'Lato-Bold';
	z-index:101;
}

.quiz-answer{
	float:left;
	width:76%;
	margin-top:30px;
	font-family:'Lato-Reg';
	position:relative;
	display:block;
	left: 30px;
	z-index:100;
}

.navigation-previous{
	background-image:url(../images/navigation.png);
	background-position:left;
	width:50px;
	height:50px;
	position:absolute;
	top:700px;
	left:880px;
	z-index:1001;
	cursor:pointer;
	
}
.navigation-next{
	background-image:url(../images/navigation.png);
	background-position:right;
	width:50px;
	height:50px;
	position:absolute;
	top:700px;
	left:950px;
	z-index:1001;
	cursor:pointer;
}

.text{
	font-family:'Lato-Reg';
	float:left;
	position:absolute;
	z-index:101;
}
.text_3{
	font-family:'Lato-Reg';
	float:left;
	position:absolute;
	
}
.logo{
	position:absolute;
	top: 311px;
	left: 705px;
	z-index:800;
}

.corner-tag{
	background:url(../images/corner-tag.png) no-repeat;
	height:50px;
	width:150px;
	position:absolute;
	top:0px;
	left:0px;
	z-index:800;
}

.active{	  
	border: 3px solid #bcbcbc;
	height: 70px;
	width: 250px;
	position: absolute;
}
.transBorder
{
	border:3px solid transparent;
}



.portion1{
   background-position:0px 0px !important;
}
.portion2{
   background-position:40px 0px !important;
}
.portion3{
   background-position:80px 0px !important;
}
.portion4{
   background-position:120px 0px !important;
}
.portion5{
   background-position:160px 0px !important;
}

#circle1{
	top: 74px;
	left: 898px;
	z-index: 1;
}
#circle2{
	top: 74px;
	left: 930px;
}
#circle3{
	top: 74px;
	left: 550px;
}
#circle1, #circle2, #circle3 {
	position: absolute;
}



.changeimage{
			top: 0px;
			left: 0px;
			position: absolute;
			
		
			transition:opacity 1s ease-in-out;
			}
			
			.shown {
				opacity:1;
				-webkit-transition: all 0.5s ease-in-out;
				-moz-transition: all 0.5s ease-in-out;
				-o-transition: all 0.5s ease-in-out;
				-ms-transition: all 0.5s ease-in-out;
				transition: all 0.5s ease-in-out;
				
			}

#id0{
	top: 136px;
	left: 191px;

}
#id1{
	top: 300px;
	left: 147px;
	
}
/*===============*/
#circle1{
	top: 74px;
	left: 898px;
	z-index: 1;
}
#circle2{
	top: 74px;
	left: 930px;
}
#circle3{
	top: 74px;
	left: 550px;
}
#circle1, #circle2, #circle3 {
	position: absolute;
}
.orange1{
	background-image:url('../images/yellow_dot.png');
	background-repeat:no-repeat;
	height: 23px;
	width: 23px;
}
.green1{
	background-image:url('../images/orange_dot.png');
	background-repeat:no-repeat;
	height: 23px;
	width: 23px;
}

area {
  display: block;
  cursor: pointer;
}

/**Egg Rotate**/

/*#imageRoate{
	position: absolute;
   
   
    -moz-animation: spinoff .2s 2 ease-in-out;
    animation-duration: 2s;
    -webkit-animation: spinoff .2s 2 ease-in-out; 
    -moz-animation: spinoff 2s infinite; 
    -o-animation: spinoff 2s infinite; 
    -webkit-animation: spinoff 2s infinite;
    animation: spinoff 2s infinite;
}*/
@-moz-keyframes spin {
	0% {
         -moz-transform: rotate(0deg);
    }
    100% {
         -moz-transform: rotate(360deg);
    }

    
}

@-webkit-keyframes spin {
	0% {
         -webkit-transform: rotate(0deg);
    }
    100% {
         -webkit-transform: rotate(360deg);
    }
	

    
}

@-webkit-keyframes spinoff {
	0% {
         -webkit-transform: rotate(0deg);
    }
    100% {
         -webkit-transform: rotate(360deg);
    }
 
}