/* CSS Document */
/*general*/
ul, li{ list-style:none}
*{font-family:"Century Gothic", "Trebuchet MS", Arial, Helvetica, sans-serif; font-size:12px; margin:0; padding:0}
h1, h2, h3, h4, h5, h6{ font-weight:normal}
body{ background:#fff}
a{ font-size:inherit; text-decoration:none; border-bottom:1px dotted}
td{ padding:6px; background-color:#fff}
table{ background-color:rgb(143, 221, 211)}
input{border: 1px #ccc solid}


#container{position:relative}
#h1_bar{ z-index:-1; position:absolute; width:100%; left:0px}
#h1_bar{top:25px}
.nav, #main, .csss{ width:960px; margin:0 auto; display:block; position:relative}
.nav{ top:110px}
#main{ top:144px}

/*titulos*/
h1{ display:block; width:960px; margin:10px auto; color:#fff; font-size:30px; text-shadow:1px 1px 0px #555; letter-spacing:6px}
h2, h3, h4{text-shadow:1px 1px 0px #777; }
h2{font-size:100px; margin:0 0 15px 0}
h3, h4{font-size:24px}
h2.trabajo{ font-size:50px; margin:0}

/*nav*/
.nav li{ display:inline;}
.nav li.active, .nav li a{-moz-border-radius-topleft: 3px; -moz-border-radius-topright:3px;-moz-border-radius-bottomleft:3px; -moz-border-radius-bottomright:3px; -webkit-border-top-left-radius:3px; -webkit-border-top-right-radius:3px; -webkit-border-bottom-left-radius:3px; -webkit-border-bottom-right-radius:3px;border-top-left-radius:3px; border-top-right-radius:3px; border-bottom-left-radius:3px; border-bottom-right-radius:3px; padding:5px}
.nav li.active{ text-shadow:1px 1px 0px #fff}
.nav li a{ text-decoration:none; color:#333; border:none}
.nav li a:hover{ text-decoration:none;}

/*css switcher*/
.csss{z-index:5; position:relative; top:45px; height:21px}
.csss li.celeste, .csss li.coral, .csss li.amarillo, .csss li.negro, .csss li.verde, .csss li.rosa{ text-indent:-9999px; display:block; float:right; border: 0; width:30px; height:20px; margin:0 10px 0 0}
.csss li.celeste a, .csss li.coral a, .csss li.amarillo a, .csss li.negro a, .csss li.verde a, .csss li.rosa a{display:block; padding:0;  -moz-box-shadow:1px 1px 0px #555;-webkit-box-shadow:1px 1px 0px #555; box-shadow:1px 1px 0px #555; height:20px; border-bottom:0 }
.csss li.celeste a:hover, .csss li.coral a:hover, .csss li.amarillo a:hover, .csss li.negro a:hover, .csss li.verde a:hover, .csss li.rosa a:hover{-moz-box-shadow:1px 1px 0px #fff;-webkit-box-shadow:1px 1px 0px #fff; box-shadow:1px 1px 0px #fff;  }
.csss li.celeste{ background-color:#9df}
.csss li.coral{ background-color:#f97}
.csss li.amarillo{ background-color:#ff6}
.csss li.negro{ background-color:#777}
.csss li.verde{ background-color:#5b9}
.csss li.rosa{ background-color:#eab}
.csss a:focus{ outline:0px}

/*main*/
ul#portfolio li{ width:230px; height:180px; float:left; margin:0 10px 10px 0}
ul#portfolio a{ border:0;}
#portfolio img{ width:230px; height:144px}
#main p{ width:450px; margin:0 0 30px 0; color:#665}
#main p.bio{ font-size:14px; color:#444}
#main a{ color:#444; }
#redes_soc li{ background:url(../img/contacto.gif) no-repeat; padding:0 0 0 20px; margin:10px 0}
#redes_soc li.linkedin{ background-position:0 -45px}
#redes_soc li.twitter{ background-position:0 -68px}
#redes_soc li.blogger{ background-position:0 3px}
#redes_soc li.facebook{ background-position:0 -22px}
#redes_soc li.delicious{ background-position:0 -92px}
#main p.descripcion{ margin:0 0 15px 0}
.captura{ margin:0 0 20px 0}

/*miscelaneas color*/
.color_bar{position:fixed; z-index:-2; display:block; width:37%; left:63%; height:100% }
.mancha{position:absolute; left:50%; z-index:0 }