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

*{
margin:0;
padding:0;
font-family:"arial narrow",arial,sans-serif;
}

body{
background:#eee;
padding:20px 0;
text-align: center;
}

.back {
width:800px;
height:550px;
text-align:center;
margin:0 auto;
background-repeat:no-repeat;
color:black;
background-color: white;
background-image:url('../images/bg.jpg');
background-position: top center;
}

.inner {
width:800px;
padding-top:190px;
}

#econ_logo{
margin:0 400px 20px 0 ;
}

#instructions{
width:220px;
float:right;
margin:50px 30px 0 0;
font-size:17px;
font-weight:bold;
}

#enter_code1, #enter_code2{
background-color: #92847D;
color: white;
font-size: 40px;
font-style: italic;
font-weight: bold;
margin:0 auto;
width: 560px;
text-shadow: 3px 3px 1px #333;
letter-spacing: -0.9px;
}

#enter_code2{
width: 420px;
margin-top:5px;
}

#thecode{
border: 1px solid #333;
color: #333;
font-family: Tahoma,arial,sans-serif;
font-size: 18px;
font-weight: bold;
margin: 5px 0 0 310px;
padding: 8px;
text-align: center;
width: 190px;
}

.guides2{
float: right;
font-size: 15px;
margin-right: 7px;
text-align: left;
margin-top:5px;
}

.guides2 a:link, .guides2 a:visited{
font-size: 12px;
font-weight: bold;
color:blue;
}

#next{
font-weight:bold;
font-style: italic;
text-decoration: underline;
float: right;
font-size:30px;
margin:60px -90px 0 0;
background: none;
border:0;
cursor:pointer;
}

#result{
color: red;
font-size: 15px;
font-weight: bold;
height: 20px;
margin: 20px 0 0 451px;
text-align: left;
width: 300px;
}

.guides{
font-size:12px;
margin:0 auto;
margin-top:80px;
}

.feet{
font-size:14px;
font-style:italic;
color:black;
}

.feet a:link, a:visited{
color: black;
}

/* Smartphones (portrait) ----------- */

@media screen and (max-width: 670px) {
.back {
width:90%;
height:90%;
background-position: top left;
background-image:url('../images/bg_smart.jpg');
}

.inner{
width:100%;	
height:380px;
padding-top:50px;
}

#econ_logo {
margin: 0 0 20px;
width: 80%;
}

#enter_code1, #enter_code2 {
width:90%;
font-size:1.5em;
}

#thecode {
margin:0 auto;
width: 140px;
margin-top:10px;
}

#next{
float: none;
margin: 0 auto;
margin-top:20px;
}

.guides2{
float: none;
text-align: center;
margin: 0;
width: 90%;
}

.footer{
margin-top:20px;
font-size:9px;
}

.feet, .feet a:link, a:visited{
font-size:12px;
}
}

@media screen and (max-device-width: 670px){
.back {
width:90%;
height:90%;
background-position: top left;
background-image:url('../images/bg_smart.jpg');
}

.inner{
width:100%;	
height:380px;
padding-top:50px;
}

#econ_logo {
margin: 0 0 20px;
width: 80%;
}

#enter_code1, #enter_code2 {
width:90%;
font-size:1.5em;
}

#thecode {
margin:0 auto;
width: 140px;
margin-top:10px;
}

#next{
float: none;
margin: 0 auto;
margin-top:20px;
}

.guides2{
float: none;
text-align: center;
margin: 0;
width: 90%;
}

.footer{
margin-top:20px;
font-size:9px;
}

.feet, .feet a:link, a:visited{
font-size:12px;
}
}