/** 
  CSS by Steve Smith (steve@orderedlist.com)
  Feel free to browse this, but don't copy 
  it completely. That's uncool. 
*/

/**
* __Colors__
 * Body Background:     171B20
 * Body Top Stripe:     0D0F10
 * Dark Grey Section:   121519
 * Body Font:           CCC
 * Blue Links:          09F
 * Link Hover:          3CF
 * Headline Green:      96BF55
 * Background Green:    83A94A
 * Section Grey:        1D2128
 * Light Yellow:        FF9
 * Dark Green Links:    33421D
 * Dark Green Hover:    1A210E
*/

@media screen, projection {

/**
 * Copyright (c) 2006, Yahoo! Inc. All rights reserved.
 * Code licensed under the BSD License:
 * http://developer.yahoo.net/yui/license.txt
 * read more here: http://developer.yahoo.com/yui/fonts/
 * version: 0.11.0
*/

body {
	font: 13px arial,helvetica,clean,sans-serif;
	*font-size: 72%;
	*font: x-small;
}

table {
	font-size: inherit;
	font: 100%;
}

select, input, textarea {
	font: 99% arial,helvetica,clean,sans-serif;
}

pre, code {
	font: 115% monospace;
	*font-size: 100%;
}

/** end Yahoo Fonts */

/**
 * Redeclarations
 */

:link,:visited {
	text-decoration: none;
}

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
  form,body,html,p,blockquote,
  fieldset,input {
	margin: 0;
	padding: 0
}

body {
	font-family: "Lucida Grande",Tahoma,"Lucida Sans Unicode",Verdana,sans-serif;
	line-height: 1.6;
	background: #171B20;
	border-top: 20px solid #0D0F10;
	padding: 0 20px;
	text-shadow: black 0 0 0;
	color: #AAA;
}

a {
	color: #09F;
}

a:hover {
	color: #3CF;
}

a img {
	border: none;
}

h1,h2,h3,h4,h5,h6 {
	text-transform: uppercase;
}

h1 a, h3 a {
	color: #96BF55;
}

h1 a:hover, h3 a:hover {
	color: #CCC
}

h1 {
	font-size: 222%;
	color: #96BF55;
	margin: 0 0 15px;
}

h2 {
	font-size: 152%;
	padding: 0 0 10px;
	background: #1D2128;
	font-weight: normal;
	color: #FFF;
}

h3 {
	font-size: 122%;
	color: #96BF55;
}

h4 {
	font-size: 100%;
	color: #FFF;
}

ul, ol {
	margin: 0 0 1.6em 8px;
}

ol {
	margin-left: 35px;
}

ul ul, ol ol {
	margin: 0 0 5px 8px;
}

ul {
	list-style-type: none;
}

ul li {
	margin: 0 0 0 5px;
	padding: 0 0 0 20px;
	background: url(../images/bullet.gif) no-repeat 3px 9px;
}

strong {
	font-weight: bold;
	color: #FF9;
}

img {
	background: #FFF;
	padding: 5px;
}

code {
	background: #171B20;
	padding: 1px 2px;
	font-size: 92%;
	color: #EEE;
	font-family: Monaco, "Courier New", Courier, mono;
}

blockquote {
	background: #171B20;
	padding: 20px;
	margin: 0 0 1.6em;
	font-style: italic;
}

pre {
	font-size: 86%;
	width: 100%;
	overflow: auto;
}

/**
 * Layout
 */

#wrapper {
	width: 800px;
	margin: 0 auto;
}

#header {
	height: 100px;
	position: relative;
}

#feature .post {
	width: 490px;
	float: left;
}

#feature .link {
	width: 195px;
	display: inline;
	margin: 0 10px 0 0;
	float: right;
}

#footer {
	clear: both;
	font-size: 93%;
	float: none;
}

#footer .wrapper {
	float: none;
}

/**
 * Header Styles
 */

#header h1 {
	width: 300px;
	height: 100px;
	text-indent: -9999px;
	position: relative;
	background: url(../images/logo.gif) no-repeat;
}

#header h1 a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 100px;
	width: 300px;
	overflow: hidden;
}

#header ul {
	width: 544px;
	height: 30px;
	top: 35px;
	right: 0;
	list-style-type: none;
	background: url(../images/nav.gif) no-repeat;
	position: absolute;
}

#header li {
	float: left;
}

#header ul a {
	position: absolute;
	height: 30px;
	top: 0;
	text-indent: -9999px;
	overflow: hidden;
	background: url(../images/nav.gif) no-repeat top left;
}

#header #hom a {
	width: 53px;
	left: 0;
	background-position: 0 0;
}

#header #art a {
	width: 73px;
	left: 53px;
	background-position: -53px 0;
}

#header #por a {
	width: 87px;
	left: 126px;
	background-position: -126px 0;
}

#header #ser a {
	width: 75px;
	left: 213px;
	background-position: -213px 0;
}

#header #dow a {
	width: 96px;
	left: 288px;
	background-position: -288px 0;
}

#header #abo a {
	width: 83px;
	left: 384px;
	background-position: -384px 0;
}

#header #con a {
	width: 77px;
	left: 467px;
	background-position: -467px 0;
}

#header #hom a:hover {
	background-position: 0 -30px;
}

#header #art a:hover {
	background-position: -53px -30px;
}

#header #por a:hover {
	background-position: -126px -30px;
}

#header #ser a:hover {
	background-position: -213px -30px;
}

#header #dow a:hover {
	background-position: -288px -30px;
}

#header #abo a:hover {
	background-position: -384px -30px;
}

#header #con a:hover {
	background-position: -467px -30px;
}

#body_hom #header #hom a {
	background-position: 0 -60px;
}

#body_art #header #art a {
	background-position: -53px -60px;
}

#body_por #header #por a {
	background-position: -126px -60px;
}

#body_ser #header #ser a {
	background-position: -213px -60px;
}

#body_dow #header #dow a {
	background-position: -288px -60px;
}

#body_abo #header #abo a {
	background-position: -384px -60px;
}

#body_con #header #con a {
	background-position: -467px -60px;
}

/**
 * Sections
 */

.notice {
	margin: 0 0 35px;
	background: #FF9 url(../images/notice_top.gif) no-repeat;
	float: left;
	width: 800px;
}

.notice div {
	background: url(../images/notice_bottom.gif) no-repeat bottom left;
	float: left;
	padding: 5px 10px;
	color: #171B20;
	width: 780px;
}

.notice div strong {
	color: #171B20;
}

.notice a {
	color: #06C;
}

.notice a:hover {
	color: #39F;
}

.section {
	margin: 0 0 35px;
	background: #1D2128 url(../images/section_top.gif) no-repeat;
	float: left;
	clear: both;
	width: 800px;
}

.section .wrapper {
	padding: 20px 30px;
	width: 740px;
	background: url(../images/section_bottom.gif) no-repeat bottom left;
	float: left;
	clear: left;
}

.nugget {
	background: #121519 url(../images/section_nugget_top.gif) no-repeat;
}

.nugget .wrapper {
	padding: 5px 10px;
	width: 780px;
	background-image: url(../images/section_nugget_bottom.gif);
}

/**
 * Portfolio Preview Area
 */

#portfolio_preview {
	height: 110px;
	margin: 0 0 35px;
	padding: 0 0 0 20px;
	position: relative;
	clear: both;
}

#portfolio_preview h2,          
  #portfolio_preview h2 a {
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 110px;
	text-indent: -9999px;
	overflow: hidden;
	background: url(../images/sidebar_portfolio.gif) no-repeat;
}

#portfolio_preview h2 a:hover {
	background-position: -20px 0;
}

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

#portfolio_preview li {
	float: left;
	margin: 0 0 0 20px;
	display: inline;
	padding: 0;
}

#portfolio_preview img {
	padding: 0;
}

/**
 * Plug Area
 */

#plug {
	height: 45px;
	margin: 0 0 35px;
	padding: 0 0 0 20px;
	position: relative;
	clear: both;
	background: url(../images/sidebar_plug.gif) no-repeat;
}

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

#plug li {
	float: left;
	margin: 0 0 0 20px;
	display: inline;
	padding: 0;
}

#plug img {
	padding: 0;
}

#plug img.sidebar {
	margin: -5px 0;
}

/**
 * Posts
 */

body .post h2 {
	font-size: 165%;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0 0 20px;
	line-height: 1em;
}

.post {
	font-size: 120%;
	margin: 0 0 -1.6em;
}

.post h2 a {
	color: #FFF;
	text-shadow: #000 0 0 3px;
}

.post h2 a:hover {
	color: #FF9;
}

.post p {
	margin: 0 0 1.6em;
}

.post .meta a {
	padding: 3px 0 3px 20px;
	margin: 0 20px 0 0;
}

.post .date {
	font-size: 70%;
	color: #999;
	margin: -30px 0 20px;
}

.post .meta {
	font-size: 82%;
	margin: 20px 0 1.6em;
}

.post .permalink {
	background: url(../images/icon_book.gif) no-repeat 0 50%;
}

.post .comments {
	background: url(../images/icon_comments.gif) no-repeat 0 50%;
}

.post .subscribe {
	background: url(../images/icon_subscribe.gif) no-repeat 0 50%;
}

.post img {
	float: right;
	margin: 0 0 15px 20px;
	border: 5px solid #121519;
}

.post img.button {
	padding: 0;
	border: none;
	background: none;
}

.post h3 {
	font-weight: normal;
}

.post p.photo {
	background: #121519;
	text-align: center;
	padding: 20px;
}

.post p.photo img {
	float: none;
	margin: 0;
}

.post p.advertisement {
	text-align: center;
}

/**
 * Homepage Feature Section
 */

#feature {
	background: #1D2128 url(../images/feature_bg.gif) repeat-y;
	float: left;
	margin: 0 0 35px;
}

#feature .section {
	background-color: transparent;
	background-image: url(../images/feature_top.gif);
	margin: 0;
}

#feature .wrapper {
	background-image: url(../images/feature_bottom.gif);
}

#feature .link {
	color: #FFF;
}

#feature .link a {
	color: #33421D;
}

#feature .link a:hover {
	color: #1A210E;
}

#feature .link p {
	margin: 0 0 5px;
}

#feature .link h3 {
	color: #171B20;
	font-size: 150%;
	margin: 0 0 5px;
}

#feature .link img {
	margin: 0 0 5px;
}

#feature .link .download {
	padding: 3px 0 3px 20px;
	background: url(../images/feature_download.gif) no-repeat 0 50%;
}

/**
 * Extras Section, with Archives also
 */

#extras,
  #archives {
	clear: both;
	font-size: 93%;
	background: #1D2128 url(../images/section_top.gif) no-repeat;
	float: left;
	margin: 0 0 35px;
}

#extras h3,
  #archives h3 {
	font-size: 160%;
	margin: 0 0 10px;
	font-weight: normal;
}

#extras .section,
  #archives .section {
	background: transparent url(../images/section_bottom.gif) no-repeat bottom left;
	margin: 0;
	padding: 20px 0;
}

#extras .wrapper,
  #archives .wrapper {
	background: url(../images/extras_bg.gif) repeat-y;
	padding: 0 30px;
}

#extras .wrapper div,
  #archives .wrapper div {
	float: left;
	display: inline;
	margin: 0 60px 0 0;
}

#extras .wrapper div#photos {
	width: 210px;
	margin: 0 40px 0 0;
}

#photos p {
	padding: 0 20px 0 0;
}

#by_date {
	width: 190px;
}

#recent {
	width: 240px;
}

#extras #links,
  #archives #tags {
	width: 190px;
	margin: 0;
}

#extras ul,
  #archives ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#extras li,
  #archives li {
	margin: 0 0 8px 5px;
	padding: 0 0 0 20px;
	background-position: 0 1px;
	background-repeat: no-repeat;
}

#extras span,
  #archives span {
	display: block;
}

#by_date li {
	background-image: url(../images/icon_pages.gif);
}

#tags li {
	background-image: url(../images/icon_tag.gif);
}

#recent li {
	background-image: url(../images/icon_post.gif);
}

#recent li {
	background-image: url(../images/icon_post.gif);
}

#recent form {
	margin: 5px 0 10px;
}

#recent form input {
	vertical-align: middle;
}

#recent #q {
	width: 175px;
}

#recent p, #photos p {
	margin: 10px 0 0;
	clear: both;
}

#extras #photos ul {
	margin: 0 -20px 0 0;
}

#photos li {
	margin: 0 20px 20px 0;
	padding: 0;
	float: left;
}

#photos a.photo {
	padding: 3px 0 3px 20px;
	background: url(../images/icon_photo.gif) no-repeat 0 50%;
}

#links li {
	background-image: url(../images/icon_link.gif);
}

#links li.more {
	background-image: url(../images/icon_add.gif);
	background-position: 0 2px;
}

/**
 * Portfolio
 */

img.screenshot {
	float: left;
	padding: 0;
	margin: -20px 30px 0 -30px;
	height: 300px;
}

#body_por h3 {
	color: #96BF55;
	margin: 0 0 10px;
}

#body_por h4,
  #body_por p {
	margin: 0 0 10px;
}

.portfolio_entry .wrapper {
	padding-bottom: 0;
}

/**
 * Downloads Section
 */

#plugins {
	background: #1D2128 url(../images/section_top.gif) no-repeat;
	float: left;
	margin: 0 0 35px;
}

#plugins .section {
	background: transparent url(../images/section_bottom.gif) no-repeat bottom left;
	margin: 0;
	padding: 20px 0;
}

#plugins .wrapper {
	background: url(../images/extras_bg.gif) repeat-y;
	padding: 0 30px;
}

#plugins .wrapper div {
	float: left;
	display: inline;
	margin: 0 60px 0 0;
}

#download1 {
	width: 190px;
}

#download2 {
	width: 240px;
}

#plugins .wrapper #download3 {
	width: 190px;
	margin: 0;
}

#plugins p {
	margin: 0 0 1em;
}

#plugins p.download {
	margin-bottom: 0;
}

#plugins p.download a,
  a.download {
	padding: 1px 0 1px 20px;
	background: url(../images/icon_download.gif) no-repeat 0 50%;
}

.backgrounds .wrapper {
	padding-right: 5px;
	padding-left: 35px;
	padding-bottom: 1px;
	width: 770px;
}

.backgrounds h2 {
	width: 700px;
}

.background {
	float: left;
	margin: 0 30px 20px 0;
	width: 160px;
	text-align: center;
}

.background span {
	float: left;
	vertical-align: middle;
	line-height: 23px;
	margin-right: 5px;
	display: inline;
	font-size: 86%;
}

.background a {
	vertical-align: middle;
	display: inline;
	float: left;
	text-decoration: none;
	text-indent: -9000px;
	overflow: hidden;
	margin: 0 5px 0 0;
}

.background a.large {
	width: 26px;
	height: 23px;
	background: url(../images/bg_16x12.gif) no-repeat;
}

.background a.large:hover {
	background-position: 0 -23px;
}

.background a.wide {
	width: 26px;
	height: 19px;
	background: url(../images/bg_12x8.gif) no-repeat;
}

.background a.wide:hover {
	background-position: 0 -19px;
}

.background a.small {
	width: 19px;
	height: 17px;
	background: url(../images/bg_10x7.gif) no-repeat;
	margin: 0;
}

.background a.small:hover {
	background-position: 0 -17px;
}

#text-link-ads {
	padding: 10px 3%;
	background: #171B20;
	list-style-type: none;
	margin: 0 0 15px;
	width: 94%;
	float: left;
}

#text-link-ads li {
	float: left;
	width: 23%;
	margin: 0 2% 0 0;
	background: none;
	padding: 0;
}

/**
 * External Links
 */

#externals {
	background: #1D2128 url(../images/section_top.gif) no-repeat;
	float: left;
	margin: 0 0 35px;
}

#externals .section {
	background: transparent url(../images/section_bottom.gif) no-repeat bottom left;
	margin: 0;
	padding: 20px 0;
}

#externals .wrapper {
	background: url(../images/extras_bg.gif) repeat-y;
	padding: 0 30px;
}

#externals .wrapper div {
	float: left;
	display: inline;
	margin: 0 60px 0 0;
}

#friends1 {
	width: 190px;
}

#friends2 {
	width: 240px;
}

#externals .wrapper #friends3 {
	width: 190px;
	margin: 0;
}

#extras ul,
  #externals ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#externals li {
	margin: 0 0 8px 5px;
	padding: 0 0 0 20px;
	background: url(../images/icon_link.gif) no-repeat 0 1px;
}

/**
 * Comments
 */

#commentlist {
	float: left;
	width: 100%;
	margin: -35px 0 0;
	padding: 0 0 35px;
	list-style-type: none;
}

#commentlist li {
	float: left;
	width: 100%;
	clear: left;
	background: #1D2128 url(../images/section_bottom.gif) no-repeat bottom left;
	margin: 35px 0 0;
	padding: 0;
}

#commentlist li.untouched {
	display: none;
}

#commentlist .meta {
	width: 200px;
	font-size: 86%;
	float: left;
	padding: 25px 30px 20px;
	background: url(../images/section_top.gif) no-repeat;
	margin: 0 0 1em;
}

#commentlist .meta a {
	color: #FFF;
}

#commentlist .meta a:hover {
	color: #FF9;
}

#commentlist .meta cite {
	text-transform: uppercase;
	font-size: 110%;
	font-style: normal;
	font-weight: bold;
}

#commentlist .date {
	position: relative;
}

#commentlist .comment {
	width: 490px;
	overflow: hidden;
	padding: 20px 30px 20px 0;
	float: right;
	font-size: 110%;
	background: url(../images/section_top.gif) no-repeat top right;
	margin: 0 0 -1em;
}

#commentlist .meta img {
	float: left;
	margin: -5px 10px 0 0;
	border: 5px solid #171B20;
	width: 30px;
	height: 30px;
	overflow: hidden;
}

#commentlist .comment p {
	margin: 0 0 1em;
}

#commentlist li.author {
	background: #83A94A url(../images/section_author_bottom.gif) no-repeat bottom left;
	color: #171B20;
}

#commentlist li.author .meta,
  #commentlist li.author .comment {
	background-image: url(../images/section_author_top.gif);
}

#commentlist li.author strong {
	color: #FFF;
}

#commentlist li.author blockquote {
	background: #799D43;
}

#commentlist li.author .comment a {
	color: #FF9;
}

#commentlist li.author .comment a:hover {
	color: #FFF;
}

#commentlist ul, 
  #commentlist ol {
	margin: 0 0 1.6em 8px;
}

#commentlist ol {
	margin-left: 35px;
}

#commentlist ul {
	list-style-type: none;
}

#commentlist ul li {
	margin: 0 0 0 5px;
	float: none;
	padding: 0 0 0 20px;
	background: url(../images/bullet.gif) no-repeat 3px 9px;
}

#make_a_comment {
	width: 800px;
	overflow: hidden;
}

#make_a_comment p {
	width: 232px;
	float: left;
	margin: 0 20px 10px 0;
	display: inline;
}

#make_a_comment p.website {
	margin: 0 0 10px;
}

#maka_a_comment p.commentbox {
	width: 738px;
}

#make_a_comment p.submit {
	width: 99%;
}

#make_a_comment label {
	display: block;
}

#make_a_comment p.commentbox label {
	width: 738px;
}

#make_a_comment input,
  #make_a_comment textarea {
	font-family: "Lucida Grande",Tahoma,"Lucida Sans Unicode",Verdana,sans-serif;
	width: 100%;
}

#make_a_comment textarea {
	width: 738px;
	font-size: 115%;
}

#make_a_comment p.submit input {
	width: auto;
}

#make_a_comment span {
	color: #999;
	font-size: 86%;
}

}