@charset "utf-8";
/*
-----------------------------------------------
Thanks you for visiting this section, feel free
to look and learn but please don't copy or steal.

PLAN4PLAY VERSION 2.0 (Say "Hello!")
DESIGNED by: laksamee
XHTML and CSS by: radiz
email: info@plan4play.com
mobile: +66(0)84-103-8552
-----------------------------------------------
*/
* {margin: 0; padding: 0;}

body {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 100%;
	background: #000 url(../images/bg/bg_bodyMain.gif) top center repeat-y;;
	color: #fff;
}
a {text-decoration: underline; color: #fff;}
a:hover {text-decoration: none; color: #ff4d83;}
img {border: none;}

#container {width: 885px; margin: 0 auto; padding-bottom: 15px;}

/* header ---
------------*/
#headerWrapper {width: 700px; padding-left: 5px; position: relative;}
#headerWrapper h1 {width: 232px; height: 197px; background: url(../images/bg/logo-trans.png) no-repeat;}
#headerWrapper h1 a {width: 232px; height: 197px; display: block; text-decoration: none;}
#headerWrapper h1 a:hover {text-decoration: none}
#headerWrapper h1 a span {visibility: hidden;}
#headerWrapper p.betatest {
	width: 95px;
	height: 95px;
	position: absolute;
	right: 68px;
	top: 62px;
}

#preParagraph {width: 280px; padding: 35px 5px 10px 15px;}
		#preParagraph h2 {font-size: 1.25em; color: #999; font-weight: normal; margin-bottom: 0.3125em;}
		#preParagraph p {font-size: 0.75em; color: #999;}
		
/* navigation ---
---------------- */
#navigation {
	width: 685px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.75em;
	padding: 35px 0 45px 15px;
	list-style: none;
}

	#navigation li {float: left; margin-right: 1px;}
	#navigation li a ,#navigation li a:visited {
		display: block;
		color: #eee;
		padding: 2px 10px;
		text-decoration: none;
		background: #777;
	}
	#navigation li a:hover {text-decoration: none; background: #8dc63f;}
	#navigation li a.active {text-decoration: none; background: #ff4d83;}
	#navigation li a.inActive {text-decoration: none; background: #b5aa97; color: #6c5530;}
	
/* aboutus ---
-------------*/
#aboutus {width: 525px; padding-left: 20px;}
#aboutus h2 {font-size: 1.25em; font-weight: normal; margin-bottom: 0.625em;}
#aboutus p {font-size: 0.75em; margin-bottom: 1.25em;}
#aboutus h3 {font-size: 1em; color: #8dc63f; font-weight: normal; margin-bottom: 0.625em;}
#aboutus h4 {font-size: 0.875em; color: #8dc63f; font-weight: normal; padding-top: 0.625em; margin-bottom: 0.625em;}
#aboutus dl {width: 320px; font-size: 0.75em;}
#aboutus dl dt {font-weight: bold; color: #9a9a9a;}
#aboutus dl dd {margin-bottom: 0.9375em;}

/* our work page ---
-------------------*/
#workWrapper {padding-left: 20px;}
#workWrapper h2 {font-size: 1.25em; font-weight: normal; margin-bottom: 0.625em;}
#workWrapper #randomShow {width: 680px; font-size: 0.75em; padding: 10px; margin-bottom: 1.25em; background: #1f1f1f;}
#workWrapper #randomShow dt {display: block; width: 280px; height: 270px; float: left; margin-right: 10px; background: #9a9a9a;}
#workWrapper #randomShow dd.subThumbnail {overflow: hidden; margin-bottom: 10px;}
#workWrapper #randomShow dd.subThumbnail > p {display: block; width: 190px; height: 130px; float: left; margin-right: 10px; background: #9a9a9a;}
#workWrapper #randomShow dd.subThumbnail > p + p {display: block; width: 190px; height: 130px; margin: 0;}
#workWrapper #randomShow dd.abstract {clear: both; padding-top: 5px;}
#workWrapper #randomShow dd.abstract p span {color: #8dc63f;}

#workWrapper #recentWork {width: 700px; border-top: 1px solid #1f1f1f; padding-top: 10px; overflow: hidden;}
#workWrapper #recentWork h3 {font-size: 0.875em; font-weight: normal; color: #9a9a9a; margin-bottom: 0.625em;}
#workWrapper #recentWork > ul {width: 190px; float: left; font-size: 0.6875em; color: #9a9a9a; margin-right: 10px; list-style: none;}
#workWrapper #recentWork > ul + ul {width: 350px; margin: 0;}
#workWrapper #recentWork ul a {text-decoration: none;}
#workWrapper #recentWork ul a:hover {color: #8dc63f; text-decoration: none;}

/* index ---
-----------*/
#indexWrapper {padding-left: 20px;}
#indexWrapper ul.latestplan {
	width: 690px;
	font-size: 0.75em;
	list-style: none;
	padding: 10px 0 15px;
	margin-bottom: 1.25em;
	border-bottom: 1px solid #1f1f1f;
	overflow: hidden;
}

#indexWrapper .latestplan li h2 {font-size: 160%; font-weight: normal; margin-bottom: 0.625em;}
#indexWrapper .latestplan p.recentWork {text-align: right; clear: both;}
#indexWrapper .latestplan li ol li {width: 340px; list-style: none; float: left; margin: 0 10px 10px 0;}
#indexWrapper .latestplan li ol li.end {margin-right: 0;}
#indexWrapper .latestplan li ol li p {color: #999; padding: 3px 10px; background: #1f1f1f;}
#indexWrapper .latestplan li ol li p.planImage {width: 320px; height: 140px; padding: 10px; margin-bottom: 1px;}
#indexWrapper .latestplan li ol li p em {display: block; color: #fff; font-weight: bold; font-style: normal;}

#indexWrapper ul.blogandShop {
	width: 690px;
	font-size: 0.75em;
	list-style: none;
	padding: 10px 0 15px;
	margin-bottom: 1.25em;
	overflow: hidden;
}

#indexWrapper .blogandShop li {width: 340px; float: left; margin-right: 10px;}
#indexWrapper .blogandShop li h2 {font-size: 160%; font-weight: normal; margin-bottom: 0.625em;}
#indexWrapper .blogandShop li.end {margin-right: 0;}
#indexWrapper .blogandShop li ol {height: 100px; padding: 10px; background: #1f1f1f;}
#indexWrapper .blogandShop li ol li {width: 310px; float: none; list-style: none;}
#indexWrapper .blogandShop li ul {height: 100px; padding: 10px; background: #1f1f1f;}
#indexWrapper .blogandShop li ul li {width: 310px; float: none; list-style: none;}
#indexWrapper .blogandShop li ul li p.shopImage {width: 155px; height: 80px; margin-right: 10px; float: left;}
#indexWrapper .blogandShop li ul li p.more {clear: both; text-align: right;}

.latestplan a, .blogandShop a {text-decoration: none; color: #a8a8a8;}
.latestplan a:hover, .blogandShop a:hover {text-decoration: none; color: #8dc63f;}

/* contactus ---
-------------*/
#contactus {width: 525px; padding-left: 20px;}
#contactus h2 {font-size: 1.25em; font-weight: normal; margin-bottom: 0.625em;}
#contactus p {font-size: 0.75em; margin-bottom: 1.25em;}
#contactus ul {list-style: none; font-size: 0.75em; margin-bottom: 2em;}
#contactus ul li {margin-bottom: 0.75em;}
#contactus form label {width: 150px; float: left; text-align: right; margin-right: 0.625em;}

#contactus form .fillBox {
	width: 250px;
	background: #1f1f1f;
	padding: 3px;
	border: 1px solid #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	color: #fff;
}

#contactus form textarea {height: 100px;}
#contactus form .button {
	width: 50px;
	height: 22px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	color: #fff;
	margin-left: 160px;
	background: #1f1f1f;
	border: 1px solid #000;
}

#contactus address {font-size: 0.75em; font-style: normal;}
#contactus p.notice {margin: 2em 0; color: #8dc63f;}

/* welove ---
------------*/
#welove {width: 525px; padding-left: 20px;}
#welove h2 {font-size: 1.25em; font-weight: normal; margin-bottom: 0.625em;}
#welove ul {list-style: none;}
#welove ul li {margin-bottom: 1.25em;}
#welove ul li h3 {font-size: 1em; font-weight: normal; color: #999; margin-bottom: 0.3125em;}
#welove ul li ol li {list-style: none; margin-bottom: 0.3125em; font-size: 0.75em;}

#welove a {text-decoration: none;}
#welove a:hover {color: #8dc63f; text-decoration: none;}

/* footer ---
------------*/
#footer {width: 400px; font-size: 0.75em; padding: 15px 0 0 20px; position: relative;}
#footer p.copyright {position: absolute; top: 26px;	left: 133px;}