/*---- 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; }
.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; margin-left: 20px; }
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 ----*/

body { font: normal 12px/18px helvetica, arial, sans-serif; }
h1, h2, h3, h4 { color: #333; line-height: 36px; }
p, pre { margin: 0 0 18px; }
pre { background-color: #f6f; }
.gab { font-size: 20px; line-height: 36px; }
#banner { text-align: right; }
#footer { font-size: 11px; }
abbr, acronym { border-bottom: 1px solid #666; }
.module-blurt a { display: none; }
.module-blurt p a, .module-blurt li a { display: inline; }

a { color: #c00; }
a img { border: 0; }
a:hover { background-color: #f0f0f0; color: #d00; text-decoration: none; }
h1 a, h2 a, h3 a, #footer a { text-decoration: none; }



h3, h4, h5, h6 { margin: 1em 0 0; padding: 0; font-family: helvetica, arial, sans-serif; }
h1, h2, h3.entry-header { margin: 0; padding: 0; font-family: helvetica, arial, sans-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;
}