/*

Theme Name: Shades Of Gray

Theme URI: http://chrisberryonthe.net

Description: A crudely built custom WordPress theme intended solely for my personal use. This theme is not suitable for public release. Please be original and don't steal.

Version: 1.0

Author: Chris Berry

Author URI: http://chisberryonthe.net




	*/



/* Begin Typography & Colors */



body {

	font-size: 62.5%; /* Resets 1em to 10px */

	font-family:  "Trebuchet MS", Arial, Sans-Serif;

	background: #dddddd;

	color: #333333;

	text-align: center;

	margin: 0 auto;

	padding: 0;

	}



#page {

	text-align: left;

	}



#header {

	background: #dddddd;

        margin: 0 auto;

	}



	

#main { 

	width: 960px;

	margin: 0 auto;

	}



#content {

	font-size: 1.4em;

        float: left;

	}



.narrowcolumn p {

	clear:both;

	}



.narrowcolumn .entry {

	line-height: 1.6em;

	width: 550px;

	}



.narrowcolumn .postmetadata {

	text-align: left;

	}

	

#footer {

	background: #dddddd;

	}



small {

	font-family: "Trebuchet MS", Arial, Sans-Serif;

	font-size: 0.8em;

	line-height: 1.5em;

	}



h1, h2, h3, h4, h5, h6 {

	font-family: "Trebuchet MS", Arial, Sans-Serif;

	font-weight: normal;

	}



h1 {

	font-size: 4.5em;

	text-align: left;

	padding-left:40px;

	}



#headerimg .description {

	font-size: 1.5em;

	color:#666666;

        margin-left: -9999px;

	}



h2 {

	font-size: 1.8em;

	clear:both;

	}



h2.pagetitle {

	font-size: 1.8em;

	color:#555555;

	}



#sidebar ul li h2 {

	font-family: "Trebuchet MS", Arial, Sans-Serif;

	font-size: 1.6em;

	color: #555555;

	padding: 5px 5px;

	

	}



h3 {

	font-size: 1.6em;

	clear:both;

	}



h1, h1 a, h1 a:visited {

	text-decoration: none;

	color: #555555;

	}

h1 a:hover {

        color: #333333;

}



h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {

	color: #555555;

	}



h2 a:hover, h3 a:hover {

	text-decoration: none;

        color: #333333;

	}



.entry p a:visited {

	color: #333333;

	}



.commentlist li, #commentform input, #commentform textarea {

	font: 0.9em "Trebuchet MS", Arial, Sans-Serif;

        }



.commentlist li {

	font-weight: bold;

	background:#eeeeee;

        border: 5px solid #bbbbbb;

	}



.commentlist li .avatar { 

	float: left;

        margin: 0 5px 5px 0;

	border: 2px solid #bbb;

	padding: 2px;

	background: #fff;

	}



.commentlist cite, .commentlist cite a {

        font-weight: bold;

	font-style: normal;

	font-size: 1.1em;

	}



.commentlist p {

	font-weight: normal;

	line-height: 1.2em;

	text-transform: none;

	}



#commentform p  {

	font-family: "Trebuchet MS", Arial, Sans-Serif;

	}



.commentmetadata {

	font-size: 0.9em;

	font-weight: normal;

	}

.commentlist li.alt {	

	background:#eeeeee;

        border: 5px solid #bbbbbb;

        border-radius: 15px;

        -moz-border-radius: 15px;

        -webkit-border-radius: 15px;	

}



#sidebar {

	font: 1.4em "Trebuchet MS", Arial, Sans-Serif;

	}



small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {

	color: #333;

	}



code {

	font: 0.9em 'Courier New', Courier, Fixed;

	padding: 10px;

	border: 1px solid #eee;

	display: block;

	background:#fff;

	}



acronym, abbr, span.caps

{

	font-size: 1.1em;

	letter-spacing: .07em;

	}



a {

	color: #333333;

	text-decoration: none;

	padding: 0 1px;

	}



a:hover {

	color: #666666;

	text-decoration: none;

	}

	

h1 a, h2 a, h3 a, h1 a:hover,h2 a:hover, h3 a:hover{

	border: none;

	background: none;

}



/* End Typography & Colors */







/* Begin Structure */

body {

	margin: 0 auto;

	padding: 0;

        width: 960px;

	}



#page {

	padding: 0;

	width: 960px;

        position: relative;

	}



#header {

	margin: 0 auto;

	padding: 0;

	width: 960px;

	}

#headerimg {

        margin: 0 auto;

        width: 960px;

        height: 1px;

}



#searchdiv {

	width: 960px;

        height: 55px;

        }

#subhead {
       width: 960px;
       height: 50px;
       background: url(images/subhead.png);
       position: relative; top: -60px;
}

.narrowcolumn {

	padding: 30px 40px 30px 20px;

	margin: 0px auto;

	width: 550px;	

	}

.widecolumn {

        padding: 30px 40px 30px 20px;

        margin: 0 auto;

        width: 900px;

}

.post {

	margin: 0 0 30px;

        

	}



	

.narrowcolumn .postmetadata {

	padding:0;

	margin:0;

	padding: 20px 0 40px;

	}



.narrowcolumn .postmetadata2 {

	border-top: 1px solid #eee;

	border-bottom: 1px solid #eee;

	padding: 13px 0 16px 0;

}



.postmetadata {

	clear: both;

	font-size: 0.8em;

}



.clear {

	clear: both;

}



#footer {

	padding: 0;

	margin: 0 auto;

	width: 960px;

	clear: both;

 	overflow: hidden;

	}

	

#footerarea {

	width: 960px;

	margin: 0 auto;	

}



#footerarea span {

	margin: 0;

	padding: 30px 40px;

	font-size: 1.1em;

	}

	

#footerarea span#footerleft {

	float:left;	

}



#footerarea span#footerright {

	float:right;

}

/* End Structure */





/*	Begin Headers */

h1 {

	padding-top: 20px;

	padding-bottom: 5px;

	line-height: 60px;

	padding-left:0;

	margin: 0;

	}

#header h1 {

	padding-left:40px;

        position: relative; left: -9999px;

	}	



h2 {

	margin: 10px 0 2px 0;

	padding-top: 10px;

	}





#sidebar h2 {

	margin: 5px 0 0;

	padding: 0;

	}



h3 {

	padding:0;

	margin: 30px 0 0;

	}



h3.comments {

	padding: 0;

	margin: 40px auto 20px ;

	}

/* End Headers */







/* Begin Images */

.entry img {

	padding: 5px;

	border: 2px solid #aaaaaa;

	}



/*	Using 'class="alignright"' on an image will (who would've

	thought?!) align the image to the right. And using 'class="centered',

	will of course center the image. This is much better than using

	align="center", being much more futureproof (and valid) */



img.centered {

	margin-left: auto;

	margin-right: auto;

	}



img.alignright {

	padding: 5px;

	margin: 0 0 5px 15px;

	}



img.alignleft {

	padding: 5px;

	margin: 0 15px 5px 0;

	}



.alignright {

	float: right;

	}



.alignleft {

	float: left

	}

/* End Images */







/* Begin Lists



	Special stylized non-IE bullets

	Do not work in Internet Explorer, which merely default to normal bullets. */







.entry {

	border: 5px solid #bbbbbb;

        background: #eeeeee;

	margin-top: 15px;

	margin-bottom: 20px;

        padding: 15px;

	float: left;

}



.entry p {

	padding: 7px 0 7px 0;

	margin: 0;

}

.entry p a.img {

	border: none;

	background: none;

}

.entry p a.img:hover {

	border: none;

	background: none;

}





/* end */



html>body .entry ul {

	margin-left: 50px;

	padding: 0 0 0 30px;

	padding-left: 10px;

	

	}



html>body .entry li {

	margin: 0;

	}







.entry  ol, .entry ul {

	padding:0;

	margin:  5px 0 5px 50px;

	}



.entry ol li, .entry ul li {

	margin: 0;

	padding: 0;

	}

	



.postmetadata ul, .postmetadata li {

	display: inline;

	list-style-type: none;

	list-style-image: none;

	}



#sidebar ul, #sidebar ul ol {

	margin: 0;

	padding: 0;	

	}



#sidebar ul li {

	list-style-type: none;

	margin-bottom: 15px;

	

	}



#sidebar ul p, #sidebar ul select {

	margin: 0;

	}



#sidebar ul ul, #sidebar ul ol {

	margin:0px;

	}



#sidebar ul ul ul, #sidebar ul ol {

	margin:0;

	}



ol li, #sidebar ul ol li {

	list-style: decimal outside;



	}



#sidebar ul ul li, #sidebar ul ol li {

	margin: 0;

	padding:0;

	list-style:none;

	

	}

	

#sidebar a {
        color: #555555;
	
        border: none;

	background: none;	

	display: block;

	padding: 5px 5px;

	padding-left: 20px;

}

#sidebar a:hover {

	color: #111111;

	

}	



* html #sidebar a {

	height: 1px;

}

	







#sidebar .textwidget {

	margin: 6px;

}



	

/* End Entry Lists */







/* Begin Form Elements */

#searchform {

	margin: 0;

	padding: 5px 15px 5px 10px;

        text-align: right;

	}





#header #searchform #s {

	width: 225px;

	padding: 4px;

	font: 1.4em "Trebuchet MS", arial, sans-serif;

	background: #eeeeee;

	color: #333333;

	border: 2px solid #bbbbbb;

        position: relative; top: -61px;

        }



#header #searchsubmit {

	padding: 3px;

	background: #bbb;

	border: 2px solid #eee;

	color: #eee;

	font: 1.4em "Trebuchet MS", arial, sans-serif;

	font-weight: bold;

        position: relative; top: -61px;

        

	}





#content #searchform #s {

	width: 200px;

	padding: 4px;

	font: 1.1em "Trebuchet MS", arial, sans-serif;

	background: #eeeeee;

	color: #333333;

	border: 2px solid #bbbbbb;

	}



#content #searchsubmit {

	padding: 3px 10px;

	background: #bbbbbb;

	border: 2px solid #eeeeee;

	color: #eeeeee;

	font: 1.1em "Trebuchet MS", arial, sans-serif;

	font-weight: bold;

	}	



.entry form { /* This is mainly for password protected posts, makes them look better. */

	text-align:center;

	}



select {

	width: 130px;

	}

#commentform{

	margin-bottom: 60px;

}	

#commentform input {

	width: 170px;

	padding: 2px;

	margin: 5px 5px 1px 0;

	border: 2px solid #bbbbbb;

        color: #333333;

        background: #eeeeee;

	}



#commentform textarea {

	margin-top: 5px;

	width: 580px;

	padding: 2px;

        color: #333333;

	border: 2px solid #bbbbbb;

        background: #eeeeee;

	}



#commentform #submit {

	margin-top: 5px;

	padding: 5px;

	background: #bbb;

	border: 2px solid #eee;

	font-weight: bold;

	font-size: 1em;

	color:#eee;

	}

/* End Form Elements */







/* Begin Comments*/





.commentlist {

	padding: 0;

	text-align: left;

	}



.commentlist li {

	margin: 15px 0 3px;

	list-style: none;

	padding: 20px;

	border: 5px solid #bbbbbb;

        width: 540px;	

	}



.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;

	}



.subscribe-to-comments input #subscribe {

        border: 2px solid #bbbbbb;

        background: #eeeeee;

}

/* End Comments */







/* Begin Sidebar */

#sidebar

{	

	width: 245px;

	float: right;

	margin: 45px 20px 20px 30px;

	

	}



#sidebar form {

	margin: 0;

	}

	



/* End Sidebar */













/* Begin Various Tags & Classes */

acronym, abbr, span.caps {

	cursor: help;

	}



acronym, abbr {

	border-bottom: 1px dashed #ccc;

	}



blockquote {

	margin: 15px 30px 0 10px;

	padding-left: 20px;

	border-left: 3px solid #bbb;

	}



blockquote cite {

	margin: 5px 0 0;

	display: block;

	}



.center {

	text-align: center;

	}



.hidden {

	display: none;

	}



hr {

	display: none;

	}



a img {

	border: none;

	}

	

.pagenavi {

	display: block;

	text-align: center;

	margin-top: 10px;

	margin-bottom: 60px;

	}





	

pre {

	width: 500px; margin-right: 250px;

}

/* End Various Tags & Classes*/







/* Captions */

.aligncenter,

div.aligncenter {

	display: block;

	margin-left: auto;

	margin-right: auto;

}



.wp-caption {

	border: 1px solid #ddd;

	text-align: center;

	background-color: #f3f3f3;

	padding-top: 4px;

	margin: 10px;

	

}



.wp-caption img {

	margin: 0;

	padding: 0;

	border: 0 none;

}



.wp-caption p.wp-caption-text {

	font-size: 11px;

	line-height: 17px;

	padding: 0 4px 5px;

	margin: 0;

}





/* End captions */



img.wp-smiley {

	border:none;

	padding: 0;

}



.entry a.more-link {

	padding: 1px 6px;

	background:#ddd;

	color: #666666;

	border-bottom: 1px solid #ccc;

	font-size:0.8em;

	font-weight: bold;

	float:right;

	}

.entry a.more-link:hover {

	background: #E8C8C8;

	border-bottom: 1px solid #c47373;

	color:#333333;

}







#sidebar li#rssfeeds{

	padding-left: 18px;

	margin-left: 5px;

	margin-top: 10px;

	background:url(images/rss.gif) left center no-repeat;

}

#sidebar li#rssfeeds a, #sidebar .textwidget a, #sidebar #tag_cloud a, #sidebar p a {

	background: none;

	display:inline-block;

	margin:0;

	padding:0;

}





#sidebar #tag_cloud a{

	margin:5px 5px 0 6px;

}



#sidebar li#rssfeeds a:hover, #sidebar .textwidget a:hover, #sidebar #tag_cloud a:hover, #sidebar p a:hover{

	background: #dddddd;

}



#sidebar #wp-calendar {

	margin:6px;

	padding:0;

}





/* Header Menu */



.clearfix:after {

    content: " ";

    display: block;

    clear: both;

    visibility: hidden;

    line-height: 0;

    height: 0;

}





.clearfix {

    display: inline-block;

}



html[xmlns] .clearfix {

    display: block;

}



* html .clearfix {

    height: 1%;

}





#pagemenu {

	width: 960px;

	background: #dddddd;

	font-size: 1.2em;

}



#pagemenu ul#page-list {

	list-style: none;

	padding: 0 0 0 15px;

	width: 960px;	

	margin-top: -40px;

        margin-bottom: 5px;

	display:block; 

	

}



#pagemenu ul li.page_item a, #pagemenu ul li.cat-item a {

	color: #333;

	font-weight: bold;

	padding: 0px 20px;

	text-decoration: none;	

	border: 3px solid #bbbbbb;

       	background:#eeeeee;

	

}



#pagemenu ul li.page_item a:hover, #pagemenu ul li.cat-item a:hover {

	text-decoration: none;

	color: #ffffff;

	background: #dddddd;

        }



#pagemenu ul li.page_item, #pagemenu ul li.cat-item { background: #ddd;}



#pagemenu ul li.current_page_item, #pagemenu ul li.current_page_item a, #pagemenu ul li.current_page_item a:hover, #pagemenu ul li.current-cat, #pagemenu ul li.current-cat a, #pagemenu ul li.current-cat a:hover { 

	color: #000; 

	background: #fafafa;

	}

	

#pagemenu ul li.current_page_item li a {

	background:#eee;

	color: #888;

}



#pagemenu  #page-list {

	margin:0; padding:0;

}

		

	#pagemenu #page-list li {

		padding:0px;

		float:left;

		list-style: none;

		line-height:28px;

		display: inline;

		margin-left: 5px;

		

	}

	

	#pagemenu #page-list li a, #page-list li ul li a{		

	    display:block		

	}

	

	#pagemenu #page-list li:hover {

		background:#eee;

	}





#pagemenu #page-list li ul {

	position: absolute;

	width: 12em;

	left: -999em;

	border: 1px solid #ddd;

	border-top: none;

	margin:0;

	padding:0; 

	

}

#pagemenu #page-list li:hover ul, #pagemenu #page-list li.sfhover ul {

	left: auto;

	z-index:1000;	

}

#pagemenu #page-list li ul li {

    background: #eee;

	border-top: 1px solid #ddd;

	line-height:28px;	

	width:12em;

	margin:0px;

}

#pagemenu #page-list li:hover, #pagemenu #page-list li.hover {

    position: static;

}

#pagemenu #page-list li ul ul {

	margin: -29px 0 0 12em;

}

#pagemenu #page-list li:hover ul ul, #pagemenu #page-list li.sfhover ul ul {

	left: -999em;

}

#pagemenu #page-list li:hover ul, #pagemenu #page-list li li:hover ul, #pagemenu #page-list li.sfhover ul, #pagemenu #page-list li li.sfhover ul {

	left: auto;

}

#pagemenu #page-list li:hover ul ul, #pagemenu #page-list li:hover ul ul ul, #pagemenu #page-list li.sfhover ul ul, #pagemenu #page-list li.sfhover ul ul ul {

	left: -999em;

}

#pagemenu #page-list li:hover ul, #pagemenu #page-list li li:hover ul, #pagemenu #page-list li li li:hover ul, #pagemenu #page-list li.sfhover ul, #pagemenu #page-list li li.sfhover ul, #pagemenu #page-list li li li.sfhover ul {

	left: auto;

} 



/* Header Menu End */





/* sidebar ul li pages category */



#sidebar .page_item ul li, #sidebar .cat-item ul li{

	padding-left: 15px;

} 





#graphic_menu {

    width: 960px;

    height: 120px;

    background: url(images/header_gray1_960x240.png);

    background-repeat: no-repeat;

    margin: 30px auto 10px;

    position: relative;

}



#graphic_menu li {



    margin: 0 auto;



    padding: 0; 



    list-style: none;



    position: absolute; top: 0;

}



#graphic_menu li, #graphic_menu a {



    height: 120px; display: block;

}





#nav1 {

    left: 0; width: 120px;

}

#nav2 {

    left: 121px; width: 120px;

}

#nav3 {

    left: 241px; width: 120px;

}

#nav4 {

    left: 361px; width: 120px;

}

#nav5 {

    left: 481px; width: 120px;

}

#nav6 {

    left: 601px; width: 120px;

}

#nav7 {

    left: 721px; width: 120px;

}

#nav8 {

    left: 841px; width: 120px;

}





#nav1 a:hover {

    background: url(images/header_gray1_960x240.png);

    background-position: 0px -120px;

    background-repeat: no-repeat;

}

#nav2 a:hover {

    background: url(images/header_gray1_960x240.png);

    background-position: -121px -120px;

    background-repeat: no-repeat;

}

#nav3 a:hover {

    background: url(images/header_gray1_960x240.png);

    background-position: -241px -120px;

    background-repeat: no-repeat;

}

#nav4 a:hover {

    background: url(images/header_gray1_960x240.png);

    background-position: -361px -120px;

    background-repeat: no-repeat;

}

#nav5 a:hover {

    background: url(images/header_gray1_960x240.png);

    background-position: -481px -120px;

    background-repeat: no-repeat;

} 

#nav6 a:hover {

    background: url(images/header_gray1_960x240.png);

    background-position: -601px -120px;

    background-repeat: no-repeat;

}

#nav7 a:hover {

    background: url(images/header_gray1_960x240.png);

    background-position: -721px -120px;

    background-repeat: no-repeat;

}

#nav8 a:hover {

    background: url(images/header_gray1_960x240.png);

    background-position: -841px -120px;

    background-repeat: no-repeat;

}



#header_link {



    width: 960px;



    height: 80px;



    background: url(images/rollover_header_960x160.png);



    margin: 0 auto;



    padding: 0;



    position: relative;

}



#header_link li {



    margin: 0;



    padding: 0;



    list-style: none;



    position: absolute; top: 0;

}



#header_link li, #header_link a {



    height: 80px; 



    display: block;

}



#back_home {



    left: 0;



    width: 960px;

}



#back_home a:hover {



    background: url(images/rollover_header_960x160.png);



    background-position: 0 -80px;



    background-repeat: no-repeat;

}

#archive_wrap {
    width: 560px;
}

#archive_month {
     float: left;
     background: #eee;
     border: 5px solid #bbb;
     padding: 0 20px 15px 15px;
     margin-right: 35px;
     margin-top: 25px;
}

#archive_subject {
     float: right;
     background: #eee;
     border: 5px solid #bbb;
     padding: 0 20px 15px 15px;
     margin-top: 25px;
}

#allposts {
     width: 700px;
     background: #eee;
     border: 5px solid #bbb;
     padding: 20px;
     line-height: 1.6em;
}
#allposts li {
     list-style-type: none;
}

#archive_month li {
   line-height: 1.6em;  
}

#archive_subject li {
    line-height: 1.6em;
}

#tagwrap {
     width: 880px;
     background: #eee;
     border: 5px solid #bbb;
     padding: 20px;
}


#social {

    width: 420px;

    height: 60px;

    background: url(images/social-sprite-gray-420x120.png);

    background-repeat: no-repeat;

    margin: 10px auto;

    position: relative;

}



#social li {



    margin: 0 auto;



    padding: 0; 



    list-style: none;



    position: absolute; top: 0;

}



#social li, #social a {



    height: 60px; display: block;

}





#face {

    left: 0; width: 60px;

}

#technorati {

    left: 61px; width: 60px;

}

#delicious {

    left: 121px; width: 60px;

}

#reddit {

    left: 181px; width: 60px;

}

#stumbleupon {

    left: 241px; width: 60px;

}

#google {

    left: 301px; width: 60px;

}

#digg {

    left: 361px; width: 60px;

}





#face a:hover {

    background: url(images/social-sprite-gray-420x120.png);

    background-position: 0px -60px;

    background-repeat: no-repeat;

}

#technorati a:hover {

    background: url(images/social-sprite-gray-420x120.png);

    background-position: -61px -60px;

    background-repeat: no-repeat;

}

#delicious a:hover {

    background: url(images/social-sprite-gray-420x120.png);

    background-position: -121px -60px;

    background-repeat: no-repeat;

}

#reddit a:hover {

    background: url(images/social-sprite-gray-420x120.png);

    background-position: -181px -60px;

    background-repeat: no-repeat;

}

#stumbleupon a:hover {

    background: url(images/social-sprite-gray-420x120.png);

    background-position: -241px -60px;

    background-repeat: no-repeat;

} 

#google a:hover {

    background: url(images/social-sprite-gray-420x120.png);

    background-position: -301px -60px;

    background-repeat: no-repeat;

}

#digg a:hover {

    background: url(images/social-sprite-gray-420x120.png);

    background-position: -361px -60px;

    background-repeat: no-repeat;

}