/*
Theme Name: Chiclet-Beta
Theme URL: http://www.pixelpressicons.com
Descriptions: A minimal template designed from scratch for PixelPressIcons.com.
Author: Gary Gehiere
Authur URL: http://www.garygehiere.com
Version: 1.0
*/

/* Positions */

#container { /*The container holds ALL other divs */
	position:relative;
	margin: 0 0 0 0px;
	margin-left:auto;
	margin-right:auto;
	width:100%;
}

#wrapper { /*The wrapper holds sidebar, content and footer divs */
	position:relative;
	float:left;
	margin:10px auto 0 10px;
	width:970px;
	/* background-color:purple; */
}

#sidebars {
	position: relative;
	float:left;
	width:210px;
	margin:16 0 0 0px;
	/* height:100%; */
	/* background-color:green; */
}

#content { /*The content holds two other divs: the_post and the_metadata */
	position: relative;
	float:left;
	width:760px;
	margin:0 0 0 0px;
	/* background-color:red; */
}

#the_post { /* The title and text of a post */
	position: relative;
	float:left;
	width:580px;
	margin:0 0 0 0px;
	/* background:#ffffff; */
}

#the_metadata { /* Category, date, comment count of post */
	position: relative;
	float:left;
	width:170px;
	margin:0 0 0 0px;
	/* background-color:orange; */
}

#footer {
	clear:both;
	width:580px;
	margin-left: 210px;
}

body {
	margin:0;
	font-family:Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size:14px;
	text-align:left;
	vertical-align:top;
	background:#white;
	background-color:#CCC;
	background: url("images/bg-graystripes.jpg"); 
	background-repeat:repeat;/*Uncomment to add image */
}

/*------------- Ad Banner -------------*/
#ad_banner {
	clear:both;
	width:580px;
	text-align:center;
	margin-left:6px;
}

/*------------- Tooltip -------------*/
li a{
	z-index:10;
	}
li a:hover{
	position:relative;
	z-index:100;
	}			
li a span{
	display:none;
	}
li a:hover span{
	display:block;
	position:absolute;
	float:left;
	white-space:nowrap;
	top:-2.2em;
	left:.5em;
	background:#FFF;
	border:1px solid #CCC;
	color:#000;
	font-size:18px;
	padding:6px 12px;
	z-index:10;			
	}

/* .tooltip{
	position:absolute;
	border:1px solid #333;
	background:#CCC;
	padding:2px 5px;
	color:#333;
	display:none;
	}	*/

/*------------- Header -------------*/
#header {
	position: relative;
	padding-left:10px;
	margin-left: 20;
}

#header h1 {  
    background: url(images/pixelpressicons.png) no-repeat;  
    width: 210px;  
    height: 120px;
    position: relative;
    top: 20 px;
}  

#header h1 a {
    width: 210px; /* this will move text version of blog title off the page so it is still indexed for seo */
    height: 97px;
    text-indent: -9000px;
    display: block;
}


/*------------- Sidebar -------------*/
#sidebar_full {
	position: relative;
	float: left;
	margin-left:60;
}

#sidebar_full li {
	/* list-style:url(" <<Image URL>> ");*/
	list-style: none;
	list-style-type: none;
	text-decoration: none;
	list-style-image: none;
	padding-bottom: 1em;
}

IMG.center {	/* IMG.centeris a class I delclare and then apply to images using the class="center" property */
    display: block;
    margin-left: 48px;
    margin-right: auto;
}

IMG.noborder {
	border:0;
	display:block;
	margin:10px auto;
	text-align:center;
}

IMG.noborder2 {
	border:0;
	display:block;
}
	

/*------------- Content -------------*/
#content h2 {
	font-family:Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size:18px;
	text-align:left;
	vertical-align:top;
	color:#333;
}

#content h2, a:link, a:active, a:visited {
	color:#666;
	text-decoration:none;
	}
	
#content h2, a:hover {
	text-decoration:underline;
	color:black;
	}
	
/*------------- Content > The_Post -------------*/
#the_post {
	padding:5px;
}

#the_post h2 {
	padding-top: 18px;
	padding-bottom: 0px;
}
	

#the_post h2, a:link, a:active, a:visited {
	text-decoration:none;
	color:#333;
}
	
#the_post a:hover {
	text-decoration:underline;
	color:black;
}

#the_post p {
	padding-top:10px;
}

#the_post p a:link, p a:active, p a:visited {
	text-decoration:underline;
	color:#333;
}

#the_post ol {
	padding-top: 12px;
	margin-left: 24px;
}

#thepost hr, hr {
	color:#999;
	background-color:#999;
	height:1px;
	border:none;
	margin-top:6px;
	margin-bottom:2px;
}

blockquote p {
	font-family:Helvetica Neue, Helvetica, Arial, sans-serif;
	font-weight:bold;
	font-size:14px;
	text-align: center;
	background:none;
	width:90%;
	border-top:#CCC 1px dashed;
	border-bottom:#CCC 1px dashed;
	margin:auto;
	padding:10px;
	color:#999;
}

#the_post img, a:link, a:active, a:visited, a:hover {
	text-decoration:underline;
	color:#999;
}

/*------------- Content > The_Metadata -------------*/
#the_metadata a:link, a:active, a:visited {
	text-decoration:none;
	color:#333;
}
	
#the_metadata a:hover {
	text-decoration:underline;
	color:#000;
}

#the_metadata ul {
	color:#333;
	font-weight: bold;
	list-style:none;
	list-style-type:none;
	text-decoration:none;
	list-style-image:none;
	padding-bottom:20px;
	margin-top:16px;
}

#the_metadata li {
	color::#333;
	font-weight: bold;
	list-style:none;
	list-style-type:none;
	text-decoration:none;
	list-style-image:none;
	font-size:12px;
	padding-top:6px;
	margin-left:10px;
}

#the_metadata img {
	margin-left:-12px;
}

/*------------- Footer -------------*/
#footer {
	padding:5px;
}

#footer p {
	font-size:12px;
	text-align:left;
	padding-top:6px;
}

#footer h2 {
	font-family:Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size:18px;
	text-align:left;
	vertical-align:top;
	color:#333;
}

#footer a:link, a:active, a:visited, a:hover {
	text-decoration:underline;
	color:black;
	}
	
#outside_footer p {
	font-size:10px;
	color:#333;
	text-align:center;
}

#outside_footer a:link, a:active, a:visited, a:hover {
	text-decoration:underline;
	color:black;
	}

/*------------- Search -------------*/
#above_footer {
	clear:both;
	width:580px;
	padding:5px;
	margin-left: 210px;
}

#search_form{
	float:left;
}

#emailme {
	float:right;
	border:none;
	width:240px;
	padding-right:20px;
}

#emailme a:link, a:active, a:visited, a:hover {
	text-decoration:underline;
	color:#333;
	}

#emailme p {
	font-family:Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size:18px;
	text-align:center;
	vertical-align:center;
	padding-top:3px;
	color:#333;
}

fieldset.search {
	border:none;
	width:240px;
	margin:0 auto;
}
.search input, .search button {
	border:none;
	float:left;
	margin-top:8px;
	margin-bottom:4px;
}
.search input.box {
	color:#333;
	font-size:18px;
	width:200px;
	height:38px;
	padding:8px 21px 0;
	background:url(images/search_bg.png) no-repeat;
	margin-right:0px;
}
.search input.box:focus {
	background:url(images/search_bg.png) no-repeat left -38px;
	outline:none;
}
.search button.btn {
	width:38px;
	height:38px;
	cursor:hand;
	text-indent:-9999px;
	background:url(images/search_bg.png) no-repeat top right;
}
.search button.btn:hover {
	background:url(images/search_bg.png) no-repeat bottom right;
}	


/*------------- Comments via single.php -------------*/
#single small {
	text-align:left;
}

#single a:link, a:active, a:visited, a:hover {
	text-decoration:underline;
	color:black;
}

#comments_container {
	/* position: relative; */
	float:left;
	width:560px;
	margin-left:14px;
	margin-top: 24px;
	clear:both;
}


#comments_form {
	/* position: relative; */
	float:left;
	width:580px;
	margin:10 0 50 0px;
	clear:both;
}

.commentlist {
	margin-top: 24px;
	padding-left: 36px;
	background:#FFF;
}

#respond h3 {
	font-family:Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size:14px;
	text-align:left;
	padding-top:10px;
	color:#333;
}

/*------------- Navigation for Index.php  -------------*/
#navigation {
	float:left;
	width:580px;
	margin-left:4px;
	margin-right:4px;
	padding-top:20px;
	clear:both;
	font-weight: bold;
	font-family:Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size:14px;
	color:#333;
}

#navigation a:link, a:active, a:visited {
	color:#333;
	text-decoration:none;
}
	
#navigation a:hover {
	text-decoration:underline;
	color:#000;
}

.alignright,img.alignright{
	float:right;
	margin:10 10 0px;
}

.alignleft,img.alignleft{
	float:left;
	margin:10 10 0 0px;
}

.aligncenter,img.aligncenter{
	display:block;
	margin:10px auto;
	text-align:center;
}

/*------------- Style for "no posts" query result -------------*/
#noposts{
	clear:both;
	width:580px;
	padding:5px;
	float:left;
	text-align:center;
}

#noposts h2{
	font-family:Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size:36px;
	text-align:center;
	text-decoration:none;
}

#noposts p{
	font-family:Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size:18px;
	text-align:center;
}


#noposts a:link, a:active, a:visited, a:hover{
	color:#333;
	text-decoration:underline;
}

/*------------- Default CSS for TCCBv2 without Javascript -------------*/
.cbb {
	margin:1em 0;
	padding:0 10px;
	border:1px solid #666;
	background:#fff;
}
.cbb h1 {
	margin:0 -10px;
	padding:0.3em 10px;
	background:#efece6;
	font:bold 1.2em/1 Helvetica Neue, Helvetica, Arial, sans-serif;
}
/* Normal styling */
.cb {margin:0.5em 0;}
	/* Top corners and border */
.bt {
	height:17px;
	margin:0 0 0 18px;
	background:url(images/post-box.png) no-repeat 100% 0;
}
.bt div {
	position:relative;
	left:-18px;
	width:18px;
	height:17px;
	background:url(images/post-box.png) no-repeat 0 0;
	font-size:0;
	line-height:0;
}

	/* Bottom corners and border */
.bb {
	height:14px;
	margin:0 0 0 12px;
	background:url(images/post-box.png) no-repeat 100% 100%;
}
.bb div {
	position:relative;
	left:-12px;
	width:12px;
	height:14px;
	background:url(images/post-box.png) no-repeat 0 100%;
	font-size:0;
	line-height:0;
}

	/* Left border */
.i1 {
	padding:0 0 0 12px;
	background:url(images/post-borders.png) repeat-y 0 0;
}
	/* Right border */
.i2 {
	padding:0 12px 0 0;
	background:url(images/post-borders.png) repeat-y 100% 0;
}
	/* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
.i3 {
	display:block;
	margin:0;
	padding:1px 10px;
	background:#fff;
}
	/* Make the content wrapper auto clearing so it will contain floats (see http://positioniseverything.net/easyclearing.html). */
.i3:after {
	content:"."; 
	display:block; 
	height:0; 
	clear:both; 
	visibility:hidden;
}
.i3 {display:inline-block;}
.i3 {display:block;}
/* Default CSS ends here */

/*------------- CSS for TCCBv2 for Post Images -------------*/
.postimage {
	margin:12px auto 0 auto;
	/* margin:1em 0; */
	padding:0 0px; /*was 0 10px*/
	border:0px solid #666;
}
.postimage h1 {
	margin:0 -10px;
	padding:0.3em 10px;
	background:#efece6;
	font:bold 1.2em/1 Helvetica Neue, Helvetica, Arial, sans-serif;
	background:red;
	display:inline-block;
	position:relative;
	left:0; right:0;
	margin-left:auto;
	margin-right:auto;
}
/* Normal styling */
.postimage .cb {margin:0.5em 0;}
	/* Top corners and border */
.postimage .bt {
	height:17px;
	margin:0 0 0 18px;
	background:url(images/img-plain-box.png) no-repeat 100% 0;
}
.postimage .bt div {
	position:relative;
	left:-18px;
	width:18px;
	height:17px;
	background:url(images/img-plain-box.png) no-repeat 0 0;
	font-size:0;
	line-height:0;
}

	/* Bottom corners and border */
.postimage .bb {
	height:14px;
	margin:0 0 0 12px;
	background:url(images/img-plain-box.png) no-repeat 100% 100%;
}
.postimage .bb div {
	position:relative;
	left:-12px;
	width:12px;
	height:14px;
	background:url(images/img-plain-box.png) no-repeat 0 100%;
	font-size:0;
	line-height:0;
}

	/* Left border */
.postimage .i1 {
	padding:0 0 0 12px;
	background:url(images/img-plain-borders.png) repeat-y 0 0;
}
	/* Right border */
.postimage .i2 {
	padding:0 12px 0 0;
	background:url(images/img-plain-borders.png) repeat-y 100% 0;
}
	/* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
.postimage .i3 {
	display:block;
	margin:0;
	padding:1px 10px;
	background:#fff;
}
	/* Make the content wrapper auto clearing so it will contain floats (see http://positioniseverything.net/easyclearing.html). */
.postimage .i3:after {
	content:"."; 
	display:block; 
	height:0; 
	clear:both; 
	visibility:hidden;
}
.postimage .i3 {display:inline-block;}
.postimage .i3 {display:block;}

.postimage img, a:link, a:active, a:visited, a:hover {
	border-width:0;
	text-decoration:none;
}

/*------------- Captions -------------*/
.wp-caption{
	padding-top:3px;
	text-align:center;
	border:0px;
	margin-top:15px;
	margin-bottom:15px;
}

.wp-caption img, a:link, a:active, a:visited, a:hover {
	border:0px;
	color:#333;
}

.wp-caption-text{
}

/*------------- Code for "Download" buttons -------------*/
.postdlwhite {
	position:relative; z-index: 1;
	display:block;
	padding:0;
	width:100px;
	height:40px;
	margin-top:-70px;
	margin-left:auto;
	margin-right:auto;
	overflow:visible;
	background:url(images/button-dl-white.png) no-repeat; 
}

.postdldark {
	position:relative; z-index: 1;
	display:block;
	padding:0;
	width:100px;
	height:40px;
	margin-top:-70px;
	margin-left:auto;
	margin-right:auto;
	overflow:visible;
	background:url(images/button-dl-dark.png) no-repeat; 
}

/* #postdl img, a:link, a:active, a:visited, a:hover {
} */

/* Post image CSS ends here */

/* Custom CSS for TCCBv2 with Javascript*/
/* You can use different borders for different boxes on the same page. Just adjust the CSS. Here are a few examples, one of which uses the GIF images instead of the PNG images. Note that you can also adjust borders, heights and paddings this way. Remember to adjust the IE CSS as well. */

.one {
	position:absolute;
	top:0;
	right:0;
}
.two {
	float:left;
	width:45%;
}
.two .i1,
.two .i2 { background-image:url(borders.gif); }
.two .bt,
.two .bt div,
.two .bb,
.two .bb div { background-image:url(box.gif); }
#three {
	float:left;
	clear:both;
	width:80%;
}
#three .cb {
	float:left;
	width:40%;
}
.button {
	float:left;
	margin-top:0;
}
.button .bt {
	height:8px;
	margin:0 0 0 9px;
	background-image:url(button.png);
}
.button .bt div {
	left:-9px;
	width:9px;
	height:8px;
	background-image:url(button.png);
}
.button .bb {
	height:8px;
	margin:0 0 0 8px;
	background-image:url(button.png);
}
.button .bb div {
	left:-8px;
	width:8px;
	height:8px;
	background-image:url(button.png);
}
.button .i1 {
	padding:0 0 0 3px;
	background-image:url(button-images/post-borders.png);
}
.button .i2 {
	padding:0 3px 0 0;
	background-image:url(button-images/post-borders.png);
}
.button .i3 {
	padding:0 0.5em;
	background:#3a3d40 url(button.png) no-repeat -3px -8px;
	font-weight:bold;
	text-decoration:none;
	text-align:center;
}
.button a:link,
.button a:visited,
.button a:hover {
	border:none;
	color:#fff;
}

/* Just a bit of styling, adjust as you wish. */
#absolute-wrapper {
	position:relative;
	height:9em;
}
.cb li {margin-left:1em;}