body{margin:0; border:0; padding:0; font-family:"Arial"; font-size:small; color:#666; background:#fff;}
.logo{position:absolute; top:25px; left:25px; color: #D5D5D5; font-size:50px;}
.logo span{font-size:x-large; color:#0ac; display:block; width:100%; text-transform:lowercase; overflow:hidden; text-transform:lowercase; margin-top:5px;}
.logo small{font-size:small; color:#999; display:block; width:100%; text-transform:lowercase; overflow:hidden; text-transform:lowercase;}
.logo small input{width:90px; border:none; border-radius:125px; background:#ac0; color:#fff; font-family:"Arial"; font-size:small; height:32px; cursor:pointer; margin-top:15px;}

.menu{width:60%; position:absolute; top:35%; left:0; text-align:center; float:none; padding:15px;}
.menu div{background:#ddd; margin:10px; display:block; width:180px; height:150px; float:left; text-align:left; color:#666; overflow:hidden; cursor:pointer;}
.menu big{display:block; width:100%; font-size:60px; color:rgba(255,255,255,0.5); text-align:right; margin-left:-10px;}
.menu div span{display:block; width:80px; padding:10px; background:rgba(0,0,0,0.5); margin:25px 0 0 15px; text-align:center; color:#ccc; font-size:medium; border-radius:25px;}

.menu .blue{background:#0ac; color:#fff;}
.menu .pink{background:#f06; color:#fff;}
.menu .dark{background:#333; color:#fff;}
.menu .red{background:#fc0; color:#fff;}

.page{position:fixed; height:100%; width:calc(100% - 430px); top:0; left:430px; border-left:solid 1px #ccc; text-align:left; display:none;}
.adspace{position:fixed; height:100%; width:38%; top:0; right:0;}
#dp{position:absolute; height:100%; width:100%; top:0; right:0; background:#fff;}
#loading{position:absolute; height:100%; width:100%; top:0; right:0; background:#fff; display:none;}
#loading span{position:absolute; top:45%; right:0; width:100%; text-align:center; font-size:60px; color:#eee;}

.adspace{display:none;}
.menu{padding:0; width:430px; margin-top:25px;}
.menu div{float:none; margin:0 0 0 0; width:100%; height:67px}
.menu div span{margin:-54px 0 0 15px;}

@media handheld, only screen and (max-height:515px){
.logo{top:0;}
@media handheld, only screen and (max-height:427px){
.logo{top:10px; font-size:large;}
.logo span{font-size:small;}
.logo small input{position:absolute; left:250px; top:0;}
.menu{top:80px;}
@media handheld, only screen and (max-width:370px){
.logo small input{left:220px;}
@media handheld, only screen and (max-width:340px){
.logo small input{left:170px;}
}
}
}
}

@media handheld, only screen and (max-width:750px){
.page{width:100%; display:none; left:0; width:100%;}
.menu{width:100%;}
}