/*   
Theme Name: Huz Classic
Theme URI: http://www.huz.org.uk
Description: Church Newsletter, upgraded for the Web 2.0 generation!
Author: El Huz
Author URI: http://www.huz.org.uk
Template: huzorg
Version: 0.0.0.0.0.0.1
.
	MAGICAL MYSTERY CSS
	(c) 2004 EL HUZ

	And then 2007 rolled around and having a fancy Wordpress blog was all the
	rage and I was like "HEY! I need to get in on that action!" And so it came to
	pass that I upgraded the creaky old CSS to work as a Wordpress theme.
	
	So, really, it's (C) 2004-2007, or maybe just: 2004, 2007. You know, like
	Ocarina of Time is (C) 1998, 2003, Nintendo. Or something like that. */

body /* The light blue background */
{
	background-color: #808FFF;
	margin: 0px 0px 50px 0px;
	padding:0;
	min-width:775px;  /* Christ, everything looks like bollocks in IE */
	max-width:1100px; /* thanks to it not supporting these two lines. */
	font-size: 120%;
}

/* Link behaviour! */

a
{
	/*font-weight:bold; -- Actually, this looks like balls */
	color: #0000aa;
}

a:visited
{
	color:#000055;
}

a:hover,a:active
{
	color: #ff0000;
}


#maincontainer /* The main milky white container for the text pane */
{
	background: #FFFFFF url(images/testedge.png) repeat-y scroll right; /* "Test edge" my arse! Somehow it became the de facto site decoration... */
	margin-left: 119px;
	margin-right: 19px;
	border: solid 3px #000000;
}

#main /* Contains the off-white text content area */
{
	background-color: #FAFAFA;
	border-left: solid 1px #000000;
	border-right: solid 1px #000000;
	margin-left:90px;
	margin-right: 150px;
	margin-top:-1px; /* Hide border on topmost headline */
	padding-bottom: 5px;
	font: 85% calibri,verdana,sans-serif;
	line-height: 170%;
	text-align: justify;
}

#menucontainer /* A container for the menu items at the side */
{
	float:left;
	width:158px;
	position:absolute;
	top:120px;
	left:30px;
}

#topleft /* The poncy swooshy curve in the top-left corner */
{
	background: #808FFF url(images/topleft.gif) no-repeat scroll right bottom;
	position: absolute;
	width: 73px;
	height: 61px;
	left: 117px;
	top: 47px;
	margin:0;
	padding:0;
	z-index: 1; /* Keep it in front? Do we really need this? Does it even work?
					Have I even used it correctly?! WHO 'NOSE'?! */
}

#topbar /* The top bar where it's all THE HUZ EXPERIENCE in big shouty letters */
{
	background-color: #808FFF;
	height: 49px;
	position: relative;
	padding: 0px 0px 0px 0px;
	margin-right: 0px;
	left: 0px;
	overflow:hidden;
}

#topbar a, #topbar a:hover /* Don't let on that it's a link. Sssh! */
{
	text-decoration: none;
	color: #000000;
}

#topbar h1 /* THE HUZ EXPERIENCE is our main header */
{
	font: 200% Arial Black,sans-serif;
	font-weight: bolder;
	letter-spacing: 5px;
	text-align: center;
	font-variant: small-caps;
	top: 0px;
	margin: 0;
}

#copyrite /* Teeny tiny copyright text */
{
	background-color: #FAFAFA;
	position: relative;
	border: solid 1px #000000;
	font: 70% calibri,verdana,sans-serif;
	text-align: center;
	top: 20px;
	margin-left: auto;
	margin-right: auto;
	width: 550px;
	padding: 0;
}

.navigation /* The centred "NEXT POST! PREVIOUS POST!" bits at the bottom. */
{
	text-align: center;
}

.menuitem /* Actually a group of menu items, in a little green box. */
{
	background-color: #F0FFF0;
	border: solid 3px #000000;
	width: 150px;
	font: 75% calibri,verdana,sans-serif;
	line-height: 150%;
	margin-bottom: 50px;
	padding-bottom: 3px;
}

.menuitem h3 /* The heading for a little green box */
{
	background-color: #E0EEE0;
	color: #000000;
	font-size: 130%;
	font-weight: bolder;
	font-variant: small-caps;
	text-align: center;
	border-bottom: solid 1px #000000;
	letter-spacing: 5px;
	margin: 0;
}

.menuitem ul,ul.MENU /* A single item inside the little green menu box */
{
	list-style-image:url(images/menuitem.gif);
	padding:0;
	margin:0;
	margin-left:18px;
}

.menuitem p /* Text inside these boxes should be squashed in tight! */
{
	margin: 0;
}

.newsitem /* Newsitems contain headlines too. */
{
	position: relative; /* Required otherwise the category icon disappears at the top */
	top: -1px; /* Blend in to the top of the main pane's border */
	margin: 0px 20px 20px 20px; /* Leave some breathing room before the main text onslaught */
	padding: 0;
	text-indent: 0px;
}

.newsheadline /* SHOUTY SHOUTY HEADLINE */
{
	border-top: solid 1px #5E5E5E;
	border-bottom: solid 1px #5E5E5E;
	background-color: #C0C0FF;
	margin: 0px 0px 12px 0px;
	padding: 2px 0px 1px 20px;
}

.category /* Or categorIES plural, probably. Hopefully. We'll see! */
{
	float: right;
	margin-top: -10px;
	z-index: 5;
	position: relative;
	border: 0;
}

#main h1 /* BIG SHOUTY HEADLINES within the text itself */
{
	color:#880000;
	letter-spacing: 10px;
	font: 180% calibri,verdana,sans-serif;
	font-variant: small-caps;
	font-weight: bolder;
	text-align:center;
	margin:0;
}
	
.newsheadline h2 /* The headline of each story. Nearly, but not quite, as important as the title of the site ITSELF. */
{
	color: #000000;
	font: 115% calibri,verdana,sans-serif;
	font-weight: bold;
	text-align: left;
	margin-top: 1px;
	margin-bottom: 0px;
	line-height: 80%; /* Needs more breathing room, the real solution is to have BIGGER CATEGORY ICONS! */
}

.newsheadline a, .newsheadline a:visited
{
	text-decoration: none;
	color:#000000;
}

.newsbyline a:hover, .newsbyline a:active, .newsbyline a:visited
{
	color:#5E5E5E;
}

.newsbyline a /* News byline links? Different behaviour. */
{
	color:#AA0000;
}
.newsbyline /* Byline? Byeline? Who cares? It's the bit with the date and number of comments. */
{
	font: 80% calibri,verdana,sans-serif;
	color: #5E5E5E;
	margin-top: 2px;
	margin-bottom: 0px;
	text-align: left;
}

/* Comments */

.commentheadline /* Comment headlines act much like news headlines */
{
	border-bottom: solid 1px #5E5E5E;
	background-color: #E0EEE0;
	padding: 5px 0px 5px 20px;
}

.commentheadline h4 /* Haha, what the user says is trivially unimportant! Just H4! */
{
	color:#000000;
	font: 115% calibri,verdana,sans-serif;
	font-weight: bold;
	text-align: left;
	margin-top: 0px;
	margin-bottom: 0px;
}

.commentitem /* Yeah, sickly green in your face! */
{
	position: relative;
	background-color: #f0fff0;
	margin: 0px 20px 20px 20px;
	padding: 0px 0px 0px 0px;
	border: solid 1px #5E5E5E;
	text-indent: 0px;
	font: 85% calibri,verdana,sans-serif;
}

/* What forms should look like */
.formy
{
	font: 100% calibri,verdana,sans-serif;
	border: solid 1px #5E5E5E;
}

h2 /* Subheadings... */
{
	color:#880000;
	font: 120% calibri,verdana,sans-serif;
	font-weight: bold;
	text-align: left;
}

/* Subheading of subheadings */
h3
{
	font: 110% calibri,verdana,sans-serif;
	font-weight: bolder;
	margin-top:0;
}

.story
{
	margin-left: 20px;
	margin-right: 20px;
}

.screenshot /* Float screenos off the right of the main content pane */
{
	float: right;
	border: solid 1px #000000;
	padding: 0;
	margin: 20px -70px 20px 20px;
}

#main hr
{
	color: #5E5E5E;
	height: 1px;
	width: 100%;
}

/* The jobbies Wordpress requires in order to display image captions. */

.aligncenter, div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.alignleft {
	float: left;
}
.alignright {
	float: right;
}
.wp-caption {
	background-color: #f3f3f3;
	border: 1px solid #ddd;
	-khtml-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px; /* optional rounded corners for browsers that support it */
	margin: 10px;
	padding-top: 4px;
	text-align: center;
}
.wp-caption img {
	border: 0 none;
	margin: 0;
	padding: 0;
}
.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	margin: 0;
	padding: 0 4px 5px;
}