body {
	background-color: #f6f6f6;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	text-shadow: 1px 1px 1px #fff;
	overflow-x: hidden;
	min-width: 900px}

p {}

#notes {
	padding:0 1em;
	font-size: .9em; 
}

a:link, a:visited {
	color: #383838;
	font-weight: bold;
	text-decoration: none; 
}

.ourButton {
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	/*width:15em;*/
	margin-left:5%;
	padding: .4em .5em;
	background-color: #959595;
	text-align: center;
	text-shadow: 1px 1px 1px #000;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: .9em;
	cursor: pointer;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#C7C7C7), to(#9C9C9C), color-stop(.6,#636363));
	color: #efefef;
	border: solid 1px #777;
	box-shadow: 2px 2px 2px #bbb;
	-webkit-box-shadow: 1px 1px 1px #aaa;
	-moz-box-shadow: 2px 2px 2px #bbb; 
}

#shadow-buttons {
	text-align: right;
	margin: 0 1em 1em 0;
clear: both;
}


#shadow-button-container {
	margin:1em 0 6em 2%;
	width: 30%;
	text-align: right; 
}

#gradient-button .ourButton {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#1E95FC), to(#1E95FC), color-stop(.6,#2900CF));
	font-size: 1.1em;
	border: solid 1px #0D1694;
	box-shadow: 2px 2px 2px #bbb;
	-webkit-box-shadow: 2px 2px 2px #bbb;
	-moz-box-shadow: 2px 2px 2px #bbb; 
}


#demo {
	width: 80%;
	margin: 1em auto 1em auto;
	height: 90px;
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: 1em;
	border-style: none;
	border-width: thin;
	border-color: #a8a8a8;
	box-shadow: 2px 2px 2px #bbb;
	-webkit-box-shadow: 2px 2px 2px #bbb;
	-moz-box-shadow: 2px 2px 2px #bbb;
	background-color: #ffffff;
	user-modify: read-write-plaintext-only;
	-webkit-user-modify: read-write-plaintext-only;
	-moz-user-modify: read-write;
	resize: both;
	padding: .5em;
	-webkit-transition: background-color .4s, -webkit-border-radius .4s
	-o-transition-property: border-radius;
	-o-transition-duration: .4s;

}

#demo:focus {
outline:none}

#demo-container {
padding-bottom: 1.5em}

#results {
	width: 60%;
	position: absolute;
	top: 0;
	left: 36%;
	min-height: 99.5%
}

.label {
	display: block;
	margin-bottom:1em;
	margin:0 0 .5em 0;
	font-size: 1em;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	padding: .2em 0 .2em .5em;
	text-align: left;
	color: #4b4b4b;
	background-color: #c8c8c8; 
	background-image: -webkit-gradient(linear, left top, left bottom, from(#D6D6D6), to(#B0B0B0), color-stop(.6,#B3B3B3));
	background-image: -moz-linear-gradient(top, #D6D6D6, #B0B0B0, #B3B3B3 90%);
	border-bottom: solid 1px #999;
clear: both; }

h2{
	font-size: 1em; 
	text-align: right;
	margin: 0 0 0 0;
	color: #6c6c6c;
padding: .2em 1em}

/*.shadow-properties:first-of-type h2{
border-style: none}

.shadow-properties:nth-of-type(even){
background-color: #dcdcdc;}
*/

#shadows-container, #basics-container, #stop-container, #results {
	/*margin: 1em auto;*/
	border: solid 1px #999;
	padding: 0;
	border-color: #b3b3b3;
	/*-webkit-border-bottom-left-radius: .5em;
	-moz-border-radius-bottomleft: .5em;
	border-bottom-left-radius: .5em;
	-webkit-border-bottom-right-radius: .5em;
	-moz-border-radius-bottomright: .5em;
	border-bottom-right-radius: .5em;*/
	box-shadow: 2px 2px 2px #bbb;
	-webkit-box-shadow: 1px 1px 2px #bbb;
	-moz-box-shadow: 2px 2px 2px #bbb; 
	-webkit-transition: border .75s;
	background-color: #e5e5e5;
padding-bottom: .5em}

#shadows-container, #basics-container, #stop-container {
	/*float: left;*/
	margin:-1px 2%;
	width: 30%;
	/*background-color: #f6f6f6; */
}

#shadows-container{
-webkit-transition: height 1s}

#start-container:hover, #end-container:hover, #stop-container:hover {
	border-color: #7f7f7f; 
}


.position-chooser {
	-webkit-border-radius: 1em;
	/*-moz-border-radius: 1em;*/
	border-radius: 1em;
	appearance: menulist;
	-webkit-appearance: menulist;
	border-color: #7d7d7d;
	box-shadow: 2px 2px 2px #bbb;
	-webkit-box-shadow: 2px 2px 2px #bbb;
	-moz-box-shadow: 2px 2px 2px #bbb; 
	background-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(#666), color-stop(0.9, #444));
	color: #ebebeb;
	text-shadow: 1px 1px 1px #000;
	font-size: .9em;
	width: 4em;
	background-color: #3f3f3f;
	/*-moz-appearance: menulist;*/
/*float: left;*/
vertical-align: middle;
}

.property-container .theSlider {
width: 100px;
float: right;
margin: 0 .5em}

.property-container {
	text-align: right;
	margin: 1em auto;
	-webkit-transition: opacity 1s;
clear: both;
height: 2em;
width: 90%
}


.shadow-properties {
	-webkit-transition: opacity 1s
}

.shadow-properties:last-of-type{
border-bottom: solid; }



#code {
	margin: 2em auto;
	width:95%;
	font-family: "Lucida Console", Monaco, monospace;
	-webkit-transition: background 1s;
	user-modify: read-write;
	-webkit-user-modify: read-write;
	-moz-user-modify: read-write;
	font-size: .9em; 
}

code:focus {
	outline: none}

a:link {}

a:visited {}

a:hover {}

a:active {}

textarea{
	vertical-align: middle; 
height: 1.6em;
	font-size: .9em;
	width: 4em;
	text-align: right;
	resize: none;
float: left; }

.color {
	vertical-align: middle; 
	height: 1.6em;
	font-size: .9em;
	width: 5em;
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	border-style: none;
	text-align: center;
	box-shadow: 2px 2px 2px #777;
	-webkit-box-shadow: 1px 1px 1px #aaa;
	-moz-box-shadow: 2px 2px 2px #bbb;
	text-shadow: 1px 1px 1px #666;
	width: 7em;
}

input[type="text"]{
	 width: 2em;
	/*float: left;*/
	margin: 0;
border-style: solid 1px;
font-size: .8em; }

input:focus{
	outline: none}

label {
	font-size: .9em;
/*float: left; */}

select {
width: 2em;
margin:0;
 }


#wrapper {
	position: relative;
	}

#footer {
	position: fixed;
	bottom: 0;
	background-color: rgb(0, 0, 0);
	width: 100%;
	padding: 1em 0 0 0;
	color: #bfbfbf;
	font-size: .9em;
	text-shadow: none;
	z-index: 10000;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(#444), color-stop(0.6, #000));
	opacity: .9;
	-webkit-transition: top 1s;
	-o-transition: top 1s;
	top: 100%;
left: 0}

#footer:hover {
	top: 75%;
	}
#footer a:link, #footer a:visited {color: #bfbfbf;
	text-decoration: none;
	font-weight: bold;
	text-shadow: 1px 1px 1px #000; 
}

#footer h1 {color: #ffffff;
	text-decoration: none;
	font-weight: bold; 
	position: absolute;
	top: -3.5em;
	background-color: #FF8640;
	padding: .3em .8em;
	border-style: solid;
	border-color: #e1563e;
	border-width: 2px;
	font-size: 1.3em; 
	text-align: center;
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em; 
	background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF8640), to(#FF8640), color-stop(.5,#C4480A));
background-image: -moz-linear-gradient(54% 70% 90deg,#FF9233, #FF4621, #FF4621 90%);
	text-shadow: 1px 1px 1px #444;
	margin-left: 2em;
	box-shadow: 2px 2px 2px #bbb;
	-webkit-box-shadow: 2px 2px 1px #bbb;
	-moz-box-shadow: 2px 2px 1px #bbb; 
}

#footer>div {
	float:left;
	width: 23%;
padding: 0 1%}

#footer>p {
	clear:both;
	margin-top:3em;
	text-align: right;
	width:98%}

img {
	width: 48px}


.not-supported {
	opacity: .3}

.support span {
display: block;
width: 8em;
float: left;
font-size: .9em;
text-align: center; }

.support span span {
margin: 0 auto;
display: block;
width: 100%
}