body{
    background: linear-gradient(left, #3399ff 0%, #66ccff 40%,#66ccff 60%, #3399ff 100%);
    background: -moz-linear-gradient(left, #3399ff 0%, #66ccff 40%,#66ccff 60%, #3399ff 100%);
    background: -webkit-linear-gradient(left, #3399ff 0%, #66ccff 40%,#66ccff 60%, #3399ff 100%);
    background: -ms-linear-gradient(left, #3399ff 0%, #66ccff 40%,#66ccff 60%, #3399ff 100%);
    background: -o-linear-gradient(left, #3399ff 0%, #66ccff 40%,#66ccff 60%, #3399ff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3399ff, endColorstr=#3399ff,GradientType=1);
    padding: 0;
    margin: 0;
    font-family: Arial;
}
 
header{
    position: relative;
    display: table;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    background-color: #b6ff00;
    background-color: transparent;
    }
 
#logo{
    display: inline-block;
    width: 120px;
    margin: 20px 0 10px 20px;
    float: left;
    }
 
#info{
    width: 500px;
    background-color: #aaa;
    float: right;
    margin: 40px 20px 0 0;
    color: #fff;
    text-align: center;
    border-radius: 50px 0px 50px 0px;
    overflow: hidden;
    }
 
#info1{
    width: 100%;
    padding: 5px;
    background-color: #00a;
    font-size: 24px;
    }
 
#span1{
 font-size: 36px;
 font-weight: bold;
}
    
#info2{
    width: 100%;
    padding: 5px;
    background-color: #c00;
    font-size: 18px;
    }
 
#span2{font-size: 28px;font-weight: bold;}
 
#navbox{
    width: 100%;
    height: 70px;
    background-color: #ddd;
    overflow: hidden;
    }
 
nav{
    display: table;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    height: 70px;
    background-color: transparent;
    font-size: 18px;
    font-weight: bold;
    color: #999;
	user-select: none;
    border-right: 1px #bbb solid;
    cursor: default;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
    }
 
.navz{
    display: table-row;
    height: 70px;
}
.navi{
    display: table-cell;
    padding: 10px;
    border-left: 1px #bbb solid;
    vertical-align: middle;
    text-align: center;
    }

.navi:last-child{text-align: right;} 

nav a:link {text-decoration: none;color: #00a;}
nav a:visited {text-decoration: none;color : #00a;}
nav a:hover { text-decoration: none;color: #c00}
nav a:active { text-decoration: none;color: #00a;}


.navresv{ display:inline-block;}
.navresh{ display:none;}
    
 
@media screen  and (max-width: 700px) {
    #info{width: 350px; border-radius: 30px 0px 30px 0px; margin: 60px 20px 0 0;}
    #info1{font-size: 20px;}
    #span1{font-size: 29px;}
    #info2{font-size: 14px;}
    #span2{font-size: 24px;}
    nav{font-size: 16px;}
	}
 
@media screen  and (max-width: 650px) {
    nav{font-size: 14px;}
}

@media screen  and (max-width: 602px) {
    #info{width: 300px; border-radius: 20px 0px 20px 0px; margin: 80px 20px 0 0;}
    #info1{font-size: 15px;}
    #span1{font-size: 22px;}
    #info2{font-size: 12px;}
    #span2{font-size: 18px;}
    nav{font-size: 18px;}
    .navresh{ display:block;}
    .navresv{ display:none;}
    .navi:last-child{line-height: 10px; font-weight: normal; text-align: center}
}
 

@media screen  and (max-width: 500px) {
    #logo{display: block; float: none; width: 120px;margin: 0 auto;}
    #info{float: none; width: 100%; border-radius: 0px; margin: 10px 0 0 0 ;}
    #info1{font-size: 18px;}
    #span1{font-size: 24px;}
    #info2{font-size: 14px;}
    #span2{font-size: 20px;}
    nav{font-size: 16px;}
    .navi:last-child{line-height: 8px;}
}
 
@media screen  and (max-width: 420px) {
    nav{font-size: 14px;}
}

@media screen  and (max-width: 380px) {
    nav{font-size: 12px;}
    #info1#{font-size: 20px;}
    #span1#{font-size: 18px;}
    #info2#{font-size: 16px;}
    #span2#{font-size: 20px;}
}

@media screen  and (max-width: 340px) {
    nav{font-size: 12px;}
    .navi{padding: 0 5px 0 5px; }
}