/*
Theme Name: Steampunk
Theme URI: http://blog.zoelen.net
Description: Steampunk theme for Zoelen.net
Version: 1.0
Author: A.A. van Zoelen
Author URI: http://www.zoelen.net/ 


Steampunk Theme Copyright (C) 2007 A.A. van Zoelen.

Giving credit, where credit's due: 
This template is based on the Quentin template made
by Mike Purdy (www.pikemurdy.com). A lot of code and inspiration came
from the "Kubrik" theme. Found here: http://binarybonsai.com/kubrick/

License -
The CSS, XHTML and design is released under GPL:
http://www.opensource.org/licenses/gpl-license.php

You may edit and modify this theme. But please leave the credit 
line, and don't try to pass off my work as your own. Thank You.

This program is free software; you can redistribute it and/or modify it under 
the terms of the GNU General Public License as published by the Free Software 
Foundation, version 2 of the License.

This program is distributed in the hope that it will be useful, but WITHOUT ANY 
WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A 
PARTICULAR PURPOSE. See the GNU General Public License for more details.
*/



/* Main Elements ------------------------------ */

body
{
	background: #5B211A url(Common/Steampunk_st.gif) repeat-x center top;
	color: #000;
	font-family: "Hoefler Text", Georgia, "Times New Roman", Times, serif;
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: medium !important;
	line-height: normal !important;

}

/* begin unique elements */

#container
{
	background-image: url(Common/Centre-Background.gif);
	background-repeat: repeat-y;
	width: 980px;
	margin: 0 auto;

	/* defines container element */
}

#header
{
	background-image: url(Common/Header-Background.gif);
	background-position: top left;
	background-repeat: no-repeat;
	height: 115px;
	padding: 0 10px;

	/* defines header element */
}

#header h1
{
	margin: 0 0 10px 0;
	padding: 5px 0px 0px 0px;
	text-transform: uppercase;
	text-align: left;
	font-family: "Hoefler Text", Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	font-size: 300%;
	color: #FFFFFF;

	/* define header h1 tag */
}

#header h2
{
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	text-align: right;
	font-family: "Hoefler Text", Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	font-size: 15px;
	color: #FFFFFF;

	/* define header h2 tag */
}

#navigation
{
	background-color: #009933;
	width: 155px;
	text-align: left;
	font-family: "Hoefler Text", Georgia, "Times New Roman", Times, serif;
	font-variant: small-caps;
	font-size: 11px;
	color: #ffffff;
	float: right;

	/* define navigation element */
}

#navigation ul
{
	margin: 0;
	padding: 0;

	/* remove padding and margin from navigation list */
}

#navigation ul li
{
	display: inline;

	/* set list elements to display inline */
}

#navigation ul li a
{
	border-bottom: 5px solid #FFFFFF;
	border-right: 5px solid #FFFFFF;
	background-color: #B6B69C;
	width: 140px;
	height: 28px;
	padding: 12px 0px 0px 10px;
	text-decoration: none;
	color: #ffffff;
	display: block;
	float: left;

	/* set dimensions of navigation links */
}

#navigation ul li a:hover
{
	background-color: #C5D27F;
	color: #555555;

	/* set navigation hover link state */
}

#centre
{

	padding: 0px 5px 0px 5px;

	/* container for all blog content */
}

#content
{
	width: 620px;
	padding: 5px 5px 5px 5px;
	float: left;

	/* defines content element */
}

#content h1
{
	margin: 5px 0px;
	font-family: "Hoefler Text", Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	font-size: 25px;
	color: #5B211A;
	text-transform: uppercase;
	text-decoration: none;

	/* defines generic h1 element */
}

#content h2
{
	margin: 5px 0px;
	font-family: "Hoefler Text", Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	font-size: 20px;
	text-transform: uppercase;
	text-align: left;
	color: #728C40;

	/* defines generic h2 element */
}

#content h3
{
	margin: 5px 0px;
	font-family: "Hoefler Text", Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	font-size: 14px;
	text-transform: uppercase;
	text-align: left;
	color: #728C40;

	/* defines generic h3 element */
}

#content p
{
	line-height: 140%;
}

#content a
{
	color: #728C40;;
	text-decoration: underline;
}

#content a:hover
{
	color: #4F5F34;
	text-decoration: none;
}

#breadcrumb
{
	background-color: #FFFFFF;
	height: 15px;
	padding: 5px 5px 5px 10px;

	/* defines breadcrumb element */
}

#breadcrumb a
{
	color: #4F5F34;
	text-decoration: underline;
}

#breadcrumb a:hover
{
	color: #4F5F34;
	text-decoration: none;
}

#subcontent
{
	width: 180px;
	padding: 0;
	margin: 0 0 10px 5px;
	font-size: 95%;
	color: #6C534A;
	float: left;

	/* defines subcontent element */
}

#subcontent h1
{
	margin: 0;
	padding: 0;
	font-family: "Hoefler Text", Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	font-size: 20px;
	text-transform: uppercase;
	text-align: left;
	color: #003366;

	/* defines generic h1 element */
}

#subcontent h2
{
	font-family: "Hoefler Text", Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	font-size: 20px;
	text-transform: uppercase;
	text-align: left;
	color: #003366;

	/* defines generic h2 element */
}

#subcontent h3
{
	font-family: "Hoefler Text", Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	font-size: 20px;
	text-transform: uppercase;
	text-align: left;
	color: #003366;

	/* defines generic h3 element */
}

#subcontent ul
{
	margin: 0;
	padding: 0;

	/* defines generic list container element */
}

#subcontent ul li
{
	list-style: none;

	/* defines generic list element */
}

#subcontent ul li a
{
	width: 170px;
	padding: 5px 0px 0px 0px;
	text-decoration: none;
	color: #6C534A;
	display: block;

	/* defines generic link element */
}

#subcontent ul li a:hover
{
	color: #000000;

	/* defines generic link hover state */
}

#SidebarText p
{
	text-decoration: none;
}

#SidebarText img
{
	width: 100%;
}

#calender
{
	/* defines container for calender element */
	background:  url(common/calendar.gif) repeat-x center top;
	width: 100%;
	height:200px;
	text-align: center;
}

#calender table
{
	/* define table for calender */
	background: #CBB293;
	empty-cells: show;
	margin: 15px 5px 10px 10px;
	font-size: 80%;
	width: 90%;
	text-align: center;
}

#calender table td
{
	/* set column width */	
	font-family: normal 100% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
	width: 14%;
	margin: 1px;
	color: #9D8872;
	text-align: center;
	background-color: #F6EDD3;
	letter-spacing: normal;
}


#calender table .controls
{
	background-color: #BAC994;
	font-weight: bold;

	/* style event controls
	   fields without a date
	*/
}

#calender table .controls a
{
	color: #CBD6AD;
	text-decoration: none;
	
	/* style control links
	   Next/Prev month
	*/
}

#calender table .controls a:hover
{

	color: #000000;
	text-decoration: none;

	/* style link controls 
	   Next/Prev month hover
	*/
}

#calender table .title
{
	background-color: #CBD6AD;

	/* style calender titles */
}

#calender table .days td
{
	background-color: #E6D6B8;	
	/* style day columns 
	   Color bg fields with dates
	*/
}

#calender table .days a
{
	color: #444444;
	text-decoration: none;

	/* style day links */
}

#calender table .days a:hover
{
	color: #728C40;
	text-decoration: none;

	/* style day links */
}


#calender table td.empty
{
	background-color: #F6EDD3;

	/* style empty cells */
}

	#calender table td.article
	{
		background-color: #669900;

		/* style article cells */
	}

	#calender table td.article_event
	{
		background-color: #009980;

		/* style article cells */
	}

	#calender table td.event
	{
		background-color: #006699;

		/* style event cells */
	}

	#calender table td.event a, #calender table td.article a, #calender table td.article_event a
	{
		color: #E6D6B8;
		text-decoration: none;

		/* style item links */
	}

	#calender table td.event a:hover, #calender table td.article a:hover, #calender table td.article_event a:hover
	{
		color: #000000;
		text-decoration: none;

		/* style item links */
	}

#pages
{
	border-bottom: 5px solid #FFFFFF;
	padding: 5px 5px 10px 5px;
	margin-bottom: 5px;

	/* defines container for pages element */
}

#webmail
{
	border-bottom: 5px solid #FFFFFF;
	padding: 5px 5px 10px 5px;
	margin-bottom: 5px;

}

#webmail h1
{
	font-size: 100%;

	/* defines container for webmail */
}

#categories
{
	border-bottom: 5px solid #FFFFFF;
	padding: 5px 5px 10px 5px;
	margin-bottom: 5px;
	text-align: left;
	/* defines container for categories element */
}

#categories h1
{
	font-size: 100%;

	/* defines container for categories selectable archives */
}


#categories ul li a
{
	padding-left: 20px;
	margin-right: -20px;
}

#archives
{
	border-bottom: 5px solid #FFFFFF;
	padding: 5px 5px 10px 5px;
	margin-bottom: 5px;
	text-align: left;
	font-size: 70%;
	/* defines container for categories selectable archives */
}

#archives h1
{
	font-size: 140%;

	/* defines container for selectable archives */
}


#Archive h1
{
	font: bold 12px/15px "lucida grande", "trebuchet ms", georgia, times, serif;
	color: #000;
	margin: 1em 0;
	padding: 6px 0;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	letter-spacing: 1px;
	background-color: #F4ECD2;
	text-transform: uppercase;
	text-align: center;

	/* The actual archive shown on screen */
}

#archives ul li a
{
	padding-left: 20px;
	margin-right: -20px;
}

#feeds
{
	border-bottom: 5px solid #FFFFFF;
	padding: 5px 5px 0px 5px;
	margin-bottom: 5px;
	text-align: left;

	/* defines container for feeds element */
}

#feeds h1
{
	font-size: 100%;

	/* defines container for selectable feeds */
}

#feeds ul
{
	margin-bottom: 10px;
	font-size: 70%;
}


#feeds ul li a
	{
		background-image: url(Icons/rss.jpg);
		background-position: 0px 4px;
		background-repeat: no-repeat;
		padding-left: 20px;
		margin-right: -20px;
	}
	
#links
{
	border-bottom: 5px solid #FFFFFF;
	padding: 5px 5px 10px 5px;
	margin-bottom: 5px;
	font-size: 80%;
	text-align: left;

	/* defines container for links element */
}

#links h1
{
	font-size: 130%;

	/* defines container for selectable links */
}

#links ul li a
	{
		background-image: url(Icons/link.gif);
		background-position: 0px 4px;
		background-repeat: no-repeat;
		padding-left: 20px;
		margin-right: -20px;
	}


#login
{
	/* defines container for login element */

	border-bottom: 5px solid white;
	padding: 5px 5px 10px 5px;
	margin-bottom: 10px;
	font-size: 70%;
	text-align: left;
}

#login h1
{
	font-size: 140%;

	/* defines container for selectable logins */
}

#login ul li a
	{
		background-image: url(Icons/Site.gif);
		background-position: 0px 4px;
		background-repeat: no-repeat;
		padding-left: 20px;
		margin-right: -20px;
	}

#notification
{
	width: 100%;
	height: 100%;
	background-color: #D3D5C9;
	padding: 15% 0;
	margin-bottom: -15px;
	text-align: center;

	/* defines container for notification element */
}

#notification h1
{
	margin: 5px 0px;
	font-family: "Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
	font-weight: normal;
	font-size: 25px;
	color: #728c40;
	text-transform: uppercase;

	/* defines notification h1 element */
}

#notification a
{
	color: #4F5F34;
	text-decoration: underline;

	/* defines notification link styles */
}

#notification a:hover
{
	color: #4F5F34;
	text-decoration: none;

	/* defines notification link hover styles */
}

#screenshot
{
	background-image:url(Common/Screenshot-Background.gif);
	background-position: top left;
	background-repeat: repeat-x;
	margin: 0px auto;
	padding: 5px;
	text-align: center;
	text-align: center;
	overflow: visible;
}

#screenshot img
{
	background-color: #EFEFD6;
	border: 1px solid #542700;
	margin: 6px;
	padding: 3px;
}

#footer
{
	background-image: url(Common/Footer-Background.gif);
	background-position: top left;
	background-repeat: repeat-x;
	height: 32px;
	padding: 14px 15px 0px 0px;
	text-align: right;
	color: #FFFFFF;
	font-size: 60%;

	/* style footer element */
}

#footer a
{
	color: #D3D5C9;
	text-decoration: underline;

	/* style footer links */
}

#footer a:hover
{
	color: #FFFFFF;
	text-decoration: none;

	/* style footer links */
}


#copyright
{
	visibility: visible;

	/* style copyright element */
}



/* begin article style definitions */
.article
{

	/* container for each individual article */
	font-family: "Hoefler Text", Georgia, "Times New Roman", Times, serif;
	margin-left: 40px;
	margin-right: 40px;

}

 	.article .articlefooterimg
	{
		margin-bottom: 35px;
		/* The image between two articles */
	}

	.article .details
	{
		color: #000;
		margin: 1em 0;
		/* 
		margin-left: 40px;
		margin-right: 40px;
		margin-bottom: 50px;
		*/
		padding: 6px 0;
		list-style: none;
		font-size: 55%;
		letter-spacing: 1px;
		text-transform: uppercase;
		border-top: 1px solid #000;
		border-bottom: 1px solid #000;

		/* defines the container for the article details
		the summerized bottom line of the article

		*/
	}

	.article .details li
	{
		margin: 0px 5px 10px 0px;
		display: inline;
		

		/* defines each detail part */
	}

	.article .introduction
	{
		border-bottom: 1px solid #EEEEEE;
		line-height: 2px;
		font-size: 115%;

		/* defines the article introduction container */
	}

	.article .link a
	{
		font-size: 60%;
		text-align: center;

		/* defines the container for the full information link */
	}

	.article .link
	{
		font-size: 100%;
		text-align: right;
		margin-right: 40px;

		/* defines the container for the header information link */
	}

	.article .gallery
	{
		/* defines the container for article gallery */
	}

	.article .gallery img
	{
		border: 1px solid #EEEEEE;
		padding: 3px;
		margin: 3px;
	}




/* begin comment style definitions */

#comments
{
	margin-bottom: 20px;
}

	#comments .details
	{
		margin-bottom: 10px;
	}

	#comments .details dt
	{
		background-image: url(Icons/Avatar.jpg);
		background-position: top left;
		background-repeat: no-repeat;
		float: left;
		height: 55px;
		width: 55px;
		margin-right: 5px;
	}

	#comments .details dd
	{
		margin: 0;
	}

	.comment
	{
		padding: 5px 0px;
		clear: both;
	}

	.whisper
	{
		background-color: #E4E4E4;
		padding: 5px 5px;
		clear: both;
	}

form
	{
	margin: 0;
	padding: 0;

	/* container for comment and search forms */
	}

	form #comment
	{
		width: 90%;
		height: 125px;

		/* comment textarea */
	}

	form #whisper
	{
		margin-left: 0px;

		/* whisper checkbox */
	}

	form #keywords
	{
		width: 32%;
	}

	form #date
	{
		width: 32%;
	}

	form #category
	{
		width: 32%;
	}

#paging
{
	text-align: right;

	/* container for paging controls */
}

	#paging a
	{
		padding: 0px 5px;
	}

/* begin events styling */

.event
{

}

	.event h1
	{

	}

	.event h2
	{

	}

	.event h3
	{

	}

	.event .details
	{
		margin: 0;
		padding: 0;
	}

	.event .details li
	{
		margin-right: 5px;
		list-style: none;
		display: inline;
	}


.clear
{
	clear: both;

}

/* miscellaneous elements */
img
{
/*	border: none; */
}