style.css

html,body{height:100%;}body{margin:0;font-family:sans-serif;}#tddbin,#tddbin > div{height:100%;}#tddbin > div{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.flex-rows-full-height{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.flex-columns-full-width{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}.editor-and-runner{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}.editor-and-runner .editor,.editor-and-runner .runner{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}.editor-and-runner .editor,.editor-and-runner .runner iframe{border:none;}.editor-and-runner .runner{background-color:#EEE;}.editor-and-runner .runner iframe{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}.navigation-bar,.navigation-bar a,.navigation-bar button{background-color:#363738;color:#9c9e9f;}.navigation-bar{height:50px;width:100%;border-bottom:1px solid #000;overflow:hidden;z-index:1000;}.navigation-bar .tddbin{color:white;font-weight:bold;font-size:x-large;margin-right:1em;height:30px;vertical-align:middle;}.navigation-bar a,.navigation-bar button{background-color:#454445;border:none;font-size:inherit;vertical-align:middle;margin-left:1px;height:50px;outline:none;}.navigation-bar button:hover{background-color:#fedb00;color:#454445;}.navigation-bar button.logo{background-image:url(./img/tddbin_logo.svg);background-size:contain;background-repeat:no-repeat;background-color:transparent;height:30px;width:30px;margin:10px 20px 10px 10px;vertical-align:middle;}.navigation-bar button.logo:hover{-webkit-animation-name:spin;animation-name:spin;-webkit-animation-duration:30s;animation-duration:30s;-webkit-animation-timing-function:linear;animation-timing-function:linear;}@-webkit-keyframes spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}.navigation-bar .icon{padding-left:48px;padding-right:16px;background-repeat:no-repeat;}.navigation-bar .icon.twitter,.navigation-bar .icon.trello,.navigation-bar .icon.github,.navigation-bar .icon.uxebu{background-size:50%;background-position:center center;float:right;}.navigation-bar .icon.uxebu{background-image:url(./img/uxebu_icon.svg);background-size:70%;padding:0;width:120px;}.navigation-bar .icon.trello{background-image:url(./img/trello_icon.svg);}.navigation-bar .icon.github{background-image:url(./img/github_icon.svg);}.navigation-bar .icon.twitter{background-image:url(./img/twitter_icon.svg);}.keyboard-shortcut-overlay{-webkit-box-flex:0;-webkit-flex:0;-ms-flex:0;flex:0;display:none;position:absolute;top:50%;left:50%;margin-left:-225px;z-index:100;background-color:#DDD;color:#222;padding:1em;border:12px solid rgba(0, 0, 0, 0.4);border-radius:8px;}.keyboard-shortcut-overlay .shortcut{color:#e74141;font-family:monospace;min-width:3em;display:inline-block;margin-right:0.5em;}.keyboard-shortcut-overlay .run{color:green;}.keyboard-shortcut-overlay .subShortcut{margin-left:2em;font-size:smaller;}.keyboard-shortcut-overlay .hint{font-size:small;}#katas-navigation{width:100%;color:#9c9e9f;background-color:#363738;}#katas-navigation .headline,#katas-navigation a{padding:0.5em;white-space:nowrap;}#katas-navigation a{background-color:#454445;color:#9c9e9f;margin-right:1px;text-decoration:none;}#katas-navigation a.selected:hover,#katas-navigation a:hover{color:#454445;background-color:#fedb00;}#katas-navigation a.selected{background-color:rgb(128, 110, 0);}#katas-navigation .scrollable{overflow:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}