/*---- general ----*/

.hide, #nav li span { position: absolute; left: -9999px; font-size: 0; }

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

img {
	display: block;
	border: 0;
}

img.inline {
	display: inline;
	vertical-align: middle;
}



/*---- layout ----*/

body {
	margin: 0; padding: 0;
	background: #fff url("../i/bg.png") repeat-x top;
	font-family: arial,sans-serif;
	color: #222;
	text-align: center;
}

#container {
	position: relative;
	margin: 0 auto;
	width: 780px;
	text-align: left;
}

#banner h1, #banner a {
	position: absolute;
	top: 0; right: 0;
	background: transparent url("../i/brand.png") no-repeat 0 -160px;
	width: 120px;
	height: 160px;
}

#banner a:hover { background-position: 0 0; }

#pagebody {
	padding: 190px 0 0;
	text-align: left;
}

#pagebody-inner { padding: 0 0 0 20px; }

.header, .gab a {
	position: absolute;
	top: 100px; left: 0;
	background-repeat: no-repeat;
	width: 250px;
	height: 80px;
	display: block;
}

.home { background-image: url("../i/home.png"); }
.gab a { background-image: url("../i/gab.png"); }
.services { background-image: url("../i/services.png"); }
.portfolio { background-image: url("../i/portfolio.png"); }
.about { background-image: url("../i/about.png"); }
.contact { background-image: url("../i/contact.png"); }

#alpha {
	float: left;
	width: 480px;
}

div.entry { padding: 0 0 2em; }

.comment-content, .comments-open-content {
	background-color: #eef0ec;
	padding: .5em .75em;
	margin: 0 0 1em;
}

.comment-content { margin: 0; }

.comment { padding: 0 0 1.5em; }

#beta {
	float: right;
	width: 235px;
}

div.module { padding: 0 1em 1em 0; }

img.rss { padding: 0 0 .25em; }

#footer {
	clear: both;
	padding: 1em 20px;
	font-size: 75%;
}



/*---- typography ----*/

h3, h4, h5, h6 {
	margin: 1em 0 0;
	padding: 0;
	font-family: georgia, serif;
}

h1, h2, h3.entry-header {
	margin: 0; padding: 0;
	font-family: georgia, serif;
}

h2.date-header, h2.module-header, 
h2.archive-header, .comments-open-header, 
h3.comments-header {
	font-size: 1em;
	padding: 0 0 .2em;
	margin: 0 0 .5em;
	border-bottom: 1px solid #999;
}

.entry-footer, .comment-footer {
	border-top: 1px solid #999;
	padding: 0 0 .2em;
	margin: .5em 0 0;
	font-size: 90%;
}

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

#alpha p { line-height: 1.3em; }

pre {
	margin: 1em 0;
	padding: 1em;
	border: 1px solid #bbb;
	background-color: #f6f6f6;
}

code { background-color: #efefef; }

ul, ol { margin: 1em 0 0; padding: 0; }

p.update {
	background: url("../i/update.png") no-repeat left top;
	padding: 2px 0 10px 65px;
}

p.comments-open-moderated { }

ul.archive-list, #beta ul, #footer ul {
	margin: 0; padding: 0;
	list-style: none;
}

ul.archive-list li, #beta li { padding: 0 0 .1em; }

abbr, acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}



/*---- links ----*/

a { color: #f70; }

a img { border: 0; }

a:hover {
	background-color: #ddd;
	color: #f50;
	text-decoration: none;
}

.archive-content a, .entry-header a, #beta a, #footer a {
	text-decoration: none;
	color: #f70;
}

#beta h2.module-header a { font-weight: bold; }

.entry-header a { color: #000; }

.entry-header a:hover { color: #933; }



/*---- navigation ----*/

#nav {
	position: absolute;
	top: 0; left: 15px;
	width: 300px;
	height: 60px;
}

#nav ul { margin: 0; padding: 0; list-style: none; }

#nav li, #nav li a {
	margin: 0; padding: 0;
	float: left;
	background: transparent url("../i/nav.png") no-repeat;
	height: 60px;
	text-decoration: none;
}

#nav li a:hover { background: none; }

/* default states */
#nav li#gab a { background-position: 0 -120px; width: 38px; }
#nav li#portfolio a { background-position: -38px -120px; width: 72px; }
#nav li#about a { background-position: -110px -120px; width: 53px; }
#nav li#contact a { background-position: -163px -120px; width: 68px; }

/* hover states */
#nav li#gab { background-position: 0 -60px; }
#nav li#portfolio { background-position: -38px -60px; }
#nav li#about { background-position: -110px -60px; }
#nav li#contact { background-position: -163px -60px; }

/* here states */
#nav li#gab.here, #nav li#gab.here a { background-position: 0 0; }
#nav li#portfolio.here, #nav li#portfolio.here a { background-position: -38px 0; }
#nav li#about.here, #nav li#about.here a { background-position: -110px 0; }
#nav li#contact.here, #nav li#contact.here a { background-position: -163px 0; }

#nav li.here a { cursor: default; }



/*---- forms ----*/

#alpha form label { display: block; }

#alpha form p {
	margin: 0;
	padding: 0 0 .75em;
}



/*---- tables ----*/

table {
	border-collapse: collapse;
	width: 100%;
	margin: 0 0 25px;
	font-size: 70%;
}

tr { border: 1px solid #444; }

th, td { padding: 6px 8px; }

tr.top th { background-color: #444; color: #fff; }

tr.noborder { border: 0; }

th { vertical-align: bottom; font-weight: bold; text-align: left; }
td { vertical-align: top; }

th.storage, th.users { text-align: center; }

td.storage, td.users { text-align: right; }

td.up { background-color: #9b9; }

td.down { background-color: #b99; }



/*---- forms ----*/

input, textarea { border: 1px solid #999; }

p.msg {
	border: 1px solid #933;
	padding: 10px;
}

form div { padding: 0 0 10px 0; }

textarea {
	display: block;
	width: 370px;
	height: 100px;
}