@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700);
@import url(https://fonts.googleapis.com/css?family=Sorts+Mill+Goudy);

*{ margin: 0; padding: 0; }
body{ background: #fff linear-gradient(#ddd,#fff) no-repeat; background-attachment: fixed; font: normal normal normal 100%/130% 'Roboto Slab', sans-serif; }
img{ border: none; }
img.smallimg{ margin: 0 0 10px 0; }
h1, h2, h3{ font: normal normal normal 1.8em/1.5em 'Sorts Mill Goudy', sans-serif; color: #036; margin: 0 10px; }
h2.spoffer{ color: #036; font: normal normal bold 1.2em/1.3em 'Sorts Mill Goudy', sans-serif; }
button, a.button{ background-color: #000; color: #fff; border: none; border-radius: 3px; padding: 0 .5em; line-height: 2em; display: inline-block; cursor: pointer; transition: background-color 400ms; text-decoration: none; }
button:hover, a.button:hover{ background-color: #555; }
#main a.button, #main a.button:visited{ color: #fff; text-decoration: none; }

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

#holder{ width: 980px; max-width: 100%; padding: 0; margin: 0 auto; background-color: #fff; }
#holder:after{ content:""; display: table; clear: both; }

#main{ float: right; width: 760px; margin: 140px 0 0 0; background: #fff; box-sizing: border-box; padding: 20px 0 0 20px; }
#main p{ margin: 10px; }
p.centre{ text-align: center; }
#main p.multi{ font-size: .8em; margin: 4px 10px; border: 1px solid #ccc; border-width: 1px 0; }
#main p.multibuy{ float: right; background: #006; width: 100px; overflow: none; font-size: .8em; text-align: center; margin: 0; }
#main p.multibuy a{ color: #fff; text-decoration: none; display: block; }
#main p.multi span{ display: inline-block; width: 100px; }
#main p.multi span.text{ width: 400px; }
#main p.prodpara{ width: 120px; height: 180px; margin: 2px; float: left; clear: none; background-color: #eef; text-align: center; font-size: .8em; line-height: 1.2em; padding: 10px; }
#main p.rangeprod{ border: 1px solid #ccc; border-width: 0 0 1px 0; }
#main a{ color: #006; text-decoration: underline; }
#main a:visited{ color: #000; }
#main a:hover{ color: #069; text-decoration: none; }
#main ul{ margin: 10px 30px; }
#main ul.table{ margin: 10px; text-align: center; background: #eee; }
#main ul.table li{ list-style: none; display: inline; margin: 0; }
#main ul.table a{ display: inline-block; text-align: center; width: 230px; margin: 6px 2px; border: 1px solid #ccc; }

#logo{ position: absolute; top: 0; }
#logo a.tel{ position: absolute; top: 10px; right: 10px; font-size: 1.5rem; line-height: 1.6em; color: #fff; text-decoration: none; background-color: rgba(0,0,0,.7); }

#title_small{ display: none; }

#menu{ float: left; margin: 140px 0 0 0; padding-top: 20px; width: 220px; background-color: #fff; }

#menu>ul{ margin: 0; padding: 0; font-variant: small-caps; font-family: 'Sorts Mill Goudy', sans-serif; line-height: 2em; font-size: .9em; }
#menu>ul>li{ border: 1px solid #000; border-width: 0 0 2px; }
#menu li{ list-style: none; margin: 0; padding: 0; font-size: .85em; line-height: 2em; transition: background-color 400ms; }
#menu li{ width: 220px; overflow: visible; color: #fff; background-color: #555; box-sizing: border-box; }
#menu li li{ background-color: #000; }
#menu li.menutitle{ margin: 0 0 10px 0; }
#menu li a{ display: block; width: 220px; color: #fff; text-decoration: none; box-sizing: border-box; padding: 0 0 0 10px;}
#menu li ul li a{ padding-left: 20px; }
#menu p.basket{ margin: 20px 0; }
#menu p.basket a{ font-weight: bold; border: 2px solid #000; border-color: #336 #000 #000 #336; background: #003; text-align: center; color: #cc9; }
#menu p.basket a:hover{ border-color: #669; background: #225; }
#menu li:hover{ background-color: #888; }
#menu li.selected{ background-image: linear-gradient(#88a,#335); background-size: 100% 2em; }
#menu li li.selected{ background-image: linear-gradient(#88a,#335); }


#info{ position: absolute; top: 110px; }
#info ul, #info li{ list-style: none; margin: 0; padding: 0; border: none; }
#info li{ display: inline; float: left; }
#info ul{ margin: 0;  width: 980px; }

#info a{ display: inline-block; font: normal small-caps normal .9em/2em 'Sorts Mill Goudy', sans-serif; width: 163px; text-align: center; text-decoration: none; background: #666; background-image: linear-gradient(#555,#000); color: #fff; }

#info li:last-child a{ width: 165px; }

#info a:hover{ background-color: #000; background-image: none; color: #bbb; }

#footer{ background-color: #000; color: #fff; font: normal normal normal .7em/2em 'Roboto Slab', sans-serif; }
#footer h2{ color: #fff; text-align: center; }
#footer p{ margin: 0; text-align: center; }
#footer a{ color: #fff; }

.breadcrumbs{ font-size: .7em; line-height: 1.3em; }

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.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;
font-weight: bold;
cursor: pointer;
vertical-align: bottom;
}

input.buy:hover{
}

input.searchinput{ height: 2em; line-height: 2em; text-align: left; width: 100%; }

input.searchsubmit{
font-weight: bold;
cursor: pointer;
width: 188px;
display: block;
}

input.showinput{
background: #fff;
border: none;
color: #000;
width: 3em;
text-align: right;
}

input.shortinput{
width: 3em;
}

img.imgleft{
float: left;
}

.clearboth{
clear: both;
}

ul.sublist{
text-align: center;
line-height: 2em;
border: 1px solid #888;
}

ul.sublist li{
display: inline;
}

#main ul.sublist a{
display: inline-block;
padding: 0 4px;
text-align: center;
}

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

#menu_icon{ display: none; }

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

#holder{ width: 100%; }
#main{ width: calc(100% - 222px); }
#logo{ width: 100%; }
img{ max-width: 100%; height: auto !important; }
#homepage_article{ width: auto; }
#info a, #info li:last-child a{ font-size: .8em; width: 100%; }
#info li{ width: 16.6%; }
#info ul, #info{ width: 100%; }

}


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

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

	#logo a.tel{ top: 58px; right: 0; }

#search_area{ position: absolute; top: 110px; width: 100%; box-sizing: border-box; }
input.searchinput{ width: 75%; height: auto; margin-bottom: 5px; }
input.searchsubmit{ width: 30%; display: inline-block; }
#menu p.basket{ margin: 0; }
#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%; font-size: .92em; }
#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: calc(100% - 22px); margin: 180px 0 0; }

#info{ top: 80px; }


}

@media all and (max-width: 550px){
#info li{ width: 33.3%; }
#main{ margin-top: 210px; }
#search_area{ top: 140px; }
}