/*
Stylesheet for Pipsqueak's Button System, designed for Screen Media

Author: Christopher Werby of Pipsqueak Productions, LLC
http://www.pipsqueak.com/

TODO: Want to add the little round buttons too.

Update Notes: 2010-01-30 11:01 AM (Saturday): Markup simplified and turned into a system.

2010-07-26 04:07 PM (Monday): Adopted a new sliding doors technique.  These are marked with class button-large and button-small.

*/

/* @group button-glass SYSTEM STYLES */
/*WHITE button-glass GENERALLY*/
div.button-glass { height: 20px; }
div.button-glass a.tiny { width: 51px; }
div.button-glass a.small { width: 71px; }
div.button-glass a.medium { width: 90px; }
div.button-glass a.large { width: 120px; }
div.button-glass a.xlarge { width: 150px; }
div.button-glass a.giant { width: 180px; }
div.button-panel a.rectangle { width: 170px; }

div.button-panel a, div.button-glass a
{
	display: block;
	margin: 0;
	overflow: hidden;
	text-decoration: none;
	height: 100%;
	font-family: sans-serif;
	font-size: 10px;
	font-weight: bold;
	line-height: 20px;
	text-align: center;
	background-repeat: no-repeat;
	background-position: left top;
}

div.button-glass a.tiny { background: url('../images/Button_White_Multi_Tiny.jpg'); }
div.button-glass a.small { background: url('../images/Button_White_Multi_Small.jpg'); }
div.button-glass a.medium { background: url('../images/Button_White_Multi_Medium.jpg'); }
div.button-glass a.large { background: url('../images/Button_White_Multi_Large.jpg'); }
div.button-glass a.xlarge { background: url('../images/Button_White_Multi_XLarge.jpg'); }
div.button-glass a.giant { background: url('../images/Button_White_Multi_Giant.jpg'); }

div.button-panel span, div.button-glass span
{
	position: relative;
	left: 1px;
	top: 1px;
	color: #555;
	text-transform: uppercase;
}

div.button-glass a:hover {cursor: pointer;}

div.button-glass a.tiny:hover { background-position: -51px 0; }
div.button-glass a.small:hover { background-position: -71px 0; }
div.button-glass a.medium:hover { background-position: -90px 0; }
div.button-glass a.large:hover { background-position: -120px 0; }
div.button-glass a.xlarge:hover { background-position: -150px 0; }
div.button-glass a.giant:hover { background-position: -180px 0; }
div.button-panel a.rectangle:hover { background-position: 0 -100px; }
div.button-glass a.tiny:active { background-position: -102px 0; }
div.button-glass a.small:active { background-position: -142px 0; }
div.button-glass a.medium:active { background-position: -180px 0; }
div.button-glass a.large:active { background-position: -240px 0; }
div.button-glass a.xlarge:active { background-position: -300px 0; }
div.button-glass a.giant:active { background-position: -360px 0; }
div.button-panel a.rectangle:active { background-position: 0 -200px; }

/*

Sample markup for a button-glass looks like this:

<div class="button-glass">
	<a class="giant">
		<span>
			Expand / Collapse</span></a>
</div>
<!-- /button-glass -->

*/

/* @end BUTTON SYSTEM STYLES */
/* @group BUTTON SYSTEM STYLES FOR SLIDING DOORS BUTTONS */
/* Note that the button class is applied to the A tag here and to a DIV tag above for the static glossy button-glass and the big button-panel */
a.button-large, a.button-small
{
	color: #454545;
	display: block;
	float: left;
	font: bold 13px sans-serif, arial;
	margin-right: 6px;
	padding-right: 18px;
	/* sliding doors padding */
	text-decoration: none !important;
	line-height: 12px;
	outline: none;
	background-image: url('../images/Button_BG_A_Tag.png');
	background-repeat: no-repeat;
	background-position: right;
	background-attachment: scroll;
}

a.button-small
{
	font: bold 11px sans-serif, arial;
	margin-right: 4px;
	padding-right: 12px;
	/* sliding doors padding */
	line-height: 10px;
	background-image: url('../images/Button_BG_Small_A_Tag.png');
}

a.button-large span, a.button-small span
{
	background: transparent url('../images/Button_BG_Span_Tag.png') no-repeat;
	display: block;
	line-height: 12px;
	padding: 7px 0px 7px 18px;
}

a.button-small span
{
	background: transparent url('../images/Button_BG_Small_Span_Tag.png') no-repeat;
	line-height: 10px;
	padding: 4px 0px 4px 12px;
}

a.button-large:hover, a.button-small:hover
{
	background-position: right -26px;
	outline: none;
	/* hide dotted outline in Firefox */
	color: #000;
}

a.button-small:hover { background-position: right -18px; }
a.button-large:hover span { background-position: 0px -26px; }
a.button-small:hover span { background-position: 0px -18px; }

a.button-large:active, a.button-small:active
{
	background-position: right -52px;
	color: #000;
	outline: none;
}

a.button-small:active { background-position: right -36px; }

a.button-large:active span
{
	background-position: 0px -52px;
	padding: 8px 0px 6px 18px;
	/* push text down 1px */
}

a.button-small:active span
{
	background-position: 0px -36px;
	padding: 5px 0px 3px 12px;
	/* push text down 1px */
}

/*

Sample markup for a Button looks like this:  (the onclick is optional -- it makes IE let the Button be released properly.  Probably should be programmatically added using jQuery.  The href attribute should point to the link.

	<a class="button-large" href="#" onclick="this.blur();">
		<span>
			Button Text Here</span></a>


	<a class="button-small" href="#" onclick="this.blur();">
		<span>
			Button Text Here</span></a>

*/

/* @end BUTTON SYSTEM STYLES FOR SLIDING DOORS BUTTONS */