@import 'https://fonts.googleapis.com/css?family=Signika+Negative:400,600,700&subset=latin-ext';

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

.container {
    margin: 0 auto;
    padding: 0 16px 16px;
}

@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}
@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

hr {
    margin: 16px 0;
    border: 0;
    height: 1px;
    background: #888888;
    background: linear-gradient(to right,
                                rgba(0,0,0,0),
                                #888888 20%,
                                #888888 80%,
                                rgba(0,0,0,0)
                );
}

/******************************************************************************
 *                                 TYPOGRAPHY                                 *
 ******************************************************************************/

/* Standard Typography */

html {
    font-family: "Signika Negative", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #333333;
}

p {
    margin: 0 0 10px;
    text-align: justify;
}

p:last-child {
    margin: 0;
}

/* Links */

a:link {
    color: #2C7FA7;
    text-decoration: none;
}

a:link:hover {
    text-decoration: underline;
}

a:visited {
    color: #2C7FA7;
}

/* Headings */

h1, h2, h3, h4, h5, h6 {
    margin:0;
    padding: 15px 0;
    font-weight: 600;
    break-inside: avoid;
    line-height: 1
}

h1 {
    font-size: 42px;
}

h2 {
    font-size: 36px;
}

h3 {
    font-size: 30px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 20px;
}

h6 {
    font-size: 16px;
}

/* Sub Headings */

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
    color: #888888;
    font-weight: 400;
}

h1 small:before, h2 small:before, h3 small:before, h4 small:before, h5 small:before, h6 small:before {
    content: ' ';
    display: block;
}

h1 small, h2 small {
    font-size: 65%;
}

h3 small, h4 small, h5 small {
    font-size: 75%;
}

h6 small {
    font-size: 14px;
}

/* Inline Text Elements */

/* increase the size of the highlight and use a more muted color */
mark {
    padding: 2px;
    background-color: #FFF599;
}

/* deemphasize deleted text and distingish it from strikethrough text by making
   it a lighter grey */
del {
    color: #888888;
}

/* distinguish inserted text from underlined text with a dashed underline */
ins {
    text-decoration: none;
    border-bottom: 1px dashed #333333;
}

/* further emphasize emphasized text and distinguish it from italic text by
   making it semibold */
em {
    font-weight: 600;
}

/* make small font 5% larger than default */
small {
    font-size: 85%;
}

/* distinguish abbreviated text with mouse-over title text from underlined text
   with a dotted underline */
abbr[title] {
    text-decoration: none;
    border-bottom: 1px dotted #333333;
}

/* Addresses */

address {
    margin: 0 0 10px 20px;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 0.05em;
}

address:last-child {
    margin: 0 0 0 20px;
}

/* Blockquote */

blockquote {
    border-left: double 5px #888888;
    margin: 0 35px 0 25px;
    padding: 10px 20px;
    font-size: 20px;
    line-height: 1.2;
    font-style: italic;
}

blockquote footer {
    font-weight: bold;
    font-size: 14px;
    font-style: normal;
    color: #888888;
}

/* add a long dash and a space before source */
blockquote footer:before {
    content: "\2014 \00A0";
}

/* Lists */

ul.bulletless li {
    list-style-type: none;
}

ol ol > li {
    list-style-type: lower-alpha;
}

ol ol ol > li {
    list-style-type: lower-roman;
}

dl {
    border-left: solid 2px #333333;
    padding-left:10px;
}

dl dt {
    font-weight: bold;
}

dl dd {
    margin: 0 0 10px 10px;
}

dl dd:last-child {
    margin-bottom: 0;
}

/* Alignment Classes */

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

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

.align-center {
    text-align: center;
}

.align-justify {
    text-align: justify;
}

/* Code */

code, kbd, pre, var, samp {
    font-family: Consolas, monospace;
    font-size: 14px;
}

code, kbd, pre, samp {
    border-radius: 3px;
}

code, pre, samp {
    color: #EEEEEE;
    background: #333333;
}

pre, samp {
    margin: 10px 0;
    padding: 5px 20px;
    border: 2px solid #888888;
}

kbd, var {
    font-weight: bold;
}

code {
    padding: 2px 5px;
}

kbd {
    background: #EEEEEE;
    padding: 0 2px;
    border-right: 1px solid #888888;
    border-bottom: 1px solid #888888;
}

samp {
    display: block;
    font-style: italic;
}

var {
    font-style: normal;
    font-size: 16px;
}

/******************************************************************************
 *                                    ICONS                                   *
 ******************************************************************************/

 fuss-icon {
    display: inline-block;
    width: 14px;
}

/******************************************************************************
 *                                   BUTTONS                                  *
 ******************************************************************************/

button,
a.btn,
input.btn {
    border-radius: 3px;
    background: #FFFFFF;
    background-image: linear-gradient(to bottom, #FFFFFF 20%, #EEEEEE 100%);
    border: 1px solid #888888;
    box-shadow: .75px .75px #888888;
    color: #333333;
    cursor: pointer;
    margin: 2px;
    padding: 5px 10px;
}

button:hover,
a.btn:hover,
input.btn:hover {
    background: #EEEEEE;
    background-image: linear-gradient(to bottom, #EEEEEE 20%, #DDDDDD 100%);
}

button:active,
a.btn:active,
input.btn:active {
    background: #CCCCCC;
    background-image: linear-gradient(to bottom, #BBBBBB 0%, #CCCCCC 70%);
    box-shadow: none;
}

/* Sizes */

button.lg,
a.btn.lg,
input.btn.lg {
    border-radius: 5px;
    font-size: 16px;
    padding:10px 20px;
}

button.sm,
a.btn.sm,
input.btn.sm {
    font-size: 85%;
    padding:3px 5px;
}

button.xs,
a.btn.xs,
input.btn.xs {
    font-size: 85%;
    padding: 0 3px;
    margin: 0;
}

button.full-width,
a.btn.full-width,
input.btn.full-width {
    width: 100%;
}

/* Disabled */

button.disabled,
a.btn.disabled,
input.btn.disabled,
button[disabled],
a.btn[disabled],
input.btn[disabled],
button.disabled:hover,
a.btn.disabled:hover,
input.btn.disabled:hover,
button[disabled]:hover,
a.btn[disabled]:hover,
input.btn[disabled]:hover {
    background: #EEEEEE;
    border: 1px solid #CCCCCC;
    color:#BBBBBB;
    cursor: not-allowed;
    box-shadow: none;
}

/******************************************************************************
 *                                   BANNERS                                  *
 ******************************************************************************/

div.banner {
    padding: 14px;
    margin-bottom: 10px;
    border-radius: 3px;
    box-shadow: 0.75px 0.75px #888888;

    border: 1px solid #888888;
    background: #EEEEEE;
    color: #5E5E5E;
}

div.banner a,
a div.banner {
    font-weight: 600;
    color: #888888;
}

div.banner.information,
div.banner.info {
    border-color: #0D56A6;
    background: #DFEAF6;
    color: #20456D;
}

div.banner.information a,
div.banner.info a,
a div.banner.information,
a div.banner.info {
    color: #0D56A6;
}

div.banner.success,
div.banner.succ {
    border-color: #00B64F;
    background: #DFF8EA;
    color: #1A7541;
}

div.banner.success a,
div.banner.succ a,
a div.banner.success,
a div.banner.succ {
    color: #00B64F;
}

div.banner.warning,
div.banner.warn {
    border-color: #FF9A00;
    background: #FFF5E6;
    color: #99671A;
}

div.banner.warning a,
div.banner.warn a,
a div.banner.warning,
a div.banner.warn {
    color: #FF9A00;
}

div.banner.failure,
div.banner.critical,
div.banner.fail,
div.banner.crit {
    border-color: #C60F0F;
    background: #FFDCDC;
    color: #7D2121;
}

div.banner.failure a,
div.banner.critical a,
div.banner.fail a,
div.banner.crit a,
a div.banner.failure,
a div.banner.critical,
a div.banner.fail,
a div.banner.crit {
    color: #C60F0F;
}

/* Full-width Banners */

div.banner.top,
div.banner.bottom {
    position: fixed;
    left: 0;
    right: 0;
    border-radius: 0;
    border-right: none;
    border-left: none;
    padding: 14px 45px;
    margin: 0;

}

div.banner.top {
    top: 0;
    border-top: none;
}

div.banner.bottom {
    bottom: 0;
    border-bottom: none;
    box-shadow: 0.75px 0.75px #888888;
}