/*Start General Styles - NOT RELEVANT for this tutorial*/
body {margin:0;padding:0;background:#f9f9f9;}
p {margin:0;padding:0;clear:both;color:#666;font-family:Georgia,serif;font-size:11px;line-height:18px;}
/*a:link, a:visited, a:hover, a:active {text-decoration:none;}*/
.clearer {clear: both;}
small {font-family: Arial, sans-serif;font-variant: small-caps;color: #809dba;}
h1 {font-family: Georgia, serif;font-size: 16px;font-weight: normal;color: #666;border-bottom: 1px solid #343434;margin-bottom: 15px;padding-bottom: 8px;margin-top: 20px;}
#content {width: 570px;padding: 30px;border: 1px solid #e4e4e4;margin: 0 auto;background: #fff;margin-top: 100px;margin-bottom: 100px;-webkit-border-radius: 5px;-moz-border-radius: 5px;}
#column1 {float: left;width: 250px;margin: 0px;padding: 0px;}
#column2 {padding: 0px;margin-left: 250px;margin-right: 0px;}
/*End General Styles*/


/* Start button effects */

/* Tuturial button*/
.button {
	width:570px;
	height:64px;
	display:block;
	background-image:url("../images/downloadbutton.png");
	background-position: top;
}
.button:hover{
	width:570px; 
	background-position: bottom;
	height:64px;
	background-image:url("../images/downloadbutton.png") no repeat;
}

/* Tutorial button with jQuery */
.textile {
	clear: both;
	position:relative;
	display:block;
	height: 200px;
	width: 200px;
	background:url("../images/textile1.jpg") no-repeat;
	background-position:0 0;
	cursor: pointer;
}	
.textile span.hover {
	position: relative;
	display: block;
	height: 200px;
	width: 200px;
	background: url("../images/textile2.jpg") no-repeat;
	background-position: bottom;
}

.bath {
	clear: both;
	position:relative;
	display:block;
	height: 200px;
	width: 200px;
	background:url("../images/bath1.jpg") no-repeat;
	background-position:0 0;
	cursor: pointer;
}	
.bath span.hover {
	position: relative;
	display: block;
	height: 200px;
	width: 200px;
	background: url("../images/bath2.jpg") no-repeat;
	background-position: bottom;
}

.pillow {
	clear: both;
	position:relative;
	display:block;
	height: 200px;
	width: 200px;
	background:url("../images/pillow1.jpg") no-repeat;
	background-position:0 0;
	cursor: pointer;
}	
.pillow span.hover {
	position: relative;
	display: block;
	height: 200px;
	width: 200px;
	background: url("../images/pillow2.jpg") no-repeat;
	background-position: bottom;
}

.napkins {
	clear: both;
	position:relative;
	display:block;
	height: 200px;
	width: 200px;
	background:url("../images/napkins.jpg") no-repeat;
	background-position:0 0;
	cursor: pointer;
}	
.napkins span.hover {
	position: relative;
	display: block;
	height: 200px;
	width: 200px;
	background: url("../images/napkins2.jpg") no-repeat;
	background-position: bottom;
}

/* Bonus buttons */
.downloadbutton {
	float: left;
	width:107px;
	height:38px;
	display:block;
	background-image:url("../images/twobuttons.png");
	background-position: top right;
}
.downloadbutton span.hover{
	position: absolute;
	display: block;
	width:107px;
	height:38px;
	background-position: bottom right;
	background-image:url("../images/twobuttons.png");
}
.homebutton {
	float: left;
	width:120px;
	height:38px;
	display:block;
	background-image:url("../images/twobuttons.png");
	background-position: top left;
}
.homebutton span.hover{
	position: absolute;
	display: block;
	width:120px;
	height:38px;
	background-position: bottom left;
	background-image:url("../images/twobuttons.png");
}

/* Donate button with jQuery */
.donatebutton {
	clear: both;
	position:relative;
	display:block;
	height: 128px;
	width: 128px;
	background:url("../images/donate.png") no-repeat;
	background-position:0 0;
	cursor: pointer;
}	
.donatebutton span.hover {
	position: absolute;
	display: block;
	height: 128px;
	width: 128px;
	background: url("../images/donate.png") no-repeat;
	background-position: bottom;
}

/* Donate button without jQuery */
.donatebutton_alt {
	display:block;
	height: 128px;
	width: 128px;
	background:url("../images/donate.png") no-repeat;
	background-position:0 0;
	cursor: pointer;
}	
.donatebutton_alt:hover {
	height: 128px;
	width: 128px;
	background: url("../images/donate.png") no-repeat;
	background-position: bottom;
}
/* End button effects */