body{
    overflow: visible;
    width: 100%;
    height: auto;
}

/* ================================
   ZONA BOTONES
   ================================ */
#zona_bots {
    position: fixed;
    top: 0;
    left: 0;

    display: block;
    overflow: hidden;

    width: 100%;
    height: 100px;
    
    
    font-family: lato, sans-serif;
}

#zona_sup,#zona_inf{
    display: table;
    width: 1024px;
    height: 50px;
    overflow: hidden;
    margin:0px auto;
    vertical-align: middle;
    text-align: center;
}

#zona_sup > div{
    display: block;
    float: left;
    width: 33.2%;
    height: 50px;
    margin: 0px;
    text-align: center;
}

#zona_sup #titulo h1{
    font-size: 35px;
    line-height: 45px;
    padding: 0px;
    margin: 0px;
    color: #567283; 
}


#zona_inf > div{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

/* Aspecto Bots */
.bot{
    background:  rgb(253, 253, 253); 
    border:1px solid rgb(222, 229, 233); 
    display: inline-block; 
    padding: 6px 6px 6px 10px;
	margin:5px 0px;
    
	/* ROUNDED CORNERS */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;

	/* SHADOWS */
	-webkit-box-shadow:inset 0px 0px 5px 0px rgb(232, 237, 240);
	-moz-box-shadow:inset 0px 0px 5px 0px rgb(232, 237, 240);
	-ms-box-shadow:inset 0px 0px 5px 0px rgb(232, 237, 240);
	-o-box-shadow:inset 0px 0px 5px 0px rgb(232, 237, 240);
	box-shadow:inset 0px 0px 5px 0px rgb(232, 237, 240);

}

.bot a{
   margin:0 -3px 0;
    float:left;

	/* ROUNDED CORNERS */
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-ms-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;
}

.bot a:first-of-type {

	/* ROUNDED CORNERS */
	-webkit-border-radius: 5px 0px 0px 5px;
	-moz-border-radius: 5px 0px 0px 5px;
	-ms-border-radius: 5px 0px 0px 5px;
	-o-border-radius: 5px 0px 0px 5px;
	border-radius: 5px 0px 0px 5px;
}

.bot a:last-of-type { 
    margin:0;

	/* ROUNDED CORNERS */
	-webkit-border-radius: 0px 5px 5px 0px;
	-moz-border-radius: 0px 5px 5px 0px;
	-ms-border-radius: 0px 5px 5px 0px;
	-o-border-radius: 0px 5px 5px 0px;
	border-radius: 0px 5px 5px 0px;

}


/* Colores bots */
.bot a { 
    background: #d3dde3; 
    border: 1px solid #bfcdd5; 
    color: #567283; 
    display:block; 
    font-size: 12px; 
    padding: 4px 4px 4px;
    text-decoration: none; 
    text-align: center; 
    text-shadow: 0px 1px 0px #D3DDE3;
    text-transform:uppercase; 
    width: 88px;
	
	/* GRADIENT */
	background-image: -webkit-gradient(linear, left top, left bottom, from(#d3dde3 0%), to(#d3dde3 50%));
	background-image: -webkit-linear-gradient(top, #d3dde3 0%, #fdfdfd 50%, #fdfdfd 50%, #d3dde3 100%);
	background-image: -moz-linear-gradient(top, #d3dde3 0%, #fdfdfd 50%, #fdfdfd 50%, #d3dde3 100%);
	background-image: -ms-linear-gradient(top, #d3dde3 0%, #fdfdfd 50%, #fdfdfd 50%, #d3dde3 100%);
	background-image: -o-linear-gradient(top, #d3dde3 0%, #fdfdfd 50%, #fdfdfd 50%, #d3dde3 100%);
	background-image: linear-gradient(top, #d3dde3 0%, #fdfdfd 50%, #fdfdfd 50%, #d3dde3 100%);
	
	/* SHADOWS */
	-webkit-box-shadow:inset 0px 1px 0px 0px #e8edf0, inset 0px -1px 0px 0px #bfcdd5;
	-moz-box-shadow:inset 0px 1px 0px 0px #e8edf0, inset 0px -1px 0px 0px #bfcdd5;
	-ms-box-shadow:inset 0px 1px 0px 0px #e8edf0, inset 0px -1px 0px 0px #bfcdd5;
	-o-box-shadow:inset 0px 1px 0px 0px #e8edf0, inset 0px -1px 0px 0px #bfcdd5;
	box-shadow:inset 0px 1px 0px 0px #e8edf0, inset 0px -1px 0px 0px #bfcdd5; 
}

.bot a:hover { 
    background-color: #bfcdd5; 
    color:#567283; 
    cursor: pointer; 
    text-shadow: 0 1px 0px #d3dde3;

	/* GRADIENT */
	background-image: -webkit-gradient(linear, left top, left bottom, from(#bfcdd5 0%), to(#bfcdd5 50%));
	background-image: -webkit-linear-gradient(top, #bfcdd5 0%, #f2f5f7 50%, #f2f5f7 50%, #bfcdd5 100%);
	background-image: -moz-linear-gradient(top, #bfcdd5 0%, #f2f5f7 50%, #f2f5f7 50%, #bfcdd5 100%);
	background-image: -ms-linear-gradient(top, #bfcdd5 0%, #f2f5f7 50%, #f2f5f7 50%, #bfcdd5 100%);
	background-image: -o-linear-gradient(top, #bfcdd5 0%, #f2f5f7 50%, #f2f5f7 50%, #bfcdd5 100%);
	background-image: linear-gradient(top, #bfcdd5 0%, #f2f5f7 50%, #f2f5f7 50%, #bfcdd5 100%);

	/* SHADOWS */
	-webkit-box-shadow:inset 0px 1px 0px 0px #dee5e9, inset 0px -1px 0px 0px #b5c5ce;
	-moz-box-shadow:inset 0px 1px 0px 0px #dee5e9, inset 0px -1px 0px 0px #b5c5ce;
	-ms-box-shadow:inset 0px 1px 0px 0px #dee5e9, inset 0px -1px 0px 0px #b5c5ce;
	-o-box-shadow:inset 0px 1px 0px 0px #dee5e9, inset 0px -1px 0px 0px #b5c5ce;
	box-shadow:inset 0px 1px 0px 0px #dee5e9, inset 0px -1px 0px 0px #b5c5ce; 
}

.bot a:active { 
    color:#567283; 
    text-shadow: 0 1px 0px #d3dde3;

	/* GRADIENT */
	background-image: -webkit-gradient(linear, left top, left bottom, from(#b5c5ce 0%), to(#b5c5ce 50%));
	background-image: -webkit-linear-gradient(top, #b5c5ce 0%, #a0b5c1 50%, #a0b5c1 50%, #b5c5ce 100%);
	background-image: -moz-linear-gradient(top, #b5c5ce 0%, #a0b5c1 50%, #a0b5c1 50%, #b5c5ce 100%);
	background-image: -ms-linear-gradient(top, #b5c5ce 0%, #a0b5c1 50%, #a0b5c1 50%, #b5c5ce 100%);
	background-image: -o-linear-gradient(top, #b5c5ce 0%, #a0b5c1 50%, #a0b5c1 50%, #b5c5ce 100%);
	background-image: linear-gradient(top, #b5c5ce 0%, #a0b5c1 50%, #a0b5c1 50%, #b5c5ce 100%);

	/* SHADOWS */
	-webkit-box-shadow: inset 0 0 15px 0 #567283, inset 0px -1px 0px 0px #dee5e9, inset 0px 1px 3px 0px #567283, 0 1px 0 #fdfdfd;
	-moz-box-shadow: inset 0 0 15px 0 #567283, inset 0px -1px 0px 0px #dee5e9, inset 0px 1px 3px 0px #567283, 0 1px 0 #fdfdfd;
	-ms-box-shadow: inset 0 0 15px 0 #567283, inset 0px -1px 0px 0px #dee5e9, inset 0px 1px 3px 0px #567283, 0 1px 0 #fdfdfd;
	-o-box-shadow: inset 0 0 15px 0 #567283, inset 0px -1px 0px 0px #dee5e9, inset 0px 1px 3px 0px #567283, 0 1px 0 #fdfdfd;
	box-shadow: inset 0 0 15px 0 #567283, inset 0px -1px 0px 0px #dee5e9, inset 0px 1px 3px 0px #567283, 0 1px 0 #fdfdfd;

}


/* Especificaciones botones */
#zona_inf .bot{
    padding: 4px 4px 4px 8px;
}

#zona_inf .bot a{
    font-size: 12px;
    padding: 2px 12px;
    width: auto;    
}

.bot a#rojo{
    color:#f14923;
}

.bot a#azul{
    color:#0084ca;
}

.bot a#verde{
    color:#92d729;
}

.bot a#amarillo{
    color:#faca30;
}

#coche .bot{
    padding: 4px;
    border: 1px solid rgb(255, 204, 204);
    background-color: rgb(255, 238, 238);
    box-shadow: 0px 0px 5px 0px #FFEEEE inset;
}

#coche .bot a{
    font-size: 14px;
    color:#880000;
    background-color: #FF9999;
    text-shadow: 0px 1px 0px #FFCCCC;
    
    /* SHADOWS */
    -webkit-box-shadow: 0px 1px 0px 0px #FFCCCC inset, 0px -1px 0px 0px #FF9999 inset;
	-moz-box-shadow: 0px 1px 0px 0px #FFCCCC inset, 0px -1px 0px 0px #FF9999 inset;
	-ms-box-shadow: 0px 1px 0px 0px #FFCCCC inset, 0px -1px 0px 0px #FF9999 inset;
	-o-box-shadow: 0px 1px 0px 0px #FFCCCC inset, 0px -1px 0px 0px #FF9999 inset;
    box-shadow: 0px 1px 0px 0px #FFCCCC inset, 0px -1px 0px 0px #FF9999 inset;
    border: 1px solid #FF9999;
    
    /* ROUNDED CORNERS */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
}


#coche .bot a:hover, 
#coche .bot a:active{ 
    background-color: #FF7777; 
    cursor: pointer; 

	/* GRADIENT */
	background-image: -webkit-gradient(center top , #FF7777 0%, #FFDDDD 50%, #FFDDDD 50%, #FF7777 100%);
	background-image: -webkit-linear-gradient(top, #FF7777 0%, #FFDDDD 50%, #FFDDDD 50%, #FF7777 100%);
	background-image: -moz-linear-gradient(top, #FF7777 0%, #FFDDDD 50%, #FFDDDD 50%, #FF7777 100%);
	background-image: -ms-linear-gradient(top, #FF7777 0%, #FFDDDD 50%, #FFDDDD 50%, #FF7777 100%);
	background-image: -o-linear-gradient(top, #FF7777 0%, #FFDDDD 50%, #FFDDDD 50%, #FF7777 100%);
	background-image: linear-gradient(top, #FF7777 0%, #FFDDDD 50%, #FFDDDD 50%, #FF7777 100%);

	/* SHADOWS */
	-webkit-box-shadow:inset 0px 1px 0px 0px #FFDDDD, inset 0px -1px 0px 0px #FF7777;
	-moz-box-shadow:inset 0px 1px 0px 0px #FFDDDD, inset 0px -1px 0px 0px #FF7777;
	-ms-box-shadow:inset 0px 1px 0px 0px #FFDDDD, inset 0px -1px 0px 0px #FF7777;
	-o-box-shadow:inset 0px 1px 0px 0px #FFDDDD, inset 0px -1px 0px 0px #FF7777;
	box-shadow:inset 0px 1px 0px 0px #FFDDDD, inset 0px -1px 0px 0px #FF7777; 
}



/* ================================
   ZONA TABLA
   ================================ */
#zona_tab{
    display: block;
    position: relative;
    width: auto;
    height: auto;
    margin-top: 100px;
    font-family: lato, sans-serif;
    font-size: 9;
}

#hora {
    font-size: 35px;

    width: 200px;
    margin: 10px 10px 20px 0;

    text-align: left;
}

#tabla {
    display: table;

    width: auto;
    table-layout: fixed;
    border-collapse: collapse;
}

#cabecera {
    display: table-header-group;
}

/*****++++++++****/

.coches {
   position: fixed;
   left: 0px;
}

.coches > div {
   font-size: 16px;
   font-weight: 600;
   line-height: 25px;

   display: block;

   width: 124px;
   height: 29.05px;
   padding-left: 5px;

   border-collapse: collapse;

   vertical-align: middle;

   border: 01px solid #567283;
   background-color: #FFFFFF;
   box-shadow: 0 0 2px 0 rgba(86, 114, 131, 0.4) inset;
}

#tabla {
   margin-left: 123px;
}

.coches > div:nth-child(3n+2) {
   border-bottom-width: 2px;
}



/**** ------ ****/



.fila {
    display: table-row;
}

/****
.fila > div:first-of-type {
    font-weight: bold;

    display: table-cell;

    padding: 2px 0;

    text-align: center;

    border: 1px solid #567283;
    box-shadow: 0 0 2px 0 rgba(86, 114, 131, 0.4) inset;
}
***/

#cabecera div, .celda {
    display: table-cell;

    height: 30px;

    text-align: center;
    vertical-align: middle;
    padding: 0px 2px;
    border: 1px solid #567283;
    box-shadow: 0 0 2px 0 rgba(86, 114, 131, 0.4) inset;
}

#cabecera div,
.fila:nth-child(3n+1) .celda,
.fila:nth-child(3n+1) > div:first-of-type {
    border-bottom-width: 2px;
}

/***
#cabecera > div:first-of-type{
    border-width: 0;
    box-shadow: 0 0 0 rgba(86, 114, 131, 0);
}
****/

.celda > div{
    font-size: 16px;
    vertical-align: middle;
    line-height: 16px;
    height: 25px;
}
    
    
/* Superpone al color original una imagen transparente*/
#tabla .ui-selecting {
    background-image: url("../transp.png");
}
#tabla .ui-selected {
    background-image: url("../transp.png");
}

#tabla .celda img{
    width:auto;
    max-width: 48px;
    height: 16px;
    margin-left: 8px;
}