/*  
Theme Name: Mischief!
Theme URI: http://alanbernard.com/
Description: Two Column
Version: 1.1
Author: alanbernard
Author URI: http://alanbernard.com/

Notes: Originally made by Derek Punsalan, Grid Focus. Tweaked and re-themed by alanbernard to suit my personal needs and what not. Get firefox, use the web developer extension, and dig into some code. I recommend checking out my individual sidebars to see the custom styling. This theme has a lot of things that are hard coded in it that does not require much CSS, so do check out the source file as well. If you'd like to research this theme, or you want the source file, then do contact me via the form on my site. I will also release this soon once I have coded my four column theme. Cheers peeps!

Lastly: Best viewed in Firefox in 1024x768 and above, I really am hating IE a lot at this moment, because I can't seem to fix the lopsided-ness that it seems to render in IE only. If you know of a good hack, I am all ears and nose! 
*/

*{margin:0;padding:0;}html,body{background:url(images/skulls.jpg);color:#333;text-align:center;} 
body{font:12px arial,helvetica,verdana,sans-serif;}
h1{font-size:22px;}
h2{font-size:18px;}
h3{font-size:16px;}
h4{font-size:14px;}
a{color:#333;text-decoration:none;}
a:hover{color:#dadada;}
#wrapper{background:#fff;border-top:0px solid #EEE;margin:0px auto;text-align:left;width:965px;} 

/* masthead / footer - navigation and categories. A lot of the code are handcoded into my site, so do check out the source as well. */

#masthead{padding:5px 0;}
#masthead h1 a{text-transform:uppercase;width:400px;float:left;margin:12px 0 0 0;}
#masthead h1 a em{font-style:normal;color:#555;}
#authorBlurb img{float:right;width:42px;height:42px;border:3px solid #EEE;}
#authorIntro a{font-weight:bold;} 
#authorIntro{line-height:1.4em;width:170px;float:right;margin:8px 0 0 0;}
ul.nav{margin-top: 0;list-style:none;background:#1b1d00;}
.nav li{border-right:0px solid #333;float:left;display:block;width:100px;}
.nav li a{font-size:11px;outline:none;color:#fff;text-decoration:none;display:block;padding:5px 0 12px 5px;width:99px;text-transform:uppercase;}
.nav li a span{font-size:11px;color:#777;text-transform:lowercase;}
.nav li a:hover{background:#1b1d00;color:#14fffc!important;width:95px;}
* html .nav li a:hover{background:#1b1d00;width:99px;}
.nav li.skip{border-left:1px solid #DDD;float:right;display:block width:100px;}
.nav li.skip a{width:100px;}
li.top{border-left:1px solid #DDD;float:right;display:block width:100px;}
li.top a{width:100px;}
.nav li.skip a:hover, li.top a:hover { background: transparent;color: #eee !important;}
#archives{background:#333;}
#archives ul{list-style:none;padding:5px 0 3px 0;}
#archives li{float:left;display:block;width:101px;}
#archives li a{font-weight:bold;color:#7F7F7F;width:99px;display:block;padding:2px 0 4px 5px;}
#archives li a:hover{color:#EEE;}

/* main - middle content and columns */
#mid{}#mainCol{background:#FFFFFF; float:left;margin:10px 0 0 10px;width:464px;}

/* style individual sidebars- This I tweaked a lot, so that it would work as a theme divided in two columns. As you can see, I'm not very clever at naming stuff... or just a tad lazy. If you like to look at some code, then let me recommend the excerpts, and each of the columns styling. Navigate my site to understand it, or better yet use firefox and get the web developer extension. Cheers. */

#midCol a{font-weight:bold;}
#midCol{background:#FFFFFF;color:#444;float:left;margin:10px 0 0 16px;width:464px;line-height:1.3em;}
#midCol p{color:#777;}
#searchWrap,
.middle_links{margin-bottom:20px;}
#searchWrap input{vertical-align:middle;}
#searchWrap #s{font-size:1.1em;border:1px solid #BBB;padding:1px 2px;margin-right:3px;width:430px;}
.middle_links h3{margin-bottom:7px;}
#midCol ul{list-style:none;margin:8px 0 4px;}
.middle_links ul li{background:url(images/li.gif) no-repeat 0 3px;color:#7F7F7F;line-height:1.2em;border-top:1px solid #BBB;padding:4px 0 4px 16px;}
#tertCol{background:#FFF;float:left;width:965px;margin:23px 0 0 0;}
#tertCol p{color:#777;}
#fortCol2{background:#FFFFFF;color:#444;float:right;margin:10px 20px 0 0;width:430px;line-height:1.3em;}
#fortCol2 ul{list-style:none;margin:8px 0 4px;}
#fortCol a{font-weight:bold;}
#fortCol{color:#444;float:right;margin:25px 10px 0 0;width:440px;line-height:1.3em;}
#fortCol p{color:#777;}
#exCol a{font-weight:bold;}
#exCol{color:#444;float:right;margin:25px 10px 0 0;width:440px;line-height:1.3em; cursor: default;}
#exCol p{color:#e3e3e3;}
.entry-excerpt{margin-bottom: 10px;letter-spacing: -1px;font-size: 20px;line-height: 36px; background-color: #ffffff; background-image: none; background-repeat: repeat;background-attachment: scroll;background-x-position: 0%;background-y-position: 0%;cursor: default;}
.entry-excerpt p{display: inline;}
#exCol ul{list-style:none;margin:8px 0 4px;}
.exCol ul li{background:url(images/li.gif) no-repeat 0
3px;color:#e3e3e3;line-height:1.3em;border-top:1px solid #BBB;padding:4px 0 4px 16px;}
.entry-excerpt2{margin-bottom: 6px;letter-spacing: -1px;font-size: 16px;line-height: 26px; background-color: #ffffff; background-image: none; background-repeat: repeat;background-attachment: scroll;background-x-position: 0%;background-y-position: 0%;cursor: default;}
#exCol2 a{font-weight:bold;}
#exCol2{color:#444;float:right;margin:25px 10px 0 0;width:440px;line-height:1.3em;}
#exCol2 p{color:#a6a6a6;}
.entry-excerpt2 p{color: #b4c3c3; display: inline;}
#elseWhere{margin:0 0 20px 0;}
#elseWhere h3{margin-bottom:7px;}
ul#imgLinks{list-style:none;margin:7px 0;}
#imgLinks li{color:#7F7F7F;line-height:1.2em;padding:0 0 1px;}
#imgLinks li a img{border:3px solid #EEE;width:208px;height:69px;color:#333;font-weight:bold;}
#imgLinks li a:hover img{border-color:#DDD;}

/* wordpress entries styling - main content column */

.postMeta{background:#f6f7f2;color: #342F2F;font-size:14px;text-align:center;margin-bottom:5px;}
.postMeta span.date{background:#f6f7f2;color:#342F2F;font-style:normal;padding:0 2px 0px 4px;}
.postMeta span.comments{background:#f6f7f2;padding:0px 15px 0px 15px;margin:10px 0 10px 2px;}
.postMeta span.comments a,
.postMeta span.date a{color:#342F2F;}
.post{margin:10px 0 15px 0;}
.post h2{background:#f6f7f2;text-align:center;font-style:italic; line-height:1.5em;margin-bottom:0px; padding: 10px 0 10px 0;}
.post h2 a{width:100%;text-align:center;font-style:italic; display:block;outline:none;color:#342F2F;}
.post h2 a:hover{color: #dadada;}
.entry h3{margin:1em 0;}
.post .entry{line-height:1.4em ;overflow:hidden;}
.post .entry p{margin:0 0 10px 0;}
.post .entry p a{background:url(images/dot.gif) repeat-x bottom left;font-weight:bold;}
.entry blockquote{margin:0 1.3em 0;}
.entry ul{margin:0 1.3em 0;list-style:none;}
.entry li a{color:#333;font-weight:bold;background:url(images/dot.gif) repeat-x bottom left;}
.entry ul li{background:url(images/li.gif) no-repeat 0 1px;padding-left:18px;margin-bottom:7px;}
.entry ol{margin:0 1em 0 3em;}
.entry ol li{margin:0 0 7px 0;}
.entry img,.entry a img{border:0px solid #EEE;}
.entry a:hover img{border-color:#DFDFDF;}
.entry table tr { padding: 15px 0; }
.entry table tr.alt { background: #eee; }

/* style pagination buttons */

#more_reading { color: #7F7F7F; font-size: 11px; text-transform: uppercase; margin-bottom: 25px; text-align: right; }
#more_reading p, #more_reading img { vertical-align: middle; }
#more_reading a img { border: none; margin:0 0 3px 2px; }

/* comments and inputs */

#comments{width:420px;padding:12px 0 0 0;}
#comments h3,
h3#respond{color:#555;margin-bottom:7px;}
ol.commentslist{list-style:none;margin:5px 10px 6px 0;}
.commentslist li{background:#FFF url(images/lgrey_diag.gif) repeat top left;border:1px solid #BBB;margin-bottom:7px;padding:7px 0 0 0;}
.commentslist li a{font-weight:bold;background:url(images/dot.gif) repeat-x bottom left;}
.commentslist li.alt{background:#FFF;}
.commentslist li:hover{border-color:#888;}
.commentslist .comment_text{margin:0 7px;line-height:1.4em;overflow:hidden;}
.comment_text p,
.comment_text ul,
.comment_text ol,
.comment_text blockquote{margin:1em 0;}
.comment_text ul,
.comment_text ol,
.comment_text blockquote{margin:0 1em;}p.author_meta{font-weight:bold;text-transform:uppercase;margin:0 0 0 7px;}
p.post_meta{font-size:11px;text-transform:uppercase;text-align:right;margin:0 7px 0 0;}
.commentslist li.author{background:#333;color:#CCC;}
.commentslist li.author a{color:#DDD;}
.commentslist li.author a:hover{color:#FFF;}
#comments_closed{background:#333;color:#ccc;padding:7px 0;margin-top:12px;line-height: 1.5em;}
p.nocomments{margin:0 12px 0 7px;}
p.nocomments a{color:#ddd;font-weight:bold;text-decoration:underline;}
p.nocomments a:hover{color:#FFF;}
ol.pingslist{margin:1.5em 2em;font-size:12px;}
.pingslist li{color:#7F7F7F;margin:0 0 7px 0;}
.pingslist li a{font-weight:bold;background:url(images/dot.gif) repeat-x bottom left;}
#commentform p{margin:1em 0;}
#commentform p a{font-weight:bold;background:url(images/dot.gif) repeat-x bottom left;}
#author,
#email,
#url,
#comment{font:1.1em arial,helvetica,verdana,sans-serif;border:1px solid #BBB;padding:2px;}
#comment{width:420px;overflow:auto;}
#commentform p small{font-size:10px;color:#7F7F7F;}
.commentslist code{background:transparent;}

/* footer - text string and links. This is where I eventually got lazy, as is evident on the site. */

#footer {background:#fff;width: 464px; margin: 10px 10px 10px 10px;}
#myfoot {background:#f6f6f6; padding: 10px 10px 10px 10px;}
#footer p {font-size:11px;padding: 0px; margin:0; font-style:italic; line-height:1.5em}
#footer p a{text-decoration:none;color:#7F7F7F;font-weight:bold;color:#333;}
#footer p a:hover{text-decoration:underline;color:#81BF2F;font-weight:bold;}
#footer p img,.entry a img{border:0px}
#footer p img,.entry a:hover img{border:0px}

/* float rules- All the floatish stuff. Also has some wrap around stuff, which I had added in, based again on Derek Punsalan's hard work and research. All credit goes to him here, I just did the php part in my code. */

.floatleft{float:left;margin:3px 7px 0 0;}
.floatright{float:right;margin:3px 0 0 7px;}
.right{float:right;}
.left{float:left;}
.fix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.fix{display:inline-block;} 
* html .fix{height:1%;}
.fix{display:block;}
.promoWrapper { margin: 0 0 20px 0; }
.promoWrapper a img { border: 3px solid #eee; margin: 0 8px;}
.promoWrapper a:hover img { border: 3px solid #ddd; }
.clear{clear:both;}
.fix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.fix{display:inline-block;} 
* html .fix{height:1%;}
.fix{display:block;}
.highlight { background: #eee; font-size: 1.2em; margin: 7px 0 20px 0; padding: 7px 10px; }
.highlight .left { width: 710px; text-align: left; }
.categories { margin: 20px 0 40px; text-align: left; }
.categories ul { color: #999; list-style: none; font-size: 1.2em; line-height: 1.6em; margin: 0 0 30px 10px; }
.categories li { border-bottom: 1px solid #ddd; float: left; text-align: right; display: block; width: 150px; margin-right: 10px; }
.categories li a { float: left; }
.leftOverview { float: left; width: 560px; }
.section { margin: 0 0 10px 0; text-align: left; }
.section .post { width: 250px; float: left; margin-right: 30px; }
.section .entry { font-size: 1.2em; line-height: 1.5em; color: #777; }
.rightOverview { float: right; width: 350px; }