/*

	-- -- -- -- -- -- --
	buttons.css
	-- -- -- -- -- -- --
	
*/

@import url("reset.css");


																		/* -- Base HTML -- */
body {
	font: 62.5% "Lucida Grande", "Lucida Sans Unicode", arial, sans-serif;
	color: #000;
	background: #fff;
	width: 770px;
	margin: 20px auto;
}
p {
	font-size: 1.2em;
	line-height: 1.8;
}




																		/* -- core button style -- */
.button-group {
	width: 100%;
	overflow: hidden;
	clear: both;
	margin: 40px 0;
}
.button-wrapper {
	width: auto;
	display: block;
	float: left;
	border: 0;
	padding: 0;
	margin: 0 10px 0 0;
}
.button-wrapper div {
	width: 100%;
}
.button-wrapper button {
	width: 100%;
}
.button-wrapper button, .button-wrapper a, .button-wrapper a:visited {
	font-size: 1.2em;
	font-family: "Lucida Grande", "Lucida Sans Unicode", arial, sans-serif;
	text-decoration: none;
	line-height: 43px;
	cursor: pointer;
	padding: 0 15px;
	border: none;
	display: block;
	float: left;
}
.button-wrapper img {
	vertical-align: middle;
	position: relative;
	top: -2px;
	margin: 0 2px;
}


																		/* -- image variations -- */

																		/* Style 1 */
.style1 {
	background: #606ed2 url(../i/button-bg-style1.gif) repeat-x;
}
.style1:hover {
	background-position: 0 -63px;
}
.style1 div {
	background: url(../i/button-right-style1.gif) no-repeat 100% 0;
}
.style1:hover div {
	background-position: 100% -63px;
}
.style1 button, .style1 a, .style1 a:visited {
	color: #eaecf8;
	font-size: 1.4em;
	font-weight: bold;
	letter-spacing: -0.09em;
	text-shadow: #3642b7 1px 1px 0;
	text-align: center;
	background: url(../i/button-left-style1.gif) no-repeat 0 0;
}
.style1:hover button, .style1:hover a, .style1:hover a:visited {
	color: #fff;
	text-shadow: #162089 1px 2px 1px;
	background-position: 0 -63px;
}
																		/* custom height setting */
.style1, .style1 div, .style1 button, .style1 a, .style1 a:visited {
	height: 63px;
	line-height: 63px;
}


																		/* Style 2 */
.style2 {
	background: #d3d3d3 url(../i/button-bg-style2.gif) repeat-x;
}
.style2:hover {
	background-position: 0 -48px;
}
.style2 div {
	background: url(../i/button-right-style2.gif) no-repeat 100% 0;
}
.style2:hover div {
	background-position: 100% -48px;
}
.style2 button, .style2 a, .style2 a:visited {
	color: #333;
	font-family: Arial, sans-serif;
	font-weight: bold;
	font-size: 1.2em;
	text-align: center;
	background: url(../i/button-left-style2.gif) no-repeat 0 0;
}
.style2:hover button, .style2:hover a, .style2:hover a:visited {
	color: #000;
	background-position: 0 -48px;
	text-shadow: #bbb 1px 1px 3px;
}
.style2, .style2 div, .style2 button, .style2 a, .style2 a:visited {
	height: 47px;
	line-height: 47px;
}

																		/* Style 3 */
.style3 {
	background: #ad1d1a url(../i/button-bg-style3.gif) repeat-x;
}
.style3:hover {
	background-position: 0 -40px;
}
.style3 div {
	background: url(../i/button-right-style3.gif) no-repeat 100% 0;
}
.style3:hover div {
	background-position: 100% -40px;
}
.style3 button, .style3 a, .style3 a:visited {
	color: #fff;
	font-family: Arial, sans-serif;
	font-weight: bold;
	font-size: 1.3em;
	text-shadow: #780807 1px 1px 3px;
	text-align: center;
	background: url(../i/button-left-style3.gif) no-repeat 0 0;
}
.style3:hover button, .style3:hover a, .style3:hover a:visited {
	background-position: 0 -40px;
}
.style3, .style3 div, .style3 button, .style3 a, .style3 a:visited {
	height: 40px;
	line-height: 40px;
}




																		/* -- Incidental page style -- */
#footer {
	margin-top: 5em;
	clear: left;
	background: #eee;
	padding: 10px;
}
#footer img {
	float: left;
	margin: 0 10px 10px 0;
	vertical-align: bottom;
}