html {
	background:#c6d2b5;
}

html, body, div, h1, h2, h3, h4, h5, h6, p, img, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:14px;
	line-height:20px;
	color: #3d4137;
}

body {
	line-height: 1;
	background: #c6d2b5 url(images/bg.jpg) repeat-x top;
}

ol, ul {
	list-style: none;
}

:focus {
	outline: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

a {
	color: #512f00;
	text-decoration: none;
	font-weight: bold;
}

a:hover {
	color: #7e6212;
}

input, textarea {
	border: none;
	padding: 5px;
	float: left;
	font-style: italic;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	color: #3d4137 !important;
	resize: none;
}

fieldset {
	border: none;
}

form {
	margin: 0;
	padding: 0;
}

input.button {
	width:100px !important;
	display: block;
	cursor: pointer;
}

label {
	display: none;
}

/*********************** 
* Layout
************************/

#wrapper {
	width:100%;
	height:100%;
	position:absolute;
	bottom:0;
	left:0;
	overflow:hidden;
}

#mask {
	width:500%;
	height:100%;
}

.box {
	width:20%;
	height:100%;
	float:left;
	position: relative;
}

.content {
	bottom:0;
	height:75%;
	left:50%;
	margin-left:-480px;
	position:absolute;
	width:960px;
}

.inner {
	width:900px;
	height:100%;
	min-height: 500px;
	position:absolute;
	bottom: 0;
}

/*********************** 
* Header
************************/

#menu {
	position:absolute;
	bottom:0px;
	z-index:10;
	left: 50%;
	overflow: hidden;
	display: block;
	margin: 0 0 0 -450px;
	padding: 0;
	width:950px;
}

#menu li {
	padding: 0;
	margin: 0;
}

#menu li.copyright {
	padding-top:28px;
	width:383px;
	color: #236b7c;
	opacity:.8;
}

#menu a {
	color:#236b7c;
	text-decoration:none;
	display: block;
	padding:35px 10px 25px 10px;
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
}

#menu a:hover {
	color:#FFF;
	text-decoration:none;
}

#menu a.selected {
	background:url(images/fungus.png) no-repeat 0 bottom;
	color:#FFF;
}

#menu a.home {
	width:90px;
}

#menu a.portfolio {
	width:87px;
	background-position: -119px bottom;
}

#menu a.about {
	width:90px;
	background-position: -229px bottom;
}

#menu a.network {
	width:100px;
	background-position: -350px bottom;
}

#menu a.contact {
	width:100px;
	background-position: right bottom;
}

#menu li {
	float:left;
}

/*********************** 
* Grass A
************************/

.clouds {
	width:100%;
	height:238px;
	overflow:hidden;
	position: absolute;
	bottom: 0;
	z-index: 4;
}

#grass {
	width:3000px;
	height:100%;
	background:url(images/grass.png) repeat-x 25px bottom;
}

/*********************** 
* Grass B
************************/

#cloud2 {
	position:absolute;
	bottom:20px;
	height: 231px;
}

.clouds-big {
	width:4000px;
	height:100%;
	background:url(images/grass_a.png) repeat-x bottom;
}

.clouds_a {
	width:100%;
	height:95%;
	overflow:hidden;
	position: absolute;
	z-index: 3;
}

/*********************** 
* Land
************************/

#cloud3 {
	position: absolute;
	bottom: 20px;
	z-index: 2;
	height: 216px;
}

#cloud3 .clouds-big {
	background:url(images/land.png) repeat-x bottom;
	height:85%;
}

/*********************** 
* Logo
************************/

#cloud0 {
	position: absolute;
	bottom:255px;
	z-index: 1;
}

#cloud0 .clouds-big {
	background:url(images/logo.png) no-repeat 400px bottom;
	height:164px;
}

/*********************** 
* Trees
************************/

#cloud4 {
	position: absolute;
	bottom: 150px;
	z-index: 1;
	height: 264px;
}

#cloud4 .clouds-big {
	background:url(images/trees.png) repeat-x 20px bottom;
	height:100%;
}

/*********************** 
* Birds A
************************/

#cloud7 {
	position: absolute;
	bottom: 0;
	z-index: 1;
}

#cloud7 .clouds-big {
	background:url(images/birds_a.png) repeat-x 240px 90px;
	height:68%;
}

/*********************** 
* Clouds
************************/

#cloud5 {
	position: absolute;
	bottom: auto;
	z-index: 1;
	top:0;
	height: 86px;
}

#cloud5 .clouds-big {
	background:url(images/cloud.png) repeat-x top left;
	height:100%;
}

/*********************** 
* Birds
************************/

#cloud6 {
	position: absolute;
	bottom: auto;
	z-index: 0;
	top:0;
}

#cloud6 .clouds-big {
	background:url(images/birds.png) repeat-x 280px 100px;
	height:100%;
}

/*********************** 
* Sun
************************/

#cloud8 {
	position: absolute;
	bottom: auto;
	z-index: -1;
	bottom:100px;
	height: 360px;
}

#cloud8 .clouds-big {
	background:url(images/sun.png) no-repeat 130px 60%;
	height:100%;
}

/*********************** 
* Girls
************************/

.avatar {
	width:292px;
	height:600px;
	z-index:6;
	position:absolute;
	bottom:0;
	text-indent:-999px;
	right:0;
	background:transparent no-repeat bottom right;
	overflow:hidden;
}

.avatar.girl1 {
	background-image:url(images/girl1.png);
	width:238px;
	bottom:-30px;
}

.avatar.girl2 {
	background-image:url(images/girl2.png);
	width:166px;
	z-index:3;
	right:64px;
	bottom:35px;
}

.avatar.girl3 {
	background-image:url(images/girl3.png);
	width:195px;
	z-index:3;
	right:90px;
	bottom:35px;
}

.avatar.girl4 {
	background-image:url(images/girl4.png);
	width:161px;
	z-index:3;
	bottom:-15px;
	right:0px;
}

.avatar.girl5 {
	background-image:url(images/girl5.png);
	width:318px;
	z-index:3;
	bottom:0px;
	right:-50px;
}

/*********************** 
* Papers
************************/

#home .content .inner {
	z-index: 3;
	right: 0;
	bottom:110px;
	width:480px;
}

#historias .content .inner, #sobremi .content .inner {
	right: -3%;
	width:900px;
	bottom: 30px;
}

#mired .content .inner, #contacto .content .inner {
	bottom:80px;
}

#historias .content .inner .paper {
	z-index: 3;
	background-position: 920px top;
	width:502px;
	left: auto;
	right:-65px;
	bottom:0;
}

#historias .content .inner.cont, #historias .content .inner .paper.cont {
	right: 0;
	width:1004px;
}

#sobremi .content .inner .paper {
	z-index: 2;
	background-position: 520px top;
	bottom:0px;
}

#mired .content .inner .paper {
	z-index: 1;
	bottom:-80px;
	background-position: 320px top;
}

#contacto .content .inner .paper {
	z-index: 3;
	bottom:-80px;
	background-position: 120px top;
}

.box .content .inner .paper {
	background: transparent url(images/paper.png) repeat-x top left;
	height:610px;
	position: relative;
	left: 0;
	width:555px;
	bottom: 0;
	z-index: 1;
	opacity:.9;
	overflow: hidden;
}

/*********************** 
* Titles
************************/

.box .content .inner .paper h1 {
	width:293px;
	overflow: hidden;
	height: 44px;
	background: transparent url(images/titles_es.png) no-repeat 0 0;
	text-indent: -999px;
	margin-top: 30px;
	margin-left: 250px;
}

#historias .content .inner .paper h1 {
	background-position: 25px 0;
	margin-left: 0;
}

#sobremi .content .inner .paper h1 {
	background-position: 60px -45px;
}

#mired .content .inner .paper h1 {
	background-position: 0px -95px;
}

#contacto .content .inner .paper h1 {
	background-position: 0px -155px;
}

/*********************** 
* Stories / Portfolio
************************/

#adobe-reader-download {
	margin:10px 15px;	
}

div.portfolio_list {
	width:502px;
	overflow: hidden;
	margin: 10px auto 0 auto;
	height: 230px;
	/*height: 280px;*/
}

div.portfolio_list h2 {
	color: #AD7405;
	padding-bottom: 9px;
	font-size: 18px;
	display: block !important;
	font-family: Arial, "Trebuchet MS", "Lucida Grande";
}

div.portfolio_list .project {
	padding: 0 0 20px;
	float: left;
	background: transparent url(images/portfolio_bg.png) no-repeat center 23px;
	margin: 0 15px;
	width:220px;
}

div.portfolio_list .project p {
	padding: 15px 0 0 0;
	overflow: hidden;
	line-height: 16px;
}

div.portfolio_list .project.alt {
	margin-right: 0;
}

div.portfolio_list .project a {
	display: block;
	clear: both;
	font-size: 11px;
	text-align: center;
}

div.portfolio_list .project a img {
	border: 3px solid #a88f34;
	opacity:.85;
	width:204px;
	height: 160px;
}

div.portfolio_list .project a:hover img, div.portfolio_list .project a img:hover {
	opacity:1;
	border-color:#767f68;
}

#historias .content .inner a.expand {
	position: absolute;
	top:0;
	left: 30px;
	z-index: 999;
	background: url(images/expand_contract_es.png) no-repeat 0 0;
	width:102px;
	height: 30px;
	overflow: hidden;
	text-indent: -999px;
}

#historias .content .inner.cont a.expand {
	background-position: 0 -30px;
	left: -20px;
	width:110px;
}

/*********************** 
* Stories Slider
************************/

#slider ul, #slider li {
	margin:0;
	padding:0;
	list-style:none;
}

#slider, #slider li {
	overflow:hidden;
}

#slider {
	width:100%
}

#slider li {
	width:502px;
}

a.prev, a.next {
	top:35px;
	position: absolute;
	right: 125px;
	background: transparent url(images/prev_next_es.png) no-repeat 0 0;
	width:82px;
	height:31px;
	overflow: hidden;
	text-indent: -999px;
	display: block;
	cursor: pointer;
}

a.prev:active {
	background-position: 0 -35px;
}

a.next {
	right: 40px;
	background-position: -85px 0;
}

a.next:active {
	background-position: -85px -35px;
}

ul.slide li {
	float: left;
}

/*********************** 
* About Me
************************/

div.aboutme img {
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
}

div.aboutme {
	padding: 10px 20px;
}

div.aboutme p {
	padding: 10px 0 0 170px;
}

.resume {
	position: absolute;
	top:240px;
	left: 43px;
	display: block;
	width:84px;
	height: 31px;
	text-indent: -999px;
	overflow: hidden;
	background: url(images/resume.png) no-repeat 0 0;
}

.resume:hover {
	background-position:0 -32px;
}

.resume:focus, .resume:active {
	background-position:0 -64px;
}

/*********************** 
* Social Drag & Drop
************************/

#social {
	overflow: auto;
	padding: 15px 15px 0 15px;
}

#social a .tooltip {
	display: none;
}

#social #icons {
	width: 255px;
	height: 239px;
	float: left;
	padding: 0 0 0 15px;
}

#social .icon {
	float: left;
	margin: 0 15px 15px 0;
	background: url(images/network_bg.png) no-repeat left top;
}

#social div.icon:hover {
	background-image: url(images/network_bg_over.gif);
}

#social .icon a {
	display: block;
	width: 70px;
	height: 68px;
	text-decoration: none;
	background: url(images/social-sprite-large.png) no-repeat left top;
}

#social .social4 a {
	background-position: -88px -68px;
}

#social .social2 a {
	background-position: -88px 4px;
}

#social .social6 a {
	background-position: -88px -136px;
}

#social .social5 a {
	background-position: 0 -136px;
}

#social .social3 a {
	background-position: 0 -68px;
}

#social #dropzone {
	width: 241px;
	height: 180px;
	background: url(images/bg-dropzone-sprite_es.png) no-repeat 0 0;
	float: left;
	margin-left: 5px;
}

#social #dropzone.hover {
	background-position: -241px 0;
}

/*********************** 
* Contact Form
************************/

#contact_form {
	width:500px;
	margin: 0 28px;
	clear: both;
	height: 200px;
	padding-top: 20px;
	position: relative;
}

#contact_form * {
	overflow: hidden;
}

#contact_form ul {
	float: left;
	width:200px;
	margin: 0;
	padding: 0;
}

#contact_form ul.comment_area li {
	padding: 0 0 5px 0;
}

#contact_form ul.comment_area {
	width:300px;
}

#contact_form input#name {
	background:url(images/name_field.png) no-repeat 0 -6px;
}

#contact_form input#email {
	background:url(images/email_field.png) no-repeat 0 -6px;
}

#contact_form input#phone {
	background:url(images/phone_field.png) no-repeat 0 -6px;
}

#contact_form input {
	padding: 10px 10px 10px 30px;
	width:205px !important;
	overflow: hidden;
}

#contact_form ul, #contact_form li {
	list-style: none;
}

#contact_form li {
	clear: both;
	position: relative;
	overflow: hidden;
	padding: 0 0 10px 0;
}

#contact_form input.button {
	float: right;
	margin-right: 10px;
	background: url(images/send_btn_es.png) !important;
	color: #FFF;
	display: block;
	width:84px !important;
	height: 30px;
	overflow: hidden;
	text-indent: -999px;
	line-height: 0;
	padding: 0;
	font-size: 0;
}

#contact_form input.button:hover {
	background-position: 0 -32px !important;
}

#contact_form input.button:focus {
	background-position: 0 -64px !important;
}

#contact_form li.comments label, #contact_form li.comments textarea {
	clear: both;
}

#contact_form li .error {
	position: absolute;
	top:0;
	right: 10px;
	background: #bf1b1b;
	width: 48px;
	color: #FFF;
	text-align: right;
	font-size: 12px;
	padding: 0 5px;
}

#contact_form li label {
	float: left;
	width: 70px;
}

#contact_form textarea {
	background:transparent url(images/comment_bg.png) no-repeat scroll 0 0;
	float:right;
	height:101px;
	overflow:auto;
	padding:20px;
	width:250px;
}

/*********************** 
* Lazy to fill the form
************************/

.lazy {
	clear: both;
	position: absolute;
	top: 200px;
}

.lazy h2 {
	display: block !important;
	height: 40px;
	background: url(images/lazy_es.png) no-repeat left;
	width:200px;
	overflow: hidden;
	text-indent: -999px;
}

.lazy ul {
	width: 100% !important;
}

.lazy ul li {
	clear: both;
	padding-bottom: 2px !important;
}

.lazy ul li span, .lazy ul li strong {
	float: left;
	display: block;
}

.lazy ul li strong {
	width: 110px;
}

/*********************** 
* IE6 warning
************************/

#ie6Warning {
	position:absolute;
	top:0;
	left:0;
	margin:0px auto;
	background:#fff;
	padding:15px;
	clear:both;
	border:5px solid #C00;
	z-index:999;
}

#stamp-by {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:10px;
}

#stamp-by a {
	padding:0px;
	margin:0px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:10px;
	font-weight:bold;
	text-decoration:none;
	display:inline;
}

#ingeniarte-link {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#F6822A;
	font-size:10px;
	font-weight:bold;
	text-decoration:none;
}