/* RESET DE ESTILOS */
*{
	margin: 0px;
	padding: 0px;
}

p{margin-bottom: 10px;}

.mayusc{text-transform: uppercase;}
.minusc{text-transform: lowercase;}
.negrita{font-weight: bold;}
.cursiva{font-style: italic;}


figcaption{font-style: italic;}

a{
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

h1{font-size: 1.45em; margin: 20px 0px 15px 0px;}
h2{font-size: 1.30em; margin: 10px 0px 10px 0px;}
h3{font-size: 1.15em; margin: 10px 0px 10px 0px;}



/* TAMAÑOS DE LETRA */
.mini{font-size: 0.8em;}
.maxi{font-size: 1.1em;}


/* ELEMENTOS FLOTANTES */
.derecha{float:right;}
.izquierda{float:left;}
.clear{clear:both;}

/* ALINEACION */
.alignRight{text-align: right;}
.alignLeft{text-align: left;}
.alignCenter{text-align: center;}
.alignJustify{text-align: justify;}

/* PARA EL FLEX */
.flex-container{
	display: flex;
	flex-wrap: wrap;
}
.flex1{flex: 1;}
.flex2{flex: 2;}
.flex3{flex: 3;}
.flex4{flex: 4;}
.flex5{flex: 5;}
.flex6{flex: 6;}
.flex7{flex: 7;}
.flex8{flex: 8;}

.centradoperfecto{
	margin: auto auto;
}
.side-by-side{
	justify-content: space-between;
}

/* DEFINICIONES PARA COLORES */
.poriniciar{color:#393;}
.encurso{color:#993;}
.finalizado{color:#933;}
a.mail{color: #0099cc;}


/* IMAGENES */
img.logo{
	height: 30px;
	width: 30px;
	vertical-align: middle;
}
img.icono{
	height: 20px;
	width: 20px;
	padding: 5px;
	vertical-align: middle;
	margin-right: 2px;
	border: dotted 1px #aaf;
	border-radius: 5px;
}
img.iconoSmall{
	height: 20px;
	width: 20px;
	vertical-align: middle;
}
img.icono:hover{
	background-color: #aaf;
}
img.iconoCheck{
	height: 40px;
	width: 40px;
	padding: 5px;
	vertical-align: middle;
	margin: 10px;
}
img.iconoGrande{
	height: 40px;
	width: 40px;
	padding: 5px;
	vertical-align: middle;
	margin: 10px;
	border: solid 1px #aaf;
	border-radius: 5px;
	transition: 0.5s;
	background-color: white;
	box-shadow: 1px 1px 3px rgba(66,66,66,0.6);
}
img.iconoGrande:hover{
	background-color: #aaf;
}
img.info{
	height: 25px;
	width: 25px;
	vertical-align: middle;
	margin-right: 10px;
}




/* EXITO Y ERROR */
.error{color: #900;}
.exito{color: #090;}

div.mensajeExito{
	color: #030;
	background-color: #afa;
	padding: 20px 20px 10px 20px;
	border-radius: 10px;
	margin: 10px auto;
}
div.mensajeError{
	color: #300;
	background-color: #faa;
	padding: 20px 20px 10px 20px;
	border-radius: 10px;
	margin: 10px auto;
}
div.error{background-color: #fee;}
div.exito{background-color: #efe;}
div.error, div.exito{
	padding: 20px;
	border-radius: 10px;
	margin: 10px auto;
}

p.exito, p.error{
	margin: 20px 40px 0px 0px;
}


/* ------------------------------------------------------------------------------------
INICIO DE LOS ESTILOS PARA CADA UNO DE LOS ELEMENTOS 
------------------------------------------------------------------------------------ */

html{
	background-color: #eef;
}

body{
	background-color: #fff;
	font-family: arial, verdana;
	width: 94%;
	max-width: 1300px;
	padding: 15px;
	margin: 60px auto 10px auto;
	box-shadow: 0px 0px 4px rgba(60,60,60,0.6);	
}

.touchable{
	cursor: pointer;
}

#content .flex-container{
	align-items: stretch;
}
#content .flex-container>*{
	margin: 5px;
}

#content .tabla .touchable{transition: 0.3s;}
#content .tabla td{font-size: 0.8em;}
#content .tabla td.mini{font-size: 0.6em;}
#content .tabla td.grande{font-size: 0.9em;}

#content .tabla td.nom{text-transform:capitalize;}
#content .tabla td.dni{text-transform:uppercase;}

#content .tabla td.operacions{
	min-width: 140px;
	text-align: center;
}
#content .tabla .touchable:hover{
	background-color: #669;
	color: white;
}
#content .tabla td img{
	width: 20px;
	height: 20px;
}
#content .tabla td img.icono{
	width: 15px;
	height: 15px;
}

.listado li{
	margin-left: 20px;
}

#content img.curso{
	border: solid 1px #08a;
}

#content img.grande{
	background-color: white;
	width: 100%;
}


#content img.grandeErrorExito{
	width: 40%;
	float:right;
}


#content div.paginacion{
	margin: 5px;
	text-align: right;
	padding: 10px;
}
#content div.paginacion a{
	font-weight: bold;
	color: #0099cc;
}
#content div.paginacion a:hover{
	text-decoration: underline;
}


#content div.pagina{
	font-size: 0.85em;
	font-style: italic;
	padding-top: 10px;
}

#llistapreseleccio{
	margin: 20px 10px; 
	overflow-y:scroll; 
	max-height: 360px;
}

div.volver{
	text-align: center;
	font-weight: bold;
	color: #669;
	padding: 20px 0px 10px 0px;
	border-top: dashed 1px #aaf;
}

a.enlaceBoton{
	text-decoration: underline;
	font-weight: bold;
	padding: 8px;
	border-radius: 5px;
	transition: 0.5s;
}

div.volver a, a.enlaceCuadrado{ 
	border: solid 2px #9af;
	padding: 8px 10px;
	margin: 5px;
	border-radius: 5px;
	background-color: #eef;
}

div.volver a:hover, a.enlaceCuadrado:hover{
	color: white;
	background-color: #9af;
}

/* HEADER */
header{
	cursor: pointer;
	background-color: #0099cc;
	color: #eef;
	text-shadow: 0px 0px 4px blue;
	padding: 10px 20px;
	background-image: url('../images/template/header.png');
	background-size: 100%;
	background-repeat: no-repeat;
	border: solid 2px #0099cc;
}

header figure{
	text-align: right;
}

header figure img{
	width: 100%;
	border-radius: 5px;
	border: solid 2px #09c;
	padding: 5px;
	background: white;
}
header h1{
	font-size: 3em;	
}




form fieldset{
	padding: 15px;
	border-radius: 10px;
	border: solid 1px #ddd;
	margin: 10px 0px;
	background-color: #eef;
	min-width: 300px;
}



#content figure.imprimir{
	width: 60px;
	padding: 5px;
	margin: 5px;
	border-radius: 5px;
	border: dotted 1px #aaf;
	z-index: 10;
}

#content figure.imprimir img{
	width: 75%;
}
#content figure.imprimir figcaption{
	font-size: 0.7em;;
}

#content .tabla a{
	font-weight: bold;
	color: #339;
}



.centrado{
	text-align: center;	
}

/* ZONAS DE LOGIN Y LOGOUT */
#login, #logout{
	position: fixed;
	top: 0px;
	left:0px;
	width:96%;
	background-color: rgba(180,230,0,0.9);
	border-bottom: solid 2px #0099cc;
	text-align: right;
	padding: 8px 2%;
	font-size: 1em;
	font-style: italic;
	font-size: 0.9em;
	z-index: 100;
}

#login input, #logout input{
	width: 100px;
	border-radius: 4px;
	padding: 3px;
	margin: 0px 5px 0px 5px;
	background-color: white;
}

#login select, #logout select{
	border-radius: 4px;
	background-color: white;
	padding: 3px;
	margin: 0px;
}


#login input[type="submit"], #logout input[type="submit"]{
	border: solid 2px #0099cc;
	color: #0099cc;
	background-color: white;
	padding: 5px;
	transition: 0.3s;
}

#login input[type="submit"]:hover, #logout input[type="submit"]:hover{
	color: white;
	background-color: #0099cc;
	border: solid 2px white;
}

#logoutbtn{
	border-radius: 5px;
	border: solid 2px white;
	color: #0099cc;
	background-color: white;
	padding: 5px 10px 5px 10px;
	margin: 0px 5px 0px 10px;
	transition: 0.3s;
	vertical-align: middle;
}

#logoutbtn:hover{
	color: white;
	background-color: #0099cc;
}

#logout img{
	display: inline-block;	
	vertical-align: middle;
	width: 30px;
	height: 30px;
}

#logout form{
	display: inline-block;
}

#login a, #logout a{
	color: white;	
	font-weight: bold;
}

#loginregistro{
	margin: 20px 0px;
}


legend{
	color: grey;
	font-style: italic;
}

/* BARRA DE NAVEGACION */
nav{
	background-color: #0099cc;
	color: white;
	font-weight: bold;
	display: flex;
	align-items: center;
	border: solid 2px #0099cc;
	padding: 0px;
}

nav ul{
	padding: 0px;
	margin: 0px;
}

nav ul:first-of-type{
	text-align: left;
	flex: 2;
}

nav ul:nth-of-type(2){
	text-align: right;
	flex: 1;
}

nav ul.menu>li{
	font-size: 1em;
	display: inline-block;
	list-style-type: none;
	padding: 5px;
	margin: 0px;
	transition: 0.5s;
	height: 100%;
}
nav ul.menu>li:hover{
	color: #0099cc;
	background-color: white;	
}

nav ul.menu:first-of-type>li{
	padding: 2px 10px 2px 10px;
}

nav ul.menu>li.separador{
	border-left: solid 2px white;
}

nav ul.menu>li img{
	height: 30px;
	width: 30px;
	vertical-align: middle;
	margin: 0px;
	padding: 0px;
	border: solid 1px white;
}

/* MIGAS */
#migas{
	font-size: 0.85em;
	border: dashed 1px #aaf;
	border-top: none;
	padding: 10px;
	color: rgb(0, 153, 204);
}
#migas span.enlace{
	font-weight: bold;
}


/* FICHA DE USUARIO */
#fitxa>div{
	margin:10px 0px;
	border: dotted 1px #aaf;
	padding: 5px;
}
#fitxa>div>p{
	margin: 0px;
}

/* AREA PARA EL CONTENIDO */
#content{
	color: #336;
	padding: 10px 0px 10px 0px;
}

#content p:not(.centrado){
	text-align: justify;
}

#content table{
	margin: auto;
	width: 100%;
}

#content table th{
	color: white;
	background-color: #0099cc;
	text-align: center;
	font-weight: bold;
	font-size: 0.85em;
}
#content table td, #content table th{
	padding: 5px;
}

#content table td.nota{
	padding: 2px;
}

#content table td.aspirant span:not(:empty){
	display: inline-block;
	padding: 2px;
	width: 90%;
	border-radius: 50%;
	border: dashed 1px #333;
	color: #333;
	font-style: italic;
}


#content table tr:nth-of-type(even){
	background-color: #eef;
}

#content figure.portada{
	padding: 0px;
	background-image: url('../images/logos/cifo2.png');
	background-size: 30%;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	text-align: right;
}

#content .slideshow{
	/*margin: 40px 0px 0px 20px;*/
	margin-left: 20px;
}
#content .slideshow img{
	margin: auto;
	width: 100%;
	border: solid 1px #9cf;
}

#content #fitxa>div{
	margin-bottom: 5px;
}

/* FOOTER */
footer{
	position: relative;
	margin-top: 10px;
	padding: 10px 10px 40px 10px;
	height: 40px;
	background-color: #66cc00;
	color: white;
	font-weight: bold;
	text-align: left;
	
	background-image: url('../images/logos/powered.png');
	background-repeat: no-repeat;
	background-position: 100% 50%;
	background-size: 25% 60%;
}

footer a:hover{
	color: blue;
}

footer p.informacion{
	position: absolute;
	bottom: 0px;
	left: 10px;
	color: white;
	font-size: 0.75em;
}



.admin{
	display: flex;
	flex-wrap: wrap;
}

.admin>div.col{
	flex: 1;
	padding: 5px;
	margin: 5px;
	min-width: 380px;
}

.col{
	display: flex;
	flex-wrap: wrap;
}

.col>figure,
.col>div{
	flex: 1;
	padding: 5px;
}

.col>div>a{
	color: grey;
	text-decoration: underline;
}

.resEs{
	font-weight: bold;
}

h3,
.totales{
	color: orange;
}

.banner{
	width: 100%;
	height: 200px;
}

.titul{
	color: orange;
  margin-top: 15px;
}
.titul:first-child{
	margin-top:0px;
}

.busca{
	display: flex;
	flex-wrap: wrap;
	text-align: center;
	padding: 2%;
}

.busca>form{
	flex: 1;
}

.icon{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50px;
}

.buscador{
	padding: 1%;
	font-size: 1.1em;
}

.buttonPrint,
.buttonInscr{
	padding: 1%;
	font-size: 1.5em;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2%;
}

.buttonXML{
	padding: 1%;
	font-size: 1.2em;
	margin-left: 35%;
	margin-right: 40%;
	margin-top: 2%;
}

.buttonForm{
	width: 120px;
	padding: 10px;
	font-size: 1em;
	border-radius: 5px;
	color: black;
	text-align: center;
	margin: 10px 2px 10px 2px;
}

.save{background-color: #afa;}
.reset{background-color: #faa;}
.edit{background-color: #bbf;}

.search{
	background-color: #81BEF7;
}

.buscadorFondo{
	background-color: #F2F2F2;
	padding: 2%;
	text-align: center;
	margin-left: 20%;
	margin-right: 20%;
	 box-shadow:  0px 0px 4px rgba(60,60,60,0.6);
}

.verCurso{
	box-shadow: 2px 2px 2px rgba(200,200,255,0.5);
	background-color: #eef;
	padding: 15px;

}

.caract>figure{
	text-align: center;
}

.infCurs{
		padding: 2%;
}

iframe#programa{
	border: solid 5px #aaf;
	width: 99%;
	margin-top: 10px;
	height: 500px;
	display: none;
}



/* FORMULARIOS */
button.boton, input.boton{
	padding: 5px;
}

input[type="submit"], input[type="reset"]{
	cursor: pointer;
}
select{
	margin-top: 5px;
	padding: 5px;
}

/* FORMULARIO CENTRAL */
form.formularioCentral fieldset{
	padding: 10px;
	border-radius: 10px;
	border: solid 1px #ddd;
	margin: 4px 0px;
	background-color: #eef;
	min-width: 200px;
	align-self: stretch;
}

form.formularioCentral span.informacion{
	font-size: 0.8em;
	font-style: italic;
}
form.formularioCentral label:not(.short){
	font-style: italic;
	display: inline-block;
	min-width: 30%;
}
form.formularioCentral input{
	margin-top: 5px;
	padding: 5px;
	min-width: 60%;
}
form.formularioCentral input.short{
	margin-top: 5px;
	padding: 5px;
	min-width: 20%;
}
form.formularioCentral select{
	margin-top: 5px;
	padding: 5px;
	min-width: 60%;
}
form.formularioCentral select.short{
	margin-top: 5px;
	padding: 5px;
	min-width: 10%;
}
form.formularioCentral input[type="file"]{
	width: 60%;
	padding: 10px 0px;
}
form.formularioCentral input[type="checkbox"]{
	margin: 5px;
	padding: 2px;
	min-width: auto;
	max-width: 20px;
	vertical-align: middle;
}
form.formularioCentral input[type="radio"]{
	margin: 5px;
	min-width: auto;
	max-width: 20px;
	vertical-align: middle;
}
form.formularioCentral input[type="submit"],
form.formularioCentral input[type="reset"],
form.formularioCentral input[type="button"]{
	min-width: auto;
	margin: 10px 0px;
	padding: 8px;
}
form.formularioCentral img.imagenactual{
	width: 100px;
	height: 110px;
	margin: 10px;
	float: right;
}
form.formularioCentral figure figcaption{
	text-align: right;
}
form.formularioCentral textarea{
	vertical-align: text-top;
	margin-top: 10px;
	resize: none;
	height: 100px;
	min-width: 60%;
}

textarea#prescripvalles{
	height: 120px;
	width: 100%;
	display: block;
	margin: 10px auto;
}


/* FORMULARIO PARA FILTROS */
#content form.filtro{
	text-align: right;
	margin: 0px;
}
#content form.filtro input[type="submit"]{
	width: auto;	
	padding: 8px 10px;
	color: #66f;
}
#content form.filtro input[type="submit"]:hover{
	color: white;
	background-color: #66f;
}
#content form.filtro input, form.filtro select{
	border-radius: 5px;
	padding: 5px;
	border: solid 1px #ccf;
	background-color: white;
}
#content form.filtro input, form.filtro select, form.filtro label{
	max-width: 100px;
}
#content form.filtro input[type="checkbox"]{
	max-width: 20px;
}


/* PANEL DE CONTROL DEL ADMINISTRADOR */
section.panell>div{
	background-color: rgba(240,240,255,0.5);
	border-radius: 10px;
	box-shadow: 2px 2px 2px rgba(200,200,200,0.5);
}

section.panell div{
	align-content: center;
}
section.panell ul{
	list-style-type:  square;
}
section.panell li{
	margin-left: 20px;
	margin-bottom: 5px;
}
section.panell .operacions{
	min-width: 200px;
}
section.panell figure{
	min-width: 150px;
	text-align: center;
}
section.panell figure img{
	width: 85%;
}


/* PARA LAS LISTAS DE BOTONES CON OPCIONES*/


ul.opciones{
	margin: auto;
}
ul.opcionesUser{
	text-align: center;
}
ul.opciones>li{
	list-style-type: none;
}
ul.opcionesUser>li{
	display: inline-block;
}
ul.opciones>li img{
	margin: 5px 5px 0px 0px;
}
ul.opciones>li a span{
	text-decoration: underline;
	font-weight: bold;
	font-size: 0.85em;
}

/* GRAFICOS */
#graficos{
	text-align: center;
	margin: auto;
}
#graficos h2{
	text-align: left;
}
#graficos figure{
	padding: 15px;
}
#graficos figure canvas{
	
	margin: auto;
} 
#graficos figure figcaption{
	text-align: center;
	font-size: 1.2em;
	color: #699;
	margin: 10px;
}



/* PARA PANTALLAS MAS PEQUEÑAS */

@media screen and (max-width: 1024px) {
  body{
		background-color: #fff;
		font-family: arial, verdana;
		width: 98%;
		padding: 1%;
		margin: 40px auto 10px auto;
		box-shadow: 0px 0px 2px rgba(60,60,60,0.6);	
	}
}