/* -------------------------------------------------------------------------------------------------------------*/
/* ------->>> TPL STANDARD <<<---------------------------------------------------------------------------------*/
/* -----------------------------------------------------------------------------------------------------------*/

/*///////////////////////////////////////////////////////////////////
Proceso texto y fotos

Usada para insertar contenido con fotos en distintas posiciones, con
un mínimo de 0 fotos y un máximo de 4.

El posicionamiento de las mismas es: "A la izquierda del texto",
"A la derecha del texto", "Arriba del texto" y "Abajo del texto".

En el caso de insertar 4, 3 de ellas se mostrarían a un tamaño menor en
una de las cuatros posiciones anteriores y la cuarta iría a mayor tamaño
situada siempre debajo del resto del contenido.

En el caso de insertar 1, se mostraría en grande debajo del texto.
///////////////////////////////////////////////////////////////////*/

/*Borde de las imágenes*/

#contents img { border:none; }

/*Contenedor de texto cuando las imágenes se colocan A la izquierda o derecha*/
#content_text { background:#3a4652; padding:20px; width: 718px; float:left; color:#ececec;}
#contents #content_text p{ color:#ececec;}
.text_container { width: 493px; overflow: auto; padding: 0; }
#contents .text_container  ol li, #contents .text_container  ul li { color:#ececec;}

/*Contenedor de texto cuando las imágenes se colocan Arriba o Abajo*/

.big_section_text { width: 100%; margin: 10px 0 0; padding: 0; }

/*Estilo del contenedor de texto cuando se coloca a la izq o dcha de las imágenes*/

.left { float: left; margin: 0 20px 0 0; }
.right { float: right; margin: 0 0 0 20px; }

/*Distintas alturas según se coloquen 1, 2 ó 3 imágenes a la izquierda o derecha*/

.triple_height {  }
.double_height {  }
.single_height {  }

/*Contenedor de las imágenes pequeñas*/

#contents .imagen { float: left; margin: 0 0 10px; }
#contents .imagen  img { border-bottom: 3px solid #89c849;}

/*contenedor de las imágenes pequeñas top bottom*/
#contents .images { float:left; width:auto; margin: 20px 0;}
#contents .images a { width:auto; float:left; margin: 0 8px 0 5px; padding:0; display:inline;}
#contents .images a img { float:left; width:auto; margin:0; padding:0; border-bottom: 3px solid #89c849;}
/*Contenedor de la imagen grande*/

#contents .grande { float: left; }
#contents .grande img { border-bottom: 5px solid #7aaada;}