/*-----------------------------------------------------------------------------
[client] Screen Stylesheet

version:   1.0
date:      01/03/07
author:    [your name]
email:     [you at domain dot com]

website:   [your domain]

version history: [location of file]
-----------------------------------------------------------------------------*/


/* Import Eric Meyer's reset CSS
-----------------------------------------------------------------------------*/
@import url("reset.css");


/* @Font-Face Embedding - IE6/7/8
-----------------------------------------------------------------------------*/
@font-face {  
	font-family: Bebas ;  
	src: url( fonts/Bebas.eot );
}

@font-face {  
	font-family: LiberationMono;  
	src: url( fonts/Liberation-Mono/LiberationMono-Regular.eot );
} 


/* @Font-Face Embedding - FFx3.5/Safari/Op10
-----------------------------------------------------------------------------*/
@font-face {  
	font-family: Bebas ;  
	src: url( fonts/Bebas.ttf ) format("truetype");
}

@font-face {  
	font-family: LiberationMono;  
	src: url( fonts/Liberation-Mono/LiberationMono-Regular.ttf ) format("truetype");
} 

/* Styles for layout
-----------------------------------------------------------------------------*/
.clear {
	clear:both;
}

.right {
	float: right;
}

.left {
	float: left;
}

img .left {
	margin: 0px 25px 25px 0;
	border: 5px;
}

img .right {
	margin: 0px 0px 25px 25px;
}

.no-top-margin {
	margin-top: 0px;
}

.col-left {
	width: 375px;
	float: left;
}

.col-right {
	width: 375px;
	float: right;
}

.text-right {
	text-align: right;
}

.text-left {
	text-align: left;
}

.text-center {
	text-align: center;
}

.no-height {
	height: 0px;
}

/* Set up the document
-----------------------------------------------------------------------------*/
body {
	font: 62.5%/1.5  Georgia, Cambria, Times, "Times New Roman", serif;
	background: #000000 url(images/page-background.png) repeat-x fixed top center;
	color: #ffffff;	
	text-align: center;
}

#wrapper { 
	width: 900px; /* Set page width here - you can also use percentage */
	text-align: left;  
	margin: 0px auto;
}


/* Typography
-----------------------------------------------------------------------------*/
h1 {
	font-size: 2.2em; /* Equivalent to 22pt */
	letter-spacing: 0.1em;
	font-family: Bebas, Hevetica, Ariel, sans-serif;
	font-weight: normal;
	text-transform: uppercase;
}
	
h2 {
	margin-top: 2em;
	font-size: 2.0em; /* Equivalent to 20pt */
	letter-spacing: 0.1em;
	font-family: Bebas, Hevetica, Ariel, sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	margin-bottom: 0.6em;
}
	
h3 {
	margin-top: 1em;
	font-size: 1.8em; /* Equivalent to 18pt */
}
	
h4 {
	margin-top: 1em;
	font-size: 1.6em; /* Equivalent to 18pt */
}
	
h5 {
	font-size: 1.4em; /* Equivalent to 14pt */
}
	
p, q, cite {
	font-size: 1.3em; /* Equivalent to 12pt */
}

ul, ol, dl {
	list-style: none;
	margin-bottom: 1.1em
}

li, dd, dt {
	font-size: 1.3em; /* Equivalent to 12pt */
	margin-left: 2em;
}

.small-type {
	font-family: LiberationMono, Consolas, 'Lucida Console', Monaco, monospace;
	font-size: 0.9em;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

pre {
	font-family: LiberationMono, Consolas, 'Lucida Console', Monaco, monospace;
	font-size: 1.1em;
	background-color: black;
	color: #00c100;
	padding: 20px;
	margin-bottom: 0.6em;
	letter-spacing: 0.1em;
	white-space: pre-wrap;       /* css-3 */
	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

a {
	color: #b10000;
	text-decoration: none;
}

a:hover {
	color: #b10000;
	text-decoration: underline;
}

/* Header
-----------------------------------------------------------------------------*/
#header {
	margin: 6em 0 3em 0;
	text-align: center;
	width: 100%;
}

#header h1 {
	font-size: 4.4em;
	text-shadow: 2px 2px 5px #000; 
}

#header p {
	text-shadow: 2px 2px 5px #000; 
}


/* Main Navigation
-----------------------------------------------------------------------------*/
#navigation {
	margin: 3em 0 4em 150px;
	background: url(images/menu-bg-hover.png) -999999 -999999;
}

#navigation li {
	float: left;
	width: 140px;
	margin: 0 5px;
	padding: 5px 0;
	text-transform: uppercase;
	letter-spacing: 0.4em;
	text-align: center;
	background: url(images/menu-bg.png) bottom center no-repeat;
	text-shadow: 2px 2px 5px #000;
	font-size: 1.2em;
}

#navigation li:hover {
	background: url(images/menu-bg-hover.png) bottom center no-repeat;
}

#navigation a {
	color: #fff;
	text-decoration: none;
	padding: 10px 0;
}

#navigation a:hover {	
	color: #fff;
	text-decoration: none;
	padding: 10px 0;
}


/* Footer
-----------------------------------------------------------------------------*/
#footer {
	margin: 1em 0 0 0;
	padding: 0 20px 10em 20px;
}

#footer a {
	text-decoration: none;
	color: #fff;
}

#footer a:hover {
	text-decoration: underline;
	color: #fff;
}


/* Content
-----------------------------------------------------------------------------*/
#content {
	color: #000000;
	background-color: #ffffff;
	padding: 50px;
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#content p {
	margin-bottom: 0.8em;
}



/* Portfolio
-----------------------------------------------------------------------------*/
.portfolio h2 {
	margin-top: 50px;
}

.portfolio .no-top-margin {
	margin-top: 0;
}

.portfolio p {
	clear:both;
	margin: 0.1em 0 30px 0;
}

.portfolio img {
	padding: 5px 0;
	border-top: 1px black solid;
	border-bottom: 1px black solid;
}

/* Forms
-----------------------------------------------------------------------------*/
input.text {
	padding: 3px;
	border: 1px solid #999999;	
}


/* Tables 
-----------------------------------------------------------------------------*/
table { 
  	border-spacing: 0;
	border-collapse: collapse;
}

td {
  	text-align: left;
	font-weight: normal;
}