/* SITE BODY /******************************************/ html {-webkit-text-size-adjust: 100%;} body {margin: var(--siteNav-Height) 0px 0px 0px; background:#eeeeee;text-align:left; font-size:12px; line-height:26px; font-family:bodyFont,Verdana,sans-serif; color:var(--bodyDefaultTextColor);} @media only screen and (max-width:500px) { body {background:var(--siteNav-BannerBg);} } /* SITE HEAD COOKIE FORM /******************************************/ div#siteCookies {position:fixed; z-index:2000; bottom:0px; box-sizing:border-box; width:100%; padding-top:10px; padding-bottom:10px; background: var(--siteCookies-Bg);} div#siteCookies form {box-sizing:border-box; width:var(--body-WideWidth); max-width:1920px; margin:auto;} @media only screen and (max-width:500px) {div#siteCookies form {width:var(--body-NarrowWidth);}} div#siteCookies h1 {font-family:headFont, Verdana, sans-serif; color: var(--siteCookies-HeaderColor);} div#siteCookies p {width:100%; max-width:1000px; font-size:13px; font-family:bodyFont, Verdana, sans-serif; color: var(--siteCookies-TxtColor);} div#siteCookies a, div#siteCookies a:visited {text-decoration:none;color: var(--siteCookies-LinkColor);} div#siteCookies a:hover {color: var(--siteCookies-LinkHoverColor);} div#siteCookies button {cursor:pointer; padding:5px 10px 5px 10px;border-radius:5px; border-width:0px; border-color: var(--siteCookies-ButtonBgColor); background:var(--siteCookies-ButtonBgColor); font-family:formFont, Verdana, sans-serif; font-size:12px; color: var(--siteCookies-ButtonTxtColor);} div#siteCookies button:hover {background: var(--siteCookies-ButtonHoverBgColor);} /* SITE NAV /******************************************/ #siteNav {position:fixed; top:0px; z-index:2000; display:flex; align-items:center; justify-content:center; box-sizing:border-box; width:100%; height:var(--siteNav-Height); background: var(--siteNav-BannerBg); background: -webkit-linear-gradient(var(--siteNav-BannerFade)); background: -o-linear-gradient(var(--siteNav-BannerFade)); background:-moz-linear-gradient(var(--siteNav-BannerFade)); background:linear-gradient(var(--siteNav-BannerFade)); border-bottom:2px solid var(--siteNav-BannerBorderBottom); -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;} @media only screen and (max-width:1024) { #siteNav {position:absolute;} } #siteNav div {display:flex; align-items:center; box-sizing:border-box; width:var(--body-WideWidth); max-width:1920px; height:50px; margin:auto;} @media only screen and (max-width:600px) { #siteNav nav {width:var(--body-NarrowWidth);} } a#siteLogo img {float:left; display:flex; align-items:center; box-sizing:border-box; max-width:200px; height:var(--siteNav-Height); padding:8px; object-fit:scale-down;} @media only screen and (max-width:500px) {#siteLogo img {max-width:200px !important;}} @media only screen and (max-width:490px) {#siteLogo img {max-width:200px !important;}} @media only screen and (max-width:480px) {#siteLogo img {max-width:200px !important;}} @media only screen and (max-width:470px) {#siteLogo img {max-width:190px !important;}} @media only screen and (max-width:460px) {#siteLogo img {max-width:180px !important;}} @media only screen and (max-width:450px) {#siteLogo img {max-width:170px !important;}} @media only screen and (max-width:440px) {#siteLogo img {max-width:160px !important;}} @media only screen and (max-width:430px) {#siteLogo img {max-width:155px !important;}} @media only screen and (max-width:420px) {#siteLogo img {max-width:150px !important;}} @media only screen and (max-width:414px) {#siteLogo img {max-width:150px !important;}} @media only screen and (max-width:412px) {#siteLogo img {max-width:150px !important;}} @media only screen and (max-width:410px) {#siteLogo img {max-width:140px !important;}} @media only screen and (max-width:400px) {#siteLogo img {max-width:135px !important;}} @media only screen and (max-width:393px) {#siteLogo img {max-width:135px !important;}} @media only screen and (max-width:392px) {#siteLogo img {max-width:125px !important;}} @media only screen and (max-width:380px) {#siteLogo img {max-width:120px !important;}} @media only screen and (max-width:375px) {#siteLogo img {max-width:120px !important;}} @media only screen and (max-width:374px) {#siteLogo img {max-width:110px !important;}} @media only screen and (max-width:370px) {#siteLogo img {max-width:107px !important;}} @media only screen and (max-width:360px) {#siteLogo img {max-width:105px !important;}} @media only screen and (max-width:359px) {#siteLogo img {max-width:100px !important;}} @media only screen and (max-width:355px) {#siteLogo img {max-width:95px !important;}} @media only screen and (max-width:350px) {#siteLogo img {max-width:90px !important;}} @media only screen and (max-width:345px) {#siteLogo img {max-width:85px !important;}} @media only screen and (max-width:340px) {#siteLogo img {max-width:80px !important;}} @media only screen and (max-width:335px) {#siteLogo img {max-width:75px !important;}} @media only screen and (max-width:330px) {#siteLogo img {max-width:70px !important;}} @media only screen and (max-width:325px) {#siteLogo img {max-width:65px !important;}} @media only screen and (max-width:320px) {#siteLogo img {display:none !important;}} ul#siteLinks.wide {box-sizing:border-box; width:auto; height:50px; margin:0px 0px 0px 0px; padding:0px;} ul#siteLinks.wide li {list-style-type:none; float:left; height:26px; margin:12px 0px 12px 0px; padding:0px 7px 0px 7px; font-size:13px; font-weight:lighter; text-decoration:none; color:var(--siteNav-MainCatWideTxt); border-right:1px solid var(--siteNav-MainCatWideBorder);} ul#siteLinks.wide li:last-child {border-right-width:0px;} ul#siteLinks.wide li a, ul#siteLinks.wide li a:visited {display:block; box-sizing: border-box; height:25px; margin-top:0px; font-family: bodyFont, Verdana, sans-serif; font-size:12px; font-weight:lighter; text-decoration:none; color: var(--siteNav-MainCatWideTxt);} ul#siteLinks.wide li a:hover{text-decoration:none;color: var(--siteNav-MainCatWideTxtHover);} ul#siteLinks.wide li span {display:inline-block; height:25px; margin-right:-8px; padding:0px 20px 0px 7px; font-family: bodyFont, Verdana, sans-serif; background:var(--siteNav-Sprite) no-repeat right -382px;} ul#siteLinks.wide li span:hover {background-position:right -402px; color: var(--siteNav-MainCatWideTxtHover);} ul#siteLinks.wide li span.selected, ul#siteLinks.wide li span.selected:hover {background-position:right -422px; color: var(--siteNav-MainCatWideTxtHover);} ul#siteLinks.wide li nav {display:none; position:absolute; top:var(--siteNav-Height); left:0px; box-sizing:border-box; width: 100%; margin:0px; padding:40px 6% 40px 6%; max-height:60vh; overflow-y:scroll; background: var(--siteNav-DropdownWideBg); border-top:1px solid var(--siteNav-DropdownWideBorder); border-bottom:1px solid var(--siteNav-DropdownWideBorder); box-shadow: 0px 50px 70px 00px var(--siteNav-DropdownWideShadow);} ul#siteLinks.wide li nav dl {float:left; box-sizing:border-box; width:20%; margin:0px; padding:0px;} ul#siteLinks.wide li nav dl dt {display:block; box-sizing:border-box; width:100%; height:auto; margin:0px 7px 0px 7px; padding:6px 10px 6px 10px; vertical-align:text-top; text-align:left; text-decoration:none; font-size:14px; color:var(--siteNav-DropdownWideListTitle); } ul#siteLinks.wide li nav dl dd {display:block; box-sizing:border-box; width:100%; height:auto; margin:0px; padding:0px; border:0px solid transparent; color:#555555;} ul#siteLinks.wide li nav dl dd a, ul#siteLinks.wide li nav dl dd a:visited {box-sizing:border-box; display:block; height:auto; margin:0px 7px 0px 7px; padding:6px 10px 6px 10px; border-top:1px dotted var(--siteNav-DropdownWideListBorder); vertical-align:text-top; text-align:left; text-decoration:none; color:var(--siteNav-DropdownWideListTxt);} ul#siteLinks.wide li nav dl dd a:hover {border-radius:5px; text-decoration:none; background:var(--siteNav-DropdownWideListBgHover); color:var(--siteNav-DropdownWideListTxtHover);} ul#siteLinks.narrow {display:none; position:absolute; top:var(--siteNav-Height); left:0px; box-sizing:border-box; width:100%; margin:0px; padding:0px; background: var(--siteNav-MainCatNarrowBg); box-shadow: 0px 50px 70px 00px var(--siteNav-DropdownNarrowShadow);} ul#siteLinks.narrow li {list-style-type:none; box-sizing:border-box; width:100%; min-height:15px; margin:0px; padding:0px; border-bottom:1px solid var(--siteNav-MainCatNarrowBorder); font-family: bodyFont, Verdana, sans-serif; font-size:13px; font-weight:lighter; text-decoration:none; color:var(--siteNav-MainCatNarrowTxt);} ul#siteLinks.narrow li a, ul#siteLinks.narrow li a:visited {display:block; box-sizing:border-box; width:100%; height:35px; margin:10px 0px 0px 0px; padding:0px 20px 10px 20px; font-size:15px; text-decoration:none; color:var(--siteNav-MainCatNarrowTxt);} ul#siteLinks.narrow li a:hover{color: var(--siteNav-MainCatNarrowTxtHover);} ul#siteLinks.narrow li span {display:block; box-sizing:border-box; width:100%; height:35px; margin:10px 0px 0px 0px; padding:0px 20px 10px 20px; background: var(--siteNav-Sprite) no-repeat right -447px; font-size:15px;} ul#siteLinks.narrow li span:hover {background-position:right -481px; color: var(--siteNav-MainCatNarrowTxtHover);} ul#siteLinks.narrow li span.selected, ul#siteLinks.narrow li span.selected:hover {background-position:right -515px; color: var(--siteNav-MainCatNarrowTxtHover);} ul#siteLinks.narrow li nav {display:none; box-sizing:border-box; width:auto; padding:5px 0px 10px 0px; border-top:1px solid var(--siteNav-MainCatNarrowBorder); background:var(--siteNav-DropdownNarrowBg);} ul#siteLinks.narrow li nav ul {box-sizing:border-box; width:100%; margin:0px; padding:0px;} ul#siteLinks.narrow li nav ul li {box-sizing:border-box; list-style-type:none;} ul#siteLinks.narrow li nav dl {box-sizing:border-box; margin:0px 0px 0px 40px; padding:0px;} ul#siteLinks.narrow li nav dl dt {display:block; box-sizing:border-box; width:90%; height:auto; margin:10px 7px 0px 7px; padding:6px 10px 6px 10px; vertical-align:text-top; text-align:left; text-decoration:none; font-size:14px; color:var(--siteNav-DropdownNarrowListTitle);} ul#siteLinks.narrow li nav dl dd {display:block; box-sizing:border-box; width:90%; height:auto; margin:0px; padding:0px; border:0px solid transparent;} ul#siteLinks.narrow li nav dl dd a, ul#siteLinks.narrow li nav dl dd a:visited {box-sizing:border-box; display:block; height:auto; margin:0px 7px 0px 7px; padding:6px 10px 6px 10px; border-top:1px dotted var(--siteNav-DropdownNarrowListBorder); vertical-align:text-top; text-align:left; text-decoration:none; color:var(--siteNav-DropdownNarrowListTxt);} ul#siteLinks.narrow li nav dl dd a:hover {border-radius:5px; text-decoration:none; background:var(--siteNav-DropdownNarrowListBgHover); color:var(--siteNav-DropdownNarrowListTxtHover);} ul#siteControls {float:right; box-sizing:border-box; width:175px; height:50px; margin-left:auto; padding:0px;} ul#siteControls li {list-style-type:none; float:right; box-sizing:border-box; width:35px; height:50px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; text-align:center;} ul#siteControls #siteBasket, ul#siteControls #siteBasket:visited{float:right; display:block; box-sizing:border-box; width:30px; height:35px; margin:7px 0px 3px 0px; border-radius:2px; background: var(--siteNav-Sprite) no-repeat 0px -35px; text-align:right;} ul#siteControls #siteBasket:hover{text-decoration:none; background-position:0px -70px;} ul#siteControls #siteBasket span{ box-sizing: border-box; position:relative; top:-7px; width:10px; min-width:10px; border-radius:10px; margin-top:0px; padding:1px 3px 1px 3px; background:var(--siteNav-BasketCountBg); font-size:15px; color:var(--siteNav-BasketCountTxt);} ul#siteControls #siteMeta, ul#siteControls #siteMeta:visited {float:right; display:block; box-sizing:border-box; width:30px; height:35px; margin:7px 0px 3px 0px; border-radius:2px; background: var(--siteNav-Sprite) no-repeat 0px -105px;} ul#siteControls #siteMeta:hover{text-decoration:none; background-position:0px -140px;} ul#siteControls #siteLogout, ul#siteControls #siteLogout:visited {float:right; display:block; box-sizing:border-box; width:30px; height:35px; margin:7px 0px 3px 0px; border-radius:2px; background: var(--siteNav-Sprite) no-repeat 0px -175px;} ul#siteControls #siteLogout:hover{text-decoration:none; background-position:0px -210px;} ul#siteControls #siteAdmin, ul#siteControls #siteAdmin:visited {float:right; display:block; box-sizing:border-box; width:30px; height:35px; margin:7px 0px 3px 0px; border-radius:2px; background: var(--siteNav-Sprite) no-repeat -0px -245px;} ul#siteControls #siteAdmin:hover{text-decoration:none; background-position:0px -280px;} ul#siteControls #siteMenue {float:right; display:none; box-sizing:border-box; width:35px; height:35px; margin:7px 0px 3px 0px; border-radius:2px; background: var(--siteNav-Sprite) no-repeat -0px -314px;} ul#siteControls #siteMenue:hover, ul#siteControls #siteMenue.selected {background-position:0px -349px;} form#siteSearch {box-sizing:border-box; height:50px; padding:0px;} form#siteSearch input{cursor:pointer; display:block; float:right; box-sizing:border-box; border:0px; width:30px; height:35px; margin:8px 0px 0px 0px; padding:5px 15px 5px 15px; font-size:15pt; text-align:left; color:transparent; background:var(--siteNav-Sprite) no-repeat top left; opacity:1; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out;} form#siteSearch input::-webkit-input-placeholder { font-size:12pt; color:transparent;} form#siteSearch input:-moz-placeholder { font-size:12pt; color:transparent;} form#siteSearch input::-moz-placeholder { font-size:12pt; color:transparent;} form#siteSearch input:-ms-input-placeholder { font-size:12pt; color:transparent;} form#siteSearch input:focus {cursor:auto; box-sizing:border-box; width:100%; background:var(--siteNav-SearchFocusBg); background-position:-2000px 0px; border:0px solid transparent; border-radius:5px; outline:4px solid var(--siteNav-SearchFocusOutline); color:var(--siteNav-SearchFocusTxt);} form#siteSearch input:focus::-webkit-input-placeholder { font-size:12pt; color:var(--siteNav-SearchFocusTxt);} form#siteSearch input:focus:-moz-placeholder { font-size:12pt; color:var(--siteNav-SearchFocusTxt);} form#siteSearch input:focus::-moz-placeholder { font-size:12pt; color:var(--siteNav-SearchFocusTxt);} form#siteSearch input:focus:-ms-input-placeholder { font-size:12pt; color:var(--siteNav-SearchFocusTxt);} /* SITE FOOT /******************************************/ nav#siteFoot {clear:both; box-sizing:border-box; width:100%; padding-bottom:50px; border-top:var(--siteFoot-BorderColor); background:var(--siteFoot-BgColor); background-image:var(--siteFoot-BgImage);} nav#siteFoot nav {box-sizing:border-box; width:var(--body-WideWidth); max-width:1920px; margin:0px auto 50px auto;} @media only screen and (max-width:600px) { #siteFoot nav {width:var(--body-NarrowWidth);} } nav#siteFoot div#crumbFoot {box-sizing:border-box; width:100%; padding:10px 0px 10px 0px; border-bottom:1px dotted var(--siteFoot-CrumbBorder); color: var(--siteFoot-CrumbLink);} nav#siteFoot div#crumbFoot a, nav#siteFoot div#crumbFoot a:visited {display:inline-block; padding:0px 5px 0px 5px; text-decoration:none; color: var(--siteFoot-CrumbLink);} nav#siteFoot div#crumbFoot a:hover {text-decoration:none; text-decoration:none; color: var(--siteFoot-CrumbLinkHover);} nav#siteFoot div#crumbFoot a:first-child {display:inline-block; padding:0px 5px 0px 0px; text-decoration:none; color: var(--siteFoot-CrumbLink);} nav#siteFoot dl {float:left; box-sizing:border-box; margin:15px 30px 15px 0px; padding:0px 0px 15px 0px;} nav#siteFoot dl dd {box-sizing:border-box; width:100%; margin:0px; padding:0px;} nav#siteFoot dl dd a, nav#siteFoot dl dd a:visited {display:block; text-decoration:none; color:var(--siteFoot-LinkTxt);} nav#siteFoot dl dd a:hover {text-decoration:none; color:var(--siteFoot-LinksTxtHover);} nav#siteFoot div#legalFoot {box-sizing:border-box; width:100%; margin-top:50px; margin-bottom:0px; padding:20px 10px 20px 10px; border-radius:6px; background:var(--siteFoot-LegalFootBg); color:var(--siteFoot-LegalFootTxt); text-align:center;} nav#siteFoot div#legalFoot a, nav#siteFoot div#legalFoot a:visited {text-decoration:none; color:var(--siteFoot-LegalFootLinkTxt);} nav#siteFoot div#legalFoot a:hover {text-decoration:none; color:var(--siteFoot-LegalFootLinksTxtHover);}