@charset "utf-8";
/*
Theme Name: Normalfx
Theme URI: http://www.normalfx.com/
Description: This theme is de
Version: 1.0
Author: Ratthanarong Phraibung
Author URI: http://www.normalfx.com/
Tags: blue, portfolio, fixed width

	This theme was designed and built by Ratthanarong Phraibung,
	whose blog you will find at http://www.normalfx.com/blog

*/



/* Reset */
*{
	margin:0;
	padding:0
	}
img{
	border:0
	}
body{
	font-size:90%;
	font-family:Tahoma, Arial, Helvetica, sans-serif;
	background:#fff url(images/main_bg.jpg) repeat-y center top
	}
a{
	color:#39C6B6;
	}
a:hover{
	color:#6EBC76
	}
/* Main layout */
#wrapper{
	width:960px;
	position:relative;
	margin:0 auto
	}
#header{
	float:left;
	width:960px
	}
#content{
	float:left;
	width:960px
	}
#footer{
	/*position:absolute;*/
	bottom:0;
	left:50px;
	width:550px
	}
/* Decoration container */
#twitter{
	position:absolute;
	width:189px;
	height:225px;
	padding:50px 70px;
	right:0;
	top:0;
	background:url(images/twitter_bg.png) no-repeat
	}
#walrus-balloon{
	position:absolute;
	width:241px;
	height:447px;
	left:0;
	top:0
	}
/*#walrus-snap{
	position:absolute;
	width:262px;
	height:159px;
	right:205px;
	bottom:0;
	background:url(images/walrus_snap.png) no-repeat
	}*/
#walrus-snap{
	display:inline;
	position:relative;
	width:262px;
	height:159px;
	float:right;
	margin:-120px 200px 0 0;
	background:url(images/walrus_snap.png) no-repeat
	}
/*#i-heart{
	position:absolute;
	width:222px;
	height:210px;
	right:0;
	bottom:10px;
	background:url(images/pin.png) no-repeat
	}*/
#i-heart{
	display:inline;
	position:relative;
	width:222px;
	height:210px;
	float:right;
	margin:-220px 0 -60px 600px;
	background:url(images/pin.png) no-repeat
	}
* html #i-heart{
	background:url(images/pin.gif) no-repeat;
	margin:-220px 0 0 600px;
	}
#i-heart .container{
	padding:170px 0 0 0
	}	
#i-heart .container .powered{
	font-size:0.66em;
	font-family:Tahoma, Arial, Helvetica, sans-serif;
	display:block;
	float:left;
	width:60px;
	margin:5px 0
	}
#footer p{
	color:#333;
	font-size:9px;
	padding:0 0 0 350px;
	font-family:"Lucida Grande","Arial Unicode MS",sans-serif;
	}
/* Site Detail*/
#header .logo{
	width:595px;
	height:128px;
	clear:both;
	margin:0 0 0 130px;
	background:url(images/normalfx_logo.png) no-repeat
	}
#header .logo a{
	display:block;
	height:128px;
	text-indent:-9999em
	}
#header #nav{
	display:inline;
	float:left;
	margin:0 0 0 140px
	}
#header #nav ul li{
	display:inline
	}
#header #nav ul li a{
	display:block;
	outline:none;
	float:left;
	text-indent:-9999em;
	height:64px
	}
#header #nav ul li.port a{
	width:211px;
	background:url(images/btn_port.gif) no-repeat
	}
#header #nav ul li.blog a{
	width:139px;
	background:url(images/btn_blog.gif) no-repeat
	}
#header #nav ul li.about a{
	width:145px;
	background:url(images/btn_about.gif) no-repeat
	}
#header #nav ul li a:hover{
	background-position:0 -64px
	}
#portfolio #header #nav ul li.port a, #blog #header #nav ul li.blog a, #about #header #nav ul li.about a{
	background-position:0 -128px
	}
#content #intro{
	display:inline;
	width:700px;
	height:208px;
	margin:8px 0 0 110px;
	float:left;
	background:url(images/intro_bg.png) no-repeat
	}
#content #intro h1{
	text-indent:-9999em
	}
#content #port{
	display:inline;
	width:700px;
	height:355px;
	margin:0 0 0 110px;
	float:left;
	background:url(images/case_bg.png) no-repeat
	}
* html #content #port{
	background:url(images/case_bg.gif) no-repeat
	}
#content #port h3{
	text-indent:-9999em;
	height:10px
	}
#content #port .note{
	display:block;
	font-size:9px;
	color:#666;
	margin:30px 0 0 240px
	}
#content #port #carousel{
	display:inline;
	width:555px;
	height:210px;
	margin:7px 0 0 76px;
	float:left;
	clear:both;
	overflow:hidden;
	position:relative
	}
#content #port #carousel{
	position:relative
	}
#content #port #carousel .panel-container{
	position:absolute;
	top:0;
	left:0
	}
#content #port #carousel .panel-container .panel{
	display:none;
	position:relative;
	width:515px;
	height:150px;
	padding:10px 20px;
	background:url(images/panel_bg.png) no-repeat;
	top:0;
	left:0
	}
* html #content #port #carousel .panel-container .panel{
	background:url(images/panel_bg.gif) no-repeat
	}
#content #port #carousel .panel-container .panel p{
	font-size:0.73em;
	line-height:1.2em;
	margin:0;
	color:#fff
	}
#content #port #carousel .panel-container .panel p strong{
	color:#F44646;
	font-weight:200
	}
#content #port #carousel .panel-container .panel p a{
	color:#3DC4B5
	}
#content #port #carousel .slide{
	background:url(images/btn_info_dwn.png) no-repeat;
	height:20px;
	text-indent:-9999em;
	width:555px;
	cursor:pointer
	}
* html #content #port #carousel .slide{
	background:url(images/btn_info_dwn.gif) no-repeat
	}
#content #port #carousel .slide .btn-slide{
	display:block;
	width:85px;
	height:20px
	}
#content #port #thumbnail{
	width:450px;
	display:inline;
	height:20px;
	float:left;
	margin:3px 0 0 80px
	}
#content #port #thumbnail ul li{
	display:inline;
	}
#content #port #thumbnail .thumb-block{
	float:left;
	position:relative;
	margin:0 5px 5px 0
	}
#content #port #thumbnail .thumb-block img{
	padding:1px;
	border:1px solid #ccc
	}
#content #port #thumbnail .thumb-block a{
	display:block;
	color:#000;
	text-decoration:none
	}
#content #port #thumbnail .thumb-block a.selected img{
	padding:1px;
	border:1px solid #FF6200
	}
#content #port #thumbnail .thumb-block strong{
	display:none;
	font-size:0.73em;
	background:url(images/tool_tip_bg.png) no-repeat scroll 0 0;
	font-style:normal;
	font-weight:normal;
	height:46px;
	left:-15px;
	padding:10px 5px 5px 10px;
	position:absolute;
	top:-75px;
	width:152px;
	z-index:999;
	}
#content #blog-container{
	display:inline;
	width:722px;
	float:left;
	margin:0 0 0 100px
	}
#content #blog-container .blog-header{
	width:622px;
	padding:40px 50px 0 50px;
	height:82px;
	background:url(images/blog_bg_top.png) no-repeat
	}
#content #blog-container .blog-header .latest-head{
	width:237px;
	height:39px;
	margin:-10px 0 0 0;
	background:url(images/header_latest.gif) no-repeat
	}
#content #blog-container .blog-header h2{
	/*margin:5px 0 0 0;*/
	padding:10px 30px 30px 30px;
	color:#0E3354;
	font-size:1.23em;
	font-weight:700;
	font-family:Georgia, "Times New Roman", Times, serif;
	background:url(images/bg_header.gif) bottom no-repeat
}
#content #blog-container .blog-header h2 a{	
	color:#0E3354;
	text-decoration:none
	}
#content #blog-container .blog-header h2 a:hover{
	color:#5197B4
	}
#content #blog-container .blog-header .date{
	color:#666;
	float:left;
	margin:-20px 0 0 0;
	padding:0 0 0 30px;
	font-style:italic;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:0.9em
	}
#content #blog-container .blog-header .tag{
	color:#666;
	float:right;
	margin:-20px 0 0 0;
	padding:0 30px 5px 23px;
	background:url(images/bullet_tag.gif) no-repeat;
	font-style:italic;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:0.9em
	}
#content #blog-container .blog-header .tag a{
	color:#666;
	text-decoration:none
	}
#content #blog-container .blog-header .tag a:hover{
	color:#3DC4B5
	}
#content #blog-container .blog-body{
	width:562px;
	padding:0 80px;
	line-height:1.4em;
	font-size:0.93em;
	font-family:trebuchet MS, Arial, Helvetica, sans-serif;
	background:url(images/blog_bg_body.png) repeat-y
	}
* html #content #blog-container .blog-body{
	background:url(images/blog_bg_body.gif) repeat-y
	}
/*#content #blog-container .blog-body .blog-content{
	background:url(images/bg_squid.gif) bottom center no-repeat;
	padding:0 0 80px 0
	}*/
#content #blog-container .blog-body .blog-content ul, #content #blog-container .blog-body .blog-content ol{
	padding:0.3em 40px
	}
#content #blog-container .blog-body .blog-content p{
	padding:0 0 15px 0;
	}
#content #blog-container .blog-body .blog-content .blog-separator{
	background:url(images/bg_squid.gif) bottom center no-repeat;
	padding:0 0 80px 0;
	clear:both
	}
#content #blog-container .blog-body #comment{
	margin:50px 0 0 0;
	}
.start-comment{
	background:url(images/bg_comments.gif) no-repeat
	}
#content #blog-container .blog-body #comment h3{
	padding:50px 0 10px 25px;
	color:#9E5322;
	float:left;
	width:100%
	}
#content #blog-container .blog-body #comment .navigation{
	padding:0 20px;
	float:left;
	width:100%
	}
#content #blog-container .blog-body .navigation{
	padding:20px 0;
	float:left
	}
#content #blog-container .blog-foot{
	width:722px;
	height:120px;
	background:url(images/blog_bg_foot.png) no-repeat
	}
.alignleft{
	float:left
	}
.alignright{
	float:right
	}
#content #blog-container .blog-body #comment .navigation .commentlist li {
	list-style-image:none;
	list-style-position:outside;
	line-height:0.9em;
	list-style-type:none;
	padding:5px 5px 25px 10px;
	}
#content #blog-container .blog-body #comment .navigation .commentlist li .avatar {
	background:#FFFFFF none repeat scroll 0 0;
	border:1px solid #EEEEEE;
	float:right;
	padding:2px;
	}
.commentlist cite{
font-size:1.3em
}
.commentlist cite, .commentlist cite a{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-decoration:none;
	font-style:normal;
	font-weight:bold;
	}
.says{
	font-size:0.8em
	}
.commentmetadata {
	display:block;
	margin:0;
	font-size:0.7em
	}
.commentmetadata a{
	text-decoration:none
	}
.commentmetadata {
	font-weight:normal;
	margin:0 0 10px
	}
#content #blog-container .blog-body #comment .navigation .commentlist li p{
	padding:0 0 10px;
	text-align:left;
	font-size:0.9em;
	font-family:trebuchet MS, Arial, Helvetica, sans-serif;
	line-height:1.2em
	}
.even{
	background:url(images/bg_even.gif) top center no-repeat
	}
.odd{
	background:url(images/bg_odd.gif) top center no-repeat
	}
.reply{
	background:url(images/grey_dots.gif) bottom center no-repeat;
	font-size:0.85em;
	padding:0 0 25px
	}
.postmetadata{
	padding:5px 0;
	float:left;
	width:100%;
	font-size:0.8em
	}
#commentform{
	width:500px
	}
#commentform p{
	padding:0 0 5px
	}
.clear-space{
	margin:0 !important;
	padding:0
	}
.share-your-sheech{
	padding:0 30px
	}
.about-me{
	font-family:trebuchet MS, Geneva, Arial, Helvetica, sans-serif;
	font-size:2.2em;
	font-weight:700;
	line-height:0.8em;
	letter-spacing:0;
	text-align:left;
	text-transform:uppercase;
	}
.about-me strong{
	color:#D20C17
	}
#respond{
	width:100%;
	clear:both;
	padding:50px 0 0 0;
	background:url(images/bg_comments.gif) no-repeat
	}
.wp-caption{
	padding:2px;
	background:#FFFEEE
	}
.wp-caption-text{
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:9px;
	padding:3px;
	font-style:italic
	}
ul#twitter_update_list li span a{
	font-size:1em !important;
	}