/*   
Theme Name:Piano Black
Theme URI:
Description:This theme supports widget, threaded-comments, theme-options,and translation is ready. Also including page-navigation and multi level dropdown menu.You can see live demo including more information here http://www.mono-lab.net/demo3/
Author:mono-lab
Author URI:http://www.mono-lab.net
Version:1.3
Tags: black, two-columns, fixed-width, theme-options, threaded-comments, translation-ready
*/

/*  ------ basic ------------------- */

body { margin:0; padding:0; background:url(img/back1.gif);
       font-family: Arial, Helvetica, sans-serif; 
       font-size:12px; color:#b8babb; text-align:center; }
a img { border:none; }
a, a:visited { color:#999; text-decoration:none; outline:none; }
a:hover { color:#eee; text-decoration:none; }
p { margin:0 0 1em 0; padding:0; line-height:160%; }
ul { list-style-type:none; margin:0 0 1em 0; padding:0; line-height:0%; }
ul li { margin:0; padding:0; line-height:normal; }
ol { margin:0 0 1em 19px; padding:0; }
* html ol { margin:0 0 1em 23px; padding:0; }
ol li { padding:0 0 5px 0; }
form,table,input,textarea,dl,dt,dd { margin:0; padding:0; }
table { border-collapse:collapse; border:0; width:100%; }
blockquote { margin:0 0 1em 0; padding:15px 20px 0 20px; border:1px solid #333; background:#222; }
blockquote a, blockquote a:visited { text-decoration:underline; }
pre { border:1px solid #333; background:#222; padding:10px 20px; margin:0 0 1em 0; overflow:auto; }
object { display:block; margin:0 auto; }
.wp-caption-text { text-align:center; }
.alignright { float:right; }
.alignleft { float:left; }
.aligncenter { margin-left:auto; margin-right:auto; }
.centered { margin-left:auto; margin-right:auto; }
.clear { clear:both; }


/*  ------ layout ------------------------ */

#wrapper { background:url(img/back2.png) no-repeat center top; }
#contents { width:959px; margin:0 auto; text-align:left; }
#header { background:url(img/top.png) no-repeat bottom; height:160px; }
#middle-contents { background:url(img/side.png) repeat-y; padding-bottom:50px; }
#left-col { float:left; display:inline; width:584px; margin:0 0 0 5px; }
#right-col { float:right; display:inline; width:330px; margin:30px 5px 0 0; }
#footer { background:url(img/bottom.png) no-repeat top; height:114px; margin-bottom:50px; }


/*  ------ header ---------------------- */


/* blog title */
#logo-wrapper { float:left; height:155px; margin:5px 0 0 16px; width:720px; background: url(img/logo.jpg) no-repeat left top;}
#logo { float:left; display:inline; padding:48px 0 0 25px;}
#logo a, 
#logo a:visited { 
    font: italic 32px Arial, Helvetica, sans-serif; 
    letter-spacing: 0.06em;
    text-shadow: 3px 3px 3px #000;
    color:#eee; font-size:30px; }
#logo a:hover { text-decoration:none; color:#999; }
#logo h1 { font-weight:normal; font-size:14px; letter-spacing: 0.1em; line-height:100%; margin:0; padding:6px 0; color:#aaa;}

#rss-feed { font-size:11px; float:right; margin:60px 20px 0 0; display:inline; color:#777; background:url(/images/rss.png) no-repeat left top; height:48px; width:48px; padding:0px 12px 0 0px; }
#twitter-feed { font-size:11px; float:right; margin:60px 0 0 0; display:inline; color:#777; background:url(/images/twitter.png) no-repeat left top; height:48px; width:48px; padding:0px 12px 0 0px; }
#facebook-feed { font-size:11px; float:right; margin:60px 0 0 0; display:inline; color:#777; background:url(/images/facebook.png) no-repeat left top; height:48px; width:48px; padding:0px 12px 0 0px; }

#search-area { float:right; display:inline; width:183px; height:29px; margin:70px 47px 0 0; background:url(img/search-area.gif) no-repeat; }
#search-input { float:left; margin:8px 0 0 24px; border:0px; height:17px; display:inline; width:125px; font-size:12px; color:#7e7e7e; background:transparent; }
#search-button { float:right; }


/*  ------ left-col ------------- */

.post { margin:30px 0 5px 35px; }

.post h2 { margin:0 0 4px 0; padding:0; line-height:100%; text-shadow: 2px 2px 2px #000}
.post h2 a, .post h2 a:visited, #single h2 { color:#ccc; font-size:16px; line-height:120%; font-weight:normal; }
.post h2 a:hover { text-decoration:none; color:#999; }
.post-info { margin:0; }
.post-info li { display:inline; font-size:11px; color:#797f80; margin:0 10px 0 0; }
.write-comment { background:url(img/arrow1.gif) no-repeat left center; padding:0 0 0 11px; }
.post-info a, .post-info a:visited { color:#777; }
.post-info a:hover { color:#999; }

.post-content { clear:both; padding:15px 0 40px 0; line-height:160%; }
.post-content p { margin:0 0 1em 0; line-height:160%; }
/* .post-content a,.post-content a:visited { text-decoration:underline; } */
.post-content a.more-link, .post-content a.more-link:visited 
  { display:block; clear:both; margin:15px 0 5px 0; height:23px; padding:6px 0 0 35px; background:url(img/arrow3.gif) no-repeat left top; text-decoration:none; }
.post-content a.more-link:hover { background:url(img/arrow3.gif) no-repeat left bottom; text-decoration:none; }

/*.post img, .post a img { border:1px solid #222; padding:5px; margin:0;  background:#555; }*/
/* .post a:hover img { border:1px solid #849ca0; background:#59847d; } */
.post img.centered,div.centered { display:block; margin:0 auto; }
.post img.aligncenter,div.aligncenter { display:block; margin:0 auto; }
.post img.alignright, div.alignright { margin:4px 0 10px 10px; display:inline; }
.post img.alignleft, div.alignleft { margin:4px 10px 10px 0; display:inline; }
.post img.wp-smiley { border:0px; padding:0px; margin:0px; background:none; }

.post table { margin:0 0 1em 0; }
.post td, .post th { border:1px solid #333; padding:15px; }
.post th { background-color:#000; font-weight:normal; }
.post-content ul li { margin:0 0 0 0; /* line-height:160%; background:url(img/bullet1.gif) no-repeat left 9px;*/ padding:0 0 0 12px; }
.post-content input { margin:5px 0; }

.post-meta { background:url(img/meta-top.gif) no-repeat right top; padding:13px 0 0 0; width:585px; }
.post-meta ul { background:url(img/meta-bottom.gif) no-repeat right bottom; padding:0 10px 10px 30px; line-height:0%; }
.post-meta li { display:inline; font-size:11px; line-height:140%; }
.post-category { float:left; width:345px; background:url(img/category-icon.gif) no-repeat 2px 2px; padding:0 0 1px 20px; }
.post-tag { float:left; width:345px; background:url(img/tag-icon.gif) no-repeat 2px 2px; padding:0 0 1px 29px; }
.post-comment { float:right; width:80px; background:url(img/write-comment.gif) no-repeat left top; padding:0 10px 2px 22px; }

#back-top { padding:10px 5px 0 15px; font-size:11px; background:url(img/arrow5.gif) no-repeat left 16px; float:right; color:#777; }
#back-top:hover { text-decoration:none; color:#999; }


/*  ------ right-col ------------- */
#information-title { background:url(img/info-box-top.gif) no-repeat left top; padding:25px 20px 5px 20px; width:232px; margin:0 0 0 30px; }
.information-contents { line-height:160%; font-size:11px; color:#868a8d; background:url(img/info-box-bottom.gif) no-repeat left bottom; padding:12px 20px 20px 20px; margin:0 0 50px 30px; width:232px; }

.side-title { margin:0 0 20px 0; font-size:11px; text-transform:uppercase; color:#999; font-weight:normal; line-height:100%; }
.side-box { color:#aaa; margin:0 0 50px 32px; font-size:11px; width:270px; }
#right-col ul { }
#right-col li { margin:0 0 1em 0; line-height:140%; }
#right-col li li { padding:0 0 0 10px; margin:3px 0; background:url(img/bullet1.gif) no-repeat 1px 7px; }

#side-left { float:left; width:128px; padding:0 0 0 32px; }
#side-right { float:right; width:120px; padding:0 30px 0 10px; }
.side-box-short { margin:0 0 50px 0; width:130px; font-size:11px; color:#aaa; }

#side-bottom { clear:both; }

/* this is just for default mode */
#side-left-ex { float:left; width:128px; padding:0 0 0 32px; }
#side-right-ex { float:right; width:120px; padding:0 30px 0 10px; }
#side-bottom-ex { clear:both; }

/* calendar */
#wp-calendar { margin:0 auto; width:100%; color:#777; }
#wp-calendar th, #wp-calendar td { border:1px solid #333; padding:0; width:14%; line-height:220%; text-align:center; }
#wp-calendar th { line-height:100%; padding:4px 0 2px 0; font-weight:normal; background:#000; }
#wp-calendar td a, #wp-calendar td a:visited { display:block; text-decoration:underline; }
#wp-calendar td a:hover { }
#wp-calendar caption { padding:8px 0; }
#wp-calendar tfoot td { border:none; padding:5px 0; }
#wp-calendar #prev a, #wp-calendar #prev a:visited, #wp-calendar #next a, #wp-calendar #next a:visited
  { text-decoration:none; background:none; }
#wp-calendar #prev a:hover, #wp-calendar #next a:hover { text-decoration:underline; }
#wp-calendar td#today { background:#111; text-decoration:underline; color:#81c8d5; }

#copyrights { color:#777; border-left:3px solid #444; padding:1px 0 0 8px; clear:both; }
#copyrights li { margin:0; padding:0; line-height:160%; }
#copyrights a, #copyrights a:visited { color:#777; }
#copyrights a:hover { color:#849ca0; }
#copyrights #wp a { text-decoration:underline; }

#return_top a { position:absolute; position:fixed; right:0; bottom:15px;
                display:block; height:138px; width:38px; background:url(img/return-top.png) no-repeat left top; }
#return_top a:hover { background:url(img/return-top.png) no-repeat right top; text-decoration:none; }

/*  ------ archive ------------- */
.archive, .search-page { margin:25px 0 25px 30px; border-left:3px solid #555; padding-left:10px;  }
.archive h2, .search-page h2 { font-size:14px; color:#fff; margin:0 0 3px 0; display:block; line-height:120%; font-weight:normal; padding:0; }
.archive p, .search-page p { font-size:12px; }
.read-more { padding:0 0 0 0; }

/* ------ page navi -------------- */
.page-navi, .next-previous-navi { margin:50px 0 25px 30px; }
#comment-pager { margin:20px 0 0 0; }
.page-navi li { line-height:0%; display:block; float:left; }
.page-navi a, .page-navi a:visited, .page-navi a:hover,
.page-navi span.pages, .page-navi span.extend, .page-navi span.current, .page-navi span.dots
 { font-size:11px; line-height:100%; margin:0 -1px 25px 0; padding:2px 14px; display:block; float:left; border-right:1px solid #555; border-left:1px solid #555; }

.page-navi span.current { color:#81c8d5; background:url(img/arrow8.gif) no-repeat center bottom; padding-bottom:10px; border:none; }
.page-navi a.prev, .page-navi a:hover.prev, .page-navi a:visited.prev { border-left:none; }
.page-navi a.next, .page-navi a:hover.next, .page-navi a:visited.next { border-right:none; }

#previous-page a, #previous-page a:visited { float:left; display:inline; margin:5px 0 10px 5px; height:22px; padding:7px 0 0 40px; background:url(img/arrow2.gif) no-repeat left top; }
#previous-page a:hover { background:url(img/arrow2.gif) no-repeat left bottom; text-decoration:none; }
#next-page a, #next-page a:visited { float:right; display:inline; margin:5px 0 10px 0; height:22px; padding:7px 40px 0 0; background:url(img/arrow3.gif) no-repeat right top; }
#next-page a:hover { background:url(img/arrow3.gif) no-repeat right bottom; text-decoration:none; }

/*  ------ header for category/archive/search/...etc  ------------- */

.common-navi-wrapper { background:url(img/archive-top.gif) no-repeat right top; padding:13px 0 0 0; width:585px; margin:30px 0 0; }
.common-navi-wrapper p { background:url(img/archive-bottom.gif) no-repeat right bottom; padding:0 10px 10px 32px; margin:0; line-height:140%; }

#archve-title { margin:0 0 0 13px; }
#search-hit { }

/*  ------ page widthout side ------------------------ */
#no-side { background:url(img/side-noside.png) repeat-y; padding:60px 0; }
#no-side .post { margin:0 40px 20px 40px; }
#footer-noside { background:url(img/bottom-noside.png) no-repeat top; height:114px; margin-bottom:50px; }


/*  ------ header-menu ------------------------ */

.header-menu-wrapper { }
#pngfix-right { background:url(img/menu_right.png) no-repeat right top; display:block; width:10px; height:60px; float:right; }
#pngfix-left { background:url(img/menu_left.png) no-repeat left top; display:block; width:10px; height:60px; float:right; }

ul.menu { float:right; background:url(img/menu_middle.png) repeat-x left top; font-size:11px; height:61px; margin:0; }
ul.menu, ul.menu ul { line-height:1; margin:0; padding:0; }
ul.menu li { position:relative; float:left; border-left:1px solid #222; height:55px; padding:0 18px; z-index:100; }
ul.menu ul li { height:auto; border-left:none; padding:0; left:auto;  }
ul.menu #header-menu-home { border:none; }
ul.menu a, ul.menu a:visited { color:#888; display:block; padding:0 15px; line-height:49px; position:relative; top:5px; }
ul.menu a:hover { color:#999; border-bottom:2px solid #999; text-decoration:none; }

ul.menu ul { position:absolute; top:52px; left:0; display:none; opacity:0; width:200px; }
ul.menu ul a, ul.menu ul a:visited { background:#000; line-height:140%; padding:9px 30px 8px; border:1px solid #222; width: 128px; margin:-1px 0 0 0; }
ul.menu ul a:hover { background:#222; border-bottom:1px solid #222; }
ul.menu ul ul { margin: -34px 0 0 189px; top:34px; }

ul.menu .current_page_item a, ul.menu .current_page_item a:visited { color:#869497; border-bottom:2px solid #627376; }
ul.menu .current_page_item a:hover { color:#999; border-bottom:2px solid #999; text-decoration:none; }
ul.menu .current_page_item ul a, ul.menu .current_page_item ul a:visited, ul.menu .current_page_item ul a:hover
              { border-bottom:1px solid #373737; }


/* ---------- clearfix hack ---------- */
.clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
.clearfix { display: inline-block; }
/* exlude MacIE5 \*/
* html .clearfix { height: 1% }
.clearfix {display:block;}
/* end MacIE5 */


	#galleryHolder{
		margin:0 ;
		width:550px;
		height:680px;
	}
	#gallery{
		height:680px;
		width:550px;
		position:absolute;
		margin-top:30px;
		/*border:1px solid #fff;*/
		z-index:900;
		padding:5px;
	}
	
	#picIframe{
	 	height: 650px; 
		width: 554px;
		margin:5px 3px 3px 5px;
		background:transparent;
		position: absolute;
		z-index: 1000;
		top:0;
		}
	#picHolder{
background:#000 none repeat scroll 0 0;
height:670px;
left:-41px;
margin:0px 3px 3px 5px;
opacity:0;
position:absolute;
top:-5px;
width:621px;
z-index:1001;
	 }
	h4#gTitle{
		padding:30px 0px 20px 15px;
		text-transform:uppercase;
		font-family:verdana, arial;
		font-size:14px;
		width:500px;
		color:#fff;
		font-size:16px;
		font-weight:normal;
		margin:0;
	}
/*nav */	

#gNav{
	position:absolute;
	z-index:901;
	width:560px;
	background: url(/images/flickr/line.png) no-repeat bottom left;
	height:28px;
}
		#gNav a{
			display:block;
			font-weight:bold;
			color:#fff;
			padding:6px 10px;
			/*border-right:1px solid #fff;*/
			text-align:center;
			background:transparent;
			margin:0;
			cursor:pointer;
		}
		#gNav a:hover,#gNav li.liNavHover a{
			color:#fff;
			background:#999;
		}
		#gNav a.onState, #gNav li.liNavOn a{
			color:#fff;
			background:#000!important;
		}
	#gNav ul{
			margin:0;
			padding:0;
			overflow:hidden;
			list-style:none;
		}
		#gNav li{
			display:block;
			width:100px;
			float:left;
		 	list-style:none;
		}
		
		#gNav li.clearList{
			clear:both;
		}
	
		#gNav li li a, #gNav li.liNavHover li a{
			display:block;
			font-weight:normal;
			color:#fff;
			padding:3px 5px;
			border:none;
			text-align:left;
			background:none;
			margin:0;
		}
		#gNav li li a:hover{
			background:none;
			color:#cacdb8;
		}
		#gNav ul li ul { /* second-level lists */
	
			position: absolute;
			border-top: 1px solid #DCDDDA;	
			z-index:904;
			margin:0;	
			width:598px;
			left:0;
			padding:0;	
			display:none;
			height:auto;
			padding:3px; 
			margin-top:0px;
			background:#7c8d01;
			border-top:1px solid #222d35;
		}
		#gNav li li{
			float:left;
			font-size:11px;
			width:110px;
			overflow:hidden;
			margin:0;
			padding:0;
			display:block;
		}
		
	#gCounter{
		text-align:right;
		position:absolute;
		width:550px;/*same as gallery */
		top:0px;
		margin:20px 10px 0 0;
		font-size:11px;
		clear:both;
		color:#3c5467;
		}
		 #gCounter span.g_counter{padding:0 5px;color:#999;}
		 #gCounter span.pageText{padding:0 5px 0 0px;}
		 #gCounter a{color:#999;font-size:11px; }
		 #gCounter a:hover{color:#7e1d3c;}
		 #gCounter  a.g_disabled{display:none;}
		 
	 
	 #gallery ul {
	 	margin:0;
		padding:0 20px 0 25px;
	 }
	 #gallery ul li{
		 	list-style:none;
			width:75px;
			height:75px;
			margin:0px 0px 20px 20px;
			padding:0px;
			border:2px solid #ccc;
			display:block;
			float:left;
		 }
	
	/* a{color:#ccc; text-decoration:none;}*/
	 
	 #nextButton{
	 	display:block; 
		position:absolute; 
		right:10px; 
		top:280px;
		background:url(/images/flickr/next.gif);
		background-position:0 0;
		text-indent:-1000px;
		width:23px;
		height:31px;
		}
	 #prevButton{
		display:block; 
		position:absolute; 
		left:10px; 
		top:280px;
		background:url(/images/flickr/back.gif);
		background-position:0 0;
		text-indent:-1000px;
		width:23px;
		height:31px;
		}
	 #prevButton:hover, #nextButton:hover{
	 	background-position:0 -31px;
	 }
	#loadingPic{
	  	position:absolute;
	  	top:280px;
	 	left:290px;
	 	z-index: 1002; 
	 	height:32px;
	 	width: 32px;
	  	display:none;
		border:none;
	 }
	 #bigPic{
	 	position:absolute; 
		z-index: 1003;
		opacity: 1;
		border:2px solid #fff;
	 }
	 #imageDetails{
		 display:none;
		 position:absolute;
		 margin:0 auto; 
		 padding:10px 5px;
	 }
	 #imageCount{
	 	float:left;
		margin-right:5px;
		font-size:90%;
		color:#999;
		}
	
	 #imageTitle{
	 	color:#ccc;
		float:left;
		visibility:hidden;
		
	 }
	 #imageDes{
		 display:block;
		 font-size:12px;
		 position:absolute;
		 z-index:10000;
		 color:#fff;
		 padding:10px 5px;
		/* visibility:visible!important;*/
	 }
	#details{
		color:#51788d;
		font-size:11px;
		display:block;
		float:right;
		visibility:hidden;
	}
	#hide{
		color:#51788d;
		display:none;
		float:right;
		font-size:11px;
		visibility:hidden;
	}
	a#hide:hover,a#details:hover{
		color:#669dba;
		
	}
	
	 #picControls{
	 	 position:absolute;
		 margin:0 auto; 
		 display:none;
		 text-align:right;
		 padding:0px 0px 15px 0;
		
	 }
	  #thumbsButton{
		background:url(/images/flickr/thumbs.gif) no-repeat;
		background-position:right 0px;
		font-size:10px;
		width:80px;
		padding:3px 10px 0 0px;
		color:#333;
		letter-spacing:0px;
		height:22px;
		display:block;
		float:right;
		text-align:left;
		}
	 #thumbsButton:hover{
	 	background-position:right -22px;
		color:#999;
	 }

	 .clear{
	 	clear:both;
	 }
	 #loadingMsg{
	 	margin:0px 20px;
	 }
	 #loadingMsg span{display:block;float:left;padding:8px 4px;color:#999;}
	 #loadingMsg img{display:block;float:left;}