/* Table of Theme Colors
==========================================================
Teem Red                          #c52720
========================================================== */

/* =General Stuffs
================================== */
* { margin:0; padding:0; }
body { font:13px Tahoma, 'Lucida Grande',Verdana, Helvetica, sans-serif, Arial; }
ul { list-style:none; }
a:link,a:visited { text-decoration:none; }
a img { border:0; }
h1 { font-size:14pt; font-size:140%; }
h2 { font-size:12pt; font-size:120%; }
table,caption { margin:0 auto; }
.black-bg { background-color:black; }
.left-half { float:left; position:relative; }
.right-half { float:right; position:relative; }

/* Page Layout
width: 1002 (972+15*2)
height: 640 (25+80+430+80+25)
================================== */

/* Centering design */
body { text-align:center; }
#wrapper { margin:0 auto; text-align:left; }
#wrapper { width:972px; padding:15px 15px 0; background-position:center center; background-repeat:no-repeat; }
#wrapper2 { }
#header,#footer { height:80px; }
#content { min-height:430px; }
* html #content { height:430px; } /* min-height for IE6 */
#header,#content,#footer { position:relative; }

/* Header
================================== */
#teem-logo { position:absolute; right:0; }
#page-title { float:left; margin-left:12px; }
#link-back { position:relative; float:left; margin-left:12px; width:1px; height:4em; background-color:white; }
#link-back a { position:absolute; left:-3.5em; top:35px; }
.nav-bar li { float:left; } /* navbar for both header and footer */
.nav-bar li a { float:left; display:block; padding:2px .52em; }
.nav-bar li h1 a { padding:2px .6em; font-size:96%; }
.nav-bar a,.nav-bar a:visited { color:white; }
#header .nav-bar li a:hover { color:black; }
#footer .nav-bar li a:hover { color:gray; }
#header .nav-bar { position:absolute; top:15px; } /* Header Nav-bar */
#header .nav-bar ul { float:left; margin-top:.1em; padding-left:1em; width:370px; height:20px; font-weight:bold; font-size:90%; background:#c52720; }
#footer .nav-bar { position:absolute; font-size:14px; font-weight:bold; top:0; left:10px; } /* Footer Nav-bar */

/* Footer
================================== */
#footer #copyright { position:absolute; width:480px; color:white; padding:2px 0 2px 24px; font-size:70%; top:30px; background:#4d4948; }
#footer #red { position:absolute; width:38px; background-color:#c52720; top:30px; left:520px; }
#footer #green { position:absolute; width:38px; background-color:#85c229; top:30px; left:570px; }
#footer #keywords { position:absolute; width:100%; top:50px; font-size:75%; color:gray; }
#footer .nav-bar #us { color:gray; }

/* Each page
================================== */
/* List in wow, scope_service */
#wow #content ul span,#scope_service #content ul span { font-size:13px; color:white; }
#wow #content li,#scope_service #content li { list-style:disc; color:orange; font-size:8px; margin:14px 0; }
#wow #content li span:hover { color:orange; }
#wow #wrapper { background-image:url(../images/background/wow.jpg); }
/* Company Profile */
#company_profile #color-stripe { height:290px; border-top:2px solid #7d7978; border-bottom:2px solid #7d7978; background-color:#383431; color:#bab6b3; }
#company_profile #color-stripe h2 { color:#c52720; margin:10px 0 0; }
#company_profile #flash { position:absolute; width:300px; height:180px; top:50px; left:20px; background:green; }
/* Site Map */
#sitemap .section { width:220px; margin-left:auto; margin-right:auto; }
#sitemap .section h3 { background:black url(../images/section.jpg) bottom left repeat-x; height:26px; padding-left:4px; }
#sitemap .section ul { margin-top:6px; }
#sitemap .section li { margin-top:2px; }
/* Philosophy */
#philosophy #color-stripe { height:179px; background-image:url(../images/background/philosophy.jpg); background-repeat:repeat-x; padding:20px; }
#philosophy #color-stripe h1 { color:black; }
#scope_service #flash { width:345px; height:270px; }
/* Full content space Flash */
#values #flash,#cp2s3 #flash,#about_us #flash,#contact_us #flash,#facilities #flash,#project #flash { position:relative; width:100%; height:380px; text-align:center; }
#contact_us #flash { margin-top:-10px; height:430px; }
/* Easy Interior */
#easy_interior .color-stripe { height:92px; margin:10px 0; }
#easy_interior .color-stripe .number { float:left; font-size:70px; font-weight:bold; padding:0 15px; }
#easy_interior .color-stripe .remark { float:left; font-size:13px; font-weight:bold; padding:0 12px; color:#f4ed5f; }
#easy_interior .color-stripe .thai { float:left; width:440px; margin-left:10px; }
#easy_interior .color-stripe .english { float:left; width:440px; }
#easy_interior .color-stripe h3 { padding:5px 0; font-size:13px; }
#easy_interior #requirement-form a { color:#8bbf43; font-weight:bold; padding:2px 6px; background-color:#383431; width:305px; }
#easy_interior #requirement-form a:hover { color:#383431; background-color:#8bbf43; }
#easy_interior .description { margin-left:30px; }
#easy_interior .white { background-color:white; color:gray; }
#easy_interior .red { background-color:#c52720; color:white; }
#easy_interior .blue { background-color:#0093dd; color:white; }
#easy_interior .black { background-color:black; color:white; }
#easy_interior #free-area { position:relative; height:450px; }
#easy_interior #wow { position:absolute; top:100px; left:30px; }
#easy_interior #wow img { float:left; }
#easy_interior #wow .text { float:left; padding:80px 0 0 20px; }
#easy_interior #our-projects { position:absolute; top:0; left:400px; width:550px; }
#easy_interior #our-projects .text { font-weight:bold; font-size:12px; }
#easy_interior #aboutus { position:absolute; top:240px; left:600px; }
#easy_interior #aboutus .text { float:left; font-weight:bold; font-size:13px; padding:50px 0 0; }
#easy_interior #aboutus img { float:left; }
#easy_interior .easyintproj p { float:left; margin:8px 6px; color:gray; }
#easy_interior .easyintproj img { margin-bottom:4px; }
#easy_interior .linktoall { margin:15px 0 60px 35px; font-size:16px; }
#easy_interior .linktoall a { color:gray; text-decoration:underline; }
#easy_interior .black.color-stripe p { margin:6px; }
#easy_interior .contact-us { margin:20px 0; font-size:15px; font-weight:bold; }
#easy_interior .client-list ul { margin:10px; color:gray; font-size:15px; }
#easy_interior .principle { color:gray; font-size:15px; list-style:disc; margin-left:15px; }
#easy_interior .gray-text { color:gray; font-size:15px; }
#easy_interior h3 {font-size:15px;}
/* Easy Interior's Tabber */
.tabberlive .tabbertabhide { display:none; }
.tabberlive { margin-top:1em; }
.tabberlive .tabbertab { padding:5px; border:1px solid #778; border-top:0; }
.tabberlive .tabbertab h1 { display:none; }
ul.tabbernav { margin:0; padding: 3px 0; border-bottom: 1px solid #778; font: bold 11px Verdana, sans-serif; }
ul.tabbernav li { list-style: none; margin: 0; display: inline;}
ul.tabbernav li a { padding: 3px 0.5em; margin-right: 3px; border: 1px solid #778;
  border-bottom: none;  text-decoration: none; background: black;}
ul.tabbernav li a:link { color: #666; }
ul.tabbernav li a:hover { color: #ccc; background: black;}
ul.tabbernav li.tabberactive a { color:white; background-color: black; border-bottom: 1px solid black;
  font: bold 15px Verdana, sans-serif;}
/*
ul.tabbernav li a:visited { color: #ccc; }
ul.tabbernav li.tabberactive a:hover { color: #000; background: white; border-bottom: 1px solid white; }
*/
.tabber { }
.red {color:red;}
/* Publication */
#publication .images { margin:16px 0; }
#publication .images img { float:left; margin-right:8px; }
#publication #thankyou { float:right; font-size:80%; }
#publication #wrapper { background-image:url(../images/background/publication.jpg); background-position:right center; }
/* index */
#index #content { margin-left:-15px; margin-top:-15px; } /* to subtract padding of wrapper to hide wrapper's background image */
#index #splash { position:relative; height:400px; }
#index #splash img { position:absolute; top:30px; left:350px; }
#index h1.english,h1.thai { margin-top:8px; text-align:center; color:#a0a0a0; }
#index h1.english { font-size:150%; font-weight:normal; }
#index h1.thai { font-size:110%; }
/* Nav-bar in index page: negative left margin to eliminate wrapper's padding */
#index .nav-bar ul { width:968px; padding-left:20px; }
#index #color-stripe { height:142px; margin-bottom:10px; background-color:#0092dd; position:relative; }
#index #color-stripe #easyint { padding:20px; position:absolute; width:350px; top:0; left:0; }
#index #color-stripe #easyint h2 { margin:4px 0; }
#index #color-stripe #images { position:absolute; top:6px; left:370px; }
#index .story { height:374px; }
#index .story .left-half { padding:20px 0 0 20px; }
#index .story .left-half p { margin:18px 0 0; font-size:12px; }
#index #wrapper { background:black url(../images/background/index.jpg) bottom left repeat-y; }
#index .right-half { text-align:center; }
/* projects */
#projects #wrapper { background-image:url(../images/background/projects.jpg); background-position:right center; background-repeat:no-repeat; }
#projects .right-half { text-align:center; position:relative; }
#projects #flash { position:absolute; top:10px; left:10px; }
.project-list { float:left; width:32%; margin-left:3px; }
.project-list ul { margin:8px 0; overflow-x:hidden; overflow-y:scroll; font-size:11px; }
.project-list ul li { margin-right:.7em; margin:4px; color:gray; margin-left:5px; }
.project-list ul li h2 { color:white; margin-top:12px; margin-left:-5px; }
.project-list ul li a { color:#999; }
.project-list ul li a:visited,.project-list ul li { color:#555; }
.project-list ul li a:hover { color:white; }
/* Project */
#project #wrapper { background-image:url(../images/background/project.jpg); background-position:left center; background-repeat:no-repeat; }
#project #images { position:relative; white-space:nowrap; overflow-y:hidden; overflow-x:scroll; width:972px; }
#project #description { color:gray; bottom:30px; right:0; }
#project #description #layout-table { }
#project #description table#project-data { }
/*(60+150)*2 + 540 = 420+540 = 960*/
#project #description table { margin:0; }
#project #description p { float:left; width:510px; padding-right:30px; }
#project #description #project-data tr { text-align:left; }
#project #description #project-data th { width:60px; font-weight:normal; }
#project #description #project-data td { width:150px; font-weight:bold; }
/* Join Teem */
#join_teem #wrapper { background-image:url(../images/background/join_teem.jpg); }
#join_teem table td { padding:1em; width:280px; }
#join_teem table th { text-align:center; padding:.2em; color:white; background-color:gray; }
#join_teem table li { list-style:disc; }
#join_teem #download-form { text-align:right; }
#join_teem #download-form a { color:black; text-decoration:underline; }
#join_teem #contact { text-align:center; }
#join_teem #contact a { color:#c52720; font-weight:bold; text-decoration:underline; }
/* Teemplayers */
#teemplayers #wrapper { background-image:url(../images/background/teemplayer.jpg); background-position:left center; }
#teemplayers .right-half img { position:absolute; top:30px; left:90px; }
#teemplayers #player-info { position:absolute; font-size:120%; top:200px; left:150px; }
#teemplayers #player-info p { line-height:26px; margin-bottom:1em; }
.orange { color:#d78c49; font-weight:bold; }
/* About us */
#about_us #flash .hot-spot { position:absolute; display:block; width:22px; height:22px; } /* padding: 2px 1em; */

/* teemplayers */
#teemplayers table { font-size:85%; width:385px; text-align:left; margin-left:10px; }
#teemplayers table td { padding:2px 0; }
#teemplayers table tr:hover { color:orange; }



/* Background image on each page
================================== */

/*
body#philosophy {
  position: relative;
}
.hori-wrap {
  position: absolute;
  left: 0;
  width: 100%;
  background: gray;
}

#about_us #flash-area{
 width: 954px;
 height: 357px;
 background: green;
}

*/

/*
#index .nav-bar {
  position: absolute;
  top: 15px;
}
#index .nav-bar ul {
  float: left;
  margin-top: 0.1em;
  padding-left: 1em;
  width: 100%;
  font-weight: bold;
  font-size: 90%;
  background: #c52720;
}
*/

/*
#news h2 {
  margin: 4px 0;
}
*/