@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; }
.jpanchor { text-decoration: none; width: 100%; padding-left: 8px; padding-right: 8px; }
/*a { text-decoration: none; }
a { width: 100%; padding-left: 8px; padding-right: 8px; }*/

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

.jpbutton { border-radius: 5px; background-color: #E39048; color: #041848; cursor: pointer; padding: 10px 20px; margin: 6px; font-size: 14px; }
.jpinput { border-radius: 5px; background-color: #E0E0E0; color: #041848; width: calc(100% - 14px); margin: 6px; border: 1px solid #444444; height: 30px; padding: 7px; }
.jptextarea { border-radius: 5px; background-color: #E0E0E0; color: #041848; width: calc(100% - 14px); margin: 6px; border: 1px solid #444444; height: 120px; padding: 7px; }
.jpselect { background-color: #E0E0E0; color: #041848; }

div #container { width: 100%; 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; z-index: 1000; }

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: 100%; max-width: 1600px; 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; }

.gr {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 10px;
grid-row-gap: 0px;
}

.gr1 { grid-area: 1 / 1 / 2 / 2; }
.gr2 { grid-area: 1 / 2 / 2 / 3; }
.gr3 { grid-area: 1 / 3 / 2 / 4; }


.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: 250px; height: 70px; position: absolute; left: 0px; }
.a5 { width: 320px; 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; padding-right: 50px; }
.h4 { display: table-cell; vertical-align: middle; font-size:40px; text-align: right; padding-right: 300px; color: red; visibility: hidden; }
.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; }

.topm { margin-top: 10px; }

li { font-size: 20px; }


@media only screen and (max-width: 740px) {
  #header { height: 20px; border-width: 2px; }
  .h1 { font-size: 12px; margin: 2px; }
  .h4 { font-size: 12px; }
  .l2 { font-size: 12px; }
  .l3 { font-size: 12px; }
  #content { margin-top: 30px; }
  .jpbutton { border-radius: 3px; padding: 4px 8px; margin: 2px; font-size: 10px; }
  div #left { padding-left: 10px; }
}  

@media only screen and (max-width: 900px) and (min-width: 741px) {
  #header { height: 30px; border-width: 2px; }
  .h1 { font-size: 16px; margin: 3px; }
  .h4 { font-size: 16px; }
  .l2 { font-size: 16px; }
  .l3 { font-size: 14px; }
  #content { margin-top: 40px; }
  .jpbutton { border-radius: 4px; padding: 5px 10px; margin: 3px; font-size: 11px; }
  div #left { padding-left: 20px; }
}  

@media only screen and (max-width: 1280px) and (min-width: 901px) {
  #header { height: 40px; border-width: 3px; }
  .h1 { font-size: 24px; margin: 5px; }
  .h4 { font-size: 24px; }
  .h2 { padding-right: 20px; }
  .l2 { font-size: 25px; }
  .l3 { font-size: 18px; }
  #content { margin-top: 60px; }
  .jpbutton { padding: 7px 16px; margin: 3px; font-size: 12px; }
  div #left { padding-left: 30px; }
 }
 
/*@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; }
}  */

/*@media screen and (max-width: 1600px) {
  #header { height: 40px; border-width: 3px;  }
  .h1 { font-size: 24px; margin: 5px; }
  .h2 { padding-right: 20px; }
  #content { margin-top: 50px; }
  .jpbutton { border-radius: 5px; background-color: #E39048; color: #041848; cursor: pointer; padding: 10px 20px; margin: 3px; font-size: 12px; }
  div #left { position: relative; width: 800px; height: 500px; margin-left: auto; margin-right: auto; }
  div #right { position: relative; width: 800px; height: 500px; margin-left: auto; margin-right: auto; }
}*/