body {
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;  
  background-image: url(bg.png);
  background-size: 600px 600px;
  background-repeat: no-repeat;
  font-family: Open Sans;
}

.wrapper {
    margin: 0 auto;
}

.gameboard, .sample {
    display: inline-table;    
    text-align:center;
    position: absolute;
}

.gameboard {
    width: 240px;
}

.gameboard .bubble {
/*    border: 3px solid rgba(0,0,0,0.5);*/
    /*border-radius: 30px;*/
/*    box-shadow: inset 0px -2px 16px 0px #333;*/
    display:inline-block;
    height: 50px;
    margin: 0 5px;
    width: 50px;   
    /*position: absolute;*/
    cursor: pointer;
}

.sample .bubble {
/*    border: 3px solid rgba(0,0,0,0.5);*/
    border-radius: 10px;
    /*box-shadow: inset 0px -2px 16px 0px #333;*/
    display:inline-block;
    height: 22px;
    margin: 0 5px;
    width: 22px;   
    position: absolute;
}

.gameboard .bubble:nth-child(1) {
    top: 0;
    left: 52px;
}

.bb1 {
    top: 0!important;
    left: 52px!important;
}

.gameboard .bubble:nth-child(2) {
    top: 0;
    left: 98px;
}

.bb2 {
    top: 0!important;
    left: 98px!important;
}

.gameboard .bubble:nth-child(3) {
    top: 0;
    left: 144px;
}

.bb3 {
    top: 0!important;
    left: 144px!important;
}

.gameboard .bubble:nth-child(5) {
    top: 46px;
    left: 26px;
}

.bb4 {
    top: 46px!important;
    left: 26px!important;
}

.gameboard .bubble:nth-child(6) {
    top: 46px;
    left: 72px;
}

.bb5 {
    top: 46px!important;
    left: 72px!important;
}

.gameboard .bubble:nth-child(7) {
    top: 46px;
    left: 118px;
}

.bb6 {
    top: 46px!important;
    left: 118px!important;
}

.gameboard .bubble:nth-child(8) {
    top: 46px;
    left: 164px;
}

.bb7 {
    top: 46px!important;
    left: 164px!important;
}

.gameboard .bubble:nth-child(10) {
    top: 92px;
    left: 6px;
}

.bb8 {
    top: 92px!important;
    left: 6px!important;
}

.gameboard .bubble:nth-child(11) {
    top: 92px;
    left: 52px;
}

.bb9 {
    top: 92px!important;
    left: 52px!important;
}

.gameboard .bubble:nth-child(12) {
    top: 92px;
    left: 98px;
}

.bb10 {
    top: 92px!important;
    left: 98px!important;
}

.gameboard .bubble:nth-child(13) {
    top: 92px;
    left: 144px;
}

.bb11 {
    top: 92px!important;
    left: 144px!important;
}

.gameboard .bubble:nth-child(14) {
    top: 92px;
    left: 190px;
}

.bb12 {
    top: 92px!important;
    left: 190px!important;
}

.gameboard .bubble:nth-child(16) {
    top: 138px;
    left: 26px;    
}

.bb13 {
    top: 138px!important;
    left: 26px!important;    
}

.gameboard .bubble:nth-child(17) {
    top: 138px;
    left: 72px;
}

.bb14 {
    top: 138px!important;
    left: 72px!important;
}

.gameboard .bubble:nth-child(18) {
    top: 138px;
    left: 118px;
}

.bb15 {
    top: 138px!important;
    left: 118px!important;
}

.gameboard .bubble:nth-child(19) {
    top: 138px;
    left: 164px;
}

.bb16 {
    top: 138px!important;
    left: 164px!important;
}

.gameboard .bubble:nth-child(21) {
    top: 184px;
    left: 52px;
}

.bb17 {
    top: 184px!important;
    left: 52px!important;
}

.gameboard .bubble:nth-child(22) {
    top: 184px;
    left: 98px;
}

.bb18 {
    top: 184px!important;
    left: 98px!important;
}

.gameboard .bubble:nth-child(23) {
    top: 184px;
    left: 144px;
}

.bb19 {
    top: 184px!important;
    left: 144px!important;
}

.sample .bubble:nth-child(1) {
    top: 0;
    left: 32px;
}

.sample .bubble:nth-child(2) {
    top: 0;
    left: 61px;
}

.sample .bubble:nth-child(3) {
    top: 0;
    left: 87px;
}

.sample .bubble:nth-child(5) {
    top: 23px;
    left: 20px;
}

.sample .bubble:nth-child(6) {
    top: 23px;
    left: 48px;
}

.sample .bubble:nth-child(7) {
    top: 23px;
    left: 74px;
}

.sample .bubble:nth-child(8) {
    top: 23px;
    left: 100px;
}

.sample .bubble:nth-child(10) {
    top: 46px;
    left: 6px;
}

.sample .bubble:nth-child(11) {
    top: 43px;
    left: 32px;
}

.sample .bubble:nth-child(12) {
    top: 43px;
    left: 61px;
}

.sample .bubble:nth-child(13) {
    top: 43px;
    left: 87px;
}

.sample .bubble:nth-child(14) {
    top: 43px;
    left: 113px;
}

.sample .bubble:nth-child(16) {
    top: 63px;
    left: 20px;    
}

.sample .bubble:nth-child(17) {
    top: 63px;
    left: 48px;
}

.sample .bubble:nth-child(18) {
    top: 63px;
    left: 74px;
}

.sample .bubble:nth-child(19) {
    top: 63px;
    left: 100px;
}

.sample .bubble:nth-child(21) {
    top: 83px;
    left: 32px;
}

.sample .bubble:nth-child(22) {
    top: 83px;
    left: 61px;
}

.sample .bubble:nth-child(23) {
    top: 83px;
    left:87px;
}
.level-bg{
margin-top:40px;
width: 190px;
height: 38px;
background-color: #fff;
 -moz-border-radius: 0 20px 20px 0;
 border-radius: 0 20px 20px 0;
 font-size: 14px;
 line-height: 35px;
  color: #051d44;
}
.movesleft-bg{
    margin-top:20px;
 width: 215px;
height: 38px;
background-color: #fff;
 -moz-border-radius: 0 20px 20px 0;
 border-radius: 0 20px 20px 0;  
 font-size: 14px;
 line-height: 35px;
 color: #051d44;
}
.level{
    padding-left: 15px;
    float: left;
}
.movesleft{
    padding-left: 15px;
    float: left;
}
.beige{
background-image: url(circle_orange.png);
background-size: 35px 35px;
background-repeat: no-repeat;
z-index:99;
border-radius: 30px;
width: 35px!important;
height: 35px!important;
box-shadow: #051d44 1px 1px 1px;

}
.aqua{
background-image: url(circle_blue.png);
background-size: 35px 35px;
background-repeat: no-repeat;
z-index:99;
border-radius: 30px;
width: 35px!important;
height: 35px!important;
box-shadow: #051d44 1px 1px 1px;
}
.purple{
 background-image: url(circle_purple.png);
background-size: 35px 35px;
background-repeat: no-repeat;
z-index:99;   
border-radius: 30px;
width: 35px!important;
height: 35px!important;
box-shadow: #051d44 1px 1px 1px;
}
.darkgray{
background-image: url(circle_yellow.png);
background-size: 35px 35px;
background-repeat: no-repeat;
z-index:99;
border-radius: 30px;
width: 35px!important;
height: 35px!important;
box-shadow: #051d44 1px 1px 1px;
}
.yellowgreen{
    background-image: url(circle_yellowgreen.png);
background-size: 35px 35px;
background-repeat: no-repeat;
z-index:99;
border-radius: 30px;
width: 35px!important;
height: 35px!important;
box-shadow: #051d44 1px 1px 1px;
}

.level-nr{
   padding-left: 150px;
   color: #ec008c;
   font-weight: bold;
   font-size: 24px;
}

.movesleft-nr{
   padding-left: 170px;
   color: #ec008c;
   font-weight: bold;
   font-size: 24px;
}
.score{
        padding-left: 15px;
    float: left;
}
.score-bg{
margin-top:20px;
 width: 240px;
height: 38px;
background-color: #fff;
 -moz-border-radius: 0 20px 20px 0;
 border-radius: 0 20px 20px 0;  
 font-size: 14px;
 line-height: 35px;
 color: #051d44;
}
.score-nr{
      padding-left: 180px;
   color: #ec008c;
   font-weight: bold;
   font-size: 24px; 
}
.gameboard{
left: 110px;
top: 235px;
}
.sample{
left: 380px;
top: 60px;
}
.relative{
    position: relative;
}
.sample .bubble {
background-size: 20px 20px!important;
border-radius: 15px!important;
box-shadow: #051d44 1px 1px 1px!important;
width: 20px!important;
height: 20px!important;
}
.high-score-show{
    background-image: url(top_lista.png);
}
.high-score-show .sa-confirm-button-container button{
    margin-top: 100px!important;
    font-weight: bold;
}
.next-level{
    background-image: url(next_level.png);
}
.next-level h2{
    color: #ffec6b;
}
.start_screen{
    background-image: url("start.png");
}
.start_screen p{
    font-size: 20px;
    padding-top: 120px;
    font-weight: normal;
}
.confirm{
   background-color:transparent!important; 
   border: 1px #ffffff solid!important;
    border-style: solid;
}
.high-score{
    color: #ec008c;
    float: left;
    width: 120px;
    text-align: right;
    padding-right: 10px;
    font-size: 24px;
margin-bottom: 5px;
}
.name{
    color: #ec008c;
    float: left;
    width: 260px;
    margin-left: 25px;
    text-align: left;
    color:#051d44;
    font-weight: normal;
    font-size: 20px;
    height: 32px;
    padding-left: 5px;
    margin-bottom: 5px;
    padding-top: 1px;
}

.rank{
    color: #ec008c;
    float: left;
    width: 120px;
    font-size: 24px;
    margin-bottom: 5px;
}
.high-score-show h2{
    margin-top: 200px;
}


.winner .name{
    background-color: #3e215f;
    color:#fff;
}
.winner .rank{
  background-color: #3e215f;
  color:#fff;
}
.winner .high-score{
    background-color: #3e215f;
    color:#fff;
}
.sweet-overlay{
    display:none!important;
}


.showme{ 
display: none;

}
.bubble:hover .showme{
display : block;
background-image: url("arrow.gif");
height: 110px;
z-index: -888;
width: 110px;
background-size: 110px auto;
background-repeat: no-repeat;
margin-left: -50px;
/*margin-top: -30px;*/
position: relative;
top: -35px;
z-index: -99;
left: 15px;
}