* {
	margin: 0;
	padding: 0;
	border: none;
}

body {
	font-size: 1em;
	font-family: 'Franklin Gothic Book', 'Franklin Gothic Medium', 'Geneva',  'MS Gothic', candara, verdana, sans-serif;
	margin: 0;
	padding: 0;
}

h1 {
	font-family: 'Modern No. 20', 'Bookman Old Style', times, serif;
	font-size: 6em;
	color: rgb(203,203,203);
	margin: 0;
}

h2.beta {
	color: rgb(204,153,153);
	position: absolute;
	left: 550px;
	bottom: 30px;
	font-family: PortagoITC, stencil, "Rockwell Extra Bold", "andale mono", monospace;
	font-size: 2em;
	opacity: .7;
	filter: alpha(opacity = 80);	}

a {
	text-decoration: none;
	color: rgb(51,51,153);
}

a:hover {
	color: rgb(102,102,204);
}


table {
	width: 100%;
	display: block;
}

td, th {
	padding: 2px;
}

th {
	cursor: pointer;
}

p, ul {
	font: normal 1em/1.2 'Garamond', serif;
}




#introduction, #legend, #tbd { display: none; }

#header { position: fixed; top: 0; left: 0; background-color: rgb(255,255,255);width: 100%; z-index: 1000; border: 1px solid rgb(153,153,153);}

.tableColumn {
	padding: 5px;
	border-bottom: 1px solid rgb(204,204,204);
	text-align: left;
}

#tablefontheader .tableColumn {
	border-bottom: none;
}


.column {
	margin-left: 10px;
	float: left;
}

.fontData {
clear: both;width: 100%; position: relative; top: 160px; _top:0;
}

.source {
	color: rgb(51,51,153);
	cursor: pointer;
	border: rgb(51,51,153) 1px solid;
	background-color: rgb(204,204,255);
	font-size: .6em;
	padding: 0 3px;
	margin: 2px;
	display: block;
	opacity: .5;
}

.font-sample {
	font-family: 'Webdings';
}

.family {
	display: block;
}



.font-serif {
	font-family: serif;
}


.font-sans-serif {
	font-family: sans-serif;
}


.font-monospace {
	font-family: monospace;
}


.font-cursive {
	font-family: cursive;
}

.font-fantasy {
	font-family: fantasy;
}

.font-dingbat {
}


.col1{
	white-space: nowrap;
	width: 225px;
	min-width: 220px;
}

.col2 {
	width: 150px;
	min-width: 140px;
	padding: 0 5px;
}

td.col2  {
	font-family: Palatino,"Palatino Linotype",serif;
	color: rgb(153,153,153);
	font-size: .8em;}

.col3 {
	width: 25px;
	padding: 0 5px;
}

.col4 {
	width: 150px;
	min-width: 140px;
	padding: 0 5px;
}

.col5 {
	white-space: nowrap;
	width: auto;
}

.sort	{
	background-color: rgb(235,235,235);
}


.ranking {
	width: 90%;
	height: 20px;
	color: rgb(153,153,153);
	border: 1px solid rgb(153,153,153);
	background-color: rgb(235,235,235);
	text-align: left;
	padding: 0 4px;
	margin: 4px 2px;
	background-repeat: no-repeat;
	background-position: right -2px;
	cursor: pointer;
	font-size: .9em;
	line-height: 20px;
	_font-size: .75em;
	_margin-left: -10px;
	_padding-left: 22px;
	_width: 85%
}


.rank-1 {
	border: 1px solid rgb(0,255,0);
	background-color: rgb(235,255,235);
	color: rgb(153,204,153);
}

.rank-2 {
	border: 1px solid rgb(153,255,0);
	background-color: rgb(235,255,204);
	color: rgb(175,204,153);
}

.rank-3 {
	border: 1px solid rgb(235,235,0);
	background-color: rgb(255,255,204);
	color: rgb(204,204,102);
}


.rank-4 {
	border: 1px solid rgb(255,153,0);
	background-color: rgb(255,235,204);
	color: rgb(204,175,153);
}

.rank-5 {
	border: 1px solid rgb(255,0,0);
	background-color: rgb(255,235,235);
	color: rgb(204,153,153);
}

.os-all {
	background-image: url(../_img/os-all.png);
	
	_background-image: none;
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../_img/os-all.png', sizingMethod='crop'); 
}

.os-mac {
	background-image: url(../_img/os-mac.png);
	
	_background-image: none;
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../_img/os-mac.png', sizingMethod='crop'); 
}

.os-windows {
	background-image: url(../_img/os-windows.png);
	
	_background-image: none;
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../_img/os-windows.png', sizingMethod='crop'); 
}



#controls {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 5px 10px;
	border: 1px solid rgba(0,0,0,.5);
	background-color: rgba(0,0,0,.1);
	font-size: .75em;
}

#tablefontlist {
	position: relative;
	top: 133px;
}


#tablefontheader {
	position: relative;
	left: 25px;
}

.popUp {
	position: fixed;
	_position: absolute;
	height: 70%;
	_height: 300px;
	overflow: auto;
	top: 10%;
	left:20%;
	z-index: 20001;
	
	display: none;
	
	width: 60%;
	max-width: 600px;
	min-width: 300px;
	background: transparent;
	padding: 20px;
	
}

.popUp .content {
	position: relative;
	overflow: auto;
	color: white;	
	width: auto;
	height: 80%;
	background: rgb(0,0,0);
	padding: 10px 50px 50px 50px;
	border: 1px solid rgb(204,204,204);
	opacity: .9;
	filter: alpha(opacity = 90);
}


#cover {
	position: fixed;
	_position: absolute;
	width: 100%;
	height: 120%;
	_height: 1000px;
	z-index: 20000;
	display: none;
	background-color: #000;
	opacity: .5;
	filter:progid:DXImageTransform.Microsoft.BasicImage(opacity=.5);
	top: 0px;
	left: 0px;
}
.slideControl { 	
	z-index: 20001;
	position: absolute;
	top: -7px;
	left: -9px;
	padding-left: 55px;
	width: 157px;
	height: 57px;
	overflow: hidden;
	cursor: pointer;
	font-size: .75em;
	line-height: 160px;
	text-align: left;
	background: transparent url(icon-close-states.png) no-repeat left 0;
	
	
	_top: 4px;
	_right: 8px;
	_line-height: .75em;
	_height: auto;
	_padding: 0;
	_left: auto;
	_background: none;
	_color: red; 
	_font-weight: normal;	
}


.slideControl:hover { 
	background-position: left -58px;
}

.slideControl:active { 
	background-position: left -116px;
}

.control {
	color: #0098ff !important;
	cursor: pointer;
}

.number { color: rgb(205,205,205); margin-right: 10px; font-size: 1em; }