style.css

/* ******************************** Init ******************************** */
html,body {
  display:-webkit-box;
  display:-moz-box;
  display:-ms-box;
  display:-o-box;
  display:box;
  width:100%;
  height:100%;
  position:relative;
  width: 100%;
  margin: 0;
  padding: 0;
  background:#999 url(images/bg.png) repeat 0 0;
  -webkit-background-size:100px 100px;
  -moz-background-size:100px 100px;
  -o-background-size:100px 100px;
  -ms-background-size:100px 100px;
  background-size:100px 100px;
  font-family:sans-serif;
  line-height:1.3;
}
body::-webkit-scrollbar,
body::-moz-scrollbar {
  width: 0px;
  height: 0px;
}
h1,h2,h3,h4,h5,h6,p,ul,ol {
  margin:10px 0;
}
label,input {
  cursor:pointer;
}
body > input {
  display: none;
}
menu,li {
  list-style: none;
  padding: 0;
}
a {
  color:#fff;
  text-decoration:none;
}

/* ******************************** Font ******************************** */
@font-face {
    font-family: 'LigatureSymbols';
    src: url('font/LigatureSymbols.eot');
    src: url('font/LigatureSymbols.eot?#iefix') format('embedded-opentype'),
         url('font/LigatureSymbols.woff') format('woff'),
         url('font/LigatureSymbols.ttf') format('truetype'),
         url('font/LigatureSymbols.svg#LigatureSymbols') format('svg');
    src: url('font/LigatureSymbols.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
.lsf {
  font-family: 'LigatureSymbols';
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-font-feature-settings: "liga" 1, "dlig" 1;
  -moz-font-feature-settings: "liga=1, dlig=1";
  -ms-font-feature-settings: "liga" 1, "dlig" 1;
  -o-font-feature-settings: "liga" 1, "dlig" 1;
  font-feature-settings: "liga" 1, "dlig" 1;
}

/* ******************************** Layout ******************************** */
#wrapper {
  position:relative;
  width:840px;
  height:805px;
  margin:20px auto;
}
#iphone {
  position:absolute;
  left:420px;
  width:420px;
  height:805px;
  z-index:1;
}
#body {
  position:absolute;
  overflow:hidden;
  width:320px;
  height:480px;
  background:#999 url(images/bg.png) repeat 0 0;
  -webkit-background-size:100px 100px;
  -moz-background-size:100px 100px;
  -o-background-size:100px 100px;
  -ms-background-size:100px 100px;
  background-size:100px 100px;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition:-webkit-transform 0.5s;
  -moz-transition:-moz-transform 0.5s;
  -ms-transition:-ms-transform 0.5s;
  -o-transition:-o-transform 0.5s;
  transition:transform 0.5s;
  z-index:2;
}
#photo {
  display:-webkit-box;
  display:-moz-box;
  display:-ms-box;
  display:-o-box;
  display:box;
  -webkit-box-align:center;
  -moz-box-align:center;
  -ms-box-align:center;
  -o-box-align:center;
  box-align:center;
  -webkit-box-pack:center;
  -moz-box-pack:center;
  -ms-box-pack:center;
  -o-box-pack:center;
  box-pack:center;
  width:1000px;
  height:480px;
  margin-left:-340px;
  text-align:center;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
#photo img {
  display:block;
  max-height:480px;
  -webkit-box-shadow:0 2px 10px rgba(0,0,0,0.7);
  -moz-box-shadow:0 2px 10px rgba(0,0,0,0.7);
  -ms-box-shadow:0 2px 10px rgba(0,0,0,0.7);
  -o-box-shadow:0 2px 10px rgba(0,0,0,0.7);
  box-shadow:0 2px 10px rgba(0,0,0,0.7);
}
#photo img.animate {
  -webkit-transition:0.6s;
  -moz-transition:0.6s;
  -ms-transition:0.6s;
  -o-transition:0.6s;
  transition:0.6s;
}
#disabled,
#os-alert {
  display:none;
  position:absolute;
  overflow:hidden;
  width:320px;
  height:480px;
  background:rgba(0,0,0,0.6);
  text-align:center;
  z-index:4;
}
#disabled div,
#os-alert {
  display:-webkit-box;
  display:-moz-box;
  display:-ms-box;
  display:-o-box;
  display:box;
  width:100%;
  height:100%;
  -webkit-box-pack:center;
  -moz-box-pack:center;
  -ms-box-pack:center;
  -o-box-pack:center;
  box-pack:center;
  -webkit-box-align:center;
  -moz-box-align:center;
  -ms-box-align:center;
  -o-box-align:center;
  box-align:center;
}
#disabled img {
  width:64px;
  height:64px;
}
#os-alert div {
  width:75%;
  padding:10% 5% 12%;
  background:rgba(0,0,0,0.8);
  border-radius:20px;
  color:#fff;
  font-weight:bold;
  line-height:1.6;
}
#os-alert span {
  display:block;
  margin-top:20px;
  color:#777;
  font-weight:normal;
}
#display {
  position:absolute;
  overflow:hidden;
  top:163px;
  left:472px;
  width:320px;
  height:480px;
  background:#0c0c0c;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective-origin: 50%;
  -moz-perspective-origin: 50%;
  -ms-perspective-origin: 50%;
  -o-perspective-origin: 50%;
  perspective-origin: 50%;
  -webkit-perspective: 500;
  -moz-perspective: 500;
  -ms-perspective: 500;
  -o-perspective: 500;
  perspective: 500;
  z-index:2;
}

/* ******************************** Header ******************************** */
#refresh, #info {
  position:absolute;
  display:block;
  width:30px;
  height:30px;
  padding:5px;
  line-height:30px;
  top:5px;
  color:#fff;
  text-indent:-10000px;
  z-index:3;
}
.webapp #refresh,
.webapp #info {
  top:25px;
}
#refresh {
  left:5px;
}
#info {
  right:5px;
}
#refresh:after,
#info:after {
  position:absolute;
  left:5px;
  font-size:40px;
  text-indent:0px;
  opacity:0.5;
  text-shadow:0 0 8px rgba(0,0,0,0.8);
  font-family: 'LigatureSymbols';
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-font-feature-settings: "liga" 1, "dlig" 1;
  -moz-font-feature-settings: "liga=1, dlig=1";
  -ms-font-feature-settings: "liga" 1, "dlig" 1;
  -o-font-feature-settings: "liga" 1, "dlig" 1;
  font-feature-settings: "liga" 1, "dlig" 1;
}
#refresh:after {
  content:'';
}
#info:after {
  content:'';
}

/* ******************************** Footer ******************************** */
#footer {
  position:absolute;
  left:0;
  bottom:0;
  overflow:auto;
  width:320px;
  height:50px;
  border-top:1px solid rgba(0,0,0,0.9);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(71,71,71,0.9)), to(rgba(0,0,0,0.9)),color-stop(0.5, rgba(21,21,21,0.9)),color-stop(0.5, rgba(0,0,0,0.9)));
  background: linear-gradient(top, rgba(71,71,71,0.9) 0%,rgba(21,21,21,0.9) 50%,rgba(0,0,0,0.9) 50%,rgba(0,0,0,0.9) 100%);
  background: -webkit-linear-gradient(top, rgba(71,71,71,0.9) 0%,rgba(21,21,21,0.9) 50%,rgba(0,0,0,0.9) 50%,rgba(0,0,0,0.9) 100%);
  background: -moz-linear-gradient(top, rgba(71,71,71,0.9) 0%,rgba(21,21,21,0.9) 50%,rgba(0,0,0,0.9) 50%,rgba(0,0,0,0.9) 100%);
  background: -ms-linear-gradient(top, rgba(71,71,71,0.9) 0%,rgba(21,21,21,0.9) 50%,rgba(0,0,0,0.9) 50%,rgba(0,0,0,0.9) 100%);
  background: -o-linear-gradient(top, rgba(71,71,71,0.9) 0%,rgba(21,21,21,0.9) 50%,rgba(0,0,0,0.9) 50%,rgba(0,0,0,0.9) 100%);
  -webkit-box-shadow:inset 0 1px 1px rgba(255,255,255,0.3);
  -moz-box-shadow:inset 0 1px 1px rgba(255,255,255,0.3);
  -ms-box-shadow:inset 0 1px 1px rgba(255,255,255,0.3);
  -o-box-shadow:inset 0 1px 1px rgba(255,255,255,0.3);
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.3);
  -webkit-overflow-scrolling:touch;
}
#footer::-webkit-scrollbar,
#footer::-moz-scrollbar {
  width: 0px;
  height: 0px;
}
#footer menu {
  width:680px;
  height:50px;
  margin:0 auto;
}
#footer menu li {
  position:relative;
  float:left;
  margin:4px 1px 0;
  text-shadow:0 -1px 1px rgba(0,0,0,0.7);
  -webkit-transform: translateZ(0);
}
#footer menu li:first-child {
  overflow:hidden;
  padding:0 4px 0 2px;
  margin-right:4px;
  border-right:1px solid rgba(0,0,0,0.8);
  box-shadow:1px 0 0 rgba(255,255,255,0.3);
}
#footer menu li a,
#footer menu li span {
  position:relative;
  display:block;
  width:64px;
  height:12px;
  padding-top:32px;
  color:rgba(255,255,255,0.7);
  text-decoration:none;
  text-align:center;
  font-size:10px;
  line-height:10px;
  font-weight:bold;
  border-radius:5px;
}
#footer menu li a {
  -webkit-tap-highlight-color: rgba(0,0,0,0.3);
}
#footer menu li a.selected {
  background:rgba(255,255,255,0.15);
  color:#fff;
}
#footer menu li a:after,
#footer menu li span:after {
  position:absolute;
  display:block;
  top:-1px;
  width:64px;
  text-align:center;
  line-height:1;
  font-size:32px;
  font-weight:normal;
  font-family: 'LigatureSymbols';
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-font-feature-settings: "liga" 1, "dlig" 1;
  -moz-font-feature-settings: "liga=1, dlig=1";
  -ms-font-feature-settings: "liga" 1, "dlig" 1;
  -o-font-feature-settings: "liga" 1, "dlig" 1;
  font-feature-settings: "liga" 1, "dlig" 1;
}
#upload:after {content:'';}
#saturate:after {content:'';}
#brightness:after {content:'';}
#contrast:after {content:'';}
#huerotate:after {content:'';}
#invert:after {content:'';}
#blur:after {content:'';}
#sepia:after {content:'';}
#grayscale:after {content:'';}
#opacity:after {content:'';}

#upload-input {
  position:absolute;
  top:0;
  width:66px;
  height:44px;
  opacity:0;
  -webkit-tap-highlight-color: rgba(255,255,255,0.4);
}

/* ******************************** Slider ******************************** */
#slider {
  display:none;
  position:absolute;
  left:0;
  bottom:50px;
  width:320px;
  height:60px;
  background:url(images/slider-bg.png) center 0;
  -webkit-background-size:940px 60px;
  -moz-background-size:940px 60px;
  -o-background-size:940px 60px;
  -ms-background-size:940px 60px;
  background-size:940px 60px;
}
.portrait #slider {
  top: auto !important;
}
#slider input[type='range'] {
  width:270px;
  height:52px;
  margin:0;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  -ms-appearance: none !important;
  -o-appearance: none !important;
  appearance: none !important;
  background:url(images/slider-line.png) no-repeat 10px 20px;
  -webkit-background-size:250px 11px;
  -moz-background-size:250px 11px;
  -o-background-size:250px 11px;
  -ms-background-size:250px 11px;
  background-size:250px 11px;
}
input[type='range']::-webkit-slider-thumb,
input[type='range']::-moz-slider-thumb {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  -ms-appearance: none !important;
  -o-appearance: none !important;
  appearance: none !important;
  background:url(images/slider-handle.png) no-repeat 0 7px;
  width:41px;
  height:52px;
  border:0;
  -webkit-background-size:410px 40px;
  -moz-background-size:410px 40px;
  -o-background-size:410px 40px;
  -ms-background-size:410px 40px;
  background-size:410px 40px;
  cursor:pointer;
  cursor:-moz-grab;
  cursor:-webkit-grab;
}
input[type='range']::-webkit-slider-thumb:active,
input[type='range']::-moz-slider-thumb:active {
  cursor:-moz-grabbing;
  cursor:-webkit-grabbing;
}

#saturate-slider input[type='range']::-webkit-slider-thumb, #saturate-slider input[type='range']::-moz-slider-thumb {background-position:-41px 7px}
#brightness-slider input[type='range']::-webkit-slider-thumb, #brightness-slider input[type='range']::-moz-slider-thumb {background-position:-82px 7px}
#contrast-slider input[type='range']::-webkit-slider-thumb, #contrast-slider input[type='range']::-moz-slider-thumb {background-position:-123px 7px}
#huerotate-slider input[type='range']::-webkit-slider-thumb, #huerotate-slider input[type='range']::-moz-slider-thumb {background-position:-164px 7px}
#invert-slider input[type='range']::-webkit-slider-thumb, #invert-slider input[type='range']::-moz-slider-thumb {background-position:-205px 7px}
#blur-slider input[type='range']::-webkit-slider-thumb, #blur-slider input[type='range']::-moz-slider-thumb {background-position:-246px 7px}
#sepia-slider input[type='range']::-webkit-slider-thumb, #sepia-slider input[type='range']::-moz-slider-thumb {background-position:-287px 7px}
#grayscale-slider input[type='range']::-webkit-slider-thumb, #grayscale-slider input[type='range']::-moz-slider-thumb {background-position:-328px 7px}
#opacity-slider input[type='range']::-webkit-slider-thumb, #opacity-slider input[type='range']::-moz-slider-thumb {background-position:-369px 7px}

#slider output {
  position:absolute;
  top:19px;
  right:6px;
  color:#fff;
  font-size:8px;
  text-align:right;
  font-weight:bold;
}
#slider output span {
  margin-right:2px;
  font-size:12px;
}
.mobile #slider output {
  top:15px;
  font-size:10px;
}
.mobile #slider output span {
  font-size:15px;
}
#slider > div {
  display:none;
  position:absolute;
  top:0;
  width:320px;
}
#slider.saturate #saturate-slider,
#slider.brightness #brightness-slider,
#slider.contrast #contrast-slider,
#slider.huerotate #huerotate-slider,
#slider.invert #invert-slider,
#slider.blur #blur-slider,
#slider.sepia #sepia-slider,
#slider.grayscale #grayscale-slider,
#slider.opacity #opacity-slider {
  display:block;
}

/* ******************************** Info ******************************** */
#info-body {
  position:absolute;
  width:320px;
  height:480px;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  transition:transform 0.5s;
  -webkit-transition:-webkit-transform 0.5s;
  -moz-transition:-moz-transform 0.5s;
  -ms-transition:-ms-transform 0.5s;
  -o-transition:-o-transform 0.5s;
  z-index: 1;
}
.flip #body {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}
.flip #info-body {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
  z-index: 5;
}
#info-body .body {
  overflow:auto;
  width:320px;
  height:436px;
  padding-top:44px;
  background:url(images/bg-wood.png) repeat 0 0;
  -webkit-overflow-scrolling:touch;
  -webkit-background-size:320px 480px;
  -moz-background-size:320px 480px;
  -o-background-size:320px 480px;
  -ms-background-size:320px 480px;
  background-size:320px 480px;
}
#info-body .body::-webkit-scrollbar,
#info-body .body::-moz-scrollbar {
  width: 0px;
  height: 0px;
}
#info-body header {
  position:absolute;
  top:0;
  overflow:hidden;
  width:100%;
  height:44px;
  padding:0 !important;
  margin:0;
  color:#fff;
  font-family:sans-serif;
  font-weight:bold;
  background:-webkit-linear-gradient(top, #444, #222 49%, #090909 50%, #000);
  background:-moz-linear-gradient(top, #444, #222 49%, #090909 50%, #000);
  background:-ms-linear-gradient(top, #444, #222 49%, #090909 50%, #000);
  background:-o-linear-gradient(top, #444, #222 49%, #090909 50%, #000);
  background:linear-gradient(top, #444, #222 49%, #090909 50%, #000);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.3),inset 0 -1px 0 rgba(0,0,0,0.5);
  z-index:6;
}
#info-body header h1 {
  position:absolute;
  top:0;
  width:84%;
  margin:10px 8%;
  font-family:sans-serif;
  font-weight:bold;
  font-size:115%;
  color:#fff;
  text-align:center;
  text-shadow:0 -1px 0 rgba(0,0,0,0.4);
  z-index:11;
}
#info-body header .right-button {
  position:absolute;
  top:5px;
  right:5px;
  padding:10px;
  line-height:1;
  color:#fff;
  font-size:75%;
  background:rgba(0,0,0,0.15) -webkit-linear-gradient(top, rgba(255,255,255,0.2), rgba(255,255,255,0.2) 49%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0));
  background:rgba(0,0,0,0.15) -moz-linear-gradient(top, rgba(255,255,255,0.2), rgba(255,255,255,0.2) 49%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0));
  background:rgba(0,0,0,0.15) -ms-linear-gradient(top, rgba(255,255,255,0.2), rgba(255,255,255,0.2) 49%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0));
  background:rgba(0,0,0,0.15) -o-linear-gradient(top, rgba(255,255,255,0.2), rgba(255,255,255,0.2) 49%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0));
  background:rgba(0,0,0,0.15) linear-gradient(top, rgba(255,255,255,0.2), rgba(255,255,255,0.2) 49%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0));
  border-radius:5px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.7),0 1px 1px rgba(255,255,255,0.4);
  text-shadow:0 -1px 0 rgba(0,0,0,0.4);
  z-index:7;
}
#info-body .body > div,
#info-body .body > p {
  margin:20px 10px 20px;
  padding:10px 13px;
  background:#fffffc;
  border-radius:5px;
  color:#333;
  font-size:14px;
  -webkit-box-shadow:0 2px 6px rgba(0,0,0,0.3);
  -moz-box-shadow:0 2px 6px rgba(0,0,0,0.3);
  -ms-box-shadow:0 2px 6px rgba(0,0,0,0.3);
  -o-box-shadow:0 2px 6px rgba(0,0,0,0.3);
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
}
#info-body a {
  color:#006DBE;
}
#info-body p {
  color:#666;
}
#info-body h2 {
  margin:2px 0 15px;
  padding-bottom:5px;
  font-size:18px;
  text-align:center;
  border-bottom:1px solid #eee;
  -webkit-box-shadow:0 1px 0 #fff;
  -moz-box-shadow:0 1px 0 #fff;
  -ms-box-shadow:0 1px 0 #fff;
  -o-box-shadow:0 1px 0 #fff;
  box-shadow:0 1px 0 #fff;
}
#info-body h3 {
  margin-bottom:5px;
  font-size:16px;
}
#info-body h3 + p,
#info-body h3 + p + p {
  margin-top:5px;
}
#info-body p + h3 {
  margin-top:20px;
}
#info-body .profile-image {
  float:left;
  width:50px;
  border-radius:5px;
}
#info-body .profile-name {
  padding-top:5px;
  margin-left:60px;
  color:#333;
  font-size:19px;
  font-weight:bold;
}
#info-body .profile-name span {
  display:block;
  padding-top:3px;
  color:#999;
  font-size:14px;
  font-weight:normal;
}
#info-body .profile-text {
  clear:both;
}
#info-body ul {
  margin:0 -13px -10px;
  padding:0;
}
#info-body li {
  border-top:1px solid #ddd;
}
#info-body li a {
  display:block;
  padding:12px 13px;
  color:#555;
  font-size:18px;
  text-shadow:0 2px 0 #fff;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f0f0f0));
  background: linear-gradient(top, #fff #f0f0f0);
  background: -webkit-linear-gradient(top, #fff #f0f0f0);
  background: -moz-linear-gradient(top, #fff #f0f0f0);
  background: -ms-linear-gradient(top, #fff #f0f0f0);
  background: -o-linear-gradient(top, #fff #f0f0f0);
}
#info-body li:last-child a {
  -webkit-border-bottom-left-radius: 5px;
  -ms-border-bottom-left-radius: 5px;
  -o-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -ms-border-bottom-right-radius: 5px;
  -o-border-bottom-right-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  border-bottom-right-radius: 5px;
}
#info-body li a:after {
  content:"right";
  float:right;
  color:#999;
  line-height:1.8;
  font-size:100%;
  font-family: 'LigatureSymbols';
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-font-feature-settings: "liga" 1, "dlig" 1;
  -moz-font-feature-settings: "liga=1, dlig=1";
  -ms-font-feature-settings: "liga" 1, "dlig" 1;
  -o-font-feature-settings: "liga" 1, "dlig" 1;
  font-feature-settings: "liga" 1, "dlig" 1;
}
#info-body li a:before {
  content:" ";
  margin-right:0.5em;
  font-size:135%;
  font-family: 'LigatureSymbols';
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-font-feature-settings: "liga" 1, "dlig" 1;
  -moz-font-feature-settings: "liga=1, dlig=1";
  -ms-font-feature-settings: "liga" 1, "dlig" 1;
  -o-font-feature-settings: "liga" 1, "dlig" 1;
  font-feature-settings: "liga" 1, "dlig" 1;
}
#info-body li .blog:before {content:'';}
#info-body li .twitter:before {content:'';}
#info-body li .dribbble:before {content:'';}
#info-body li .github:before {content:'';}
#info-body footer {
  margin:20px 0 10px;
  color:rgba(0,0,0,0.4);
  font-size:13px;
  text-align:center;
  text-shadow:0 1px 0 rgba(255,255,255,0.4);
}
#info-body .function {
  position:relative;
  padding:20px 5px 0;
  border-top:1px solid #eee;
  font-weight:bold;
}
#info-body #force-webapp {
  position:absolute;
  top:15px;
  right:5px;
  display:block;
  width:77px;
  height:27px;
  text-indent:-10000px;
  background:url(images/toggle.png) no-repeat -51px 0;
  border-radius:30px;
  -webkit-background-size:128px 27px;
  -webkit-transition:0.3s;
}
#info-body #force-webapp.on {
  background-position:0 0;
}

/* ******************************** PC ******************************** */
#pc {
  position:absolute;
  top:80px;
  left:0;
  width:380px;
  color:#fff;
}
#pc-text {
  margin:30px 0;
  font-size:24px;
  text-shadow:0 -2px 0 rgba(0,0,0,0.4);
}
#pc-text span {
  display:block;
  margin-top:5px;
  color:#aaa;
  font-size:14px;
}
#pc-text span a {
  border-bottom:1px dashed #888;
  color:#aaa;
  -webkit-transition:0.3s;
  -moz-transition:0.3s;
  -ms-transition:0.3s;
  -o-transition:0.3s;
  transition:0.3s;
}
#pc-text span a:hover {
  border-color:#fff;
  color:#fff;
}
#video {
  display:block;
  float:left;
  width:198px;
  text-align:center;
}
#video span {
  display:block;
  font-size:12px;
  line-height:1;
  color:#aaa;
}
#video:hover span {
  color:#fff;
}
#video span:before {
  content:"";
  display:inline-block;
  margin-right:7px;
  font-size:150%;
  line-height:10px;
  font-family: 'LigatureSymbols';
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-font-feature-settings: "liga" 1, "dlig" 1;
  -moz-font-feature-settings: "liga=1, dlig=1";
  -ms-font-feature-settings: "liga" 1, "dlig" 1;
  -o-font-feature-settings: "liga" 1, "dlig" 1;
  font-feature-settings: "liga" 1, "dlig" 1;
}
#features {
  margin-left:210px;
  padding:0;
  font-weight:bold;
  text-shadow:0 -2px 0 rgba(0,0,0,0.4);
}
#features li {
  margin:8px 0;
  padding-top:2px;
}
#features li:before {
  content:'+';
  margin-right:6px;
}
#pc .profile {
  clear:both;
  position:relative;
  margin-top:60px;
  border:1px solid #111;
  padding:23px;
  opacity:0.4;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  -ms-border-radius:10px;
  -o-border-radius:10px;
  border-radius:10px;
  -webkit-transition:0.3s;
  -moz-transition:0.3s;
  -ms-transition:0.3s;
  -o-transition:0.3s;
  transition:0.3s;
  -webkit-box-shadow:inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 1px rgba(255,255,255,0.3), inset 0 0 7px rgba(0,0,0,0.5);
  -moz-box-shadow:inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 1px rgba(255,255,255,0.3), inset 0 0 7px rgba(0,0,0,0.5);
  -ms-box-shadow:inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 1px rgba(255,255,255,0.3), inset 0 0 7px rgba(0,0,0,0.5);
  -o-box-shadow:inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 1px rgba(255,255,255,0.3), inset 0 0 7px rgba(0,0,0,0.5);
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 1px rgba(255,255,255,0.3), inset 0 0 7px rgba(0,0,0,0.5);
}
#pc .profile:hover {
  opacity:1;
}
#pc .profile-image {
  float:left;
  width:40px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  -ms-border-radius:3px;
  -o-border-radius:3px;
  border-radius:3px;
}
#pc .profile-name {
  margin:2px 0 0 50px;
  font-size:18px;
}
#pc .profile-name span {
  display:block;
  font-size:14px;
  color:#aaa;
}
#pc .profile-acount,
#pc .profile-acount a:after {
  font-family: 'LigatureSymbols';
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-font-feature-settings: "liga" 1, "dlig" 1;
  -moz-font-feature-settings: "liga=1, dlig=1";
  -ms-font-feature-settings: "liga" 1, "dlig" 1;
  -o-font-feature-settings: "liga" 1, "dlig" 1;
  font-feature-settings: "liga" 1, "dlig" 1;
}
#pc .profile-acount {
  position:absolute;
  top:17px;
  right:25px;
  font-size:20px;
  line-height:1;
}
#pc .profile-acount a {
  position:relative;
  display:inline-block;
  width:20px;
  color:#666;
  text-indent:-10000px;
  -webkit-transition:0.3s;
  -moz-transition:0.3s;
  -ms-transition:0.3s;
  -o-transition:0.3s;
  transition:0.3s;
}
#pc .profile-acount a:hover {
  color:#fff;
}
#pc .profile-acount a:after {
  content:' ';
  position:absolute;
  right:0;
  text-indent:0px;
}
#pc .profile-acount .twitter:after {content:'';}
#pc .profile-acount .dribbble:after {content:'';}
#pc .profile-acount .github:after {content:'';}

#pc .profile-text {
  margin:15px 0;
  font-size:13px;
  line-height:1.5;
}
#pc .copyright {
  margin:20px 0 0;
  color:#aaa;
  text-align:center;
  font-size:12px;
}
#check-style-button {
  position:absolute;
  top:672px;
  left:597px;
  width:70px;
  height:70px;
  background:#000;
  color:#000;
  text-indent:-10000px;
  -webkit-border-radius:35px;
  -moz-border-radius:35px;
  -ms-border-radius:35px;
  -o-border-radius:35px;
  border-radius:35px;
  opacity:0;
  z-index:6;
}
#check-style-button:active {
  opacity:0.2;
}
#check-style-content {
  position:absolute;
  top:163px;
  left:472px;
  width:280px;
  height:440px;
  padding:20px;
  background:rgba(0,0,0,0.7);
  color:#fff;
  z-index:7;
  cursor:pointer;
}
#check-style-content h2 {
  margin-top:0;
  margin-bottom:20px;
  font-size:28px;
}
#check-style-content p {
  margin:11px 0;
  margin-left:15px;
  font-size:18px;
  font-weight:bold;
}
#check-style-content p span {
  margin:0 7px;
}
#check-style-content p:before {
  margin-right:8px;
  font-size:140%;
  font-weight:normal;
  font-family: 'LigatureSymbols';
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-font-feature-settings: "liga" 1, "dlig" 1;
  -moz-font-feature-settings: "liga=1, dlig=1";
  -ms-font-feature-settings: "liga" 1, "dlig" 1;
  -o-font-feature-settings: "liga" 1, "dlig" 1;
  font-feature-settings: "liga" 1, "dlig" 1;
}
#check-style-content p:nth-child(2):before {content:'';}
#check-style-content p:nth-child(3):before {content:'';}
#check-style-content p:nth-child(4):before {content:'';}
#check-style-content p:nth-child(5):before {content:'';}
#check-style-content p:nth-child(6):before {content:'';}
#check-style-content p:nth-child(7):before {content:'';}
#check-style-content p:nth-child(8):before {content:'';}
#check-style-content p:nth-child(9):before {content:'';}
#check-style-content p:nth-child(10):before {content:'';}

/* ******************************** Video ******************************** */
#video-window {
  display:-webkit-box;
  display:-moz-box;
  display:-ms-box;
  display:-o-box;
  display:box;
  -webkit-box-pack:center;
  -moz-box-pack:center;
  -ms-box-pack:center;
  -o-box-pack:center;
  box-pack:center;
  -webkit-box-align:center;
  -moz-box-align:center;
  -ms-box-align:center;
  -o-box-align:center;
  box-align:center;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.7);
  z-index:10;
  opacity:0;
  pointer-events:none;
  -webkit-transition:0.6s;
  -moz-transition:0.6s;
  -ms-transition:0.6s;
  -o-transition:0.6s;
  transition:0.6s;
  cursor:pointer;
}
#video-window.show {
  opacity:1;
  pointer-events:auto;
}
#video-window iframe {
  -webkit-box-shadow:0 3px 12px rgba(0,0,0,0.8);
  -moz-box-shadow:0 3px 12px rgba(0,0,0,0.8);
  -ms-box-shadow:0 3px 12px rgba(0,0,0,0.8);
  -o-box-shadow:0 3px 12px rgba(0,0,0,0.8);
  box-shadow:0 3px 12px rgba(0,0,0,0.8);
}
#video-content {
  margin-bottom:40px;
}


/* ******************************** Start ******************************** */
#display,
#iphone {
  -webkit-transition:0.75s 0.1s;
  -moz-transition:0.75s 0.1s;
  -ms-transition:0.75s 0.1s;
  -o-transition:0.75s 0.1s;
  transition:0.75s 0.1s;
  -webkit-transform-origin:460px -220px;
  -moz-transform-origin:460px -220px;
  -ms-transform-origin:460px -220px;
  -o-transform-origin:460px -220px;
  transform-origin:460px -220px;
}
#display {
  -webkit-transform-origin:408px -383px;
  -moz-transform-origin:408px -383px;
  -ms-transform-origin:408px -383px;
  -o-transform-origin:408px -383px;
  transform-origin:408px -383px;
}
#wrapper.start #display,
#wrapper.start #iphone {
  opacity:0;
  -webkit-transform:rotate(120deg) translateY(-100px);
  -moz-transform:rotate(120deg) translateY(-100px);
  -ms-transform:rotate(120deg) translateY(-100px);
  -o-transform:rotate(120deg) translateY(-100px);
  transform:rotate(120deg) translateY(-100px);
  -webkit-transition:0s;
  -moz-transition:0s;
  -ms-transition:0s;
  -o-transition:0s;
  transition:0s;
}
#pc {
  -webkit-transition:0.3s 0.5s;
  -moz-transition:0.3s 0.5s;
  -ms-transition:0.3s 0.5s;
  -o-transition:0.3s 0.5s;
  transition:0.3s 0.5s;
}
#wrapper.start #pc {
  opacity:0;
  -webkit-transform:translateX(160px);
  -moz-transform:translateX(160px);
  -ms-transform:translateX(160px);
  -o-transform:translateX(160px);
  transform:translateX(160px);
  -webkit-transition:0s;
  -moz-transition:0s;
  -ms-transition:0s;
  -o-transition:0s;
  transition:0s;
}

/* ******************************** iPhone & iPad , Fullscreen ******************************** */
@media (max-width: 800px){
  #iphone, #pc, #check-style-button, #force-webapp-content {
    display:none;
  }
  #display,
  #iphone {
    -webkit-transform:translateY(0px) !important;
    -moz-transform:translateY(0px) !important;
    -ms-transform:translateY(0px) !important;
    -o-transform:translateY(0px) !important;
    transform:translateY(0px) !important;
  }
  #wrapper {
    margin:0;
    height:auto;
  }
  #wrapper,
  #display,
  #body,
  #disabled,
  #info-body {
    display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-o-box;
    display:box;
    top:0;
    left:0;
    width:100%;
    height:100%;
  }
  #disabled {
    display:none;
    -webkit-box-pack:center;
    -moz-box-pack:center;
    -ms-box-pack:center;
    -o-box-pack:center;
    box-pack:center;
  }
  #info-body {
    -webkit-box-orient:vertical;
    -moz-box-orient:vertical;
    -ms-box-orient:vertical;
    -o-box-orient:vertical;
    box-orient:vertical;
  }
  .webapp #info-body header {
    margin-top:20px;
  }
  #info-body .body {
    width:100%;
    height:auto;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
  }
  .webapp #info-body .body {
    padding-top:64px;
  }
  #footer, #slider {
    width:100%;
  }
  #slider > div {
    position:relative;
    margin:0 auto;
  }
  #photo {
    width:100%;
    height:100%;
    margin:0;
  }
  #photo img {
    max-width:100%;
    max-height:100%;
  }
}

.fullscreen #iphone, .fullscreen #pc, .fullscreen #check-style-button {
  display:none;
}
.fullscreen #display,
.fullscreen #iphone {
  -webkit-transform:translateY(0px) !important;
  -moz-transform:translateY(0px) !important;
  -ms-transform:translateY(0px) !important;
  -o-transform:translateY(0px) !important;
  transform:translateY(0px) !important;
}
.fullscreen #wrapper {
  margin:0;
  height:auto;
}
.fullscreen #wrapper,
.fullscreen #display,
.fullscreen #body,
.fullscreen #disabled,
.fullscreen #info-body {
  display:-webkit-box;
  display:-moz-box;
  display:-ms-box;
  display:-o-box;
  display:box;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.fullscreen #disabled {
  display:none;
  -webkit-box-pack:center;
  -moz-box-pack:center;
  -ms-box-pack:center;
  -o-box-pack:center;
  box-pack:center;
}
.fullscreen #info-body {
  -webkit-box-orient:vertical;
  -moz-box-orient:vertical;
  -ms-box-orient:vertical;
  -o-box-orient:vertical;
  box-orient:vertical;
}
.fullscreen .webapp #info-body header {
  margin-top:20px;
}
.fullscreen #info-body .body {
  width:100%;
  height:auto;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-box-flex: 1;
  -o-box-flex: 1;
  box-flex: 1;
}
.fullscreen .webapp #info-body .body {
  padding-top:64px;
}
.fullscreen #footer, .fullscreen #slider {
  width:100%;
}
.fullscreen #slider > div {
  position:relative;
  margin:0 auto;
}
.fullscreen #photo {
  width:100%;
  height:100%;
  margin:0;
}
.fullscreen #photo img {
  max-width:100%;
  max-height:100%;
}

/* ******************************** Landscape ******************************** */

.landscape #refresh {
  top:auto;
  bottom:5px;
}
.landscape #info {
  left:5px;
  right:auto;
}
.landscape #footer {
  width:68px;
  height:100%;
  top:0;
  right:0;
  bottom:auto;
  left:auto;
  border-left:1px solid rgba(0,0,0,0.9);
  border-top:0;
  background: -webkit-gradient(linear, left top, right top, from(rgba(71,71,71,0.9)), to(rgba(0,0,0,0.9)),color-stop(0.5, rgba(21,21,21,0.9)),color-stop(0.5, rgba(0,0,0,0.9)));
  background: linear-gradient(left, rgba(71,71,71,0.9) 0%,rgba(21,21,21,0.9) 50%,rgba(0,0,0,0.9) 50%,rgba(0,0,0,0.9) 100%);
  background: -webkit-linear-gradient(left, rgba(71,71,71,0.9) 0%,rgba(21,21,21,0.9) 50%,rgba(0,0,0,0.9) 50%,rgba(0,0,0,0.9) 100%);
  background: -moz-linear-gradient(left, rgba(71,71,71,0.9) 0%,rgba(21,21,21,0.9) 50%,rgba(0,0,0,0.9) 50%,rgba(0,0,0,0.9) 100%);
  background: -ms-linear-gradient(left, rgba(71,71,71,0.9) 0%,rgba(21,21,21,0.9) 50%,rgba(0,0,0,0.9) 50%,rgba(0,0,0,0.9) 100%);
  background: -o-linear-gradient(left, rgba(71,71,71,0.9) 0%,rgba(21,21,21,0.9) 50%,rgba(0,0,0,0.9) 50%,rgba(0,0,0,0.9) 100%);
  -webkit-box-shadow:inset 1px 0 1px rgba(255,255,255,0.3);
  -moz-box-shadow:inset 1px 0 1px rgba(255,255,255,0.3);
  -ms-box-shadow:inset 1px 0 1px rgba(255,255,255,0.3);
  -o-box-shadow:inset 1px 0 1px rgba(255,255,255,0.3);
  box-shadow:inset 1px 0 1px rgba(255,255,255,0.3);
}
.landscape #footer menu {
  width:68px;
  height:560px;
  margin:0;
}
.webapp.landscape #footer menu {
  padding-top:20px;
}
.landscape #footer menu li {
  float: none;
  margin: 4px 1px 0 3px;
}
.landscape #footer menu li a,
.landscape #footer menu li span {
  padding-top: 34px;
  padding-bottom:2px;
}
.landscape #footer menu li a::after {
  top: 1px;
}
.landscape #footer menu li:first-child {
  border:0;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  -ms-box-shadow:none;
  -o-box-shadow:none;
  box-shadow:none;
}
.landscape #slider {
  width:330px;
  height:50px;
  top:0;
  left:auto;
  right:69px;
  padding-right:10px;
  background:url(images/slider-bg-landscape.png) no-repeat 0 0 !important;
  -webkit-background-size: 340px 50px;
  -moz-background-size: 340px 50px;
  -ms-background-size: 340px 50px;
  -o-background-size: 340px 50px;
  background-size: 340px 50px;
}
.landscape #info-body header .right-button {
  left:5px;
  right:auto;
}