/* reset */

html, body { width:100%; height:100%; margin:0; padding:0; overflow:hidden; }
i { font-family:"fontAwesome"; font-style:normal; }
* { outline:none; }


/* header */

.header { width:100%; padding:20px; position:fixed; top:0; box-sizing:border-box; color:#fff; z-index:5; }
.header .logo { position:absolute; left:20px; top:20px; font-size:22px; font-weight:200; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; }
.header .logo b { margin-left:2px; padding:5px; font-weight:200; background-color:rgba(255,255,255,.5); color:#27ae60; }
.header .project { position:absolute; right:20px; top:20px; text-decoration:none; font-weight:200; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; color:#fff; cursor:pointer; }
.header .project:hover { color:#6c6c6c; }
.header .project i { font-size:24px; }
.header .center { text-align:center; }
.header .center .source { display:inline-block; font-size:20px; border:none; background-color:transparent; color:#fff; cursor:pointer; }
.header .center .source:hover { color:#6c6c6c; }


/* page */

.page { width:100%; height:100%; background-color:#27ae60; }
.page .up { width:100%; position:absolute; top:12%; text-align:center; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; color:#fff; }
.page .up i { font-size:40px; cursor:pointer; }
.page .up i:hover { color:#6c6c6c; }
.page .down { width:100%; position:absolute; bottom:12%; text-align:center; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; color:#fff; }
.page .down i { font-size:40px; cursor:pointer; }
.page .down i:hover { color:#6c6c6c; }
.page .b-move { width:100%; height:100%; position:absolute; left:0; top:0; }
.page .b-move.bottom { top:100%; }
.page .b-move.top { top:-100%; }
.page .template { position:absolute; top:25%; bottom:25%; left:30%; right:30%; background-color:#fff; }


/* controls */

.page .controls { margin-top:-50px; position:absolute; top:50%; right:20px; }
.page .controls span { width:10px; height:10px; margin-bottom:10px; display:block; border-radius:5px; background-color:rgba(255,255,255,.5); cursor:pointer; }
.page .controls span:hover { border-radius:10px; background-color:#6c6c6c; }
.page .controls span.on { background-color:rgba(255,255,255,1); }


/* modal */

.modal { margin:80px; display:none; position:absolute; top:0; bottom:0; left:0; right:0; border-radius:5px; overflow:hidden; z-index:10; }
.modal .code { width:100%; height:100%; padding:20px; padding-bottom:61px; position:relative; box-sizing:border-box; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; background-color:#fff; }
.modal .code .scroll { height:100%; overflow-y:auto; }
.modal .code .tag { padding:5px 10px; position:absolute; top:20px; right:20px; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; border-radius:3px; background-color:rgba(0,0,0,.2); color:#fff; }
.modal .copy { width:100%; height:60px; position:absolute; bottom:0; left:0; text-align:center; border-top:1px solid #e9e9e9; background-color:#fbfbfb; }
.modal .copy span { padding:10px 10px; margin-top:12px; display:inline-block; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; border-radius:3px; background-color:#6c6c6c; color:#fff; cursor:pointer; }
.modal .copy span:hover { background:#8c8c8c; }
.modal .code pre { margin:0; tab-size:2; }
.modal .code pre code { width:100%; height:100%; margin-left:-70px; display:inline-block; -webkit-touch-callout:initial; -webkit-user-select:initial; -khtml-user-select:initial; -moz-user-select:initial; -ms-user-select:initial; user-select:initial; color:#6c6c6c; }
.modal .code pre code i { width:100%; display:block; text-align:center; font-size:50px; font-size:13px; color:#ddd; }

.modal .code pre code .comment { color:#ccc; }
.modal .code pre code .name { color:#15cccc; }
.modal .code pre code .imp { color:red; }

.modal .code ol { margin:0; margin-right:14px; padding:0; float:left; counter-reset:item; list-style-type:none; background-color:#fbfbfb; }
.modal .code ol li { padding:0 8px; display:block; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:13px; line-height:16px; color:#ddd; }
.modal .code ol li:before { content:counter(item) "  "; counter-increment:item; }

.modal-back { display:none; position:absolute; top:0; bottom:0; left:0; right:0; background-color:rgba(0,0,0,.3); z-index:9; }


/* fx */

.fx { -webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; -o-transition:all 0.2s ease; -ms-transition:all 0.2s ease; transition:all 0.2s ease; }


/* footer */

.footer { width:100%; padding:20px; position:fixed; bottom:0; box-sizing:border-box; }
.footer .beer { position:absolute; right:20px; bottom:20px; text-decoration:none; font-weight:200; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; cursor:pointer; color:#fff; }
.footer .beer:hover { color:#6c6c6c; }