@charset "UTF-8"; @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 400; src: local('Ubuntu Regular'), local('Ubuntu-Regular'), url(https://fonts.gstatic.com/s/ubuntu/v14/4iCs6KVjbNBYlgoKfw7z.ttf) format('truetype'); } @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 500; src: local('Ubuntu Medium'), local('Ubuntu-Medium'), url(https://fonts.gstatic.com/s/ubuntu/v14/4iCv6KVjbNBYlgoCjC3jsGyI.ttf) format('truetype'); } @font-face { font-family: 'entypo'; font-style: normal; font-weight: normal; src: url('https://weloveiconfonts.com/api/fonts/entypo/entypo.eot'); src: url('https://weloveiconfonts.com/api/fonts/entypo/entypo.eot?#iefix') format('eot'), url('https://weloveiconfonts.com/api/fonts/entypo/entypo.woff') format('woff'), url('https://weloveiconfonts.com/api/fonts/entypo/entypo.ttf') format('truetype'), url('https://weloveiconfonts.com/api/fonts/entypo/entypo.svg#entypo') format('svg'); } .entypo-note:before { content: "\266a"; } .entypo-note-beamed:before { content: "\266b"; } .entypo-music:before { content: "\1f3b5"; } .entypo-search:before { content: "\1f50d"; } .entypo-flashlight:before { content: "\1f526"; } .entypo-mail:before { content: "\2709"; } .entypo-heart:before { content: "\2665"; } .entypo-heart-empty:before { content: "\2661"; } .entypo-star:before { content: "\2605"; } .entypo-star-empty:before { content: "\2606"; } .entypo-user:before { content: "\1f464"; } .entypo-users:before { content: "\1f465"; } .entypo-user-add:before { content: "\e700"; } .entypo-video:before { content: "\1f3ac"; } .entypo-picture:before { content: "\1f304"; } .entypo-camera:before { content: "\1f4f7"; } .entypo-layout:before { content: "\268f"; } .entypo-menu:before { content: "\2630"; } .entypo-check:before { content: "\2713"; } .entypo-cancel:before { content: "\2715"; } .entypo-cancel-circled:before { content: "\2716"; } .entypo-cancel-squared:before { content: "\274e"; } .entypo-plus:before { content: "\2b"; } .entypo-plus-circled:before { content: "\2795"; } .entypo-plus-squared:before { content: "\229e"; } .entypo-minus:before { content: "\2d"; } .entypo-minus-circled:before { content: "\2796"; } .entypo-minus-squared:before { content: "\229f"; } .entypo-help:before { content: "\2753"; } .entypo-help-circled:before { content: "\e704"; } .entypo-info:before { content: "\2139"; } .entypo-info-circled:before { content: "\e705"; } .entypo-back:before { content: "\1f519"; } .entypo-home:before { content: "\2302"; } .entypo-link:before { content: "\1f517"; } .entypo-attach:before { content: "\1f4ce"; } .entypo-lock:before { content: "\1f512"; } .entypo-lock-open:before { content: "\1f513"; } .entypo-eye:before { content: "\e70a"; } .entypo-tag:before { content: "\e70c"; } .entypo-bookmark:before { content: "\1f516"; } .entypo-bookmarks:before { content: "\1f4d1"; } .entypo-flag:before { content: "\2691"; } .entypo-thumbs-up:before { content: "\1f44d"; } .entypo-thumbs-down:before { content: "\1f44e"; } .entypo-download:before { content: "\1f4e5"; } .entypo-upload:before { content: "\1f4e4"; } .entypo-upload-cloud:before { content: "\e711"; } .entypo-reply:before { content: "\e712"; } .entypo-reply-all:before { content: "\e713"; } .entypo-forward:before { content: "\27a6"; } .entypo-quote:before { content: "\275e"; } .entypo-code:before { content: "\e714"; } .entypo-export:before { content: "\e715"; } .entypo-pencil:before { content: "\270e"; } .entypo-feather:before { content: "\2712"; } .entypo-print:before { content: "\e716"; } .entypo-retweet:before { content: "\e717"; } .entypo-keyboard:before { content: "\2328"; } .entypo-comment:before { content: "\e718"; } .entypo-chat:before { content: "\e720"; } .entypo-bell:before { content: "\1f514"; } .entypo-attention:before { content: "\26a0"; } .entypo-alert:before { content: "\1f4a5'"; } .entypo-vcard:before { content: "\e722"; } .entypo-address:before { content: "\e723"; } .entypo-location:before { content: "\e724"; } .entypo-map:before { content: "\e727"; } .entypo-direction:before { content: "\27a2"; } .entypo-compass:before { content: "\e728"; } .entypo-cup:before { content: "\2615"; } .entypo-trash:before { content: "\e729"; } .entypo-doc:before { content: "\e730"; } .entypo-docs:before { content: "\e736"; } .entypo-doc-landscape:before { content: "\e737"; } .entypo-doc-text:before { content: "\1f4c4"; } .entypo-doc-text-inv:before { content: "\e731"; } .entypo-newspaper:before { content: "\1f4f0"; } .entypo-book-open:before { content: "\1f4d6"; } .entypo-book:before { content: "\1f4d5"; } .entypo-folder:before { content: "\1f4c1"; } .entypo-archive:before { content: "\e738"; } .entypo-box:before { content: "\1f4e6"; } .entypo-rss:before { content: "\e73a"; } .entypo-phone:before { content: "\1f4dE"; } .entypo-cog:before { content: "\2699"; } .entypo-tools:before { content: "\2692"; } .entypo-share:before { content: "\e73c"; } .entypo-shareable:before { content: "\e73e"; } .entypo-basket:before { content: "\e73d"; } .entypo-bag:before { content: "\1f45c'"; } .entypo-calendar:before { content: "\1f4c5"; } .entypo-login:before { content: "\e740"; } .entypo-logout:before { content: "\e741"; } .entypo-mic:before { content: "\1f3a4"; } .entypo-mute:before { content: "\1f507"; } .entypo-sound:before { content: "\1f50a"; } .entypo-volume:before { content: "\e742"; } .entypo-clock:before { content: "\1f554"; } .entypo-hourglass:before { content: "\23f3"; } .entypo-lamp:before { content: "\1f4a1"; } .entypo-light-down:before { content: "\1f505"; } .entypo-light-up:before { content: "\1f506"; } .entypo-adjust:before { content: "\25d1"; } .entypo-block:before { content: "\1f6ab"; } .entypo-resize-full:before { content: "\e744"; } .entypo-resize-small:before { content: "\e746"; } .entypo-popup:before { content: "\e74c"; } .entypo-publish:before { content: "\e74d"; } .entypo-window:before { content: "\e74e"; } .entypo-arrow-combo:before { content: "\e74f"; } .entypo-down-circled:before { content: "\e758"; } .entypo-left-circled:before { content: "\e759"; } .entypo-right-circled:before { content: "\e75a"; } .entypo-up-circled:before { content: "\e75b"; } .entypo-down-open:before { content: "\e75c"; } .entypo-left-open:before { content: "\e75d"; } .entypo-right-open:before { content: "\e75e"; } .entypo-up-open:before { content: "\e75f"; } .entypo-down-open-mini:before { content: "\e760"; } .entypo-left-open-mini:before { content: "\e761"; } .entypo-right-open-mini:before { content: "\e762"; } .entypo-up-open-mini:before { content: "\e763"; } .entypo-down-open-big:before { content: "\e764"; } .entypo-left-open-big:before { content: "\e765"; } .entypo-right-open-big:before { content: "\e766"; } .entypo-up-open-big:before { content: "\e767"; } .entypo-down:before { content: "\2b07"; } .entypo-left:before { content: "\2b05"; } .entypo-right:before { content: "\27a1"; } .entypo-up:before { content: "\2b06"; } .entypo-down-dir:before { content: "\25be"; } .entypo-left-dir:before { content: "\25c2"; } .entypo-right-dir:before { content: "\25b8"; } .entypo-up-dir:before { content: "\25b4"; } .entypo-down-bold:before { content: "\e4b0"; } .entypo-left-bold:before { content: "\e4ad"; } .entypo-right-bold:before { content: "\e4ae"; } .entypo-up-bold:before { content: "\e4af"; } .entypo-down-thin:before { content: "\2193"; } .entypo-left-thin:before { content: "\2190"; } .entypo-right-thin:before { content: "\2192"; } .entypo-up-thin:before { content: "\2191"; } .entypo-ccw:before { content: "\27f2"; } .entypo-cw:before { content: "\27f3"; } .entypo-arrows-ccw:before { content: "\1f504"; } .entypo-level-down:before { content: "\21b3"; } .entypo-level-up:before { content: "\21b0"; } .entypo-shuffle:before { content: "\1f500"; } .entypo-loop:before { content: "\1f501"; } .entypo-switch:before { content: "\21c6"; } .entypo-play:before { content: "\25b6"; } .entypo-stop:before { content: "\25a0"; } .entypo-pause:before { content: "\2389"; } .entypo-record:before { content: "\26ab"; } .entypo-to-end:before { content: "\23ed"; } .entypo-to-start:before { content: "\23ee"; } .entypo-fast-forward:before { content: "\23e9"; } .entypo-fast-backward:before { content: "\23ea"; } .entypo-progress-0:before { content: "\e768"; } .entypo-progress-1:before { content: "\e769"; } .entypo-progress-2:before { content: "\e76a"; } .entypo-progress-3:before { content: "\e76b"; } .entypo-target:before { content: "\1f3af"; } .entypo-palette:before { content: "\1f3a8"; } .entypo-list:before { content: "\e005"; } .entypo-list-add:before { content: "\e003"; } .entypo-signal:before { content: "\1f4f6"; } .entypo-trophy:before { content: "\1f3c6"; } .entypo-battery:before { content: "\1f50b"; } .entypo-back-in-time:before { content: "\e771"; } .entypo-monitor:before { content: "\1f4bb"; } .entypo-mobile:before { content: "\1f4f1"; } .entypo-network:before { content: "\e776"; } .entypo-cd:before { content: "\1f4bf"; } .entypo-inbox:before { content: "\e777"; } .entypo-install:before { content: "\e778"; } .entypo-globe:before { content: "\1f30e"; } .entypo-cloud:before { content: "\2601"; } .entypo-cloud-thunder:before { content: "\26c8"; } .entypo-flash:before { content: "\26a1"; } .entypo-moon:before { content: "\263d"; } .entypo-flight:before { content: "\2708"; } .entypo-paper-plane:before { content: "\e79b"; } .entypo-leaf:before { content: "\1f342"; } .entypo-lifebuoy:before { content: "\e788"; } .entypo-mouse:before { content: "\e789"; } .entypo-briefcase:before { content: "\1f4bc"; } .entypo-suitcase:before { content: "\e78e"; } .entypo-dot:before { content: "\e78b"; } .entypo-dot-2:before { content: "\e78c"; } .entypo-dot-3:before { content: "\e78d"; } .entypo-brush:before { content: "\e79a"; } .entypo-magnet:before { content: "\e7a1"; } .entypo-infinity:before { content: "\221e"; } .entypo-erase:before { content: "\232b"; } .entypo-chart-pie:before { content: "\e751"; } .entypo-chart-line:before { content: "\1f4c8"; } .entypo-chart-bar:before { content: "\1f4ca"; } .entypo-chart-area:before { content: "\1f53e"; } .entypo-tape:before { content: "\2707"; } .entypo-graduation-cap:before { content: "\1f393"; } .entypo-language:before { content: "\e752"; } .entypo-ticket:before { content: "\1f3ab"; } .entypo-water:before { content: "\1f4a6"; } .entypo-droplet:before { content: "\1f4a7"; } .entypo-air:before { content: "\e753"; } .entypo-credit-card:before { content: "\1f4b3"; } .entypo-floppy:before { content: "\1f4be"; } .entypo-clipboard:before { content: "\1f4cb"; } .entypo-megaphone:before { content: "\1f4e3"; } .entypo-database:before { content: "\e754"; } .entypo-drive:before { content: "\e755"; } .entypo-bucket:before { content: "\e756"; } .entypo-thermometer:before { content: "\e757"; } .entypo-key:before { content: "\1f511"; } .entypo-flow-cascade:before { content: "\e790"; } .entypo-flow-branch:before { content: "\e791"; } .entypo-flow-tree:before { content: "\e792"; } .entypo-flow-line:before { content: "\e793"; } .entypo-flow-parallel:before { content: "\e794"; } .entypo-rocket:before { content: "\1f680"; } .entypo-gauge:before { content: "\e7a2"; } .entypo-traffic-cone:before { content: "\e7a3"; } .entypo-cc:before { content: "\e7a5"; } .entypo-cc-by:before { content: "\e7a6"; } .entypo-cc-nc:before { content: "\e7a7"; } .entypo-cc-nc-eu:before { content: "\e7a8"; } .entypo-cc-nc-jp:before { content: "\e7a9"; } .entypo-cc-sa:before { content: "\e7aa"; } .entypo-cc-nd:before { content: "\e7ab"; } .entypo-cc-pd:before { content: "\e7ac"; } .entypo-cc-zero:before { content: "\e7ad"; } .entypo-cc-share:before { content: "\e7ae"; } .entypo-cc-remix:before { content: "\e7af"; } .entypo-github:before { content: "\f300"; } .entypo-github-circled:before { content: "\f301"; } .entypo-flickr:before { content: "\f303"; } .entypo-flickr-circled:before { content: "\f304"; } .entypo-vimeo:before { content: "\f306"; } .entypo-vimeo-circled:before { content: "\f307"; } .entypo-twitter:before { content: "\f309"; } .entypo-twitter-circled:before { content: "\f30a"; } .entypo-facebook:before { content: "\f30c"; } .entypo-facebook-circled:before { content: "\f30d"; } .entypo-facebook-squared:before { content: "\f30e"; } .entypo-gplus:before { content: "\f30f"; } .entypo-gplus-circled:before { content: "\f310"; } .entypo-pinterest:before { content: "\f312"; } .entypo-pinterest-circled:before { content: "\f313"; } .entypo-tumblr:before { content: "\f315"; } .entypo-tumblr-circled:before { content: "\f316"; } .entypo-linkedin:before { content: "\f318"; } .entypo-linkedin-circled:before { content: "\f319"; } .entypo-dribbble:before { content: "\f31b"; } .entypo-dribbble-circled:before { content: "\f31c"; } .entypo-stumbleupon:before { content: "\f31e"; } .entypo-stumbleupon-circled:before { content: "\f31f"; } .entypo-lastfm:before { content: "\f321"; } .entypo-lastfm-circled:before { content: "\f322"; } .entypo-rdio:before { content: "\f324"; } .entypo-rdio-circled:before { content: "\f325"; } .entypo-spotify:before { content: "\f327"; } .entypo-spotify-circled:before { content: "\f328"; } .entypo-qq:before { content: "\f32a"; } .entypo-instagrem:before { content: "\f32d"; } .entypo-dropbox:before { content: "\f330"; } .entypo-evernote:before { content: "\f333"; } .entypo-flattr:before { content: "\f336"; } .entypo-skype:before { content: "\f339"; } .entypo-skype-circled:before { content: "\f33a"; } .entypo-renren:before { content: "\f33c"; } .entypo-sina-weibo:before { content: "\f33f"; } .entypo-paypal:before { content: "\f342"; } .entypo-picasa:before { content: "\f345"; } .entypo-soundcloud:before { content: "\f348"; } .entypo-mixi:before { content: "\f34b"; } .entypo-behance:before { content: "\f34e"; } .entypo-google-circles:before { content: "\f351"; } .entypo-vkontakte:before { content: "\f354"; } .entypo-smashing:before { content: "\f357"; } .entypo-sweden:before { content: "\f601"; } .entypo-db-shape:before { content: "\f600"; } .entypo-logo-db:before { content: "\f603"; } @font-face { font-family: 'zocial'; font-style: normal; font-weight: normal; src: url('https://weloveiconfonts.com/api/fonts/zocial/zocial-regular-webfont.eot'); src: url('https://weloveiconfonts.com/api/fonts/zocial/zocial-regular-webfont.eot?#iefix') format('eot'), url('https://weloveiconfonts.com/api/fonts/zocial/zocial-regular-webfont.woff') format('woff'), url('https://weloveiconfonts.com/api/fonts/zocial/zocial-regular-webfont.ttf') format('truetype'), url('https://weloveiconfonts.com/api/fonts/zocial/zocial-regular-webfont.svg#zocialregular') format('svg'); } .zocial-acrobat:before { content: "\00E3"; } .zocial-amazon:before { content: "a"; } .zocial-android:before { content: "&"; } .zocial-angellist:before { content: "\00D6"; } .zocial-aol:before { content: "\""; } .zocial-appnet:before { content: "\00E1"; } .zocial-appstore:before { content: "A"; } .zocial-bitbucket:before { content: "\00E9"; } .zocial-bitcoin:before { content: "2"; } .zocial-blogger:before { content: "B"; } .zocial-buffer:before { content: "\00E5"; } .zocial-call:before { content: "7"; } .zocial-cal:before { content: "."; } .zocial-cart:before { content: "\00C9"; } .zocial-chrome:before { content: "["; } .zocial-cloudapp:before { content: "c"; } .zocial-creativecommons:before { content: "C"; } .zocial-delicious:before { content: "#"; } .zocial-digg:before { content: ";"; } .zocial-disqus:before { content: "Q"; } .zocial-dribbble:before { content: "D"; } .zocial-dropbox:before { content: "d"; } .zocial-drupal:before { content: "\00E4"; } .zocial-dwolla:before { content: "\00E0"; } .zocial-email:before { content: "]"; } .zocial-eventasaurus:before { content: "v"; } .zocial-eventbrite:before { content: "|"; } .zocial-eventful:before { content: "'"; } .zocial-evernote:before { content: "E"; } .zocial-facebook:before { content: "f"; } .zocial-fivehundredpx:before { content: "0"; } .zocial-flattr:before { content: "%"; } .zocial-flickr:before { content: "F"; } .zocial-forrst:before { content: ":"; } .zocial-foursquare:before { content: "4"; } .zocial-github:before { content: "g"; } .zocial-gmail:before { content: "m"; } .zocial-google:before { content: "G"; } .zocial-googleplay:before { content: "h"; } .zocial-googleplus:before { content: "+"; } .zocial-gowalla:before { content: "@"; } .zocial-grooveshark:before { content: "8"; } .zocial-guest:before { content: "?"; } .zocial-html5:before { content: "5"; } .zocial-ie:before { content: "6"; } .zocial-instagram:before { content: "\00DC"; } .zocial-instapaper:before { content: "I"; } .zocial-intensedebate:before { content: "{"; } .zocial-itunes:before { content: "i"; } .zocial-klout:before { content: "K"; } .zocial-lanyrd:before { content: "-"; } .zocial-lastfm:before { content: "l"; } .zocial-linkedin:before { content: "L"; } .zocial-macstore:before { content: "^"; } .zocial-meetup:before { content: "M"; } .zocial-myspace:before { content: "_"; } .zocial-ninetyninedesigns:before { content: "9"; } .zocial-openid:before { content: "o"; } .zocial-opentable:before { content: "\00C7"; } .zocial-paypal:before { content: "$"; } .zocial-pinboard:before { content: "n"; } .zocial-pinterest:before { content: "1"; } .zocial-plancast:before { content: "P"; } .zocial-plurk:before { content: "j"; } .zocial-pocket:before { content: "\00E7"; } .zocial-podcast:before { content: "`"; } .zocial-posterous:before { content: "~"; } .zocial-print:before { content: "\00D1"; } .zocial-quora:before { content: "q"; } .zocial-reddit:before { content: ">"; } .zocial-rss:before { content: "R"; } .zocial-scribd:before { content: "}"; } .zocial-skype:before { content: "S"; } .zocial-smashing:before { content: "*"; } .zocial-songkick:before { content: "k"; } .zocial-soundcloud:before { content: "s"; } .zocial-spotify:before { content: "="; } .zocial-statusnet:before { content: "\00E2"; } .zocial-steam:before { content: "b"; } .zocial-stripe:before { content: "\00A3"; } .zocial-stumbleupon:before { content: "/"; } .zocial-tumblr:before { content: "t"; } .zocial-twitter:before { content: "T"; } .zocial-viadeo:before { content: "H"; } .zocial-vimeo:before { content: "V"; } .zocial-vk:before { content: "N"; } .zocial-weibo:before { content: "J"; } .zocial-wikipedia:before { content: ","; } .zocial-windows:before { content: "W"; } .zocial-wordpress:before { content: "w"; } .zocial-xing:before { content: "X"; } .zocial-yahoo:before { content: "Y"; } .zocial-yelp:before { content: "y"; } .zocial-youtube:before { content: "U"; } * { font-family: 'Ubuntu', sans-serif; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; } [class*="entypo-"]:before { font-family: 'entypo', sans-serif; } [class*="zocial-"]:before { font-family: 'zocial', sans-serif; } ::-webkit-scrollbar { width: 16px; height: 16px; overflow: visible; } ::-webkit-scrollbar-track { background-clip: padding-box; background-color: rgba(255, 255, 255, 0.2); border: solid transparent; border-width: 1px 1px 1px 6px; } ::-webkit-scrollbar-track:horizontal { border-width: 6px 1px 1px 1px; } ::-webkit-scrollbar-track:hover { background-color: rgba(255, 136, 0, 0.2); } ::-webkit-scrollbar-track:active { background-color: rgba(255, 136, 0, 0.3); } ::-webkit-scrollbar-thumb { background-color: rgba(255, 136, 0, 0.5); background-clip: padding-box; border: solid transparent; border-width: 1px 1px 1px 6px; min-height: 28px; } ::-webkit-scrollbar-thumb:horizontal { border-width: 6px 1px 1px 1px; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 136, 0, 0.7); } ::-webkit-scrollbar-thumb:active { background-color: #F80; } ::-webkit-scrollbar-corner { background: transparent; } html, body { width: 100%; height: 100%; margin: 0; padding: 0; font-size: 16px; } #body div#main-header { z-index: 3; position: fixed; top: 0px; left: 0px; width: 100%; height: 40px; background: #444; padding: 0 0 0 20px; } #body div#main-header h1 { color: #FFF; margin: 0; font-size: 20px; line-height: 40px; float: left; } #body div#main-header span#user-info { color: #FFF; line-height: 40px; float: right; } #body div#main-header span#user-info img { width: 36px; height: 36px; float: right; margin: 2px 2px 2px 0; } #body div#main-header span#user-info a { display: inline-block; color: #FFF; text-decoration: none; width: 0px; overflow: hidden; padding: 0; } #body div#main-header span#user-info:hover a { padding: 0 3px; width: 25px; } #body div#main-content { z-index: 2; position: fixed; top: 40px; left: 250px; right: 0px; bottom: 0px; padding: 0px; overflow: auto; background: #FFF; } #body div#main-content h2#partial-title { color: #F80; margin: 30px 0 0 30px; font-weight: normal; } #body div#main-content ul#partial-navigation { margin: 0px; padding: 10px 15px 30px; float: left; width: 100%; } #body div#main-content ul#partial-navigation li { float: left; list-style: none; padding: 0 15px; } #body div#main-content ul#partial-navigation li a { color: #999; text-decoration: none; font-size: 20px; } #body div#main-content ul#partial-navigation li a:hover { color: #666; } #body div#main-content ul#partial-navigation li a.active-tab { color: #F80; } #body div#main-content div#partial-content { float: left; width: 100%; padding: 0 20px 20px; } #body #main-navigation { z-index: 1; position: fixed; top: 40px; left: 0px; width: 260px; bottom: 0px; background-color: #F80; overflow: auto; overflow-x: hidden; padding-bottom: 30px; } #body #main-navigation ul { list-style: none; padding: 0px; margin: 0px; } #body #main-navigation ul li { display: inline-block; white-space: nowrap; width: 100%; } #body #main-navigation ul li.header { color: #F80; line-height: 40px; padding-left: 20px; background-color: #995200; text-transform: uppercase; border-bottom: 1px solid #ffac4d; } #body #main-navigation ul li a { display: inline-block; text-decoration: none; font-size: 18px; height: 50px; line-height: 50px; padding-right: 20px; width: 100%; color: #FFF; border-bottom: 0px solid #ffac4d; } #body #main-navigation ul li a:before { display: inline-block; font-size: 23px; color: #FFF; width: 50px; text-align: center; line-height: 50px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } #body #main-navigation ul li a:hover { background-color: #ffac4d; } #body #main-navigation ul li a .item-counter { display: inline-block; font-size: 0.8em; line-height: 1em; padding: 0.15em 0.4em; border: 0px; -webkit-border-radius: 0.6em; -moz-border-radius: 0.6em; border-radius: 0.6em; float: right; margin-top: 17px; background-color: #B72329; } #body #main-navigation ul li a .shortcut-info { display: inline-block; float: right; width: 40px; height: 30px; line-height: 30px; color: #F80; text-align: center; background-color: #444; text-transform: uppercase; font-size: 0.8em; margin-top: 10px; margin-right: -100px; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } #body #main-navigation ul li a .shortcut-info:before { font-family: 'entypo', sans-serif; content: "\2328"; padding-right: 5px; } #body #main-navigation ul li a.active-tab { background-color: #FFF; /*lighten(#F80, 40%);*/ color: #F80; } #body #main-navigation ul li a.active-tab:before { color: #F80; } #body #main-navigation ul li a.active-tab .shortcut-info { display: none; } #body #main-navigation ul li a.active-tab .item-counter { color: #FFF; } #body #main-navigation .shortcut-label { display: block; position: fixed; bottom: 0px; left: 0px; height: 30px; width: 250px; background-color: #444; color: #F80; font-size: 0.8em; line-height: 30px; text-transform: uppercase; } #body #main-navigation .shortcut-label:before { display: inline-block; width: 30px; text-align: center; } #body #main-navigation::-webkit-scrollbar { width: 10px; } #body #main-navigation::-webkit-scrollbar-track { background-color: rgba(255, 255, 255, 0.8); border-color: #FFF; border-width: 0; } #body #main-navigation::-webkit-scrollbar-track:active { background-color: rgba(255, 255, 255, 0.7); } #body #main-navigation::-webkit-scrollbar-thumb { background-color: rgba(255, 136, 0, 0.7); border-color: transparent; border-width: 0 0 30px 1px; min-height: 28px; } #body #main-navigation::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 136, 0, 0.7); } #body #main-navigation::-webkit-scrollbar-thumb:active { background-color: #F80; } #body #main-navigation:hover { width: 250px; } #body #main-navigation:hover ul li a { padding-right: 10px; } #body a.mailcounter { display: inline-block; width: 50px; height: 50px; line-height: 50px; color: #F80; text-decoration: none; font-size: 18px; float: right; font-weight: 500; text-align: center; text-shadow: none; -webkit-animation: mailWiggle 5s infinite; -moz-animation: mailWiggle 5s infinite; -o-animation: mailWiggle 5s infinite; animation: mailWiggle 5s infinite; } #body a.mailcounter:before { font-size: 40px; color: #EEE; position: absolute; top: 0px; left: 0px; width: 100%; line-height: 50px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } #body a.mailcounter:hover { text-shadow: -1px 0 #FFF, 1px 0 #FFF; } #body a.mailcounter:hover:before { color: #FFF; text-shadow: 0 0 16px #F80; } #body.showShortcuts #main-navigation { width: 300px; } #body.showShortcuts #main-navigation ul li a { padding-right: 10px; } #body.showShortcuts #main-navigation ul li a .item-counter { display: none; } #body.showShortcuts #main-navigation ul li a .shortcut-info { margin-right: 0px; -webkit-transition-delay: 0.25s; -moz-transition-delay: 0.25s; -ms-transition-delay: 0.25s; -o-transition-delay: 0.25s; transition-delay: 0.25s; } #body.showShortcuts #main-navigation .shortcut-label { width: 40px; left: 250px; } #body.showShortcuts #main-navigation .shortcut-label:before { width: 40px; } #body.showShortcuts #main-content { left: 300px; right: -50px; } /* animation */ @-webkit-keyframes mailWiggle { 0% { -webkit-transform: scale(1) rotate(0deg); } 2% { -webkit-transform: scale(1.5) rotate(-10deg); } 3.5% { -webkit-transform: scale(1.5) rotate(10deg); } 5% { -webkit-transform: scale(1.5) rotate(0deg); } 6.5% { -webkit-transform: scale(1) rotate(0deg); } 100% { -webkit-transform: scale(1) rotate(0deg); } } @-o-keyframes mailWiggle { 0% { -webkit-transform: scale(1) rotate(0deg); } 2% { -webkit-transform: scale(1.5) rotate(-10deg); } 3.5% { -webkit-transform: scale(1.5) rotate(10deg); } 5% { -webkit-transform: scale(1.5) rotate(0deg); } 6.5% { -webkit-transform: scale(1) rotate(0deg); } 100% { -webkit-transform: scale(1) rotate(0deg); } } @keyframes mailWiggle { 0% { -webkit-transform: scale(1) rotate(0deg); } 2% { -webkit-transform: scale(1.5) rotate(-10deg); } 3.5% { -webkit-transform: scale(1.5) rotate(10deg); } 5% { -webkit-transform: scale(1.5) rotate(0deg); } 6.5% { -webkit-transform: scale(1) rotate(0deg); } 100% { -webkit-transform: scale(1) rotate(0deg); } }

console.clear(); $(function() { lorem(); $('#main-navigation a').click(function() { openTab($(this)); }); $('#partial-navigation a').click(function() { $('#partial-navigation a').removeClass('active-tab'); $(this).addClass('active-tab'); }); function openTab(tabLink) { $('#main-navigation a').removeClass('active-tab'); $(tabLink).addClass('active-tab'); var text = $(tabLink).clone() .children() .remove() .end() .text(); $('#partial-title').text(text); arrScKeys = []; $('#body').removeClass('showShortcuts'); } /*Shortcuts*/ var arrScLinks = {}; $('a[data-nav-shortcut]').each(function(i, o) { var scKeyAttr = parseInt($(this).attr('data-nav-shortcut')); arrScLinks[scKeyAttr] = $(this); if(scKeyAttr == 111) { $(this).children('.shortcut-info').html('÷'); } else if(scKeyAttr == 106) { $(this).children('.shortcut-info').html('*'); } else if(scKeyAttr == 109) { $(this).children('.shortcut-info').html('-'); } else { $(this).children('.shortcut-info').html(String.fromCharCode(scKeyAttr)); } }); var SHIFT_KEY = 16; var CTRL_KEY = 17; var arrScKeys = []; $(document).keydown(function(e) { if(arrScKeys.length < 2) { if(e.keyCode == SHIFT_KEY || e.keyCode == CTRL_KEY) { e.stopPropagation(); arrScKeys.push(e.keyCode); if(arrScKeys.length == 2) { $('#body').addClass('showShortcuts'); } } else { arrScKeys = []; } } else if(arrScKeys.length == 2 && !(e.keyCode == SHIFT_KEY || e.keyCode == CTRL_KEY)) { if(arrScLinks[e.keyCode]) e.stopPropagation(); if(arrScLinks[e.keyCode]) openTab(arrScLinks[e.keyCode]); } }); $(document).keyup(function(e) { arrScKeys = []; $('#body').removeClass('showShortcuts'); }); }); function lorem(){ var url = 'https://json-lipsum.appspot.com/?amount=20'; $.ajax({ type: 'GET', url: url, async: false, jsonpCallback: 'jsonCallback', contentType: "application/json", dataType: 'jsonp', success: function(json) { var htmlContent = json.lipsum.join(' '); $('#partial-content').html(htmlContent); } }); }