Updates Tab 1 (CSS) - by Chloe

/* U P D A T E S   T A B   B Y   C H L O E / @bychloethemes */
/* Customisation instructions are included. Make sure that if you change the color of the cross you change the colour of BOTH lines. Otherwise your cross will have one line one colour and the other another colour. If you need to make the tab longer there are three heights you have to change. Make sure that the first 2 are 30px longer than the last one.*/
#cinderella {
    position:fixed;
    left:20px;
    top:20px;
    font-size: 11px;
    font-family: verdana; /*font of the tab*/
}
.ariel {
    display: block;
    visibility: none;
    width:75px;
    height:75px;
}
.ariel:before {
    content:'';
    width:2px;
    height: 75px;
    background: #000; /*Cross Colour*/
    display: inline-block;
    left:60px;
    position: fixed;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.ariel:after {
    content:'';
    width:2px;
    height: 75px;
    background: #000; /*Cross Colour*/
    display: inline-block;
    left:60px;
    position: fixed;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
#cinderella:hover .ariel:before {
    height:200px; /*1st Height*/
    content:'';
    position: fixed;
    width:2px;
    background:#fff; /*Cross Colour after hover*/
    left:20px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
#cinderella:hover .ariel:after {
    height:200px; /*2nd Height*/
    content:'';
    position: fixed;
    width:2px;
    background:#fff; /*Cross Colour after hover*/
    left:20px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.belle {
    position: relative;
    top:-75px;
    margin:10px;
    visibility: none;
    color: transparent;
    width:140px;
    height:0px;
    overflow: hidden;
    padding: 5px
}
.belle .snow-white {
    visibility: none;
    opacity: 0;
    width:140px;
    text-align:center;
    background:#fff; /* Heading background colour */
    color:#000; /* Heading font colour */
    margin:3px 0px;
    padding: 2px 0px;
}
.snow-white:first-child {
    margin-top: 0px;
}
#cinderella:hover .belle .snow-white {
    display: block;
    visibility: visible;
    opacity: 1;
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out;
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
#cinderella:hover .belle {
    visibility: visible;
    color: #000; /* Text font colour */
    height:170px; /* 3rd Height, must be 30px shorter than the first 2 */
    background: rgba(255,255,255,0.4); /* Tab background. Using rgba makes it trasparent. To change google "hex colour to rgba". The opacity works best at 40% */
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out;
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
/* U P D A T E S   T A B   B Y   C H L O E */