@charset "utf-8";

/* Reset */
* { margin:0px; padding:0px;}
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, embed, 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, a img { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
body { line-height: 1.3em; }
blockquote, q { quotes: quotes; }

/* _______________________________________________________________________ body */
body {font-family: 'Lucida Grande', Arial, Verdana, sans-serif; font-size: 12px; font-weight: normal; color: #fff; cursor: default; background: #062d51;}
a , a:visited {outline: none 0px; text-decoration: none; color: #ccc; cursor: pointer;}
a:hover, a:active {text-decoration: underline;}
.clear {clear: both;}
.hidden {visibility: hidden; display: none;}

/* _______________________________________________________________________ header */
#header_wrapper {width: 100%; height: 150px; background: url(img/border_bg.gif) bottom repeat-x;}
#header {width: 940px; height: 150px; margin: auto; position: relative;}
#header h1 {width: 296px; height: 148px; position: absolute; left: 0; background: url(img/alvaromeza_logo.png) no-repeat;}
#header h1 span {display: none;}
a.home {width: 229px; height: 84px; position: absolute; left: 3px; top: 30px;}

#menu {position: absolute; right: 0; bottom: 10px; list-style: none;}
#menu li {float: left; margin-left: 10px; display: block; height: 33px;}
#menu li.port a {width: 107px; background: url(img/menu_portfolio.png) no-repeat top;}
#menu li.about a{width: 73px; background: url(img/menu_about.png) no-repeat top;}
#menu li.contact a {width: 99px; background: url(img/menu_contact.png) no-repeat top;}
#menu li a {height: 33px; display: block;}
#menu li a:hover {background-position: bottom;}
#menu li a span {display: none;}

noscript {background: #1D609F; width: 100%; position: fixed; display: block; z-index: 9999; color: #fff; border-bottom: 2px solid #fff;}
noscript p {margin: auto; width: 850px; text-align: left; font-weight: bold; font-size: 15px; line-height: 1.3em; padding: 30px 50px; background: url(img/warning.png) left center no-repeat;}

/* _______________________________________________________________________ content */
#content {width: 980px; margin: auto; text-align: justify;}
#content p {margin-bottom: 1em;}
acronym {color: #ccc; border-bottom: 1px dotted #ccc;}

#section_portfolio {width: 940px; padding: 20px; margin-top: 30px; background: #062d51;}
#section_portfolio h2 {width: 137px; height: 34px; background: url(img/title_portfolio.png) no-repeat;}
#section_portfolio h2 span{display: none;}
#section_portfolio ul {list-style: none;}
#filter {margin-bottom: 30px;}
#filter li {float: left; border-right: 1px solid #6a8197; margin-right: 5px; padding-right: 5px;}
#filter li:last-child {border-right: none; margin: 0; padding: 0;}
#filter .current {font-weight: bold; color: #fff; text-decoration: none;}
#portfolio_content {width: 940px; display: block;}
#portfolio_content li {float: left; margin: 10px 13px 0 0; position: relative;}
#portfolio_content li span {display: none; z-index: 10; position: absolute; bottom: 5px; left: 2px; width: 212px; padding: 3px; text-align: left; font-size: 10px; background: #000; -moz-opacity: 0.8; -webkit-opacity: 0.8; opacity: 0.8; filter:alpha(opacity=80);}
#portfolio_content li span a {color: #79bfff;}
#portfolio_content li:hover span  {display: block;}
#portfolio_content img {width: 218px; height: 158px; padding: 1px; border: 1px solid #6a8197;}

.doscols {width: 980px; background: url(img/doscols_border_top.png) top no-repeat; margin-top: 10px; padding-top: 10px;}

#section_about {width: 430px; padding: 20px; margin-right: 40px; float: left; background: #062d51;}
#section_about h2 {width: 90px; height: 34px; margin-bottom: 20px; background: url(img/title_about.png) no-repeat;}
#section_about h2 span{display: none;}
#section_about img.avatar {padding: 1px; border: 1px solid #6a8197; margin: 0 20px 10px 0; float: left;}

#social {list-style: none;}
#social li {float: left; margin-right: 5px;}
#social li:first-child {padding-top: 9px; margin-right: 10px;}
#social a span {display: none;}
#social a {width: 24px; height: 24px; display: block;}
#social a.facebook {background: url(img/social/facebook.png) top no-repeat;}
#social a.twitter {background: url(img/social/twitter.png) top no-repeat;}
#social a.flickr {background: url(img/social/flickr.png) top no-repeat;}
#social a.delicious {background: url(img/social/delicious.png) top no-repeat;}
#social a:hover {background-position: bottom;}

#section_contact {width: 430px; padding: 20px; float: right; background: #062d51;}
#section_contact h2 {width: 126px; height: 34px; margin-bottom: 20px; background: url(img/title_contact.png) no-repeat;}
#section_contact h2 span{display: none;}

fieldset {border: 0px none;}
legend {display: none;}
form p { display: block; clear: both;}
p.submit {margin-bottom: 0 !important;}
input, textarea {font-size: 100%;font-family: inherit;}
form .text, form textarea {background: #04213b; border: 1px solid #666; color: #fff; width: 342px; padding: 3px;}
form .text:focus, form textarea:focus {background: #073d6f; border: 1px solid #fff;}
label {display: block; float: left; width: 80px; padding-top: 5px;}
span.error { display: block; padding-left: 15px; margin: 5px 0 5px 80px; font-size: 10px; text-align: left; background: url(img/error.png) no-repeat left;}
input.btn {float: right; display: block; color: #fff; font-size: 11px; padding: 3px; border: 1px solid #666; background: #04213b; text-align: center; cursor: pointer; background: #04213b;}
input.btn:hover {background: #073d6f; border: 1px solid #fff;}
	
/* _______________________________________________________________________ mensajes */
.mensaje {margin: 80px 100px; padding: 20px 0 10px 80px;}
.mensaje h3 {font-size: 20px; font-weight: normal; margin-bottom: 5px;}
.mensaje p {line-height: 1.5em;}
.mensaje a {line-height: 16px; padding-left: 20px; background: url(img/back_16.png) left center no-repeat;}
.enviado {background: url(img/ok_64.png) left center no-repeat;}
.no_enviado {background: url(img/error_64.png) left center no-repeat;}


/* _______________________________________________________________________ footer */
#footer_wrapper {width: 100%; background: url(img/border_bg.gif) top repeat-x; margin-top: 10px;}
#footer {width: 940px; height: 30px; margin: auto; padding: 20px 0; position: relative; padding-top: 10px;}
.am {width: 51px; height: 29px; display: block; position: absolute; left: 0; background: url(img/alvaromeza_logo_footer.png) top no-repeat; cursor: pointer;}
.am span {display: none;}
.am:hover {background-position: bottom;}
p.copyright {text-align: right; position: absolute; right: 0; font-size: 10px;}