@charset "utf-8";
/* Common HTML element */
html {font-size:100.01%;}
body {font-size:0.75em;color:#384345; font-family:"Helvetica Neue", Arial, Helvetica, sans-serif; background:url(../images/main-bg.gif) top left repeat-x #fff;}
h1, h2, h3, h4, h5, h6 {font-weight:normal; color:inherit; color:#222;}
h1 {line-height:1;margin-bottom:0.5em; color:#fff}
h2 {font-size:2em;margin-bottom:0.75em;}
h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
h4 {font-size:1.3em;line-height:1.25;margin-bottom:1.25em; font-weight:bold}
h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
h6 {font-size:1em;font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
p {margin:0 0 1em;}
p img.left {float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}
p img.right {float:right;margin:1.5em 0 1.5em 1.5em;}
a:hover {color:#000; text-decoration:underline}
a {color:#222;text-decoration:none;}
blockquote {margin:1.5em;color:#666;font-style:italic;}
strong {font-weight:bold;}
em, dfn {font-style:italic;}
dfn {font-weight:bold;}
sup, sub {line-height:0;}
abbr, acronym {border-bottom:1px dotted #666;}
address {margin:0 0 1.5em;font-style:italic;}
del {color:#666;}
pre {margin:1.5em 0;white-space:pre;}
pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;}
li ul, li ol {margin:0;}
ul, ol {margin:0 1.5em 1.5em 0;padding-left:3.333em;}
ul {list-style-type:disc;}
ol {list-style-type:decimal;}
dl {margin:0 0 1.5em 0;}
dl dt {font-weight:bold;}
dd {margin-left:1.5em;}
table {margin-bottom:1.4em;width:100%;}
th {font-weight:bold;}
thead th {background:#c3d9ff;}
th, td, caption {padding:4px 10px 4px 5px;}
tr.even td {background:#e5ecf9;}
tfoot {font-style:italic;}
caption {background:#eee;}
.small {color: #707070; font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
.large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
.hide {display:none;}
.quiet {color:#666;}
.loud {color:#000;}
.highlight {background:#ff0;}
.added {background:#060;color:#fff;}
.removed {background:#900;color:#fff;}
.first {margin-left:0;padding-left:0;}
.last {margin-right:0;padding-right:0;}

/* style */
.box-1 {
	display: inline;
	margin-bottom: 20px;
	position: relative;
	float:left;
}
.box-2 {
	margin-bottom:20px;
}

.img-bor-1,
.img-bor-3,
.img-bor-5
{
	border: #ccc 1px solid;
	padding:2px;
}
.img-bor-2 {
	border: #ccc 1px solid;
	padding:4px;
}

.img-bor-4 {
	margin-right:20px;
}

.img-bor-5 {
	margin: 2px;
}

.img-bor-6 {
	border:#999 1px solid;
	margin-right:10px;
}

a.link-title {
	font-weight:bold;
	margin-bottom:0.75em;
}

a.link-big {
	font-size:1.25em;
}

.cell {
	display:table-cell;
}

.center {
	text-align:center;
}

.right {
	text-align:right;
}

.intro-text {
	font-weight:bold;
}
ul.list-tyle-square li {
	list-style:square;
}

.content-detail {
	/*background:#efefef;*/
	overflow: hidden;	
}

.content-detail div {
	table-layout:fixed;
	margin: 10px;
	float:left;	
}

.content-detail div table {
	float:left;
	width: 95%;
}

ul#project-year li {
	margin: 10px 0;
}

/** grid layout**/
.container {
	width:960px;
	margin:auto;	
}

#main-content h2, /* page title */
#main-content h3  /* box title */
{
	margin-left:10px;
	margin-right:10px;
}


#header {
	margin: 0 auto;
	height: 151px;
	width: 962px;
	background:url(../images/logo.gif) top left no-repeat;
}

#header h1 {
	font-size:2.5em;
	padding: 10px 0 0 0;
	margin: 0;	
}

#header-lang {
	margin-top: 20px;
	color:#979797;
	text-align:right;
}

#header-lang a, #header-lang a:link, #header-lang a:visited  {
	color: #979797;
}
#header-lang a:hover, #header-lang a:active {
	text-decoration:underline;
}

#main-nav {
	width: 962px;
	height: 38px;
	margin:0 auto;
	background:url(../images/navigator-bg.gif) top left no-repeat;
}

#main-content {
	margin:20px 0;
	display:table;
}

#footer {background:url(../images/footer-bg.gif) top left repeat-x #39484d;}
#footer a{ color:#fff; text-decoration:none;}
#footer div {padding: 10px 0 20px 0; color: #fff}

#home-page h3, #home-page-news h3 {
	color: #fff;
	margin: 10px 0;
	line-height: 34px;
	padding: 0 15px;
	background:url(../images/home-h3-bg.gif) top left repeat-x;
	box-shadow: 3px 3px 2px #afafaf;
	-moz-box-shadow: 3px 3px 2px #afafaf;
	-webkit-box-shadow: 3px 3px 2px #afafaf;

}

/* grid */
.home-element {
	width: 90px;
	margin: 0 5px;
	display: inline;
	float: left;
	position: relative;
}

.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-6-margin-none,
.grid-7,
.grid-8,
.grid-8-margin-none,
.grid-9,
.grid-10,
.grid-11,
.grid-12
{
	display: inline;
	float: left;
	position: relative;
}
 
.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10,
.grid-11,
.grid-12 {	
	margin-left: 10px;
	margin-right: 10px;
}

.container .grid-3 {
	width: 220px;
}

.container .grid-6-margin-none {
	width: 480px;
}

.container .grid-6 {
	width: 460px;
}

.container .grid-9 {
	width: 700px;
}

.container .grid-12 {
	width: 940px;
}

.container .grid-1 {
	width: 60px;
}

.container .grid-2 {
	width: 140px;
}

.container .grid-4 {
	width: 300px;
}

.container .grid-5 {
	width: 380px;
}

.container .grid-7 {
	width: 540px;
}

.container .grid-8 {
	width: 620px;
}

.grid-8-margin-none {
	width: 640px;
}

.container .grid-10 {
	width: 780px;
}

.container .grid-11 {
	width: 860px;
}

/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
	margin-left: 0;
}

.omega {
	margin-right: 0;
}

.beta {
	margin-top: 20px;
}

.grama {
	margin-bottom: 20px;
}

/* menu */
/* level one */
ul.dropdown { 
	position: relative;
	padding: 0;
	margin-top: 0;
	margin-bottom:0;
	z-index:999;
	height:38px;
}
ul.dropdown li{ 
	font-weight: bold; 
	float: left; 
	zoom: 1; 
}

ul.dropdown li a {
	display: block;
	line-height: 38px;
	margin-right: 5px;
	padding: 0 0 0 15px;
}

ul.dropdown li a span {
	padding: 0 15px 0 0;
	display: block;
}


ul.dropdown a:hover,
ul.dropdown a:active,
ul.dropdown li.hover a,
ul.dropdown li.active a {
	color: #fff;
	text-decoration:none;
}

ul.dropdown li.active a,
ul.dropdown li.hover a, 
ul.dropdown li a:hover {color: #fff; background: url(../images/active-menu.gif) no-repeat left 0px}
ul.dropdown li.active a span,
ul.dropdown li.hover a span, 
ul.dropdown li a:hover span {background: url(../images/active-menu.gif) no-repeat right 0px}

ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li.active,
ul.dropdown li:hover {
	position: relative;
}

/* 
	LEVEL TWO
*/
ul.dropdown ul {
	background-color:#c1231b;
	width: 180px; 
	visibility: hidden; 
	position: absolute; 
	top: 100%; 
	left: 0;
	padding:0;
}
ul.dropdown ul li { 
	font-weight: normal; 
	color: #fff;
	border-bottom: 1px dashed #f19e9a; 
	float: none; 
}
									  
                                    /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a	{
	width: 100%; 
	display: inline-block;
} 

ul.dropdown li.active ul li a,
ul.dropdown li.hover ul li a {
	background-image:none;	
}

ul.dropdown li.active ul li a:hover,
ul.dropdown li.hover ul li a:hover {
	background-color:#ff2c21;
}

/* top search */
#top-search {
	margin-top: 5px;
	margin-bottom: 5px;
	text-align:right;
}

#top-search-form {
	width: 245px;
	border: 1px solid #dadbdd;
	float: right;
	background:url(../images/search-input-bg.gif) repeat-x top left;
}

input#keyword {
	margin:0;
	width:205px;
	float:left;
	border: none;
	line-height: 20px;
	color: #84b3b2;
	background:none;
	text-shadow: #fff;
}

input#btn-top-search {
	float:right;
	border:0;
	margin:0;
	padding:0;
}

/* slideshow */
#company-info {
	background:url(../images/slider-bg.gif) no-repeat left center;
}
#slideshow ul {
	padding-left:0;
}

#slider a, #slider a:link {
	color:#fff;
}

#slideshow a:hover, #slideshow a:active {
	text-decoration:underline;
}

/* Orther link */
ul.orther-link {
	padding-left:10px;
}

ul.orther-link li {
	background:url(../images/list.gif) no-repeat left center;
	padding-left:15px;
}

ul.orther-link li a, span.keyword, a.link-blue {
	color: #da251c;	
}

/* news */
#group-news-list {
}

#group-news-list h2 {
	color:#fff; margin-top: 1em;
}

#group-news-list div {
	margin: 20px;
}

#group-news-list div a {
	color:#fff;
}

/* Gallery group images */
#group-images-list {
	width: 240px;
	float:left;
}

#group-images-list h2 {color:#fff; margin-top:1em;}
#group-images-list a {color:#efefef; font-weight:bold}
#group-images-list span.active,
#company-info a.active {color:#cc0000; font-weight:bold}
#gallery-component {width: 640px; float:right;}
#gallery-component h3 {margin-top: 1.5em;}

/* Contact */
#company-info {	
	background-color: #2a2b26;
	min-height:450px;
	height:auto!important;
	height:450px;
}
#company-info div {
	margin: 20px 20px 20px 70px;
	color:#ccc;
}

#company-info div ul {
	padding-left: 25px;
}

#company-info div.inner-text {
	margin: 20px 20px 20px 70px;
	color:#ccc;
}

#company-info a {color:#ccc;}

#company-info h2, #company-info h3 {color:#fff; line-height:1.5em;}

/* item images */

/* form */
input, textarea {
	font-size:1em; color:#686868;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
	border:#999 1px solid;
	padding:3px;
}

select {
	font-size:1em; color:#686868;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
	border:#999 1px solid;
}

input.keyword {
	width: 200px;
	font-size:1.2em;
}

/* paging */
.paging {
	font-size:0.875em;
	text-transform	: uppercase;
	clear			: both;
	margin-top		: 10px;
	margin-bottom	: 15px;		
}

.paging a:hover {
	text-decoration:none;
}

.paging a, .paging span.current {
	padding			: 3px 7px;
	border			: 1px solid #bbbbbb;
	margin-left		: 3px;
}

.paging span.current, .paging a:hover {	
	color			: #fff;	
	background: #55acde;
}


/* small paging */
.small-paging {
	font-size:0.875em;
	text-transform	: uppercase;
	clear			: both;
	margin-top		: 5px;
	margin-bottom	: 7px;		
}

.small-paging span.current, 
.small-paging a:hover {
	text-decoration:none;
	color:#cc0000;
}

.small-paging a, .small-paging span.current {
	padding			: 3px;
	margin-left		: 3px;
}

#online-services {
	display:inline;
}
#online-services-title,
.online-services-img,
.online-services-name {
	float: right;
}
.online-services-img {
	margin: 0 5px 0 10px;
}

.online-services-name {
	float:right;
}

/* http://perishablepress.com/press/2009/12/06/new-clearfix-hack */
.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

/*
	The following zoom:1 rule is specifically for IE6 + IE7.
	Move to separate stylesheet if invalid CSS is a problem.
*/
* html .clearfix,
*:first-child+html .clearfix {
	zoom: 1;
}