/* =====  template styles    ===== */

/* =====   Individual Page Styles   ===== */

/*
		Theme Name: Sharp.
		Version: 2.8
		Theme URI: http://elliotjaystocks.com
		Description:  Built from Elliot Jay Stocks (sharp wp reset) using my own sharp red/black design.
		Author: Kai Chan Vong
		rah test 
						*/
						
/* === reset - minified === */
	*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 } table { border-collapse:collapse; border-spacing:0 } fieldset, img { border:0 } address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal } ol, ul, li { list-style:none } caption, th { text-align:left } h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal } q:before, q:after { content:''} strong { font-weight:bold } em { font-style:italic } a img { border:none } /* Gets rid of IE's blue borders */

/* =====   universal styles   ===== */

	HTML { border-top: 4px solid #000; background:transparent url(style/images/patterns/breathing-material-white.png) repeat 0 0;}
	BODY { font-size: 62.5%; font-family: Helvetica, arial, times;
	 background-image: url(style/images/embelish/header-212-with-glow.png);
	 background-repeat: no-repeat; background-position:0 top;}	
	
	/* Font */
	h1, h2, h3, h5, h5, h6,.first-word { font-weight:bold;text-shadow: 1px -1px 1px #ddd; } 
	h2,h1,.first-word { font-size: 3.2em; color: #000; margin: 0; }
	#about h2 { margin-bottom: 24px}	
	h2 a:link,h2 a:visited { color: #000; text-decoration: none;padding-top: 4px; }
	h2 a:hover,h2 a:focus,h2 a:active { color: #333; text-shadow: none; }

	/* links */
	a:link,a:visited { color:#732cf5; text-decoration: none; }
	a:visited { color:  #2c81f5;}
	a:hover,a:focus,a:active {color: #ff0000; text-decoration: underline;}
	a:focus,a:active {color: #bf0000; outline: none}

	/* highlights */
	::selection {
		background: #ff0000;
		color: #fff;
		}
	::-moz-selection {
		background: #ff0000; 
		color: #fff;
	}

/* =====   library styles   ===== */
	
	/* ---visibility  --- */
	
	.hidden { display: none;} 

	.highlight-me,.highlight-them IMG{
	filter:alpha(opacity=80);
	opacity: .8;
	-moz-opacity:.8;
	}
	.highlight-me:hover,.highlight-them IMG:hover{
	filter:alpha(opacity=99.9);
	opacity: 1;
	-moz-opacity:1;
	}

	/* ---positioning  --- */
	
	.center { margin-left: auto; margin-right: auto; }
	.marginTop40 { margin-top: 40px}
	.clear { clear: both;}
	 BR.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0 } /* ---Use this br class to clear your floated columns - taken from E.J. Stocks.  --- */
	.aligncenter { display:block; margin:0 auto }
	.alignleft { float:left; margin-right: 25px }
	.alignright { float:right; margin-left: 25px }
	.wp-caption { border:1px solid #666; text-align:center; background:#ccc; padding:10px; margin:10px }
	
	/* ---font  --- */
	
	.microcopy { font-size: 0.7em }
	
	/* ---styles  --- */
	
/*	.corners {
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomleft: 10px;	
	
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	}
*/	
	.line {border-left: 3px solid #fff; display: block}
	.line-shadow {border-left: 1px solid #888; display: block}

/* === Templates === */

	.post-edit-link { display: none;}
	
	/* --- header --- */
	
	#header { width: 750px; margin: 0 auto; padding:56px 0 11px 40px; position: relative;min-height:32px; }	
	#header IMG { position: absolute; top: 4px;}
	#header ul { overflow: hidden; z-index: 22; position: relative; margin-left: -18px;}
	#header li { text-align: center; display: block; float: left; font-size: 1.3em; /* margin-left: 40px; */ }
	#header .current,#header a:link,#header a:visited { text-shadow: 0 0 0 none;color: #fff;padding: 6px 12px 10px 52px;display: block; text-decoration: none   }
	#header a:hover,#header a:focus,#header a:active { color:#BF0000; outline: none; }
	#header .current { background-color: #dd4947 ; border: 1px solid #643e29;padding: 4px 12px 4px; margin-left: 40px; }
	
	/* set the logo default position depending on the page user is @ */
	
	BODY .home #vongLogo { margin-left: 0; }
	BODY #single #vongLogo,BODY #blog #vongLogo { margin-left: 96px; }
	BODY #portfolio #vongLogo { margin-left: 196px; }	
	BODY #about #vongLogo { margin-left: 302px; }
	BODY #contact #vongLogo { margin-left: 404px; }		
	
	#scarf {background:transparent url(style/images/graphic/darkness.png) no-repeat 0 0; position: absolute; top: 89px; right:0; z-index: 999;
	 width: 500px; height: 264px; display: block; }
	 
	#downloading { background:transparent url(style/images/patterns/download-indicator.gif) no-repeat 0 0; display: none; 
	position: absolute; top: 300px; left: 40%; width: 400px; height: 200px;    }
	
	/* --- Footer --- */

	#footer { position: relative; padding: 10px 40px 0; margin: 30px 0 0; color: #fff; border-top: #1F1313 10px solid;border-bottom:#1F1313 4px solid;
	font-family: Delicious, sans-serif; overflow: hidden; background:#BF0000 url(style/images/embelish/footer-fast.png) repeat-x -13px 335px;}
	
	#copyright { font-size: 1.6em; display: block; background:#1F1313; float: right; color: #fff; padding: 6px 6px 4px;   }	
	.sock1 { margin: 0 auto; position: relative; width:1190px  }
	.black.box {
	background-color: #fff; 
	border: 4px solid #212121;
	color: #212121; 
	}


	
	/* need to seperate the headers for css object orientated... */
	#footer .notes .speech-bubble { 
	background:transparent url(style/images/embelish/speech-footr-vert-black.png) no-repeat scroll 0 bottom;
	bottom:-35px;
	display:block;
	height:35px;
	left:245px;
	position:absolute;
	width:110px; 
	}
	
	#footer {  overflow: hidden;}
	#footer .notes {
	font-family: GraublauWeb,Georgia,Times,'Times New Roman',serif; 
	padding:4px 20px 17px; 
	margin-bottom: 26px;
	position: relative; 
	float: left;
	background:#fff url(style/images/logos/flickr_32.png) no-repeat 20px 32px;
	}
	#footer .notes H3 { font-size: 2.2em;text-shadow: 1px -1px 1px #ddd; margin:10px 0 22px 44px;  }
	#footer .notes h2 { line-height: 110%; }

	#fromFlickr { padding-left: 10px; padding-right: 10px; padding-bottom: 6px; width:252px;margin:0 0 0 20px; 
	background-image: url(style/images/logos/flickr_32.png);}
	#flickr_badge_wrapper { margin-left: -10px;}
	#flickr_badge_wrapper A { margin-left: 10px;}
	#flickr_badge_wrapper IMG { border: 1px solid rgba(255,255,255,0)}
	#flickr_badge_wrapper IMG:hover {border: 1px solid #000;}

	
	#socialNetworks {
	background:#212121 none repeat scroll 0 0;
	border:1px solid #FFFFFF;
	margin:25px 0 ;
	overflow:hidden;
	padding:0 0 5px;
	width:230px;
	 }
	#socialNetworks li { float: left; margin:4px 0 6px; background-color: transparent; background-position: 10px 12px ; 
	background-repeat: no-repeat;padding-left: 58px; position: relative; height: 44px;} 
		#socialNetworks li#delicious {background-image:  url(style/images/logos/delicious_32.png)}
		#socialNetworks li#flickr {background-image: url(style/images/logos/flickr_32.png)}
		#socialNetworks li#lastFM {background-image: url(style/images/logos/lastfm_32.png)}
		#socialNetworks li#twitter {background-image: url(style/images/logos/twitter_32.png)}

	#socialNetworks h3 { color: #fff; margin-top: 10px; font-size: 1.8em; text-shadow: none;}
	#socialNetworks p { margin-top: 10px; font-size: 1.2em;}	
	#socialNetworks a { position: absolute; display: block;height: 10px; top: 0; left: 0; padding:32px 0 12px 59px; color:#eee;width: 170px;}
	#socialNetworks a:hover,#socialNetworks a:focus,#socialNetworks :active {color: #ccc;}
	#socialNetworks a .hover {
		display: block;
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		}

	#footer #FromDelicious { width: 340px; padding-left: 30px; min-height: 190px; 
		background-image: url(style/images/logos/delicious_32.png);
	}
	#footer #FromDelicious UL{font-size: 1.5em; margin:18px 0 10px 15px}
	#footer #FromDelicious UL LI { list-style: square;}
	#FromDelicious P { margin: 0; font-size: 1.5em;}
	#FromDelicious .delicious-banner.sidebar-title { display: none; }
#FromDelicious .highlight-link { text-align: center; }

	#footer #FromDelicious.notes .speech-bubble { right:110px; left: inherit;  }
	#FromDelicious .panel { margin: 0 0 10px; }
	#FromDelicious .also-read { color:  } 	
	/* twitter footer */
	
	.tf-users A { float: left; }

	#otherSocialMedia.notes
	{	background-image: url(style/images/logos/twitter_32.png);width:400px; margin-left: 20px;  }
	#fromTwitter { border-bottom: 1px solid #ccc;padding: 0 0 16px 44px;
	 }
	#footer .notes #fromTwitter h3 {
	margin:10px 118px 14px 0px;
	 }
	#fromTwitter P {  font-size: 2.2em;}
	
	/* LastFM */
	#fromLastFM { border-top: 1px solid #ddd; font-size: 1.8em; padding: 16px 0 0;background:transparent url(style/images/logos/lastfm_32.png) no-repeat 0 18px; padding-left: 44px
	}
	#fromLastFM A { text-shadow: 0 1px 1px #999}
	#fromLastFM #date { display: block; }
	.fdpoweredby { display: none; }
	
	.classical-music-notes {
	bottom:15px;
	position:absolute;
	right:-1px;
	-webkit-transform: rotate(-20deg); 
	-moz-transform: rotate(-20deg);	
	}
	
	/* --- Various intro holder (about, hp, blog, port... ) ---  */
	
	#commentsHolder H3 { font-size: 3.2em; margin:0 0 20px}
	#comments SPAN,#respond SPAN{ font-size: 60%; font-weight: 300; }
	#commentform { margin: 10px 0 0 4px;}
	#commentsHolder #commentform p { overflow: hidden;clear: both; margin: 10px 0 0; font-size:1.7em;}
	#commentform label { width: 200px; display:block; }
	#commentform #submit { clear: both; }
	#commentform .comments { margin: 20px 0 0;}
	
	/* --- posts listings --- */	
	
	
	#commentsHolder { margin-bottom:60px;} 
	#contentHolder.side-image {
	background-repeat: no-repeat; background-position: 0 27px;
	padding:30px 20px 110px 238px; min-width: 242px; width: 404px;}
	
	#contentHolder.side-image.left { padding-right:238px; padding-left:20px; }
	#contentHolder .read-more,#postsHolder .read-more{ float: right; margin:0 20px 20px 0; font-size: 1.3em; }
	#contentHolder.side-image P { max-width: 700px; min-width: 200px;position:relative; z-index:99999;}
	
	#portfolio #postsHolder,#blog #postsHolder { margin-top: 0;}
	
	.post,LI.page,#contentHolder { border: 20px solid #BF0000; background-color: #fff;}
	
	#contentHolder,.post,LI.page { margin: 1px 0 0; padding: 30px 20px 0; position: relative}
/* 	#postsHolder H2,#contentHolder H2 { margin-bottom: 0;} */
	#contentHolder .post-details,#postsHolder .post-details { font-size: 1.1em; background: #F7F7F7; background:rgba(0, 0, 0, 0.03); color:#888 ; 
	margin:0 -20px 20px; padding: 4px 20px 4px 26px;  }
	.post-details ABBR { border: 0; font-weight: 600 }
	.post-details A { color: #DF8B8E;}
	.post-details .split { margin-left: 7px ;padding-left: 7px; border-left: 1px dotted #333; } 
	#contentHolder .chilled {font-family:GraublauWeb,Georgia,Times,'Times New Roman',serif; font-size: 2.3em; color: #7F0707; margin: 0; }

	#contentHolder .speech-bubble,#postsHolder .speech-bubble { position: absolute; top: -71px; left: 75px; width: 100px; height: 71px; display: block; 
	background: transparent url(style/images/embelish/speech-bubble-vertical-red2.png) no-repeat 0 0;}
		
	#contentHolder .black .speech-bubble,#postsHolder .black .speech-bubble {background-image: url(style/images/embelish/speech-vert-212121.png);}

	#postsHolder .post.black,
	#contentHolder .post.black { border-color: #212121;}

	#postsHolder .black H2,	
	#contentHolder .black H2,
	#postsHolder .black H2 A:link,	
	#postsHolder .black H2 A:visited { color: #212121}
	
	#postsHolder .black H2 A:hover,	
	#postsHolder .black H2 A:focus,
	#postsHolder .black H2 A:active { color: #333;}
	
	#blog #postsHolder H2,#portfolio #postsHolder H2 { font-size: 2.6em}
	#blog #postsHolder,#portfolio #postsHolder{ min-width: 540px;}
	#contentHolder P { font-size: 1.8em }
	#contentHolder P,.posts-content P { line-height: 140%; margin: 0 0 20px 6px;} 
	#contentHolder P:last-child { margin-bottom: 10px; }
	#contentHolder P,.posts-content P,.posts-content UL LI,#contentHolder UL LI,.posts-content LI { font-size: 1.6em;color: #212121; }
	
	.posts-content UL,.posts-content OL { margin: 0 0 26px; }
	.posts-content LI { list-style: square; margin:0 0 12px 18px; }
	
	#contentHolder UL,.posts-content UL { margin: 30px 0 30px 24px; max-width: 524px; }
	#contentHolder UL li,.posts-content UL li { margin-bottom: 12px; list-style-type: disc; list-style-position: outside;}
	
	.highlight-link { display: block;color: #fff; cursor: pointer;text-decoration: none;
	 padding: 6px 10px 4px; border: dotted 1px #B3CDEF; background: #DFEDFF; }
	.highlight-link:link,.highlight-link:visited { text-decoration: none;background: #DFEDFF; }
	.highlight-link:hover,.highlight-link:focus,.highlight-link:active,
	.highlight-link:hover A,.highlight-link:focus A,.highlight-link:active A {background: #92FF6F; text-shadow: 0 1px 0 #999; color: #fff; text-decoration: none;} 
	.highlight-link a:hover,.highlight-link a:focus,.highlight-link a:active {color: #fff;}
		
	.posts-content .black .read-more:link,.posts-content .black.read-more:visited { text-decoration: none;background: #212121;}
	.posts-content .black .read-more:hover,.posts-content .black.read-more:focus,.black.posts-content .read-more:active {background: #444; } 
	
	
	.posts-foot { margin: 10px 0 0 10px; display: none; }
	#contentHolder,#postsHolder,#commentsHolder { margin: 50px auto 0; width: 644px/* 730px */; }
	
	#contentHolder .wp-caption,#postsHolder .wp-caption { background: transparent; border: }
	#contentHolder .wp-caption-text,#postsHolder .wp-caption-text { margin: 10px 8px 0 12px;font-size:1.1em;text-align:left; }
	
	
	/* --- comments from users --- */
	
	#commentsHolder .commentlist { 
	border:2px solid #BF0000;
	padding:0 16px 0;
	background: #fff;
	overflow:hidden;
	}
	
	#commentsHolder .commentlist li { 
	border-bottom:1px solid #B40000;
	clear:both;
	overflow:hidden;
	padding:24px 0 20px 10px;
	}
	
	#commentsHolder .commentlist li:last-child { 
	border-bottom:0 none;
	padding-bottom: 10px;	
	}
	
	#commentsHolder .comment-author.vcard .fn,#commentsHolder .comment-author.vcard .says { font-size:2.0em }
	#commentsHolder .comment-meta.commentmetadata {font-size:1.2em; margin:0 0 10px;  }
	#commentsHolder P { font-size:1.5em; margin:0 0 14px}
	#commentsHolder P BR { margin:0 0 10px;}
	
	#commentsHolder .avatar.photo { 
	float:left;
	margin-bottom:10px;
	margin-right:10px;
	padding-right:10px;
	position:relative;
	}

	#respond {
	margin: 30px 0 0;
	padding-top: 8px;
	}

	#respond H3{ 
	margin-bottom: 4px;
	}

	#respond TEXTAREA {
	width: 590px;
	}

	.commentlist A:link,.commentlist A:visited {color: #666;}
	.commentlist A:hover,.commentlist A:focus,.commentlist A:active {color: #999;}

/* === Individual pages === */
	
	/* --- single pages --- */
	#single #nav { padding-bottom:2px }
	#single h1 { margin:60px auto 0; padding:5px 6px 6px; width: 600px;}
	
	/* --- homepage --- */
	
	#contentHolder .wp-caption,#postsHolder .wp-caption,.iced-box {
	padding: 30px 20px 10px; 
	border: 4px solid #eee;	
	border: 4px solid rgba(0,0,0,0.03);
	background-color:#fff; 
	background-color: rgba(255,255,255,0.65); 
	 }	
	
	#aboutKai { padding: 14px 0 0 13px ; 
	overflow: hidden; margin: 40px auto 0; width:770px; 
	font-family: GraublauWeb,Georgia,Times,'Times New Roman',serif;
	z-index: 9999; position: relative;
	}
		
	.vcard.kai-chan-vong img,.vcard.kai-chan-vong .content { float: left}
	.vcard.kai-chan-vong .content { padding:0 0 143px 23px;}
	
	.vcard.kai-chan-vong .details h1 {font-size: 2.2em; margin: 0; }
	.vcard.kai-chan-vong .details p { margin: 4px 0 0; font-size: 1.8em; }
	
	#home #contentHolder { margin-top: 28px; z-index: 999999; padding-top: 20px;}

	#home #contentHolder .speech-bubble { left: 40px; }
	
	#home .posts-content h2 { display: none; }
	
	STRONG.first { font-size: 125%;color: #bf0000; font-family: GraublauWeb,Georgia,Times,'Times New Roman',serif }
		
	#home #latestWork { 
	bottom:14px;
	width: 540px;
	display: block;
	height:122px;
	position:absolute; 
	left: 240px;
	text-indent:-9999em;	
 	background-color:white; background-color: rgba(255,255,255,0.65);  
	background-image: url(style/images/graphic/latest-projects2.png); background-position:  0 0; 
	background-repeat: no-repeat;
	}
	
	/* --- portfolio --- */
	#portfolio #contentHolder .speech-bubble { left: 180px; }	
	#portfolio #postsHolder .speech-bubble,#home #postsHolder .speech-bubble { left: 35px;}
	#portfolio #contentHolder IMG.alignleft { margin: 20px 0 0;  }
	#portfolio #contentHolder.side-image { background-image: url(style/images/photos/kcv-photographer.png);}
	
	/* --- blog --- */
	#blog #intro {max-width: 740px ; min-width: 300px ;}
	#blog #intro p { font-size: 1.7em; margin:10px 0 0 40px;}
	#blog #postsHolder .speech-bubble { left: 36px }
	#blog #contentHolder.side-image { background-image: url(style/images/photos/doodle.png)}
	#blog #contentHolder { padding-bottom: 40px;}
	
	/* --- AboutKai --- */
	
	#linkedin_badge_gen_1 { z-index: 99999 !important; }
	
	#about #contentHolder .alignleft { 
	background:transparent url(http://farm4.static.flickr.com/3121/2502757203_68066e1622.jpg) no-repeat scroll right 20px;
	max-width:900px;
	min-width:240px;
	padding:0 392px 0 0; }
	
	#about #contentHolder .speech-bubble { left: 282px }



	/* HTML5 added */ 

	HEADER, SECTION, FOOTER,
	ASIDE, NAV, ARTICLE, FIGURE  { display: block }