/* @override http://erikveland.com/css/main.css */

/* © 2010 Erik K Veland - Please do not copy, modify or redistribute */

* {
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: "DynamoD";
src: url(http://erikveland.com/fonts/DynamoDD.otf);
}

@font-face {
font-family: "DynamoD Italic";
src: url(http://erikveland.com/fonts/DynamoDItalicD.otf);
}

html {
background: #000 url(../images/backgrounds/bg02.png);
}

body {
font: normal 15px "Helvetica Neue Light", HelveticaNeue-Light, Helvetica, Arial, Sans-Serif; 
height: 100%;
background: url(../images/backgrounds/black-gradient.png) center top repeat-x;
}

#page-background {
width: 100%;
height: 100%;
}

h1 {
font-size: 48px;
font-weight: normal;
font-style: normal;
}

h2 {
color: #fdf6b4;
text-shadow: #333 1px 1px 2px;
font: normal 36px "DynamoD", "Helvetica Neue Condensed", HelveticaNeue-LightCondensed, Helvetica, sans-serif;
}

h2#seethis {
color: #fdf6b4;
text-shadow: #000 1px 1px 2px;
font: normal 36px "DynamoD Italic", "Helvetica Neue Condensed", HelveticaNeue-LightCondensed, Helvetica, sans-serif;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.8)));
}


a {
-webkit-transition: color 0.3s ease-in-out;
text-decoration: none;
color: #efce2f;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.4)));
font-weight: normal;
font-style: normal;
text-shadow: -1px -1px 2px #5d4f0c;
}

a:hover {
-webkit-transition: color 0.5s ease-in-out;
color: #fbac0b;
}

#main-wrap {
width: 850px;
margin-left: auto;
margin-right: auto;
display: block;
padding-top: 50px;
}

#header {
text-align: center;
margin-bottom: 25px;
}

#feature {
margin-left: auto;
margin-right: auto;
width: 850px;
height: 420px;
}

#feature-overlay {
position: relative;
top: -60px;
left: 25px;
}

/* @group Content */

.headliner {
clear: right;
display: block;
margin-left: 141px;
padding-top: 11px;
}

#content {
width: 850px;
background: url(../images/backgrounds/portfolio-top.png) no-repeat 0 top;
margin-top: 25px;
margin-bottom: 25px;
}

#content-nav {

width: 850px;
height: 75px;
background-image: url(../images/navigation/button-deselect.png);
}

#content-bottom {
width: 850px;
height: 25px;
background: url(../images/backgrounds/portfolio-bottom.png) 0 bottom;
border-top: 1px solid rgba(255,255,255,0.1);
}

#content-container {
background-image: url(../images/backgrounds/portfolio-middle.png);
width: 850px;
}

.item {
padding-left: 10px;
margin-right: 1px;
padding-top: 10px;
background-image: url(../images/navigation/item-background.png);
padding-bottom: 10px;
height: 58px;
border-left: 1px solid rgba(255,255,255,0.0);
border-right: 1px solid rgba(255,255,255,0.0);
}

.item:hover {
-webkit-transition: 0.3s ease-in-out;
border-left: 1px solid rgba(255,255,255,0.2);
border-right: 1px solid rgba(255,255,255,0.2);
}

div#content-container img {
float: left;
display: block;
}



/* @end */

/* @group Navigation */

#button-motion {
background-image: url(../images/navigation/button-select.png);
height: 75px;
width: 141px;
display: block;
float: left;
}

#button-web {
height: 75px;
width: 141px;
float: left;
background: url(../images/navigation/button-select.png) -141px;
display: block;
}

#button-print {
height: 75px;
width: 141px;
float: left;
background: url(../images/navigation/button-select.png) -282px;
display: block;
}

#button-photo {
height: 75px;
width: 142px;
float: left;
background: url(../images/navigation/button-select.png) -423px;
display: block;
}

#button-words {
height: 75px;
width: 142px;
float: left;
background: url(../images/navigation/button-select.png) -565px;
display: block;
}

#button-music {
height: 75px;
width: 142px;
float: left;
background: url(../images/navigation/button-select.png) -707px;
display: block;
}



/* @end */