/*
Theme Name: HackerChick
Theme URI: http://TheHackerChickBlog.com/
Description: The theme for The Hacker Chick Blog
Version: 1.0
Author: Abby Fichtner
Author URI: http://TheHackerChickBlog.com/
Tags: hackerchick
*/
/* BODY/PAGE */
body{
    background-color:#a1b1a1;
    font-family:Arial, Helvetica, sans-serif;
    font-size:10pt;
    color: #666;
    margin: 0px;
    padding: 0px;
    text-align: center;     /* this centers the body's content (the page) */
}
 
p, h1, h2, h3 {
    margin: 0px;
    padding: 0px
}

td{
    font-family:Arial, Helvetica, sans-serif;
    font-size:10pt;
    color: #666;
}

a{ text-decoration:none; }
a:link, a:visited{  color:#969; }
a:hover{ color: #F93; text-decoration:underline; }
a:active{ color: #F93; }

#page
{
    background-color:#e7e0d8;
    width: 1024px;
    margin: 0px auto;
    padding: 0;
    text-align:left;
}

/* HEADER */
#header{
    background: url('./images/header-background.png') no-repeat;
    height: 238px;
    width: 1024px;
    text-align:left;
    margin:0;
    padding:0;
}

#headerimg{
    height:96px;
    width:762px;
    position:absolute;
    margin: 0px;
    padding: 62px 0px 0px 24px; /* top right bottom left */
}

.aboutLink {
    background: url('./images/about.png') bottom;
    width: 206px;
    height: 73px;
    position:absolute;
    padding:0;
    margin: 157px 0px 0px 9px; /* top right bottom left */
}
.aboutLink:hover {  background-position: 0 0; }

#top_links{
    height: 56px;
    width: 270px;
    padding:0;
    float:right;
    margin-top:133px;
    margin-right:-5px;
}

.mouseover-hint{
    visibility:hidden;
    position:absolute;
    padding:0;
    float:right;
}

#mouseover-twitter{
    height: 56px;
    width: 148px;
    margin-top:74px;
    margin-left:787px;
}

#mouseover-facebook{
    height: 76px;
    width: 230px;
    margin-top:53px;
    margin-left:785px;
}

#mouseover-linkedin{
    height: 55px;
    width: 157px;
    margin-top:74px;
    margin-left:827px;
}

#mouseover-rss{
    height: 67px;
    width: 153px;
    margin-top:63px;
    margin-left:866px;
}

.mouseover-caption{
    width: 480px;
    height: 80px;
    float:left;
    visibility:hidden;
    position:absolute;
    padding:0;
    margin: 0;
    margin-top: 45px;
    margin-left:10px;
}

#mouseover-default{
	visibility:visible;
	visibility:show;
}

/* CONTENT */
#content{
    background:url('./images/content-background.png') repeat-y; /* background image allows it to appear that the sidebar overlaps the content by extending content bg's white 7 pixels into sidebar */
    width:1024px;
    min-height:1000px;
    height: auto !important;    /* weird hack for IE */
    height:1000px;
    float: left;
    text-align:left;
    margin:0px;
    padding:0px;
}

/* BLOG CONTENT */
.blogcontent_container{
    width:740px;
    min-height:2150px;
    height: auto !important;    /* weird hack for IE */
    height:2150px;
    padding: 0px;
    margin: 0px; /* top right bottom left */
    text-align: left;
}

.blogcontent{
    padding: 0px 0px 15px 14px; /* top right bottom left */
    text-align: left;
}

#displayingFor{
    text-align:center;
    background-color:#e7e0d8;   /* page background */
    border-color:#4e2a3e;   /* footer background */
    border-style:double;
    font-size:12pt;
    padding: 5px 15px 5px 15px; /* top right bottom left */
    margin:0;
    margin-bottom:10px;
}

.post{
    margin-bottom:40px;
    margin-right:5px;
}

.post p{
    margin: 0px 0px 10px 0px; /* top right bottom left */
}

.posttitle{
    color:#066;
    font-family:"Arial Black", Gadget, sans-serif;
    font-variant:small-caps;
    font-size:18pt;
    font-weight:900;
    line-height:110%;
    margin: 0px 0px 15px 0px; /* top right bottom left */
    padding:0;
}

.posttitle a { color:#066; text-decoration:none;}
.posttitle a:visited { color:#066; text-decoration:none;}
.posttitle a:hover{ color:#969; text-decoration:underline;}
.teaser_header a { color:#066; text-decoration:none;}
.teaser_header a:visited { color:#066; text-decoration:none;}
.teaser_header a:hover{ color:#969; text-decoration:underline; }

.postbody{
    line-height:140%;
}

.post_spacer{
    height:20px;
}

.postmetadata{
    color: #4e2a3e; /* footer background */
    line-height:120%;
    font-size:8pt;
    text-transform: uppercase;
}

#single{
    border-top: thin ridge;
    border-bottom: thin ridge;
}

.readmoretext{
    font-size:16pt;
    font-weight:900;
}

.post_teaser{
    width:48%;
    padding: 0;
    text-align: left;
    margin:0px;
    margin-bottom:20px;
    padding:0;
    display:inline;
}

#odd {
    float: left;
    padding-right:13px;
}

#even {
    float: right;
}

.post_teaser p{
    margin: 0px 0px 7px 0px; /* top right bottom left */
}

.posttitle_teaser{
    font-family:"Arial Black", Gadget, sans-serif;
    font-variant:small-caps;
    font-size:13pt;
    font-weight:900;
    line-height:100%;
    height:18px;
    overflow:hidden;
    margin: 0px 0px 5px 0px; /* top right bottom left */
    padding:0;
}

.postimage_teaser{
    width:100%;
    height:100px;
}

/* this is very slightly cut off in Firefox, but good in IE & Chrome.  If I make any bigger (or make line-height smaller)
   you can see into the next line in chrome */
.postbody_teaser{
    line-height:124%;
    height:80px;
    overflow:hidden;
    margin-bottom:4px;
}

.postbody_teaser p{
    margin:0;
    padding:0;
}

.postteaser_spacer{
    height: 8px;
}

.readmoretext_teaser{
    font-size:11pt;
    font-weight:900;
}

/* RELATED POSTS */
.related_posts{
    margin: 20px 0px 20px 0px; /* top right bottom left */
    padding:0;
}

.related_posts_header{
    color:#066;
    font-family:"Arial Black", Gadget, sans-serif;
    font-size:13pt;
    font-weight:900;
    margin: 10px 0px 0px 0px; /* top right bottom left */
    padding:0;
}

/* COMMENTS */
#comments{
    color:#666;
    font-family:"Arial Black", Gadget, sans-serif;
    font-size:10pt;
    font-weight:700;
    margin: 20px 0px 0px 0px; /* top right bottom left */
    padding:0;
}

#respond{
    margin-top: 30px;
}

#leave_reply_header{
    color:#666;
    font-family:"Arial Black", Gadget, sans-serif;
    font-size:13pt;
    font-weight:900;
    margin: 30px 0px 0px 0px; /* top right bottom left */
    padding-top:0px;
}

#comment{
    width: 720px;
}

/* Page Navigation */
.pageNavigation{
    text-align:center;
}
.navOlderLink a{
    display: block;
    width: 172px;
    height: 22px;
    background: url('./images/older.png') bottom;
    text-indent: -99999px;
    float:left;
    text-align:left;
    padding:0;
    margin: 0;
}
.navOlderLink a:hover {     background-position: 0 0; }

.navNewerLink a{
    display: block;
    width: 172px;
    height: 22px;
    background: url('./images/newer.png') bottom;
    text-indent: -99999px;
    float:right;
    text-align:right;
    padding:0;
    margin: 0;
}
.navNewerLink a:hover {     background-position: 0 0; }

.navHomeLink a{
    display: block;
    width: 172px;
    height: 22px;
    background: url('./images/home.png') bottom;
    text-indent: -99999px;
    margin: auto;
    text-align:center;
}
.navHomeLink a:hover {  background-position: 0 0; }

#postNavigation_spacer{
    height:20px;
    overflow:hidden;
}

.postNavigation{
}

.postNavigation td{
    font-size:9pt;
}

/* SIDE BAR */
#sidebar{
    width: 284px;
    float: right;
    margin: 0px;
    padding:0px;
    text-align: left;
    display:inline; /* needed for ie issue(float drop bug?) where content from blogcontent repeats in sidebar */
}

#hackerchick{
    background:url('./images/hackerchick.gif') no-repeat;
    width:284px;
    height:735px;
    position:absolute;
    margin: 105px 0px 0px 0px; /* top right bottom left */
    padding:0px;
}

#hackerchick_spacer{
    height:560px;
}

/* note: this actually goes in the header */
#top_of_sidebar{
    height: 27px;
    width: 134px;
    padding:0;
    float:right;
    position:absolute;
    margin-top:17px;
    margin-left:754px;  /* content width (740) + sidebar_content padding-left (14) */
}

.sidebar_content{
    position:absolute;  /* without this, the content gets pushed to underneath of the sidebar in IE */
    padding: 0px 10px 0px 14px; /* top right bottom left */
    margin: 0;
    text-align:left;
    line-height:125%;
}

.sidebar_content .item{
    width:260px;     /* sidebar width (284) - padding right & left (24) */
    padding-bottom:20px;
}

.sidebar_header_image{
    padding-top:15px;
    padding-bottom:5px;
}

div.facebookiframe {
	width:283px;	/* set to 2 less then width to hide border */
	height:390px;   /* set to 2 less then height to hide border, another 25 less to hide "facebook social plugin" footer */
	overflow:hidden;
	margin-left: -12px;
	margin-bottom:5px;
}

div.facebookiframe iframe {
	margin:-1px;
}

#searchform{
    padding:0;
    margin:0;
}
.favorites p {
    font-style:italic;
    margin-bottom:5px;
    margin-right:10px;
}

#badges{
    padding-top:50px;
}

#cc_license{
    padding-top:30px;
    font-size:7pt;
    text-align:center;
    width:230px;
}

#cc_license p{
	margin-bottom:8px;
}

#badge-topblogs{
    height:100px;
    width:94px;
    float:left;
    vertical-align:middle;
    margin: 0px;
    padding: 0px 0px 0px 0px; /* top right bottom left */
}

#badge-agile11{
    height:68px;
    width:150px;
    float:left;
    margin: 0px;
    padding: 35px 0px 0px 10px; /* top right bottom left */
}

#badge-geekgirl{
    height:50px;
    width:142px;
    float:right;
    margin: 0px;
    padding: 10px 30px 0px 5px; /* top right bottom left */
}

#badge-devchix{
    height:75px;
    width:69px;
    float:left;
    margin: 0px;
    padding: 15px 0px 0px 5px; /* top right bottom left */
}

#badge-bbw{
    height:15px;
    width:80px;
    float:right;
    margin: 0px;
    padding: 20px 0px 0px 0px; /* top right bottom left */
}

/* FOOTER */
#footer{
    background-color:#4e2a3e;
    color:#ddd;
    width: 1024px;
    margin: 0px;
    padding:0px;
    text-align: left;
}

.footer_container{
    padding: 0px 10px 10px 10px; /* top right bottom left */
    text-align:left;
    font-size:9pt;
    line-height:125%;
}

.footer_header{
    margin-top:20px;
    margin-bottom:5px;
}

.footer_container li{
    list-style:none;
    line-height:150%;
}

.footer_container a{ color:#d0b0bf; text-decoration:none; }
.footer_container a:hover{ color:#fff; text-decoration:none; }

#column1{
    float: left;
    width:25%;
    overflow:hidden;
    margin:0;
    padding:0;
}
#column2{
    float: left;
    width:48%;

    margin:auto;
    margin:0;
    padding:0;
}
#column3{
    float: right;
    text-align:right;
    width:25%;
    overflow:hidden;
    margin:0;
    padding:0;
}

.tweet{
    min-height:48px;    /* height of twitter avatar */
    height: auto !important;    /* weird hack for IE */
    height:48px;
    margin: 0px 0px 10px 0px; /* top right bottom left */
    vertical-align:middle;
}

.twitter_avatar{
    width:48px;
    height:48px;
    border:none;
    padding: 3px 5px 0px 0px; /* top right bottom left */
}

.twitter_tagline{
    font-style:italic;
    text-align:right;
    padding-right:10px;
}

.commentor_avatar{
    width:48px;
    height:48px;
    border:none;
    padding: 0;
    margin: 0;
}

.past_event_pix{
    width:95%;
    text-align:center;
}

#upcoming_events_header{
    margin-top:50px;
}

.upcoming_events p {
    margin-bottom:5px;
}

.footnote{
    font-size:8pt;
    padding:0;
    margin-top:10px;
}   

/* Styles to use within posts */
.intro{
    color:#aa4d00;
    font-size:10pt;
    font-style:italic;
}

.intro_link{
    color:#aa4d00;
    font-size:10pt;
    text-decoration:underline;
}

.relatedPostTitles{
    color: #4e2a3e; /* footer background */
    line-height:120%;
    font-size:9pt;
}

/* just the title color */
.title{
    color:#066;
}

.header{
    color:#066;
    font-weight:900;
    font-style:italic;
    font-size:13pt;
    padding-top:10px;
}

.subtitle{
    color:#066;
    font-weight:900;
    font-style:italic;
}

.subHeader{
    color:#7c5d40;
}

.highlight{
    color:#068;
}

.bold{
    font-weight:900;
    color:#000;
}

.problem{
    color:#a00;
}

.callToAction{
    font-weight:900;
    color:#000;
}

.ps{
    font-style:italic;
    font-size:8pt;
}

.code{
	font-family:"Courier New", Courier, monospace
}

.codeHighlight{
	font-family:"Courier New", Courier, monospace
    color:#068;
}