@font-face {
	 font-family: "RobotoLight";
	 src:  url(fonts/Roboto-Light.ttf) format("truetype");
	 font-weight: normal;
	 font-style: normal;
}

body, html {
  	height: 100%;
  	margin : 0;
  	font-family: RobotoLight;
}

#bottom {
	position : absolute;
	height : 130px;
	bottom : 0px;
	margin-bottom : 0px;
	background-color: #bfbfbf;
	width : 100%;
	text-align: center;
	margin:0 auto;
	
}

#bottomContent {
	width : 500px;
 	height : 39px;
 	position : relative;
 	margin: 0 auto;
 	font-size: 12px;
 	color : white;
}

#bottomLogo {
	width : 96px;
	height : 32px;
	margin-top : 52px;
	margin-right : 30px;
	background: url("img/logo.png");
    background-position: center;
    float : left;
	
}


#bottomCI {
	width : 38px;
	height : 38px;
	margin-left: 20px;
	margin-top : 50px;
	background: url("img/ikonaCI.png");
	float : left;
	opacity: 0.5;
    filter: alpha(opacity=50);

}

#bottomBA {
	width : 38px;
	height : 38px;
	margin-left: 20px;
	margin-top : 50px;
	background: url("img/ikonaBA.png");
    float : left;
	opacity: 0.5;
    filter: alpha(opacity=50);
}

#bottomEI {
	width : 38px;
	height : 38px;
	margin-left: 20px;
	margin-top : 50px;
	background: url("img/ikonaEI.png");
    float : left;
	opacity: 0.5;
    filter: alpha(opacity=50);
}

#bottomM {
	width : 38px;
	height : 38px;
	margin-left: 20px;
	margin-top : 50px;
	background: url("img/ikonaM.png");
    float : left;
	opacity: 0.5;
    filter: alpha(opacity=50);
}

#bottomRM {
	width : 38px;
	height : 38px;
	margin-left: 20px;
	margin-top : 50px;
	background: url("img/ikonaRM.png");
  	float : left;
	opacity: 0.5;
    filter: alpha(opacity=50);
}

#bottomPP {
	width : 38px;
	height : 38px;
	margin-left: 20px;
	margin-top : 50px;
	background: url("img/ikonaPP.png");
  	float : left;
	opacity: 0.5;
    filter: alpha(opacity=50);
}




#top {
	position : relative;
	width : 100%;
	height : 100%;
}


#maxMonitor {
	position : absolute;
	width : 322px;
	height : 54px;
	top:50%; 
	left : 50%;
	margin-left:-161px;
	margin-top:-250px;
	background: url("img/MaxMonitorLogo.png");
}

#loginBlockOuter {
	position : absolute;
	border-radius : 20px;
	width : 360px;
	height : 280px;
	top:50%; 
	left : 50%;
	margin-left:-180px;
	margin-top:-180px;
	z-index : 2;
	background-color: #bfbfbf; 
	
	
	
}

.psswdInput {
	width : 100%;
	font-size: 14px;
	border : 1px solid #a8a8a9;	
	line-height: 28px;
}

#forgotenLabel {
	padding : 5% 5% 5% 5%;
}

table  {
	padding-top: 15px;
}

.psswdInputNext {
	margin-left : 5%;
	width : 180px;
	font-size: 14px;
	border : 1px solid #a8a8a9;	
	line-height: 28px;
}

.inputFields {
	margin-left : 5%;
	width : 90%;	
}

#lostpsswd {
	margin-right : 5%;
	color : #425496;
	text-align: right;
}


a:link {
    color: #425496;
    font-style: normal;
    text-decoration: none;
}

/* visited link */
a:visited {
    color: #425496;
    font-style: normal;
    text-decoration: none;
}

/* mouse over link */
a:hover {
    color: #425496;
    font-style: normal;
    text-decoration: none;
}

/* selected link */
a:active {
    color: #425496;
    font-style: normal;
    text-decoration: none;
}

#submitButton {
	margin-top : 20px;
	text-align: center;
}

.loginButton {
    background-color: #425496;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius:4px;
    color: #fff;
    font-size: 14px;
    line-height : 20px;
    text-decoration: none;
    cursor: pointer;
    border:none;
    width : 150px;
    height: 30px;
}


.loginButtonSmall {
    background-color: #425496;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius:4px;
    color: #fff;
    font-size: 14px;
    line-height : 25px;
    text-decoration: none;
    cursor: pointer;
    border:none;
    width : 120px;
    height: 30px;
}

/* ************* ToolTip ***************** */

.bottomToolTipText {
	z-index: 100;
	width : 330px;
	height : 230px;
	position: absolute;
}

#bottomToolTipCI {
	width : 350px;
	height : 250px;
    -webkit-perspective: 50px; /* Chrome, Safari, Opera  */
    -ms-perspective: 50px;
    perspective: 50px;
	padding : 10px 10px 10px 10px;
	border-radius : 20px;
	z-index : 100;
	position: absolute;

    bottom : 50px;
    left : -25px;
	background-color: #ac5f49;
	text-align: left;
	display: none;
}

#bottomToolTipBA {
	width : 350px;
	height : 250px;
	padding : 10px 10px 10px 10px;
	border-radius : 20px;
	z-index : 10;
	position: absolute;
    -webkit-perspective: 50px; /* Chrome, Safari, Opera  */
    -ms-perspective: 50px;
    perspective: 50px;
    bottom : 50px;
    left : 33px;
	background-color: #38638a;
	text-align: left;
	display: none;
}

#bottomToolTipEI {
	width : 350px;
	height : 250px;
	padding : 10px 10px 10px 10px;
	border-radius : 20px;
	z-index : 10;
	position: absolute;
    -webkit-perspective: 50px; /* Chrome, Safari, Opera  */
    -ms-perspective: 50px;
    perspective: 50px;
    bottom : 50px;
    left : 91px;
	background-color: #573a65;
	text-align: left;
	display: none;
}

#bottomToolTipM {
	width : 350px;
	height : 250px;
	padding : 10px 10px 10px 10px;
	border-radius : 20px;
	z-index : 10;
	position: absolute;
    -webkit-perspective: 50px; /* Chrome, Safari, Opera  */
    -ms-perspective: 50px;
    perspective: 50px;
    bottom : 50px;
    left : 149px;
	background-color: #54774a;
	text-align: left;
	display: none;
}

#bottomToolTipRM {
	width : 350px;
	height : 250px;
	padding : 10px 10px 10px 10px;
	border-radius : 20px;
	z-index : 10;
	position: absolute;
    -webkit-perspective: 50px; /* Chrome, Safari, Opera  */
    -ms-perspective: 50px;
    perspective: 50px;
    bottom : 50px;
    left : 207px;
	background-color: #9a4245;
	text-align: left;
	display: none;
}

#bottomToolTipPP {
	width : 350px;
	height : 250px;
	padding : 10px 10px 10px 10px;
	border-radius : 20px;
	z-index : 10;
	position: absolute;
    -webkit-perspective: 50px; /* Chrome, Safari, Opera  */
    -ms-perspective: 50px;
    perspective: 50px;
    bottom : 50px;
    left : 265px;
	background-color: #0b0405;
	text-align: left;
	display: none;
}


.arrowCI:after {
	background: #ac5f49;
}

.arrowBA:after {
	background: #38638a;
}

.arrowEI:after {
	background: #573a65;
}

.arrowM:after {
	background: #54774a;
}

.arrowRM:after {
	background: #9a4245;
}

.arrowPP:after {
	background: #0b0405;
}



.arrow:after {
	
	
}

.arrow {
	width: 100px;
	height: 70px;
	overflow: hidden;
	position: absolute;
	left: 50%;
	margin-left: -35px;
	bottom: -35px;
	z-index : 1;
	-webkit-transform: rotateX(60deg);
	-ms-transform: rotateX(60deg);
	transform: rotateX(60deg);

}

.arrow.top {
	top: -16px;
	bottom: auto;
}

.arrow.left {
	left: 20%;
}

.arrow:after {
	content: "";
	position: absolute;
	left: 20px;
	top: -20px;
	width: 40px;
	height: 70px;
	-webkit-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	transform: rotate(30deg);

}

.arrow.top:after {
	bottom: -20px;
	top: auto;
}

#errorBlock {
	color : red;
	text-align: center;
	
}