/* Garmoshka | https://github.com/artpolikarpov/garmoshka */
/* line 4, ../sass/garmoshka.sass */
body {
  margin: 0;
  background-image: url('../images/background.jpg');
  background-repeat: repeat;
  background-size: 700px;
  overflow:hidden;
}

/*Intro box*/

.iBox {
  height: 80px;
  width:180px;
  background: #ff0161;
  position:fixed;
  top:20px;
  left:20px;
  padding:10px;
  z-index: 10;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
  -moz-box-shadow:    4px 4px 10px rgba(0, 0, 0, 1);
  box-shadow:         4px 4px 10px rgba(0, 0, 0, 1);
}

h1 {
  font-family: 'Allan', cursive;
  font-weight: 400;
  font-size: 37px;
  letter-spacing:1px;
  color: #fff; 
  margin: 0 0 10px 0;
  padding: 0 0 5px 0;
  border-bottom: solid 2px #fff;
}

h2 {
  font-family: 'Allan', cursive;
  font-weight: 400;
  font-size: 18px;
  letter-spacing:1px;
  color: #fff; 
  margin: 0;
}

h2 a {
  color: #000;
  margin: 0;
}

h3 {
  font-family: 'Allan', cursive;
  font-weight: 400;
  font-size: 18px;
  letter-spacing:1px;
  color: #ff0161; 
  margin: 0 0 15px 0;
  text-align: center;
}

.iButtonClose, .iButtonOpen, .qButtonClose, .qButtonOpen {
  height: 20px;
  width: 20px;
  z-index: 20;
  position: absolute;
  right: -10px;
  top: -10px;
  cursor: pointer;
  -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
  -moz-box-shadow:    1px 1px 3px rgba(0, 0, 0, 1);
  box-shadow:         1px 1px 3px rgba(0, 0, 0, 1);
  background-size: 20px 20px;
}

.iButtonOpen {
  position: fixed;
  left: 10px;
  top: 10px;
}

.qButtonOpen, .qButtonClose {
  position: fixed;
  right: 10px;
  top: 10px;
}

.iButtonOpen{
  background-image: url('../images/iopen.jpg');
}

.qButtonOpen{
  background-image: url('../images/qopen.jpg');
}

.iButtonClose, .qButtonClose{
  background-image: url('../images/close.jpg');
}

.qBox {
  height: 63px;
  width:180px;
  background: #ff0161;
  position:fixed;
  top:20px;
  right:20px;
  padding:10px;
  z-index: 10;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
  -moz-box-shadow:    4px 4px 10px rgba(0, 0, 0, 1);
  box-shadow:         4px 4px 10px rgba(0, 0, 0, 1);
}

.instructions {
  height:155px;
  width:210px;
  background: #fff;
  position:fixed;
  bottom:20px;
  right:20px;
  padding:15px;
  z-index: 10;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
  -moz-box-shadow:    4px 4px 10px rgba(0, 0, 0, 1);
  box-shadow:         4px 4px 10px rgba(0, 0, 0, 1);
}

.instructionsVolume, .instructionsResize{
  width:97px;
  height:97px;
  z-index: 15;
  background-size: 100% 100%;
  float:left;
}

.instructionsVolume {
  background-image: url('../images/volume.gif');
  margin: 0 15px 0 0;
  background-size: 97px 97px;
}

.instructionsResize {
  background-image: url('../images/resize.gif');
  background-size: 97px 97px;
}

/* line 23, ../sass/garmoshka.sass */
.garmoshka {
  max-width: 1600px;
  min-width: 800px;
  min-height: 588px;
  position: absolute;
  right: 0;
  left: 0;
  top:70px;
}

.catBum {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height:588px; 
  background-image: url('../images/catBum1.png');
  background-repeat: no-repeat;
  background-position: right top;
}


/* line 46, ../sass/garmoshka.sass */
.garmoshka .melody {
  position: absolute;
  top: 0;
  left: 300px;
  width: 100px;
  height: 370px;
  margin: 105px 0 0 0;
  background-image: url('../images/leftAccordion.jpg');
  background-size: 100px 370px;
}

.changeButtonContainer {
  height: 335px;
  width: 64px;
  text-align: center;
  margin: 25px auto 0 auto;
}


.changeButton1, .changeButton2, .changeButton3, .changeButton4, .buttonInstructions {
  height: 52px;
  width: 64px;
  margin: 0 auto 15px auto;
  cursor: pointer;
  outline: solid 1px #fff;
  background-size: 64px 52px
}

.changeButton1 {
  background-image: url('../images/buttonBub.jpg');
}

.changeButton2 {
  background-image: url('../images/buttonGrumpy.jpg');
}

.changeButton3 {
  background-image: url('../images/buttonKeyboard.jpg');
}

.changeButton4 {
  background-image: url('../images/buttonMaru.jpg');
}

.buttonInstructions {
  background-image: url('../images/buttonChange.png');
  outline:none;
  cursor:auto;
}

.buttonInstructions p {
  font-family: 'Allan', cursive;
  font-weight: 400;
  font-size: 14px;
  letter-spacing:1px;
  color: #fff; 
  padding: 5px 0 0 0;
}

/* line 126, ../sass/garmoshka.sass */
.garmoshka .bellows {
  position: absolute;
  top: 0;
  height: 588px;
  right: 400px;
  left: 400px;
  background-image: url('../images/catBelly1.png');
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 100% 588px;
}


/* line 178, ../sass/garmoshka.sass */
.garmoshka .chords {
  position: absolute;
  top: 0;
  right: 300px;
  width: 100px;
  height: 370px;
  margin: 105px 0 0 0;
  background-image: url('../images/rightAccordion.jpg');
  background-size: 100px 370px;
}

.catPaws {
  width:100px;
  height:370px;
  background-image: url('../images/catPaws1.png');
  background-repeat: no-repeat;
  background-position: right top;
  z-index: 100;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.catHead {
  position: absolute;
  top: 0;
  right: -90px;
  width: 390px;
  height:588px;
  background-image: url('../images/catHead1.png');
  background-repeat: no-repeat;
  background-position: left top;
}

.addthis_button_facebook_like {
  float: left;
}

.addthis_button_tweet {
  float: left;
  width: 40px !important;
}

.whiteKeyContainer{
  width:75px;
  height:350px;
  padding:25px 0 0 25px;
}

.whiteKey1, .whiteKey2, .whiteKey3, .whiteKey4, .whiteKey5, .whiteKey6, .whiteKey7, .whiteKey8, .whiteKey9, .whiteKey10 {
  width:75px;
  height:32px;
  cursor:pointer;
  z-index: 2;
  opacity:0.3;
}



@media 
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx)
{ 

    .changeButton1 {
      background-image: url('../images/buttonBub@2x.jpg')
    }

    .changeButton2 {
      background-image: url('../images/buttonGrumpy@2x.jpg')
    }    

    .changeButton3 {
      background-image: url('../images/buttonKeyboard@2x.jpg')
    }

    .changeButton4 {
      background-image: url('../images/buttonMaru@2x.jpg')
    }

    .buttonInstructions {
     background-image: url('../images/buttonChange@2x.png');
    }

    .garmoshka .chords {
     background-image: url('../images/rightAccordion@2x.jpg');
    }

    .garmoshka .melody {
     background-image: url('../images/leftAccordion@2x.jpg');
    }

    .iButtonClose, .qButtonClose{
     background-image: url('../images/close@2x.jpg');
    }

    .iButtonOpen{
      background-image: url('../images/iopen@2x.jpg');
    }

    .qButtonOpen{
      background-image: url('../images/qopen@2x.jpg');
    }

    .instructionsVolume {
      background-image: url('../images/volume@2x.gif');
    }

    .instructionsResize {
      background-image: url('../images/resize@2x.gif');
    }    
}