/* Styling for My Chao "frame"*/
.chaodoc {
  position: relative;
  background-color:#B1F1FF;
  border: 2px solid #4F78DC;
  top: 0;
  width : 294px;
  height: 145px;  
}  
.chaotitle {
  background-color: #FFE200;
  border: 1px solid #fff;
  border-radius: 20px;
  width : 254px;
  margin: 12px auto;
  padding: 6px;     
  font-size:20px;
}

/*Styling for the garden*/
.chaogarden {
  position: relative;
  top: 0;
}
.chaobg {
  position: relative;
  top: 0;
  left: 0;
}

/*Styling to display your own Chao 
support Chao up to 90x80*/
#mychao{
  display: flex;
  flex-direction: row;
  margin:0 3px;
}

#mychaobg
{
    width: 90px;
    height: 80px;
    background: url('/cliques/chaos/bg-mychao.png') no-repeat;
    text-align: center;
    margin:0 3px;
}
.Centerer
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
#mychaobg > img
{
    vertical-align: bottom;
}


/*Put your Chao here and number or name them accordingly
use top and left to position the Chao in the garden
the garden bg is 350x320*/

.chao1 {
  position: absolute;
  top: 180px;
  left: 250px;
}
.chao2 {
  position: absolute;
  top: 50px;
  left: 100px;
}
.chao3 {
  position: absolute;
  top: 100px;
  left: 60px;
}

/*For the Chao to react and move up a little when mouse hovers.
Separate each name from the previous list with ","
AND add "img:hover" next to each one as well*/
.chao1 img:hover,
.chao2 img:hover,
.chao3 img:hover { 
      transform: translate(0px,-2px)
    }


/*Codes for the shadows 
lil is for more defined pixels
big is for bigger pixels*/

#chaos {
  position: relative;
  z-index: 100;
}
#shadowchaobig {
  content:url('/cliques/chaos/shadow_chao-big_px.png');
  position: relative;
  bottom: -6px; 
  left: -53%;
  z-index: 1;
}
#shadowchaolil {
  content:url('/cliques/chaos/shadow_chao-lil_px.png');
  position: relative;
  bottom: -6px;
  left: -52%;
  z-index: 1;
}

#shadowchaobig_gif {
  content:url('/cliques/chaos/shadow_chao-big_px.png');
  position: relative;
  bottom: -2px; 
  left: -51%;
  z-index: 1;
}
#shadowchaolil_gif {
  content:url('/cliques/chaos/shadow_chao-lil_px.png');
  position: relative;
  bottom: -2px;
  left: -50%;
  z-index: 1;
}

/*Position of the stamp credit for Chaos Garden Clique*/
#chaoclique {
  position: absolute;
  top: 260px;
  left: 50px;
}


/* For Smaller screen*/
  @media(max-width: 500px) {
    .chaogarden {
      width: 350px;
      height: 320px;
    }
  }