/**
 * @brief UPOSDemo1Design Theme, main styles.
 * @details Plugin / Theme Styles
 * @author JB Lebrun
 * @version 1.0.19
 * @date Creation: Feb 2018
 * @date Modification: Sep 2024
 * @copyright 2018 - 2024 Ideogram Design
 */

/* global */
* {padding:0; margin:0; box-sizing: border-box;}
body {background:white;}
p {padding: 8px 0;}
a {text-decoration:none; color:#454550; transition: color 0.3s;}
a:hover {color:#f88b46;}
ul {margin:0px 28px; padding:0; list-style:url(../img/bullet.png);}
ul ul {margin:0px 18px; padding:0; list-style:url(../img/bullet2.png);}
ul ul ul {margin:0px 18px; padding:0; list-style:url(../img/bullet.png);}
ol {margin:0px 28px; padding:0;}
li {margin:4px 4px 8px;}
b, strong {font-weight:bold;}
i, em {font-style:italic;}
blockquote {margin:8px 20px;}
input, textarea, select {border:none; padding:4px; background:white; color:#5A5A5A; font-weight:bold; font-size:12px; border:solid 1px #999999; /* border-radius:4px; */}
input, textarea, option {padding:4px; font-weight:bold; color:#5A5A5A; font-size:12px;}
textarea {resize: none;}
input[type=radio] {margin-right:8px;}
.inputs {width:200px;}
.linputs {width:400px;}
.sinputs {width:150px;}
.vsinputs {width:40px;}
.vlinputs {width:100%;}
form {margin:0; font-size:0;}
.img {font-size:0}
sup, sub {font-size:9px; color:inherit;}
img {border:0; max-width:100%; height:auto;}
.RSS {float:right; position:relative; top:4px;}

/* icon image for layered menu */
img.icon {float:left; margin-right:4px;}

/* error */
.error {font-size:12px; font-weight:bold; color:#CC3333; padding:4px;}

/* tool */
.clear {clear:both; height:0; font-size:0;}
.unselectable {-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; cursor:default;}

/* loading */
@keyframes rotate360 {
  to {transform: rotate(360deg);}
}
#Loading {margin:40px auto; height:154px; width:154px;  background:url(../img/custom/loading.gif) no-repeat; /* animation: 2s rotate360 infinite linear; */}

/* editor */
* {font-family: 'Exo', sans-serif; font-size: 14px; font-weight:normal; font-style:normal; color:#454550;}

/* generic titles */
.eTitle1 {font-size:28px; text-transform:uppercase; color:#707070; margin:0 0 8px;}
.eTitle2 {font-size:24px; text-transform:uppercase; color:#669715; margin:8px 0 0;}
.eTitle3 {font-size:18px; font-style:italic; font-weight:bold; color:#f88b46;}
.eTitle4 {font-size:18px; color:#669715; font-weight:bold;}

/* generic contents */
.eContent1 {}
.eContent2 {color:#707070; font-weight: bold;}
.eContent3 {font-size: 20px;}

p.eContent1, p.eContent2, p.eContent3 {text-align:justify}

a.eLink1 {border-bottom:dotted 1px #ff9600; transition: color 0.3s, border 0.3s;}
a.eLink2 {border-bottom:dotted 1px #ff9600; font-weight:bold; transition: color 0.3s, border 0.3s;}
a.eLink1:hover, a.eLink2:hover {color:#00378B; border-bottom:dotted 1px #00378B;}

table.eTable {margin:4px 96px; border:solid 1px #797f9d;}
th.eTableHeader, td.eTableHeader {background:#797f9d; padding:4px; font-weight:bold; color: white;}
td.eTableLine0 {background:white; padding:4px; font-weight:bold;}
td.eTableLine1 {background:#EFEAF4; padding:4px; font-weight:bold;}

td.eTableLineAuto {background:white; padding:4px; font-weight:bold;}
tr:nth-child(odd) td.eTableLineAuto {background:#EFEAF4; padding:4px; font-weight:bold;}

/* parts */
.UPOSDemo1Button {display:inline-block; min-width: 150px; padding:8px 8px; color:white; background:#f88b46; border:solid 1px #f88b46; text-align:center !important; font-weight:bold; transition: all 0.3s; text-transform:uppercase;}
.UPOSDemo1Button:hover {border:solid 1px #707070; background:#707070; color:white;}
.UPOSDemo1Button2 {display:inline-block; min-width: 150px; padding:8px 8px; color:#f88b46; border:solid 1px #f88b46; text-align:center !important; font-weight:bold; transition: all 0.3s; text-transform:uppercase;}
.UPOSDemo1Button2:hover {border:solid 1px #707070; color:#707070;}

.UPOSDemo1Button + .UPOSDemo1Button, .UPOSDemo1Button2 + .UPOSDemo1Button, .UPOSDemo1Button + .UPOSDemo1Button2, .UPOSDemo1Button2 + .UPOSDemo1Button2 {margin-left:20px;}

/* media popup */
.mediaPopupBkgd {position:fixed; left:0; top:0; background:#333333; opacity:0.75; filter:alpha(opacity=75); width:100%; z-index:10000;}
.mediaPopup {z-index:10001; padding:10px; background:white; position:fixed; top:0; left:0; text-align:center; max-width:96%; box-sizing: content-box; border-radius:16px;}
.mediaPopup .closeButton {width:0; height:0; overflow:visible; float:right; position:relative; top:0px; left:-50px; cursor:pointer; font-size:0;}
.mediaPopup .closeButton img {width:33px !important; height:33px !important; max-width:33px;}
.mediaPopup .mediaTitle {margin:4px 0 0; padding:2px 8px; text-align:center; color:#444444; font-weight:bold; background:white;}
.mediaPopup .message {margin-top:32px; font-size:24px; color:#333333; text-align:center;}
.mediaPopup .buttons {text-align:center; height:50px;}
.mediaPopup .buttons .greenButton {display:inline-block; margin:8px; text-align:center; color:white; font-size:20px; padding:8px; background:#89ca8c; min-width:100px;}
.mediaPopup .buttons .redButton {display:inline-block; margin:8px; text-align:center; color:white; font-size:20px; padding:8px; background:#ec5f65; min-width:100px;}
.mediaPopup .buttons .greenButton:hover, .mediaPopup .buttons .redButton:hover {text-decoration:none; opacity:0.8;}

/* page controler in control bar */
.genericPageEmptyController {font-size:0px; height: 0px;}
.genericPageController {margin:0 0 16px; padding:0 4px; width:100%; clear:both;}
.genericPageController .gpcBox {margin:0 auto;}
.genericPageController .gpcButton {padding:0 8px; font-size:0; vertical-align:middle;}
.genericPageController .gpcSelected {line-height:17px; font-weight:bold; padding:5px 11px; font-size:16px; color:#707070; font-size:18px; text-decoration:none; display:inline-block;}
.genericPageController .gpcLink {line-height:17px; color:#f88b46; padding:5px 11px; text-decoration:none; font-size:16px; font-weight:600; display:inline-block; transition: color 0.3ss;}
.genericPageController .gpcLink:hover {text-decoration:none; color:#707070;}
.genericPageController .gpcSpacer {padding:0 2px; color:white; text-decoration:none;}
.genericPageController .gpcLPage {padding:0 2px; color:white; text-decoration:none;}
.genericPageController .gpcRPage {padding:0 2px; color:white; text-decoration:none;}
.genericPageController .gpcPage {padding:0 2px; color:white; text-decoration:none;}

/* page structure */
.mainContent {max-width:1160px; margin:0 auto; font-size:0;}
.mainContent.htmlContent {padding:20px 270px;}

.transparentLine {background:none; font-size:0;}
.color1Line {background:#669715; font-size:0;}
.color2Line {background:#e5d850; font-size:0;}
.color3Line {background:#f88b46; font-size:0;}

.color1Line .eTitle2 {color:white;}
.color1Line .content {color:white;}

/* header  */
#pageHeader {}
#pageHeader .demoButton {position:fixed; right:0px; width:53px; overflow:hidden; transition:all 0.3s linear;
                         animation-name: demoButton; animation-duration: 0.8s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: linear; opacity: 1;}
#pageHeader .demoButton img {width:213px; max-width:213px;}
#pageHeader .demoButton:hover {width:213px; animation:none;}
#pageHeader .demoButton.contacts {top:140px;}
#pageHeader .demoButton.informations {top:190px;}

@keyframes demoButton {
     to {
          opacity: 0.6;
   }
}

#pageHeader .demoMessage {text-align:center; color:white; background:#DC0000; padding:4px 0px; position:fixed; top:0; width:100%; border-bottom:solid 2px white; z-index:9999}
#pageHeader .demoMessage + .headBar {margin-top:30px;}

#pageHeader .headBar {height:100px; overflow:visible; background:#669715; font-size:0;}

#pageHeader .headBar .menu {float:right; width:250px; padding:12px 0 0 20px; border-left:solid 2px white;}
#pageHeader .headBar .menu a {display:block; width:100%; color:white; font-size:17px; padding:4px 0; line-height:19px; transition:all 0.3s linear;}
#pageHeader .headBar .menu a:hover {opacity:0.6;}

#pageHeader .headBar .myCaddy {display:none;}
#pageHeader .headBar .logo {display:inline-block; width:250px; height:180px; position:relative; z-index:9998; background:url(../img/custom/logo.png) 50% 50% no-repeat white; box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.35); vertical-align:top;}

#pageHeader .headBar .account {float:right; width:120px; padding:12px 0 0 20px;}

#pageHeader .headBar .sites {display:inline-block; width:500px; vertical-align:top; padding:20px 10px;}
#pageHeader .headBar .sites .site {display:inline-block; width:220px; height:60px; overflow:visible; padding:0 10px; vertical-align:top;}
#pageHeader .headBar .sites .site.single {width:auto;}
#pageHeader .headBar .sites .site:last-child {border:none;}
#pageHeader .headBar .sites .site .title {font-weight:bold; color:white; font-size:16px;}
#pageHeader .headBar .sites .site .phone a {color:white; font-size:16px;}
#pageHeader .headBar .sites .site .schedule {color:white; font-size:16px;}
#pageHeader .headBar .sites .site .address {color:white; font-size:16px;}
#pageHeader .headBar .sites .site .address .separator {color:white; font-size:16px;}
#pageHeader .subBar {height:80px; overflow:display; font-size:0px;}
#pageHeader .subBar .title {display: inline-block; padding: 40px 12px 0 20px; margin-left:250px; width:660px; vertical-align:top;}
#pageHeader .subBar .mobileSiteSelector {display:none;}

#pageHeader .subBar .caddy {display: inline-block; width:250px; vertical-align:top; padding:0; margin:0;}
#pageHeader .subBar .caddy .header {background:#707070; margin:10px 0 2px; text-transform:uppercase; font-size:18px; padding: 16px 0; text-align:center; color:white;}
#pageHeader .subBar .caddy .total {background:#707070; padding: 4px 16px; color:white; text-align:right; font-size:16px;}
#pageHeader .subBar .caddy .total .oldPrice {color:white; font-size:12px; text-decoration: line-through;}
#pageHeader .subBar .caddy .rebate {background:#707070; padding: 4px 16px; color:white; text-align:right; font-weight:300;}
#pageHeader .subBar .caddy .rebate:empty {display:none;}
#pageHeader .subBar .caddy .finaliseButton {display:block; background:#f88b46; color:white; padding:4px; text-transform:uppercase; text-align:center; font-size:16px; margin:2px 0; transition: background 0.3s;}
#pageHeader .subBar .caddy .finaliseButton:hover {background:#707070;}
#pageHeader .subBar .caddy .articles {}
#pageHeader .subBar .caddy .articles .article {font-size:0; border-bottom:solid 1px #dfdfdf; padding: 4px 0;}
#pageHeader .subBar .caddy .articles .articleTitle {vertical-align:top; display:inline-block; width:180px; padding:4px;}
#pageHeader .subBar .caddy .articles .articleQuantity {vertical-align:top; display:inline-block; width:20px; padding:4px; text-align:center; font-weight:bold;}
#pageHeader .subBar .caddy .articles .articleQuantityButton {vertical-align:top; display:inline-block; width:20px; padding:4px; text-align:center; color:#f88b46; cursor:pointer; font-weight:bold; font-size:20px; line-height:20px; transition: color 0.3s;}
#pageHeader .subBar .caddy .articles .articleQuantityButton:hover {color:#707070;}
#pageHeader .subBar .caddy .articles .articleQuantityNoButton {vertical-align:top; display:inline-block; width:20px; padding:4px; text-align:center; color:#f88b46; font-size:20px; line-height:20px;}
#pageHeader .subBar .caddy .articles .articleTitle .masterArticle {}

/* Caddy - menus */
#pageHeader .subBar .caddy .articles .articleTitle .articleChildren {font-size:0; width:200px;}
#pageHeader .subBar .caddy .articles .articleTitle .articleChildren .childrenTitle {display:inline-block; padding-left:20px; font-style:italic; color:#888888;}

/* Caddy - options */
#pageHeader .subBar .caddy .articles .articleTitle .articleOption {font-size:0; width:200px;}
#pageHeader .subBar .caddy .articles .articleTitle .articleOption .optionTitle {display:inline-block; padding-left:30px; font-style:italic; color:#999999; font-size:12px;}

/* Caddy - promotional code */
#pageHeader .subBar .caddy .promoCode {background:#707070; padding: 4px 16px 8px; font-size:0;  margin:2px 0 2px;}
#pageHeader .subBar .caddy .promoCode:empty {display:none;}
#pageHeader .subBar .caddy .promoCode .promoCodeTitle {width:100%; color:white; text-transform:uppercase; text-align:center;}
#pageHeader .subBar .caddy .promoCode .promoCodeName {font-size:24px; text-align:center; color:#f88b46;}
#pageHeader .subBar .caddy .promoCode .promoCodeDesc {text-align:center; color:white;}
#pageHeader .subBar .caddy .promoCode .promoCodeCondition {text-align:center; color:white; font-style:italic; font-size:11px;}

#pageHeader .subBar .caddy .promoCode .promoCodeError {width:100%; color:red; text-align:center; padding:4px 0;}
#pageHeader .subBar .caddy .promoCode .promoCodeInput {display:inline-block; width:60%;}
#pageHeader .subBar .caddy .promoCode .promoCodeInput input {max-width:100%; border:none;}
#pageHeader .subBar .caddy .promoCode .promoCodeButton {display:inline-block; width:40%; padding:2px 0 0;}
#pageHeader .subBar .caddy .promoCode .promoCodeButton .UPOSDemo1Button {min-width:100%; max-width:100%; padding:3px 4px; font-size:12px;}

#MobileMenu {display:none;}

/* footer */
#pageFooter {position:fixed; bottom:0; width:100%; background:#707070; font-size:0;}
#pageFooter * {color:white;}
#pageFooter .message {padding:5px 0;}
#pageFooter .message p {text-align:center;}
#pageFooter .menu {display:inline-block; width:60%; padding:20px 0; vertical-align:top;}
#pageFooter .designers {display:inline-block; width:40%; text-align:right; padding:10px 0;}
#pageFooter .designers a {margin-left:16px;}
#pageFooter .designers a:hover {opacity:0.8;}

/* content */
#pageContent {margin:0 0 80px;}

/* shop */
.shop {margin: 20px auto 0;}
.shop .status {padding:16px; margin:0 0 30px; border-radius:6px; text-align:center; font-size:16px;}
.shop .status.soft {background:#87807c; color:white;}
.shop .status.hard {background:#DC0000; color:white;}

/* shop - families menu */
.shop .families {display:inline-block; vertical-align:top; width:250px;}
.shop .families .menuHeader {display:none;}
.shop .families .family {display:block; padding:5px 20px; text-transform:uppercase; font-size:18px; font-weight:bold; color:#f88b46; text-align:right; transition: all 0.3s; margin-top:16px;}
.shop .families .family:hover {background:#ebebeb;}
.shop .families .family.selected {background:#ebebeb;}

/* shop - L2 menus */
.shop .families .subMenu {margin-right:20px;}
.shop .families .subMenu.off {display:none;}
.shop .families .subMenu.on {display:block;}
.shop .families .subMenu .category {display:block; padding:0; text-transform:uppercase; font-size:16px; color:#888888; text-align:right; font-weight:300; transition: all 0.3s;}
.shop .families .subMenu .category:hover {color:#ff9600;}
.shop .families .subMenu .category.selected {color:#ff9600; font-weight:400;}

/* shop - L3 menus */
.shop .families .subfamilies {margin:0 20px 0 0;}
.shop .families .subfamilies .subfamily {display:block; text-align:right; border-right:solid 4px #888888; color:#888888; padding-right:4px; font-weight:bold;}
.shop .families .subfamilies .subfamily + .subfamily {margin-top:2px;}
.shop .families .subfamilies .subfamily:hover {border-right:solid 4px #ff9600; color:#ff9600;}
.shop .families .subfamilies .subfamily.selected {border-right:solid 4px #ff9600; color:#ff9600;}

.shop .families .categories {margin:0 0 12px 0; border-right:solid 1px #ff9600;}
.shop .families .categories .category {display:block; text-align:right; font-size:13px; padding-right:7px;}
.shop .families .categories .category:hover {color:#ff9600;}
.shop .families .categories .category.selected {color:#ff9600;}

/* shop - articles list */
.shop .articles {display:inline-block; vertical-align:top; width:660px; padding: 0 10px; font-size:0;}
.shop .articles .toolbar {border-bottom:solid 1px #909090; border-top:solid 1px #909090; margin:0 8px 8px; padding: 8px 0;}

/* shop - articles thumb list */
.shop .articles.thumbs .article {display:inline-block; border:solid 1px white; padding:2px; margin:8px; vertical-align:top; transition: all 0.3s;}
.shop .articles.thumbs .article:hover {border:solid 1px #999999;}
.shop .articles.thumbs .article.col3 {width:30%;}
.shop .articles.thumbs .article .picture {text-align:center; padding:10px 0 0;}
.shop .articles.thumbs .article .picture img {width:160px;}
.shop .articles.thumbs .article .title {display:block; text-transform:uppercase; text-align:center; font-weight:bold; margin:4px 0;}
.shop .articles.thumbs .article .description {text-align:center; margin:4px 0; font-style:italic; color:#888;}
.shop .articles.thumbs .article .priceBar {background:#f88b46; cursor:pointer; transition: background 0.3s;}
.shop .articles.thumbs .article .priceBar:hover {background-color:#707070;}
.shop .articles.thumbs .article .priceBar .price {color:white; padding:4px 16px;}
.shop .articles.thumbs .article .priceBar .orderButton {float:right; display:block; background:url(../img/custom/addToCart.png) 50% 50% no-repeat; width:20px; height:20px; margin:4px;}

/* shop - articles text list */
.shop .articles.text .article {font-size:0; margin:4px 0; border-bottom: dotted 1px #888; padding:4px 0;}
.shop .articles.text .article.col1 {width:100%;}
.shop .articles.text .article.col2 {width:100%;}
.shop .articles.text .article.col3 {width:100%;}
.shop .articles.text .article .picture {display:none;}
.shop .articles.text .article .title {display:inline-block; width:440px; color:#707070; text-transform:uppercase; text-align:left; font-weight:bold; margin:4px 0;}
.shop .articles.text .article .priceBar {display:inline-block; background:#f88b46; cursor:pointer; width:200px; margin:0 auto; overflow:hidden; font-size:0; vertical-align:top;}
.shop .articles.text .article .priceBar:hover {background-color:#707070;}
.shop .articles.text .article .priceBar .price {display:inline-block; width:172px; color:white; line-height:22px; height:28px; padding:4px 16px 0; position:relative; top:0; left:0; text-align:right; vertical-align:top;}
.shop .articles.text .article .priceBar .orderButton {display:inline-block; background:url(../img/custom/addToCart.png) 50% 50% no-repeat; width:28px; height:28px; margin:0;  vertical-align:top;}

/* shop - article single */
.shop .articleSingle {display:inline-block; vertical-align:top; width:660px; padding: 0 20px;}
.shop .articleSingle .actions {font-size:0;}
.shop .articleSingle .actions .priceBox {display:inline-block; width:420px; background:url(../img/custom/addToCart.png) 98% 50% no-repeat #f88b46; padding:9px 8px; margin-left:50px; vertical-align:top; font-size:0; transition: background 0.3s;}
.shop .articleSingle .actions .priceBox:hover {background-color:#707070;}
.shop .articleSingle .actions .priceBox .price {display:inline-block; width:92px; color:white; font-weight:bold; vertical-align:top; padding-left:16px;}
.shop .articleSingle .actions .priceBox .orderButton {display:inline-block; width:312px; color:white; text-transform:uppercase; text-align:right; padding-right:32px; cursor:pointer;}

.shop .articleSingle .data {padding:20px 0; font-size:0;}
.shop .articleSingle .data .picture {display:inline-block; width:200px; text-align:center; vertical-align:top;}
.shop .articleSingle .data .picture img {}
.shop .articleSingle .data .description {display:inline-block; width:420px; vertical-align:top; padding-top:20px;}

.shop .articleSingle .extra {border-top:solid 1px #999999; font-size:0; padding:20px 0;}
.shop .articleSingle .extra .block {display:inline-block; vertical-align:top;}
.shop .articleSingle .extra .block:first-child {width:65% !important; padding-right:20px;}
.shop .articleSingle .extra .block:last-child {width:35%;}
.shop .articleSingle .extra .block:first-child table {width:100%;}
.shop .articleSingle .extra .block .title {font-weight:bold; line-height:15px; font-size:12px; padding:0 12px;}
.shop .articleSingle .extra .block .line {font-size:0;}
.shop .articleSingle .extra .block .line .name {text-align:right; padding-right:10px;}
.shop .articleSingle .extra .block .line .value {text-align:center;}
.shop .articleSingle .extra .block .item {padding-left:20px;}

/* shop - selection popup */
#SelectionPanel {padding:10px 20px; width:640px; height:480px; overflow:auto;}
#SelectionPanel * {text-align:left;}
#SelectionPanel .articles {font-size:0; padding:12px 0; border-bottom: solid 1px #dfdfdf;}
#SelectionPanel .articles.last {border:none !important;}
#SelectionPanel .articles .article {display:inline-block; width:50%; padding:1px 0;}
#SelectionPanel .articles .article input {margin-right:8px;}
#SelectionPanel .buttons {text-align:right;}
#SelectionPanel .qttButton {vertical-align: top; display: inline-block; width: 17px; margin: 2px 6px 0 0; padding: 2px 2px 1px; text-align: center; color: #f88b46; cursor: pointer; font-weight: bold; font-size: 16px; line-height: 12px; transition: all 0.3s; border: solid 1px #f88b46; border-radius: 12px;}
#SelectionPanel .qttButton.disabled {color:black; border:solid 1px black; opacity:0.35; cursor:default;}
#SelectionPanel .qttButton:hover {color:black; border:solid 1px black;}
#SelectionPanel .qttValue {display:inline-block; margin: 0 6px 0 0; width:10px; text-align:center;}
#SelectionPanel .options {background: rgba(66,97,15,0.10); padding:12px 16px; margin: 4px 0 12px; border-radius:20px;}
#SelectionPanel .options .eTitle3 {margin:12px 0 10px; border-bottom:solid 1px  #f88b46; padding-bottom:4px;}
#SelectionPanel .options .eTitle3:first-child {margin-top:0;}

#SelectionPanel .articles.flash {
    animation-name: error;
     animation-duration: 0.25s;
     animation-iteration-count: 4;
     animation-direction: alternate;
     animation-timing-function: linear;
     background-color: white;
}

@keyframes error {
     to {
          background-color: #f88b46;
   }
}

/* order */
.order {font-size:0; padding:10px 270px;}
.order .message {text-align:center; background:#DC0000; padding:4px 0; color:white;}
.order .message a {color:white; border-bottom:dotted 1px white; font-weight:bold;}
.order .block {padding:0 0 16px; border-bottom:solid 1px #dfdfdf; font-size:0;}
.order .block:last-child {border:none;}

/* form */
.form {}
.formHalfLine {display:inline-block; width:50%; padding:4px 0; font-size:0;}
.formLine {display:block; padding:4px 0; font-size:0;}
.formItem {display:inline-block; width:100px; text-align:right; font-weight:bold; font-size:13px;}
.formInput {display:inline-block; width:320px; padding:0 8px;}
.formMediumInput {display:inline-block; width:320px; padding:0 8px; text-align:left;}
.formLongInput {display:inline-block; flex:2; max-width:100%; padding:0 8px;}
.formRadio {padding: 2px 0 2px 16px;}
.formAddress {padding: 2px 0 2px 36px; font-style:italic; line-height:17px;}
.formButtons {margin-top:24px; text-align:right;}

.paymentDemo {width:400px; max-width:100%; margin:0 auto; padding: 40px 0;}
.paymentDemo .creditcard {display:inline-block; width:240px; border-bottom:solid 1px #707070; height:20px;}
.paymentDemo .datemonth {display:inline-block; width:40px; border-bottom:solid 1px #707070; height:20px;}
.paymentDemo .dateyear {display:inline-block; width:40px; border-bottom:solid 1px #707070; height:20px;}

/* home */
.homePortal .banners {width:1150px; margin:0 auto; font-size:0;}
.homePortal .banners .banner {font-size:0;}

.homePortal .shopButton {font-size:0px;}
.homePortal .shopButton .content {display:inline-block; width:60%; background-color:rgba(0,0,0,0.2); padding: 30px 40px 30px 120px; color:white; vertical-align:top;}
.homePortal .shopButton .content * {color:white;}
.homePortal .shopButton .button {display:inline-block; width:40%; padding: 20px 40px 10px; color:white; text-align:center; vertical-align:top;}
.homePortal .shopButton .button:hover {opacity:0.8;}

.homePortal .freeContent .mainContent {max-width:920px; padding:20px 0;}
.homePortal .mainContent.articles {padding:20px 40px 20px 20px; font-size:0;}
.homePortal .articles .article {display:inline-block; width:50%; vertical-align:top;}

.homePortal .mainContent.guestbook {padding:20px 40px 20px 20px; font-size:0;}
.homePortal .guestbook .messages {display:inline-block; width:70%; vertical-align:top;}
.homePortal .guestbook .messages .message {border-bottom:solid 1px #ff9600; color:white;}
.homePortal .guestbook .buttonBox {display:inline-block; width:30%; vertical-align:top; text-align:right;}
.homePortal .guestbook .buttonBox .buttons {margin-bottom:12px;}

.homePortal .search {text-align:center; padding:20px;}

.homePortal .announcement {padding:10px 0;}
.homePortal .announcement .eTitle2 {text-align:center;}

/* articles */
.mainContent.articles {padding:20px 270px 20px 155px; font-size:0;}
.articles .article {}
.articles .article .date {width:80px; float:left;}
.articles .article .date .dayMonth {}
.articles .article .date .day {text-align:right; color:#ff9600; font-size:32px; line-height:32px; padding:4px 0 0;}
.articles .article .date .month {text-align:right; color:#ff9600; font-size:24px; line-height:18px; padding: 0 0 4px;}
.articles .article .date .year {display:none; color:#ff9600; text-align:center; padding: 4px; font-weight:bold;}
.articles .article .content {margin-left:100px; border-left:solid 1px #ff9600; padding-left:32px;}
.articles .article .content a.title {font-size:18px;}
.articles .bottomSeparator {clear:both; height:20px;}

.mainContent.articleDisplay {padding:20px 270px 20px 155px;}
.articleDisplay .date {width:80px; float:left; padding-right:20px; border-right:solid 1px #ff9600;}
.articleDisplay .date .dayMonth {}
.articleDisplay .date .day {text-align:right; color:#ff9600; font-size:32px; line-height:32px; padding:4px 0 0;}
.articleDisplay .date .month {text-align:right; color:#ff9600; font-size:24px; line-height:18px; padding: 0 0 4px;}
.articleDisplay .date .year {display:none; color: #ff9600; text-align:center; padding: 4px; font-weight:bold;}
.articleDisplay .content {margin-left:100px; padding-left:32px;}
.articleDisplay .content .picture {margin:12px 0; text-align:center;}
.articleDisplay .share {float:right; line-height:10px;}
.articleDisplay .share img {vertical-align:-8px;}

.commentWarning {padding:4px 0; font-size:12px;}

#comments {margin-left:100px;}
.commentForm .formInput {padding:4px 0; display:block; width:100%;}
.commentForm .formButton {padding:4px 0; text-align:right;}
.commentForm .g-recaptcha div {margin-left:auto;}

.commentList .commentHeader {font-weight:bold;}
.commentList .commentHeader .info {font-weight:bold; color: #b10035;}
.commentList .commentContent {padding-left:40px;}

/* guest book */
.mainContent.guestbook {padding:20px 270px; font-size:0;}
.guestbook .buttons {padding:4px 20px;}
.guestbook .message {border-bottom: solid 1px #363336; padding:20px;}
.guestbook .message .content {}
.guestbook .message .author {font-size:16px; font-style:italic; color:#ff9600;}

/* guestbook popup */
.guestBookPopup {padding:10px 20px;}
.guestBookPopup .eContent1 {padding:0 0 4px;}
.guestBookPopup .formInput {padding:0 0 8px; display:block; width:100%;}
.guestBookPopup .buttons {padding:4px 0; text-align:right;}

/* site viewer */
.siteViewer .sites {margin:30px 250px; font-size:0;}
.siteViewer .sites .content {padding:0 20px 20px;}
.siteViewer .sites .site {display:inline-block; width:50%; vertical-align:top; padding: 0 0 0 20px; margin: 0 0 30px;}
.siteViewer .sites .site .title {font-weight:bold; color:#ff9600; font-size:20px;}
.siteViewer .sites .site .address {}
.siteViewer .sites .site .phone a {}
.siteViewer .sites .site .schedule {color:#ff9600; margin: 8px 0;}
.siteViewer .sites .site .openings {display:inline-block; color:white; font-size:12px; font-family: 'Lucida Console', Monaco, monospace; padding:16px; background:#552e0c;}
.siteViewer .sites .site .button {padding:10px 0;}

/* account viewer */
.accountViewer {padding:30px 270px;}
.accountViewer.login {text-align:center;}
.accountViewer.login p.eContent1 {text-align:center;}
.accountViewer.login .formButtons {text-align:center;}

/* search */
.search {}
.search .formInput {display:inline-block;}
.search .formInput input {font-size:15px; padding:8px 4px 7px; position:relative; top:1px;}
.search .formButton {display:inline-block;}
.searchResult {text-align:center; padding:12px 0; font-size:20px; color:#909090; font-weight:bold;}

/* generic article rating display */
.averageRating .full {color:#669715;}

/* article list rating display */
.articles .averageRating {text-align:center; height:0px; overflow:visible; position: relative; top:-20px;}
.articles .averageRating * {font-size:16px;}

/* article single rating display */
.articleSingle .ratingBox {border-top:solid 1px #999999; font-size:0; padding:20px 0;}
.articleSingle .actions .averageRating {text-align:right;}
.articleSingle .actions .averageRating * {font-size: 20px;}
.articleSingle .actionButton {float:right; position:relative; top:-30px;}
.articleSingle .ratings {padding-top:8px; clear:both; font-size:0;}
.articleSingle .ratings .rating {display:inline-block; width:46%; text-align:center; background:rgba(0, 0, 0, 0.05); padding:20px; margin:0 2% 2%;}
.articleSingle .ratings .rating .name {font-size:16px; font-weight:bold;}
.articleSingle .ratings .rating .date {font-size:11px; font-style:italic; color:#888;}
.articleSingle .ratings .rating .averageRating * {font-size:20px;}
.articleSingle .ratings .rating .comment {margin: 8px 0 0; border-top:solid 1px #888888; padding:8px 0 0;}

/* article rating popup */
.articleRatingPopup {padding:10px 20px;}
.articleRatingPopup .eContent1 {padding:0 0 4px;}
.articleRatingPopup .formInput {padding:0 0 8px; display:block; width:100%;}
.articleRatingPopup .formStarInput {text-align:center;}
.articleRatingPopup .formStarInput * {font-size:30px; line-height:30px;}
.articleRatingPopup .buttons {padding:4px 0; text-align:right;}

/* booking form */
#bookingForm .formLine {text-align:right;}
#bookingForm .formLine .formInput {width:100%;}

/* calendar for booking form */
#bookingForm .perpetualCalendar { width:400px; max-width:100%; margin: 0 8px 0 auto; border-spacing: 2px; border-collapse: separate; }
#bookingForm .perpetualCalendar td { padding:2px 0; text-align:center; width:14.3%; }
#bookingForm .perpetualCalendar a.img{font-size:0;}
#bookingForm .perpetualCalendar a.textual{font-weight:bold; background:#669715; color:white;}

/* header cells */
#bookingForm .perpetualCalendar .cellLink { padding:0; background:none; }
#bookingForm .perpetualCalendar .cellLink a{ display:block; padding:5px 0; transition:background 0.3s, color 0.3s; }
#bookingForm .perpetualCalendar .cellLink a:hover{opacity:0.6; text-decoration:none; color:white; }

#bookingForm .perpetualCalendar .cellDate { width:71.4%; padding:3px 0; }
#bookingForm .perpetualCalendar .cellDay { font-weight:bold; padding:3px 0; }

/* out of displayed month cells */
#bookingForm .perpetualCalendar .cellOut { background:none; }

/* day cell types */
#bookingForm .perpetualCalendar .cell0 {background:none; border:none; padding:3px 0; transition:background 0.3s, color 0.3s;}

#bookingForm .perpetualCalendar .cell1 {background:#f1f1f1; border:none; padding:3px 0; transition:background 0.3s, color 0.3s;}
#bookingForm .perpetualCalendar .cell1:hover {background:#669715; color:white; cursor:pointer;}

#bookingForm .perpetualCalendar .cell2 {background:#669715; color:white; border:none; padding:3px 0; transition:background 0.3s, color 0.3s;}