/* #LoginForm

================================================== */
.loginForm {
    /* Size & position */
	font-family: 'Questrial', sans-serif;  
	width: 60px;
	height: 60px;
	position: fixed; /* For the submit button positioning */
	left: 25px;
	bottom: 70px;	
	z-index: 3;
	height: 10px;
	padding-bottom: 0px;
	    margin-right: 0px;
	-webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}

.loginForm input[type=text]{
	font-family: 'Questrial', sans-serif;
	font-size: 10px;
	position: relative;
	left: -1px;
	bottom: 0px;	
    margin-right: 0px;
	background: url(images/smallButtons/profile/profile_idle.png) no-repeat 3px 4px #21262b;
	width: 60px;	
	height: 23.5px;
    padding-left: 30px;

    border: 1px solid #505050;

	-webkit-border-radius: 6px 0px 0px 6px;
    -moz-border-radius: 6px 0px 0px 6px;
    border-radius: 6px 0px 0px 6px;   

    color: #fff;

	box-shadow: 0.5px 1px 0px #635e53, 0px 3px 15px rgba(0,0,0,1);
	box-shadow: inset 2px 2px 2px #000, 0px 1px 0px #9b8f80;
}


.loginForm input[type=text]:hover,
.loginForm input[type=text]:focus {
	background: url(images/smallButtons/profile/profile_hover.png) no-repeat 3px 4px #b3e2ff;    
	
	border: 1px solid #59c9ec;	
	color: #000000;
    box-shadow: inset 2px 2px 2px #071d21, 0px 1px 1px #144c54;

	}

 
.loginForm input[type=text]:active  {
	background: url(images/smallButtons/profile/profile2_active.png) no-repeat 3px 4px #59c9ec; 
	border: 1px solid #fff;
	box-shadow: inset 2px 2px 2px #b3e2ff, 0px 1px 1px #9b8f80;

}

.loginForm input[type=password] {
	position: relative;
	left: -1px;
	bottom:7.5px;	    
	font-family: 'Questrial', sans-serif;
    font-weight: lighter;
	font-size: 10px;
	background: url(images/smallButtons/lock/lock_idle.png) no-repeat 2px 4px #21262b; 
	width: 60px;	
	height: 23.5px;
    padding-left: 30px;
    border: 1px solid #505050;
	
	-webkit-border-radius: 6px 0px 0px 6px;
    -moz-border-radius: 6px 0px 0px 6px;
    border-radius: 6px 0px 0px 6px;   

    color: #fff;

	box-shadow: 0.5px 1px 0px #635e53, 0px 3px 15px rgba(0,0,0,1);
	box-shadow: inset 2px 2px 2px #000, 0px 1px 0px #9b8f80;


}
 

.loginForm input[type=password]:hover,
.loginForm input[type=password]:focus  {
	background: url(images/smallButtons/lock/lock_hover.png) no-repeat 2px 4px #b3e2ff;     
	border: 1px solid #59c9ec;	
	color: #000000;
	box-shadow: inset 2px 2px 2px #071d21, 0px 1px 1px #144c54;

}

.loginForm input[type=password]:active  {
	background: url(images/smallButtons/lock/lock_active.png) no-repeat 2px 4px #59c9ec; 
	border: 1px solid #fff;
	box-shadow: inset 2px 2px 2px #b3e2ff, 0px 1px 1px #9b8f80;

}


.smallButton[type="search"]:hover
{
background: url(images/smallButtons/search/search_hover.png) no-repeat -3px -2px, -webkit-radial-gradient(#3398CC,#32332c  );
background: url(images/smallButtons/search/search_hover.png) no-repeat -3px -2px, -moz-radial-gradient(#3398CC,#32332c  );
background: url(images/smallButtons/search/search_hover.png) no-repeat -3px -2px, -o-radial-gradient(#3398CC,#32332c  );
background: url(images/smallButtons/search/search_hover.png) no-repeat -3px -2px, -ms-radial-gradient(#3398CC,#32332c  );
}


.smallButton[type="search"]:active
{
background: url(images/smallButtons/search/search_active.png) no-repeat -3px -2px, -webkit-radial-gradient( #eefffd , #59c9ec );
background: url(images/smallButtons/search/search_active.png) no-repeat -3px -2px, -moz-radial-gradient( #eefffd , #59c9ec );
background: url(images/smallButtons/search/search_active.png) no-repeat -3px -2px, -o-radial-gradient( #eefffd , #59c9ec );
background: url(images/smallButtons/search/search_active.png) no-repeat -3px -2px, -ms-radial-gradient( #eefffd , #59c9ec );
 }


.loginButton{
background: url(images/largeButtons/login/login_idle.png) no-repeat -4px -4px, -webkit-radial-gradient(#302d26,#070706  );	
background: url(images/largeButtons/login/login_idle.png) no-repeat -4px -4px, -moz-radial-gradient(#302d26,#070706  );
background: url(images/largeButtons/login/login_idle.png) no-repeat -4px -4px, -o-radial-gradient(#302d26,#070706  );
background: url(images/largeButtons/login/login_idle.png) no-repeat -4px -4px, -ms-radial-gradient(#302d26,#070706  );
background-size: 120% 120%; 
border: 1px solid #505050;
-webkit-border-radius: 0px 9px 9px 0px;
-moz-border-radius: 0px 9px 9px 0px;
border-radius: 0px 9px 9px 0px;  
width: 60px;  
height: 60px;
font-family: 'Questrial';
font-size: 20px;
float:left;
bottom:-67.5px;

font-weight: lighter;
position:absolute;
cursor: pointer;
color: transparent;
font-size:21px;
font-family: 'Questrial', sans-serif;
font-weight: lighter;

text-align:center;
 line-height: 85px;
/* Firefox */
left: -moz-calc(100% +35px);
/* WebKit */
left: -webkit-calc(100% + 35px);
/* Opera */
left: -o-calc(100% +35px);
/* Standard */
left: calc(100%  + 35px);	
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;	 
box-shadow: 1px 2px 0px #635e53, 0px 1px 1px rgba(0,0,0,1);
}

.loginButton:hover {

background: url(images/largeButtons/login/login_hover.png) no-repeat -4px -4px, -webkit-radial-gradient(#3398CC,#32332c  );
background: url(images/largeButtons/login/login_hover.png) no-repeat -4px -4px, -moz-radial-gradient(#3398CC,#32332c  );
background: url(images/largeButtons/login/login_hover.png) no-repeat -4px -4px, -o-radial-gradient(#3398CC,#32332c  );
background: url(images/largeButtons/login/login_hover.png) no-repeat -4px -4px, -ms-radial-gradient(#3398CC,#32332c  );
background-size: 120% 120%; 
border: 1px solid #59c9ec;
box-shadow: 2px 4px 0px #3f6572, 0px 3px 10px rgba(0,0,0,1);
}

.loginButton:active {

background: url(images/largeButtons/login/login_active.png) no-repeat -4px -4px, -webkit-radial-gradient(#eefffd , #59c9ec );
background: url(images/largeButtons/login/login_active.png) no-repeat -4px -4px, -moz-radial-gradient(#eefffd , #59c9ec );
background: url(images/largeButtons/login/login_active.png) no-repeat -4px -4px, -o-radial-gradient(#eefffd , #59c9ec );
background: url(images/largeButtons/login/login_active.png) no-repeat -4px -4px, -ms-radial-gradient(#eefffd , #59c9ec );
background-size: 120% 120%; 
border: 1px solid #fff;
box-shadow: 0px 0px 0px #9b8f80, 0px 3px 10px rgba(0,0,0,1);

}

.logoutButton{
background: url(images/largeButtons/logout/logout_idle.png) no-repeat -4px -4px, -webkit-radial-gradient(#302d26,#070706  );	
background: url(images/largeButtons/logout/logout_idle.png) no-repeat -4px -4px, -moz-radial-gradient(#302d26,#070706  );
background: url(images/largeButtons/logout/logout_idle.png) no-repeat -4px -4px, -o-radial-gradient(#302d26,#070706  );
background: url(images/largeButtons/logout/logout_idle.png) no-repeat -4px -4px, -ms-radial-gradient(#302d26,#070706  );
background-size: 120% 120%; 
border: 1px solid #505050;
-webkit-border-radius: 9px 9px 9px 9px;
-moz-border-radius: 9px 9px 9px 9px;
border-radius: 9px 9px 9px 9px;  
width: 60px;  
height: 60px;
font-family: 'Questrial';
font-size: 20px;
float:left;
bottom:22.5px;
left:25px;
	position: absolute;
font-weight: lighter;
position:absolute;
cursor: pointer;
color: transparent;
font-size:21px;
font-family: 'Questrial', sans-serif;
font-weight: lighter;

text-align:center;
 line-height: 85px;
/* Firefox */

-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;	 
box-shadow: 1px 2px 0px #635e53, 0px 1px 1px rgba(0,0,0,1);
}

.logoutButton:hover {

background: url(images/largeButtons/logout/logout_hover.png) no-repeat -4px -4px, -webkit-radial-gradient(#3398CC,#32332c  );
background: url(images/largeButtons/logout/logout_hover.png) no-repeat -4px -4px, -moz-radial-gradient(#3398CC,#32332c  );
background: url(images/largeButtons/logout/logout_hover.png) no-repeat -4px -4px, -o-radial-gradient(#3398CC,#32332c  );
background: url(images/largeButtons/logout/logout_hover.png) no-repeat -4px -4px, -ms-radial-gradient(#3398CC,#32332c  );
background-size: 120% 120%; 
border: 1px solid #59c9ec;
box-shadow: 2px 4px 0px #3f6572, 0px 3px 10px rgba(0,0,0,1);
}

.logoutButton:active {

background: url(images/largeButtons/logout/logout_active.png) no-repeat -4px -4px, -webkit-radial-gradient(#eefffd , #59c9ec );
background: url(images/largeButtons/logout/logout_active.png) no-repeat -4px -4px, -moz-radial-gradient(#eefffd , #59c9ec );
background: url(images/largeButtons/logout/logout_active.png) no-repeat -4px -4px, -o-radial-gradient(#eefffd , #59c9ec );
background: url(images/largeButtons/logout/logout_active.png) no-repeat -4px -4px, -ms-radial-gradient(#eefffd , #59c9ec );
background-size: 120% 120%; 
border: 1px solid #fff;
box-shadow: 0px 0px 0px #9b8f80, 0px 3px 10px rgba(0,0,0,1);

}

@media only screen and (max-height: 600px) and (max-width: 400px){
.logoutButton{
	position: absolute;
top:18px;
left:12.5px;
float:left;
}
	 }