@charset "UTF-8";
/* CSS Document */

*{ margin:0; padding:0; border:none; }
a{ text-decoration:none; outline:none; }
ul{ list-style:none; }
#container{ position:relative; width:960px; height:600px; margin:0 auto; background:url(images/code.png) top center no-repeat; }
#header{ width:159px; height:115px; margin:0 auto; background:url(images/identity.png) top center no-repeat; }
/* Align navleft & navright to left & right by referencing the container */
#navleft{ position:absolute; top:217px; left:0; width:100px; height:175px; }
#navright{ position:absolute; top:253px; right:0; width:100px; height:105px; }
/* Hide all hyperlink texts */
li#nav-home a span, li#nav-blog a span, li#nav-about a span, li#nav-contact a span, li#nav-resume a span, li#nav-linkedin a span, li#nav-flickr a span, li#nav-twitter a span{ display:none; }
/* Image replacement to those buttons */
li#nav-home a{ width:100px; height:25px; background:url(images/portfolio.png) top left no-repeat; display:block; }
li#nav-blog a{ width:100px; height:25px; background:url(images/blog.png) top left no-repeat; display:block; }
li#nav-about a{ width:100px; height:25px; background:url(images/about.png) top left no-repeat; display:block; }
li#nav-contact a{ width:100px; height:25px; background:url(images/contact.png) top left no-repeat; display:block; }
li#nav-resume a{ width:100px; height:25px; background:url(images/resume.png) top left no-repeat; display:block; }
li#nav-linkedin a{ width:100px; height:25px; background:url(images/linkedin.png) top left no-repeat; display:block; }
li#nav-flickr a{ width:100px; height:25px; background:url(images/flickr.png) top left no-repeat; display:block; }
li#nav-twitter a{ width:100px; height:25px; background:url(images/twitter.png) top left no-repeat; display:block; }
ul#navleft li a:hover, ul#navright li a:hover{ background-position:0 -25px; }
/* Apply bottom margin to the list elements */
#navleft li, #navright li{ margin-bottom:10px; }

#content{ margin: 0 auto; margin-top:42px; }
#thumbs{ width:640px; margin:0 auto; font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:20px; }
#thumbs a{ color:#666; }
#thumbs a:hover{ color:#600; }
#thumbs a img{ margin: 15px; margin-left:25px; margin-right:25px; }

p#floatleft{ width:400px; height:400px; float:left; margin:0 10px; }
p#floatright{ width:200px; height:400px; float:right; margin:0 10px; }

div#about-image{ width:550px; height:385px; background:url(images/biopg.png) top center no-repeat; position:relative; margin: 0 auto; margin-top: 35px;}
div#contact-image{ width:550px; height:385px; background:url(images/contactpg.png) top center no-repeat; position:relative; margin: 0 auto; margin-top: 35px; }
#infobox a#emailaddress{ width:180px; height:20px;  display:block; position:absolute; top:120px; left:60px; }
#infobox a#emailaddress span{ display:none; }