/* Login Page Styles */

.login_background {
	overflow: hidden;
	z-index: -100;
}

.login_background_ground {
	
	height: 100%;
	width: 100%;
	background: url('../img/loginBG.jpg') no-repeat left top;
	position: absolute;
	z-index: -5;
}

/* General Container for everything in the screen */

.main_container{
	height: 100%;
	width: 100%;
	background: url('../img/grass.png') repeat-x left bottom;
}

/* Container for all the login stuff, also serves as a pivot point */
.login_container{
	position:absolute;
	height: 0%;
	width: 0%;
	top: 50%;
	left: 50%;
}

.login-image{
	background: url('../img/LoginFormBG.png') no-repeat left top;
	height: 176px;
    position: relative;
    width: 752px;
	margin-left: -376px;
	margin-top: -35px;
}

/* Middle */
.middle_spinner_container {
	width:89px;
    height: 89px;
	left: 340px;
	top: 65px;
	position: absolute;
	
	transform:rotate(359deg);
	-webkit-transform:rotate(359deg);
	-ms-transform:rotate(359deg);
	
    animation: spin 3s linear infinite;
    -webkit-animation: spin 3s linear infinite;
    -moz-animation: spin 3s linear infinite;
    -o-animation: spin 3s linear infinite;
    -ms-animation: spin 3s linear infinite;
        
	transform-origin:44px 44px;
   	-webkit-transform-origin:44px 44px;
	-moz-transform-origin:44px 44px;
	-o-transform-origin:44px 44px;
	-ms-transform-origin:44px 44px;
}

.middle-spinner-image {
	position: absolute;
	height: 89px;
	width: 89px;
	
	left: 0px;
	top: 0px;
}

.middle-spinner-image-IE {
	position: absolute;
	height: 105px;
	width: 105px;
	
	left: -10px;
	top: -10px;
	
}

/* Spinning animation */

@keyframes spin
{
        
        /* from {transform:rotate(0deg);}
        to {transform:rotate(359deg);} */
        from {transform:rotate(359deg);}
        to {transform:rotate(0deg);}
}

@-webkit-keyframes spin
{
        /* from {-webkit-transform:transform:rotate(0deg);}
        to {-webkit-transform:rotate(359deg);} */
        from {-webkit-transform:transform:rotate(359deg);}
        to {-webkit-transform:rotate(0deg);}
}

@-moz-keyframes spin
{
        /* from {-moz-transform:transform:rotate(0deg);}
        to {-moz-transform:rotate(359deg);} */
        from {-moz-transform:transform:rotate(359deg);}
        to {-moz-transform:rotate(0deg);}
}

@-o-keyframes spin
{
        /* from {-o-transform:transform:rotate(0deg);}
        to {-o-transform:rotate(359deg);} */
        from {-o-transform:transform:rotate(359deg);}
        to {-o-transform:rotate(0deg);}
}

@-ms-keyframes spin
{
        /* from {-ms-transform:transform:rotate(0deg);}
        to {-ms-transform:rotate(359deg);} */
        from {-ms-transform:transform:rotate(359deg);}
        to {-ms-transform:rotate(0deg);}
}


.form_container {
	height: 100px;
    padding-left: 461px;
    padding-top: 68px;
    position: relative;
    width: 280px;
}

.form_item_container {
	height: 50px;
}
.form_item_container  .userId {
	padding-top: 5px;
	width: 220px;
}
.form_item_container  .password{
	width: 190px;
}
.login-box {
	height: 15px;
	width:170px;
	border: 0px solid #09356b;
	padding: 0px 5px 5px 5px;
	padding-left:10px;
	font-family: "Arial", Helvetica, sans-serif;
	font-size: 15px;
	color: #4c96f1;
	margin-left: 0px;
	display: block;
	background-color: Transparent;
	outline: none;
	-webkit-appearance: none;
}
input[type="text"].login-box {
	background-color: Transparent !important;
	border: none;
}

.login-error-message{
	display: block;
    height: 10px;
    padding-top: 20px;
    position: relative;
    width: 100%;
}
.login-control-strip {
	text-align: center;
	padding-left: 50px;
}

.login-form-button{	
	height: 44px;
	display: inline-block;
	cursor: pointer;
	border: none;
	
}

/* .login-button{
	background: url('../img/login.png') no-repeat left top;
	width: 127px;
}

.login-button:hover{
	background-image: url('../img/loginHover.png');
} */

.free-trial-button{
	background: url('../img/trial.png') no-repeat left top;
	width: 150px;
	margin-left: 20px;
}

.free-trial-button:hover{
	background-image: url('../img/trialHover.png');
}

/* .register-button{
	background: url('../img/register.png') no-repeat left top;
	width: 126px;
}

.register-button:hover{
	background-image: url('../img/registerHover.png');
} */

/* .buy-button{
	background: url('../img/buy.png') no-repeat left top;
	width: 127px;
}

.buy-button:hover{
	background-image: url('../img/buyHover.png');
} */

.register-button{
	background: url('../img/register.png') no-repeat left top;
	width: 126px;
	margin-left: -7px;
}

.register-button:hover{
	background-image: url('../img/registerHover.png');
}

.enter-key-button{
	background: url('../img/enterKey.png') no-repeat left top;
	width: 150px;
	margin-left: -8px;
}

.enter-key-button:hover{
	background-image: url('../img/enterKeyHover.png');
}

.warning-text{
	width: 100%;
	position:absolute;
	top: 0px;
	color: red;
	text-align: center;
}

label.error {
    color: yellow;
    display: block;
    font-family: arial;
    font-size: 10px;
    line-height: 10px;
    padding-left: 4px;
    padding-top: 5px;
    text-decoration: none;
}


/*Browser in-compatibility*/
.browser-incompatible-message {
	background-color: #000;
	background-color: rgba(0,0,0,0.8);	
	display: none;
	color: #333;
	position: absolute;
	top: 200px;
	left: 200px;
	height: 150px;
	width: 100px;
	z-index: 30;
}
.text-message {
	color: #FFEA51;
    display: none;
    font-size: 25px;
    text-align: center;
	padding-top: 35px;
	line-height: 35px;
}
.text-message > a {
	color: #22F7F0;
	text-decoration: none;
	font-style: italic;
}
.small-message {
	font-size: 16px;
}

#userId:-webkit-autofill {
    background-color: Transparent !important;
}
#pass:-webkit-autofill {
    background-color: Transparent !important;
}

.login-button{
	text-align:left;
}

.loginbutton {
	height: 30px;
	display: inline-block;
	cursor: pointer;
	border: none;
	text-align:right;
	background: url('../img/login.png') no-repeat left top;
	width: 124px;
	margin-left:340px;
}

.loginbutton:hover{
	background-image: url('../img/loginHover.png');
}

.loginleftbutton {
	height: 30px;
	border: none;
	text-align:left;
	background: url('../img/leftLoginBtn.png') no-repeat left top;
	width: 124px;
	margin-left:80px;
}

.passwordlink {
	text-align:right;
	padding-right:113px;
	font-size:12px;
	color:#08366f;
	text-decoration: none;
}

.passwordlink:hover{
	cursor:pointer;
	color:yellow;
	text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
}

.login-control-btn
{
  text-align: center;
  font-size: 15px;
  font-family: "Arial", sans-serif;
  position: relative; 
  height:40px;
  background: #08366f;
  color: #FFF;
  overflow: hidden;
  transition: all 0.5s;
  border: none;
  padding: 0px 30px 0px 30px;
}

.login-control-btn:hover, .login-control-btn:active 
{
  text-decoration: none;
  color: #08366f;
  border-color: #0e6cee;
  background: transparent;
  cursor:pointer;
}

.try-now{
	left:5px;
	border: 1px solid #0e6cee;
	border-radius:15px 0px 0px 15px;
	border-color: #0e6cee transparent #0e6cee #0e6cee;
}
.register{
	border: 1px solid #0e6cee;
	border-color: #0e6cee #000 #0e6cee #000;
}
.enter-license{
	right:4px;
	border-radius:0px 15px 15px 0px;
	border: 1px solid #0e6cee;
	border-color: #0e6cee #0e6cee #0e6cee transparent;
}

.login-btn{
	background: #08366f;
	width: 90px;
  	height:30px;
	cursor: pointer;
	text-align:center;
	margin-left:340px;
	vertical-align: top;	
	overflow: hidden;
	display: inline-block;
}

.login-btn:after{
	border-top: 30px solid #08366f;
    border-right: 30px solid transparent;
    content: '';
    position: absolute;
}

.login-btn-text{
	font-family: "Arial", sans-serif;
	font-size: 15px;
	color: #FFF;
	border:none;
	background: transparent;
	vertical-align:sub;
	width: 90px;
  	height:30px;
  	text-align:center;
  	padding-bottom:5px;
}

.login-btn-text:hover{
	cursor:pointer;
	color: yellow;
	text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
}