body {
	margin-top: 1%; /* get of that top! */
	margin-bottom: 2%; /* And stay of the bottom as well! */
	background-color: #FFFFFF; /* Fresh and white! */
	font:100% 12px Arial, Helvetica, sans-serif;
	color: #6d6d6d; 
}
a:link{
		color:#18344F;
		text-decoration:none;}

a:hover {
		color: #355f88;
		text-decoration:underline; 
	}
	
img { 
		border: 0; 
	}

/* ************************* END GENERAL STYLING ************************* */


/* *************************  START DIV STYLING  ************************* */

#container { /* <DIV #1> */
	width: 901px; /* Edit this to change the width of your site. Set it to 100% for some fun :-) */
	margin-left: auto;  /* This keeps the template centered. */
	margin-right: auto; /* This keeps the template centered. */
	border: 1px solid #F4F4F4; /* Crazy about dotted and dashed borders! */
	background-image:url(/images/fondogris.png);
	background-repeat:repeat-y;
	background-position:left;
	
}

#containerPortada { /* <DIV #1> */
	width: 901px; /* Edit this to change the width of your site. Set it to 100% for some fun :-) */
	margin-left: auto;  /* This keeps the template centered. */
	margin-right: auto; /* This keeps the template centered. */
	border: 1px solid #F4F4F4; /* Crazy about dotted and dashed borders! */
	background-image:url(/images/fondogris.png);
	background-repeat:repeat-y;
	background-position:left;
	background-color:#e7e8e9;
	
}
#header { /* <DIV #2> */
	width: 901px; /* Just as wide as the container, ofcourse. */
	height: 122px; /* No need to set height, just some padding around the headers is enough to get height. */
}
	#header h1 { /* The first line of text in the header, the big orange one. */
		font-size: 150%; /* Big font! 150% of the font-size of the body! */
		color: #DD8200; /* Orange color for textline one. */
		display: inline; /* This trick will display the both lines of text next to eachother instead of under eachother* */
		letter-spacing: 4px; /* A thick amount of spacing between the letters, to create a nice effect on the text. */
	}
	#header h2 {
		position: relative; /* All sizes, paddings and margins are measured relative to #header h1. */
		display: inline; /* The trick will only work if you add display: inline here as well, and add a <br /> between them in the HTML code. */
		vertical-align: center; /* Appear in the center of the #header. */
		font-size: 70%; /* 70% of the size of the font-size from the body. */
		font-weight: 100; /* a very sleek and lightweight font. 600 for big font. */
		text-transform: uppercase; /* ALL CAPS ON THIS LINE OF TEXT */
		color: #00ACF4; /* Ocean blue color... */
		letter-spacing: 1px; /* spread those letters over your screen a bit more */
		font-family: "Trebuchet MS", Verdana, sans-serif; /* I love Trebuchet, should've been the standard font! ;-) */
	}
	
#core_container { /* <DIV #3> */
	width: 100%; /* Just as wide as the #container, since it's still in there. */

	}

#core_left { /* <DIV #4> */
	width: 232px; /* A fixed width to display the images correctly below eachother. */
	float: left; /* Always stay on the left side of the #core_container. */
	height:115%;
	background-color:#B3B3B3;
	
}
*html #core_left{
width:200px;
padding-right:0;
padding-right:0;
height:115%;}

#logo{
float: left;
width:232px;
background-color:#355784;
padding-top: 5px;
}

#snippet1{
float:left;
height:200px;
width:230px;}
#snippet2{
float:left;
height:200px;
width:230px;}

#iwithblockmenu-apadrinamientos{
float:left;
margin:0;
 background-image:url(/images/fondoapadrinamiento.gif);
 background-repeat:no-repeat;
 height:161px;
 width:232px;
 color:#000000;}
 
 #iwithblockmenu-contacta{
 float:left;
margin:0;
 background-image:url(/images/fondoapadrinamiento.gif);
 height:161px;
  background-repeat:no-repeat;
 height:161px;
 width:232px;
 color:#000000;}
#iwithblockmenu-organizacion{
float:left;
margin:0;
 background-image:url(/images/fondoapadrinamiento.gif);
 height:161px;
  background-repeat:no-repeat;
 height:161px;
 width:232px;
 color:#000000;}
#iwithblockmenu-proyectos{
float:left;
margin:0;
 background-image:url(/images/fondoapadrinamiento.gif);
 height:161px;
  background-repeat:no-repeat;
 height:161px;
 width:232px;
 color:#000000;}
 #iwithblockmenu-sensibilizacion{
 float:left;
margin:0;
 background-image:url(/images/fondoapadrinamiento.gif);
 height:161px;
  background-repeat:no-repeat;
 height:161px;
 width:232px;
 color:#000000;}
  #iwithblockmenu-voluntariado{
  float:left;
margin:0;
 background-image:url(/images/fondoapadrinamiento.gif);
 height:161px;
  background-repeat:no-repeat;
 height:161px;
 width:232px;
 color:#000000;}
#iwith-boxIdioma{
float:right;
width:95%;
margin-top:10px;
text-align:right;
font-size:12px;
padding-right:10px;
}

	#core_left p {
		font-size: 70%; /* The fontsize is 70% of the fontsize of the body tag. */
	}
	#core_left a, #core_left a:link, #core_left a:visited {
		color: #000000; /* All links, visited or not are black. */
		text-decoration: none; /* with no line under it. */
	}
	#core_left a:hover {
		color: #355f88; 
	}
	#core_left h3, #core_left h4 {
		position: relative; /* All sizes, paddings and margins are measured relative to #header h1. */
		display: inline; 
		vertical-align: center; /* Appear in the center of the #header. */
		font-size: 90%; /* 90% of the size of the font-size from the body. */
		font-weight: 500; /* a bolder font. 600 for even bolder, 100 for very sleek. */
		text-transform: uppercase; /* ALL CAPS ON THIS LINE OF TEXT */
		color: #00ACF4; /* Ocean blue color... */
		letter-spacing: 1px; /* spread those letters over your screen a bit more */
		font-family: "Trebuchet MS", Verdana, sans-serif; /* I love Trebuchet, should've been the standard font! ;-) */
	}
	#core_left li { /* The contents of core_left is presented in an unordered list. Here it is. */
		font-size: 10px; /* Fontsize and styling. */
		font-family: Verdana, Arial, Helvetica, sans-serif;
	}
	.litxt { /* This is the text in the unordered list within core_left, with 5% space on the left. */
		padding-bottom: 18px;
		padding-top:5px;
		width: 95%;
		padding-left:10%;
	}
		*html .litxt{
		padding-bottom: 18px;
		padding-top:8px;
		width: 90%;
		padding-left:10%;}
	
	.litxtllarg{
	   text-align:center;
		padding-bottom: 18px;
		padding-top:5px;
		width: 95%;
		}
	*html .litxtllarg{
		padding-bottom: 18px;
		padding-top:8px;
		width: 90%;
		}
	

		
	#core_left ul { /* this is the ul styles for core_left. */
		list-style: none; /* No dot in the list please. */
		padding-left: 0px; /* Get yourself to the left of the page. */
		margin-left: 0; /* IE needs this to do the same as stated above... */
	}
	


#navcontainer {
text-align: center;
height:57px;
background-color:#cccccc;
padding-top: 3px;
}

*html #navcontainer { /*IE */
	height:60px;}





ul#iwithblockmenu-navlist {
	margin-left: 0;
	padding-left: 0;
	white-space: nowrap;
}

#iwithblockmenu-navlist li {
	display: inline;
	list-style-type: none;
}
#current {
	border-top: 1px dashed #DD8200;
}
#iwithblockmenu-navlist a { 
	padding: 3px 10px; 
	font-size: 11px;
	font: Verdana, Arial, Helvetica, sans-serif;
	text-transform:capitalize;

}

#iwithblockmenu-navlist a:link, #iwithblockmenu-navlist a:visited {
	color: #007CB0;
	background-color: #FFFFFF;
	text-decoration: none;
	border-top: 1px dashed #DD8200;
	
}

#iwithblockmenu-navlist a:hover {
	color: #fff;
	background-color: #DD8200;
	text-decoration: none;
	
}

#iwithblockmenu-navlist a:active {
	color: #fff;
	background-color: #00ACF4;
	text-decoration: none;
}


	
#core_right { /* <DIV #5> */
	width: 669px; 
	float: right; 
	margin: 0; /* No margins, no paddings. */
	padding:0;
}
*html #core_right { /* <DIV #5> */
	width: 668px; 

}


#core_right2 { /* <DIV #5> */
	width: 669px; 
	float: right; 
	margin: 0; /* No margins, no paddings. */
	padding:0;
	background-color: #FFFFFF; /* Fresh white! */
}
#core_right_Portada { /* <DIV #5> */
	width: 669px; 
	float: right; 
	margin: 0; /* No margins, no paddings. */
	padding:0;
		background-color:#e7e8e9;
}

*html #core_right_Portada { /* <DIV #5> */
	width: 666px; 

}



*html #core_right2 { /* <DIV #5> */
	width: 668px; 
	
}

#core_rightAlbum { /* <DIV #5> */
	width: 669px; 
	float: right; 
	margin: 0; /* No margins, no paddings. */
	padding:0;
}
*html #core_rightAlbum { /* <DIV #5 de album OJO !!!!!!!!!  codi xungo pel IE 6!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!> */
	width: 668px; 
	float:left; 
	margin-left: 116px;
	margin-top:-465px;
	padding:0;

}



	#core_right h5, #core_right h6, #core_right2 h5, #core_right2 h6, #core_right_Portada h5, #core_right_Portada h6 { /* The headers in #core_right */
		position: relative; /* All sizes, paddings and margins are measured relative to #header h1. */
		vertical-align: center; /* Appear in the center of the #header. */
		font-size: 90%; /* 90% of the size of the font-size from the body. */
		font-weight: 500; /* a bolder font. 600 for even bolder, 100 for very sleek. */
		text-transform: uppercase; /* ALL CAPS ON THIS LINE OF TEXT */
		color: #355784;
		letter-spacing: 1px; /* spread those letters over your screen a bit more */
		
	}
	 #core_right h5, #core_right h6, #core_right2 h5, #core_right2 h6, #core_right_Portada h5, #core_right_Portada h6  {
		padding-left: 5%; /* The headers and paragraphs in core_right should stay 5% off the edge of div #core_right. */
		
	}
	
	#pieportada{
	background-color:#9FAB06;
color:#FFFFFF;
float:left;
font-size:90%;
height:50px;
margin-bottom:10px;
margin-left:10px;
padding:5px 5px 15px;
text-align:justify;
width:640px;
	
	 }
	*html #pieportada{
	width:620px;
	padding-bottom:2px;
	height:10px;
	}
	
.bottom_ul { /* The small list of links on the bottom of the page. */
	list-style: none; /* no dot next to the list. */
	padding-left: 20px; /* 20px of the leftside of #core_right. */
	width: 420px; /* Always be 420px wide, to get that cool hover effect. */
	height: 12px; /* 10px fontsize, 12px height. Seems enough. */
	margin: 0; /* No extra margins anywhere. It's tight enough */
}
	.bottom_ul li { /* The actual list on the bottom. */
		padding: 0px 10px; /* 0px space above, but 10px space on the right of this list. */
		background-color:#FFFFFF; /* Fresh white! */
	}
	.bottom_ul a { /* The links in the list stated above. */
		font-size: 70%; /* small fontsize. */
		display: block; /* Get that hover effect, display your links in a block with fixed height and width... */
		padding: 3px; /* 3px whitespace everywhere. */
		width: 420px; /* Hey, there's that 420px again! */
		color: #AAAAAA; /* Lightgrey fontcolor. */
		font-family: Verdana, Arial, Helvetica, sans-serif; /* Font. */
	}
	.bottom_ul a:hover { /* Mouseover that list and you'll see... */
		color: #00ACF4; /* Oceanblue fontcolors. */
		width: 420px; /* Hey, there it is again! */
		background: #F8F8F8 url(/images/arrow_right.jpg) 98% 50% no-repeat; /* And an even lightergrey background! */
	}

#iwithblockmsg-footer { /* The bottom, with the copyright notice. */
	width: 885px;
	float:left;  
	height: 15px; /* Give it some height! */
	background-color:#265787;
	color:#FFFFFF;
	padding:8px;
	font-size: 85%;
	font-weight:500;
	

}


.right2{text-align:right;
margin-left:350px;}
*html .right{text-align:right;
margin-left:363px;}
*html .right2{text-align:right;
margin-left:340px;}

.right{
float:right;
text-align:right;
margin-left:375px;}

.left{
float:left;
text-align: left;
font-size:11px;
}

.center{
text-align:center;}



	#iwithblockmsg-footerdos {
		text-transform: uppercase; /* ALL CAPS ON THIS LINE OF TEXT */
		background: #FFFFFF; 
		float:left;
		width:871px;
		padding:15px;
		font-size: 60%; /* An even smaller font then the list we just did. */
		color: #000000; /* Ocean blue color... */
		letter-spacing: 1px; /* spread those letters over your screen a bit more */
		
	}
	#iwithblockmsg-footer a { 
		text-decoration: underline; 
		color: #FFFFFF; 
	}
	
#iwith-box1{
		font-size: 80%; /* 80% of the font-size from the body tag. */
		line-height: 20px; /* The whitespace between the lines. */
		padding-left: 4%;
		text-align:justify;
		padding-right:4%;
		
	}
	#iwith-boxPortada1{
		font-size: 80%; /* 80% of the font-size from the body tag. */
		line-height: 20px; /* The whitespace between the lines. */
		padding-left: 4%;
		text-align:justify;
		padding-right:4%;
		padding-top:4%;
		
	}
	
		#iwith-boxPortada{
		font-size: 80%; /* 80% of the font-size from the body tag. */
		line-height: 20px; /* The whitespace between the lines. */
		padding-left: 4%;
		text-align:justify;
		padding-right:4%;
		height:253px;
		
	}
	
	
	#boxPortada{
		font-size: 80%; /* 80% of the font-size from the body tag. */
		line-height: 20px; /* The whitespace between the lines. */
		padding-left: 4%;
		text-align:justify;
		padding-right:4%;
		
		
	}
#iwith-box2{

		font-size: 80%; /* 80% of the font-size from the body tag. */
		line-height: 20px; /* The whitespace between the lines. */
		padding-left: 5%;
		text-align:justify;
		padding-right:5%;
	}
	
#box1{
		font-size: 80%; /* 80% of the font-size from the body tag. */
		line-height: 20px; /* The whitespace between the lines. */
		padding-left: 5%;
		text-align:justify;
		padding-right:5%;
	}
	
	
	*html #box1{
		width:600px;
		padding-left: 5%;
		text-align:justify;
		padding-right:5%;
	}
	
#boxAlbum{
		font-size: 80%; /* 80% of the font-size from the body tag. */
		line-height: 20px; /* The whitespace between the lines. */
		padding-left: 1%;
		text-align: left;
	}