/*
Theme Name: Broken Bytes
Theme URI: http://blog.brokenbytes.info
Version: 1.0
Author: Matthew Seigel
Author URI: http://www.brokenbytes.info
Tags: Broken Bytes, Custom

Colors:

*/

/* Overrides */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
q:before, q:after { content:''}
strong { font-weight:bold }
em { font-style:italic }
a img { border:none } /* Gets rid of IE's blue borders */
h1, h2, h3, h5, h5, h6 { font-weight:bold } /* This helps to identify headings at the initial build stage, so I thought it'd be useful to have it */
.alert { background:red; color:white } /* 'alert' has a basic style, since it's useful to have it standing out for testing purposes. */


/* These rather presentational classes are generated by WordPress, so it's useful to have some styles for them. Edit as you see fit. More info: http://codex.wordpress.org/CSS */
.aligncenter { display:block; margin:0 auto }
.alignleft { float:left }
.alignright { float:right }
.wp-caption { border:1px solid #666; text-align:center; background:#ccc; padding:10px; margin:10px }
/* div, ul, li { position:relative } This will save you having to declare each div / ul / li's position as 'relative' and allows you to absolutely position elements inside them */
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0 } /* Use this br class to clear your floated columns */
li#theme-switcher { background:#fff; border:10px solid red; padding:20px; position:fixed; top:0; right:0 } /* Use this if you have the Theme Switcher Reloaded plugin (http://themebot.com/webmaster-tools/1-wordpress-theme-switcher-reloaded) installed and want to make it nice and obvious */
.wp-caption-text {color:#000000;}

#searchform {
	padding-bottom: .75em;
}
/* Main page / multiposts */
p {
	padding:.75em 0;
}
hr {
	margin: .5em 0;
	color:#FFF;
}
.tagline {
	width: 950px;
	text-align: center;
	font-size: small;
}
.postArea {
	width: 625px;
}
.sidebar {
	width: 250px;
	float: right;
}
	#contentArea .sidebar ul {
		padding-left:0;
	}
	#contentArea .sidebar ul ul {
		padding-left: 1em;
	}
/* Post Titles - bold already applied */
h2 {
	font-size: xx-large;
	font-family: Arial, Helvetica, sans-serif;
}
.postSubtitle {
	padding:0 0 1em 0;
	font-size: small;
}
.postMeta {
	font-size: small;
}
.post {
	padding: 0 0 2em 0;
}
/* Single Post */
.postNav {
	padding: .5em 0;
	border-top: thin dashed #FFF;
	border-bottom: thin dashed #FFF;
}

/* Comments */
.commentsWrapper {
	margin-top:1em;	
}
.commentsWrapper h3 {
	margin: .5em 0;
}
.commentlist .commentmetadata {
	font-size:small;	
}
.commentlist li {
	padding: .5em 0;
	border-bottom: thin dashed #FFF;	
}
#respond p {
	padding:0;	
}


/* Layout stuff from website */
DIV{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
body {
	background-image:url('images/bgtop.png');
	background-position:top;
	background-repeat:repeat-x;	
	color: #FFFFFF;
	background-color:#333333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
a {
	color: #0CF;
	text-decoration: none;
}
a:hover {
	color: #0FF;
	text-decoration: underline;
}
img {
	border: none;
}
.clear {
	clear: both;
	line-height: 1px;
}
.imgblock {
	display: block;
}
.nodot {
	list-style: none;		
}
.normalpad {
	padding-bottom:1em;	
}
.bold {
	font-weight:bold;	
}
/* Center page wrapper (contains Header, NavBar, and footer) */
#pageWrapper {
	width: 950px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1%;
}
/* Header */
#pageWrapper #header {
	width: 100%;
	overflow: hidden;
}
#pageWrapper #header .capLeft {
	float: left;
	display: inline;
	width: 253px;
	height: 168px;
}
#pageWrapper #header .center {
	float: left;
	display: inline;
	width: 363px;
	height: 168px;
}
#pageWrapper #header .padding {
	background-image: url('images/headerPadding.png');
	background-repeat: repeat-x;
	float: left;
	display: inline;
	width: 40px;
	height: 168px;
}
#pageWrapper #header .capRight {
	float: left;
	display: inline;
	width: 253px;
	height: 168px;
}
/* NavBar */
#pageWrapper #tabContainer {
	width: 60%;
	margin: 0 auto;
}
#tabContainer a {
	color: #FFF;
	text-decoration: none;
}
#tabContainer a:hover {
	color: #0FF;
	text-decoration: none;
}
#tabContainer .index,
#tabContainer .portfolio,
#tabContainer .blog,
#tabContainer .tuts,
#tabContainer .links {
	float: left;
	line-height: 28px;
	margin: 0 0.5em 0 0.5em;
}
#tabContainer .index .left,
#tabContainer .portfolio .left,
#tabContainer .tuts .left,
#tabContainer .links .left {
	float: left;
	display: inline-block;
	background-image: url('images/regLeftTab.png');
	overflow: hidden;
	width: 15px;
}
#tabContainer .index .center,
#tabContainer .portfolio .center,
#tabContainer .tuts .center,
#tabContainer .links .center {
	float: left;
	display: inline-block;
	background: url('images/regCenterTab.png') repeat-x;
	overflow: hidden;
}
#tabContainer .index .right,
#tabContainer .portfolio .right,
#tabContainer .tuts .right,
#tabContainer .links .right {
	float: left;
	display: inline-block;
	background-image: url('images/regRightTab.png');
	overflow: hidden;
	width: 13px;
}

body#blog div.blog div.left {
	float: left;
	display: inline-block;
	background-image: url('images/currLeftTab.png');
	overflow: hidden;
	width: 25px;
}

body#blog div.blog div.center {
	float: left;
	display: inline-block;
	background: url('images/currCenterTab.png') repeat-x;
	overflow: hidden;
}
body#blog div.blog div.right {
	float: left;
	display: inline-block;
	background-image: url('images/currRightTab.png');
	overflow: hidden;
	width: 14px;
}
/* Main content */
#pageWrapper #mainContentContainer {
	width: 100%;
	padding-top: 3%;
}
#pageWrapper #mainContentContainer #contentTop {
	margin:1em 0 0 0;
	width: 100%;
}
#pageWrapper #mainContentContainer #contentMain {
	background-image: url('images/contentCenter.png');
	background-position: top;
	background-repeat: no-repeat;
	background-color: #09629c;
	min-height: 450px;
	width: 100%;
}
#pageWrapper #mainContentContainer #contentMain #contentArea {
	padding: 0 1.5em 0 1.5em;
}
	#contentArea ul {
		padding: 0 0 0 1em;
		list-style-type: circle;
	}
	#contentArea ul ul {
		list-style-type: disc;
	}
#pageWrapper #mainContentContainer #contentBottom {
	width: 100%;
}
/* Content Manipulations */
/* Footer */
#pageWrapper #footer {
	width: 100%;
	text-align: center;
	margin-top: 1%;
	margin-bottom: 8%;
	font-size: small;
}
#footer p {
	padding:0;
	margin:0;
}