html body{
	margin:0px;
	font-family: arial;
	 background-image:url('sos.png');
 
	}


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{
	margin:auto;
	width:800px;
	background-color:#e67e22; 
color:#FFFFFF;
font-size:50px;
font-family: 'Knewave',arial;
padding:20px;
margin-bottom:10px;}
.content{margin:auto;width:800px;background-color:#FFFFFF;padding:20px;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:20px;}

.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:440px) {
	

#title {font-size:35px;}
		
}