happy 01 (css)

/* ---••• Updates tabs by octomoosey.tumblr - please don't delete this credit!  thanks •••---  */
div::-webkit-scrollbar{
    height:3px;
    width:3px;
    background:inherit;}

div::-webkit-scrollbar-thumb {
    background:#fff;}

div::-webkit-scrollbar-track {
    background:transparent;}

div#accordion {
    z-index:9;
    position:fixed;
    top:20px;        /* ---••• Change the margin from top here •••---  */
    left:20px;       /* ---••• Change the margin from left here - change this to 'right' to place on the right hand side of your page - you will also need to change the 'float' (please see next instruction below!) •••---  */
    padding:0;
    list-style-type:none;
    width:340px;
    height:150px; }

#accordion div[id=one], #accordion div[id=two], #accordion div[id=three], #accordion div[id=four] {
    height:150px;
    width:16px;
    float:left; /* ---••• Change this to float:right; to place on the right hand side of your page •••---  */
    text-decoration:none;
    overflow: hidden;
     -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;}

#accordion:hover div:hover {
    width: 240px;
    overflow-y: auto;
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;}

/* ---••• This is where you can change the gradients of each block - just enter the hex code for each block - making sure to copy and paste to each line for cross browser compatibility - if you don't want a gradient, just set a single colour in the first line and delete the next 3 lines! •••---  */

#one {
   	background-color: #00ABE5;
	background: -webkit-linear-gradient(top, #00ABE5, #8f8f8f );
	background: -moz-linear-gradient(top, #00ABE5, #8f8f8f );
	background: -ms-linear-gradient(top, #00ABE5, #8f8f8f );
	background: -o-linear-gradient(top, #00ABE5, #8f8f8f );}

#two {
   	background-color:#3977D5;
   	background: -webkit-linear-gradient(top, #3977D5, #f7d0c4);
   	background: -moz-linear-gradient(top, #3977D5, #f7d0c4);
   	background: -ms-linear-gradient(top, #3977D5, #f7d0c4);
   	background: -o-linear-gradient(top, #3977D5, #f7d0c4);}

#three {
   	background-color: #8533C1;
   	background: -webkit-linear-gradient(top, #8533C1, #fef2c4);
   	background: -moz-linear-gradient(top, #8533C1, #fef2c4);
   	background: -ms-linear-gradient(top, #8533C1, #fef2c4);
   	background: -o-linear-gradient(top, #8533C1, #fef2c4);}

#four {
   	background-color:#BF00B2;
   	background: -webkit-linear-gradient(top, #BF00B2, #e5fcfc);
   	background: -moz-linear-gradient(top, #BF00B2, #e5fcfc);
   	background: -ms-linear-gradient(top, #BF00B2, #e5fcfc);
   	background: -0-linear-gradient(top, #BF00B2, #e5fcfc);}

#accordiancontent {
    color:#fff;     /* ---••• Change the text color here •••---  */
    padding:20px;
    max-width:200px;
    text-align:justify;
    text-shadow: 2px 2px 2px #111;} /* ---••• delete this line (leave the end bracket in tact) if you don't want a text shadow •••---  */

#accordiantitle {
    font-family: 'Homemade Apple', cursive;
    font-size:16px;
    text-align:center;}

#accordian ul {
    list-style-type: circle;}