/*
#0A1229 dark blue
#334166 mid blue
#3981AC light blue
#B3F04C bright green
#808080 grey*/


html {
    margin              : 0;
    padding             : 0;
    min-height          : 100%;
    height              : 100%;
    width               : 100%;
}

body {
    width               : 100%;
    margin              : 0 auto;
    font                : normal 14px/14px Roboto, Helvetica, Arial;
    padding             : 0;
    min-height          : 100%;
    height              : 100%;
    display             : -webkit-flex;
    display             : -ms-flex;
    display             : flex;
    -ms-flex-direction  : column;
    -webkit-flex-flow   : column;
    flex-direction      : column;
}

a {
    text-decoration     : none;
}

h1 {
    font                : bold 1.875em/1.25em Lora, Helvetica, Arial;
}

h2 {
    font                : bold 1.375em/1.25em Lora, Helvetica, Arial;
}

#header {
    background-color    : #0A1229;
    width               : 100%;
    margin              : 0;
    text-align          : center;
    padding             : .5em 0 1.5em;
    /*border-bottom       : .5em solid #0A1229;*/
    min-height          : 66px;
}

#siteName {
    font                : normal 2em/1.625em Lora, Helvetica, Arial;
    color               : #B3F04C;
}

#siteName span {
    font-weight         : 700;
    font-style          : italic;
}

#tagLine {
    font                : normal 1em/1em Roboto, Helvetica, Arial;
    color               : #3981AC;
}

#content {
    font                : normal 1em/1.25em Roboto, Helvetica, Arial;
    max-width           : 980px;
    width               : 92%;
    margin              : 0 auto;
    overflow            : auto;
    background-color    : #E0E0E0;
    flex                : 1;
    min-height          : 300px;
    padding             : 4%;
}

#centerContent {
/*      -webkit-flex: 1 1 100%;
      flex: 1 1 auto;*/
}

#footer {
    position            : relative;
    bottom              : 0;
    background-color    : #0A1229;
    text-align          : center;
    width               : 100%;
    margin              : 0;
    min-height          : 55px;
}

.footerLink, .footerLink:hover, .footerLink:link, .footerLink:visited, .footerLink:active, .footerLink:focus {
    text-decoration     : none;
    color               : #3981AC;
    display             : inline-block; 
    padding             : 20px 15px;
}

.footerLink:hover {
    color               : #fff;
}

#index-index #content {
    text-align          : center;
    color               :#0A1229
}

#content p {
    width: 27%;
    display: inline-block;
    vertical-align: top;
    padding: 3%;
    text-align: justify;
}

#index-optOut #content p {
    width: auto;
    display: block;
}

.hugeButton {
    padding             : 1em;
    display             : inline-block;
    background-color    : #3981AC;
    font                : bold 2em/1.875em Roboto, Helvetica, Arial;
    color               : #FFF;
    border-radius       : .25em;
}

.trackStatus_1 {
    width               : 40px;
    height              : 30px;
    display             : block;
    margin              : .5em .5em 1.5em;
}

.trackStatus_1:after {
    content             : 'yes';
    font                : normal 1em/30px Lora, Helvetica, Arial;
    text-align          : center;
    width               : 40px;
    height              : 30px;
    border-radius       : 3px;
    background-color    : #0A1229;
    display             : inline-block;
    color               : #fff;
}

.trackStatus_0 {
    width               : 40px;
    height              : 30px;
    display             : block;
    margin              : .5em;
}

.trackStatus_0:after {
    content             : 'no';
    font                : normal 1em/30px Lora, Helvetica, Arial;
    text-align          : center;
    width               : 40px;
    height              : 30px;
    border-radius       : 3px;
    background-color    : #0A1229;
    display             : inline-block;
    color               : #fff;
}

.buttonStatus_1:after {
    content             : 'Disable'
}

.buttonStatus_0:after {
    content             : 'Enable'
}

ol {
    list-style-type     : none;
    counter-reset       : basic-counter;
    position            : relative;
}

li {
    counter-increment   : basic-counter;
}

li:before {
    content             : counter(basic-counter);
    font                : normal 2em/30px Lora, Helvetica, Arial;
    position            : absolute;
    margin              : 0 0 0 -30px
}

#optOutContainer h2 {
    display             : inline-block;
    padding             : 0 0 0 3%;
    vertical-align      : middle;
}

#optOutContainer .trackStatus_1,
#optOutContainer .trackStatus_0 {
    display             : inline-block;
    padding             : 0 0 0 3%;
    vertical-align      : middle;
    margin              : .5em;
}
#optOutContainer p {
    width: auto;
    display: block;
    vertical-align: top;
    padding: 3%;
    text-align: justify;
}

#optOutContainer #hugeButtonContainer {
    text-align          : center;
}

@media (min-width: 73em) {
    #content {
        padding              : 4em;
    }
}