/*
Creator: Ben "Cerbera" Millard
Testing: http://projectcerbera.com/!dev/gtaf/archive/
Website: http://www.gtaforums.com/archives.php
History: 2006-03-13 -> 2007-02-20

Built as a GTA Forums Archive test.
*/


/* Stylesheet Sections:
Layout Containers
Development Header (won't be in final builds)
Default Styles
- Hyperlinks
- Data Tables
Header
Wrapper
Content
Navigation
Footer
*/


/* Layout Containers */
#header {
 background: #182741;
}
#wrapper {
 padding: 0 1.5% 0 0; /* Small gap around outside of page contents. */
 background: #333;
}
#header-dev {
 padding: 0.5em; /* Give the container some internal spacing. */
}
#content {
 float: right;
 width: 82%;
 padding-bottom: 1em; /* Keep one line away from footer. */
}
#navigation {
 width: 15%;
 float: left;
 margin-bottom: 1em; /* Keep one line away from footer. */
 background: #182741;
}
#footer {
 clear: both; /* Ensure footer drops down below floated columns. */
}


/* Development Header */
#header-dev {
 color: #333;
 background: #eee;
 border-bottom: 3px solid #999;
}
#header-dev p {
 display: inline; /* Allow list to rise up beside paragraph, like two words alongside each other. */
 margin: 0;
 padding: 0;
}
#header-dev ul {
 display: inline; /* Allow list to rise up beside paragraph, like two words alongside each other. */
 margin: 0;
 padding: 0; /* Some browsers use "padding" while some use "margin" for indented elements.  Make sure you zero one and set the other. */
}
#header-dev li {
 display: inline; /* Make the list structure behave like a sentence of words. */
 margin: 0;
 padding: 0 0.3em 0 0.6em; /* The spacing between list item and list marker has to be undone with asymmetrical padding. */
 border-left: 1px solid #000;
}
#header-dev li.first { /* Support for the ":first-child" pseudo-element selector is patchy, so we must use a "class". */
 padding: 0 0.3em 0 0.3em; /* Reduce left spacing so it looks like a natural space. */
 border: 0; /* Remove the seperator bar. */
}
#header-dev a:link {
 color: #222;
 text-decoration: underline;
}
#header-dev a:visited {
 color: #666;
 text-decoration: underline;
}
#header-dev a:hover, #header-dev a:active, #header-dev a:focus {
 color: #000;
 text-decoration: none;
}


/* Default Styles */
html, body {
 margin: 0;
 padding: 0;
 font: 100%/1.2 Verdana, Tahoma, sans-serif; /* Leave base text size at 100% to prevent IE rescaling issues.  The "1.2" refers is the line spacing multiplier, so it doesn't take any units.  Font family list then follows. */
}
body {
 color: #fff;
 font-size: 0.75em; /* Adjust base text size here.  Don't go below 0.8em as this already a bit too small. 0.85em to 0.9em are more readable. */
 background: #333; /* Background image not used to save resources. */
}
h1, h2, h3, h4, h5, h6 {
 font-family: "Trebuchet MS", "Times New Roman", serif; /* Make headings stand out a bit. */
}
h1, h2 {
 margin: 0.5em 0 0 0;
 font-size: 2em;
}
h3 {
 margin: 0.75em 0 0 0;
 font-size: 1.5em;
}
p {
 margin: 0 0 1em 0; /* One line of spacing below, none above. */
}

/* - Hyperlinks */
a {
 font-weight: bold;
 text-decoration: underline;
}
a:link {
 color: #eee;
}
a:visited {
 color: #aaa;
}
a:hover, a:active, a:focus {
 color: #fff;
}

/* - Data Tables */
table {
 font: 1em/1.2 Verdana, Tahoma, sans-serif; /* Fix some browsers (not IE6, for once) failing to inherit font styling into tables. */
 border: 3px solid #358;
}
th, td {
 vertical-align: top;
 border: 0.05em solid #000; /* Data and header cells share border style. */
}
td {
 padding: 0.2em 0.3em;
 background: #182741;
}
th {
 padding: 0.4em 0.2em; /* More vertical padding. */
 background: #182741 url(th.gif) top left repeat-x;
}
td.c1 {
 background: #1e2f4a;
}
td.c2 {
 text-align: center;
 vertical-align: middle;
}
td.c3 {
 text-align: right; /* Post count is a number, so it should be right-aligned for easy numerical comparisons. */
 vertical-align: middle;
 background: #1e2f4a;
}
td.c4 {
 vertical-align: middle;
}
th.c1 {
 width: 50%;
}
th.c2 {
 width: 10%;
}
th.c3 {
 width: 10%;
}
th.c4 {
 width: 30%;
}


/* Header */
#header .sub {
 border: 3px solid #358;
}
h1 {
 margin: 0;
 padding: 0.2em;
 font-size: 2.0em;
 border: 0.05em solid #000; /* Heading font size is twice that of normal font size, so border is halved to match borders based on normal text width. */
 border-bottom: 0; /* Don't draw a border along the bottom edge. */
}
#tagline {
 margin: 0;
 padding: 0 0.4em 0.4em 0.4em; /* No top padding to avoid it getting too far away from <h1>. */
 border: 1px solid #000;
 border-top: 0; /* Don't draw a border along the bottom edge. */
}
#header img {
 border: 0; /* Prevent hyperlink border being drawn around logo. */
}


/* Content */
#content dl { /* Definition/Description Lists are used for structuring post entries. */
 margin: 0;
 padding: 26px 0 0 0; /* One line of top padding to place the heading picture in. */
 height: 1%; /* Enables IE's "hasLayout" internal flag, making contained elements calculate their widths from this container properly. */
 background: url(th.gif) top left repeat-x; /* Background colour matches <td> elements.  Heading background makes listing look pretty since there are no table headers for it. */
 border: 3px solid #358;
}
#topic dt,
#topic dd.date,
#topic dd.comment {
 padding: 0.5em; /* Half a line of space between border and text. */
}
#topic dt {
 margin: 0;
 background: #182741; /* Alternate colour. */
 border: 1px solid #000;
 border-width: 0.2em 0.1em 0 0.1em; /* Thicker top border, normal right, no border below, normal left. */
}
#topic dd.date {
 top: -2.2em; /* Move content area onto same row as author name. */
 margin: 0 0.2em 0 10%; /* Don't let background overlap <dt> text or right border. */
 position: relative; /* Measure new position relative to normal position. */
 text-align: right; /* Shift text to right end of element. */
}
#topic dd.comment { /* Need a long selector so it can override the "#content dd" one through greater "specificity". */
 margin: -2.2em 0 0 0; /* Pull entire comment box up to fill gap made by moving date. */
 background: #235; /* Cover up weird IE background image bug. */
 border: 1px solid #000;
 border-width: 0 0.1em; /* Hide top and bottom borders for <dd> elements. */
}
img.smilie { /* You could alter how smilie <img> tags are created so that they use class="smilie" instead of the invalid "border" attribute and ineffcient inline "style" attribute. */
 vertical-align: top; /* Smilies are usually placed at the end of paragraphs, so aligning their top edge with the top of the line makes them hang below the last line.  This prevents the last line being pushed away from the penultimate line of the paragraph. :) */
 border: 0;
}
#topic dd.comment table {
 color: #ccc;
	border-spacing: 0; /* cellspacing attribute not in quote HTML */
}
/* Page Listing */
#content .pages {
 border: 3px solid #358;
}
#content .pages .sub {
 padding: 0.2em 0.3em; /* Counter-act aspect ratio of horizontal and vertical padding so the padding looks the same on all sides. */
 background: #1e2f4a; /* Match background of <td> elements. */
 border: 1px solid #000;
}


/* Navigation */
#navigation .sub {
 padding: 1em 0 0.2em 0;
 overflow: hidden;
 font-size: 0.833em; /* 10px */
 border: 3px solid #358;
 border-width: 0 3px 3px 0; /* Use header's bottom border. */
}
#navigation h1, #navigation h2, #navigation ul {
 border-right: 1px solid #000;
}
#navigation ul ul {
 border: 0;
}
/* - Headings */
#navigation h1 {
 left: -100%; /* Move off-screen. */
 width: 1%; /* Make tiny. */
 position: absolute; /* Remove from document flow. */
}
#navigation h2 {
 margin: 0;
 font-size: 1.2em;
 font-weight: bold;
}
#navigation h2 a {
 padding: 0 0.27em;
 text-decoration: none;
}
/* - Lists */
#navigation ul, #navigation li {
 margin: 0;
 padding: 0;
 list-style-type: none;
}
#navigation ul {
 padding: 0 0 1em 0;
}
#navigation ul ul {
 padding: 0;
}
/* - Anchors */
#navigation .current {
 padding: 0.2em 0.3em 0.3em 0.3em;
 font-weight: bold;
 font-style: italic;
 background-color: #358; /* Match outer border of containers. */
}
#navigation ul a {
 display: block;
 height: 1%;
 padding: 0 0.3em;
 font-weight: normal;
 text-decoration: none;
}
/* - Categories */
#navigation ul a {
 background-color: #235;
}
/* - Sub-categories */
#navigation ul ul a {
 padding-left: 1em;
 background-color: #182741;
}
#navigation ul ul .current {
 padding-left: 1em;
}
#navigation a:hover, #navigation a:activate, #navigation a:focus {
 color: #fff;
 text-decoration: underline;
 background: #358;
}


/* Footer */
#footer .sub {
 padding: 0 0.5em 1em 0.5em ;
 font-size: 0.833em;
 text-align: center;
}
#footer p {
 margin: 0;
}