@CHARSET "UTF8";

@media (-webkit-device-pixel-ratio: 1.25) {
  body {
    zoom: 90%;
  }
}

@media (-webkit-device-pixel-ratio: 1.5) {
  body {
    zoom: 80%;
  }
}
 
:root {
  --spacing: 5px;
  --vspacing: 5px;
  --indent: 10px;
  --color1: #5C3C2D;
  --color2: #C14648;
  --color3: #FED09C;
  --color4: #FEF4EA;
  --color_bg: #FFF;
  --color_bg2: #FBF7F4;
}

html {overflow-y: scroll;}
body {
	margin: 0px;
	font-size: 0.85em;
	font-family: GillSans,"Gill Sans MT",Calibri,sans-serif;
	background-color: var(--color_bg2);
	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: var(--color1); margin-top: 20px}
a { text-decoration: none; color: #333}
a:hover { text-decoration: underline; cursor: pointer}

.right { text-align: right }
.center { text-align: center }
.left { text-align: left }
.errormsg {color: red; }
.memo { color: #999; font-size: 0.8em; display: block; padding: var(--spacing) 0}

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

.timepicker .ui-timepicker-container { font-size: 0.9em }

.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: GillSans,"Gill Sans MT",Calibri,sans-serif;
}
h2 { padding: 0px 0px 0.2em 0px ; font-size: 1.7em; font-weight: normal; margin: 0px 0px 5px 0px; color: var(--color1); font-family: GillSans,"Gill Sans MT",Calibri,sans-serif;}
h3 { padding: 0.1em 0px ; font-size: 1.2em; font-weight: bold; margin: 0px 0px 5px 0px; color: var(--color1); font-family: GillSans,"Gill Sans MT",Calibri,sans-serif;}
h4 { padding: 0.1em 0px ; font-size: 1.2em; font-weight: bold; margin: 0px ; color: var(--color1); font-family: GillSans,"Gill Sans MT",Calibri,sans-serif;}
h5 { padding: 0.1em 0px ; font-size: 1.1em; font-weight: bold; margin: 0px; color: var(--color1); font-family: GillSans,"Gill Sans MT",Calibri,sans-serif;}
p ,span { line-height: 1.3em; margin: 0px 0px 1em 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::before {
	color: var(--color1);
	content: "▶ ";
}
.btn_expand {position: absolute; right: 0px; bottom: 0px; background-color: #FAFAFA; width: 100%; text-align: right}
#main { 
	width: 1220px; 
	box-shadow: 0px 0px 80px var(--color_bg);
	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; width: 100%; background-color: #FFF; }
#content_header a.btn_action { color: #FFF; text-decoration: none; }
#content_header a { color: #000; 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 { min-height: 180px; background-color: var(--color_bg); }
#footer { color: #999; }
#footer a.footer_item { color: #999; text-decoration: none; font-size: 1em; margin-left: 5px;}
#footer a.footer_item { 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 #DDD; 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 {
	
}

#mainmenu {
	font-size: 0.9em;
	font-family: GillSans,"Gill Sans MT",Calibri,sans-serif;
	letter-spacing: 0em;
	color: #000;
	background-color: var(--color1);
	padding: 0px 0px;
	z-index: 20;
	/* box-shadow: 0 0 10px #000381;*/
}
#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: GillSans,"Gill Sans MT",Calibri,sans-serif;
	text-transform: uppercase; 
	font-weight: normal;
	color: #FFF;
	margin: 5px 0px 0px 0px;
	height: 20px;
	padding: 3px 30px 2px 30px;
	display: block;
	
}
#mainmenu ul li a:hover {
	color: #000;
	background-color: #FFF;
}
#mainmenu ul li ul {
	border: none;
	border-bottom: 2px solid var(--color1);
	box-shadow: 0px 0px 3px #CCC;
	background: #FFF;
	margin: 0px;
	padding: 0px 0px;
	top: -1px;
}


#mainmenu ul li ul li a {
	font-size: 1em;
	font-weight: normal;
	color: #000;
	letter-spacing: 0em;
	min-width: 250px;
	height: 20px;
	line-height: 20px;
	padding: 2px 15px 2px 15px;
}
#mainmenu ul li ul li a:hover {
	color: #FFF;
	background:#333;	
}

#brands-menu {
	font-family: GillSans,"Gill Sans MT",Calibri,sans-serif;
	border: none;
	border-bottom: 3px solid var(--color1);
	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 a{
	color: #555;
	display: block;
	font-weight: normal;
	letter-spacing: 0em;
	padding: 5px 10px;
}
#brands-menu a:hover{
	color: #FFF;
}

.brands-menu-a:hover {
	color: #FFF;
	background:var(--color1);	
}
.brandseries-menu {
	z-index: 200;
	padding: 15px;
	background: #FFF;
	box-shadow: 0px 0px 10px #999;
	border-bottom: 2px solid #000;
	width: 250px;
}	
.brandseries-menu img {
	margin-bottom: 10px;
}
.brandseries-menu-a {
	font-weight: normal;
	color: #000;
}
.brandseries-menu-a:hover {
	color: #FFF;
	background:var(--color1);	
}


#productcategorys-menu {
	font-family: GillSans,"Gill Sans MT",Calibri,sans-serif;
	border: none;
	border-bottom: 3px solid var(--color1);
	box-shadow: 0px 0px 10px #999;
	background:#FFF;
	margin: 0px;
	padding: 0px;
	font-weight: normal;
}
#productcategorys-menu .column {
	float: left; 
	border-left: #CCC;
	width: 220px;
}
#productcategorys-menu .column a{
	color: #555;
	display: block;
	font-size: 0.9em;
	letter-spacing: 0em;
	padding: 0.4em 10px;
}
.productcategorys-menu-a:hover {
	color: #FFF;
	background-color: var(--color1);	
}
.subcategorys-menu {
	z-index: 200;
	padding: 15px;
	background: #FFF;
	box-shadow: 0px 0px 10px #999;
	border-bottom: 3px solid var(--color1);
	width: 250px;
}	
.subcategorys-menu img {
	margin-bottom: 10px;
}
.subcategorys-menu-a {
	font-weight: normal;
	color: var(--color1);
}




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

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

.img_container {
	display:block; 
	width: 94%; 
	height: 94%;
	background-position: center; 
	background-size: contain; 
	background-repeat: no-repeat;
	margin: 3%;
}



.label_hotkey {	
	float: right
}
.textfield {
	width: 273px;
	height: 22px;
	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: 2;
}
textarea[readonly]
{
    background-color:#EEE;
	padding: 3px 5px;
}
select { 
	width: 185px;
	min-height: 30px;
	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 {min-width: 250px; padding-left: 0px; font-size: 0.9em;}
.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; margin-left: 10px}
.sub_menu_item:hover {text-decoration: none; color: #FFF; background: var(--color1); cursor: pointer;}
.sub_menu_item_selected {text-decoration: none; font-weight: bold; color: var(--color1);}
.sub_menu_item_selected:hover {text-decoration: none; cursor: pointer;}



.btn_action { font-family: GillSans,"Gill Sans MT",Calibri,sans-serif; 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_eshop { display: inline-block; font-weight: normal; letter-spacing: 1px; }

.btn_action.disabled { cursor: arrow;}
.btn_action2 {font-family: GillSans,"Gill Sans MT",Calibri,sans-serif; text-decoration: none; padding: 3px 10px; height: 30px; border: var(--color1) solid 1px; background-color: #EEE; color: #000; font-size: 1.1em; text-align: center; line-height: 30px;}
a.btn_action2 {text-decoration: none}
.btn_action3 {font-family: GillSans,"Gill Sans MT",Calibri,sans-serif; text-decoration: none; padding: 3px 5px; background-color: #CCC; 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: var(--color1); padding: 10px 15px; margin: 0px}*/
.page_label {font-size: 1.6em; padding: 10px 0;}

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

.boxlet {word-wrap: break-word; background-color: rgba(255,255,255,0.7); padding: 20px; margin: 0px 0px; border: 0px solid #F0F0F0; box-shadow: 3px 3px 3px -2px rgba(0,0,0,0.1)}
.boxlet ul { margin: 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: 250px; margin: 0px 15px 80px 15px; text-align: left; height: 220px}
.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: var(--color1)}


.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;
}



::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #CCC;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #CCC;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #CCC;
}


.speech-bubble {
	position: relative;
	background: #FFF;
	border-radius: .4em;
	color: #CC0000;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.29);
	font-weight: bold;
}

.speech-bubble:after {
	content: '';
	text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.29);
	position: absolute;
	bottom: 0;
	right: 50px;
	width: 0;
	height: 0;
	border: 12px solid transparent;
	border-top-color: #FFF;
	border-bottom: 0;
	border-right: 0;
	margin-left: 6px;
	margin-bottom: -12px;
}

.speech-bubble-up {
	position: relative;
	background: #FFF;
	border-radius: .4em;
	color: #CC0000;
	box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.29);
	font-weight: bold;
}

.speech-bubble-up:after {
	content: '';
	text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.29);
	position: absolute;
	top: 0;
	right: 50px;
	width: 0;
	height: 0;
	border: 12px solid transparent;
	border-bottom-color: #FFF;
	border-top: 0;
	border-right: 0;
	margin-left: 6px;
	margin-top: -12px;
}

.shake{
	animation: shake 0.5s;
	animation-iteration-count: 1;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.tab_btn{
	float: left; 
	font-weight: bold;
	color: #666;
	/* text-transform: uppercase; */
	border-bottom: 1px solid #EEE;
}
.tab_btn:hover {
	cursor: pointer;
}
.tab_btn h1 {
	font-weight: normal;
}

.tab_btn.selected {
	background-color: rgba(255, 255, 255, 0.7);
	box-shadow: 2px 0px 3px -2px rgba(0,0,0,0.1);
	font-weight: bold;
	color: #000;
	border-top: 1px solid #EEE;
	border-left: 1px solid #EEE;
	border-right: 1px solid #EEE;
	border-bottom: none;
}
.tab_content {
	border-left: 1px solid #EEE;
	border-right: 1px solid #EEE;
}
.tab_content td { border: none; }
.tab_content table { border: none;  width: 100% }


.tab_btn2{
	float: left; 
	padding: 8px 20px; 
	margin-right: 5px;
	border-top: 1px solid #EEE;
	border-left: 1px solid #EEE;
	border-right: 1px solid #EEE;
	background-color: #EEE;
	font-weight: bold;
	/* text-transform: uppercase; */
	font-size: 0.9em;
}
.tab_btn2:hover {
	cursor: pointer;
}
.tab_btn2 h1 {
	font-weight: normal;
}
.tab_btn_selected2 {
	border-top: 2px solid var(--color1);
	background-color: #FFF;
	color: #000;
}
.tab_content_container2 {
	padding: 20px;
	margin-top: -1px;
	margin-right: 5px;
	border: 1px solid #EEE;
	background-color: #FFF;
}

.STATUS { font-weight: bold; display: inline-block; width: 100px; border: 1px solid #333; background-color: #FFF; border-radius: 10px; text-align: center; padding: 3px }
.OPEN { border: 1px solid #E5B328; background-color: #E5B328; color: #FFF}
.CLOSED { border: 1px solid #666; background-color: #666; color: #FFF}
.CANCELLED { border: 1px solid #AAA; color: #AAA}
.CONFIRMED { border: 1px solid #E5B328; background-color: #E5B328; color: #FFF}
.COMPLETED { border: 1px solid #339933; background-color: #339933; color: #FFF}

.UNPAID {}
.PARTIAL { border: 1px solid #E5B328; background-color: #E5B328; color: #FFF}
.PENDING { border: 1px solid #E5B328; background-color: #E5B328; color: #FFF}
.PAID { border: 1px solid #339933; background-color: #339933; color: #FFF}

.UNFULFILLED {}
.FULFILLED {}
.SHIPPING { border: 1px solid #339933; background-color: #DFF4DF; color: #000}
.ARRIVED { border: 1px solid #339933; background-color: #339933; color: #FFF}
.COLLECTED { border: 1px solid #339933; background-color: #339933; color: #FFF }
.RETURNED { border: 1px solid #666; background-color: #666; color: #FFF}

.cartitem_message { font-weight: bold; color: red }

.tag { background-color: #000; padding: 3px 8px; color: #FFF; font-size: 0.8em; display: inline-block; margin: 0px 5px 5px 0px}

#top_message p { margin: 0 }