*{ margin: 0; padding: 0; }

body{ width: 100%; background: #fff url(gx/back.jpg) repeat-x; font: normal normal normal 12px/1.4em Tahoma, sans-serif; }

img{ border: none; }

img.smallimg{ margin: 0 0 10px 0; }

h1, h2{ font: normal normal bold 20px/1.4em Georgia, Times New Roman, sans-serif; color: #036; margin: 0 0 1em; }
h2{ font-size: 16px; }
h2.spoffer{ color: #630; font: normal normal bold 18px/1.4em Georgia, Times New Roman, sans-serif; }

#main a.tel{ text-decoration: inherit; color: inherit; }

#holder{ width: 960px; padding: 0; margin: 0 auto; }

#main{ float: right; width: 750px; margin: 125px 10px 0 0; padding: 0; }
#main p{ text-align: justify; clear: both; margin: 1em 0; }
#main ul{ margin: 1em 1em 1em 3em; }
#main p.prodpara{ width: 244px; height: 250px; margin: 1px; float: left; clear: none; border: 2px solid #600; border-color: #600 #000 #000 #600; text-align: center; }
#main p.rangeprod{ border: 1px solid #ccc; border-width: 0 0 1px 0; }
#main a{ color: #660; text-decoration: underline; }
#main a.moreinfo{ display: inline-block; border: 2px solid #000; border-color: #454 #676 #676 #454; background: #cc9; color: #520; width: 90px; font-weight: bold; text-decoration: none; float: none; margin: 0 auto; }
#main a:visited{ color: #320; }
#main a:hover{ color: #990; text-decoration: none; }
#main a.moreinfo:hover{ border-color: #8a8 #bfb #bfb #8a8; background: #dda; color: #520; }

#logo{ position: absolute; top: 10px; text-align: center; width: 960px; max-width: 100%; }
#logo a.tel{ color: #fff; position: absolute; top: 0; right: 105px; text-decoration: none; font-size: 1.5rem; background-color: rgba(0,0,0,.7); line-height: 1.5em; }
#logo p{ margin: 0; padding: 0; text-align: center; }
#logo img{ border: none; }
#title_small{ display: none; }

#menu{ float: left; margin-top: 125px; width: 184px; }
#menu p{ width: 184px; }
#menu ul, #menu li{ list-style: none; margin: 0; padding: 0; background: transparent; border: none; }
#menu ul{ margin: 15px 0; background: transparent; }
#menu li{ width: 184px; overflow: visible; text-align: center; color: #000; font-weight: bold; font-size: 11px; }
#menu li.menutitle{ margin: 0 0 10px 0; }
#menu li a, #menu p a{ display: block; width: 180px; padding: 2px; background: transparent; color: #000; text-decoration: none; font: normal normal normal 12px/18px Georgia, Times New Roman, sans-serif; }
#menu li.subcat a, #menu li.menuman a{ border: 2px solid #000; border-color: #600 #000 #000 #600; background: #300; color: #996; width: 170px; padding: 2px 2px  2px 12px; text-align: left; }
#menu li.menucat a{ font-weight: bold; border: 2px solid #000; border-color: #644 #200 #200 #644; background: #533; text-align: left; color: #cc9; }
#menu p.basket a{ font-weight: bold; border: 2px solid #000; border-color: #644 #200 #200 #644; background: #533; text-align: center; color: #cc9; }
#menu p.basket a:hover{ border-color: #966; color: #ffe; }
#menu li.subcat a:hover, #menu li.menucat a:hover, #menu li.menuman a:hover{ border-color: #966; color: #ffe; }

#info{ position: absolute; top: 90px; width: 960px; }
#info ul, #info li{ list-style: none; margin: 0; padding: 0; border: none; float: left; }
#info ul{ width: 960px; }
#info a{ display: inline-block; font: normal normal bold 11px/16px Georgia, Verdana, sans-serif; width: 133px; text-align: center; text-decoration: none; border: 2px solid #000; border-color: #644 #200 #200 #644; background: #533; color: #cc9; }
#info li:last-child a{ width: 134px; }
#info a:hover{ border-color: #966; color: #ffe; }

#footer{ border: 2px solid #660; border-width: 2px 0; clear: both; background: #dca; font: normal normal normal 10px/16px Verdana, sans-serif; text-align: center; }

span.mrp{ font-weight: bold; text-decoration: line-through; }
span.rbp, span.rbpwas, span.sop{ color: #000; font-weight: bold; }
span.rbpwas{ text-decoration: line-through; }
span.soptext{ font-weight: bold; }
acronym{ cursor: help; }

input{ font: normal normal normal 12px/17px Georgia, Times New Roman, sans-serif; }
input.quantity{ width: 4em; height: 19px; vertical-align: bottom; text-align: right; border: 2px solid #000; border-color: #454 #676 #676 #454; }
input.buy{ width: 100px; height: 25px; border: 2px solid #000; border-color: #454 #676 #676 #454; background: #cc9; color: #530; font-weight: bold; cursor: pointer; vertical-align: bottom; }
input.buy:hover{ border-color: #8a8 #bfb #bfb #8a8; background: #dda; }
input.searchinput{ height: 15px; text-align: left; width: 178px; }
input.searchsubmit{ border: 2px solid #000; border-color: #454 #676 #676 #454; background: #cc9; color: #520; width: 90px; font-weight: bold; cursor: pointer; }
input.searchsubmit:hover{ border-color: #8a8 #bfb #bfb #8a8; background: #dda; }
input.showinput{ background: #fff; border: none; color: #000; width: 3em; text-align: right; }
input.shortinput{ width: 3em; }

img.imgleft{ float: left; }

.clearboth{ clear: both; }

.announce{ font: normal normal bold 18px/24px Arial, sans-serif; color: #f00; }
#main .announce a{ color: #f00; }

.clearfix:after{ display: table; content: ""; clear: both; }


#menu_icon{ display: none; }

@media all and (max-width: 1023px){

#holder{ width: 100%; }
#main{ width: calc(100% - 222px); margin-top: 175px; }
#menu{ margin-top: 175px; }
#info{ float: none; margin: 0; width: 100%; text-align: center; }
#info ul{ width: 100%; }
img{ max-width: 100%; height: auto !important; }
#homepage_article{ width: auto; }
table.atoz{ width: 100%; position: static; }
table.atoz td{ display: block; }

}


@media all and (max-width: 750px){
	#logo a.tel{ font-size: 1rem; right: 10px; line-height: 2em; }
table.atoz{  }
}

@media all and (max-width: 650px){

	#logo a.tel{ position: static; display: block; text-align: center; }

html{ font-size: 1em; }
#menu li, .announce, ul.sublist, input, #footer, #info a, #menu li a, #menu p a, #main p.multibuy, #main p.multi, body{ font-size: 1em; line-height: 1.4em; }
h2.spoffer, h1, h2, h3{ font-size: 1.5em; line-height: 1.2em; }
#main p.prodpara{ font-size: .85em; line-height: 1.2em; }

#search_area{ position: absolute; top: 160px; width: 100%; box-sizing: border-box; }
input.searchinput{ width: 65%; height: auto; }
input.searchsubmit{ width: 30%; display: inline-block; }
#menu p.basket, #menu p{ margin: 5px 0 0; width: 100%; }
#menu p.basket a{ width: 100%; box-sizing: border-box; }

#menu{ float: none; width: 100%; margin: 10px 0 0 0; box-sizing: border-box; }
#menu li{ width: 100%; }
#menu li.menuman a, #menu li.menucat a, #menu li.subcat a{ width: 100%; box-sizing: border-box; }

#menu_icon{ display: block; position: absolute; top: 0; right: 0; }

#main{ float: none; width: 100%; margin: 260px 0 0; box-sizing: border-box; padding: 0 .5em; }

#info{ top: 130px; }
#search_area{ top: 190px; }

#title_small{ display: inline-block; max-width: calc(100% - 52px); }
#title_large{ display: none; }

#info li.last a{ width: 118px; }

}

@media all and (max-width: 580px){
#main{ margin-top: 295px; }
#search_area{ top: 215px; }
}

@media all and (max-width: 450px){
	#logo { top: 60px; }
	#info{ top: 180px; }
#main{ margin-top: 370px; }
#search_area{ top: 290px; }
}