/*
Theme Name: Shades Of Grey
Theme URI: http://www.rahhali.com/shadesofgrey/
Description: A clean, image based layout based on a modified Viewport theme by Paul Bennett, http://paulicio.us
Version: 1.0
Author: Nordin Rahhali
Author URI: http://rahhali.com
Tags: pictures, images, simple, clean, viewport, photoblog, photoblogging, photography, video, one column
*/

* {margin:0; padding:0;}
body {	background: #333 !important;	font-family: "Lucida Grande", Tahoma, "Trebuchet MS" !important;	font-size: 62.5% !important;}

a:link, a:visited {	color: #f3f3f3 !important;	text-decoration: none !important;}
p a:link, p a:visited {	color: #FF6 !important; }


a { outline:none !important; }
a:hover, a:active {	color: #A2A2A2 !important;	text-decoration: underline !important;}
ul {	list-style: circle;}
img {	border: none;}
label {	margin-left: 10px;}
blockquote {	margin: 0px 5px 10px 5px;	padding: 10px 10px 1px 10px;	font-style: italic;	font-family: "Times New Roman", Times, serif !important;	font-size: 1.4em;}
span.left { float: left; }
span.right { float: right; }
.clearer { clear: both; }
.aligncenter,
div.aligncenter {   display: block;   margin-left: auto;   margin-right: auto;}
.alignleft {   float: left;}
.alignright {   float: right;}

.ParagraphBigLetter { 	color: #FFFFFF ; font-family: "Times New Roman", Times, serif; font-size: 18px; font-weight: bold}
.SmallText {  	font-size: 10px}
.BoldHeaders { 	font-size: 14px; color: #FFFFFF; font-weight: bold}

.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: 4px 5px 0 5px;   margin: 0;}

#page {	min-width: 950px;	max-width: 1064px;	margin: 0px auto;	position: relative;}
#header {	width: 940px;	height: 100px;	margin: 0px auto;	padding-bottom: 10px;}
#header h1 {	padding: 18px 0 6px 0;	font-size: 3.2em;}

#mid {	width: 100%;	padding-bottom: 20px;	margin-top: 10px;}
#mid.index {	background: transparent url(images/indexbg.png) no-repeat 50% 0;}
#mid.single {	background: transparent url(images/singlebg.png) no-repeat 50% 0;}
#mid.archive {	background: none;}

.panel, .panel-single {	color: #efefef;	position: relative; 	display: block; 	width: 940px;	height: 600px;}
.panel-single {	height: 300px;	margin: 0px auto;	padding-top: 10px;}
/* broke safari? .panel-single a img { position:absolute;top:0;bottom:0;margin:auto;} */

.wrapper-archive {	width: 270px;	height: 240px;	padding: 10px;	margin: 0 10px 10px 10px;	display: block;	position: relative;	float: left;	overflow: hidden;	background-color: #1B1B1B;}
.wrapper-archive .post-title {	max-width: 220px;	font-size: 1.4em;}
.wrapper a img {margin:auto; display: block;}
#nrtest { width:940px; height: 300px; margin: auto;}
/* MAIN BODY, POSTS AND PAGES
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

.post-title, .post-title-single {	max-width: 870px;	padding: 10px;	position: absolute;	top: 20px;	left: 20px;	z-index: 1;	background: transparent url(images/titlebg.png) repeat 0 0;	font-size: 3em;	font-weight: normal;}

/* hover code for visibility 
.post-title {visibility:hidden;}
.panel:hover .post-title, .post-title:hover .post-title {visibility:visible;}
*/

.post-title a, .post-title-single a, .entry a {	color: #efefef;	text-decoration: none;}
.post-title-single {	top: 30px;}
.entry {	max-height: 540px;	max-width: 440px;	padding: 15px;	position: absolute;	bottom: 20px;	right: 20px;	z-index: 1;	background: transparent url(images/titlebg.png) repeat 0 0;	font-size: 1.2em;	line-height: 1.5em;	text-align: justify; }
.entry ul {	margin: 5px 0 10px 0;}
.entry li {	padding: 5px 0 7px 0;	border-bottom: 1px solid #3b3b3b;	list-style: none;}
.entry a:hover {	color: #c6c6c6;}
.entry .big {	font-size: 2em;}
.entry .rss-big {	padding-right: 24px;	background: transparent url(images/rss.png) no-repeat 100% 60%;}

.content-top {	height: 15px;	width: 1064px;	background: transparent url(images/content/top.png) no-repeat 0 0;}
.content-mid {	width: 1024px;	padding: 0 20px;	background: transparent url(images/content/mid.png) repeat-y 0 0;}
/*.content-mid img {	display:block;	margin: 0 auto;}*/
.content-bottom {	height: 15px;	width: 1064px;	background: transparent url(images/content/bottom.png) no-repeat 0 0;}

.postmetadata {	padding-bottom: 10px;	margin-bottom: 5px;	line-height: 1.5em;}
.postmetadata-archive {	width: 100%;	height: 58px;	padding-top: 10px;	color: #efefef;	line-height: 1.5em;}

#thepost {	margin-bottom: 15px;}
#content {	width: 1064px;	margin: 0px auto;	font-size: 1.2em;	color: #D7D7D7;}

#narrow-column {	width: 1064px;}
#narrow-column p, #narrow-column h3 {	padding-bottom: 10px;}
#narrow-column p a {	font-weight: bold;	color: #efefef;}
#narrow-column ul {	margin: 0 0 10px 20px;}
#narrow-column input, #narrow-column textarea {	padding: 6px;	border: 1px solid #737373;	}
#narrow-column #submit {	padding: 6px;	border: 1px solid #737373;	background-color: #555;	color: #efefef;}
#narrow-column #submit:hover {	background-color: #333;	color: #efefef;}
#narrow-column textarea {	width: 545px;}

/* COMMENTS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
#thecomments {	width: 590px;	margin: 0px auto;}
.url {}
#comment {	background-color: #171717;	color: #f3f3f3;}
.commentlist {	list-style: none;	margin-bottom: 10px; color: #f3f3f3;}
.commentlist span.left {	line-height: 32px;}
.commentlist span.left a {	font-weight: bold;	line-height: 32px;}
.commentlist span.right a {	font-size: 0.8em;	color: #f3f3f3;	line-height: 32px; padding-right: 10px;}
.commentbox-top {	height: 15px;	width: 590px;	background: transparent url(images/comments/top.png) no-repeat 0 0;}
.commentbox-mid {	width: 590px;	padding: 0 20px;	background: transparent url(images/comments/mid.png) repeat-y 0 0;}
.commentbox-bottom {	height: 15px;	width: 590px;	background: transparent url(images/comments/bottom.png) no-repeat 0 0;}
.comment-top {	width: 560px;	height: 32px;	padding: 0px;	padding-bottom: 0;	background: #fff url(images/comments/head.png) no-repeat 0 0;}
.commentlist span img{	padding-right: 10px;;}
.comment-mid {	width: 540px;	padding: 15px 10px;	padding-bottom: 5px;}
.comment-bottom {	width: 590px;	height: 10px;	background: #fff url(images/comments/bottom.png) no-repeat 0 0;}
.commentmetadata {	font-size: 0.8em;}
.commentbox-mid input {background:#f3f3f3;}
/* The following is from needed comments plugin, Wordpress Thread Comment */
.editComment, .editableComment, .textComment{	display: inline;}
.comment-childs{	border: 1px solid #999;	margin: 5px 2px 2px 4px;	padding: 4px 2px 2px 4px;	background-color: #535353;}
.chalt{	background-color: #333;}
#newcomment{	border:1px dashed #777;width:90%;}
#newcommentsubmit{	color:red;	font-weight: bold;}
.adminreplycomment{	border:1px dashed #777;	width:99%;	margin:4px;	padding:4px;}
.mvccls{	color: #999;}
.comment-sig {	background: transparent url(images/comments/mysig.png) no-repeat 0 0 !important;}

/* SIDEBAR
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

#sidebar {	width: 100px;	line-height: 1.5em;	float: right;}
.sidebar-top {	height: 15px;	width: 300px;	background: transparent url(images/sidebar/top.png) no-repeat 0 0;}
.sidebar-mid {	width: 260px;	padding: 0 20px;	background: transparent url(images/sidebar/mid.png) repeat-y 0 0;}
.sidebar-bottom {	height: 15px;	width: 300px;	background: transparent url(images/sidebar/bottom.png) no-repeat 0 0;}
#sidebar li {	list-style: none;}
#sidebar h2 {	margin: 10px 0;	padding-top: 10px;	border-top: 1px solid #c6c6c6;}

/* FOOTER
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

#footer {	width: 940px;	margin: 0px auto;	padding-bottom: 10px;	text-align: right;	font-size: 0.9em;	color: #9e9e9e;}
#footer a {	color: #9e9e9e;}
#footer a.valid {	padding-left: 16px;	background: transparent url(images/tick.png) no-repeat 0% 50%;}
#footer a.valid:hover {	background: transparent url(images/tick-hover.png) no-repeat 0% 50%;}
#footer p a:link, #footer p a:visited {	color: #f3f3f3 !important;	text-decoration: none !important;}

.singleNavL, .singleNavR {	position: absolute;	top: 110px; z-index: 5000;}
.singleNavL { 	right: 950px; }
.singleNavR { 	 left: 950px; }

/* Coda Slider
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

/* These 2 lines specify style applied while slider is loading */
.csw {width: 100%; height: 600px; overflow: hidden}
.csw .loading {margin: 0; text-align: center}

.stripViewer { /* This is the viewing window */
	position: relative;
	overflow: hidden;
	clear: both;
	width: 940px;
	height: 600px;
	margin: 0px auto;
	padding-top: 5px;
	
}

.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
	position: relative;
	left: 0; top: 0;
	width: 100%;
	/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
}

.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
	float:left;
	height: 600px;
	position: relative;
	width: 940px; /* Also specified in  .stripViewer  above */
}

.stripNavL, .stripNavR {
	position: relative;
	top: -360px;
	z-index: 200;
}

.stripNavL { float: left; }

.stripNavR { float: right; }


/* Menus
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */


#searchbox {	width: 285px;	margin-top: 4px;	float: right;}
#searchbox li {	width: 285px;	height: 26px;	background: transparent url(images/search.png) no-repeat 0 0;	list-style: none;}
#searchbox input {	width: 270px;	background: none;	border: none;	padding: 6px 8px 6px 8px; color: #efefef;	font-size: 1.2em;}



#nav {	width: 500px;	float: left;	font-size: 1.2em;	text-transform: lowercase;}
/* #nav li {	display: inline; float: left; color: #efefef; padding: 10px 6px; list-style: none;	background: transparent url(images/navbar/mid.png) repeat-x 0 0;} */
#nav a {	color: #efefef;}
#nav a:hover {	color: #DEDEDE;}
#nav .subscribe {	padding-right: 20px;	background: transparent url(images/rss.png) no-repeat 100% 50%;}
#nav li.left {	height: 36px;	width: 15px;	padding: 0;	background: transparent url(images/navbar/left.png) no-repeat 0 0;}
#nav li.right {	height: 36px;	width: 15px;	padding: 0;	background: transparent url(images/navbar/right.png) no-repeat 0 0;}

/* another! menu 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

/* common styling */
/*.menu {font-family: arial, sans-serif; height:100px; position:relative; font-size:11px; z-index:100;}*/
.menu {height:25px; position:relative; z-index:100;}
.menu li {display: inline; float: left; color: #efefef; padding: 7px 6px; list-style: none;	background: transparent url(images/navbar/mid.png) repeat-x 0 0; }
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none;text-align:left; line-height:20px;  overflow:hidden;}
.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}
.menu ul li ul li {background: transparent url(images/titlebg.png) repeat 0 0; padding: 0px 6px;z-index:100;top: 10px;width: 80px}

/* specific to non IE browsers 
.menu ul li:hover a {color:#fff; }
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:75px;}
.menu ul li:hover ul li a.hide {color:#fff;}
.menu ul li:hover ul li:hover a.hide {color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; color:#000;}
.menu ul li:hover ul li a:hover {color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:75px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-75px;}*/

.menu ul li:hover a {color:#fff;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:75px;}
.menu ul li:hover ul li a.hide {color:#fff;}
.menu ul li:hover ul li:hover a.hide {color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block;  color:#000;}
.menu ul li:hover ul li a:hover {background:#363737; color:#000; width: 80px;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:75px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-75px;}

/* Sociable Bookmarks CSS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  
Remember, I ALTERED the sociable plugin to use <span> instead of <div>. If I upgrade and shit breaks, it's because of that.
*/

span.sociable {
	margin: 0px 0;
	float: right;
}

span.sociable_tagline { position: relative; }
span.sociable_tagline span { display: none; width: 14em; }
span.sociable_tagline:hover span {
	position: absolute;
	display: block;
	top: -5em;
	background: #ffe;
	border: 1px solid #ccc;
	color: black;
	line-height: 1.25em;
}
.sociable span {
	display: block;
}
.sociable ul {
	display: inline;
	margin: 0 !important;
	padding: 0 !important;
}
.sociable ul li {
	background: none;
	display: inline !important;
	list-style-type: none;
	margin: 0;
	padding: 1px;
}
.sociable ul li:before { content: ""; }
.sociable img {
	float: none;
	width: 16px;
	height: 16px;
	border: 0;
	margin: 0;
	padding: 0;
}

.sociable-hovers {
	opacity: .4;
	-moz-opacity: .4;
	filter: alpha(opacity=40);
}
.sociable-hovers:hover {
	opacity: 1;
	-moz-opacity: 1;
	filter: alpha(opacity=100);
}