/* CSS reset */

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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video,
form, input, textarea, select, option {                               /* Last line is mine, I will reset forms too */
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	font-size: 62.5%;                                                 /* 1em = 10px , nice hack if you want to express font-size in em */
}
a { 
	text-decoration: none;
}
ol, ul {
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* General settings */

h1  { font-size: 2em; margin: 0px 0px 20px 0px; }
h2  { font-size: 1.8em; margin: 0px 0px 20px 0px;}
h3  { font-size: 1.6em; margin: 0px 0px 20px 0px;}
h4  { font-size: 1.4em; margin: 0px 0px 20px 0px;}
h5  { font-size: 1.2em; margin: 0px 0px 20px 0px;}
h6  { font-size: 1em; margin: 0px 0px 20px 0px;}
p   { font-size: 1.6em; margin: 5px 0px 15px 0px; }
a   { color: #cccccc; }
a:hover { color: #2dbaeb; }
img {  }
li  {  }
ul  {  }
ol  {  }
textarea { font-size: 1.4em; font-family: "Trebuchet MS",Arial,Tahoma,sans-serif; }

/* Site layout */

body             { background-image: url(/images/background.jpg); background-repeat: no-repeat; background-position: 50% 0%; font-family: "Trebuchet MS",Arial,Tahoma,sans-serif; background-color: #000000; color: #cccccc; }

#wrapper         { width: 960px; margin: 10px auto 10px auto;  }

#header          { width: 960px; height: 175px; background-image: url(/images/header.png); background-repeat: no-repeat; }

#header a        { text-align: center; line-height: 4.5em; font-size: 1.5em; }

#nav-home        { width: 250px; height: 155px; margin: 20px 0px 0px 50px; display: block; float: left; background-image: url(/images/nav-home.jpg); background-repeat: no-repeat; }
#nav-portfolio   { width: 125px; height: 155px; margin: 20px 0px 0px 0px; display: block; float: right; background-image: url(/images/nav-portfolio.jpg); background-repeat: no-repeat; }
#nav-work        { width: 125px; height: 155px; margin: 20px 0px 0px 0px; display: block; float: right; background-image: url(/images/nav-work.jpg); background-repeat: no-repeat; }
#nav-contact     { width: 125px; height: 155px; margin: 20px 0px 0px 0px; display: block; float: right; background-image: url(/images/nav-contact.jpg); background-repeat: no-repeat; }
#nav-blog        { width: 125px; height: 155px; margin: 20px 50px 0px 0px; display: block; float: right; background-image: url(/images/nav-blog.jpg); background-repeat: no-repeat; }

#header a:hover  { background-position: right; color: #00c3ff; }
.nav-active  	 { background-position: right; color: #00c3ff; }

#content         { width: 800px; padding: 0px 80px 0px 80px; float: left; background-image: url(/images/content-tile.png); background-repeat: repeat-y; }

#footer          { width: 960px; height: 90px; clear: both; background-image: url(/images/footer.png); background-repeat: no-repeat; }
#footer p        { text-align: center; font-size: 1.4em; color: #cccccc; line-height: 7em; }
#footer a        { font-size: 1em; }

.divider         { width: 720px; height: 1px; margin: 30px 40px 30px 40px; clear: both; background-image: url(/images/divider.jpg); background-repeat: no-repeat; }

/* Home page */

.home {  }

/* Portfolio page */

.portfolio              {  }

.portfolio-block        { margin: 20px 0px 0px 0px;  }
.portfolio-block p      { margin: 0px 0px 5px 0px; }
.portfolio-block span   { width: 250px; float: left; }

#portfolio-photos       { width: 800px; border: 1px solid #cccccc; padding: 5px 5px 5px 0px; float: left; }
#portfolio-photos a     { width: 170px; height: 130px; margin: 0px 0px 0px 5px; float: left; border: 1px solid #cccccc; display: block;   }
#portfolio-photos a:hover { border: 1px solid #2dbaeb; }
#portfolio-photos a img { margin: 5px; }

/* Work page */

.work              {  }
.work p            {  }

.project-block a   { width: 788px; height: 288px; display: block; border: 1px solid #cccccc; padding: 5px; }
.project-block a:hover { border: 1px solid #2dbaeb; }
.project-block img {  }
.project-block p   { margin: 10px 0px 0px 0px; font-size: 1.4em; text-align: right; }

/* Contact page */

#contact { }
#mail-form { margin: 0px 150px 0px 150px; }
#mail-form .field {  }
#mail-form .field p { margin: 10px 0px 5px 0px;  }
#mail-form .field input { width: 300px; height: 25px; padding: 0px 5px 0px 5px;  background-color: #000; color: #ccc; border-style: solid; border-width: 1px; border-color: #2dbaeb; border-radius: 5px; -moz-border-radius: 5px; }
#mail-form .field textarea { width: 500px; height: 300px; padding: 5px; background-color: #000; color: #ccc; border-style: solid; border-width: 1px; border-color: #2dbaeb; border-radius: 5px; -moz-border-radius: 5px; }
#mail-form .submit input { width: 200px; height: 25px; margin: 10px 0px 0px 0px; border-radius: 5px; -moz-border-radius: 5px; }

#contact-notification { width: 500px; padding: 10px; display: none; background-color: #000; border-style: solid; border-width: 1px; border-color: #2dbaeb; border-radius: 5px; -moz-border-radius: 5px; }
#contact-notification p { margin: 10px; }
#contact-notification .contact-error { display: block; }
#contact-notification .contact-success {  }

/* Blog */
.blog {  }
#blog { width: 640px; height: 327px; margin: 50px 80px 50px 80px; background-image: url(/images/under-construction.jpg); background-repeat: no-repeat; }