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


#holder img{width:30px;}
#holder{width:150px; height:50px;}
#playB{float:right;margin-top:3px;cursor:pointer;}
#playB:hover{opacity:.7;}
#holderText{float:left;font-size:30px;}

#clrr{width:100%;height:1px; float:none; clear:both;}

#promo{margin-top:3px;margin-bottom:3px;text-align:center;width:900px;background-color:#fff;margin:auto;}
 

 
.spacer30{width:100%;height:30px;}
 


#scArea{width:90%;margin:auto;margin-top:20px;}

#aArea{width:492px;margin:auto;}
 

#texArea{overflow:hidden;width:900px;height:450px;background-color:white;margin:auto;margin-top:30px;font-size:16px;border:3px solid #2e3131;box-sizing: border-box;} 

#qArea{margin-top:0px;margin-left:0px; position:relative;}

#rightwing{float:right;width:500px;}
#myTitle{font-size:45px;color:#6c7a89;text-align:center;width:500px;padding-top:100px;}


#titlePix{width:310px;float:left;padding:20px;margin-top:30px; padding-left:50px;}
#titlePix img{width:300px;border:2px solid grey;}

#navBar{height:30px;background-color:#6c7a89;color:#95a5a6;padding:10px;}

#dropMenu{position:absolute;cursor:pointer;display:none;}
#mArea{display:none;}
#dropMenu img{width:30px;}
#dropMenu:hover{opacity:.7;}
#navArea{text-align:center;font-size:30px;color:#fff;}

.liner{text-align:center;font-size:20px;margin-bottom:3px;}

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

.blank{width:100px;height:40px; background-color:#dadfe1;}

.current{border:1px solid black;}


.centertext{text-align:center;}

 

#butang1{width:100px;margin:auto;text-align:center;background-color:#5C97BF;height:24px;padding:5px;font-size:18px;color:#fff;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;}
#butang1:hover{opacity:.6;}

#butang1l{width:100px;text-align:center;background-color:#5C97BF;height:24px;padding:5px;font-size:18px;color:#fff;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;margin-left:20px;}
#butang1l:hover{opacity:.6;}

#butangScript{width:100px;text-align:center;background-color:#26c281;height:24px;padding:5px;font-size:18px;color:#fff;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;margin-left:20px;}
#butangScript:hover{opacity:.6;}

#butangNotes{width:100px;text-align:center;background-color:#848ccf;height:24px;padding:5px;font-size:18px;color:#fff;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;margin-left:5%;}
#butangNotes:hover{opacity:.6;}

 

#audioArea{width:30%;height:280px;text-align:center;border-radius:2px;float:left;border-right:1px solid grey;box-sizing:border-box;}

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

.lqarea{font-size:18px;float:left;width:70%;padding-right:10px; box-sizing:border-box;}
.lbutang{width:160px;text-align:center; min-height:24px;padding:5px;font-size:18px;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;margin-bottom:10px;margin-left:20px;background-color:#ececec;color:#2e3131;}
.lbutang:hover{ color:#FFF;background-color:#67809f;}

.qtext{font-size:28px;margin-left:20px;}



 

 

#clr{width:100%;float:none;clear:both;}


#sArea{width:80%;margin:auto;}

#plArea{width:120px;height:80px;margin:auto;margin-top:20px;}
#playhead2{width:50px;float:left;cursor:pointer;}
#playhead2 img{width:100%;}
#playhead2:hover{opacity:.7;}
#playhead3{width:50px;float:right;cursor:pointer;}
#playhead3 img{width:100%;}
#playhead3:hover{opacity:.7;}



 



#cntr{cursor:pointer;background-color:#3caf47;color:white;position:absolute;width:100%;bottom:-15px;min-height:10px;text-align:center;font-size:20px;padding-top:15px;padding-bottom:5px;}
#fbbox{width:200px;margin:auto;padding:10px;background-color:white;font-size:20px;border: 2px solid grey;}


#fullMenu{position:absolute;top:0px;left:0px;}

#compMenu{position:absolute;top:0px;left:0px; height:50px; width:100%;}

.menuItem{width:170px;background-color:#5C97BF;border-bottom:2px solid #95a5a6;border-right:2px solid #95a5a6;
	text-align:center;font-size:24px;color:#fff;padding:5px;cursor:pointer;}
.menuItem:hover{background-color:#3498db;}

.fmenuItem{width:170px;background-color:#5C97BF;border-bottom:2px solid #95a5a6;border-right:2px solid #95a5a6;
	text-align:center;font-size:24px;color:#fff;padding:10px;cursor:pointer;float:left;width:25%;box-sizing:border-box;}
.fmenuItem:hover{background-color:#3498db;}



#cover{position:absolute;width:100%;height:450px;top:0px;}

#buttonfbo1 {width:0px;float:right;z-index: 1;position:relative;}
#buttonfbo2 {width:0px;float:right;z-index: 1;position:relative;}
#buttonfbo3 {width:0px;float:right;z-index: 1;position:relative;}
#buttonfbo1 img{width:25px;float:right;}
#buttonfbo2 img{width:25px;float:right;}
#buttonfbo3 img{width:25px;float:right;}

 

.blue{color:#2c82c9;font-weight:bold;}


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

.dent{margin-left:15px;padding-top:5px;}


.spacer5{width:100%;height:5px;}

.sel{
-webkit-touch-callout: text;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;}


.col1{width:33%;float:left;text-align:center;}
.col2{width:33%;float:left;text-align:center;}
.col3{width:33%;float:left;text-align:center;}

 


.l220{width:220px;}
.l350{width:350px;}
.l400{width:400px;}




@media screen and (max-width:900px) {
#promo{margin-top:3px;margin-bottom:3px;text-align:center;width:98%;background-color:#fff;}
}




@media screen and (max-width:930px) {

 
 

#texArea{width:98%;min-height:450px;background-color:white;margin:auto;margin-top:30px;font-size:16px;border:none;} 

#rightwing{float:right;width:60%;}
#myTitle{font-size:45px;color:#6c7a89;text-align:center;width:100%;padding-top:100px;}


#titlePix{width:38%;float:left;padding:1%;}
#titlePix img{width:90%;border:2px solid grey;}
}

 


@media screen and (max-width:780px) {
#qArea{width:100%;height:auto;}
#structions{text-align:center;}
 
}



@media screen and (max-width:710px) {
#passageArea{margin:auto;padding:5px;font-size:18px;width:96%;min-height:230px;background-color:#F9F9F3;float:none; }
#audioArea{width:130px;}
 
#clrrq{width:100%;height:1px;}
 
#bigOnly{display:none;}
}






@media screen and (max-width:675px) {

#audioArea{width:130px;}

#rightwing{float:none;width:100%;}
#myTitle{font-size:45px;color:#6c7a89;text-align:center;width:100%;padding-top:10px;}


#titlePix{width:100%;float:none;padding:1%;text-align:center;}
#titlePix img{width:200px;border:2px solid grey;}

 

}


@media screen and (max-width:630px) {

h1{font-size:20px;}
 
}


@media screen and (max-width:610px) {
#audioArea{width:130px;}
 
}

@media screen and (max-width:580px) {
 
}

@media screen and (max-width:550px) {
h1{font-size:20px;}
 


}








@media screen and (max-width:530px) {
.qtext{font-size:22px;}
#audioArea{width:100%;height:60px;text-align:center;border-radius:2px;float:left;border-right:none;}

#playhead{width:50px;height:50px;cursor:pointer;margin:auto;margin-top:0px;}
#playhead img{width:100%;}
.lqarea{font-size:18px;float:none;text-align:center;margin:auto;width:98%;}
.lbutang{margin:auto;width:90%;text-align:center; min-height:24px;padding:5px;font-size:16px;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;margin-bottom:10px;}
.lbutang:hover{opacity:.6;}
#butang1l{margin:auto;}
.spacer30{height:15px;}
#butangScript{margin:auto;}
#butangNotes{margin:auto;}
}

@media screen and (max-width:505px) {

#aArea{width:256px;margin:auto;}
 
}

@media screen and (max-width:480px) {

 
.voption{text-align:center;float:left;width:100px;padding:5px;border:1px solid grey;cursor:pointer;margin-left:3px;margin-right:3px;margin-bottom:4px;}
.voption:hover{background-color:#f3f1ef;}
.liner{ font-size:16px;}

#butang2{width:95px;float:left;margin-left:5px;text-align:center;background-color:#5C97BF;height:24px;padding:5px;font-size:18px;color:#fff;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;}
#butang2:hover{opacity:.6;}

#butang3{width:95px;float:right;margin-right:5px;text-align:center;background-color:#5C97BF;height:24px;padding:5px;font-size:18px;color:#fff;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;}
#butang3:hover{opacity:.6;}

 #dropMenu{display:inline;}
#mArea{display:inline;}
#compMenu{display:none;}

}





 

 
@media screen and (max-width:470px) {
 

#texArea{font-size:14px;min-height:470px;} 
}

@media screen and (max-width:450px) {
.gbutang{margin:auto;width:90%;margin-bottom:10px;}

#texArea{font-size:14px;min-height:470px;} 
#cntr{cursor:pointer;background-color:#3caf47;color:white;position:absolute;width:100%;bottom:-45px;min-height:30px;text-align:center;font-size:20px;padding-top:5px;padding-bottom:5px;}

}



@media screen and (max-width:370px) {
.l350{width:90%;}
}

@media screen and (max-width:350px) {
.spacer30{height:6px;}
#texArea{font-size:14px;} 

}