/* reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

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

strong{
	font-weight:bold;
	color:#808080;
}


HTML
{
	padding: 0;
	margin: 0;
	background-color: #EEEEEE;
}
BODY
{
	margin: 0;
	padding: 0;
	font-family: Arial;
	font-size:12px;
	color:#999;
}
IMG
{
	border: none;
}

A
{
	text-decoration: none;
	color: #669900;
}

/* font */

p {
	font-size:12px;
	color:#999;
	line-height: 14px;
}

h1, h2 {
    color:#333;
	font-weight:bold;
	font-size:16px;
	font-family: 'PT Sans', Arial, Helvetica, sans-serif;
	line-height: 25px;
	text-transform:uppercase;
}

h3, h3 a{
	color:#666;
	font-weight:bold;
	font-size:13px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 15px;
}

h3:hover{
	text-decoration:underline;
	color:#666;
}

h4 {
	color:#666;
	font-weight:bold;
	font-size:11px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 13px;
}

.bold
{
	font-weight:bolder;
	color:#000;
}	

.center {
	margin: 0 auto;
}

.clear{
	clear:both;	
}

.left {
	float:left;
}

.right {
	float:right;
}

/*espacios*/

.spacetopsm { 
	margin: 10px 0 0 0 ;
}

.spacetop { 
	margin: 20px 0;
}

.spacebottom { 
	margin: 0 0 10px 0 ;
}

/*colors*/

.blue{
	color: #6CF;	
}

/* wrapper */

#around{
	width: 950px;
	background:url(img/bg.jpg) repeat-y;
	margin: 0 auto;
}

#wrapper
{
	width: 900px;
	margin: 0 auto;
}


/* header */

#header
{
	background-color: #FEFEFE;
	padding: 20px 10px;
	border-bottom: 5px solid #000000;
	height:50px;
}

.logo
{
	padding-right: 20px;
	float: left;
	width:300px;
}

.menu
{
	float: right;
	width: 200px;
}

.menu img
{
	display:block;
}

.nav li{
	float:left;
	width: 60px;
	margin:0 auto;
	text-align:center;
	margin-top: -10px;
}

.nav img{
	margin:5px auto;
}
/* js slider */

.destacado
{
	width: 900px;
	height: 200px;
	background-color:#FFF;
}

.cs-title{
	color:#333;
}


/* container */

#container
{
	border-top: 6px solid #000000;
	border-bottom: 6px solid #669900;
	width: 900px;
	background-color: #FFFFFF;
	padding:0 0 20px 0;
	clear:both;
	overflow: hidden;
}

#leftbar {float:left; width: 220px;  padding: 10px;}
#rightbar {float:right;width: 620px;padding: 10px;}
#mainbar {padding: 10px;}

/*leftbar*/
.project_thumb {border:5px solid #fff; margin-right: 4px;}
.project_thumb:hover {border:5px solid #d3d3d3;}

/*content*/

 .work{
 	width:600px;
	border-bottom:1px dotted #c3c3c3;
	height:170px;
 }

 .work_right{
 	float:right;
	width:310px;
	margin-left:10px;
 }
 
  .work_left{
 	float:left;
	width:250px;
 }
 
  .experiencia{
	border-bottom:1px dotted #c3c3c3;
	height:100px;
 }
 
   .experiencia_left{
 	float:left;
	width:220px;
	padding:0 5px;
	height: 100px;
 }
  .experiencia_right{
 	float:right;
	width:600px;
 }
 
 /*CSS GRAFICOS*/
 
 body {
	
}

.chart{
	width:220px;
	height:180px;
	margin: 10px 0;
	font-family: 'PT Sans', Arial, Helvetica, sans-serif;
}

.chart_resume{
	width:45%;
	height:200px;
	margin: 10px 0;
	font-family: 'PT Sans', Arial, Helvetica, sans-serif;
	float:left;
}
.graph{
	float:left;
	margin: 0 7px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#333;
	text-align:center;
	font-weight:bold;
}

.graph_text{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#999;
	margin-top:4px;
}

.graph_text a:hover{
	color:#333;
}

.bar{
	width:25px;
	margin:0 auto;
}

.bar:hover{
	background-color:#c2c2c2;
}

.html{
	height:150px;
	background-color:#036;
}

.css{
	height:150px;
	background-color:#F60;
}

.ie{
	height:140px;
	background-color:#06F;
	margin-top:10px;
}

.ux{
	height:130px;
	background-color:#0F3;
	margin-top:20px;
}

.js{
	height:100px;
	background-color:#9F0;
	margin-top:50px;
}

.as{
	height:100px;
	background-color:#F00;
	margin-top:50px;
}

.php{
	height:50px;
	background-color:#6CF;
	margin-top:100px;
}

.sql{
	height:50px;
	background-color:#6CF;
	margin-top:100px;
}

.ps{
	height:150px;
	background-color:#06C;
}

.ai{
	height:150px;
	background-color:#F60;
}

.dw{
	height:150px;
	background-color:#0C0;
}

.fl{
	height:100px;
	background-color:#900;
	margin-top:50px;
}

.tresds{
	height:90px;
	background-color:#999;
	margin-top:60px;
}

.pr{
	height:70px;
	background-color:#936;
	margin-top:80px;
}

.svn{
	height:50px;
	background-color:#CCC;
	margin-top:100px;
}
 
 /*CSS GRAFICOS*/
 
 
 .socialmedia{
	 list-style-type:none;
 }
 
 .socialmedia ul li{
	 float:left;
	 padding: 0 2px;
 }

.twitter li{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#999;
	list-style-type:none;
	padding: 5px 0;
}

/*RESUME*/

#download{
	background:#CCC;
}

.resume_img{
	display: block; 
	margin: auto; 
}

/* CONTACTO */

.top_contact{
	margin-right:6px;
}

#form{
	width:350px;
	float:left;
}

#info_contact{
	width:500px;
	float:right;
	margin-top:40px;
}

.contact_text{
	background-image:url(img/contact.jpg);
	background-repeat:no-repeat;
	padding:30px 0 30px 110px
}

.error{
	color:#F00;
	font-weight:bold;
	margin: 4px 0;
	padding: 4px 2px;
}

.enviado{
		color:#6F0;
		font-weight:bold;
	margin: 4px 0;
	padding: 4px 0 4px 50px;
	background-image:url(img/check.png);
	background-repeat:no-repeat;
}

.formfield{
	width:300px;
	border: 1px solid #666;
	color:#333;
	height:15px;
	margin-bottom:4px;
	padding:2px;
}