/*	Index of styles for ... by Marciobarrios ~ marciobarrios.com
--------------------------------------------------------------------------
	- General (titles, generic links, preformatting, some classes)
	- Layout
		- Header
		- Content
		- Footer
	- Forms
*/


/*	General
--------------------------------------------------------------------------*/

:link,:visited{text-decoration:none}
ul,ol{list-style:none}
table {border-collapse:collapse}
h1,h2,h3,h4,h5,h6,pre,code,input,select,textarea{font-size:1em}
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,dd{margin:0;padding:0;line-height:1}
fieldset,a img,:link img,:visited img{border:0}

body{
	font: normal 62.5%/1.6em "Helvetica Neue",helvetica, arial, sans-serif; /* 1em = 10px*/
	color: #9d9d9d;
	text-align: center;
	opacity: .99; -moz-opacity: .99;/*for a good text rendering in Firefox, esto peta los flash!*/
	/*text-shadow: #3b3b3b 0 0 1px;*/
	/*text-shadow:rgba(0,0,0,0.01) 0 0 0;*//*for a good text rendering in safari 3 and 4, but this rule can affect other browsers*/
	background: #3b3b3b url(../img/gradient_top.png) repeat-x top;
	text-shadow: 0px 1px 2px #000;
}
/* for a good text rendering (thin text) in safari (snow leopard) */
body { -webkit-text-stroke:1px transparent; }
@media only screen and (max-device-width:480px) {body{-webkit-text-stroke:0 black;}}

a{
	text-decoration:none;
	outline:none;
}
a:link,
a:visited{
	color: #56a1c3;
	text-decoration:none;
}
a:hover,
a:active{
	/*text-decoration:underline;*/
	color: #72CDF6;
	text-shadow: 0 0 3px rgba(114,205,246,.3);
}

::-moz-selection {
	background-color: #E4953A;
	color: #000;
}

::selection {
	background-color: #fff;
	color: #000;
}

/* Make sure the span's vertical padding (5 + 5) and line-height (14) amount to the total height of the button (24). 
Using a different padding, means setting a different height. */
a.button{
    background: transparent url(../img/bg_button_a.gif) no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}
a.button span{
    background: transparent url(../img/bg_button_span.gif) no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
}
a.button:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}
a.button:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px; /* push text down 1px */
}

p{
	margin-bottom:1.2em;
}

p.right{
	clear:both;
	text-align:right;
}

.hidden,
hr{
	display:none !important;
}

h2{
	/*font:normal 3.6em Colaborate-Thin, helvetica, arial, sans-serif;*/
	font:bold 3em "Helvetica Neue",helvetica, arial, sans-serif;
	letter-spacing:-1px;
	color:#fff;
	margin-top:1.388em;
	margin-bottom:.38em; 
	line-height:1;
	text-shadow:#000 1px 1px 1px;
	/*-moz-box-shadow:#000 1px 1px 1px;*/
	/*font-family: "gesta-1","gesta-2",sans-serif;*/
}
#secondary-content h2{
	font-size:2.5em;
	margin-top:1.98em;
	margin-bottom:.3em;
}
#footer h2{
	font-size:2.8em;
}

h3{
	font-size:1.5em;
	font-weight:normal;
	color:#E4953A;
	text-transform:uppercase;
	margin-bottom:.4em;
	/*font-family: "gesta-1","gesta-2",sans-serif;*/
}
#secondary-content h3{
	margin-top:1.5em;
}
h4{
	font-size:1.5em;
	color:#eee;
	margin-bottom:.4em;
}

strong{
	font-weight:normal;
	color:#fff;
}

ul.list li{
	margin-bottom:.6em;
	padding-left:24px;
	background:url(../img/i_tick.png) no-repeat left .2em;
	_height:1%;
}
ul.list.social li {
	padding-left: 42px;	
	background-position: left top;
	margin-bottom: 1em;
}
/*ul.list.social li:hover {
	 -webkit-transform: translate(150px, 0);
}
@keyframes 'wobble' {
  0 {
    margin-left: 0;
  }
  40% {
    margin-left: 5px;
  }
  60% {
    margin-left: 15px;
  }
  100% {
    margin-left: 20px;
  }
}*/

#content ul.list.social li p {
	margin-bottom: 0;	
	font-size: .9em;
	line-height: 1;
	margin-top: -2px;
}
ul.list li.linkedin {
	background-image: url(../img/social/linkedin.png);
}
ul.list li.linkedin {
	background-image: url(../img/social/linkedin.png);
}
ul.list li.twitter {
	background-image: url(../img/social/twitter.png);
}
ul.list li.flickr {
	background-image: url(../img/social/flickr.png);
}
ul.list li.vimeo {
	background-image: url(../img/social/vimeo.png);
}
ul.list li.youtube {
	background-image: url(../img/social/youtube.png);
}
ul.list li.readernaut {
	background-image: url(../img/social/readernaut.png);
}
ul.list li.delicious {
	background-image: url(../img/social/delicious.png);
}
ul.list li.facebook {
	background-image: url(../img/social/facebook.png);
}
ul.list li.lastfm {
	background-image: url(../img/social/lastfm.png);
}
ul.tarifa li{
	position:relative;
}
	ul.list li em,
	em.tarifa{
		font:bold 1.5em Georgia, serif !important;
		color:#E4953A;
		white-space: nowrap;
	}
	ul.tarifa li em{
		position:absolute;
		top:-.2em;
		right:0;
	}
	
dt{
	font-size:1.5em;
	text-transform:uppercase;
	color:#eee;
	margin-bottom:.5em;
	line-height:1.2;
}
dd{
	margin-bottom:1em;
}

#content table{
	margin:1em 0;
}
#content td,
#content th{
	padding:.5em;
	border:1px solid #555;
	background:#444;
}

#content th{
	background:#232323;
	color:#eee;
}


/*	Layout
--------------------------------------------------------------------------*/
#header,
#content,
#footer .spacing{
	width:90em;
	margin:0 auto;
	text-align:left;
	padding:0 3em;
}
#content p,
#content li,
#content dd,
#content table,
#footer p,
#footer li{
	font-size:1.4em;
	line-height:1.5;
}
#content li *,
#footer li *,
#content dd *{
	font-size:1em;
}


	/*	Header
	----------------------------------------------------------------------*/
	#header{
		overflow:hidden;
		_height:1%;
		padding-bottom:4em;
	}
	h1{
		position:relative;
		display:block;
		float:left;
		width:283px;
		height:68px;
		text-indent:-9999px;
		margin-top:5em;
	}
		h1 a{
			position:absolute;
			display:block;
			top:0;
			left:0;
			width:283px;
			height:68px;
			background:url(../img/logo.png) no-repeat bottom;
			outline:none;
		}
		h1 a:hover,
		h1 a.hover {
			background:url(../img/logo.png) no-repeat top;
		}
		
	#menu{
		float:right;
		/*width:41.5em;*/
		margin-top:8.8em;
	}
		#menu li{
			float:left;		
		}
			#menu li a{
				margin-left:2em;
				height:23px;
				background:url(../img/menu.png);
				outline:none;
				text-indent:-9999px;
				display:block;
			}
			#menu li a.current{
				cursor:default;
			}
			
			#menu li#menu-inicio a{
				width:53px;
				background-position:0 0;
			}
			#menu li#menu-inicio a:hover,
			#menu li#menu-inicio a.hover{
				background-position:0 -23px;
				margin-left:0;
			}
			#menu li#menu-inicio a.current{
				background-position:0 bottom;
			}
			
			#menu li#menu-sobremi a{
				width:77px;
				background-position:-63px top;
			}
			#menu li#menu-sobremi a:hover,
			#menu li#menu-sobremi a.hover{
				background-position:-63px -23px;
			}
			#menu li#menu-sobremi a.current{
				background-position:-63px bottom;
			}
			
			#menu li#menu-articulos a{
				width:87px;
				background-position:-150px top;
			}
			#menu li#menu-articulos a:hover,
			#menu li#menu-articulos a.hover{
				background-position:-150px -23px;
			}
			#menu li#menu-articulos a.current{
				background-position:-150px bottom;
			}
			
			#menu li#menu-trabajo a{
				width:75px;
				background-position:-247px top;
			}
			#menu li#menu-trabajo a:hover,
			#menu li#menu-trabajo a.hover{
				background-position:-247px -23px;
			}
			#menu li#menu-trabajo a.current{
				background-position:-247px bottom;
			}
			
			#menu li#menu-contacto a{
				width:83px;
				background-position:-331px top;
			}
			#menu li#menu-contacto a:hover,
			#menu li#menu-contacto a.hover{
				background-position:-331px -23px;
			}
			#menu li#menu-contacto a.current{
				background-position:-331px bottom;
			}
	
	/*	Content
	----------------------------------------------------------------------*/
	#content{
		clear:both;
		overflow:hidden;
		_height:1%;
		padding-bottom:3em;
	}
		.destacado{			
			/*background:#232323;*/
			/*border:1px solid #555;*/
			color:white;
			overflow:hidden;
			_height:1%;
			background:url(../img/separador.png) repeat-x bottom;
		}
		.destacado div {
			/*padding:3em 1.5em 3em;*/
			padding: 3em 0;
			background:url(../img/separador.png) repeat-x top;
		}
		
			.destacado p{
				font:2.7em/1.2em Colaborate-Thin, helvetica, arial, sans-serif;
				margin:0 auto;
				/*padding-top:.5em;*/
			}
			.destacado p{	
				/*width:870px;
				height:96px;*/
				width: 900px;
				height: 108px;
				background:url(../img/frase-inicio.png) no-repeat;
				text-indent:-9999px;
			}
			#destacado-sobremi p{
				background:url(../img/frase-sobremi.png) no-repeat;
			}
			#destacado-trabajo p{
				background:url(../img/frase-trabajo.png) no-repeat;
			}
			#destacado-contacto p{
				background:url(../img/frase-contacto.png) no-repeat;
			}
		
		#primary-content{
			float: left;
			width: 57em;
		}
		
			/* %Twitter */
			p#preloader {
				margin: 0;
				padding: 1em 1em 1em 4em;
				background: url(../img/load.gif) 1em center no-repeat;
			}
			#primary-content #twitter ul{
				width: 100%;
				float: left;
			}
			#primary-content #twitter li{
				float: left;
				width: 100%;
				padding: 1em 0;
				border-top: 1px solid #444;
			}
			#primary-content #twitter li.first, /* compatibility with IE6 */
			#primary-content #twitter li:first-child{
				border-top: 0;
				padding-top: 0;
			}
				#primary-content #twitter li span{
					float: right;
					width: 31em;
				}
				#primary-content #twitter li a{
					float: left;
					width: 9.5em;
					text-align: right;
				}
				#primary-content #twitter li span a{
					float: none;
					width: auto;
					text-align: left;
				}
				
			/* %Proyectos home / %listado de proyectos */
			.work-list li{
				padding:2em 0;
				/*border-top:1px solid #444;*/
				background:url(../img/separador.png) repeat-x top;
				overflow:hidden;
				_height:1%;
			}
			.work-list li li{
				padding:0;
				border:0;
			}
			/*.work-list li.first,
			.work-list li:first-child{
				padding-top:0;
				background:none;
			}*/
				.work-list h3,
				.recent-work h3{
					font-size:1.6em;
					margin-bottom:.6em;
				}
				.work-list h3{
					font-size:1.145em !important;
				}
				.recent-work a.img,
				.work-list a.img{
					position:relative;
					float:left;
					width:24em;
					height:24em;
					padding:.8em;
					background:#555;
					
					/*-moz-box-shadow: 0 0 10px #000000 inset;*/
					-moz-border-radius:10px;
					-webkit-border-radius:10px;
					border-radius:10px;
				}
				.no-boxshadow .recent-work a.img,
				.no-boxshadow .work-list a.img{
					width:24.2em;
					height:24.2em;
				}
					.recent-work a.img img,
					.work-list a.img img{
						border:none !important;
						width:24em;
						height:24em;
						
						-moz-box-shadow:0 0 5px #000;
						-webkit-box-shadow:0 0 5px #000;
						box-shadow:0 0 5px #000;
					}
					.no-boxshadow .recent-work a.img img,
					.no-boxshadow .work-list a.img img {
						border:.2em solid #3b3b3b !important;
					}
					.recent-work a.img:hover,
					.work-list a.img:hover {
						background:#666;
					}
					.no-boxshadow .recent-work a.img:hover img,
					.no-boxshadow .work-list a.img:hover img {
						border-color:#fff;
					}
					span.zoomin {
						position:absolute;
						top:1.2em;
						left:1.2em;
						width:26px;
						height:26px;
						display:none;
						background:url(/img/zoomin.png) no-repeat;
					}
					.recent-work a.img:hover span.zoomin,
					.work-list a.img:hover span.zoomin {
						display:block;
					}
				.work-list a.img,
				.work-list ul{
					font-size:.715em !important; /*para compensar el font-size genérico*/
				}
				.recent-work ul,
				.work-list ul{
					float:right;
					width:28em;
				}
					.recent-work ul li,
					.work-list ul li{
						margin-top:.8em;
						float:left;
						width:100%;
						font-size:1.4em !important;/*para Recompensar el font-size genérico*/
						background:none;
					}
					.recent-work ul li.first,
					.work-list ul li.first,
					.recent-work ul li:first-child,
					.work-list ul li:first-child{
						margin-top:0;
					}
						.recent-work ul li span,
						.work-list ul li span{
							float:left;
							width:4em;
						}
						.recent-work ul li strong,
						.work-list ul li strong{
							float:right;
							width:16em;
							line-height:1.3;
						}
				.recent-work p.right{
					padding-top:1em;
				}
						
			/* %codigo */
			code{
				display:block; 
				background-color:#232323; 
				border:1px solid #555; 
				margin:.5em 0 1em;
				padding:1em;
				font:1.4em "Lucida Console","Courier New",tahoma,sans-serif; 
				text-align:left; 
				color:#eee;
				overflow:auto;
			}
			#content pre code{
				font-size:1.73em;
			}
		
			#content li code{
				font-size:1.2em;
			}
			
			#content dd code{
				font-size:1.2em;
			}
			
			/* articulos */
			#primary-content.articulo p.descripcion{
				font-size:1.2em;
				color:#777;
				margin-top:-.7em;
			}
			#primary-content.articulo ul{
				margin:1em 0;
			}
			#primary-content.articulo li{
				margin:0 0 1em 2em;
				list-style: disc outside;
			}
			#primary-content.articulo img{
				float:none;
				margin:1em 0;
			}
			
				
				
		#secondary-content{
			position:relative;
			float:left;
			width:27em;
			left:6em;
		}
			/*%Testimonials*/
			ul.testimonials{
			}
				ul.testimonials li{
					margin-bottom:2.143em;
					height:1%;
				}
					ul.testimonials li blockquote{
						margin-bottom:.2em;
					}
					ul.testimonials li p{
						margin:0;
						font-size:1em !important;
					}
					ul.testimonials li em{
						font-size:.9em;
						line-height:1.4;
						color:#fff;
						display:block;
					}
			p#testimonials-doit{
				padding-top:2.143em;
				border-top:1px solid #444;
			}
		
		#primary-content img{
			float:left;
			margin:0 2em 1em 0;
			border:.5em solid white;
		}
		#primary-content ul.work-list img{
			margin-right:0;
		}
	
	
	/*	Footer
	----------------------------------------------------------------------*/
	#footer{
		clear:both;
		text-align:left;
		background:#2a2a2a url(../img/bg_footer_top.png) repeat-x center top;
		padding-top:10px;
	}
		#footer .spacing{
			background:#2a2a2a url(../img/bg_footer.png) no-repeat center top;
			padding-top:2em;
			overflow:hidden;
			_height:1%;
		}
			#footer .col{
				float:left;
				width:26em;
				margin-left:6em;
			}
			#footer .col.first,
			#footer .col:first-child{
				margin-left:0;
			}
				#footer .col h2{
					margin-top:0;
					font-weight:normal;
				}
				#footer .col li{
					margin-top:.5em;
					padding-top:.5em;
					border-top:1px solid #444;
				}
				#footer .col li.first,
				#footer .col li:first-child{
					margin-top:0;
					padding-top:0;
					border-top:none;
				}
			#footer .col p.right{
				margin-top:1em;
			}
			#footer #flickr{
				width:29em;
			}
				#footer #flickr p{
					margin-right:4.5em;
				}
			#footer #bookmarks{
				margin-left:0;
			}
				#footer #flickr li{
					position:relative;/*para estilar las imagenes*/
					float:left;
					width:7.6em;
					height:80px;/*altura fotos*/
					margin:0 1em 1em 0;
					padding:0;
					border:none;
					overflow:hidden;
				}
					span.img-default,
					span.img-hover,
					span.img-big-default,
					span.img-big-hover{
						position:absolute;
						top:0;
						left:0;
						width:106px;
						height:80px;
						background:url(../img/img-link.png) no-repeat top;
					}
					span.img-big-default,
					span.img-big-hover{
						background:url(../img/img-big-link.png) no-repeat top;
						width:240px;
						height:240px;
					}
					span.img-hover,
					span.img-big-hover{
						background-position:bottom;
					}
					#footer #flickr li img{
						width:106px;	
						/*border:.3em solid white;*/
					}
					
		#footer #footer-bottom{
			clear:both;
			text-align:center;
			padding:3em 0 1em;
			font-size:1.1em;
		}
	
	

/*	%Forms (falta retocar todo esto, utilizar los selectores de atributo para estándares y poner esto en la css de ie)
--------------------------------------------------------------------------*/
/*%% pendiente de mirar, esto esta optimizado para firefox*/
select{
	padding:1px 0;
	background:white;/* required for opera */
}
input.image,
input.button,
input.submit,
input[type=submit],
button{
	cursor:pointer;
}
/* fix ie bug: correct padding */
/*input.submit,
button{ 
	overflow:visible;
}*/

.form li{
	float:left;
	width:100%;
	clear:left;
	margin:0 0 10px 0;
}
.form li.submit{
	margin-top:15px;
	padding-left:7em;
}
	#primary-content .form li.submit img{
		border:none;
		background:transparent;
		float:none;
		margin:0;
		vertical-align:middle;
	}
	.form li input.submit,
	.form li input[type=submit]{
		float:none;
		display:inline;
		font-size: 1.2em !important;
		color:black;
	}
	.form select,.form input,.form textarea{
		font:1.2em "Helvetica Neue",helvetica, arial, sans-serif !important;
		float:left;
	}
	/* quito los cambios de background porque sino no funciona el tipico borde de mac */
	/*.form li input[type=text],
	.form li textarea{
		background:#ffc;
	}
	.form li input[type=text]:focus,
	.form li textarea:focus{
		background-color:#fff;
	}*/
	.form input.text,
	.form input.textarea,
	.form input[type=text]{
		width:25em;
		color:black;
	}
	form textarea{
		width:25.25em;
	}
	.form label{
		display:block;
		float:left;
		width:6em;
		margin-right:1em;
		margin-top:.2em;
		text-align:right;
		color:#fff;
	}
	.form input.error,
	.form textarea.error,
	#testimonios input.error,
	#testimonios textarea.error{
		background:#F3C9C7 !important;
	}
	.form label.error,
	#testimonios label.error{
		clear:left;
		float:left;
		display:inline;
		width:auto;
		text-align:left;
		color:#FF6168;
		font-weight:bold;
		margin-left:7em;
		background:url(../img/i_exclamation.png) no-repeat left 5px;
		padding:4px 0 0 20px;
	}
	#testimonios label.error {
		padding-top:6px;
		position:relative;
		top:-.5em;
		margin:0 0 .5em 0;
	}
	p.message,
	p.error{
		font-size:2em !important;
		background:none;
		padding:0;
		margin:1em 0 0;
		color:#ffc;
		line-height:1.2;
		background:url(../img/message-ok.png) no-repeat left top;
		padding:8px 0 8px 50px;
	}
	p.error{
		color:#FF6168;
		background:url(../img/message-ko.png) no-repeat left top;
	}
	.form label.inline.nomargin{
		margin:0 7px;
	}
	
	
form#testimonios{
	display:none;
	font-size:1.5em;
	margin-top:-.5em;
}
form#testimonios label{
	color:#999;
	font-weight:bold;
}
form#testimonios input,
form#testimonios textarea{
	font:1em "Helvetica Neue",Helvetica, arial, sans-serif;
	width:98%;
	padding:2px;
	clear:left;
	margin-bottom:.5em;
}
form#testimonios input{
	width:96.5%;
}


/* IDEP */
h3.mal,
h3.bien{
	font-size: 3em;
	text-transform: uppercase;
	color: #ff0071;
	font-weight: bold;
	text-shadow: #212121 1px 1px 1px;
	margin: 1em 0 0;
}

h3.bien{
	color: #8fe719;
}
	
	
/* Chili */
.html .php    { color: #D66; }
.html .tag    { color: #FD6; }
.html .aname  { color: #8ac6f2; }
.html .avalue { color: #8D6; font-style:italic; }
.html .mlcom  { color: #777; }
.html .entity { color: #D66; }

.js .mlcom    { color: #777; }
.js .com      { color: #555; }
.js .regexp   { color: #D66; }
.js .string   { color: #8D6; font-style:italic; }
.js .paren    { color: #F88; }
.js .reserved { color: #FF9; }
.js .keywords { color: #8ac6f2; }
.js .global   { color: #68D; }
.js .numbers  { color: #D66; }

.css .comment {color: #777;}
.css .properties,
.css .propertiesBox,
.css .propertiesColor {color: #f92672;}
.css .hack {font-style: italic; color: #56f;}
.css .media {color: #fd971f;}
.css .selectors {color: #a5e22d;}
.css .idselector {color: #a5e22d;}
.css .classelector {color: #a5e22d;}
.css .important {color: #f92672;}
.css .value {color: #ae80ff;}

.php .tag {color: #FD6;}
.php .com {color: #777; font-style: italic;}
.php .const1,
.php .const2,
.php .global,
.php .number {color: #D66;}
.php .function {color: #68D;}
.php .keyword {color: #8ac6f2;}
.php .mlcom {color: #777;}
.php .name {color: #8ac6f2;}
.php .string1 {color: #8D6;}
.php .string2 {color: #ffc;}
.php .value {color: #FF9; font-style: italic;}
.php .variable {color: #fff;}


/*	Transitions
----------------------------------------------------------------------*/
a {
	-moz-transition: color 0.25s linear;
	-o-transition: color 0.25s linear;
	-webkit-transition: color 0.25s linear;
	transition: color 0.25s linear;
}

#menu a {
	-moz-transition: all 0.25s linear;
	-o-transition: all 0.25s linear;
	-webkit-transition: all 0.25s linear;
	transition: all 0.25s linear;
}

.work-list a.img {
	-moz-transition: all 0.25s linear;
	-webkit-transition: all 0.25s linear;
	transition: all 0.25s linear;
}