/*
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Stylesheet/Hoja de Estilos: layout
 * Project/Projecto: Abril 2013 - Agua un patrimonio que circula de mano en mano  - Colombia
 * Autor: Claudia Buitrago - claudia.buitrago@mottif.com - Mottif
 *  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/*
	1. Generales
		1.1. Fuentes
	2. Header
		2.1. Menu
	3. Internas
		3.1. Cuencas
		3.2. Articulos
		3.3. Verbos
		3.4. Galerias
		3.5. Mitos
		3.6. Agua quieta
		3.7. Yo afecto
		3.8. Sentidos
		3.9. Presentacion
	4. Home
*/
		
/*1. Generales*/

html, body {
	background-color:#003467;font-family: 'PT Sans', sans-serif;
	color:#333333;
	zoom:1;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Cuprum', sans-serif;
	font-weight: 700;
}
a {
	color:#333333;
	font-family: 'PT Sans', sans-serif;
	text-decoration:none;
}
.container {
	margin:0 auto;
	width:940px;
}
.replaced_txt {
	display:block;
	text-indent: -999999em;
}
.clear_float {
	clear:both;
}
.right_content {
	float:right;
}
.left_content {
	float:left;
}
.contenido_gral p{
	color:#333333;
	font-size:1em;
	line-height: 1.3em;
	padding-bottom:10px;
}
.contenido_gral h3 {
	color: #666666;
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1.2em;
	padding-bottom: 10px;
}
.contenido_gral ul {
	list-style-position:inside;
	
	padding-bottom:15px;
}
.contenido_gral ul li, .contenido_gral ol li {
	padding-bottom: 3px;
}
.contenido_gral ul li ul, .contenido_gral ol li ol, .contenido_gral ul li ol, .contenido_gral ol li ul {
	padding: 3px 0 0 15px;
}
.contenido_gral ol {
	padding-bottom:15px;
}
.contenido_gral ol li {
	list-style-position:inside;
}
.contenido_gral blockquote {
	font-size:1.375em;
	padding-bottom:20px;
}
.contenido_gral p a{
	font-weight:700;
	text-decoration:underline;
}
/*2. Header*/
header {
	background-color:#E2F55A;
	height:97px;
	width:100%;
}
header h1 {
	float:left;
}
header h1 a {
	background:url(../img/agua-un-patrimonio-que-circula-de-mano-en-mano.png) 0 0 no-repeat;
	height:97px;
	width:435px;
}
header .container{
	position:relative;
}
header .sec_men{
	padding-top: 0;
	position: absolute;
	right: 0;
	top: 0;
}
header .sec_men ul{
	overflow:hidden;
}
header .sec_men ul li{
	background-color: #0B3F53;
	float:left;
}
header .sec_men ul li a{
	color: #4CC3D7;
	font-family: 'Cuprum', sans-serif;
	font-size: 1em;
	font-weight: 700;
	padding: 5px;
}
header .sec_men ul li:first-child{
	border-right: 1px solid #4CC3D7;
}

/*2.1. Menu*/
header nav {
	float:right;
	padding-top: 65px; 
}
 nav .list { 
}
nav .list li {
	float:left;
	padding-left:15px;
	position:relative;
}
 nav .list a {
	color:#768030;
	font-family: 'Cuprum', sans-serif;
	font-size:1.125em;
	font-weight:700;
	text-decoration:none;
}
 nav .list a:hover, header  nav .list a.activo {
	border-bottom:5px solid #768030;
	padding-bottom:6px;
}
/*--- DROPDOWN ---*/
header nav .list ul {
	background:#E2F55A;/* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
	background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
	padding-top: 10px;
	position:absolute;
	left:-9999px;
	cursor:hand; cursor:pointer;
	 z-index:10;
}
header nav .list ul li {
	background:#E2F55A;
	float:none;
	padding: 0 12px;	
	text-align:center;
}
header nav .list ul a {
	border-bottom:1px solid #CBDC51;
	display: block;
	font-family: 'Cuprum', sans-serif;
	font-size: 0.938em;
	padding: 6px 0;
	text-transform:uppercase;
}
header nav .list li:hover ul {
	left:0;
}
header nav .list li.item_1:hover ul {
	left: -2px;
}
header nav .list li.item_2:hover ul {
	left: -45px;
	width:196px;
}
header nav .list li.item_3:hover ul {
	left: -69px;
	width:245px;
}
header nav .list li.item_4:hover ul {
	left:-2px;
}
header nav .list li:hover a { /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
	border-bottom:5px solid #768030;
	padding-bottom:6px;
}
header nav .list li:hover ul a { /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
border-bottom:1px solid #CBDC51;
	
}
header nav .list li:hover ul li a:hover { /* Here we define the most explicit hover states--what happens when you hover each individual link. */
	border-bottom:1px solid #CBDC51;
	color:#666A45;
}
/*3. Internas*/
.interna section .container{
	position:relative;
}
.interna article{
	
}
.interna article .container_rel{
	background:url(../img/bg_article.png) 0 0 repeat;
	float:right;
	height: 575px;
	padding:34px 32px;
	position:relative;
	width: 579px;
}
.interna article .close{
	background: url(../img/assets.png) -7px -4px no-repeat;
	height: 25px;
	position:absolute;
	right: 6px;
	top: 5px;
	width: 25px;
}
.interna section article span{
	color: #666666;
	font-size:0.625em;
	position:absolute;
	right: 40px;
	top: 11px;
}

/* Menu secundario*/
aside{
	overflow:hidden;
}
aside .side {
	background-color:#0B3F53;
	float: left;
	height: 46px;
	overflow: hidden;
	width: 35%;
}
aside .side h2{
	color:#4CC3D7;
	float:right;
	font-size:1.875em;
	padding:7px 11px 0 0;
	text-align:right;
	text-transform:uppercase;
	width: 298px;
}
aside .side_right{
	background-color:#4DC3D7;
	float: right;
	height: 46px;
	overflow: hidden;
	width: 65%;
}
aside nav{
	text-align: center;
	width:643px;
}
aside .list{
	display:inline-block;
	float:none;
}
aside .list a {
	
font-weight:700;
color: #0B3F52;
}
aside .list a:hover, aside .list a.activo  {

	border-bottom: 5px solid #0B3F52;
padding-bottom:6px;
}
aside .list{
	padding-top: 14px;
}
/*3.1. Cuencas*/
.interna section figure{
	background:#000000;
	height: 218px;
	margin-bottom:30px;
	overflow:hidden;
	padding:8px;
	position:relative;
	
width: 563px;
}
.interna section .overflow_img{
	float:left;
	height:218px;
	margin-right:8px;
	overflow:hidden;
	width:323px;
}
.interna section figcaption, .interna section figure a{
	color:#FFFFFF;
	float:left;
	font-size:0.750em;
	width:190px;
}
.interna section figcaption{
	bottom: 8px;
	position: absolute;
	right: 23px;
}
.interna section figure a:hover{
	color:#CCCCCC;
}
.interna section .side_right{
	float: right;
	overflow: hidden;
	width: 65%;
}
.interna section article{
	
	overflow: hidden;
	width: 643px;
}

.interna .scroll-pane, .interna .scroll-pane-1, .interna .scroll-pane-2, .interna .scroll-pane-3, .interna .scroll-pane-4, .interna .scroll-pane-5, .interna .scroll-pane-6{	
	height:590px;
}
/*.interna .scroll-pane {	
	height: 572px;
}
/*.interna .scroll-pane-1 {	
	height:510px;
}
.interna .scroll-pane-2 {	
	height: 478px;
}
.interna .scroll-pane-3 {	
	height: 563px;
}
.interna .scroll-pane-4 {	
	height:225px;
}
.interna .scroll-pane-5 {	
	height:280px;
}
.interna .scroll-pane-6 {	
	height:350px;
}*/

/*.interna .scroll-pane-1, .interna .scroll-pane-2, .interna .scroll-pane-3, .interna .scroll-pane-4, .interna .scroll-pane-5. .interna .scroll-pane-6 {	
	height:590px;
}*/

/*3.2. Articulos*/
/*.articulo .scroll-pane{
	height: 503px;
}*/
.interna section .articulos li{
	border-top:1px solid #999999;
	overflow:hidden;
	padding:7px 0;
}
.interna section .articulos figure{
	background:none;
	float:left;
	height:auto;
	margin-bottom:0;
	padding:0;
	width:80px;
}
.interna section .articulos figure a{
	width:80px;
}
.interna section .articulos hgroup{
	float:left;
	padding-left:55px;
	width: 417px;
}
.interna section .articulos h2{
	line-height:1em;
}
.interna section .articulos h2 a{
	font-size: 0.9em;
}
.interna section .articulos h3{
	color:#333333;
	font-family: 'PT Sans', sans-serif;
	font-size:1em;
	font-style:italic;
	font-weight:normal;
	line-height:1em;
	padding-bottom:0;
}
.interna section #show_btn{
	background:url(../img/show_icon.png) 0 0 no-repeat;
	height:23px;
	position: absolute;
	right: 6px;
	top: 0px;
	width:23px;
}
.interna nav h4{
	color:#0B3F52;
	font-family: 'PT Sans', sans-serif;
	font-size:1em;
	font-weight:normal;
	padding: 13px 0;
}
.interna .container_art{
	height: 23px;
	position: relative;
	width:643px;
}
/*3.3. Verbos*/
.verbos aside .list li{
	padding-left: 12px;
}
.verbos aside .list a{
	font-size: 1.063em;
}
.verbos .contenido_gral h2{
	font-size:3.125em;
	padding-bottom:25px;
}
/*3.4. Galeria*/
.interna .gallery {
	overflow:hidden;
	padding-bottom:0;
}
.interna .gallery li{
	float:left;
	height: 295px;
	padding: 0 7px 5px 0;
	width:177px;
}
.interna .gallery li h3 {
	padding-bottom: 3px;
}
.interna .gallery li h3 a{
	color: #666666;
	font-size: 0.688em;
	font-weight: normal;
	line-height: 0.813em;
}
.interna .gallery li h4 {
	line-height:1.1em;
}
.interna .gallery li h4 a{
	color:#666666;
	font-size:0.813em;
	font-style:italic;
	font-weight:normal;
}
/*3.5. Mitos*/
.mitos aside .list li {
	padding-left: 23px;
}
.mito_art #art_1 .scroll-pane{
	height:400px;
	}
.mito_art #art_2 .scroll-pane{
	height: 380px;
}
.mito_art #art_3 .scroll-pane{
	height: 467px;
}	
.mito_art #art_4 .scroll-pane{
	height: 265px;
}		
.mito_art #art_5 .scroll-pane{
	height: 420px;
}	
.mito_art #art_6 .scroll-pane{
	height: 485px;
}	
.mito_art #art_7 .scroll-pane{
	height: 520px;
}	
	
/*3.6. Agua quieta*/
.agua_quieta aside .side_right {
	width: 49%;
}
.agua_quieta aside .side {
	width: 51%;
}
.agua_quieta aside .side h2 {
	width: 460px;
}
.agua_quieta .scroll-pane{
	height: 470px;
}
/*4. Home*/
.home .container_rel{
	position:relative;
}
.home article{
	background:url(../img/bg_orinoquia.png) top left no-repeat;
	height: 360px;
	padding: 3px 9px 3px 9px; 
	position:absolute;
	width:326px;
	z-index:11;
}
.home article span{
	position:absolute;
}
.home article h2{
	border-bottom:1px solid #336D81;
	color:#80ABB3;
	font-size: 1.2em;
	line-height: 1.4em;
	margin-bottom:5px;
	padding-bottom:4px;
}
.home article h2 em{
	color:#B3CDD2;
	display:block;
	font-size:1.7em;
	font-style:normal;
}
.home article nav{
	margin-bottom:8px;
}
.home article nav ul{
	overflow:hidden;
}
.home article nav ul li{
	float:left;
padding: 0 3px 0 2px;
}
.home article nav ul li:first-child{
	padding-left: 0;
}
.home article nav ul li a{
	color:#FFFFFF;
	font-size:0.813em;
	font-weight:700;
}
.home article nav ul li a:hover{
	color:#E1F459;
}
.slider li{
	width:325px !important;
}
.home #art_1{
	background: url(../img/bg_amazonas.png) top left no-repeat;
	left: 574px;
	top: 242px;
	width: 325px;
}
.home #art_1 span{
	background:url(../img/arrow_amazonas.png) 0 0 no-repeat;
	height:66px;
	left: -33px;
	top: 249px;
	width:33px;
}
.home #art_2{
	background: url(../img/bg_atrato.png) top left no-repeat;
	left: 590px;	
	top: 166px;
	width: 325px;
}
.home #art_2 span{
	background:url(../img/arrow_atrato.png) 0 0 no-repeat;
	height:68px;
	left: -153px;
	top: 148px;
	width:153px;
}
.home #art_2 h2{
	color:#9AA5B8;
	border-color:#5D6B8B;
}
.home #art_2 h2 em{
	color:#C2C9D4;
}
.home #art_3{
	left: 630px;
	top: 175px;
}
.home #art_3 span{
	background:url(../img/arrow_orinoquia.png) 0 0 no-repeat;
	height:69px;
	left: -33px;
	top: 147px;
	width:33px;
}
.home #art_4{
	background: url(../img/bg_pacifico.png) top left no-repeat;
	left: 583px;
	top: 267px;
	width: 325px;
}
.home #art_4 span{
	background:url(../img/arrow_pacifico.png) 0 0 no-repeat;
	height:69px;
	left: -153px;
	top: 147px;
	width:153px;
}
.home #art_4 h2{
	color:#90AC9E;
	border-color:#4D7969;
}
.home #art_4 h2 em{
	color:#BDCDC7;
}
.home #art_5{
	background: url(../img/bg_magdalena.png) top left no-repeat;
	left: 605px;
	top: 211px;
}
.home #art_5 span{
	background:url(../img/arrow_magdalena.png) 0 0 no-repeat;
	height:68px;
	left: -103px;
	top: 148px;
	width:103px;
}
.home #art_6{
	background: url(../img/bg_maracaibo.png) top left no-repeat;
	height: 355px;
	left: 615px;
	top: 121px;
	width: 325px;
}
.home #art_6 span{
	background:url(../img/arrow_maracaibo.png) 0 0 no-repeat;
	height:66px;
	left: -66px;
	top: 144px;
	width:66px;
}
.home #art_6 h2{
	color:#9CAEA1;
	border-color:#617D68;
}
.home #art_6 h2 em{
	color:#C8D1C8;
}
.home section{
	height:100%;
	overflow:hidden;
	width:100%;
}
.home section .container{
	height: 800px;
	position: absolute;
	top: 97px;
}
.home #mapster_wrap_0{
	z-index:5;
}
.home section .close{
	background: url(../img/assets.png) -7px -4px no-repeat;
	height: 25px;
	position: absolute;
	right: 10px;
	top: 8px;
	width: 25px;
}
.home .logo_home{
	background:url(../img/agua-logo.png) 0 0 no-repeat;
	bottom: 20px;
	left: 50px;
	height:130px;
	position: absolute;	
	width:126px;
	z-index: 10;
}
/*3.7 Yo afecto*/
.afecto section article li{
	border-bottom: 1px solid #666666;
	padding-bottom: 10px;
}
.afecto section article li b{
	font-size:2.500em;
}
.afecto section article li strong{
	font-size:1.500em;
}

.afecto #art_2 .scroll-pane, .afecto #art_3 .scroll-pane{
	height: 320px;
}

/*3.8. Sentidos*/
.sent_art #art_1 .scroll-pane{
	height: 500px;
}
.sent_art #art_2 .scroll-pane{
	height: 490px;
}
.sent_art #art_3 .scroll-pane{
	height: 340px;
}	
.sent_art #art_4 .scroll-pane{
	height: 415px;
}	
/*Presentacion*/
.pres article h2{
	padding-bottom:10px;
}