/*

T H E  C S S  O F  S E R A P H I C  Z E P H Y R
===============
For use with Seraphic Zephyr (http://www.seraphiczephyr.us).



IMPORTANT INFORMATION
===============
(c) 2005-2006 Preston So. All rights reserved.

"Steal from me and I'll eat you."
-- Ethan Marcotte, slidesh0w.com

Created - June 22, 2005
Updated - April 4, 2007

CONTENTS
===============
I.   Basic Elements
II.  Classes
III. IDs

*/


/*
BASIC ELEMENTS
===============*/

body {
	padding: 0;
	margin: 0;
	font: 0.7em Georgia, serif;
	background: url(../images/body.png) #fff repeat-x fixed;
	color: #333;}
p {
	line-height: 1.805em;}
strong, em {
	line-height: 1.805em;}
a {
	text-decoration: none;
	color: #966;
	background-color: inherit;
	font-weight: bold;}
a:visited {
	color: #966;
	background-color: inherit;}
a:active {
	border-bottom: 1px #966 solid;
	color: #611;
	background-color: inherit;}
a:hover {
	text-decoration: none;
	color: #611;
	background-color: inherit;
	border-bottom: 1px #966 solid;}
a.title {
	font: bold 1.45em Verdana, sans-serif;
	letter-spacing: -1px;
	display: block;
	padding-left: 25px;
	background: url(../images/title.png) no-repeat top left;}
a.title:hover {
	border-bottom: 0;}
a.title img {
	margin-left: -25px;
	margin-top: 7px;}
a.title em {
	line-height: inherit;}
a img {
	border: 1px #666 solid;}
a:hover img {
	border: 1px black solid;
	background-color: #966;}
a:hover .beta {
	text-decoration: none;
	background-color: #c99;}
strong {
	color: #444;
	background-color: inherit;}
strong:hover {
	color: black;
	background-color: inherit;}
h1 {
	color: #966;
	background-color: inherit;
	font: bold 2.5em "Century Gothic", Futura, Verdana, sans-serif;
	letter-spacing: -3px;}
h2 a {
	width: 160px;
	display: block;
	position: relative;
	right: 50px;
	text-align: center;
	color: #eee;
	background-color: #966;
	font: bold 11px Verdana, sans-serif;
	padding: 5px 20px 5px 20px;}
h2 a:hover {
	color: white;
	background-color: #611;
	text-decoration: none;}
h3 {
	font: bold 1em Georgia, serif;
	color: #999;
	background-color: inherit;
	margin: 0;
	letter-spacing: 2px;
	text-transform: uppercase;}
h4 {
	font: bold 1em Georgia, serif;
	color: #444;
	background-color: inherit;
	margin: 0;
	letter-spacing: 2px;
	text-align: center;}
ul li {
	list-style: square outside url(../images/bullet.png);
	padding-left: 2px;
	vertical-align: middle;
	line-height: 1.805em;}
ul li.feed {
	list-style: square outside url(../images/feed.jpg);
	padding-left: 2px;
	vertical-align: middle;
	line-height: 1.805em;}
ol li {
	line-height: 1.805em;}
ol ol li {
	list-style-type: lower-alpha;}
dl dt {
	padding: 5px;
	border-bottom: 1px #ccc solid;
	font-weight: bold;
	line-height: 1.805em;}
dl dd {
	padding: 5px;
	margin-left: 20px;
	line-height: 1.805em;}
img {
	padding: 3px;
	border: 1px #666 solid;
	float: left;
	margin-right: 25px;}
abbr {
	border-bottom: 1px #ccc solid;
	cursor: help;}
blockquote {
	color: inherit;
	background-color: #f0f0f0;
	padding: 25px;
	margin: 0 0 25px;
	width: 50%;
	float: right;
	font-style: italic;
	quotes: none;}
address {
	color: #666;
	background-color: inherit;
	font: 0.9em Verdana, sans-serif;
	font-style: normal;
	text-align: right;}
del {
	color: #966;
	background-color: inherit;}
ins {
	color: green;
	background-color: inherit;
	text-decoration: none;}
code {
	font-size: 1.2em;
	padding: 2px;
	background-color: white;}
pre {
	display: block;
	padding: 25px;
	background-color: white;}

/*
CLASSES
===============*/
.beta {
	padding: 2px;
	color: white;
	background-color: #dcc;
	font: 0.8em Verdana, sans-serif;
	letter-spacing: -1px;}
.center {
	text-align: center;}
.blogright, .designright {
	text-align: right;
	padding: 5px;
	border-top: 1px #ccc solid;
	line-height: 1.805em;}
.blogright:hover {
	color: inherit;
	background: url(../images/feelfree.jpg) #f0f0f0 no-repeat left;}
.designright:hover {
	color: inherit;
	background: url(../images/takelook.jpg) #f0f0f0 no-repeat left;}
.right {
	text-align: right;}
.content {
	padding: 25px;
	width: 65%;
	color: inherit;
	line-height: 1.805em;
	background-color: #f9f9f9;
	float: left;
	clear: both;
	border-bottom: 1px #999 solid;
	border-right: 1px #999 solid;}
.content#left {
	padding: 50px 25px;
	border: 0;
	color: inherit;
	background-color: transparent;
	margin-top: -2px;
	clear: none;
	float: left;
	width: 39%;}
.content#left p {
	font: 1.2em/1.9em Verdana, sans-serif;
	color: #fff;
	background-color: inherit;
	margin-top: -17px;}
.content#left a {
	color: #ccc;
	background-color: #966;
	font: normal 1.0em/1.9em Verdana, sans-serif;
	padding: 5px;}
.content#left a:hover {
	color: #fff;
	background-color: #855;
	text-decoration: none;}
.content#right {
	clear: none;
	float: right;
	width: 42%;
	border: 0;
	color: inherit;
	background-color: transparent;
	padding-right: 32px;}
.content#fresh {
	color: inherit;
	background: url(../images/fresh.jpg) #f9f9f9 no-repeat top right;}
.content ul.navigation li {
	list-style: none;
	list-style-image: none;
	margin-top: -1px;
	margin-left: -40px;
	border-top: 1px #ccc solid;
	border-bottom: 1px #ccc solid;
	display: block;
	padding-left: 0;}
.content ul.navigation li a {
	padding: 5px 5px 5px 8px;
	display: block;
	margin: 0;}
.content ul.navigation li a:hover {
	background: #e5e5e5 url(../images/list.jpg) repeat-x;
	border-bottom: 0;}
.content ul.navigation li a .black {
	color: #444;
	background-color: transparent;}
.content ul.navigation li a:hover .black {
	color: black;
	background-color: transparent;}
.content ul.navigation li a:hover img {
	background-color: inherit;}
.content ul.navigation li.last {
	border-bottom: 1px #ccc solid;}
.update {
	padding: 25px;
	color: black;
	background-color: #fdfdfd;
	border-top: 1px #999 solid;}
.update strong, #examples strong {
	font: 1.3em/1.6em Georgia, serif;
	color: #b88;
	display: block;}
.mootpoint {
	color: #999;
	background-color: inherit;
	font-weight: bold;
	font-size: 1.2em;
	margin-right: 20px;
	text-align: center;}
	
/*
IDS
===============*/
#accessibility {
	display: block;
	text-align: center;
	text-transform: lowercase;
	color: #eee;
	padding: 10px;}
#accessibility a {
	color: #eee;
	background-color: inherit;
	font-weight: normal;
	padding: 2px 5px 2px 5px;}
#accessibility a:hover {
	color: #999;
	background-color: #eee;
	border-bottom: 0;}
#container {
	width: 800px;
	margin-left: auto;
	margin-right: auto;}
#header {
	font: 1em Verdana, sans-serif;
	float: left;
	vertical-align: middle;
	padding: 128px 0 75px 102px;
	width: 59%;
	height: 96px;
	margin-bottom: -2px;
	margin-right: -3px;
	color: inherit;
	background: url(../images/header.jpg) #ccc no-repeat;}
#header a {
	color: inherit;
	background: url(../images/logo12.png) #ccc no-repeat;
	width: 149px;
	height: 111px;
	position: absolute;
	text-indent: -1000px;}
#header span {
	color: inherit;
	background: url(../images/logo12.png) #ccc no-repeat;
	width: 149px;
	height: 111px;
	position: absolute;
	border-bottom: 0;}
#header a:hover {
	color: inherit;
	background: url(../images/logo13.png) #ccc no-repeat;
	width: 149px;
	height: 111px;
	position: absolute;
	border-bottom: 0;}
#header a:active {
	border-bottom: 0;}
#navigation {
	color: inherit;
	background: url(../images/navigation.jpg) #ccc no-repeat;
	float: left;
	width: 25%;
	vertical-align: middle;
	padding-top: 128px;
	padding-bottom: 57px;
	margin-right: -2px;}
#navigation ul li {
	list-style: none;
	list-style-image: none;
	margin-left: -42px;
	height: 30px;}
#navigation ul li a.natural {
	color: #966;
	background: url(../images/natural.png) #ccc repeat-x;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 8px;
	display: block;}
#navigation ul li a.natural:hover {
	color: #611;
	background: url(../images/naturalhover.png) #ccc repeat-x;
	border-bottom: 0;
	width: 88.5%;
	margin-left: 15px;}
#navigation ul li a#active {
	color: #611;
	background: url(../images/active.png) #966 repeat-x;
	text-decoration: none;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 8px;
	display: block;}
#navigation ul li a#active:hover {
	color: #611;
	background: url(../images/activehover.png) #966 repeat-x;
	border-bottom: 0;
	width: 88.5%;
	margin-left: 15px;}
#topsection {
	float: left;
	width: 570px;
	margin-top: -2px;
	color: inherit;
	background: url(../images/tcontainer2.jpg) #e0e0e0 repeat-y;
	border-bottom: 1px #999 solid;
	border-right: 1px #999 solid;}
#feedimage {
	border: 0;
	margin-left: -2px;
	margin-right: 5px;}
#endoftheline {
	padding: 5px 5px 5px 8px;}
#bottomcontainer {
	color: inherit;
	background: none #e6e6e6;
	padding: 0;
	width: 570px;
	margin-top: -1px;}
#bottomleft {
	padding: 25px;
	color: inherit;
	background-color: #f0f0f0;
	width: 41%;
	float: left;}
#bottomright {
	padding: 25px;
	color: inherit;
	background-color: #e6e6e6;
	width: 41%;
	float: right;}
#bottomall {
	width: 570px;
	padding: 25px;
	color: inherit;
	background: none #f0f0f0;
	float: left;}
#zephyrheader, #blogheader, #designheader {
	width: 25%;
	padding-top: 15px;
	float: left;
	margin-top: -3px;}
#zephyrheader {
	background: url(/images/zephyr_v2.jpg) #ccc no-repeat;
	color: #333;}
#blogheader {
	background: url(/images/blog_v2.jpg) #ccc no-repeat;
	color: white;}
#designheader {
	background: url(/images/design_v2.jpg) #ccc no-repeat;
	color: white;}
#zephyrheader a, #blogheader a, #designheader a {
	color: #ccc;
	background-color: #966;}
#zephyrheader a:hover, #blogheader a:hover, #designheader a:hover {
	color: white;
	background-color: #855;
	border-bottom: 0;}
#examples {
	padding: 25px;
	color: black;
	background-color: #fdfdfd;
	border-top: 1px #999 solid;}
#examples img {
	margin-right: 10px;}
#examples strong {
	margin-bottom: 15px;}
#examples strong em {
	font: normal bold medium Verdana, sans-serif;
	display: block;
	letter-spacing: -1px;
	color: #a77;}
#examples a {
	background-repeat: no-repeat;
	background-position: 3px 3px;}
#examples a img {
	border: 2px #ccc solid;}
#examples a:hover img {
	border: 2px #999 solid;
	background-color: #c99;
	visibility: hidden;}
#examples span {
	float: none;
	display: block;
	margin-left: 0;
	border-width: 0;
	padding: 0;
	width: 1px;
	height: 45px;
	line-height: 1px;}
#examples a#slyforum {
	background-image: url(/images/design/sf_thumb_hover.png);}
#examples a#kenny-giordano {
	background-image: url(/images/design/kg_thumb_hover.png);}
#examples a#eathena-google-talk-theme {
	background-image: url(/images/design/ea_thumb_hover.png);}
#examples a#on-the-brink-of-extinction {
	background-image: url(/images/design/ot_thumb_hover.png);}
#examples a#the-ransom-of-red-chief {
	background-image: url(/images/design/rc_thumb_hover.png);}
#examples a#trivial-pursuit-at-the-library {
	background-image: url(/images/design/tp_thumb_hover.png);}
#examples a#last-exile-blog-template {
	background-image: url(/images/design/le_thumb_hover.png);}
#examples a#long-word-central {
	background-image: url(/images/design/lw_thumb_hover.png);}
#legal {
	color: #999;
	background-color: transparent;
	clear: both;
	text-align: center;
	padding: 25px;
	margin-left: auto;
	line-height: 1.805em;}
#legal a {
	color: #999;
	background-color: inherit;}
#legal a:hover {
	color: #777;
	background-color: inherit;
	border-bottom: 0;}
	
/*
NOTES
===============
All selectors #examples constitute a technique partly inspired by Stopdesign's portfolio.
This technique is (c) 1998-2007 Stopdesign.
*/