@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; src: local('Lato Regular'), local('Lato-Regular'), url(../../../../../themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff'); }
.panel { position: fixed; top: 25%; z-index: 100; }
.container-panel { float: left; padding: 17px 15px; background: #1a1a1a; width: 100px; }
.container-panel h1 { text-transform: uppercase; color: #fff; font-size: 12px; line-height: 12px; margin-bottom: 10px; }
.container-panel a.yellow { display: block; width: 100px; height: 25px; background: #f1c40f; margin-bottom: 10px; }
.container-panel a.green { display: block; width: 100px; height: 25px; background: #2ecc71; margin-bottom: 10px; }
.container-panel a.purple { display: block; width: 100px; height: 25px; background: #8e44ad; margin-bottom: 10px; }
.container-panel a.blue { display: block; width: 100px; height: 25px; background: #196bd1; margin-bottom: 10px; }
.container-panel a.red { display: block; width: 100px; height: 25px; background: #d83c3c; margin-bottom: 10px; }
.container-panel a.light-blue { display: block; width: 100px; height: 25px; background: #41abce; margin-bottom: 0px; }
.container-panel a.light { text-transform: uppercase; font-size: 10px; line-height: 25px; text-align: center; display: block; width: 100px; height: 25px; background: #fff; margin-bottom: 10px; color: #000; }
.container-panel a.dark { text-transform: uppercase; font-size: 10px; line-height: 25px; text-align: center; display: block; width: 100px; height: 25px; background: #000; color: #fff; }
.settings { background: #1a1a1a; display: block; width: 30px; height: 30px; margin-left: 130px; }
.settings-icon { background: url(../img/settings.png) no-repeat center center; width: 30px; height: 30px; cursor: pointer; position: absolute; }