body {padding:0px; margin:0px; font-family:'Lato', sans-serif; color:#616161;}
h1, h2, h3 {padding:0px; margin:0px;}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
header {border-bottom:2px solid #78b941;}
header .head {width:900px; margin:24px auto;}
header .head img {max-width: 100%;}
header .head .logo {float:left;}
header .head .logout {float:right; margin-top: 50px;}

.main-container {width:900px; margin:0 auto; padding-bottom: 60px;}
.main-container h1 {padding:27px 0px; color:#313131;}
.main-container p {margin: 20px 0px;}
a {color:#78b941; text-decoration:none;}
a:hover {text-decoration:underline;}
.main-container input[type='text'], .main-container select {width: 60%; border-radius: 2px; border: 1px solid #096; padding: 10px; color: #333;}
.layout {width: 60%; border-radius: 2px; border: 1px solid #096; padding: 10px; color: #333;}
.main-container table {width: 100%; border-collapse: collapse; margin: 0px 0px 30px; background-color: #fff;}
.main-container table tr {border-bottom: 1px solid #ccc;}
.main-container table td, th{padding: 6px 6px 6px 10px; text-align: left;}

.login-main {margin: 80px 0px;}
.login-main table td, th{padding: 6px 6px 6px 10px; text-align: left; vertical-align: initial;}
.login-main input[type='text'], .login-main input[type='password'] {width: 200px; border-radius: 2px;border: 1px solid #CCC; padding: 10px; color: #333; font-size: 14px; margin-top: 2px;}
.login-main label {margin-top: 20px; display: block; }
.login-main input[type='submit']{padding: 10px 25px 8px;border: none;color: #fff; background-color: #78b941; text-shadow: rgba(0,0,0,0.24) 0 1px 0; font-size: 16px; box-shadow: rgba(255,255,255,0.24) 0 2px 0 0 inset,#fff 0 1px 0 0; border: 1px solid #6faf38; border-radius: 2px;}
.login-main input[type='submit']:hover {background-color: #80c248; cursor:pointer;}

.failed {margin:100px 0px;}

footer {background:#2a2a2a; color:#ffffff;}
footer .footer {width:900px; margin:0 auto; padding: 30px 0px;}

@media only screen and (max-width: 960px) {
header .head {width: 90%;}
.main-container {width: 90%;}
.login-main {width: 90%;}
footer .footer {width: 90%;}
}
@media only screen and (max-width: 660px) {
h1 {font-size:24px;}
}
@media only screen and (max-width: 350px) {
.login-main table td, th{padding: 6px;}
.login-main input[type='text'], .login-main input[type='password'] {width: 150px;}
header .head .logout {margin-top: 0px;}
}
@media only screen and (max-width: 280px) {
.login-main input[type='text'], .login-main input[type='password'] {width: 120px;}
}