@charset "UTF-8";
/* CSS Document */

body {margin:0 auto;background-color:#070a17;
	font-family:Verdana, Geneva, sans-serif;font-size:16px;
	color:#bbb;background-image: url(../images/bg.jpg);background-repeat: no-repeat;background-position: top center;}
a, a:hover, a:focus {text-decoration: underline;color: #fff;cursor: pointer;}
img {border: none; outline:none; border:0px; max-width: 100%;height:auto;}
a img {border: none; outline:none; border:0px;}

#wrap {max-width: 1280px;margin:auto;padding:0px 20px;}

#image-wrap {width: 100%;height: auto;margin:auto;background-image: url(../images/form_bg.jpg);background-repeat: no-repeat;background-position: top center;
background-color: #000; max-width: 600px;border:1px solid #9f8602;margin-top: 80px;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;

}
 
#title-area {max-width: 350px;margin:  0 auto;}

#title-area img {margin-bottom: 20px;}

.image_bg {
    width: 100%;
    height: 160px;
    padding: 290px 10px 10px 10px;
    margin-top: 20px;
}

@media screen and (max-width: 900px) {
    .image_bg {
        width: 100%;
        height: 210px;
        padding: 290px 10px 10px 1px;
        margin-top: -130px;
    }

    #image-wrap { background-size: contain; }
}


@media screen and (min-width: 700px) and (max-width: 1024px) {
    .image_bg {
        width: 100%;
        height: 180px;
        padding: 290px 10px 10px 1px;
        margin-top: 20px;
    }

    #image-wrap {
        background-size: contain;
    }
}


#footer_copy{max-width: 600px;margin: 0 auto; padding-top: 20px;padding-bottom: 20px;text-align: center;font-size: 0.8em;}

/* ~~ MENU ~~ */
nav{text-align: right;max-width: 600px;margin: 0 auto; padding-top: 50px;padding-bottom: 10px;}
nav ul{list-style: none;}
nav li {display: inline;}

/* ~~ Login ~~ */
/* ~~ Login ~~ */

#login-area {background-position:center;background-repeat:no-repeat;}

.login_holder {text-align:center;max-width: 300px;margin: 0 auto;}

button, textarea, input, object, select {
    display: inline-block;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 10pt;color:#666;vertical-align:middle;}

#userState .input {
    background: none repeat scroll 0 0 #000000;
    border: 1px solid #666666;color: #FFFFFF;font-size: 10px;margin-top: 3px;padding: 0px;}

#login_submit {
	display:inline-block;cursor:pointer;color:#000;font-size:20px;
	padding: 8px 15px;text-decoration:none;
	border:0;font-family:Arial, Helvetica, sans-serif;background-color: #f3db7f;
    max-width: 140px;
    align-content: center;
    margin-right: 25px;}

#login_submit:hover {background-color:#ffeca4;}

input {
  background-image: none;border: 2px solid #ddd;
  -webkit-transition: all .3s;
  transition: all .3s;
  min-height:30px;border-radius: 3px;width: 80%;margin-bottom: 20px;padding-left: 10px;}

select {
    padding:8px;margin-top:5px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;background: #eee;
    color:#777;border:none;outline:none;display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;}


/*********** Responsive ***********/

@media screen and (max-width: 630px) {
#title-area {margin:auto;text-align:center;padding-top: 20px;}
#title-area img {margin:  0px 10px 10px 10px;}
#login-area {width:100%;margin:auto;}
.login_holder {padding:17px 0px;margin-top:20px;}
}

@media screen and (max-width: 420px) {
#login_submit {margin-top: -6px;width: 55%;}
#image-wrap {margin-top: 40px;}
}