@import url("reset.css");

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

p { margin: 10px; font-size: 16px; }

body { width: 100%; height: 100%; background:#fff; font-family: 'Roboto Condensed', sans-serif; color: #041848; font-size: 14px; position: absolute; }

h1 { font-size:30px; font-family: 'Roboto Condensed', sans-serif; margin: 10px;}
h2 { font-size:24px; font-family: 'Roboto Condensed', sans-serif; }
h3 { font-family: 'Roboto Condensed', sans-serif; border-bottom:solid 1px #ccc; padding-left: 10px; }

a:link { color: #041848 }
a:visited { color: #041848 }
a:active { color: #041848 }
a:hover { color: #041848; background-color: #E39048; }
a { text-decoration: none; }
a { width: 100%; padding-left: 8px; padding-right: 8px; }

.dummya { padding-left: 8px; padding-right: 8px; }

button { border-radius: 5px; background-color: #E39048; color: #041848; cursor: pointer; padding: 10px 20px; margin: 6px; }
input { border-radius: 5px; background-color: #E0E0E0; color: #041848; width: calc(100% - 14px); margin: 6px; border: 1px solid #444444; height: 40px; padding: 7px; }
textarea { border-radius: 5px; background-color: #E0E0E0; color: #041848; width: calc(100% - 14px); margin: 6px; border: 1px solid #444444; height: 120px; padding: 7px; }
select { background-color: #E0E0E0; color: #041848; }

div #container { width: 100%; max-width: 1024px; height: 100%; position: relative; overflow: hidden; margin-left: auto; margin-right: auto; }
div #auth { display: none; border-radius: 10px; border: 5px solid #20408E; position: absolute; width: 600px; max-width: calc(100% - 30px); height: 300px; top: 80px; left: 15px; background-color: #E0E0E0; padding: 10px; }

div #reset { border-radius: 10px; border: 5px solid #20408E; position: absolute; width: 600px; height: 300px; top: 80px; left: 15px; background-color: #E0E0E0; padding: 10px; }

#header { width: 100%; display: table; height: 60px; border-style: none none solid none; border-width: 5px; border-color: #20408E; position: fixed; top: 0; z-index: 1000; background-color: white; }
#content { margin-top: 90px;  width: 90%; max-width: 1500px; margin-left: auto; margin-right: auto; z-index: 500; position: relative; }
#left { width: 50%; position: absolute; top: 0px; left: 0px; }
#right { width: 50%; position: absolute; top: 0px; right: 0px; }
.a1 { width: 90%; float: left; margin-top: 60px; }
.a2 { width: 370px; display: table; height: 60px; position: absolute; top: 0px; }
.a3 { width: 570px; clear: both; height: 70px; position: absolute; bottom: 10px; }
.a4 { width: 200px; height: 70px; position: absolute; left: 0px; }
.a5 { width: 370px; height: 70px; position: absolute; right: 0px; overflow: hidden; }

.h1 { display: table-cell; vertical-align: middle; font-size:40px; font-family: 'Roboto Condensed', sans-serif; padding-left: 20px; }
.h3 { display: table-cell; vertical-align: middle; font-size:30px; font-family: 'Roboto Condensed', sans-serif; padding-left: 20px; }
.h2 { display: table-cell; vertical-align: middle; text-align: right; margin-right: 50px; }
.t1 { display: inline-block; width: 100px; }
.t2 { display: inline-block; width: 400px; }

.msg { display: inline-block; font-size: 16px; color: red; margin: 0px 0px 0px 10px; }

.l1 { font-size: 16px; margin: 5px 0px 5px 10px; }
.l2 { font-size: 30px; }
.l3 { font-size: 20px; }

li { font-size: 20px; }

@media screen and (max-width: 1020px) {  
  body { margin: 0 0 100px; } 
}

@media screen and (max-width: 700px) {  
  body { margin: 0 0 80px; }
  .t2 { display: inline-block; width: 300px; }
  div #auth { width: 500px; }
  .a3 { width: 470px; }
  .a5 { width: 270px; }
  .h1 { font-size: 36px; padding-left: 10px; }
  #content { width: 95%; }
}

@media screen and (max-width: 550px) {
  .act1 { float: none; margin-bottom: 10px; margin-left: auto; margin-right: auto; } 
}

@media screen and (max-width: 450px) {    
  body { margin: 0 0 60px; }
}