html{
	/*	background-color: rgb(155, 95, 170);*/
	font-family: 'Helvetical Neue', sans-serif;
	font-weight: 300;
	text-shadow: 0 1px 0 rgba(255,255,255,0.5);
	text-align: center;
	background-color: #8A4499;
}	
#circles      
    {
    position: absolute;
    top: 50%;
    left: 50%;
	margin-left: -240px;
	margin-top: -150px;
    }
    
    
.circle {
position: relative;
	text-align: center;

	width: 300px;
	height: 300px;
	
	-moz-border-radius: 150px;
	-webkit-border-radius: 150px;
	border-radius: 150px;
	
	/*puts a shadow around elememts*/
	box-shadow: 0px 0px 5px black;
	-moz-box-shadow: 0px 0px 5px black;
	-webkit-box-shadow: 0px 0px 5px black;
	
	/*applies transitions to all changes of circles*/
	-moz-transition: opacity .25s;
	  -webkit-transition: opacity .25s;
	  -webkit-transition: opacity .25s;
	  -o-transition: opacity .25s;
	  
	  opacity: .5;
}
.circle:hover {
	opacity: .75;
}
#art {
		position: absolute;
		background: red;
		z-index: 0;
}
#art:hover {
	z-index: 5;
}

#meditation {
background: blue;
margin-left: 200px;
z-index: 0;
}
#meditation:hover {
	z-index: 5;
}

/*

deep purple for meditation
turquoisy blue for art
background - faded dark purple

*/

a {
/*	visibility: hidden;*/
text-decoration: none;
font-size: 2em;
}
a span{
z-index: -5;
position: absolute;
visibility: hidden;
}
#artText {
top: 40%;
left: 40%;
color: blue;

}
#meditationText {
top: 40%;
left: 28%;
color: red;

}

#unavailable {
	margin-top: 200px;
	padding: 30px;
}