style.css

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}table{border-collapse:collapse;border-spacing:0}body{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;height:100%;background:#f1f1f1}#extra-ui-text{display:none}.input{width:100%;margin:0 auto;max-height:0;overflow:hidden;opacity:0;-webkit-transition:max-height 1s,margin 1s,opacity .5s;transition:max-height 1s,margin 1s,opacity .5s}.input.active{max-height:300px;margin:25px auto;opacity:1}#formats,#lastfile{color:#bbb;font-size:12px;margin:0 auto 4px;width:20%}#formats a,#lastfile a{color:inherit}#lastfile .media-reload{color:#3482b1;cursor:pointer}#lastfile .media-reload:hover{text-decoration:underline}#formats.warning{transition:color 1s;color:darkred}.file-input-wrapper{color:#fff;text-align:center;background-color:#3482b1;border-radius:5px;cursor:pointer;width:200px;padding:15px;margin:20px auto 5px;border:0;text-indent:0;position:relative;overflow:hidden}.file-input-wrapper.hover,.file-input-wrapper:hover{background:#4d9ccb}.file-input-wrapper>input[type=file]{font-size:200px;position:absolute;top:0;right:0;opacity:0;cursor:pointer}.btn-file-input i{font-size:40px;display:block;margin-bottom:5px}.file-input-wrapper>.btn-file-input{display:inline-block;width:200px}.btn-file-input{width:auto;border:0 none;margin:0;padding:0;background:transparent;overflow:visible;font:14px arial,sans-serif;text-decoration:none;text-align:center;text-shadow:1px 1px 0 #2b6e8f;color:#fff;font-family:arial;font-size:15px;font-style:normal}.btn-file-input::-moz-focus-inner{border:0;padding:0}.alt-input-button{color:#fff;text-align:center;background-color:#3482b1;border-radius:5px;cursor:pointer;margin:0 auto 20px;padding:10px;font-size:14px;display:block;border:0;width:230px}.alt-input-button.hover,.alt-input-button:hover{background:#4d9ccb}.ext-input-field{width:30%;margin:0 auto;background:#262626;border-radius:3px;padding:8px;margin-bottom:20px;display:none;position:absolute;top:60px;left:35%;box-shadow:0 0 5px grey;text-align:center}.ext-input-field label{color:#fff;font-size:14px}.ext-input-field input{width:100%;box-sizing:border-box;display:block;font-size:14px;font-family:inherit;padding:3px;margin-top:8px}.ext-input-field .close-ext-input{float:right;color:#fff;cursor:pointer;opacity:.5}.ext-input-field .close-ext-input:hover{opacity:1}.ext-input-field .ext-input-warning{color:#fff;text-align:left;font-size:12px;padding-top:5px;display:none}.ext-input-active #formats,.ext-input-active #lastfile,.ext-input-active .alt-input-button,.ext-input-active .file-input-wrapper{opacity:.2;pointer-events:none}.about{-webkit-touch-callout:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;color:#262626;background:#f1f1f1;z-index:200;position:relative;padding:40px 0;margin-bottom:-100%;display:none}.about.active{display:block}.about .container{width:850px;margin:0 auto}.about h1{font-size:50px;text-align:center;margin-bottom:20px;color:#3482b1}.about p.lead{font-size:20px;text-align:center;margin:0 auto;display:block;line-height:32px}.about ul{text-align:center;margin:2em 0 0}.about li{width:18%;display:inline-block;vertical-align:top;font-size:16px;line-height:20px;text-align:center;padding:0 3%;padding-bottom:25px}.about li strong{font-weight:700;color:#3482b1}.about a{color:inherit}.about a:hover{color:#777}.about .press{color:#3482b1;font-weight:700;text-align:center;padding:0}.about .press p{font-size:20px;padding-bottom:10px}.about .press a{display:inline-block;width:33%;vertical-align:middle;opacity:.6}.about .press a:hover{opacity:1}.about .press img{width:80%}.about .credits{text-align:center;margin-top:40px}.about .credits .twitter{display:inline-block;background:#777;padding:5px;border-radius:5px;text-decoration:none;color:#fff;font-size:12px;margin-right:10px}.about .credits .twitter:hover{background:#5e5e5e}.about .credits p{font-size:14px;margin-top:10px}.about .start{display:block;padding:.7em 1em;border-radius:5px;color:#fff;margin:0 auto;margin-top:20px;width:14em;text-align:center;background:grey;cursor:default;font-size:21px}.about .start .start-loading{display:inline}.about .start .start-ready{display:none}.about .start.ready{cursor:pointer;background:#3482b1}.about .start.ready:hover{background:#28658a}.about .start.ready .start-loading{display:none}.about .start.ready .start-ready{display:inline}.about #old-browser,.about .mobile{width:400px;max-width:98%;padding:0;margin:0 auto;color:darkred;line-height:20px;margin-top:20px;text-align:center}.about .mobile{display:none}@media (max-width:850px){.about{padding:40px 10%}.about h1{font-size:35px}.about p.lead{font-size:18px;font-weight:700;line-height:24px}.about .container{width:100%}.about ul{margin:2em 0}.about li{width:auto;padding:3px 0;padding-bottom:5px;text-align:left;display:block;height:auto}.about .press{text-align:left;padding-top:0}.about .press p{padding-bottom:20px;font-size:inherit}.about .press a{width:100%}.about .press a img{max-width:225px}.about .start{width:80%}.about .credits a{margin-right:0}.about .credits span{display:block;padding-top:10px}#old-browser{width:auto}.about .mobile{display:block}}.separate-page{-webkit-touch-callout:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;color:#262626;background:#f1f1f1;z-index:200;position:relative;padding:40px 0;margin-bottom:-100%;display:none;display:block}.separate-page.active{display:block}.separate-page .container{width:850px;margin:0 auto}.separate-page h1{font-size:3em;margin:.3em 0 0}.separate-page ol,.separate-page p,.separate-page ul{margin-top:1em}.separate-page h2,.separate-page h3{margin-top:1.4em}.separate-page h2{font-size:1.4em;margin-top:1.8em;position:relative}.separate-page h2 small{font-size:.8em;font-weight:400}.separate-page h2:hover .permalink{display:inline-block}.separate-page h2 .permalink{display:none;margin-left:.25em;color:inherit;text-decoration:none;opacity:.5}.separate-page h2 .permalink:hover{opacity:1}.separate-page h2 .permalink:visited{color:inherit}.separate-page h2,.separate-page h3,.separate-page strong{font-weight:700}.separate-page li{list-style-type:disc;margin-left:2em}.separate-page li,.separate-page p{line-height:1.3em}.separate-page .container{max-width:600px}.separate-page a{color:#3482b1}.separate-page a:visited{color:#112b3b}.separate-page #close-help{color:#3482b1;text-decoration:none;font-size:1em}.separate-page #close-help:hover{text-decoration:underline}.separate-page .row{padding:20px;margin:20px 0;background:#e1e1e1;border-radius:4px}.separate-page .row h2{margin:0}.separate-page .button{color:#fff;text-align:center;background-color:#3482b1;border-radius:5px;cursor:pointer;display:inline-block;padding:8px;text-decoration:none!important;color:#fff!important}.separate-page .button.hover,.separate-page .button:hover{background:#4d9ccb}@media (max-width:850px){.separate-page{padding:0}.separate-page .container{width:auto;padding:5%}}.controls{display:flex;flex:1}.controls .button{display:inline-block;vertical-align:top;height:36px;min-width:36px;text-align:center;border-right:1px solid #404040;background:#262626;color:#fff;padding:10px 0;height:16px}.controls .button:hover{background-color:#404040;cursor:pointer}.controls .button:active{background-color:#0d0d0d}.play-pause.playing .fa-pause{display:inline}.play-pause .fa-pause,.play-pause.playing .fa-play{display:none}.play-pause .fa-play{display:inline}.button.refresh{border-left:1px solid #404040}.button .topbar-button-shortcut{opacity:0;padding-top:2em;color:#000;font-size:9px;cusor:default;display:block;pointer-events:none;text-transform:uppercase;-webkit-transition:opacity .25s;transition:opacity .25s}.topbar:hover .button .topbar-button-shortcut{opacity:1}.video-player{position:absolute;top:55px;left:20px;width:calc((100% - 800px)/2);min-width:200px;box-shadow:0 0 5px #000;background:#262626}.progressor{display:inline-block;width:100%;height:14px;margin:10px;color:#d3d3d3;background:#4d4d4d;text-align:center;cursor:default;font-size:13px;padding-top:2px;vertical-align:middle;overflow:hidden}#player-hook{display:inline-block;flex:1;-webkit-flex:1;min-width:100px}#player-hook>span{position:relative;z-index:200}.progressor-progress{background:#fff;background:grey;z-index:100!important}.media-title{padding:11px 0;color:#d3d3d3;text-align:center;font-size:14px}.media-title,.player-time{display:inline-block;border-right:1px solid #404040}.player-time{-webkit-touch-callout:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;font-size:13px;border-left:1px solid #404040;padding:11px 10px 9px!important}.time-selection{position:fixed;top:20px;z-index:50;top:200px;background:#262626;padding:7px;color:#fff;top:25px;box-shadow:0 0 5px #000;right:160px;border:1px solid #404040;display:none}.time-selection.active{display:block}.time-selection input{width:60px;font-size:16px;text-align:center}.time-selection span{padding:0 7px}.topbar{background:#262626;color:#fff;box-shadow:0 0 10px #666;-webkit-box-shadow:0 0 10px #666;z-index:50;position:relative;font-size:16px;display:flex}.topbar.inputting .controls{display:none}.title,.topbar.inputting .help-title{border-right:1px solid #404040}.title{padding:10px;text-align:left;display:inline-block;vertical-align:top;width:auto;background:#262626;color:#fff}.title i{font-size:.9em}.title:hover{background-color:#404040;cursor:pointer}.title.active{color:#262626;background:#f1f1f1}.title.active:hover{background:#ddd}.title:active{background-color:#0d0d0d}.help-title{padding:10px;text-align:left;display:inline-block;vertical-align:top;width:auto;background:#262626;color:#fff;border-right:1px solid #404040;text-decoration:none}.help-title i{font-size:.9em}.help-title:hover{background-color:#404040;cursor:pointer}.help-title.active{color:#262626;background:#f1f1f1}.help-title.active:hover{background:#ddd}.help-title:active{background-color:#0d0d0d}.language-title{padding:10px;text-align:left;display:inline-block;vertical-align:top;width:auto;background:#262626;color:#fff}.language-title:hover{background-color:#404040;cursor:pointer}.language-title.active{color:#262626;background:#f1f1f1}.language-title.active:hover{background:#ddd}.language-title:active{background-color:#0d0d0d}.language-title i{font-size:.9em}.settings-button{padding:10px;text-align:left;display:inline-block;vertical-align:top;width:auto;background:#262626;color:#fff;border-left:1px solid #404040;border-right:1px solid #404040;align-self:flex-end}.settings-button i{font-size:.9em}.settings-button:hover{background-color:#404040;cursor:pointer}.settings-button.active{color:#262626;background:#f1f1f1}.settings-button.active:hover{background:#ddd}.settings-button:active{background-color:#0d0d0d}.language-picker{-webkit-touch-callout:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;color:#262626;background:#f1f1f1;z-index:200;position:relative;padding:40px 0;margin-bottom:-100%;display:none;padding:20px 0 10px;box-shadow:0 8px 15px hsla(0,0%,47%,.3);-webkit-box-shadow:0 8px 15px hsla(0,0%,47%,.3);width:100%;position:absolute;z-index:1000;text-align:center;border-bottom:2px solid #3482b1}.language-picker.active{display:block}.language-picker .container{width:850px;margin:0 auto}.language-picker .language-button{display:inline-block;padding:.6em;margin-bottom:10px;width:22%;cursor:pointer;border:1px solid #ddd}.language-picker .language-button:hover{background:#3482b1;border-color:#3482b1;color:#fff}.button.speed{width:auto;padding-left:10px;padding-right:10px}.button.speed.fixed{background:#fff;color:#262626}.button.speed.fixed .speed-box{display:block}.speed-box{background:#262626;color:#fff;width:190px;padding:8px 0 5px;z-index:-50;cursor:default;vertical-align:middle;font-size:13px;box-shadow:0 0 10px #666;-webkit-box-shadow:0 0 10px #666;text-transform:uppercase;position:absolute;top:36px;left:214px;display:none}.speed-box:hover{display:block}.speed-box .speed-slider{display:inline;vertical-align:middle;width:120px}.speed:hover>.speed-box{display:block}.slider-origin{height:24px;border-right:1px solid grey;position:relative;left:39px;left:44px;z-index:-50;display:inline-block;vertical-align:middle}.audiojs{font-family:inherit;box-shadow:none;-webkit-box-shadow:none;background:#262626;display:inline-block;width:auto;height:33px}.audiojs .play-pause{display:none}.audiojs .time{border-color:#404040}.audiojs .scrubber{border:none}.scrubber .progress{background:#fff;opacity:.3}.scrubber .loaded{background:#4d4d4d;color:#d3d3d3;padding:1px 2px;text-align:center;cursor:default}#textbox{-webkit-touch-callout:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;resize:none;font-size:15px;line-height:20px;font-family:Arial;padding:5px;margin:50px auto;width:50%;display:block;border:none;padding:50px 25% 5px;outline:none;background:#fff;box-shadow:0 0 10px #ccc;width:600px;padding:50px;min-height:700px;overflow-y:hidden;color:#262626}#textbox b,#textbox strong{font-weight:700}#textbox em,#textbox i{font-style:italic}#textbox .timestamp{color:#3482b1;border-radius:5px;border-left:2px solid #3482b1;border-right:2px solid #3482b1;padding:0 3px;margin:0 3px}#textbox .timestamp:hover{background:#ebf4f9;cursor:pointer}#textbox .timestamp:active{background:#c3deee}.textbox-container{overflow-y:scroll;position:fixed;height:calc(100% - 36px);background:#eee;top:36px;width:100%}.message-panel{width:600px;margin:20px auto -20px;background:#ddd;padding:10px;font-size:12px;border-radius:3px}.message-panel.hidden{display:none}.message-panel.stuck{position:fixed;top:30px}.message-panel .message-content>a{color:inherit}.close-message-panel{float:right;cursor:pointer;opacity:.6}.close-message-panel:hover{opacity:1}.text-panel{position:fixed;top:100px;left:calc(50% + 350px);width:200px;padding-left:20px;text-align:left;padding-top:200px;-webkit-transition:padding 1s;transition:padding 1s;opacity:.3;-webkit-transition:opacity .2s,color .2s,padding 1s;transition:opacity .2s,color .2s,padding 1s}.text-panel.editing{padding-top:0}.text-panel .sbutton{display:block;background:inherit;border:none;padding:0;margin:0;outline:none;padding:5px 0;color:#262626}.text-panel .sbutton.time{display:none;height:0}.text-panel .sbutton.time.active{display:block;height:auto}.text-panel .sbutton.backup.flash i{-webkit-animation:save-flash 1s;animation:save-flash 1s}.text-panel .sbutton i{font-size:20px;min-width:20px;text-align:center;display:inline-block;vertical-align:middle;padding:3px;border:1px solid #ccc;border-radius:2px}.text-panel .sbutton i:hover{border-color:#aaa;cursor:pointer}.text-panel .sbutton i:active{box-shadow:inset 0 0 3px grey}.text-panel .sbutton i.active{color:#3482b1}.text-panel .sbutton .label{text-transform:uppercase;font-size:10px;padding:0 5px;display:inline-block;opacity:0;-webkit-transition:opacity .2s,color .2s,padding 1s;transition:opacity .2s,color .2s,padding 1s}.text-panel .wordcount{-webkit-touch-callout:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;padding:5px 0;color:#262626;font-size:16px;margin-top:10px}.text-panel .wordcount .wc-text{color:transparent;-webkit-transition:opacity .2s,color .2s,padding 1s;transition:opacity .2s,color .2s,padding 1s}.text-panel .wordcount .wc-text .word-count-number{color:#262626}.text-panel:hover{opacity:1}.text-panel:hover .wordcount .wc-text{color:#262626}.text-panel:hover .sbutton .label{opacity:.5}.import-file-wrapper{position:relative;overflow:hidden}.import-file-wrapper>input[type=file]{font-size:200px;position:absolute;top:0;right:0;opacity:0;cursor:pointer}@-webkit-keyframes save-flash{0%{color:#262626}15%{color:#3482b1}to{color:#262626}}@keyframes save-flash{0%{color:#262626}15%{color:#3482b1}to{color:#262626}}.export-panel{position:relative;position:fixed;top:200px;width:260px;text-align:left;background:#262626;color:#fff;border-radius:3px;-webkit-transition:-webkit-transform .5s cubic-bezier(.175,.885,.32,1.275),opacity .5s;-webkit-transform:scale(.1);-webkit-transform-origin:110% 25%;transition:transform .5s cubic-bezier(.175,.885,.32,1.275),opacity .5s;transform:scale(.1);transform-origin:110% 25%;opacity:0;z-index:100}.export-panel:after{top:21%;left:0;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(51,51,51,0);border-left-color:#262626;border-width:15px;margin-left:260px}.export-panel.active{-webkit-transform:scale(1);transform:scale(1);opacity:1}.export-panel p{padding:0 10px 10px;font-size:11px;line-height:13px}.export-panel p a{color:#fff}.export-panel .export-title{font-weight:700;margin:10px;font-size:16px}.export-panel .export-block-md,.export-panel .export-block-txt{display:block;text-align:center;font-size:14px;padding:10px;margin:10px;border-radius:3px;color:#fff;text-decoration:none;background:#555;cursor:pointer;border:none}.export-panel .export-block-md:hover,.export-panel .export-block-txt:hover{background:#3482b1}.export-panel .export-block-gd{display:block;text-align:center;font-size:14px;padding:10px;margin:10px;border-radius:3px;color:#fff;text-decoration:none;border:1px solid #555;padding:8px 10px;cursor:default}.export-panel .export-block-gd.unauth{text-align:left}.export-panel .export-block-gd.unauth .sign-in{display:inline-block}.export-panel .export-block-gd.gd-authenticated{background:#555;cursor:pointer;border:none;text-align:center}.export-panel .export-block-gd.gd-authenticated:hover{background:#3482b1}.export-panel .export-block-gd .sign-in{background:#555;cursor:pointer;border:none;display:none;font-size:12px;padding:6px;vertical-align:top;margin:-5px -5px 0 0;float:right;border-radius:2px}.export-panel .export-block-gd .sign-in:hover{background:#3482b1}.backup-panel{position:fixed;width:100%;background:#262626;top:12%;z-index:1000;box-shadow:0 0 10px #666;-webkit-box-shadow:0 0 10px #666;padding-bottom:20px;display:none}.backup-panel .backup-description{color:#fff;width:800px;margin:20px auto}.backup-panel .backup-description .backup-title{font-size:2em;margin-bottom:.4em}.backup-panel .backup-description .backup-instructions{font-size:.9em}.backup-panel .backup-description .backup-close{float:right;font-size:1.6em;opacity:.5;cursor:pointer;transition:opacity .1s}.backup-panel .backup-description .backup-close:hover{opacity:1}.backup-panel .backup-window{background:#404040;height:300px;width:800px;margin:0 auto;overflow-y:scroll;padding:5px;box-sizing:border-box}.backup-panel .backup-window .no-backups{color:#ccc;text-align:center;padding-top:10px}.backup-panel .backup-window .more-backups{color:#fff;text-align:center;background:#555;padding:1em 0;margin:10px;cursor:pointer}.backup-panel .backup-window .more-backups:hover{background:#666}.backup-panel .backup-window .backup-block{-webkit-touch-callout:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;padding:10px;box-sizing:border-box;width:25%;display:inline-block;vertical-align:top}.backup-panel .backup-window .backup-block.new-block{opacity:0;width:0}.backup-panel .backup-window .backup-block.new-block .backup-restore-button{display:none}.backup-panel .backup-window .backup-block .backup-doc{overflow-y:scroll;overflow-x:hidden;background:#fff;height:180px;padding:10px;font-size:8px}.backup-panel .backup-window .backup-block .backup-restore-button{text-align:center;margin-top:10px;color:#fff;font-size:12px}.backup-panel .backup-window .backup-block .backup-restore-button span{text-decoration:underline;cursor:pointer}.settings-panel{max-width:800px;margin:30px auto;display:none}.settings-panel.active{display:block}.settings-panel h2{font-size:32px;font-weight:300;margin-bottom:20px}.settings-panel h3{font-size:24px;font-weight:300;margin-bottom:20px}.settings-panel .reset-button{color:#fff;text-align:center;background-color:#3482b1;border-radius:5px;cursor:pointer;display:inline-block;padding:8px 10px;margin:10px 0}.settings-panel .reset-button.hover,.settings-panel .reset-button:hover{background:#4d9ccb}.keyboard-shortcuts li{line-height:3em;display:flex}.keyboard-shortcuts .shortcut-name{width:20%;min-width:200px}.keyboard-shortcuts .add-combo,.keyboard-shortcuts .key-combo{cursor:default;display:inline-block;white-space:nowrap;font-size:14px;border:1px solid #000;border-radius:2px;padding:0 4px;margin-right:5px;line-height:21px;background:#262626;color:#fff}.keyboard-shortcuts .remove-combo{font-size:8px;color:#f1f1f1;border-radius:100%;display:inline-block;line-height:0;vertical-align:top;cursor:pointer;margin-left:4px;text-align:center;padding:3px 4px;vertical-align:middle;margin-bottom:2px;border-radius:1px;opacity:.75}.keyboard-shortcuts .remove-combo:hover{background:#f1f1f1;color:#262626}.keyboard-shortcuts .add-combo{color:#fff;text-align:center;background-color:#3482b1;border-radius:5px;cursor:pointer;border:none;border-radius:2px;padding-top:1px;padding-bottom:1px}.keyboard-shortcuts .add-combo.hover,.keyboard-shortcuts .add-combo:hover{background:#4d9ccb}.keyboard-shortcuts .listening-combo{cursor:default;background:#f1f1f1;color:#000;font-size:14px;margin-left:4px}.keyboard-shortcuts .listening-combo>span{color:#fff;text-align:center;background-color:#3482b1;border-radius:5px;cursor:pointer;border:none;border-radius:2px;padding:3px 4px;margin-left:5px}.keyboard-shortcuts .listening-combo>span.hover,.keyboard-shortcuts .listening-combo>span:hover{background:#4d9ccb}.fa{display:inline-block}.fa:before{content:"\25C9"}.fa-play:before{content:"\25B6\FE0E"}.fa-pause:before{content:"\1F062\1F062"}.fa-backward:before{content:"\25C0\FE0E\25C0\FE0E"}.fa-forward:before{content:"\25B6\FE0E\25B6\FE0E"}.fa-speed:before{content:" "}.fa-refresh:before{content:"\2672"}.fa-bold:before{content:"B"}.fa-italic:before{content:"I"}.fa-clock-o:before{content:"\231A\FE0E"}.fa-times:before{content:"x"}