body{
	background: #f5f5f5;
}

.left{
	float: left;
}

.right{
	float: right;
}

.center{
	margin: 0 auto;
}

.btn{
	background: #f5a300;
	color: #fff;
	padding: 11px;
	margin-left: 5px;
	border: none;
	cursor: pointer;
	margin-top: 5px \9;
	position: relative;

}


.btn{
	background: #f5a300;
	color: #fff;
	padding: 11px;
	margin-left: 5px;
	border: none;
	cursor: pointer;
}

.ie8 .btn{
	background: #f5a300;
	color: #fff;
	padding: 11px;
	margin-left: 5px;
	border: none;
	cursor: pointer;
	position: relative;
	top: 7px;

}

.btn:hover{
    color: #000;
    cursor: pointer;
}


body .hide{
	display: none;
}

.w-185{
 width: 185px !important;
 margin-top: -5px \9;
 margin-left: 5px \9;   
}

.w-250{
    width: 250px !important \9;
    margin-top: -5px \9;
}

.w-80{
    width: 90px !important;
    margin-top: 0px \9;
}

.clear{
    clear: both;
}


/* all */
::-webkit-input-placeholder { font-size: 10px !important; padding-top: 3px !important; padding-top: 5px \9 !important; }
::-moz-placeholder { font-size: 10px !important; } /* firefox 19+ */
:-ms-input-placeholder { font-size: 10px !important; } /* ie */
input:-moz-placeholder { font-size: 10px !important; }
selector:-ms-input-placeholder { font-size: 10px !important; }


.fakeInput{
    width: 185px;
    height: 33px;
    background-color: #fff;
    color: #ccc;
    border-radius: 3px;
    line-height: 34px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    margin-top: -5px \9;
}


.form-control.emailBlock {
    display: block;
    background-color: transparent;
    border: none;
    border-radius: none;
    box-shadow: none;
    outline: none;
    
}

.form-control.emailBlock.valFailed {
    border: 2px solid #c00;
}



/* ========= HEADER ========= */

.VivaMailHeader{
	width: 100%;
	height: 130px;
	background: #f8bf00;
	border-bottom: 1px solid #fff;
}

	.VivaMailHeaderContent{
		width: 902px;
		height: auto;
		position: relative;
	}
	
	.VivaMailLogo{
		margin: 20px 0 0 0;
	}
	
	.loginSection{
		position: absolute;
		top: 25px;
		left: 463px;
		width: 500px;
	}
	
		
		.loginHeader{
			width: 350px;
			padding: 0 0 5px 0;
			margin-bottom: 3px;
			display: block;
		}
		
		.loginHeader a{
			color: #000;
			font-size: 12px;
			text-decoration: none;
			cursor: pointer;
		}
		
		.loginHeader a:hover{
			color: #000;
			text-decoration: underline;
		}
		
		.loginText{
			font-size: 24px;
			font-weight: bold;
			margin-right: 5px;
		}
		
		.loginContact{
			height: 30px;
			width: 400px;
			margin-top: 10px;
		}
		
		.tel{
			background: url('../img/icons/phone.png') no-repeat left;
			height: 30px;
			font-size: 12px;
			font-weight: bold;
			padding:10px 0 10px 20px;
			margin: 10px 0 0 0;
		}
		
		.email{
			background: url('../img/icons/mail.png') no-repeat left;
			height: 30px;
			font-size: 12px;
			font-weight: bold;
			padding:10px 0 10px 35px;
			margin: 10px 0 0 10px;
		}
		
		.email a, .email a:hover{
			color: #000;
			text-decoration: none;
		}

	/* forgot password */
	.forgotPassword{
		position: absolute;
		top: 25px;
		left: 463px;
		width: 500px;
	}
	
	.passwordInput{
		width: 350px !important;
	}
	
	.sentPassword{
		padding: 10px 0;	
	}
	
	.sentPassword p{
		font-size: 14px;
	}
	
	.failedPassword{
	    font-size: 12px;
	}
	
	.failedPassword a, .failedPassword a:hover{
	    color: white;
	    text-decoration: underline;
	    cursor: pointer;
	}

.loginFail {
	margin-bottom:10px;
}

	.loginFail img {
		margin-right:10px;
	}

/* ========= /HEADER ========= */		


/* ========= SLIDER ========= */

.VivaMailSliderContainer{
	width: 100%;
	background: #f5f5f5;
}

.VivaMailSlider{
	width: 1280px;
	height: auto;
	position: relative;
	background: #f5f5f5;
}

.badge{
	position: absolute;
	top: 290px;
	left: 940px;
	z-index: 10;
}


	/* css for sliding images and text */
	.slider {
	  margin: 0;
	  width: 1280px; /* Update to your slider width */
	  height: 432px; /* Update to your slider height */
	  position: relative;
	  overflow: hidden;
	}
	
	.slider li {
	  display: none;
	  position: absolute; 
	  top: 0; 
	  left: 0; 
	}
	
	.slider .sliderText{
		position: absolute;
		top: 73px;
		left: 181px;
	}
	
	.slider .sliderText h1{
		font-family: 'Open Sans', sans-serif;
		font-weight: bold;
		font-size: 62px;
		color: #3e3d40;
		margin: 0;
		padding: 0;
	}
	
	.slider .sliderText p{
		font-family: 'Open Sans', sans-serif;
		font-size: 20px;
		color: #3e3d40;
		line-height: 30px;
		margin:10px 0 0 10px;
	}

.sliderBar{
width: 100%;
height: 41px;
background: #231f20;
border-top: 1px solid #fff;
	
}

	.sliderBarContent{
		width: 922px;	
	}

	/* css for content in bar */	
	.infoBlock{
		width: 230px;
		padding: 15px;
		text-align: center;
		color: #7b7979;
		cursor: pointer;
	}
	
	.infoBlock.activeBlock{
		background: #393637;
		color: #fff;
	}
		

/* ========= /SLIDER ========= */


/* ========= BODY ========= */

.VivaMailBody{
	width: 100%;
	background: #fff;
	border-bottom: 1px solid #e5e5e5;
	height: auto;
	padding: 25px 0;
}

	.bodyContent{
		width: 902px;
		height:auto;
	}
	
	.contentBlock{
		width: 300px;
		height: 164px;
		text-align: center;
		padding: 0 26px;
	}
	
		.contentBlock h1{
			font-family: 'Open Sans', sans-serif;
			font-weight: bold;
			font-size: 20px;
			color: #3e3d40;
		}
		
		.contentBlock p{
			font-family: 'Open Sans', sans-serif;
			font-size: 11px;
			color: #666;
			line-height: 15px;
		}
	
		.contentBlock.borderRight{
		background: url('../img/icons/Seperator-Bar.png') no-repeat right top;
		}
/* ========= /BODY ========= */


/* ========= FOOTER ========= */

.VivaMailFooter{
	width: 902px;
	height: auto;
	margin: 0 auto;
	color: #999999;
	padding: 50px 0;
	
}

	.VivaMailFooter p{
		font-size: 11px;
		font-family: 'Open Sans', sans-serif;
		text-align: center;
		line-height: 15px;
	}
	
	.VivaMailFooter a, .VivaMailFooter a:hover{
		color: #999999;
		text-decoration: underline;
		
	}
	
/* ========= /FOOTER ========= */	


/* ---- this is for the upgrade warning ---- */

.upgradeWarn{
    position: absolute;
    top: 20px;
    left: 440px;
    z-index: 20;
}