/* -----------------------------------
Site:       Create an account
CSS author: dean cameron
Updated:	2011
Updated by: 4/2012
----------------------------------- */

/* -----------------------------------
simple reset
----------------------------------- */

html, body, ul, ol, li, form, fieldset, legend
{
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6 { margin-top: 0; }
fieldset, img { border: 0; }
legend { color: #000; }

input, textarea, select, button
{
	font-size: 100%;
	line-height: 1.2;
	font-family: helvetica, arial, sans-serif;
}

button
{
	width: auto;
	overflow: visible;
}

table
{
	border-collapse: collapse;
	border-spacing: 0;
}

caption, th, td
{
	text-align: left;
	vertical-align: top;
	font-weight: normal;
}

li { list-style: none; }

abbr, acronym
{
	border-bottom: .1em dotted;
	cursor: help;
}

sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }

pre, code
{
	font-family: "Courier New", monospace, serif;
	font-size: 100%;
	line-height: 1.2;
}


body{           
	background: #fff;
	color: #222;    
	font: 100% Helvetica, Arial, sans-serif;
}                                           


/* -----------------------------------
container
----------------------------------- */
         
.container{
	margin: 1em auto;
	width: 680px;
}
               

/* -----------------------------------
h1
----------------------------------- */
  
h1{             
	background-color: #054c81;
	color: #fff;              
	font-size: 160%;
	font-weight: normal;
	margin: 0;
	padding: 10px 20px 15px;
}

                                        
/* -----------------------------------
form-container
----------------------------------- */
              
.form-container{
	background-color: #eee;
	padding: 0 20px 15px;      
	
	-webkit-border-radius: 10px;
	border-radius: 0  0 10px 10px;     
	-webkit-box-shadow: 10px 5px 15px #444444 ;
	box-shadow: 10px 5px 15px #444444;

}                        

.form-container p{
	font-size: 90%;
	margin: 0;
	padding: 20px 0 0;
}                     

/* -----------------------------------
	de los div
----------------------------------- */
.account div{
	border: 0px solid red;
	margin: 0 0 4px;
	padding: 4px 0;
}
 
.account div:hover{
   background: #ddd;   
}

/* -----------------------------------
	das classes los especial!
----------------------------------- */         

/*	THIS IS FOR OLD SCREEN READERS BECAUSE I'M SENSITIVE LIKE THAT!!!   */
.hidden{
	left: -500em;
	position: absolute;
}
              
.mandatory{
	color: red;
}
/* -----------------------------------
	labels - labelled you... dug the unforgiven. what?
----------------------------------- */                

.account label, .account .label-select{           
	float: left;
	margin: 0 15px 0 0;
	padding: 5px 0 0;
	text-align: right;
	width: 190px;
}
          
.account .label-checkbox{    
	padding: 2px 0 0;
}                                         
                                      

/* -----------------------------------
	legend of zelda span
----------------------------------- */

.account legend span{          
	display: block;
	font-size: 125%;
	font-weight: bold;
	padding: 15px 0 10px 205px;
	width: 320px;
}                                           



/* -----------------------------------
	input 
----------------------------------- */

.input-wide{                                              
	background: #fff url('../images/sprite.png') no-repeat 0 0; 
	border:1px solid #b4b4b4;  
	height: 24px;
	margin: 0;
	padding: 3px 3px 3px 27px;
	width: 288px;  
	
	-webkit-border-radius: 5px;
	border-radius: 5px;
}                
         
.name{
	background: url('../images/sprite.png') no-repeat -1px -1px; 
}                                                                 
                                                                  
.email{                                                           
	background: url('../images/sprite.png') no-repeat -1px -33px; 
}                                                                 
                                                                  
.phone{                                                           
	background: url('../images/sprite.png') no-repeat -1px -65px; 
}                                                                 
                                                                  
.password{                                                        
	background: url('../images/sprite.png') no-repeat -1px -97px; 
}                                                                 
                                                                  
.address{                                                         
	background: url('../images/sprite.png') no-repeat -1px -129px;
}                                                                 

.bio{
	background: url('../images/sprite.png') no-repeat -1px -161px;
}
.account .input-textarea{   
	background-color: #fff;
	height: 150px;
}


/* -----------------------------------
	submit!
----------------------------------- */    
.account .submit {
	margin: 0;
	padding: 20px 0 20px 205px; 
	width: 435px;
}
         
.account .submit input{  
	background-color: #054c81;      
	border: 0;      
	border-radius: 5px;    
	-webkit-border-radius: 5px;
	color: #fff;   
	font-size: 110%;
	margin: 0;
	padding: 5px 20px; 
	
	-webkit-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
    box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
}            

.account .submit input:active{
	-webkit-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
    -moz-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
    box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9)
}  
.account .submit input:active:after{
	content: ""; width: 100%; height: 3px; background: #fff; position: absolute; bottom: -1px; left: 0;
}

/* -----------------------------------
	select boxes boxes boxes boxes
----------------------------------- */
.account select{
	border: 1px solid #b4b4b4;
}             

#birthdate, #birthmonth, #birthyear{        
	border:1px solid #b4b4b4;
}
#country{
	width: 320px;
}                               

/* -----------------------------------
	warning massages!!!
----------------------------------- */
.warning-message{             
	background: #edd3d4;
	color: red;
	margin: 15px 0 0;
	padding: 10px;
}
    
/*      stupid warning it's okay		*/
.warning-message a:link, .warning-message a:visited{    
	color: red;           
	font-weight: bold;
	text-decoration: none;	
}

.account .warning{
	background: #edd3d4 url('../images/sprite.png') no-repeat -640px 50%; 
	color: red;
}   

.account .warning:hover{
	background: #edd3d4 url('../images/sprite.png') no-repeat -640px 50%; 
}
        
.warning .input-wide{
	border: 1px solid red
}

.warning .name{
	background: url('../images/sprite.png') no-repeat -321px -1px; 
}                                                                 
                                                                  
.warning .email{                                                           
	background: url('../images/sprite.png') no-repeat -321px -33px; 
}                                                                 
                                                                  
.warning .phone{                                                           
	background: url('../images/sprite.png') no-repeat -321px -65px; 
}                                                                 
                                                                  
.warning .password{                                                        
	background: url('../images/sprite.png') no-repeat -321px -97px; 
}                                                                 
                                                                  
.warning .address{                                                         
	background: url('../images/sprite.png') no-repeat -321px -129px;
}                                                                 

.warning .bio{
	background: url('../images/sprite.png') no-repeat -321px -161px;
}
/* -----------------------------------

----------------------------------- */