.ir {
  display: block;
  text-indent: -999em;
  overflow: hidden;
  background-repeat: no-repeat;
  text-align: left;
  direction: ltr; }

html, body, div, span, h1, h2, h3, img, strong, ul, li, label, footer, header, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

body {
  background: url("../img/bg.jpg");
  font-family: 'open-sans','Lucida Grande', Trebuchet, Arial, sans-serif;
  margin: 0;
  padding: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
  text-align: center; }
  body a {
    text-decoration: none; }

.clear {
  clear: both; }

#wrapper {
  width: 624px;
  margin: 0 auto;
  padding: 0;
  -webkit-box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.9) ;
  box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.9) ;
  -moz-box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.9) ;
  border-radius: 0 0 10px 10px;
  -moz-border-radius: 0 0 10px 10px; }
  #wrapper section, #wrapper header {
    width: 624px;
    margin: 0 auto; }
  #wrapper header {
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 35px 100px 0;
    background-color: #fafafa;
    height: 396px;
    background-image: url("../img/bg_top.jpg"); }
    #wrapper header #sharing {
      z-index: 0;
      height: 25px;
      list-style: none;
      margin: 0;
      padding: 0;
      opacity: .5;
      -webkit-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
      -moz-transition: all 0.3s ease-out;
      -ms-transition: all 0.3s ease-out;
      -o-transition: all 0.3s ease-out; }
      #wrapper header #sharing:hover {
        opacity: 1; }
      #wrapper header #sharing li {
        display: inline;
        float: left;
        margin-right: 10px; }
        #wrapper header #sharing li:nth-child(3) {
          width: 50px;
          overflow: hidden; }
    #wrapper header #support {
      position: relative;
      z-index: 1;
      float: right;
      width: 64px;
      height: 11px;
      margin-top: 6px;
      background-image: url("../img/support.png");
      opacity: .5;
      -webkit-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
      -moz-transition: all 0.3s ease-out;
      -ms-transition: all 0.3s ease-out;
      -o-transition: all 0.3s ease-out; }
      #wrapper header #support:hover {
        opacity: 1; }
    #wrapper header h2 {
      font-weight: normal;
      color: #054357;
      font-size: 16px;
      margin-top: 20px; }
    #wrapper header img {
      margin-top: -52px;
      position: relative;
      z-index: 0; }
    #wrapper header #buy {
      margin-top: 22px;
      width: 48px;
      height: 53px;
      position: relative;
      z-index: 1;
      margin-left: 133px;
      font-size: 11px;
      font-weight: bold;
      text-align: center;
      background: url("../img/buy_sprite.png") no-repeat center 0; }
      #wrapper header #buy:hover {
        background: url("../img/buy_sprite.png") no-repeat center -53px; }
      #wrapper header #buy:active {
        background: url("../img/buy_sprite.png") no-repeat center -106px; }
      #wrapper header #buy a {
        display: block;
        line-height: 49px;
        color: #fafafa;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
        font-weight: 600; }
    #wrapper header h1 {
      width: 270px;
      height: 42px;
      background-image: url("../img/frankdeloupe.png");
      margin: 0 auto; }
    #wrapper header #selection {
      width: 424px;
      margin: 15px 32px 0; }
      #wrapper header #selection #switch_container {
        width: 80px;
        height: 52px;
        background: url(../img/bg_switch.png) no-repeat center center;
        float: left;
        margin: 0 20px;
        opacity: 1;
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out; }
        #wrapper header #selection #switch_container:hover {
          opacity: .9; }
        #wrapper header #selection #switch_container button#switch {
          cursor: pointer;
          outline: none;
          -webkit-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
          -moz-transition: all 0.3s ease-out;
          -ms-transition: all 0.3s ease-out;
          -o-transition: all 0.3s ease-out;
          width: 70px;
          height: 52px;
          border: 0;
          margin: 0;
          padding: 10px;
          border-radius: 20px 20px 0 0;
          -moz-border-radius: 20px 20px 0 0; }
          #wrapper header #selection #switch_container button#switch.cool {
            background: url(../img/switch.png) no-repeat 13px 6px; }
          #wrapper header #selection #switch_container button#switch.standard {
            background: url(../img/switch.png) no-repeat -23px 6px; }
      #wrapper header #selection label {
        cursor: pointer;
        color: #68878e; }
        #wrapper header #selection label#cool_label {
          text-align: right;
          float: left; }
          #wrapper header #selection label#cool_label h3 {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: -5px; }
          #wrapper header #selection label#cool_label span {
            font-size: 12px; }
          #wrapper header #selection label#cool_label.active {
            color: #054357;
            cursor: default; }
        #wrapper header #selection label#usual_label {
          text-align: left;
          float: left; }
          #wrapper header #selection label#usual_label h3 {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: -5px; }
          #wrapper header #selection label#usual_label span {
            font-size: 12px; }
          #wrapper header #selection label#usual_label.active {
            color: #054357;
            cursor: default; }
  #wrapper section#screen {
    height: 528px;
    background: url("../img/bg_screen.jpg"); }
    #wrapper section#screen #display {
      width: 732px;
      height: 463px;
      background-image: url("../img/screen.png");
      margin: -9px 0 0 -54px;
      position: relative;
      z-index: 0; }
    #wrapper section#screen #loupe, #wrapper section#screen #loupe_desc, #wrapper section#screen #keys {
      position: relative;
      z-index: 1; }
    #wrapper section#screen #loupe {
      width: 152px;
      height: 152px;
      background-image: url("../img/loupe.png");
      margin: -370px auto 0; }
    #wrapper section#screen #loupe_desc {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      width: 268px;
      height: 123px;
      background: url("../img/bubble_top.png") no-repeat center center;
      color: #fafafa;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);
      padding: 35px;
      font-size: 14px;
      margin: 10px auto 0; }
    #wrapper section#screen #keys {
      width: 364px;
      height: 128px;
      background: url("../img/keys.png") no-repeat center center;
      margin: 10px auto -30px;
      -webkit-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
      -moz-transition: all 0.3s ease-out;
      -ms-transition: all 0.3s ease-out;
      -o-transition: all 0.3s ease-out; }
      #wrapper section#screen #keys:hover {
        -webkit-transform: translate(0, 3px);
        -moz-transform: translate(0, 3px);
        -o-transform: translate(0, 3px);
        transform: translate(0, 3px); }
    #wrapper section#screen #shortcut_note {
      font-size: 12px;
      color: #054357; }
  #wrapper section.section1 {
    height: 402px;
    background-image: url("../img/bg_blue_01.jpg"); }
  #wrapper section.section2 {
    height: 352px;
    background-image: url("../img/bg_blue_02.jpg"); }
    #wrapper section.section2 p {
      color: #fafafa;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);
      font-size: 13px; }
      #wrapper section.section2 p strong {
        font-weight: 600;
        color: #4c8494; }
    #wrapper section.section2 .cool, #wrapper section.section2 .standard {
      height: 352px;
      width: 624px; }
    #wrapper section.section2 .cool {
      background: url("../img/action_cool.png") no-repeat center 10px; }
      #wrapper section.section2 .cool p {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        background: url("../img/bubble_ps.png") no-repeat center center;
        width: 268px;
        height: 123px;
        padding: 35px 30px;
        position: absolute;
        top: 193px;
        left: 25px; }
      #wrapper section.section2 .cool img {
        position: absolute;
        right: 0;
        top: 75px; }
    #wrapper section.section2 .standard {
      background: url("../img/action_usual.png") no-repeat center 5px; }
      #wrapper section.section2 .standard p {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        background: url("../img/bubble_code.png") no-repeat center center;
        width: 163px;
        height: 162px;
        padding: 25px 35px 25px 26px;
        position: absolute;
        top: 90px;
        left: 25px; }
  #wrapper section.switchable {
    position: relative;
    overflow: hidden; }
    #wrapper section.switchable .slide-wrapper {
      -webkit-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
      -moz-transition: all 0.3s ease-out;
      -ms-transition: all 0.3s ease-out;
      -o-transition: all 0.3s ease-out;
      position: absolute;
      width: 1248px; }
      #wrapper section.switchable .slide-wrapper div.standard {
        position: absolute;
        width: 624px;
        top: 0;
        right: 0; }
      #wrapper section.switchable .slide-wrapper div.cool {
        position: absolute;
        width: 624px;
        top: 0;
        left: 0; }
    #wrapper section.switchable div.wrp-standard {
      -webkit-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
      -moz-transition: all 0.3s ease-out;
      -ms-transition: all 0.3s ease-out;
      -o-transition: all 0.3s ease-out;
      left: 0; }
    #wrapper section.switchable div.wrp-cool {
      -webkit-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
      -moz-transition: all 0.3s ease-out;
      -ms-transition: all 0.3s ease-out;
      -o-transition: all 0.3s ease-out;
      left: -624px; }
  #wrapper #ender {
    height: 30px;
    background-image: url("../img/bg_ender.png"); }

footer {
  margin: 0 auto;
  width: 624px;
  font-size: 11px;
  color: #99550e;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
  footer #credits {
    margin-bottom: 35px; }
    footer #credits .strong {
      font-weight: 600;
      display: block; }
    footer #credits a {
      color: #6c3c0a; }
      footer #credits a:hover {
        color: #99550e; }
  footer #app_store {
    margin: 40px auto 0;
    width: 163px;
    height: 52px;
    background: url("../img/mac_app_store.png");
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out; }
    footer #app_store:hover {
      opacity: .8; }
    footer #app_store:active {
      -webkit-transform: translate(0, 5px);
      -moz-transform: translate(0, 5px);
      -o-transform: translate(0, 5px);
      transform: translate(0, 5px); }
    footer #app_store a {
      display: block;
      height: 100%;
      width: 100%; }
  footer #love {
    margin: 20px auto 30px;
    width: 120px;
    height: 53px;
    background: url("../img/love_jumpzero.png"); }
    footer #love a {
      display: block;
      height: 100%;
      width: 100%; }