* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 1em;
	list-style: none;
}

div.clear {
	clear: both;
}

body {
	background: rgb(180, 185, 190);
	color: 80, 80, 80;
	font-family: 'Lucida Grande', 'Lucida Sans', sans-serif;
	font-size: 11px;
}

div#wrap {
	margin: 180px auto;
	width: 300px;
}

div#left {
	float: left;
}

div#right {
	float: right;
}

input, select {
	margin-bottom: 10px;
}

#checkbox {
	margin-left: 10px;
}

div.toolbar input.search {
	width: 210px;
	display: inline-block;
}

div.toolbar button {
	margin-left: 10px;
}

/* ui kit */

select.select {
	-webkit-appearance: none;
	-webkit-box-shadow: 
		inset 0 1px 0 rgba(255, 255, 255, 0.6),
		0 1px 0 rgba(0, 0, 0, 0.2),
		0 0 0 1px rgb(150, 150, 150),
		0 1px 2px rgba(0, 0, 0, 0.25);
	background-position: right center, left top;
	background-repeat: no-repeat, repeat-x;
	background-image:
		url('../img/arrow.png'),
		-webkit-gradient(
			linear,
			left top,
			left bottom,
			from(rgb(240, 240, 240)),
			to(rgb(210, 210, 210))
		);
	border-radius: 3px;
	color: rgb(80, 80, 80);
	font-size: 11px;
	font-weight: bold;
	height: 20px;
	outline: 0;
	padding-left: 6px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
/* for this page only */
	width: 140px;
	display: block;
}

input.radio {
	-webkit-appearance: none;
	-webkit-box-shadow: 
		inset 0 1px 0 rgba(255, 255, 255, 0.6),
		0 0 0 1px rgb(150, 150, 150),
		0 1px 2px rgba(0, 0, 0, 0.25);
	background:
		-webkit-gradient(
			linear,
			0% 0%,
			0% 100%,
			from(rgb(240, 240, 240)),
			to(rgb(210, 210, 210))
		)
		rgb(90, 90, 90);
	border-radius: 20px;
	height: 10px;
	width: 10px;
}

input.radio:disabled {
	background:
		-webkit-gradient(
		  radial, 50% 50%, 2, 50% 50%, 3, from(rgb(180, 180, 180)), to(rgba(255, 255, 255, 0))
		),
		-webkit-gradient(
			linear,
			0% 0%,
			0% 100%,
			from(rgb(240, 240, 240)),
			to(rgb(210, 210, 210))
		)
		rgb(90, 90, 90);
}

input.radio:checked {
	background:
		-webkit-gradient(
		  radial, 50% 50%, 2, 50% 50%, 3, from(rgb(90, 90, 90)), to(rgba(255, 255, 255, 0))
		),
		-webkit-gradient(
			linear,
			0% 0%,
			0% 100%,
			from(rgb(240, 240, 240)),
			to(rgb(210, 210, 210))
		)
		rgb(90, 90, 90);
}

input.checkbox {
	-webkit-appearance: none;
	-webkit-box-shadow: 
		inset 0 1px 0 rgba(255, 255, 255, 0.6),
		0 0 0 1px rgb(150, 150, 150),
		0 1px 2px rgba(0, 0, 0, 0.25);
	background:
		-webkit-gradient(
			linear,
			0% 0%,
			0% 100%,
			from(rgb(240, 240, 240)),
			to(rgb(210, 210, 210))
		)
		rgb(90, 90, 90);
	border-radius: 3px;
	height: 10px;
	width: 10px;
}

input.checkbox:checked {
	background:
		url('../img/check.png') center center no-repeat,
		-webkit-gradient(
			linear,
			0% 0%,
			0% 100%,
			from(rgb(240, 240, 240)),
			to(rgb(210, 210, 210))
		)
		rgb(90, 90, 90);
}

input.search {
	-webkit-appearance: none;
	-webkit-box-shadow:
		0 -1px 0 rgba(0, 0, 0, 0.3),
		inset 0 1px 1px rgba(0, 0, 0, 0.2),
		0 0 0 1px rgb(140, 140, 140),
		0 2px 0 rgba(255, 255, 255, 0.3);
	-webkit-transition-property: background-color, color;
	-webkit-transition-duration: 0.4s;
	background:
		-webkit-gradient(
			linear,
			left top,
			left bottom,
			from(rgba(0, 0, 0, 0.1)),
			to(rgba(0, 0, 0, 0))
		)
		rgb(245, 245, 245);
	border-radius: 20px;
	color: rgb(90, 90, 90);
	font: 11px/1 'Lucida Grande', sans-serif;
	display: block;
	height: 20px;
/* for this page only */
	width: 130px;
}

input.search::-webkit-search-results-decoration {
	margin-right: 2px;
}

input.search::-webkit-search-cancel-button {
	margin-left: 4px;
}

input.search:focus {
	-webkit-box-shadow:
		0 0 4px rgb(68, 160, 208),
		0 -1px 0 rgba(0, 0, 0, 0.3),
		inset 0 1px 1px rgba(0, 0, 0, 0.2),
		0 0 0 1px rgb(140, 140, 140),
		0 2px 0 rgba(255, 255, 255, 0.3);
	background-color: rgb(255, 255, 255);
	color: rgb(60, 60, 60);
}

input.text {
	-webkit-appearance: none;
	-webkit-box-shadow:
		0 -1px 0 rgba(0, 0, 0, 0.3),
		inset 0 1px 1px rgba(0, 0, 0, 0.2),
		0 0 0 1px rgb(140, 140, 140),
		0 2px 0 rgba(255, 255, 255, 0.3);
	-webkit-transition-property: background-color, color;
	-webkit-transition-duration: 0.4s;
	border-radius: 3px;
	font: 11px/1 'Lucida Grande', sans-serif;
	color: rgb(90, 90, 90);
	height: 20px;
	padding: 0 5px;
	background:
		-webkit-gradient(
			linear,
			left top,
			left bottom,
			from(rgba(0, 0, 0, 0.1)),
			to(rgba(0, 0, 0, 0))
		)
		rgb(245, 245, 245);
/* for this page only */
	width: 120px;
	display: block;
}

input.text:focus {
	-webkit-box-shadow:
		0 0 4px rgb(68, 160, 208),
		0 -1px 0 rgba(0, 0, 0, 0.3),
		inset 0 1px 1px rgba(0, 0, 0, 0.2),
		0 0 0 1px rgb(140, 140, 140),
		0 2px 0 rgba(255, 255, 255, 0.3);
	background-color: rgb(255, 255, 255);
	color: rgb(60, 60, 60);
}

input.range {
	-webkit-appearance: none;
	-webkit-box-shadow:
		inset 0 0 0 1px rgb(140, 140, 140),
		inset 0 1px 2px rgba(0, 0, 0, 0.3),
		0 1px 0 rgba(255, 255, 255, 0.3);
	background: rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	height: 4px;
/*	*/
	width: 100px;
	display: block;
}

input.range::-webkit-slider-thumb {
	-webkit-appearance: none;
	-webkit-box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.2),
		0 0 0 1px rgb(140, 140, 140),
		0 1px 1px rgba(0, 0, 0, 0.3);
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.7);
	background-image:
		-webkit-gradient(
		  radial, 50% 50%, 2, 50% 50%, 3, from(rgb(200, 200, 200)), to(rgba(255, 255, 255, 0))
		), 
		-webkit-gradient(
			linear,
			left top,
			left bottom,
			from(rgb(240, 240, 240)),
			to(rgb(210, 210, 210))
		);
	width: 10px;
	height: 10px;
}

.button {
	-webkit-box-shadow: 
		inset 0 1px 0 rgba(255, 255, 255, 0.6),
		0 1px 0 rgba(0, 0, 0, 0.2),
		0 0 0 1px rgb(150, 150, 150),
		0 1px 2px rgba(0, 0, 0, 0.25);
	border-radius: 3px;
	background-color: rgba(255, 255, 255, 0.7);
	background-image: 
		-webkit-gradient(
			linear,
			left top,
			left bottom,
			from(rgb(240, 240, 240)),
			to(rgb(210, 210, 210))
		);
	color: rgb(90, 90, 90);
	font: 11px/20px 'Lucida Grande', sans-serif;
	padding: 0 10px;
	text-decoration: none;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.button:active {
	-webkit-box-shadow:
		inset 0 0 4px 1px rgba(0, 0, 0, 0.2),
		0 0 0 1px rgb(140, 140, 140),
		0 1px 1px rgba(0, 0, 0, 0.3);
}

ul.list {
	-webkit-box-shadow: 
		0 1px 0 rgba(0, 0, 0, 0.2),
		0 0 0 1px rgb(150, 150, 150),
		0 1px 2px rgba(0, 0, 0, 0.25);
	background: rgba(255, 255, 255, 0.6);
	color: rgb(90, 90, 90);
	border-radius: 3px;
	width: 140px;
}

ul.list li {
	-webkit-box-shadow:
		0 -1px 0 rgba(0, 0, 0, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.6);
	background-image: 
		-webkit-gradient(
			linear,
			left top,
			left bottom,
			from(rgb(240, 240, 240)),
			to(rgb(210, 210, 210))
		);
	line-height: 1;
	padding: 10px;
}

ul.list li:first-child {
	border-radius: 3px 3px 0 0;
	-webkit-box-shadow: none;
}

ul.list li:last-child {
	border-radius: 0 0 3px 3px;
}

div.toolbar {
	-webkit-box-shadow: 
		inset 0 1px 0 rgba(255, 255, 255, 0.4),
		0 1px 0 rgba(0, 0, 0, 0.2),
		0 0 0 1px rgb(150, 150, 150),
		0 1px 2px rgba(0, 0, 0, 0.25);
	background-color: rgba(255, 255, 255, 0.4);
	background-image: 
		-webkit-gradient(
			linear,
			left top,
			left bottom,
			from(rgb(220, 220, 220)),
			to(rgb(180, 180, 180))
		);
	border-radius: 3px;
	height: 20px;
	padding: 10px;
/* for this page only */
	margin-top: 10px;
}