@CHARSET "UTF8";

:root {
  --spacing: 5px;
  --vspacing: 5px;
  --indent: 10px;
  --color1: #333;
  --color2: #0E8060;
  --color3: #F27A4B;
  --color4: #FFF;
  --color5: #F9BD56;
  --color6: #FFF;
  --color7: ;
  --color8: ;
  --color9: ;
  --color_bg: #FFF;
  --color_bg2: #EEE;
  
  --color-cancel: #999;
  --color-followup: #FFE6B0;
  --color-done: #8BE2C6; /*#A9E2C6;*/
  
  --font-header: Century Gothic, CenturyGothic, AppleGothic, Trebuchet MS, sans-serif;
  --font-content: Verdana, arial, sans-serif;
}

@media (-webkit-device-pixel-ratio: 1.25) {
  body {
    /* zoom: 90%; */
	font-size: 0.9em;
  }
}

@media (-webkit-device-pixel-ratio: 1.5) {
  body {
    /* zoom: 80%; */
	font-size: 0.8em;
  }
}

@media screen and (max-width: 1080px) {
	#main { 
		width: 100%; 
		font-size: 1.2em;
	}
	#top_message { 

	};
	#mainmenu { width: 100% }
	.product {

	}
	#sticky { 
		width: 16%; 
	}

}

@media screen and (min-width: 1080px) {
	#main { 
		width: 1200px; 
	}
	#top_message { 
		width: 1200px ;
	};
	#mainmenu { width: 1200px }
	.product {
		
	}
	#sticky { 
		width: 25%; 
	}

}
html {overflow-y: scroll;}
body {
	margin: 0px;
	font-size: 0.9em;
	font-family: var(--font-content);
	background-color: var(--color_bg2);
	padding: 10px;
}

.ui-menu .ui-menu-item-wrapper {padding: 10px 8px; font-size: 1.2em}

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; max-width: 100%;}
h1 { 
	padding: 0px 0px 0.2em 0px ; 
	font-size: 1.8em; 
	font-weight: bold; 
	margin: 0px 0px 5px 0px; 
	color: var(--color1); 
	font-family: var(--font-header);
}
h2 { padding: 0px 0px 0.2em 0px ; font-size: 1.7em; font-weight: bold; margin: 0px 0px 5px 0px; color: var(--color1); font-family: var(--font-header);}
h3 { padding: 0.1em 0px ; font-size: 1.2em; font-weight: bold; margin: 0px 0px 5px 0px; color: var(--color1); font-family: var(--font-header);}
h4 { padding: 0.1em 0px ; font-size: 1.2em; font-weight: bold; margin: 0px ; color: var(--color1); font-family: var(--font-header);}
h5 { padding: 0.1em 0px ; font-size: 1.1em; font-weight: bold; margin: 0px; color: var(--color1); font-family: var(--font-header);}
p ,span { line-height: 1.3em; margin: 0px 0px 1em 0px; font-size: 1em; }
p:last-of-type { margin: 0px 0px 0.5em 0px;}
span:last-of-type { margin: 0px 0px 0.5em 0px;}
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 { 
	box-shadow: 0px 0px 50px -20px var(--color_bg);
	margin: 0px auto;
	position: relative;
	
}

#content { margin: 0px auto; min-height: 300px; min-width: 600px; font-size: 1em; background-color: #F6F6F6}

#content_header { color: var(--color7); width: 100%; background-color: color: var(--color2); }
#content_header a.btn_action { color: #FFF; text-decoration: none; }
#content_header a { color: var(--color7); 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: var(--color7) }
#footer a.footer_item { color: var(--color7); text-decoration: none; font-size: 1em; margin-left: 5px; 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 {
	margin-top: -34px;
}

#mainmenu {
	font-size: 1em;
	font-family: var(--font-header);
	letter-spacing: 0em;
	color: #000;
	background-color: var(--color2);
	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: var(--font-header);
	/* text-transform: uppercase; */
	font-weight: bold;
	color: #FFF;
	margin: 5px 20px 0px 0px;
	padding: 3px 15px 2px 15px;
	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: 200px;
	height: 20px;
	line-height: 20px;
	padding: 2px 10px 2px 10px;
}
#mainmenu ul li ul li a:hover {
	color: #FFF;
	background:#333;	
}

#brands-menu {
	font-family: var(--font-header);
	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;
}	
.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: var(--font-header);
	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);
}	
.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: cover; 
	background-repeat: no-repeat;
	margin: 3%;
}



.label_hotkey {	
	float: right
}
.textfield {
	width: 273px;
	min-height: 24px;
	margin: 0;
	padding: 0.2em;
	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;
	font-size: 1em;
}
input:focus, select:focus, textarea:focus{ 
	background-color: #FFFFD0;
	border: solid 1px #64A2FF;
}
textarea { font-family: arial}

.sub_menu {padding-left: 0px; font-size: 1em; }
.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: var(--spacing) 0 var(--spacing) var(--spacing) );padding: var(--spacing)}
.sub_menu_item:hover {text-decoration: none; color: #FFF; background: var(--color1); cursor: pointer;}
.sub_menu_item_selected {text-decoration: none; font-weight: bold; font-size: 1.1em; color: var(--color1);}
.sub_menu_item_selected:hover {text-decoration: none; cursor: pointer;}



.btn_action { border: none; font-family: var(--font-header); font-weight: bold; text-decoration: none; padding: 0.2em 1em; background-color: var(--color5); color: var(--color6); font-size: 1em; text-align: center; line-height: 30px; z-index: 100; display: inline-block}
.btn_action:hover {text-decoration: none}
.btn_eshop { display: inline-block; font-weight: bold; letter-spacing: 1px; background-color: var(--color5); display: inline-block}
.btn_eshop_not_available { background-color: #CCC; }

.btn_action.disabled { cursor: arrow;}
.btn_action2 {display: inline-block; border: none; font-family: var(--font-header); text-decoration: none; padding: 0.2em 1em; background-color: #EEE; color: #000; font-size: 1em; text-align: center; line-height: 30px; display: inline-block}
a.btn_action2 {text-decoration: none}
.btn_action3 {font-family: var(--font-header); text-decoration: none; padding: 3px 5px; background-color: #CCC; color: #FFF; font-size: 1em; text-align: center; line-height: 20px; margin: 0 2px 2px 0; display: inline-block }
.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,1); padding: 20px; margin: 0px 0px 10px 0px; border: 1px solid #F0F0F0; box-shadow: 3px 3px 3px -2px rgba(0,0,0,0.1)}
.boxlet ul { margin: 1em 20px 1.5em 20px; padding-left: var(--indent)}
#menu-left ul { margin: 0px; padding-left: var(--indent)}

.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; height: 250px; margin: 0px 15px 150px 15px; text-align: left;}
.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: 1em; color: #333; padding: 5px 0px 5px 0px}
.product_thumbnail_price {font-weight: normal; font-size: 1em; color: #C00; padding-left: 0px}
.product_thumbnail_price_old {font-weight: normal; color: #999}
.product_thumbnail_price_original {font-weight: normal; font-size: 1em; 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: 0.9em; 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{
	display: inline-block;
	padding: 8px 15px; 
	margin-right: 3px;
	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-family: var(--font-header); font-size: 1.1em; font-weight: bold; display: inline-block; width: 7em; border: 4px solid #333; background-color: #FFF; border-radius: 18px; text-align: center; padding: 2px 5px}
.OPEN { border: 4px solid var(--color-followup); background-color: var(--color-followup); color: #000}
.CLOSED { border: 4px solid #999; background-color: #999; color: #000}
.CANCELLED { border: 4px solid #999; color: #999}
.CONFIRMED { border: 4px solid var(--color-done); background-color: var(--color-done); color: #000}
.COMPLETED { border: 4px solid var(--color-done); background-color: var(--color-done); color: #000}

.UNPAID {}
.PARTIAL { border: 4px solid var(--color-followup); background-color: var(--color-followup); color: #000}
.PENDING { border: 4px solid var(--color-followup); background-color: var(--color-followup); color: #000}
.AUTHORIZED { border: 4px solid var(--color-done); color: var(--color-done) } 
.PAID { border: 4px solid var(--color-done); background-color: var(--color-done); color: #000}
.REFUNDING { border: 4px solid var(--color-followup); background-color: var(--color-followup); color: #000}
.REFUNDED { border: 4px solid #999; background-color: #999; color: #000 } 

.UNFULFILLED { border: 4px solid var(--color-followup); background-color: var(--color-followup); color: #000} 
.FULFILLED { border: 4px solid var(--color-done); background-color: var(--color-followup); color: #000}
.SHIPPING { border: 4px solid var(--color-done); background-color: #DFF4DF; color: #000}
.ARRIVED { border: 4px solid var(--color-done); background-color: var(--color-done); color: #000}
.COLLECTED { border: 4px solid var(--color-done); background-color: var(--color-done); color: #000 }
.RETURNED { border: 4px solid #999; background-color: #999; color: #000}

.CANCEL { border: 4px solid #999; background-color: #999; color: #000 }
.NONE { border: 4px solid #EEE; background-color: #EEE; color: #000 }
.FOLLOWUP { border: 4px solid var(--color-followup); background-color: var(--color-followup); color: #000}
.DONE { border: 4px solid var(--color-done); background-color: var(--color-done); color: #000}

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

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

#top_message p { margin: 0 }


.discountcode_applied { clear: both; display: inline-block; text-align: left; margin: 10px 10px 10px 0; padding: 5px; border: 1px solid var(--color1); padding: 10px ; background-color: #F9F9F9 }
.discountcode_description { font-size: 0.9em; color: #999 }

.ui-datepicker {
    z-index: 9999;
}