body {
    font-family: "Source Sans Pro",Arial,sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #666;
    background: none repeat scroll 0% 0% #FFF;
}

div.container {
    max-width: 960px;
    margin: auto;
}

.language-switcher {text-align: right;}
.language-switcher li {display: inline-block; margin: 0 0 0 .5em;}
.icon {width: 16px; height: 16px; opacity: .5; overflow: hidden; text-indent: 100%; white-space: nowrap; display: inline-block; background: url(/static/img/flags.png) no-repeat;}
.icon.en {background-position: 0 -20px;}
.icon.es {background-position: 0 -40px;}
.icon.it {background-position: 0 -60px;}
.icon.fr {background-position: 0 -80px;}
.icon.nl {background-position: 0 -100px;}
.icon.pt {background-position: 0 -120px;}
.icon.de {background-position: 0 -160px;}
.icon:hover, .icon.active {opacity: 1;}

.status {border-radius: 10px; padding: 30px;}
.status-ok {background-color: #dff0d8; box-shadow: 0px 5px 0 #39B54A;}
.status-wng {background-color: #fcf8e3; box-shadow: 0px 5px 0 #ffc043;}
.status-ko {background-color: #f2dede; box-shadow: 0px 5px 0 #ff0000;}
.status h1 {
    padding-left: 50px;
    background-image: url(/static/img/semaphore.png);
    background-repeat: no-repeat;
}
.status-ok h1 {
    background-position: left -1px;
}
.status-wng h1 {
    background-position: left -280px;
}
.status-ko h1 {
    background-position: left -560px;
}

@media (max-width: 768px) {
    .status {border-radius: 0; padding: 10px;}
}

footer {font-size: 100%; margin-top: 50px;}