/*
 
Stuff and Nonsense Ltd.
The Cow Shed Studio,
Gwaenysgor,
Flintshire, North Wales
LL18 6EP, UK
+44 1745 851848
http://stuffandnonsense.co.uk
http://forabeautifulweb.com
http://transcendingcss.com
http://twitter.com/malarkey
 
CHANGINGMAN.CSS 
 
*/

/* Reset */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
margin : 0; padding : 0; border : 0; outline : 0; font-size : 100%; vertical-align : baseline; background : transparent; }
body { line-height : 1.5; }
table { border-collapse : separate; border-spacing : 0; }
caption, th, td { text-align : left; font-weight : normal; }
table, td, th { vertical-align : middle; }
blockquote:before, blockquote:after, q:before, q:after { content : ""; }
blockquote, q { quotes : "" ""; }
a img {border : none; }
abbr[title], dfn[title] {
border-bottom : 1px dotted rgb(0,0,0);
cursor : help; }
 
article, aside, dialog, figure, footer, header, hgroup, nav, section {
display : block; }

/* Main styles */

html { 
background : rgb(255,237,49) url(../img/html.jpg) repeat-x 0 0; }

body {
padding-top : 3em;
background : transparent url(../img/body.png) repeat-x 0 0;
font : bold 12px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
color : rgb(0,0,0); 
text-shadow : 0 1px 0 rgb(255,237,49); }

h1, h2, h3, h4, h5, h6 {
margin-right : 20px;
margin-left : 20px;
font-weight : bold; 
text-transform : uppercase; }

h1, h2 { 
margin-bottom : .5em;
font-size : 2em; 
letter-spacing : -1px; }

h1#logo {
width : 200px;
height : 150px;
margin : 0;
background : transparent url(../img/logo.png) no-repeat 0 0;
text-indent : -9999px; }

h1#logo a {
display : block;
width : 200px;
height : 130px; }
 
blockquote {
font-style : italic; }

p, 
ul {
margin : 0 20px 1.5em; }

a, a:visited {
outline : none;
color : rgb(114,16,19);
text-decoration : none; }
 
a:hover { 
color : rgb(152,22,25); 
text-decoration : none; }
 
a:active, a:focus { 
position : relative;
top : 1px;
color : rgb(0,0,0); 
text-decoration : none; }

/* Content wrapper */
#content {
position : relative;
width : 96%;
margin : 0 2%; 
padding-bottom : 80px;
background : transparent url(../img/content.png) repeat-x 0 100%; }

#content:after { 
content : "\0020"; 
display : block; 
height : 0; 
clear : both; 
visibility : hidden; 
overflow : hidden; }

/* The left column */
#content-main { 
float : left;
width : 34%; 
padding : 60px 200px 0 0; }

#content-main div { 
margin : 0 20px 1.5em;
padding : 20px; 
background-color : rgb(0,0,0); 
-moz-border-radius : 20px;
-webkit-border-radius : 20px;
border-radius : 20px; 
color : rgb(255,255,255); 
text-shadow : 0 1px 0 rgb(0,0,0); }

#content-main div p {
margin : 0; }

/* The right column */
#content-sub { 
float : left;
width : 34%; 
margin : 0 0 0 -200px; 
padding : 60px 0 0 200px; }

#content-sub a.sn {
display : block;
position : absolute;
right : 20px;
bottom : -20px;
width : 105px;
height : 120px;
background : transparent url(../img/sn.png) no-repeat 0 0;
text-indent : -9999px; }

/* The center column */
.nav { 
position : fixed; 
top : 40px; 
left : 34.6%; 
width : 200px; }

.nav div {
border-right : 4px solid rgb(0,0,0); 
border-left : 4px solid rgb(0,0,0); }

.nav p,
.nav ul {
text-align : center; 
text-transform : uppercase; }

.nav ul { 
list-style-type : none; 
padding-bottom : 1.5em; }

.nav li {
margin-bottom : .75em; 
padding-bottom : .75em; 
border-bottom : 2px solid rgb(0,0,0); 
line-height : 1.2; }
 
.nav li:last-child { 
margin-bottom : 0; 
padding-bottom : 0; 
border-bottom-width : 0; }

/* The footer */
.footer {
margin : 0 2%;
padding : 3em 100px;
background-color : rgb(255,237,49); 
text-align : center; }