@charset "UTF-8"; /* Ensure UTF-8 Character Set */

/* == Font inclusion and definition == */
@font-face {
    font-family: 'decima-light';
    src: local('☺'), url('../type/decima_light-webfont.woff') format('woff'), url('../type/Decima_Light.otf') format('opentype'), url('../type/decima_light-webfont.svg#DecimaLight') format('svg');
}
@font-face {
    font-family: 'decima';
    src: local('☺'), url('../type/decima-webfont.woff') format('woff'), url('../type/Decima.otf)') format('opentype'), url('../type/decima-webfont.svg#DecimaRegular') format('svg');
}
@font-face {
    font-family: 'MagionRegular';
    src: local('☺'), url('../type/magion_plain_ot-webfont.woff') format('woff'), url('../type/Magion_Plain_OT.otf') format('opentype'), url('../type/magion_plain_ot-webfont.svg#MagionRegular') format('svg');
}
@font-face {
    font-family: 'MagionRegular';
    src: url('../type/magion_plain_ot-webfont.eot');
    src: url('../type/magion_plain_ot-webfont.eot?#iefix') format('embedded-opentype'),
         url('../type/magion_plain_ot-webfont.woff') format('woff'),
         url('../type/magion_plain_ot-webfont.ttf') format('truetype'),
         url('../type/magion_plain_ot-webfont.svg#MagionRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* == Header == */

body>header,
body>footer {
	background: rgb(255, 255, 255);
	background: rgba(255,255,255,1.0);
	box-shadow: 0 1px 5px #ccc;
	position: fixed;
	width: 100%;
	z-index: 998;
}
body>header {
	top: 0;
}
body>header>div,
body>footer>section {
	width: 960px;
	margin: 0 auto;
	padding-bottom: 15px;
}
body>header>div>a {
	background-image: url('../img/layout/sprite.png');
	text-indent: -9999em;
	width: 209px;
	height: 15px;
	top: 15px;
	position: absolute;
}
body>header>div>a:hover {
	background-position: 0 -15px;
}
body>header nav ul {
	padding: 16px 0 0 499px;
	font: 12px decima, sans-serif;
	text-transform: uppercase;
}
body>header nav li {
	display: inline-block;
	margin: 0 25px 0 0;
}
body>header nav a:link,
body>header nav a:visited {
	color: #80807E;
}
#panel_01_hide, #panel_02_hide {
	float: right;
	margin-right: 0;
}
#panel_01_hide a,
#panel_02_hide {
	display: block;
	height: 19px;
	width: 19px;
	margin-top: -3px;
	line-height: 20px;
	text-indent: -30px;
	background: url('../img/layout/sprite.png') -299px -619px;
	color: #80807E;
}
#panel_01_hide span,
#panel_02_hide span {
	display: none;
	width: 0;
}
#panel_01_hide a:hover,
#panel_02_hide:hover {
	background-position: -299px -638px;
	color: #266387;
}
.panel_02_hide_show {
	background-position: -299px -695px !important;
}
.panel_02_hide_show:hover {
	background-position: -299px -714px !important;
}

body>header section>div {
	width: 960px;
	margin: 0 auto;
	padding: 46px 0 50px 0;
}
header .left {
	width: 210px;
	float: left;
	font: 21px/23px 'Helvetica Neue', 'Helvetica Neue Roman', helvetica, arial, sans-serif;
}
header .left h1 {
	font: 32px/32px decima-light, sans-serif;	
	text-transform: uppercase;
}
header .right {
	float: right;
	position: relative;
}
header #explore>.right,
header #experts>.right,
header #help>.right,
header #about>.right { width: 462px; }
header #grading>.right {
	width: 584px;
	margin-top: 2px;
}
header .right h2 {
	font: 17px/17px decima, sans-serif;
	color: #454545;
	text-transform: uppercase;
	margin-bottom: 19px;
}


#explore {
	height: 347px;
}
#explore div.left p {
	margin-top: 16px;
}
#explore .column_1 {
	float: left;
	width: 210px;
}
#explore .column_2 {
	float: right;
	width: 213px;
}
.color_table {
	box-shadow: inset 0 0 5px rgba(0,0,0,0.4);
	border-radius: 2px;
	margin-bottom: 40px;
	overflow: hidden;
}
.color_table td {
	width: 21px;
	height: 15px;
	text-indent: -9999em;
	padding: 0;
	line-height: 0;
}

.color_table td a {
	display: block;
	height: 15px;
	width: 21px;
}

.color_table td:hover {
	cursor: pointer;
}
#color_table_footer td input {
	text-indent: 0;
}
#color_table_footer td.checked {
	background-image: url('../img/layout/sprite_checked.png');
	background-position: center center;
	background-repeat: no-repeat;
}
#color_table_footer td.white.checked {
	background-image: url('../img/layout/sprite_checked_black.png');
}

#nav-font {
	width: 210px;
}
#nav-font li {
	float: left;
	width: 50%;
	font: 12px/12px decima, sans-serif;
	text-transform: uppercase;
	margin-bottom: 10px;
}
#nav-font li a {
	text-decoration: underline;
	color: #80807E;
}
#explore .column_2 a.facebook,
#explore .column_2 a.twitter,
#explore .column_2 a.youtube {
	display: block;
	height: 49px;
	background-color: #266387;
	border-radius: 2px;
	box-shadow: 0 2px 3px #ccc;
	text-indent: -9999em;
	margin-bottom: 10px;
	padding-top: 1px;
}
#explore .column_2 a.facebook:hover,
#explore .column_2 a.twitter:hover,
#explore .column_2 a.youtube:hover {
	background: url('../img/layout/sprite.png') -225px -890px;
}
#explore .column_2 a.facebook span,
#explore .column_2 a.twitter span,
#explore .column_2 a.youtube span {
	display: block;
	background-image: url('../img/layout/sprite.png');
}
#explore .column_2 a.youtube {
	margin-bottom: 39px;
}
#explore .facebook span { width: 111px; height: 23px; background-position: -268px 0; margin: 12px 0 0 51px; }
#explore .twitter span { width: 107px; height: 22px; background-position: -379px 0; margin: 14px 0 0 53px; }
#explore .youtube span { width: 81px; height: 32px; background-position: -486px 0; margin: 9px 0 0 66px; }

#explore .column_2>div {
	background: #cdcfcc;
	border-radius: 2px;
	padding: 5px;
}
#scale {
	width: 87px;
	float: left;
}
#scale h2 {
	float: right;
	margin-right: 4px;
	margin-bottom: 13px;
}
#scale ul {
	clear: both;
	font: 24px/48px MagionRegular, sans-serif;
	color: #80807E;
}
#scale ul li {
	margin-bottom: 10px;
}
#scale span {
	float: right;
}
#grading {
	height: 763px;
}
#scoreboard>p {
	font: 14px/16px decima, sans-serif;
	text-transform: uppercase;
	margin: 0 0 10px 0;
}
#grading_descriptions {
	width: 462px;
	float: right;
}
#grading_descriptions div {
	width: 213px;
	float: left;
	font: 12px 'Helvetica Neue', 'Helvetica Neue Roman', helvetica, arial, sans-serif;
	color: #80807E;
	position: relative;
	margin-bottom: 30px;
	padding: 108px 0 28px 0;
}
#grading_descriptions div h2 {
	font: 17px/17px decima, sans-serif;
	color: #454545;
	margin-bottom: 9px;
}
#grading_descriptions div p {
	margin: 0;
	line-height: 16px;
}
#grading_descriptions div span {
	position: absolute;
	top: 0;
	left: 0;
}
#grading_descriptions .overall {
	float: none;
	width: 212px;
	padding: 0 0 32px 250px;
	min-height: 213px;
}
.right div.bordered {
	border-bottom: 1px solid #e1e3de;
}
#grading_descriptions div.right {
	margin-left: 36px;
}

#experts .right div {
	width: 231px;
	float: left;
	margin-bottom: 30px;
}
#experts .right .expert_portrait {
	border-radius: 2px;
	box-shadow: 0 2px 3px #ccc;
	margin: 0 0 10px 0;
	height: 125px;
	width: 213px;
	background: url('../img/best_ed_sites_experts.png') no-repeat;
	background-position: -2px -1px;
}
.jonathan_s {
	background-position: -2px -1px !important;
}
.chris_k {
	background-position: -219px -1px !important;
}
.katrina_m {
	background-position: -2px -130px !important;
}
.alli_o {
	background-position: -219px -130px !important;
}
#experts .right h2 {
	margin-bottom: 0;	
}
#experts .right h3 {
	font: 12px/12px decima, sans-serif;	
	color: #80807E;
	text-transform: uppercase;
}
#experts .right .right {
	margin-left: 36px;
}
#experts blockquote {
	width: 208px;
	margin: 20px 5px 0 0;
	min-height: 115px;
}
#help .right p {
	margin: 0 0 18px 0;
	line-height: 16px;
}

#contact_submissions,
#user_ratings {
	background: #cdcfcc;
	border-radius: 2px;
	padding: 5px;
	position: relative;
	margin-top: 26px;
}
#contact_submissions input[type=text], #contact_submissions textarea,
#user_ratings input[type=text], #user_ratings textarea
{
	border: none;
	border-radius: 2px;
	box-shadow: 0 1px 2px #999;
	color: #B2B2B0;
	font: 12px/12px decima, sans-serif;	
	text-transform: uppercase;
	padding: 7px;
	width: 209px;
	margin-bottom: 5px;
	float: left;
}
#contact_submissions input.first {
	margin-right: 6px;
}
#contact_submissions textarea,
#user_ratings textarea {
	width: 438px;
	height: 102px;
	padding: 7px;
	margin-bottom: 0;
	float: none;
}
#contact_submissions input[type=submit],
#user_ratings input[type=submit] {
	width: 55px;
	height: 55px;
	text-indent: 60px;
	background: url('../img/layout/sprite.png') -213px 0;
	border: none;
	position: absolute;
	right: -28px;
	top:  52px;
	overflow: hidden;
}
#contact_submissions input[type=submit]:hover{
	background-position: -213px -110px;
}

#about h2 {
	width: 213px;
	height: 213px;
	position: absolute;
	background: url('../img/layout/sprite.png') 0 -30px;
	text-indent: -9999em;
	margin-left: -249px;
}
#about .right p {
	line-height: 16px;
	margin: 0 0 16px 0;
}
#pitch {
	background: #266387;
	border-radius: 2px;
	padding: 17px 20px;
	color: #fff;
	box-shadow: 0 2px 3px #ccc;
	margin-top: 27px;
	cursor: pointer;
}
#pitch h3 {
	text-transform: uppercase;
	margin-bottom: 10px;
	font-family: MagionRegular, sans-serif;
	font-size: 25px;
	line-height: 25px;
}
#patch span {
	border-bottom: 1px solid #fff;
}
#about #pitch p {
	margin: 0;
}


/* == Inforgrpahic == */

#infographic {
	margin: 0;
	position: relative;
	background: url('../img/infographic_color.png') repeat-x;
}
#infographic.no-background {
	background: none;
}
#infographic img {
	margin: 0 auto;
	display: block;
}
#container.decade_later {
	background:#223244;
	padding-top:1px;
}
#container.decade_later #main {
	width:800px;
}
#container.decade_later #links {
	color:white;
}

/* == Main == */

#main {
	width: 960px;
	margin: 115px auto 0 auto;
	position: relative;
	padding-bottom: 90px;
}
#top {
	position: relative;
}
#top>header {
	width: 470px;
	float: left;	
}
#top>header.right {
	position: absolute;
	right: 0;
	top: 0;
}
#top>header>h1 {
	color: #000;
	font: 58px/50px MagionRegular, sans-serif;
	text-transform: uppercase;
}
#top>header>h1 span {
	display: block;
	font-size: 30px;
	line-height: 30px;
}
#top>header>h1.location {
	font-size: 30px;
	line-height: 30px;
}
#top>header>h1.location span {	
	font-size: 58px;
	line-height: 50px;
}

#options {
	width: 253px;
	background: #cdcfcc;
	padding: 5px;
	border-radius: 2px;
	margin-top: 38px;
	clear: left;
	float: left;
}

/* == Monetization == */

#monetization {
	width: 402px;
	height: 250px;
	padding: 23px 30px 30px 30px;
	border-radius: 2px;
	background: #fff;
	box-shadow: 0 3px 4px #999;
	float: left;
	text-transform: uppercase;
	position: absolute;
	left: -9999em;
}
#monetization.out_there {
	position: relative;
	left: 0;
}
#monetization h1 {
	font: 34px/34px MagionRegular, sans-serif;
	color: #F89d00;
}
#monetization h2 {
	font: 17px/17px decima, sans-serif;
	color: #454545;
	margin: 2px 0 13px 0;
}
#monetization>div {
	height: 37px;
	border-radius: 2px;
	margin-bottom: 5px;
	background: #c7c7c7;
	color: #fff;
	position: relative;
}
#monetization>div.active {
	background: #454545;
}
#monetization label {
	font: 24px/24px MagionRegular, sans-serif;
	position: absolute;
	width: 32px;
	text-align: center;
	top: 6px;
}
#monetization .selector {
	margin: 5px 0 0 32px;
	width: 355px;
	text-transform: none;
}
#monetization input[type=submit],
#monetization input[type=submit]:active{
	width: 100%;
	height: 47px;
	background: #f89d00;
	color: #fff;
	font: 22px MagionRegular, sans-serif;
	text-transform: uppercase;
	border: none;
	margin: 5px 0 0 0;
	box-shadow: 0 2px 3px #ccc;
	letter-spacing: 0.5px;
	border-radius: 2px;
}
#monetization input[type=submit]:hover {
	background: url('../img/layout/sprite.png') -222px -950px;
}
.sponsored {
  opacity: 0.5;
  display: block;
  margin-top: 10px;
  text-align: right;
}

/* == Content == */

#content,
#main.profile #summary {
	margin-top: 70px;
}

#summary {
	border-top: 1px solid #cdcfcc;
	border-bottom: 1px solid #cdcfcc;
	height: 39px;
	font: 12px/12px decima, sans-serif !important;	
	text-transform: uppercase;
	position: relative;
	color: #80807E;
	font-size: 12px !important;
}
#summary header {
	position: absolute;
	top: 0;
	left: 0;
}
#summary header h1 {
	font-weight: normal;
	margin-top: 13px;
}
#summary .sort {
	margin-left: 450px;
}
#summary .sort span,
#summary .sort a {
	float: left;
	margin-right: 8px;
	margin-top: 13px;
}
#summary .sort span.faux_dropdown_label {
	width: 106px;
	color: #80807E;
	margin-top: 6px;
	padding: 6px 8px;
}
#summary .sort a {
	margin-left: 7px;
	text-decoration: underline;
	color: #80807E;
}
#summary .sort .faux_dropdown {
	margin: 34px 0 0 46px !important;
	cursor: pointer;
}
#summary .layout {
	position: absolute;
	right: 0;
	top: 9px;
}
#summary .layout li {
	width: 24px;
	height: 20px;
	text-indent: -9999em;
	background: url('../img/layout/sprite.png') -273px -48px;
	float: left;
	margin-left: 11px;	
}
#summary .layout li:hover, #summary .layout li.active { background-position: -273px -128px; cursor: pointer; }
#summary .layout li.grid { background-position: -273px -49px }
#summary .layout li.list { background-position: -288px -820px; }
#summary .layout li.text { background-position: -288px -742px; }
#summary .layout li.grid:hover, #summary .layout li.grid.active { background-position: -273px -88px }
#summary .layout li.list:hover, #summary .layout li.list.active { background-position: -288px -859px; }
#summary .layout li.text:hover, #summary .layout li.text.active { background-position: -288px -782px; }

#summary .layout li.grading { background-position: -274px -126px; width: 32px; }
#summary .layout li.stats { background-position: -287px -388px; }
#summary .layout li.grading:hover, #summary .layout li.grading.active { background-position: -274px -165px; }
#summary .layout li.stats:hover, #summary .layout li.stats.active { background-position: -287px -427px; }

#results {
	position: relative;
}

#results.grid .address,
#results.grid .phone,
#results.grid .url,
#results.grid ol li,
#results.list .location {
	position: absolute;
	left: -9999em;
}
#schools li.active {
	position: relative;
	z-index: 996;
}
#results.grid {
	margin-top: 29px;
}
#results.grid #schools>li {
	float: left;
	width: 213px;
	margin-right: 36px;
	padding-bottom: 25px;
	text-transform: uppercase;
	position: relative;
}
#results.grid #schools>li.start {
	clear: both;
}
#results.grid #schools>li.end {
	margin-right: 0;
}
#results.grid .more,
#results.list .more {
	text-indent: 33px;
	position: absolute;
	top: 46px;
	right: -17px;
	height: 33px;
	width: 33px;
	background-image: url('../img/layout/sprite.png');
	background-position: -281px -243px;
	overflow: hidden;
}
#results.list .more {
	top: 76px;
}
#results.list .more:hover,
#results.grid .more:hover {
	background-position: -281px -276px;
}

#results.text .content {
	font-size: 12px;
	line-height: 16px;
	padding-top: 10px;
}
#results.text .content strong, 
#results.text .content em {
	font-family: decima, sans-serif;
	color: #454545;
	text-transform: uppercase;
	font-style: normal;
}
#results.text .content em strong {
	display: block;
	color: #80807E;
	text-transform: uppercase;
	margin: 32px 0 29px 0;
	font: normal 32px/32px decima-light, helvetica, arial, verdana, sans-serif;
	border-top: 1px solid #CDCFCC;
	padding-top: 28px;
}

#results.text .content > strong {
	position: absolute;
	left: -9999em;
}

#results .text p,
#results .text ol,
#results .text ul {
	margin: 0 0 16px 0;
}
#results .text ol,
#results .text ul {
	list-style: circle outside;
	margin-left: 30px;
}

#results.text .content br {
	display: none;
}

#results .text table {
}
#results .text table td, #results .text table th {
	padding: 0 4px 0 4px;
	border: 1px solid #CDCFCC;
}

#floating_topbutton {
	position: fixed;
	top: 232px;
	right: 28px;
	height: 55px;
	width: 55px;
	background-image: url('../img/layout/sprite.png');
	background-position: -213px -55px;
	display: none;
}
#floating_topbutton:hover {
	background-position: -213px -165px;
}

#schools>li img {
	border-radius: 2px;
	box-shadow: 0 2px 3px #ccc;
	margin-bottom: 6px;
}
#schools>li h2,
#expert_grades div h2 {
	font: 17px/17px decima, sans-serif;
	color: #454545;
}
#schools ul {
	margin: 2px 0 0 0;
	font: 14px/16px decima, sans-serif;
}
#results.list #schools ul {
	font: 12px/14px decima, sans-serif;
}
#expert_grades div h3 {
	margin: 2px 0 0 0;
	font: 14px/16px decima, sans-serif;
	color: #454545;
}
#expert_grades div p {
	font: 12px/12px decima, sans-serif;
	color: #80807E;
	margin: 0 0 20px 0;
}
#schools ul a {
	color: #80807E;	
}

#results.list #schools>li {
	border-bottom: 1px solid #cdcfcc;
	padding: 30px 0;
	position: relative;
	min-height: 125px;
	text-transform: uppercase;
}
#results.list #schools>li img {
	position: absolute;
	right: 0;
}
#results.list #schools>li h2 {
	width: 214px;
	float: left;
	font: 32px/32px decima-light, sans-serif;
}
#results.list #schools>li ul {
	float: left;
	margin-left: 30px;
	width: 210px;
	color: #80807E;
}
#results.list #schools>li ul li {
	margin-bottom: 20px;
}
#results.list #schools>li ul a {
	text-decoration: underline;
}
span.url_arrow {
	display: inline-block;
	height: 19px;
	width: 19px;
	margin-left: 8px;
	background: url('../img/layout/sprite.png') -268px -214px no-repeat;
	vertical-align: -5px;
}
#results.list #schools>li ul li.url a:hover span.url_arrow {
	background-position: -287px -214px;
}
#results.list ol {
	width: 223px;
	height: 125px;
	position: absolute;
	right: 249px;
	background: url('../img/layout/sprite.png') 0 -889px no-repeat;
}
#results.list ol li {
	text-indent: -9999em;
	position: absolute;
}
#results.list ol li.design { left: 124px; }
#results.list ol li.content { left: 179px; }
#results.list ol li.usability { left: 124px; top: 67px; }
#results.list ol li.user { left: 179px; top: 67px; }

#content #schools ol span.score {
	text-indent: 0;	
}

#results.grid section.text,
#results.list section.text {
	position: absolute;
	left: -9999em;
}
#results.text section.text {
	position: relative;
	left: 0;
}
#results.text #schools {
	display: none;
}

#results .text {
	margin-top: 29px;
	font: 12px 'Helvetica Neue', 'Helvetica Neue Roman', helvetica, arial, sans-serif;
	color: #80807E;
}
#results .text .intro {
	width: 230px;
	float: left;
	clear: left;
	font-size: 21px;
}
#results .text header {
	font: 32px/32px decima-light, sans-serif;	
	color: #454545;
	text-transform: uppercase;
}
#results .text .content {
	width: 460px;
	float: right;
	margin-top: -14px;
}

#main.profile #top .address,
#main.profile #top .phone {
	text-transform: uppercase;
	font: 12px/12px decima, sans-serif;	
	color: #80807E;
	margin-top: 30px;
	display: block;
}
#main.profile #top img {
	float: right;
	width: 462px;
	height: 297px;
	border-radius: 2px;
	box-shadow: 0 2px 3px #aaa;
}

#expert_grades {
	margin-top: 29px;
}
#scoreboard, #scoreboard ol, #expert_grades, #user_grades {
	width: 463px;
	float: left;
	margin-top: 30px;
	position: relative;
}
#scoreboard ol {
	width: 463px;
	position: relative;
}
#scoreboard li {
	margin-left: 233px;
	position: relative;
	margin-bottom: 39px;
}
#scoreboard .overall {
	width: 213px;
	margin-left: 0;
	position: absolute;
	top: 0;
	left: 0;
}
#scoreboard span {
	position: absolute;
	font: 34px/34px MagionRegular, sans-serif;
	color: #cdcfcc;
	top: 27px;
	left: 95px;
}
#scoreboard .overall span {
	text-align: center;
	display: block;
	top: 215px;
	left: 0;
	width: 100%;
	font: 88px/96px MagionRegular, sans-serif;
	color: #266387;
}
#scoreboard .med_yellow span,
#scoreboard .med_yellow:hover span {
	color: #f89d00;
}
#scoreboard li:hover span {
	color: #266387;
}
#scoreboard li strong {
	position: absolute;
	font: 12px/12px decima, sans-serif;
	color: #454545;
	display: block;
	width: 100%;
	text-align: center;
	top: 90px;
	text-transform: uppercase;
}
#scoreboard li.overall strong {
	top: 312px;
}

#expert_grades,
#user_grades {
	float: right;
	text-transform: uppercase;
}
#expert_grades h1,
#user_grades h1 {
	font: normal 32px/32px decima-light, helvetica, arial, verdana, sans-serif;
	color:#454545;
	padding-bottom: 30px;
	border-bottom: 1px solid #cdcfcc;
}
#expert_grades div {
	padding: 30px 0;
	position: relative;
	min-height: 124px;
	border-bottom: 1px solid #cdcfcc;
}
#expert_grades div.visuallyhidden {
	height: 1px !important;
}
#expert_grades .expert_portrait {
	position: absolute;
	top: 30px;
	right: 0;
	height: 125px;
	width: 213px;
	min-height: 0;
	padding: 0;
	margin: 0;
	background: url('../img/best_ed_sites_experts.png') no-repeat;
	background-position: -2px -1px;
	border-radius: 2px;
	border: none;
	box-shadow: 0 2px 3px #aaa;
	overflow: hidden;
}

#expert_grades div.design_grade,
#expert_grades div.content_grade,
#expert_grades div.usability_grade {
	padding: 0;
	min-height: 0;
	border: none;
	height: 51px;
	width: 51px;
}
#expert_grades div.rating {
	padding: 0;
	min-height: 0;
	border: none;
	height: 51px;
	width: 51px;
}


#stats header {
	width: 440px;
	float: left;
	text-transform: uppercase;
	padding: 30px 0;
}
#stats .data {
	float: right;
	clear: right;
	width: 463px;
	padding: 30px 0;
	border-bottom: 1px solid #cdcfcc;
	margin-bottom: -1px;
}
#stats .data .column,
#user_grades .column {
	width: 222px;
	float: left;
	margin-right: 25px;
}
#stats .data .column.right,
#user_grades .column.right {
	width: 213px;
	float: right;
	margin-right: 0;
}

#stats>section {
	clear: both;
	border-bottom: 1px solid #cdcfcc;
}
#main #stats .data h2,
#main #grading #user_grades h2
{
	color: #80807E;
	text-transform: uppercase;
	margin-bottom: 29px;
}
#stats h3,
#user_grades span.instruction {
	font: 12px/12px decima, sans-serif;
	color: #454545;
	text-transform: uppercase;
	margin-bottom: 6px;
}

#stats span.text_giant {
	font: 184px/155px MagionRegular, sans-serif;
	color: #000;
	letter-spacing: -15px;
}
#stats span.text_large {
	font: 96px/76px MagionRegular, sans-serif;
	color: #000;
	margin-bottom: 40px;
	display: block;
}
#stats span.text_med {
	font: 58px/48px MagionRegular, sans-serif;
	color: #000;
	display: block;
	margin-bottom: 30px;	
}
#stats .text_small {
	margin-bottom: 20px;
	display: block;
}
#stats #piechart {
	margin: 0;
	height: 210px;
	width: 210px;
}
#stats .visuals ul,
#stats .curriculum ul {
	font: 12px/16px decima, sans-serif;
	text-transform: uppercase;
	color: #454545;
}
#stats .visuals ul span {
	color: #80807E;
}
#stats .curriculum ul a {
	color: #80807E;
	text-decoration: underline;
}
#stats .curriculum ul a:hover {
	color: #454545;
}

#user_grades {
	margin-top: 0;
}
#user_grades ul {
	margin-bottom: 14px;
}
#user_grades ul li {
	padding: 28px 0 28px 0;
	border-bottom: 1px solid #cdcfcc;
}
#user_grades ul li h3 {
	font: 14px/16px decima, sans-serif;
	text-transform: uppercase;
	color: #454545;
}
#user_grades ul li .comment {
	text-transform: none;
	text-indent: -7px;
}

#user_grades ul li span {
	display: block;
	margin-bottom: 15px;
	font: 12px/14px decima-light, helvetica, arial, verdana, sans-serif;	
}
#user_grades ul li .rating,
#expert_grades div.rating {
	width: 51px;
	height: 51px;
	font: 24px/48px MagionRegular, sans-serif;
	color: #CDCFCC;
	text-indent: 60px;
}
#expert_grades div.rating {
	color: #80807E;
}
#user_grades ul#pager {
	margin-bottom: 100px;
	border: none;
}
#user_grades ul#pager li {
	float: left;
	margin: 0 2px 0 2px;
	border: none;
	line-height: 19px;
	height: 19px;
}
#user_grades ul#pager li a {
	text-decoration: underline;
}
#user_grades ul#pager li.back {
	margin-left: 0;
}
#user_grades ul#pager li.back a,
#user_grades ul#pager li.next a {
	display: block;
	height: 19px;
	width: 19px;
	background: url('../img/layout/sprite.png') -299px -657px;
	text-indent: -9999em;
}
#user_grades ul#pager li.back a:hover {
	background-position: -299px -676px;
}
#user_grades ul#pager li.next a {
	background: url('../img/layout/sprite.png') -280px -695px;
}
#user_grades ul#pager li.next a:hover {
	background-position: -280px -714px;
}

#user_grades span.instruction {
	color: #80807E;
	margin-bottom: 13px;
	display: block;
}
#user_ratings {
	margin-top: 13px;
	width: 203px;
}
#user_ratings input[type=text], #user_ratings textarea {
	width: 100%;
	text-transform: none;
}

/* == Scoring == */

.giant, .large, .med_blue, .med_yellow, .sm_grey, .sm_blue {background: url('../img/layout/sprite_scoring.png'); display: block; }
.giant		{ width: 213px; height: 213px; }
.large 		{ width: 111px; height: 111px; }
.med_blue,
.med_yellow	{ width: 80px; height: 80px; }
.sm_grey	{ width: 51px; height: 51px; }
.sm_blue 	{ width: 44px; height: 44px; }
.large:hover, .med_blue:hover, .med_grey:hover, .sm_grey:hover, .sm_blue:hover { cursor: pointer; }

.giant.score_0 { background-position: 0 0; }
.giant.score_1 { background-position: -213px 0; }
.giant.score_2 { background-position: -426px 0; }
.giant.score_3 { background-position: -639px 0; }
.giant.score_4 { background-position: -852px 0; }
.giant.score_5 { background-position: -1065px 0; }
.giant.score_6 { background-position: -1278px 0; }
.giant.score_7 { background-position: -1491px 0; }
.giant.score_8 { background-position: -1704px 0; }
.giant.score_9 { background-position: -1917px 0; }
.giant.score_10 { background-position: -2130px 0; }

.large.score_0 { background-position: 0 -214px; }
.large.score_1 { background-position: -111px -214px; }		.large.score_1:hover { background-position: -222px -214px; }
.large.score_2 { background-position: -333px -214px; }		.large.score_2:hover { background-position: -444px -214px; }
.large.score_3 { background-position: -555px -214px; }		.large.score_3:hover { background-position: -666px -214px; }
.large.score_4 { background-position: -777px -214px; }		.large.score_4:hover { background-position: -888px -214px; }
.large.score_5 { background-position: -999px -214px; }		.large.score_5:hover { background-position: -1110px -214px; }
.large.score_6 { background-position: -1221px -214px; }		.large.score_6:hover { background-position: -1332px -214px; }
.large.score_7 { background-position: -1443px -214px; }		.large.score_7:hover { background-position: -1554px -214px; }
.large.score_8 { background-position: -1665px -214px; }		.large.score_8:hover { background-position: -1776px -214px; }
.large.score_9 { background-position: -1887px -214px; }		.large.score_9:hover { background-position: -1998px -214px; }
.large.score_10 { background-position: -2109px -214px; }	.large.score_10:hover { background-position: -2220px -214px; }

.med_blue.score_0, .med_yellow.score_0 { background-position: 0 -379px; }
.med_blue.score_1 { background-position: -80px -379px; }	.med_blue.score_1:hover  { background-position: -160px -379px; }
.med_blue.score_2 { background-position: -320px -379px; }	.med_blue.score_2:hover  { background-position: -400px -379px; }
.med_blue.score_3 { background-position: -560px -379px; }	.med_blue.score_3:hover  { background-position: -640px -379px; }
.med_blue.score_4 { background-position: -800px -379px; }	.med_blue.score_4:hover  { background-position: -880px -379px; }
.med_blue.score_5 { background-position: -1040px -379px; }	.med_blue.score_5:hover  { background-position: -1120px -379px; }
.med_blue.score_6 { background-position: -1280px -379px; }	.med_blue.score_6:hover  { background-position: -1360px -379px; }
.med_blue.score_7 { background-position: -1520px -379px; }	.med_blue.score_7:hover  { background-position: -1600px -379px; }
.med_blue.score_8 { background-position: -1760px -379px; }	.med_blue.score_8:hover  { background-position: -1840px -379px; }
.med_blue.score_9 { background-position: -2000px -379px; }	.med_blue.score_9:hover  { background-position: -2080px -379px; }
.med_blue.score_10 { background-position: -2240px -379px; }	.med_blue.score_10:hover  { background-position: -2320px -379px; }

.med_yellow.score_1 { background-position: -240px -379px; }
.med_yellow.score_2 { background-position: -480px -379px; }
.med_yellow.score_3 { background-position: -720px -379px; }
.med_yellow.score_4 { background-position: -960px -379px; }
.med_yellow.score_5 { background-position: -1200px -379px; }
.med_yellow.score_6 { background-position: -1440px -379px; }
.med_yellow.score_7 { background-position: -1680px -379px; }
.med_yellow.score_8 { background-position: -1920px -379px; }
.med_yellow.score_9 { background-position: -2160px -379px; }
.med_yellow.score_10 { background-position: -2400px -379px; }

.sm_blue.score_0 { background-position: -563px -329px; }
.sm_blue.score_1 { background-position: -607px -329px; }	.sm_blue.score_1:hover  { background-position: -651px -329px; }
.sm_blue.score_2 { background-position: -695px -329px; }	.sm_blue.score_2:hover  { background-position: -739px -329px; }
.sm_blue.score_3 { background-position: -783px -329px; }	.sm_blue.score_3:hover  { background-position: -827px -329px; }
.sm_blue.score_4 { background-position: -871px -329px; }	.sm_blue.score_4:hover  { background-position: -915px -329px; }
.sm_blue.score_5 { background-position: -959px -329px; }	.sm_blue.score_5:hover  { background-position: -1003px -329px; }
.sm_blue.score_6 { background-position: -1047px -329px; }	.sm_blue.score_6:hover  { background-position: -1091px -329px; }
.sm_blue.score_7 { background-position: -1135px -329px; }	.sm_blue.score_7:hover  { background-position: -1179px -329px; }
.sm_blue.score_8 { background-position: -1223px -329px; }	.sm_blue.score_8:hover  { background-position: -1267px -329px; }
.sm_blue.score_9 { background-position: -1311px -329px; }	.sm_blue.score_9:hover  { background-position: -1355px -329px; }
.sm_blue.score_10 { background-position: -1399px -329px; }	.sm_blue.score_10:hover  { background-position: -1443px -329px; }

.sm_grey.score_0 { background-position: 0 -327px; }
.sm_grey.score_1 { background-position: -51px -327px; }
.sm_grey.score_2 { background-position: -102px -327px; }
.sm_grey.score_3 { background-position: -153px -327px; }
.sm_grey.score_4 { background-position: -204px -327px; }
.sm_grey.score_5 { background-position: -255px -327px; }
.sm_grey.score_6 { background-position: -306px -327px; }
.sm_grey.score_7 { background-position: -357px -327px; }
.sm_grey.score_8 { background-position: -408px -327px; }
.sm_grey.score_9 { background-position: -459px -327px; }
.sm_grey.score_10 { background-position: -510px -327px; }

span.score {
	position: absolute;
	background: #fff;
	font: 34px/30px MagionRegular, sans-serif;
	color: #266387;
	border-radius: 2px;
	box-shadow: 0 2px 3px #999;
	padding: 5px;
}
.large span { right: 55px; top: 76px; }
.sm_blue span,
.sm_grey span { right: 22px; top: 24px; }

div#results.grid span.score {
	top: 80px;
	left: -20px;
}
div#results.grid span.score span {
	display: block;
	font: 12px decima, sans-serif;
	line-height: 14px !important;

	color: #80807E;
	text-transform: uppercase;
}

/* == Faux Dropdowns == */

#options {
	padding-bottom: 0;
}
#explore #explore_dropdowns {
	padding-bottom: 1px;
}
.faux_dropdown_label {
	display: block;
	background: #fff url('../img/layout/sprite_faux_dropdown.png') right center no-repeat;
	border-radius: 2px;
	box-shadow: 1px 2px 3px #aaa;
	font: 12px decima, sans-serif;
	color: #b2b2b0;
	padding: 7px 23px 7px 8px;
	text-transform: uppercase;
	margin-bottom: 5px;
}
.faux_dropdown_label:hover {
	cursor: pointer;
}
.faux_dropdown_label.first {
}
.faux_dropdown {
	font: 12px decima, sans-serif;
	color: #b2b2b0;
	position: absolute;
	background: #fff;
	height: 200px;
	overflow: auto;
	text-transform: uppercase;
	left: -9999em;
	z-index: 9999;
	box-shadow: 0 2px 3px #aaa;
}
.faux_dropdown.active {
	left: auto;
}
.faux_dropdown li:hover {
	color: #ffffff;
	background: #266387;
}
#summary .sort .faux_dropdown li {
	padding: 7px 8px;
}
.faux_dropdown li a {
	color: inherit;
	display: block;
	padding: 7px 8px;
}
.faux_dropdown li a:hover {
	color: #ffffff;
}
.faux_dropdown_mask {
	width: 200%;
	height: 200%;
	top: -50%;
	left: -50%;
	position: fixed;
	z-index: 9998;
}


/* == Typography == */

h1,h2,h3,h4,h5,h6 {
	margin: 0;
}

/* == Misc == */

.overlay, #whole_page_overlay {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	z-index: 995;
	background: #e1e3de;
	display: none;
}
#loading, #whole_page_loading {
	position:fixed;
	top: 150px;
	left: 48%;
	background:#fff;
	width:40px;
	height:12px;
	border-radius:1px;
	-moz-box-shadow:2px 2px 8px #767676;
	-webkit-box-shadow:2px 2px 8px #767676;
	box-shadow:2px 2px 8px #767676;
	padding:5px 7px 4px 7px;
	font:normal 12px/12px decima, helvetica, arial, verdana, sans-serif;
	text-transform:uppercase;
	color:#80807e;
	z-index: 996;
}
#whole_page_loading {
	display: none;
}








/* == OLD CSS == */

body>footer {
	bottom: 0;
	font:normal 12px/14px decima, helvetica, arial, verdana, sans-serif;
	text-transform:uppercase;
	color:#80807e
}
body>footer section section.header {
	width: 960px;
	padding-top: 18px;
}
/*#panel_02_hide {
	padding-top: 5px;
	margin-top: -5px;
}*/
#filters {
	margin-top: 31px;
	position: relative;
}
#filters .column {
	float: left;
	width: 213px;
	margin-right: 36px;
}
#filters .column.first {
	width: 210px;
	margin-right: 39px;
}
#filters .column.last {
	margin-right: 0;
}
#filters input[type=checkbox] {
	margin: 0 4px 8px 0;
}
.fontlist li {
	width: 50%;
	float: left;
	margin-bottom: 10px;
	letter-spacing: -0.5px;
}
#filters input[type=text] {
	font:normal 12px/12px decima, helvetica, arial, verdana, sans-serif;
	border: 1px solid #DCDDDB;
	background: #f0f1ef;
	color: #b2b2b0;
	padding: 6px;
	width: 77px;
	text-transform: uppercase;
    border-radius: 2px;
}
#filters li.inactive input[type=text] {
	border-color: #F2EFEF;
	background: #FAFAFA;
	color: #E7E7E7;
}
#filters li {
	position: relative;
}
#filters li.sliderfilter {
	margin-bottom: 44px;
}
#filters li.textfilter {
	margin-bottom: 25px;
}
#filters li span {
	width: 23px;
	text-align: center;
	display: inline-block;
}



.slider {
	width: 100%;
	background: #f0f1ef;
    position: relative;
    text-align: left;
    height: 7px;
    border-radius: 4px;
    box-shadow: inset 2px -1px 2px #d5d6d4;
    /*margin-bottom: 44px;*/
}
.ui-slider-range {
	background: #e99400;
	border-bottom: 1px solid #cf8400;
    position: absolute;
    z-index: 1;
    height: 6px;
    top: 0;
}
.slider a {
    cursor: default;
    height: 15px;
    position: absolute;
    width: 15px;
    z-index: 2;
    margin-left: -0.6em;
    top: -0.3em;
    background: #454545;
    box-shadow: 0 2px 3px #bbb;
    border-radius: 8px;
    outline: none;
}

.inactive .slider {
	background: #f9faf9;
    box-shadow: inset 2px -1px 2px #f2f3f2;	
}
.inactive .ui-slider-range {
	background: #e0e1e0;
	border-bottom: 1px solid #dbdddc;	
}
.inactive .slider a {
	color: #c3c4c3;
}

.slider a:hover {
	cursor: pointer;
}
#filters .slider span {
	position: absolute;
	text-align: left;
	top: 15px;
	color: #b2b2b0;
}
#filters .slider a span {
	top: 18px;
	left: 5px;
	color: #454545;
}
#filters .inactive .slider a {
	background: #c7c3c3;
	box-shadow: none;
}
#filters .inactive .slider span {
	color: #c7c3c3;
}
#filters .slider span.right {
	right: 0;
	text-align: right;
}

#filters li.inactive .slider a,
#filters li.inactive input[type=text] {
	cursor: default;
}
#filters li .filter_overlay {
	height: 44px; 
	width: 215px; 
	position: absolute; 
	top: 15px; 
	left: 0;
	z-index: 800;
}

#filter_submit {
	width: 95px;
	text-align: center;
	background: #266387;
	box-shadow: 0 2px 3px #ccc;
	color: #fff;
	text-transform: uppercase;
	position: absolute;
	bottom: 26px;
	right: 0;
	font-size: 14px;
	padding: 6px 0;
	display: none;
	cursor: pointer;
	border-radius: 2px;
}
#filter_submit:hover {
	background: url('../img/layout/sprite.png') -225px -890px;
}

/* =============================================================================
   bottom panel (aspect of footer)
   ========================================================================== */
#filters { display: none; }

footer h2,
#stats header h1,
#stats .data h2,
#main #grading #user_grades h2
{
	margin: 0 0 16px 0;
	font: normal 32px/32px decima-light, helvetica, arial, verdana, sans-serif;
	color:#454545;
}

/* =============================================================================
   resources page
   ========================================================================== */
#links h1 {
	width: 500px;
	color: black;
	font: 96px/76px MagionRegular, sans-serif;
	text-transform: uppercase;
	margin-top: 0;
	margin-left: -5px;
	overflow: visible;
}
#links h4 {
	font: 30px/28px MagionRegular, sans-serif;
	text-transform: uppercase;
}
#links h4 a {
	display: inline-block;
	font: 30px/28px MagionRegular, sans-serif;
	margin-left: 0;
	color: black;
	z-index: 100;
	height: 28px;
}
#links h4 a:hover {
	color: #80807E;
}
#links .parentblurb {
	font: 18px helvetica, arial, verdana, sans-serif;
	line-height:23px;
	margin:40px 0px;
}
#links > ul {
	font: 30px/29px decima-light, helvetica, arial, verdana, sans-serif;
	text-transform: uppercase;
	margin-top: 21px;
	width: 992px;
}
#links > ul li {
	float: left;
	width: 463px;
	color: #454545;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	margin-bottom: -1px;
	padding: 16px 0 20px 0;
	margin-right: 33px;
}
#links > ul li a {
	display: block;
	height: 19px;
	width: 19px;
	background-image: url('../img/layout/sprite.png');
	background-position: -268px -195px;
	background-repeat: no-repeat;
	text-indent: -444px;
	float: right;
	line-height: 22px;
	margin-top: 6px;
}
#links > ul li a:hover {
	color: #80807E;
	background-position: -287px -195px;
}
#links > ul li .blurb {
	float: right;
	width: 220px;
	text-transform: none;
	margin-top: 45px;
	margin-right: -23px;
	font: normal 12px/14px "Helvetica Neue Roman", Helvetica, Arial, Verdana, sans-serif;
}
#links > ul li .blurb p {
	line-height:18px;
	margin-top:0px;
}
#links > ul li .screenshot {
	float:left;
	margin-top:50px;
	margin-bottom:10px;
}
#links #back {
	margin-top: 110px;
	float: left;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 30px 0 30px 0;
	font: 12px/12px decima-light, helvetica, arial, verdana, sans-serif;	
	text-transform: uppercase;
}
#links #back h2 {
	color: #454545;
	margin-bottom: 10px;
	font-size: 1em;
}
#back > div {
	background: none repeat scroll 0 0 #CDCFCC;
    border-radius: 2px 2px 2px 2px;
    padding: 5px 5px 0 5px;
    float: left;
}
#back .faux_dropdown_label {
	width: 187px;
}
#back .or {
	width: 36px;
	float: left;
	text-align: center;
	display: block;
	font-weight: bold;
	line-height: 38px;
}
#links ul.links_small {
	font: 12px/16px decima-light, helvetica, arial, verdana, sans-serif;
	text-transform: uppercase;
	margin-top: 66px;
	width: 500px;
}
#
#links ul.links_small li {
	float: left;
	width: 240px;
	color: #80807E;
	border: none;
	margin-bottom: 0;
	padding: 0;
	margin-right: 10px;
}
#links ul.links_small li a {
	display: inline-block;
	height: auto;
	width: auto;
	background: none;
	color: #80807E;
	text-indent: 0;
	float: none;
	line-height: auto;
	margin-top: 0;
	text-decoration: underline;
}
#links ul.links_small li a:hover {
	color: #454545;
}
#surplustext {
	width: 402px;
	display: block;
	float: left;
	margin-left: 28px;
	line-height: 16px;
	padding-top: 3px;
}



/*

Uniform Theme: Uniform Default
Version: 1.6
By: Josh Pyles
License: MIT License
---
For use with the Uniform plugin:
http://pixelmatrixdesign.com/uniform/
---
Generated by Uniform Theme Generator:
http://pixelmatrixdesign.com/uniform/themer.html

*/

/* Global Declaration */

div.selector, 
div.selector span {
  background: #fff;
  border-radius: 2px;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}

.selector, 
.radio, 
.checker, 
.uploader,
.button, 
.selector *, 
.radio *, 
.checker *, 
.uploader *,
.button *{
  margin: 0;
  padding: 0;
}

/* INPUT & TEXTAREA */

input.text,
input.email, 
input.password,
textarea.uniform {
  font-size: 12px;
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-weight: normal;
  padding: 3px;
  color: #777;
  background: url('../img/layout/bg_form_input_focus.png') repeat-x 0 0;
  background: url('../images/bg-input.png') repeat-x 0 0;
  border-top: solid 1px #aaa;
  border-left: solid 1px #aaa;
  border-bottom: solid 1px #ccc;
  border-right: solid 1px #ccc;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  outline: 0;
}

input.text:focus,
input.email:focus,
input.password:focus,
textarea.uniform:focus {
  -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.3);
  -moz-box-shadow: 0 0 4px rgba(0,0,0,0.3);
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
  border-color: #999;
  background: url('../img/layout/bg_form_input_focus.png') repeat-x 0 0;
}

/* SPRITES */

/* Select */

div.selector {
  background-position: -483px -130px;
  line-height: 26px;
  height: 26px;
}

div.selector span {
  background-position: right 0;
  height: 26px;
  line-height: 26px;
}

div.selector select {
  /* change these to adjust positioning of select element */
  top: 0;
  left: 0;
}

div.selector:active, 
div.selector.active {
  background-position: -483px -156px;
}

div.selector:active span, 
div.selector.active span {
  background-position: right -26px;
}

div.selector.focus, div.selector.hover, div.selector:hover {
  background-position: -483px -182px;
}

div.selector.focus span, div.selector.hover span, div.selector:hover span {
  background-position: right -52px;
}

div.selector.focus:active,
div.selector.focus.active,
div.selector:hover:active,
div.selector.active:hover {
  background-position: -483px -208px;
}

div.selector.focus:active span,
div.selector:hover:active span,
div.selector.active:hover span,
div.selector.focus.active span {
  background-position: right -78px;
}

div.selector.disabled {
  background-position: -483px -234px;
}

div.selector.disabled span {
  background-position: right -104px;
}

/* Checkbox */

div.checker {
  width: 19px;
  height: 19px;
}

div.checker input {
  width: 19px;
  height: 19px;
}

div.checker span {
  background-position: 0 -260px;
  height: 19px;
  width: 19px;
}

div.checker:active span, 
div.checker.active span {
  background-position: -19px -260px;
}

div.checker.focus span,
div.checker:hover span {
  background-position: -38px -260px;
}

div.checker.focus:active span,
div.checker:active:hover span,
div.checker.active:hover span,
div.checker.focus.active span {
  background-position: -57px -260px;
}

div.checker span.checked {
  background-position: -76px -260px;
}

div.checker:active span.checked, 
div.checker.active span.checked {
  background-position: -95px -260px;
}

div.checker.focus span.checked,
div.checker:hover span.checked {
  background-position: -114px -260px;
}

div.checker.focus:active span.checked,
div.checker:hover:active span.checked,
div.checker.active:hover span.checked,
div.checker.active.focus span.checked {
  background-position: -133px -260px;
}

div.checker.disabled span,
div.checker.disabled:active span,
div.checker.disabled.active span {
  background-position: -152px -260px;
}

div.checker.disabled span.checked,
div.checker.disabled:active span.checked,
div.checker.disabled.active span.checked {
  background-position: -171px -260px;
}

/* Radio */

div.radio {
  width: 18px;
  height: 18px;
}

div.radio input {
  width: 18px;
  height: 18px;
}

div.radio span {
  height: 18px;
  width: 18px;
  background-position: 0 -279px;
}

div.radio:active span, 
div.radio.active span {
  background-position: -18px -279px;
}

div.radio.focus span, 
div.radio:hover span {
  background-position: -36px -279px;
}

div.radio.focus:active span,
div.radio:active:hover span,
div.radio.active:hover span,
div.radio.active.focus span {
  background-position: -54px -279px;
}

div.radio span.checked {
  background-position: -72px -279px;
}

div.radio:active span.checked,
div.radio.active span.checked {
  background-position: -90px -279px;
}

div.radio.focus span.checked, div.radio:hover span.checked {
  background-position: -108px -279px;
}

div.radio.focus:active span.checked, 
div.radio:hover:active span.checked,
div.radio.focus.active span.checked,
div.radio.active:hover span.checked {
  background-position: -126px -279px;
}

div.radio.disabled span,
div.radio.disabled:active span,
div.radio.disabled.active span {
  background-position: -144px -279px;
}

div.radio.disabled span.checked,
div.radio.disabled:active span.checked,
div.radio.disabled.active span.checked {
  background-position: -162px -279px;
}

/* Uploader */

div.uploader {
  background-position: 0 -297px;
  height: 28px;
}

div.uploader span.action {
  background-position: right -409px;
  height: 24px;
  line-height: 24px;
}

div.uploader span.filename {
  height: 24px;
  /* change this line to adjust positioning of filename area */
  margin: 2px 0 2px 2px;
  line-height: 24px;
}

div.uploader.focus,
div.uploader.hover,
div.uploader:hover {
  background-position: 0 -353px;
}

div.uploader.focus span.action,
div.uploader.hover span.action,
div.uploader:hover span.action {
  background-position: right -437px;
}

div.uploader.active span.action,
div.uploader:active span.action {
  background-position: right -465px;
}

div.uploader.focus.active span.action,
div.uploader:focus.active span.action,
div.uploader.focus:active span.action,
div.uploader:focus:active span.action {
  background-position: right -493px;
}

div.uploader.disabled {
  background-position: 0 -325px;
}

div.uploader.disabled span.action {
  background-position: right -381px;
}

div.button {
  background-position: 0 -523px;
}

div.button span {
  background-position: right -643px;
}

div.button.focus,
div.button:focus,
div.button:hover,
div.button.hover {
  background-position: 0 -553px;
}

div.button.focus span,
div.button:focus span,
div.button:hover span,
div.button.hover span {
  background-position: right -673px; 
}

div.button.active,
div.button:active {
  background-position: 0 -583px;
}

div.button.active span,
div.button:active span {
  background-position: right -703px;
  color: #555;
}

div.button.disabled,
div.button:disabled {
  background-position: 0 -613px;
}

div.button.disabled span,
div.button:disabled span {
  background-position: right -733px;
  color: #bbb;
  cursor: default;
}

/* PRESENTATION */

/* Button */

div.button {
  height: 30px;
}

div.button span {
  margin-left: 13px;
  height: 22px;
  padding-top: 8px;
  font-weight: bold;
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding-left: 2px;
  padding-right: 15px;
}

/* Select */
div.selector {
  width: 365px;
  font-size: 12px;
}

div.selector select {
  width: 365px;
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 12px;
  border: solid 1px #fff;
}

div.selector span {
  padding: 0 25px 0 2px;
  cursor: pointer;
}

div.selector span {
  color: #666;
  width: 158px;
  text-shadow: 0 1px 0 #fff;
}

div.selector.disabled span {
  color: #bbb;
}

/* Checker */
div.checker {
  margin-right: 5px;
}

/* Radio */
div.radio {
  margin-right: 3px;
}

/* Uploader */
div.uploader {
  width: 190px;
  cursor: pointer;
}

div.uploader span.action {
  width: 85px;
  text-align: center;
  text-shadow: #fff 0 1px 0;
  background-color: #fff;
  font-size: 11px;
  font-weight: bold;
}

div.uploader span.filename {
  color: #777;
  width: 82px;
  border-right: solid 1px #bbb;
  font-size: 11px;
}

div.uploader input {
  width: 190px;
}

div.uploader.disabled span.action {
  color: #aaa;
}

div.uploader.disabled span.filename {
  border-color: #ddd;
  color: #aaa;
}
/*

CORE FUNCTIONALITY 

Not advised to edit stuff below this line
-----------------------------------------------------
*/

.selector, 
.checker, 
.button, 
.radio, 
.uploader {
  display: -moz-inline-box;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline;
}

.selector select:focus, .radio input:focus, .checker input:focus, .uploader input:focus {
  outline: 0;
}

/* Button */

div.button a,
div.button button,
div.button input {
  position: absolute;
}

div.button {
  cursor: pointer;
  position: relative;
}

div.button span {
  display: -moz-inline-box;
  display: inline-block;
  line-height: 1;
  text-align: center;
}

/* Select */

div.selector,
div.selector.hover,
div.selector.focus,
div.selector.active {
  position: relative;
  padding-left: 10px;
  overflow: hidden;
  background: #fff url('../img/layout/bg_mon_on.png') 347px center no-repeat !important;
}
div.selector.disabled,
div.selector.disabled.hover,
div.selector.disabled.focus,
div.selector.disabled.active {
  background: #fff url('../img/layout/bg_mon_off.png') 347px center no-repeat !important;
}

div.selector span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  font: 12px/26px decima, sans-serif;
  text-transform: uppercase;
}

div.selector select {
  position: absolute;
  opacity: 0;
  filter: alpha(opacity=0);
  height: 25px;
  border: none;
  background: none;
}

/* Checker */

div.checker {
  position: relative;
}

div.checker span {
  display: -moz-inline-box;
  display: inline-block;
  text-align: center;
}

div.checker input {
  opacity: 0;
  filter: alpha(opacity=0);
  display: inline-block;
  background: none;
}

/* Radio */

div.radio {
  position: relative;
}

div.radio span {
  display: -moz-inline-box;
  display: inline-block;
  text-align: center;
}

div.radio input {
  opacity: 0;
  filter: alpha(opacity=0);
  text-align: center;
  display: inline-block;
  background: none;
}

/* Uploader */

div.uploader {
  position: relative;
  overflow: hidden;
  cursor: default;
}

div.uploader span.action {
  float: left;
  display: inline;
  padding: 2px 0;
  overflow: hidden;
  cursor: pointer;
}

div.uploader span.filename {
  padding: 0 10px;
  float: left;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}

div.uploader input {
  opacity: 0;
  filter: alpha(opacity=0);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  float: right;
  height: 25px;
  border: none;
  cursor: default;
}

footer .title {
	font-size: 18px;
	color: #454545;
}
#embed {
	margin-top: 15px;
	display: none;
}
#embed textarea.embed {
	float: left;
	background-color: #f0f1ef;
	box-shadow: 1px 1px 1px #DADBD9;
	border: none;
	padding: 8px 10px;
	width: 680px;
	height: 55px;
	color: #787976;
	line-height: 1.3em;
	font-size: 14px;
}
#embed .sharebuttons {
	float: right;
	margin-top: 10px;
}
#embed .sharebuttons .facebook,
#embed .sharebuttons .twitter,
#embed .sharebuttons .google,
#embed .sharebuttons .multi {
	float: left;
	margin-right: 10px;
}
#embed .sharebuttons .multi { margin-right: 0px; }


h2.no_results {
	font: 18px decima, sans-serif;
	text-transform: uppercase;
}



#rater {
	height: 159px;
	width: 159px;
    position: relative;
	background: url('../img/user_rating.png') no-repeat;
	float: left;
}
#rater .range {
	height: 16px;
	width: 80px;
	position: absolute;
	top: 72px;
	left: 72px;
}
#rater a {
	position: absolute;
	top: 0;
    cursor: pointer;
    height: 15px;
    width: 15px;
    z-index: 2;
    background: #454545;
    opacity: 0.2;
    outline: none;
    border-radius: 8px;
    box-shadow: 2px 1px 2px #d5d6d4;
    cursor: default;
}
#rater a:hover {
	cursor: pointer;
}
#rater_score {
	float: left;
	font: 30px/30px MagionRegular, sans-serif;
	color: #266387;
	margin: 61px 0 0 20px;
}
#rater.score_0 { background-position: 0 0; }
#rater.score_1 { background-position: -159px 0; }
#rater.score_2 { background-position: -318px 0; }
#rater.score_3 { background-position: -477px 0; }
#rater.score_4 { background-position: -636px 0; }
#rater.score_5 { background-position: -795px 0; }
#rater.score_6 { background-position: -954px 0; }
#rater.score_7 { background-position: -1113px 0; }
#rater.score_8 { background-position: -1272px 0; }
#rater.score_9 { background-position: -1431px 0; }
#rater.score_10 { background-position: -1590px 0; }

/*
#fltr-font {
	width: 214px;
}
#fltr-font li {
	position: relative;
	float: left;
	font: 12px/12px decima, sans-serif;
	text-transform: uppercase;
	margin-bottom: 10px;
	margin-left: 19px;
	text-indent: -19px;
	width: 88px;
}
#fltr-font input[type=checkbox] {
	margin-bottom: 0;
}
#fltr-font label {
}
*/
#fltr-font {
	width: 214px;
}
#fltr-font li {
	position: relative;
	float: left;
	font: 12px/14px decima, sans-serif;
	text-transform: uppercase;
	width: 105px;
	margin-right: 2px;
	margin-bottom: 2px;
	min-height: 28px;
}
#fltr-font input[type=checkbox] {
	float: left;
	margin-bottom: 0;
}
#fltr-font label {
	float: left;
	width: 88px;
}


#grading-method-main {
}
#grading-method {
	margin: 0 auto 0 auto;
	padding-top: 96px;
	width: 960px;
}
#grading-method>.right {
	width: 584px;
	margin-top: 2px;
}
#grading_descriptions {
	width: 462px;
	float: right;
}
#grading_descriptions div {
	width: 213px;
	float: left;
	font: 12px 'Helvetica Neue', 'Helvetica Neue Roman', helvetica, arial, sans-serif;
	color: #80807E;
	position: relative;
	margin-bottom: 30px;
	padding: 108px 0 28px 0;
}
#grading_descriptions div h2 {
	font: 17px/17px decima, sans-serif;
	color: #454545;
	margin-bottom: 9px;
}
#grading_descriptions div p {
	margin: 0;
	line-height: 16px;
}
#grading_descriptions div span {
	position: absolute;
	top: 0;
	left: 0;
}
#grading_descriptions .overall {
	float: none;
	width: 212px;
	padding: 0 0 32px 250px;
	min-height: 213px;
}
#grading-method .left {
	width: 210px;
	float: left;
	font: 21px/23px 'Helvetica Neue', 'Helvetica Neue Roman', helvetica, arial, sans-serif;
}
#grading-method .left h1 {
	font: 32px/32px decima-light, sans-serif;	
	text-transform: uppercase;
}
#grading-method .right {
	float: right;
	position: relative;
}
#grading-method .right h2 {
	font: 17px/17px decima, sans-serif;
	color: #454545;
	text-transform: uppercase;
	margin-bottom: 19px;
}

#fourofour, #fourten {
}
#fourofour h1, #fourten h1 {
	font: 170px/160px MagionRegular, sans-serif;
	color: black;
	margin: 0;
}
#fourofour p, #fourten p {
	font: 33px/38px decima-light, sans-serif;
	color: #80807E;
	text-transform: uppercase;
	margin: 0;
}

#badgecontainer {
	border-top: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	margin-top:50px;
}
#badgecontainer .badgeheader h2 {
	font: 30px/29px decima-light, helvetica, arial, verdana, sans-serif;
	text-transform: uppercase;
	padding:10px 0px;
	color:#454545;
}
#badgecontainer .badgeheader h3 {
	font: 22px/21px decima-light, helvetica, arial, verdana, sans-serif;
	margin-bottom:20px;
}
#badgecontainer .embed {
	width: 650px;
	border: 5px solid #cdcfcc;
	height: 35px;
	padding: 15px;
	margin-left: 20px;
	margin-bottom: 40px;
	resize: none;
	font-family: helvetica;
	font-size: 12px;
	color: #80807E;
	line-height:16px;
}
#badgecontainer .badgecodecontainer {
	float:left;
	text-align:center;
}
ul#bloglist {
	font-size:24px;
}

/* -- RWD CSS * 04/2015 -- */

#monetization .selector {
  width: 100%;
}
#monetization > div {
  padding: 0 10px 0 30px;
}
#monetization select {
  width: 100%;
  background: #fff;
  border: none;
  margin-top: 7px;
  border: 4px solid #fff;
}
#monetization label {
  top: 7px;
  left: 1px;
}

@media(max-width: 960px) {

  * {
    box-sizing: border-box;
  }
  body > header > div,
  body > footer > section,
  body > header section > div,
  header #explore > .right,
  header #experts > .right,
  header #help > .right,
  header #about > .right,
  #explore .column_1,
  #explore .column_2,
  #nav-font,
  body > footer section section.header,
  #main,
  #top > header,
  #surplustext,
  #monetization,
  #options,
  #expert_grades,
  #user_grades,
  #scoreboard,
  #scoreboard ol,
  #user_grades .column,
  #user_grades .column.right,
  #stats .data,
  #stats header,
  #grading-method,
  #grading-method .left,
  #grading_descriptions,
  #grading-method > .right,
  #grading_descriptions .overall {
    width: 100%;
    float: none;
  }

  /* -- Header -- */
  body > header {
    position: relative;
  }
  body > header > div {
    text-align: center;
  }
  body > header > div > a {
    position: relative;
    display: inline-block;
    top: 0;
    margin: 15px 0;
  }
  body > header nav ul {
    padding: 0;
  }
  body > header nav li:nth-child(5) {
    margin-right: 0;
  }
  #panel_01_hide,
  #panel_02_hide {
    position: absolute;
    margin-top: 40px;
    left: 50%;
    margin-left: 20px;
  }
  #panel_01_hide a {
    text-indent: -50px;
  }
  header .left {
    width: 100%;
    float: none;
    padding: 0 10px;
    text-align: center;
  }
  header .right {
    padding: 0 10px;
  }
  header .left h1 {
    font-size: 24px;
  }
  #explore {
    height: auto;
  }
  #explore div.left p,
  #experts div.left p,
  #help div.left p,
  #about div.left p {
    font-size: 13px;
  }
  #explore .column_1,
  #explore .column_2 {
    padding: 0 10px;
  }
  header .left h2,
  header .right h2 {
    margin: 25px 0 10px;
  }
  .color_table {
    box-shadow: none;
    margin-bottom: 0;
  }
  #color_table tr {
    display: inline-block;
  }
  #color_table tr:not(:first-child) {
    display: none;
  }
  #color_table tr:last-child {
    display: inline-block;
  }
  #color_table tr:last-child td {
    display: none;
  }
  #color_table tr:last-child td:nth-child(2),
  #color_table tr:last-child td:last-child,
  #color_table tr:last-child td:nth-child(5) {
    display: table-cell;
  }  
  #nav-font {
    -webkit-columns: 3;
    -moz-columns: 3;
    columns: 3;
  }
  #nav-font li {
    float: none;
    width: 100%;
  }
  #explore .column_2 a.facebook,
  #explore .column_2 a.twitter,
  #explore .column_2 a.youtube {
    display: inline;
    background: none;
    box-shadow: none;
    padding: 0;
    font-family: decima, sans-serif;
    text-transform: uppercase;
    text-decoration: underline;
    color: #80807E;
    margin-right: 10px;
  }
  #explore .column_2 a.facebook:hover,
  #explore .column_2 a.twitter:hover,
  #explore .column_2 a.youtube:hover {
    background: none;
    color: #80807E;
  }
  #explore .column_2 a.facebook span,
  #explore .column_2 a.twitter span,
  #explore .column_2 a.youtube span {
    background: none;
    text-indent: 0;
    margin: 0;
    width: auto;
    height: auto;
    display: inline;
  }
  #experts .right:before {
    content: '';
    background: url('../img/best_ed_sites_experts.png') no-repeat;
    width: 100%;
    height: auto;
  }
  #experts .right div {
    width: 50%;
    padding: 0 10px;
  }
  .right div.bordered {
    border-bottom: none;
  }
  #experts .right div:nth-child(3) {
    clear: both;
  }
  #experts .right .expert_portrait {
    display: none;
  }
  #experts blockquote {
    width: auto;
  }
  .faux_dropdown {
    margin-top: -235px;
  }

  /* -- Homepage -- */
  #infographic img {
    width: 100%;
    height: auto;
  }

  /* -- Results -- */
  #main {
    margin: 30px 0 0 0;
    padding: 0 10px;
  }
  #surplustext {
    margin: 20px 0 0 0;
  }
  #content,
  #main.profile #summary {
    margin-top: 30px;
  }

  #summary .layout {
    display: none;
  }
  #summary .sort {
    margin: 40px 0;
    border-bottom: 1px solid #cdcfcc;
    padding-bottom: 5px;
  }

  #floating_topbutton {
    top: 10px;
    right: 10px;
  }
  #results.grid #schools > li {
    width: 100%;
    margin: 0 0 30px 0;
    border-bottom: 1px solid #cdcfcc;
    padding-bottom: 20px;
  }
  #results.grid #schools > li.start {
    margin-top: 30px;
  }
  #schools > li img {
    width: 50%;
    max-width: 213px;
    height: auto;
    float: right;
    margin-left: 20px;
  }
  #schools > li h2:after {
    content: "\00BB";
  }
  #results.grid .address,
  #results.grid .phone,
  #results.grid .url,
  #results.grid ol li,
  #results.list .location {
    position: relative;
    left: 0;
  }
  #results.grid ol {
    margin-top: 20px;
    padding: 0;
  }
  #results.grid ol li {
    float: left;
    font: 12px/14px decima, sans-serif;
    text-align: center;
    padding-top: 50px;
    margin-right: 10px;    
  }
  #results.grid ol li.large {
    width: 44px;
    height: 44px;
  }
  #results .score {
    display: none;
  }
  #results.grid .more,
  #results.list .more {
    display: none;
  }
  #results.grid ol li.large.score_0 { background-position: -563px -329px; }
  #results.grid ol li.large.score_1 { background-position: -607px -329px; }  #results.grid ol li.large.score_1:hover  { background-position: -651px -329px; }
  #results.grid ol li.large.score_2 { background-position: -695px -329px; }  #results.grid ol li.large.score_2:hover  { background-position: -739px -329px; }
  #results.grid ol li.large.score_3 { background-position: -783px -329px; }  #results.grid ol li.large.score_3:hover  { background-position: -827px -329px; }
  #results.grid ol li.large.score_4 { background-position: -871px -329px; }  #results.grid ol li.large.score_4:hover  { background-position: -915px -329px; }
  #results.grid ol li.large.score_5 { background-position: -959px -329px; }  #results.grid ol li.large.score_5:hover  { background-position: -1003px -329px; }
  #results.grid ol li.large.score_6 { background-position: -1047px -329px; } #results.grid ol li.large.score_6:hover  { background-position: -1091px -329px; }
  #results.grid ol li.large.score_7 { background-position: -1135px -329px; } #results.grid ol li.large.score_7:hover  { background-position: -1179px -329px; }
  #results.grid ol li.large.score_8 { background-position: -1223px -329px; } #results.grid ol li.large.score_8:hover  { background-position: -1267px -329px; }
  #results.grid ol li.large.score_9 { background-position: -1311px -329px; } #results.grid ol li.large.score_9:hover  { background-position: -1355px -329px; }
  #results.grid ol li.large.score_10 { background-position: -1399px -329px; }  #results.grid ol li.large.score_10:hover  { background-position: -1443px -329px; }

  /* -- Country page -- */
  #top > header.right {
    position: relative;
  }
  #top > header > h1 {
    font-size: 38px;
    line-height: 42px;
  }
  #options {
    margin-bottom: 30px;
    position: relative;
  }
  /* -- Widget -- */
  #monetization {
    height: auto;
  }
  #loading {
    box-sizing: content-box!important;
  }

  /* -- School -- */
  #main.profile #top img {
    float: right;
    width: 50%;
    max-width: 462px;
    height: auto;
    margin-top: 30px;
  }
  #main.profile #top .address {
    float: left;
    width: 50%;
  }
  #main.profile #top .address .website {
    display: block;
    margin-top: 5px;
  }
  #main.profile #summary .layout {
    display: block;
  }
  #grading {
    height: auto;
  }
  #scoreboard ol {
    padding-top: 350px;
  }
  #scoreboard .overall {
    left: 50%;
    margin-left: -106px;
  }
  #scoreboard li {
    margin: 0 60px 39px 0;
    float: left;
  }
  #scoreboard span {
    font-size: 24px;
    line-height: 24px;
  }
  .profile #expert_grades .expert_portrait {
    width: 106.5px;
    height: 62.5px;
    background-size: 217px;
  }
  .profile .chris_k {
    background-position: -110px -1px !important;
  }
  .profile .katrina_m {
    background-position: -2px -64px !important;
  }
  .profile .alli_o {
    background-position: -110px -64px !important;
  }
  #expert_grades div {
    padding: 15px 0 15px 126px;
  }
  #expert_grades .expert_portrait {
    left: 0;
    right: auto;
    box-shadow: none;
  }
  #expert_grades div p {
    margin-bottom: 10px;
  }
  #user_grades .column.right {
    margin-top: 20px;
  }
  #user_ratings {
    width: 100%;
    float: none;
  }
  #user_grades .column.right {
    clear: both;
    padding-top: 10px;
  }
  #user_ratings {
    margin-bottom: 30px;
  }
  #user_ratings input[type=submit] {
    right: 50%;
    margin-right: -27.5px;
    bottom: -27.5px;
    top: auto;
  }
  #stats .data .column.right {
    width: auto;
    float: left;
  }
  #stats .visuals ul {
    text-align: center;
  }
  #stats .visuals li {
    margin-bottom: 4px;
  }
  #stats #piechart {
    margin-bottom: 10px;
  }
  #stats span.text_giant {
    font-size: 120px;
  }
  #stats span.text_med {
    font-size: 42px;
  }

  /* -- Grading -- */
  #grading-method {
    padding: 40px 10px 0;
  }
  #grading-method .left {
    font-size: 16px;
    margin-bottom: 40px;
  }
  #grading_descriptions div span {
    display: none;
  }
  #grading_descriptions .overall {
    padding: 0;
    min-height: 0;
  }
  #scale {
    position: absolute;
  }
  #grading_descriptions {
    padding-left: 110px;
  }
  #grading_descriptions div {
    width: auto;
    padding: 0;
    float: none;
  }
  #grading_descriptions div.right {
    margin-left: 0;
    float: none;
  }

  /* -- Misc Pages -- */
  #links h1 {
    font-size: 40px;
    line-height: 40px;
    width: auto;
  }
  #links > ul {
    width: 100%;
    font-size: 24px;
    line-height: 28px;
  }
  #links > ul li {
    float: none;
    width: auto;
    padding: 12px 0 15px;
    margin-right: 0;
  }
  #links > ul li a {
    width: auto;
    height: auto;
    text-indent: 0;
    float: none;
    background: none;
    font-size: 
  }
  #links #back {
    margin-top: 0;
  }
  #back .or {
    display: none;
  }

  /* -- Footer -- */
  body > footer {
    display: none!important;
  }
  #embed textarea.embed {
    width: 100%;
  }
  body > footer #panel_02_hide {
    display: none;
  }
}