@CHARSET "UTF8";

:root {
  --spacing: 5px;
  --vspacing: 5px;
  --indent: 10px;
  --color1: #FF6633;
  --color2: #666;
  --color3: #AAA;
}

html {overflow-y: scroll;}
body {
	margin: 0px;
	font-size: 0.85em;
	font-family: 'Microsoft JhengHei', Arial, Helvetica, sans-serif;
	color: #333;
	padding: 10px;
}

fieldset { border: 1px solid #DDD; margin: 20px 0px; padding: 10px 20px; background-color: #FFF; box-shadow: 0 0 5px #DDD}
legend { font-weight: bold; color: #000084; margin-top: 20px}
a { text-decoration: none; color: #333}
a:hover { text-decoration: underline; cursor: pointer}



hr { border: none; border-top: 1px solid #DDD; height: 1px; margin: 20px 0px}
th { padding: 3px; vertical-align: bottom; text-align: left}
th.right {padding-right: 0px}
th a { text-decoration: underline; color: #333;  padding: 5px;}

.AlignCenter {
    text-align: center;    
}
.AlignRight {
    text-align: right;  
}
.AlignJustify {
    text-align: justify;
    text-justify: inter-ideograph;
    text-align-last: left;
	-moz-text-align-last: left;
}
/*
.AlignJustify:after {
    content: '';
    display: inline-block;
    width: 100%;
}
*/

img { border: none}
h1 { 
	padding: 0px 0px 0.2em 0px ; 
	font-size: 1.8em; 
	font-weight: bold; 
	margin: 0px 0px 5px 0px; 
	color: var(--color1); 
	font-family: Century Gothic;
}
h2 { padding: 0px 0px 0.2em 0px ; font-size: 1.7em; font-weight: normal; margin: 0px 0px 5px 0px; color: var(--color1); font-family: Century Gothic;}
h3 { padding: 0.1em 0px ; font-size: 1.2em; font-weight: bold; margin: 0px 0px 5px 0px; color: var(--color1); font-family: Century Gothic;}
h4 { padding: 0.1em 0px ; font-size: 1.2em; font-weight: bold; margin: 0px ; color: var(--color1); font-family: Century Gothic;}
h5 { padding: 0.1em 0px ; font-size: 1.1em; font-weight: bold; margin: 0px; color: var(--color1); font-family: Century Gothic;}
p ,span { line-height: 1.3em; margin: 0px 0px 1.5em 0px; font-size: 1em; }
li { line-height: 1.5em;}

a.a_login { color: #999; text-decoration: underline }
.red {color: red}
.star { color: red; margin: 5px}
.meta {color: #999; font-size: 1em}
.bullet_arrow {background-image: url(../images/bullet_arrow.png); background-repeat: no-repeat; background-position: 0px 2px; padding-left: 12px}

#main { 
	width: 980px; 
	box-shadow: 0px 0px 80px #AAA;
	margin: 0px auto;
	
}

@media screen and (min-width: 1400px) {
	#main {
		transform: scale(1.20); 
		transform-origin: center top;
		-webkit-transform: scale(1.20);
		-webkit-transform-origin: center top;
		-moz-transform: scale(1.20);
		-moz-transform-origin: center top;
		-o-transform: scale(1.20);
		-o-transform-origin: center top;
		-ms-transform: scale(1.20);
		-ms-transform-origin: center top;
	}
}

#content { margin: 0px auto; min-height: 300px; min-width: 880px; font-size: 1em;}

#content_header { color: #999; height: 150px; width: 100%; background-color: #FFF; background-image: url(../images/logo_with_bg.png); background-repeat: no-repeat }
#content_header a { color: #999; text-decoration: none; }

#btn_back_to_top {
	background-image: url(../images/back-top-button.png);
	background-repeat: no-repeat;
	background-size: 20px 20px;
	padding: 2px 0px 2px 25px;
	font-size: 1em;
}

#content_footer {}
#footer { color: #999; }
#footer a { color: #999; text-decoration: none; font-size: 1em; margin-left: 5px;}
#footer a { margin: 3px 0px 3px 2px; display: block}
#footer h2 { /*text-transform: uppercase; */ font-size: 1.2em }

#news_boxlet hr { border: none; border-top: 1px solid #C2E9EB; height: 1px; margin: 10px 0px}

#home_aboutus p { line-height: 1.3em}

#submenu a {margin: 3px 0px 3px 2px; display: block}

.highlight {
    background-color: #FFFF00;
}


#mainmenu.init {
	position: absolute;
	top: 113px;
}

#mainmenu {
	font-size: 1.1em;
	letter-spacing: 0em;
	color: #FFF;
	background-color: var(--color1);
	width: 980px;
	padding: 0px 0px;
	z-index: 20;
	box-shadow: 0 0 10px var(--color1);
}
#mainmenu hr { 
	background-color: #EEE; 
	border: none; 
	height: 1px; 
	margin: 0px 0px
}
#mainmenu ul{
	z-index: 100;
}
#mainmenu ul, #mainmenu li {
	font-weight: normal
}
#mainmenu ul li a {
	font-family: Century Gothic;
	font-weight: normal;
	font-size: 1.1em;
	color: #FFF;
	min-height: 23px;
	margin: 3px 0px 0px 0px;
	padding: 5px 25px 5px 25px;
	display: block;
}
#mainmenu ul li a:hover {
	color: var(--color1);
	background-color: #FFF;
}
#mainmenu ul li ul {
	border: none;
	border-bottom: 3px solid #53C0C6;
	box-shadow: 0px 0px 5px #CCC;
	background: #FFF;
	margin: 0px;
	padding: 0px 0px;
	top: -1px;
}


#mainmenu ul li ul li a {
	font-family: Century Gothic;
	font-size: 1em;
	font-weight: bold;
	letter-spacing: 0em;
	min-width: 250px;
	padding: 8px 15px 3px 15px;
}
#mainmenu ul li ul li a:hover {
	color: #FFF;
	background:#53C0C6;	
}

#brands-menu {
	border: none;
	border-bottom: 3px solid #53C0C6;
	box-shadow: 0px 0px 10px #999;
	background:#FFF;
	margin: 0px;
	padding: 0px;
	font-weight: normal;
}

#brands-menu .column {
	float: left; 
	border-left: #CCC;
	width: 220px;
}
#brands-menu .column a{
	color: #555;
	display: block;
	font-size: 1.2em;
	font-weight: bold;
	letter-spacing: 0em;
	padding: 0.4em 10px;
}
.brands-menu-a:hover {
	color: #FFF;
	background:#53C0C6;	
}
.brandseries-menu {
	z-index: 200;
	padding: 15px;
	background: #FFF;
	box-shadow: 0px 0px 10px #999;
	border-bottom: 3px solid #53C0C6;
}	
.brandseries-menu img {
	margin-bottom: 10px;
}
.brandseries-menu-a {
	font-weight: normal;
	color: #000;
}
	

.stick-mainmenu{
	/* "position: fixed" does not work with "transform" */
    position: fixed;
    top: 0px;
    z-index: 20;
	background-color: #FFF;
}

.stick {
	/* "position: fixed" does not work with "transform" */
    position: fixed;
    top: 40px;
    z-index: 10;
	background-color: #FFF;
}




.label_hotkey {	
	float: right
}
.textfield {
	width: 174px;
	height: 18px;
	margin: 0;
	padding: 3px 5px;
	border: 1px #CCCCCC solid;
	font-size: 1em;
	font-weight: normal;
	background-color: #FFFFFF;
	text-align: left;
	color: #333;
}
input
{
	border: solid 1px #DDD;
	padding: 2px;
}
input[readonly]
{
    background-color:#EEE;
	padding: 2px;
}
select { 
	width: 186px;
	margin: 0;
	padding: 3px 5px;
	border: 1px #CCCCCC solid;
	font-weight: normal;
	background-color: #FFFFFF;
	text-align: left;
	color: #333;

}
input:focus, select:focus{ 
    background-color: #F9F9F9;
	border: solid 1px #64A2FF;
}
textarea { font-family: arial}

.sub_menu {width: 250px; padding-left: 0px;}
.sub_menu_color { width: 20px; height: 20px; border: 1px solid #EFEFEF; display: block; float: left; margin: 0px 2px 2px 0px}
.sub_menu_color:hover {text-decoration: none;cursor: pointer;}

.sub_menu_item 			{text-decoration: none; padding: 2px 4px; color: #000; display: block; }
.sub_menu_item:hover {text-decoration: none; color: #FFF; background: #000084; cursor: pointer;}
.sub_menu_item_selected {text-decoration: none; font-weight: bold; color: #000084;}
.sub_menu_item_selected:hover {text-decoration: none; cursor: pointer;}



.btn_action {font-family: Century Gothic; text-decoration: none; padding: 4px 15px; height: 31px; background-color: var(--color1); color: #FFF; font-size: 1.1em; text-align: center; line-height: 30px; z-index: 100}
.btn_action:hover {text-decoration: none}
.btn_action2 {font-family: Century Gothic; text-decoration: none; padding: 4px 10px; height: 31px; background-color: #AAA; color: #FFF; font-size: 1.1em; text-align: center; line-height: 30px;}
a.btn_action2 {text-decoration: none}
.btn_action3 {font-family: Century Gothic; text-decoration: none; padding: 4px 5px; background-color: #AAA; color: #FFF; font-size: 1em; text-align: center; line-height: 20px;}
.btn_action3:hover {text-decoration: none}
.page_label {font-size: 1.6em; color: #FFF; background-color: #000; padding: 4px 15px; margin: 0px}

.paging { text-align: right; padding: 10px;}
.paging select { width: 160px }
.paging a {color: #999; text-decoration: none}
.paging a.btn_action2 {color: #FFF; text-decoration: none}
.paging a.current {color: #333}

.boxlet {word-wrap: break-word; background-color: #FFF; padding: 15px; margin: 0px 0px; border: 1px solid #DDD; box-shadow: 3px 3px 3px #EEE; }
.boxlet ul { margin: 0px 0px 20px 0px; padding-left: 20px}

.breadcrumb {font-size: 1em; padding: 4px; color: #999}
.breadcrumb a {font-size: 1em; padding: 4px 8px; color: #999}

.table_item {  }
.table_item:hover {background-color: #DDEBFF }
.table_item td { border-top: 1px solid #EEE; padding: 5px; vertical-align: top}
.price { text-align: right}
.right { text-align: right}
.tfclass { width: 120px; text-transform:uppercase;}
.placeholder-highlight { border: 1px solid #FF0}



.product { float: left; width: 210px; margin: 0px 15px 80px 15px; text-align: center; height: 210px}
.product:hover {text-decoration: none;cursor: pointer;}
.product img { border: none; }
.product_thumbnail {max-width:100%; max-height:100%;}
.product_thumbnail_name {font-weight: normal; font-size: 0.9em; color: #333; padding: 5px 0px 5px 0px}
.product_thumbnail_price {font-weight: normal; font-size: 0.9em; color: #C00; padding-left: 0px}
.product_thumbnail_price_old {font-weight: normal; color: #999}
.product_thumbnail_price_original {font-weight: normal; font-size: 0.9em; padding-left: 0px}
.product_thumbnail_label {text-align: center; color: #FFF; background-color: #000; padding: 2px; margin-top: -3px}
.product_price {font-weight: bold; font-size: 1em; color: #C00; padding-left: 0px}
.product_price_old {font-weight: normal; color: #999}
.product_price_original {font-weight: bold; font-size: 1em; padding-left: 0px}
.product_name {font-size: 1.7em; font-weight: bold; color: #000084}


.sales_rep{
	background-image: url(../images/icon_sales_rep.jpg);
	background-repeat: no-repeat; 
	background-position: 10px 10px;
	padding: 8px 10px 8px 50px;
}
.sales_rep .phone_email{
	background-image: url(../images/icon_phone_email.jpg);
	background-repeat: no-repeat; 
	background-position: 0px 0px;
	padding: 5px 0px 5px 30px;
	margin-left: -29px;
}