/***
Colors:
-------
#eeeeec - Aluminium 1      Text hover top nav. / Active tab top nav.
#d3d7cf - Aluminium 2      Container backround / Unactive text top nav.
#babdb6 - Aluminium 3      Background 'news box'
#888a85 - Aluminium 4      Outer border
#555753 - Aluminium 5      Body background / Top nav. base
#2e3436 - Aluminium 6      Header / Footer / Main text / Active text (tab) top nav. / Heading underline
#204a87 - Skye Blue 3      Links
#8f5902 - Chocolate 3      Links hover

Notes:
------
This code needs cleaning up, it's probably bloated.
Margins and padding needs to be defined everywhere (http://www.search-this.com/2007/03/12/no-margin-for-error/)
***/

/* ===== GENERAL STYLING ===== */

/* Reset all paddings and margins */
* {padding: 0; margin: 0;}

/*** BODY ****/
body {
   padding: 0;
   margin: 0;
   background-color: #555753;
   font-family: sans-serif;
   font-size: 16px;
}

/*** CONTAINER ***/
#container {
   width: 934px;
   margin: 0 auto 0 auto;
   padding: 0;
   background-color: #d3d7cf;
   color: #2e3436;
   border-top: 8px solid #888a85;
   border-right: 16px solid #888a85;
   border-bottom: 8px solid #888a85;
   border-left: 16px solid #888a85;
}

#container_inner {
   margin: 32px 48px 0 48px;
}

/*** HEADERS ***/
h1,h2,h3,h4,h5,h6 {
   color: #2e3436;
   padding: 4px 4px 2px 4px;
   margin: 0 0 0 0;
}
.headline a:link {
   color: #2e3436;
   font-weight: bold;
   text-decoration: none;
}

.headline a:visited {
   color: #2e3436;
   font-weight: bold;
   text-decoration: none;
}
.headline a:hover {
   color: #8f5902;
   font-weight: bold;
   text-decoration: underline;
}
/* underlined headers */
.underline {
   border-bottom: 1px solid #2e3436;
   padding: 1em 4px 0 4px;
}
.newsline {
   border-bottom: 1px solid #888a85;
   margin: 0 0 12px 0;
}

/* support */
.support {
   text-align: center;
   margin: 32px 0 0 0;
}

/*** PARAGRAPHS ***/
p {
   font-weight: normal;
   font-size: 14px;
   padding: 0 4px 4px 4px;
   margin: 0 0 0 0;
}

p2 {
   font-weight: bold;
   font-size: 30px;
   padding: 0 4px 4px 4px;
   margin: 0 0 0 0;
}

/*** UNORDERED LIST ***/
ul {
   margin: 0;
   padding: 4px 0 4px 2em;
   font-size: 14px;
}

/* mission statement */
.mission {
/*   font-style: italic;*/
   font-weight: bold;
   font-size: 14px;
/*   padding: 1em 0 0 0;*/
   margin: 6px 0 32px 0;
}
.mission_link {
   font-size: 14px;
   font-style: normal;
   font-weight: bold;
}

/* link to top*/
.top {
   font-weight: normal;
   font-size: 14px;
   text-align: right;
   padding: 0 0 0 0
}


/* date styling */
.date {
   font-weight: normal;
   font-size: 11px;
   text-align: right;
   padding: 0 4px 0 4px;
}
.newsbox_date {
   font-weight: normal;
   font-size: 11px;
   text-align: right;
   padding: 4px 10px 0 4px;
}
/*** HYPERLINKS ***/
a:link {
   color: #204a87;
   font-weight: normal;
   text-decoration: none;
}

a:visited {
   color: #204a87;
   font-weight: normal;
   text-decoration: none;
}

a:hover {
   color: #8f5902;
   font-weight: normal;
   text-decoration: underline;
}

a:active {
   color: #8f5902;
   font-weight: normal;
   text-decoration: underline;
}

/*** FLOATS ***/
img.float_left {
   float:left;
   padding: 0 8px 0 0;
   margin: 0;
}

.center {
   text-align:center;
}
.float_left {
   float: left;
}
.float_right {
   float:right;
}
.clear {
   clear: both;
}

.bold {
   font-weight: bold;
}

.noborder {
   border: 0;
}

/* ===== HEADER & LOGO ===== */

/*** LOGO ***/
#logo {
   padding: 0px 0 4px 0;
   margin: 0 0 0 0;
   text-align: center;
   background-color: #2e3436;
   color: #fff;
}

/* rounded corners top */
.rounded_top:before {
   background: #2e3436 url(img/top-right.png) scroll no-repeat top right;
   margin-bottom: -1px;
   height: 16px;
   display: block;
   border: none;
   content: url(img/top-left.png);
   padding: 0;
   line-height: 0.1;
   font-size: 1px;
}

/* rounded corners bottom */
.rounded_bottom:after {
   display: block;
   line-height: 0.1;
   font-size: 1px;
   content: url(img/bottom-left.png);
   margin: 0 0 0 0;
   height: 15px;
   background: #2e3436 url(img/bottom-right.png) scroll no-repeat bottom right ;
   padding: 0;
}

/* ===== NAVIGATION ===== */

/*** NAVIGATION TOP ***/
#navcontainer ul {
   text-align: center;
   font-size: 16px;
   padding: 4px 0 4px 0;
   margin: 0 0 48px 0;
   background-color: #555753;
   color: #d3d7cf;
   width: 100%;
   border-top: 3px solid #888a85;
   border-bottom: 1px solid #2e3436;
}

#navcontainer ul li {
   display: inline;
   padding: 5px 0 5px 0;
   margin: 0;
}

#navcontainer ul li a {
   padding: 4px 8px 4px 8px;
   margin: 0;
   color: #d3d7cf;
   text-decoration: none;
   font-weight: bold;
   border-right: 1px solid #555753;
   border-left: 1px solid #555753;
}

#navcontainer ul li a:hover {
   color: #eeeeec;
   text-decoration: underline;
}

#navcontainer ul li a:hover#current {
   color: #2e3436;
   text-decoration: none;
}

#active a:link, #active a:visited, #active a:hover {
   background-color: #d3d7cf;
   color: #2e3436;
   text-decoration: none;
   border-top: 1px solid #2e3436;
   border-right: 1px solid #2e3436;
   border-bottom: 1px solid #d3d7cf;
   border-left: 1px solid #2e3436;
}

#navlist li:before {
   content: "| ";
}
#navlist li:first-child:before {
   content: "";
}

/* ====== PAGE FOOTER ===== */

/*** NAVIGATION BOTTOM ***/
#navcontainer_footer ul {
   text-align: center;
   font-size: 14px;
   padding: 2px 0 2px 0;
   margin: 0 0 16px 0;
/*   background-color: #555753; */
   color: #d3d7cf;
   width: 100%;
/*   border-top: 2px solid #2e3436; */
/*   border-bottom: 2px solid #2e3436; */
}

#navcontainer_footer ul li {
   display: inline;
   padding: 5px 0 5px 0;
   margin: 0;
}

#navcontainer_footer ul li a {
   padding: 4px 8px 4px 8px;
   margin: 0;
   color: #d3d7cf;
   text-decoration: none;
   font-weight: bold;
/*   border-right: 1px solid #555753; */
/*   border-left: 1px solid #555753; */
}

#navcontainer_footer ul li a:hover {
   color: #eeeeec;
   text-decoration: underline;
}

#navlist_footer li:before {
   content: "| ";
}
#navlist_footer li:first-child:before {
   content: "";
}

/*** FOOTER ***/
#footer_wrap {
   border-top: 3px solid #888a85;
   background-color: #2e3436;
   padding: 16px 8px 8px 8px;
   margin: 16px 0 0 0;
}
.footer_link {
   font-size: 14px;
   font-weight: normal;
   text-align: center;
   color: #eeeeec;
   padding: 2px 2px 2px 2px;
   margin: 0;
}
.footer {
   font-size: 11px;
   font-weight: normal;
   text-align: center;
   color: #eeeeec;
   padding: 2px 2px 2px 2px;
   margin: 0;
}

.footer a:link, .footer a:visited {
   color: #eeeeec;
}

.footer a:hover, .footer a:active {
   text-decoration: underline;
}

.legal {
   font-size: 9px;
   font-weight: normal;
   text-align: center;
}

/* ===== STYLING MAIN PAGE (index.html) ===== */

/*** SCREEN SHOTS ***/

/* #screenshots {
   background-color: #babdb6;
   padding: 2px 0 2px 0;
   margin: 0px 0 32px 0;
   border: 1px solid #888a85;
} */
#shotcontainer {
   text-align: center;
   padding: 0 0 0 0;
   margin: 12px 0 32px 0;
/*   background-color: #555753; */
}

.shot {
   margin: 0 2px 0 2px;
}

.shot img{
   border: 2px solid #888a85;
   margin-top: 8px;
   margin-right: 6px;
   margin-bottom: 8px;
   margin-left: 8px;
}

.shot:hover img{
   border: 2px solid #888a85;
   margin-top: 0px;
   margin-right: 8px;
   margin-bottom: 16px;
   margin-left: 6px;
}

/*** FEATURES ***/
#featurescontainer ul{
   margin: 0 0 24px 0;
   font-size: 14px;
}

/*** NEWS BOX ***/
#newsbox_container {
   background-color: #babdb6;
/*   font-size: 12px; */
   padding: 2px 6px 12px 6px;
   margin: 12px 0 32px 0;
   border: 1px solid #888a85;
}

/*** SUPPORT WOLVIX ***/
.supportcontainer {
   text-align: center;
   margin: 12px 0 32px 0;
}

.support {
   margin: 0 6px 0 6px;
}

.support img, .support:hover img {
   border: 0;
}


/*** NEWS PAGE ***/
.news_nav {
   padding: 4px 0 4px 0;
   margin: 32px 0 -1.6em 0;
   background: #babdb6;
   height: 18px;
}
.news_page_num {
   text-align:center;
   margin: 0 0 24px 0;
   padding: 4px 0 2px 0;
/*   border: 1px solid #000;*/
}
.news_index {
   padding: 4px 0 4px 0;
   margin: 32px 0 0 0;
   background: #babdb6;
   height: 18px;
}
.news_arrow {
   padding: 0 4px 0 4px;
}

/* ===== DOCUMENT END ===== */

/*** EXPERIMENTS ***/
.supportx {
   margin: 0 8px 0 8px;
}
.forums_roll {
  display: block;
  width: 192px;
  height: 142px;
  background: url("img/forums_roll.png") no-repeat 0 0;
}
.forums_roll:hover {
   background-position: 0 -142px;
}
.irc_roll {
  display: block;
  width: 192px;
  height: 142px;
  background: url("img/irc_roll.png") no-repeat 0 0;
}
.irc_roll:hover {
   background-position: 0 -142px;
}
.news_roll {
  display: block;
  width: 192px;
  height: 142px;
  background: url("img/newsletter_roll.png") no-repeat 0 0;
}
.news_roll:hover {
   background-position: 0 -142px;
}
.wiki_roll {
  display: block;
  width: 192px;
  height: 142px;
  background: url("img/wiki_roll.png") no-repeat 0 0;
}
.wiki_roll:hover {
   background-position: 0 -142px;
}
.love_roll {
  display: block;
  width: 48px;
  height: 48px;
  background: url("img/redlove.png") no-repeat 0 0;
}
.love_roll:hover {
   background-position: 0 -48px;
}

/*** Heads up ***/
#heads_up {
   color: #eeeeec;
   background: #2e3436;
   border: 0px solid #888a85;
   margin: 12px 0 32px 0;
   padding: 3px 6px 3px 6px;
}
.heads_up_text {
   font-size: 12px;
   padding: 0;
   margin: 0;
}

.sponsor_h {
   text-align: center;
   margin-top: 192px;
}

.sponsor {
   text-align: center;
   margin: 12px 0 32px0;
}
.sponsor img {
   border: 0;
}

/*** Info boxes ***/

/*#info_container {
   height: 150px;
}*/

/*h4.h_info_left {
   color: #2e3436;
   font-size: 14px;
  }
#info_left {
   float: left;
   width: 266px;
   height: 100px;
   margin: 12px 11px 32px 0;
   background: #babdb6;
   border: 1px solid #888a85;
   color: #2e3436;
}
h4.h_info_mid {
   color: #112021;
   font-size: 14px;
}
#info_mid {
   float: left;
   width: 266px;
   height: 100px;
   margin: 12px 11px 32px 0;
   background: #888a85;
   border: 1px solid #555753;
   color: #112021;
}
h4.h_info_right {
   color: #eeeeec;
   font-size: 16px;
}
#info_right {
   float: right;
   width: 266px;
   height: 100px;
   margin: 12px 11px 32px 0;
   background: #555753;
   border: 1px solid #2e3436;
   color: #eeeeec;
}
*/

/*
#features_left {
   float: left;
   width: 200px;
   height: 150px;
   margin: 0 10px 0 0;
   background: #eeeeec;
   border: 1px solid #2e3436;
}
#features_left_mid {
   float: left;
   width: 200px;
   height: 150px;
   background: #eeeeec;
   border: 1px solid #2e3436;
}
#features_right_mid {
   float: left;
   width: 200px;
   height: 150px;
   margin: 0 0 0 10px;
   background: #eeeeec;
   border: 1px solid #2e3436;
}
#features_right {
   float: right;
   width: 200px;
   height: 150px;
   background: #eeeeec;
   border: 1px solid #2e3436;
}
*/