/* GLOBAL */
* {margin:0;padding:0;outline:0}
html,body {height:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body {background:#181818;color:#888;font:16px/20px "Trebuchet MS", helvetica, arial, sans-serif;height:100%;}
ol, ul {list-style:none}
a {text-decoration:none;border:none;color:#00abab;}
a:hover {color:#00cbcb}
h1 {font:24px/30px tahoma,geneva,sans-serif;color:#dca85d;margin-bottom:20px;width:100%;}
h2 {font:18px/30px tahoma,geneva,sans-serif;color:#ddd;margin-bottom:20px;width:100%;}

/* Common containers */
#container {padding:20px 10px;}

/* Header */
#header {width:100%;margin-bottom:20px;overflow:auto;}
#logo {float:left;background:url(../img/logo_small.png) no-repeat;width:24px;height:24px;display:block;}
#title {float:left;background:url(../img/title_small.png) no-repeat;width:196px;height:24px;margin-left:8px;}
#title span {display:none;}
#menu svg {width:24px;height:24px;fill:#448f40;float:right;}

/* Drawer */
#drawer {height:100%;width:280px;padding:10px 0;background:#303030;position:absolute;z-index:100;-webkit-transform:translate(-300px, 0);transform:translate(-300px, 0);transition:transform 0.3s ease;}
#drawer.open {-webkit-transform:translate(0, 0);transform:translate(0, 0);}
#drawer ul li {margin:0 20px;list-style-type:none;font-size:18px;line-height:48px;text-transform:uppercase;}
#drawer ul li ul li {margin:0 0 0 20px;text-transform:none;}
#drawer a {color:#00abab;width:100%;display:block;text-decoration:none;}
#drawer a:hover {color:#00cbcb;}
#drawer .lang-selector {position:absolute;bottom:0;margin:20px;}

/* Navigation */
#navi {display:none;clear:both;}

/* Content */
#content {display:flex;flex-wrap:wrap;}
.full-width {width:100%;}
.box {width:100%;}

/* App Info */
.app-info {font-size:14px;}
.app-info .title {font:20px/32px UILanguageFont,Arial,sans-serif;color:#eeeeee;}
.app-info .label {font-weight:normal;color:#999;font-family:monospace;}
.app-info .value {color:#EEE;}

/* Lists */
.list{list-style-type:disc;margin-left:20px}
.list li{margin-bottom:0}

/* Footer */
#footer {display:flex;flex-wrap:wrap;margin-bottom:20px;max-height:160px;}
.footer-box {width:100%;}
.lang-selector a {min-height:48px;}

/* Clearfix */
.clearfix:after {content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
.clearfix {display:inline-block;}
html[xmlns] .clearfix { display:block;}
* html .clearfix {height:1%;}

/* Additional classes */
.auxiliary {display:none;}
.dashed {border-bottom:1px dashed;}
.orange {color:#dca85d;}
.green {color:#69a169;}
.blue {color:#47648e;}
.bordered {border:1px solid #888;}
.highlighted {background-color:#2b2b2b;}
.darklighted {background-color:#111111;}
.rounded {-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;}
.shadowed {-webkit-box-shadow:0 6px 6px 0 rgba(0,0,0,0.2);-moz-box-shadow:0 6px 6px 0 rgba(0,0,0,0.2);box-shadow:0 6px 6px 0 rgba(0,0,0,0.2);}
.monospace {font-family:monospace;}
.center-360 {width:360px;margin:0 auto;}

/* Width >= 420px */
@media screen and (min-width:420px) and (max-width:639px) {
    #logo {background:url(../img/logo_medium.png) no-repeat;width:36px;height:36px;}
    #title {background:url(../img/title_medium.png) no-repeat;width:294px;height:36px;margin-left:12px;}
    #menu svg {width:36px;height:36px;}
}

/* Width >= 640px */
@media screen and (min-width:640px) {
    body {font:14px/20px "Trebuchet MS", helvetica, arial, sans-serif;}
    #container {padding:40px 20px;}
    #logo {background:url(../img/logo_big.png) no-repeat;width:48px;height:48px;}
    #title {background:url(../img/title_big.png) no-repeat;width:394px;height:48px;margin-left:16px;}
    #menu {display:none;}
    #navi {width:100%;text-align:center;display:block;margin-bottom:40px;}
    #navi ul {display:inline-block;list-style-type:none;margin:10px 0 7px 0;}
    #navi ul li {float:left;margin:0 2px;position:relative;}
    #navi a {color:#00abab;text-decoration:none;text-transform:uppercase;font-size:16px;line-height:24px;padding:20px 8px;}
    #navi a:hover {color:#00cbcb;}
    .auxiliary {display:inherit;}
    .box {width:50%;}
    .footer-box {width:50%;}
}

/* Width >= 800px */
@media screen and (min-width:800px) {
    #container {width:780px;margin:0 auto;}
}