.floatingLabel{
	position:  relative;
	width: 100%;
}
.floatingLabel label {
	position: absolute;
	left: 12px;
	top: 30%;
	pointer-events: none;
	transition-property:  top, font-size, font-weight, opacity;
	transition-duration: .2s;
	transition-timing-function: ease-in;
	border-radius: 4px;
	font-size: 12px;
	color: #666666;
}
.floatingLabel.isFloating label {
	top: -6px;
	font-size: 12px;
	line-height: normal;
	font-weight: bold;
	opacity: 1;
	background: #FFF;
	padding: 0px 4px;
	z-index: 1;
}
.floatingLabel input:-webkit-autofill + label {
	/*Repeated from above because browsers that don't
	accept the autofill selector just the floating state all together*/
	top: -6px;
	font-size: 12px;
	line-height: normal;
	font-weight: bold;
	opacity: 1;
	background: #FFF;
	padding: 0px 4px;
	z-index: 1;
}

.floatingLabel.hasFocus label {
	opacity: 1;
}
.floatingLabel.hasFocus input {
	background: #fff !important;
}

.textCentered {
	text-align: center;
}
.elementCentered {
	margin: 0px auto;
	display: table;
}
.clearfix:after {
	content: " ";
	display: block;
	height: 0;
	clear: both;
}
.bold {
	font-weight: bold;
}
.center img {
	margin: 0 auto;
	display: block;
}

img.leaderboardAd {
	padding: 5px 0;
	height:90px;
	display: block;
}

/* Main Layout */
.display-wide {
	width:728px;
    margin: 0 auto;
}
.display-wide .links {
	overflow:auto;
}
#TopRight {
	width:460px;
	margin-left:460px;
	text-align:center;
	font-size:7pt;
}
#CenterContent {
	padding:0 15px 20px 15px;
	min-height: 450px;
	position:relative;
}
.noscript {
	width: 500px;
	float: left;
	position: absolute;
	top: 140px;
	left: 125px;
	z-index: 2;
	padding: 20px;
	text-align: center;
	border: 2px black solid;
	background-color: #CCCCCC;
}
.registerinfo {
	font-size: 9pt;
	font-style: italic;
	color: #600;
}
#TitleBox {
	text-align: left;
	font-weight: bold;
	font-size: 24px;
	margin-bottom: 20px;
	padding: 10px 0px;
	width: 500px;
}
sup.challZero {
	background-color:#999999;
}
#LogInAcct sup.challCount {
	box-shadow: none;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	font-size:7.5pt;
}


.ajax-loader {
	background: url("/images/ajaxLoaderLgGray.gif");
	background-position: center;
	background-repeat: no-repeat;
	vertical-align: bottom;
}

/** Button UI */
/* Orange button */
#button .button {
	position: relative;
	text-decoration: none;
	display: inline-block;
	border: 1px solid #ee922b;
	border-top-color: #efa149;
	border-left-color: #efa149;
	color: #fff;
	text-shadow: 0 2px #d06e13;
	padding: 5px 10px 5px 10px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow:    0 3px 0 #e9e7e6, inset 0 1px 1px rgba(255,255,255,1), inset 0 -1px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0 3px 0 #e9e7e6;
	box-shadow:         0 3px 0 #e9e7e6;
	background: #ff9620;
	background: -webkit-gradient(
		linear,	left bottom,left top,color-stop(0, rgb(255,144,27)),color-stop(0.5, rgb(255,150,32)),color-stop(0.5, rgb(255,152,32)),	color-stop(1, rgb(254,188,85))
		);
	background: -moz-linear-gradient(center bottom,	rgb(255,144,27) 0%,rgb(255,150,32) 50%,rgb(255,152,32) 50%,rgb(254,188,85) 100%
		);
	background: linear-gradient(center bottom,	rgb(255,144,27) 0%,	rgb(255,150,32) 50%,rgb(255,152,32) 50%,rgb(254,188,85) 100%
		);
}
#limit {
	background: #e8e8e8;
	font-style: italic;
	font-size: 11px;
	text-align: center;
}
#limit a {
	color:#666 !important;
}
#button .img-button:hover, #button .button:hover{
	border: 1px solid #e47705;
}
#button .img-button strong, #button .button strong {
	font: bold 14px/1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
}

/* text-only FORM button */
#button .submit {
	border: 1px solid #afafaf;
	border-radius: 20px;
	-moz-box-shadow:    0 3px 0 #e9e7e6, inset 0 1px 1px rgba(255,255,255,1), inset 0 -1px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0 3px 0 #e9e7e6;
	box-shadow:         0 3px 0 #e9e7e6;
	color: #333;
	cursor: pointer;
	font: 14px/1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
	padding: 5px 10px 5px 10px;
	text-shadow: 0 2px #ececec;
	background: #ccc;
	background: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(221,221,221)),color-stop(0.5, rgb(231,231,231)),color-stop(0.5, rgb(239,239,239)),color-stop(1, rgb(254,254,254))
		);
	background: -moz-linear-gradient(center bottom,rgb(221,221,221) 0%,rgb(231,231,231) 50%,rgb(239,239,239) 50%,rgb(254,254,254) 100%
		);
	background: linear-gradient(center bottom,rgb(221,221,221) 0%,rgb(231,231,231) 50%,rgb(239,239,239) 50%,rgb(254,254,254) 100%
		);
}
#button .submit {
	margin: 10px 0;
}

/* Pagination */
.paginationBox {
	border-top: 1px solid #dbdbdb;
	padding: 30px 0;
	text-align: center;
	margin: 0 auto;
}
.paginationBox > a {
	text-decoration: none;
}
.pagenum {
	display: inline-block;
	color: #0099cc;
	padding: 5px 10px;
}
.pagenum.active {
	font-weight: bold;
	border: 3px solid #f90;
	color: #f90;
	border-radius: 20px;
}
.pagenum span:hover {
	text-decoration: underline;
	cursor: pointer;
}
.pageButton {
	display: inline-block;
	-webkit-transition: background-color .15s;
	-moz-transition: background-color .15s;
	-ms-transition: background-color .15s;
	transition: background-color .15s;
	color: #bbb;
	font-size: 10pt;
	font-weight: bold;
	padding: 7px 12px;
	margin: 0 2px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}
.pageButton a {
	text-decoration: none;
}
.pageJump {
	border-top: 1px solid #dbdbdb;
	text-align: right;
	padding-top: 15px;
	margin-top: 30px;
}
.pageJump > * {
	font-size: 1em;
}
.pageJump input {
	display: inline;
	border: 1px solid #dbdbdb;
	padding: 6px;
	text-align: center;
	border-radius: 2px;
	width: 18px;
}
.pageJump input.invalid {
	box-shadow: 0 0 2px 1px rgba(211, 89, 89, .9) inset, 0 0 2px 1px rgba(212, 89, 89, .9);
	border: 0;
	outline: 0;
}

.activeLink {
	color: #0099cc;
}
.activeLink:hover:not(.disabled) {
	background-color: #dbdbdb;
	-webkit-transition: background-color .15s;
	-moz-transition: background-color .15s;
	-ms-transition: background-color .15s;
	transition: background-color .15s;
	text-decoration: none;
	cursor: pointer;
}

/* Tinybox CSS */
/* modal CSS */
#modalPop {
	margin:0 auto;
	font-size: 14px;
}
#modalPop p {
	line-height:1em;
}
#modalPop a, #modalPop a:visited {
	color:#0099cc;
	text-decoration: none;
	cursor: pointer;
	font-weight:bold;
}
#modalPop a:hover {
	text-decoration:underline
}
#modalPop a.button {
	text-decoration:none !important;
	color: white;
}
#modalPop h1{
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	margin-top:0;
	margin-bottom:10px;
}
#modal_login_error {
	padding-left: 10px;
	color: red;
	font-size: smaller;
}
#reg {
	width:700px;margin:auto;margin-top: 20px;
}
.why {
	border: none;padding-top:210px
}
.fancyDivider li{
	padding: 0 5px;
	display: inline;
	text-decoration:none;
}
.why ul.fancyDivider li.strike {
	text-decoration:line-through;
	text-shadow: 0 1px 0 #fff6da;
	color: #b3a895;
	width: 200px;
}
ul.fancyDivider {
	padding:0;
	text-align: center;
	list-style: none;
	display: list-item;
	font-family: Georgia, Times, serif;
	font-size: 21px;
	font-style: italic;
	text-shadow: 0 1px 0 #fff6da;
	color:#4e473a;
	margin: 21px 0px;
}
#modalcontent p {
	margin:0;
	padding:10px 0 0 0;
}
#modalcontent-login #header1-login {
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	text-shadow: 0 1px 0 #fff6da;
	color:#333;
	margin-bottom:0px;
}
#above-social {
	line-height: 1.3em;
	padding: 10px 0 0 0;
}
.modal-spacer {
	margin-bottom:15px;
	margin-top: 15px;
	line-height: 1.3em;
}
#rightMod {
	position: relative;
	float: right;
	width: 260px !important;
	margin-top: 10px;
	padding-left: 30px;
	border-left: 1px solid #b3a895;
}
#leftMod {
	position: relative;
	float: left;
	width: 260px !important;
	margin-top: 10px;
	padding-right:15px
}

#passthrough {
	clear: both;
	text-align: right;
	padding: 10px;
}

#passthrough #passthrough-a {
	font-weight: normal;
	color: #999;
}

/* JS-called styles */

.labelLink {
	font-size:12px;
	margin-left:10px;
	font-weight:normal !important
}
.tbox {
	position:absolute;
	display:none;
	padding:14px 17px;
	z-index:10000
}
.tinner, .tinner-no-bg {
	padding:25px;
	-moz-border-radius:15px;
	-webkit-border-radius: 15px;
	border-radius:15px 15px 15px 15px;
	background: #fff url('/images/tanNoiseBgd.png') repeat !important;
}
.tinner-no-bg {
	background-image:none !important;
}
.tmask {
	position:absolute;
	display:none;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
	background:#000;
	z-index:9999;
}
.tclose {
	position:absolute;
	top:0px;
	right:0px;
	width:30px;
	height:30px;
	cursor:pointer;
	background:url('/images/close.png') no-repeat;
}
.tclose:hover {
	background-position:0 -30px;
}
#modButton {
	min-height:74px;
	padding-top: 10px;
}
/*
Green button
adding .modButton .button to allow access #modButton behaviour without inheriting min-height & padding
*/
#modButton .button, #startbutton .button, .resetButton, .passButton, .modButton .button {
	cursor: pointer;
	position: relative;
	text-decoration: none;
	display: inline-block;
	border: 1px solid #5da041;
	border-top-color: #459a28;
	border-left-color: #6caf26;
	color: #fff;
	text-shadow: 0 2px #6e8d19;
	padding: 8px 30px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow: 10px #d0c8b7, inset 0 1px 1px rgba(255,255,255,1), inset 0 -1px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: 10px #d0c8b7;
	box-shadow: 10px #d0c8b7;
	box-shadow:inset 0px 1px 3px #addf6f;
	-moz-box-shadow:inset 0px 1px 3px #addf6f;
	-webkit-box-shadow:inset 0px 1px 3px #addf6f;
	background: #8bbf25;
	background: -webkit-gradient(linear,left bottom, left top, color-stop(0, rgb(122,175,33)), color-stop(1, rgb(155,199,41)));
	background: -moz-linear-gradient(center bottom, rgb(122,175,33) 0%, rgb(155,199,41) 100%);
	background: linear-gradient(center bottom, rgb(122,175,33) 0%, rgb(155,199,41) 100%);
}

/*
For fake buttons:
*/
.fake-link {
	color:#0099cc;
}
.fake-link:hover {
	text-decoration:underline;
	cursor:pointer;
}

/*
adding .modButton .button:hover to allow access #modButton behaviour without inheriting min-height & padding
*/
#modButton .button:hover, #startbutton .button:hover, .modButton .button:hover{
	border: 1px solid #307414;
}
/*
adding .modButton .button strong to allow access #modButton behaviour without inheriting min-height & padding
*/
#modButton .button strong, #startbutton .button strong, .resetButton, .modButton .button strong {
	font: bold 20px Helvetica Neue, Helvetica, Arial, sans-serif;
}
.err {
	color: #b00;
}
.resetButton {
	padding:8px 50px;
	padding-top:8px !important;
	min-height:25px !important;
	margin-top:4px;
}
#modButton.passButton {
	font:15px Helvetica Neue, Helvetica, Arial, sans-serif;
	padding:5px 20px;
	min-height:25px;
	margin-top:4px;
	margin-left:0;
	text-shadow:none;
}
.buttonBgd{
	padding:10px;width:200px;margin:auto;
	background-color:#d0c8b7;
	-moz-border-radius:12px;
	-webkit-border-radius: 10px;
	border-radius:12px;
	-moz-box-shadow: 0 2px 1px #efebe4;
	-webkit-box-shadow: 0 2px 1px #efebe4;
	box-shadow: 0 2px 1px #efebe4;
}

/*Small button */
span .smallButton {
	border: 1px solid #999;
	border-radius: 20px;
	-moz-box-shadow:    0 3px 0 #e9e7e6, inset 0 1px 1px rgba(255,255,255,1), inset 0 -1px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0 3px 0 #e9e7e6;
	box-shadow:         0 3px 0 #e9e7e6;

	background: #e0e0e0;
	background: -webkit-gradient(
		linear,	left bottom,left top,color-stop(0, rgb(221,221,221)),color-stop(1, rgb(254,254,254))
		);
	background: -moz-linear-gradient(
		center bottom,rgb(221,221,221) 0%,rgb(254,254,254) 100%
		);
	background: linear-gradient(
		center bottom,rgb(221,221,221) 0%,rgb(254,254,254) 100%
		);
	color: #7f7f7f;
	cursor: pointer;
	font: 9px Helvetica Neue, Helvetica, Arial, sans-serif;
	margin-left:5px;
}
span .smallButton {
	margin: 0px;
	padding:5px;
	font-weight: bold;
}
span .smallButton:hover {
	border: 1px solid #666;
	text-decoration: none !important;
	background-color:#e7e7e7;
}
input.textinput {
	border: 1px solid #C9C9C9;
	color: #666;
	margin: 0;
	padding: 4px;
	vertical-align: middle;
	width: 160px;
	font-size: 14px;
}


#decline-challenge-from-alert {
	text-decoration: underline;
	cursor: pointer;
}

.authAlert {
color:#b00;
padding-bottom:10px;
}
.authAlert {
	color:#b00;
	padding-bottom:10px;
}
#game-message-box:after {
	content: "";
	display: block;
	white-space: nowrap;
}
#narrow_content{
	position: relative;
	width:560px;
}
.dek {
	font-size: 120%;
	margin-bottom: 20px; padding:0;
	color:#666;
	width: 560px !important;
}
.dek a { /* added for login form */
	color:#0099cc;
}
#auth-success {
	font-size:120%;
	/*color:#666;*/
}

.wiggly-jiggly {
    -webkit-animation: wiggle-dee-jiggle 0.4s 1 linear;
    -moz-animation: wiggle-dee-jiggle 0.4s 1 linear;
    -o-animation: wiggle-dee-jiggle 0.4s 1 linear;
}
@-webkit-keyframes wiggle-dee-jiggle {
    0% { -webkit-transform: translate(30px); }
    20% { -webkit-transform: translate(-30px); }
    40% { -webkit-transform: translate(15px); }
    60% { -webkit-transform: translate(-15px); }
    80% { -webkit-transform: translate(8px); }
    100% { -webkit-transform: translate(0px); }
}
@-moz-keyframes wiggle-dee-jiggle {
    0% { -moz-transform: translate(30px); }
    20% { -moz-transform: translate(-30px); }
    40% { -moz-transform: translate(15px); }
    60% { -moz-transform: translate(-15px); }
    80% { -moz-transform: translate(8px); }
    100% { -moz-transform: translate(0px); }
}
@-o-keyframes wiggle-dee-jiggle {
    0% { -o-transform: translate(30px); }
    20% { -o-transform: translate(-30px); }
    40% { -o-transform: translate(15px); }
    60% { -o-transform: translate(-15px); }
    80% { -o-transform: translate(8px); }
    100% { -o-origin-transform: translate(0px); }
}

/* ----------container to center the layout-------- */
#container {
	padding:0px;
	margin: 0px 0px 25px 0px;
	margin-left: auto;
	margin-right: auto;
	font-size: 14px;
}

/* ----------outer and inner----------------- */
#outer {
	background-color: #fff;
}
#inner {
	margin:0;
	width:100%;
}

/* --------------left and right ------------- */
#left {
	width:0px;
	float:left;
	position:relative;
	margin-left:-1px;
	margin-right:1px;
}
#right {
	width:0px;
	float:right;
	position:relative;
	margin-right:-1px;
	margin-left:1px;
}
#forms {
	margin-bottom:20px;
	padding:20px 0 0 0 !important; /* added importance due to conflict with current styles */
	float:left;
	width:560px;
	background-color: #f3f3f3;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
#forms ul, #graybox ul {
	list-style-type: none;
}
#forms label {
	float:left;
	width:130px;
	text-align: right;
	margin:3px 20px 0 0;
}
#forms label.resetlabel {
	float: none;
	width: auto;
	text-align: left;
	margin: 0px;
}
#forms li, #graybox li  {
	padding-bottom: 20px !important; /* added importance due to conflict with some current styles */
}
#forms li {
	padding-right:20px !important; /* added importance due to conflict with some current styles */
}
#graybox li {
	text-align: center
}
#forms .textinput {
	width: 375px;
}
#forms div.err {
	color: #b00;
	margin-bottom: 7px;
}
#forms label.err {
	color:#b00;
}
#forms input.err {
	border: 1px solid #b00;
	color: #b00;
}
textarea.textinput { /* can likely be combined with main.css input.textinput */
	border: 1px solid #C9C9C9;
	color: #666;
	margin: 0;
	padding: 4px;
	vertical-align: middle;
	width: 160px;
	font-size: 14px;
}
#forms .email {
	width:180px;
}
.divider {
	border-top:1px solid #d7d7d7;
	padding-top:20px;
}
/*.info {*/
/*	color:#999;*/
/*	font-size: 12px;*/
/*}*/
#forms .un {
	width:180px;
	margin-right:10px;
}
#forms .captcha { /* new classes for reg only */
	width:40px;
}
#outsideForm label{
	font-weight: 500;
}
#outsideForm h2 {
	margin: 1.5em 0 1em;
	line-height: 1.3;
}
#outsideForm ul {
	margin-bottom: 15px;
}
#outsideForm ul li {
	margin-left: 20px;
}
#outsideForm .source {
	font-size: 10px;
	font-style: italic;
}
#outsideForm p, #outsideForm li, #outsideForm label {
	line-height: 18px;
}
#check ul {
	list-style-type: none
}
#check li {
	display: inline;
	padding-right:0 !important;
	float:left;
}
#forms a { /* new class */
	color:#0099cc;
	font-size: 12px;
}
#graybox { /* reg specific */
	margin: 0 0 15px 0;
	padding:20px 0;
	width:560px;
	background-color: #f3f3f3;
	border: none;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	clear: both
}
#graybox span{ /* reg specific */
	margin-right: 15px;
}

.next {
	border-bottom:0px;height:14px;padding:3px 0px;
	float: right;
}
.previous {
	border-bottom:0px;height:14px;padding:3px 0px;
	float:left;
}

img.loader {
	float: right;
	padding: 0px 135px;
	position: relative;
	top: -32px;
	display: none;
}

/*************************
 * StatsBox style stuff below -- StatBox, appstore, join sporcle section
 *************************/
 #StatsBox,#PromoBox,#ActivityBox {
 	color:#777;
 	width:300px;
 	text-align:left;
 	margin:0;
 }
 #ArchiveBox, #PromoBox #button {
 	text-align:center;
 }
 #StatsBox h1,#PromoBox h1,#ActivityBox h1,#ArchiveBox h1 {
 	font-weight:700;
 	color:#333;
 }
 #StatsBox h1 {
 	font-size:14px;
 	margin:0 0 3px;
 }
 #StatsBox ul {
 	line-height:17px;
 	list-style:none;
 	font-size:10px;
 }
 #StatsBox ul a {
 	color:#777;
 	text-decoration:underline;
 }
 #StatsBox strong {
 	color:#f80;
 	font-size:14px;
 }
 #ActivityBox table {
 	height:32px;
 }
 #ActivityBox ul {
 	margin-bottom:0;line-height: 14px;
 }
 #ActivityBox td {
 	vertical-align:middle;
 }
 #PromoBox,#ActivityBox{
 	-moz-border-radius:5px;
 	-webkit-border-radius:5px;
 	border-radius:5px;
 	padding-bottom:10px;
 	padding-top:10px;
 	height: 135px;
 }
 #PromoBox img {
 	border:0;
 }
 #PromoBox h1,#ActivityBox h1 {
 	font-size:12px;
 	text-transform:uppercase;
 	padding-bottom:3px;
 	border-bottom:1px solid #d8d8d8;
 	margin:0 0 6px;
 }
 #PromoBox h2, #ActivityBox h2 {
 	color:#f80;
 	font-size:14px;
 	font-weight:700;
 	margin:0;
 	padding:0;
 }
 #PromoBox p, #ActivityBox p {
 	line-height:17px;
 	margin:4px 0;
 }
 #StatsBox ul a:hover,#PromoBox a,#ActivityBox a {
 	color:#0099cc;
 }
 #APC {
 	height: 135px;
 	margin: 2px 0px 30px 0px;
 }
 a.signupbutton {
 	width: 278px;
 }
/*************************
* End stats box
*************************/

.clear {
	overflow: auto;
	width: 100%;
}

/* footer */
#footerTop, #footerBottom {
	margin: 0 auto;
}
#footerTop {
	background-color: #fff;
	border-top:1px solid #dbdbdb;
	padding:20px ;
}
#footerLogoBox {
	background: transparent url('/images/headerSprite_v12.png') no-repeat 0px -150px;
	display: block;
	width:102px;
	height:36px;
	margin-bottom: 11px;
}
#footerBottom {
	background-color: #eee;
	padding:20px;
	color:#8f8f92;
	font-size: 79%;
}
#bottomContent {
	position: relative;
}
#footerLogo, #footerCount {
	display:inline-block;
}
#footerLogo {
	color:#929292;
	font-size: 90%
}
#footerCount {
	float:right;
	font-size: 130%;
	width:313px;
	padding:0;
	margin-top:6px;
}
.smallerText {
	font-size: 68%;
	padding:0;
}
#footerBottom a {
	text-decoration: none;
	color:#8f8f92;
}
#footerBottom a:hover {
	text-decoration: underline;
	color: #444;
}
#footerBottom a.orange-highlight {
	color:#f90;
}
#footerBottom ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
#footerBottom li {
	margin: 0;
	padding: 0;
	font-size: 100%;
	line-height: 1.4;
}
div.footer-links {
	float: left;
	width: 304px;
	margin: 0 0 10px 0;
}
div.footer-links h3 {
	margin: 5px 0 15px 0;
}
.clearfix:after {
	content: " ";
	display: block;
	height: 0;
	clear: both;
}

input[type=button]::-moz-focus-inner,
button::-moz-focus-inner {
	padding: 0;
	border: 0;
}
/* sitewide buttons */
.smallGrayButton {
	display: inline-block;
	background-color: #fff;
	color: #0099cc;;
	padding: 10px 15px;
	border-radius: 4px;
	cursor:pointer;
}
.smallGrayButton:hover {
	background-color:rgba(0,0,0,0.08);
	border-radius: 3px 3px 3px 3px;
	-moz-border-radius: 3px 3px 3px 3px;
	-webkit-border-radius: 3px 3px 3px 3px;
}
.buttonShape {
	box-sizing: border-box;
	border: 2px solid transparent;
	color: #fff;
	cursor: pointer;
	font-size: 14px;
	font-weight: 400;
	min-width: 2.7857em;
	line-height: 2.7857em;
	padding: 0 1em;
	position: relative;

	/* common button styles */
	text-align: center;
	text-decoration: none;
	white-space:nowrap;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	transition: background-color .15s,border-color .15s,color .15s;
	background-repeat:  no-repeat;
	background-position: 10px, left;
	background-size: 25px 25px;
	display: block;
	width: 100%;
	margin-top: 10px;
}
.buttonShape:hover {
	text-decoration: none;
}
.buttonShape.disabled {
	opacity: 0.3;
}
.buttonShape.disabled:hover {
	cursor: default;
}
.buttonShape.buttonBig {
	font-size: 1.1rem;
}
.buttonContainerNew { /* new button container that doesn't have a margin or fixed size */
	display: inline-block;
}
.buttonContainer {
	display: inline-block;
	width:220px;
	margin:0 10px;
}
.centeredButtonContainer {
	margin:0 auto;
	width:220px;
	text-align:center;
}
.buttonGreen {
	background-color: #84b623;
	padding:0;
	color:#fff;
}
.buttonGreen:hover:not(.disabled) {
	background-color: #83c504;
	text-decoration:none;
}
.buttonOrange {
	background-color: #f90;
	padding:0;
	color:#fff;
}
.buttonOrange:hover:not(.disabled) {
	background-color: #ffc00a;
}
.buttonPurple {
    background-color: #B53466;
    padding:0;
    color:#fff;
}
.buttonPurple:hover {
    background-color: #d2638e;
    text-decoration:none;
}
.buttonGrayOutline {
	background-color: #ebebeb;
	border: 1px solid #cccccc;
	color: #8f8f92;
}
.buttonGrayOutline:hover:not(.disabled) {
	color: #333;
	background-color: #f4f3f3;
}
.btn-text {
	color: #333;
	text-decoration: underline;
	border: none;
	background-color: #fff;
	font-size: 14px;
	cursor: pointer;
	padding: 0;
	opacity: .4;
}
.btn-text:hover {
	opacity: 1;
}
.btn-text.cancel {
	padding-left: 20px;
	margin-left: 10px;
	display: inline-block;
	background: transparent url(/images/close_sm.png) 5px 5px no-repeat;
}
.fakeButton:visited {
	color:#ffffff;
}
.fakeButton:hover {
	text-decoration: none;
}
/*   Facebook Modals   */
.center {
	text-align:center;
}
.button-wrapper-facebook {
	margin:0 auto;
	text-align:center;
}
.button-wrapper-facebook .buttons span{
	font-size:120%;
	border:2px solid #f90;
	font-weight:600;

	padding: 10px 20px;
	text-shadow: none;
	text-transform: uppercase;
	display: inline-block;

	/* common button styles */
	text-decoration:none;
	text-align:center;
	white-space:nowrap;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	transition: background-color .15s,border-color .15s,color .15s;
}
.button-wrapper-facebook .buttons span:hover  {
	border:2px solid rgb(255, 132, 0);
	background-color:rgb(255, 132, 0);
	color:#fff !important;
	text-decoration: none !important;
	cursor: pointer;
}
.button-wrapper-facebook .buttons .flatClearButton {
	margin-right:30px;
	color:#f90 !important;
}
.button-wrapper-facebook .buttons .flatOrangeButton {
	color: #fff !important;
	background-color: #f90;
}
#modalPop h2 {
	color:#000;
	text-shadow: none;
	border-bottom:none;
}
/*   End Facebook Modals   */

/* Gray button */
/* should be declared after .buttonshape */
.buttonGray {
	background-color: #eee;
	padding: 0;
	color: #0099cc;
	/*font-family: Helvetica Neue, Helvetica, Arial, Verdana, Geneva, Sans-Serif;*/
}
.buttonGray:hover {
	background-color:#dbdbdb;
}

/* White button with black outline */
/* Should be declared after .buttonshape */
.buttonBlackOutline{
	color: #000;
	border-color: #000;
	border-width: 1.5px;
	background-color: #FFF;
}
.buttonBlackOutline:hover{
	color: #ffffff;
    background-color: #000000;
}
/* White button */
/* should be declared after .buttonshape */
.buttonWhite {
	background-color:#fff;
	color:#0099cc;
	/*font-family: Helvetica Neue, Helvetica, Arial, Verdana, Geneva, Sans-Serif;*/
	border:1px solid #0099cc;
	padding:0;
}
.buttonWhite:hover {
	background-color: #0099cc;
	color:#fff;
	text-decoration: none;
}
.buttonShape.buttonWhiteDisabled {
	opacity: 0.5;
	cursor: not-allowed;
	color: #0099cc;
	border:1px solid #0099cc;
	padding: 0;
}
.buttonShape.buttonWhiteDisabled:hover {
	background-color: #e7e7e7;
}
#comments-section a.disabled:hover {
	text-decoration: none;
}
.linkReveal {
	color:#0099cc;
	float:right;
	font-size:9pt;
	font-weight:normal;
	line-height: 23px;
	cursor:pointer;
}
.linkReveal:hover {
	text-decoration: underline;
}
.linkReveal span {
	display: inline-block;
	color:#a5aeba;
	text-decoration: none;
}
.rightBox {
	font-size: 10pt;
	padding-bottom: 10px;
}
.rightBox .rightBoxTitle {
	background:transparent url('/images/rhc-hdr-ribbon.gif') 0 0 no-repeat;
	color: #fff;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 1px;
	height: 47px;
	left: 0;
	padding:6px 0 0 10px;;
	text-transform: uppercase;
	top: 0;
	width: 342px;
	margin: 20px 0 0 0;
}
#colHead .floatLeft,#colHead .floatRight {
    text-transform: uppercase;
    font-size: 85%;
}
.floatLeft{
    float:left !important;
}
.floatRight {
    float:right;
}
#colHead {
    display: block;
    height: 25px;
}
.rightBox ol {
	padding-left:0;
	list-style: none;
	margin:-5px 0 0 0 ;
}
.rightBox li {
	line-height: 1.4;
	font-weight: bold;
    overflow: hidden;
}
.rightBox li a {
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rightBox ol.small li a {
	width: 90%;
}
.rightBox h4 {
	margin:10px 0 0 0;
	font-weight: 200;
	text-transform: uppercase;
	font-weight: 600;

}
.rightBox ul {
	list-style-type: none;
	margin: -5px 0 0 0;
}
.rightBox ul li span{
	color:#949292;
	font-weight: normal;
	float: right;
}

#follow-box {
	display:inline-block;
}
button.follow-button {
	padding:0;
	margin:0;
	background-color: #fff;
}
.follow-button, .message-button {
	line-height:18px;
	color:#0099cc;
	border:1px solid #0099cc;
	-webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    width:75px;
    text-transform: uppercase;
    font-size:11px;
    text-align:center;
    display: inline-block;
}
.follow-button:hover, .message-button:hover {
	background-color:#0099cc;
	color:#fff;
	cursor:pointer;
}
.follow-button.following {
	background-color:#0099cc;
	color:#fff;
}
.follow-button .follow-button-text:after {
    content: "Follow";
}

.follow-button.following .follow-button-text:after {
    content: "Following";
}

/* promo pages for not-logged-in users (create, manage groups, etc.) */
#promo-box {
	color:#333;
	font-size: 17pt;
}
.arrow-box {
	position: relative;
	background: #ffffff;
	border-width: 0px 2px 2px 2px;
	border-style: solid;
	border-color: #f90;
	border-radius:0px 0px 10px 10px;
}
.arrow-box:after, .arrow-box:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.arrow-box:after {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #ffffff;
	border-width: 15px;
	margin-left: -15px;
}
.arrow-box:before {
	border-color: rgba(255, 153, 0, 0);
	border-top-color: #f90;
	border-width: 18px;
	margin-left: -18px;
}
#promo-title {
	padding:0 60px;
	font-weight: bold;
	font-size: 23pt;
	text-align:center;
}
#promo-content {
	width:760px;
	margin:auto;
}
#promo-content ul {
	margin-top: 20px;
}
#promo-content li {
	margin-left:20px;
	color:#f90;
	margin-top: 5px;
	font-size: 15pt;
}
#promo-content li span {
	color:#777;
}
#promo-join-now {
	color: #f90;
	font-weight: bold;
	font-size: 26pt;
	margin: 14px 0;
	text-align: center;
}
#promo {
	text-align: center;
	margin-top:35px;
}

/*game state icons*/
.icon.gameState > span {
	display:none;

	position:absolute;
	border-radius:4px;
	width:auto;
	padding: 4px;
	z-index: 100;
	background-color: #ececec;
    color: #999;
    box-shadow: 2px 2px 0 #dbdbdb;
    -moz-box-shadow: 2px 2px 0 #dbdbdb;
    -webkit-box-shadow: 2px 2px 0 #dbdbdb;
    cursor: default;
    top:-1px;
    left:-1px;
    white-space:normal;
	line-height: 1rem;
}
.icon.gameState:hover > span, .icon.gameState > span:hover {
	display:block;
}
.icon.gameState.retired > span {
	width:240px;
}

/* facebook reconnect modal */
div[data-remodal-id=fb_reconnect_modal] .remodal-confirm {
	background-color: #f90;
	color: #fff;
	font-weight: 400;
	float: right;
}
div[data-remodal-id=fb_reconnect_modal] .remodal-confirm:hover {
	background-color: rgb(254,188,10);
	color: #fff;
}
div[data-remodal-id=fb_reconnect_modal] .remodal-cancel {
	background-color: #d8d8d8;
    color: #8f8f92;
    font-weight: 300;
    float: left;
}
div[data-remodal-id=fb_reconnect_modal] .remodal-cancel:hover {
	background-color: #e3e3e3;
    color: #8f8f92;
}
div[data-remodal-id=fb_reconnect_modal] button {
    font-size: 90%;
	padding: 10px 30px;
}

/* Hide this ad links styles */
.ad-hide {
	margin-top: 2px;
	background: none;
	text-align: right;
	display: inline-block;
	float: right;
}
.ad-hide-link {
	font-size: 12px;
	color: #a5a5a5;
	text-decoration: none;
	cursor: pointer;
}
.ad-hide-link:hover {
	text-decoration: none !important;
}

/* Shared pagination for our new pagination look and feel. This should eventually replace all other pagination */
#pagination {
	margin-top:30px;
	padding-bottom:20px;
	border-bottom:1px solid #dbdbdb;
	text-align:center;
	white-space:nowrap;
}
#pagination .pagenum {
	padding: 5px 9px;
	font-size: 1rem;
}
#page-numbers {
	display:inline;
	margin:0 10px;
}
#page-jump {
	text-align:right;
	padding-top:15px;
	font-size:.8rem;
}
#page-selector {
	display:inline;
	border: 1px solid #dbdbdb;
	padding:6px 6px;
	text-align:center;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}
#page-selector.invalid {
	box-shadow:0 0 2px 1px rgba(211, 89, 89, 0.9) inset, 0 0 2px 1px rgba(212, 89, 89, 0.9);
	border:none;
	outline:0;
	padding:7px;
}

.no-content {
	text-align:center;
}
.no-content-icon {
	display:inline-block;
	background-repeat: no-repeat;
}
#no-quizzes-icon {
	background-image:url('/images/No_Content_Icon.png');
	width:156px;
	height:110px;
}


/* Color style for "showdown red" buttons*/
.showdown-red {
	background-color: #ff5400 !important;
	cursor: pointer;
	transition: background 0.2s ease-in-out;
}
.showdown-red:hover {
    background-color: #f90 !important;
}
.showdown-red.disabled {
	pointer-events: none;
	opacity: .5;
}

/*********************
**********************
 Suggestions Bar
**********************
*********************/
#suggestions-bar {
    margin-bottom: 30px;
}

#suggestions-collapse-bar {
    background-color: #FFFFE6;
    width: 100%;
    font-size: 15px;
    height: 55px;
    border-bottom: 1px solid lightgrey;
    border-top: 1px solid lightgrey;
    display: table;
}

#suggestions-collapse-bar > div {
    margin: 17px 0 0 0;
    display: table-cell;
    vertical-align: middle
}

#collapse-bar-text {
    font-weight: 700;
    text-align: left;
    padding-left: 15px;
    letter-spacing: -1px;
    max-width: 300px;
}

#collapse-bar-ctas {
    width: 42%;
    text-align: center;
    display: table-cell;
}

#suggestions-bar.sb-expanded #collapse-bar-ctas {
    visibility: hidden;
}

.collapse-bar-cta {
    color: #0097CE;
    text-align: center;
    display: table-cell;
    line-height: 30px;
    width: 13%;
    text-decoration: none;
}

.collapse-bar-cta.bordered {
    border-right: 1px solid lightgrey;
}

.collapse-bar-cta.accomplished img {
    height: 10px;
}

.collapse-bar-cta.accomplished a.cta-text {
    color: #999999;
    cursor: default;
    pointer-events: none;
    text-decoration: none;
}

#collapse-bar-icon {
    height: 25px;
    width: 25px;
    background: url(/images/suggested_actions/gray-shelf-arrow.svg) no-repeat center;
    float: right;
    margin-right: 20px !important;
    cursor: pointer;

    -webkit-transition: transform 0.1s;
    -moz-transition: transform 0.1s;
    -ms-transition: transform 0.1s;
    -o-transition: transform 0.1s;
    transition: transform 0.1s;
}

#suggestions-bar.sb-collapsed #collapse-bar-icon {
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
}

#suggested-actions {
    display: table;
    table-layout: fixed;
    width: 100%;
    min-height: 183px;
}

#suggestions-bar.sb-collapsed #suggested-actions {
    display: none;
}

.suggested-action {
    display: table-cell;
    width: calc(100% / 3);
    text-align: center;
    border-bottom: 1px solid lightgrey;
}

.suggested-action.bordered {
    border-right: 1px solid lightgrey;
}

.suggested-action-icon {
    width: 50px;
    height: 50px;
    margin: 20px 0 10px 0;
}

.suggested-action-icon.unearned {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
}

.action-header, .action-header a {
    font-weight: 700;
    margin-bottom: 20px;
    text-decoration: none !important;
    color: #000 !important;
}

.suggested-action-cta {
    padding: 5px 20px;
    background-color: #FF9906;
    border-radius: 6px;
    color: white;
    display: inline-block;
    margin-bottom: 22px;
}

.suggested-action.accomplished {
    vertical-align: middle;
    background-color: #EEEEEF;
}
.suggested-action.accomplished .action-header {
    margin-bottom: 0;
}
.suggested-action.accomplished .action-subheader {
    font-size: 12px;
}
.suggested-action.accomplished .suggested-action-icon {
    margin-top: 0;
}

.suggested-action-progress {
    cursor: pointer;
}

.suggested-action-progress {
    text-decoration: none !important;
    color: #000;
}

#suggested-actions progress {
    /* Reset the default appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    border: none;
    border-radius: 290486px;
    display: block;
    height: 1rem;
    overflow: hidden;
    padding: 0;
    width: 60%;
    margin: auto;
    color: #FF9906;
    background-color: #DBDBDB;
    margin-bottom: 22px;
}

#suggested-actions progress::-moz-progress-bar {
    background: #FF9906;
    border-radius: 290486px;
}

#suggested-actions progress::-webkit-progress-value {
    background: #FF9906;
    border-radius: 290486px;
}

#suggested-actions progress::-webkit-progress-bar {
    background: #DBDBDB;
}

.suggested-action-progress {
    position: relative;
    bottom: 5px;
}

#suggested-actions .suggested-action-progress p {
    font-size: 12px;
    margin: 0 0 5px 0;
}

#suggestions-bar-loading {
    width: 100%;
    background: url(/images/Ring.svg) no-repeat center;
    -webkit-background-size: contain;
    background-size: contain;
}

#suggestions-bar-loading.sb-expanded {
    -webkit-background-size: 100px 100px;
    background-size: 100px 100px;
}

.suggested-action-condition {
    margin-bottom: 8px;
}

#hide-bar-link {
    font-size: 12px !important;
    color: #a5a5a5 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    float: right;
    margin-right: 10px;
    margin-top: 2px;
}

/* Browser compat */
#better-browser {
	margin: auto;
	width:85%;
	text-align:center;
}

#better-browser-download {
	transition: box-shadow 0.2s ease-in-out;
	background-image: url(/images/firefox-logo.svg);
	background-repeat: no-repeat;
	background-position:center;
	background-size: 715%;
	margin:auto;
	font-size:1.85em;
	width:60%;
	font-weight: bold;
}

#better-browser-download:hover {
	box-shadow:0px 0px 16px 4px #f90;
}

/* House Ad promos */
.sporcle-promo {
	display: flex;
}
.sporcle-promo em {
	font-style: normal;
}
.sporcle-promo .blurb a {
	text-decoration: underline;
}
.sporcle-promo .logo {
	background-image: url('/images/sporcle-logo.svg');
	width: 137px;
	height: 32px;
}
.sporcle-promo button {
	font-weight: bold;
	margin: 0;
	padding-left: 30px;
	padding-right: 30px;
}
.sporcle-promo .button {
	padding: 0;
}
.sporcle-promo .button:hover {
	background-color: transparent;
}
.sporcle-promo a.button:hover {
	text-decoration: none;
}
.sporcle-promo .close {
	width: 24px;
	height: 24px;
	cursor: pointer;
}

.sporcle-promo.horizontal {
	padding: 0.5rem 0;
}
.sporcle-promo.horizontal .promo-column {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}
.sporcle-promo.horizontal.blogroll .promo-column {
	padding-top: 1rem;
	padding-bottom: 1rem;
}
.sporcle-promo.horizontal .promo-column:first-child {
	padding-left: 1rem;
	padding-right: 2rem;
}
.sporcle-promo.horizontal .promo-column:nth-child(2) {
	padding-left: 2rem;
}
.sporcle-promo.horizontal .promo-column:last-child {
	padding-right: 1rem;
}
.sporcle-promo.horizontal .tag-lines {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	font-size: 1.5rem;
	font-weight: bold;
	white-space: nowrap;
}
.sporcle-promo.horizontal .tag-lines.large {
	font-size: 2.5rem;
}
.sporcle-promo.horizontal .blurb {
	margin-bottom: 1rem;
	line-height: 1.25rem;
}
.sporcle-promo.horizontal .footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.sporcle-promo.horizontal.orange .footer button {
	color: #000;
	background-color: #FFD400;
	border: 1px solid #FFD400;
	font-size: 12px;
	margin-top: 1rem;
	padding: 1rem;
	border-radius: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	height: 38px;
}
.sporcle-promo.imu {
	flex-direction: column;
	width: 300px;
	height: 250px;
	padding: 0 0.75rem;
	box-sizing: border-box;
}
.sporcle-promo.imu .tag-lines {
	display: flex;
	flex-direction: column;
	font-size: 1.5rem;
	font-weight: bold;
	padding: 0.75rem 0 0.5rem;
	flex: 0 0 auto;
}
.sporcle-promo.imu .blurb {
	font-size: 0.9rem;
	padding-top: 0.5rem;
	flex: 0 0 auto;
}
.sporcle-promo.imu .blurb p {
	margin-block-start: 0.25rem;
	margin-block-end: 0.25rem;
}
.sporcle-promo.imu .blurb p:first-child {
	margin-block-start: 0;
}
.sporcle-promo.imu .blurb p:last-child {
	margin-block-end: 0;
}
.sporcle-promo.imu .footer {
	display: flex;
	align-items: center;
	flex: 1 0 auto;
}

.sporcle-promo.virtual-trivia {
	background-color: #000;
	color: #fff;
}
.sporcle-promo.virtual-trivia em {
	color: #ffd000;
}
.sporcle-promo.virtual-trivia.horizontal .tag-lines {
	border-right: 1px solid #fff;
}
.sporcle-promo.virtual-trivia .blurb a {
	color: #fff;
	text-decoration: underline;
}
.sporcle-promo.virtual-trivia .footer button {
	background-color: #ffd000;
	color: #000;
}
.sporcle-promo.virtual-trivia .close {
	background-image: url('/images/whiteX.svg');

}

/* House Promo styles specific to adhesion */
.sporcle-promo.adhesion {
	z-index: 2000000000;
	width: 95%;
	max-width: 1500px; /* global max width */
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	display: none;
}
.sporcle-promo.adhesion.orange {
	border-top: 1px solid #000;
}

.sporcle-promo.adhesion .blurb {
	border:none;
	color:#000;
}

.sporcle-promo.orange {
	background-color: #f90;
	color: #000;
}
.sporcle-promo.orange.horizontal .tag-lines {
	border-right: 1px solid #000;
}
.sporcle-promo.orange.imu .tag-lines {
	border-bottom: 1px solid #000;
}
.sporcle-promo.orange .blurb a {
	color: #000;
	text-decoration: underline;
}
.sporcle-promo.orange .footer button {
	background-color: #000;
	color: #fff;
}
.sporcle-promo.orange .close {
	background-image: url('/images/blackX.svg');
	margin-left: 24px;
}
.sporcle-promo.gamepage-house-ad-cont {
	display:flex;
	margin-top: 38px;
    margin-bottom: 3px;
	flex-grow:1;
	position:relative;
	height:112px
}
.sporcle-promo.orange.gamepage {
	position:absolute;
	bottom:0;
	max-height:96px;
	max-width:596px;

}
.sporcle-promo.orange.gamepage .blurb {
	overflow:hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-height: min(1.25rem, 18px);
    font-size: min(1rem, 20px);
}
.sporcle-promo.orange.gamepage .button {
    margin: 0.25rem 0 0 0;
}
.sporcle-promo.orange.gamepage.horizontal .blurb {
    margin-bottom: 0;
}
.sporcle-promo.orange.gamepage .promo-column {
    padding-bottom: 0;
}
.sporcle-promo.orange.gamepage .promo-column.tag-lines {
    padding-bottom: .5rem;
}
.sporcle-promo.orange.gamepage .promo-column.link {
	overflow:hidden;
	text-overflow: ellipsis;
	max-height:90px;
}

.deleted-user{
	color: #909096;
    text-decoration: inherit;
}