View
Theme
Font Style
7pt
8pt
9pt
10pt
11pt
Line Style
100%
110%
120%
130%
140%
Bold Keyword
Default
Inspector
Kkaefer
Eclipse
SQ Light
Lesser
Dark
Cobalt
Monokai
Rubyblue
Night
SQ Dark
Ambiance
Blackboard
Line Num.
Wrap Lines
Preview
Redraw
JS Tab
HTML Tab
CSS Tab
Live Tab
Prev. Tab
Next Tab
Browser
History…
Help
Edit
Settings
Auto Complete
Match Brackets
Match Highlight
Strip Whitespace
Auto Close Brackets
Auto Close Quotes
Show Print Margin
Undo
Redo
Delete
Select Line
Select All
Find & Replace
Find
Find in Repo.
Find Next
Find Previous
Replace Single
Replace All
Wrap Search
Revert
As Template
Diff Revision
Format
Compress
Text
Zen Coding
Indent
Tab Width
1
2
3
4
5
6
7
8
Indent Unit
1
2
3
4
5
6
7
8
Smart Indent
Use Tabs
Visible Tabs
Shift Left
Shift Right
Put Indent
Number
Increment by 1
Decrement by 1
Increment by 0.1
Decrement by 0.1
Increment by 10
Decrement by 10
Simple Math
Comment
Line
Move Up
Move Down
Copy Up
Copy Down
Go to Line…
Remove Line
Next Point
Prev. Point
Help
Share
Login
You can jump to the latest bin by adding
/latest
to your URL
×
z
Find
→
←
⟲
Replace
⊗
All
Replace
<!doctype html> <!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]--> <!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]--> <!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]--> <!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>WebKit Clock</title> <meta name="description" content="The world clock optimized to WebKit rendering engine. It is built with recent web technologies like as html5, and image files are not used."> <meta name="keywords" content="World Clock, WebKit, HTML5, canvas, CSS3, javascript, Web Fonts, SVG, Safari, Chrome"> <meta name="author" content="ONO TAKEHIKO"> <meta name="viewport" content="width=960, initial-scale=1.0"> <meta property="og:title" content="WebKit Clock" /> <meta property="og:type" content="website" /> <meta property="og:url" content="http://onotakehiko.com/webkitclock/" /> <meta property="og:image" content="http://onotakehiko.com/webkitclock/site_thumb.jpg" /> <meta property="og:site_name" content="ONO TAKEHIKO - onotakehiko.com" /> <meta property="og:description" content="This site is driven by HTML5 canvas, CSS3, JavaScript, Web Fonts, SVG and NO image files. It's optimized to WebKit rendering engine and you can see it with Safari and Google Chrome." /> <meta property="og:locale" content="ja_JP" /> <meta property="fb:app_id" content="164475790305137" /> <link rel="shortcut icon" href="favicon.ico"> <link rel="image_src" href="http://onotakehiko.com/webkitclock/site_thumb.jpg" /> </head> <body> <div id="container"> <header> <h1>WebKit Clock</h1> <p class="summary">This site is driven by HTML5 canvas, CSS3, JavaScript, Web Fonts, SVG and NO image files. It's optimized to WebKit rendering engine and you can see it with <a href="http://www.apple.com/safari/" title="Apple - Safari - Browse the web in smarter, more powerful ways." rel="external">Safari</a> and <a href="http://www.google.com/chrome" title="Google Chrome - Get a fast new browser. For PC, Mac, and Linux" rel="external">Google Chrome</a>.</p> <p class="note">* Summer time is not supported now. It will be available soon.</p> </header> <div id="progress"><div class="bar"></div></div> <nav id="cityList"> <ul> <li><a href="#auckland">Auckland</a> <span class="timeZone">+12</span></li> <li><a href="#sydney">Sydney</a> <span class="timeZone">+10</span></li> <li><a href="#guam">Guam</a></li> <li><a href="#tokyo" class="active">Tokyo</a> <span class="timeZone">+9</span></li> <li><a href="#dalian">Dalian</a> <span class="timeZone">+8</span></li> <li><a href="#beijing">Beijing</a></li> <li><a href="#ulanbator">Ulan Bator</a></li> <li><a href="#singapore">Singapore</a></li> <li><a href="#bangalore">Bangalore</a><span class="timeZone">+5.5</span></li> <li><a href="#delhi">Delhi</a></li> <li><a href="#islamabad">Islamabad</a> <span class="timeZone">+5</span></li> <li><a href="#antananarivo">Antananarivo</a> <span class="timeZone">+3</span></li> <li><a href="#baghdad">Baghdad</a></li> <li><a href="#sochi">Sochi</a></li> <li><a href="#moscow">Moscow</a></li> <li><a href="#nairobi">Nairobi</a></li> <li><a href="#cairo">Cairo</a> <span class="timeZone">+2</span></li> <li><a href="#kigali">Kigali</a></li> <li><a href="#lusaka">Lusaka</a></li> <li><a href="#johannesburg">Johannesburg</a></li> <li><a href="#helsinki">Helsinki</a></li> <li><a href="#athens">Athens</a></li> <li><a href="#berlin">Berlin</a> <span class="timeZone">+1</span></li> <li><a href="#lillehammer">Lillehammer</a></li> <li><a href="#torino">Torino</a></li> <li><a href="#paris">Paris</a></li> <li><a href="#london">London</a> <span class="timeZone">0</span></li> <li><a href="#praia">Praia</a> <span class="timeZone">-1</span></li> <li><a href="#pontadelgada">Ponta Delgada</a></li> <li><a href="#fernandodenoronha">Fernando de Noronha</a> <span class="timeZone">-2</span></li> <li><a href="#riodejaneiro">Rio de Janeiro</a> <span class="timeZone">-3</span></li> <li><a href="#buenosaires">Buenos Aires</a></li> <li><a href="#stjohns">St. John’s</a> <span class="timeZone">-3.5</span></li> <li><a href="#georgetown">Georgetown</a> <span class="timeZone">-4</span></li> <li><a href="#lapaz">La Paz</a></li> <li><a href="#concepcion">Concepción</a></li> <li><a href="#caracas">Caracas</a> <span class="timeZone">-4.5</span></li> <li><a href="#newyork">New York</a> <span class="timeZone">-5</span></li> <li><a href="#washington">Washington, D.C.</a></li> <li><a href="#toronto">Toronto</a></li> <li><a href="#havana">Havana</a></li> <li><a href="#houston">Houston</a> <span class="timeZone">-6</span></li> <li><a href="#mexicocity">Mexico City</a></li> <li><a href="#saskatoon">Saskatoon</a></li> <li><a href="#easterisland">Easter Island</a></li> <li><a href="#santafe">Santa Fe</a> <span class="timeZone">-7</span></li> <li><a href="#saltlakecity">Salt Lake City</a></li> <li><a href="#losangeles">Los Angeles</a> <span class="timeZone">-8</span></li> <li><a href="#cupertino">Cupertino</a></li> <li><a href="#vancouver">Vancouver</a></li> <li><a href="#anchorage">Anchorage</a> <span class="timeZone">-9</span></li> <li><a href="#honolulu">Honolulu</a> <span class="timeZone">-10</span></li> <li><a href="#apia">Apia</a> <span class="timeZone">-11</span></li> </ul> </nav> <div id="mapContainer"> <canvas id="map"></canvas> <div id="planeContainer"> <div id="planeBox"><div id="plane">✈</div></div> </div> </div> <div id="main"> <!-- clock --> <div id="clock"> <div class="base"><div class="B0"></div><div class="B1"></div><div class="B2"></div><div class="B3"></div><div class="B4"></div><div class="B5"></div><div class="B6"></div></div> <div class="letter"><div class="L1">1</div><div class="L2">2</div><div class="L3">3</div><div class="L4">4</div><div class="L5">5</div><div class="L6">6</div><div class="L7">7</div><div class="L8">8</div><div class="L9">9</div><div class="L10">10</div><div class="L11">11</div><div class="L12">12</div></div> <div class="hand"><div class="h"></div><div class="m"></div><div class="B7"></div><div class="B8"></div><div class="s"></div></div> </div> <!-- indicator --> <div id="indicator"> <div id="pin"><div id="ring"></div><div id="point"></div></div> <div class="container"> <p id="dDate"> </p> <p id="dTime"><span id="dUtc"> </span><span id="dDigit"> </span></p> <h2>Tokyo</h2> <ul class="detail"> <li id="dNation">Japan</li> <li id="dPos">35°42‘2”N 139°42’54”E</li> </ul> </div> </div> </div> <div id="switch"> <div class="container"> <div id="play"><div class="base"><div class="mark">▶</div></div><div class="sideTop"></div><div class="gloss"></div><div class="projection"></div></div> <div id="stop"><div class="base"><div class="mark"></div></div><div class="sideTop"></div><div class="gloss"></div><div class="projection"></div></div> </div> <div class="shadow"></div> </div> <footer> <p id="copy" class="altText">Copyright © 2010 <a href="http://onotakehiko.com/" title="ONO TAKEHIKO - onotakehiko.com">ONO TAKEHIKO</a>. All Rights Reserved. Hosted by <a class="altText" href="http://heteml.jp/" title="レンタルサーバー「heteml」 - 大容量・高機能のレンタルサーバー(ホスティングサービス)" rel="external" target="_blank">heteml</a></p> </footer> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script src="http://onotakehiko.com/min/g=webkitclock_js"></script> </body> </html>
@charset "utf-8";html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}body{font:13px/1.231 sans-serif;*font-size:small}select,input,textarea,button{font:99% sans-serif}pre,code,kbd,samp{font-family:monospace,sans-serif}.x-large{font-size:138.5%}.large{font-size:123.1%}.mid{font-size:108%}.small{font-size:93%}.x-small{font-size:85%}body,select,input,textarea{color:#444}h1,h2,h3,h4,h5,h6{font-weight:bold}html{overflow-y:scroll}a:hover,a:active{outline:none}a,a:active,a:visited{color:#607890}a:hover{color:#036}ul,ol{margin-left:1.8em}ol{list-style-type:decimal}nav ul, nav li{margin:0}small{font-size:85%}strong,th{font-weight:bold}td, td img{vertical-align:top}sub{vertical-align:sub;font-size:smaller}sup{vertical-align:super;font-size:smaller}pre{padding:15px;white-space:pre;white-space:pre-wrap;white-space:pre-line;word-wrap:break-word}textarea{overflow:auto}.ie6 legend, .ie7 legend{margin-left: -7px}input[type="radio"]{vertical-align:text-bottom}input[type="checkbox"]{vertical-align:bottom}.ie7 input[type="checkbox"]{vertical-align:baseline}.ie6 input{vertical-align:text-bottom}label,input[type=button],input[type=submit],button{cursor:pointer}button,input,select,textarea{margin:0}input:valid,textarea:valid{}input:invalid,textarea:invalid{border-radius:1px;-moz-box-shadow:0px 0px 5px red;-webkit-box-shadow:0px 0px 5px red;box-shadow:0px 0px 5px red}.no-boxshadow input:invalid, .no-boxshadow textarea:invalid{background-color:#f0dddd}::-moz-selection{background:#FF5E99;color:#fff;text-shadow:none}::selection{background:#FF5E99;color:#fff;text-shadow:none}a:link{-webkit-tap-highlight-color:#FF5E99}button{width:auto;overflow:visible}.ie7 img{-ms-interpolation-mode:bicubic}.ir{display:block;text-indent: -999em;overflow:hidden;background-repeat:no-repeat;text-align:left;direction:ltr}.hidden{display:none;visibility:hidden}.visuallyhidden{position:absolute !important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px)}.invisible{visibility:hidden}.clearfix:before,.clearfix:after{content:"\0020";display:block;height:0;visibility:hidden}.clearfix:after{clear:both}.clearfix{zoom:1}html,body{width:100%;height:100%}body{background:#000 -webkit-gradient(linear, left top, left bottom, from(rgba(128, 128, 128, 1)), to(rgba(25, 25, 40, 1))) fixed}ul,ol{list-style-type:none;margin-left:0}#container{min-width:960px;min-height:768px;overflow:hidden}header{position:fixed;z-index:200;width:423px;top:20px;left:50%;margin:0 0 0 37px;-webkit-backface-visibility:hidden}h1{margin-bottom:20px;color:#FFF;text-shadow:0 1px 0 #000;font-family:"learning-curve-1","learning-curve-2";font-size:64px;-webkit-font-smoothing:antialiased}header .summary{line-height:140%;color:#DEDEDE;text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);margin:0 0 10px 0;font-size:14px;-webkit-font-smoothing:antialiased}header a{text-decoration:none}header a:link, header a:visited, header a:hover, header a:active{color:#FFF}header a:hover, header a:active{text-decoration:underline}header .note{color:#222;font-size:11px}#progress{position:fixed;z-index:300;top:0;left:0;width:100%;height:4px;background:#000;border-bottom:#888 1px solid}#progress .bar{width:100%;height:4px;background:#EFEBE3;-webkit-transform:translateX(-100%)}#progress.active .bar{-webkit-animation-name:'progress';-webkit-animation-duration:15s;-webkit-animation-delay:0.5s;-webkit-animation-timing-function:linear;-webkit-animation-iteration-count:infinite}@-webkit-keyframes 'progress'{0%{-webkit-transform:translateX(-100%)}100%{-webkit-transform:translateX(0)}}nav{position:absolute;z-index:100;left:20px;top:30px;width:192px;padding-bottom:23px;color:#ccc;font-weight:300;-webkit-backface-visibility:hidden}nav ul{width:192px}nav li{position:relative;width:192px}nav li .timeZone{display:block;position:absolute;top:5px;right:0px;width:24px;height:12px;padding:0 6px 0 6px;background:#AAA;color:#000;font-size:10px;font-weight:300;line-height:12px;text-align:center;vertical-align:middle;-webkit-border-radius:6px;-webkit-font-smoothing:antialiased}nav a{position:relative;z-index:250;display:block;width:192px;height:24px;line-height:24px;vertical-align:middle;text-decoration:none;text-shadow:0 1px 0 #000}nav a:link, nav a:visited, nav a:hover, nav a:active{color:#EFEBE3}nav a:hover, nav a:active{text-decoration:underline}nav a.active{text-shadow:0 1px 0 rgba(153, 153, 153, 0.7)}nav a.active:link, nav a.active:visited, nav a.active:hover, nav a.active:active{cursor:default;color:#000;font-weight:bold}nav a.active:hover, nav a.active:active{text-decoration:none}#mapContainer{position:fixed;width:100%;height:100%;overflow:hidden;-webkit-transform-style:preserve-3d}#map{position:absolute;left:50%;top:50%;margin-top: -500px;margin-left: -594px;opacity:0;-webkit-transition-property:opacity;-webkit-transition-timing-function:linear;-webkit-transition-duration:1s;-webkit-transform:rotate(23.4deg)}#map.show{opacity:1}#main{position:fixed;width:100%;height:100%;left: -94px}#planeContainer{position:absolute;left:50%;top:50%;margin-left: -94px}#planeBox{-webkit-transform-style:preserve-3d;-webkit-animation-name:'plane-turn';-webkit-animation-duration:60s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-webkit-backface-visibility:hidden}@-webkit-keyframes 'plane-turn'{0%{-webkit-transform:rotateZ(-20deg)}100%{-webkit-transform:rotateZ(20deg)}}#plane{position:absolute;z-index:200;margin: -14px 0 0 -14px;font-size:28px;color:#efebe3;text-shadow:0 0 3px #000;-webkit-animation-name:'plane-rotate1';-webkit-animation-duration:60s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-webkit-backface-visibility:hidden}@-webkit-keyframes 'plane-rotate1'{0%{-webkit-transform:rotateY(-90deg) translateZ(510px)}100%{-webkit-transform:rotateY(90deg) translateZ(510px)}}#clock{position:absolute;z-index:200;left:50%;top:50%;width:128px;height:128px;margin: -64px 0 0 -106px}#clock .base{position:absolute;left:7px;top:7px;width:114px;height:114px;background:#333;-webkit-border-radius:20px;-webkit-box-shadow:0 2px 5px #000}.B0{position:absolute;width:114px;height:46px;background: -webkit-gradient(linear, left top, left bottom,from(#d8d8d8),to(#505050));-webkit-border-top-left-radius:20px;-webkit-border-top-right-radius:20px;-webkit-border-bottom-left-radius:0;-webkit-border-bottom-right-radius:0;-webkit-background-clip:padding-box}.B1{position:absolute;left:1px;top:1px;width:112px;height:112px;background:#000;-webkit-border-top-left-radius:30px;-webkit-border-top-right-radius:30px;-webkit-border-bottom-left-radius:19px;-webkit-border-bottom-right-radius:19px;-webkit-background-clip:padding-box}.B2{position:absolute;left:1px;top:1px;width:112px;height:57px;background: -webkit-gradient(linear, left top, left bottom, from(#666666), color-stop(0.5, #434343), to(#242424));-webkit-border-top-left-radius:19px;-webkit-border-top-right-radius:19px;-webkit-border-bottom-left-radius:56px 12px;-webkit-border-bottom-right-radius:56px 12px;-webkit-background-clip:padding-box}.B3{position:absolute;left:9px;top:9px;width:96px;height:96px;background:#f2f2f2;-webkit-border-radius:48px;-webkit-box-shadow:0 -1px 1px #000;-webkit-background-clip:padding-box}.B4{position:absolute;left:14px;top:12px;width:86px;height:44px;background:#f9f9f9;-webkit-border-top-left-radius:43px 38px;-webkit-border-top-right-radius:43px 38px;-webkit-border-bottom-left-radius:43px 6px;-webkit-border-bottom-right-radius:43px 6px;-webkit-background-clip:padding-box}.B5{position:absolute;left:9px;top:41px;width:96px;height:32px;background:#f2f2f2;-webkit-border-radius:48px 16px;-webkit-background-clip:padding-box}.B6{position:absolute;left:9px;top:9px;width:96px;height:96px;background:transparent;-webkit-border-radius:48px;-webkit-box-shadow:inset 0 1px 4px #000;-webkit-background-clip:padding-box}#clock .letter{letter-spacing: -1px;font-family:"myriad-pro-1","myriad-pro-2",sans-serif;font-size:12.5px}.L1{position:absolute;left:79px;top:26px}.L2{position:absolute;left:93px;top:39px}.L3{position:absolute;left:97px;top:57px}.L4{position:absolute;left:92px;top:75px}.L5{position:absolute;left:79px;top:88px}.L6{position:absolute;left:61px;top:93px}.L7{position:absolute;left:43px;top:88px}.L8{position:absolute;left:30px;top:75px}.L9{position:absolute;left:25px;top:57px}.L10{position:absolute;left:27px;top:39px}.L11{position:absolute;left:41px;top:26px}.L12{position:absolute;left:58px;top:21px}#clock .h{position:absolute;left:58px;top:39px;width:12px;height:31px;-webkit-transform-origin-x:6px;-webkit-transform-origin-y:25px}#clock .m{position:absolute;left:58px;top:25px;width:12px;height:45px;-webkit-transform-origin-x:6px;-webkit-transform-origin-y:39px}#clock.move .h, #clock.move .m{-webkit-transition-property: -webkit-transform;-webkit-transition-duration:0.5s}.B7{position:absolute;z-index:100;left:59px;top:59px;width:8px;height:8px;background:#f2f2f2;border:1px solid #000;-webkit-border-radius:5px}.B8{position:absolute;z-index:100;left:62px;top:62px;width:4px;height:4px;background:#eb1014;-webkit-border-radius:2px;-webkit-background-clip:padding-box}#clock .s{position:absolute;z-index:200;left:63px;top:22px;width:2px;height:42px;background:#e40000;opacity:0.8;-webkit-transform-origin-x:1;-webkit-transform-origin-y:42px;-webkit-transition-property: -webkit-transform;-webkit-transition-duration:0.3s;-webkit-transition-timing-function:ease-in;-webkit-backface-visibility:hidden}#indicator{position:absolute;left:50%;top:50%;margin:0 0 0 131px}#pin.pin-fadeout{-webkit-animation-name:'pin-fadeout';-webkit-animation-duration:0.3s;-webkit-animation-iteration-count:1}@-webkit-keyframes 'pin-fadeout'{0%{opacity:1.0}100%{opacity:0}}#pin.pin-fadein{-webkit-animation-name:'pin-fadein';-webkit-animation-duration:0.3s;-webkit-animation-iteration-count:1}@-webkit-keyframes 'pin-fadein'{0%{opacity:0}100%{opacity:1.0}}#ring{position:absolute;left: -37px}#ring.focusing{width:640px;height:640px;margin: -323px 0 0 -323px;background:rgba(255, 94, 153, 0.3);border:3px solid #FF5E99;opacity:1;-webkit-border-radius:323px;-webkit-box-shadow:0 0 3px #FF5E99;-webkit-animation-name:'focusing';-webkit-animation-duration:1.2s;-webkit-animation-direction:normal;-webkit-animation-timing-function:ease-in;-webkit-animation-iteration-count:1}@-webkit-keyframes 'focusing'{0%{-webkit-transform:scale(1.1);opacity:0.5}15%{-webkit-transform:scale(0.9);opacity:0.5}30%{-webkit-transform:scale(1);opacity:0.7}45%{-webkit-transform:scale(1.15);opacity:1.0}70%{-webkit-transform:scale(0.3);opacity:1.0}90%{-webkit-transform:scale(0.3);opacity:1.0}100%{-webkit-transform:scale(0);opacity:0}}#ring.blink{width:64px;height:64px;margin: -37px 0 0 -37px;background:transparent;border:5px solid #FF5E99;opacity:0;-webkit-border-radius:37px;-webkit-box-shadow:0 0 5px #FF5E99;-webkit-animation-name:'blink';-webkit-animation-duration:3s;-webkit-animation-timing-function:linear;-webkit-animation-iteration-count:infinite}@-webkit-keyframes 'blink'{0%{-webkit-transform:scale(0);opacity:1.0}100%{-webkit-transform:scale(1);opacity:0}}#point{position:absolute;left: -37px;width:8px;height:8px;margin: -4px 0 0 -4px;background: -webkit-gradient(linear, left top, left bottom, from(#FFACCB), color-stop(0.5, #FF73A7), to(#FF5E99));-webkit-border-radius:4px;-webkit-box-shadow:0 2px 3px #333}#point.hop{-webkit-animation-name:'hop';-webkit-animation-duration:0.3s;-webkit-animation-timing-function:linear}@-webkit-keyframes 'hop'{0%{-webkit-transform:scale(1)}25%{-webkit-transform:scale(0.5)}50%{-webkit-transform:scale(1.5)}75%{-webkit-transform:scale(0.75)}100%{-webkit-transform:scale(1)}}#indicator .container{margin: -133px 0 0 0}#indicator #dDate{margin:0 0 0 -3px;width:426px;font-family:"ff-dagny-web-pro-1","ff-dagny-web-pro-2",sans-serif;font-weight:200;font-size:48px;color:#000;text-shadow:0 1px 0 #555;-webkit-font-smoothing:antialiased}#indicator #dTime{margin: -20px 0 0 -3px;width:426px;font-family:"ff-dagny-web-pro-1","ff-dagny-web-pro-2",sans-serif;font-weight:200;font-size:48px;color:#000;text-shadow:0 1px 0 #555;-webkit-font-smoothing:antialiased}h2{margin:6px 0 50px 0;font-family:"learning-curve-1","learning-curve-2";font-weight:300;font-size:54px;color:#EFEBE3;text-shadow:0 1px 0 #000}#indicator .detail{color:#CCC;font-size:16px;font-family:"myriad-pro-1","myriad-pro-2",sans-serif}#switch{position:fixed;left:50%;bottom:108px;margin:0 0 0 37px;width:72px;height:58px;background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.65)), to(rgba(0, 0, 0, 1)));-webkit-border-radius:7px;-webkit-box-shadow:0 1px 0 #666}#switch .container{position:relative;width:72px;height:58px;-webkit-transform-style:preserve-3d;-webkit-transform:translateZ(100px)}#play{display:block;position:absolute;left:4px;top:4px;width:30px;height:50px;-webkit-transform-origin:50% 50%;-webkit-transform-style:preserve-3d}#stop{display:block;position:absolute;left:38px;top:4px;width:30px;height:50px;-webkit-transform-origin:50% 50%;-webkit-transform-style:preserve-3d}#switch .active{-webkit-transform:rotateX(30deg)}#switch .sideTop{position:absolute;z-index:1000;left:0;top: -13px;width:30px;height:13px;background: -webkit-gradient(linear, left top, right top, from(#1f1f1f), color-stop(0.2, #393939), color-stop(0.8, #393939),to(#1f1f1f));-webkit-transform-origin:left bottom;-webkit-transform:rotateX(-90deg)}#switch .base{position:absolute;width:30px;height:50px;background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#262626));cursor:pointer;-webkit-border-radius:3px;-webkit-box-shadow:inset 0 1px 0 #555}#switch #play.active .base{background: -webkit-gradient(linear, left top, left bottom, from(#554444), to(#111111));-webkit-box-shadow:inset 0 1px 0 #444}#switch #stop.active .base{background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#111111));-webkit-box-shadow:inset 0 1px 0 #444}#play.active .gloss{position:absolute;left:0;top:1px;width:30px;height:1px;background: -webkit-gradient(linear, left top, right top, from(rgba(255, 94, 153, 0)), color-stop(0.2, rgba(255, 94, 153, 0.4)), color-stop(0.8, rgba(255, 94, 153, 0.4)),to(rgba(255, 94, 153, 0)));-webkit-transform-origin:left top;-webkit-transform:rotateX(30deg)}#stop.active .gloss{position:absolute;left:0;top:1px;width:30px;height:1px;background: -webkit-gradient(linear, left top, right top, from(rgba(153, 153, 153, 0)), color-stop(0.2, rgba(153, 153, 153, 0.4)), color-stop(0.8, rgba(153, 153, 153, 0.4)),to(rgba(153, 153, 153, 0)));-webkit-transform-origin:left top;-webkit-transform:rotateX(30deg)}#play .mark{position:absolute;left:11px;top:6px;color:#000;font-size:13px;text-shadow:0 1px 0 #5f5f5f;opacity:1;-webkit-transform:scaleY(0.8);-webkit-transition-property:opacity;-webkit-transition-duration:2s}#play.active .mark{color:#FF5E99;text-shadow:0 0 10px #ff89b6, 0 1px 0 #181818}@-webkit-keyframes 'play-blink'{0%{opacity:1}100%{opacity:0.3}}#stop .mark{position:absolute;left:11px;top:10px;width:8px;height:8px;background:#000;-webkit-box-shadow:0 1px 0 #444}#switch .projection{position:absolute;left:13px;top:40px;width:4px;height:4px;background: -webkit-gradient(linear, left top, left bottom, from(#505050), to(#222222));-webkit-border-radius:2px;-webkit-box-shadow:0 1px 0 #000}#switch .shadow{position:absolute;left:0;top:0;width:72px;height:5px;background:transparent;-webkit-border-top-left-radius:7px;-webkit-border-top-right-radius:7px;-webkit-border-bottom-left-radius:0;-webkit-border-bottom-right-radius:0;-webkit-box-shadow:inset 0 4px 4px rgba(0,0,0,0.5);-webkit-transform:translateZ(100px)}footer{position:fixed;left:50%;bottom:0;margin:0 0 0 37px;padding:0 20px 28px 0;width:423px;-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased}#shareButtons{width:423px;height:36px}#shareButtons .twitter{display:inline-table;vertical-align:bottom}#shareButtons .facebook{position:relative;top: -3px;display:inline-table;vertical-align:bottom}#copy{font-size:11px;color:#CCC}#copy a:link, #copy a:visited{text-decoration:none}#copy a:hover, #copy a:active{color:#607890;text-decoration:underline}@media all and (orientation:portrait){}@media all and (orientation:landscape){}@media screen and (max-device-width: 1024px){#progress.active .bar{-webkit-animation-duration:20s}}@media screen and (max-device-width: 960px){#progress.active .bar{-webkit-animation-duration:20s}}@media screen and (max-device-width: 480px){#progress.active .bar{-webkit-animation-duration:20s}}@media print{*{background:transparent !important;color:#444 !important;text-shadow:none !important}a,a:visited{color:#444 !important;text-decoration:underline}a:after{content:" (" attr(href) ")"}abbr:after{content:" (" attr(title) ")"}.ir a:after{content:""}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}@page{margin:0.5cm}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}
Pop out
Help
About
×
×