/*  
Theme Name: oddbillone
Theme URI: http://oddbill.com/
Description: 3 column theme with Widget Support
Version: 1.0
Author: William Alex Cunningham
Author URI: http://oddbill.com/

	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php
	

	*** REGARDING IMAGES ***
	All CSS that involves the use of images, can be found in the 'index.php' file.
	This is to ease installation inside subdirectories of a server.


	*** A Note from the designer ***
	Most WordPress Themes are insane in their absurd jumble of styles and php.
	I have made every effort to make this theme SIMPLE. It is not simple in the sense
	of being stupid, it is simple in the sense of being smart.
	ALL styles are in this STYLE SHEET.
	UNECESSARY code has not been added.
	ALL pages are helpfully commented.
	I went through this pain, but I don't see why you should. If you dig through my
	comments through all these pages, you should get a good sense of what to do to make
	this site your own.



	*** NOTES on use of CSS ***
	
	h1, h2, h3, p, etc. -	these are HTML tags to which styles are being applied
	.anything - 		this is a class to which a style is being applied. Classes are
				referenced from within HTML tags.
	#anything -		this is an id to which styles are being applied. Ids are
				referenced within HTML tags.
	anything:hover -	this pseudo class controls what an element looks like when the cursor
				hovers over it.
	anything:visited -	this controls what an element looks like when the it has been
				clicked already.

	In general:
	I decided never to use any pseudo class other than :hover, as I don't care is visitors
	can tell if they've clicked a link before or not. I just don't think it matters.


	*** Regarding Colors ***
	If you are customizing this, you will want to make some decisions about what colors
	to use. 
	ALL COLORS in this template are controlled in THIS STYLESHEET. You can make all those 
	changes here.
	This is a list of every color used in this style sheet, and its purpose. For consistancy
	I have always used the HEX notation of the color. An easy way to change them would be 
	to pick a replacement and just do a search and replace throughout this document.


	COLORS USED:
	#f3e3dc (for .narrowcolumn - the color behind the main text column of the blog)
	#a1adad (for .widecolumn - the color behind the categories and archive pages)
	#d7e1e0 (for #page - the color behind the whole blog)
	#f3c1ab (for #sidebar)
	#f3946a (for #sidebar2)
	#ffffff (h1, h1 a, .description)
	#0bf516 (h1 a:hover)
	#06770b (a )
	

	
	
	CSS SECTIONS IN ORDER:
	
	0)  Background of whole site - Page Element
	1)  Page - Page Element
	2)  Main Content - Page Element
	3)  Header - Page Element
	4)  Top Menu - Page Element
	5)  Main Column - Page Element
	6)  Posts - Page Element
	7)  Sidebar Columns - Page Element
	8)  Images - Page Element
	9)  Forms - Page Element
	10) Comments - Page Element
	11) Footer - Page Element



*/

/* ********************************************************************************************
***********************************************************************************************
	0) Background of whole site - Page Element 
	
	taken out of body:
	background: url(images/desk.gif) repeat top left;
	
	entirely removed:
	#bk-groove { 
	background-image: url(images/pencil-groove.gif);
	background-repeat: repeat-x;
	height: 188px;
	margin-top: 0px;
	z-index:-1;
	} 

***********************************************************************************************
******************************************************************************************** */

body 	{
	font-size: 62.5%;
	font-family: Verdana, Arial, Serif;
	margin-left: auto;
	margin-right: auto;
	margin: 0;
	padding: 0; 
	background-color: #052b3b;
	}


/* ********************************************************************************************
***********************************************************************************************
	1) Page - Page Element 
	
***********************************************************************************************
******************************************************************************************** */

/* This describes the background within the blog itself, not the background to the whole site.
   The color you set here will appear beneath the blog content elements between the header 
   and footer. The margins you set here will determine where within the browser frame the 
   content of your blog appears. */

img {
	-ms-interpolation-mode:bicubic;
	}
   
#page {
	padding: 0;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	width: 1000px;
	}

#mainbody {
	padding: 0;
	width: 1000px;
	background-image: url(images/main.gif);
	background-repeat: repeat-y;
	}	

#mainbody.moviesartpage {
	background-image: url(images/main_art-movies.gif);
	}	

#bodytop {
	padding: 0;
	width: 1000px;
	background-repeat: no-repeat;
	background-position: 0px 237px;
	background-image: url(images/maintop.gif);
	}

#bodytop_wordspage {
	padding: 0;
	width: 1000px;
	background-repeat: no-repeat;
	background-position: 0px 237px;
	background-image: url(images/maintop_words.gif);
	}		
	
#bodytop_artpage {
	padding: 0;
	width: 1000px;
	background-repeat: no-repeat;
	background-position: 0px 237px;
	background-image: url(images/maintop_art.gif);
	}		

#bodytop_moviespage {
	padding: 0;
	width: 1000px;
	background-repeat: no-repeat;
	background-position: 0px 237px;
	background-image: url(images/maintop_movies.gif);
	}	
	
#bodytop_aboutpage {
	padding: 0;
	width: 1000px;
	background-repeat: no-repeat;
	background-position: 0px 237px;
	background-image: url(images/maintop_about.gif);
	}	
	

/* ********************************************************************************************
***********************************************************************************************
	2) Main Content - Page Element  #d7e4ff
***********************************************************************************************
******************************************************************************************** */

/* */


/* Style for anchor tags for hyperlinks throughout theme */
a	{
	color: #7e1a50;
	text-decoration: none;
	}

a:hover {
	color: #cdf829;
	}

a img 	{
	border: none;
	text-align: center;
	}



/* Style for header tags (other than the big blog header) throughout theme */

h2 	{
	margin: 10px 0 0 0;
	font-family: Verdana, Arial, Sans-Serif;
	font-size: 1.2em;
	color: #000;
	text-decoration: none;
 	}

h2 a	{
	text-decoration: none;
	}

h2 a:hover {
	text-decoration: none;
	color:#cdf829;
	}

#sidebar a {
	color: #d7e4ff;
	text-decoration: none;
	}

#sidebar h2 {
	text-decoration: none;
	color: #ff56a4;
	}

#sidebar2 a {
	color: #d7e4ff;
	text-decoration: none;
	}

#sidebar2 h2 {
	text-decoration: none;
	color: #ff56a4;
	}

h2.pagetitle {
	margin-top: 10px;
	font-size: 1.3em;
	}

h3 	{
	padding: 0;
	margin: 30px 0 0;
	font-family: Verdana, Arial, Sans-Serif;
	font-size: 1.1em;
	color: #000;
	text-decoration: none;
	}

h3 a	{
	text-decoration: none;
	}

h3 a:hover {
	text-decoration: none;
	color: #cdf829;
	}

h3.comments {
	padding: 0;
	margin: 40px auto 20px ;
	}

h4 	{
	padding-top: 60px;
	margin: 0;
	color: #orange;
	}
h5 	{
	font-size: 1.0em;
	text-decoration: none;
	margin-top: 0px;	
	}



/* */


#content {
	font-size: 1.1em
	}

code 	{
	font: 1.0 em 'Courier New', Courier, Fixed;
	}

acronym {
	font-size: 1.0em;
	letter-spacing: .07em;
	cursor: help;
	border-bottom: 1px dashed #999;
	}

abbr	{
	font-size: 1.0em;
	letter-spacing: .07em;
	cursor: help;
	border-bottom: 1px dashed #999;
	}

span.caps {
	font-size: 1.0em;
	letter-spacing: .07em;
	cursor: help;
	}

#wp-calendar caption {
	text-decoration: none;
	}


blockquote {
	margin: 15px 30px 0 10px;
	padding-left: 20px;
	font-size: 1.0em;
	line-height: 1.0em;
	}

cite 	{
	text-decoration: none;
	}

blockquote cite {
	margin: 5px 0 0;
	display: block;
	}

.center {
	text-align: center;
	}

hr 	{
	display: none;
	}


/* Consider getting rid of some of these, I don't know if they are needed */



/* ********************************************************************************************
***********************************************************************************************
	3) Header - Page Element 

***********************************************************************************************
******************************************************************************************** */
/* 
	The #header id style describes the space at the top of the page where the masthead image 
	will appear. I'm using an image that is 294px in height and 1500px wide (the same
	width as the whole blog). If you are changing the image, the easiest thing to do is 
	make it 294px X 1500px and upload it to the images directory, then just put its name
	in the "background" attribute of the #header tag below. If you want to change the size 
	of the image, you'll need to adjust the height attribute or the width of the #page tag.
	(NOTE: although the header height is explicit, the width is a percentage, so it takes 
	its width from the #page tag).
*/

#header { 
	margin: 0 !important;
	margin: 0 0 0 1px; 
	padding: 0; 
	height: 196px; 
	width: 100%; 
	background: url(images/masthead.gif) no-repeat bottom left;
	}

#headerimg {
	margin: 0;
	height: 196px;
	width: 100%;
	padding: 0px; 
	}

/*
	h1 is the tag style of the blog title. 
	h1 a refers to any hyperlinks (anchor tags) within the h1 tag
	h1 a:hover is the pseudo-class to handle a mouseover of a hyperlink in any h1 tags

	The h1 a variations are necessary as otherwise the blog title would inherit the colors
	and behavior of general hyperlinks throughout the theme, which are set above under the 
	2) Main Content heading. We don't want this because it makes our blog title look weird.

	Note: It may look redundant to set a color attribute for both h1 AND h1 a, since in this
	theme the only thing in an h1 tag is a hyperlink, but I'm doing it this way in case in
	future modifications we decide to use h1 for anything else.

*/

h1	{
	font-family: Verdana, Arial, Sans-Serif;
	font-size: 2.8em;
	text-align: left;
	text-decoration: none;
	color: #ffffff; 
	padding-top: 0px;
	margin: 0;
	display: none;
	}

h1 a	{
	color: #ffffff;
	}

h1 a:hover {
	color: #cdf829;  
	}

/*
	.description is the class that sets the appearence of the blog subtitle description	
*/

.description {
	font-size: 16.5px;
	text-align: left;
	text-decoration: none;
	color: #ffffff; 
	padding-top: 155px; 
	padding-left: 50px
	
	}

/* ********************************************************************************************
***********************************************************************************************
	4) Top Menu - Page Element  
	   NOTE: when ready to put the animated gif over the menu choices, add the following
		 to #menu a:hover -
	         	          background-image: url('images/a_hover.gif');
						  
***********************************************************************************************
******************************************************************************************** */

#menu {
	width:1000px;
	height:41px;
	text-align:left;
	text-indent:220px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:25px;
	color:#ff454b;
	background: url(images/menubanner.gif) no-repeat bottom left;
	}
#menu a {
	color:#ff454b;
	text-decoration:none;
	margin-left:10px;
	margin-right:10px;
    font-weight: normal;	
}
#menu a:hover {
	color:#cdf829;
        }

/* ********************************************************************************************
***********************************************************************************************
	5) Main Column - Page Element 
***********************************************************************************************
******************************************************************************************** */
/* 
	The .narrowcolumn style is the style for the main text column of the blog. I don't know
	why it is called narrow as it is the widest column in the blog.

	Padding in the .narrowcolumn style goes top, right, bottom, left
	Effective pixel width for content is 480px.
*/

.narrowcolumn, .widecolumn {
	float: left;
	margin-left: 0px;
	padding: 55px 0px 5px 90px;
    	width: 500px;
	}

.narrowcolumn .entry, .widecolumn .entry, .widecolumn {
	line-height: 1.2em;
	}

.narrowcolumn .postmetadata {
	padding: 5px;
	line-height: 1.5;
      text-align: right;
	}

/* 
	The .widecolumn style is for the archive page that lists categories and archives
	I just made this identical to narrowcolumn - go back through the pages and change
	all references to just plain column, and get rid of unneeded items in here.
*/

.widecolumn .postmetadata {
	margin: 30px 0;
	font-size: 1.0em;
	}


/* ********************************************************************************************
***********************************************************************************************
	6) Posts - Page Element  
***********************************************************************************************
******************************************************************************************** */

.entry p a:visited {
	color: #666;
	}

.entry p, .entrytext  {
	font-family: Serif;
	font-size: 1.3em;
	line-height: 1.2em;
	text-align: left;
	}

small {
	font-family: Serif;
	font-size: 10pt;
	line-height: 1.3em;
	}
	
.post {
	margin: 0 0 40px;
	border-width: 0px 0px 10px 0px;
	border-style: dotted;
	border-color: #d3b37f;
	}

html>body .entry ul {
	margin-left: 0px;
	padding: 0 0 0 30px;
	list-style: none;
	padding-left: 10px;
	text-indent: -10px;
	} 

html>body .entry li {
	margin: 7px 0 8px 10px;
	}

.entry ol {
	padding: 0 0 0 35px;
	margin: 0;
	}

.entry ol li {
	margin: 0;
	padding: 0;
	}

.postmetadata ul, .postmetadata li {
	display: inline;
	list-style-type: none;
	list-style-image: url('none');
	}

/* ********************************************************************************************
***********************************************************************************************
	7) Sidebar Columns - Page Element 

	NOTE on this sidebar arrangement, because it took me a long time to sort out:
	There are currently 2 sidebar php documents in this template. This creates the 2 
	column sidebar, with the same set of columns whether you
	are viewing the main page (index.php and page.php) or the Categories/Archives page (archive.php and 
	archives.php) or the single post page (single.php).
	They currently go like this:

	sidebar.php  - the left sidebar on page.php
	sidebar2.php - the right sidebar on page.php

	The styles, etc. below are used by all the sidebars.

***********************************************************************************************
******************************************************************************************** */

#rsslink {
	width:40px;
	height:40px;
	}

#rsslink a {
	padding: 0px 20px 30px 20px;
	background: url(images/rssbutton_idle.jpg) no-repeat top left;
	}
	
#rsslink a:hover {
	background: url(images/rssbutton_active.jpg) no-repeat top left;
	}

#sidebar a:hover {
	color: #cdf829;
	}

#sidebar2 a:hover {
	color: #cdf829;
	}
	
#sidebar h2 {
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
	font-size: 1.2em;
	margin: 15px 0 10px 0;
	padding: 0;
	}

#sidebar2 h2 {
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
	font-size: 1.2em;
	margin: 15px 0 10px 0;
	padding: 0;
	}

#sidebar ul ul .page_item {
	font-size: 80%;
	}

#sidebar2 ul ul .page_item {
	font-size: 80%;
	}
	
.navigation {
	display: block;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 60px;
	}

#sidebar ul, #sidebar ul ol {
	margin: 0;
	padding: 0;
	}

#sidebar ul li {
	list-style-type: none;
	list-style-image: url('none');
	margin-bottom: 5px
	}

#sidebar ul p, #sidebar ul select {
	margin: 5px 0 8px;
	}

#sidebar ul ul, #sidebar ul ol {
	margin: 5px 0 0 10px;
	}

#sidebar ul ul ul, #sidebar ul ol {
	margin: 0 0 0 10px;
	}

ol li, #sidebar ul ol li {
	list-style: decimal outside;
	}

#sidebar ul ul li, #sidebar ul ol li {
	margin: 3px 0 0;
	padding: 0;
	}

#sidebar2 ul, #sidebar2 ul ol {
	margin: 0;
	padding: 0;
	}

#sidebar2 ul li {
	list-style-type: none;
	list-style-image: url('none');
	margin-bottom: 5px
	}

#sidebar2 ul p, #sidebar2 ul select {
	margin: 5px 0 8px;
	}

#sidebar2 ul ul, #sidebar2 ul ol {
	margin: 5px 0 0 0px;
	}

#sidebar2 ul ul ul, #sidebar2 ul ol {
	margin: 0 0 0 0px;
	}

ol li, #sidebar2 ul ol li {
	list-style: decimal outside;
	}

#sidebar2 ul ul li, #sidebar2 ul ol li {
	margin: 3px 0 0;
	padding: 0;
	}

/* ********************************************************************************************
sidebar  	
******************************************************************************************** */

#sidebar {
	margin-top: 55px;
	margin-right: 5px;
	margin-left: 65px;
      padding: 0px 0px 0px 0px;
	width: 150px;
	font: 1.1em Verdana, Arial, Sans-Serif;
	font-weight: bold;
	color: #b2b6c0;
      float: left;
	}

#sidebar2 {
	margin-top: 55px;
	margin-right: 0px;
	margin-left: 0px;
      padding: 0px 0px 0px 0px;
	width: 150px;
	font: 1.1em Verdana, Arial, Sans-Serif;
	font-weight: bold;
	color: #b2b6c0;
      float: left;
	}

#twitter_div {
border-style: inset;
border-width: 8px 10px 4px 4px;	
border-color: #ae266f;
background-color: #493d59;
font: 1em Verdana, Arial, Sans-Serif;
font-weight: bold;
padding: 4px;
	}

#twitter-header {
background-color: #ae266f;
color: #fa79c0;
font: .8em Verdana, Arial, Sans-Serif;
font-weight: bold;
text-align: right;
padding: 4px 20px 8px 0px;
}
	
#twitter-link {
background-color: #ae266f;
font: 1em Verdana, Arial, Sans-Serif;
font-weight: bold;
line-height: 200%;
}
/* ********************************************************************************************
***********************************************************************************************
8) Images - Page Element  
***********************************************************************************************
******************************************************************************************** */

p img {
	padding: 0;
margin: 0 0 0px 0px;
	max-width: 100%;



	}

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}
	
img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}


img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}
	
.alignleft {
	float: left
	}

/* ********************************************************************************************
***********************************************************************************************
	9) Forms - Page Element 

		margin: 0 auto 10px; 
	padding: 2px;
	padding: 1px;
***********************************************************************************************
******************************************************************************************** */

#searchform {
	padding: 0px 0px; 
	text-align: left;
	}

#searchform #s {
	width: 73px;
	}

.searchfield {
	width: 130px;
	height: 30px;
	background: url(images/searchfield.jpg) no-repeat;
	float: left;
	}

.textInput
{
	width: 73px;
	height: 30px;
	background: none;
	border: none;
	color: #ffffff;
	margin-top: 7px;
	margin-left: 8px;

}

#searchsubmit {
	width: 30px;
	height: 30px;
	margin-left: 3px;
	background: url(images/searchbutton.jpg) no-repeat;
	border: 0;
	}	
	
#sidebar {
	}

.entry form { /* This is mainly for password protected posts, makes them look better. */
	text-align:center;
	}

select {
	width: 130px;
	}

#commentform input {
	width: 160px;
	padding: 2px;
	margin: 5px 5px 1px 0;
	}

#commentform textarea {
	width: 90%;
	padding: 2px;
	border: 1px solid #c2c2c2;
	}

#commentform #submit {
	margin: 0;
	float: right;
	}

/* ********************************************************************************************
***********************************************************************************************
	10) Comments - Page Element  
***********************************************************************************************
******************************************************************************************** */

.alt {
	margin: 0;
	padding: 10px;
	border: 1px solid #cecece;
	}

.commentlist {
	padding: 0;
	text-align: justify;
	}

.commentlist li {
	margin: 15px 0 3px;
	padding: 5px 10px 3px;
	list-style: none;
	}

.commentlist p {
	margin: 10px 5px 10px 0;
	}

#commentform p {
	margin: 5px 0;
	}

.nocomments {
	text-align: center;
	margin: 0;
	padding: 0;
	}

.commentmetadata {
	margin: 0;
	display: block;
	}

.commentlist li, #commentform input, #commentform textarea {
	font: 1.0em Verdana, Arial, Sans-Serif;
	}
	
.commentlist li {
	font-weight: bold;
	}

.commentlist cite, .commentlist cite a {
	font-weight: bold;
	font-style: normal;
	font-size: 1.0em;
	}

.commentlist p {
	font-weight: normal;
	line-height: 1.3em;
	text-transform: none;
	}

#commentform p {
	font-family: Verdana, Arial, Sans-Serif;
	}

.commentmetadata {
	font-weight: normal;
	}

/* ********************************************************************************************
***********************************************************************************************
	11) Footer - Page Element 
***********************************************************************************************
******************************************************************************************** */

#footer {
	background: url(images/footer.gif) no-repeat bottom left;
	color: #b48f02;
	padding: 0 0 0 1px;
	margin-left: auto;
	margin-right: auto;
	width: 1000px;
	height: 86px;
	clear: both;
	text-align: center;
	}

#footer p {
	margin: 0;
	padding: 7px 50px 0px 65px;
	text-align: left;
	font-size: 10px;
	font-weight: bold;
	}

#footer a {
	color: #6B8445;
	}

#footer a: hover {
	color: #cdf829;
	}	

/* ********************************************************************************************
***********************************************************************************************
	This is the end of the Style Sheet!  
***********************************************************************************************
******************************************************************************************** */