body { background-color: #FAFAFA; font-family: Arial, Sans-Serif; }
a {text-decoration:none; font-weight: normal; color: #4D6ECD; }
.atext {text-decoration:none; font-weight: normal; color: #4D6ECD; cursor: pointer; }
a:hover, .atext:hover {color: #C00000; text-decoration: underline; }
.overlay { position: fixed; width: 100%; height: 100%; background-color: #FFFFFF; z-index: 10000; top: 0; left: 0; display: none; background: rgba(200, 200, 200, 0.8); }
.overlaybox { overflow-y: scroll; position: absolute; left: 25%; top: 10%; width: 50%; margin: 0 auto 0 auto; height: 50%; background-color: #FFFFFF; border: solid 3px #AAAAAA; box-shadow: 2px 3px 3px 1px #CCCCCC; padding: 10px; }
.btntop { display: block; border: solid 2px #AAAAAA; background-color: #FFFFFF; font-size: 25px; width: 50px; height: 50px; line-height: 46px; position: fixed; bottom: 20px; right: 20px; text-align: center; color: #4D6ECD; visibility: hidden; border-radius: 10px; }
.btntop:hover {color: #FFFFFF; background-color: #AAAAAA; border: solid 2px #4D6ECD; }
.tf {font-family: Arial,Sans-Serif; font-size: 20px; padding: 10px; box-shadow: 2px 3px 3px 1px #CCCCCC; width: 80%; margin: 20px auto 20px auto; border-radius: 10px;}
.cssbutton { border: solid 2px #FFA600; background-color: #FFBF28; font-size: 20px; font-weight: bold; color: #FFFFFF; text-align: center; line-height: 35px; width: 100%; cursor: pointer; padding: 10px; border-radius: 10px; margin: 20px; }
.cssbutton:hover {background-color: #2DA500; color: #FFFFFF; border: solid 2px #669933; }
.divres { clear: both; height: 0; width: 0; }
.floeterl { float: left; }
.floeterr { float: right; }
.allgameover { z-index: 1000000; font-size: 3vw; position: absolute; color: #000000; background-color: #FFFFFF; border-radius: 10px; padding: 20px; width: 20vw; text-align: center; text-align: center; top: 60%; left: calc(50% - 10vw - 10px); line-height: 5vw; font-weight: bold; display: none; border: solid 1px #AAAAAA; box-shadow: 5px 5px 10px silver; }
.conclose { left: 75%; top: calc(10% - 20px); position: fixed; background-color: #FFFFFF; border-radius: 50%; }
.imgclose { width: 40px; cursor: pointer; margin: 0 0 -5px 0; }
.conclose:hover { background-color: #EFEFEF; }
.nbox { flex: 1 1 auto; text-align: center; padding: 0.5vw; margin: 5px; border-radius: 5px; background-color: #4D6ECD; }
.nbox:hover { background-color: #7A96FF; }
.anav, .anav:hover { color: #FFFFFF; font-weight: bold; }

@media only screen and ( max-width: 1000px )
{
    .nboxmaster {display: flex; flex-direction: row; flex-wrap: wrap; padding: 2vw; width: calc(100% - 10px - 4vw); background-color: #FFFFFF; border: solid 1px #CCCCCC; border-radius: 2vw; margin: 5px; }
    .box { width: calc(100% - 10px - 4vw); background-color: #FFFFFF; border: solid 1px #CCCCCC; border-radius: 2vw; margin: 5px; padding: 2vw; }
    .header { width: 60%; background-color: #FFFFFF; padding: 2vw; border-radius: 2vw; border: solid 1px #CCCCCC; margin: 0.5vw; }
    h1 { font-size: 4vw; margin: 0; }
    h2 { font-size: 3vw; margin: 0; }
    .timer { font-size: 3vw; font-weight: bold; color: #C00000; }
    .timerbox { float: right; border: solid 1px #CCCCCC; border-radius: 0.5vw; padding: 1vw; height: 3vw; line-height: 3vw; }
    .userimgbox { border-radius: 0.5vw; height: 5vw; margin: -1vw 1vw -1vw -1vw; }
    .editimg { border-radius: 0.5vw; height: 5vw; margin: -1vw -1vw -1vw 1vw; }
    .homeimg { float: left; border: none; margin: -0.8vw -0.8vw 0 -0.8vw; height: 25px; }
    .messagebox { border: solid 5px #2DA500; border-radius: 10px; margin: 2vw 0 2vw 0; padding: 2vw; width: calc(100% - 4vw - 10px); } 
    p, li, table { font-size: 2vw; line-height: 3vw; }
    .imgbox { float: right; padding: 0; margin: 3vw; border: solid 1px #CCCCCC; border-radius: 10px; box-shadow: 2px 3px 3px 1px #CCCCCC; width: 30vw; }
    .imgself { border-radius: 8px 8px 0 0; width: 30vw; }
    .imgunder { font-size: 1vw; padding: 5px; width: calc(100% - 10px); text-align: center; }
    .navimgcon { border: solid 1px #CCCCCC; border-radius: 0.5vw; height: 5vw; width: 5vw; }
    .navimgcon:hover { border: solid 1px #000000; opacity: 0.8; }
    .navimg { width: 5vw; border-radius: 0.5vw; }
    .navimgcons { border: solid 1px #CCCCCC; border-radius: 5px; height: 4vw; width: 4vw; margin: 0; }
    .navimgcons:hover { border: solid 1px #000000; opacity: 0.8; }
    .navimgs { width: 4vw; border-radius: 3px; }
    .boxscrollerl, .boxscrollerr { width: calc(96% - 2px); border: solid 1px #CCCCCC; border-radius: 5px; margin: 2%; position: relative; }
    .boxscroller { background-color: #FFFFFF; overflow-x: hidden; overflow-y: scroll; height: 40vw; padding: 10px 10px 0 10px; border-radius: 10px; position: relative; }
    .boxheader {background-color: #7A96FF; font-size: 3vw; font-weight: bolder; color:#FFFFFF; padding: 1vw; border-radius: 3px 3px 0 0; text-align: center; }
    .boxfooter {background-color: #EFEFEF; line-height: 4.2vw; font-size: 3vw; font-weight: bolder; color:#222222; padding: 0.8vw; border-radius: 0 0 3px 3px; border-top: solid 1px #CCCCCC; }
    .boxLeft { width: 8vw; height: 8vw; color: #222222; background-color: #FAFAFA; font-weight: bold; text-align: center; line-height: 8vw; border-radius: 0.4vw 0 0 0.4vw; font-size: 4vw; border-right: solid 1px #CCCCCC; }
    .boxImage { border-left: solid 1px #CCCCCC; margin: 0 0 -7px 0; width: 8vw; height: 8vw; border-radius: 0 0.4vw 0.4vw 0; }    
    .boxText { padding: 1vw; height: 5vw; overflow: hidden; line-height: 3vw; font-size: 2.5vw; }
    .scrollbox { border: solid 1px #DDDDDD; margin: 0.5vw; background-color: #FFFFFF; border-radius: 0.5vw; }
    .fonthint { font-size: 1.5vw; }
    .infoimg { width: 30vw; border-radius: 5px 5px 0 0; }
}

@media only screen and ( min-width: 1001px )
{
    .nboxmaster {display: flex; flex-direction: row; flex-wrap: wrap; padding: 10px; width: calc(70% + 20px); background-color: #FFFFFF; border: solid 1px #CCCCCC; border-radius: 10px; margin: 20px auto 20px auto; }
    .box { width: calc(70% - 20px); background-color: #FFFFFF; border: solid 1px #CCCCCC; border-radius: 10px; margin: 20px auto 20px auto; padding: 30px; }
    .header { width: 60%; background-color: #FFFFFF; padding: 20px; border-radius: 10px; border: solid 1px #CCCCCC; }
    h1 { font-size: 32px; margin: 0; }
    h2 { font-size: 24px; margin: 0; }
    .timer { font-size: 22px; font-weight: bold; color: #C00000; }
    .timerbox { float: right; border: solid 1px #CCCCCC; border-radius: 0.5vw; padding: 10px; height: 30px; line-height: 30px; }
    .userimgbox { border: solid 1px #CCCCCC; border-radius: 0.5vw; padding: 0; height: 50px; margin: -10px 10px -10px -10px; }
    .editimg { border: solid 1px #CCCCCC; border-radius: 0.5vw; padding: 0; height: 50px; margin: -10px -10px -10px 10px; }
    .homeimg { float: left; border: none; margin: -10px -5px 0 -10px; }
    .homeimg:hover { opacity: 0.8; }
    .messagebox { border: solid 5px #2DA500; border-radius: 10px; margin: 20px 0 20px 0; padding: 20px; width: calc(100% - 50px); box-shadow: 2px 3px 3px 1px #CCCCCC; } 
    p, li, table { font-size: 20px; line-height: 26px; }
    .imgbox { float: right; padding: 0; margin: 30px 10px 30px 30px; border: solid 1px #CCCCCC; border-radius: 10px; box-shadow: 2px 3px 3px 1px #CCCCCC;}
    .imgself { border-radius: 8px 8px 0 0; width: 100%; max-width: 250px; }
    .imgunder { font-size: 14px; padding: 5px; width: calc(100% - 10px); text-align: center; }
    .navimgcon { border: solid 1px #CCCCCC; border-radius: 0.5vw; height: 50px; width: 50px; }
    .navimgcon:hover { border: solid 1px #000000; opacity: 0.8; }
    .navimg { width: 50px; border-radius: 8px; }
    .navimgcons { border: solid 1px #CCCCCC; border-radius: 5px; height: 2vw; width: 2vw; margin: 0; }
    .navimgcons:hover { border: solid 1px #000000; opacity: 0.8; }
    .navimgs { width: 2vw; border-radius: 3px; }
    .boxscrollerl { width: calc(48% - 2px); border: solid 1px #CCCCCC; border-radius: 5px; float: left; margin: 2% 2% 2% 0; position: relative; }
    .boxscrollerr { width: calc(48% - 2px); border: solid 1px #CCCCCC; border-radius: 5px; float: right; margin: 2% 0 2% 2%; position: relative; }
    .boxscroller { background-color: #FFFFFF; overflow-x: hidden; overflow-y: scroll; height: 250px; padding: 0; border-radius: 10px; position: relative; }
    .boxheader {background-color: #7A96FF; font-size: 1.3vw; font-weight: bolder; color:#FFFFFF; padding: 0.8vw; border-radius: 3px 3px 0 0; text-align: center; }
    .boxfooter {background-color: #EFEFEF; line-height: 2.2vw; font-size: 1.3vw; font-weight: bolder; color:#222222; padding: 0.8vw; border-radius: 0 0 3px 3px; border-top: solid 1px #CCCCCC; }
    .boxLeft { width: 4.5vw; height: 4.5vw; color: #222222; background-color: #FAFAFA; font-weight: bold; text-align: center; line-height: 4.5vw; border-radius: 0.4vw 0 0 0.4vw; font-size: 1.8vw; border-right: solid 1px #CCCCCC; }
    .boxImage { border-left: solid 1px #CCCCCC; margin: 0 0 -7px 0; width: 3.5vw; height: 3.5vw; padding: 0.5vw; border-radius: 0 0.4vw 0.4vw 0; }    
    .boxText { padding: 0.6vw; height: 2.5vw; overflow: hidden; line-height: 1.7vw; font-size: 1.2vw; }
    .scrollbox { border: solid 1px #DDDDDD; margin: 0.5vw; background-color: #FFFFFF; border-radius: 0.5vw; }
    .fonthint { font-size: 14px; }
    .infoimg { width: 25vw; border-radius: 5px 5px 0 0; }
}


@media all and (orientation:portrait)
{
    .tastatur
    {  
        width: 100%;
        margin: 0;
        background-color: #EFEFEF;    
        border-top: solid 1px #888888;
        position: fixed;
        bottom: 0;         
        left: 0;
        box-shadow: -1px -1px 3px 3px #CCCCCC; 
        z-index: 100000;    
    }
      
    .cssbuttonB
    {
    	margin: 1px;
        padding: 1px; 
    	height: calc(9vw - 4px); 
    	width: calc(9vw - 4px); 	
        float: left;
    }
    
    .cssbuttonT, .cssbuttonActiveT
    {
        font-size: 6vw; 
    	background-color: #FFBE3C; 
    	margin: 1px;
        padding: 1px; 
    	height: calc(9vw - 4px); 
    	width: calc(9vw - 4px); 	
    	font-weight: bold; 
    	color: #FFFFFF; 
    	text-align: center;
        line-height: calc(9vw - 4px);
        float: left;
        overflow: hidden;
    	-webkit-border-radius: 5px; 
    	-moz-border-radius: 5px; 
    	border-radius: 5px;  
    }
        
    .cssbuttonL, .cssbuttonActiveL
    {
        font-size: 6vw; 
    	background-color: #FFBE3C; 
    	margin: 1px;
        padding: 1px; 
    	height: calc(9vw - 4px); 
    	width: calc(27vw - 4px); 	
    	font-weight: bold; 
    	color: #FFFFFF; 
    	text-align: center;
        line-height: calc(9vw - 4px);
        float: left;
        overflow: hidden;
    	-webkit-border-radius: 5px; 
    	-moz-border-radius: 5px; 
    	border-radius: 5px;  
    }
	
    .tastatur_inline
    {
        width: 90vw;
        margin: 0 auto 0 auto;
        padding: 2vw;
        background-color: #EFEFEF;        
    }    
}

@media all and (orientation:landscape)
{    
    .cssbuttonB
    {
    	margin: 1px;
        padding: 1px; 
    	height: calc(4.5vw - 4px); 
    	width: calc(12vh - 4px); 
        float: left;
    }
    
    .cssbuttonT, .cssbuttonActiveT
    {
        font-size: 3vw; 
    	background-color: #FFBE3C; 
    	margin: 1px;
        padding: 1px; 
    	height: calc(4.5vw - 4px); 
    	width: calc(12vh - 4px); 	
    	font-weight: bold; 
    	color: #FFFFFF; 
    	text-align: center;
        line-height: calc(4.5vw - 4px);
        float: left;
        overflow: hidden;
    	-webkit-border-radius: 5px; 
    	-moz-border-radius: 5px; 
    	border-radius: 5px; 
    }
	
    .cssbuttonL, .cssbuttonActiveL
    {
        font-size: 3vw; 
    	background-color: #FFBE3C; 
    	margin: 1px;
        padding: 1px; 
    	height: calc(4.5vw - 4px); 
    	width: calc(36vh - 4px); 	
    	font-weight: bold; 
    	color: #FFFFFF; 
    	text-align: center;
        line-height: calc(4.5vw - 4px);
        float: left;
        overflow: hidden;
    	-webkit-border-radius: 5px; 
    	-moz-border-radius: 5px; 
    	border-radius: 5px; 
    }	
    
    .tastatur_inline
    {
        width: 120vh;
        margin: auto;
        padding: 1vw;
        background-color: #EFEFEF;    
    }   
    
    .tastatur
    {  
        width: 100%;
        margin: 0;
        background-color: #EFEFEF;    
        border-top: solid 1px #888888;
        position: fixed;
        bottom: 0;         
        left: 0;
        box-shadow: -1px -1px 2px 0 #CCCCCC; 
        z-index: 100000;     
    }
}

.cssbuttonActiveT
{
    background-color: #7A96FF
}