/************************************************************************ 
Colores:
4393A3 Verde del Logo SAIP
EE7814 Naranja del Logo SAIP
066 Verde de la presentación (Titulos) 
*************************************************************************/


/** Estilos globales **/
/* technique explained @ http://leftjustified.net/journal/2004/10/19/global-ws-reset/  */
* {
    margin:0;
    padding:0;
}
h2 {
	font:bold 2em/1.4 "Trebuchet MS", tahoma, verdana, arial, san-serif;
	color:#8B9F86;
}
h3 {
	font:bold 1em/1.6 "Trebuchet MS", tahoma, verdana, arial, san-serif;
	color:#E18A32; /*f93;*/
}
/* links */
a {
	color:#4C53E0;
}
a:focus, a:hover, a:active {
	color:#EB8518;
}
/** fin globales **/

/* poner base font en 90% permite que se pueda alterar la fuente y 'xx-small' aún se pueda leer */
body {
    background:#E8EAEA  url(img/cuerpo.gif) repeat-x left bottom;
	font-size:90%;
}

/********
la div #envoltorio es la clave para la flexibilidad de este diseño.
Fijar el ancho máximo y mínimo en 'em', mientras el ancho se fija en '%', 
permite crear una buena combinación entre diseño 'fluido' y 'elastico''..
El Javscript se usa para asegurar el soporte de min/max width en IE

Es mejor usar '%' para establecer el ancho o los márgenes/padding horizontales de los elementos dentro de #envoltorio 
que así lo requieran .
Esto hace que no importa qué hace que #envoltorio se expanda (la fuente o el  tamaño de la pantalla) el contenido
se adaptará para completar ese espacio.
*********/
#envoltorio {
    margin:0 auto;
	width:94%;
    min-width:40em;
    max-width:70em;
	border:10px solid #fff;
	border-width:0 10px;
    background:#fff;
}

/* float clearing - technique explained @ http://www.csscreator.com/attributes/containedfloat.php */
ul#nav:after, #envoltorio:after, #sub:after, form:after, form div:after {
    content:".";
    display:block;
    visibility:hidden;
    clear:both;
    height:0;
}
* html #nav, * html #contenido, * html form, * html form div {
	height:1%;
}

/** hiding of elements for assistive devices (screen readers etc) **/
ul#accesso, .off {
	position:absolute;
	left:-1000em;
	top:-1000em;
}
/* <hr />'s added to mark-up for browsers without CSS */
hr {display:none}

/** Title **/
#encabezado {
	background:#FFF url(img/encab4.gif) no-repeat bottom right;
	border:1px solid #BBD6B2;
}
#encabezado h1 {
	
    padding-left:.6em;
    font:bold 3em/2.5 "Lucida Bright", Tahoma, Georgia, Times, serif; /* line-height allows for image of buildings */
    letter-spacing:1pt;
	color:#845697;
    background: transparent url(logosaip.jpg) no-repeat left bottom;
	text-indent : -9999px;
}

/*#encabezado h1 {
    padding-left:.6em;
    font:bold 3em/2.5 "Lucida Bright", Tahoma, Georgia, Times, serif; // line-height allows for image of buildings 
    letter-spacing:1pt;
	color:#845697;
    background: transparent url(img/banner.jpg) no-repeat right bottom; 
}
*/
#encabezado h1 a {
	color:#845697;
	text-decoration:none;
}
/** Navigation **/
ul#nav {
   	list-style:none;
   	margin:3px 0 1em;
	text-align:center;
   	background:#fff;
   	padding-bottom:2px;
   	border-top:2px solid #D7E7D3;
   	border-bottom:2px solid #845697;
}
#nav li {
    list-style:none;
    width:25%;
    float:left;
	display:block;
    text-align:center;
	background:#EAF0E6 url(img/mnu-btm.gif) repeat-x left bottom;
}
* html #nav li {
	/** IE/PC hack due to haphazard line breaks when combined widths = 100% **/
	\width:24.9%;
}
#nav a {
    display:block;
	font:bold 1em/1.8 'Lucida Grande', Arial, tahoma, verdana, sans-serif;
	text-decoration:none;
	color:#845697;
	margin:1px;
	background:transparent url(img/mnu-top.gif) repeat-x left top;
}
#nav a:focus, #nav a:hover, #nav a:active {
	border:1px inset #8B9F86;
	margin:0;
	color:#EB8518;
	text-decoration:underline;
}
/** current menu item **/
ul#nav li#active {
	background:#F6F4F8;
	font:bold 1em/1.8 'Lucida Grande', Arial, tahoma, verdana, sans-serif;
	color:#000;
	text-decoration:underline;
}


/** Content Containers **/
#sub, #derecha {
	font: 1em/1.5 "Trebuchet MS", tahoma, verdana, arial, san-serif;
	word-spacing:.1em;
	margin-bottom:1em;
}

/******
div#sub is an extra wrapper, which allows the center column to come first in the source. 
#sub is floated left, with #central -the content column- nested within and floated to the right.
concept from http://www.positioniseverything.net/piefecta-rigid.html
******/
#sub {
	width:74%;
	float:left;
	position:relative;
}

#sub h2 {
	font:bold 1.7em/1.4 Georgia, Times, serif;
	color: #066; /*EE7814; 4393A3;8B9F86;*/
}
#sub h3 {
	font:bold 1.3em/1.6 "Trebuchet MS", tahoma, verdana, arial, san-serif;
	color:#E18A32; /*f93;066; 4393a3;*/
}
#sub ul {
	margin: 0 0 0 1em;
	padding: 0 0 0 1em;
}
#sub ul li{
	list-style : square;
}
/***
Containers should be named according to what they contain. not where they sit in the layout.
To make identifying each column more simple, I have named them according to their position.
***/
#central {
	width:65%;
	float:right;
}
#central ul li {
	list-style:none;
	padding-left:20px;
	margin:.3em 0;
	background:transparent url(img/bull-circ.gif) no-repeat 2px 50%;
}

#izquierda {
	width:33%;
	float:left;
	/* the following 3 declarations are for design purposes only - not required for layout */
	padding: 10px 0 50px;/*220px 0 10px;*/
	/*background:transparent url(img/tranq_2.jpg) no-repeat right top; */
	background:transparent url(img/fondoizq.gif) bottom left repeat-x; 
	/*border-bottom:9px solid #E18A32;*/
}
#derecha {
	width:25%;
	float:right;
}
 
 /** Main Col Contents **/
#central p {
	margin:.5em 2% .5em 0;
}
img.img-right {
	float:right;
}

/** Left Col Contents**/
/*
#izquierda {	
	background: #fff url(img/fondoizq.gif) bottom left repeat-x;
}
*/
#izquierda h2 {
	color:#f93;
	font-size:1.5em;
}
#izquierda p {
	font-size:.9em;
}
a.serviceBtn {
	display:block;
	clear:right;
	padding:.1em 2%;
	margin:.5em 0;
	text-align:center;
	text-decoration:none;
	color:#845697;
	font:bold 1em/2 'Lucida Grande', arial, tahoma, verdana, sans-serif;
	background:#F6F4F8 url(img/btn-purple.gif) repeat-x left bottom;
	border:2px outset #845697;
}
a.serviceBtn:focus, a.serviceBtn:hover, a.serviceBtn:active {
	text-decoration:underline;
	border-style:inset;
}

/** Right Col Contents **/
#derecha {
	font-size:.9em;
}
#derecha h2 {
	font-size:1.2em;
}

/** New Products Special destacadoss **/
.destacadosList {
	background:#EEFAEA;
	border:1px solid #C8DCC2;
	margin:1em 0;
}
.destacadosList h2 {
	color:#3A4F3B;
	margin:.1em 2%;
}
.destacadosList ul {
	margin:.1em 2%;
	list-style:none;
}
.destacadosList ul li {
	list-style:none;
	padding-left:20px;
	margin:.3em 0;
	background:transparent url(img/bullet.gif) no-repeat 2px 50%;
}


/** New Products Special destacadoss **/
.destacadosListUtil {
	background:#FBE8E8;
	border:1px solid #C8DCC2;
	margin:1em 0;
}
.destacadosListUtil h2 {
	color:#980202;
	margin:.1em 2%;
}
.destacadosListUtil ul {
	margin:.1em 2%;
	list-style:none;
}
.destacadosListUtil ul li {
	list-style:none;
	padding-left:20px;
	margin:.3em 0;
	background:transparent url(img/bullet.gif) no-repeat 2px 50%;
}


/** Forms **/
form {
	margin:1em 0;
}
legend {
	font:bold 1.1em/1.5  Arial, tahoma, verdana, sans-serif;
	color:#3A4F3B;
}
input.txt {
	width:98%;
	margin:0 auto .5em;
	border:2px solid #A5ACB2;
	background:#fff;
}
input.btn {
	background:#BED2B8 url(img/btn.gif) repeat-x;
	padding:.1em;
	width:7em;
	float:right;
	color:#fff;
	font:bold 1em/1.4 "Lucida Bright", Georgia, Times, serif;
	cursor:pointer;
}
input:focus, input.focus {
	border-style:inset;
}
label {
	display:block;
	margin-top:.5em;
}

#login legend {
	font:bold 1.1em/1.5 Arial, tahoma, verdana, sans-serif;
	color: *3A4F3B;

}
#login input.txt {
	width:48%;
	margin:0 auto .5em;
	border:2px solid #A5ACB2;
	background:#fff;
}
#login input.btn {
	background:#BED2B8 url(img/btn.gif) repeat-x;
	padding:.1em;
	width:5em;
	float:right;
	color:#fff;
	font:bold 1em/1.4 "Lucida Bright", Georgia, Times, serif;
	cursor:pointer;
}
#login input:focus, #login input.focus {
	border-style:inset;
}
#login label {
	display:inline;
	margin-top:.5em;
}
#login fieldset {
	border: 1px solid #ccc;
	padding-left: 0.5em;
}
/* search */
#busquedas fieldset {
	border:1px solid #C8DCC2;
	padding:.3em .5em;
}
/* subscribe */
#subscribe {
	background:#F6F4F8;
	border:1px solid #B2A9B9;
	
}
#subscribe div {
	margin:.3em .5em;
}
#subscribe h2 {
	color:#845697;
}

/** Footer **/
#footer {
	clear:both;
	margin-top:1em;
	font:.9em/1 'Lucida Grande', Arial, tahoma, verdana, sans-serif;
	border-top:3px double #C8DCC2;
}
#footer p {
	margin:1em 1em 1em 0;
	float:right;
	width:30%;
	text-align:right;
}
#footer ul {
	list-style:none;
	margin-top:.7em;
}
#footer li {
	display:inline;
	border-right: 1px solid #C8DCC2;
	padding:.3em 2%;
}

/* ---------------------------------------- 
div.Article {
	background: url(img/custom_corners_topleft.gif) no-repeat left top; width: 35%
}
div.ArticleTwo {
	background: url(img/custom_corners_topleft.gif) no-repeat left top; width: 50%
}
div.Article H2 {
	padding-right: 15px; padding-left: 0PX; font-size: 1.3EM; right: -14PX; background: url(img/custom_corners_topright.gif) no-repeat right top; padding-bottom: 15PX; margin: 0PX; padding-top: 15PX; position: relative
}
div.ArticleBody {
	padding-right: 15px; padding-left: 0px; right: -14px; background: url(img/custom_corners_right.gif) repeat-y right top; padding-bottom: 15px; margin: -2em 0px 0px; padding-top: 15px; position: relative
}
div.ArticleFooter {
	background: url(img/custom_corners_bottomleft.gif) no-repeat left bottom; position: relative; top: 11px
}
div.ArticleFooter P {
	padding-right: 15px; display: block; padding-left: 0px; right: -14px; background: url(img/custom_corners_bottomright.gif) no-repeat right bottom; padding-bottom: 15px; margin: -2em 0px 0px; padding-top: 15px; position: relative
}

Le cambio el tamaño más abajo
*/

div.Article {
	background: url(img/custom_corners_topleft.gif) no-repeat left top; width: 50%
}
div.ArticleTwo {
	background: url(img/custom_corners_topleft.gif) no-repeat left top; width: 50%
}
div.Article H2 {
	padding-right: 15px; padding-left: 0PX; font-size: 1.3EM; right: -14PX; background: url(img/custom_corners_topright.gif) no-repeat right top; padding-bottom: 15PX; margin: 0PX; padding-top: 15PX; position: relative
}
div.ArticleBody {
	padding-right: 15px; padding-left: 0px; right: -14px; background: url(img/custom_corners_right.gif) repeat-y right top; padding-bottom: 15px; margin: -2em 0px 0px; padding-top: 15px; position: relative
}
div.ArticleFooter {
	background: url(img/custom_corners_bottomleft.gif) no-repeat left bottom; position: relative; top: 11px
}
div.ArticleFooter P {
	padding-right: 15px; display: block; padding-left: 0px; right: -14px; background: url(img/custom_corners_bottomright.gif) no-repeat right bottom; padding-bottom: 15px; margin: -2em 0px 0px; padding-top: 15px; position: relative
}