﻿
html {
    /* To always show the vertical scrollbar to prevent horrible page jumping if a short page is viewed */
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}

body {
    background-color: #f0f0f0;
    font-size: 62.5%;
    font-family: "Open Sans",sans-serif;
    color: #333;
    padding: 0;
    margin: 0;
    margin-bottom: 50px;
    background-color: #eee;
    background-image: url(/Content/images/abbw.jpg);
    background-size: cover;
    background-attachment: fixed;
}


h1 {
    font-size: 4em;
    font-weight: bold;
    text-align:center;
    font-family: "Roboto Slab";
    margin: 20px 20px 20px 20px;
    text-transform: capitalize;
}

    h1 span {
        color: #0094ff;
        float: none;
        font-family: "Indie Flower", cursive;
        text-transform: none;
        margin-bottom: 20px;
    }

    h1 sup {
        font-size: 0.4em;
    }

h2 {
    font-size: 2.6em;
    font-weight: bold;
    font-family: "Roboto Slab";
    padding: 0 40px 10px 40px;
    text-transform: capitalize;
}

h2 span {float:right;}

h2 i {
    font-family: 'Roboto Slab';
    display:block;
    margin: 0 auto;
    width: 100%;
}


h3 {
    font-size: 1.8em;
    padding: 0 40px 5px 40px;
    font-weight: bold;
    font-family: 'Roboto Slab';
    text-transform: capitalize;
}

h3 i {
    margin: 0 10px 0 10px;
    font-family: 'Roboto Slab';
}

h4 {
    font-size: 1.6em;
    padding: 0 40px 5px 40px;
    font-weight: bold;
    font-family: 'Roboto Slab';
}

h5 {
    font-size: 1.4em;
    padding: 0 40px 5px 40px;
    font-weight: bold;
    color: #555;
    font-family: 'Roboto Slab';
    text-transform:uppercase;
}

h6 {
    font-size: 1.4em;
    padding: 0 40px 5px 40px;
    font-weight: bold;
    font-family: 'Roboto Slab';
    text-transform: none;
}

pre {
    font-size: 1.6em;
    margin: 0 40px 20px 40px;
    padding: 10px;
    background: rgba(0,0,0,0.25);
}

p {
    font-size: 1.6em;
    padding: 0 40px 20px 40px;
}

p sup {
    font-size: 0.75em;
}

p.strapline {
    font-size: 1.9em;
    font-weight: bold;
    color:#333;
}

p.straplineSm {
    font-weight: bold;
    color:#333;
}

p.straplinePadded {
    padding-top: 10px !important;
}


p.straplinePulledIn {
    font-size: 1.9em;
    font-weight: bold;
    color:#333;
    margin-left: 80px;
    margin-right: 80px;
}

p.largeheader {
    font-size: 4em;
    font-weight: bold;
    text-align:center;
    font-family: "Roboto Slab";
    margin: 20px 20px 20px 20px;
    text-transform: capitalize;
}

p.success {
    display:block;
    background-color:rgb(0,255,0,0.25);
    color:green;
    font-weight: bold;
    padding: 5px 15px;
    text-align:center;
    margin: 0 40px 20px 40px;
    border-radius: 10px;
}

    p.voiceCommand {
        display: inline-block;
        background-color: paleturquoise;
        border: 1px solid turquoise;
        color: black;
        padding: 2px 20px;
        text-align: center;
        margin: 0 40px 10px 40px;
        border-radius: 10px;
        font-style: italic;
        font-size: 1.2em;
    }

    p.protip {
        display: block;
        background-color: #fefeaf;
        color: #333;
        font-weight: normal;
        font-size: 1.4em;
        padding: 5px 15px;
        text-align: left;
        margin: 0 40px 20px 40px;
        border-radius: 10px;
        border: 2px solid #fff;
        box-shadow: rgba(0,0,0,0.1) 1px 1px 1px;
    }

        p.protip:before {
            content: "";
            display: inline-block;
            float:left;
            font-weight: bold;
            background: url("/content/images/v16/icon-idea-32x32.png") no-repeat;
            background-position: 0 0;
            width: 32px;
            height: 32px;
            margin: -16px 10px 24px 0;
        }

        p.protip span.important {
            color:indianred;
            font-weight: bold;
            text-transform:uppercase;
        }

        p.protip span.comingsoon {
            color: cornflowerblue;
            font-weight: bold;
            text-transform: uppercase;
        }

        p.protip span.congratulations {
            color: green;
            font-weight: bold;
            text-transform: uppercase;
        }
    
em {
    font-style:italic;
}

p.titleimage {
    padding-bottom: 0;
    font-size: 3.0em;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: white;
    text-shadow: rgba(0,0,0,1) 0 0 3px;
}

a {
    color: #0094ff;
}

    a.deleteFlightReport {
        background-color:rgba(255,0,0,0.25);
        color:#fff;
        display:block;
        border-radius: 10px;
        text-decoration: none;
        font-weight: bold;
        font-size: 0.8em;
    }

        a.deleteFlightReport:hover {
            background-color: rgba(255,0,0,1);
        }
    a.buynow {
        background-color: #0094ff;
        color: #fff;
        display: inline-block;
        padding: 10px 80px;
        text-decoration: none;
        border-radius: 15px;
        font-size: 1.8em;
        font-weight: bold;
        border: 3px solid #fff;
        line-height: 1.2em;
        text-shadow: 1px 1px 1px #111;
        box-shadow: rgba(0,0,0,0.75) 0 0  1px;
        margin: 20px 0 20px 0;
    }

        a.buynow span {
            display: block;
            font-size: 0.5em;
            opacity: 0.5;
        }

    a.buynow:hover {
        box-shadow: rgba(0,0,0,0.9) 0 0 5px;
    }

#cmdPayNow {
    padding: 20px 40px;
    font-size: 1.6em;
    font-weight: bold;
    display: inline-block;
    color: #fff;
    background-color: #0094ff;
    border: 3px solid rgba(255,255,255,1);
    margin: 0 0 20px 0;
    text-decoration: none;
    border-radius: 5px;
    text-shadow: 1px 1px 1px #111;
}

    #cmdPayNow span {
        font-size: 0.6em;
        opacity: 0.5;
        font-weight: bold;
        display: block;
    }


.hidden {
    display: none;
}

strong {
    font-weight: bold;
}

img {
    max-width: 100%;
}

ul.instructional {
    margin: 0 40px 20px 60px;
    padding:0;
}

ul.instructional li {
    font-size: 1.4em;
    font-weight: bold;
    list-style-type:circle !important;
    padding: 0 0 5px 0;
}

ul.changelog {
    margin: 10px;
}

ul.changelog li {
        font-size: 1.6em;
        margin: 0 0 10px 0;
        clear:both;
        background-color: rgba(0,0,0,0.05);
        border-radius: 5px;
        padding: 5px 10px;
        text-align:left;
}

ul.changelog li.splitter {
    margin-bottom: 40px;
}

ul.changelog li p {
    padding: 0;
    font-size: 1.0em;
}

ul.changelog li ul {
    margin: 10px 0 20px 0px;
}

ul.changelog li ul li {
    font-size: 1.0em;
    border-left: 2px solid #0094ff;
}





ul.changelogv16 {
    margin: 10px 10px 10px 10px;
}

ul.changelogv16 li {
    font-size: 1.6em;
    margin: 0 0 10px 0;
    clear:both;
    background-color: rgba(0,0,0,0.05);
    border-radius: 5px;
    padding: 5px 10px;
    text-align:left;
    font-weight: bold;
}

ul.changelogv16 ul {
    margin: 10px 10px 5px 10px;
}

ul.changelogv16 ul li {
    font-size: 0.9em;
    font-weight: normal;   
}

ul.changelogv16 li p {
    padding: 0 10px 10px 10px;
    font-weight: normal;
}

ul.changelogv16 li p.strapline {
    font-size: 1.1em;
    font-weight: bold;
}

ul.effects {
    margin: 0 20px 20px 20px;
}

    ul.effects li {
        font-size: 1.4em;
        background-color: rgba(0,0,0,0.1);
        padding: 5px 10px;
        margin: 0 0 2px 0;
    }

    ul.effects-thought li {
    }

    ul.effects-positive li {
        background-color: rgba(0,255,0,0.25);
    }

ul.effects-warning li {
    background-color: rgba(255,150,0,0.25);
}

ul.effects-negative li {
    background-color:rgba(255,0,0,0.25);
}

ul.effects li i {
    margin: 0 5px 0 0;
}

span.bug {
    background-color:indianred;
    color:#fff;
    display: inline-block;
    padding: 3px 5px;
    margin: 0 5px 0 0px;
    font-size: 0.6em;
    float:left;
    font-weight: bold;
    display: none;
}

span.bugREADY {
    background-color: rgb(0,255,0,0.25);
    color:#000;
}

span.bugBUGFIX {
    background-color: purple;
    color: #fff;
}
span.bugFIX {
    background-color: purple;
    color: #fff;
}

span.bugRESOLVED {
    background-color: purple;
    color: #fff;
}

span.bugINTERNAL {
    background-color: #333;
    color: #999;
}
span.bugUPDATED {
    background-color: orange;
    color: #000;
}

#header {

}

.warningPanel {
    padding: 10px;
    display: none;

}

    .warningPanel p {
        color: #fff;
        background-color: lightgreen;
        border-radius: 5px;
        padding: 10px 5px;
        text-align:center;
        font-size: 1.2em;
        color:#000;
    }

    .warningPanel p a {
        color:#333;
        font-weight: bold;
    }

.container {
    width: 1140px;
    margin: 0 auto;
}
.topbar {
    background-color:#ffffcc;
    display: none;
}

#burgerP {
    display: none;
}
.logo p {
    padding: 20px 20px 20px 20px;
    text-align: left;
}

    .logo p a {
        text-decoration: none;
        color: #fff;
    }

    .logo p img {
        width: 90px;
        margin: 0;
    }

    .logo p img.santa {
        width: 120px;
        margin: -10px 0 -39px 0;
    }

p.lead {
    font-size: 2.0em;
    margin: 0 0 0 0;
    padding: 0 40px 20px 40px;
}

p.nextaction {
    background-color:rgba(0,255,0,0.25);
    padding: 10px;
    margin: 20px 20px 40px 20px;
    border-radius: 5px;
    border: 3px solid #fff;
    font-weight: bold;
}

p.conversions {
    background-color: rgba(128,128,128,0.25);
    padding: 10px;
    margin: 0 20px 40px 20px;
    border-radius: 5px;
    border: 2px solid #fff;
    font-weight: bold;
}

p.conversions span {
    font-size: 0.8em;
    font-weight: normal;
}

p.showcase {
    text-align:center;
}

#footer {
    /* padding: 20px 0 0 0;
    border-top: 1px solid #aaa;
    position: fixed;
    height: 50px;
    background-color: red;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin-bottom: 0px; */
    text-align:center;
}

p.copyright {
    font-size: 1.2em;
}

p.copyright a.silentlink {
    text-decoration: none;
    color:inherit;
}

#footer p.lanilogic {
    font-size: 1.0em;
}

#footer p.lanilogic img.lanilogic {
    width: 150px;
}

button.discord {
    display: inline-block;
    padding: 10px 40px;
    background-color: #eee;
    border: 3px solid #fff;
    box-shadow: rgba(0,0,0,0.75) 0 0 3px;
    border-radius: 10px;
    color:#aaa;

    text-decoration: none;
    margin-right: 10px;
    margin-bottom: 20px;
    opacity: 1.0;
    text-transform: uppercase;
    cursor: not-allowed;
}

a.actionbutton {
    display: inline-block;
    padding: 5px 40px;
    background-color: #eee;
    border: 3px solid #fff;
    box-shadow: rgba(0,0,0,0.75) 0 0 3px;
    border-radius: 10px;
    color:#000;
    text-transform: uppercase;
    text-decoration: none;
    margin-right: 10px;
    opacity: 1.0;
}

a.actionbutton:hover {
    opacity: 1.0;
    box-shadow: rgba(0,0,0,0.9) 0 0 5px;
}

a.actionbuttonBlue {
    background-color: #0094ff;
    color:#fff;
    padding: 10px 40px;
}

a.actionbuttonBlock {
    display:block;
    text-align:center;
    padding: 10px 20px;
    font-size: 1.5em;
    margin-bottom: 20px;
}

.infoPanel {
    margin: 10px 20px 20px 20px;
    text-align: center;
    /*display: none;*/
}

    .infoPanel p {
        border-radius: 5px;
        padding: 10px 10px;
        font-size: 1.4em;
        border-radius: 5px;
        background-color:rgb(255,255,128,0.25);
        border: 2px solid #fff;
        
    }

        .infoPanel p a {
            font-weight: bold;
        }

        .infoPanel p strong span {
            color:black;
        }

.patchPanel {
    background-color: rgb(255,128,0,0.25) !important;
}

.errorPanel {
    margin: 20px 20px 30px 20px;
    text-align:center;
    /*display: none;*/
}

    .errorPanel p {
        border-radius: 5px;
        padding: 10px 10px;
        font-size: 1.4em;
        border-radius: 5px;
        background-color:rgb(255,128,128,0.25);
        border: 2px solid #fff;
        
    }

        .errorPanel p a {
            font-weight: bold;
        }

        .errorPanel p span {
            color:#c10;
            font-weight: bold;
        }

        .errorPanel p i {
            margin: 0 5px 0 5px;
        }

.infoPanel {
    background-color: rgb(31, 185, 255,0.25);
}

#myAccountArea ul {
    padding: 20px 0 10px 0;
    margin: 0 20px 0 0;
}

#myAccountArea ul li {
    display: inline-block;
    padding: 0;
    margin: 0 0 0 5px;
    border: 0;
    font-size: 1.0em;
    font-family: "Open Sans", sans-serif;
}

p.asterisk {
    margin-bottom: 20px;
}

#myAccountArea ul li a {
    display: block;
    padding: 5px 10px;
    margin: 0;
    text-decoration: none;
    text-transform: uppercase;
    background-color: #eee;
    font-size: 1.4em;
    border-radius: 5px;
    color: #111;
    box-shadow: rgba(0,0,0,0.75) 0 0 1px;
    border: 2px solid #fff;
}

#myAccountArea ul li a:hover {
    box-shadow: rgba(0,0,0,0.9) 0 0 3px;
    border: 2px solid #fff;
}

#myAccountArea ul li.selected a {
    background-color: #111 !important;
    color: #fff;
    font-weight: bold;
}

#myAccountArea ul li.buy a {
    background-color: #0094ff;
    border: 3px solid #fff;
    box-shadow: rgba(0,0,0,0.75) 0 0 5px;
    border-radius: 10px;
    color:#fff;
    font-weight: bold;
}

#myAccountArea ul li.discord a {
    background-color:	#7e61ab ;
    box-shadow: rgba(0,0,0,0.75) 0 0 5px;
    color:#fff;
}

#myAccountArea ul li.dashboard a {
    background-color: #0094ff;
    border: 3px solid #fff;
    box-shadow: rgba(0,0,0,0.75) 0 0 5px;
    border-radius: 10px;
    color: #fff;
    font-weight: bold;
}

#myAccountArea ul li.logoff a {
    background-color: indianred;
    border: 3px solid #fff;
    box-shadow: rgba(0,0,0,0.75) 0 0 5px;
    border-radius: 10px;
    color: #fff;
    font-weight: bold;
}

#myAccountArea ul li a:hover {
    font-weight: bold;
}

#myAccountArea ul li a i {
    margin: 0 5px 0 0;
}


#navigation ul {
    padding: 0;
    margin: 0 20px 0 0;
}

    #navigation ul li {
        display: inline-block;
        padding: 0;
        margin: 0 0 0 5px;
        border: 0;
        font-size: 1.0em;
        font-family: "Open Sans", sans-serif;

    }


        #navigation ul li a {
            display: block;
            padding: 5px 10px;
            margin: 0;
            text-decoration: none;
            text-transform: uppercase;
            background-color: #eee;
            font-size: 1.4em;
            border-radius: 5px;
            color:#111;
            box-shadow: rgba(0,0,0,0.75) 0 0 1px;
            border: 2px solid #fff;
        }

        #navigation ul li a:hover {
            box-shadow: rgba(0,0,0,0.9) 0 0 3px;
        }



        #navigation ul li.selected a {
            background-color: #111 !important;
            color: #fff !important;
            font-weight: bold;
        }

        #navigation ul li.buy {
            margin: 10px 0 30px 0;
            background-color: #0094ff;
            font-size: 2.2em;
            border: 3px solid #fff;
            box-shadow: rgba(0,0,0,0.75) 0 0 5px;
            border-radius: 10px;
            text-shadow: 1px 1px 1px #111;
        }

        #navigation ul li.support a {
            background-color: rgb(0,255,0,0.25);
            color: #000;
            font-weight: bold;
        }


        #navigation ul li.manual a {
            background-color: rgb(0,255,255,0.25);
            color: #000;
            font-weight: bold;
        }

        #navigation ul li a:hover {
            font-weight: bold;
        }

        #navigation ul li a i {
            margin: 0 5px 0 0;
        }

        #navigation ul li a i.fa-home {
            margin: 0;
        }


ul.featurelist {
    margin: 0 40px 40px 20px;
}

    ul.featurelist li {
        font-size: 1.6em;
        margin: 0 0 10px 10px;
        clear:both;
        background-color: rgba(0,0,0,0.05);
        border-radius: 5px;
        padding: 10px 0 10px 0;
        text-align:left;
    }

        ul.featurelist li i {
            margin: -2px 10px 10px 5px;
            background-color:lightgreen;
            padding: 5px;
            border-radius: 5px;
            color:#000;
            float:left;
        }

        ul.featurelist sup {
            font-size: 0.5em;
        }

    ul.featurelist span {
        color: #0094ff;
        float: right;
        font-family: "Indie Flower", cursive;
        text-transform: none;
        font-weight: bold;
        font-size: 1.1em;
        font-style:italic;
        display:block;
        margin: -5px -10px 5px 0;
    }

        ul.featurelistSm li {
            font-size: 1.4em;
            margin-bottom: 1px !important;
            margin-top: 0 !important;
            padding: 5px;
        }

        ul.featurelistSm li i {
            margin: 2px 5px 40px 0;
        }



.roadmapItem {
    background-color:rgba(255,255,255,0.75);
    margin: 0 20px 10px 20px;
    padding: 0 0 0 0;
    box-shadow: rgba(0,0,0,0.25) 2px 2px;
    border: 3px solid #fff;
}

    .roadmapItem h2 {
        background-color: rgba(0, 255, 144, 0.1);
        padding: 10px 20px;
        margin: 0 0 0 0;
        text-align:left;
        font-size: 1.6em;
    }

        .roadmapItem h2 span {
            float: right;
        }

        .roadmapItem h2 a {
            float:right;
            margin-left: 20px;
        }

    .roadmapItem h3 {
        padding: 0 20px 10px 20px;
    }

    .roadmapItem h4 {
        padding: 0 20px 10px 20px;
        margin: 0;
    }

    .roadmapItem hr.reportHrSmall {
        margin: 20px 20px 20px 20px;
    }

    .roadmapItem p {
        padding: 0 20px 20px 20px;
    }

.roadmapItemAllVersions {
    background-color: rgba(0, 148, 255, 0.25)
}

    .roadmapItemAllVersions h2 {
        background-color: rgba(0, 148, 255, 0.25);
        padding: 10px 20px;
        margin: 0 0 20px 0;
        font-size: 2.0em;
    }


    .roadmapItemCurrent {
        background-color: white;
    }
    
        .roadmapItemCurrent h2 {
            background-color: lightgreen;
            font-size: 2.0em;
        }

.roadmapItemInDevelopment {
    background-color: rgba(255, 170, 0, 0.25);
}

    .roadmapItemInDevelopment h2 {
        background-color: rgba(255, 170, 0, 0.25);
        padding: 10px 20px;
        margin: 0 0 20px 0;
        font-size: 2.0em;
    }


.roadmapItemFeedback {
    background-color: rgba(0, 148, 255, 0.25);
}

    .roadmapItemFeedback h2 {
        background-color: rgba(0, 148, 255, 0.25);
        padding: 10px 20px;
        margin: 0 0 20px 0;
        font-size: 2.0em;
    }

.roadmapItemPlanned {
    background-color: rgba(255,255,255,0.25);
}

    .roadmapItemPlanned h2 {
        background-color: rgba(255,255,255,0.25);
        padding: 10px 20px;
        margin: 0 0 20px 0;
        font-size: 2.0em;
    }

.roadmapItemEOEAP {
    background-color: rgba(204, 17, 0, 0.25);
}

    .roadmapItemEOEAP h2 {
        background-color: rgba(204, 17, 0, 0.25);
        padding: 10px 20px;
        margin: 0 0 20px 0;
        font-size: 2.0em;
    }


.roadmapItemInProgress {
    background-color: rgba(110, 0, 80, 0.1);
}

    .roadmapItemInProgress h2 {
        background-color: rgba(255, 0, 110, 0.1);
        padding: 10px 20px;
        margin: 0 0 20px 0;
        font-size: 2.0em;
    }


.newsItem h2 {
    font-weight: bold;
    margin: 0 40px 10px 40px;
    padding: 0;
    text-align: left;
}

.newsItem p.timestamp {
    font-size: 1.2em;
    margin:  0 0 0 0;
    font-weight: normal;
    text-transform: uppercase;
    clear: left;
    /*border-top: 1px dotted #777;*/
    border-bottom: 1px dotted #777;
    padding: 0 0 5px 0;
    margin: 0 40px 10px 40px;
}

.newsItem h3 {
    
}

p.newsThumb {
    text-align:center;
    padding-right: 40px;
}

p.newsThumb img {
    width: 100%;
}


p.newsThumbEmpty {
    display:block;
    background-color:#fafafa;
    color:#777;
    padding: 40px;
    text-align:center;
    font-size: 6em;
    font-weight: bold;
    margin: 0 40px 0 40px;
}

.newsItemDark {
    background-color:rgba(0,0,0,0.5) !important;
}

.newsItemDark h2 {
    color:#111;
    border-bottom: 3px solid #111;
}

.newsItemDark p {
    color:#111;
}

.newsItem ul {
    margin: 0 40px 20px 40px;
}

    .newsItem ul li {
        font-size: 1.4em;
        list-style-type: disc;
        margin-left: 20px;
    }

.newsItemDark a {
    color:#aaa;
}

    .newsItemDark hr {
        background-color: #111 !important;
    }

    span.serialNumber {
        background-color:yellow;
        display: inline-block;
        padding: 5px 10px;
        width: 400px;
        font-family: Courier New, Courier, monospace;
        font-weight: bold;
    }


strong.categorydescriptor {
    background-color:#ddd;
    font-size: 0.75em;
    padding: 2px 5px;
    border: 1px solid #fff;
    border-radius: 5px;
    margin-left: -6px;
}

.whitebox {
    background-color:rgba(255,255,255,1);
    margin-bottom: 20px;
    padding-top: 20px;
    margin: 0 10px 20px 10px;
}

.didyouknow {
    margin-top: 40px;
    margin-bottom: 40px;
    text-align:center;
    border: 1px solid #fff;
    background-color: rgba(0, 148, 255, 0.1);
    border-radius: 10px;
    display: none;
}

    .didyouknow p {
        font-style: normal;
        background-color: rgba(255,255,255,0.25);
        border-radius: 20px;
        padding: 20px;
        color:#555;
        font-size: 1.6em;
    }
    .didyouknow p span {
        font-family: "Indie Flower", cursive;
        font-weight: bold;
        font-style: normal;
        color:#0094ff;
        display:block;
        font-size: 2.0em;
    }

.wrapper {
    background-color: rgba(255,255,255,0.5);
    border: 3px solid #fff;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-top: 20px;
}

.animationWrapper {
    background-color: rgba(255,255,255,1);
    border: 3px solid #fff;
    border-radius: 10px;
    margin: 0 40px 20px 40px;
    padding: 0 0;
    box-shadow: rgba(0,0,0,0.25) 1px 1px 1px;
    display: block;
}

.animationWrapper p {
    padding: 0 20px 0 20px;
    margin: 0;
    font-size: 1.3em;
    font-style:italic;
}

.animationWrapper p img {
    border: 0;
}

.flightReportWrapper {
    background-color: rgba(255,255,255,0.5);
    border: 3px solid #fff;
    border-radius: 20px;
    margin-top: 60px;
    margin-bottom: 40px;
}

.flightinfoWrapper {
    /*background-color: rgba(255,255,255,0.25);
    margin-bottom: 20px;
    padding-top: 20px;
    border: 1px solid rgba(0,0,0,0.25);*/
}


div.videowrapper {
    margin: 0 40px 40px 40px;
}

.videothumbnail {
    display:block; 
    margin: 0 40px 20px 40px;
    padding: 0;
		overflow:visible;
		position:relative;
    cursor: pointer;
	}

.videothumbnail img {
    width:100%;
		object-fit: contain;
		object-position: center;
        box-shadow: rgba(0,0,0,0.5) 1px 1px 10px;
}

.videothumbnail::after {
    content:"";
		display:block;
		position:absolute;
		top:0;
		left:0;
		height:100%;
		width:100%;
		background-image:url("/content/images/youtube-play.png");
		background-position: center center;
		background-repeat:no-repeat;
		background-size:150px;
    filter: drop-shadow(0 0 10px rgba(0,0,0,.4));
    pointer-events: none;
}

.videothumbnail:hover::after {
    background-size:160px;
    /* -webkit-transition: background-size .1s ease-in-out;
    -moz-transition: background-size .1s ease-in-out;
    -o-transition: background-size .1s ease-in-out;
    transition: background-size .1s ease-in-out; */

	}

p.flagWrapper {
    background-color:#eee;
    border: 3px solid #fff;
    display: inline-block;
    box-shadow: rgba(0,0,0,0.25) 1px 1px 10px;
    margin: -50px 0 10px 0;
    padding: 20px 15px;
    border-radius: 100px;
}

div.reportFlightSummary {
    
}

p.reportTime {
    display: inline-block;
    background-color: rgba(0,0,0,0.1);
    padding: 5px 10px;
    margin: 5px 0 5px 0;
    border-radius: 10px;
    font-size: 1.4em;
    text-transform:uppercase;
    width: 80%;
}

    p.reportTime i {
    }

    p.reportTime span {
        display: inline-block;
        width: 80px;
        text-align: right;
        margin-right: 10px;
    }


p.reportSectionTagline {
    display: inline-block;
    background-color: rgba(0,0,0,0.1);
    padding: 5px 10px;
    margin: 0px 0 20px 0px;
    border-radius: 10px;
    font-size: 1.4em;
    text-transform: uppercase;
    width: 90%;
}

p.reportSummary {
    background-color: rgba(0,0,0,0.1);
    padding: 5px 10px;
    font-weight: bold;
    border-radius: 10px;
    font-size: 1.4em;
    text-transform: uppercase;
    width: 90%;
    margin: 0 auto 10px auto;
}


p.reportResultDescription {
    padding: 5px 10px;
    margin: 5px 70px 5px 70px;
    font-size: 1.4em;
    border-bottom: 1px solid rgba(0,0,0,0.25);
    text-align:left;
}

p.reportResultDescriptionnotchecked {
    display: none;
}

    p.reportResultDescription strong {
        text-transform: uppercase;
    }

p.reportResultDescription span.passrequirement {
    
}

p.reportResultDescription span.score {
    float: right;
    /*font-family: "Indie Flower", cursive;*/
    font-weight: bold;
    text-transform: lowercase;
    display: inline-block;
    padding: 2px 10px;
    margin-right: -10px;
    margin-left: 10px;
    margin: 0 -10px 10px 10px;
    border: 1px solid #aaa;
    vertical-align: bottom;
    border-radius: 5px;
    clear: right;
    border: 3px solid #fff;
    box-shadow: rgba(0,0,0,0.25) 1px 1px 10px;
    /*text-shadow: 0px 0px 5px rgba(0,0,0,0.1);*/
    /*text-shadow: -2px -2px 0 rgba(0,0,0,1), 2px -2px 0 rgba(0,0,0,1), -2px 2px 0 rgba(0,0,0,1), 2px 2px 0 rgba(0,0,0,1);*/
}

p.reportResultDescription span.resultDescription {
    font-style:italic;
    font-size: 0.9em;
}

img.screeny {
}

hr.reportHr {
    border: 0;
    margin: 20px 0 40px 0;
    padding: 0;
    height: 5px;
    background-color:#fff;
}

hr.reportHrSmall {
    border: 0;
    margin: 20px 40px 40px 40px;
    padding: 0;
    height: 2px;
    background-color: #fff;
}

.passed {
    background-color: rgb(0,255,0,0.25);
    background-color: rgba(144, 238, 144,0.5) !important;
}

.warning {
    background-color: orange;
    background-color: rgba(255,165,0,0.5) !important;
}

.failed {
    background-color: indianred;
    background-color: rgba(205,92,92,0.5) !important;
}

.flightControlRating {
    margin: 20px 10px 20px 10px;
    padding: 10px 0 10px 10px;
    border-radius: 10px;
    border: 3px solid #fff;
    box-shadow: rgba(0,0,0,0.25) 1px 1px 10px;
}

.flightControlRating h3 {
    font-size: 2.4em;
    padding-left: 0;
    padding-right: 0;
}

.flightControlRating p {
    font-size: 1.2em;
    font-weight:bold;
    padding: 0;
    margin: 0;
}


.sharelinks {
    margin: 0 auto 40px auto;
}

.sharelinks div {
    display: inline-block !important;
}

.sharelinks div.bitTwitter {
    vertical-align:middle;
    margin-top: -5px;
    margin-right: 20px;
}


.tablewrapper {
    margin: 0 40px 40px 40px;
}

.tablewrapper p {
    padding: 10px 0 0 0;
    font-style:italic;
    font-size: 1.2em;
}

table {
    width: 100%;
    box-shadow: rgba(0,0,0,0.1) 2px 2px;
    border: 3px solid #fff;
}

tr {
    border-bottom: 1px solid #ddd;
}

th {
    font-size: 1.4em;
    padding: 5px 5px;
    font-weight: bold;
    background-color: rgba(0,0,0,0.1);
}

th.aligncenter {
    text-align: center;
}

th.alignright {
    text-align: right;
}

td {
    font-size: 1.4em;
    padding: 5px 2px;
    font-weight: normal;
    background-color:#fff;
}

td.aligncenter {
    text-align:center;
}

td.alignright {
    text-align:right;
}

td.currentVersion {
    font-weight: bold;
    color: green;
}

td a.passed {
    padding: 2px 5px;
    display: block;
    border-radius: 5px;
    color:#111;
    text-decoration: none;
}

    td a.warning {
        padding: 2px 5px;
        display: block;
        border-radius: 5px;
        color: #111;
        text-decoration: none;
    }

    td a.failed {
        padding: 2px 5px;
        display: block;
        border-radius: 5px;
        color: #111;
        text-decoration: none;
    }

    th.paging {
        background-color:#fff !important;
        text-align:right;
    }

    th.paging a {
        display: inline-block;
        padding: 5px 10px;
    }

    th.paging a.selected {
        color:#111;
        text-decoration: none;
    }


.cabinLayoutsWrapper {
    background-color: rgba(255,255,255,0.5);
    border: 3px solid #fff;
    margin: 0 40px 40px 40px;
}

h2.aircraftCode {
    background-color:rgba(0,0,0,0.1);
    margin: 1px 0 0 0;
    padding: 5px 10px;
    font-size: 1.6em;
    cursor: pointer;
}

h2.aircraftCode i {
    margin-left: 0px;
    margin-right: 10px;
    width: auto !important;
}

h2.aircraftCode button {
    float:right;
    margin: -2px -5px 0 0;
}

h2.supportHeader i {
    float:left;
    width: auto !important;
    margin-right: 10px;
    margin-bottom: 0;
}

.tablewrapperAircraft {
    background-color:rgba(0,0,0,0.1);
    margin: 10px 10px 10px 10px;
}

.collapsed {
    display: none;
}

button.commandButton {
    border: 2px solid #fff;
    padding: 5px 10px;
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 10px;
}

button.commandButtonLarge {
    font-size: 1.4em;
}

button.installer {
    border: 2px solid #fff;
    padding: 5px 10px;
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;
    font-size: 12px;
    margin: -10px -20px 0 10px;
}

button.saver {
    background-color: rgba(144, 238, 144,0.5) !important;
}

button.saverLarge {
    margin-left: 20px;
}

button.notInstalled {
    background-color: rgba(144, 238, 144,0.5) !important;
    border-color: #fff;
    color:#111;
}

button.installed {
    border-color: #fff;
    background-color: rgba(205,92,92,0.5) !important;
    color:#111;
}

button.greyedout {
    border-color: #fff;
    background-color: rgba(128,128,128,0.25) !important;
    color: #999;
    cursor: not-allowed;
}

.tabs {
   
    margin: 20px 0 20px 0;
    text-align:left;
}

    .tabs ul {
        margin: 0 40px 0 40px;
        border-bottom: 3px solid #fff;
    }

    .tabs ul li {
        display: inline-block;
        padding: 10px 20px;
        border: 3px solid #fff;
        border-bottom: 0;
        border-right: 0;
        background-color: #ddd;
        font-size: 1.6em;
        font-weight: normal;
        cursor: pointer;

        
    }

.tabs ul li:last-child {
    border-right: 3px solid #fff;
}

        .tabs ul li.tabSelected {
            /*background-color: rgba(144, 238, 144,0.5) !important;*/
            background-color:#fff;
            font-weight: bold;
            /*border-bottom: 3px solid rgba(144, 238, 144,0.5);*/
        }

.aircraftLayoutWrapper {
    display: block;
    width: 100%;
    margin: 0 0 20px 0;
    overflow:scroll;
}

    .aircraftLayoutWrapper .deck {
        display: block;
        margin: 0 20px 20px 20px;
        text-align: center;
        background-color: #111;
        padding: 20px;
        width: 1200px;
    }

        .aircraftLayoutWrapper .deck .row {
            background-color: #222;
            margin: 1px 0 0 0;
            display: block;
            text-align: left;
        }

            .aircraftLayoutWrapper .deck .row .seat {
                width: 5px;
                height: 5px;
                border: 2px solid #333;
                background-color: #000;
                margin: 2px 2px 2px 2px;
                display: inline-block;
            }


            .aircraftLayoutWrapper .deck .row .seatDoor {
                background-color: #00ff90;
                border: 2px solid #00ff90;
            }

            .aircraftLayoutWrapper .deck .row .seatWall {
                background-color: rgba(204, 17, 0, 0.25);
                border: 2px solid rgba(204, 17, 0, 0.25);
            }

            .aircraftLayoutWrapper .deck .row .seatAisle {
                background-color: #000;
                border: 2px solid #000;
            }

            .aircraftLayoutWrapper .deck .row .seatAisleStart {
                background-color: #222;
                border: 2px solid rgba(0, 255, 144, 0.25);
            }

            .aircraftLayoutWrapper .deck .row .seatAisleEnd {
                background-color: #222;
                border: 2px solid rgba(204, 17, 0, 0.25);
            }

            .aircraftLayoutWrapper .deck .row .seatCockpit {
                background-color: #222;
                border: 2px solid #00ffe0
            }

            .aircraftLayoutWrapper .deck .row .seatIntercom {
                background-color: #222;
                border: 2px solid #ffaa00;
            }

            .aircraftLayoutWrapper .deck .row .seatGalley {
                background-color: rgba(0, 148, 255, 0.50);
                border: 2px solid rgba(0, 148, 255, 0.50);
            }

            .aircraftLayoutWrapper .deck .row .seatKitchen {
                background-color: #222;
                border: 2px solid rgba(0, 148, 255, 0.75);
            }

            .aircraftLayoutWrapper .deck .row .seatStairs {
                background-color: rgba(255, 170, 0, 0.25);
                border: 2px solid rgba(255, 170, 0, 0.25);
            }

            .aircraftLayoutWrapper .deck .row .seatToilet {
                background-color: rebeccapurple;
                border: 2px solid rebeccapurple;
            }


            .aircraftLayoutWrapper .deck .row .seatSupersonic {
                background-color: goldenrod;
                border: 2px solid goldenrod;
            }


            .aircraftLayoutWrapper .deck .row .seatFirstClass {
                background-color: gold;
                border: 2px solid gold;
            }


            .aircraftLayoutWrapper .deck .row .seatBusiness {
                background-color: #0094ff;
                border: 2px solid #0094ff;
            }


            .aircraftLayoutWrapper .deck .row .seatPremium {
                background-color: white;
                border: 2px solid white;
            }


            .aircraftLayoutWrapper .deck .row .seatEconomy {
                background-color: grey;
                border: 2px solid grey;
            }

            .aircraftLayoutWrapper .deck .row .seatOutOfUse {
                background-color: #555;
                border: 2px solid #555;
            }


.aircraftEditorWrapper {
    display: block;
    width: 100%;
    margin: 0 0 20px 0;
}

    .aircraftEditorWrapper .aircraftEditor {
        margin: 0 20px 0 20px;
    }

    .aircraftEditorWrapper form {
        text-align: center;
    }

    .aircraftEditorWrapper .aircraftEditor form input[type="text"] {
        display: block;
        margin: 0;
        padding: 5px 0;
        text-align: center;
        font-size: 1.6em;
        width: 100%;
    }

    .aircraftEditorWrapper .aircraftEditor form select {
        display: block;
        margin: 0;
        padding: 5px 0;
        text-align: center;
        font-size: 1.6em;
        width: 100%;
        text-align-last: center;
    }

        .aircraftEditorWrapper .aircraftEditor form select option {
            text-align: center;
            display: block;
        }

    .aircraftEditorWrapper .aircraftEditor form .controlWrapper {
        padding: 10px;
        display: block;
    }

    .aircraftEditorWrapper .aircraftEditor form textarea {
        display: block;
        margin: 0;
        text-align: left;
        padding: 10px 0;
        font-size: 1.4em;
        height: 300px;
        font-family: Courier New, Courier, monospace;
        white-space: pre; /* will prevent the default wrapping of text to next line */
        /* white-space: nowrap; */
        
        overflow-x: auto; /* will make horizontal scroll-bar appear only when needed */
        text-align: left;
        width: 100%;
    }

    .aircraftEditorWrapper .aircraftEditor form label {
        display: block;
        padding: 5px 0;
        margin: 0;
        text-transform: uppercase;
        font-size: 1.4em;
    }


ul.errors {
    margin: 0 40px 20px 40px;
}

    ul.errors li {
        display: block;
        background-color: indianred;
        color: yellow;
        text-align: center;
        padding: 5px 10px;
        font-size: 1.4em;
        margin: 0 0 1px 0;
    }


table i.fa-check {
    color: green;
}

table i.fa-times {
    color:indianred;
}

table i.fa-exclamation-triangle {
    color:orange;
    font-size: 0.75em;
}

table em {
    font-style: italic;
    font-size: 0.8em;
}

a.installed {
    text-decoration: underline !important;
    color: indianred !important;
    font-weight: bold !important;
}

a.notInstalled {
    text-decoration: underline !important;
    color: green !important;
    font-weight: bold !important;
}

a.greyedout {
    text-decoration: none;
    cursor: not-allowed;
    color:#aaa;
}


.usermanual h2 {

}

.usermanual h3 {

}

.usermanual h4 {

}

.usermanual h5 {

}

.usermanual h6 {

}

.usermanual ul {
    margin: 0 40px 20px 40px;
}

.usermanual ul li {
    font-size: 1.4em;
    list-style-type: disc;
    margin-left: 20px;
}

.usermanual ol {
    margin: 0 40px 20px 40px;
}

    .usermanual ol li {
        font-size: 1.4em;
        list-style-type: decimal;
        margin-left: 20px;
    }


/*.usermanual pre {
    display:block;
    background-color:#000;
    color:#fff;
    margin: 0 40px 20px 40px;
    font-size: 1.6em;
    padding: 10px 0 10px 0;
}*/

.usermanual pre {
    display: inline-block;
    font-family: "Courier New", monospace; /* Must be a monospace font */
    font-size: 1.6em;
    color: #FFF;
    letter-spacing: .5em;
    text-indent: .2em;
    margin: 0 40px 20px 40px;
    background: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) .2em, rgba(255,255,255,0) .2em), /* Hide extra BG caused by text-indent */
    linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 90%, rgba(255,255,255,1) 90%, rgba(255,255,255,1) 100%);
    background-size: 100%, 1.1em;
}

.usermanual td pre {
    font-size: 1.2em;
    margin: 5px 10px;
}


.usermanual li pre {
    font-size: 1.2em;
    margin: 5px 10px;
}


.usermanual pre.multirow {
    margin-top: 0 !important;
    margin-bottom: 1px !important;
}

.usermanual pre span.galley {
    color: cornflowerblue;
    font-weight: bold;
}

.usermanual pre span.wall {
    color: red;
    font-weight: bold;
}

.usermanual pre span.door {
    color: greenyellow;
    font-weight: bold;
}

.usermanual pre span.intercom {
    color: orange;
    font-weight: bold;
}

.usermanual pre span.aisle {
    color: grey;
    font-weight: bold;
}


.usermanual pre span.cockpit {
    color: deepskyblue;
    font-weight: bold;
}

.usermanual pre span.startpoint {
    color: green;
    font-weight: bold;
}


.usermanual pre span.endpoint {
    color: indianred;
    font-weight: bold;
}

.usermanual pre span.kitchen {
    color: yellow;
    font-weight: bold;
}

.usermanual pre span.toilet {
    color: mediumpurple;
    font-weight: bold;
}

.usermanual .exampleButton {
    display: inline-block;
    width: 200px;
    background-color:rgba(0,0,0,0.75);
    border-radius: 10px;
    padding: 5px 5px;
    text-align:center;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: rgba(0,0,0,0.75) 0px 0px 5px;
    color:#fff;
    margin: 0 5px 5px 0;
}

.usermanual .exampleButtonLightGreen  {
    color: lightgreen;
    border: 3px solid lightgreen;
}

.usermanual .exampleButtonOrange {
    color: orange;
    border: 3px solid orange;
}
.usermanual .exampleButtonRed {
    color: indianred;
    border: 3px solid indianred;
}

.usermanual .exampleButtonBlue {
    color: cornflowerblue;
    border: 3px solid cornflowerblue;
}


.usermanual .exampleButtonGrey {
    color: grey;
    border: 3px solid grey;
}


.usermanual #toc ul {
    margin: 0 0 20px 40px;
    padding: 0;
}

    .usermanual #toc ul li {
        list-style-type: none;

    }

    .usermanual #toc ul li {    font-size: 18px;}
    .usermanual #toc ul li[data-level="2"] {    font-size: 18px;font-weight: bold;margin-bottom: 5px;}
        .usermanual #toc ul li[data-level="3"] {
            font-size: 16px;
            border-left: 1px dotted rgba(0,0,0,0.25);
            padding: 0 20px 5px 20px;
            margin: 0 0 1px 0;
        }
        .usermanual #toc ul li[data-level="4"] {
            font-size: 14px;
            border-left: 1px dotted rgba(0,0,0,0.25);
            padding: 0 20px 5px 20px;
            margin: 0 0 1px 0;
        }
        .usermanual #toc ul li[data-level="5"] {
            font-size: 13px;
            border-left: 1px dotted rgba(0,0,0,0.25);
            padding: 0 20px 5px 20px;
            margin: 0 0 1px 0;
        }
        .usermanual #toc ul li[data-level="6"] {
            font-size: 12px;
            border-left: 1px dotted rgba(0,0,0,0.25);
            padding: 0 20px 5px 20px;
            margin: 0 0 1px 0;
        }
        .usermanual #toc ul li[data-level="7"] {
            font-size: 11px;
            border-left: 1px dotted rgba(0,0,0,0.25);
            padding: 0 20px 5px 20px;
            margin: 0 0 1px 0;
        }

.usermanual span.exampleRed {
    color:indianred;
    font-weight: bold;
}

.usermanual span.exampleOrange {
    color: orange;
    font-weight: bold;
}

.usermanual span.exampleDarkGreen {
    color: green;
    font-weight: bold;
}

.usermanual span.exampleGreen {
    color: rgb(0,255,0,0.25);
    font-weight: bold;
}


.loginform {
    display: block;
    background-color: rgba(255,255,255,0.5);
    border: 3px solid #fff;
    border-radius: 10px;
    padding: 20px 0;
    margin: 0 auto 40px auto;
    box-shadow: rgba(0,0,0,0.1) 1px 1px 1px;
    text-align:center;
    width: 75%;
}

/* .loginform h2 {
    background-color:#333;
    margin: 5px 5px 40px 5px;
    border-radius: 5px;
    font-size: 1.8em;
    padding: 5px 40px;
    color:#fff;
} */

.loginform input[type="text"] {
    padding: 10px 40px;
    font-size: 2.6em;
    text-align:center;
    background-color:#fff;
    border: 1px solid #777;
    border-radius: 5px;
    color:#333;
    box-shadow: rgba(0,0,0,0.25) 0 0 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}


    .loginform input[type="password"] {
        padding: 10px 40px;
    font-size: 2.6em;
    text-align:center;
    background-color:#fff;
    border: 1px solid #777;
    border-radius: 5px;
    color:#333;
    box-shadow: rgba(0,0,0,0.25) 0 0 10px;
    margin-top: -20px;

    }

    .loginform input[type="submit"] {
        background-color: #0094ff;
        color: #fff;
        border: 2px solid #fff;
        border-radius: 5px;
        padding: 10px 20px;
        margin: 0 auto 20px auto;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 1.6em;
        box-shadow: rgba(0,0,0,0.1) 1px 1px 1px;
    }

    .validation-summary-errors ul li {
        color: #c10;
        font-weight: bold;
        font-size: 1.6em;
        display: inline-block;
        background-color:rgba(255,0,0,0.1);
        padding: 5px 40px;
        border-radius: 10px;
    }

    p span.field-validation-error  {
        color: #c10;
        font-weight: bold;
        font-size: 1.0em;
        display: inline-block;
        background-color:rgba(255,0,0,0.1);
        padding: 5px 40px;
        border-radius: 10px;
        margin: -10px 0 10px 0;
    }

form.supportSearch i {
    font-size: 1.2em;
}

form.supportSearch {
    float: right;
    margin: 0 40px 10px 0;
}

    form.supportSearch input[type="text"] {
        padding: 5px;
        width: 200px;
        margin-left: 10px;
    }

form.supportSearch input[type="submit"] {
    padding: 5px;
    cursor:pointer;
}

ul.simlogos {
    margin: 20px auto 20px auto;
}

ul.simlogos li {
    display: inline-block;
    margin: 20px 20px 20px 20px;
}

ul.ailogos {
    margin: 20px auto 20px auto;
}

    ul.ailogos li {
        display: inline-block;
        margin: 20px 0 20px 0;
    }

#footer ul.socials {
    margin: 0 40px 20px 40px;
}

#footer ul.socials li {
    display: inline-block;
    margin-left: 10px;
}

#footer ul.socials li img {
    width: 32px;
}



div.liveflight {
    background-color:rgba(0,0,0,0.1);
    margin: 0 40px 10px 40px;
    display:block;
}

div.liveFlightOlder {
    opacity: 0.5;
}

div.liveflight p {
    font-size: 1.2em;
    padding: 5px 10px;
    margin: 0;
}

div.liveflight p img.flag {
    width: 18px;
    float:left;
    margin: 0 5px 0 0;
}

div.liveflight p img.airlinelogo {
    float:left;
    margin: 0 10px 5px 0;
    height: 32px;
}

div.paxinfo {
    background-color: rgba(0,0,0,0.1);
    margin: 0;
    display: block;
}

div.paxinfo p {
    font-size: 1.0em;
    padding: 2px 10px;
    margin: 0;
    text-transform:uppercase;
}


ul.latestnews {
    margin: 0 40px 10px 40px;
}

ul.latestnews li {
    border-bottom: 1px dotted #333;
    font-size: 1.2em;
    margin: 0 0 10px 0;
    padding: 0 0 10px 0;
    font-style:italic;
}

ul.latestnews li a {
    font-weight: bold;
    font-style: normal;
    font-size: 1.2em;
}

ul.latestnews li:last-child {
    border-bottom: 0;
}

ul.latestarrivals {
    margin: 0 40px 10px 40px;
}

    ul.latestarrivals li {
        border-bottom: 1px dotted #333;
        font-size: 1.2em;
        margin: 0 0 10px 0;
        padding: 0 0 10px 0;
        font-style: italic;
    }

        ul.latestarrivals li a {
            font-weight: bold;
            font-style: normal;
            font-size: 1.2em;
        }

        ul.latestarrivals li:last-child {
            border-bottom: 0;
        }

        ul.latestarrivals span.rating {
            border-radius: 5px;
            margin: 5px 5px 0 0;
            padding: 2px 10px 3px 10px;
            display: inline-block;
            border: 1px solid #fff;
            font-size: 0.8em;
            background-color:rgba(0,0,0,0.1);
        }

        ul.latestarrivals span.pass {
            background-color: lightgreen;
        }

        ul.latestarrivals span.warning {
            background-color: orange;
        }

        ul.latestarrivals span.fail {
            background-color: indianred;
            color:#fff;
        }


        div.testimonials {
            margin: 0 20px 20px 20px;
        }

            div.testimonial {
                margin: 0 20px 20px 20px;
                background-color: #eee;
                border: 1px solid #ddd;
                border-radius: 10px;
                display: block;
                font-style: italic;
            }

                div.testimonial p.quote {
                    padding: 20px 20px 0 20px;
                }
                    div.testimonial p.name {
                        font-weight: bold;
                        font-size: 1.2em;
                    }


audio {
    margin-bottom: 40px;
}



    /* dark mode styles */
body.dark-mode {
    background-color: #333;
    background-image: url(/Content/images/abbw-dark.jpg);
    color: #ddd;
}

body.dark-mode div.wrapper {
    background-color: rgba(0,0,0,0.25);
    border-color: rgba(255,255,255,0.05);
}

    body.dark-mode p.strapline {
        color: inherit;
    }
    
    body.dark-mode p.straplineSm {
        color: inherit;
    }

    body.dark-mode p.protip {
        background-color: #111;
        color:inherit;
        border-color:#333;
    }

    body.dark-mode hr {
        background-color:#333;
    }

    body.dark-mode p.straplinePulledIn {
        color:inherit;
    }

    body.dark-mode h1 {
        text-shadow: 1px 1px 2px rgba(0,0,0,0.9);
    }

    body.dark-mode a.actionbutton {
        background-color: #333;
        border: 3px solid #444;
        box-shadow: rgba(0,0,0,0.75) 0 0 3px;
        color: inherit;
    }