body,html{padding:0px;margin:0px;background-image:url('sos.png');}


#feedback3{float:right;position:relative;}
#feedback3 img{width:28px;position:absolute;right:0px;top:-5px;}





#allContent{width:900px;margin:auto;background-color:#FFF;min-height:450px;border:1px solid #4193a9; box-sizing:border-box;}

#title1{font-family:Montserrat;font-size:20px;text-align:center;}

.spacer20{height:20px;width:100%;}
.spacer40{height:40px;width:100%;}

#menu1{width:400px;height:350px;overflow-y:scroll;overflow-x:hidden;margin-left:120px;}
.menuItem{width:380px;font-size:18px;font-family:Montserrat;
text-align:left;margin-bottom:1px;background-color:#ECECEC;
padding:2px;padding-left:8px;cursor:pointer;float:left;}
.menuItem:hover{opacity:.6;}

#logo{float:right;margin-right:100px;}

#titleBar{text-align:center;font-size:24px;color:#efefef;font-family:Montserrat;background-color:#FAFFFF;padding-bottom:5px;}
#titleText{padding:5px;background-color:#4193a9;margin:auto;margin-bottom:0px;}

#readMe{padding:5px;font-size:18px;font-family:Montserrat;background-color:#FAFFFF;border-bottom:1px solid #4193a9;border-top:none;margin-top:-5px;}

#structions{text-align:center;font-size:16px;font-family:Montserrat;}

.vocabs{display: inline-block;padding:5px;background-color:#6BB9F0;width:auto;text-align:center;font-size:16px;font-family:Montserrat;cursor:pointer;margin-left:10px;margin-right:10px;margin-bottom:5px;border-radius:3px;}
 
.vocabs:hover{opacity:.6;}
#vocabbar{text-align:center;width:auto;width:600px;margin:auto;}


#butang1{width:100px;border:1px solid gray;cursor:pointer;border-radius:3px;
font-family:Arial;padding:7px;text-align:center;margin:auto;}
#butang1:hover{opacity:.6;}

#pix1{width:50%;text-align:center;float:left;}
#pix2{width:50%;text-align:center;float:right;}

#pix1 img{border:6px solid #ECECEC;cursor:pointer;width:150px;float:right;margin-right:20px;}
#pix1 img:hover{border:6px solid #D2D7D3;}

#pix2 img{border:6px solid #ECECEC;cursor:pointer;width:150px;float:left;margin-left:20px;}
#pix2 img:hover{border:6px solid #D2D7D3;}

#slip{height:6px;width:100%;}

#feedback1{width:120px;font-size:14px;padding:4px;color:#FFF;margin:auto;text-align:center;background-color:#2ECC71;float:none;clear:both;font-family:Montserrat;}
#feedback2{width:120px;font-size:14px;padding:4px;color:#FFF;margin:auto;text-align:center;background-color:#D91E18;float:none;clear:both;font-family:Montserrat;}

.ops{width:190px;border:1px solid gray;cursor:pointer;border-radius:5px;position:relative;
font-family:Montserrat;padding:4px;text-align:center;margin:auto;margin-bottom:10px;}
.ops:hover{opacity:.6;background-color:#ececec;}

.greyback{padding:2px;background-color:#ececec;}

#extraspace{float:none;clear:both;width:100%;height:90px;margin-top:10px;}

#dummy{
	display:none;
	}

#lbinner{
	width:200px;
	height:220px;
	}

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


#allContent{width:100%;}



}


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


#allContent{width:100%;}
#menu1{width:90%;float:none;margin:auto;}
.menuItem{width:95%;float:none;margin:auto;margin-bottom:1px;}
#logo{display:none;}


}

@media screen and (max-width:600px){
#vocabbar{width:100%;}
#readMex{margin-right:30px;margin-left:30px;}
#titleTextx{margin-right:25px;margin-left:25px;}
.menuItem{width:90%;}
}



@media screen and (max-width:380px){
#pix1 img{float:none;margin-right:auto;}


#pix2 img{float:none;margin-left:auto;}
}


@media screen and (max-width:330px){
#pix1 img{float:none;margin-right:auto;width:140px;}


#pix2 img{float:none;margin-left:auto;width:140px;}
}