/* Responsive Container */

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 768px) {
    .container {
        width: 736px;
    }
}

@media (min-width: 1024px) {
    .container {
        width: 900px;
    }
}

@media (min-width: 1280px) {
    .container {
        width: 1000px;
    }
}

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


/* Fonts */

@font-face {
    font-family: "Roboto";
    src: url(../fonts/Roboto-Regular.ttf) format("truetype");
}

@font-face {
    font-family: "RobotoBold";
    src: url(../fonts/Roboto-Bold.ttf) format("truetype");
}

@font-face {
    font-family: "RobotoCondensed";
    src: url(../fonts/RobotoCondensed-Regular.ttf) format("truetype");
}

@font-face {
    font-family: "RobotoCondensedBold";
    src: url(../fonts/RobotoCondensed-Bold.ttf) format("truetype");
}


/* Basic Styling */

html {
    height: 100%;
}

body {
    font-family: "Roboto", sans-serif;
    background-image: url(../imgs/background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

a {
    -webkit-transition: opacity 0.4s ease, color 0.4s ease, background 0.4s ease;
    -moz-transition: opacity 0.4s ease, color 0.4s ease, background 0.4s ease;
    transition: opacity 0.4s ease, color 0.4s ease, background 0.4s ease;
    text-decoration: none;
    color: #ef6030;
}

a:hover,
a:active {
    color: #cb4519;
}


/* Header */

#header {
    position: relative;
    background: #181716;
    padding: 16px 0 8px;
    z-index: 2;
}

#header:after {
    background: url(../imgs/papertear.png) repeat-x 50%;
    display: block;
    content: " ";
    position: absolute;
    height: 8px;
    width: 100%;
    bottom: -7px;
    left: 0;
    right: 0;
}

#header a.logo {
    display: inline-block;
    width: 70px;
    height: 38px;
    background-image: url(../imgs/klei.png);
    background-size: contain;
    background-repeat: no-repeat;
}

#header a.login {
    display: inline-block;
    background: #ef6030;
    border-color: #ef6030;
    border-width: 2px;
    border-style: solid;
    border-radius: 2px;
    padding: 8px 16px;
    opacity: 1;
    color: #fff;
    float: right;
    margin-top: -2px;
}

#header a.login:hover {
    opacity: 1;
    color: #fff;
    background: transparent;
    border-color: #db4411;
}

#header ul.menu {
    float: right;
    list-style: none;
    padding: 0;
    margin: 0;
    -webkit-transition: max-height 0.4s ease, padding 0.4s ease;
    -moz-transition: max-height 0.4s ease, padding 0.4s ease;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

#header ul.menu li {
    display: inline-block;
    float: left;
    padding: 8px;
}

#header ul.menu li a {
    opacity: 0.6;
    color: #eee;
}

#header ul.menu li a:hover {
    opacity: 1;
    color: #fff;
}

#header ul.menu li.store a {
    background: #ef6030;
    border-color: #ef6030;
    border-width: 2px;
    border-style: solid;
    border-radius: 2px;
    padding: 8px 16px;
    opacity: 1;
    color: #fff;
}

#header ul.menu li.store a:hover {
    opacity: 1;
    color: #fff;
    background: transparent;
    border-color: #db4411;
}


/* Responsive Header */

#header-btn {
    display: block;
    height: 25px;
    width: 25px;
    position: absolute;
    right: 16px;
    top: 24px;
    background-image: url(../imgs/ic-hamburger.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

@media (min-width: 768px) {
    #header-btn {
        display: none;
    }
}

@media (max-width: 767px) {
    #header ul.menu {
        background-color: #181716;
        padding: 16px;
        position: absolute;
        right: 0px;
        top: 50px;
        z-index: -1;
        overflow: hidden;
    }
    #header ul.menu.open {
        max-height: 500px;
    }
    #header ul.menu:not(.open) {
        padding: 0 16px;
        max-height: 0;
    }
    #header ul.menu li {
        display: block;
        float: none;
        padding: 16px;
    }
}


/* Content */

.content {
    background-color: #e8e8e8;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    margin-top: 24px;
    padding: 16px;
}

.content > h1:first-of-type {
    margin-top: 0;
}

.copyright {
    text-align: center;
    font-size: 0.8em;
    opacity: 0.4;
    margin-bottom: 16px;
}


/* Global Status */

#global-status {
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    overflow: hidden;
    margin-bottom: 16px;
}

#global-status-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 150px;
}

#global-status .global-status-content {
    padding: 16px;
}

#global-status-title {
    display: inline-block;
    margin-top: 0;
}

#global-status #global-status-title:before {
    content: " ";
    display: inline-block;
    height: 25px;
    width: 25px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 10px;
}

#global-status.green #global-status-title:before {
    background-image: url(../imgs/ic-green.png);
}

#global-status.orange #global-status-title:before {
    background-image: url(../imgs/ic-orange.png);
}

#global-status.red #global-status-title:before {
    background-image: url(../imgs/ic-red.png);
}


/* Services List */

#services-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#services-list > * {
    border-bottom: 1px solid #e8e8e8;
    position: relative;
    padding: 16px;
    padding-left: 55px;
}

#services-list > *:nth-child(even) {
    background-color: #ffffff;
}

#services-list > *:nth-child(odd) {
    background-color: #f9f9f9;
}

#services-list > *:before {
    content: " ";
    display: inline-block;
    height: 25px;
    width: 25px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 26px;
    left: 16px;
    margin-right: 10px;
}

#services-list > *.green:before {
    background-image: url(../imgs/ic-green.png);
}

#services-list > *.orange:before {
    background-image: url(../imgs/ic-orange.png);
}

#services-list > *.red:before {
    background-image: url(../imgs/ic-red.png);
}

#services-list .service-name {
    display: inline-block;
    margin: 0;
}

#services-list .service-title {
    margin: 0;
}

#services-list .service-message {
    margin-top: 10px;
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}