*, html, body {margin:0;padding:0;}
body {font-family:sans-serif;background-size:99px 99px;background-color:#C0D9ED;background-image: repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(160,185,215,.3) 35px, rgba(160,185,215,.3) 70px);}
hr {margin:0;background:#ccc;border:none;height:1px;}
header {margin:0;padding:.6em .8em .3em .8em;font-size:12pt;background:#1a1;color:#fff;text-shadow:0 0 0.2em rgba(0,0,0,.4);box-shadow:inset 0 .1em .3em rgba(0,0,0,.3);}
h1{font-size:20pt;}
header a {color:#fff;text-decoration:none;}
header a:hover, header a:active {text-decoration:underline;}
header ul {margin:.25em 0 .05em 0;list-style-type:none;border-radius:.3em;overflow:hidden;display:inline-block;}
header ul li{margin-left:.1em;display:inline-block;}
header ul li:first-child{margin-left:0;}
header ul li a{padding:.2em .35em;background:#555;background:rgba(0,0,0,.3);display:inline-block;transition:background linear .2s;}
header ul li a:hover{text-decoration:none;background:#333;background:rgba(0,0,0,.5);}
#region{font-weight:bold;}
#status {float:right;margin-top:.1em;text-align:right;}
#main {margin:0;padding:0;text-align:center;}
#main p {margin:.3em 0;}
#main ul li {margin:.7em;padding:0 1em;list-style-type:none;text-align:left;background:#fff;background:rgba(255,255,255,.9);border-radius:.4em;box-shadow:0 .1em .3em rgba(0,0,0,.2);overflow:hidden;transition:.3s ease all;}
#main ul li:hover {background:#ffe;box-shadow:0 .2em .4em rgba(0,0,0,.4);transform:scale(1.015);}
#main ul li p{text-align:left;margin:0;padding:.2em 0 0 0;display:inline-block;width:50%;vertical-align:top;}
#main ul li p:first-child{padding-bottom:.2em;display:block;width:auto;vertical-align:top;}
#main ul li p:last-child{padding-bottom:.2em;width:100%;}
.btxt{font-size:14.5pt;}
.invd {display:none;}
#search {margin:0;padding:.5em .8em;background:#F88330;box-shadow:inset 0 .2em .8em rgba(255,255,255,.5), inset 0 -.2em .8em rgba(0,0,0,.2), 0 .1em .3em rgba(0,0,0,.2);}
#search p {margin:0;text-align:center;line-height:2.5em;display:inline-block;}
#sf input[type="search"] {border:none;min-width:18.5em;max-width:95%;}
#sf input[type="search"], #sf select {font-size:14pt;padding:.3em;border-radius:.15em;outline:0;border: 1px solid #bbb;}
#sf select {padding:.28em;background:#eee;}
#sf input[type="submit"], button {font-size:14pt;padding:.3em 1.3em;cursor:pointer;text-align:center;border-radius:.15em;background: #eee;background: -webkit-linear-gradient(top, #fff, #ddd);background: -moz-linear-gradient(top, #fff, #ddd);background: -o-linear-gradient(top, #fff, #ddd);background: -ms-linear-gradient(top, #fff, #ddd);background: linear-gradient(top, #fff, #ddd);border: 1px solid #bbb;outline:0;}
#sf input[type="submit"]:hover, #sf input[type="submit"]:active, button:hover, button:active {background: #FFCB77;background: -webkit-linear-gradient(top, #FFE2AA, #FFD877);background: -moz-linear-gradient(top, #FFE2AA, #FFD877);background: -o-linear-gradient(top, #FFE2AA, #FFD877);	background: -ms-linear-gradient(top, #FFE2AA, #FFD877);background: linear-gradient(top, #FFE2AA, #FFD877);outline:0;}
#sf input[type=checkbox]{margin-left:.35em;transform:scale(1.5);}
#top-info{padding:1em;font-size:14pt;font-weight:bold;color:#711;}
#top-cnt{padding:.5em 1em 0 1em;font-size:12pt;font-weight:bold;text-align:left;color:#555;}
#scan{padding:.3em .5em;background:#48f;border-radius:.2em;font-size:15pt;text-decoration:none;text-shadow:0 0 .2em #fff,0 0 .2em #fff;box-shadow:inset 0 .2em .2em rgba(255,255,255,.5),inset 0 -.2em .2em rgba(0,0,0,.4),0 0 .1em rgba(0,0,0,.2);vertical-align:bottom;transition:background linear .2s;}
#scan:hover, #scan:active{background:#7af;}
#scan:active{background:#7cf;box-shadow:inset 0 .2em .2em rgba(255,255,255,.5),inset 0 -.2em .2em rgba(0,0,0,.4),inset 0 0 .15em rgba(0,0,0,.3);}
#scanport{margin:5%;width:90%;height:90%;max-width:95%;z-index:100;position:fixed;top:0;background:#fff;box-shadow:0 .2em .5em rgba(0,0,0,.7);overflow:hidden;display:none;}
#scan-in{width:600px;height:600px;max-width:100%;max-height:85%;margin:0 auto;clear:both;}
#scx{margin:.1em .3em;color:#999;font-size:20pt;text-decoration:none;float:right;transition:background linear .2s;}
#scx:hover,#scx:active{color:#d11;}
#scp{padding:.5em;font-size:16pt;font-weight:bold;color:#555;}
#main article{margin:.9em;border-radius:.4em;box-shadow:0 .1em .3em rgba(0,0,0,.2);background:#fff;background:rgba(255,255,255,.7);overflow:hidden;}
#main article p{margin:.4em .8em;text-align:left;}
#main article h2{margin-top:.6em}
#main article h3{margin-top:.6em}
footer {padding:1em 1.5em;border-top: 1px solid #777;box-shadow:inset 0 1px 1px rgba(255,255,255,.5);}
#cnt{margin-top:.5em;}
#top {display:none;position:fixed;padding:0;width:1.8em;line-height:1.8em;right:.8em;bottom:.8em;z-index:50;color:#eee;font-size:20pt;background:#555;font-family:sans-serif;text-decoration:none;text-align:center;box-shadow:0 .1em .4em rgba(0,0,0,.4);border-radius:50%;transform:rotate(-90deg);transition:all .3s ease;}
#top:hover, #top:active {background:#2a2;}
@media screen and (max-width:960px) {
    #status {margin-left:1em;max-width:40%;}
}
@media screen and (max-width:560px) {
    header {font-size:10pt;}
    header h1 {font-size:16pt;}
    #main {padding:0}
    #search {margin:0 0 1em 0;border-radius:0;}
    #search p:first-child {width:95%;}
    #sf input[type="search"] {border:none;width:75%;font-size:12pt;}
    #sf select, input[type="submit"] {font-size:12pt;}
    #scan{padding:.3em .4em;font-size:12pt;}
    #top-cnt{padding:0 1em 0 .5em;}
    #main ul li {margin:.9em 0;border-radius:0;transition:none;}
    #main ul li:hover {box-shadow:0 .1em .3em rgba(0,0,0,.3);transform:none;}
    #main ul li p {display:block;width:auto;font-size:11pt;padding:.15em 0;}
    .btxt{font-size:12pt;}
    .invd {display:block;}
    #top {right:.5em;bottom:.5em;}
    #scanport{margin:2%;width:96%;height:96%;}
}
