@charset "utf-8";
/* CSS Document */

html body{
	margin:0pc;padding:0px;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
	-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
	font-family: 'Roboto',arial;}
	
@font-face {
    font-family: Franchise;
    src: url('Franchise.ttf'); 
	 
    }
#bannerHolder{width:100%;background-color:#EC644B;}
#banner{width:800px;height:100px;margin:auto;margin-bottom:30px;
font-size:90px;color:#fff;font-family:Franchise,Arial;}
#promo{margin-bottom:5px;}
#banner img{float:left;}

#bannerRight{float:right;font-size:25px;margin-top:20px;color:#fff !important;margin-right:5px;}

h1{
font-family:  arial;margin-top:0px;
}

p{
font-family: 'Roboto', arial;
}


#intro{
font-family: 'Roboto', arial;
}


.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#homebutton {
 position:absolute;
 right:0px;
top:0px;

}

#homebutton:hover{background:#F63;}

#spacer{
height:10px;}

#spacer2{
height:0px;
}

#spacer4{
padding:20%;
font-size:36px;
}


#u1{
padding:20px;
float:right;
}
#u2{
padding:20px;
float:right;
}

#u1:hover
{
opacity:.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
}

#u2:hover
{
opacity:.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
}


#allcontentbox {

border:3px;
border-radius:1px;
border-style:solid;
border-color:#EC644B;

margin:auto;
width:800px;
height:660px;
}

#notes {position:relative;
background-color:#eb974e;
width: 100%;

height:auto;
float:left;
 overflow:auto;
 color:#fff;
}



#notesins{
	padding-top:0px;
padding:10px;	
}


#notesm {
background-color:#FFE4CA;
width: 50%;

height:660px;
float:left;
 overflow:auto;
}



#notesinsm{
	 
padding:10px;	
}




.spacer3{height:2px;width:100%;background-color:#FFFFFF;}

.box1{cursor: pointer; height:23px;width:100%;font-family: arial;opacity:.6;}

#leftcol{
height:auto;
}


#rightcol{
float:left;
width:50%;
}


#vid{
height:250px;
 
}



#intro{
height:50px;
padding:10px;
border-bottom:3px solid #EC644B;
overflow:hidden;
}


#quiz{
height:250px;
 padding:10px; 
}

#quiz1{
min-height:300px;
 padding:10px; 

}


#mainQ{margin:5px;font-size:18px;padding:5px;}
.option{margin:5px;margin-top:5px;margin-left:10px;border:1px solid grey;border-radius:4px;max-width:300px;padding-left:5px;cursor:pointer;padding-top:3px;padding-bottom:3px;}
.option:hover{background-color:#FFE4CA;}

.feedback{width:22px;height:22px;float:right;margin-right:3px;}

.optionsel{height:24px;cursor:pointer;margin-bottom:5px;}
.optionsel:hover{background-color:#FFEFDF;}
.feedbacksel{width:22px;height:22px;float:left;margin-left:3px;margin-right:3px;border:1px solid grey;}




#homebutton{cursor:pointer;}
#nextbutton{padding:2px;margin-left:5px;margin-top:8px;background-color:#d35400;color:#FFF;width:50px;text-align:center;cursor:pointer;}
#nextbutton:hover{opacity:.6;}
#tabutton{padding:2px;margin-left:5px;margin-top:8px;background-color:#d35400;color:#FFF;width:120px;text-align:center;cursor:pointer;}
#tabutton:hover{opacity:.6;}


.green{background-color:green;color:#fff;padding:5px;text-align:center;width:150px;}
.red{background-color:red;color:#fff;padding:5px;text-align:center;width:200px;}

@media screen and (max-width:800px) {
		#leftcol{float:none;width:100%;}
		#rightcol{float:none;width:100%;}
		#allcontent {width:100%;}
		#allcontentbox {width:90%;border:1px;height:100%;}
		#quiz {width:90%;height:auto;}
		#spacer {width:90%;border:0px;}
		#vid{display:block;height:auto;background-color:#FF9900;display:none;}
		#notes{width:100%;height:auto;}
		#notesm{width:100%;height:auto;}
		#spacer2{height:auto;}
		#buttonlayer{display:block;width:90%;margin:auto;}
		.mybutton{width:100%;}
		#u1{ padding:0px;width:50%;}
		#u2{ padding:0px;float:right;width:50%;}
		#u1 img{padding:2px;border:1px;border:1px;border-style:solid;border-radius:3px;}
		#u2 img{padding:2px;border:1px;border-style:solid;border-radius:3px;}
		#banner{width:100%;height:auto;}
		.optionsel{height:40px;}
		
}

@media screen  and (max-width:700px){
#bannerRight{display:none;}
#banner{text-align:center;}
}

@media screen and (max-width:520px) {
#vid{display:none;}
#vid img {width:90%;}
#banner{font-size:50px;}
}