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

#specialButangs{display:none;width:300px;margin:auto;margin-top:15px;background-color:yellow;}

#wtext{font-size:20px;font-weight:bold;}

#disArea{width:80%;margin:auto;background-color:#F9F9F3;padding:5px;font-size:20px;}

#structions2{width:80%;margin:auto;padding:5px;font-size:20px;text-align:center;}

#notey{cursor:pointer;position:absolute;right:20px;top:5px;}
#notey img{width:40px;}
#notey:hover{opacity:.7;}

#myNotes{background-color:#fdf6f1;width:900px;height:450px;position:absolute;top:0px}
#myNotesInner{text-align:center;}
#myNotesStruc{text-align:center;font-size:20px; margin-top:10px;margin-bottom:10px;}
#meSSage{margin:auto;background-color:white;width:600px;font-size:18px;padding:4px;}
 
#spButang1{float:left;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;}
#spButang1:hover{opacity:.6;}

#spButang2{float:right;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;}
#spButang2:hover{opacity:.6;}

#bTex{font-size:23px;text-align:center;width:100%;}

#passageArea{margin:15px;padding:5px;font-size:18px;width:350px;min-height:230px;background-color:#F9F9F3;float:left; }

.wic{width:600px;text-align:center;border:2px solid grey;min-height:24px;padding:5px;font-size:18px;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;margin:auto;margin-bottom:10px;}
.wic:hover{opacity:.6;}


#promo{margin-top:3px;margin-bottom:3px;text-align:center;width:900px;background-color:#fff;margin:auto;}
#vpix img{height:300px;}
#vpix img{width:300px;margin-left:20px;}
.vparea{margin-left:70px;font-size:18px;float:left;width:500px;}
#vpixArea{width:300px;height:100%;text-align:center;border-radius:2px;float:left;}

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

#aArea{width:492px;margin:auto;}
.voption{text-align:center;float:left;width:105px;padding:5px;border:1px solid grey;cursor:pointer;margin-left:3px;margin-right:3px;}
.voption:hover{background-color:#f3f1ef;}

#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;position:relative;} 

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

#butangN{margin:auto;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;}
#butangN:hover{opacity:.6;}

#butang1v{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;}
#butang1v:hover{opacity:.6;}

#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;}
#butang1l:hover{opacity:.6;}

#butang1r{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:auto;}
#butang1r:hover{opacity:.6;}

#butang2{width:100px;float:left;margin-left:60px;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:100px;float:right;margin-right:60px;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;}

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

#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:300px;}
.lbutang{width:330px;text-align:center;border:2px solid grey;min-height:24px;padding:5px;font-size:18px;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;margin-bottom:10px;}
.lbutang:hover{opacity:.6;}

.rqarea{font-size:18px;float:left;width:350px;margin-left:35px;}
.rbutang{width:330px;text-align:center;border:2px solid grey;min-height:24px;padding:5px;font-size:18px;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;margin-bottom:10px;}
.rbutang:hover{opacity:.6;}

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

#buttonfbwic1 {width:0px;float:right;}
#buttonfbwic2 {width:0px;float:right;}
#buttonfbwic1 img{width:20px;float:right;}
#buttonfbwic2 img{width:20px;float:right;}

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



.zample{padding:5px;background-color:#fefad4;width:auto;}
.vzample{padding:5px;background-color:#fefad4;width:auto;line-height:25px;}


.gqarea{font-size:24px;text-align:center;}
.gbutang{margin:auto;width:340px;text-align:center;border:2px solid grey;min-height:24px;padding:5px;font-size:18px;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;margin-bottom:10px;}
.gbutang:hover{opacity:.6;}



#convoStage{width:380px;margin:auto;}
#convoArea1{width:160px;float:left;position:relative;}
#convoArea2a{width:160px;min-height:102px;float:right;position:relative;cursor:pointer;}
#convoArea2b{width:160px;min-height:102px;float:right;position:relative;cursor:pointer;}
#convoArea2a:hover{opacity:.6;}
#convoArea2b:hover{opacity:.6;}
#convoArea3{width:160px;float:left;}
#convoArea4{width:160px;float:right;}


#convoArea3 img{width:100px;float:left;}
#convoArea4 img{width:100px;float:right;}

#inbubble1{padding:30px;padding-right:0px;font-size:20px;position:absolute;top:0px;}

#inbubble2{padding:20px;font-size:16px;position:absolute;top:0px;width:150px;}

#inbubble3{padding:20px;font-size:16px;position:absolute;top:0px;width:150px;}

#qArea2x{width:100%;height:100%;position:absolute;}

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

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



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

#buttonfbo1 {width:0px;float:right;}
#buttonfbo2 {width:0px;float:right;}
#buttonfbo3 {width:0px;float:right;}
#buttonfbo1 img{width:20px;float:right;}
#buttonfbo2 img{width:20px;float:right;}
#buttonfbo3 img{width:20px;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;}

 









@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) {

#myNotes{width:100%;min-height:450px;}
 
.vparea{margin-left:70px;font-size:18px;float:left;width:390px;}

#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:790px) {
.rqarea{font-size:18px;float:left;width:300px;margin-left:5px;}
.rbutang{width:280px;}
}


@media screen and (max-width:780px) {
#qArea{width:100%;height:auto;}
#structions{text-align:center;}
.vparea{margin-left:70px;font-size:18px;float:left;width:290px;}
}



@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:200px;}
.rbutang{margin:auto;margin-bottom:4px;}
.rqarea{font-size:18px;float:none;width:350px;height:300px;margin:auto;text-align:center;height:auto;display:none;}
#clrrq{width:100%;height:1px;}
#specialButangs{display:block;}
#bigOnly{display:none;}
}






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

#audioArea{width:200px;}

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

#vpix {width:250px;height:250px;}
#vpix img{width:250px;margin-left:20px;height:100%;}
#vpixArea{width:250px;height:100%;text-align:center;border-radius:2px;float:left;}

}


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

h1{font-size:20px;}
.vparea{margin-left:40px;font-size:18px;float:left;width:240px;}
.wic{width:90%;}
#meSSage{margin:auto;background-color:white;width:400px;font-size:18px;padding:4px;}
}


@media screen and (max-width:610px) {
#audioArea{width:130px;}
.gqarea{font-size:18px;text-align:center;}
}

@media screen and (max-width:580px) {
#sArea{width:90%;margin:auto;}
}

@media screen and (max-width:550px) {
h1{font-size:20px;}
.vparea{margin:auto;font-size:18px;float:none;width:94%;text-align:center;}
#vpix {width:190px;height:190px;margin:auto;}
#vpix img{width:190px;margin:auto;}
#vpixArea{width:190px;height:100%;text-align:center;border-radius:2px;float:none;margin:auto;}
.spacerV{width:100%;height:5px;}
#butang1v{margin:auto;}
#vpix {height:190px; }

}








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

#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;border:2px solid grey;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;}
}

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

#aArea{width:256px;margin:auto;}
#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;}
}

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

}





@media screen and (max-width:480px) {
#sArea{width:90%;margin:auto;}
#convoStage{width:380px;margin:auto;}
#convoArea1{width:160px;float:left;position:relative;}
#convoArea2a{width:160px;min-height:102px;float:right;position:relative;cursor:pointer;}
#convoArea2b{width:160px;min-height:102px;float:right;position:relative;cursor:pointer;}
#convoArea2a:hover{opacity:.6;}
#convoArea2b:hover{opacity:.6;}
#convoArea3{width:160px;float:left;}
#convoArea4{width:160px;float:right;}

#convoArea1 img{width:100%;}
#convoArea2a img{width:100%;}
#convoArea2b img{width:100%;}

#convoArea3 img{width:100px;float:left;margin-top:40px;}
#convoArea4 img{width:100px;float:right;}

#inbubble1{padding:20px;font-size:19px;position:absolute;top:0px;}

#inbubble2{padding:10px;font-size:15px;position:absolute;top:0px;width:140px;}

#inbubble3{padding:10px;font-size:15px;position:absolute;top:0px;width:140px;}

}

@media screen and (max-width:390px) {
#passageArea{margin:auto;padding:5px;font-size:16px;width:98%;min-height:230px;background-color:#F9F9F3;float:none; }
#convoStage{width:315px;margin:auto;}
#convoArea1{width:155px;float:left;position:relative;}
#convoArea2a{width:155px;min-height:102px;float:right;position:relative;cursor:pointer;}
#convoArea2b{width:155px;min-height:102px;float:right;position:relative;cursor:pointer;}
#convoArea2a:hover{opacity:.6;}
#convoArea2b:hover{opacity:.6;}
#convoArea3{width:155px;float:left;}
#convoArea4{width:155px;float:right;}
#inbubble1{font-size:19px;}
}
@media screen and (max-width:470px) {
 
#meSSage{margin:auto;background-color:white;width:304px;font-size:18px;padding:4px;}
#texArea{font-size:14px;min-height:470px;} 
#myNotes{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;}
#notey{display:none;}
}




@media screen and (max-width:350px) {
#disArea{width:80%;margin:auto;background-color:#F9F9F3;padding:5px;font-size:15px;}
#texArea{font-size:14px;} 

}