/* generic styles */
* {
	margin: 0;
	padding: 0;
}
body {
	padding: 2em 0;
	background: #6F6F6F url(background.jpg) repeat-x;
	color: #FFF;
	font: 87.5%/1.4 Arial, Helvetica, sans-serif;
}
h1, h2, h3 {
	clear: both;
	color: #666;
	font-family: Georgia, serif;
	font-weight: normal;
	letter-spacing: -0.05em;
	line-height: 1;
	text-transform: lowercase;
}
h1 {
	font-size: 228.57%;
}
.services h1 {
	color: #FD9B0F;
}
.portfolio h1 {
	color: #B9CB15;
}
.contact h1 {
	color: #4ED2F9;
}
h2 {
	font-size: 171.43%;
}
h3 {
	font-size: 142.86%;
}
a {
	color: #FFF;
}
img {
	border: none;
}


/* borders */
.borders {
	display: block;
}
.border {
	background-repeat: no-repeat;
}
.border-1 {
	position: relative;
}
.border-2 {
	position: absolute;
	background-position: 100% 0;
}
.border-3 {
	position: absolute;
	background-position: 0 100%;
}
.border-4 {
	position: relative;
	background-position: 100% 100%;
}
.border-5 {
	position: relative;
}

.block-border {
    background-image: url(borders.png);
}
.block-border-1 {
	margin: -4px 0 0 -4px;
}
.block-border-2 {
	top: 0;
	right: -4px;
	width: 4px;
	height: 4px;
}
.block-border-3 {
	bottom: -4px;
	left: 0;
	width: 4px;
	height: 4px;
}
.block-border-4 {
	top: 4px;
	left: 4px;
	padding: 0 4px 4px 0;
}
.block-border-5 {
	background-color: #FFF;
}


/* main styles */
#skip {
	margin-top: -2em;
	height: 2em;
}
#skip a {
	position: absolute;
	top: 0;
	left: -1234em;
	text-align: center;
	text-decoration: none;
}
#skip a:focus {
	position: static;
	display: block;
	left: 0;
	margin: 0 1px;
	padding: 0.2em 0;
	background: #000;
	color: #FFF;
	font-size: 71.43%;
	list-style: none;
}

#container {
	position: relative;
	margin: 0 auto;
	width: 800px;
	max-width: 78em;
	/*background: url(frontpage-stars.png) 65% 0 no-repeat;*/
}
#container:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: ".";
}

#logo {
	margin: 0 0.5em 1.5em 0;
	color: #FFF;
	font: normal 142.86%/1 Georgia, serif;
	letter-spacing: -0.05em;
	text-transform: lowercase;
}
#logo a {
	display: block;
	width: 112px;
	height: 20px;
	background: url(logo.gif) no-repeat;
	text-decoration: none;
	text-indent: -1234em;
}
#logo span {
	letter-spacing: normal;
}
#logo em {
	font-size: 80%;
}

#content {
	clear: both;
	float: left;
	margin-bottom: 1em;
	padding: 1px 1.6% 2em;
	width: 78.8%;
	background: #FFF;
	color: #000;
}
#content.borders {
	padding: 0;
	width: 82%;
	background: none;
}
#content .block-border-5 {
	padding: 1px 2% 2em;
}
.front-page #content, .front-page #content .block-border-5 {
	padding-bottom: 1px;
}
#content:after, #content .block-border-5:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: ".";
}
#content h1 {
	margin: 0.6em 0;
}
#content h2, #content h3 {
	margin: 1em 0 0.6em;
}
#content p, #content ul, #content ol {
	margin: 0.8em 0;
}
#content ul, #content ol {
	margin-left: 2em;
}
#content li {
	margin: 0.5em 0;
}
#content p, #content li {
	max-width: 50em;
}
#content a {
	color: #000;
}
#content a:hover, #content a:focus {
	background: #EEE;
}
#content a.singular {
	padding: 0.1em 0.3em 0.1em 1em;
	background: #AAA;
	color: #FFF;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
}
#content a.singular:hover, #content a.singular:focus {
	background: #000;
}
#content img {
	float: left;
	margin: 0 1em 1.5em 0;
	border: #999 solid 1px;
	padding: 2px;
	background: #FFF;
}
#content a:hover img, #content a:focus img {
	border-color: #000;
}

/* front page styles */
#profile {
	border-bottom: #999 dashed 1px;
	padding-bottom: 1em;
}

#services {
	float: left;
	margin: 2em 0;
	border-right: #999 dashed 1px;
	padding-left: 33%;
	padding-right: 1%;
	width: 32%;
	min-height: 240px;
	background: url(html.jpg) 10% 0 no-repeat;
}
#services h2 {
	position: relative;
	margin-top: -0.4em;
	color: #FD9B0F;
}
#services p {
	margin-left: -0.6em;
	padding-left: 0.6em;
	background: #FFF;
}

#portfolio {
	float: right;
	margin: 2em 0;
	padding-bottom: 120px;
	width: 32%;
	background: url(portfolio.jpg) 90% 100% no-repeat;
}
#portfolio h2 {
	position: relative;
	margin-top: -0.4em;
	color: #B9CB15;
}

#news {
	clear: both;
	margin: 1em -1% 0.7em;
	padding: 0 1%;
	min-height: 0;
	background: #E0E0E0;
}
#news:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: ".";
}
#news h2 {
	float: left;
	color: #FFF;
}
#news ol {
	float: right;
	width: 50%;
	color: #FFF;
	font-size: 200%;
	font-weight: bold;
	line-height: 1;
}
#news li {
	margin: 0.3em 0;
	min-height: 0;
}
#news li .item {
	display: block;
	color: #000;
	font-size: 50%;
	font-weight: normal;
	line-height: 1.4;
	text-decoration: none;
}
#news li a strong {
	text-decoration: underline;
}
.beta {
	color: #A0B012;
	font-size: 160%;
	font-style: normal;
	font-weight: bold;
	line-height: 0.7;
}
.beta span {
	position: relative;
}
.beta .b {
	top: 0.1em;
}
.beta .t {
	top: 0.2em;
}
.beta .a {
	top: 0.1em;
}
.beta .trade {
	position: relative;
	top: -0.5em;
	color: #000;
	font-size: 50%;
	font-weight: normal;
}


/* contact page styles */
.contact a.org {
	font-weight: bold;
	text-decoration: none;
}


/* navigation styles */
#nav {
	float: right;
	width: 17%;
}
#nav h2 {
	position: absolute;
	top: 0;
	left: -1234em;
}
#nav ul {
	list-style: none;
}
#nav li {
	margin-bottom: 1em;
	min-height: 0;
}
#nav a {
	display: block;
	border: #FFF solid 1px;
	min-height: 0;
	text-decoration: none;
}
#nav strong {
	display: block;
	padding: 0 1em 0 0.5em;
	height: 6em;
	background: url(nav-icon.png) 10% 50% no-repeat;
	font-size: 128.57%;
	font-weight: bold;
	letter-spacing: -0.05em;
	line-height: 6em;
	text-align: right;
	text-shadow: #999 0.15em 0.15em 0.2em;
	text-transform: uppercase;
}
#to-about a {
	background: #D2D2D2 url(nav-grey.jpg) 100% 0 no-repeat;
}
#to-services a {
	background: #FFC614 url(nav-orange.jpg) 100% 0 no-repeat;
}
#to-portfolio a {
	background: #E5FA31 url(nav-green.jpg) 100% 0 no-repeat;
}
#to-contact a {
	background: #45D5F7 url(nav-blue.jpg) 100% 0 no-repeat;
}
#nav a:hover, #nav a:focus {
	background-image: none;
}

#nav-more {
	position: absolute;
	top: -1em;
	right: 0;
	font-size: 85.71%;
}
#nav-more li {
	display: inline;
	margin-left: 1em;
}
#nav-more a {
	border: #6F6F6F solid 1px;
	padding: 0.1em 1em;
	position: relative;
	color: #CCC;
	font-weight: bold;
	text-decoration: none;
	text-transform: lowercase;
}
#nav-more a:hover, #nav-more a:focus {
	background: #000;
	color: #FFF;
}

/* bottom styles */
#contact {
	clear: left;
	float: left;
	width: 78%;
	font-size: 85.71%;
}
#contact a:hover, #contact a:focus {
	color: #4ED2F9;
}
#contact .postal {
	float: left;
	margin-right: 2em;
}
#contact .url {
	display: none;
}
#contact .other {
	float: left;
}

#copyright {
	clear: right;
	float: right;
	font-size: 71.43%;
	text-align: right;
	white-space: nowrap;
}
