/* gen & mobile */
* {margin:0; padding:0; box-sizing:border-box}
html {height:100%; overflow-y:scroll}
body {height:100%; margin:0; padding:0; font-family:Verdana; font-size:14px; color:#228}
a {color:#28c; font-weight:bold; text-decoration:none; outline:none}
a:hover {color:#228; text-decoration:underline}
img {display:block; max-width:100%; margin-left:auto; margin-right:auto, border:2px solid #bbb; border-radius:8px}
img.in {display:inline; margin:0}
#wrap {position:relative; min-height:100%; margin:0 auto; background:#efc;
  border-left:2px solid #fff; border-right:2px solid #fff}
#head {background:#228; color:#ff9; min-height:70px}
#hamb {display:block}
#nav {width:100%; display:none}
ul {list-style-type:none}
li {width:100px; background:#fff; color:#228; margin:5px; text-align:center;
  padding-left:10px; padding-right:10px; border-radius:4px}
li:hover{background:#28c; color:#fff}
#main {background:#efc; min-height:130px}
#push {background:#efc; height:30px}
#foot {position:absolute; bottom:0; height:30px; width:100%;
  color:#ff9; background:#228; padding:5px; text-align:center}
.art {width:100%; background:#fff; padding:10px; border:4px solid #eee}
.c {text-align:center}
/* desktop & notebook */
@media screen and (min-width:615px) {
body {background:#333}
#wrap {max-width:960px}
#hamb {display:none}
#nav {display:block; text-align:center}
#nav ul {overflow:auto; width:500px; margin:0 auto}
li {display: inline}
.art {float:left} .w100 {width:100%} .w50 {width:50%}
.w33 {width:33%} .w67 {width:67%} .w25 {width:25%} .w75 {width:75%}
.w20 {width:20%} .w40 {width:40%} .w60 {width:60%} .w80 {width:80%}
}