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 {
	margin: .7em 0}

h1 {
	font-size: 1.2em; 
}

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

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

.ourButton {
	-webkit-border-radius: 1.5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	margin-left:5%;
	padding: .4em 1em;
	background-color: #959595;
	text-align: center;
	text-shadow: 1px 1px 1px #000;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: .8em;
	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, #stop-buttons {
	text-align: right;
	margin: 1.5em 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: 90%;
	margin: 2% auto;
	height: 50%;
	max-height: 66%;
	-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: 2%;
	-webkit-transition: background-color .4s, -webkit-border-radius .4s
	-o-transition-property: border-radius;
	-o-transition-duration: .4s;
	overflow: hidden;
	text-align: left;
	font-size: 1.1em;
	overflow: hidden; 
}

#demo:focus {
	outline:none 
}

#demo-container {
	padding-bottom: .5em 
}


#demo-wrapper {
	padding: 2em 0}


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

.properties-container h1, #results h1 {
	display: block;
	margin:0 0 0 0;
	font-size: .9em;
	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;}
*/

.properties-container {
	border: solid 1px #999;
	padding: 0;
	border-color: #b3b3b3;
	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;
	overflow: auto;
	}

.properties-container {
	margin:-1px 2%;
	width: 30%; 
}

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

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

.position-chooser, .keyword-chooser {
	-webkit-border-radius: 1em;
	border-radius: 1em;
	/*	appearance: menulist-button;
	-webkit-appearance: menulist-button; */
	-moz-appearance: none;
	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: .8em;
	width: 5em;
	background-color: #3f3f3f;
	vertical-align: middle; 
}

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

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

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

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

#code {
	margin: 1% auto;
	width:95%;
	font-family: Courier, Monaco, monospace;
	-webkit-transition: background 1s;
	user-modify: read-write;
	-webkit-user-modify: read-write;
	-moz-user-modify: read-write;
	font-size: 1em;
	line-height: 1.4em;
	/*white-space: pre;*/
	}

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: .8em;
	width: 3em;
	-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: 6.7em;
}

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

input:focus {
	outline: none 
}

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

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


.keyword-chooser {width: 7em}


#wrapper {
	position: relative; 
}


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% 
}

#browser-choice li {
	list-style-type: none;
	display: block;
	width:15%;
	float: left;
	margin:0 0 1em 0;
padding: .5em 0;
	text-align: center;
	border-top: solid thin #ccc; 
	border-bottom: solid thin #ccc; 
	background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#E3E3E3), to(#E3E3E3), color-stop(.6,#FFFFFF));
	background-image:-moz-linear-gradient(0% 100% 90deg,#F2F2F2, #D1D1D1, #E8E8E8 100%);
	background-color: #E8E8E8}


#browser-choice li:first-child {
		border-left: solid thin #ccc;
		border-right: solid thin #ccc;
	-webkit-border-top-left-radius: .8em;
	-moz-border-radius-topleft: .8em;
	border-top-left-radius: .8em;
	-webkit-border-bottom-left-radius: .8em;
	-moz-border-radius-bottomleft: .8em;
	border-bottom-left-radius: .8em;
}

#browser-choice li:last-child {
		border-right: solid thin #ccc;
	-webkit-border-top-right-radius: .8em;
	-moz-border-radius-topright: .8em;
	border-top-right-radius: .8em;
	-webkit-border-bottom-right-radius: .8em;
	-moz-border-radius-bottomright: .8em;
	border-bottom-right-radius: .8em; 
}

#browser-choice a {
	display:block}

#browser-choice li:hover, #browser-choice .current {
	background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#E3E3E3), to(#E8E8E8), color-stop(.6,#BDBDBD));
	background-image: -moz-linear-gradient(100% 100% 90deg,#DBDBDB, #BDB9BD, #C7C7C7 100%));
	background-color: #BDB9BD}


#browser-choice {
	padding:0;
	width: 100%;
	margin-left: 2%;
	-webkit-border-top-right-radius: .8em;
	-moz-border-radius-topright: .8em;
	border-top-right-radius: .8em;
	/*display: none*/ 
} 

.percentage {
display: inline-block;
	
	width: 1em}

#footer {
	clear: both;
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: rgba(0, 0, 0, .6);
	left: 0;
	height: 2.5em 
}

#footer ul {
	margin: 0 
}

#footer li {
	display: block;
	width: auto;
	float: left;
	text-align: center;
	padding: .5em 2em 1em 2em;
	margin-right: 2em 
}

#footer li a:link, #footer li a:visited, #footer li a:link {
	color: #bbb; 
	font-weight: normal;
	text-shadow: 2px 2px 0px #000;
	}

#twitter {padding-left: 24px;
	background-image: url('images/twitter.png');
	background-repeat: no-repeat;
	background-position: left 25%; 
}

#devWWS {padding-left: 24px;
	background-image: url('images/devWWS.png');
	background-repeat: no-repeat;
	background-position: left 25%; 
}

#webdirections {padding-left: 24px;
	background-image: url('images/wdslogo.png');
	background-repeat: no-repeat;
	background-position: left 25%; 
}

#CSS3Live {padding-left: 24px;
	background-image: url('images/courses.png');
	background-repeat: no-repeat;
	background-position: left 25%; 
}

/*info page text*/

#maintext {
	width: 65%;
	margin:0 auto}