@import "eshop_base.css";

#content { max-width: 1200px; }

.vxModule { background-image: url(../images/box_bg_gradient_mushroom.jpg);
   background-repeat: repeat-x; border-color: #CCCCCC; padding: 5px; margin-top: 5px; margin-bottom: 10px; }

.vxModule thead th { background: none }
.vxModule th, .vxModule td { font-size: 1em }
table.simple th, table.simple td { font-size: 1em }

#container .vxModule h1 {color: #120848}
#container .vxModule h2 {color: #120848}
#container .vxModule h3 {color: #120848}
#container .vxModule h4 {color: #120848}
#container .vxModule h5 {color: #120848}

.vxModule2 { background-color: #888888; border-color: #666666;
    padding: 5px; margin-top: 5px; margin-bottom: 10px; color: #FFFFFF; }
.vxModule2 a:link:not(.button), .vxModule2 a:hover:not(.button), .vxModule2 a:visited:not(.button), .vxModule2 a:active:not(.button) {
    color: #FFFFFF; text-decoration: underline; }
.mainContentWrapper { display: table; margin-top: 20px; margin-bottom: 20px; }
.mainContentRow { display: table-row; }
.mainContentBlock { display: table-cell; width: auto; vertical-align: top; }

#affnetbtn { display: block; width: 250px; height: 68px;
    background-color: #005500; border: 1px solid #002500;
    color: #FFFFFF;
    margin: auto; padding: 15px 20px; font-weight: bold; font-size: 20px;
    text-align: center; vertical-align: middle; }

#affnetbtn:hover { text-decoration: none !important; background-color: #009500; }

#affnetbtn:active { text-decoration: none !important;
    background-color: #009500;
    border-top-width: 3px; border-left-width: 3px;
    width: 248px; height: 66px; }

#ossbtn { display: block; width: 250px; height: 68px;
    background-color: #e0d4ff; border: 1px solid #8777B0;
    color: #1D1A26;
    margin: auto; padding: 15px 20px; font-weight: bold; font-size: 20px;
    text-align: center; vertical-align: middle; }

#ossbtn:hover { text-decoration: none !important; background-color: #F3EEFF; }

#ossbtn:active { text-decoration: none !important;
    background-color: #F3EEFF;
    border-top-width: 3px; border-left-width: 3px;
    width: 248px; height: 66px; }

#mainIntro p:first-child { font-weight: bold; }
#mainVideos h3 { color: #FFFFFF; }
#mainVideos .embedded-video { padding: 10px 0; }
.videoThumbnailContainer { text-align: center; margin-top: 20px; }
.videoThumbnailContainer img { cursor: pointer; }
#overlay {
    display: none; position: fixed;
    top: 0; bottom: 0; left: 0; right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
}
#videoPlayerContainer {
    position: fixed;
    top: 50%;
    margin-top: -158px;
    width: 100%;
    padding: 0; border: none;
    z-index: 20000;
}

.videoPlayerWidthConstrainer {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
} 

.videoPlayerAspectConstrainer {
    position: relative;
    height: 0;
    padding-top: 56.25%;
}
.videoPlayerContainer iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.mainShopList { list-style-type: none; margin: 0; padding: 0; }
.mainShopList img { max-width: 100%; max-height: 250px; display: block; margin: 0 auto; }

#mainIndexBottomPanel { display: table; width: 100%; }
#mainIndexBottomPanelAligner { display: table-row; }
#mainIndexBottomPanel img { display: table-cell; padding: 6px; vertical-align: top; }
#mainIndexBottomPanelTextCell { display: table-cell; width: auto;
    padding: 12px; vertical-align: top; }

#enableJSNotice { margin-bottom: 20px; padding: 10px 20px; text-align: center; background-color: #EE1111; color: #FFFFFF; }
#mainContent a:link:not(.button), #mainContent a:hover:not(.button), #mainContent a:visited:not(.button) { color: #FFFFFF; text-decoration: underline; }
#mainPane a.button, .topicContainer a.button { display: inline-block; }
#mainPane h1, #mainPane h2, #mainPane h3, #mainContent h3  { color: #FFFFFF; }
#mainPane { float: right; }
.topicContainer .ibox:hover { background-color: #888888; }
.obox { padding-top: 10px; padding-bottom: 10px; background-color: #FFFFFF; }
.ibox { height: 200px; overflow: hidden; background-color: #EEEEEE; }
.listTopic { padding: 10px; text-align: center; height: 100%; box-sizing: border-box; cursor: pointer; }
.listTopic h2 { margin: 0; padding: 5px; font-size: 12px; color: #555555; display: block;
    background-color: rgba(255, 255, 255, 0.7); }
.listTopicContent { position: relative; height: 100%; }
.imgDiv {
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover; height: 100%;
    }
.listTopicText, .mainText { color: #FFFFFF; background-color: rgba(0, 0, 0, 0.7); }
.listTopicText {
    display: block; position: absolute; left: 0; bottom: 0; width: 100%;
    margin: 0; padding: 5px; box-sizing: border-box; }
.listTopicMainText { display: none; text-align: left; }
#mainPane .ibox { height: 420px; }
#mainPaneWrapper { padding: 20px; }
#mainPaneInnerWrapper { height: 380px; overflow: auto; }
#mainPane .topicTitle { margin: 0; padding: 10px 20px; color: #FFFFFF; background-color: rgba(0, 0, 0, 0.7); }
#mainPaneText { margin: 0; padding: 20px; }

.ebsFeatureList {
    list-style-type: none;
    list-style-position: outside;
    padding: 0;
    display: table;
}

.ebsFeatureList > li {
    min-height: 90px;
    margin: 5px 0;
    display: table-row;
}

.ebsFeatureText { display: table-cell; vertical-align: top; padding: 5px; }

.ebsFeatureIconContainer { display: table-cell; padding: 5px; }

.ebsFeatureIcon {
    width: 128px; height: 80px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-image: url('../images/main/ficons/ebs-features-sprite.jpg');
}
.ebsFeatureCalendar { background-position: 0 0; }
.ebsFeatureWidget { background-position: 0 -80px; }
.ebsFeaturePayments { background-position: 0 -160px; }
.ebsFeatureDeposit { background-position: 0 -240px; }
.ebsFeatureDiscount { background-position: 0 -320px; }
.ebsFeatureEarlyBird { background-position: 0 -1280px; }
.ebsFeatureCoupon { background-position: 0 -400px; }
.ebsFeatureGiftVoucher { background-position: 0 -480px; }
.ebsFeatureGoogleCalendar { background-position: 0 -560px; }
.ebsFeatureBarcode { background-position: 0 -640px; }
.ebsFeatureICalendar { background-position: 0 -720px; }
.ebsFeatureMap { background-position: 0 -800px; }
.ebsFeatureSchedule { background-position: 0 -880px; }
.ebsFeaturePartners { background-position: 0 -960px; }
.ebsFeatureChart { background-position: 0 -1040px; }
.ebsFeatureExport { background-position: 0 -1120px; }
.ebsFeatureTicketScanner { background-position: 0 -1200px; }

.nsModule { padding: 20px; }
.nsModuleContent { padding: 20px; background-color: rgba(0, 0, 0, 0.5); }

#sec-overview { background-image: url('../images/aff/online_shopping.jpg'); }
#sec-videos { background-image: url('../images/main/videoplayer.jpg'); }
#sec-internet-marketing { background-image: url('../images/main/manyroads.jpg'); }
#sec-ecommerce { background-image: url('../images/main/rionight.jpg'); }
#sec-booking { background-image: url('../images/main/nscastle.jpg'); }
#sec-demos { background-image: url('../images/main/demo.png'); }
#sec-testimonials { background-image: url('../images/main/testimonials.jpg'); }

#sec-ebs-overview { background-image: url('../images/main/nscastle.jpg'); }
#sec-ebs-benefits { background-image: url('../images/main/plums.jpg'); }
#sec-ebs-features { background-image: url('../images/main/aerial-walk.jpg'); }
#sec-ebs-pricing { background-image: url('../images/main/cash-register.jpg'); }
#sec-ebs-market-segments { background-image: url('../images/main/demo.png'); }

.contentLoadingNotice { height: 300px; }

.contentLoadingNoticePanel {
  margin: 100px auto;
  width: 100px; height: 100px;
  background: rgba(255, 255, 255, 0.9) 50% 50% no-repeat scroll url('../images/loading_blue.gif'); 
}

@media (max-width: 767px) {
    #mainPane, .listTopicIndexText { display: none; }
    .listTopicMainText { display: block; }
    .ibox { min-height: 200px; height: auto; overflow: visible; }
    .listTopic, .listTopicContent { height: auto; }
    .listTopicText { position: static; }
    .imgDiv { height: auto; min-height: 180px; }
}

@media (max-width: 400px) {
    .ebsFeatureIconContainer, .ebsFeatureText { display: block; }
    .ebsFeatureIconContainer { margin-left: auto; margin-right: auto; width: 128px; }
    .ebsFeatureText:after {
        content: '';
        display: block;
        height: 1px;
        background-color: rgba(255, 255, 255, 0.7);
        margin: 10px 0;
    }
}