/* Karen Zeller 2011, Compass, sass 3.0 and css3 mixins */

@import "compass/css3";
@import "compass/css3/opacity";

$grey: #666666;
$lt_blue: #ccffff;
$default-border-radius: 20px;
$padding: 5px;
$opacity: .6;

@mixin shell_layout
	{
	width: 150px;
	height: 160px;
	float: left;
	margin: 5px;
	}

@mixin border 
	{
		border: 1px solid $grey;
		@include border-radius;
	} 

.main
	{
	@include border;
	margin: 20px;
	padding: 20px;
	color: $grey; 
	font-family: helvetica, myriad, sans-serif;
	a {
		text-decoration: none;
		color: $grey;
		font-size: 16px;
		&:hover span {
			@include border;
			display: block;
			background-color: $lt_blue;
			float: right;
			margin-right: 70%;
			padding: $padding;
				}
		}
	span 
		{
		display: none;
		}
	img.shell
		{
			@include shell_layout;
			&:hover
			{
			@include opacity($opacity);
			}
		}		
	.shell2
		{
			@include shell_layout;
			background-image: url('../images/Nautilus2.png'), url('../images/NautilusShell.jpg');
			background-position: right bottom, left top;
			background-repeat: no-repeat;
		}	
	.shell3
		{
			@include shell_layout;
			background: url('../images/NautilusShell.jpg') left top no-repeat;
			box-shadow: 5px 5px 5px #888888;
			}
	}
	
.clear {
	clear: both;
	}