/* CSS Document */

#the_wheel_wrapper 
{
	background: url(wle_442x442.png) no-repeat scroll 0 0 transparent;
    height: 442px;
	margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 442px;
}

#wle_diagram
{
	display: none;
}

.circle 
{
    border-radius: 50%;
    display: block;
    font-size: 0;
    height: 106px;
    line-height: 0;
    position: absolute;
	opacity: 0.85;
    width: 106px;
	z-index: 1;
}

.circle:hover, .circle.active
{
	border: 10px solid #ed1c24;
	margin: -10px 0 0 -10px;
	background-image: url(wle_442_active.png);
	z-index: 2;
}

.circle:hover
{
	z-index: 3;
}

#positive_classroom 
{
	background-position: -167px -16px;
    left: 167px;
    top: 16px;
}

#civic_engagement 
{
	background-position: -258px -46px;
   	left: 258px;
    top: 46px;
}

#instructor_support
{
	background-position: -314px -123px;
    left: 314px;
    top: 123px;
}

#services_supports
{
	background-position: -313px -219px;
    left: 313px;
    top: 219px;
}

#real_life_learning
{
	background-position: -256px -296px;
	left: 256px;
    top: 296px;
}

#inclusivity
{
	background-position: -165px -324px;
    left: 165px;
    top: 324px;
}

#personal_development
{
	background-position: -76px -294px;
    left: 76px;
    top: 294px;
}

#flexibility
{
	background-position: -20px -217px;
	left: 20px;
    top: 217px;
}

#social_connection
{
	background-position: -21px -121px;
	left: 21px;
    top: 121px;
}

#optimal_challenge
{
	background-position: -78px -45px;
    left: 78px;
    top: 45px;
}

/* iPhone 4 landscape or larger mobile */
@media (max-width: 480px)
{
	#the_wheel_wrapper 
	{
		background: url(wle_280x280.png) no-repeat scroll 0 0 transparent;
		height: 280px;
		width: 280px;
		background-size:100% 100%;
	}
	
	.circle:hover, .circle.active
	{
		border: 5px solid #ed1c24;
		margin: -5px 0 0 -5px;
		background-image: url(wle_280_active.png);
	}
	
	.circle 
	{
		height: 67px;
		width: 67px;
	}
	
	#positive_classroom 
	{
		background-position: -106px -10px;
		left: 106px;
		top: 10px;
	}
	
	#civic_engagement 
	{
		background-position: -163px -29px;
		left: 163px;
		top: 29px;
	}
	
	#instructor_support
	{
		background-position: -198px -78px;
		left: 198px;
		top: 78px;
	}
	
	#services_supports
	{
		background-position: -198px -139px;
		left: 198px;
		top: 139px;
	}
	
	#real_life_learning
	{
		background-position: -161px -187px;
		left: 161px;
	    top: 187px;
	}
	
	#inclusivity
	{
		background-position: -104px -205px;
		left: 104px;
		top: 205px;
	}
	
	#personal_development
	{
		background-position: -48px -186px;
		left: 48px;
		top: 186px;
	}
	
	#flexibility
	{
		background-position: -13px -137px;
		left: 13px;
		top: 137px;
	}
	
	#social_connection
	{
		background-position: -14px -77px;
		left: 14px;
		top: 77px;
	}
	
	#optimal_challenge
	{
		background-position: -50px -29px;
		left: 50px;
		top: 29px;
	}
}