@import url("typography.css");

*, body {
	margin: 0;
	padding: 0;
}

body {
	font-family: Helvetica, Arial, sans-serif;
	margin: 2em;
	line-height: 1.5;
	background: #222;
	color: #eee;
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	width:500px;
	margin:3em auto;
}

a {
	text-decoration: none;
}

ul {
	list-style-type: none;
}

section {
	padding: 2em 0;
	border-top: 1px solid #666;
	overflow: hidden;
	/*float: left;
width: 380px;
	margin: 0 2em 2em 0;
*/
}

/* Shopping Basket example */

.basket {
	text-align: right;
}

.basket a {
	color: #f7c353;
}

/* Toolbar example */

.toolbar {
	list-style-type: none;
	background: #eee;
	background: -o-linear-gradient(#eee,#ddd); /* Opera */
	background: -moz-linear-gradient(top, #eee 0%, #ddd 100%); /* Firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#ddd)); /* Webkit */
	overflow: hidden;
	border-radius: 6px;
	border: 1px solid rgba(0,0,0,0.9);
	margin: 1em 0;
	text-align: center;
	box-shadow: inset 1px -1px 0 rgba(255,255,255,0.5),  inset 0 1px 0 #fff, 0 2px 4px rgba(0,0,0,0.3);
}

.toolbar.mask {
background-color: #e1e1e1;
background-image: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#8d8d8d));
background-image: -webkit-linear-gradient(top, #e1e1e1, #8d8d8d);
background-image: -moz-linear-gradient(top, #e1e1e1, #8d8d8d);
background-image: -o-linear-gradient(top, #e1e1e1, #8d8d8d);
background-image: linear-gradient(top, #e1e1e1, #8d8d8d);
	box-shadow: inset 1px -1px 0 rgba(255,255,255,0.3),  inset 0 1px 0 #fff, 0 2px 4px rgba(0,0,0,0.05);
}

.toolbar.fake {
	background: #eee url(/examples/imagemask/fake/grad.png) repeat-x left center;
}

.toolbar li,
.player li {
	display: inline-block;
}

.toolbar a{
	float: left:
	display: block;
	margin: 0 0.5em;
	color: #555;
	padding: 1em 0.5em;
	line-height: 2.5em;
	text-shadow: 0 1px 0 #fff;
}

.toolbar.mask a, .toolbar.fake a{
	line-height: 3em;
	padding: 1em;
	color: #333;
	text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

.toolbar a:hover {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666), color-stop(100%,#333)); /* Webkit */
	color: #fff;
	text-shadow: 0-1px 0 rgba(0,0,0,0.5);	
}

.player {
background: #404e6d; /* Old browsers */
background: -moz-linear-gradient(top, #404e6d 1%, #1f384f 50%, #192c3f 50%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#404e6d), color-stop(50%,#1f384f), color-stop(50%,#192c3f), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #404e6d 1%,#1f384f 50%,#192c3f 50%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #404e6d 1%,#1f384f 50%,#192c3f 50%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #404e6d 1%,#1f384f 50%,#192c3f 50%,#000000 100%); /* IE10+ */
background: linear-gradient(top, #404e6d 1%,#1f384f 50%,#192c3f 50%,#000000 100%); /* W3C */

	border-radius: 6px;
	border: 1px solid rgba(0,0,0,0.9);
	padding: 3px 12px;
	position: relative;
	height: 28px;
	box-shadow: inset 1px -1px 0 rgba(255,255,255,0.2),  inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 4px rgba(0,0,0,0.3);
}

.right {
	position: absolute;
	right: 12px;
	top: 3px;
}

.bigass {
	overflow: hidden;
}

.button {
	height: 36px;
	background: -webkit-linear-gradient(top, #fff, #ddd); /* Opera */
	background: -moz-linear-gradient(top, #fff 0%, #ddd 100%); /* Firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#ddd)); /* Webkit */
	overflow: hidden;
	border-radius: 6px;
	border: 1px solid rgba(0,0,0,0.6);	
	padding: 0 1em;	
	width: 220px;	
	margin: 1em auto;
	box-shadow: inset 1px -1px 0 rgba(255,255,255,0.5),  inset 0 1px 0 #fff, 0 2px 4px rgba(0,0,0,0.3);}
		
.button a {
	display: block;
	padding: 0 36px 0 0;
	height: 36px;
	line-height:36px;
	color: #444;
	text-decoration: none;	
	font-size: 16px;
}

.used img {
	margin: 0.5em ;
	vertical-align: middle;
}