body{margin:0px;padding:0px;background-image:url('sos.png');
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
font-family:arial;
font-size:20px;
}

a:link {  text-decoration: none;color:#fff;}
a:visited {  text-decoration: none;color:#fff;}
a:hover {  text-decoration: underline;color:#fff;}
a:active {  text-decoration: underline;color:#fff;}
#strux2{display:none;}

#buttonfbo1 {width:0px;float:right;}
#buttonfbo2 {width:0px;float:right;}
#buttonfbo1 img{width:20px;float:right;}
#buttonfbo2 img{width:20px;float:right;}

#o1x{float:left;}
#o2x{clear:both;float:none;}
#tickcross {height:38px;}
#tickcross img{margin-left:20px;margin-top:10px;width:30px;}

.spacedown{height:40px;width:100%;float:none;clear:both;}

#texArea2{padding:15px;min-height:350px;}

audio{width:252px;}

#audioArea{width:300px;height:350px;text-align:center;border-radius:2px;float:left;}

#playhead{width:100px;height:100px;cursor:pointer;margin:auto;margin-top:90px;}
#playhead img{width:100%;}
#playhead:hover{opacity:.7;}

#texArea{width:900px;height:430px;background-color:white;margin:auto;margin-top:30px;font-size:16px;} 


#qArea{float:left;margin-left:10px;width:550px;box-sizing: border-box;padding:20px;padding-top:0px;}
.qarea{margin-bottom:10px;}
 

.opbutang{padding:8px;border:2px solid grey;border-radius:4px;text-align:center;width:170px;margin-right:15px;cursor:pointer;margin-top:8px;}
.opbutang:hover{background-color:#f3f1ef;border: 2px solid #2e3131;}

#strux{border-bottom:1px solid grey;}

 

#navr{display:none;padding:3px;border:1px solid grey;border-radius:5px;cursor:pointer;text-align:center;width:40px;}
#navr:hover{background-color:#f3f1ef;}

#clearMe{clear:both;float:none;}



#btangs{width:135px;float:right;}
#next{float:right;width:40%;text-align:center;background-color:#336e7b;border:2px solid #fff;padding:3px;border-radius:5px;color:#fff;}
#back{float:left;width:40%;text-align:center;background-color:#336e7b;border:2px solid #fff;padding:3px;border-radius:5px;margin-right:5px;color:#fff;}
#back:hover{border:2px solid #81cfe0;color:#81cfe0;}
#next:hover{border:2px solid #81cfe0;color:#81cfe0;}

#navBar{height:30px;background-color:#336e7b;color:#efefef;padding:10px;}

#structions{border-bottom:1px solid grey;font-size:14px;padding-top:10px;padding-bottom:10px;margin-bottom:5px;}


@media screen and (max-width:930px) {
#texArea{width:90%;}
#qArea{width:400px;box-sizing: border-box;padding:20px;padding-top:0px;}
}


@media screen and (max-width:840px) {
#qArea{width:350px;}
}


@media screen and (max-width:775px) {
#playhead{width:70px;height:0px;margin-top:20px;}
#audioArea{width:100%;height:70px;border:none;text-align:center;float:none;}
#texArea2{padding-top:0px;}
#strux{display:none;}
#strux2{display:block;margin-top:10px;}
#qArea{float:none;margin-left:0px;width:100%;padding:20px;text-align:center; }
.opbutang{margin:auto;margin-top:8px;}
#o1{float:none;}
#tickcross {width:0px;height:0px;float:right;margin-right:10%;}
#tickcross img{margin:auto;width:25px;}
#navr{margin:auto;}
.qarea{margin-bottom:0px;}
.spacedown{height:100px;}
}