#petal1 {

background-color:#fbdfe0;

border-bottom:1px solid #aaaaaa; 

border-top:1px solid #aaaaaa; 

border-right:1px solid #aaaaaa;

border-left:1px solid #aaaaaa;

width:35px; 

height:35px; 

font-size:14px; 

font-family: 'KBSubtle';

border-radius:35px 35px 0px 35px;

-moz-border-radius:35px 35px 0px 35px;

position:fixed;

overflow:hidden;

top:15px;

left:10px;

z-index:99999999;

padding:2px;

-webkit-transition: opacity 0.7s linear;

-webkit-transition: all 0.7s ease-in-out;

-moz-transition: all 0.7s ease-in-out;

-o-transition: all 0.7s ease-in-out;
}



#petal1icon{

font-size:40px; /* size of text icon */

color:#ffffff; /* colour of text icon */

margin-top:-5px;

margin-right:10px;

text-align:center;

-webkit-transition: opacity 0.7s linear;

-webkit-transition: all 0.7s ease-in-out;

-moz-transition: all 0.7s ease-in-out;

-o-transition: all 0.7s ease-in-out;
}



#petal1:hover{

background-color:white;

top:15px;

left:120px;

width:270px; /* width after hovering */

height:300px; /* height after hovering */

border-radius:5px 5px 5px 5px;

-moz-border-radius:5px 5px 5px 5px;
}



#petal2 {

background-color:#fbdfe0; 

border-bottom:1px solid #aaaaaa; 

border-top:1px solid #aaaaaa; 

border-right:1px solid #aaaaaa; 

border-left:1px solid #aaaaaa; 

width:35px; 

height:35px;

font-size:14px; 

font-family: 'KBSubtle'; 

border-radius:35px 0px 35px 35px;

-moz-border-radius:35px 0px 35px 35px;

position:fixed;

overflow:hidden;

top:56px;

left:10px;

z-index:9999999;

padding:2px;

-webkit-transition: opacity 0.8s linear;

-webkit-transition: all 0.8s ease-in-out;

-moz-transition: all 0.8s ease-in-out;

-o-transition: all 0.8s ease-in-out;
}



#petal2icon{

font-size:40px; /* size of text icon */

color:#fff; /* colour of text icon */

margin-top:-5px;

margin-right:10px;

text-align:center;

-webkit-transition: opacity 0.8s linear;

-webkit-transition: all 0.8s ease-in-out;

-moz-transition: all 0.8s ease-in-out;

-o-transition: all 0.8s ease-in-out;
}



#petal2:hover{

background-color:white;

top:15px;

left:120px;

width:270px;

height:300px; 

border-radius:5px 5px 5px 5px;

-moz-border-radius:5px 5px 5px 5px;
}



#petal3 {

background-color:#fbdfe0;

border-bottom:1px solid #aaaaaa; 

border-top:1px solid #aaaaaa; 

border-right:1px solid #aaaaaa;

border-left:1px solid #aaaaaa;

width:35px; 

height:35px; 

font-size:14px; 

font-family: 'KBSubtle';
border-radius:35px 35px 35px 0px;

-moz-border-radius:35px 35px 35px 0px;

position:fixed;

overflow:hidden;

top:15px;

left:51px;

z-index:999999;

padding:2px;

-webkit-transition: opacity 0.7s linear;

-webkit-transition: all 0.7s ease-in-out;

-moz-transition: all 0.7s ease-in-out;

-o-transition: all 0.7s ease-in-out;
}



#petal3icon{

font-size:40px; /* size of text icon */

color:#ffffff; /* colour of text icon */

margin-top:-5px;

margin-right:10px;

text-align:center;

-webkit-transition: opacity 0.7s linear;

-webkit-transition: all 0.7s ease-in-out;

-moz-transition: all 0.7s ease-in-out;

-o-transition: all 0.7s ease-in-out;
}



#petal3:hover{

background-color:white;

top:15px;

left:130px;

width:270px; /* width after hovering */

height:300px; /* height after hovering */

border-radius:5px 5px 5px 5px;

-moz-border-radius:5px 5px 5px 5px;
}



#petal4 {

background-color:#fbdfe0; 

border-bottom:1px solid #aaaaaa; 

border-top:1px solid #aaaaaa; 

border-right:1px solid #aaaaaa; 

border-left:1px solid #aaaaaa; 

width:35px; 

height:35px;

font-size:14px; 

font-family: 'KBSubtle'; 

border-radius:0px 35px 35px 35px;

-moz-border-radius:0px 35px 35px 35px;

position:fixed;

overflow:hidden;

top:56px;

left:51px;

z-index:99999;

padding:2px;

-webkit-transition: opacity 0.8s linear;

-webkit-transition: all 0.8s ease-in-out;

-moz-transition: all 0.8s ease-in-out;

-o-transition: all 0.8s ease-in-out;
}



#petal4icon{

font-size:40px; /* size of text icon */

color:#fff; /* colour of text icon */

margin-top:-5px;

margin-right:10px;

text-align:center;

-webkit-transition: opacity 0.8s linear;

-webkit-transition: all 0.8s ease-in-out;

-moz-transition: all 0.8s ease-in-out;

-o-transition: all 0.8s ease-in-out;
}



#petal4:hover{

background-color:white;

top:15px;

left:120px;

width:270px;

height:300px; 

border-radius:5px 5px 5px 5px;

-moz-border-radius:5px 5px 5px 5px;
}



#stigma {

background-color:yellow; 

border-bottom:1px solid #aaaaaa; 

border-top:1px solid #aaaaaa; 

border-right:1px solid #aaaaaa; 

border-left:1px solid #aaaaaa; 

width:22px; 

height:22px;

font-size:14px; 

font-family: 'KBSubtle'; 

border-radius:22px 22px 22px 22px;

-moz-border-radius:22px 22px 22px 22px;

position:fixed;

overflow:hidden;

top:43px;

left:37px;

z-index:999999999;

padding:2px;

-webkit-transition: opacity 0.8s linear;

-webkit-transition: all 0.8s ease-in-out;

-moz-transition: all 0.8s ease-in-out;

-o-transition: all 0.8s ease-in-out;
}



#stigmaicon{

font-size:40px; /* size of text icon */

color:#fff; /* colour of text icon */

margin-top:-5px;

margin-right:10px;

text-align:center;

-webkit-transition: opacity 0.8s linear;

-webkit-transition: all 0.8s ease-in-out;

-moz-transition: all 0.8s ease-in-out;

-o-transition: all 0.8s ease-in-out;
}



#stigma:hover{

background-color:white;

top:15px;

left:120px;

width:270px;

height:450px; 

border-radius:5px 5px 5px 5px;

-moz-border-radius:5px 5px 5px 5px;
}