/* Leer comentarios en este archivo pero .txt elimino de aca por tamaño de este archivo*/
/*Creo no lo usa los Colegios solo lo usa al parecer EDUDATOS*/
/*-------------------------------------------------*/
/* 1) UNIVERSALES:Definir estilos generales para todas las etiquetas */
/*-------------------------------------------------*/
/* reseteo universal */
* {
	border: 0;
	/*Obligar a todo el sitio este orden de Fonts*/
	/*Luego borrar los restantes y usar el que del usuario*/
	/*selecione en el css_configurado revisar luego y programar esto*/
	/*Fuentes seguras van sin comillas por ser naturales de tosos los navegadores y son de una sola palabra si son mas hay que ponerlas entre comillas */
	font-family: Verdana, Arial, sans-serif, "Chalet",  Helvetica; /*Fuentes seguras van sin comillas por ser naturales de tosos los navegadores */
	/*es mejor dejar el tamaño del font a criterio del navegador*/
	/*font-size: 12px;  tamaño tradicional inicial de los navegadores*/
	/*font-size: 1rem;  es el tamaño por defecto o predeterminado */
	margin: 0;
	padding: 0;	
}
/*Elimina la linea de contorno cuando tiene
foco ejemplo los botones*/
*:focus {
	outline: none;
}
/*-------------------------------------------------*/
/* Fuentes externar o especiales */
/*-------------------------------------------------*/
@font-face {
	font-family: "Chalet";
	src: 	url("../fonts/Chalet.eot");	
	src: 	url("../fonts/Chalet.eot?#iefix") format("embedded-opentype"),	
	url("../fonts/Chalet.woff") format("woff"),	
	url("../fonts/Chalet.ttf") format("truetype"),	
	url("../fonts/Chalet.svg#Chalet") format("svg");	
	font-weight: normal;
	font-style: normal;
}
/*
@font-face {
	src: url('../fonts/Chalet.eot?iefix') format('eot'),          
}
*/
@font-face {
	font-family: "Pecita";
	src: 	url("../fonts/Pecita.eot");	
	src: 	url("../fonts/Pecita.eot?#iefix") format("embedded-opentype"),	
	url("../fonts/Pecita.woff") format("woff"),	
	url("../fonts/Pecita.ttf") format("truetype"),	
	url("../fonts/Pecita.svg#Pecita") format("svg");	
	font-weight: normal;
	font-style: normal;
}
/*-------------------------------------------------*/
/*2) ETIQUETAS:.Definir estilos para las ETIQUETAS propias dehtml5*/
/*-------------------------------------------------*/
article, 
figcaption, 
figure, 
footer, 
header, 
hgroup, 
nav, 
section,
marquee,
table {
	display: block;
}
/*-.tener imagenes y objetos flexibles se logra con lo siguiente*/
/*cambia de tamaño de forma dinámica response web design*/
audio, 
iframe, 
img, 
nav, 
video,
marquee, 
table {
	max-width: 100%;
	/* ERROR height: auto; agregado luego 2014/12/27*/
	/* ERROR width: auto/9;  Bug de ie8 */
}
/*Ajustar dinámicamente las imagenes*/
img {
	/**/
	max-width: 100%;
	height: auto;
	/*Logro que la imagen banner se ajuste a la pantall*/
	/*pero daña el resto
	width:100%;*/
}
/*Enlaces */
/*Para que los enlcces fucionen deben
de sase los estilos en un orden segun truco
love hate : link, visited, hover, active (no alfabetico)
el estado active ocurre al hacer click con el mouse */
a {
	font-weight: bold;
	text-decoration: none;		
}
a:link,
a:visited
{
	text-decoration: none;
}
a:hover {  /* al pasar el mouse por el enlace */
	color: #F60; /* naranja */
}
a:active
{
	text-decoration: none;
}
body {
	/* background: #212121 url(../img/fondo.jpg); gris oscuro */ 
	/*	color: #FFF;  color de la fuente blanca */
	margin: 0 auto; /*obliga a centrar el cuerpo a una distanci 0 del centr*/
	max-width: 98%;
}
/* esta etiqueta se usa para describir archivo, immagen etc..*/
filecaption {
	font-size: .85rem;
	padding: .25rem;
	text-align: center;
}
footer {
	border: 1.5px solid;	 
	border-color:#F90; /*naranja*/
	border-radius: .5rem;
	-moz-border-radius: .5rem;
	-webkit-border-radius: .5rem;  
	max-width: 95%;
	padding: .25rem;
	margin-bottom: .2rem;
	width: 98%;
}
/* Cabeceras */
h1 {
	background-color:#FF0;
	border: 1.5px solid;	 
	border-color:#F90; /*naranja*/
	border-radius: .5rem;
	-moz-border-radius: .5rem;
	-webkit-border-radius: .5rem;  
 	/*
	box-shadow: .3rem .5rem .2rem rgba(0,0,0,0.5); 
  	-ms-box-shadow: rgba(0,0,0,.5) .3rem .5rem .2rem .1rem;
  	-moz-box-shadow: rgba(0,0,0,.5) .3rem .5rem .2rem .1rem;
  	-o-box-shadow: rgba(0,0,0,.5) .3rem .5rem .2rem .2rem;
  	-webkit-box-shadow: rgba(0,0,0,.5) .3rem .5rem .2rem .1rem;
  	*/
  	color: #F90;  /*naranja*/
  	/*font-family: "Chalet", "Pecita", Verdana, Helvetica; Fuentes seguras van sin comillas por ser naturales de tosos los navegadores */
  	font-size: 2rem;
  	margin-bottom: 1rem;
  	max-width: 98%;
  	/*	text-shadow: black 0.3em 0.3em 0.4em;*/
  	width: 95%;
  }
  h2 {
  	background-color:#FFC;
  	border: .25rem solid;	 
  	border-color:#F90; /*naranja*/
  	border-radius: .5rem;
  	-moz-border-radius: .5rem;
  	-webkit-border-radius: .5rem;  
 	/*
	box-shadow: .3rem .5rem .2rem rgba(0,0,0,0.5); 
  	-ms-box-shadow: rgba(0,0,0,.5) .3rem .5rem .2rem .1rem;
  	-moz-box-shadow: rgba(0,0,0,.5) .3rem .5rem .2rem .1rem;
  	-o-box-shadow: rgba(0,0,0,.5) .3rem .5rem .2rem .2rem;
  	-webkit-box-shadow: rgba(0,0,0,.5) .3rem .5rem .2rem .1rem;
  	*/
  	font-size: 1.5rem;
  	margin: 1rem;
  	padding: .5rem;
  	width: 95%;
  }
  h3 {
  	color: #F90; /* color de la fuente naranja */
  	/*font-family:  Verdana, "Pecita",Helvetica; Fuentes seguras van sin comillas por ser naturales de tosos los navegadores */
  	font-size: 1.1rem;
  }
  h3 {
  	background: #E2E7E1;
  	border: 1px solid;	 
  	border-radius: .5rem;
  	-moz-border-radius: .5rem;
  	-webkit-border-radius: .5rem;  
	/*
	box-shadow: .25rem .25rem .25rem rgba(255,153,0,.5) ; 
  	-ms-box-shadow: rgba(255,153,0,.5) .25rem .25rem .25rem .1rem;
  	-moz-box-shadow: rgba(255,153,0,.5) .25rem .25rem .25rem .1rem;
  	-o-box-shadow: rgba(255,153,0,.5) .25rem .25rem .25rem .2rem;
  	-webkit-box-shadow: rgba(255,153,0,.5) .25rem .25rem .25rem .1rem;
  	*/
  	margin-bottom: .5rem;
  	padding-left: .5rem;
  }
  /* Linea */
  hr {
  	border: .5px dashed;
  	margin: .2rem 0;
  }
  header {
  	/*	background: #FFF; */
  	/*Con auto se le indica al navehador q ajuste los margenes, con 0 se elimnan margenes*/
  	margin: 0 auto;
  	/*No se usa 100% para dejar margenes de trabajo y barras etc.. si se pone 100 sse pega todo a la izquierda y se ve feo*/	
  	/*	max-width: 98%;*/
  	text-align: center;
  	width: 98%;
  }
/* no se esta usando revisar luego
header h1, 
nav {
	display:inline-block;	
	max-width: 95%;
	padding: .25rem;
	vertical-align: middle;
	width: 95%;	
}
*/
/* Apariencia a las cajas input*/
/* de tipo boton no lo uso solo lo veo
de ejemplo ya tengo en lcasses los botones*/
input[type="button"] 
{
	background:#F60;
	border:thin solid transparent;
	border-radius: .5rem;
	-moz-border-radius: .5rem;
	-webkit-border-radius: .5rem;  
	padding: .5rem;
}
input[type="email"],
input[type="number"],
input[type="checkbox"],/* No se puede alnterar el estilo*/ 
input[type="password"],
option,  
select,  
input[type="text"],
input[type="textarea"]
{
	/* background-color: #DDD; azul claro*/
	background-color:#FFC; /*amarillo clarito*/
	border: .2rem solid #F90; /*naranja*/ 
	border-radius: .5rem;
	-moz-border-radius: .5rem;
	-webkit-border-radius: .5rem;  
 /* No se ve en todos los navegadores
 	box-shadow: rgba(0,0,0,.5) .1rem .1rem .1rem .1rem;
  	-ms-box-shadow: rgba(0,0,0,.5) .1rem .1rem .1rem .1rem;
  	-moz-box-shadow: rgba(0,0,0,.5) .1rem .1rem .1rem .1rem;
  	-o-box-shadow: rgba(0,0,0,.5) .1rem .1rem .1rem .1rem;
  	-webkit-box-shadow: rgba(0,0,0,.5) .1rem .1rem .1rem .1rem;
  	*/
  	cursor:pointer;
  	font-size: .75rem;
  	padding: .1rem;
  }
  input[type="checkbox"]:focus,/*No se puede alnterar el estilo*/
  input[type="email"]:focus, 
  input[type="number"]:focus, 
  input[type="password"]:focus, 
  input[type="select"]:focus,
  input[type="text"]:focus, 
  input[type="textarea"]:focus
  {
  	background: #FF6; /*amarillo*/
  	border: .4rem solid #3C0;/*verde manzana*/
/*
  	box-shadow: none;
  	-moz-box-shadow: none;
  	-webkit-box-shadow: none;
  	-o-box-shadow:  none;
  	*/
  	outline: medium outset #F90; /*naranja*/
  	/*  	outline: none;*/
  }
  input[type="radio"], label
  {
  	cursor:pointer;
  }	
  input[type="color"]
  {
  	cursor:pointer;
  	height:35px;
  	width:35px;
  }	
  /*Alterar los imputs si estan vacios o con error */
  /*Campo con error*/
  input:required,
  input:invalid,
  select:required
  select:invalid {
  	/*	border: .3rem solid red; */
  	/*Muestra una imagen dentro del imput*/
  	background: #FFC url(../imagenes6/invalid.jpg) no-repeat 98% center;
  }
  /*campo sin error*/
  input:required:valid,
  select:required:valid {
  	/*	border: .3rem solid green;*/
  	/*Muestra una imagen dentro del input*/
  	background: #FFC url(../imagenes6/valid.png) no-repeat 98% center;
  }

  /*Estilo especial checkbox y ratiobuton*/
  /*utilizo en planilla de inscripcion version2*/
  /*Se requiere para esconder el chek y salga mensaje requerido en el sitio*/
  /*http://codepen.io/juanbrujo/embed/oIqzC*/
  /*solo usado el check*/
  /*es chck respecial que aparece en la planilla de inscrip.Versio 2*/
  /*solo susado en formulario_tipo_2 ojo afecta a los demas chk si se saca de aca*/
  .custom-radio, .custom-checkbox  {
  	clip: rect(1px 1px 1px 1px);
  	clip: rect(1px, 1px, 1px, 1px);
  	left: 10rem;
  	position: absolute;	
  }
  section#formularario_tipo_2 [type="checkbox"] + label:after {
  	content: '';
  	position: absolute;
  }
  section#formularario_tipo_2 [type="checkbox"] + label {
  	color: #e74c3c;
  	cursor: pointer;
  	display: block;
  	/*font-size: 2.5rem;*/
  	font-weight: bold;
  	line-height: 36px;
  	padding-left: 1rem;
  	position: relative;
  	/*text-shadow: #2c3e50 2px 2px 1px;*/
/*
	text-shadow: black 0.3em 0.3em 0.4em;
  	transition: color .1s;
   	-ms-transition: color 1s; 
   	-moz-transition: color 1s; 
   	-o-transition: color 1s; 
   	-webkit-transition: color 1s;
   	*/	
   }
   section#formularario_tipo_2 [type="checkbox"] + label:after {
   	height: 30px;
   	left: 0;
   	top: 0; 
   	transition: all 0.5s ease-in;
   	-ms-transition: all 0.5s ease-in;  /* para IE */
   	-moz-transition: all 0.5s ease-in;  /* para Firefox mozilla */
   	-o-transition: all 0.5s ease-in;  /* para Opere */
   	-webkit-transition: all 0.5s ease-in;  /* para Crom Safar */
   	width: 30px; 
   }
   section#formularario_tipo_2 [type="checkbox"] + label:hover {
   	color: #FFF;
   	background: #3C0;/*verde manzana*/
   	border-color: #F00 #C30 #C30 #F00;
   	border:double;
   	border-radius: .95rem;
   	-moz-border-radius: .95rem;
   	-webkit-border-radius: .95rem;
  	/*
	box-shadow: .1rem .1rem .1rem rgba(0,0,0,0.5); 
  	-ms-box-shadow: rgba(0,0,0,.5) .1rem .1rem .1rem .1rem;
  	-moz-box-shadow: rgba(0,0,0,.5) .1rem .1rem .1rem .1rem;
  	-o-box-shadow: rgba(0,0,0,.5) .1rem .1rem .1rem .1rem;
  	-webkit-box-shadow: rgba(0,0,0,.5) .1rem .1rem .1rem .1rem;
  	*/
  	transition: all 0.5s ease-in;
  	-ms-transition: all 0.5s ease-in;  /* para IE */
  	-moz-transition: all 0.5s ease-in;  /* para Firefox mozilla */
  	-o-transition: all 0.5s ease-in;  /* para Opere */
  	-webkit-transition: all 0.5s ease-in;  /* para Crom Safar */
  	text-shadow: black 0.3em 0.3em 0.4em;
  }
  /* OFF */
  section#formularario_tipo_2 [type="checkbox"]:not(:checked) + label:after {
  	background: url('../imagenes6/check_off.png') left center no-repeat;
  }
  /* ON */
  section#formularario_tipo_2 [type="checkbox"]:checked + label {
  	color: #fff;
  }
  section#formularario_tipo_2 [type="checkbox"]:checked + label:after {
  	background: url('../imagenes6/check_on.png') left center no-repeat;
  }
  /*Fin Estilo espacial checkbox y ratiobuton*/
  /* Listar Ordenadas*/
  ol {
  	padding: 0 2rem; 	
  }
  /* al tener espacio silgnifrica aplicar el estilo a los li que se encuentren dentro de las lo*/
  ol li {
  	padding: 1rem 0; 	
  }
  /*Estilos para las tablas*/
  table {
  	/*Con auto se le indica al navehador q ajuste los margenes, con 0 se elimnan margenes*/
  	/*	margin: 0 auto; Quitar luego ya q interfiere con menu viejo*/ 
  	border: 1px solid;	 
  	max-width: 100%;
  }
  table.Tabla_Estilo_1 {
  	margin-left:auto;
  	margin-right:auto;
  	padding-left:4px;
  	padding-right:4px;
  	vertical-align:top;
  }
  /*Aplicar border aca ya que al pasar a HTML5 no toma lo de la pagina html*/ 
  td, th, thead, caption {
  	/*Con auto se le indica al navegador q ajuste los margenes, con 0 se elimnan margenes*/
  	border-style: solid;
  	border-width: .1rem;
  	/*height:2rem;*/
  	margin: 0 auto; 	
  	padding-left: .2rem;
  	padding-right: .2rem;
  	padding-bottom: .3rem; 
  	padding-top: .2rem; 
  }
  /*Tablas td Fondo Amarillo Claro Claro, Borde naranca */
  /* Usado en Descriptiva*/
  td.td_Estilo_01 {
  	background-color: #FFC;
  	border-color: #F30;
  	border-style: solid;
  	border-width: .1rem;
  	padding-left: .2rem;
  	padding-right: .2rem;
  }
  /* Evita que ajusten el usuario el tamaño, es necesario por responsewebdesign */

  textarea {
  	/*	resize:none;  lo quite me dio eror con el control tipo wor luego pruebo con nueva version*/
  }

  /*-------------------------------------------------*/
  /*3) IDENTIFICADORES:Definir los estilos para los IDENTIFICADORES (id). Los id' # */
  /*-------------------------------------------------*/
  /* Hacer como un titulo en una especie de de banner */
  /*usalo en boletas primaria maternal y preescolar*/
  div#area_texto,
  div#area_nota
  {
  	display: inline-block;
  	width:90%;		
  }
  div#area_nota
  {
  	width:5%;		
  }
  #banner_AppEduRed,
  #banner_Marquesina1,
  #banner_NoticiasGenerales1,
  #banner_NoticiasGenerales2
  {
  	background-color: #FFF;
  	padding: .25rem;
  	margin-bottom: .2rem;
  	width: 98%;
  }
  #banner_AppEduRed
  {
  	font-size: .6rem;
  	margin-bottom: .2rem;
  	padding: .15rem;
  }
  #banner_NoticiasGenerales1_Ajuste_1
  {
  	background-color: #FFF;
  	/*height:570px;*/
  	margin-bottom: .2rem;
  	overflow: auto;	
  	padding: .25rem;
  	width: 96%;	
  	overflow: auto;
  }
  #banner_periododeprueba 
  {
  	background-color:#FF6;
  	color:#093;
  	font-size: 1.5rem;
  	font-weight: bold ;	
  	max-width: 97%;
  	padding: .25rem;
  	margin-bottom: 0.5rem;
  	width: 96%;
  }
  #banner_suspensiondeServicio 
  {
  	background: #FF0000;  rojo 
  	border-color: #FFFF00; /* amarillo */
  	color:#FFFF00;
  	font-size: .8rem;
  	font-weight: bold ;	
  	padding: .15rem;
  	margin-bottom: 0.5rem;
  	width: 96%;
  }
  #banner_usuarios_datos 
  {
  	width: 96%;
  }
  /*Monta la imagen en el boton de borrar input */
  input#borrar{
  	background: #FF0 url(../imagenes6/BorrarPapelera1.png) no-repeat 98% center;
  	max-width: 7rem;
  	min-width: 6rem;
  }
  input#borrar:hover
  {
  	color: #FFF;
  	background: #900; /* Rojo Ladrillo */
  	border-color: #F00 #C30 #C30 #F00;/*rojo, otro rojo,*/
  	border:double;
  	border-radius: .95rem;
  	-moz-border-radius: .95rem;
  	-webkit-border-radius: .95rem;
  	transition: all 0.5s ease-in;
  	-ms-transition: all 0.5s ease-in;
  	-moz-transition: all 0.5s ease-in;
  	-o-transition: all 0.5s ease-in;
  	-webkit-transition: all 0.5s ease-in;
  }
  /*Monta la imagen en el boton de buscar input */
  input#buscar {
  	background: #FF0 url(../imagenes6/Buscar.ico) no-repeat 98% center;
  	max-width: 6rem;
  	min-width: 5rem;
  }
  /*Monta la imagen en el boton de Modificar input*/
  input#modificar{
  	background: #FF0 url(../imagenes6/valid.png) no-repeat 98% center;
  	max-width: 7rem;
  	min-width: 6rem;
  }
  input#modificar:hover
  {
  	color: #FFF;
  	background: #3C0;/*verde manzana*/
  	border-color: #F00 #C30 #C30 #F00;/*rojo, otro rojo,*/
  	border:double;
  	border-radius: .95rem;
  	-moz-border-radius: .95rem;
  	-webkit-border-radius: .95rem;
  	transition: all 0.5s ease-in;
  	-ms-transition: all 0.5s ease-in;
  	-moz-transition: all 0.5s ease-in;
  	-o-transition: all 0.5s ease-in;
  	-webkit-transition: all 0.5s ease-in;
  }
  #cabecera_y_escudo {
  	/*	max-width: 95%;*/
  	/*	margin: .1rem .1rem;*/
  	/*	padding: .7rem .6rem;*/
  	border:1px solid;
  	margin-bottom: .2rem;
  	width: 98%;
  }
  #cabecera {
  	display:inline-block;
  	vertical-align: top;
  	width: 80%;
  }
  /*adapta la imegn de la cabecera a lo ancho*/
  #cabecera img{
  	width: 100%;
  }
  #escudo {
  	border:1px;
  	display:inline-block;
  	vertical-align: top;
  	width: 15%;
  }

  /*Efecto rotativo y ampliacion loco como para las noticias*/
  #divloco div {
  	border:1px solid #f00;
  	margin: 0rem auto;
  	text-align:center;
  	transition: all 2s ease-in-out;
  	-webkit-transition: all 2s ease-in-out;
  	-moz-transition: all 2s ease-in-out;
  	-o-transition: all 2s ease-in-out;
  	-ms-transition: all 2s ease-in-out;
  }
  #divloco div:hover, #divloco div.hover_effect {
  	-webkit-transform:rotate(720deg) scale(2,2);
  	-moz-transform:rotate(720deg) scale(2,2);
  	-o-transform:rotate(720deg) scale(2,2);
  	-ms-transform:rotate(720deg) scale(2,2);
  	transform:rotate(720deg) scale(2,2);
  }
  #nombredelcolegio  {
  	/*amarillo de fondo*/
  	/*background-color:#FF6;*/
  	/*crema o beige de fondo*/
  	/*background-color:#FFC;*/
  	/*Fuentes seguras van sin comillas por ser naturales de tosos los navegadores */
  	/*	font-family: "Chalet", Verdana, Helvetica; */
  	/*font-family: Helvetica,"Chalet", Verdana ; */
  	font-size: 2rem;
  	font-weight: bold ;	
  	/*max-width: 95%;*/
  	padding: .25rem;
  	margin-bottom: .2rem;
  	padding: .85rem;
  	width: 95%;
  }
  /*Se referencia en el div antes del menu*/
  #menu  {
  	background-color:#FF6;
  	font-size:.3rem;
  	height:2.8rem;
  	margin-top: .25rem;
  	margin-bottom: .25rem;
  	max-width: 98%;
  	padding: .5rem .1rem .1rem .1rem;
  	text-align: left;
  	width: 98%;
  	alignment-adjust:auto;
  }
  /*Especial para ocultar la lista de colegios y los enlaces*/
  #ocultar  	
  {
  	background-color:#FFF;
  	color:#FFFFFF;
  	font-size: .1rem;
  }
  #ocultar a,
  #ocultar a:active,
  #ocultar a:link,
  #ocultar a:visited
  {
  	color:#ffffff;
  	text-decoration: none;
  }

  section#contenido 
  {
  	border-radius: .5rem;
  	-moz-border-radius: .5rem;
  	-webkit-border-radius: .5rem;
  	/*height:80rem;*/
  	display:inline-block;
  	/*   margin: 0em 0rem 0rem .5rem ;*/
  	/*	margin: .1rem .1rem;*/
  	/*	max-width: 95%;*/
  	/*	padding: .7rem .6rem; me deja separa a la izquierda en iphone*/
  	margin: 0 auto;
  	/*	padding: .5rem;*/
  	vertical-align: top;
  	width: 98%;		
  }
  /*FORMULARIOS*/
  /* Gradient Generador  http://www.colorzilla.com/gradient-editor/*/
  /*formularario_tipo_1*/
  /* Para dar estilo a los formularios de ingreso de datos*/
  /*Pruebas form http://html5tutoriales.com/images/Tutoriales/ElementosBasicos/HTML/T0202/T0202.html*/
  /*Usado en: RegistrodeUsuario, Deposito Bancarios, Parametros*/
  section#formularario_tipo_1 form,
  section#formularario_tipo_2 form
  {
  	/*Pasa a los archivos de color */
  	/* 	background-color: #FBE080; Amarillo ocre*/
  	/*		background-color: #FFC;*//*Amarillo claro */
  	/*		background: -webkit-gradient( linear, left bottom, left top, color-stop(0,#FBE080), color-stop(1, #C0C0C0) );*/
  	/*	background: -moz-linear-gradient( center bottom, #FBE080 0%, #C0C0C0 100% ); */
  	border: solid;
  	border-color: #F60;
  	border-radius: .75rem; 
  	-moz-border-radius: .75rem;
  	-webkit-border-radius: .75rem;
  	border-style:solid;
  	border-width: .2rem;
  	margin: 0 auto .7rem auto;
  	overflow: auto;
  	padding: .3rem .5rem .0rem .5rem;
  	width: 98%;
  }
  section#formularario_tipo_1 form ul {
  	list-style: none;
  	margin: 0;
  	padding: 0;
  }
  section#formularario_tipo_1 form ul li {
  	margin: .2rem 0 0 0;
  	padding: 0;
  }
  section#formularario_tipo_1 form * 
  {
  	line-height: 1rem;
  }
  section#formularario_tipo_1 fieldset,
  section#formularario_tipo_2 fieldset
  {
  	background: #FFFFFF;
  	border: 2px solid #593131;
  	border-radius: .75rem; 
  	-moz-border-radius: .75rem;
  	-webkit-border-radius: .75rem;
  	margin: 0 0 .3rem .1rem;
  	padding: 0 .2rem .2rem .2rem;
  }
  section#formularario_tipo_1 legend,
  section#formularario_tipo_2 legend 
  {
  	background: #FFE98C;
  	border: .3rem solid #593131;
  	border-radius: 50% 35%;
  	-moz-border-radius: 50% 35%;
  	-webkit-border-radius: 50% 35%;
  	color: #000;
  	/*font-family: Arial, Helvetica, sans-serif;*/
  	font-size: 0.8rem;
  	font-weight: bold;
  	padding: .5rem;
  	margin: 0;
  	text-align: center;
  	/*  	width: 9rem;*/
  }
  section#formularario_tipo_1 label,
  section#formularario_tipo_2 label  {
  	clear: left;
  	display: block;
  	float: left;
  	font-size: .7rem;
  	font-weight: bold;
  	padding: .2rem 0 0 0;
  	margin: .1rem .2rem 0 0;
  	text-align: right;
  	width: 20%;
  }
  section#formularario_tipo_1 color,
  section#formularario_tipo_1 date, 
  section#formularario_tipo_1 input,  
  section#formularario_tipo_1 number, 
  section#formularario_tipo_1 radio,
  section#formularario_tipo_1 select, 
  section#formularario_tipo_1 textarea  
  {
  	background-color:#FFC; 
  	border: .1rem solid #F90;
  	border-radius: .5rem;
  	-moz-border-radius: .5rem;
  	-webkit-border-radius: .5rem;  
  	display: block;
  	margin: 0;
  	padding: .2rem;
  	width: 30%;
  }
  section#formularario_tipo_1 input,
  section#formularario_tipo_2 input  {
  	font-size: .9rem;
  }
  section#formularario_tipo_1 textarea {
  	font-size: .9rem;
  	height: 5rem;
  }
  /*esto lo aplicare a todo elimnando java funcion function foco(celda) usato asi:*/
  /* onFocus="foco(this);" onBlur="focoFuera(this)" ELINAR luego el java*/
  section#formularario_tipo_1 form *:focus,
  section#formularario_tipo_2 form *:focus {
  	background: #FFE;
  	border: .1rem solid #3C0;
  	font-weight: bold;
  	outline: none;
  	transition: all 0.5s ease-in;
  	-ms-transition: all 0.5s ease-in;  /* para IE */
  	-moz-transition: all 0.5s ease-in;  /* para Firefox mozilla */
  	-o-transition: all 0.5s ease-in;  /* para Opere */
  	-webkit-transition: all 0.5s ease-in;  /* para Crom Safar */
  }
  /*NO USO Ocurre con el llenado de valoores correcto o validoas*/
  section#formularario_tipo_1 input:valid, 
  textarea:valid 
  {
  	/*background: #efe;*/
  	/*background-color:#FFC; amarillo clarito*/
  }
  /*Alterar los imputs si estan vacior o con error */
  /*Campo con error*/
  section#formularario_tipo_1 input:required:invalid, 
  section#formularario_tipo_3 input:required:invalid
  {
  	/*	border: .3rem solid red; */
  	/*Muestra una imagen dentro del imput*/
  	background: #FFC url(../imagenes6/invalid.jpg) no-repeat 98% center;
  }
  /*campo sin error*/
  section#formularario_tipo_1 input:required:valid,
  section#formularario_tipo_3 input:required:valid 
  {
  	/*	border: .3rem solid green;*/
  	/*Muestra una imagen dentro del input*/
  	background: #FFC url(../imagenes6/valid.png) no-repeat 98% center;
  }
  /*Me traigo los estilos de class btnTipo_02 menos la imagen*/
  section#formularario_tipo_1 input[type="submit"],
  section#formularario_tipo_2 input[type="submit"], 
  section#formularario_tipo_3 input[type="submit"] 
  {
  	/*Muestra una imagen dentro del imput*/
  	background: #FFC url(../imagenes6/valid.png) no-repeat 98% center;
  	border: .2rem solid #F90; /*naranja*/
  	border-radius: .75rem;
  	-moz-border-radius: .75rem;
  	-webkit-border-radius: .75rem;  
  	color: #900;
  	cursor: pointer;
  	margin: 0px auto 0 auto;
  	font-size: .7rem;
  	font-weight: bold;
  	height: 2rem;
  	/*	margin-top: .5rem;*/
  	padding: .1rem;
  	width: 13rem;
  	-webkit-appearance: none;
  }
  section#formularario_tipo_1 input[type="submit"]:hover,
  section#formularario_tipo_2 input[type="submit"]:hover, 
  section#formularario_tipo_3 input[type="submit"]:hover
  {
  	/*Muestra una imagen dentro del submit*/
  	/*Fondo verde manzana borde amarillo*/
  	background: #3C0 url(../imagenes6/valid.png) no-repeat 98% center; /*naranja*/
  	border: .2rem solid #FF6;/*amarillo*/
  	border-radius: .95rem;
  	-moz-border-radius: .95rem;
  	-webkit-border-radius: .95rem;  
  	cursor: pointer;
  	color: #FFF;
  	/*font-size: .65rem;*/
  	-ms-transition: all 0.5s ease-in;  /* para IE */
  	-moz-transition: all 0.5s ease-in;  /* para Firefox mozilla */
  	-o-transition: all 0.5s ease-in;  /* para Opere */
  	-webkit-transition: all 0.5s ease-in;  /* para Crom Safar */
  	transition: all 0.5s ease-in;
  	/*text-shadow: black 0.3em 0.3em 0.4em;*/
  }
  section#formularario_tipo_1 input[type="submit"]:active,
  section#formularario_tipo_2 input[type="submit"]:active, 
  section#formularario_tipo_3 input[type="submit"]:active {
  	background: #eee;
  }
  /* Id s particulares de este formulario */
  /*Letra de la cedula espacio menor */
  section#formularario_tipo_1 #letracedula1 {
  	display:inline-block;
  	vertical-align: top;
  	width: 3.2rem;	
  }
  /*Numero de la cedula espacio menor y continua en misma linea*/
  section#formularario_tipo_1 #cedula1, 
  section#formularario_tipo_1 #matricula,
  section#formularario_tipo_1 #tipodeusuario 
  {
  	display:inline-block;
  	vertical-align:top;
  	width: 10rem;	
  }
  /*Ajustar linea de fecha alineada dia mes año combos*/
  section#formularario_tipo_1 #d_dia, 
  section#formularario_tipo_1 #d_mes  {
  	display:inline-block;
  	width: 3.5rem;	
  }
  section#formularario_tipo_1 #d_ano  {
  	display:inline-block;
  	width: 4.4rem;	
  }
  /* todas las q lleven span explicativo tentran inline-block*/
  section#formularario_tipo_1 #email, 
  section#formularario_tipo_1 #txtusuario {
  	display:inline-block;
  	vertical-align:top;
  }
  /* === Form hints === */  
  section#formularario_tipo_1 .form_hint {  
  	background: #d45252;  /* naranja */
  	border-radius: .8rem;  
  	-moz-border-radius: .8rem;
  	-webkit-border-radius: .8rem;  
  	color: white;
  	display:inline-block;
  	font-size: .7rem;  
  	margin-left: 1rem;  
  	padding: .1rem .6rem;  
  	width: 35%;
  }
  /* Formolario donde se pide el lapso de la evaluacion*/
  section#formularario_tipo_1 #lapso_combo_2,
  section#formularario_tipo_1 #lapso_submit_2 { 	
  	display:inline-block;
  	vertical-align:top;
  	width: 30%;	
  }
  section#formularario_tipo_1 #lapso_combo_2 {
  	width: 60%;	
  }
  section#formularario_tipo_1 #lapso_submit_2 {
  	width: 30%;	
  }
  /* Ancho de los controles tamaño*/
  section#formularario_tipo_1 .ancho98{
  	width: 98%;	
  }
  /* Formulario donde se pide el Deposito y Transferencia Bancario */
  section#formularario_tipo_1 .mitad {
  	/*	display:inline-block;*/
  	width: 49.5%;	
  	display:inline-block;
  }
  section#formularario_tipo_1 #numero_de_deposito,
  section#formularario_tipo_1 #numero_de_cuenta_donde_deposito, 
  section#formularario_tipo_1 #nombre_del_depositante,
  section#formularario_tipo_1 #nombre_del_banco,
  section#formularario_tipo_1 #monto_depositado,
  section#formularario_tipo_1 #tipo_de_deposito,
  section#formularario_tipo_1 #numero_de_cheque,
  section#formularario_tipo_1 #nombre_del_banco_cliente,
  section#formularario_tipo_1 #concepto_del_deposito,
  section#formularario_tipo_1 #comentario,
  section#formularario_tipo_1 #numero_de_desde
  {
  	display:inline-block;
  	vertical-align:top;
  	width: 18%;
  }
  /*Radios Boton*/
  section#formularario_tipo_1 #cuenta1,
  section#formularario_tipo_1 #cuenta2,
  section#formularario_tipo_1 #cuenta3,
  section#formularario_tipo_1 #cuenta4,
  section#formularario_tipo_1 #cuentaPagoMovil
  {
  	display:inline-block;
  	margin: .5rem auto;
  	width: 1%;
  }
  /*Usandose en Parametros*/
  section#formularario_tipo_1 .ubicacion1
  {
  	display:inline-block;
  	float: left;
  	vertical-align:top;
  }
  section#formularario_tipo_1 .comboSiNo
  {
  	width: 3.3rem;
  }
  section#formularario_tipo_1 .comboCurso
  {
  	width: 4.2rem;
  }
  section#formularario_tipo_1 .tamanopparaPorcentajes
  {
  	width: 4.5rem;
  	text-align:right;
  }
  section#formularario_tipo_1 .tamanoparaNotasdePrimaria
  {
  	width: 2rem;
  	text-align:left;
  }
  section#formularario_tipo_1 .comboTamano2
  {
  	width: 13%;
  }
  section#formularario_tipo_1 .tamano50
  {
  	width: 50%;
  }
  section#formularario_tipo_1 .tamano70
  {
  	width: 70%;
  }
  section#formularario_tipo_1 .tamano85
  {
  	width: 85%;
  }
  section#formularario_tipo_1 .tamano93
  {
  	width: 93%;
  }
  section#formularario_tipo_1 .TamanCalendario
  {
  	width: 8rem;	
  }
  section#formularario_tipo_1 .labelTamano1
  {
  	width: 25%;
  }
  section#formularario_tipo_1 .textoTamano1
  {
  	width: 18%;
  }
  section#formularario_tipo_1 .textoTamano10
  {
  	width: 10%;
  }
  section#formularario_tipo_1 .textoTamano40
  {
  	width: 40%;
  }
  section#formularario_tipo_1 .textoTamano45
  {
  	width: 45%;
  }
  section#formularario_tipo_1 .textoTamano70
  {
  	width: 70%;
  }
  section#formularario_tipo_1 .HintsTamano1
  {
  	width: 55%;
  }
  section#formularario_tipo_1 .HintsTamano2
  {
  	width: 49%;
  }
  section#formularario_tipo_1 .HintsTamano3
  {
  	width: 29%;
  }
  section#formularario_tipo_1 .HintsTaman4
  {
  	width: 47%;
  }
  /*Ajustes especiales para Carga de Notas*/
  /**/
  section#formularario_tipo_1 #nombreAlumno {
  	/*	float: none;*/
  	/*	 clear: none;*/
  	/*display:inline-block;*/
  	border-radius: .5rem;
  	-moz-border-radius: .5rem;
  	-webkit-border-radius: .5rem;  
  	display: block;
  	font-size: .7rem;
  	padding:0 .3rem 0 0;
  	width: 17rem;	
  }
  section#formularario_tipo_1 .muestraNota {
  	border-radius: .5rem;
  	-moz-border-radius: .5rem;
  	-webkit-border-radius: .5rem;  
  	display:inline-block;
  	/*  	display: block;*/
  	clear: none;
  	/*	float: none;*/
  	font-size: .7rem;
  	padding:0 .3rem 0 0;
  	width: 2.3rem;	
  }
  /* FIN formularario_tipo_1*/
  /*formularario_tipo_2*/
  /*Algunos ajustes se toman del tipo_1 formularario_tipo_1*/
  /* Usado en Planilla de Inscripcion*/
  /*por algo raro solo puedo cambiar aca el tamaño en chek del planilla de inscripcio*/
  section#formularario_tipo_2 label  {
  	font-size: 1.5rem;
  	width: 23%;
  }
  /* FIN formularario_tipo_2*/

  /*formularario_tipo_3*/
  /*Un tipo de formulario mas completo y complejo*/
  /*partiendo de tipo_1 pero no dependiente */
  /* se paramatrecira todos ajustar para no usar los li ul etc...*/
  /*utilizado en: enVio de correos,  */
  section#formularario_tipo_3 form 
  {
  	border: solid;
  	border-color: #F60;
  	border-radius: .75rem; 
  	-moz-border-radius: .75rem;
  	-webkit-border-radius: .75rem;  
  	border-style:solid;
  	border-width: .1rem;
  	margin: 0 auto .7rem auto;
  	overflow: auto;
  	padding: .3rem .5rem .0rem .5rem;
  	width: 98%;
  }
  /*No se usa los li ul */
  section#formularario_tipo_3 form ul {
  	list-style: none;
  	margin: 0;
  	padding: 0;
  }
  section#formularario_tipo_3 form ul li {
  	margin: .2rem 0 0 0;
  	padding: 0;
  }
  section#formularario_tipo_3 form * 
  {
  	/*line-height: .5rem;*/
  }
  section#formularario_tipo_3 fieldset 
  {
  	background: #FAFF9E;
  	background: -webkit-gradient( linear, left bottom, left top, color-stop(0,#C0C0C0), color-stop(1, #FBE080) );
  	background: -moz-linear-gradient( center bottom, #C0C0C0 0%, #FBE080 100% );  
  	border: 2px solid #593131;
  	border-radius: .75rem; 
  	-moz-border-radius: .75rem;
  	-webkit-border-radius: .75rem;
  	margin: 0 0 .3rem .1rem;
  	padding: 0 .2rem .2rem .2rem;
  }
  section#formularario_tipo_3 legend 
  {
  	background: #FFE98C;
  	border: .3rem solid #593131;
  	border-radius: 50% 35%;
  	-moz-border-radius: 50% 35%;
  	-webkit-border-radius: 50% 35%;
  	color: #000;
  	display:block;  	
  	font-size: .5rem;
  	/*font-weight: bold;*/
  	padding: .5rem;
  	margin: .5rem;
  	text-align: center;
  }
  section#formularario_tipo_3 checkbox, 
  section#formularario_tipo_3 color,
  section#formularario_tipo_3 date, 
  section#formularario_tipo_3 input,  
  section#formularario_tipo_3 number, 
  section#formularario_tipo_3 option,
  section#formularario_tipo_3 radio,
  section#formularario_tipo_3 select, 
  section#formularario_tipo_3 text,
  section#formularario_tipo_3 textarea
  {
  	background-color:#FFC;
  	border: .1rem solid #3C0; 
  	border-radius: .5rem;
  	-moz-border-radius: .5rem;
  	-webkit-border-radius: .5rem;  
  	margin: .2rem .1rem .2rem 0rem;
  }
  section#formularario_tipo_3 input  {
  	/*font-size: .5rem;*/
  }
  section#formularario_tipo_3 label  {
  	font-size: .5rem;
  	margin: .2rem .1rem .2rem .5rem;
  	text-align: right;
  }
  section#formularario_tipo_3 select { 
  	/*font-size: .5rem;*/
  }
  section#formularario_tipo_3 textarea {
  	/*
  	font-size: .5rem;
  	height: 15rem;
  	*/
  }
  section#formularario_tipo_3 form *:focus {
  	background: #FFF; 
  	border: .1rem solid #3C0;
  	border-radius: .5rem;
  	-moz-border-radius: .5rem;
  	-webkit-border-radius: .5rem;  
  	/*font-weight: bold;*/
  	outline: none;
  	/*
  	transition: all 0.5s ease-in;
  	-ms-transition: all 0.5s ease-in;
  	-moz-transition: all 0.5s ease-in;
  	-o-transition: all 0.5s ease-in;  
  	-webkit-transition: all 0.5s ease-in;
  	*/
  }
  /*NO USO Ocurre con el llenado de valoores correcto o validoas*/
  section#formularario_tipo_3 input:valid, 
  section#formularario_tipo_3 textarea:valid 
  {
  	/*background: #efe;*/
  	/*background-color:#FFC; amarillo clarito*/
  }
  /*Alterar los imputs si estan vacior o con error */
  /*Campo con error*/
  section#formularario_tipo_3 p {  
  	display:inline-block;
  	font-size: .5rem;  
  	line-height: 1rem;
  	padding: .2rem;
  	text-align:left;
  }

  /* === Form hints === */  
  section#formularario_tipo_3 .form_hint {  
  	background: #d45252;  /* naranja */
  	border-radius: .8rem;  
  	-moz-border-radius: .8rem;
  	-webkit-border-radius: .8rem;  
  	color: white;
  	display:inline-block;
  	font-size: .5rem;  
  	margin-left: 1rem;  
  	padding: .1rem .6rem;  
  }
  section#formularario_tipo_3 .div_formularario_tipo_3 {
  	border-radius: .75rem; /*borde redondeado*/
  	-moz-border-radius: .75rem;
  	-webkit-border-radius: .75rem;
  	/*font-size: .7rem;*/  
  	padding: .1rem;
  	margin-bottom: .1rem;
  	margin-top: .1rem;
  	text-align:left;
  	width: 98%;
  }
  /*FIN formularario_tipo_3*/
  /* FIN FORMULARIOS*/
  section#lateral, 
  section#lateral_2, 
  section#lateral_Detalle,
  section#lateral_twitter, 
  section#principal, 
  section#principal_tipo2 {
  	/*	border: double;*/
  	border-radius: .5rem;
  	-moz-border-radius: .5rem;
  	-webkit-border-radius: .5rem;  
  	display:inline-block;
  	/*	height : 45rem;*/
  	/*	max-width: 100%;*/
  	/*	padding: 0.25rem;*/
  	/*	margin: .1rem .1rem;*/
  	/*	min-height: 20rem;*/
  	/*	padding: .7rem .6rem; me desajsta los laterales*/
  	padding: .5rem;
  	vertical-align: top;
  	width: 70%;
  }
  section#lateral {
  	/*height : 46.1rem;*/
  	/*height : 100%;*/
  	vertical-align: top;
  	width: 25%;	
  }
  /*Igual al lateral solo cambio la altura*/
  section#lateral_2 {
  	/*height : 50rem;*/
  	vertical-align: top;
  	width: 25%;	
  }
  section#lateral_Detalle {
  	/*height : 52rem;*/
  	vertical-align: top;
  	width: 25%;	
  }
  section#lateral_twitter {
  	height: 92%; 
  	vertical-align: top;
  	width: 10%;	
  }
  article#descriptiva, 
  section#fotosportada,
  section#agendadeActividades, 
  section#marquesina3
  {
  	border-radius: .5rem;
  	-moz-border-radius: .5rem;
  	-webkit-border-radius: .5rem;
  	display: block;
  	margin: 0 auto;
  	margin-bottom: 1%;
  	max-width: 100%;
  	padding: .25rem;
  	vertical-align: top;
  	width: 98%;	
  }
  section#agendadeActividades
  {
  	height: 31%; 
  	overflow: auto;		
  }
  section#fotosportada 
  {
  	margin-top: 2%;
  }
  section#lateral,
  section#lateral_2
  {
  	border-radius: .5rem;
  	-moz-border-radius: .5rem;
  	-webkit-border-radius: .5rem;
  	/*	display: block;*/
  	margin: 0 auto;
  	margin-bottom: .9rem;
  	/*	max-width: 100%;*/
  	/*	max-height : 100%;*/
  	padding: .25rem;
  	vertical-align: top;
  	width: 25%;	
  }
  section#banner_Marquesina2
  {
  	height: 19%;
  }

  #pie 
  {
  	background-color:#FF6;
  	margin: 0rem 0rem 0em .5rem ;
  	max-width: 95%;
  	padding: .25rem;
  	margin-top: .2rem;
  	width: 95%;
  }
  section#principal_tipo2{
  	/*	border: double;*/
  	width: 95%;		
  }

  /*Maquetación de páginas de EduDatos*/
  section#EduDatos_Contenido {
  	border-radius: .5rem;
  	-moz-border-radius: .5rem;
  	-webkit-border-radius: .5rem;  
  	display:inline-block;
  	margin: 0 auto;
  	vertical-align: top;
  	width: 98%;		
  }
  section#EduDatos_Lateral_Derecho,
  section#EduDatos_Principal 
  {
  	border-radius: .5rem;
  	-moz-border-radius: .5rem;
  	-webkit-border-radius: .5rem;
  	display:inline-block;	
  	/*margin: 0 auto;*/
  	margin: .2rem .2rem .2rem .2rem;
  	margin-bottom: .9rem;
  	padding: .25rem;
  	vertical-align: top;
  	width: 20%;	
  }
  section#EduDatos_Principal{
  	display:inline-block;	
  	width: 75%;		
  }
  #EduDatos_Actividad{
  	padding: .25rem;
  }
  /*FIN Maquetacion de páginas de EduDatos*/

  /*Tablas td Fondo Amarillo Claro Claro, Borde naranca */
  /* Usado en Descriptiva*/
  /* Usado en Noticias*/
  /* usandose en ColegioDocentes */
  #texto_descriptivo_1 
  {
  	background-color: #FFC;
  	border-color:#F30;
  	border-style: solid;
  	border-width: .2rem;
  	font-size: .9rem;
  	padding-left: .1rem;
  	padding-right: .1rem;
  }
  /*Efecto en mayúscula primara letra descriptivas <p></p> */
  #texto_descriptivo_1 p::first-letter 
  { 
  	font-size: 175%;
  	color: #8A2BE2;
  }
  /* Usado para describir el titulo de lo mostrado en la pagina actual*/
  /* usandose en ColegioDocentes  y como titulo en casi todas las paginas*/
  #titulo_descriptivo_1  {
  	border-radius: .75rem; /*borde redondeado*/
  	-moz-border-radius: .75rem;
  	-webkit-border-radius: .75rem;
  	/*Sombra de la caja*/
/*Elimino Sombreado
	box-shadow: .2rem .6rem .1rem rgba(0,0,0,0.5); 
  	-ms-box-shadow: rgba(0,0,0,.5) .2rem .6rem .1rem .1rem;
  	-moz-box-shadow: rgba(0,0,0,.5) .2rem .6rem .1rem .1rem;
  	-o-box-shadow: rgba(0,0,0,.5) .2rem .6rem .1rem .1rem;
  	-webkit-box-shadow: rgba(0,0,0,.5) .2rem .6rem .1rem .1rem;
  	*/
  	font-size: 1.1rem;
  	font-weight: bold ;	
  	max-width: 100%;
  	padding: .5rem;
  	margin-bottom: 1rem;
  	margin-top: .1rem;
  	text-align:center;
  	/* 3defecto en el texto*/
	/*
	text-shadow: 0px 2px 0px #888, 0px 3px 0px #777, 0px 1px 0px #999, 0px 5px 0px #555, 0px 6px 0px #444, 0px 4px 0px #666, 0px 7px 0px #333, 0px 8px 7px #001135; 
	*/
}
/*Similar al 1 pero mas modesto en diseño*/
/* usar en titulos ya internos*/
/*usado e: usuaris.asp(registro)*/
#titulo_descriptivo_2  {
	border-radius: .75rem; /*borde redondeado*/
	-moz-border-radius: .75rem;
	-webkit-border-radius: .75rem;
	font-size: 1rem;
	font-weight: bold ;	
	max-width: 95%;
	min-width: 70%;
	padding: .25rem;
	margin-bottom: 0rem;
	margin-top: .2rem;
	text-align:center;
	width: 70%;
}
/*-------------------------------------------------*/
/*4) CLASES::Definir los estilos para las clase . class= . */
/*-------------------------------------------------*/
.altoCelda15 { 
	height:1.5rem;
}
/*Llevar el ancho tamaño DE CONTROLES las etiquetas, imput etc..*/
.ancho10porciento 
{ 
	width: 10%;
}
.ancho50porciento 
{ 
	width: 50%;
}
.ancho100porciento { 
	width: 100%;
}
/*AJUSTAR LAS ALTURAS DE LOS CONTROLES*/
/*Intento crear contenido ajustado al tamaño*/
/*aplica a la altura total de las páginas*/
/*aplica al id=contenido*/
.altura_pagina_1 
{
	height: 61rem; 
	overflow: auto;	
	width: 98%;		
}
/*en descriptiva del colegio*/
.altura_40 
{
	height: 40%; 
	overflow: auto;	
	width: 98%;		
}
/*en fotos pagina inicial del colegio*/
.altura_30 
{
	height: 30%; 
	overflow: auto;	
	/*	width: 98%;		*/
}
/*aplica a id principal y id lateral_detalle */
.altura_principal 
{
	height: 92%; 
}
/*aplica a a la altura del twitter */
.altura_92 
{
	height: 92%; 
	overflow: auto;	
	width: 98%;		
}


/*Efecto (lupa zoom) de ampliar las imagenes al pasar el mouse por arriba */
/*ajystar luego la velocidad y uso particular*/
.aumenta_imagen img {
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
}
.aumenta_imagen img:hover {
	transform: scale(1.5);
	-webkit-transform: scale(2.5);
	-moz-transform: scale(2.5);
	-o-transform: scale(2.5);
	-ms-transform: scale(2.5);
}
/*Usado en la Boleta de primaria Boletin1_2*/
.BoletaPrimaria_Izquierda, 
.BoletaPrimaria_Derecha {
	border-radius: .5rem;
	-moz-border-radius: .5rem;
	-webkit-border-radius: .5rem;
	display:inline-block;
	max-width: 100%;
	padding: .25rem;
	margin-bottom: .5rem;
	margin-top: .5rem;

	text-align: left;
	vertical-align: top;
	width: 95%;
}
.BoletaPrimaria_Izquierda {
	width: 91%;
	text-align: left;
}
.BoletaPrimaria_Derecha {
	width: 3%;
	text-align: center;
}
.BoletaPrimaria_EspaciosEntreCajas {
	margin-bottom: 0rem;
}
/*se usa para la carga de notas*/
.BoletaPrimaria_EspaciosCarga {
	margin-bottom: .1rem;
	margin-top: .1rem;
}
/*esto se usa para mostrar las notas cargadas*/
.BoletaPrimaria_EspaciosMinimos {
	margin-bottom: 0rem;
	margin-top: 0rem;
	padding: 0rem;
}
/*esto se usa para mostrar las notas cargadas*/
.BoletaPrimaria_MuestraCuadroconNota {
	background:#3C0;/*verde manzana*/
	border-color: #FFFF00; /* amarillo */
	border-radius: .2rem;
	border:double;
	-moz-border-radius: .2rem;
	-webkit-border-radius: .2rem;  
	border-width: .1rem;
	color:#000;
	display:inline-block;
	font-weight: bold ;	
	margin-bottom: 0rem;
	margin-left: 1rem;
	margin-top: 0rem;
	padding: .3rem;
	width: 2%;
}
/*esto se usa para mostrar las notas cargadas
es similar al anterior pero usa menos espacio*/
.BoletaPrimaria_MuestraCuadroconNota_1 {
	background:#3C0;/*verde manzana*/
	border-color: #FFFF00; /* amarillo */
	border-radius: .2rem;
	-moz-border-radius: .2rem;
	-webkit-border-radius: .2rem;  
	color:#000;
	display:inline-block;
	font-weight: bold ;	
	margin: 0rem;
	padding: 0rem;
	width: 2%;
}
.BoletaPrimaria_MuestraCuadroconNotaenBlanco {
	background:#F60; /* naranja */
	border:double;
	border-width: .1rem;
	padding: .3rem;
}
/* Fin Boleta de Primaria */
/* Borde redondeado en tablas a mayor pixels mayor la curva redondeada */
.borderedondeado {
	border-radius: .75rem;
	-moz-border-radius: .75rem;
	-webkit-border-radius: .75rem;  
}
/* Botones */
/* estoy intentado llevar todo al boton_02*/
.btnBuscar {
	background:#3C0;/*verde manzana*/
	border: double;
	border-color: #FFFF00; /* amarillo */
	border-radius: .8rem;
	-moz-border-radius: .8rem;
	-webkit-border-radius: .8rem;
	border-width: .5rem;
	/*
	box-shadow: .7rem 1rem .4rem rgba(0,0,0,0.5); 
  	-ms-box-shadow: rgba(0,0,0,.5) .7rem .1rem .4rem .1rem;
  	-moz-box-shadow: rgba(0,0,0,.5) .7rem .1rem .4rem .1rem;
  	-o-box-shadow: rgba(0,0,0,.5) .7rem .1rem .4rem .1rem;
  	-webkit-box-shadow: rgba(0,0,0,.5) .7rem .1rem .4rem .1rem;
  	*/
  	color:#FFFF00;
  	display:inline-block;
  	font-weight: bold ;	
  	margin-bottom: .8rem;
  	margin-left:0;
  	/*	max-width: 95%;*/
  	padding: .0rem;
  	padding-bottom: .5rem;
  	/*	vertical-align: middle;*/
  	vertical-align:top;
  	width: 98%;
  }
  .btnTipo_01, 
  .btnTipo_01_Verde,
  .btnTipo_01_Verde_2,
  .btnTipo_02,
  .btnTipo_03,
  .btnTipo_04,
  .btnTipo_05,
  .boton-ir-arriba
  {
  	background: #FF0; /*Amarillo*/
  	/*  	border: .2rem solid #F90; Naranca*/
  	/*	border: 3px double #FC6; amarillo ocre*/
  	border: .2rem solid #F00; /*rojo*/
  	border-left-color: #FC9;
  	border-top-color: #FC9;
  	border-radius: .75rem;
  	-moz-border-radius: .75rem;
  	-webkit-border-radius: .75rem;
/* Elemino sombras
	box-shadow: .3rem .5rem .2rem rgba(0,0,0,0.5); 
  	-ms-box-shadow: rgba(0,0,0,.5) .3rem .5rem .2rem .1rem;
  	-moz-box-shadow: rgba(0,0,0,.5) .3rem .5rem .2rem .1rem;
  	-o-box-shadow: rgba(0,0,0,.5) .3rem .5rem .1rem .2rem;
  	-webkit-box-shadow: rgba(0,0,0,.5) .3rem .5rem .2rem .1rem;
  	*/
  	color: #900;
  	cursor: pointer;
  	/*font-family: Verdana, Arial, Helvetica, sans-serif;*/
  	font-size: .5rem;
  	margin: .1rem auto .1rem auto;
  	/*margin-top: .1rem;*/
  }
  .btnTipo_01, 
  .btnTipo_01_Verde,
  .btnTipo_01_Verde_2
  {
  	height: 2.2rem;
  	width: 5rem;
  }
  .btnTipo_01:hover,
  .btnTipo_01_Verde:hover,
  .btnTipo_01_Verde_2:hover,
  .btnTipo_02:hover,
  .btnTipo_03:hover,
  .btnTipo_04:hover,
  .boton-ir-arriba:hover
  {
  	color: #FFF;
  	background: #900; /* Rojo Ladrillo */
  	/* border: .2rem solid #3C0; verde manzana*/
  	border-color: #F00 #C30 #C30 #F00;/*rojo, otro rojo,*/
  	border:double;
  	border-radius: .95rem;
  	-moz-border-radius: .95rem;
  	-webkit-border-radius: .95rem;
  	transition: all 0.5s ease-in;
  	-ms-transition: all 0.5s ease-in;
  	-moz-transition: all 0.5s ease-in;
  	-o-transition: all 0.5s ease-in;
  	-webkit-transition: all 0.5s ease-in;
  }
  .btnTipo_01_Verde:hover,
  .btnTipo_01_Verde_2:hover,
  .btnTipo_05:hover
  {
  	background: #3C0;/*verde manzana*/
  	/*background: #47FF0A; verde manzana mas claro*/
  }
  .btnTipo_01_Verde_2
  /*se usa en cargar nominas exel manual en pagina*/
  /* en botones de parametros*/
  {
  	margin:1rem 1rem 1rem 1rem;
  	padding: .2rem;
  	width:9rem;
  }
  .btnTipo_02,
  .btnTipo_03 
  {
  	/*
	dejo tamaño sin fijar q se ajuste
	max-width: 20rem;Cambie de 10 a 20 LO PASO A 15 SALEN MUY GRANDE EN NOTAS PARCIASLE  por borones de nominas de primaria preescolar*/
	min-width: 5rem;
	padding: .1rem;
	/*Ver todos los botones de enlace de igual tamaño*/
	/*width: 10rem;*/
}
/*Usa Notas Parciales selecionar materias*/
.btnTipo_03 
{
	/*width: 2rem;*/
	/*width: 10rem;*/
	/*SE USA BOTONERS DE ENLACE Y LAS NOMINAS*/
	/*ELIMINO PARA VER Q SE AJUSTEN LOS BOTONES SOLOS 25042020*/
	/*width: 20rem;*/
}
/*Dar largo mayor a los botones usa pagina WebMasterEduRed1*/
.btnTipo_04 
{
	background: #FFF; /*Blanco*/
	border: 3.5px solid;	
	border-color:#F90; /*naranja*/
	font-size: 1rem;
	margin: .5rem;	
	padding: .2rem;
	font-weight:bold;
	width: 80%;
}
.btnTipo_05 
{
	/*SE USA BOTONES SUBIR FOTO PLANILLA MAS PEQUEÑO QUE EL 02, MENU PRIMARIA BACHILLERATO*/
	width: 12rem; /*10*/
}
.btnTipo_02:hover,
.btnTipo_03:hover,
.btnTipo_04:hover,
.boton-ir-arriba:hover
{
	/*background: #F90; naranja*/
	background: #3C0;/*verde manzana*/
}
.btnTipo_01:focus,
.btnTipo_01_Verde:focus,
.btnTipo_01_Verde_2:focus,
.btnTipo_02:focus,
.btnTipo_03:focus
{
	/*Ya no hace falta aca por tenerlo * en inicio css*/
	/*	outline: 0; Intento quitar border negro y cuadrado del focus*/
	/*	outline:none;*/
}
.btnTipo_01:active,
.btnTipo_01_Verde:active,
.btnTipo_01_Verde_2:active,
.btnTipo_02:active,
.btnTipo_03:active,
.btnTipo_04:active
{
	/* Disminuimos la cantidad de sombras */
  	/*
	box-shadow: .1rem .1rem .1rem rgba(0,0,0,0.5); 
  	-ms-box-shadow: rgba(0,0,0,.5) .1rem .1rem .1rem .1rem;
  	-moz-box-shadow: rgba(0,0,0,.5) .1rem .1rem .1rem .1rem;
  	-o-box-shadow: rgba(0,0,0,.5) .1rem .1rem .1rem .1rem;
  	-webkit-box-shadow: rgba(0,0,0,.5) .1rem .1rem .1rem .1rem;
  	*/
  	font-size: .45rem;
  	font-weight: bold;
  	/* Movemos ligeramente el botón hacia abajo */
  	position: relative;
  	top: 5px;
  	text-shadow: black 0.3em 0.3em 0.4em;
  }
  /*Ajusta tamaño botones notas parciales*/
  /*Lo usa Boton_Enlace_04_2*/
  .btnTipo_Ancho_15
  {
  	max-width: 15rem;
  }
  .boton-ir-arriba {
  	border: .2rem solid #F00; /*rojo*/
  	color:#000;
  	display:none;
  	padding:.5rem;
  	/*background:#024959;*/
  	/*font-size:20px;*/
  	cursor:pointer;
  	position: fixed;
  	bottom:2rem;
  	right:5%;
  }
  /* Fin Botones */
  /*	Color de fondo neutro, puede ser blanco o beige clarito para superficies muy grandes*/
  .Color_Fondo_Neutro {
  	background-color: #FFFFFF;/*Blanco*/	
  }
  .Color_Fondo_Neutro_1 {
  	background-color: #FFC; /*beige claritp*/
  }
  .Color_Fondo_Neutro_2 {
  	background-color: #FFCC00; /*Amarillo Ocre*/
  }
  .Color_Fondo_Neutro_3 {
  	background-color: #FF6; /*Amarillo*/
  }
  .Color_Fondo_Neutro_4 {
  	background-color: #FF9933; /*Naranja palido Para Alertas o resaltados*/
	/*
	Se pone muy ancho para dispositivos
	font-weight:bold;
	text-decoration:blink;
	text-shadow:0px 1px 0px #b23e35;
	*/
}
.Color_Fondo_Neutro_5 {
	background-color: #80FF00;/*verde manzana Para Alertas o resaltados*/
	font-weight:bold;
	padding:.5rem;
	text-decoration:blink;
	text-shadow:0px 1px 0px #b23e35;
}
.Color_Fondo_Neutro_5_1 {
	background-color: #80FF00;/*verde manzana Para Alertas o resaltados*/
}
.Color_Fondo_Neutro_6 {
	background-color: #CC6600; /*Rojo Ladrillo*/
}
.Color_Fondo_Neutro_7 {
	background-color: #FFB6C1; /*Rosa Claro*/
}
/*Para la Descriptiva; ejemplo la del colegio*/
.descriptiva_1  {
	height: 21.9rem; 
	overflow: auto;	
	padding: .1rem .7rem;
}
/*Usa pagina inicial de EduDatos cambiar por altura ya definidas arriba*/
/*esto solo lo esta usando paginas de la raiz webmaster...*/
.descriptiva_1_Ajusta_Alto_1 {
	height: 28rem; 
}
/*esto solo lo esta usando paginas de la raiz webmaster...*/
.descriptiva_1_Ajusta_Alto_2 {
	height:auto;
}
/*Usado en la cabnecera donde aparece foto y datos del alumno ejem:DatosdelAlumno*/
.DosColumnas_Izquierda, 
.DosColumnas_Derecha, 
.DosColumnas_Mayor_Altura_1,
.TresColumnas_Izquierda, 
.TresColumnas_Centro, 
.TresColumnas_Derecha {
	border-radius: .5rem;
	-moz-border-radius: .5rem;
	-webkit-border-radius: .5rem;
	display:inline-block;
 	/* Eliminar sombreado
	box-shadow: .3rem .5rem .2rem rgba(0,0,0,0.5); 
  	-ms-box-shadow: rgba(0,0,0,.5) .3rem .5rem .2rem .1rem;
  	-moz-box-shadow: rgba(0,0,0,.5) .3rem .5rem .2rem .1rem;
  	-o-box-shadow: rgba(0,0,0,.5) .4rem .3rem .5rem .2rem;
  	-webkit-box-shadow: rgba(0,0,0,.5) .3rem .5rem .2rem .1rem;
  	*/
  	font-size: .8rem;
  	height: 9.8rem;
  	max-width: 100%;
  	padding: .25rem;
  	margin-bottom: 1.2rem;
  	margin-top: .7rem;
  	text-align: left;
  	vertical-align: top;
  	width: 80%;
  }
  .DosColumnas_Izquierda {
  	width: 15%;
  	text-align: right;
  }
  .DosColumnas_Mayor_Altura_1 {
  	font-size: 0.65rem;
  	height: 18rem;
  }
  .TresColumnas_Centro {
  	display:inline-block;
  	text-align: left;
  	width: 60%;
  }
  .TresColumnas_Derecha {
  	display:inline-block;
  	text-align: right;
  	width: 15%;
  }
/* ELIMINO	
Efecto 3D  en texto dentro de una caja  ejemplo:nombre del centro escolar
.efecto3d {
	text-shadow: 0px 2px 0px #888, 0px 3px 0px #777, 0px 1px 0px #999, 0px 5px 0px #555, 0px 6px 0px #444, 0px 4px 0px #666, 0px 7px 0px #333, 0px 8px 7px #001135;
}
*/
/*Efectos de opacidad y transicion en la cabecera */
.fade {
	opacity: 1;
	filter: alpha(opacity=10);
	-ms-transition: all 0.5s ease-in;  /* para IE */
	-moz-transition: all 0.5s ease-in;  /* para Firefox mozilla */
	-o-transition: all 0.5s ease-in;  /* para Opere */
	-webkit-transition: all 0.5s ease-in;  /* para Crom Safar */
	transition: all 0.5s ease-in;
}
/* Efecto de opacidad al pasar el mouse*/
.fade:hover {
	-ms-transition: all 0.5s ease-out;  /* para IE */
	-moz-transition: all 0.5s ease-out;  /* para Firefox mozilla */
	-o-transition: all 0.5s ease-out;  /* para Opere */
	-webkit-transition: all 0.5s ease-out;  /* para Crom Safar */
	transition: all 0.5s ease-out;	
	opacity: 0.6;
	filter: alpha(opacity=7);
}

/* Letras Tamaños y estilos para las letras  */
/*Tamañ normal */
.Letra_Normal {
	font-size: 1rem;
	text-decoration: none;
}
.Letra_Pequena 
{
	font-size: .7rem;
	text-decoration: none;
}
.Letra_Pequenita 
{
	font-size: .5rem;
	text-decoration: none;
}
.Letra_Grande 
{
	font-size: 1.5rem;
	text-decoration: none;
}
.Letra_Negrita 
{
	font-weight: bold;
}
.Letra_Padding_1 {
	padding: .25rem;
}
/*Letras con caracteres del mismo tamaño i w*/
.Letra_MonoEspaciado {
	font-family:"Courier New", Courier, monospace;
}
/* Fin Letras tamaño y estilo */

/*Marco para Imegenes */
/*Usado en: DatosdelAlumno:FotodelAlumno*/
.Marco_Imagen_1 {
	/*	background: #FF0000;  rojo */
	border: solid;
	border-color: #FFFF00; /* amarillo */
	border-radius: .5rem;
	-moz-border-radius: .5rem;
	-webkit-border-radius: .5rem;
	border-width: .5rem;
	/*
	box-shadow: .4rem .7rem .1rem rgba(0,0,0,0.5); 
  	-ms-box-shadow: rgba(0,0,0,.5) .4rem .7rem .1rem .1rem;
  	-moz-box-shadow: rgba(0,0,0,.5) .4rem .7rem .1rem .1rem;
  	-o-box-shadow: rgba(0,0,0,.5) .4rem .7rem .1rem .1rem;
  	-webkit-box-shadow: rgba(0,0,0,.5) .4rem .7rem .1rem .1rem;
  	*/
  	color:#FFFF00;
  	display:inline-block;
  	margin: 0 auto;
  	max-width: 95%;
  	padding: .1rem;
  }
  .Marco_Imagen_2 {
  	border: solid;
  	border-color: #FFFF00; /* amarillo */
  	border-radius: .5rem;
  	-moz-border-radius: .5rem;
  	-webkit-border-radius: .5rem;
  	border-width: .2rem;
  	color:#FFFF00;
  	display:inline-block;
  	margin: 0 auto;
  	padding: .1rem;
  }	
  /*usado en el menu*/
  .Marco_Imagen_3 {
  	border: solid;
  	border-color: #FFFF00; /* amarillo */
  	border-radius: .5rem;
  	-moz-border-radius: .5rem;
  	-webkit-border-radius: .5rem;
  	border-width: .5rem;
  	color:#FFFF00;
  	display:inline-block;
  	margin: 0 auto;
  	width: 90px; 
  }

  /* Mensajes de Alerta e Informativos */
  /* Alertar o error grande rojo y amarillo usado en: */
  /* login1 para error de login; planiilladecontactoingresa para error en datos incompletos */
  .Mensaje_Alerta_1, 
  .Mensaje_Alerta_2,
  .Mensaje_Alerta_3,
  .Mensaje_Alerta_4 
  {
  	background: #FF0000; /* rojo */
  	border: double;
  	border-color: #FFFF00; /* amarillo */
  	border-radius: .8rem;
  	-moz-border-radius: .8rem;
  	-webkit-border-radius: .8rem;
  	border-width: .5rem;
  	color:#FFFF00;
  	display:inline-block;
  	/*font-family:Verdana, Geneva, sans-serif;*/
  	font-size: 1.5rem;
  	max-width: 95%;
  	padding: .25rem;
  	/*	text-shadow: black 0.3em 0.3em 0.4em;*/
  	/*	Efecto 3D  en texto*/
  	/*	 text-shadow: 0px 2px 0px #888, 0px 3px 0px #777, 0px 1px 0px #999, 0px 5px 0px #555, 0px 6px 0px #444, 0px 4px 0px #666, 0px 7px 0px #333, 0px 8px 7px #001135;*/
  	vertical-align: middle;
  	width: 95%;
  }
  /*Usado en error de registro de usuario ColegioUsuarioIngresa*/
  .Mensaje_Alerta_2 
  {
  	background-color:#FFC; /*amarillo clarito*/
  	border-color: #FF0000; /* rojo */
  	color:#000000;
  	font-size: 1rem;
  	text-align: center;
  }
/*Verde igual a los anteriore Usado por ejemplo
en mensaje insertado en libro de visitas*/
.Mensaje_Alerta_3 
{
	background-color:#00FF33; /*Verde*/
	border-color:green; 
	color:green;
	font-size: 1rem;
	text-align: center;
}
/*especial de mensajes EduRed
por ejemplo no lleno planilla de Datos*/
.Mensaje_Alerta_4 
{
	/*background-color:#FFD700; Verde Clarito*/
	background-color:#F5FFFA; /*MintCream */
	border-color: orange; 
	color:blue;
	font-size: .8rem;
	margin: 1rem 0 1rem 0;
	text-align: left;
}
/* Mensajes Informativos*/
/* usado en: DatosdelAlumno */
.Mensaje_Informacion_1 {
	border-width: .2rem;
	border-radius: .8rem;
	-moz-border-radius: .8rem;
	-webkit-border-radius: .8rem;
	display:inline-block;
	/*	font-size: .7rem;*/
	margin-bottom: 1rem;
	margin-top: .1rem;
	max-width: 95%;
	overflow: auto;	
	padding: .5rem;
	text-align:center;
	vertical-align: middle;
	width: 95%;
}
.Mensaje_Informacion_1_Alinea_I {
	text-align:left;
}
.Mensaje_Informacion_1_Alinea_J {
	text-align:justify;
}
/*Usado en titulos de las informaciones a la comunidad*/
/*NO LO USA NADIE 20240903*/
.Mensaje_Informacion_2 {
	background-color: #FFCC00; /*Amarillo Ocre*/
	border: .2rem solid;	 
	border-color: #F90; /* amarillo */
	border-radius: .5rem;
	-moz-border-radius: .5rem;
	-webkit-border-radius: .5rem;  
	/*color: #F90;  color de la fuente naranja */
	/*font-family:  Verdana, "Pecita",Helvetica; Fuentes seguras van sin comillas por ser naturales de tosos los navegadores */
	font-size: .8rem;
	font-weight: bold;
	margin-bottom: .5rem;
	padding-left: .5rem;
	width: 95%;
}
/* Fin de Mensajes de Alerta e Informativos */
/* Probar en Procesar AreasMostrar imagen de carga mienbtras se caraga una pagina */
/*Cargando la página*/
.precarga 
{
	background: url('../imagenes6/Cargando_2.gif') left center no-repeat;
	/*    background:transparent url(../imagenes6/Cargando_2.gif) center no-repeat;*/
}

/*Forzar a aparecer el scroll horizontal por ls mobiles*/
.scrollHorizontal 
{
	overflow-x: auto;
	white-space: nowrap;
}
/*Mostrar foto redondeada*/
/*Ejemplo;: Alumno*/
.avatar {
	/* cambia estos dos valores para definir el tamaño de tu círculo */
   /* height: 100px;
   width: 100px;*/
   height: 128px;
   width: 112px;
   /* los siguientes valores son independientes del tamaño del círculo */
   background-repeat: no-repeat;
   background-position: 50%;
   border-radius: 50%;
   background-size: 100% auto;
   border:1px solid #666;
 }
 .avatar_t1 {
 	border:.1px solid #666;
 	height: 3rem;
 	width: 2.8rem;
 }	
 /*Sombreado con transpariencia para cajas  tablas etc...*/
/* Elimino Sombreado en todos lados
.sombreado 
{
	box-shadow: .2rem .6rem .1rem rgba(0,0,0,0.5); 
  	-ms-box-shadow: rgba(0,0,0,.5) .2rem .6rem .1rem .1rem;
  	-moz-box-shadow: rgba(0,0,0,.5) .2rem .1rem .1rem .1rem;
  	-o-box-shadow: rgba(0,0,0,.5) .2rem .6rem .1rem .1rem;
  	-webkit-box-shadow: rgba(0,0,0,.5) .2rem .6rem .1rem .1rem;
}
*/
/*Ajustes especiales de imagenes tamaño*/
/*se usa en Tope_001_H5*/
.tamano_cabecera_01 {
	height:200px;
}
.tamano_escudo_01 {
	height:200px;
	width:150px;
}
/*Se usa en pagina inicial de edudatos*/
.tamano_escudo_02 {
	height:75px;
	width:70px;
}

/*****************/
/*Menu de http://web.tursos.com/como-hacer-un-menu-desplegable-multinivel-usando-solo-css/*/
.nav 
{
	display:inline-block;
	font-size: .5rem;
	max-width: 100%;
	text-align:left;
	width: 100%;
}
.nav li 
{
	list-style:none;
	/*margin: 0 auto;*/  
	margin: -.3rem .1rem;  /*corrije mucho espacio entre los menus*/
	padding: .1rem;
	text-decoration:none;
	/*vertical-align: top;*/
}
/*solo los li que sean descendientes directos del primer ul tengan float: left, esto es para que solo el menu principal sea horizontal y los submenús se mantengan en vertical*/
.nav > li 
{
	float:left;
}
.nav li a 
{
	background: #FFF; /*blanco color fondo menu*/
	border: .2rem solid #F00; /*rojo*/
	border-radius: .5rem;
	-moz-border-radius: .5rem;
	-webkit-border-radius: .5rem;
	color: #F60; /*naranja color letras del menu*/
	display: block;
	/*height: 1.5rem;*/	
	padding: .2rem .2rem .2rem .2rem; 
	transition: all 0.5s ease-in;
	-ms-transition: all 0.5s ease-in;  /* para IE */
	-moz-transition: all 0.5s ease-in;  /* para Firefox mozilla */
	-o-transition: all 0.5s ease-in;  /* para Opere */
	-webkit-transition: all 0.5s ease-in;  /* para Crom Safar */
}
.nav li a:hover 
{
	background: #212121;/*verde oscuro al pasar mouse reslata*/
	border: .1rem dashed #F60;
	border-radius: .85rem .85rem  0 .85rem;
	-moz-border-radius: .85rem .85rem  0 .85rem;
	-webkit-border-radius:.85rem .85rem  0 .85rem;
	color: #FFF;
/* 
	font-size: .7rem;
Eliino se mueve mucho el menu marea
	transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;  
	-moz-transition: all 0.5s ease-out; 
	-o-transition: all 0.5s ease-out;  
	-webkit-transition: all 0.5s ease-out;  
	*/
}
/*Los submenus por defecrto no seran 
visibles absolute=no afecte el ancho final*/
.nav li ul 
{
	display:none;
	list-style: none;
	margin-bottom: .1rem;
	margin-top: .1rem;
	position:absolute;
	min-width:140px;
}
/*mostrar submenu oculto*/
.nav li:hover > ul 
{
	display:block;
}
.nav li ul li 
{
	position:relative;
}
.nav li ul li ul 
{
	right:-140px;
	top:0;
}
.nav ul a:hover 
{
/*
	font-size: .7rem;
	-ms-transition: all 0.5s ease-out; 
	-moz-transition: all 0.5s ease-out; 
	-o-transition: all 0.5s ease-out;  
	-webkit-transition: all 0.5s ease-out; 
	transition: all 0.5s ease-out;
	*/
}
.nav li .flecha
{
	font-size: .5rem;
	padding-left: .5rem;
	display: none;
}
.nav li a:not(:last-child) .flecha 
{
	display: inline;
}
/* Fin Menu Tradicional o el primero hecho*/
/*Menu diseñado con jQuery UI 
http://www.desarrolloweb.com/articulos/jquery-user-interfaz-menu.html
todas las casses de tipo ul-menu las maneja jQuery UI
*/
/* Vertical*/
.ui-menu {
	/*	width: 50%;*/
	display:inline-block;
	/*font-family: Verdana, Arial, Helvetica, Trebuchet MS;*/
	font-size: .5rem;
	/*	margin: 1.3rem 1.3rem;  NO HACE NADA ACAmargen alrrededos de todos los li*/
	max-width: 100%;
	text-align:left;
	width: 100%;
}
/*Fin Vertical*/

/* Poner HORIZONTAL Menu disenado con jQuery UI */
/*
.ui-menu {
	overflow: hidden; 
	font: 13px Arial;
	width: 98%;
}
.ui-menu .ui-menu {
	overflow: visible !important;
}
.ui-menu > li {
	float: left;
	display: block;
	width: auto !important;
}
.ui-menu ul li {
	display:block;
	float:none;
}
.ui-menu ul li ul {
	left:120px !important;
	width:100%;
}
.ui-menu ul li ul li {
	width:auto;
}
.ui-menu ul li ul li a {
	float:left;
}
.ui-menu > li {
	margin: 5px 5px !important;
	padding: 0 0 !important;
}
.ui-menu > li > a {
	float: left;
	display: block;
	clear: both;
	overflow: hidden;
}
.ui-menu .ui-menu-icon {
	margin-top: 0.3em !important;
}
.ui-menu .ui-menu .ui-menu li {
	float: left;
	display: block;
}
*/
/*Fin Poner HORIZONTAL Menu diseñado con jQuery UI */
/*Menu diseñado con jQuery UI 
http://jquery-manual.blogspot.com/2013/02/crear-menu-con-jquery-ui.html
*/
/*
.ui-menu { width: 150px; }
.ui-menu #menuUI li {background: #FFFFFF;}
.ui-menu #menuUI li a{color: #2E2F3B;}
.ui-menu #menuUI li a:hover{font-style: italic;}
*/
/*Fin Menu con jQuery UI*/
/* Grafico de barras  con CSS http://www.cssblog.es/barras-graficas-con-css/*/
.graph {
	border: .3rem solid #B1D632;
	background: #FF9;
	padding: 2px;
	position: relative; 
	width: 200px;
}
.graph .bar {
	background: #B1D632;
	color: #333;
	display: block;
	height: 1rem;
	position: relative;
	line-height: 1rem;
	text-align: center;
}
.graph .bar span { 
	left: 1em; 
	position: absolute;
}
/*Fin tipo de grafico*/
/*Otro tipo de grafico 2 Usado en boleta de bachillerato*/
/*http://codepen.io/omascaros/pen/meJuG*/
/* da error al verificarlo con lint pero funciona
el detalle es q los imports deben ir al inicio
pero no se que hacer con las variables*/
@import "lesshat";
/* Mixings &  Variables */
@barHeight: 20px;
@borders: #717D95;
@primary: #59BAC0;
.transition (@property) {
	-webkit-transition: @property;
	-moz-transition: @property;
	-o-transition: @property;
	transition: @property 
}
.transform(@degree) {
	transform:rotate(@degree);
	-ms-transform:rotate(@degree);
	-webkit-transform:rotate(@degree); 
}
*{
	/*box-sizing: border-box;*/
}
.grafico-barras
{
	height: auto;
	margin: .2rem .2rem .2rem .2rem;
	position: relative;
	/*width: 80%;*/
	width: 65%;
}
.barra-fondo
{
	background: #DAE4EB;
	border: 1px solid;	 
	border-radius: 0.5rem;
	-moz-border-radius: .5rem;
	-webkit-border-radius: .5rem;  
	display: block;
	margin-bottom: 0rem;
}
.barras
{  
	background-color: cyan;    
	border: 1px solid;	 
	border-radius: 0.5rem;
	-moz-border-radius: .5rem;
	-webkit-border-radius: .5rem;  
	.transition(all 1s ease-out);
	cursor: pointer;
	display: block;
	height: 1rem;  
	margin-bottom: 0rem;
	padding-left: .5rem;
	position: relative;
	text-align:center;
	z-index: 9999;
	width: 0%;         
	&:hover {
		.transition(all 0.5s ease);
	}    
	&:last-child {
		margin-bottom: 0;
	}
	&:after {
		position: absolute;
		content: attr(data-value);
		display: none;
		font-size: 12px;
		border-radius: 4px;
		background: rgba(0,0,0,0.5);
		color: #fff;      
		padding: 0 10px;
		margin-left: 5px;
		left: 100%;
		top: 0;
	}
	&:hover:after {
		display: block;
	}  
	&-legend {
		position: absolute;
		margin-right: 10px;
		left: -40px ;
		z-index: 9999;
	}
}
/* Fin Otro tipo de grafico 2*/


/* Fin Graficos de barras CSS */

/* Ocultar etiquetas hits o opciones q 
por programacion no se meuestran pero tienen q estar
ejemplo en ColegioDepositoBancario */
.ocultar {
	visibility:hidden;
}
/*Dar forma a tablas filas y columnas*/
.tabla_tipo1 {
	width:95%;
}
.tabla_tipo1 caption {
	margin-bottom:.5rem; 
	height: 1rem; 
}
.tabla_tipo1 td { 
	border :3px solid #ccc; /*gris*/
	width: 50%; /*Aquí va el ancho de la Celda*/
	height: .7rem; /*Aquí el Alto*/
}
.tabla_tipo1 td:hover {
	background: #e0e0e0;
	color: #000;
}
.tabla_tipo1 th { 
	border :8px solid #ccc; 
	/*width: 50%; Aquí va el ancho de la Celda*/
	height: .5rem; /*Aquí el Alto*/
}

/*Realiza transpariencia deja ver el fondo*/
.transparente_80 {
	opacity: 0.8;
	filter:  alpha(opacity=80);
}

/* ProgressBar de jQueryUI*/
.ui-progressbar {
	position: relative;
}
.progress-label {
	color:#FFF;
	font-weight: bold;
	left: 50%;
	position: absolute;
	text-shadow: 1px 1px 0 #000;
	top: 4px;
}
/* Fin ProgressBar de jQueryUI */


/*Aplicable a las seudoclses inicia con :*/
/*Aplicando a text, textbox etc*/
/*NO FUNCIONA Y NO SE POR QUE SE LO PONGO DIRECTO A CADA CONTROL*/
:focus {
	background-color: #FF6;
	border: .2rem solid #3C0; 
	border-radius: .3rem;
	-moz-border-radius: .3rem;
	-webkit-border-radius: .3rem;  
	/*	box-shadow: .1rem .1rem .5rem rgba(255,102,0,5);*/
	/*	outline: thin solid #F60; este hacia que nunca pudire quitar el outline en focus*/
}


/* Efectos */
/*Blinking*/
.blink_me {
	-webkit-animation-name: blinker;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;

	-moz-animation-name: blinker;
	-moz-animation-duration: 1s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;

	animation-name: blinker;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@-moz-keyframes blinker {  
	0% { opacity: 1.0; }
	50% { opacity: 0.0; }
	100% { opacity: 1.0; }
}
@-webkit-keyframes blinker {  
	0% { opacity: 1.0; }
	50% { opacity: 0.0; }
	100% { opacity: 1.0; }
}
@keyframes blinker {  
	0% { opacity: 1.0; }
	50% { opacity: 0.0; }
	100% { opacity: 1.0; }
}
/*Fin Blinking*/
/*Reflejo sin probar */
.reflejo {
	margin: 25px;
	opacity: 0.8;
	border: 10px solid #eee;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));
}
.reflejo:hover {
	opacity: 1;
	-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
	-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
	-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
	box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
/* Fin Efectos */

/* Animaciones */
/* Efecto de girar y aumentar usado en el escudo */
@keyframes girar { 
	0% { 
		transform: rotate3d(0,0,0,0deg) scale(0,0); 
	} 
	100% { 
		transform: rotate3d(1,1,1,360deg) scale(1,1);   
	} 
} 
@-moz-keyframes girar {  /* Firefox */ 
	0% { 
		/*-moz-transform: rotate3d(0,0,0,0deg) scale(0,0); NO HACE 3D*/ 
		-moz-transform: rotate(0deg) scale(0,0); 
	} 
	100% { 
		/*-moz-transform: rotate3d(1,1,1,360deg) scale(1,1); NO HACE 3D*/  
		-moz-transform: rotate(360deg) scale(1,1); 
	} 
}
@-webkit-keyframes girar { /* Safari and Chrome ; Safari no rota 3d*/ 
	0% { 
		-webkit-transform: rotate3d(0,0,0,0deg) scale(0,0); 
	} 
	100% { 
		-webkit-transform: rotate3d(1,1,1,360deg) scale(1,1); 
	} 
} 
@-o-keyframes girar { /* para cuando ópera... */
	0% { 
		-o-transform: rotate3d(0,0,0,0deg) scale(0,0);  
	} 
	100% { 
		-o-transform: rotate3d(1,1,1,360deg) scale(1,1); 
	} 
} 
/* Lo usa el escudo */
.rueda1 { 
	animation: girar 5s 1; 
	-moz-animation: girar 5s 1; /* Firefox */ 
	-webkit-animation: girar 5s 1; /* Safari and Chrome */ 
	-o-animation: girar 5s 1; /* para cuando ópera... */ 
	-ms-animation: girar 5s 1; /* para cuando ie... */ 
}
/* Fin Efecto de girar y aumentar usado en el escudo */ 

/* Usando keyframes*/
/* Efecto de aumentar usado en nombre del colegio */
@keyframes aumentar_1 { 
	0% { 
		transform: scale(0,0);  
	} 
	100% { 
		transform: scale(1,1);   
	} 
} 
@-moz-keyframes aumentar_1 {  /* Firefox */ 
	0% { 
		-moz-transform: scale(0,0); 
	} 
	100% { 
		-moz-transform: scale(1,1);  
	} 
}
@-webkit-keyframes aumentar_1 { /* Safari and Chrome ; Safari no rota 3d*/ 
	0% { 
		-webkit-transform: scale(0,0); 
	} 
	100% { 
		-webkit-transform: scale(1,1); 
	} 
} 
@-o-keyframes aumentar_1 { /* para cuando ópera... */
	0% { 
		-o-transform: scale(0,0);  
	} 
	100% { 
		-o-transform:  scale(1,1); 
	} 
} 
/* Invoca el keyframe*/
.aumentar_cabecera { 
	animation: aumentar_1 5s 1; 
	-moz-animation: aumentar_1 5s 1; /* Firefox */ 
	-webkit-animation: aumentar_1 5s 1; /* Safari and Chrome */ 
	-o-animation: aumentar_1 50s 1; /* para cuando ópera... */ 
	-ms-animation: aumentar_1 5s 1; /* para cuando ie... */ 
}
/* Fin Efecto aumentar usado en el escudo */ 

/*Mover de derecha a izquierda cabecera*/
@keyframes mover { 
	0% {
		left: 20%;		 
	} 
	100% { 
		left: 0%;		 
	} 
}
@-moz-keyframes mover {  /* Firefox */ 
	0% {
		left: 20%;		 
	} 
	100% { 
		left: 0%;		 
	} 
}
@-webkit-keyframes mover { /* Safari and Chrome ; Safari no rota 3d*/ 
	0% {
		left: 20%;		 
	} 
	100% { 
		left: 0%;		 
	} 
}
@-o-keyframes mover { /* para cuando ópera... */
	0% {
		left: 20%;		 
	} 
	100% { 
		left: 0%;		 
	} 
} 
.mover_cabecera { 
	position: relative;
	animation: mover 5s 1; 
	-moz-animation: mover 5s 1; /* Firefox */ 
	-webkit-animation: mover 5s 1; /* Safari and Chrome */ 
	-o-animation: mover 5s 1; /* para cuando ópera... */ 
	-ms-animation: mover 5s 1; /* para cuando ie... */ 
}
/* PROGRESS BAR solo se ve en fire fox por ahora */
/* http://www.miguelkiko.com/css3slideshow.html#introduccion */
/* Revisar ejemplos completo de slider en esa pagina*/
/* ANIMATION BAR */
/* PROGRESS BAR */
@keyframes fullexpand {
	/* In these keyframes, the progress-bar is stationary */
	0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }
	/* In these keyframes, the progress-bar starts to come alive */
	4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }
	/* In these keyframes, the progress-bar moves forward for 3 seconds */
	16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }
	/* In these keyframes, the progress-bar has finished his path */
	17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }
	/* In these keyframes, the progress-bar will disappear and then resume the cycle */
	18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}
.progress-bar { 
	position: relative;
	top: -5px;
	width: 85%; 
	height: .5rem;
	background: #000;
	animation: fullexpand 25s ease-out infinite;
}
/*Efecto chicle */
@-moz-keyframes aumentar_1 {  /* Firefox */ 
	30% {
		-moz-transform: scaleX(1.25) scaleY(0.75);
	}
	40% {
		-moz-transform: scaleX(0.75) scaleY(1.25);
	}
	60% {
		-moz-transform: scaleX(1.15) scaleY(0.85);
	}
}
@-webkit-keyframes chicle {
	30% {
		-webkit-transform: scaleX(1.25) scaleY(0.75);
	}
	40% {
		-webkit-transform: scaleX(0.75) scaleY(1.25);
	}
	60% {
		-webkit-transform: scaleX(1.15) scaleY(0.85);
	}
}
.caja_animada:hover{
	animation: 2s chicle 1; 
	-moz-animation: 2s chicle 1; /* Firefox */ 
	-webkit-animation: 2s chicle 1;
	-o-animation: 2s chicle 1; /* para cuando ópera... */ 
	-ms-animation: 2s chicle 1; /* para cuando ie... */ 
}
/*Otro efecto de Balanceo */
@-moz-keyframes balanceo {
	20% {
		-moz-transform: scale(0.9) rotate(-3deg);
	}
	30%, 50%, 70%, 90% {
		-moz-transform: scale(1.1) rotate(3deg);
	}
	40%, 60%, 80% {
		-moz-transform: scale(1.1) rotate(-3deg);
	}
}
.caja_animada_balanceo1:hover{
	-moz-animation: 2s balanceo 1;
}



/*SlideShow de imagenes con CSS3 :: REVISAR la progressbar pertenece aca*/
/*http://www.miguelkiko.com/css3slideshow.html#introduccion*/

/* Fin Animaciones */
/* Fin keyframes */

/* Para Imprimir y lograr salto de pagina
http://www.desarrolloweb.com/articulos/saltos-pagina-imprimir-css.html*/
/* Para logrrar ee salto colocamos se coloca codigo en Print.css
<div class="saltopagina"></div>*/
@media all 
{
	div.saltopagina 
	{
		display: none;
	}
}
/* Fin Para Imprimir y lograr salto de pagina*/



/******************************/
/* Medias Querys: Son condcionales de CSS para Response Design */
/*  si es tamaño de la pagina ancho es < 1081 */
/*  screen media  aplica a las salidas de pantall */
/******************************/
/* Esquema de tamaños por dispositivos*/

/* Esquema DreamWeaver (boton Multimedia arriba)*/
/* 240 x 320 Teléfono de baja gama*/
@media only screen 
and (min-width : 240px) 
and (max-width : 320px) 
{
	/* STYLES GO HERE */ 
}
/* 320 x 480 SmartPhone*/
@media only screen 
and (min-width : 320px) 
and (max-width : 480px) 
{
	/* STYLES GO HERE */ 
}
/* 480 x 800 SmartPhone*/
@media only screen 
and (min-width : 480px) 
and (max-width : 800px) 
{
	/* STYLES GO HERE */ 
}
/* 768 x 1024 Table*/
@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) 
{
	/* STYLES GO HERE */ 
}
/* Fin Esquema DreamWeaver (boton Multimedia arriba)*/

/* Smartphones (vertical(portrait) and horizonta(landscape)l) ----------- */
@media only screen 
and (min-width : 320px) 
and (max-width : 481px) 
{
	div#area_texto,
	div#area_nota
	{
		display: inline-block;
		width:75%;		
	}
	div#area_nota
	{
		width:10%;		
	}
	div#banner_Marquesina1,
	div#escudo,
	div#inicio_salir, 
	div#menu,
	div#nombredelcolegio,
	div#pie_completo,
	div#reloj,
	div#banner_AppEduRed
	{ 
		display: none;
	}
	div#boton_inicio_solo_movil  
	{
		display:inline-block;
		float: left;
		width:27%;		
	}
	div#boton_salir_solo_movil
	{
		margin-left: 13rem;
		vertical-align:top;		
		width:27%;
	}
	div#cabecera  
	{
		display: none;
	}
	div#escudo_solo_movil
	{
		/* 	clear: left;*/
		display:inline-block;
		float: left;
		height: 13%;
		width:19%;		
	}
	div#nombredelcolegio_Solo_Movil
	{
		/*		display: inline-block;*/
		/*  		float: right;*/
		/*font-family: Helvetica,"Chalet", Verdana ; */
		font-size:1rem;
		/*font-weight:bold;*/
		height: 12%;
		margin: .2rem auto  .2rem  20%;
		text-align:center;
		vertical-align: middle;
		width:75%;
	}	
	div#titulo_descriptivo_1,
	div#titulo_descriptivo_2 
	{
		display: block;
		font-size: .75rem;
		text-shadow:none;
	}
	section#formularario_tipo_1 form 
	{	
		box-shadow:none;
		clear: left;
	}
	section#formularario_tipo_1 .comboTamano2
	{
		width: 25%;
	}
	section#formularario_tipo_1 .form_hint 
	{  
		/*display: none; REVISAR LUEGO*/
	}
	section#principal {
		margin-bottom: 0.2em;
	}
	section#principal, 
	section#lateral,
	section#lateral_Detalle,
	section#lateral_twitter
	{
		display: block;
		width: 98%;
	}
	section#principal 
	{
		display: none;
	}
	span#muestraFecha,
	span#muestraFacebook,
	span#muestraTwitter,
	span#muestraInstagram
	{
		display: none;
	}
/* Trabajando Tablas, ayuda jQuryMobile
usado en las Nominas de Notas Excel ver todas*/
table
{ 	
	font-size:.5rem;
	max-width:98%;
}
table#Tabla_Ancho_1
{ 	
	width:98%;
}
table#ListadeNominas
{ 	
	width:98%;
}
/*Ocultar columnas en tabla Nominas de Notas */
table#ListadeNominas th#th1,
table#ListadeNominas td#td1,
table#ListadeNominas th#th5,
table#ListadeNominas td#td5,
table#ListadeNominas th#th6,
table#ListadeNominas td#td6	
{ 	
	display: none;
}
/* Fin Tablas*/
.btnBuscar {
	box-shadow:none;
}
.DosColumnas_Izquierda {
	width: 28%;
	text-align: right;
}
input#txtasunto 
{
	font-size: .5rem;
	width: 85%;
}
/*Colocar el menu en una columna*/
.nav li {
	display: block;
	margin: 0;
	width: 65%;
}
.nav li:hover > ul 
{
	display:inline-block;
	margin-left: 5rem;
	width:50%;
}
}
/* Smartphones (Horizontal(landscape)) ----------- */ 
@media only screen 
and (min-width : 321px) 
{ 
	/* STYLES GO HERE */ 
} 
/* Smartphones (vertical (portrait)) ----------- */ 
@media only screen 
and (max-width : 320px)
{
	/* STYLES GO HERE */ 
} 

/* Ranngo aparentemente no cubierto al bajar tamño 
en navegador computador agrego extra al esquema */
@media only screen 
and (min-width : 481px) 
and (max-width : 767px) 
{
	div#escudo_solo_movil,
	div#boton_inicio_solo_movil,   
	div#boton_salir_solo_movil,
	div#menu_solo_movil,
	div#nombredelcolegio_Solo_Movil
	{
		display: none;
	}
}

/* iPads (vertical y horizontal) (portrait and landscape)  ----------- */ 
@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) 
{
	div#escudo_solo_movil,
	div#boton_inicio_solo_movil,   
	div#boton_salir_solo_movil,
	div#menu_solo_movil,
	div#nombredelcolegio_Solo_Movil
	{
		display: none;
	}
} 
/* iPads (horizontal)(landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) 
{
	div#escudo_solo_movil,
	div#boton_inicio_solo_movil,   
	div#boton_salir_solo_movil,
	div#menu_solo_movil,
	div#nombredelcolegio_Solo_Movil
	{
		display: none;
	}
} 
/* iPads (vertical) (portrait)  ----------- */ 
@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) 
and (orientation : portrait)
{
	/* STYLES GO HERE */ 
} 

/* Desktops and laptops ----------- */ 
@media only screen 
and (min-width : 1024px)
{
	div#escudo_solo_movil,
	div#boton_inicio_solo_movil,   
	div#boton_salir_solo_movil,
	div#menu_solo_movil,
	div#nombredelcolegio_Solo_Movil
	{
		display: none;
	}
} 

/* Pantallas grandes ----------- */ 
@media only screen 
and (min-width : 1824px)
{ 
	div#escudo_solo_movil,
	div#boton_inicio_solo_movil,   
	div#boton_salir_solo_movil,
	div#menu_solo_movil,
	div#nombredelcolegio_Solo_Movil
	{
		display: none;
	}
} 
/* iPhone 5 (vertical y horizontal)----------- */ 
@media only screen 
and (min-width : 320px) 
and (max-width : 568px) 
{
/*
	div#cabecera  
	{
		display: none;
	}
	div#nombredelcolegio
	{
		display: block;
		font-size: .85rem;
	}
	div#titulo_descriptivo_1,  
	div#titulo_descriptivo_2 
	{
		display: block;
		font-size: .75rem;
		text-shadow:none;
	}
	section#formularario_tipo_1 
	{	
		box-shadow:none;
	}
	section#principal_Login 
	{
		display: none;
	}
	.btnBuscar 
	{
		box-shadow:none;
	}
	.DosColumnas_Izquierda {
		width: 28%;
		text-align: right;
	}
	*/
} 
/* iPhone 5 (Horizontal)----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape)
{
	/* STYLES GO HERE */ 
} 
/* iPhone 5 (vertical)----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait)
{
	/* STYLES GO HERE */ 
}
/* iPhone 4 ———– */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (-webkit-min-device-pixel-ratio : 1.5), 
only screen 
and (min-device-pixel-ratio : 1.5) 
{ 
}