@import url(http://fonts.googleapis.com/css?family=ubuntu%7CMichroma);

html { background: #1B1B1B; }
body {
	font-family: Arial, "新細明體";
	}
a { color: #0E439A; text-decoration: none; }
a:hover { text-decoration: underline; }
sup { vertical-align: super; font-size: 0.75em; }
.btl { border-bottom: solid 1px #ccc; margin-bottom: 20px; }
.fl { display: block; float: left; margin: 0 10px 10px 0; }
.fr { display: block; float: right; margin: 0 0 10px 10px; }

.wrapper {
	width: 896px;
	padding: 0 16px;
	margin: 0 auto;
	}
	
.btn30 {
	display: block;
	width: 90px;
	height: 31px;
	background: transparent right top url(img/btn30.png) no-repeat;
	padding: 0 3px 0 0;
	margin: 0 auto;
	}
.btn30 span {
	background: transparent left top url(img/btn30.png) no-repeat;
	display: block;
	padding: 0 0 0 3px;
	text-align: center;
	height: 31px;
	line-height: 30px;
	color: #fff;
	
	text-shadow: 0 -1px 0 #0C3E8C;
	-webkit-text-shadow: 0 -1px 0 #0C3E8C;
	-moz-text-shadow: 0 -1px 0 #0C3E8C;
	-ms-text-shadow: 0 -1px 0 #0C3E8C;
	}
.btn30:hover {
	text-decoration: none;
	background-position: right -31px;
	}
.btn30:hover span { background-position: left -31px; }
.btn30:active { background-position: right -62px; }
.btn30:active span { background-position: left -62px; }
	
	
header {
	background: #000;
	}
header .logo {
	width: 236px;
	height: 54px;
	margin-top: 6px;
	}
header .logo a {
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	width: 236px;
	height: 54px;
	background: transparent 0 0 url(img/logo.png) no-repeat;
	}
header .wrapper { height: 66px; padding: 4px 0 0 0; position: relative; }
#lang { overflow: hidden; float: right; }
#lang li { float: left; display: block; margin-left: 12px; }
#lang a {
	display: block;
	font-size: 11px;
	line-height: 2em;
	color: #999;
	background: transparent 0 center url(img/ar1.gif) no-repeat;
	padding: 0 0 0 8px;
	
	transition: color 0.3s ease-out;
	-webkit-transition: color 0.3s ease-out;
	-moz-transition: color 0.3s ease-out;
	-ms-transition: color 0.3s ease-out;
	}
#lang a:hover { text-decoration: underline; color: #ddd; }

/* Navigation */
nav { 
	position: absolute;
	right: 0;
	bottom: 0;
	height: 30px;
	}
nav a { 
	font-size: 13px;
	font-weight: bold;
	color: #fff;
	height: 27px;
	display: block;
	letter-spacing: 0.3em;
	border-bottom: solid 3px #000;
	
	transition: border 0.3s ease-in;
	-webkit-transition: border 0.3s ease-in;
	-moz-transition: border 0.3s ease-in;
	-ms-transition: border 0.3s ease-in;
	}
nav a:hover { border-color: #3787E8; text-decoration: none; }
nav ul { display: block; height: 30px; }
nav li { 
	float: left;
	display: block;
	margin: 0 0 0 26px;
	}
nav li.cld { 
	background: transparent right 6px url(img/ar2.gif) no-repeat;
	padding-right: 12px;
	position: relative;
	}
nav .submenu { 
	width: 200px;
	height: auto;
	display: none;
	position: absolute;
	left: -10px;
	z-index: 9;
	background: #000;
	background: rgba(0,0,0,0.7);
	}
nav .submenu li { 
	float: none;
	margin: 0;
	}
nav .submenu li a { 
	border: none;
	border-top: dotted 1px #333;
	font-weight: normal;
	height: auto;
	padding: 12px;
	letter-spacing: 0.1em;
	font-family: ubuntu, Arial, "新細明體";
	}
nav .submenu li a:hover { background: #222; }

#banner { 
	background: #0E439A center top url(img/banner.jpg) no-repeat;
	height: 210px;
	}
#main { border-top: solid 4px #2F2F2F; background: #fff; }


/* Breadcrumb */
#breadcrumb {
	border-bottom: solid 1px #ccc;
	padding: 8px 16px;
	margin: 0 -16px;
	}
#breadcrumb li {
	display: inline;
	font-size: 11px;
	color: #4E4E4E;
	}
#breadcrumb a, #breadcrumb .route {
	display: inline-block;
	padding: 0 10px 0 0;
	margin: 0 4px 0 0;
	color: #4d4d4d;
	text-decoration: underline;
	background: transparent right center url(img/barw.gif) no-repeat;
	}
#breadcrumb a:hover { text-decoration: none; }


/* Content Format */
#content { padding: 32px 0; letter-spacing: 0.1em; }
#content h1 { 
	font-size: 1.75em;
	color: #333;
	font-family: ubuntu, Arial, "新細明體";
	font-weight: bold;
	margin-bottom: 1em;
	text-shadow: 1px 1px 2px #ddd;
	clear: both;
	}
#content h2 { 
	font-weight: bold;
	font-size: 1.2em;
	margin-bottom: 1em;
	font-family: ubuntu, Arial, "新細明體";
	}
#content h3 { 
	font-weight: bold;
	color: #555;
	margin-bottom: 0.75em;
	margin-top: 0.75em;
	font-family: ubuntu, Arial, "新細明體";
	}
#content p { 
	font-size: 15px;
	color: #666;
	line-height: 1.5em;
	letter-spacing: 0.1em;
	margin-bottom: 1em;
	}
#content hgroup { overflow: hidden; }
#content ol { 
	list-style: decimal;
	margin: 30px 0 30px 36px;
	font-size: 13px;
	text-align: left;
	}
#content ol li { line-height: 1.2em; margin-bottom: 10px; }
.left50 {
	float: left;
	margin-right: 36px;
	width: 430px;
	}
#content .pagenote { font-size: 0.75em; color: #999; padding-top: 10px; }

#content .gotop { 
	clear: both;
	overflow: hidden;
	background: transparent 0 center url(img/top_bg.gif) repeat-x;
	margin: 30px 0;
	}
#content .gotop a {
	width: 50px;
	height: 19px;
	padding: 0;
	display: block;
	overflow: hidden;
	text-indent: -9999px;
	float: right;
	background: transparent 0 0 url(img/top_btn.png) no-repeat;
	}
#content .gotop a:hover { background-position: 0 -19px; }
#content .gotop a:active { background-position: 0 -38px; }
	
/* Tab Content */
.tab_comp { clear: both; overflow: hidden; }
.tab_comp .holder {
	border: solid 2px #E0E0E0;
	padding: 32px 16px;
	}
.tab_control {	
	overflow: hidden;
	position: relative;
	z-index: 9;
	margin-bottom: -2px;
	}
.tab_control li {
	float: left;
	background: #E0E0E0;
	margin-right: 6px;
	}
.tab_control li.active { 
	background: #fff;
	border: solid 2px #E0E0E0;
	border-bottom: none;
	padding: 0;
	}
.tab_control a {
	font-size: 13px;
	font-weight: bold;
	color: #666;
	letter-spacing: normal;
	padding: 14px 20px;
	display: block;
	}
.tab_control a:hover { background: #eee; text-decoration: none; }
.tab_control .active a { color: #333; cursor: default; }
.tab_control .active a:hover { background: none; }

.prodlist {
	margin: 0 -16px;
	padding: 0 16px;
	}
.prodlist .holder { 
	border: none;
	border-top: solid 1px #E0E0E0;
	margin: 0 -16px;
	}
.prodlist .tab_control { margin-bottom: -1px; }
.prodlist li { background: none; padding-top: 8px; }
.prodlist li.active { border-width: 1px; padding-top: 0; }
.prodlist a {
	background: #DADADA 0 0 url(img/tab_bg.gif) repeat-x;
	padding: 10px 20px;
	width: 100px;
	line-height: 14px;
	text-align: center;
	}
.prodlist .active a { padding: 14px 20px; background: #fff;}
	
/* Catalogue Table */
.catalogue {
	font-size: 13px;
	color: #757575;
	letter-spacing: 0.08em;
	width: 100%;
	table-layout: fiexd;
	font-family: ubuntu, Arial, "新細明體";
	cursor: default;
	}
.catalogue th, .catalogue td { 
	padding: 8px 6px;
	text-align: center;
	border-bottom: solid 1px #ccc;
	vertical-align: middle;
	font-weight: normal;
	}
.catalogue td { color: #555; }
.catalogue thead th { 
	border-bottom: solid 3px #bcbcbc;
	font-family: ubuntu, Arial, "新細明體";
	font-size: 16px;
	color: #333;
	line-height: 1.5em;
	}
.catalogue .unit { 
	font-size: 11px;
	font-family: Verdana;
	letter-spacing: normal;
	display: block;
	line-height: 1.4em;
	}
.catalogue .last th, .catalogue .last td { border-bottom: none; }
.catalogue img { display: block; margin: 0 auto; }

.catalist th, .catalist td { padding: 4px 2px; }
.catalist thead th {
	background: #2465C9;
	color: #fff;
	font-size: 13px;
	padding: 8px 2px;
	}
.catalist tbody th {
	background: #9AA3B4;
	color: #fff;
	font-family: ubuntu, Arial, "新細明體";
	font-size: 16px;
	}
.catalist tr:nth-child(2n) td { background: #F3F3F3; }
.catalist td { 
	border-color: #fff;
	border-left: solid 1px #fff;
	background: #E8E8E8;
	}

.catah thead th {
	background: #9AA3B4;
	color: #fff;
	font-family: ubuntu, Arial, "新細明體";
	font-size: 16px;
	}
.catah tbody th {
	background: #2465C9;
	color: #fff;
	font-size: 13px;
	padding: 8px 2px;
	}
	
#content .content_table { 
	margin: 0;
	margin-bottom: 30px;
	padding: 0 0 0 40px;
	background: #f6f6f6 right bottom url(img/tc_bg.png) no-repeat;
	overflow: hidden;
	}
.content_table li {}
.content_table li a {
	background: none;
	padding: 0;
	font-weight: bold;
	text-decoration: none;
	}
.content_table li a:hover { color: #2F86F0; }

.download_table {
	width: 100%;
	table-layout: fixed;
	font-family: ubuntu, arial, "新細明體";
	}
.download_table thead {}
.download_table th, .download_table td { 
	padding: 8px 6px;
	text-align: center;
	font-size: 13px;
	}
.download_table td { text-align: left; }
.download_table thead th {
	background: #2465C9;
	border-bottom: solid 3px #bcbcbc;
	color: #fff;
	font-size: 13px;
	padding: 8px 2px;
	letter-spacing: 0.1em;
	}
.download_table tbody th {
	background: #9AA3B4;
	color: #fff;
	font-family: ubuntu, Arial, "新細明體";
	font-size: 16px;
	}
.download_table tr:nth-child(2n) td { background: #F3F3F3; }
.download_table td { 
	border-color: #fff;
	border-left: solid 1px #fff;
	background: #E8E8E8;
	}
.download_table a {
	width: 16px;
	height: 16px;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	background: transparent 0 0 url(img/file_extension_wps.png) no-repeat;
	margin: 0 auto;
	}
.download_table .wps { background-image: url(img/file_extension_wps.png); }
.download_table .pdf { background-image: url(img/file_extension_pdf.png); }

.catalist .exb {
	width: 60px;
	height: 25px;
	line-height: 24px;
	color: #fff;
	display: block;
	background: transparent 0 0 url(img/exp_btn.png) no-repeat;
	text-indent: 12px;
	padding: 0;
	margin: 0 auto;
	}
.catalist .exb.active { background-position: 0 bottom; }

.catalist.exp tbody th, .catalist.exp tbody td { 
	vertical-align: top;
	line-height: 24px;
	}
.exp_table {
	width: 100%;
	font-size: 13px; 
	display: none;
	line-height: 1em;
	}
.exp table.exp_table tbody th { 
	font-size: 13px;
	width: 110px;
	background: #9AA3B4;
	padding: 4px 2px;
	border: solid 1px #ccc;
	line-height: 1em;
	}
.exp table.exp_table tbody tr td { 
	background: #fff !important;
	border-color: #e8e8e8;
	padding: 4px 2px;
	border: solid 1px #ccc;
	line-height: 1em;
	}
#content .exp_table ol { margin-top: 0; }
.ext.enable {
	padding: 10px;
	background: #000;
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	}
.exp tr.expanded th, .exp tr.expanded td {
	background: #eee;
	padding: 10px;
	border: none;
	border-bottom: solid 2px #ddd;
	}

.catalogue tbody tr:hover td { background-color: #fff; }
.catalogue .viewp {
	display: inline-block;
	width: 18px;
	height: 14px;
	background: transparent 0 0 url(img/viewp.png) no-repeat;
	padding: 0;
	vertical-align: baseline;
	margin-left: 4px;
	}
.catalogue .viewp:hover { background-position: left bottom; }
	

/* float image */
#floatimg_bg {
	position: fixed;
	width: 0;
	top: 0;
	height: 100%;
	background: #000;
	background: rgba(0,0,0,0.85);
	z-index: 9999;
	overflow: hidden;
	}
#loadimg {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 300px;
	margin: -156px 0 0 -106px;
	padding: 6px;
	background: #fff;
	
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	
	box-shadow: 0 0 10px #000;
	-webkit-box-shadow: 0 0 10px #000;
	-moz-box-shadow: 0 0 10px #000;
	-ms-box-shadow: 0 0 10px #000;
	}


/* Footer */
footer.wrapper { 
	padding: 32px 16px;
	font-family: Tahoma;
	color: #fff;
	font-size: 11px;
	line-height: 1.5em;
	overflow: hidden;
	}
#contactinfo { float: left; }
#contactinfo span { 
	color: #767676;
	width: 50px;
	display: inline-block;
	font-weight: bold;
	}
#contactinfo a { color: #fff; }
#copyright { float: right; color: #767676; }

/* message */
#message {
	width: 300px;
	height: 70px;
	padding: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -100px 0 0 -170px;
	font-family: ubuntu;
	background: #f6f6f6;
	border: solid 3px #bbb;
	color: #666;
	display: none;
	
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-ms-border-radius: 6px;
	
	box-shadow: 0 0 20px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 0 20px rgba(0,0,0,0.2);
	-ms-box-shadow: 0 0 20px rgba(0,0,0,0.2);
	}
#message h1 {
	font-size: 2em;
	line-height: 40px;
	height: 40px;
	color: #333;
	}
#message p {
	line-height: 24px;
	height: 24px;
	}