@import url('reset.css');
@font-face { font-family: "Century Custom"; src: url('../graphics/Century Gothic.ttf'); }

*[align=center] { margin: 0 auto; }

/** Elements */
a { color: #cc071e; text-decoration: none; }
a:hover { text-decoration: underline; }

a.forsale { display: block; position: absolute; top: -50px; right: -50px; }
a.hireme { display: block; position: absolute; margin-top: -50px; margin-left: 700px; }

body {
	background: url('../graphics/background.png') center top no-repeat #000;
	color: #fff;
	font-family: "Century Gothic", "Century Custom", Arial, Helvetica, serif;
}

em { font-style: italic; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; }
h1 {
	font-size: 2.5em;
	float: left;
	text-shadow: 1px 1px 9px #000;
}
h2 { font-size: 1.25em; margin: 1em 0; } h3 { font-size: 1.15em; margin: 1em 0; } h4 { font-size: 14px; margin: 1em 0; } h5 { font-size: 14px; } h6 { font-size: 0.85em; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; text-decoration: none; }
h1 .separator, h2 .separator, h3 .separator, h4 .separator, h5 .separator, h6 .separator { font-size: 0.5em; margin: 0 1em; vertical-align: middle; }
h1 a:hover { text-decoration: none; }
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong { color: #cc071e; }

hr { clear: both; }

p {
	line-height: 1.1em;
	margin: 1em 0;
}

p img { margin: 0.5em 0; }

/** Ids */
#body { padding: 30px 0 50px; }

#featured { height: 285px; }
#featured #browser {
	width: 100%;
	height: 285px;
	overflow: hidden;
	position: absolute;
	left: 0;
}
#featured #browser ul {
	background: #000;
	height: 275px;
	padding: 5px; padding-left: 0;
	width: auto;
}
#featured #browser li {
	height: 275px;
	display: inline;
	margin-left: 5px;
}
#featured #browser img { height: 275px; }

#footer {
	color: #999;
	font-size: 0.75em;
	text-align: center;
}

#front {
	position: absolute;
	margin-left: 38px;
	margin-top: -20px;
}

#ie {
	background: url('../graphics/icon-ie8.png') center left no-repeat;
	margin-bottom: 1em;
	padding-left: 42px;
}

#menu {
	float: right;
	position: relative;
	top: 25px;
}
#menu li {
	display: inline;
	margin-left: 2em;
}
#menu a {
	color: #fff;
	text-decoration: none;
	text-transform: lowercase;
}
#menu a:hover, #menu a.current { border-bottom: 2px solid #cc071e; }

#photos { background: #000; margin: 0 0 50px; padding: 5px 0; position: relative; }
#photos a { color: #fff; font-size: 0.5em; }
#photos #browser {
	height: 100px;
	overflow: hidden;
}
#photos #browser ul { position: relative; }
#photos #browser .photos li { 
	display: inline-block;
	height: 100px;
	margin: 0 4px 0 3px;
	overflow: hidden;
	width: 100px;
}
#photos .navigation a {
	display: block;
	height: 43px;
	position: absolute;	
	overflow: hidden;
	text-indent: -999em;
	top: 23px;
	width: 26px;
}
#photos .navigation a.previous {
	background: url('../graphics/previous-small.png');
	left: -40px;
}
#photos .navigation a.next {
	background: url('../graphics/next-small.png');
	right: -40px;
}

#portfolio { height: 460px; margin: 20px 0; position: relative; }
#portfolio em { display: none; }
#portfolio #photo .container { position: relative; }
#portfolio #photo .info { background: url('../graphics/info-background.png'); font-size: 0.7em; padding: 5px 10px; position: absolute; bottom: 2px; }
#portfolio #photo .info .name { margin: 0; }
#portfolio #photo .info .date { float: right; }
#portfolio #photo .photo { border: 2px solid #000; display: block; margin: 0 auto; }
#portfolio .navigation a {
	display: block;
	height: 43px;
	position: absolute;	
	overflow: hidden;
	text-indent: -999em;
	top: 300px;
	width: 26px;
}
#portfolio .navigation a.previous {
	background: url('../graphics/previous-small.png');
	left: -40px;
}
#portfolio .navigation a.next {
	background: url('../graphics/next-small.png');
	right: -40px;
}

#tagline {
	border-top: 3px solid #000;
	font-size: 0.85em;
	margin-top: 3px;
	padding-top: 0.5em;
}

#wrapper {
	margin: 30px auto;
	width: 750px;
}

/** Classes */

ul.archive { font-size: 0.75em; margin: 2em 0; text-align: center; }
ul.archive a { color: #fff; }
ul.archive a img { display: block; margin-bottom: 1.5em; max-width: 100%; text-decoration: none; }
ul.archive em { display: none; }
ul.archive > li { display: inline-block; margin: 2px 0.5%; text-align: left; vertical-align: top; width: 19%; }
ul.archive ol { line-height: 0.9em; }
ul.archive ol li { margin: 0.5em 1em; }
ul.archive a.category { display: block; text-align: center; }
ul.archive a.category .title { display: block; font-size: 1.1em; margin-bottom: 0.5em; }
ul.archive .new { color: #cc071e; }

.categories {
	font-size: 1.1em;
	margin: 20px auto 45px;
	text-align: center;
	text-transform: lowercase;
	width: 684px;
}
.categories a { color: #fff; }
.categories a:hover { color: #cc071e; text-decoration: none; }
.categories em { display: none; }
.categories.column {
	display: inline-block;
	font-size: 0.9em;
	margin: 1em 0;
	padding: 0 0.5%;
	text-align: left;
	vertical-align: top;
	width: 24%;
}
.categories.large { font-size: 2em; }
.categories.small { font-size: 0.9em; }
.categories.front li {
	display: inline-block;
	font-size: 0.75em;
	margin: 0 5px;
	text-align: left;
	width: 66px;
}
.categories.front li .image {
	margin-top: 0.25em;
}
.categories.front li .title {
	word-wrap: break-word;
}
.categories.front li a:hover img.image {
	box-shadow: 0 0 5px #fff;
	-moz-box-shadow: 0 0 5px #fff;
	-webkit-box-shadow: 0 0 5px #fff;
}
.categories.front.sub { font-size: 0.9em; margin: 10px auto; text-align: right; }

img.header { border: 5px solid #000; display: block; margin: 0 auto; }

.more {
	font-size: 2em;
	margin: 30px;
	text-align: center;
}
.more a { color: #fff; }
.more a:hover { color: #cc071e; text-decoration: none; }