/* codepen 20160623 */


#lightblue{background-color:lightblue;}
#red{background-color:red;color:white;}
#f{font-weight:bold;font-size:18px;}

a{text-decoration:none;color:#666;}
body{margin:0;font-family:'Arial'; color:#666;}
button{min-width:70px;height:30px;margin:2px;border:none;background-color:rgba(0,0,0,0.8);color:white;font-size:13px;font-weight:bold;}
h1{margin:0;padding:13px;}
h2{margin:0;padding:10px;}
span{font-size:11px;background-color:red;color:white;padding:0px 5px 0px 5px;margin-right:5px;}
ul{margin:0;padding:0;list-style:none;}


.box{width:25%;margin:0px 5px 5px 5px;}
.boxh{height:20px;}
.boxh p{margin:0;padding:0;font-weight:bold;font-size:18px;text-align:center;}
.boxb{height:auto;}
.boxb p{margin:0;padding:2px;}
.boxb li{text-align:center;padding:2px;}
.boxb li:hover{background-color:lightblue;}
.boxS{width:40%;height:auto;border-radius:2px;border:.5px solid lightgray;}
.colA{width:19%;margin:5px;}
.colA > .box{width:100%;}
.colB{width:59%;margin:5px;display:flex;border-left:.5px solid lightgray;border-right:.5px solid lightgray;}
.colC{width:19%;margin:5px;}
.colC a{text-align:center;}
.container{margin:5px;display:flex;}


.alert{margin:2px 50px 2px 50px;background-color:red;min-height:30px;border-radius:5px;}
.alert p{margin:0;color:white;text-align:center;padding-top:6px;}
.alert p a{color:white;}
.item{padding:0px 15px 0px 15px;}
.item p{color:white;}
.itemB{padding:6px 15px 0px 15px;}
.itemB p{margin:0;color:black;}
.logo{margin: 12px 100px 0px 15px;}
.logo p{margin:0;font-size:28px;color:white;}
.menu{display:flex;}
.menu a:hover{background-color:darkgray;}
.top{min-height:50px;display:flex;background-color:rgba(0,0,0,.8);}
.topB{min-height:30px;display:flex;background-color:rgba(0,0,0,.3);justify-content:center;}
.topB p{text-align:center;color:white;}
.topB a:hover{background-color:lightblue;}

@media (max-width:400px){
  .alert{margin:0;}
  .box{width:50%;}
  .colA{width:100%;order:3;}
  .colB{width:100%;border:none;border-bottom:.5px solid lightgray;display:flex;justify-content:center;order:2;}
  .colC{width:100%;order:1;border-bottom:.5px solid lightgray;}
  .container{display:flex;flex-wrap:wrap;}
  .itemB p{font-size:22px;text-align:center;}
  .logo{margin: 12px 30px 0px 15px;}
  .top{display:flex;flex-wrap:wrap;}
  .topB{display:flex;flex-wrap:wrap;}
  .topB p{padding:5px;}
}