html, body { margin: 0; padding: 0; color: #ffffff; min-width: 700px; background-color: #000000;} 
html { background-color: #8e959a;}
body { background-color: #000000;}

a { color: #0f09fc; text-decoration: none;}
a:hover { text-decoration: underline;}

#partHead { background: #949aa0 url('images/perforated.png') center top repeat-x; height: 140px; padding: 0; border-bottom: 2px solid #4f4f4f; position: relative; overflow: hidden;}
#partHead h2 { width: 153px; height: 130px; padding: 0; margin: 14px auto 0; padding: 0; overflow: hidden; background: #959ba1; position: relative; background: -webkit-gradient(linear, left top, left bottom, from(#7c8186), to(#99a0a6), color-stop(0.2, #8a9095)); }
#partHead h2 span { top: 0; left: 0; position: absolute; display: block; width: 150px; height: 120px; text-indent: -100em; overflow: hidden; background-position: center center; background-repeat: no-repeat;}
#partHead .slider { position: absolute; top: 81px; width: 100%; height: 100px; background-color: transparent; text-align: center; }
#partHead .slider i { margin: auto; display: block; width: 86px; height: 140px; background: transparent url('images2/head-slide-holder.png') left top no-repeat;}
#partHead .slider b { width: 50%; height: 140px; top: 0; position: relative; background: transparent url('images2/head-slide.png') center top repeat-x; }
#partHead .slider b.left { float: left; margin-left: -43px; background-position: right top;}
#partHead .slider b.right { float: left; margin-left: 86px; margin-right: -43px;}

#partHead h2.home span { top: 2px; left: 1px; background-image: url('images2/section-home.png'); }
#partHead h2.score span { top: 2px; left: 1px; background-image: url('images2/section-score.png'); }
#partHead h2.support span { top: 2px; left: 1px; background-image: url('images2/section-support.png'); }

#partMain {  min-width: 800px; padding-bottom: 30px; background: #000000 url('images2/backdrop-linear.png') left top repeat-x /* -webkit-gradient(linear, left top, left bottom, from(#262626), to(#000000)) */; position: relative; min-height: 200px;}
ul#Menu { width: 18em; padding: 0 3px; border: 1px solid #606060; border-color: #606060 #424242; margin: 0; text-align: center; font: bold 20px/44px 'Helvetica Neue Bold', 'Helvetica Neue', Arial, sans-serif; z-index: 1000; margin: 0 auto; border-top: none; height: 45px; -webkit-border-bottom-left-radius: 12px 12px; -webkit-border-bottom-right-radius: 12px 12px; -moz-border-radius-bottomleft: 12px; -moz-border-radius-bottomright: 12px; }
ul#Menu li { list-style: none; float: left; width: 6em; padding: 0; margin: 0; border: 1px solid #000000; border-top: none;  border-left-color: #848484; background-color: #000000; -webkit-transition: background-color .8s ease-out;}
ul#Menu li:first-child { margin-left: -3px; border-left-color: #000000;}
ul#Menu li:last-child { margin-right: -3px; }
ul#Menu li:first-child, ul#Menu li:first-child a { -webkit-border-bottom-left-radius: 11px 11px; -moz-border-radius-bottomleft: 11px;}
ul#Menu li:last-child, ul#Menu li:last-child a { -webkit-border-bottom-right-radius: 11px 11px; -moz-border-radius-bottomright: 11px;}
ul#Menu li:hover { background-color: #001c98; -webkit-transition: background-color .6s ease-in;}
ul#Menu li a { color: #ffffff; display: block; text-shadow: 0 -2px 1px rgba(0,0,0,0.5); background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.2)), to(rgba(255,255,255,0.12)), color-stop(0.5, rgba(255,255,255,.25)), color-stop(0.5, rgba(255,255,255,0))); background-image: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.05));}
ul#Menu li a:hover { text-decoration: none; }
ul#Menu li.current { background-color: #0730cc; -webkit-animation-name: glow; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out;}
ul#Menu li.current a { -webkit-animation-name: light; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out;}

div#iphone { margin: 10px auto 0; width: 420px; height: 480px; background: transparent url('images2/iphone-tiler.jpg') left top no-repeat; text-indent: -100em; overflow: hidden;}
div#feature { clear:  both; padding: 0 8%; max-width: 900px; margin: 0 auto; min-width: 800px; position: relative;}
div#feature .about { float: left; width: 220px; margin: 50px -390px 0 0;}
div#feature .apps { float: right; width: 230px; margin: 90px 0 0 -390px;}
div#feature #tryme {  position: absolute; bottom: -40px; left: 60%; margin-right: -200px; width: 260px; height: 120px; background: transparent url('images2/chulk-tryme.png') left top no-repeat; text-indent: -100em; overflow: hidden;}

div#feature .about h1 { font: bold 65px/100% 'Helvetica Neue', 'Helvetica', Arial, sans-serif; margin-bottom: .5em;}
div#feature .about h1 span { display: block; padding-right: 40px; color: #999999; font: normal 24px/100% 'Helvetica Neue Regular', 'Helvetica Regular', Arial, sans-serif;  font-weight: normal; line-height: 100%;}
div#feature .about p { padding-right: 40px; font: normal 11px/120% 'Lucida Grande', 'Lucida Grande Unicode', Arial, sans-serif; color: #cccccc;}

#AppStore { display: block; margin-top: 20px; background: transparent url('images2/appstore-badge.png') left top no-repeat; padding: 50px 0 0 0; text-decoration: none; font: normal 11px/120% 'Lucida Grande', 'Lucida Grande Unicode', Arial, sans-serif; }
#AppStore  * { display: block; width: 120px; text-align: center;}
#AppStore b { color: #ffffff;  }
#AppStore em { font-style: normal; }

div.apps p.app a.icon { width: 135px; height: 135px; margin-right: 10px; display: block; float: left; background-color: transparent; background-position: top left; background-repeat: no-repeat; }
div.apps p.app * { text-align: center;}
div.apps p.full { margin-bottom: 20px; overflow: hidden;}
div.apps p.full a.icon { background-image: url('images2/icon-tiler-app.png'); }
div.apps p.full b { display: block; font: normal 24px/100% 'Helvetica Neue', 'Helvetica', Arial, sans-serif;}
div.apps p.lite a.icon { background-image: url('images2/icon-tiler-lite.png');}
div.apps p.app a.button { display: block; margin: 40px 0 0 145px; font: bold 12px/27px 'Helvetica Neue', 'Helvetica', Arial, sans-serif; -webkit-border-radius: 13px 13px; -moz-border-radius: 13px 13px; background-color: #000000; border: 1px solid rgba(78,78,78,.6); border-width: 1px 0; border-top-color: rgba(12,12,12,.2); color: #ffffff; -webkit-transition: background-color .4s ease-out; text-shadow: 0 -1px 0 rgba(0,0,0,0.8); background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)), to(rgba(255,255,255,0.05)), color-stop(0.5, rgba(255,255,255,.25)), color-stop(0.5, rgba(255,255,255,0))); background-image: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.05));}
div.apps p.app a.button:hover { text-decoration: none; background-color: #001c98; -webkit-transition: background-color .3s ease-out; text-decoration: none;}
div.apps p.lite span { display: block; padding-top: 20px;  font: normal 9px/120% 'Lucida Grande', 'Lucida Grande Unicode', Arial, sans-serif; text-align: center;}
div.apps p.lite i { display: block; font: normal 11px/120% 'Lucida Grande', 'Lucida Grande Unicode', Arial, sans-serif; padding-top: 3px;}
div.apps p.lite a.button { margin-top:  8px; background-color: #e8b300; color: #000000; text-shadow: 0 1px 0 rgba(255,255,255,0.8);}
div.apps p.lite a.button:hover { background-color: #fcff00;}

div#follow { padding: 20px 0; text-align: center; font: normal 32px/40px 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #787e81 url('images2/follow-backdrop.png') top left repeat-x ; color: #262729; vertical-align: middle; border-width: 1px 0; border-style: solid; border-color: #000000 #000 #a1a9ae;}
div#follow em { vertical-align: bottom; font-style: normal; text-shadow: 0 -1px 1px #f0f0f0; font-weight: 600;}
div#follow a { display: inline-block; width: 7em; font-size: 18px; line-height: 35px; background-color: #000000; -webkit-border-radius: 19px 19px; -moz-border-radius: 19px 19px; color: #fffffff; border: 1px solid rgba(255,255,255,.6); border-width: 1px 0; border-top-color: rgba(255,255,255,.2); color: #ffffff; -webkit-transition: background-color .4s ease-out; text-shadow: 0 -2px 1px rgba(0,0,0,0.6); font-weight: bold;}
div#follow a span { display: block;  border: 1px solid #000000; -webkit-border-radius: 18px 18px; -moz-border-radius: 18px 18px; background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)), to(rgba(255,255,255,0.05)), color-stop(0.5, rgba(255,255,255,.25)), color-stop(0.5, rgba(255,255,255,0))); background-image: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.05));}
div#follow a:hover span { border-color: #001366;}
div#follow a:hover { background-color: #001c98; -webkit-transition: background-color .3s ease-in; text-decoration: none;}

div#expect { padding: 0 8%; max-width: 900px; margin: 0 auto; min-width: 800px; position: relative; overflow: hidden;}
div#expect #what { width: 200px; float: left; }
div#expect #what h2 { font: normal 48px/90% 'Helvetica Neue', 'Helvetica', Arial, sans-serif; margin-top:  20px;}
div#expect #what p { font: normal 11px/120% 'Lucida Grande', 'Lucida Grande Unicode', Arial, sans-serif; color: #cccccc;}
div#expect #features { float: right; width: 600px; padding-left: 20px; margin-right: -30px;}
div#expect #features div { width: 140px; padding: 10px 10px 20px 140px; float: left; height: 120px; background-position: left center; background-repeat: no-repeat; }
div#expect #features div p { font: normal 11px/120% 'Lucida Grande', 'Lucida Grande Unicode', Arial, sans-serif; color: #cccccc;}
div#expect #features div h4 { font: normal 18px/110% 'Helvetica Neue', 'Helvetica', Arial, sans-serif; margin-bottom: 10px; margin-top: 14px;}
div#expect #features div.scoreboard { background-image: url('images2/feature-score.png');} 
div#expect #features div.skins { background-image: url('images2/feature-skin.png');} 
div#expect #features div.gameplay { background-image: url('images2/feature-gameplay.png');} 
div#expect #features div.zen { background-image: url('images2/feature-zen.png');} 
div#expect #features div.night { background-image: url('images2/feature-night.png');} 

div#footer { background-color: #8e959a; padding: 20px 0;}
div#footer>div { padding: 0 8%; max-width: 900px; margin: 0 auto; min-width: 800px; position: relative; overflow: hidden;}
div#footer p { margin: 0;}
div#footer p#ttoo { margin-top: 10px; width: 300px; font-family: Georgia, Times, serif; overflow: hidden; color: #2c2c2c; padding-top: 10px;}
div#footer p#ttoo a.bracket { float: left; width:  3em; font-size: 45px; color: #2c2c2c; font-style: italic; text-shadow: 0 1px 0 #f0f0f0; margin-top: -7px;}
div#footer p#ttoo a.bracket:hover { text-decoration: none;}

div#footer p.switch { float: right; width: 200px; }	
div#footer #switch { float: right; display: block; width: 75px; height: 75px; background: transparent url('images2/footer-switch.png') top left no-repeat ; text-indent: -100em; overflow: hidden; cursor: pointer;}


/* Scores table*/

#scoresDif table { display: none;}
#scoresDif.easy table.easy, #scoresDif.medium table.medium, #scoresDif.hard table.hard { display: table;}

#scoresTabs { display: block; text-align: center;  width: 500px; margin: 20px auto 0; }
#scoresTabs a { display: inline-block; width:  5em; font: normal 15px/150% 'Helvetica Neue Light', 'Helvetica', Arial, sans-serif; padding:  5px 10px; background-color: #080808; margin: 0 -1px; border-top: 1px solid #666666;  color: #cccccc; -webkit-border-top-left-radius: 7px; -webkit-border-top-right-radius: 7px; -moz-border-radius-topleft: 7px; -moz-border-radius-topright: 7px; -webkit-transition: all .4s ease-out;}
#scoresTabs a.current { background-color: #303030; color: #ffffff;} 
#scoresTabs a:hover { background-color: #0036b0; color: #a6c1ff; text-decoration: none; border-top-color: #7fa6ff; -webkit-transition: all .2s ease-out;}
#scoresTabs a.current:hover { background-color: #303030; color: #ffffff; border-top: 1px solid #666666;}

#scores { width: 500px; margin: 0 auto 20px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border-collapse: collapse; border-spacing: 0;}
#scores thead { font-size: 9px; font-weight: normal;}
#scores thead th { height: 28px; text-align: left; text-indent: -100em; overflow: hidden; background-color: #303030; background-position: center center; background-repeat: no-repeat; border-bottom: 1px solid #0d0d0d;}
#scores thead th.place { background-image: url('images/icon-place.png');}
#scores thead th.move { background-image: url('images/icon-move.png');}
#scores thead th.time { background-image: url('images/icon-timer.png');}
#scores tbody td.date, #scores tbody tr.win td.date { font-size: 9px; text-align: center;}
#scores tbody td, #scores tbody th { border-bottom: 1px solid #2d2d2d; padding: 7px 0; font-size: 14px;}
#scores tbody tr.win td, #scores tbody tr.win th { font-size: 18px;}
#scores tbody td.move, #scores tbody td.time { text-align: center;}
#scores tbody .first td, #scores tbody .first th { color: #fec71f;}
#scores tbody .second td, #scores tbody .second th { color: #d1d1d1;}
#scores tbody .third td, #scores tbody .third th { color: #ac7d23;}
#scores tbody a { color: #0078ff;}
#scores tbody tr.first th, #scores tbody tr.second th, #scores tbody tr.third th { color: #ffffff; font-size: 14px;}
/* Support */

#Content { width: 550px; margin: 20px auto; line-height: 120%; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;}
div.support p { font-size: 13px; margin: .5em 50px;}
div.support p.dropline { padding-top: 15px; border-top: 2px solid #ffffff; margin-top: 20px;}

#tilerSupport { display: block; position: relative;}
#tilerSupport fieldset { margin: 20px auto 0; padding: 10px; border: 2px solid #aaaaaa; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 450px;}
#tilerSupport fieldset label, #tilerSupport fieldset input { font-size: 14px; display: inline-block; width: 240px; margin-bottom: .5em; }
#tilerSupport fieldset label { text-align: right; padding-right: 20px; width: 170px;} 
#tilerSupport fieldset label span { font-size: 9px;}
#tilerSupport fieldset label.message { margin-top: 10px; text-align: left; padding-left: 5px;}
#tilerSupport fieldset select { display: inline-block; font-size: 16px; width: 8em;}
#tilerSupport fieldset textarea { width: 434px; margin: 5px; height: 10em; font-size: 14px;}
#tilerSupport p { text-align: center;}
#tilerSupport p input { font-size: 16px; width: 9em;}

#disclosure { width: 450px; margin: 50px auto 30px; overflow: hidden;}
#completeInfo { float: left; padding: 10px 0 0 40px; width: 180px;}
#completeInfo span { display: block; font: normal 18px/120% Arial, sans-serif; padding: 5px 0; color: #afafaf; text-shadow: 0 -1px 0 #000000; }
#completeInfo span#nick { font-weight: bold; font-size: 24px; white-space: nowrap; color: #ffffff;}
#puzzle { float: left; width: 212px; height: 212px; }
#puzzle b { display: block; margin: -11px; width: 75px; height: 75px; float: left; background:  transparent url(/images2/skin/shadow.png) left top no-repeat;}
#puzzle b i { display: block; width: 50px; height: 50px; margin: 12px; background-color: transparent; background-position: top left; background-repeat:  no-repeat; }
#puzzle b#d0 { background-image: none;}
#puzzle b#d1 i { background-image: url('/images2/skin/d01.png'); }
#puzzle b#d2 i { background-image: url('/images2/skin/d02.png'); }
#puzzle b#d3 i { background-image: url('/images2/skin/d03.png'); }
#puzzle b#d4 i { background-image: url('/images2/skin/d04.png'); }
#puzzle b#d5 i { background-image: url('/images2/skin/d05.png'); }
#puzzle b#d6 i { background-image: url('/images2/skin/d06.png'); }
#puzzle b#d7 i { background-image: url('/images2/skin/d07.png'); }
#puzzle b#d8 i { background-image: url('/images2/skin/d08.png'); }
#puzzle b#d9 i { background-image: url('/images2/skin/d09.png'); }
#puzzle b#d10 i { background-image: url('/images2/skin/d10.png'); }
#puzzle b#d11 i { background-image: url('/images2/skin/d11.png'); }
#puzzle b#d12 i { background-image: url('/images2/skin/d12.png'); }
#puzzle b#d13 i { background-image: url('/images2/skin/d13.png'); }
#puzzle b#d14 i { background-image: url('/images2/skin/d14.png'); }
#puzzle b#d15 i { background-image: url('/images2/skin/d15.png'); }

#beatIt { clear: both; padding: 20px 0; width: 220px; font: normal 11px/120% 'Lucida Grande', 'Lucida Grande Unicode', Arial, sans-serif;}

/* Glow - night mode styles */

body.glow #partHead { border-bottom-color: #5da67f;}
body.glow #partHead { background-image: url(images2/perforated-glow.png);	}
body.glow #partHead h2 { background: -webkit-gradient(linear, left top, left bottom, from(#0a0a0a), to(#112d16), color-stop(0.1, #0a0a0a), color-stop(0.5, #112d16)); }
body.glow #partHead .slider i { background-image: url('images2/head-slide-holder-glow.png');}
body.glow #partHead .slider b {background-image: url('images2/head-slide-glow.png'); }
body.glow #partMain { background-image: none; }
body.glow a { color: #96ffa8;}
body.glow { text-shadow: 0 0 6px #009b18, 0 0 6px #009b18, 0 0 2px #09881d; color: #ffffff;}
body.glow div#feature .about h1, body.glow div#expect #what h2 { text-shadow: 0 0 3px #009b18, 0 0 7px #09881d,  0 0 7px #09881d;}
body.glow div#feature .about h1 span { color: #ffffff;}
body.glow div#feature div#iphone { background-position: -450px top;}

body.glow div#expect #features div.scoreboard { background-image: url('images2/feature-score-glow.png');} 
body.glow div#expect #features div.skins { background-image: url('images2/feature-skin-glow.png');} 
body.glow div#expect #features div.gameplay { background-image: url('images2/feature-gameplay-glow.png');} 
body.glow div#expect #features div.zen { background-image: url('images2/feature-zen-glow.png');} 
body.glow div#expect #features div.night { background-image: url('images2/feature-night-glow.png');} 

body.glow #partHead h2.home span { background-image: url('images2/section-home-glow.png'); }
body.glow #partHead h2.score span { background-image: url('images2/section-score-glow.png'); }
body.glow #partHead h2.support span { background-image: url('images2/section-support-glow.png'); }

body.glow ul#Menu { border-color: #000000;}
body.glow ul#Menu li { border-left-color: #39935b;}
body.glow ul#Menu li a, body.glow div#follow a span { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(75,225,143,0.2)), to(rgba(75,225,143,0.12)), color-stop(0.5, rgba(75,225,143,.25)), color-stop(0.5, rgba(75,225,143,0))); background-image: -moz-linear-gradient(top, rgba(75,225,143,0), rgba(75,225,143,.25) 50%, rgba(75,225,143,0) 50%, rgba(75,225,143,0.05)); color: #b3ffd0;}
body.glow div.apps p.app a.button { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(75,225,143,0.2)), to(rgba(75,225,143,0.12)), color-stop(0.5, rgba(75,225,143,.25)), color-stop(0.5, rgba(75,225,143,0))); background-image: -moz-linear-gradient(top, rgba(75,225,143,0), rgba(75,225,143,.25) 50%, rgba(75,225,143,0) 50%, rgba(75,225,143,0.05));}
body.glow div#follow a { border-bottom-color: #4a8e67;}

body.glow div#follow { border-bottom-color: #39935b; background-image: url('images2/follow-backdrop-glow.png');}
body.glow div#follow em, body.glow div#footer p#ttoo .bracket { text-shadow: 0 1px 0 #5cec92; color: #07110b;}
body.glow div#footer p#ttoo { color: #07110b;}

body.glow div.apps p.full a.icon, body.glow div.apps p.lite a.icon { background-position: -135px top;}
body.glow #AppStore { background-position: left -180px; }

body.glow div#feature #tryme { background-position: left -125px;}
body.glow #footer { background-color: #397047; } 
body.glow div#footer #switch { background-image: url('images2/footer-switch-glow.png');}

body.glow div.support p.dropline, body.glow #tilerSupport fieldset { border-color: #98fdb4;}

body.glow #scores thead th { background-color: #1a3021;}
body.glow #scores thead th.place { background-image: url('images/icon-place-glow.png');}
body.glow #scores thead th.move { background-image: url('images/icon-move-glow.png');}
body.glow #scores thead th.time { background-image: url('images/icon-timer-glow.png');}
body.glow #scoresTabs a.current { background-color: #1a3021; } 

body.glow #scores tbody tr.first th, body.glow #scores tbody tr.second th, body.glow #scores tbody tr.third th { text-shadow: none;} 

/* Home webkit animation */

@-webkit-keyframes glow {
       0% { background-color: #041c76; opacity: 1.0;  -webkit-box-shadow: none; }
       50% { background-color: #0730cc; opacity: 1.0; -webkit-box-shadow: 0 0 20px #0000ff;  border-color: #0025ad #007bff #007bff; }
       100% { background-color: #041c76; opacity: 1.0; -webkit-box-shadow: none; }
      }

@-webkit-keyframes light {
       0% { text-shadow: 0 -2px 1px #000;}
       50% { text-shadow: 0 -0 12px #01e4ff;}
       100% { text-shadow: 0 -2px 1px #000;}
      }

