body 
{
	background-color: #000;
	margin: 0 auto;
	padding: 0;
	font-family: Arial,Helvetica,sans-serif;
	font-size: 12px;
	color: #FFF;
	background-position: top center;
	background-image: url("../imagenes/bg_institucional.jpg");
}

h3, .h3 
{
	border-bottom: 1px dotted grey;
}

th:focus,
a:focus
{
   outline:0;
}

input[type="checkbox"]:focus{
    outline:0;
}
    
input[type="radio"]:focus{
    outline:0;
}

input[type=text] 
{
	color:Black;  
	background-color: white;
	border: 1px solid grey !important;
}

li 
{
    outline: none;
    list-style: none;
}
    
ul, ol 
{
	padding: 0;
}

table th {
	color: gray;
	background-color: #cc0000;	
	/*background-color: #335C33;*/
	height: 20px;
}

input[type=submit], .itemContainer li input 
{
    margin:10px 0;
    padding:10px;
    background:#CC0000;
    border:0px;
    border-bottom: 1px double #660000;
    border-top: 1px double #660000;
    border-left:1px double #FF0033;
    border-right:1px double #FF0033;
    border-radius: 5px;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 18px;
}

input[type=submit]:hover{
    background: #FF0033;
    color: #fff;
}

.divInscribir
{
	float:right;  
	position:relative;
	top:1px;
	display:none;
	right: -6px;
	border-bottom-right-radius: 4px;
	border-top-right-radius: 4px;
	border-bottom-left-radius: 4px;
	border-top-left-radius: 4px;
}

.divInscribirInterno
{
	float: right;  
	top: 0px;
	display: none;
	right: -6px; 
	padding: 0px;
	padding-left: 6.6em!important;
	padding-right: 7.3em!important;
}

.aInscribir
{
	color: #fff !important;
	padding-left: 8.4em!important;
	padding-right: 7.0em!important;
}

.aInscribirInterno
{
    padding: 0px !important;
    padding-left:15px !important;
    padding-right:5px !important;    
}

.divMensajeDesliceMouse
{
	float:right;    
}

.underline
{
	text-decoration: underline !important;    
}

.hide {
	display:none;
}

.divMultiplesBorder{
    border: solid 1px grey;
}

#div4
{
	min-height:60px;    
}

.usuario  
{
	margin: 50px auto 0;
	border:1px solid #262626;
	background: #222;
	padding: 10px;
	width: 72%;
	border-radius: 10px;
	box-shadow: 0px 0px 8px grey;
}
   
.fix_ddl
{
	color: Black;
}  


/* Overrides JQueryUI */
.ui-accordion 
{
    background: transparent;
    color: #fff;
    border-radius: .4em;
    overflow: hidden;
} 
    
.ui-accordion h4 {
    margin: 0;
    color: #f1f0f0;
    background: #555;
    padding: 2px 10px;
    text-shadow: none;
}

.ui-accordion h5 {
    color: #f1f0f0;
    background: #555;
    text-shadow: none;
	padding-left: 30px;    
}   

.ui-accordion ul 
{
    padding: 10px 25px;
    background: url("../imagenes/bg_institucional.jpg") repeat scroll 0 0 transparent;
    color: #fff;
    }

.ui-widget-content {
    background: #222;
    color: #eee;
}

.ui-accordion .ui-accordion-content-active 
{
    background: #222;
    color: #ddd;
}

.dataTables_wrapper 
{
    background: #fff;
    color: #000;
}
/*  
.ui-tabs .ui-tabs-nav li.ui-tabs-active a 
{
	background-color: #555;
}

.ui-tabs .ui-tabs-nav li a, .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a 
{
	cursor: pointer;
	color: #fff;
}  

.ui-tabs .ui-tabs-nav li:hover, .ui-tabs .ui-tabs-nav li a:hover
{
	background:#999;
	border-bottom:1px solid #ddd;
	padding-bottom:0px;
	color:#666;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a 
{
	background-color: #555;
	border: 1px solid #777;
	border-bottom-color: #555;
	cursor: default;
	color: #fff;
	outline: none;
}*/

.ui-accordion  h4.ui-accordion-header 
{
    background: #555;
    color: #fff;
}
.ui-accordion  h5.ui-accordion-header 
{
    background: #555;
    color: #fff;
    padding-left:30px;
    height: 20px;
}    
/*    
.ui-tabs .ui-tabs-nav 
{
	border-bottom: 1px solid #DDD;
	border-radius: 0 0 0 0 !important;
}*/

.ui-datepicker-month {
	color: black;
}

.ui-datepicker-year {
	color: black;
}
.ui-datepicker {
	max-width: 215px;
}

.ui-datepicker-calendar
{
	display: table;
}

.ui-datepicker-calendar thead
{
	display: table-header-group;
}

.ui-datepicker-calendar tbody
{
	display: table-row-group;
}

.ui-datepicker-calendar tr
{
	display: table-row;
}

.ui-datepicker-calendar td
{
	display: table-cell;
}

.ui-datepicker-calendar th
{
	display: table-cell;
}

/* Estilos UserControls  */
.imagen 
{
    cursor: pointer; 
    width: 20px; 
    vertical-align: top;
}
.contenedor-buscar {
    background-color: white; 
    padding:2px; 
    height:28px; 
    vertical-align:middle; 
    text-align:center; 
    border-radius: 5px;
}
.contenedor-resultado {
    position: absolute;
    z-index: 1000;    	
    background-color: white; 
    padding:2px; 
    border-radius: 5px;    	
}    
.item-resultado {
    padding:2px; 
    border-bottom: 2px solid white;
    border-radius: 5px;      	
    text-align: left;
} 
.header-resultado {
    padding:2px; 
    border-bottom: 2px solid white;
    border-radius: 5px;  	    	
    text-align: left;
}
.preheader-resultado 
{
    padding: 2px 5px 2px 5px;
    text-align: right;
}           
.footer-resultado 
{
    color: Black;
    padding:2px; 
    border-bottom: 2px solid white;
    border-radius: 5px;  	
    text-align: right;
}         
.buscador 
{
    background-color:transparent;
    border-width: 0px;
}
.celda 
{   
    padding: 0px 5px 0px 5px;
    text-decoration: none;
    color: #000000;     	
}
.celda-header
{   
    padding: 0px 5px 0px 5px;
} 

.listador 
{
    background-color:transparent;
    border-width: 0px;
}
.header
{
    color: white;
    padding:2px; 
    text-align: right;
}
.item-header-titulo
{
    color:#9d9d9d;
}
.resultado
{
    background: transparent;
    color: #fff;
    border-radius: .4em;
    overflow: hidden;
} 
.titulo
{
    margin: 0;
    color: #f1f0f0;
    background: #555;
    padding: 0px;
} 

.resaltar
{
	font-size: 11px;
	border-radius: 5px;
	padding: 6px;
	margin-top: 6px;
	margin-bottom: 6px;
}

.resultado-inscripcion
{
	font-size: 15px;
	text-align: left;
	border-radius: 5px;
	padding: 10px;
	margin-top: 10px;
	margin-left: 10px;
	margin-bottom: 6px;
	float: left;
}

.resultado-mostrar
{
	font-size: 15px;
	text-align: left;
	border-radius: 5px;
	padding: 10px;
}

.pnlEmpleadosBorder
{            
    margin-top: 19px;
    border: solid 1px grey;
    padding: 5px;
    border-radius: 5px;
    position: relative;
} 

.pnlBotonInscripcion
{            
    border: solid 1px grey;
    padding: 5px;
    border-radius: 5px;
    text-align: right;
    position: relative;
} 

.divTitulo
{
    height: 50px;
    width:1000px;
    padding-top: 17px;
    background-color: #555;
    color: white;
    font-weight: bold;
    padding-left: 5px;
    border-radius: 4px;
    margin-top: 10px;
    margin-bottom: 10px;
}    

.imgArrowSolicitar
{
    cursor: pointer;
    float: right;
    height: 35px;
    width: 35px;
    top: -10px;
    position: relative;
    left: -7px;
}

.buscadorCaballo .accordionCaballo, .buscadorCaballeriza .accordionCaballeriza {
	width: 250px;
}

.checkboxFix {
	padding: 0px !important;
	border-radius: 0px !important;
	border-style:none !important;
}

.forfaitCondicionalContainer {
	max-width: 500px;
}

.forfaitCondicionalResultadoContainer  
{
	width: 500px;
}

.opcionDeshabilitada 
{
	text-decoration: line-through;
}

.dropdown-menu
{
	background-color: #000000;
	width: 100%;
	border-color: Black;
}
.dropdown-menu > li > a
{
	color: #9d9d9d !important;
}

.dropdown-menu > li > a:hover
{
	background-color: #333 !important;
	color: #ffffff;
}

.RowSelected
{
    background-color: #B6F0B6 !important;
}

input[type=text].InputSelected {
    background-color: #B6F0B6 !important;
}

.selectedShadow
{ 
    box-shadow: 0px 0px 5px 3px #B6F0B6;
}


.dropdown-toggle
{
	font-weight: bolder;
}

.carrerasInscripcionesAbiertasContainer 
{
	float: left;
	width: 100%;
}

.check{width:1%;}

.estado{width:13%;}

.tablaAl100
{
	width: 100%;
}

.miCuentaContainer
{
	margin-left: 550px;	
    border:1px solid #262626;
    background: #222;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 8px grey;	
    display: none;
}

.HorariosContainer
{
    margin: 20px 0;
    padding: 10px;
}
.boton {
	-moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: #cc0000 none repeat scroll 0 0;
    border-color: #660000 #ff0033;
    border-image: none;
    border-radius: 5px;
    border-style: double;
    border-width: 1px;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 18px;
    margin: 10px 0;
    padding: 10px;
}

.boton:hover {
    background: #ff0033 none repeat scroll 0 0;
    color: #fff;
}

#tblListado tr:nth-child(odd), .dataTables_wrapper table.dataTable tbody tr.odd {background: #CCC}
#tblListado tr:nth-child(even), .dataTables_wrapper table.dataTable tbody tr.even {background: #FFF}

.dataTables_wrapper .dataTables_scroll {margin: 0 0 10px 0;}
.todo_junto 
{
	width: 100%;	
}

#pnlIngresoPin
{
	padding-top: 10px;
	padding-bottom: 10px;
	background: #CCCCCC;
	text-align: center;
	border-radius: 5px;
}

#pnlIngresoPin input
{
	width:50px;
}

.dia_reunion a {
    background-color: #FFFFFF !important;
    color: #CC0000 !important;
}

.divBtnReunion input, .btnReunion
{
    margin-right: 5px !important;
    border: 1px #ccc solid;
}

.menu_deshabilitado
{
	text-decoration: line-through;
}

::-webkit-input-placeholder {
    color: red;
}

.spinGif
{
    top: 50%;
    position: absolute;
    left: 45%;
}

.divModal
{
     width: 100%; 
     height: 500px; 
     z-index: 1000;
     overflow: hidden;
     position: absolute;
     top: 0px;
     left: 0px; 
     opacity: 0.5;
     background-color: gray;
     position: fixed;
}

/******************* Media Queries **************************/
@media all and (min-width: 800px) {
    .itemContainer li, .itemContainer span
   {
        float: left;
        margin: 0;
        padding: 5px;
        display: block;
        line-height: 39px;
   }
        
	.itemContainer li input,
	.itemContainer span input
	{
		margin: 0;
	}
	
	.dropdown-menu 
	{
		min-width: 200px;
	}
}
     
@media all and (max-width: 800px) 
{
		.miCuentaContainer {display: none;}
		
        .usuario {width:100%;}
        .imgMagnifyingGlass {display: none;}
        .ui-widget-content {width: 100% !important;}
        
        table.dataTable.cell-border tbody tr:first-child td {border-top: 1px solid #dddddd !important;}
        .dataTable th.sorting {border: none;color: #960000;}
        
        input[type=checkbox]{
       /*-ms-transform: scale(2);
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
padding: 10px;
margin-right: 15px;
margin-left: 7px;*/
}
    
   
        /*.ui-widget-content td:nth-of-type(1):before { content: ""; }
	    .ui-widget-content td:nth-of-type(2):before { content: "Nombre"; }
		.ui-widget-content td:nth-of-type(3):before { content: "Categoria"; }
		.ui-widget-content td:nth-of-type(4):before { content: "";}
		.ui-widget-content td:nth-of-type(5):before { content: "";}*/
}
    
    /* 
	Max width before this PARTICULAR table gets nasty
	This query will take effect for any screen smaller than 760px
	and also iPads specifically.
	*/
	@media 
	only screen and (max-width: 760px),
	(min-device-width: 768px) and (max-device-width: 1024px)  {
	
		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr { 
			display: block; 
		}
		
		/* Hide table headers (but not display: none;, for accessibility) */
		.inscripcarrera thead tr { 
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
			
		.inscripcarrera td { 
			/* Behave  like a "row" */
			border: none;
			position: relative;
			padding-left: 20% !important; 
		}
		
		.inscripcarrera td:before { 
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 6px;
			left: 6px;
			width: 45%; 
			padding-right: 10px; 
			white-space: nowrap;
			font-weight: bold;
		}
		
		  #divAlta {width:100%;}
		
		.colListadoCarrera:affter 
		{
		   left: 30%;
		}
		
		/*
		Label the data
		*/
		.inscripcarrera td:nth-of-type(1):before { content: ""; }
		.inscripcarrera td:nth-of-type(2):before { content: "Jockey"; }
		.inscripcarrera td:nth-of-type(3):before { content: "Carrera"; }
		.inscripcarrera td:nth-of-type(4):before { content: "Caballo"; }
		.inscripcarrera td:nth-of-type(5):before { content: "Caballeriza"; }
		.inscripcarrera td:nth-of-type(6):before { content: "Estado"; }
	}