/* CSS Reset (Eric Meyer) */

.clear { clear: both; }

#container {
    margin: 10px auto;
    padding: 10px 0;
    overflow: hidden;
    position: relative;
}
    #container #first_step, #second_step, #third_step, #fourth_step, #finish_step { display: none; }
    #container #first_step { display: block; }

    #container .form { margin: 20px 20px 20px 20px; }
    
    #container h1, #container h2 {
        font-size: Cantarell, Verdana, sans-serif;
        text-align: center;
        font-size: 14px;
        text-shadow: 1px 1px 2px #222;
    }
        #container h1 span { color: #a90329; }
        
    #container h2 {
        color: #888;
        font-size: 20px;
        text-align: left;
        text-shadow: none;
    }
    
    #container table {
        margin: 20px 40px;
        font-size: 14px;
        font-weight: bold;
    }
        #container table td {
            padding: 5px 10px;
        }
            #container table td:nth-child(2) {
                color: #a90329;
            } 
			 #container table td:nth-child(4) {
                color: #a90329;
            }   
        
    #container input[type=text], #container select {
        background: url('../images/input.png') no-repeat;
        color: #888;
        border: 1px solid #ccc;
        font-family: Cantarell, Verdana, sans-serif;
        font-weight: bold;
        font-size: 15px;
        width: 315px;
        height: 35px;
        padding: 0 25px;
        margin: 5px 10px 10px 5px;
        float: left;
        
        border-radius: 6px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
    }
	#container textarea{
        color: #888;
        border: 1px solid #ccc;
        font-family: Cantarell, Verdana, sans-serif;
        font-weight: bold;
        font-size: 15px;
        width: 644px;
        height: 100px;
        padding: 0 25px;
        margin: 5px 10px 10px 5px;
        float: left;
        
        border-radius: 6px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
    }
        #container input.submit {
            color: #FFF;
			font-size: 0.875em;
			text-transform: uppercase;
			padding: 0.8em 1em;
			border: 1px solid #EEE;
			display: inline-block;
			background: #C30;
			border:none;
			outline: none;
			cursor:pointer;
			font-family: 'Open Sans', sans-serif;
        }
		#container input[type="submit"]:hover{
			background: #026660;
			color: #FFF;
		}
		#container input[type="submit"]:active{
			background: #026660;
			color: #FFF;
		}
        #container input.back{ 
           color: #FFF;
			font-size: 0.875em;
			text-transform: uppercase;
			padding: 0.8em 1em;
			border: 1px solid #EEE;
			display: inline-block;
			background: #C30;
			border:none;
			outline: none;
			cursor:pointer;
			font-family: 'Open Sans', sans-serif;
        }
		#container input[type="button"]:hover{
			background: #026660;
			color: #FFF;
		}    
		#container input[type="button"]:active{
			background: #026660;
			color: #FFF;
		}
        #container input.error { border: 1px solid red; }
        #container input.valid { border: 1px solid #1FFF00; }
        
        #container input:focus, #container select:focus {
            border: 1px solid #a90329;
            color: #a90329;
        }

    #container select { padding: 5px 0 5px 25px; }
        #container option { padding: 0 15px; }

    #container label {
        color: #666;
        font-size: 12px;
        font-weight: bold;
        line-height: 14px;
        float: right;
        margin: 23px -25px;
        width: 270px;
    }
    

#progress_bar {
    background: url('../images/progress_bar.png') no-repeat;
    width: 339px;
    height: 24px;
    margin: 0 auto;
    position: relative;
}

#progress {
    background: url('../images/progress.png') repeat-x;
    width: 0px;
    height: 23px;
    margin-top:-5px;
	margin-left:-8px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
}
#progress_text {
    position: relative;
    line-height: 21px;
    text-align: center;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px #222;
    width: 339px;
    height: 24px;
    top: -30px;
    left: 0;
}
@media only screen and (max-width: 480px) and (min-width: 320px) {
	#container .form input[type=text] select {
		width:150px;
	}
	#container .form textarea{
		width:150px;
		height:50px;
	}
}