/*here goes all of your css styling*/

body{
width: 100%;
padding: 0;
margin: 0;
font-family: "century gothic", sans-serif;
font-size: 80%;
}


#wrapper{
width: 90%;
max-width: 700px;
margin: 0 auto;
padding-top: 20px;
}

#header p{
	margin: 0px 0px 100px 0px;
}

a{
color: #d6005e;
}

.example-wrapper{
	margin-bottom: 70px;
}




/*example 01------------------------------------------------------------------------------*/


#example-01 a.tooltip > span{
width: 200px; 
padding: 7px 10px; 
margin-top: 25px; 
opacity: 0; 
visibility: hidden; 
z-index: 10; 
position: absolute; 
display: none; 
margin-left: -200px;
}

#example-01 a.tooltip:hover span{ 
color: #000000; 
border: 1px solid #000000; 
background: #ffeaf3;
display: inline; 
} 

#example-01 a.tooltip:hover > span{ 
opacity: 1; 
visibility: visible; 
overflow: visible; 
}
 
 
 

 /*example 02------------------------------------------------------------------------------*/

#example-02 a.tooltip span{
z-index: 10;
display: none; 
border-radius:4px; 
-moz-border-radius: 4px; 
-webkit-border-radius: 4px; 
} 

#example-02 a.tooltip:hover span{ 
display: inline; 
position: absolute; 
border: 1px solid #8c8c8c; 
background: #f4f4f4;
} 


#example-02 a.tooltip > span{
width: 200px; 
padding: 10px 12px; 
opacity: 0; 
visibility: hidden; 
z-index: 10; 
position: absolute; 
font-size: 12px; 
font-style: normal; 
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; -o-border-radius: 3px; 
border-radius: 3px; 
-webkit-box-shadow: 4px 4px 4px #d9b3c3; 
-moz-box-shadow: 4px 4px 4px #d9b3c3; 
box-shadow: 4px 4px 4px #d9b3c3; 
color: #000000; 
background: #f4f4f4; 
background: -moz-linear-gradient(top, #FBF5E6 0%, #FFFFFF 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBF5E6), color-stop(100%,#FFFFFF)); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBF5E6', endColorstr='#FFFFFF',GradientType=0 ); 
border: 1px solid #8c8c8c; 
}


#example-02 a.tooltip:hover > span{ 
opacity: 1; 
text-decoration:none; 
visibility: visible; 
overflow: visible; 
margin-top: 40px; 
display: inline; 
margin-left: -200px;
}

#example-02 a.tooltip span b{ 
width: 15px; 
height: 15px; 
margin-left: 20px; 
margin-top: -19px; 
display: block; 
position: absolute; 
-webkit-transform: rotate(-45deg); 
-moz-transform: rotate(-45deg); 
-o-transform: rotate(-45deg); 
transform: rotate(-45deg); 
-webkit-box-shadow: inset -1px 1px 0 #fff; 
-moz-box-shadow: inset 0 1px 0 #fff; -o-box-shadow: inset 0 1px 0 #fff; 
box-shadow: inset 0 1px 0 #fff; 
display: none\0/; *display: none; 
background: #f4f4f4; 
border-top: 1px solid #8c8c8c; 
border-right: 1px solid #8c8c8c; 
} 


 
/*example 03--------------------------------------------------------------------------------*/

#example-03  a.tooltip strong{
line-height: 30px;
font-size: 16px;
margin-bottom: 10px;
}

#example-03  a.tooltip > span{ 
width: 200px; 
padding: 10px 20px;
margin-top: 20px; 
margin-left: -210px; 
opacity: 0; 
visibility: hidden; 
z-index: 10; 
position: absolute; 
font-size: 12px; 
font-style: normal; 
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; -o-border-radius: 3px; 
border-radius: 3px; -webkit-box-shadow: 2px 2px 2px #999; 
-moz-box-shadow: 2px 2px 2px #999; 
box-shadow: 2px 2px 2px #999; 
-webkit-transition-property: opacity, margin-top, visibility, margin-left; 
-webkit-transition-duration: 0.4s, 0.3s, 0.4s, 0.3s; 
-webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; 
-moz-transition-property: opacity, margin-top, visibility, margin-left; 
-moz-transition-duration:0.4s, 0.3s, 0.4s, 0.3s; 
-moz-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; -o-transition-property:opacity, margin-top, visibility, margin-left; -o-transition-duration:0.4s, 0.3s, 0.4s, 0.3s; -o-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; 
transition-property:opacity, margin-top, visibility, margin-left; 
transition-duration:0.4s, 0.3s, 0.4s, 0.3s; 
transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; 
color: #FFFFFF; 
background: #333333; 
background: -moz-linear-gradient(top, #333333 0%, #999999 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#999999)); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#999999',GradientType=0 ); 
border: 1px solid #000000; 
} 


#example-03  a.tooltip:hover > span
{ 
opacity: 1; 
text-decoration:none; 
visibility: visible; 
overflow: visible; 
margin-top: 35px; 
display: inline; 
margin-left: -200px; 
}

#example-03  a.tooltip span b{ 
width: 15px; 
height: 15px; 
margin-left: 20px; 
margin-top: -19px; 
display: block; 
position: absolute; 
-webkit-transform: rotate(-45deg); 
-moz-transform: rotate(-45deg); 
-o-transform: rotate(-45deg); 
transform: rotate(-45deg); 
-webkit-box-shadow: inset -1px 1px 0 #fff; 
-moz-box-shadow: inset 0 1px 0 #fff; -o-box-shadow: inset 0 1px 0 #fff; 
box-shadow: inset 0 1px 0 #fff; 
display: none\0/; *display: none; 
background: #333333; 
border-top: 1px solid #000000; 
border-right: 1px solid #000000; 
}




/*example 4-------------------------------------------------------------------------------------*/

#example-04 a{
color: #d6005e;
}
#example-04 a:hover{
color: #ff2283;
position: relative;
}

#example-04 a[title]:hover:after{
content: attr(title);
padding: 8px 12px;
color: #85003a;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0px 0px 2px #c0c1c2;
-webkit-box-shadow: 0px 0px 2px #c0c1c2;
box-shadow: 0px 0px 2px #c0c1c2;
background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffffff),color-stop(1, #eeeeee));
background-image: -webkit-linear-gradient(top, #ffffff, #eeeeee);
background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
background-image: -ms-linear-gradient(top, #ffffff, #eeeeee);
background-image: -o-linear-gradient(top, #ffffff, #eeeeee);
}