/* id3 website v4 by id3 (http://www.id3.co.th) */
/* You may learn from and adapt elements of our CSS and markup in your own projects, but the unique combination of images, colors, sizes, typography, and positioning ("the design") is copyright 2009 id3 (http://www.id3.co.th) and may not be reproduced.

body text: #333; (dark grey)
links: #f7931e; (orange)
em: #42210b; (very dark red)
column width: 295px;

last updated: 25/02/10
*/

@charset "UTF-8";
/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.7.0
*/
html{color:#333;background:#4c3300;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,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,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}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:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea,button{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
body{margin:10px;}h1{font-size:138.5%;}h2{font-size:123.1%;}h3{font-size:108%;}h1,h2,h3{margin:1em 0;}h1,h2,h3,h4,h5,h6,strong,dt{font-weight:bold;}optgroup{font-weight:normal;}abbr,acronym{border-bottom:1px dotted #000;cursor:help;}em{font-style:italic;}del{text-decoration:line-through;}blockquote,ul,ol,dl{margin:1em;}ol,ul,dl{margin-left:2em;}ol li{list-style:decimal outside;}ul li{list-style:disc outside;}dl dd{margin-left:1em;}th,td{border:1px solid #000;padding:.5em;}th{font-weight:bold;text-align:center;}caption{margin-bottom:.5em;text-align:center;}sup{vertical-align:super;}sub{vertical-align:sub;}p,fieldset,table,pre{margin-bottom:1em;}button,input[type="checkbox"],input[type="radio"],input[type="reset"],input[type="submit"]{padding:1px;}

/* TAGS */
html { background: #4c3300; } /* required to avoid white bg behind #landscape (footer) */
body {
	font: 0.8em/1.5em "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	color: #333;
	background: #4c3300 url(../p/bg_page.jpg) repeat-x fixed left top;
	margin: 0;
	padding: 15px;
	position: relative;
}
a:link, a:visited {
	text-decoration: none;
	color: #f7931e;
}
address {
	margin-bottom: 15px;
	font-style: normal;
}
:focus { outline: none; } /* firefox */
h1 {
	background: url(../p/logo_id3.png) no-repeat; /* id3 logo */
	text-indent: -9999px;
	display: block;
	height: 73px;
	width: 67px;
	margin: 0;
	padding: 0;
	float: right;
	clear: right;
	_background: url(../p/logo_id3.gif) no-repeat; /* id3 for ie6 */
}
h1 a:link, h1 a:visited {
	height: 73px;
	width: 67px;
	display: block; /* required to make links clickable */
}
h2 {
	font-size: 2.4em;
	font-weight: normal;
	padding: 0;
	margin: 0;
	color: #666;
	width: 800px;
}
h2 em {
	font-weight: bold;
	color: #42210b;
}
h4 {
	font-size: 1.5em;
	padding-left: 5px;
	margin: 0;
	color: #666;
	padding-top: 5px;
}
hr { /* one rule to clear them all */
	margin: 0;
	padding: 0;
	clear: both;
	float: none;
	display: none;
}
.highlight {
	background-color: #f7931e;
	color: #fff !important;
}
/* LAYOUT */
/* accessibility: link to skip projects */
a.screenreader, a.screenreader:hover, a.screenreader:visited { 
	position:absolute;
	left:0px;
	top:-500px;
	width:1px;
	height:1px;
	overflow:hidden;
} 
a.screenreader:focus { 
	position:static; 
	width:auto; 
	height:auto; 
}
.winny {display: none;}
#global{
	margin: 0px auto;
	width: 916px;
	position: relative;
	padding: 15px 15px 25px;
	background: #fff;
}
#header {
	padding-top: 15px;
	padding-bottom: 15px;
	padding-right: 18px;
}
#heliconia {
	position: absolute;
	left: -70px;
	top: -21px;
	background: url(../p/bg_header.png) no-repeat left top;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	_display:none; /* sorry no flower for you ie6, you can't handle png alpha transparency */
	height: 106px;
	width: 91px;
}

/* CONTENT */

#content {padding: 0 0 20px;}

/* PROJECTS */
/* project nav (for filtering) */
#projectnav {
	margin: 15px 0px;
	padding: 0;
}
#projectnav li{ display: inline; }
#projectnav a:link,#projectnav a:visited {
	margin-right: 1em;
	color: #333;
	font-weight: bold;
	text-decoration: none;
	padding-bottom: 0.3em;
}
#projectnav a:hover, #projectnav a.current{ border-bottom: 3px solid #f7931e; }

/* projects listing */
#projects {margin: 0;padding: 0;} /* avoid "jumps" when few projects filtered */
#projects dl { /* each project is in a definitions list */
	margin: 0px 18px 0px 0px; /* 18px to make total width same as columns */
	padding: 0;
	width: 165px; /* 163px thumbnail + 1px border left + 1px border right */
	height: 150px; /* 122px thumbnail + 1px border top + 1px border botton + projectname + margin between project rows */
	display: block;
	float: left; /* make sure all projects and projectnames have the same size */
	position: relative; /* required to position .overview */
}
#projects dt img {
	display: block; /* required */
	border: 1px solid #cdcdcd;
	background: #eee url(../p/ajax-loader.gif) no-repeat center center; /* loader appears in bg until thumbnail is loaded */
	-moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.15);
	-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.15);
	-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.15);
	box-shadow: 2px 2px 2px rgba(0,0,0,0.15);
	
}
#projects .case-study {
	background: url(../p/ribbon_case-study2.png) no-repeat;
	height: 122px;
	width: 163px;
	position: absolute;
	top: -3px;
	text-indent: -9999px;
	margin: 1px;
	padding: 0;
	_background: url(../p/ribbon_case-study.gif) no-repeat; /* ie6 doesn't handle png alpha transparency */
	left: -3px;
}
#projects .projectname {
	font-weight:normal;
	padding: 0;
	margin: 0;
	color: #333;
	font-size: 0.9em;
}
#projects .overview { /* overview only appears on hover, it has to be the same size as the thumbnail it will cover */
	width: 155px; /* 165px #projects dl - 5px padding left - 5px padding right. IE6 will not get this. */
	height: 114px; /* (122px thumbnail + 1px border top + 1px border bottom) - 5px padding top - 5px padding bottom */
	margin:0;
	padding: 5px;
	color: #fff;
	font-size: 0.85em;
	background: url(../p/000_80.png) repeat; /* overlay */
	position: absolute; /* from relatively positioned #projects ul */
	left: 0px;
	top: 0px;
	cursor: pointer;
	display: none; /* will be shown and hidden via jquery on hover */
	_background-image: none; /* ie6 doesn't handle png alpha transparency */
	_background-color: #333; /* we display a solid colour instead */
	-moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.15);
	-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.15);
	-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.15);
	box-shadow: 2px 2px 2px rgba(0,0,0,0.15);
}
#projects .overview .ui-icon { float: left; }
#projects .overview a:link, #projects .overview a:visited {
	color: #fff;
	display: block;
	height: 114px;
	width: 155px;
	cursor: pointer;
}
#projects .overview a:hover {}
#projects .gallery { display: none; } /* hide all dd that include links to pictures (shadowbox gallery) */

/*extra */
/* block of content under the projects */
#extra {
	display: block;
	clear: both;
	float: none;
	margin: 0;
	padding: 0;
}
h3 {
	font-size: 2em; /* section titles */
	border-bottom: 1px solid #ccc;
	color: #42210b;
	margin: 15px 0px;
	padding: 0;
}
.col {
	margin: 0;
	padding: 0;
	width: 295px;
}
.left {float: left;}
.middle {margin-left: 15px;float: left;margin-right: 15px;}
.right {clear: right;float: right;}
.clear {
	clear: both;
	float: none;
	display: block;
	width: auto;
}

#projectselection { /* ul in left column */
	margin: 0;
	padding: 0px 15px;
}
#projectselection li { /* "projects we can take" */
	margin: 0px 0px 5px;
	padding: 0;
	list-style: disc outside;
}
#home blockquote, #contact blockquote { /* "we're hiring" */
	padding: 5px;
	margin: 5px 0px;
	background: url(../p/ui-bg_glass_55_F7931E_1x400.png) repeat-x;
}
#home blockquote em, #contact blockquote em { /* "we're hiring" */
	font-weight: bold;
	font-style: normal;
}
/* Latest tweet */
#tweetingelephant {
	background: url(../p/id3_elephant_tweeting.gif) no-repeat right bottom;
	height: 274px;
	width: 269px;
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: -25px;
	font-size: 11px;
	right: 15px;
}
h6 {
	color: #42210b;
	font-size: 11px;
	margin: 0;
	padding: 0;
	line-height: 37px; /* elephant tweeting */
	text-indent: 60px; /* leave space for tweeting bird icon */
}
h6 a:link, h6 a:visited {color: #42210b !important;}
h6 a:hover {color: #fff !important;background: #42210b !important;}

/* latest tweet */
#tweets {margin: 0;padding:5px;width:240px;}
#tweets .hash {color:#06 !important;} 
#tweets .reply {color:#06c !important;} 
#tweets a:link, #tweets a:visited {color:#42210b !important;text-decoration:underline;}
#tweets a:active {color:#f7931e !important;}
#tweets a:hover {text-decoration:none !important;color:#42210b;background:transparent !important;}
#tweets .meta {font-size:0.9em;}
/* form */
#enquiry {
	margin: 0 0 15px; /* make sure "send" button is not sticking to footer */
	padding: 0;
}
fieldset {padding: 0;margin: 0;}
legend {
	font-weight: bold;
	margin-bottom: 10px;
	border-bottom: 1px solid #ccc;
	display: block;
	width: 100%;
}
label {
	width: 7em;
	float: left;
}
input, select, textarea {
	margin: 0 0 10px;
	padding: 2px;
	border: 1px solid #ccc;
	width: 14em;
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	background: #f2f2f2 url(../p/ui-bg_glass_75_e6e6e6_1x400.png) repeat-x left center;
	color: #333;
}
textarea {
	width: 22.4em;
	margin: 0;
	padding: 0;
	background: #f2f2f2 url(../p/ui-bg_glass_75_e6e6e6_1x400.png) repeat-x left top;
}
input:focus, select:focus, textarea:focus { border: 1px solid #666;background: #f2f2f2 url(../p/ui-bg_glass_75_e6e6e6_1x400.png) repeat-x left bottom; }
input[type='checkbox'], input[type='radio']{ /* sucky ie6 won't get this, others will */
	background: transparent;
	border: none;
	width: auto !important;
}
.required:after {
	content: '*';
	color: #f7931e;
	float: right;
	padding-right: 5px;
}
#submit_project, #project_time, #project_money, #project_details, #join_team, #thai_law { display: none; }
#enquiry cite { /* form help */
	font-size: 0.85em;
	color: #666;
}
/* submit a project */
#project_scope {
	padding: 0;
	border-style: none;
}
#project_scope input, #project_scope label {
	width: auto;
	float: none;
}
/* join the team */
#team_dobday, #team_dobmonth, #team_dobyear {
	float: left;
	width: auto;
	margin: 0 5px 0 0;
	padding: 0px;
}
#team_dobyear {
	clear: right!important;
	float: none;
}
#why_thai {
	cursor: pointer;
	border-bottom: 1px dotted #666;
}
#why_thai:hover {
	border: none;
}
#thai_law {
	font-size: 0.85em;
}
#captcha {
	border: 1px solid #ccc;
	float: left;
	margin: 0px 0px 10px;
	padding: 0px;
}
#captcha_accessibility {
	margin: 0;
	padding: 0 0 0 10px;
	clear: right;
}
#captcha_accessibility li {
	list-style: none;
	display: block;
	float: none;
}
#captcha_accessibility .ui-icon {
	display: block;
	background-image: url(../p/ui-icons_222222_256x240.png);
}
.button, #goog-wm-sb {
	background: #f7931e;
	padding: 0.3em 0.5em !important; /* override reset-font-base */
	color: #fff !important;
	width: auto;
	border-style: none;
	margin: 0;
	font-size: 0.9em;
}
.button:hover, #goog-wm-sb:hover {background: #333;}
a.button:link, a.button:hover { color: #fff !important; }
address a:link, address a:visited { color: #58534c; }
address a:hover {
	color: #fff;
	background: #333;
}
#MessageContainer  { /* for validation messages */
	margin-bottom: 10px;
	display: none;
	background: #f7931e;
}
label.error {
	display: block;
	margin: 0;
	clear: both;
	width: auto;
	float: none;
	padding: 5px;
	color: #42210b;
}

/* footer */
#footer {
	display: block;
	clear: both;
	float: none;
	border-top: 1px solid #ccc;
	font-size: 0.85em;
	color: #666;
}
#footer a:link, #footer a:visited {
	text-decoration: none;
	padding: 2px;
	color: #666;
}
#footer a:hover {
	background: #666;
	color: #fff;
}
#landscape {
	background: url(../p/bg_footer.png) repeat-x left bottom;
	height: 59px;
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	margin: 0 0 -15px;
	padding: 0;
	z-index: 100;
	overflow: hidden;
	_background: url(../p/bg_footer.gif) repeat-x left bottom; /* simplified landscape for you ie6, you can't handle png alpha transparency. what a wuss! */
}
/* CONTACT CONFIRMATION & ERROR PAGES (id3contactmailer.php) */
#contact .middle {
	padding-bottom: 50px;
}
#contact .right {
	min-height: 280px;
	background: url(../p/id3_elephant_contact.gif) no-repeat right bottom; /* display cute elephant */
	padding-bottom: 50px;
}
#errorsummary  { /* for validation messages on id3contactmailer.php (line 859) */
	background: #cd0a0a;
	margin: 0 0 15px;
	padding: 5px;
	color: #fff;
}
#errorsummary li { list-style: inside; }
#contact .confirm {background: #97d817;} /* change bg colour of button to show success */
#contact .error {background: #cd0a0a;} /* change bg colour of button to show error */

/* 404 ERROR PAGE */
#error #content {
	background: url(../p/bg_404.jpg) repeat-x left 70px !important;
	padding-top: 90px;
	margin-right: -15px; /* we want to get rid of padding right so that the bg image fills all content */
	margin-left: -15px; /* we want to get rid of padding left so that the bg image fills all content */
	padding-right: 15px; /* we add some padding to keep consistency and avoid sticking content to edges */
	padding-left: 15px;
}
#error #content h4 {
	background: url(../p/404.png) no-repeat center;
	margin: 0;
	padding: 0;
	height: 160px; /* must be at least height of 404.png image */
	text-indent: -9999px;
}
#error #content h5 {
	margin-top: 30px;
	margin-bottom: 15px;
	font-size: 2em;
}
#error #content p { margin-bottom: 30px; }
#error #content .huge {
	font-size: 2em;
	padding: 1em;
	background: url(../p/ui-bg_glass_65_F7931E_1x400.png) repeat-x center;
	color: #42210b;
}
#error #content .huge:hover { background: url(../p/ui-bg_glass_65_F7931E_1x400.png) repeat-x top; }
/* Google's 404 Error search */
#goog-fix-url { padding-top: 15px; }
#goog-fix-url h3 {
	font-size: 0.5em !important;
	border-style: none !important;
}
#goog-fixurl ul {
	margin: 0;
	padding: 0;
}
#goog-fixurl li {
	list-style: none;
	margin: 0;
	padding: 0;
}
#goog-wm-qt { margin-right: 15px; }

/* SHADOWBOX */
#sb-content html { background-color: #f3f3f3; } /* make bg colour of shadowbox same as body (override "html" rule) */

/* PROJECT DETAILS (case study)  */
#details, #popup {
	background-image: none;
	background-color:#f3f3f3;
	margin: 0;
	padding: 10px 5px 5px;
}
#details #global, #popup #global {
	width: 760px; /* we don't want the shadowbox to take all screen width */
	background: #f3f3f3;
	padding: 0;
	margin-top: 0;
	margin-bottom: 0;
}
#details #header, #popup #header {
	display: block;
	clear: both;
	float: none;
	margin: 0px 0px 10px;
	padding: 0;
}
#details #global h1, #popup #global h1 {
	background: url(../p/logo_id3_popup.png) no-repeat top right;
	height: 40px;
	width: 36px;
	margin: 0;
	padding: 0;
	_background: url(../p/logo_id3_popup.gif) no-repeat top right; /* ie6 */
}
#details #global h2, #popup #global h2 {
	margin-bottom: 15px;
	display: inline;
	line-height: 40px;
}
#details #slideshow {
	padding: 5px 10px 5px 5px;
	height: 340px;
	width: 745px;
	border: 1px solid #000;
	background: #333;
	font-size: 0.85em;
	clear: both;
	float: none;
	display: block;
	color: #fff;
}
#details #slideshow .item {
	margin: 0;
	padding: 5px;
	display: block;
	height: 340px;
	width: 750px;
}
#details #slideshow dt {
	float: left;
	margin-right: 10px;
}
#details #slideshow dt img {
	border: 1px solid #000;
	background: #eee url(../p/ajax-loader.gif) no-repeat center center;
}
#details #slideshow dd { margin-bottom: 10px; }
#details #slideshow a.button:hover { color:#333;background-color: #ccc; }
#details #slideshow h3 {
	font-size: 1.3em;
	margin: 1.3em 0px;
	padding: 0;
	color: #fff;
	border-bottom: none;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
}
#details #slideshow ul {
	margin: 0px 0px 10px 0px; /* margin-top required by IE (otherwise <li> are halfway under the slideshow) */
	padding: 0px;
}
#details #slideshow li { list-style: inside; } /* make sure <ul> in the caption don't overlap with the picture on the left */

/* navigate between highlights (#nav is appended by jQuery Cycle) */
#details #slideshow #nav {
}
#details #nav a:link, #details #nav a:visited {
	text-decoration: none;
	margin: 0 5px 0 0;
	padding: 2px;
	color: #f3f3f3;
	font-size: 5px;
	height: 5px;
	width: 5px;
	overflow: hidden;
	line-height: 5px;
	border: 1px solid #ccc;
}
#details #nav a:hover {
	color: #f3f3f3;
	border: 1px solid #666;
}
#details #nav a.activeSlide {
	color: #f7931e;
	background-color:#f7931e;
	border: 1px solid #f7931e;
}
#details #nav a:focus { outline: none; }
#details #sidebar {
	width: 300px;
	margin: 15px 15px 0 0;
	padding: 0;
	float: left;
}
#details #summary { /* table with projects overview */
	font-size: 0.85em;
	border-style: none;
	margin-right: 15px;
}
#details #summary th {
	text-align: left;
	border: 1px solid #ccc;
	vertical-align: top;
}
#details #summary td {
	border: 1px solid #ccc;
	vertical-align: top;
}
#details #main {
	margin-left: 315px;
	text-align: justify;
	margin-top: 15px;
}
#details #main a:link, #popup #content a:link {
	color: #333;
	border-bottom: 1px dotted #666;
	padding: 2px;
}
#details #main a:visited, #popup #content a:visited {color: #666;}
#details #main a:hover, #popup #content a:hover {
	border-style: none;
	color: #fff;
	background: #333;
}
#details .credits { font-size: 0.85em; }
#details a.button, #details a.button:visited { color: #fff; }

/* Copyright popup */
#popup #content {
	padding-right: 180px;
	background: url(../p/id3_elephant_standing.png) no-repeat right bottom;
}
#popup h4 {
	font-size: 1.2em;
	font-weight: bold;
	margin: 0 0 10px;
	padding: 0;
	color: #333;
	border-bottom: 1px solid #333;
}
#flash { background: #eee url(../p/ajax-loader.gif) no-repeat center center; } /* flash files in poject descriptions (ex: TCDC, Bed Sheets)*/