/* 
    Document   : button.css
    Created on : Dec 10, 2011, 8:26:46 AM
    Author     : back
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

root { 
    display: block;
}


/* Button */
.button, input[type=button], input[type=submit], button {
	text-decoration: none;
	border-color:#888;
	border-color:rgba(90, 90, 90, 0.36);
	cursor: pointer;
	outline: none;
	color:#111;
	font-family:"Lucida Grande","Lucida Sans","Lucida Sans Unicode","Segoe UI",Verdana,sans-serif;
	display:inline-block;
	vertical-align:top;
	position:relative;
	font-size:12px;
	/*font-weight:bold;*/
	text-align:center;
	background-color:#aaa;
	background-image:url(support/gradient.png);
	background-image: -moz-linear-gradient(top, rgba(255,255,255,.75), rgba(255,255,255,.40));
	background-image: -o-linear-gradient(top, rgba(255,255,255,.75), rgba(255,255,255,.40));
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.75)), to(rgba(255,255,255,.40)));
	background-image: linear-gradient(top, rgba(255,255,255,.75), rgba(255,255,255,.40));
	background-repeat:repeat-x;
	/*text-shadow:1px 1px 0 rgba(255,255,255,.67);*/
	line-height:2;
	margin:0 0 0em 0em;
	padding:0 1em;
/*	height:2em;*/
	-moz-box-shadow:1px 1px 0 rgba(255,255,255,.5) inset, -1px -1px 0 rgba(255,255,255,.5) inset;
	-webkit-box-shadow:1px 1px 0 rgba(255,255,255,.5) inset, -1px -1px 0 rgba(255,255,255,.5) inset;
	box-shadow:1px 1px 0 rgba(255,255,255,.5) inset, -1px -1px 0 rgba(255,255,255,.5) inset;
	-webkit-transition: background .185s linear;
	-moz-transition: all .185s linear;
	-o-transition: all .185s linear;
	transition: all .185s linear;
	/** Make the text unselectable **/
	-moz-user-select: none;
	-webkit-user-select: none;
        /*overflow: ;*/
}
.button, .button:after, button, button:after, input[type=submit], input[type=button] {
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	border-width:1px;
	border-style:solid;

}
.button:after, button:after{
	display:block;
	position:absolute;
/*	content:' ';*/
	width:100%;
	height:100%;
	border-color: transparent transparent #ccc;
	border-color: transparent transparent rgba(255, 255, 255, 0.67);
	bottom:-2px;
	left:-1px;
}
.button:hover, .button:focus, button:hover, button:focus, input[type=button]:hover, input[type=button]:focus, input[type=submit]:hover, input[type=submit]:focus {
	background-color:#a8c0cb;
}
.button:active, button:active, input[type=submit]:active, input[type=button]:active {
	line-height:2.2;
	-moz-box-shadow
		:0 .33em 1em rgba(0,0,0,.67) inset,
		1px 1px 0 rgba(255,255,255,.25) inset, 
		-1px -1px 0 rgba(255,255,255,.25) inset;
	-webkit-box-shadow:
		0 .33em 2em rgba(0,0,0,.67) inset,
		1px 1px 0 rgba(255,255,255,.25) inset, 
		-1px -1px 0 rgba(255,255,255,.25) inset;
	box-shadow:
		0 .33em 2em rgba(0,0,0,.67) inset,
		1px 1px 0 rgba(255,255,255,.25) inset, 
		-1px -1px 0 rgba(255,255,255,.25) inset;
		-webkit-transition: line-height .1s linear;
		-moz-transition: all .1s linear;
		-o-transition: all .1s linear;
		transition: all .1s linear;
}
.button.bg, .button.bg:hover, .button.bg:focus {
	background-image: -moz-linear-gradient(top, rgba(255,255,255,.75), rgba(255,255,255,0));
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.75)), to(rgba(255,255,255,0)));
}

/* Colors/Styles */
.button.blue {
	background-color:#9eb4bf;
}
.button.blue:hover {
	background-color:#b4cdda;
}
.button.darkblue {
	background-color:#046;
	color:#fff;
	/*text-shadow:-1px -1px 0 rgba(0,0,0,.3);*/
}
.button.darkblue:hover {
	background-color:#00547e;
}
.button.small {
        color: #222;
	font-size:10px;
}
.button.red {
	background-color:#900;
	color:#fff;
	/*text-shadow:-1px -1px 0 rgba(0,0,0,.3);*/
}
.button.red:hover {
	background-color:#b30000;
}
.button.green {
	background-color:#090;
	color:#fff;
	/*text-shadow:-1px -1px 0 rgba(0,0,0,.3);*/
}
.button.green:hover {
	background-color:#00b300;
}
.button.pill, .button.pill:before, .button.pill:after {
	-moz-border-radius:1em;
	-webkit-border-radius:1em;
	border-radius:1em;
}
.button.black {
	background-color:#000;
	color:#fff;
	/*text-shadow:-1px -1px 0 rgba(0,0,0,.3);*/
}
.button.black:hover {
	background-color:#222;
}
.button.sharp {
	background-image:-moz-linear-gradient(top, rgba(255,255,255,.75), rgba(255,255,255,.33) 50%, transparent 50%, transparent 100%);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, 
		from(rgba(255,255,255,.75)),
		color-stop(0.5, rgba(255,255,255,.33) ),
		color-stop(0.5, transparent ),
		to(transparent)
	);
	background-repeat:repeat-x;
}
.button.large {
	font-size:20px;
}
.button.webkit {
	-webkit-transition: all .185s linear;
}
@-moz-document url-prefix(http://) {
	button:after {
		left:-1.25em;
		bottom:.25em;
	}
}

/*
USAGE Examples:

    <a href="#" class="button">&rarr;</a>
    <a href="#" class="button">Push It</a>
    <a href="#" class="button sharp">Sharper</a>
    <a href="#" class="button pill">Pill Style</a>
    <a href="#" class="button">A Very Long Button Indeed</a> <br />
    <a href="#" class="button small">Small Button</a>

    <a href="#" class="button large">Large Button</a>
    <a href="#" class="button webkit">Wonky WebKit Transition</a> <br />		

    <a href="#" class="button blue">Lite Blue</a>
    <a href="#" class="button darkblue sharp">Dark Blue</a>
    <a href="#" class="button red">Red One</a> 	
    <a href="#" class="button black pill">Dark</a> 
    <a href="#" class="button black pill sharp">Sharp Black</a> <br />

    <input type="submit" class="button" value="Real Submit Button (input)" />
    <button type="submit">Real Submit Button (button)</button>

*/