/*
 * XHTML CSS Coder by Apisit Asavatappitak
 * E-mail: iii_jsiega@hotmail.com
 *
 * Copyright 2010-2012, Apisit Asavatappitak
 *
 */


/* reload all browser */
* {
	background:none;
	border:none;
	border-collapse:collapse;
	font-style:normal;
	line-height:100%;
	list-style:none;
	margin:0;
	outline:none;
	padding:0;
	text-decoration:none;
	vertical-align:baseline;
}
a {
	color:rgb(102, 102, 102);
	cursor:pointer;
}
a:hover {
	color:rgb(0, 153, 255);
}
:focus {
	outline:none;
}
h2 {
	color:rgb(255, 255, 255);
	font:bold 13px Arial;
}
img {
	behavior:url('ecma/iepngfix.htc');
}
.underline {
	text-decoration:underline;
}
body {
	background:rgb(153, 153, 153) url(../image/bg-main.jpg) repeat-x 0 0;
	color:rgb(255, 255, 255);
	font:12px Arial;
	margin:0;
}
#container {
	margin:0 auto;
	padding:0;
	position:relative;
	width:965px;
}

/* header */
#header {
	float:left;
	height:185px;
	margin:0;
	padding:0;
	width:965px;
}
#header h1 {
	float:left;
	margin:0;
	padding:0;
	width:340px;
}
#header #slogan {
	float:right;
	margin:0;
	padding:0;
	width:340px;
}
#header #demand {
	clear:both;
	float:right;
	margin:0;
	padding:0;
	width:200px;
}
#header #demand li#request {
	background:rgb(255, 255, 255);
	border:1px solid rgb(98, 98, 98);
	float:left;
	margin:0 2px 0 0;
	padding:2px 3px;
}
#header #demand li#contact {
	background:rgb(255, 255, 255) url(../image/bg-contact-button.jpg) no-repeat 0 0;
	border:1px solid rgb(98, 98, 98);
	float:left;
	margin:0;
	padding:2px 3px 2px 18px;
}

/* content */
#content {
	float:left;
		_height:480px;
	margin:0;
	min-height:480px;
	padding:0;
	width:965px;
}
#content .wrap {
	float:left;
	margin:0 0 3px;
	padding:0;
	width:965px;
}
#content .wrap h2 a.change {
	background:url(../image/arrow-tab-change.gif) no-repeat 519px 6px;
	color:rgb(0, 153, 255);
}

/* our portfolio */
#content .wrap h2.head-portfolio {
	background:rgb(0, 0, 0);
	float:left;
	height:18px;
	margin:0;
	padding:0;
	width:531px;
}
#content .wrap h2.head-portfolio a {
	background:url(../image/arrow-tab.gif) no-repeat 519px 6px;
	color:rgb(255, 255, 255);
	float:left;
	margin:0;
	padding:2px 0 2px 7px;
	width:524px;
}
#content .wrap .portfolio {
	background:rgb(0, 0, 0);
	display:none;
	float:left;
	margin:0;
	height:294px;
	padding:0;
	width:531px;
}
#content .wrap .portfolio p.frame1 {
	float:left;
	margin:0;
	padding:0;
	width:531px;
}

/* client list */
#content .wrap h2.head-client {
	background:rgb(0, 0, 0);
	float:left;
	height:18px;
	margin:0 0 0 150px;
		_margin-left:75px;
	padding:0;
	width:549px;
}
#content .wrap h2.head-client a {
	background:url(../image/arrow-tab.gif) no-repeat 535px 6px;
	color:rgb(255, 255, 255);
	float:left;
	margin:0;
	padding:2px 0 2px 7px;
	width:542px;
}
#content .wrap .client {
	background:rgb(255, 255, 255);
	display:none;
	float:left;
	margin:0 0 0 150px;
		_margin-left:75px;
	height:112px;
	padding:0;
	width:549px;
}
#content .wrap .client p.frame2 {
	float:left;
	margin:0;
	padding:0;
	width:549px;
}

/* news */
#content .wrap h2.head-news {
	background:rgb(0, 0, 0);
	float:left;
	height:18px;
	margin:0 0 0 340px;
		_margin-left:170px;
	padding:0;
	width:531px;
}
#content .wrap h2.head-news a {
	background:url(../image/arrow-tab.gif) no-repeat 519px 6px;
	color:rgb(255, 255, 255);
	float:left;
	margin:0;
	padding:2px 0 2px 7px;
	width:524px;
}
#content .wrap .news {
	background:rgb(102, 102, 102);
	display:none;
	float:left;
	margin:0 0 0 340px;
		_margin-left:170px;
	height:274px;
	padding:0;
	width:531px;
}
#content .wrap .news p.frame3 {
	float:left;
	margin:0;
	padding:0;
	width:531px;
}

/* about us */
#content .wrap h2.head-about {
	background:rgb(0, 0, 0);
	float:left;
	height:18px;
	margin:0 0 0 115px;
		_margin-left:57px;
	padding:0;
	width:531px;
}
#content .wrap h2.head-about a {
	background:url(../image/arrow-tab.gif) no-repeat 519px 6px;
	color:rgb(255, 255, 255);
	float:left;
	margin:0;
	padding:2px 0 2px 7px;
	width:524px;
}
#content .wrap .about {
	background:rgb(0, 0, 0);
	display:none;
	float:left;
	margin:0 0 0 115px;
		_margin-left:57px;
	height:294px;
	padding:0;
	width:826px;
}
#content .wrap .about p.frame4 {
	float:left;
	margin:0;
	padding:0;
	width:826px;
}

/* why us */
#content .wrap h2.head-whyus {
	background:rgb(0, 0, 0);
	float:left;
	height:18px;
	margin:0 0 0 175px;
		_margin-left:87px;
	padding:0;
	width:531px;
}
#content .wrap h2.head-whyus a {
	background:url(../image/arrow-tab.gif) no-repeat 519px 6px;
	color:rgb(255, 255, 255);
	float:left;
	margin:0;
	padding:2px 0 2px 7px;
	width:524px;
}
#content .wrap .whyus {
	background:rgb(102, 102, 102);
	display:none;
	float:left;
	margin:0 0 0 175px;
		_margin-left:87px;
	height:245px;
	padding:0;
	width:531px;
}
#content .wrap .whyus p.frame5 {
	float:left;
	margin:0;
	padding:0;
	width:531px;
}

/* services */
#content .wrap h2.head-services {
	background:rgb(0, 0, 0);
	float:left;
	height:18px;
	margin:0 0 0 50px;
		_margin-left:25px;
	padding:0;
	width:531px;
}
#content .wrap h2.head-services a {
	background:url(../image/arrow-tab.gif) no-repeat 519px 6px;
	color:rgb(255, 255, 255);
	float:left;
	margin:0;
	padding:2px 0 2px 7px;
	width:524px;
}
#content .wrap .services {
	background:rgb(102, 102, 102);
	display:none;
	float:left;
	margin:0 0 0 50px;
		_margin-left:25px;
	height:320px;
	padding:0;
	width:843px;
}
#content .wrap .services p.frame6 {
	float:left;
	margin:0;
	padding:0;
	width:843px;
}

/* jobs */
#content .wrap h2.head-jobs {
	background:rgb(0, 0, 0);
	float:left;
	height:18px;
	margin:0 0 0 204px;
		_margin-left:102px;
	padding:0;
	width:531px;
}
#content .wrap h2.head-jobs a {
	background:url(../image/arrow-tab.gif) no-repeat 519px 6px;
	color:rgb(255, 255, 255);
	float:left;
	margin:0;
	padding:2px 0 2px 7px;
	width:524px;
}
#content .wrap .jobs {
	background:rgb(102, 102, 102);
	display:none;
	float:left;
	margin:0 0 0 204px;
		_margin-left:102px;
	height:245px;
	padding:0;
	width:714px;
}
#content .wrap .jobs p.frame7 {
	float:left;
	margin:0;
	padding:0;
	width:714px;
}

/* group of company */
#content .wrap h2.head-group {
	background:rgb(0, 0, 0);
	float:left;
	height:18px;
	margin:0 0 0 94px;
		_margin-left:47px;
	padding:0;
	width:531px;
}
#content .wrap h2.head-group a {
	background:url(../image/arrow-tab.gif) no-repeat 519px 6px;
	color:rgb(255, 255, 255);
	float:left;
	margin:0;
	padding:2px 0 2px 7px;
	width:524px;
}
#content .wrap .group {
	background:rgb(0, 0, 0);
	display:none;
	float:left;
	margin:0 0 0 94px;
		_margin-left:47px;
	height:100px;
	padding:0;
	width:531px;
}
#content .wrap .group p.frame8 {
	float:left;
	margin:0;
	padding:0;
	width:531px;
}

/* showcase showreel */
#content .wrap h2.head-showcase {
	background:rgb(0, 153, 255);
	float:left;
	height:18px;
	margin:0 0 0 60px;
		_margin-left:30px;
	padding:0;
	width:531px;
}
#content .wrap h2.head-showcase a {
	background:url(../image/arrow-tab.gif) no-repeat 519px 6px;
	color:rgb(255, 255, 255);
	float:left;
	margin:0;
	padding:2px 0 2px 7px;
	width:524px;
}
#content .wrap .showcase {
	background:rgb(102, 102, 102);
	display:none;
	float:left;
	margin:0 0 0 60px;
		_margin-left:30px;
	height:216px;
	padding:0;
	width:531px;
}
#content .wrap .showcase div {
	float:left;
	font:14px Arial;
	margin:0;
	padding:10px 15px;
	width:501px;
}
#content .wrap .showcase div p {
	float:left;
	line-height:120%;
	margin:0 0 6px;
	padding:0;
	width:501px;
}
#content .wrap .showcase div p span.viewhere {
	background:rgb(255, 255, 255);
	float:left;
	font:12px Arial;
	margin:0;
	padding:0 0 0 5px;
	width:75px;
}

/* footer */
#footer {
	color:rgb(51, 51, 51);
	float:left;
	font:11px Tahoma;
	margin:10px 0 0;
	padding:0 0 5px;
	width:950px;
}
#footer div {
	float:left;
	line-height:150%;
	margin:0;
	padding:0;
	width:500px;
}
#footer div a {
	color:rgb(51, 51, 51);
}
#footer div a:hover {
	color:rgb(200, 200, 200);
}
#footer p {
	float:right;
	margin:0;
	padding:0;
	width:305px;
}
#footer p img {
	float:left;
	margin-left:10px;
	vertical-align:baseline;
}