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,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:normal;font-style:normal;text-align:left}table{border-collapse:collapse;border-spacing:0;}ol,ul{list-style:none;}q:before,q:after,blockquote:before,blockquote:after{content:"";}
.clear{clear:both; height:1px; margin-bottom:-1px;}
*{outline:0; outline-style:none; }
body{background:#4c5b77 url(../images/bg-tile.png) repeat top left; font-family: Arial, Helvetica, sans-serif; color:#1a1f27; font-size:62.5%;}
a{ color:#1a1f27; text-decoration:none}
a:hover{border-bottom:none}
a:focus{}
a:visited{ color:#1a1f27; text-decoration: none;}
a.quiz{cursor:help}
p a{border-bottom:1px dotted #242424}
/* Header */
#top{ width:960px; margin:0 auto;}
#header { width:100%; height:61px; display:block; background: url(../images/bg-header.png) repeat-x top center; overflow:hidden;}
#header h1 a{ width:300px; height:29px; background: url(../images/pedro-magalhaes.png) no-repeat top left; display:block; text-indent:-99999em; margin-top:15px; float:left;}
#navigation { float:right; display:block; margin-top:13px; }
#navigation li{ float:left; margin-left:5px;}
#navigation li a{ height:33px; background-repeat:no-repeat; background-position:top left; display:block; text-indent:-99999px;}
#navigation li a:active{ background-position: bottom left;}
#navigation li.services a{ width:105px; background-image:url(../images/btn-services.png);}
#navigation li.portfolio a{ width:105px; background-image:url(../images/btn-portfolio.png);}
#navigation li.about a{ width:110px; background-image:url(../images/btn-about.png);}
#navigation li.contact a{ width:100px; background-image:url(../images/btn-contact.png);}
h2.txt{ display:block; background-repeat:no-repeat; background-position: top left; text-indent: -99999em;}
/* Content */
#content{ width:960px; margin:0 auto; background: url(../images/glow-top.png) no-repeat center top; position:relative; overflow:hidden;}
#content #gloss{ position:absolute; top:0; left:50%; margin-left:-400px; width:800px; height:128px;}
h2#slogan{ width:874px; height:59px; background: url(../images/get-involved-with-development.png); margin:0 auto; margin-top:45px; margin-bottom:40px; position:relative; z-index:90;}
/* Services */
#services{ margin:0px 0px 30px 0px; height:358px; background:url(../images/bg-services.jpg) top center no-repeat}
#services h2{margin:86px 0px 22px 0px; font-size:16px; font-weight:bold; color:#242424;}
#services #webdesign{width:270px;float:left; position:relative; left:31px; color:#2781ea}
#services #programming{width:270px;float:left;position:relative; left:75px;}
#services #computergraphics{width:270px;float:right;position:relative; right:31px;}
#services span{color:#1a1f27;line-height:1.6em; font-size:13px;}
/* Portfolio */
#portfolio{background: url(../images/bg-portfolio2.jpg) top center no-repeat; width:960px; margin:0 0 30px 0; height:2675px}
#portfolio .level{height:370px; position:relative; top:72px;}
#portfolio .level .left{position:relative; float:left; padding:0; margin:0; height:329px; left:11px; width:465px; background:url(../images/frame.jpg) no-repeat}
#portfolio .level .right{position:relative; float:right; margin:0; padding:0;margin:0; right:11px; height:329px; width:465px;background:url(../images/frame.jpg) no-repeat}
#portfolio .level span{position:relative; top:10px; left:11px; }
#portfolio .level span img{margin:0px; padding:0px; z-index:-9999 !important; }
#portfolio h2{font-size:16px; font-weight:bold; color:#242424; line-height:1.6em; position:relative; left:10px; top:25px}
#portfolio p{ position:relative;left:10px; color:#1a1f27;line-height:1.6em; font-size:13px; top:30px}
#portfolio h2 a{font-weight:bold;border-bottom:1px dotted #242424}
#portfolio a img{border:none}
#portfolio a:hover{border-bottom:none}
/* Tweet */
#tweet {background: url(../images/bg-tweet-top.jpg) no-repeat;margin: 0px 0 30px; font-size:20px;color: #fff; width: 940px; line-height: 1.4; overflow:visible}
#tweet ul { list-style: none; padding-bottom: 13px; margin-left: 0px;}
#tweet ul li {min-height: 63px; width: 788px;padding: 25px 30px 0 170px; overflow:visible}
#tweet a {color:#fff;font-size:20px;border-bottom:1px dotted #fff;}
#tweet a:hover{border-bottom:none}
/* Tweet */
#blog {background: url(../images/bg-blog.jpg) no-repeat;margin: 0px 0 30px; font-size:20px;color: #fff; width: 940px; line-height: 1.4;}
#blog ul { list-style: none; padding-bottom: 13px; margin-left: 0px;}
#blog ul li {min-height: 63px; width: 798px;padding: 25px 30px 0 180px;}
#blog a {color:#fff;font-size:20px;border-bottom:1px dotted #fff;}
#blog a:hover{border-bottom:none}
/* About */
#about{ margin:0px 0px 30px 0px; height:358px; background:url(../images/bg-about.jpg) top center no-repeat; }
#about h2{margin:86px 0px 22px 0px; font-size:16px; font-weight:bold; color:#242424;}
#about #semiotics{width:270px;float:left; position:relative; left:31px;}
#about #multidisciplinary{width:270px;float:left;position:relative; left:75px;}
#about #skills{width:270px;float:right;position:relative; right:31px;}
#about span{color:#1a1f27;line-height:1.6em; font-size:13px;}
#about a{border-bottom:1px dotted #242424}
#about a:hover{border-bottom:none}
/* Email */
#email{background: url(../images/glow-bottom.png) no-repeat bottom center; height:122px; margin-bottom:0px;}
#email-bar{font-size:16px; color:#fff; line-height:1.6em; margin:0px 0px 10px 0px; height:82px; background:url(../images/bg-email.png) top left no-repeat; cursor:pointer}
#email-bar h2{margin:60px 0px 15px 0px; font-style:italic; display:none}
#email-bar a{color:#fff;}
/* Footer */
#footer{ width:960px; margin:0 auto; height:30px }
#footer p{font-size:13px; color:#fff; line-height:1.6em; margin-bottom:0px; text-align:center }
#footer a{color:#fff;border-bottom:1px dotted #fff}
#footer a:hover{border-bottom:none}