body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
	/* Simple page reset */
	margin:0;
	padding:0;
}

body{
	/* Setting default text color, background and a font stack */
	color:#cccccc;
	font-size:0.825em;
	background-color: #000000;   /* #1e2428 */
	font-family:Arial, Helvetica, sans-serif;
}


/*div de mapa de contacto*/

#map {
	width:100%;
	height:218px;
	float:right;
	position: relative; top: 10px;
	margin-right: -10px;
	clear:both;
}


/*div de redes sociales donde puse a facebook*/

#redes {
	width:100%;
	heigth:100px;
	float:center;
   margin-top: 5px;
   margin-bottom: 10px;
   font-size:30px;
   top: 10px;
   padding:10px;
}


#redes p{
	 float:center;
	 color: #2E64FE;
}

#redes a { color: #2E64FE; text-decoration: none; padding-bottom: 2px;  font-size:40px; position: relative; bottom: 10px; padding-right:10px; }
#redes a:hover { color: #2E9AFE; text-decoration: none; font-size:40px; padding-bottom: 10px; }


#mision {
	width:100%;
	heigth:270px;
	float:center;
   margin-top: -20px;
   font-size:13px;
   margin-left:-12px;
  /* top: 10px;    */
   color: #000;
}

#mision p{
	 float:center;
	 color: #000;
}
 /*
#mision h2{
	 float:center;
	 color: #000;
	 font-size:20px;
	 margin-left: 10px;
}          */

#mis1 p{
	 float:center;
	 color: #B45F04;
	 	/* The UL */
	float:center;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-align:center;

		/*Degradado de fondo*/
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FFBF00), to( #FFFFFF));/*Chrome y Safari*/  /* F7D358 FFBF00 */
	background-image: -moz-linear-gradient(top center, #FFBF00, #FFFFFF);/*Firefox*/
	background-image: -o-linear-gradient(top, #FFBF00, #FFFFFF);/*Opera*/
	background-image: linear-gradient(top, #FFBF00, #FFFFFF);/*Estandar por defecto*/
	/*Sombras para bloques o cajas*/
	-webkit-box-shadow:  1px -1px 0px #FFBF00;/*Chrome y Safari*/
	-moz-box-shadow:  1px -1px 0px #FFBF00;/*Firefox*/
	-o-box-shadow:  1px -1px 0px #FFBF00;/*Opera*/
	box-shadow:  1px -1px 0px #FFBF00;/*Estandar por defecto*/

	border:2px solid #FFBF00;
}

#mis2 p{
	 float:center;
	 color: #B45F04;
	 	/* The UL */
	float:center;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-align:center;

		/*Degradado de fondo*/
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FFBF00), to( #FFFFFF));/*Chrome y Safari*/  /* F7D358 FFBF00 */
	background-image: -moz-linear-gradient(top center, #FFBF00, #FFFFFF);/*Firefox*/
	background-image: -o-linear-gradient(top, #FFBF00, #FFFFFF);/*Opera*/
	background-image: linear-gradient(top, #FFBF00, #FFFFFF);/*Estandar por defecto*/
	/*Sombras para bloques o cajas*/
	-webkit-box-shadow:  1px -1px 0px #FFBF00;/*Chrome y Safari*/
	-moz-box-shadow:  1px -1px 0px #FFBF00;/*Firefox*/
	-o-box-shadow:  1px -1px 0px #FFBF00;/*Opera*/
	box-shadow:  1px -1px 0px #FFBF00;/*Estandar por defecto*/

	border:2px solid #FFBF00;
}



/*div de catalogo*/

#catalogo {
	width:100%;
	heigth:270px;
	float:center;
   margin-top: -20px;
   font-size:19px;
   margin-left:0px;
   /*top: 10px;  */
   clear:both;
}

#catalogo a { color: #3B240B ; text-decoration: none; padding-bottom: 2px;  font-size:11px; position: relative; bottom: 10px; }
#catalogo a:hover { color: #DF7401 ; text-decoration: none;  padding-bottom: 10px;  font-size:11px; padding-top: 3px;
	border:3px solid #FFBF00;
	box-shadow:  1px -1px 0px #DF7401;
	padding:4px;

 }

#catalogo nav ul{
    list-style:none;  /* Con esto evito que se pongan los puntos de lista*/
	padding:30px;
	width:100%;
	margin-right: 15px;
}


#catalogo nav ul li{
	/*Bordes redondeados*/
	-webkit-border-radius:5px;/*Chrome y Safari*/
	-moz-border-radius:5px;/*Firefox*/
	-o-border-radius:5px;/*Opera*/
	border-radius:5px;/*Estandar por defecto*/
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:20px;
	font-weight:bold;
	margin-right:10px;
	text-align:center;
	/*Sombras para texto, los mismos parametros que box-shadow*/
	/*text-shadow: 0px 1px 0px #FFF;  */
	border:1px solid #F7D358;
	padding:8px;
	padding-right:10px;
}
#catalogo nav ul li:hover{
	/*Degradado de fondo*/
	background-image: -webkit-gradient(linear, left top, left bottom, from(#F7D358), to( #F7D358));/*Chrome y Safari    FFBF00  FFFFFF*/
	background-image: -moz-linear-gradient(top center, #F7D358, #F7D358);/*Firefox*/
	background-image: -o-linear-gradient(top, #F7D358, #F7D358);/*Opera*/
	background-image: linear-gradient(top, #F7D358, #F7D358);/*Estandar por defecto*/
	/*Sombras para bloques o cajas*/
	-webkit-box-shadow:  1px -1px 0px #F7D358;/*Chrome y Safari*/
	-moz-box-shadow:  1px -1px 0px #F7D358;/*Firefox*/
	-o-box-shadow:  1px -1px 0px #F7D358;/*Opera*/
	box-shadow:  1px -1px 0px #F7D358;/*Estandar por defecto*/
	border:1px solid #F7D358;       /*E3E3E3*/  /* sombra de boton cuando se pone sobre el, el cursor*/
		padding:8px;
		padding-right:5px;
}




/*div de RECUADRO*/

#recuadro {
	width:100%;
	heigth:400px;
	float:center;
   margin-top: 20px;
   font-size:19px;
   margin-left:12px;
   top: 10px;
}

#recuadro a { color: #3B240B ; text-decoration: none; padding-bottom: 2px;  font-size:11px; position: relative; bottom: 10px; margin-right:30px; }
#recuadro a:hover { color: #DF7401 ; text-decoration: none;  padding-bottom: 3px;  font-size:11px; padding: 1px; margin-right:30px;
 }

#recuadro nav ul{
    list-style:none;  /* Con esto evito que se pongan los puntos de lista*/
	padding:30px;
	width:100%;
	margin-right: 15px;
}


#recuadro nav ul li{
	/*Bordes redondeados*/
	-webkit-border-radius:5px;/*Chrome y Safari*/
	-moz-border-radius:5px;/*Firefox*/
	-o-border-radius:5px;/*Opera*/
	border-radius:5px;/*Estandar por defecto*/
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:20px;
	font-weight:bold;
	margin-right:10px;
	text-align:center;
	/*Sombras para texto, los mismos parametros que box-shadow*/
	/*text-shadow: 0px 1px 0px #FFF;  */
	border:1px solid #F7D358;
	padding:8px;
	padding-right:10px;
}
#recuadro nav ul li:hover{
	/*Degradado de fondo*/
	background-image: -webkit-gradient(linear, left top, left bottom, from(#F7D358), to( #F7D358));/*Chrome y Safari    FFBF00  FFFFFF*/
	background-image: -moz-linear-gradient(top center, #F7D358, #F7D358);/*Firefox*/
	background-image: -o-linear-gradient(top, #F7D358, #F7D358);/*Opera*/
	background-image: linear-gradient(top, #F7D358, #F7D358);/*Estandar por defecto*/
	/*Sombras para bloques o cajas*/
	-webkit-box-shadow:  1px -1px 0px #F7D358;/*Chrome y Safari*/
	-moz-box-shadow:  1px -1px 0px #F7D358;/*Firefox*/
	-o-box-shadow:  1px -1px 0px #F7D358;/*Opera*/
	box-shadow:  1px -1px 0px #F7D358;/*Estandar por defecto*/
	border:1px solid #F7D358;       /*E3E3E3*/  /* sombra de boton cuando se pone sobre el, el cursor*/
		padding:8px;
		padding-right:5px;
}





/*div de SIGUENOS*/

#siguenos {
	width:100%;
	heigth:400px;
	float:center;
   margin-top: 18px;
   font-size:19px;
   margin-left:-20px;
   top: 5px;
}

#siguenos a { color: #3B240B ; text-decoration: none; font-size:15px; position: relative; margin-right:20px; }
#siguenos a:hover { color: #DF7401 ; text-decoration: none;  font-size:15px;  margin-right:20px;}

#siguenos p{ color: #3B240B; font-size:30px;}

#siguenos a.galeria { color: #3B240B; text-decoration: none; font-size:13px; position: relative; margin-right:0px; bottom:20px; }
#siguenos a.galeria:hover { color: #DF7401; text-decoration: none; font-size:13px; position: relative; margin-right:0px; bottom:20px; }

#siguenos a.mensajeSiguenos { color: #3B240B; text-decoration: none; font-size:18px; position: relative; margin-right:0px; bottom:20px; }


  #imgInicio {
	width:100%;
	heigth:270px;
	float:center;
   margin-top: -30px;
   margin-left:-23px;
   color: #000;
}

  #direccion {
	width:100%;
	heigth:270px;
	float:center;
	 margin-top:-12px;
   margin-left:-23px;
   color: #000;
   font-size:10px;
}


  #direccion p{  color: #000; font-size:10px;}


  #mapad {
	width:100%;
	heigth:270px;
	float:center;
	 margin-top:-30px;
   margin-left:-23px;
   color: #000;
}


  #mapad p{  color: #000; font-size:11px; text-align:center;}














.tabContainer{
	/* The UL */
	float:right;
	padding-right:13px;
}

#contentHolder{
	background-color:#F7D358; /* EEEEEE FFBF00  F2DC6F #F7D358*/
	border:2px solid #FFBF00;   /*B18904 FFBF00 FFFFFF*/
	height:300px;
	margin:20px;
	
	color:#444444;
	padding:15px;
}

#tabContent{
	background-color:#333; /*# F2DC6F*/
	border:2px solid #B18904;
	margin-top:-15px;
	width:100%;
	height:74%;
}

#tabContent, .tabContainer li a,#contentHolder{
	-webkit-box-shadow:0 0 2px black;
	-moz-box-shadow:0 0 2px black;
	box-shadow:0 0 2px black;
}

.tabContainer li{
	/* This will arrange the LI-s next to each other */
	display:inline;
}

.tabContainer li a,.tabContainer li a:visited{
	/* Styling the hyperlinks of the tabs as colorful buttons */
	
	float:left;
	font-size:12px;
	
	/* display:block allows for additinal CSS rules to take effect, such as paddings: */
	display:block;
	
	padding:7px 16px 1px;
	margin:4px 5px;
	height:29px;
	
	/* Giving positioning */
	position:relative;
	
	/* CSS3 text-shadow */
	text-shadow:1px 1px 1px #000;     /*CCCCCC   Es la sombra de las las opciones de inicio, quienes somos, nuestra galeria, contacto*/
}

#overLine{
	/* The line above the active button. */
	position:absolute;

	height:1px;
	background-color:white;
	width:90px;
	
	float:left;
	left:1px;
	top:-5px;
	overflow:hidden;
}

#main{
	margin:0 auto;
	position:relative;
	width:700px;
		height:500px;                  /*lo coloque para hacerlo mas grande*/
}


ul .left{
	/* The left span in the hyperlink */
	
	height:37px;
	left:0;
	position:absolute;
	top:0;
	width:10px;
}

ul .right{
	/* The right span in the hyperlink */
	
	height:37px;
	right:0;
	position:absolute;
	top:0;
	width:10px;
}

/* Styling the colors individually: */

ul a.green{	background:url(img/green_mid.png) repeat-x top center;	color:#801017;}            /*24570f   FFBF00  522B02*/
ul a.green span.left{ background:url(img/green_left.png) no-repeat left top;}
ul a.green span.right{ background:url(img/green_right.png) no-repeat right top;}


ul a.blue{	background:url(img/blue_mid.png) repeat-x top center;	color:#801017;}         /*03426e     */
ul a.blue span.left{ background:url(img/blue_left.png) no-repeat left top;}
ul a.blue span.right{ background:url(img/blue_right.png) no-repeat right top;}


ul a.orange{	background:url(img/orange_mid.png) repeat-x top center;	color:#801017;}       /*724104 */
ul a.orange span.left{ background:url(img/orange_left.png) no-repeat left top;}
ul a.orange span.right{ background:url(img/orange_right.png) no-repeat right top;}


ul a.red{	background:url(img/red_mid.png) repeat-x top center;	color:#801017;}          /*6f0100  */
ul a.red span.left{ background:url(img/red_left.png) no-repeat left top;}
ul a.red span.right{ background:url(img/red_right.png) no-repeat right top;}


/* The hover states: */
ul a:hover{	background-position:bottom center; text-decoration:none;}
ul a:hover span.left{ background-position:left bottom;}
ul a:hover span.right{ background-position:right bottom;}

.preloader{
	display:block;
	margin:120px auto;
}

.clear{
	/* Old-school clear fix hack to clear the floats: */
	clear:both;
	height:1px;
	overflow:hidden;
}

/* The styles below are only necessary for the styling of the demo page: */

h1{
	background:#000000;   /* #121b21 */
	border-bottom:1px solid black;
	font-size:1.5em;
	font-weight:normal;
	margin-bottom:0px;
	padding:0px;
	text-align:center;
}

h2 {
	font-size:0.9em;
	font-weight:normal;
	padding-right:40px;
	position:relative;
	right:0;
	text-align:right;
	text-transform:uppercase;
	top:-48px;
}

a, a:visited {
	color:#0196e3;
	text-decoration:none;
	outline:none;
}

a:hover{
	text-decoration:underline;
}

p.tutInfo{
	/* The tutorial info on the bottom of the page */
	padding:3px 0;
	text-align:center;
	position:fixed;     /* relative*/
	bottom:0px;
	background:#121b21;
	border-top:1px solid black;
	width:100%;
	font-size:10px;
}

h1,h2,p.tutInfo{
	font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
}



/*div de CORREO*/

#correo {
	width:100%;
	heigth:270px;
	float:center;
   margin-top: -15px;
   font-size:11px;
   margin-left:0px;
   /*top: 10px;  */
   clear:both;
}

#correo h2 { color: #3B240B ; text-decoration: none;  font-size:10px; position: relative;}

#correo a { color: #3B240B ; text-decoration: none; padding-bottom: 2px;  font-size:11px; position: relative; bottom: 10px;
            	border:3px solid #AB6D03;
	box-shadow:  1px -1px 0px #DF7401;
	padding:4px; }
#correo a:hover { color: #DF7401 ; text-decoration: none;  padding-bottom: 10px;  font-size:11px; padding-top: 3px;
	border:3px solid #FFBF00;
	box-shadow:  1px -1px 0px #DF7401;
	padding:4px;

 }
 
 #correo p { color: #3B240B ; text-decoration: none; padding-bottom: 2px;  font-size:11px; position: relative; bottom: 7px; }
 
 
 /*TAMAÑO DE LOS CAMPOS PARA INGRESAR EL NOMBRE Y CORREO ELECTRONICO*/
input[type="text"] { width: 210px; height: 1px;}
textarea { width: 580px; height: 25px; }
label { color: #000000; text-shadow: 4px 2px 10px #FFF; font-family: Arial, Helvetica, sans-serif; font-style: italic; font-size: 11px; }
input, textarea { background-color: rgba(255, 255, 255, 0.4); border: 2px solid rgba(122, 192, 0, 0.15); padding: 10px; font-family: Keffeesatz, Arial; color: #4b4b4b; font-size: 13px; -webkit-border-radius: 5px; margin-bottom: 15px; margin-top: -10px; }
input:focus, textarea:focus { border: 2px solid #EBA707; background-color: rgba(213, 243, 250, 1); }
 /*COLOR DE LA ETIQUETA DE CONTORNO MORADO Y FONDO BLANCO, ESTA SUSTITUYE A LA LINEA ANTERIO*/
 /*input:focus, textarea:focus { border: 5px solid #E6CCEE; background-color: rgba(255, 255, 255, 1); }*/

/*COLOR DEL SUBMIT CUANDO NOOOOOO ESTA ENCIMA EL CURSOR*/
input[type="submit"] { border: none; cursor: pointer; color: #fff; font-size: 13px; background-color: #7ac000; padding: 5px 17px 8px 17px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6); border-bottom: 1px solid rgba(0, 0, 0, 0.4); border-top: 1px solid rgba(255, 255, 255, 0.6);
	background: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.23, #EAC878),
	    color-stop(0.62, #EBA707)
	);
	background: -moz-linear-gradient(
	    center bottom,
	    #EAC878 23%,
	    #EBA707 62%
	);
}

/*COLOR DEL SUBMIT CUANDO SIIIII ESTA ENCIMA EL CURSOR*/
input[type="submit"]:hover { color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.4); background-color: #EBA707;
	background: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.23, #EBA707),
	    color-stop(0.62, #EAC878)
	);
	background: -moz-linear-gradient(
	    center bottom,
	    #EBA707 23%,
	    #EAC878 62%
	);
}

input[type="submit"]:active { position: relative; top: 1px; }


/*FIN DE CONFIGURACIÓN DE CAMPOS DE CONTACTO*/
