@font-face {
	font-family: 'AurulentSansRegular';
	src: url('/fonts/AurulentSans-Regular-webfont.eot');
	src: local('☺'), url('/fonts/AurulentSans-Regular-webfont.woff') format('woff'), url('/fonts/AurulentSans-Regular-webfont.ttf') format('truetype'), url('/fonts/AurulentSans-Regular-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}

body {
	background-color: #3d3527;
	font-family: Verdana, Arial, sans-serif;
	font-size: 0.9em;
}

#info_notes li {
	margin: 0.5em;
	font-size: 0.9em;
}

#header h3 {
	font-size: 1.1em;
	font-family: Verdana, Arial, sans-serif;
	display: block;
}

#header h3:hover {
	color: #593900;
}

#header h2 {
	margin-right: 60px;
}

#tweet_widget {
	position: absolute;
	top: 10px;
	right: 10px;
}

#all {

	width: 780px;
	margin: 0 auto;
	color: #3d3527;
	background-color: #ede1cc;
	padding: 1em;
	border-bottom: 2px solid black;
	border-right: 2px solid black;
	min-height: 1000px;
	position: relative;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#nav a {
	float: left;
	color: #ede1cc;
	border: 1px solid #ede1cc;
	border-right-width: 0;
	position: fixed;
	display: block;
	margin-left: -51px;
	padding: 3px;
	text-decoration: none;
	width: 30px;
	text-align: center;
	margin-top: 5em;
	font-size: 0.9em;
}

#nav a:hover {
	background-color: #593900;
	color: #ede1cc;
}


#tab-container {
/*	float: right;*/
}

#tab-container > ul {
	margin: 0 1em 0 0;
	padding: 0;
	text-align: right;
	font-weight: bold;
}
#tab-container > ul li {
	display: inline-block;
	background: #DAC8A7;
	border: solid 1px;
	border-bottom: none;
	font-size: 10px;
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
	
}
#tab-container > ul li a { display: block; padding: 5px; text-decoration: none; outline: none; }
#tab-container > ul li a:hover { text-decoration: underline; }
#tab-container > ul li.active { background: #CC6600; }
/*#tab-container > ul li a.active { font-weight: bold; }*/
#panel-container {
	border: 1px solid;
	padding: 0 10px;
	margin-bottom: 10px;
	margin-top: -1px;
}

#tab-container > span {
	float: right;
	line-height: 25px;
	padding-left: 8px;
	cursor: pointer;
	visibility: hidden;
}

a {
	color: #3d3527;
}

a:hover {
	background-color: #eca643;
	color: #3d3527;
}

#content a {
	color: #593900;
	font-size: 0.8em;
/*		font-style: italic;*/
}


table {
	margin: 0;
	width: 100%;
	border-collapse: collapse;
}

caption {
	text-align: left;
	padding: .5em;
}

caption a {
	font-weight: bold;
}

tbody tr:hover td,
tbody tr:hover th {
	background-color: #bea77d;
}



th {
	background-color: #cfb78b;
	font-weight: normal;
}


thead th {
	color: white;
	 box-shadow: inset 0 5px 8px rgba(255,255,255,.2);
	   -o-box-shadow: inset 0 5px 8px rgba(255,255,255,.2);
	   -webkit-box-shadow: inset 0 5px 8px rgba(255,255,255,.2);
	   -moz-box-shadow: inset 0 5px 8px rgba(255,255,255,.2);
/*		background-color: #233d61;*/
}

thead tr {
	margin-bottom: 2px;
}

th.trident { background-color: #233d61; }
th.gecko { background-color: #a36223; }
th.webkit_chr { background-color: #3f77bb; }
th.webkit_saf { background-color: #666; }
th.presto { background-color: #812323; }

th, td {
	padding: 0.1em;
}

thead :nth-child(2) {
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
}

thead :last-child {
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
}

tbody tr :last-child {
	border-right: none;
}

tbody :last-child :last-child {
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

th.first {
	visibility: hidden;
}

h1 {
	font-size: 1.4em;
	display: inline;
}

p.comments, p.feed, p.twitter {
	display: inline;
	margin-left: 2em;
	font-size: 0.9em;
}

p.feed a {
	background: transparent url(feed14.png) no-repeat scroll left center; 
	padding-left: 20px;
}

p.twitter a {
	background: transparent url(/img/twitter.png) no-repeat scroll left center; 
	padding-left: 20px;
}

h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
}


h3, h3 a {
	font-size: 24px;
/*		font-style: italic;*/
	font-family: 'AurulentSansRegular', serif;
	font-weight: normal;
	letter-spacing: 0.05em;
	text-decoration: none;
	display: inline;
	margin-bottom: 0.2em;
}

h3 a:hover {
	background: none;
	text-decoration: underline;
}



p.spec {
	display: inline;
	font-weight: bold;
/*	margin-left: 1em;*/
}

.status {
	font-size: 0.8em;
	margin-right: 1em;
}


#content .rec, #content .ietf { color: #007700; }
#content .pr { color: #387700; }
#content .cr { color: #777700; }
#content .wd { color: #770000; }
#content .unoff { color: #777777; }

p.description,
p.notes {
	font-size: 0.9em;
	font-style: italic;
}

p.notes {
	font-style: normal;
	font-size: 0.85em;
}

thead {

}

tbody th {
	background-image: -moz-linear-gradient(0% 100% 0deg,#DAC8A7, #CFB78B, #CFB78B 50%);
	background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#DAC8A7), to(#CFB78B), color-stop(.5,#CFB78B));
	font-family: 'AurulentSansRegular', serif !important;
	border:1px solid #DAC8A7;
	text-align: left;
	width: 30%;
}

table#no_details {
	font-size: .9em;
	background: #DAC8A7;
}

table#no_details th a {
	font-size: 1em;
}

table#no_details .sum_cell {
	font-size: .8em;
}


tbody td {
	border:1px solid #DAC8A7;
}

table#clone tbody {
	visibility: hidden;
	height: 0;
	overflow: hidden;
}

table#clone {
	position: fixed;
	visibility: hidden;
	top: 0;
	background: #DAC8A7;
}

table#browser_comparison {
	margin-bottom: 1em;
}

table#browser_comparison td {
	padding: .3em;
}

table#browser_comparison th a {
	font-size: 1em;
}

th.feat_cell {
	padding-left: 0.5em;
	margin-bottom: 50px;
	width: 33%;
}

fieldset {
	width: auto;
	float: left;
	font-size: .8em;
	padding: 0.2em;
}


fieldset input {
	margin-right: 0.2em;
	vertical-align: middle;
}

fieldset label,
fieldset p {
	display: block;
	padding: 0.1em;
	margin: 0;
}

fieldset label:hover {
	background: #eca643;
}

#mode_opts {
	overflow: auto;
	margin: 5px 0;
}

#mode_opts button {
	display: block;
	border: 1px solid #3D3527;
	background-color: #DAC8A7;
	float: left;
	margin-right: 1em;
}

#mode_opts .cur_mode {
	background-color: #C60;
}

p.browser_compare_note {
	text-align: center;
	clear: both;
	padding: .5em 0 0;
	font-size: 1.2em;
	font-weight: bold;
}

#options, #content, #header, #legend {
	clear: both;

}

#legend {
	padding: 0.3em;
	margin: 0;
	overflow: auto;
	font-size: 13px;
	text-align: center;
}

#legend h2 {
/*	font-size: 1.1em;*/
	position: absolute;
	left: -9999px;
}

#legend * {
	display: inline-block;
}

#legend dl {
	margin: 0;
}

#legend dt {
	width: 25px;
	height: 1em;
/*	float: left;*/
	margin-right: 3px;
	position: relative;
	top: 2px;
}

#legend dd {
	margin: 0 2em 0 0;
/*	float: left;*/
	line-height: 1em;
}

#legend dd:before {
	content: '= ';
}

.now td, .new th {
/*		border-bottom: 1px solid #555;*/
}

.y {
	background-color: #CF9;
	color: #030;
}

tr:hover .y { background-color: #9F3; }

.a,
.alt_p .p, .alt_j .j {
	background-color: #CD5;
	color: #130;
}

tr:hover .a,
	tr:hover .alt_p .p, tr:hover .alt_j .j {
	background-color: #CC0;
	color: #130;
}

.n, .p, .j {
	background-color: #F99;
	color: #300;
}

tr:hover .n,
	tr:hover .p,
	tr:hover .j { background-color: #F66; }

.u {
	background-color: #CCC;
	color: #333;
}

.n a, #not_ready_note span {
	font-size: .83em;
	vertical-align: super;
	text-decoration: none;
}

#not_ready_note {
	border: 1px solid #3D3527;
	font-size: .8em;
	padding: .5em;
}

/* Accessible colors */
.access .y {
	background-color: #EEE;
	color: #222;
}

.access tr:hover .y { background-color: #FFF; }

.access .a,
.access .alt_p .p,
.access .alt_j .j {
	background-color: #CCC;
	color: #222;
}

.access tr:hover .a,
.access tr:hover .alt_p .p,
.access tr:hover .alt_j .j {
	background-color: #DDD;
	color: #222;
}

.access .n,
.access .p,
.access .j {
	background-color: #777;
	color: #000;
}

.access tr:hover .n,
.access	tr:hover .p,
.access	tr:hover .j { background-color: #888; }

.access .u,
.access	tr:hover .u {
	background-color: #000;
	color: #FFF;
}

.access .sum_cell {
	color: #000;
}


#content dl {
	margin-top: 0.2em;
	margin-bottom: 0.2em;
}

#content div {
	margin: 2em 0;
	padding: 0.5em;
	background: #dac8a7;
}

#content div:first-child {
	margin-top: 1em;
}

#content dd,
#content dt {
	display: inline;
	margin: 0 0.4em;
}

tfoot td {
	padding-top: 0.4em;
	padding-left: 0.4em;
}

tr:hover .u { background-color: #AAA; }


#content a.permalink {
	font-size: small;
	color: #a08d69;
	text-decoration: none;
}

#content a.permalink:hover {
	text-decoration: underline;
	color: #593900;
}

p#showall {
	font-size: 1.8em;
	font-weight:bold;
	margin: 0.5em;
	text-align: center;
}

#top_ad {
	float: left;
	text-align: center;
	margin: 1em 0 1em 25px;
}
#bottom_ad {
	margin: 0 auto;
	text-align: center;
}

iframe {
	margin: 0 auto;
	display: block;
	clear: both;
}

#sitecredit {
	float: right;
	margin: 10px;
	color: #CFB78B;
}

#sitecredit a {
	color: #EDE1CC;
	text-decoration: none;
}

#sitecredit a:hover {
	background: #593900;
}

#survey_note {
	width: 60%;
	text-align: center;
	margin: 0 auto;
	border: 6px double #CC6600;
	padding: .5em;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}

#survey_note strong {
	font-weight: normal;
}


@media all and (max-width: 884px), handheld {
	#all {
		width: 95%;
	}
	
	#nav a {
		margin: 0;
		background: #3D3527;
		top: -1px;
		left: 2px;
		border-width: 1px;
		opacity: .4;
	}
	
	#nav a:hover {
		opacity: 1;
	}
	
	#top_ad, #bottom_ad {
		margin: 0;
		overflow: auto;
		width: 100%;
	}

	#legend {
		padding-top: 1em;
	}

/*
	#legend h2 {
		position: static;
	}
*/

	#legend * {
		display: block;
		text-align: left;
	}
	
	#legend dt {
		float: left;
	}
	
	#legend dd {
		margin-bottom: 5px;
	}
}

@media all and (max-width: 550px), handheld {
	body {
		margin: 0;
	}

	#all {
		width: auto;
		margin: 0;
		border: 0;
		padding: 5px;
	}
	
	#content > div, 
	#content h3,
	#options {
		font-size: .8em;
	}
	
	#content thead th {
		text-indent: -9999px;
		background-repeat: no-repeat;
		background-position: 50% 50%;
		height: 18px;
	}
	
	th.trident { background-image: url(/img/ie.png); }
	th.gecko { background-image: url(/img/firefox.png); }
	th.webkit_chr { background-image: url(/img/chrome.png); }
	th.webkit_saf { background-image: url(/img/safari.png); }
	th.presto { background-image: url(/img/opera.png); }

	tbody th {
		width: 22%;
	}

	tbody tr th {
		text-indent: -12em;
	}

	tr.farpast th:after {
		content: '2 vers. back';
		padding-left: 3.5em;
	}

	tr.past th:after {
		content: 'Prev. version';
		padding-left: 4.2em;
	}

	tr.now th:after {
		content: 'Current';
		padding-left: 8.2em;
	}

	tr.near th:after {
		content: 'Near future';
		padding-left: 3.3em;
	}

	tr.far th:after {
		content: 'Future';
		padding-left: 2.2em;
	}

	#content h3 a {
		font-size: 1.5em;
	}

	#header p {
		display: block;
	}
	
	#header p.comments a {
		padding-left: 20px;
	}
}