﻿html
{
    margin: 0px;
    padding: 0px;
}
body
{
    background-image: url(background.png);
    background-repeat: repeat;
    background-position: top left;
    padding: 9px 11px 12px 11px;
    margin: 0px;
	color: #666666;
}
select, input[type="text"], input[type="email"], input[type="tel"]
{
    border: 1px solid #C7D1B4;
    color: #666666;
}


/****************** Container ******************/
#missingJSerror {
    width: 950px;
    height: 22px;
    margin: 0 auto 0 auto;
    text-align: center;
    background-color: #FFCCFF;
    padding: 8px 0 0 0;
    display: block;
}

#versionIEerrorBox
{
    border: 6px solid #CFDACC;
    margin: 10% 10% 10% 10%;
	background-color:#FFFFFF;
    padding: 100px 0px 0px 0px;
    z-index: 10002;
    position:fixed; 
    top:10%; 
    left:20%; 
    width:600px; 
    height:120px; 
    color:#000000; 
    text-align:center; 
}

#versionIEerrorLayer
{
   	filter: alpha(opacity=70); /*older IE*/
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); /* IE */
	-moz-opacity: .70; /*older Mozilla*/
	-khtml-opacity: 0.7;   /*older Safari*/
	opacity: 0.7;   /*supported by current Mozilla, Safari, and Opera*/
	background-color:#FFFFFF;
    z-index: 10001;
    position:fixed; top:0px; left:0px; width:100%; height:100%; color:#000000; text-align:center; vertical-align:middle;
}

#pageContainer_TopBorder
{
    width: 958px;
    height: 6px;
    margin: 0px auto 0px auto;
    padding: 0px;
    background-image: url(mainbg_top.png);
    background-repeat: no-repeat;
    background-position: top left;
    overflow: hidden;
}
#pageContainer_BottomBorder
{
    width: 958px;
    height: 3px;
    margin: 0px auto 0px auto;
    padding: 0px;
    background-image: url(mainbg_bottom.png);
    background-repeat: no-repeat;
    background-position: top left;
    overflow: hidden;
}

#pageContainer
{
    width: 950px;
    padding: 0px 4px 0px 4px;
    margin: 0px auto 0px auto;
    position: relative;
    background-image: url(mainbg_middle.png);
    background-repeat: repeat-y;
    background-position: top left;
}

/****************** Header ******************/

#header
{
    position: relative;
    width: 950px;
    height: 174px;
    background-image: url(header.png);
    background-position: top center;
    background-repeat: no-repeat;
}
#logo
{
    width: 190px;
    height: 115px;
    top: 10px;
    left: 45px;
    display: block;
    position: absolute;
}
#login
{
    position: absolute;
    top: 20px;
    left: 744px;
    width: 185px;
    height: 95px;
    font-size: 10px;
    color: #BF4C27;
}
#login a
{
    color: #BF4C27;
}
#login a:hover
{
    color: white;
}
#username, #password
{
    border: 1px solid #F09F32;
    font-size: 10px;
    width: 150px;
    position: absolute;
    left: 15px;
    background-color: #F5F6F6;
}
#username_overlay, #password_overlay
{
    width: 150px;
    height: 14px;
    left: 18px;
    position: absolute;
    color: #9F9F9F;
    padding-top: 2px;
    cursor: text;
}
#username, #username_overlay
{
    top: 7px;
}
#password, #password_overlay
{
    top: 27px;
}
#loginsubmit
{
    width: 59px;
    height: 14px;
    background-image: url(connect.png);
	position: absolute;
	left: 109px;
	top: 47px;
	border: none;
	cursor: pointer;
}
#loginloading
{
    width: 60px;
    height: 14px;
	position: absolute;
	left: 108px;
	top: 47px;
    background-image:url(login.gif);
    background-position: center center;
    background-repeat: no-repeat;
    display: none;
}
#loginerror
{
    position: absolute;
    right: 5px;
    top: -15px;
    color: Red;
    white-space: nowrap;
}

#forgotpassword
{
    position: absolute;
    left: 17px;
    top: 54px;
}
#register
{
    position: absolute;
    left: 17px;
    top: 67px;
    cursor: pointer;
}
#register_dropdown
{
    position: absolute;
    top: 90px;
    left: 1px;
    width: 113px;
    text-align: left;
    padding: 0px 2px 2px 15px;
    border: 1px solid #BF4C27;
    background-color: #F47621;
    border-radius: 5px;
    display: none;
}
#register_dropdown a
{
    display: block;
    padding-top: 2px;
}
#greeting
{
    position: absolute;
    top: 10px;
    left: 10px;
    width: 162px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
}
#userprofile
{
    position: absolute;
    left: 10px;
    top: 30px;
    width: 86px;
    height: 14px;
    background-image: url(profile.png);
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
}

#userprofile_dropdown
{
    position: absolute;
    left: 10px;
    top: 44px;
    width: 74px;
    padding: 5px;
    border: 1px solid #F69799;
    background-color: White;
    overflow: hidden;
    white-space: nowrap;
    display: none;
    z-index: 2;
}
#userprofile_dropdown a
{
    color: #E38725;
    display: block;
    letter-spacing: -1px;
}
#userprofile_dropdown a:hover
{
    color: #714312;
}
#logout
{
    position: absolute;
    left: 100px;
    top: 30px;
}
#cartCountLink
{
    position: absolute;
    top: 47px;
    left: 10px;
}
#newCartLink{position: absolute;top: 52px;left: 140px;width: 32px;height: 28px;background-image: url(cart.png);background-position: 0 0;background-repeat: no-repeat;}
#newCartLink:hover{background-position: 0 -28px;}
#cartDraftsLink{position:absolute;top:73px;left:10px;}
#cartTotalLink{position:absolute;top:60px;left:10px;}

#deliveryallowed
{
    color: White;
    position: absolute;
    right: 9px;
    top: 140px;
    font-size: 10px;
}

#dialog-changeclient
{
    display: none;
    font-size: smaller;
}
#dialog-changeclient
{
    text-align: right;
}
#dialog-changeclient-submit
{
    margin: auto;
}

/****************** Top menu ******************/
#topMenu
{
    position: absolute;
    top: 135px;
    padding: 3px 0px 0px 20px;
    font-size: 13px;
}
#topMenu span.menuitem
{
    position: relative;
    z-index: 1050;
}
#topMenu span.menuitem a,
#topMenu span.menutext
{
    padding: 0px 16px 0px 16px;
    border-left: 2px solid #D3E59C;
    color: White;
}
#topMenu span.menuitem a:hover
{
    color: #649A41;
}
#topMenu span.menuitem.first a,
#topMenu span.menuitem.first span.menutext
{
    border-left: none;  
}
#topMenu span.submenu
{
    position: absolute;
    top: 100%;
    left: 2px;
    display: none;
    background-color: #ADD13A;
    z-index: 1001;
}
#topMenu span.menuitem:hover > span.submenu
{
    display: block;
}

#topMenu span.submenu span.menuitem
{
    border: none;
    display: block;
    padding: 5px 0px 5px 0px;
}
#topMenu span.submenu span.submenu
{
    top: 0px;
    left: 100%;
}
#topMenu span.submenu span.menuitem.hassubmenu
{
    background-image: url(MenuArrow.png);
    background-position:right center;
    background-repeat: no-repeat;
}
#topMenu span.submenu span.menuitem a
{
    z-index: 1060;
    border-left: none;
    display: block;
}

/****************** Left column ******************/
#leftColumn
{
    float: left;
    padding: 10px 0px 50px 16px;
}
#leftMenu
{
    border: 1px solid #E6E8E7;
    padding: 5px 5px 2px 5px;
}
#discountMenu, #upperLeftMenu, #middleLeftMenu, #lowerLeftMenu
{
    padding-bottom: 3px;
}

#leftColumn span.menuitem
{
    position: relative;
    display: block;
    width: 270px;
    background-repeat: no-repeat;
    background-image: url(menu.png);
}

#discountMenu span.menuitem, #upperLeftMenu span.menuitem
{
    background-position: 0px -26px;
    height: 25px;
    color: #CC7033;    
}
#discountMenu a, #upperLeftMenu a
{
    color: #CC7033;    
}
#discountMenu span.menuitem.first, #upperLeftMenu span.menuitem.first
{
    background-position: 0px 0px;
    height: 26px;
}
#discountMenu span.menuitem.last, #upperLeftMenu span.menuitem.last
{
    background-position: 0px -51px;
    height: 27px;
}
#discountMenu span.menuitem.first.last, #upperLeftMenu span.menuitem.first.last
{
    background-position: 0px -77px;
    height: 27px;
}

#middleLeftMenu span.menuitem
{
    background-position: 0px -237px;
    height: 25px;
    color: #666666;
}
#middleLeftMenu a
{
    color: #666666;
}

#middleLeftMenu span.menuitem.first
{
    background-position: 0px -210px;
    height: 27px;
}
#middleLeftMenu span.menuitem.last
{
    background-position: 0px -262px;
    height: 26px;
}
#middleLeftMenu span.menuitem.first.last
{
    background-position: 0px -288px;
    height: 28px;
}

#middleLeftMenu span.menuitem.hassubmenu
{
    background-position: 0px -131px;
    height: 25px;
}
#middleLeftMenu span.menuitem.hassubmenu.first
{
    background-position: 0px -104px;
    height: 27px;
}
#middleLeftMenu span.menuitem.hassubmenu.last
{
    background-position: 0px -156px;
    height: 26px;
}
#middleLeftMenu span.menuitem.hassubmenu.first.last
{
    background-position: 0px -182px;
    height: 28px;
}

#middleLeftMenu span.menuitem.hassubmenu.selected
{
    background-position: 0px -396px;
}
#middleLeftMenu span.menuitem.hassubmenu.first.selected
{
    background-position: 0px -369px;
}
#middleLeftMenu span.menuitem.hassubmenu.last.selected
{
    background-position: 0px -421px;
}
#middleLeftMenu span.menuitem.hassubmenu.first.last.selected
{
    background-position: 0px -447px;
}
#discountMenu .activateMenuBlock, #middleLeftMenu .activateMenuBlock
{   /* class activateMenuBlock allows to open dropdown-menu only if mouse cursor is on left side (2/3 of all button witdh) of menu button; prevents from accidental drop-down menu opening */
    display: block;
    width: 180px;   /* 2/3 of all button width */
    height: 25px;
    z-index: 1002;
    position: absolute;    
}
#discountMenu span.menuitem.hassubmenu 
{
    background: url('discount_menu.png');
    background-repeat: no-repeat;
    
}
#discountMenu span.menuitem.first.last 
{
    background-position: -1px -78px;
    height: 27px;
}
#discountMenu span.menuitem.hassubmenu.first.last.selected
{
    background-position: -1px -182px;
    height: 27px;
}


#lowerLeftMenu span.menuitem
{
    background-position: 0px -343px;
    height: 26px;
    color: #586649;
}
#lowerLeftMenu a
{
    color: #586649;
}
#lowerLeftMenu span.menuitem.first
{
    background-position: 0px -316px;
    height: 27px;
}

#leftColumn span.menuitem a,
#leftColumn span.menuitem span.menutext
{
    position: absolute;
    top: 3px;
    left: 5px;
    width: 262px;
    height: 18px;
    
    overflow: hidden;
    white-space: nowrap;
    display: block;
}

#leftColumn span.menuitem.first a,
#leftColumn span.menuitem.first span.menutext
{
    top: 5px;
}


.megaMenu
{
    border: 6px solid #CFDACC;
    position: absolute;
    background-color: White;
    top: 0px;
    left: 0px;
    padding: 0px 30px 30px 0px;
    z-index: 1001;
    width: 600px;
    background-image: url(MegaMenuTop.png);
    background-position: top center;
    background-repeat: no-repeat;
    color: #999999;
}
.megaMenu .title
{
    font-weight: bold;
    width: 570px;
    padding: 4px 0px 5px 30px;
    margin-bottom: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow:ellipsis;
    white-space: nowrap;
    display: block;
    color: #999999;
}
.megaMenu .title:hover
{
    color: #666666;
}

.megaMenu .column
{
    float: left;
    margin-left: 30px;
}
.megaMenu .column a
{
    display: block;
    width: 170px;
    overflow: hidden;
    /* text-overflow: ellipsis; */
    -o-text-overflow:ellipsis;
    /* white-space: nowrap; */
    white-space: normal;
    border-bottom: 1px solid #DAEFF0;
    color: #999999;
    padding: 3px 0px 3px 0px;
}
.megaMenu .column a:hover
{
    color: #666666;
    border-bottom: 1px solid #BBCCCC;
}

.megaMenu .column a.level0
{
    font-weight: bold;
}
.megaMenu .column a.level1
{
    width: 155px;
    padding-left: 15px;
    background-image: url(level.png);
    background-position: 3px center;
    background-repeat: no-repeat;
}
.megaMenu .column a.level2
{
    width: 140px;
    padding-left: 30px;
    background-image: url(level.png);
    background-position: 18px center;
    background-repeat: no-repeat;
}
.megaMenu .column a.level3
{
    width: 125px;
    padding-left: 45px;
    background-image: url(level.png);
    background-position: 33px center;
    background-repeat: no-repeat;
}
.megaMenu .column a.level4
{
    width: 110px;
    padding-left: 60px;
    background-image: url(level.png);
    background-position: 48px center;
    background-repeat: no-repeat;
}
/* drop-down menu style for product groups with discount */
.discountMegaMenu 
{
    border: 6px solid #FFC839;
    background-image: url(MegaMenuDiscountTop.png);
}
.discountMegaMenu .column a 
{    
    padding: 3px 0px 0px 0px;
}
.discountMegaMenu .megaMenuItem
{
    height: 35px;
}
.discountMegaMenu .megaMenuItem img 
{
    padding-right: 5px;
    vertical-align: middle;
}
.discountMegaMenu .megaMenuItem .discountWithoutImage 
{
    margin-left: 5px;
    margin-top: 8px;
    display: block;
    white-space: nowrap;	
    overflow: hidden;
    text-overflow: ellipsis;
}

a.megaMenuItem.level0
{
    width: 500px;
}

#companyPhone
{
    color: #97AB44;
    background-image: url(phone.png);
    background-position: 15px center;
    background-repeat: no-repeat;
    padding: 15px 15px 15px 40px;
    font-size: 25px;
    font-weight: bold;
}

#iso9001
{
    background-image: url(iso_9001_135x117.png);
    background-position: 15px top;    
    background-repeat: no-repeat;    
    padding: 15px 15px 15px 40px;
    width: 135px;
    height: 117px;
}

/****************** The rest ******************/
#rightColumn
{
    margin-left: 306px;
    position: relative;
    zoom: 1;
}
#rightFooter
{
	height: 200px;
	background-image:url(frog.png);
	background-position: right bottom;
	background-repeat: no-repeat;
	position: relative;
	clear: both;
	margin-left: 306px;
}
#rightFooterLine1
{
	position: absolute;
	color: #8DB83E;
	left: 20px;
	top: 150px;
}
#rightFooterLine2
{
	position: absolute;
	color: white;
	left: 20px;
	top: 178px;
}
div#version
{
    position: absolute;
	color: white;
	right: 2px;
	bottom: 0px;
	font-size: 8px;
}
#searchName
{
    width: 117px;
}
#searchGroup
{
    width: 115px;    
}
#searchManufacturer
{
    width: 128px;    
}
#searchSubmit
{    
    width: 63px;
    height: 19px;    
    cursor: pointer;
    display: inline-block;   
    background-image: url(search_btn.png);
    background-position:right center;
    background-size: cover;
    line-height: 19px;
}
#contentContainer
{
	border: 1px solid #DADADE;
	border-radius: 3px;
	margin: 10px;
	padding: 10px;
}

.bottomLess {
    width:100%;
}

/****************** clearFix for floating elements inside #main div ******************/
/* For modern browsers */
.clearFix::before, .clearFix::after 
{
    content:"";
    display:table;
}
.clearFix::after 
{
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearFix 
{
    zoom:1;
}

#search div.field
{
    display: inline-block;
    padding-top: 15px;
}
#search label
{
    display: inline-block;
    font-size: 11px;
}
#search input[type="image"]
{
    margin-top: -5px;
    position: relative;
    top: 6px;
}
div.breadcrumbs
{
    font-size: smaller;
    padding: 10px 0px 10px 0px;
    color: #838383;
}
div.breadcrumbs a
{
    color: #666666;
}
.row {
    margin-right: 0px;
}

.col {
    width: 100%;
    float: left;
    padding-right: 20px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.col-md-11 {
    width: 91.662%;
}

.col-md-10 {
    width: 83.332%;
}

.col-md-9 {
    width: 75%;
}

.col-md-8 {
    width: 66.662%;
}

.col-md-7 {
    width: 58.331%;
}

.col-md-6, .col-half {
    width: 50%;
}

.col-md-5 {
    width: 41.662%;
}

.col-md-4 {
    width: 33.332%;
}

.col-md-3 {
    width: 25%;
}

.col-md-2 {
    width: 16.662%;
}

.col-md-1 {
    width: 8.332%;
}

.row:before,
.row:after,
.group:before,
.group:after {
    content: "";
    display: table;
}

.row:after,
.group:after {
    clear: both;
}

.row,
.group {
    zoom: 1;
}

.container {
    width: 100%;
}

.col-pos {
    position: relative;
}

.col-no-padding {
    padding-right: 0;
}

.row-no-margin {
    margin-right: 0;
}

.lupa {
    display: inline-block;
    background-image: url(Lupa-active.png);
    width: 22px;
    height:22px;
    line-height: 22px;
    background-position:right center;
    background-size: cover;
}


.search-container {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 5px 10px 0;
    text-align: right;
    width: 100%;
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(left, #ffffff 0%, #e4f1d9 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(100%,#e4f1d9)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #ffffff 0%,#e4f1d9 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #ffffff 0%,#e4f1d9 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #ffffff 0%,#e4f1d9 100%); /* IE10+ */
    background: linear-gradient(to right, #ffffff 0%,#e4f1d9 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e4f1d9',GradientType=1 ); /* IE6-9 */
}
.search-container label {
    color: #858383;
}

.gradient 
{
    filter: none;
}