/*
---------------------------------Theme CSS Description-------------------------------------
Theme Name: Cheng's Fruity Portfolio
Theme URI: http://chengis.me/
Description: A Home made Theme by Cheng and used for his own site.
Version: 0.1
Author: Cheng
Author URI: http://chengis.me/
Tags: fixed width, widgets
*/


/* 
------------------------------------Resetting Styles---------------------------------------
http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{padding:0;margin:0;}
fieldset,img{border:0;}
table{border-collapse:collapse;border-spacing:0;font-size:1em;}
ol,ul{list-style:none;}
address,caption,cite,code,dfn,em,strong,th,var{font-weight:normal;font-style:normal;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
a:active,a:focus{outline:none;}
b{font-weight:normal;}

/* ------------------------------------Clear fix--------------------------------------- 
http://uninstallme.com/limpiar-flotaciones-otro-metodo-mas/
*/
.clearfix:after{content: ""; display: block; clear: both; height: 0; visibility: hidden;} 
.clearfix{min-height: 0; height: 0;}
html>body .clearfix{height: auto;}
*+html .clearfix { min-height: 1%; } /* IE7 Hack */

/* -----------------------------Wordpress Auto Classes-----------------------------------*/
.alignleft{float: left;}
.alignright{float: right;}
.center{text-align: center;}
.hidden{display: none;}
img { -ms-interpolation-mode: bicubic; }

/* ----------------------------- Styles for All Pages -----------------------------------*/

/* body & container */
body{font-size:62.5%;text-align:center;font-family:"HelveticaNeue",Arial,sans-serif;background:#f4f4f4 url(img/headbg.jpg) repeat-x scroll 0 53px;}
div#container{margin:0 auto;width:990px;text-align:left;padding-top:14px;}
div#header{z-index:99;}
div#page{margin: 50px 0 0 250px; position: relative; min-height:260px ; _height/**/:/**/260px;/* IE 6 only */}

.glassyblock{margin:0 10px 20px 0;position:relative;border:1px solid #c8cacc;background:#f5fafa url(img/long_shadow.png) repeat-x top;
_background-image/**/:/**/none;
}

/* logo */
div#header div#logo a{display:block;width:404px;height:80px;float:left;text-indent:-9999px;background:url(img/menu.png) left top;}
div#header div#logo h1 a:hover{background-position:404px top;}

/* menu */
div#header ul#menu{float:left;width:420px;height:32px;overflow:visible;text-indent:-9999px;margin-top:6px;}
	ul#menu li{float:left;padding-right:11px;}
	ul#menu li a.topmenu{display:block;height:32px;background-image:url(img/menu.png);}
	ul#menu li#menu_blog a.topmenu{width:70px;background-position:0 bottom;}
	ul#menu li#menu_blog a:hover.topmenu{background-position:409px bottom ;}
	ul#menu li#menu_photo a{width:98px;background-position:-80px bottom ;}
	ul#menu li#menu_photo a:hover.topmenu{background-position:329px bottom;}
	ul#menu li#menu_portfolio a{width:105px;background-position:-189px bottom;}
	ul#menu li#menu_portfolio a:hover.topmenu{background-position:220px bottom;}
	ul#menu li#menu_about a{width:96px;background-position:-306px bottom;}
	ul#menu li#menu_about a:hover.topmenu{background-position:103px bottom;}

/* twitter */
div#header div#twitter
	{background:url(img/twitter.png) no-repeat;height:91px;width:404px;float:right;margin:0 0px 0 0;padding:8px 13px 5px 35px; overflow: hidden;}
div#twitter h2,div#twitter h2 a{padding:0 5px 5px 0;}


/* ------------------------------- Blog Frontpage[body#blog] -------------------------------------- */
/* featured in body.blog */
div#featured div.in_featured{width:333px;float:left;height:250px;position:relative;padding:15px;overflow:hidden;}
img.img_post{border: 5px solid #e6efef;width:100px;height:100px;float:left;margin:0 10px 10px 0px;}
div.in_featured h2{margin:0 0 10px 0;}
div#featured #block1 {background:none;width:698px;border:none;border-bottom:1px solid #c8cacc;}
div#featured #block2 {clear:left;}
	#block1 .leading {margin-right:140px}
div#featured #block2,div#featured #block3{border-bottom:1px solid #c8cacc;}
div#featured #block2,div#featured #block4{border-right:1px solid #c8cacc;}
div#featured #block1 img.img_post{width:150px;height:150px;margin-right:20px;margin-bottom: 10px;}
/* recent_list (last block in featured) */

div#featured div#recent_posts{padding:10px;}
ul#recent_list li{margin:3px 0;}
	ul#recent_list a.comment{padding-right:5px;}
	ul#recent_list span.date_post{display:inline;margin-left:4px;}

.leading{margin-top:10px;padding:10px;border-top:#d7e3e7 1px solid;}
.leading p{margin-bottom:5px;line-height:1.4em;}

a.more-link{position:absolute;bottom:5px;right:5px;}

h2.float_title
	{position:absolute;height:95px;width:205px;left:-265px;padding:30px 20px 0 20px;text-align: right;
	 background:url(img/short_shadow.png) right bottom no-repeat;}

/* recent comments */
div#recent_comments ul#comment_list{padding-bottom: 8px;}
ul#comment_list li
	{width:158px;float:left;height:98px;margin:8px 0px 0px 8px;padding:6px;background:white;position:relative;border:1px solid #dae0e3;}
ul#comment_list li .bquote{text-align:left;display:block;margin-bottom:3px;}
ul#comment_list li span.commenter{position:absolute;text-align:right;right:5px;bottom:5px;width:160px;border-top:#d7e3e7 1px solid;padding-top:2px;}

/* -----------------------Sidebar (bottom in fact)------------------------------------*/
div#sidebar{margin: 0px 0px 30px 250px;}
#widget_list{padding:20px 0;}
div#sidebar li.widget{height: 36px; position: relative;}
div#sidebar li.widget h2{position:absolute;width:135px;left:-175px;padding-right:20px;text-align:right;}
#sidebar li.widget ul{padding-left: 10px;}
#sidebar li.widget ul li{float: left;padding: 0px 15px 0 5px;line-height: 34px;}

/* ------------------------------- Footer -------------------------------------- */
div#footer{background:#f4f4f4 url(img/headbg.jpg) repeat-x scroll 0 -83px;}
div#footer_info{width:970px;margin:0 auto;padding:20px 10px 0 10px;text-align:left;height:90px;}
div#footer_info #copyright{float:left;}
div#footer_info #wordpress{float:right;}
	
/* ----------------------------- Single.php[body id="single_blog"] -----------------------------------*/
.navigation{padding:0 0 10px 0; border-bottom: 1px solid #c8cacc;}
#blog_content{padding: 20px 160px 20px 20px;}
#blog_content .entry{background:white;padding:20px;border:1px solid #dae0e3;}
#blog_content .entry p{margin:0 0 15px 0 ;}

div#blog_content h2{margin: 30px 0 40px 0;}
.float_info{position:absolute;height:120px;width:205px;left:-245px;top:0px;padding-right:20px;text-align:right;
			background:url(img/short_shadow.png) right bottom no-repeat;}
.float_info .cat{margin-bottom:10px;border-bottom:1px solid #747f82;}
.float_info .date{margin:5px 0 0px 0;}


/* ----------------------------- Comment Area -----------------------------------*/

/* posted comments */
ol#comment_list{width:300px;padding:20px 10px 20px 20px;float:left;}
ol#comment_list li{clear:both;background:white;padding:10px 0 10px 10px;border:1px solid #dae0e3;	position: relative;}
ol#comment_list li img.avatar{float:left;margin:0 10px 0 0;}
ol#comment_list li h4{display:inline;}
ol#comment_list li .the_comment{padding:5px 10px 0px 50px;}
ol#comment_list img.comment_preview{position: absolute; left: -90px; top: 0; border:3px solid white;}
ol#comment_list li.depth-1{
	margin-bottom: 10px;
}

.reply {
	position: absolute;
	right: 10px;
}

ol#comment_list li ul.children li,ol#comment_list li ul.children{
	margin-top: 10px;
}
ol#comment_list li ul.children li{
	padding: 10px 0 0px 10px;
	border: none;
	border-top: 1px dotted #dae0e3;
}












/* comment_form */
div#respond{width:375px;float:left;margin:20px 10px 10px 0;padding:0 0 0 10px;border-left:1px solid #c8cacc;
_float/**/:/**/ right;}
div#respond h3{margin-bottom:15px;}
div#respond textarea{width:365px;padding:5px;border:1px solid #dae0e3;}
div#respond form p{margin:0 0 10px 0;}
div#respond input#author,div#respond input#email,div#respond input#url
	{width:213px;border:1px solid #dae0e3;padding:5px;margin-right:5px;}
ol#comment_list li div#respond{
	position: relative;
	left: 300px;
	margin-bottom: -50px;
	_margin-right/**/:/**/ -100px;
}
ol#comment_list li h4#cancel-comment-reply{
	margin: 5px 0;
	display: block;
}
ol#comment_list .navigation{
	border: none;
	font-size: 1.2em;
	background: none;
}

ol#comment_list li div#respond{
}


/* ----------------------------- Archive.php[body id="archive"] -----------------------------------*/
#archive_content,#post_list{padding: 20px;}
#archive_content .navigation,#post_list .navigation{padding:0 130px 10px 10px;border: none;}
.post {background:white;padding:10px 10px 10px 10px;border:1px solid #dae0e3; margin: 0 125px 20px 0;position: relative;}
.post h2{margin:10px 0 20px 0;}
.post .entry{margin-top:20px;position:relative;line-height:1.4em;}
.post .entry a.more-link{bottom:-10px;}
.post .metadata{position:absolute;width:120px;right:-130px;top:30px;}
.post .metadata .metacat{border-bottom:1px solid #9ba4a7;}
img.img_archive{width:100px;height:100px;float:right;margin:0 0 10px 10px;}


/* ----------------------------- CompleteArchive.php[body id="complete_archive"] -----------------------------------*/
body#complete_archive div#archivelist h3{margin:0px 0 10px 0;padding-bottom:10px;}
div#archivelist{padding: 20px;}
div#archivelist ul.archive {background:white;padding:10px 3px;margin:0 200px 30px 0;border:1px solid #a8bbc8;}
div#archivelist ul li ul li{
	list-style-position: inside;
	list-style-type: circle;
	margin: 3px 0 3px 10px;
}
div#archivelist ul li{margin:5px 0 10px 10px;list-style-type:square;list-style-position:inside;}

input#s{width:150px;border:1px solid #dae0e3;padding:5px;margin-right:5px;}
div#archivelist input#s{width: 300px;}
/* ----------------------------- Mainpage.php[body id="home"] -----------------------------------*/
body#home{text-align:center;background:#f4f4f4 url(img/headbg.jpg) repeat-x scroll 0 top;}
body#home div#header{height:100px;}
body#home div#header div#logo a{display:block;width:404px;height:80px;float:left;text-indent:-9999px;background:url(img/menu.png) left top;}
body#home div#header small{display:block;padding:55px 0 0 0;margin-right:0px;text-align:right;}

body#home ul#menu{margin:40px 0 80px 60px;clear:both;min-height: 200px;}
body#home ul#menu li{float:left;position:relative;}
body#home ul#menu li a.topmenu{display:block;text-indent:-9999px;background:url(img/index.jpg);}
body#home ul#menu li#menu_blog a.topmenu{width:193px;height:280px;}
body#home ul#menu li#menu_blog a:hover.topmenu{background-position:0 335px;}
body#home ul#menu li#menu_photo{left:39px;top:80px;}
body#home ul#menu li#menu_photo a.topmenu{background-position:653px -78px;width:124px;height:253px;}
body#home ul#menu li#menu_photo a:hover.topmenu{background-position:653px 257px;}
body#home ul#menu li#menu_portfolio{left:49px;}
body#home ul#menu li#menu_portfolio a.topmenu{background-position:508px -4px;width:198px;height:290px;}
body#home ul#menu li#menu_portfolio a:hover.topmenu{background-position:508px 331px;}
body#home ul#menu li#menu_about{top:48px;left:55px;}
body#home ul#menu li#menu_about a.topmenu{background-position:302px -53px;width:148px;height:242px;}
body#home ul#menu li#menu_about a:hover.topmenu{background-position:302px 282px;}
body#home ul#menu li#menu_subscribe{top:48px;left:44px;}
body#home ul#menu li#menu_subscribe a.topmenu{background-position:155px -53px;width:153px;height:242px;}
body#home ul#menu li#menu_subscribe a:hover.topmenu{background-position:155px 282px;}

/* ----------------------------- Photo.php[body id="photo"] -----------------------------------*/
ul#flickrAlbum{width:446px;height:104px;background:url(img/photofilm.png);float:right;padding:22px 0 0 20px;margin-top:-5px;margin-right:10px;}
ul#flickrAlbum li{height:75px;float:left;margin-left:8px;border:1px solid #eaeafa;}

div#photo_albums{padding:0px 20px 10px 20px;clear:both;}
div#photo_albums div.album{float:left;height:244px;width:192px;margin:0 17px;padding:20px 0 0 5px;text-align:center;
	background:url(img/album.png) no-repeat top left;}
div#photo_albums div.album a img{border: 2px white}
div#photo_albums div.album a img, ul#flickrAlbum li a img{filter:alpha(opacity=80);zoom:1;opacity:0.8;}
div#photo_albums div.album a:hover img,ul#flickrAlbum li a:hover img{filter:alpha(opacity=100);zoom:1;opacity:1;}
div#photo_albums div.album h3{margin: 5px 0 2px 0;}

.float_text{position:absolute;left:-225px;top:85px;width:185px;text-align:right;border-top:#c8cacc 1px solid;}

/* ----------------------------- PhotoPage.php[body id="photo_album"] -----------------------------------*/
#main_image{min-height:260px;margin-bottom:20px;_height/**/:/**/260px;/* IE 6 only */}
#main_image #image_frame{text-align:center;}
#main_image div.photo{display:none;margin:0 auto;}
#main_image a.photo_border{background-repeat: no-repeat; border:1px solid #ddd;display:block;background: url(img/loading.gif) center center no-repeat;min-height:100px;min-width:100px;}
#title_album,#image_title{text-align: center;}
#title_album {top:100px;}
#image_title {width: 205px;left:-245px;top:185px;}

div.list{background:url(img/album_shadow.png) no-repeat center;padding:10px 20px 0 20px;overflow-x:scroll;position:relative;height:118px;display:none;width:660px;
	*background-attachment:fixed;/*IE7 and below*/}
ul.gallery_demo{width:100%;position:relative;}
ul.gallery_demo li{height:75px;width:75px;padding:2px 4px 5px 3px;float:left;margin-left:8px;background:url(img/thumb_bg.png);
	_padding/**/:/**/ 2px 4px 2px 3px;}
ul.gallery_demo li.active{background-position:top right;}
ul.gallery_demo li a img{filter:alpha(opacity=70);zoom:1;opacity:0.7;}
ul.gallery_demo li a:hover img{filter:alpha(opacity=100);zoom:1;opacity:1;}
.nav{position:absolute;z-index:99;width:690px;top:150px;}
.nav a{display:block;text-indent:-9999px;height:34px;width:34px;background:url(img/photo_nav.png);}
.nav a#nav_prev{float:left;}
.nav a:hover#nav_prev{ background-position:left bottom;}
.nav a#nav_next{background-position:right top;float:right;}
.nav a:hover#nav_next{background-position:right bottom;}


/* ----------------------------- Portfolio.php[body id="portfolio"] -----------------------------------*/
.in_portfolio{width:350px;background:white;margin:8px 0 0 8px;float:left;height:260px;
	border:1px solid #dae0e3;text-align:center;}
.in_portfolio h3{background:#e9fafa;padding:5px 10px;border-bottom:1px dotted #eaf0f3;}
.in_portfolio .post_content{padding:10px;}
#portfolio #page h1{display:none;}
#portfolio .glassyblock{padding-bottom:8px;background: none;background:url(img/album_shadow.png) no-repeat center top;border: none;}

/* ---------------------------- White Page ----------------------------------------------------*/
#whitepage .post{background:none;border:none;}
#whitepage .entry{width:400px;position:relative;padding-bottom:100px;}
#whitepage .entry h3,#blog_content .entry h3{margin:20px 40px 20px 0;text-align:center;}
#whitepage .entry img.float_right{position:absolute;left:420px;border:4px solid #ddd;}
#whitepage .entry p{margin-bottom:10px;}
#whitepage .entry ul li, #single_blog .entry ul li{margin:2px 20px;list-style-type:square;list-style-position:inside;}

/* ---------------------------- Jquery Menu ----------------------------------------------------*/

li#menu_blog,li#menu_photo,li#menu_portfolio,li#menu_about{position:relative;z-index:50;overflow:visible;}
.menu_bubble{display:none;}
.menu_sheet{z-index:99;width:205px;position:absolute;left:0px;display:none;}

#home #menu_blog .menu_sheet{left: 50px; top: 220px;}
#home #menu_photo .menu_sheet{left: 20px; top: 140px;}
#home #menu_portfolio .menu_sheet{left: 50px;top: 250px;}
#home #menu_about .menu_sheet{left: 50px; top: 200px;}
#home #menu_subscribe .menu_sheet{left: 0px; top: 120px;}

.menu_sheet ul {padding:0px 10px 10px 10px;text-indent:0;background:url(img/menu_sheet.png) left bottom;}
.menu_sheet ul h3{margin-bottom:5px;}
ul#menu li #menu_blog_list li,ul#menu li #menu_photo_list li,ul#menu li #menu_subscribe_list li
	{float:none;padding:0 0 5px 0;border-top:1px solid #eaf0f3;}
ul#menu li #menu_blog_list li a,ul#menu li #menu_photo_list li a,
ul#menu li ul p,ul#menu li #menu_subscribe_list li a{font-size:12px;}
div.menu_top_border{height:22px;background:url(img/menu_sheet.png) right top;width:205px;}

/* ---------------------------- Color and Fontsize ----------------------------------------------------*/
/* General */
a		 {text-decoration: none;color: #728392;}
a:visited{color: #728392;}
a:hover,a:hover.more-link,a:hover.comment,.bquote a:hover,.album h3 a:hover
		 {text-decoration: underline;color: #b35a32;}
body#home div#header small{font-family:"HelveticaNeue-Light",Arial,sans-serif;font-size:1.8em;color:#92A1A6;}
h2		 {font-family:"HelveticaNeue-Light","Helvetica Neue Light",'Helvetica Neue',"Trebuchet MS",Arial,sans-serif;font-size:2.4em;color: #728392;font-weight:100;}
h2.float_title,#sidebar h2,.float_info{text-transform: uppercase;font-size: 2.2em;line-height: 0.9em;}
h3,.navigation, .metadata{font-size: 1.4em;font-weight: bold;color: #92A1A6;}

.float_info{font-family:"HelveticaNeue-Light","Helvetica Neue Light",'HelveticaNeue-Light','Helvetica Neue Light','Helvetica Neue',"Trebuchet MS",Arial,sans-serif;font-size:2.4em;color: #92A1A6;line-height:20px;font-weight:100;}
	.float_info .cat,.float_info .year, .float_info small{font-size:0.75em;}
	.float_info .date{line-height: 24px;}
.float_text p{margin: 10px 0px 0 0;}

div#footer_info{font-size:1.1em;color: #728392;}

#sidebar li.widget ul li, #sidebar h2{line-height: 34px;}
#sidebar li.widget ul li {font-size: 1.2em;font-weight: bold;}
.the_comment p{font-size: 1.2em;}
#comment_list small{font-size: 1.1em;}
#comment_list h4{font-size:1.2em; font-weight:bold; margin-right:5px;color:#728392;}
#commentform a#comment_selected{font-weight: bold; font-size: 12px;margin: 5px 0; display: block;}

/* Blog Page */
a.more-link,a.comment{font-weight: bold; color: #a4b1b6}
#recent_list li,p,#comment_list li p{font-size: 1.3em; line-height: 1.35em;}
p, #recent_comments ul#comment_list,#whitepage .entry ul li,#single_blog .entry ul li{color:#535563;}
.in_featured .info_post{font-size: 1.15em;}
#block1 h2{font-size:3.2em;}
ul#comment_list li .bquote,#twitter p,.album .info_post{font-size: 1.15em;line-height: 1.4em;}
.commenter{font-size: 1.1em}
#twitter .twitter-timestamp,#recent_list .date_post,.info_post,span.commenter,#comment_list li{color: #92A1A6;}

/* Single Page */
#blog_content p{font-size:1.4em;line-height: 1.5em;}
div#comment_form label{font-style:italic;color:#92A1A6;}
.album h3{font-size: 1.3em;}

/*Portfolio*/
#blog_content .entry h3,.in_portfolio h3,#whitepage .entry h3,body#complete_archive div#archivelist h3{font-family:"HelveticaNeue-Light","Trebuchet MS",Arial,sans-serif;font-size:1.6em;color: #728392;font-weight: normal;}

/*Menu*/
ul#menu li{font-size: 1.2em;}
div#archivelist ul li{font-size: 13px;}
#blog_content .entry h3, #whitepage .entry h3,body#complete_archive div#archivelist h3{font-size: 2em;}
#single_blog .entry ul li, #whitepage .entry ul li, #whitepage .entry p,#blog_content .entry p{font-size: 1.2em; line-height: 1.5em; font-family: "Lucida Grande", Lucida, Verdana, sans-serif;}
#blog_content .entry p {font-size: 1.25em;}
div#archivelist ul li{color: #a4b1b6;}
.entry blockquote {font-size:0.9em; color: #777; margin: 15px 30px 0 10px; padding-left: 20px; border-left: 5px solid #ddd;}


.bquote a,.bquote a:visited{color:#728392;line-height: 1.35em;}
ul#comment_list li,ul.gallery_demo li{_display/**/:/**/inline;/* IE 6 only */}

.hr{border-top: 1px dotted #ccc;margin: 20px 0px;}


#page404 #page{
	margin: 50px 0 0 0px;
	text-align:center;
	background:url(img/404.png) center top no-repeat;
	height:400px;
	}
code{
	font-size: 1.2em; color: blue;padding: 0 3px;
}

#whitepage .hide_in_article {display:none;}