/* CSS Document */
@font-face {font-family: 'Lato'; src: url(../fonts/Lato-Regular.ttf) format('truetype');}
body {background-color:#202020; font-family: 'Lato', Fallback, sans-serif;}
.hidden {display : none}

.wrapperwelc {position:relative; margin:auto; width:1200px; height:600px; background:url(../img/bgd-welc.png) top center no-repeat; color:#FFFFFF; text-align:center}
	.wrapperwelc .wrappercenter {width:400px; margin:auto;}
	.wrapperwelc .wrappercenter .hour {font-size:90px; margin:80px 0 40px 0;}
	.wrapperwelc .wrappercenter .msg {font-size:28px;}
		.wrapperwelc .wrappercenter .msg p {margin-bottom:10px;}
.tclogo {margin:auto; margin-top:40px; z-index:9999; width: 420px!important; height: 60px!important;}
.pw {width:100%; min-height:30px; max-height:100%; background-color:#495F84; text-align:center; padding:10px 0 0 0;}
	.pw p {color:#FFF; font-size:16px;}
	
body.log {background-color:#495F84;}
.wrapperlog {margin:auto; width:1200px; height:800px; background:url(../img/bgd-log.jpg) top center no-repeat; position:relative;}

	.wrapperlog img.logo {position:absolute; top:40px; left:405px; width: 420px!important; height: 60px!important;}
	.wrapperlog .wrapper-clock {width:374px; height:373px; background:url(../img/bgd-clock.png) no-repeat; position:absolute; top:140px; left:412px;}
		.wrapperlog .clock {width:240px; height:140px; color:#6980A5; text-align:center; position:relative; top:55px; left:67px;}
			.wrapperlog .clock .hour {font-size:40px; margin:40px 0 5px 0;}
			.wrapperlog .clock .date {font-size:18px;}
		.wrapperlog .kbtext {position:absolute; top:360px; left:461px; width:275px; height:22px; font-size:16px; padding-top:3px; color:#ffffff; text-align:center;}
		.wrapperlog .kbEmployee {position:absolute; top:320px; left:70px; width:275px; height:22px; font-size:16px; padding-top:3px; color:#ffffff; text-align:center;}
		.wrapperlog .keyboard {position:absolute; top:395px; left:225px; width:700px; height:235px; background:url(../img/keyboard.png) #EDEFF3 no-repeat center; padding:20px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;}
	
.wrapperloggedbgd {background:url(../img/bgd-logged.png) no-repeat; width:1015px; height:370px; position:absolute; top:220px; left:90px;}
	.wrapperloggedbgd .wrapperlogged {position:relative;}
		.wrapperloggedbgd .wrapperlogged .btnend, .wrapperloggedbgd .wrapperlogged .btnstart {position:absolute; top:13px;  background-color:#D93333; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; width:71px; padding:12px 10px; color:#FFFFFF; font-weight:bold; text-align:center; font-size:18px; cursor:pointer;}			
			.wrapperloggedbgd .wrapperlogged .btnstart {left:122px; background-color:#48BD8B;}
				.wrapperloggedbgd .wrapperlogged .btnstart:hover {background-color:#40B081;}
			.wrapperloggedbgd .wrapperlogged .btnend {left:804px; background-color:#DC4343;}	
				.wrapperloggedbgd .wrapperlogged .btnend:hover {background-color:#D82E2E;}
		.wrapperloggedbgd .wrapperlogged .btnright {position:absolute;}
		.wrapperloggedbgd .wrapperlogged .annbox {position:absolute; top:130px; left:5px; width:160px; height:120px; color:#D2D8E5; font-size:18px; border:1px dotted #495F84; padding:30px; border-radius: 80px 10px 80px 10px; -moz-border-radius: 80px 10px 80px 10px; -webkit-border-radius: 80px 10px 80px 10px;}
		.wrapperloggedbgd .wrapperlogged .rightbox {position:absolute; top:130px; left:790px; width:220px; height:auto; color:#D2D8E5; font-size:18px; background-color:#657896; border-radius: 10px 80px 10px 80px; -moz-border-radius: 10px 80px 10px 80px; -webkit-border-radius: 10px 80px 10px 80px;}		
			.wrapperloggedbgd .wrapperlogged .rightbox p {color:#D2D9E6; font-size:16px; padding-left:5px; margin-top:-20px;}
			.wrapperloggedbgd .wrapperlogged .rightbox ul {margin:30px 0 40px 0; padding:0 0 0 30px;}
				.wrapperloggedbgd .wrapperlogged .rightbox ul li {color:#D9DFEA; font-size:16px; list-style-type:disc; padding:10px 0 10px 5px; border-bottom:1px solid #909DB1; width:160px; cursor:pointer;}				
				.wrapperloggedbgd .wrapperlogged .rightbox ul li:hover {color:#fff; text-decoration:underline;}
		.wrapperloggedbgd .wrapperlogged .btnbot {position:absolute; top:330px; left:100px; width:800px; height:40px;text-align:center; padding-left:110px;}
			.wrapperloggedbgd .wrapperlogged .btn {min-width:70px; padding:10px 10px; margin-right:10px; background-color:#657797; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; font-size:18px; font-weight:bold; float:left; color:#EEEEEE; cursor:pointer;}	
				.wrapperloggedbgd .wrapperlogged .btn:hover {background-color:#586885;}