/* ==========================================================================
Author's custom styles
========================================================================== */
* {
    padding:0px;
    margin:0px;
    }
body {
    width:100%;
    height:100%;
    background:#30302D;
    margin:0px;
    padding:0px;
}

#content {
    position:absolute;
    width:1280px;
    height:800px;
}

.text-main, .dia_mes_ano, .figura, .canvas {
    position:absolute;
    left:0px;
    top:0px;
    color:white;
}

.canvas {
}
.text-main {
    left:30px;
    top: 110px;
    font-size:38px;
    color:#dde0bb;
    font-family: 'Roboto', sans-serif;
    position:absolute;
    width: 508px;
}

.gregoriano_titulo {
	position:absolute;
	top: 512px;
	left: 53px;
	color:white;
	font-family: 'Roboto', sans-serif;
	font-size:16px;
	color:#dde0bb;
	width: 196px;
}

.blue-box {
    background:url(../img/blue.png) no-repeat;
    position:absolute;
    left:44px;
}

.maya {
    top: 345px;
    width: 261px;
    height: 44px;

}

.gregoriano {
    top:445px;
    width: 261px;
    height: 44px;

}


.dia_mes_ano {
	font-family: 'Ubuntu', sans-serif;
	left:52px;
	top:795px;
	font-size:22px;
	color: #dde0bb;
}

.dia_mes_ano span {
	width:63px;
	display:block;
	float:left;
}

#canvas {
    vertical-align: top;
    position: absolute;
    top: 0px;
}

#content {
    position:relative;
}

#container_bar {
    position:absolute;
    width: 111px;
    height:800px;
    left: 1059px;
    top:0px;
    background:url(../img/blur.png) bottom repeat-x;
}


.cuenta_larga, .texto_gregoriano {
	position:absolute;
	top: 295px;
	left: 53px;
	color:white;
	font-family: 'Roboto', sans-serif;
	font-size:16px;
	color:#dde0bb;
	width: 300px;
}

.texto_gregoriano {
    top:690px;
}


.inputsCuentaLarga {
    position:absolute;
    /*top:250px;
    left:58px;*/
    z-index:100;
    width:400px;
    height:39px;

top:640px;
	left:57px;

}
.inputsCuentaLarga div {
	float:left;
	display:table-cell;
}

.inputsCuentaLarga input {
	height: 38px !important;;
        appearance: none;
	box-shadow: none !important;
	 border-radius:none;
	 outline:none;
	
	
	width: 90px !important;;
	color: white;
	text-align: center !important;;
	border: 0px !important;;
	float:left;
	font-size:36px;
	line-height:36px;
	padding:0px;
	margin:0px;

moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
	  
	-webkit-appearance: none !important;;
	

	
}

.inputsCuentaLarga input:first-child, .inputsCuentaLarga input:last-child {
	width: 60px !important;;
	
}


.inputsGregoriano {
	position:absolute;
	/*top:640px;
	left:57px;*/
	z-index:100;
	width:248px;
	height: 35px;

	top:250px;
    left:58px;
	
}




 input {
	background:none;
	height: 35px;
	width: 90px;
	color: white;
	text-align: center;
	border: 0px;
	float:left;
	font-size: 35px;

	padding:0px;
	margin:0px;

moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
	  
	-webkit-appearance: none !important;;
	line-height:35px;
}

.inputsGregoriano input {

	width:63px;
}

.inputsGregoriano input:last-child {
    width:100px;
}

.ayuda {
    position:absolute;
    top:750px;
    left:50px;
    width:25px;
    height:25px;
    background:url(../img/info_off.png);
    z-index:20;
}

#help_image {
    display:none;
    position:absolute;
    top:0px;
    left:0px;
    width:1280px;
    height:800px;
    z-index:100;
}