@font-face {
    font-family: 'biko';
    src: url('biko.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
::-webkit-scrollbar {
      width:7px;
      height:7px;
}
:-webkit-scrollbar-track {
      background-color: darkgrey;
} 
::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.6);
      border-radius:40px;
      box-shadow:inset 0 0 2px black;
} 
::-webkit-scrollbar-button {
      background-color: grey;
      width:7px;Guada
      height:7px;
      border-radius:2px;
}
::-webkit-scrollbar-corner {
      background-color: grey;
}
body{
	background:#12314E url(../imagenes/fondo.jpg) ;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: top;
	overflow:hidden;
	font-family: biko;
}

#login{
	background-color: ghostwhite;
	padding: 50px;
	padding-top: 20px;
	padding-bottom:30px;
	box-shadow:0 0 10px #12314E;
	border-radius:3px;
	width: 400px;
	display: none;
}
.loout{
	position:absolute;
	top:5px;
	right: 70px;
	z-index: 5;
}

#menu{
	position: relative;
	top:-4px;
	left: -4px;
	width: 100%;
	height: 100%;
	overflow: auto;
	
}
#principal{
	position: relative;
	top:-4px;
	left: -8px;
	width: 100%;
	height: 100%;
	background-color: white;
	padding-right:40px;
	overflow: hidden; 
}
.tab{
	text-align: center;
	padding-bottom: 10px;
	padding-top: 10px;
	background-color: ghostwhite;
	border:none;
	margin: 0;
	border:1px solid rgba(0,0,0,0.2);
	font-family: biko;
	font-size: 11pt;
}
.tab:hover{
	background: -webkit-linear-gradient(top, #000000 0%,#12314E 100%);
	color: white;
	cursor: pointer;
}
.botonMenu{
	text-align: center;
	padding-bottom: 20px;
	padding-top: 20px;
	background-color: ghostwhite;
	border:none;
	width: 100%;
	margin: 0;
	border-top:1px solid rgba(0,0,0,0.2);
	border-right:1px solid rgba(0,0,0,0.2);
	font-family: biko;
	font-size: 11pt;
	min-width: 250px;
}
.botonMenu:hover{
	background: -webkit-linear-gradient(top, #000000 0%,#12314E 100%);
	color: white;
	cursor: pointer;
}
.botonMenu:focus{
	background: -webkit-linear-gradient(top, #000000 0%,#12314E 100%);
	color: white;
	cursor: pointer;
	border:none;
}
.subBoton{
	text-align: center;
	padding-bottom: 10px;
	padding-top: 10px;
	background-color: ghostwhite;
	border:none;
	width: 80%;
	margin: 0;
	border-top:1px solid rgba(0,0,0,0.2);
	border-right:1px solid rgba(0,0,0,0.2);
	font-family: biko;
	font-size: 11pt;
	min-width: 100px;
}
.subBoton:hover{
	background: -webkit-linear-gradient(top, #000000 0%,#12314E 100%);
	color: white;
	cursor: pointer;
}
.subBoton:focus{
	background: -webkit-linear-gradient(top, #000000 0%,#12314E 100%);
	color: white;
	cursor: pointer;
	border:none;
}
.seleccionado{
	background: -webkit-linear-gradient(top, #000000 0%,#12314E 100%);
	color: white;
	cursor: pointer;
}


.submenu{
	display:none; text-align:right
}
.tooltip{
	background: rgba(0,0,0,0.6); 
	padding:4px;
	border-radius:4px 0 4px 4px;
	#box-shadow:0 0 3px black;
	color:white;
	#text-shadow:0 0 2px black;
	font-size: 11pt;
	text-align:center;
	z-index:99999;
	border:none;
	padding-left: 8px;
	padding-right: 8px;
}
.tooltip:after{
	content: "";
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 15px solid rgba(0,0,0,0.6);
	position:absolute;
	top:-15px;
	left:15px;
}
.fondoBlanco{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:400;	
	display:none;
	background-image:url(../imagenes/diagonales.png);
	overflow:auto;
}
.ayuda{
	display:none;text-align:center;width:100%;height:100%;overflow:auto;background:rgba(255,255,255,0.8);
}

.gtk{
	position: absolute;
	bottom:20px;
	right: 15px;
	background: -webkit-linear-gradient(top, #12314E 0%,#12314E 100%);
	width: 350px;
	height: 100px;
	padding: 15px;
	overflow-x: auto;
	border:2px solid white;
	border-radius: 20px;
	color: white;
	text-shadow: 0 0 5px black;
	box-shadow: 0 0 10px black;
	display: none;
	z-index: 500;
}

.guardar{
	background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
	color: white;
	cursor: pointer;
}
.buscar{
	background:-webkit-linear-gradient(top, #12314E 0%,#12314E 100%);
	cursor: pointer; 
	border-left:1px solid rgba(0,0,0,0.2);
	border-bottom:1px solid rgba(0,0,0,0.2);
}

form td{
	padding: 5px;
}

select{
	padding:4px;
	border:2px solid grey;
	background-color: ghostwhite;
	border-radius:4px;
}
textarea{
	padding:4px;
	border:2px solid grey;
	background-color: ghostwhite;
	border-radius:4px;
}
.tabCont{
	position: relative;
}
.windows8 {
position: relative;
width: 90px;
height:90px;
}

.windows8 .wBall {
position: absolute;
width: 86px;
height: 86px;
opacity: 0;
-webkit-transform: rotate(225deg);
-webkit-animation: orbit 7.15s infinite;
}

.windows8 .wBall .wInnerBall{
position: absolute;
width: 11px;
height: 11px;
background: #000000;
left:0px;
top:0px;
-webkit-border-radius: 11px;
}

.windows8 #wBall_1 {
-webkit-animation-delay: 1.56s;
}

.windows8 #wBall_2 {
-webkit-animation-delay: 0.31s;
}

.windows8 #wBall_3 {
-webkit-animation-delay: 0.62s;
}

.windows8 #wBall_4 {
-webkit-animation-delay: 0.94s;
}

.windows8 #wBall_5 {
-webkit-animation-delay: 1.25s;
}

@-webkit-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-webkit-transform: rotate(180deg);
-webkit-animation-timing-function: ease-out;
}

7% {
opacity: 1;
-webkit-transform: rotate(300deg);
-webkit-animation-timing-function: linear;
-webkit-origin:0%;
}

30% {
opacity: 1;
-webkit-transform:rotate(410deg);
-webkit-animation-timing-function: ease-in-out;
-webkit-origin:7%;
}

39% {
opacity: 1;
-webkit-transform: rotate(645deg);
-webkit-animation-timing-function: linear;
-webkit-origin:30%;
}

70% {
opacity: 1;
-webkit-transform: rotate(770deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:39%;
}

75% {
opacity: 1;
-webkit-transform: rotate(900deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:70%;
}

76% {
opacity: 0;
-webkit-transform:rotate(900deg);
}

100% {
opacity: 0;
-webkit-transform: rotate(900deg);
}

}