/* Setup */
html,body,ul,li,td {margin: 0;padding: 0;font-family: Verdana;color: #333;}
body {background: #EEEEEE;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
a {text-decoration: none;color: #64b824;}
a:visited {color: #64b824;}
table {border-spacing: 0;}
/* Header */
header {height: 5em;position: relative;width: 1000px;margin: 0 auto;background: #fff;}
header>#logo {margin: 0.5em;width: 17em;text-align: center;float: left;display: block;cursor: pointer;}
header>#logo>span.pendraken{font-family: 'Cantata One', serif, verdana;color: #64b824;font-size: 2em;text-shadow: 1px 1px #000;}
header>#logo>span.miniatures {font-family: "Droid Sans",verdana;font-weight: 100;font-size: 0.9em;letter-spacing: .75em;margin-right: -0.85em;}
header div#myaccount {float: right;width: 15em;margin-right: 1em;text-align: center;margin-top: 2em;font-size: 80%;font-family: "Droid Sans";}
header div#myaccount span {font-size: 140%;}
header div#myaccount span>b {font-family: Arial Black;}
header .logout {cursor: pointer;}
header .logout:hover {font-weight: bold;color: #64b824;}
header div#basket {float: right;width: 15em;margin-right: 1em;text-align: center;margin-top: 2em;font-size: 80%;font-family: "Droid Sans";}
header div#basket span {font-size: 140%;}
header div#basket span>b {font-family: Arial Black;}
header div a,header div a:visited {color: #000;}
header div a:hover {color: #64b824;font-weight: bold;}
/* topNav */
nav#topNav {background: #64b824;height: 2em;width: 1000px;margin: 0 auto;}
nav#topNav ul {list-style:none;}
nav#topNav>ul {margin-left: 10px;}
nav#topNav>ul>li {float: left;width: 14%;text-align: center;color: #ffffff;line-height: 2.5em;font-size: 80%;position: relative;}
nav#topNav>ul>li>a,nav#topNav>ul>li>a:visited {cursor: pointer;width: 100%;height: 100%;display: block;color: #FFF;text-decoration: none;font-size: 1.2em;}
nav#topNav>ul>li:hover {background: #e2e2e2;background: -moz-linear-gradient(top, #e2e2e2 0%, #ffffff 50%, #cccccc 100%);background: -webkit-linear-gradient(top, #e2e2e2 0%,#ffffff 50%,#cccccc 100%);background: linear-gradient(to bottom, #e2e2e2 0%,#ffffff 50%,#cccccc 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#cccccc',GradientType=0 );}
nav#topNav>ul>li:hover>a,nav#topNav>ul>li:hover>a:visited {color: #64b824;}
nav#topNav ul ul {display: none;position: absolute;top:2.4em;z-index:100;background:#64b824;color: #fff;line-height:2em;margin: 0 -3em;}
nav#topNav ul li:first-of-type ul {right:auto;left:0;}
nav#topNav ul li:last-of-type ul {right:0;left:auto;}
nav#topNav>ul>li:hover>ul {display: block;}
nav#topNav ul ul li a {color: #fff;font-size: 90%;padding: 0 1em;}
nav#topNav ul ul li:hover {background: #fff;}
nav#topNav ul ul li:hover>a {color: #64b824;}
/* container */
div#container {max-width: 1000px;margin: 0 auto;background: #fff;padding-bottom: 2em;}
/* aside SEARCH */
aside#search {display: block;background: #CCC;padding: 5px;margin-bottom: 0.5em;height: 1.5em;overflow: hidden;}
aside#search>#catlist {width: 200px;float: left;border-right: 1px solid #000;margin-right: 0.5em;cursor: pointer;}
aside#search>#catlist>img {vertical-align: sub;}
aside#search>input[type="text"] {border: 1px solid #999;width: calc(100% - 25em);border-radius: 0.5em 0 0 0.5em;border-right: 1px solid #999;font-size: 70%;line-height: 100%;padding: 0 1em 0 2em;background: url('../_img/search.png') no-repeat #fff left center;box-sizing: border-box;height: 100%;}
aside#search>input[type="button"] {border-radius: 0 0.5em 0.5em 0;border: 1px solid #999;border-left: 0;font-size: 70%;height: 100%;padding: 0 1em;background: #64b824;color: #fff;cursor: pointer;margin: 0 0 5px 0;}
/* sideNav */
nav#sideNav {float: left;width: 190px;font-size: 80%;margin: 0px 0px 10px 10px;}
nav#sideNav>ul {list-style: none;}
nav#sideNav>ul>li {line-height: 1.8em;padding-left: 10px;border-bottom: 1px dashed #64b824;}
nav#sideNav>ul>li:last-of-type {border:0;}
nav#sideNav>ul>li>a,nav#sideNav>ul>li>a:visited {text-decoration: none;color: #333333;}
nav#sideNav>ul>li>a:hover {color: #cc0000;}
nav#sideNav ul ul {display: none;} /* Change to enable sub-menus */
/* article */
article {margin: 0px 10px 0px 210px;}
article #content {padding-top: 1em;}
article h1 {color: #333;text-align: center;background: #EEE;margin: 0em 0 0.3em 0;padding: 0.1em 0;}
article>nav#breadcrumbs {border: 1px solid #AAA;margin-top: 10px;padding: 7px 0px 8px 0px;font-size: 0.75em;background: #DDD;background: linear-gradient(#FFF,#D3D3D3);}
article>nav#breadcrumbs ul {list-style: none;}
article>nav#breadcrumbs li {display: inline;padding: 20px 30px 20px 10px;background: url('../_img/br-right.png') no-repeat right;}
article>nav#breadcrumbs li:last-of-type {background: none;}
article>nav#breadcrumbs li a {text-decoration: none;color: #333;}
article>nav#breadcrumbs li a:hover {font-weight: bold;}
#loginArea,#registerArea {text-align: center;}
#loginArea input,#registerArea input {border-radius: 1em;border: 1px solid #999;padding: 0.5em 1em;margin-bottom: 1em;}
.subcats {padding-top: 1em;display: flex;display: -webkit-flex;flex-wrap: wrap;-webkit-flex-wrap: wrap;justify-content: space-around;-webkit-justify-content: space-around;}
.subcats>div {text-align: center;flex-basis: 30%;max-width: 200px;border: 2px solid #64b824;margin-bottom: 1em;min-height: 5em;display: flex;display: -webkit-flex;padding: 0.5em;}
.subcats>div>a,.subcats>div>a:visited {display: block;margin: auto;color: #fff;border: 1px solid #5a0401;padding: 0.5em;background: #64b824;max-width: 70%;}
.subcats>div>a:hover {background: rgba(0,0,0,0.8);}
.catproducts {padding-top: 1em;width: calc(100% - 10px);display: flex;display: -webkit-flex;justify-content: space-around;-webkit-justify-content: space-around;flex-direction: column;-webkit-flex-direction: column;position: relative;margin-left: 10px;}
.catproducts .proCode {background: #64b824;padding: 0.3em 1em;color: #fff;position: absolute;top: -20px;left: -10px;border-radius: 0.5em 0 0 0;display: block;}
.catproducts>div {border: 1px solid #999;margin-bottom: 2em;min-height: 5em;background: #fff;position: relative;box-sizing: border-box;padding: 0 0.25em;display: flex;display: -webkit-flex;justify-content: space-between;-webkit-justify-content: space-between;border-radius: 0.5em;}
.catproducts a {color: #333;}
.catproducts .productImages {width: 200px;padding: 0 5px;}
.catproducts .otherImages {display: flex;display: -webkit-flex;flex-wrap: wrap;-webkit-flex-wrap: wrap;justify-content: space-around;-webkit-justify-content: space-around;flex-direction: row;-webkit-flex-direction: row;background: #CCC;padding: 10px 0 0 0;border-radius: 5px;margin-bottom: 10px;}
.catproducts .otherImage {width: 50px;height: 50px;border: 1px solid #000;border-radius: 5px;overflow: hidden;background-size: contain;background-repeat: no-repeat;background-position: center;background-color: #fff;margin-bottom: 10px;}
.catproducts .otherImage.active {border: 1px solid #F00;}
.catproducts .mainImage {width: 200px;height: 200px;background-size: contain;background-repeat: no-repeat;background-position: center;transition: background 0.5s linear;}
.catproducts .productInfo {width: 100%;padding: 10px;border-left: 1px solid #999;margin-left: 5px;display: flex;display: -webkit-flex;flex-direction: column;-webkit-flex-direction: column;justify-content: space-between;-webkit-justify-content: space-between;}
.catproducts .proTitle {display: block;font-size: 1.2em;}
.catproducts .proDesc {font-size: 0.8em;text-align: justify;margin: 1em;height: calc(100% - 10em);}
.catproducts .pricePanel {display: flex;display: -webkit-flex;justify-content: space-between;-webkit-justify-content: space-between;margin-bottom: 1em;}
.catproducts .pricePanel .price {background: #64b824;padding: 0.5em 1em 0.3em 1em;border-radius: 0.5em;text-align: center;font-size: 1.2em;line-height: 1.4em;color: #fff;}
.catproducts .pricePanel .price span {font-size: 0.4em;}
.catproducts .pricePanel .atbbox {margin-left: 1em;}
.catproducts .atbbox {background: #64b824;color: #fff;display: flex;display: -webkit-flex;padding: 1px;box-sizing: border-box;height: 42px;line-height: 40px;width: 13em;border-radius: 0.5em;}
.catproducts .atbbox div {display: flex;display: -webkit-flex;}
.catproducts .atbbox .arrows {flex-direction: column;-webkit-flex-direction: column;}
.catproducts .atbbox .arrows img {width: 20px;height: 20px;}
.catproducts .atbbox input {width: 0.75em;margin: 7px 0.5em 7px 0em;padding:0 0.1em;border: 0;font-size: 1.5em;text-align: center;border-radius: 25px;}
.catproducts .atbbox .atb,.catproducts .atbbox .atb2 {cursor: pointer}
#basketTable {width: 100%;margin: 0;padding: 0;border: 0;border-spacing: 0;}
#basketTable tr td {height:2em;background: #fff;padding: 0.5em;}
#basketTable td.blank {background: transparent;}
#basketTable thead td {background: #64b824;color: #fff;}
#basketTable td.right {text-align: right;}
#basketTable td.center {text-align: center;line-height: 1px;}
#basketTable input {border: 0;width: 4em;text-align: right;font-size: 1em;}
#basketTable input.qty {width: 3em;text-align: center;border: 1px solid #000;border-radius: 1em;padding: 0.25em 0;}
#basketTable .updateQty {font-size: 60%;cursor: pointer;}
#basketTable .updateQty:hover {color: #64b824;}
#basketTable select {border-width: 2px;border-radius: 0.5em;}
#orderInfo {margin: 10px;background: #fff;border: 1px solid #777;padding: 1em;box-sizing: border-box;}
#orderInfo b {display: block;text-align: center;}
#basketTables {display: flex;display: -webkit-flex;justify-content: space-between;-webkit-justify-content: space-between;}
#basketTables table {width: 58%;background: #fff;}
#basketPostageTable thead:first-of-type {text-align: center;}
#basketPostageTable thead td {background: #64b824;color: #fff;}
#basketPostageTable td {padding: 0.5em;font-size: 0.8em;width: 4em;}
#basketPostageTable tr td:first-of-type {width: auto;}
#basketPostageTable h2 {font-size: 1.25em;margin: 0;padding: 0;font-weight: normal;}
#basketOther {width: 40%;background: #fff;text-align: center;}
#basketOther h2 {width: 100%;background: #64b824;color: #fff;margin: 0;padding: 0.5em 0;text-align: center;font-size: 100%;font-weight: normal;}
#basketOther input,#basketOther textarea {border-radius: 1em;border: 1px solid #888;padding: 0.25em;text-align: center;width: 80%;margin-bottom: 0.5em;}
#basketOther input.required,#basketOther textarea.required {border-width: 2px;border-color: #444;}
#basketOther .payMethod {width: 49%;text-align: center;display: inline-block;}
#basketOther .payMethod.first {border-right: 1px solid #333;}
#basketOther input[type="radio"] {width: auto;margin: 0;}
#basketOther textarea {min-height: 5em;}
#checkoutButton {float: left;}
#checkoutOtherButton {float: right;}
#checkoutButton,#checkoutOtherButton {cursor: pointer;background: #BBB;text-align: center;width: 40%;min-height: 2.5em;padding: 0.5em;border-radius: 0.25em;font-weight: bold;cursor: not-allowed;}
#checkoutButton.active,#checkoutOtherButton.active {background: #64b824;color: #fff;cursor: pointer;}
#specials {width: 250px;background: #fff;border: 1px solid #000;}
#specials img {width: 250px;height: 75px;display: block;}
.homeFlex {display: flex;display: -webkit-flex;justify-content: space-between;-webkit-justify-content: space-between;font-size: 0.8em;}
.homeFlex .homeCol1 {width: 540px;}
.homeFlex .homeCol2 {width: calc(100% - 550px);}
#slideshow {background: #ccc;border: 1px solid #000;position:relative;height: 240px;width: 538px;margin: 0 auto 1em auto;background-size: cover;background-repeat: no-repeat;}
#slideshow img.slide {display: none;}
.slideshowInfo {position: absolute;bottom: 0;left: 0;right: 0;height: 50px;background: rgba(0,0,0,0.7);padding: 0.5em;box-sizing: border-box;color: #fff;font-size: 0.8em;display: none;}
.slideshowInfo a,.slideshowInfo a:visited {color: #fff;}
.slideshowInfo span {font-size: 1.4em;}
#slideshowBlips {position: absolute;bottom: 50px;left: 0;right: 0;height: 1.75em;text-align: center;}
#slideshowBlips:hover {background: #999;}
#slideshowBlips div {margin-right: 40px;display: inline;cursor: pointer;color: #fff;font-size: 200%;}
#slideshowBlips div:last-of-type {margin: 0;}
#slideshowLeft {position: absolute;top: 60px;left: 0px;padding: 5px;width: 20px;height: 100px;cursor: pointer;}
#slideshowRight {position: absolute;top: 60px;right:0;padding: 5px;width: 20px;height: 100px;cursor: pointer;}
#slideshowLeft:hover, #slideshowRight:hover {background: #999;}
#blurb {line-height: 1.7em;overflow: hidden;background: #fff;margin-bottom: 1em;border: 1px solid #64b824;}
#blurb>b {color: #fff;display: block;text-align: center;background: #64b824;}
#blurb>div {padding: 1em;}
#news {overflow: hidden;background: #fff;margin-bottom: 1em;border: 1px solid #64b824;}
#news>b {color: #fff;display: block;text-align: center;background: #64b824;line-height: 1.7em;}
#news>b>a,#news>b>a:visited {color: #fff;}
#news>div {padding: 1em;}
#news>div>b {color: #64b824;font-size: 1.2em;}
#news i {font-size: 0.8em;}
#newproducts {margin-bottom: 1em;}
#newproducts>div:first-of-type b {float: left;margin: 0 1em 0 0;background: #64b824;color: #fff;padding: 0.25em;cursor: pointer;}
#newproducts .contentBlock {display: none;border: 1px solid #64b824;padding: 0 0.5em 1.5em 0.5em;background: #fff;}
#newproducts .contentBlock.active {display: flex;display: -webkit-flex;}
.homeproducts {padding-top: 1em;flex-wrap: wrap;-webkit-flex-wrap: wrap;justify-content: space-around;-webkit-justify-content: space-around;}
.homeproducts>div {text-align: center;flex-basis: 30%;max-width: 200px;border: 1px solid #64b824;margin-top: 2em;min-height: 5em;background: #fff;position: relative;box-sizing: border-box;padding: 0 0em;}
.homeproducts a,.homeproducts a:visited {color: #333;}
.homeproducts .proCode {background: #64b824;padding: 0.3em 1em;color: #fff;margin: -1em -0.4em 0 0;float: right;border-radius: 0 0.5em 0 0;display: block;}
.homeproducts .proCode:visited {color: #fff;}
.homeproducts .proTitle {display: block;}
.homeproducts .proPrice {margin-bottom: 45px;}
.homeproducts>div>img {width: 150px;}
.homeproducts .atbbox {background: #64b824;color: #fff;padding: 1px;box-sizing: border-box;height: 42px;position: absolute;bottom:0;width: 100%;}
.homeproducts .atbbox .arrows {float: left;}
.homeproducts .atbbox div img {width: 20px;height: 20px;display: block;}
.homeproducts .atbbox input {float: left;width: 0.75em;margin: 7px 0;padding:0;border: 0;font-size: 1.5em;text-align: center;border-radius: 25px;}
.homeproducts .atb {padding: 4px 0;height: 100%;line-height: 2em;}
#shows {overflow: hidden;background: #fff;margin-bottom: 1em;border: 1px solid #64b824;}
#shows>b {color: #fff;display: block;text-align: center;background: #64b824;line-height: 1.7em;}
#shows ul {list-style: none;padding: 1em;}
#shows li {margin-bottom: 1em;}
#contactName,#contactSubject, #contactEmail, #contactMessage {padding: 0.5em;border-radius: 0.5em;border: 1px solid #999;margin-bottom: 1em;width: 100%;max-width: 100%;}
#contactSend {margin: 0 auto;background: #64b824;color: #fff;padding: 0.5em;border-radius: 0.5em;border: 1px solid #999;}
/* Right side */
aside#rhs {float: right;width: 190px;margin: 0px 10px 10px 0px;background: #6699ff;border-radius: 1em;text-align: center;padding-top: 10px;font-size: 0.8em;}
aside#rhs>b {color: #B62C37;}
aside#rhs>hr {width: 95%;height: 1px;background: linear-gradient(to right,#6699ff,#fff,#6699ff);border: 0;}
aside#rhs ul {list-style: none;}
aside#rhs li {margin-bottom: 10px;}
aside#rhs li a {font-weight: bold;}
/* footer */
footer {clear: both;width: 100%;background: #222;background: linear-gradient(rgba(255,255,255,0) 0%,#222 5%);margin-top: -2em;}
#footercontainer {width: 1000px;margin: 0 auto;}
/* bottomNav */
nav#bottomNav {}
nav#bottomNav>ul {list-style: none;margin-left: 20px;}
nav#bottomNav>ul>li {text-align: center;color: #ffffff;line-height: 1.5em;}
nav#bottomNav>ul>li>a,nav#bottomNav>ul>li>a:visited {text-decoration: none;color: #333333;}
nav#bottomNav>ul>li>a:hover {color: #cc0000;}
nav#bottomNav ul ul {display: none;}
#footerBlock {font-size: 80%;padding-top: 2.5em;display: flex;display: -webkit-flex;justify-content: space-between;-webkit-justify-content: space-between;margin-bottom: 2em;}
#footerBlock .block {border-radius: 0.75em;flex-basis: 30%;display: flex;display: -webkit-flex;flex-direction:column;}
#footerBlock .block>div {background: #555;border-radius: 0.75em 0.75em 0 0;padding: 0.75em 1em;text-align: center;color: #fff;font-size: 125%;flex: 0;box-sizing:border-box;}
#footerBlock .block>span {background: #eee;padding: 1em;display: block;line-height: 1.5em;border-radius: 0 0 0.75em 0.75em;flex: 1;box-sizing:border-box;}
footer #newsletter {background: #eee;border-radius: 1em;padding: 1em;margin-bottom: 1em;line-height: 1.75em;display: none;}
footer #newsletter>img {margin: -31px 17px -12px -22px;}
footer #newsletter>input {float: right;border: 1px solid #999;}
footer #newsletter input#newsletterEmail {border-radius: 0.5em 0 0 0.5em;padding: 0.5em;}
footer #newsletter input#newsletterGo {border-radius: 0 0.5em 0.5em 0;border-left: 0;background: #64b824;color: #fff;padding: 0.5em;cursor: pointer;}
/* footer bar */
#footerBar {clear: both;background: #444444;color: #ffffff;text-align: center;font-size: 70%;line-height: 2em;}
#footerBar>a,#footerBar>a:visited {color: #FFF;text-decoration: underline;}
/* Other */
.clear {clear: both;}
.center {text-align: center;}
.glow {text-shadow: 2px 2px 3px #FFF,-2px -2px 3px #FFF,-2px 2px 3px #FFF,2px -2px 3px #FFF;}
.incomplete {color: #BBB;}
.hover {cursor: pointer;}
.hover:hover {text-decoration: underline;}
#stormLightOverlay {position: fixed;top: 0;bottom: 0;left: 0;right: 0;z-index: 99;background-color: black;filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);opacity: 0.8;display: none;}
#stormLight {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 100;}
#stormLight img.main {border: 4px solid #fff;border-radius: 0.5em;}
#myaccount label {width: 7em;display: inline-block;vertical-align: top;}
#myaccount input, #myaccount textarea {width: calc(100% - 10em);border: 1px solid #999;border-radius: 0.5em;margin-bottom: 1em;padding: 0.5em;}
#myaccount input[type="button"] {width: auto;}
#myorders td {padding: 0.5em;font-size: 70%;}
#myorders thead td {color: #fff;background: #64b824;}
#myorders tbody tr:nth-child(even) td {border-bottom: 2px solid #999;text-align: left;}
#myorders tbody tr:nth-child(odd) td {border-bottom: 1px dashed #999;text-align: left;}
.orderMessages {margin-top: 1em;border-top: 1px dashed #999;}
#myorders hr {border : 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));}
#collectionShow {display: none;}
.orderMessages {display: none;}
.newOrderMessage {width: 100%;}
.form>li {display: flex;flex-wrap:wrap;align-items: flex-start;margin-bottom: 0.5em;}
.form>li.block {display: block;}
.form>li>label {min-width:20%;text-transform: uppercase;}
.form>li>*:not(label) {width: 80%;border-radius: 1em;padding: 0.25em 0.5em;border: 1px solid #ddd;}
.form>li>.mce-tinymce {width: 78%;}
.form>li.full>* {width: 100%;}
.form>li.buttons {justify-content: center;}
.form>li.buttons>* {width: auto;margin: 0 0.5em;border-color: #aaa;background: #89E894;padding: 0.5em 1em;cursor: pointer;}
.form>li.images {justify-content: center;}
.form>li.images>div {width: 150px;text-align: center;position: relative;overflow: hidden;margin-right: 10px;}
.form>li.images>div.primary {border: 2px solid #ff0000;}
.form>li.images>div>img {width: 100%;}
.form>li.images>div>div.delete {background: #ff0000;position: absolute;top:0;right: 0;padding: 0.5em;font-weight: bold;color: #fff;border-radius: 0 0 0 0.5em;cursor: pointer;}
.form>li.images>div>div.delete:hover {background: #00ff00;}
.form>li.buttons>*.delete,.form>li.buttons>*.cancel {background: #C23B22;}
.form>li.multi>*:not(label) {width: auto;}
.form>li.collapse>img {position: absolute;bottom: 0;right: 0;width: 2em;height: 2em;border-radius: 0.5em;cursor: pointer;}
.form>li:not(.collapse)>label {font-family: Courier New;}
.form>li.block>* {width: 100%;}
.moreText {display: none;}
.moreTextToggle {color: #64b824;cursor: pointer;}