/*Start General Styles - NOT RELEVANT for this tutorial*/

/*End General Styles*/


/* Start button effects */

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

/* Tutorial button with jQuery */
.otherbutton {
	clear: both;
	position:relative;
	display:block;
	height: 24px;
	width: 215px;
	background:url(../images/contact.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
	padding:12px 33px 0 0;
}	
.otherbutton span.hover {
	position: absolute;
	display: block;
	height: 36px;
	width: 248px;
	background: url(../images/contact.png) no-repeat;
	background-position: bottom;
	top:0;
	left:0;
	z-index:-1
}

.otherbutton1 {
	clear: both;
	position:relative;
	display:block;
	height: 45px;
	width: 215px;
	background:url(../images/ecare.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
	padding:35px 33px 0 0;
	 font-size:20px!important
}	
.otherbutton1 span.hover {
	position: absolute;
	display: block;
	height: 80px;
	width: 248px;
	background: url(../images/ecare.png) no-repeat;
	background-position: bottom;
	top:0;
	left:0;
	z-index:-1
}


.otherbutton2 {
	clear: both;
	position:relative;
	display:block;
	height: 45px;
	width: 215px;
	background:url(../images/ecare3.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
	padding:35px 33px 0 0;
	 font-size:20px!important
}	
.otherbutton2 span.hover {
	position: absolute;
	display: block;
	height: 80px;
	width: 248px;
	background: url(../images/ecare3.png) no-repeat;
	background-position: bottom;
	top:0;
	left:0;
	z-index:-1
}


/* 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 */