/*--------------------------------------
   Reset + General Styling
----------------------------------------*/
* {  
    vertical-align: baseline;  
    font-family: inherit;  
    font-style: inherit;  
    padding: 0;  
    margin: 0;  
}  
html, body { 
    min-height:100%; 
    height:auto !important;
    height:100%;  
}

body { 
    background:#000 url(/assets/texture.jpg) center bottom repeat-x; 
    color:#ddd;
    font:62.5% georgia, serif;
}
#container { 
    font-size:1.5em;
    line-height:1.5em; 
    width:960px;
    margin:15px auto 0;
    position:relative;
}
div.mainContent { min-height:250px; }

h1, h2, h3, h4, p { margin: 10px 0; }
ul { margin:20px 0; }
li { margin-left: 40px; }  

h1, h2, h3, h4, #header { 
    font-family:"Trebuchet MS", sans-serif; 
}

a { 
    color:#ddd;
    text-decoration:none;
    border-bottom:dashed 1px;
}
a:visited { color:#999; }
a:hover, a:active { 
    color:#f90; 
    border:0; 
    outline:none; 
}

p.indent { margin-left:50px; }

/*--------------------------------------
   Header
----------------------------------------*/

#header { 
    height:140px; 
    margin-bottom:20px;
}
#header h1 a {
    display:block; 
    height:125px;
    width:450px;
    background: url(/assets/header.jpg) left bottom no-repeat;
    text-indent:-999px;
    border:0;
    overflow:hidden;
}
#header h1 a:hover { background-position: left top; }

#header h4 {
    position:absolute;
    top:100px;
    left:80px;
}

#header ul { 
    position:absolute;
    top:20px;
    right:0;
    margin:0;
    width:400px;
}
#header li { 
    list-style-type:none; 
    float:left;
    text-align:center;
    margin:0;
    width:100px;
}
#header li a {
    display:block;
    height:0;
    padding:75px 0 0;
    font-size:1.1em;
    border:0;
    color:#ddd;
    width:100px;
}
li#home a { background: url(/assets/home.jpg) center -75px no-repeat; }
li#portfolio a { background: url(/assets/portfolio.jpg) center -75px no-repeat; }
li#articles a { background: url(/assets/articles.jpg) center -75px no-repeat; }
li#about a { background: url(/assets/about.jpg) center -75px no-repeat; }
li#experiments a { background: url(/assets/experiments.jpg) center -75px no-repeat; }
li#contact a { background: url(/assets/contact.jpg) center -75px no-repeat; }

body #header li a:hover { background-position: center top; color:#f90; }


/*--------------------------------------
   Footer
----------------------------------------*/

#footer { 
    height:100px; 
    margin-top:15px;
    padding:20px 0 0 10px;
    border-top:solid 1px #999;
}
#footer h2 { 
    height:75px;
    margin-right:15px;
    padding-top:20px;
    float:left;
}
#footer ul {
    height:100px;
    float:left;
    margin-left:23px;
    margin-top:0;
    width:450px;
    display:inline-block;
}
#footer li { margin-left:20px; }

#socialicons { 
    width:100px; 
    height:100%;
    float:left;
    margin-right:23px;
}
#socialicons a {
    display:block;
    height:32px;
    width:32px;
    border:0;
    background:#333;
    float:left;
    margin: 5px;
    text-indent:-999px;
    overflow:hidden;
}
a#facebook { background: url(/assets/socialicons.jpg) left bottom no-repeat; }
a#twitter { background: url(/assets/socialicons.jpg) -64px bottom no-repeat; }
a#rss { background: url(/assets/socialicons.jpg) -32px bottom no-repeat; }
a#email { background: url(/assets/socialicons.jpg) right bottom no-repeat; }

a#facebook:hover { background-position: left top; }
a#twitter:hover { background-position: -64px top; }
a#rss:hover { background-position: -32px top; }
a#email:hover { background-position: right top; }