body {
   display: table; /* To display everything full width when content such as for example a table is wider than window.  */
   width: 100%; /* To display everything full width when content such as for example a table is wider than window.  */
   background-color: white;
}

h1 {
   font-size: 145%;
   color: #000000; 
   font-weight: bold;
   font-family: Helvetica, Arial;
}

h2 {
   font-size: 135%;
   color: #CC0000; 
   font-weight: bold;
   font-family: Helvetica, Arial;
}

h2.introtableheading {
   display:inline;
}

h2.introtableheading a {
   font-size: 100%;
   font-size: 0.741em;
   padding-left: 2px; 
   padding-right: 2px;
   color: #FFFFFF;
   white-space: nowrap;
   text-decoration: none;
}

h2.introtableheading a:hover {
   color: #FFFFFF;
   text-decoration: underline;
}

h2.link a {
   color: #CC0000;
   text-decoration: none;
}

h2.link a:hover {
   color: #CC0000;
   text-decoration: underline;
}   
   
h3 {
   font-size: 115%;
   color: #000000; 
   font-weight: bold;
   font-family: Helvetica, Arial;
   margin-bottom: 3px;
   line-height: 30px;
}

p {
   margin-top: 3px;
}

p,div,td {
   color: #111111;
   font-size: 16px;
   line-height: 1.375em;
   font-style: normal;
   font-family: Helvetica, Arial;
}

a {
   color: black;
}

a:hover {
   color: #cc0000;
   text-decoration: underline;
}

td h3 {
   margin-bottom: 0px;
}

/* Template */
.title {
   color: white;
   padding-right: 10px;
   font-size: 13pt;
   font-weight: bold;
   font-family: Arial, Helvetica;
   text-decoration: none;
}

.title p {
   color: white;
   padding-right: 10px;
   font-size: 13pt;
   font-weight: bold;
   font-family: Arial, Helvetica;
   text-decoration: none;
}

.header {
   color: black;
   padding-left: 10px;
   padding-top: 5px;
   padding-bottom: 5px;
   background-color: #cc0000;
   font-size: 26pt;
   font-weight: bold;
   font-family: Arial, Helvetica;
   text-decoration: none;
}

.tradingname {
   color: white;
   padding-left: 11px;
   font-size: 13pt;
   font-weight: bold;
   font-family: Arial, Helvetica;
   text-decoration: none;
   background-image: url(/webadmin/toolbar_background.gif);
}

.subheader {
   color: white;
   padding-left: 20px;
   font-size: 13pt;
   font-weight: bold;
   font-family: Arial, Helvetica;
   text-decoration: none;
   background-image: url(/webadmin/toolbar_background.gif);
}

.toolbar {
   color: #cc0000;
   font-size: 12pt;
   font-weight: bold;
   font-family: Arial, Helvetica;
   text-decoration: none;
   vertical-align: top;
}

.toolbar a,.toolbar a:visited {
   color: #cc0000;
   font-size: 12pt;
   font-weight: bold;
   font-family: Arial, Helvetica;
   text-decoration: none;
   vertical-align: top;
}

.toolbar a:hover {
   color: #cc0000;
   font-size: 12pt;
   font-weight: bold;
   font-family: Arial, Helvetica;
   text-decoration: underline;
   vertical-align: top;
}

.footer {
   color: white;
   background-color: #cc0000;
   font-size: 10pt;
   font-family: Arial, Helvetica;
   text-decoration: none;
}

.footer a, .footer a:visited {
   color: white;
   background-color: #cc0000;
   font-size: 10pt;
   font-family: Arial, Helvetica;
   text-decoration: none;
}

.footer a:hover {
   color: white;
   background-color: #cc0000;
   font-size: 10pt;
   font-family: Arial, Helvetica;
   text-decoration: underline;
}

/* Left-hand side menu */
UL.menu_left{
   list-style-type: none;
   text-indent: 0px;
   margin: 0px;
   padding: 0px;
}

UL.menu_left LI {
   margin: 0px;
   padding: 2px;
   padding-right:0px;
   border-bottom: 2px solid #FFFFFF;
   background:#F0F0F0;
 }

UL.menu_left LI.menu_header {
   padding-left: 4px;
}

UL.menu_left LI A {
   display: block;
   color: #000000;
   font-style: normal;
   font-weight: bold;
   text-decoration: none;
   margin: 0px;
   padding-left:2px;
}

UL.menu_left LI A:hover {
   color:#cc0000; 
   text-decoration: underline;
}

UL.menu_left A.menu_second, UL.menu_left A.menu_second:visited {
   font-weight: normal;
   padding-left: 10px;
}

/* Boxheading */
DIV.boxheading {
   border: 1px solid #f0f0f0; 
   background:#f0f0f0; 
   width: 100%; 
   padding-bottom:2px;
   padding-top:1px; 
   margin-bottom:2px;
} 

/* Workaround for Mozilla width problem */
DIV.boxheadinginner {
   padding-left:5px;
   padding-right:5px;
}

/* Buyheading */
DIV.buyheading {
   border: 1px solid #CCCCCC; 
   background:#CCCCCC; 
   width: 100%; 
   padding-left:5px;
   padding-bottom:2px;
   padding-top:1px; 
   margin-bottom:0px;
} 

/* Box */
DIV.box {
   border: 1px solid #CCCCCC; 
   width: 100%; 
   padding-left:5px;
   padding-bottom:2px;
   padding-top:1px; 
   margin-bottom:2px;
} 

UL.buybullets {
   margin-top:0px;
}

.emphasis {
   color:#CC0000;
}

/* Heading for Long Description of Each Feature */
.featureheading, .featureheading a {
   padding-left:8px; 
   padding-top:1px; 
   padding-bottom:1px; 
   width:100%;
   background:#cc0000;
   color:#ffffff;
   text-decoration: none;
}

/* Back link */
.back {
   color:#cc0000;
}

/* Heading for each Section on the Feature Overview Pages */
a.featuresectionheading, a.featuresectionheading:visited {
   color: #000000;
}

a.featuresectionheading:hover {
   color: #cc0000;
}

/* Short Description for each feature on the Feature Overview Pages */
a.featuredescription {
   text-decoration: none;
}

a.featuredescription:hover {
   text-decoration: underline;
   color:#cc0000;
}

/* Generic More Info Link */
a.moreinfo {
   text-decoration: underline;
   color:#cc0000;
}

a.moreinfo:hover {
   color:#FF4040;
}

/* Testting*/

tr.WCMindex {
   border: 1px solid #cccccc;
   background-color: #eeeeee;
}

th.WCMindex {
   color: #ffffff;
   background-color: #cc0000;
   font-size: 10pt;
   font-weight: bold;
   text-decoration: none;
   padding-left: 3px;
}

td.WCMindex {
   color: #000000;
   font-size: 10pt;
   font-weight: normal;
   text-decoration: none;
}

/* Generic Box Heading */
DIV.hcheading, TD.hcheading P, TD.hcheading, P.hcheading, P.hcheading A,P.hcheading A:visited {
   border: 2px solid #cc0000; 
   background:#cc0000;
   color:#ffffff; 
   font-weight: bold;
   text-indent:5px;
} 

/* Generic Box */
TABLE.hcbox, DIV.hcbox {
   border: 2px solid #cccccc;
   background:#ffffff;
   padding-left:5px;
   padding-right:5px;
}

/* Generic Table */
.generictableheading {
   color:#cc0000;
   font-size: 12pt;
   font-weight: bold;
   font-family: Arial, Helvetica;
   text-decoration: none;
}

A.generictableheading:hover {
   text-decoration: underline;
   color:#cc0000;
}

TR.generictableheadingrow {
   background:#ffffff;
}

.generictablesubheading {
   color:#ffffff;
   font-weight: bold;
   text-decoration: none;
}

TR.generictablesubheadingrow {
   background:#cc0000;
}

TR.generictablerow {
   background:#eeeeee;
}

A.generictablesubheading:hover {
   text-decoration: underline;
   color:#ffffff;
}

/* Forum */

.tabledate {
   font-size: 8pt;
}

/* New functionality */
.new {
   color:#cc0000;
   font-weight: bold;
}

/* Content Subheadings */
.csubheading {
   color: #cc0000;
   font-size: large;
   font-weight: bold;
   text-decoration: none;
}

DIV.codefield {
   background:#FBFBFB;
   border: 1px solid #B6B6B6;
}

.fronpagebanner_cms {
   border: 1px solid rgb(210, 210, 210); 
   background-repeat: no-repeat; 
   background-position: right center; 
   background-image: url(/image.jsp/id=1167?version=WCM);
}

.frontpagebanner_editor {
   border: 1px solid rgb(210, 210, 210); 
   background-repeat: no-repeat; 
   background-position: right top;
   background-image: url(/image.jsp/id=1163?version=WCE);
}

.frontpagebanner_manager {
   border: 1px solid rgb(210, 210, 210); 
   background-repeat: no-repeat; 
   background-position: right center;
   background-image: url(/image.jsp/id=1181?version=WebMan);
}

ul.mainfeatureslist {
   margin-top:0px;
   margin-left:0px;
   padding-left:20px;
}

ul.mainfeatureslist li {
   margin-left:0px;
   padding-left:0px;
   margin-bottom: 10px;
}

/* General Styles */

.scaling-image {
   max-width: 100%;
}

.nowrap {
   white-space: nowrap;
}


/* FOOTER */

/* General */

.footer-box:after, .footer-box:before {
    display: table;
    content: " ";
}

.footer-box:after {
    clear: both;
}

footer {
    background-color: #111111;
    padding: 30px 30px 20px 30px;
}

.footer-box {
}


/* Column contents */

.footer-4column {
    box-sizing: border-box;
    padding-bottom: 15px;
}


/* H3 */

.footer-header {
    color: #FFFFFF;
    font-size: 18px;
    font-style: normal;
    font-weight: bold;
    line-height: 25px;
    padding: 0px;
    margin: 0px;
}


/* UL */

.footer-section {
    list-style: none;
    padding: 0px;
    margin: 7px 0px 10px 0px;
}


/* LI */

.footer-item {
    padding-bottom: 5px;
}


/* LI A */

.footer-item a {
    text-decoration: none;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: normal;
    background-color: transparent;
}

.footer-item a:hover {
    text-decoration: underline;
}


/* Brand */

.footer-brand img {
    margin: 15px 0px 5px 0px;
    max-width: 150px;
}


/* Copyright */

.footer-copyright {
    color: #FFFFFF;
}


/* Media - Medium width */

@media (min-width: 840px) {


/* General */

.footer-box {
    position: relative;
    margin-top: 15px;
}


/* Column contents */

.footer-4column {
    float: left;
    width: 25%;
    padding: 0px 10px 0px 10px;
}


/* UL */

.footer-section {
    margin: 20px 0px;
}


/* LI */

.footer-item {
    padding-bottom: 15px;
}


/* Brand */

.footer-brand {
    text-align: right;
}

.footer-brand img {
    margin-top: 0px;
    margin-bottom: 5px;
}

.footer-copyright {
    position: absolute;
    right: 10px; 
    bottom: 35px; /* ul.footersection bottom margin + li.footeritem padding */
    width: 25%;
}

}


/* Media - Maximum width */

@media (min-width: 1000px) {

footer {
    padding: 30px 5px 20px 5px;
}

.footer-box {
    max-width: 1260px;
    margin-left: auto;
    margin-right: auto;
}

}


/* TOP NAVIGATION */

/* General */

.navbar, .navbar *, .navbar:after, .narbar:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.navbar button {
    -webkit-appearance: button;
    cursor: pointer;
}

.container-fluid:after, .container-fluid:before, .navbar .nav:after, .navbar .nav:before, .navbar-collapse:after, .navbar-collapse:before, .navbar-header:after, .navbar-header:before, .navbar:after, .navbar:before {
    display: table;
    content: " ";
}

.container-fluid:after, .navbar .nav:after, .navbar-collapse:after, .navbar-header:after, .navbar:after {
    clear: both;
}


/* General navigation */

nav {
    display: block;
    -webkit-box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.25);
    -moz-box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.25);
    box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.25);
}

.navbar-default {
    background-image: -webkit-linear-gradient(top, #cc0000, #aa0000);
    background-image: -moz-linear-gradient(top, #cc0000, #aa0000);
    background-image: -ms-linear-gradient(top, #cc0000, #aa0000);
    background-image: -o-linear-gradient(top, #cc0000, #aa0000);
    background-image: linear-gradient(to bottom, #cc0000, #aa0000);
    /* XXX Removed border-color: #e7e7e7; */
}

.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 15px; /* XXX Was 20px */
    border: 0px solid transparent; /* XXX Was 1px */
}

.container-fluid {
    max-width: 1260px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.navbar-header {
   line-height: 20px;
}

.container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
    margin-right: -15px;
    margin-left: -15px;
}


/* Toggle button */

.navbar-toggle {
    position: relative;
    float: right;
    padding: 17px 10px; /* XXX was 9px 10px */
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: visible; /* XXX moved from button tag */
    margin: 0;
    font: inherit; /* XXX moved from button, input, optgroup, select and textarea tag */
    color: inherit;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    line-height: 20px;
    background-color: #FFFFFF;
}

.navbar-toggle .icon-bar+.icon-bar {
    margin-top: 4px;
}

.navbar-collapse.collapse {
    display: none;
}

.navbar-collapse.collapse.in {
    display: block;
}


/* Brand */

.navbar-brand {
    float: left;
    height: 50px;
    padding: 8px 15px 7px 15px;
    font-size: 18px;
    line-height: 35px;
}

.navbar-brand>img {
    display: block;
    vertical-align: middle;
    border: 0;
}


/* UL Box */

.navbar-collapse {
    padding-right: 15px;
    padding-left: 15px;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid transparent;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}


/* UL */

.navbar .nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.navbar-nav {
    margin: 7.5px -15px;
}


/* LI */

.navbar .nav>li {
    position: relative;
    display: block;
}


/* LI A */

.navbar .nav>li>a {
    position: relative;
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #ffffff;
    font-family: Arial, Helvetica;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    background-color: transparent;
}

.navbar .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px; 
}

.navbar .nav>li>a.cta { 
    background-color: #108a84;
}

.navbar-default .navbar-nav a:focus, .navbar-default .navbar-nav a:hover, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    color: #FFFFFF; 
    background-color: #900000;
}

/* SELECTED LINK */

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.cms.WCM>a, .navbar-default .navbar-nav>.editor.WCE>a,  .navbar-default .navbar-nav>.manager.WebMan>a,  .navbar-default .navbar-nav>.webhosting.Hosting>a{
    color: #CC0000; 
    background-color: #FFFFFF;
}

.navbar-default .navbar-nav a.cta, .navbar-default .navbar-nav a.cta:hover {
    color: #FFFFFF; 
    background-color: #0c6863;
}


/* Media - Display menu items with medium and maximum width */

@media (min-width: 920px) {

.navbar-header {
    float: left;
}

.container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
    margin-right: 0;
    margin-left: 0;
}

.navbar-toggle {
    display: none;
}

.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
    margin-left: -15px;
}

.navbar-collapse.collapse {
    display: block!important;
    height: auto!important;
    padding-bottom: 0;
    overflow: visible!important;
}

.navbar-collapse {
    padding-right: 0px;
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.navbar-nav {
    float: left;
    margin: 0;
}

.navbar-nav>li {
    float: left;
}

.navbar .navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
}

.navbar-right {
    float: right!important;
    margin-right: -15px;
}

}

/* Media - Adjust font-size with medium width */

@media (min-width: 920px) and (max-width: 1040px) {

.navbar .nav > li > a {
    font-size: 14px;
    padding-right: 10px;
    padding-left: 10px;

}

}

/* CTA */

a.cta-button, input.cta-button {
    display: inline-block;
    min-width: 200px;
    padding: 10px 15px;
    border: none;
    text-decoration: none;
    background-color: #108a84;
    color: #ffffff;
    font-family: Arial, Helvetica;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    cursor: pointer;
    -webkit-appearance: none;
    -webkit-border-radius: 0; 
}

input.cta-button {
    line-height: 1.375em;
}

a.cta-button:hover, input.cta-button:hover {
    background-color: #0c6863;
}

a.cta-button-content, input.cta-button-content {
    min-width: 0px;
    padding: 5px 15px;
}

a.cta-button-right {
    margin-left: 20px;
}

.cta-box {
    text-align: left;
}

.cta-heading {
    color: #FFFFFF;
    font-size: 21px;
}

.cta-content {
    color: #FFFFFF;
    font-weight: normal;
}


/* LEFT RIGHT COLUMNS */

.column-left-right:after,.column-left-right:before {
    display: table;
    content: " ";
}

.column-left-right:after {
    clear: both;
}

.column-left {
    width: 100%;
    padding: 0px 10px 10px 0px;
}

.column-right {
    width: 100%;
    margin-bottom: 15px;
}


/* Media - Medium and maximum width */

@media (min-width: 840px) {

.column-left {
    float: left;
    width: auto;
    max-width: 60%;
}

.column-right {
    float:right;
    width: auto;
}
}


/* HERO */

/* General */

.hero-container, .hero-container *, .hero-container:after, .hero-container:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.hero-text:after, .hero-text:before {
    display: table;
    content: " ";
}

.hero-text:after {
    clear: both;
}

.hero-container {
    margin: 0px 5px 5px 5px;
    padding: 0px;
    max-width: 100%; 
}

.hero-container.hero-asbru {
    background: url('/image/asbru_hero.jpg') no-repeat center top;
    background-size: auto 600px;
}

.hero-container.hero-cms {
    background: url('/image/cms_hero.jpg') no-repeat 80% top;
    background-size: auto 600px;
}

.hero-container.hero-editor {
    background: url('/image/editor_hero.jpg') no-repeat 20% top;
    background-size: auto 600px;
}

.hero-manager.hero-manager {
    background: url('/image/manager_hero.jpg') no-repeat 20% top;
    background-size: auto 600px;
}

.hero-container.hero-hosting {
    background: url('/image/hosting_hero.jpg') no-repeat 50% top; 
    background-size: auto auto;
}

.hero-container .hero-text {
    padding: 5px 15px 25px 15px;
    width: 100%;
    height: auto;
    background: rgba(0,0,0,0.6);
    color: #FFFFFF;
    font-weight: bold;
}

.hero-container.hero-asbru .hero-text{
    padding: 5px 35px 25px 15px;
}

.hero-heading {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 15px;
}

.hero-container.hero-asbru .hero-heading {
    margin-bottom: 0px;
}

.hero-teaser {
    position: relative;
    color: #FFFFFF;
    font-size: 22px;
}

.hero-container.hero-asbru .hero-teaser {
    padding-bottom: 15px;
}

.hero-teaser span.hero-teaser-item {
    display: inline-block;
    margin-bottom: 20px;
}

.hero-container.hero-editor a.cta-button {
    width: 130px;
    text-align: center;
}

.hero-learn {
    float: right;
}

.hero-learn-heading {
    color: #FFFFFF;
    font-size: 18px;
}

.hero-learn-links {
    text-align: right;
    padding-top: 5px;
}

.hero-learn-links a {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: normal; 
}

.hero-learn-links a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}


/* Media - Medium width */

@media (min-width: 900px) {

.hero-container {
    position: relative;
    min-height: 340px;
}

.hero-container.hero-cms {
    padding: 140px 20px 20px 20px;
    background-size: auto 400px;
}

.hero-container.hero-editor {
    padding: 130px 20px 20px 20px;
    background: url('/image/editor_hero.jpg') no-repeat 50% top;
    background-size: auto 450px;
}

.hero-container.hero-manager {
    padding: 130px 20px 20px 20px;
    background: url('/image/manager_hero.jpg') no-repeat 50% top;
    background-size: auto 450px;
}

.hero-container.hero-hosting {
    padding: 150px 20px 20px 20px;
    background: url('/image/hosting_hero.jpg') no-repeat 50% top;
    background-size: 100% auto; /* hosting modification */
}

.hero-container .hero-text {
    padding: 15px 15px 25px 15px;
}

.hero-heading {
    font-size: 28px;
    margin: 0px 0px 5px 0px;
}

.hero-teaser {
    font-size: 17px;
    margin-bottom: 10px;
}

.hero-teaser span.hero-teaser-item {
    margin-bottom: 0px;
}

.hero-cta {
    float: right;
    position: relative;
    top: 10px;
}
}


/* Media - Medium and Maximum width */

@media (min-width: 1150px) {

.hero-heading {
    font-size: 32px;
}

.hero-teaser {
    font-size: 22px;
}

.hero-container.hero-cms {
    background-size: 100% auto;
}

.hero-container.hero-editor, .hero-container.hero-manager, .hero-container.hero-hosting {
    padding: 160px 20px 20px 20px;
    background-size: 100% auto;
}
}


/* Media - Medium and Maximum width - Asbru Hero */

@media (min-width: 840px) {

.hero-container.hero-asbru {
    padding: 20px;
    height: auto;
    min-height: 340px;
    background-size: 100% auto;
}

.hero-container.hero-asbru .hero-text {
    width: 60%;
    padding: 5px 15px 25px 15px;
}

.hero-container.hero-asbru .hero-heading {
    font-size: 32px;
    margin-bottom: 15px;
}

.hero-container.hero-asbru .hero-teaser {
    font-size: 22px;
    margin-bottom: 0px;
}
}


/* Media - Maximum width - Asbru Hero*/

@media (min-width: 1150px) {

.hero-container.hero-asbru .hero-text {
      width: 40%; 
}
}


/* MAIN CONTENT */

.content-container {
    width: 100%;
    max-width: 1260px;
    margin-left: auto; 
    margin-right:auto;
}



/* FORMS */

.outer-formcontainer {
    padding: 0px 10px;
}

.formcontainer {
    width: 80%;
    margin: 20px auto;
    margin-top: 35px;
    margin-bottom: 20px;
    min-width: 525px;
    border: none;
    padding: 20px;
    background-color: #fff;
    -moz-box-shadow: 0px 0px 10px 10px #ddd;
    -webkit-box-shadow: 0px 0px 10px 10px #ddd;
    box-shadow: 0px 0px 10px 10px #ddd;
}


/* TABLES */

.buycontainer {
    margin: 20px 15px; 
    margin-top: 35px;
    margin-bottom: 20px;
    border: none;
    padding: 20px;
    background-color: #ffffff;
    -moz-box-shadow: 0px 0px 10px 10px #ddd;
    -webkit-box-shadow: 0px 0px 10px 10px #ddd;
    box-shadow: 0px 0px 10px 10px #ddd;
}

table.table-1 {
    width: 100%;
}

table.table-1 caption {
    text-align: left;
}

table.table-1 th, table.table-1 td {
    padding: 0 10px;
    text-align: center;
}

table.table-1 th.buy-productname, table.table-1 td.buy-productname{
    padding: 0 0;
    text-align: left;
    width: 400px;
}

table.table-1 tfoot td {
    padding: 0 0;
    text-align: left;
}

table.table-1 td.buy-price{
    font-size: 32px;
}


@media screen and (max-width: 800px) {

.buycontainer {
    min-width: initial;
}

table.table-1 thead {
    display: none;
}

table.table-1 tbody td {
    display: block;  
    text-align: center;
}

table.table-1 td.buy-productname{
    width: 100%;
}

table.table-1 tbody td:before { 
    content: attr(data-th); 
    display: block;
    text-align: center;  
    font-weight: bold;  
  }
}