/*   

CSS by Sam Hulse
http://samhulse.co.uk

WoogieNoogie.com layout
Main CSS Styles

*/

* { border:0; margin:0; padding:0; } /* clear browser defaults */

html { font-size: 100%; } /* set font sizes */
body { font-size: 62.5%; } /* so 1em = 10px */

body {
 background: #282824 url("../img/body_bg.jpg") repeat-x;
 margin: 0 50px;
 min-width: 700px;
}

/* lay some basic font sizes and styles down */
h1, h2, h3, p, li { font: 1em/1.5em Arial, Helvetica, sans-serif; }
p { color: #282828; }
h1, h2, h3 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #fffffc; }
h1 { font-size: 2.0em; font-weight: normal; color: #fffffc; }
h2 { font-size: 1.6em; font-weight: bold; color: #000; }
h3 { font-size: 1.4em; color: #000; }

/* lets give this layout a clean horizontal resize but a fixed navigation */
#centrehack-outer { padding-left: 265px; }
#centrehack-inner { width: 100%; }
#centrehack-wrap {
float: left;
width: 100%;
margin-left: -265px;
}
/* yes it's a little messy and has multiple containers, but we need to hack the div into place */

#header {
 background: url("../img/header.jpg");
 height: 100px;
 width: 355px;
}

#ads {
	position: absolute;
	top: 5px;
	right: 50px;
}

#header a { display: block; height: 80px; width: 355px; }

#content {
 width: 100%;
 float: right;
 margin-right: -265px; /*** Same length as .outer padding-left but with negative value ***/
 position: relative; /*** IE needs this  ***/
}

/* main content box styles (theres a lot of background images to get all the rounding and such right :( */
.content_box { background: #fff url("../img/contentbox_bg_left.jpg") repeat-y; }
.content_header { background: url("../img/content_header_bg.jpg") repeat-x; height: 40px; }
.content_header_title { background: url("../img/content_header_bg_title.jpg") no-repeat; height: 40px; float: left; padding: 0 0 0 10px; }
.content_footer { background: url("../img/content_footer_bg.jpg") repeat-x; height: 40px; margin-bottom: 2px; }
.content_author { background: url("../img/content_footer_author_bg.jpg") no-repeat; height: 30px; float: left; width: 275px; padding: 10px 0 0 10px; }
.content_comments { background: url("../img/content_footer_comments_bg.jpg") no-repeat; width: 138px; height: 30px; float: right; padding: 10px 10px 0 0; text-align: right; }
.content_comments2 { width: 138px; height: 30px; float: right; padding: 10px 10px 0 0; text-align: right; }
.content_author p, .content_comments p { color: #fffffc; }
.content_box_cont { background: url("../img/contentbox_bg_right.jpg") repeat-y right; padding: 2px 10px; }

.content_box_cont p { padding: 0 0 10px 0; }
.content_box_cont h1 { padding: 0 0 20px 0; color: #000; font-size: 1.4em; }
.content_box_cont h2 { padding: 0 0 20px 0; color: #000; font-size: 1.3em; }
.content_box_cont h3 { padding: 0 0 20px 0; color: #000; font-size: 1.2em; }

a, a:link { text-decoration: underline; color: #36c3e0 ; }
a:visited { text-decoration: none; color: #1c98b3; }
a, a:hover { text-decoration: none; color: #1c98b3; }

.content_date {
 background: url("../img/content_header_bg_date.jpg") no-repeat;
 width: 30px;
 padding: 0 2px 0 198px;
 height: 40px;
 float: right;
}
.content_date p { font-size: 1.4em; color: #282828; font-weight: bold; text-align: center; }
.content_date p + p { font-size: 0.9em; text-transform: uppercase; margin-top: -6px; font-weight: normal; }

/* the fixed width column goes here */
#column {
 width: 245px;
 float: left;
 position: relative;
}

.col_header_navigation { background: url("../img/col_header_navigation.jpg"); height: 33px; }
.col_header_search { background: url("../img/col_header_search.jpg"); height: 33px; }
.col_header_affiliates { background: url("../img/col_header_affiliates.jpg"); height: 33px; }

#naviation li { list-style: none; height: 33px; width: 245px; }

.nav_home a { display: block; background: url("../img/nav_links.jpg") 0px 0px; height: 33px; width: 245px; }
.nav_lotw a { display: block; background: url("../img/nav_links.jpg") 0px 33px; height: 33px; width: 245px; }
.nav_chat a { display: block; background: url("../img/nav_links.jpg") 0px 66px; height: 33px; width: 245px; }
.nav_forum a { display: block; background: url("../img/nav_links.jpg") 0px 99px; height: 33px; width: 245px; }
.nav_entertainment a { display: block; background: url("../img/nav_links.jpg") 0px 132px; height: 33px; width: 245px; }
.nav_home a:hover { display: block; background: url("../img/nav_links.jpg") 245px 0px; height: 33px; width: 245px; }
.nav_lotw a:hover { display: block; background: url("../img/nav_links.jpg") 245px 33px; height: 33px; width: 245px; }
.nav_chat a:hover { display: block; background: url("../img/nav_links.jpg") 245px 66px; height: 33px; width: 245px; }
.nav_forum a:hover { display: block; background: url("../img/nav_links.jpg") 245px 99px; height: 33px; width: 245px; }
.nav_entertainment a:hover { display: block; background: url("../img/nav_links.jpg") 245px 132px; height: 33px; width: 245px; }

#search { 
 background: url("../img/search_bg.jpg");
 height: 190px;
 padding: 0 5px 0 5px;
 text-align: center;
}

#search input[type="text"] { /* if our search bar text box lets give it some nice styling */
 padding: 4px 0 0 7px;
 width: 228px;
 height: 26px;
 color: #999;
 background: url("../img/search_bar.jpg");
 font-size: 1.6em;
}

#search input[type="text"]:focus {  /* and styling for when it's clicked and active ready to type */
 background: url("../img/search_bar.jpg") 235px 0px;
 color: #36c3e0;
}

#search input[type="submit"] {  /* and for our submit button */
 background: url("../img/search_btn.jpg");
 width: 75px;
 height: 20px;
 margin-top: 2px;
 cursor: pointer;
}

.webcam {
background: url("../img/affiliates_bg.jpg");
list-style: none;
height: 159px;
width: 245px;
padding-top: 0;
padding-bottom: 0;
padding-left: 5px;
padding-right: 1px;
background-repeat: no-repeat;
}

#affiliates {
 background: url("../img/affiliates_bg.jpg");
 list-style: none;
 height: 139px;
 padding: 10px;
}

#affiliates li {
 width: 90px;
 height: 33px;
 display: block;
 float: left;
 padding: 1px 11px;
}

#affiliates a img { border: 1px solid #e6e9e4; }
#affiliates a:hover img { border: 1px solid #36c3e0; }

#footer {
 margin-top: 10px;
 height: 65px;
 background: url("../img/footer_bg.jpg") repeat-x;
}

#footer p { color: #949492; }
#footer a, #footer a:link { color: #949492; }
#footer a:visited { color: #949492; }
#footer a:hover { color: #949492; }

#footer_copyinfo {
 background: url("../img/footer_bg_left.jpg") no-repeat;
 height: 35px;
 padding: 30px 0 0 10px;
 width: 250px;
 float: left;
}

#footer_navigation {
 background: url("../img/footer_bg_right.jpg") no-repeat right;
 float: right;
 width: 300px;
 height: 35px;
 padding: 30px 0 0 0;
}

#footer_navigation li {
 list-style: none;
 display: inline;
 padding: 0 10px 0 0;
}

#header, #naviation, .col_header_navigation, .col_header_search, .col_header_affiliates { text-indent: -9999px; }

.clear { clear: both; }