/** Añade cualquier estilo personalizado aquí **/

body{
	background-color:Gray;
	font-family: Trebuchet MS;
	background-image: url(../imgs/bg_color.jpg);
	background-repeat: repeat-x;
	background-attachment: fixed;
}

h1{
	color: Red;
	margin: 2px;
	width: 750px;
}

h2{
	color: Red;
	margin: 2px;
	width: 750px;
}

h3{
	color: Red;
	margin: 2px;
	width: 750px;
}

h4{
	color: Black;
	margin: 2px;
	width: 750px;
}

h5{
	color: Black;
	margin: 2px;
	width: 750px;
}

h6{
	color: Black;
	margin: 2px;
	width: 750px;
}

ul{
	margin: 3px;	
}

ul	li{
	padding-left: 10px;
}

ol{
	margin: 5px;	
}

ol	li{
	padding-left: 10px;	
}

a, a:visited{
	color:#006699;
	text-decoration: none;
}

a:hover{
	color: #FF9900;
	text-decoration: none;
}  
a:active{
	color: #000000;
	text-decoration: none;
}  

div.testimonio{
	width: 500px;
	background-color: #FFFACD;
	border: medium dotted Red;
	padding: 5px;
}

div.marco{
	width: 500px;
	border: thin solid Navy;
	padding: 5px;
}

/** Lee los comentarios antes de hacer cambios **/
/** No revuelvas el código, modifícalo solo si sabes lo que estás haciendo **/
/** Mantén siempre una copia intacta de todos los archivos en caso que algo se dañe **/

/** Anuncio entrante **/
div.hoverPop{
	border: 1px solid Blue;	/** Formato del borde, cámbialo solo si sabes lo que haces **/
}

/** Cabecera del Anuncio entrante **/
div.hoverPop div.header{
	background-color: Blue;
	color: White;
}

/** Contenido del Anuncio entrante **/
div.hoverPop div.content{
	background-color: White;
	color: Black;
	padding: 5px;
}

/** Contenedor global de la página (todos los archivos se cargan dentro de éste) **/
div.wrap{
	width: 780px;	/** Este es el ancho total del contenido, si lo cambias no olvides cambiar también el ancho de 'div.header', 'div.footer' y 'div.content-wraper' **/

	/** Contenido centrado automaticamente, Si cambias "auto" a "0px" el contenido se alineará hacia el margen con el valor "0px" **/
	margin-left:auto;
	margin-right:auto;
	padding:0px;

}

/** Contenido de la Cabecera **/
div.wrap div.header{
	width: 780px;	/** Ancho de la cabecera. Si cambiaste el ancho del contenedor global (div.wrap), no olvides actualizar este valor **/
	text-align: center;	/** Usa este valor para centrar el contenido de tu cabecera, puedes usar: left, center, right or justify **/
}

/** Contenido del Pie de página **/
div.wrap div.footer{
	clear: both;	/** No cambies ni borres esta línea, está puesta aquí para que se muestre correctamente el pie **/
	width: 780px;	/** Ancho del pie. Si cambiaste el ancho del contenedor global (div.wrap), no olvides actualizar este valor **/
	text-align: center;	/** Usa este valor para centrar el contenido de tu pie de página, puedes usar: left, center, right or justify **/
}

/** Contenedor principal **/
div.wrap div.content-wraper{
	width: 780px;	/** Ancho del contenedor principal. Si cambiaste el ancho del contenedor global (div.wrap), no olvides actualizar este valor **/
}

/** Contenido del menú izquierdo **/
div.wrap div.content-wraper div.left{
	float: left;	/** No cambies ni borres esta línea, está puesta aquí para que se muestre correctamente el menu izquierdo **/
	width: 150px;	/** Ancho común utilizado en la Internet, cámbialo solo si sabes lo que haces **/
}

/** Contenido del menú derecho **/
div.wrap div.content-wraper div.right{
	float: left;	/** No cambies ni borres esta línea, está puesta aquí para que se muestre correctamente el menu derecho **/
	width: 150px;	/** Ancho común utilizado en la Internet, cámbialo solo si sabes lo que haces **/
}

/** Contenido central **/
div.wrap div.content-wraper div.center{
	float: left;	/** No cambies ni borres esta línea, está puesta aquí para que se muestre correctamente el menu central **/

	background-color: White;	/** Color de fondo del contenedor, puedes definir este color en cada contenedor **/
	
	/** Puedes cambiar el ancho de este contenedor de acuerdo con el contenido que muestres dentro del contenedor principal 'div.content-wraper',
	si no has cambiada el ancho del contenedor principal (970px) puedes elegir los siguientes valores:
		- Solo el contenido central sin menús (izquierdo, derecho):		970px;
		- El contenido central con culaquier menú, izquierdo o derecho:	820px;
		- El contenido central con ambos menús, izquierdo y derecho:	670px;
	**/
	
	/** Si desea el formato "Sales Letter" o "Carta de Ventas" utiliza solo el contenido central sin menús y un ancho de 780px (estadísticamente más efectivo) **/
	width: 780px;
}

/** Contenido central superior **/
div.wrap div.content-wraper div.center div.top{
	width: 100%;	/** Mejor valor, puedes modificarlo, pero es mejor si no lo haces **/
	text-align: center;	/** Usa este valor para centrar el contenido, puedes usar: left, center, right or justify **/
}

/** Contenido central de la página (aquí se mostrarán los contenidos que se cambian con la variable 'p' de las variables GET) **/
div.wrap div.content-wraper div.center div.content{
	width: 100%;	/** Mejor valor, puedes modificarlo, pero es mejor si no lo haces **/
	text-align: justify;	/** Usa este valor para justificar el contenido, puedes usar: left, center, right or justify **/
	margin: 10px;
}

/** Contenido central inferior **/
div.wrap div.content-wraper div.center div.bottom{
	width: 100%;	/** Mejor valor, puedes modificarlo, pero es mejor si no lo haces **/
	text-align: center;	/** Usa este valor para centrar el contenido, puedes usar: left, center, right or justify **/
}

/**  Cuéntale a un amigo  **/
/**  Modificalo como quieras  **/

/** Formato de la tabla **/
table.tafTable{
	border: 1px solid black;
}

/** Formato de la cabecera de la tabla **/
table.tafTable .tafHeader{
	background-color:#36648B;
	color:white;
}