html body{
	margin:0px;
	font-family: arial;
	 
 
	}



@font-face {
    font-family: Franchise;
    src: url('Franchise.ttf'); 
	 
    }

h1{font-size:28px;color:#333333;}


#topbar{height:26px;width:800px;padding-left:20px;padding-right:20px;margin:auto;background-color:#FFFFFF;color:#FF6600;
margin-bottom:10px;margin-top:0px;}

#title{color:#333333;
	margin:auto;
	width:800px;
font-size:50px;
float:none;
clear:both;
background-color:#FFFFFF;padding-top:0px;padding:10px;
}

#script{display:none;color:#666;}
#scriptbutton{padding:3px;border:1px solid grey;cursor:pointer;width:130px;}
#scriptbutton:hover{background-color:#F3F3F3;}

.content{margin:auto;width:800px;background-color:#FFFFFF;padding-top:0px;padding:10px;margin-bottom:10px;}


#pdfpic{right:20px;float:right;}

.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%;
}

.vidtitle{background-color:#e67e22;  color:#FFFFFF;font-size:20px;padding:8px;}

.taskbox{padding:0px;border:2px solid #e67e22;color:#333;}
.taskboxtitle{background-color:#e67e22; color:#FFF;font-size:28px;border-bottom:#FFF solid 2px;padding:5px;}
.taskboxinside{padding:5px; }

.meanings{display:none;color:#666;}

#defbutton{padding:3px;border:1px solid grey;cursor:pointer;width:130px;}
#defbutton:hover{background-color:#F3F3F3;}

.answers{display:none;color:#666;}

#quizbutton{padding:3px;border:1px solid grey;cursor:pointer;width:130px;}
#quizbutton:hover{background-color:#F3F3F3;}

@media screen and (max-width:840px) {
	
#title{width:90%;}
.content{width:90%;}
#topbar{width:90%;}		
}


@media screen and (max-width:600px) {
#title{font-size:38px;}
}

@media screen and (max-width:440px) {
	
.vidtitle{padding:3px;}

#title {font-size:35px;}
h1{font-size:23px;color:#333333;}
		
}














 



	
 


#contentArea a:hover, a:visited, a:link, a:active{
    
	color:#036;
}


.gop3 a:hover{text-decoration: none;color:#333;}
.gop3 a:active{text-decoration: none;color:#333;}
.gop3 a:visited{text-decoration: none;color:#333;}
.gop3 a:link{text-decoration: none;color:#333;}

#promo{margin-top:3px;margin-bottom:3px;text-align:center;}

 
.resdevad { width: 320px; height: 50px; }
@media(min-width: 500px) { .resdevad { width: 468px; height: 60px; } }
@media(min-width: 800px) { .resdevad { width: 728px; height: 90px; } }