@charset "utf-8";

/* Medios fluidos sencillos

   Nota: Los medios fluidos exigen la eliminación de los atributos de altura y anchura de los medios del código HTML

   http://www.alistapart.com/articles/fluid-images/ 

*/

img, object, embed, video {

	max-width: 100%;

}

/* IE 6 no admite max-width (anchura máxima), por lo que usa de manera predeterminada una anchura del 100% */

.ie6 img {

	width:100%;

}

html,body{

	font:"Comic Sans MS", cursive;

	width:100%;

	height:100%;

	background-color:orange;

}

/*

	Propiedades de cuadrícula fluida de Dreamweaver

	----------------------------------

	dw-num-cols-mobile:		5;

	dw-num-cols-tablet:		8;

	dw-num-cols-desktop:	10;

	dw-gutter-percentage:	25;

	

	Inspiración obtenida de "Responsive Web Design" de Ethan Marcotte 

	http://www.alistapart.com/articles/responsive-web-design

	

	y Golden Grid System de Joni Korpi

	http://goldengridsystem.com/

*/



/* Diseño móvil: 480 px e inferior. */

.ZonaBaja{

	clear:both;

	background-color:orange;

	width:100%;

	color:#FFF;

	margin-top:.5%;

}

.ZonaPinto{

	clear:both;

	width:100%;

}

.gridContainer {

	margin-left: auto;

	margin-right: auto;

	width: 100%;

	/* navegadores sin soporte */

    /* Safari 4-5, Chrome 1-9 */

    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(orange));

    /* Safari 5.1+, Chrome 10+ */

    background: -webkit-linear-gradient(top, white, orange);

    /* Firefox 3.6+ */

    background: -moz-linear-gradient(top, white, orange);

    /* Opera 11.10+ */

    background: -o-linear-background(top, white, orange);

    /* IE 10 

    background: -ms-linear-background(top, white, orange);*/

	background: -ms-linear-gradient(top, white,orange);

    /* estándar */

    background: linear-background(top, white, orange);

	/*IE9*/

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#FFF′, endColorstr=’orange′,GradientType=0 );

}

#LayoutDiv1 {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}

.Linea{

	clear:both;

	width:100%;

	display:table;

}

.Logo{

	clear:both;

	width:100%;

	text-align:center;

}

.MenuSup{

	width:100%;

	display:table;

	background-color:orange;

	color:white;

	padding-top:1px;

	padding-bottom:1px;

	margin-bottom:.5%;

}

.CeldasMenu{

	display:inline-table;

	text-align:center;

	width:15%;

}

.CeldasMenu:Hover{

	background-color:#FC0;

	cursor:pointer;

	text-decoration:underline;

}

.ColumEnl{

	display:none;

	text-align:left;

	border-radius:5px;

	border:#009;

	border-style:solid;

	border-width:1px;

	margin:-1px;

}

.ColumPpal{

	width:98%;

	text-align:justify;

	margin:-1px;

	padding-left:1%;

	padding-right:1%;

	background-color:#FFF;

	border-radius: 5px;

	height:90%;

	border-radius:5px;

	border-color:blue;

	border-width:1px;

	border-style:solid;

}

.TituloEnlaces{

	color:#009;

	text-decoration:underline;

	margin-left:3px;

}

.Enlaces{

	clear:both;

	text-align:left;

	cursor:pointer;

	width:100%;

	margin-top:3px;

	margin-bottom:3px;

}

.Enlaces:hover{

	background-color: #E8E8E8;

	text-decoration:underline;

}

.Titulo{

	clear:both;

	width:100%;

	text-align:center;

	background-color:blue;

	color:white;

}

/* Diseño tableta: de 481 px a 768 px. Hereda estilos de: Diseño móvil. */



@media only screen and (min-width: 481px) {

.gridContainer {

	width: 100%;

	height:100%;

}

#LayoutDiv1 {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}

.ColumEnl{

	clear:both;

	width:20%;

	display:inline-table;

	text-align:left;

	border-radius:5px;

	border:#009;

	border-style:solid;

	border-width:1px;

	margin:-1px;

	background-color: #C4E4F7;

}

.ColumPpal{

	clear:both;

	width:75%;

	display:inline-table;

	text-align:justify;

	background-color:#FFF;

	border-radius: 5px;

	height:90%;

	border-radius:5px;

	border-color:blue;

	border-width:1px;

	border-style:solid;

	float:right;

}

}



/* Diseño escritorio: de 769 px hasta un máximo de 1232 px.  Hereda estilos de: Diseño móvil y Diseño tableta. */



@media only screen and (min-width: 769px) {

.gridContainer {

	clear:both;

	margin:0 auto;

	width: 100%;

	margin: auto;

	text-align:center;

}

#LayoutDiv1 {

	clear: both;

	margin:0 auto;

	width: 100%;

	display: block;

	text-align:center;

}

.ZonaPinto{

	margin:0 auto;

	width:78%;

}

.ColumEnl{

	clear:both;

	width:20%;

	display:inline-table;

	text-align:left;

	border-radius:5px;

	border:#009;

	border-style:solid;

	border-width:1px;

	margin:-1px;

}

.ColumPpal{

	clear:both;

	width:77%;

	display:inline-table;

	text-align:justify;

	background-color:#FFF;

	border-radius: 5px;

	height:90%;

	border-radius:5px;

	border-color:blue;

	border-width:1px;

	border-style:solid;

	float:right;

}

}