/*************************************************************
 * RESET, from http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
/*:focus {
	outline: 0;
}*/
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}


.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */


/*************************************************************
 * GLOBAL THINGS
 */
a {
	color: #981C1F;
	text-decoration: none;
}
a:hover,
a:focus,
a:active {
	text-decoration: underline;
}

.upper {
	text-transform: uppercase;
}
strong {
	font-weight: bold;
}
em {
	font-style: italic;
}

/* Used for semi-transparent backgrounds. .transparency will still need width and height set for each case. http://www.stevenyork.com/tutorial/pure_css_opacity_and_how_to_have_opaque_children */
.transparency {
	opacity: 0.7;  
	filter: alpha(opacity=70);  
	-moz-opacity: 0.7;  
	background-color: #000;  
	position: absolute;  
	top: 0px;  
	left: 0px;  
}
.transparency-content {
	position: relative;
}


.left {
	float: left;
}
.right {
	float: right;
}
.last {
	margin-right: 0 ! important;
}
.row {
	width: 100%;
}

hr {
	margin: 1.5em 30px;
	border: none;
	border-bottom: 1px solid #98947B;
	clear: both;
	height: 1px;
}
#not-sidebar hr {
	margin-left: 0;
	margin-right: 0;
}

.bodytext p {
	margin: 1em 0;
}

.tk-1 {
	/* TypeKit adds Coolvetica font face. */
	font-weight: 500;
}

/*************************************************************
 * MAIN STRUCTURE
 */

body {
	text-align: center;
	min-width: 970px;
	font-family: Helvetica, Arial, sans-serif;
	color: #333;
	line-height: 1.3125em; /* 21px */
}
#container {
	text-align: left;
	width: 970px;
	margin: 0 auto 30px auto;
	position: relative;
	background: url(img/main_bg.png) 0 0 repeat-y;
}
#container .header {
	padding-top: 18px;
	width: 100%;
	background: url(img/main_bg_tb.png) 0 -18px no-repeat;
	border-top: 50px solid #fff;
	font-size: 0px;
}
#container .footer {
	height: 18px;
	width: 100%;
	background: url(img/main_bg_tb.png) 0 0 no-repeat;
	border-bottom: 15px solid #fff;
	font-size: 0px;
}
#main {
	width: 970px;
	position: relative;
	z-index: 100;
}
#content {
	width: 970px;
	position: relative;
}
/* Things within content that need to be within the beige background. */
.indented-l {
	margin-left: 63px;
}
.indented-r {
	margin-right: 63px;
}
.body-indent {
	margin-right: 63px;
}

.site-title {
	position: absolute;
	left: -3000px;
}

/* Title/nav on every page */
#skipnav {
	display: none;
}
#nav {
	position: absolute;
	top: -59px; /* Re-set in ie6.css and ie7.css */
	left: 157px;
	width: 596px;
	background: url(img/title.png) 85px 0 no-repeat;
	height: 250px;
}
#nav #home-link span {
	display: none;
}
#nav #home-link {
	display: block;
	position: absolute;
	top: 5px;
	left: 213px;
	width: 160px;
	height: 150px;
}
#nav ul {
	margin-top: 46px;
	height: 75px;
}
#nav li {
	margin-bottom: 0.1em;
	width: 194px;
}
#nav li a {
	color: #000;
	padding-right: 23px;
	background: url(img/nav.png) right 4px no-repeat;
	width: 171px;
	display: block;
	color: #333;
}
#nav li a:hover {
	text-decoration: none;
}
#nav li.l a:hover,
#nav li.l a.on {
	background-position: right -25px;
}
#nav li.r a {
	padding-right: 0;
	padding-left: 23px;
	background-position: left 4px;
}
#nav li.r a:hover,
#nav li.r a.on {
	background-position: left -25px;
}
#nav li.l {
	float: left;
	text-align: right;
}
#nav li.l2,
#nav li.l3 {
	clear: left;
}
#nav li.r {
	float: right;
	margin-top: -52px;
}
#nav li.r2,
#nav li.r3 {
	margin-top: -26px;
	clear: right;
}
#nav li.r3 {
	margin-top: 0px;
}

#channel4 {
	position: absolute;
	top: 0px;
	left: 878px;
}
#channel4 span {
	display: none;
}
#channel4 a {
	display: block;
	width: 38px;
	height: 50px;
	background: url(img/channel4_logo.png) 0 0 no-repeat;
}

#foot-links {
	width: 454px;
	height: 94px;
	background: url(img/foot_links_bg.jpg) 252px 88px no-repeat;
	padding-top: 60px;
	margin-top: 0.5em;
	margin-bottom: 3em;
	padding-left: 254px;
	position: relative;
	clear: both;
}
#illustration-footer {
	position: absolute;
	top: 0;
	left: 80px;
	width: 59px;
	height: 63px;
	background: url(img/illustration_footer.png) 0 0 no-repeat;
}
#foot-links ul {
	margin-left: 53px;
	padding: 88px 0 0 0;
}
#foot-links li {
	float: left;
	padding-right: 0.5em;
	margin-right: 0.5em;
	border-right: 2px solid #333;
	line-height: 1em ! important;
}
#foot-links li.last {
	border: none;
}
#foot-links a {
	color: #333;
}

#c4-footer-container {
	position: fixed;
	left: 0px;
	width: 100%;
	text-align: center;
	bottom: -134px;
    z-index: 2000;
}
.show#c4-footer-container {
    bottom: -12px;
}
    

/*************************************************************
 * BASIC BLOCKS OF CONTENT
 */
#top-row-spacer {
	/* Moves the top-row down without it having to use padding/margin which gets in the way of #nav. */
	height: 130px;
}
#top-row {
	position: relative;
}

body.videos #intro,
body.games #intro {
	width: 449px;
	margin-left: 252px;
}
body.attr1 #intro,
body.attr2 #intro,
body.attr3 #intro,
body.attr4 #intro,
body.attr5 #intro,
#intro {
	margin: 0 0 0 242px;
	padding: 0 6px 1em 6px;
	width: 459px;
	float: left;
	z-index: 10;
	position: relative;
}
body .no-indent#intro {
	margin-left: 63px;
}
body.hacks #intro {
	width: 651px;
	margin-top: 3em;
}
#intro h1,
#intro h2 {
	position: relative;
	left: auto;
	margin-bottom: 0.1em;
}
#intro h1 {
	color: #981C1F;
	margin-top: 1em;
}
#intro #subhead {
	margin-top: -0.3em;
}
.quote {
	float: right;
	margin: 1em 45px 1em 0;
	text-align: right;
	line-height: 1.429em;
	width: 193px;
	position: relative;
}
div.left .quote {
	float: none;
	margin: 1em 0 2em 0;
}
body.learning .quote {
	float: left;
	width: 511px;
	margin: 0 0 0 63px;
	padding-bottom: 2em;
	text-align: left;
	line-height: 2em;
}
body.learning .quote p {
	font-weight: bold;
}

body.learning .quote-text {
	text-transform: none;
}
div.left #boost {
	width: 222px;
}
div.left #boost h3 {
	margin-bottom: 0.5em;
}

#sidebar {
	width: 178px;
	float: right;
	margin: 300px 43px 0 0;
}
#sidebar .promo {
	margin-top: 2em;
}
#not-sidebar {
	width: 716px;
	float: left;
}
.indented-l#not-sidebar {
	width: 653px;
}

/* Thumbnails of games/videos. */
#highlights {
	clear: both;
	margin: 20px 0 0 92px;
	float: left;
	width: 624px;
}
#highlights h2 {
	margin-bottom: 0.3em;
}
#highlights .thumbs {
	margin-top: 18px;
}

/* On thumbnails and the big slide images on videos/games. */
.carousel li img { border: 3px solid #ccc; } /* Images with no attribute. */
.carousel li img.attr1, img.attr1 { border: 3px solid #981C1F; }
.carousel li img.attr2, img.attr2 { border: 3px solid #615e4d; }
.carousel li img.attr3, img.attr3 { border: 3px solid #5f803b; }
.carousel li img.attr4, img.attr4 { border: 3px solid #37555b; }
.carousel-vertical li img { border: none; } /* Cheat codes */
/* Hover/focus states */
a:hover .carousel li img,
a:focus .carousel li img,
a:active .carousel li img { border: 3px solid #fff; } /* Images with no attribute. */
a:hover .carousel li img.attr1, a:hover img.attr1,
a:focus .carousel li img.attr1, a:focus img.attr1,
a:active .carousel li img.attr1, a:active img.attr1 { border: 3px solid #d8585b; }
a:hover .carousel li img.attr2, a:hover img.attr2,
a:focus .carousel li img.attr2, a:focus img.attr2,
a:active .carousel li img.attr2, a:active img.attr2 { border: 3px solid #908f88; }
a:hover .carousel li img.attr3, a:hover img.attr3,
a:focus .carousel li img.attr3, a:focus img.attr3,
a:active .carousel li img.attr3, a:active img.attr3 { border: 3px solid #98b777; }
a:hover .carousel li img.attr4, a:hover img.attr4,
a:focus .carousel li img.attr4, a:focus img.attr4,
a:active .carousel li img.attr4, a:active img.attr4 { border: 3px solid #718c91; }
/*************************************************************
 * DASHBOARD
 */

#dashboard {
	height: 277px;
	position: absolute;
	top: 0;
	overflow: hidden;
	z-index: 100;
	 /* If you change these two figures, change in javsascript too. */
	left: 717px;
	width: 246px;
	cursor: default;
}
#dashboard a {
	color: #fff;
	text-decoration: underline;
}
#dashboard a:hover,
#dashboard a:focus,
#dashboard a:active {
	color: #333;
	background: #fff;
	text-decoration: none;
}
#grip {
	width: 26px;
	height: 83px;
	position: absolute;
	top: 96px;
	/* If you change the left and background-position, change in javscript too. */
	left: 0px;
	z-index: 10;
	cursor: pointer;
}
#dashboard .l {
	width: 22px;
	height: 277px;
	background: url(img/dashboard_bg_lr.png) 0 0 no-repeat;
	position: absolute;
	top: 0;
	left: 0;
}
#dash-slidable {
	width: 978px;
	height: 277px;
	margin-left: 22px;
	position: relative;
}
#dash-slidable .transparency {
	opacity: 0.92;
	filter: alpha(opacity=92);
	-moz-opacity: 0.92;
	background: #333;
	position: absolute;
	height: 277px;
	width: 978px;
	top: 0px;
	left: 0px;
	z-index: -1;
}
#dash-slidable #dash-slidable-content {
	position: relative;
	
}
.panel {
	width: 215px;
	height: 265px;
	position: absolute;
	top: 0;
	color: #fff;
	padding-top: 12px;
}
#panel-1 {
	left: 5px;
}
#panel-2 {
	left: 239px;
}
#panel-3 {
	left: 473px;
}
#panel-4 {
	left: 707px;
}

#panel-1 #loggedin {
	height: 52px;
	line-height: 0.75em;
}
#panel-1 #loggedin img {
	float: left;
	margin: 0 9px 2px 0;
}
#panel-1 #loggedin #logout {
}
#loggedin .username {
	text-transform: uppercase;
	overflow: hidden;
	height: 14px;
	line-height: 14px ! important;
	display: block;
}
#loggedin .level {
	display: block;
	overflow: hidden;
	margin: 1px 0 2px 0;
}

#panel-1 #loggedout {
	text-align: right;
	padding-right: 7px;
	height: 52px;
}
#panel-1 #loggedout a.login-button:active,
#panel-1 #loggedout a.login-button:focus,
#panel-1 #loggedout a.login-button:hover {
	background: none;
}
#panel-1 #loggedout p img {
	margin-bottom: 0.2em;
}
#panel-1 #login-waiting {
	height: 40px;
	padding-top: 12px;
	text-align: center;
}
#panel-1 .bars {
	clear: both;
	text-align: right;
	text-transform: uppercase;
	padding-top: 3px;
}
#panel-3 .thumbnail {
	margin: 0.5em 0;
}
#panel-3 .thumbnail a:hover,
#panel-3 .thumbnail a:active,
#panel-3 .thumbnail a:focus {
	background: none;
}
#score {
	padding-right: 7px;
}
#bars-inner {
	margin: 10px 0 10px 10px;
	padding: 9px 0 4px 0;
	border-top: 1px solid #818383;
	border-bottom: 1px solid #818383;
	float: left;
	width: 201px;
}
/* Most of the .bars styles are also used for the general Scoreboard page */
.bars .attr {
	height: 20px;
	background: url(img/score_bars.png) right 0px no-repeat;
	margin-bottom: 5px;
	width: 204px;
	clear: both;
}
.bars .attr5 {
	margin-left: 10px;
}
.bars .label {
	width: 79px;
	display: block;
	padding-top: 5px;
	margin-right: 9px;
	float: left;
}
.bars .bar {
	width: 113px;
	height: 16px;
	margin-top: 2px;
	display: block;
	float: left;
	overflow: hidden;
	position: relative;
}
.bars .slider {
	position: absolute;
	height: 16px;
	width: 113px;
	top: 0px;
	right: 113px;
	/* right position is set dynamically in the page. */
	background: url(img/score_bars.png) right -20px no-repeat;
}
.bars .attr2 .slider {
	background-position: right -36px;
}
.bars .attr3 .slider {
	background-position: right -52px;
}
.bars .attr4 .slider {
	background-position: right -68px;
}
.bars .attr5 .slider {
	background-position: right -84px;
}
.bars .total {
	display: none; /* Revealed on hover with javascript */
	position: absolute;
	padding: 0 3px 0 2px;
	top: 0px;
	left: 0px;
	color: #fff;
	line-height: 17px ! important;
	background: url(img/score_bars.png) right -100px no-repeat;
}
#panel-1 p#score-log {
	margin: 12px 3px 0 10px;
}
#panel-1 p#score-log a {
	color: #fff;
	display: block;
}
#panel-1 p#score-log a:hover,
#panel-1 p#score-log a:active,
#panel-1 p#score-log a:focus {
	color: #333;
	background: #fff;
}
#panel-1 p#score-log a#view-scores {
	float: left;
}
#dashboard-modesty {
	/* Used to hide the little gap that appears when the dashboard is open/closed.
	Revealed in javascript. */
	background: #333;
	opacity: 0.92;
	filter: alpha(opacity=92);
	-moz-opacity: 0.92;
	width: 2px;
	height: 277px;
	position: absolute;
	top: 0px;
	right: 7px;
	display: none;
}
#dashboard-r {
	width: 7px;
	height: 277px;
	background: url(img/dashboard_bg_lr.png) -44px 0 no-repeat;
	position: absolute;
	top: 0px;
	right: 0px;
}

.panel h3 {
	padding-bottom: 0.7em;
}
.panel table.scores {
	width: 100%;
	margin-bottom: 0.5em;
}

#achievements li {
	float: left;
	width: 32px;
	height: 32px;
	margin: 0 8px 5px 0;
	background-image: url('img/achievements.png');
	background-repeat: no-repeat;
}
#achievement-1 { background-position: -160px 0; }
#achievement-2 { background-position: -192px 0; }
#achievement-3 { background-position: -224px 0; }
#achievement-4 { background-position: -256px 0; }
#achievement-5 { background-position: -288px 0; }
#achievement-6 { background-position: -160px -32px; }
#achievement-7 { background-position: -192px -32px; }
#achievement-8 { background-position: -224px -32px; }
#achievement-9 { background-position: -256px -32px; }
#achievement-10 { background-position: -288px -32px; }
#achievement-11 { background-position: -160px -64px; }
#achievement-12 { background-position: -192px -64px; }
#achievement-13 { background-position: -224px -64px; }
#achievement-14 { background-position: -256px -64px; }
#achievement-15 { background-position: -288px -64px; }
#achievement-16 { background-position: -160px -96px; }
#achievement-17 { background-position: -192px -96px; }
#achievement-18 { background-position: -224px -96px; }
#achievement-19 { background-position: -256px -96px; }
#achievement-20 { background-position: -288px -96px; }
#achievement-1.won, #achievement-1:hover { background-position: 0 0; }
#achievement-2.won, #achievement-2:hover { background-position: -32px 0; }
#achievement-3.won, #achievement-3:hover { background-position: -64px 0; }
#achievement-4.won, #achievement-4:hover { background-position: -96px 0; }
#achievement-5.won, #achievement-5:hover { background-position: -128px 0; }
#achievement-6.won, #achievement-6:hover { background-position: 0 -32px; }
#achievement-7.won, #achievement-7:hover { background-position: -32px -32px; }
#achievement-8.won, #achievement-8:hover { background-position: -64px -32px; }
#achievement-9.won, #achievement-9:hover { background-position: -96px -32px; }
#achievement-10.won, #achievement-10:hover { background-position: -128px -32px; }
#achievement-11.won, #achievement-11:hover { background-position: 0 -64px; }
#achievement-12.won, #achievement-12:hover { background-position: -32px -64px; }
#achievement-13.won, #achievement-13:hover { background-position: -64px -64px; }
#achievement-14.won, #achievement-14:hover { background-position: -96px -64px; }
#achievement-15.won, #achievement-15:hover { background-position: -128px -64px; }
#achievement-16.won, #achievement-16:hover { background-position: 0 -96px; }
#achievement-17.won, #achievement-17:hover { background-position: -32px -96px; }
#achievement-18.won, #achievement-18:hover { background-position: -64px -96px; }
#achievement-19.won, #achievement-19:hover { background-position: -96px -96px; }
#achievement-20.won, #achievement-20:hover { background-position: -128px -96px; }

#panel-2 #achievement-desc {
	width: 100%;
	clear: left;
	margin-top: 5px;
}
#panel-4 div.scores {
	border-top: 1px solid #ccc;
	margin-top: 0.5em;
	padding-top: 0.5em;
}
#panel-4 h4 {
	margin-bottom: 0.2em;
}
#panel-4 table.scores td {
	padding-left: 5px;
}
#panel-4 table.scores .num {
	text-align: right;
}
#panel-4 div.scores p.scoreboard a {
	display: block;
	float: right;
}
#panel-4 div.scores p.scoreboard span.text {
	display: block;
	float: right;
	text-align: right;
}
#panel-4 div.scores p.scoreboard span.arrow {
	display: block;
	float: right;
	background: url('img/buttons_udlr.png') -29px 0 no-repeat;
	width: 11px;
	height: 15px;
	margin-left: 5px;
}
	
/*************************************************************
 * VIDEO/GAME index pages
 */

#slides {
	margin-bottom: 1em
}
#slides .slide {
	position: relative;
	width: 651px;
	height: 276px;
	overflow: hidden;
}
.slide-overlay {
	position: absolute;
	top: 235px;
	left: 0;
	width: 621px;
	padding: 8px 15px 12px 15px;
	float: left;
	color: #fff;
}
.slide-overlay h3 {
	margin-bottom: 0.25em;
}
.slide-overlay .transparency {
	width: 651px;
	height: 300px;
}
.slide-overlay a {
	color: #fff;
}
#slides p.scores {
	margin-top: 1em;
	line-height: 22px;
}
#slides p.scores img {
	vertical-align: bottom;
	margin-right: 5px;
}


/*************************************************************
 * QUIZ
 */
#quiz-container {
	margin-bottom: 6em;
}
#quiz-clip {
	width: 570px;
	overflow: hidden;
	position: relative;
}
#screens {
	float: left;
	position: absolute;
	top: 0;
	left: 0;
}
#screens .position {
	color: #333;
}
#screens .question {
	margin: 0.1em 0 1em 0;
}
#screens li.screen {
	float: left;
	width: 570px;
}
#screens li.answer  {
	width: 460px;
	position: relative;
	margin: 0 0 1em 55px;
}
#screens li.answer a {
	display: block;
	width: 100%;
	height: 100%;
	cursor: pointer;
	color: #000;
}
#screens li.answer a:hover,
#screens li.chosen a {
	text-decoration: none;
	color: #fff;
}
#screens li.answer .answer-body {
	display: block;
	background: #C9CBB7;
	padding: 9px 0;
}
#screens li.answer .answer-num {
	display: block;
	float: left;
	width: 26px;
	text-align: right;
}
#screens li.answer .answer-text {
	display: block;
	float: left;
	width: 414px;
	padding: 0 10px;
}
#screens li.answer .answer-header {
	background: url('img/answer_bg.png') 0 -9px no-repeat;
	height: 9px;
	width: 460px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
#screens li.answer .answer-footer  {
	background: url('img/answer_bg.png') 0 0 no-repeat;
	height: 9px;
	width: 460px;
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
}
#screens li.answer a:hover .answer-body,
#screens li.chosen .answer-body {
	background: #981C1F;
}
#screens li.answer a:hover .answer-header,
#screens li.chosen .answer-header  {
	background-position: 0 -27px;
}
#screens li.answer a:hover .answer-footer,
#screens li.chosen .answer-footer {
	background-position: 0 -18px;
}
#quiz-container .nextprev {
	height: 1.5em;
}
#quiz-container .prev {
	float: left;
	width: 45%;
	display: none;
	cursor: pointer;
}
#quiz-container .prev span.arrow {
	display: block;
	float: left;
	background: url('img/buttons_udlr.png') 0 0 no-repeat;
	width: 11px;
	height: 15px;
	margin-right: 5px;
	margin-top: 1px;
}
#quiz-container .next {
	float: right;
	width: 45%;
	text-align: right;
	display: none;
	cursor: pointer;
}
#quiz-container .next span.text {
	float: right;
}
#quiz-container .next span.arrow {
	display: block;
	float: right;
	background: url('img/buttons_udlr.png') -29px 0 no-repeat;
	width: 11px;
	height: 15px;
	margin-left: 5px;
	margin-top: 1px;
}
#screens #response-body {
	float: left;
	width: 450px;
	margin-right: 20px;
}
#screens #response-images {
	float: left;
	width: 100px;
}
#screens textarea {
	
}

/*************************************************************
 * For all the Video, Game and Hacking Happiness thumbnails.
 */

/*************************************************************
 * MAIN JCAROUSEL STYLES
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
.jcarousel-container {
	position: relative;
}
.jcarousel-clip {
	z-index: 2;
	padding: 0;
	margin: 0;
	overflow: hidden;
	position: relative;
}
.jcarousel-list {
	z-index: 1;
	overflow: hidden;
	position: relative;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
}
.jcarousel-list li,
.jcarousel-item {
	float: left;
	list-style: none;
	/* We set the width/height explicitly. No width/height causes infinite loops. */
	width: 75px;
	height: 75px;
}
/**
 * The buttons are added dynamically by jCarousel before
 * the <ul> list (inside the <div> described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */
.jcarousel-next {
	z-index: 3;
	display: none;
}
.jcarousel-prev {
	z-index: 3;
	display: none;
}

/*************************************************************
 * THE JCAROUSEL 'SKIN' styles
 */
.jcarousel-skin-superme .jcarousel-container-horizontal {
	background: url(img/tab_gradient_bg.png) 0 0 repeat-x;
	width: 784px;
	padding: 10px 20px 8px 30px;
}
.jcarousel-skin-superme .jcarousel-container-vertical {
	background: url(img/tab_hh_bg.png) 0 0 no-repeat;
	width: 482px;
	height: 391px;
	padding: 30px 20px 0 21px;
}
.jcarousel-skin-superme .jcarousel-clip-horizontal {
	width:  784px;
	height: 10em;
}
.jcarousel-skin-superme .jcarousel-clip-vertical {
	width:  482px;
	height: 365px;
}
.jcarousel-skin-superme .jcarousel-item-horizontal {
	margin-right: 19px;
	width: 141px;
	height: 10em;
}
.jcarousel-skin-superme .jcarousel-item-vertical {
	width: 482px;
	height: 115px;
	margin-bottom: 10px;
}
.jcarousel-skin-superme .jcarousel-item-placeholder {
	background: #fff;
	color: #000;
}

/* Horizontal Buttons */
.jcarousel-skin-superme .jcarousel-next-horizontal {
	position: absolute;
	top: 50px;
	right: 5px;
	width: 12px;
	height: 15px;
	cursor: pointer;
	background: transparent url(img/buttons_udlr.png) no-repeat -29px 0;
}
.jcarousel-skin-superme .jcarousel-next-horizontal:hover {
	background-position: -29px 0;
}
.jcarousel-skin-superme .jcarousel-next-horizontal:active {
	background-position: -28px 0;
}
.jcarousel-skin-superme .jcarousel-next-disabled-horizontal,
.jcarousel-skin-superme .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-superme .jcarousel-next-disabled-horizontal:active {
/*	cursor: default;
	background-position: -29px -24px;*/
	display: none ! important;
}
.jcarousel-skin-superme .jcarousel-prev-horizontal {
	position: absolute;
	top: 50px;
	left: 10px;
	width: 12px;
	height: 15px;
	cursor: pointer;
	background: transparent url(img/buttons_udlr.png) no-repeat 1px 0;
}
.jcarousel-skin-superme .jcarousel-prev-horizontal:hover {
	background-position: 1px 0;
}
.jcarousel-skin-superme .jcarousel-prev-horizontal:active {
	background-position: 0 0;
}
.jcarousel-skin-superme .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-superme .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-superme .jcarousel-prev-disabled-horizontal:active {
/*	cursor: default;
	background-position: 1px -24px;*/
	display: none ! important;
}

/* Vertical Buttons */
.jcarousel-skin-superme .jcarousel-next-vertical {
	position: absolute;
	bottom: 8px;
	left: 253px;
	width: 16px;
	height: 12px;
	cursor: pointer;
	background: transparent url(img/buttons_udlr.png) no-repeat -12px -12px;
	font-size: 1px;
}
.jcarousel-skin-superme .jcarousel-next-vertical:hover {
	background-position: -12px -12px;
}
.jcarousel-skin-superme .jcarousel-next-vertical:active {
	background-position: -12px -11px;
}
.jcarousel-skin-superme .jcarousel-next-disabled-vertical,
.jcarousel-skin-superme .jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-superme .jcarousel-next-disabled-vertical:active {
/*	cursor: default;
	background-position: -12px -36px;*/
	display: none ! important;
}
.jcarousel-skin-superme .jcarousel-prev-vertical {
	position: absolute;
	top: 8px;
	left: 253px;
	width: 16px;
	height: 12px;
	cursor: pointer;
	background: transparent url(img/buttons_udlr.png) no-repeat -12px 1px;
	font-size: 1px;
}
.jcarousel-skin-superme .jcarousel-prev-vertical:hover {
	background-position: -12px 1px;
}
.jcarousel-skin-superme .jcarousel-prev-vertical:active {
	background-position: -12px 0;
}
.jcarousel-skin-superme .jcarousel-prev-disabled-vertical,
.jcarousel-skin-superme .jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-superme .jcarousel-prev-disabled-vertical:active {
/*	cursor: default;
	background-position: -12px -23px;*/
	display: none ! important;
}

/* Variations for slim vertical carousel */
.carousel-slim .jcarousel-skin-superme .jcarousel-container-vertical {
	background: url(img/tab_hh_slim_bg.png) 0 0 no-repeat;
	width: 343px;
}
.carousel-slim .jcarousel-skin-superme .jcarousel-clip-vertical {
	width: 343px;
}
.carousel-slim .jcarousel-skin-superme .jcarousel-item-vertical {
	width: 343px;
}
.carousel-slim .jcarousel-skin-superme .jcarousel-next-vertical,
.carousel-slim .jcarousel-skin-superme .jcarousel-prev-vertical {
	left: 184px;
}


/*************************************************************
 * Styles for bits around the Jcarousel stuff.
 */
.carousel li h4 {
	font-weight: bold;
}
.carousel-scrollable  {
	margin-top: 0.8em;
	position: relative;
}
.carousel-scrollable h3 {
	width: 194px;
	height: 23px;
	background: url(img/tab_bg.png) 0 0 no-repeat;
	padding: 7px 0 5px 0;
	text-align: center;
}
.carousel-scrollable h3.wide {
	width: 294px;
	background: url(img/tab_bg_wide.png) 0 0 no-repeat;
}
.carousel-r-scrollable {
	background: url(img/tab_gradient_bg_r.png) 0 0 repeat-x;
	width: 10px;
	height: 155px;
	position: absolute;
	top: 35px;
	right: 0;
}
.carousel li a.thumb {
	display: block;
	line-height: 1px;
	position: relative;
}
.carousel li.watched span {
	position: absolute;
	width: 135px;
	height: 91px;
	top: 3px;
	left: 3px;
	background: url(img/thumbnail_replay.png) 0 0 no-repeat;
	z-index: 100;
}
#sidebar .carousel h3 {
	margin-bottom: 0.5em;
}
#sidebar .carousel li {
	margin-bottom: 1em;
}

/* Hacking happiness thumbnails */
.carousel-vertical li {
	clear: left;
}
.carousel-vertical li img {
	float: left;
}
.carousel-vertical li h4,
.carousel-vertical li p {
	margin-left: 150px;
}
.carousel-vertical p.tags {
	padding-top: 5px;
}

#not-sidebar p.carousel-hh-intro {
	width: 384px;
}

/* Standard, full width of page. */
.carousel-wide {
	width: 100%;
}

/* Front page carousel changes */
.carousel-highlights .jcarousel-skin-superme .jcarousel-container-horizontal {
	background: none;
	width: 594px;
	padding: 10px 12px 8px 18px;
}
.carousel-highlights .jcarousel-skin-superme .jcarousel-clip-horizontal {
	width:  594px;
	height: 10em;
}
.carousel-highlights .jcarousel-skin-superme .jcarousel-item-horizontal {
	margin-right: 8px;
}
.carousel-highlights .jcarousel-skin-superme .jcarousel-next-horizontal {
	right: 1px;
}
.carousel-highlights .jcarousel-skin-superme .jcarousel-prev-horizontal {
	left: 1px;
}

/* On Quiz page, we hide the carousel at first. */
.carousel-hidden {
	position: absolute;
	top: 0;
	left: -9999px;
}


/*************************************************************
 * HACKING HAPPINESS index/entry pages
 */
.hh-item {
	margin-bottom: 3em;
}
.hh-item .title {
	width: 651px;
	margin-bottom: 0.5em;
}
.hh-item .title h2 {
	margin: 0.3em 0;
	width: 471px;
	float: left;
	margin-right: 10px;
}
.hh-item .title .share {
	float: right;
	width: 170px;
	text-align: right;
	margin-top: 1em;
}

.hh-item .row .media {
	float: left;
	width: 410px;
	margin-right: 11px;
}
.hh-item .row .media img,
.hh-item .row .media embed,
.hh-item .text-wide {
	margin-bottom: 1em;
}
.hh-item .row .text {
	float: left;
	width: 230px;
}
.hh-item .text-header {
	height: 8px;
	width: 100%;
	background: url('img/hack_text_bg.png') 0 -8px no-repeat;
}
.hh-item .text-content {
	background: #C9CBB7;
	padding: 0.5em 16px;
}
.hh-item .text-footer {
	height: 8px;
	width: 100%;
	background: url('img/hack_text_bg.png') 0 -0 no-repeat;
}
.hh-item .quote {
	text-align: left;
	float: none;
	margin: 1em 0;
	width: auto;
}
.hh-item .quote-text {
	text-transform: none;
}
.hh-item .quote .name {
	display: block;
	float: right;
}

div.stat {
	width: 178px;
	margin-left: 35px;
	float: left;
}
#sidebar div.stat {
	margin: 2em 0 0 0;
	float: none;
}
div.stat p {
	text-align: center;
	margin-top: 0.5em;
}
#sidebar div.stat p {
	text-align: left;
}

#tag-cloud {
	margin: 5em 0 2em 0;
	line-height: 1.5625em;
}
#tag-cloud h2 {
	height: 36px;
	background: url('img/hh_tags_bg.png') 0 -9px no-repeat;
	padding: 6px 0 0 22px;
}
#tag-cloud p {
	background: #C9CBB7;
	padding: 0.5em 21px;
}
#tag-cloud p span {
	margin: 0 5px;
}
#tag-cloud #tag-cloud-footer {
	height: 9px;
	width: 100%;
	background: url('img/hh_tags_bg.png') 0 0 no-repeat;
}

#hack-form {
	margin-bottom: 3em;
}
#hack-form p {
	margin: 1em 0;
}
#hack-form #hack-loggedin,
#hack-form #hack-loggedout {
	display: none;
}

#all-hacks li {
	margin: 0.5em 0;
}

/*************************************************************
 * VIDEO/GAME
 */

#video-frame {
	width: 716px;
	position: relative;
	z-index: 10;
}
#video-frame .header {
	background: #981C1F url(img/video_bg_tb_1.png) 0 -17px no-repeat;
	width: 716px;
	padding: 0;
	border: none;
	font-size: 0px;
	height: 8px;
}
#video-frame .footer {
	background: #981C1F url(img/video_bg_tb_1.png) 0 -9px no-repeat;
	width: 716px;
	padding: 0;
	font-size: 0px;
	height: 8px;
	border: none;
}
.attr2#video-frame .header,
.attr2#video-frame .footer {
	background-image: url(img/video_bg_tb_2.png);
	background-color: #615e4d;
}
.attr3#video-frame .header,
.attr3#video-frame .footer {
	background-image: url(img/video_bg_tb_3.png);
	background-color: #5f803b;
}
.attr4#video-frame .header,
.attr4#video-frame .footer {
	background-image: url(img/video_bg_tb_4.png);
	background-color: #37555b;
}
#video-inner {
	background: #981C1F;
	padding: 0 8px;
	width: 700px;
	height: 431px;
	line-height: 1px;
	font-size: 0px;
}
#video-inner.game {
	height: 531px;
}
.attr2 #video-inner {
	background: #615e4d;
}
.attr3 #video-inner {
	background: #5f803b;
}
.attr4 #video-inner {
	background: #37555b;
}
.small#video-inner {
	width: 650px;
	height: 431px;
	padding: 0;
}
#flash-container {
	width: 700px;
	height: 250px;
	padding-top: 150px;
	background: #ccc;
	color: #666;
	text-align: center;
}
#flash-container a {
	color: #666;
	text-decoration: underline;
}
.game #flash-container {
	height: 300px;
	padding-top: 200px;
}
#flash-container p {
	line-height: 1.5em ! important;	
}

#controls {
	height: 31px;
	background: #333;
	color: #fff;
	padding: 0 14px;
	width: 672px;
}
.small #controls {
	width: 622px;
}
#controls p.embed {
	float: left;
	width: 70%;
	padding-top: 0.35em;
}
#controls input.text {
	border-width: 0px;
	padding: 0.2em 3px;
	width: 250px;
}
#controls p.buttons {
	float: right;
	text-align: right;
	width: 25%;
	padding-top: 7px;
}
#controls .button {
	display: block;
	width: 22px;
	height: 22px;
	background: url(img/buttons.png) 0 0 no-repeat;
	float: right;
	margin: 4px 0 0 14px;
}
#controls .button span {
	display: none;
}
#controls .share {
	background-position: -22px 0;
}
#video-desc {
	float: left;
	width: 716px;
}
#video-desc .illustration {
	width: 204px;
	height: 137px;
	float: left;
	background: url(img/illustration_film.png) 40px 3px no-repeat;
}
#video-desc .blurb {
	width: 512px;
	float: left;
	background: #981C1F;
	color: #fff;
}
.attr2#video-desc .blurb {
	background: #615e4d;
}
.attr3#video-desc .blurb {
	background: #5f803b;
}
.attr4#video-desc .blurb {
	background: #37555b;
}
#video-desc .blurb a {
	color: #fff;
	text-decoration: underline;
}
#video-desc .blurb a:hover,
#video-desc .blurb a:focus,
#video-desc .blurb a:active {
	background: #fff;
	color: #981C1F;
	text-decoration: none;
}
.attr2#video-desc .blurb a:hover, .attr2#video-desc .blurb a:focus, .attr2#video-desc .blurb a:active { color: #615e4d; }
.attr3#video-desc .blurb a:hover, .attr3#video-desc .blurb a:focus, .attr3#video-desc .blurb a:active { color: #5f803b; }
.attr4#video-desc .blurb a:hover, .attr4#video-desc .blurb a:focus, .attr4#video-desc .blurb a:active { color: #37555b; }

#video-desc h2 {
	padding: 0.2em 16px;
}
#video-desc p {
	padding: 0 16px 0.3em 16px;
	line-height: 1.214em; /* 17px */
}
#video-desc p.desc {
	margin-bottom: 1em;
}
#video-desc .footer {
	background: #981C1F url(img/video_bg_tb_1.png) -204px 0 no-repeat;
	width: 512px;
	position: relative;
	padding: 0;
	font-size: 0px;
	height: 9px;
	border: none;
}
.attr2#video-desc .footer {
	background-image: url(img/video_bg_tb_2.png);
	background-color: #615e4d;
}
.attr3#video-desc .footer {
	background-image: url(img/video_bg_tb_3.png);
	background-color: #5f803b;
}
.attr4#video-desc .footer {
	background-image: url(img/video_bg_tb_4.png);
	background-color: #37555b;
}

#high-score-alert {
	/* Message when the user beats their score. */
	position: absolute;
	top: 166px;
	left: 275px;
	width: 150px;
	height: 148px;
	display: none;
}

.permalink {
	margin-top: 0.3em;
	float: right;
}

.quiz-teaser {
	width: 222px;
	margin-top: 31px;
	margin-bottom: 2em;
}
.quiz-teaser-wide {
	float: left;
	width: 100%;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}
.quiz-teaser p {
	width: 222px;
}
.quiz-teaser-left p.description {
	border-top: 1px solid #981C1F;
	border-bottom: 1px solid #981C1F;
	padding: 1.5em 2px;
	margin-bottom: 0.5em;
}
.quiz-teaser-wide .quiz-teaser-left {
	width: 222px;
	float: left;
}
.quiz-teaser-wide .quiz-teaser-right {
	float: left;
	width: 401px;
	margin-left: 30px;
}
.quiz-teaser-wide .quiz-teaser-right h3 {
	margin-top: 0.5em;
	margin-bottom: 0.3em;
	font-weight: bold;
}
.quiz-teaser-wide .quiz-teaser-right p,
.quiz-teaser p.permalink {
	width: auto;
}
.quiz-teaser h3.tk-1 {
	margin: 0 0 0.5em 0;
	padding: 0 2px;
}
.quiz-teaser-wide h3.tk-1 {
	border-top: 1px solid #981C1F;
	border-bottom: 1px solid #981C1F;
	padding: 0.2em 2px 0.3em 2px;
	margin-bottom: 0.2em;
}
#sidebar .quiz-teaser {
	margin-top: 1em;
	width: 178px;
}


/*************************************************************
 * LEARNING and GAMES
 */

.big-thumb {
	position: relative;
}
.big-thumb .overlay {
	position: absolute;
	top: 95px;
	left: 3px;
	width: 289px;
	height: 69px;
	background: #000;
	color: #fff;
	padding: 10px;
}
.overlay h4 {
	margin-bottom: 10px;
}
.overlay a {
	color: #fff;
}

.bodytext p {
	margin: 0 0 1em 0;
}
#reveal-extended {
	display: none;
	height: 1.2em;
	text-align: right;
	float: right;
	padding-right: 10px;
}
#reveal-extended a span {
	display: block;
	float: left;
	text-align: baseline;
	width: 10px;
	height: 10px;
	margin: 0.3em 5px 0 0;
	background: url('img/button_plus.png') 0 0 no-repeat;
}

/*************************************************************
 * 'STATIC' PAGES
 */

#makers-list li {
	float: left;
	width: 144px;
	height: 140px;
	margin-right: 19px;
}
h3#production,
#makers-intro {
	margin-bottom: 1em;
}

/* Site map on help page */

h3#sitemap {
	font-weight: bold;
}
.page-url {
	margin-top: 1em;
}
.page-url h4 {
	font-weight: bold;
}
.page-url ul {
	list-style-type: disc;
	margin-left: 20px;
}

.stats #not-sidebar h3 {
	margin: 1em 0;
}
.stats #not-sidebar p {
	margin: 1em 0;
}
.stats table {
	width: 620px;
	margin-bottom: 2em;
}
.stats th,
.stats td {
	padding: 0.3em 10px 0.2em 10px;
	border-bottom: 1px solid #ccc;
}
.stats th {
	font-weight: bold;
}
.stats .num {
	text-align: right;
}



/*************************************************************
 * SCOREBOARDS
 */

#intro-progress {
	text-align: right;
	padding-right: 50px;
}
#intro-progress span.percent {
	font-weight: bold;
}
#scoreboard-intro {
	width: 653px;
	margin-bottom: 1em;
}
#scoreboard-intro .blurb {
	width: 480px;
	margin-right: 20px;
	float: left;
}
#scoreboard-intro h2 {
	margin-bottom: 0.2em;
}
#scoreboard-intro h3 {
	font-weight: bold;
}
#scoreboard-intro #level-illustration {
	width: 120px;
	height: 141px;
	float: left;
	background-position: 0 0;
	background-repeat: no-repeat;
}
.level1#level-illustration { background-image: url('img/levels/1.png'); }
.level2#level-illustration { background-image: url('img/levels/2.png'); }
.level3#level-illustration { background-image: url('img/levels/3.png'); }
.level4#level-illustration { background-image: url('img/levels/4.png'); }
.level5#level-illustration { background-image: url('img/levels/5.png'); }
.level6#level-illustration { background-image: url('img/levels/6.png'); }

.board-row {
	width: 656px;
	background: url(img/board_row_bg.png) 0 35px repeat-x;
	margin-bottom: 1em;
}
.board {
	width: 319px;
	margin-right: 17px;
	float: left;
}
.board h3 {
	width: 104px;
	height: 27px;
	background: url(img/board_tab_bg.png) 0 0 no-repeat;
	font-weight: bold;
	padding: 8px 15px 0 15px;
	text-align: center;
}
.board-body {
	width: 286px;
	padding: 0.5em 12px 0.7em 20px;
}
.board-body p.desc {
	margin-bottom: 1em;
}
.board-body .board-loggedout {
	height: 150px;
}
.board-body .bars {
	margin-top: 0.5em;
}
/* Overriding the .bars .attr styles set in the Dashboard section. */
.board-body .bars .attr {
	background-position: 24px -116px;
	width: 286px;
	margin-bottom: 1em;
}
/* These vertical offsets are repeated above in the other .bars .attr section. */
.board-body .bars .attr2 .slider {
	background-position: 0 -36px
}
.board-body .bars .attr3 .slider {
	background-position: 0 -52px
}
.board-body .bars .attr4 .slider {
	background-position: 0 -68px
}
.board-body .bars .label {
	width: 13px;
	padding-top: 3px;
	padding-right: 5px;
	text-align: right;
}
.board-body .bars .name {
	width: 136px;
	display: block;
	margin-left: 10px;
	padding-top: 3px;
	float: left;
	overflow: hidden;
	white-space: nowrap;
}
.board-body .bars .name img {
	vertical-align: text-bottom;
	margin-left: 5px;
}
.board-body hr {
	margin: 0.3em 0 0.5em 0;
}
.board-body .loggedout {
	height: 230px;
}
.board-body .loggedout p {
	margin-top: 1em;
}

#facebook-link {
	padding-top: 2em;
}
#facebook-link h3 {
	margin-bottom: 0.5em;
}
#facebook-link .left {
	width: 364px;
	margin-right: 10px;
}
#facebook-link .right {
	width: 220px;
	text-align: left;
	float: left;
}


/* table.scores used both in the Dashboard and on the Game Entry page. */
table.scores td {
	vertical-align: top;
	padding-bottom: 0.4em;
}
table.scores td.pos {
	text-align: right;
	padding-right: 5px;
}
table.scores td.score {
	text-align: right;
	padding-left: 5px;
}
#friends-scores {
	width: 250px;
	margin: 1em 0;
}
#friends-scores table.scores {
	width: 100%;
	margin-bottom: 1em;
}

/* In sidebar */
body.scoreboard #sidebar {
	width: 191px;
	margin-right: 47px;
}
#user-scores {
	width: 171px;
	padding: 0.7em 10px;
	background: url('img/scoreboard_sidebar_bg.png') 0 0 no-repeat;
}
#user-scores h4 {
	margin: 0.5em 0 0.3em 0;
	padding: 0 2px;
	font-weight: bold;
	border-bottom: 1px solid #79776E;
}
#user-scores ul {
	margin-bottom: 1em;
}
#user-scores li {
	margin-bottom: 0.3em;
}
#user-scores li span.name {
	float: left;
	width: 122px;
	margin: 0 3px;
}
#user-scores li span.score {
	float: left;
	width: 40px;
	text-align: right;
	margin-right: 3px;
}


/*************************************************************
 * JQUERY SLIDEVIEWER
 */

/*preload classes*/
.svw {width: 50px; height: 20px; background: #fff;}
.svw ul {position: relative; left: -999em;}

#slides {
	/* Not strictly needed - set in js - but reserves the space and stops things jumping around. */
	width: 651px;
	height: 276px;
}
/*core classes*/
.stripViewer { 
	position: relative;
	overflow: hidden; 
	margin: 0 0 1px 0;
}
.stripViewer ul { /* this is your UL of images */
	margin: 0;
	padding: 0;
	position: relative;
	left: 0;
	top: 0;
	width: 1%;
	list-style-type: none;
}
.stripViewer ul li { 
	float: left;
}
.stripTransmitter {
	position: absolute;
	top: 245px;
	left: 630px;
	overflow: auto;
}
.stripTransmitter ul {
	margin: 0;
	padding: 0;
	position: relative;
	list-style-type: none;
}
.stripTransmitter ul li {
	width: 19px;
	float: left;
	margin: 0 9px 1px 0;
}
.stripTransmitter a {
	display: block;
	width: 19px;
	height: 19px;
	background: url("img/buttons_slider.png") 0 0 no-repeat;
}
.stripTransmitter .button-1 a {
	background-position: -26px 0;
}
.stripTransmitter .button-2 a {
	background-position: -53px 0;
}
.stripTransmitter a span {
	display: none;
}


/*************************************************************
 * ILLUSTRATIONS
 *
 * NOTE: The correct 'top' of #illustration-2 is always set in superme.js
 */

#illustration-1,
#illustration-2,
#illustration-3,
#illustration-4 {
	position: absolute;
	z-index: 50;
}
#illustration-4 {
	background: url(img/illustration_abacus.png) 0 0 no-repeat;
	width: 96px;
	height: 187px;
	top: 665px;
	left: 940px;
}
body.attr4 #illustration-4 {
	display: none;
}

/* body.home whatever attribute is featured on the home page */
/* body.videos and body.game are overridden on Entry pages with the appropriate attribute images. */
body.home #container #illustration-1,
body.videos #illustration-1,
body.games #illustration-1 {
	background: url(img/bg_home_1.png) 0 0 no-repeat;
	width: 71px;
	height: 48px;
	top: 0px;
	left: 65px;
	z-index: auto;
}
body.home #container #illustration-2,
body.videos #illustration-2,
body.games #illustration-2 {
	background: url(img/bg_home_2.png) 0 0 no-repeat;
	width: 257px;
	height: 363px;
	top: 0;
	left: -64px;
	z-index: 50;
}
body.videos #illustration-2,
body.games #illustration-2 {
	background-image: url(img/bg_home_2a.png);
	width: 241px;
	left: 0px;
}
body.home #container #illustration-3,
body.videos #illustration-3,
body.games #illustration-3 {
	display: none;
}

/* Attribute images */
body.attr1 #illustration-2 {
	background: url(img/bg_attr1_2.png) 0 0 no-repeat;
	width: 318px;
	height: 146px;
	top: 0;
	left: 707px;
	z-index: 1000;
}
body.attr2 #illustration-1 {
	background: url(img/bg_attr2_1.png) 0 0 no-repeat;
	width: 104px;
	height: 69px;
	top: 74px;
	left: 50px;
}
body.attr2 #illustration-2 {
	background: url(img/bg_attr2_2.png) 0 0 no-repeat;
	width: 268px;
	height: 230px;
	top: 0;
	left: 685px;
}
body.attr3 #illustration-1 {
	background: url(img/bg_attr3_1.png) 0 0 no-repeat;
	width: 78px;
	height: 96px;
	top: 76px;
	left: 67px;
}
body.attr3 #illustration-2 {
	background: url(img/bg_attr3_2.png) 0 0 no-repeat;
	width: 385px;
	height: 420px;
	top: 0;
	left: 672px;
}
body.attr4 #illustration-1 {
	background: url(img/bg_attr4_1.png) 0 0 no-repeat;
	width: 278px;
	height: 238px;
	top: 37px;
	left: -79px;
	z-index: 1000;
}
body.attr4 #illustration-2 {
	background: url(img/bg_attr4_2.png) 0 0 no-repeat;
	width: 300px;
	height: 595px;
	top: 0;
	left: 740px;
}
body.attr4 #illustration-3 {
	background: url(img/bg_attr4_3.png) 0 0 no-repeat;
	width: 532px;
	height: 2px;
	top: 191px;
	left: 200px;
	z-index: 1000;
}
body.attr5 #illustration-1,
body.help #illustration-1 {
	background: url(img/bg_attr5_1.png) 0 0 no-repeat;
	width: 308px;
	height: 161px;
	top: -1px;
	left: -79px;
}
body.attr5 #illustration-2,
body.help #illustration-2 {
	background: url(img/bg_attr5_2.png) 0 0 no-repeat;
	width: 244px;
	height: 280px;
	top: 0;
	left: 685px;
}
body.attr5 #illustration-3,
body.help #illustration-3 {
	background: url(img/bg_attr5_3.png) 0 0 no-repeat;
	width: 225px;
	height: 63px;
	top: 4px;
	left: 635px;
	z-index: 1000;
}



/*************************************************************
 * MESSAGE BLOCK
 */
#message {
	position: fixed;
	left: 0px;  /* Will be set in javascript. */
	top: 0px;
	width: 500px;
	display: none; /* May be revealed by javascript. */
	z-index: 2000;
}
#message-content {
	padding: 0.7em 16px 0.5em 16px;
	background-color: #981C1F;
	color: #fff;
	text-align: left;
}
.achievement#message #message-content,
.levelup#message #message-content {
	background-color: #ffb932;
	color: #333;
}
#message-footer {
	height: 7px;
	width: 100%;
	background: url('img/message_bg.png') 0 0 no-repeat;
}
.achievement#message #message-footer,
.levelup#message #message-footer {
	/* yellow */
	background-position: 0 -33px;
}
#message a {
	color: #fff;
	text-decoration: underline;
}
.achievement#message a,
.levelup#message a {
	color: #333;
}
#message a#post-to-facebook {
	text-decoration: none;
}
#message h3 {
	font-weight: bold;
	margin-bottom: 0.2em;
}
#message a.arrow span {
	display: none;
}
#message a.arrow {
	display: block;
	width: 27px;
	height: 26px;
	background: url('img/message_bg.png') 0 -7px no-repeat;
	margin-top: 0.3em;
	text-decoration: none;
}
.achievement#message a.arrow,
.levelup#message a.arrow {
	/* yellow */
	background-position: -27px -7px;
}


/*************************************************************
 * ALL FONT SIZES
 */

/* All based on the default font-size of 16px */

.bars .attr,
#dashboard #panel-1 p#score-log,
#dashboard #panel-1 .level,
#dashboard #loggedout p,
#dashboard #panel-1 #logout,
.carousel p.desc,
#sidebar .carousel p.desc,
.carousel p.tags,
#sidebar #hack-form p,
.board-body p.desc,
#achievement-hover *,
.hh-item p.tags,
#user-scores li {
	font-size: 0.6875em; /* 11px */
	line-height: 1.182em; /* 13px */
}
.quote p .name,
#dashboard #score,
#dashboard table.scores td,
#dashboard p.no-js,
#dashboard #panel-2 p,
#dashboard #panel-3 p,
#dashboard #panel-4 p,
div.stat p,
.hh-item p,
p.carousel-hh-intro,
#all-hacks li,
#friends-scores table.scores td,
#friends-scores p,
#makers-list,
#boost p,
#facebook-link p  {
	font-size: 0.75em; /* 12px */
	line-height: 1.25em; /* 15px */
}
#intro p,
.carousel h4,
#sidebar .carousel h4,
#controls p,
.quiz-teaser p,
#sidebar .quiz-teaser p,
#quiz-container .nextprev a,
#intro-progress  {
	font-size: 0.8125em; /* 13px */
	line-height: 1.308em; /* 17px */
}

body.home #intro p,
#sidebar p,
#video-desc p,
#highlights p.sub,
.slide-overlay p,
.bodytext,
#foot-links li,
.quiz-teaser-wide .quiz-teaser-right h3,
.board-body p,
#dashboard #loggedin .username,
#user-scores h4,
#message h3,
#message p,
#message #post-to-facebook,
#makers-intro {
	font-size: 0.875em; /* 14px */
	line-height: 1.357em; /* 19px */
}
.carousel-vertical h4,
.board-body .rank,
.hh-item .text-wide p,
#screens li.answer,
#screens #response-body {
	font-size: 0.9375em; /* 15px */
	line-height: 1.333em; /* 20px */
}
.quote p span.quote-text,
#screens textarea {
	font-size: 1em; /* 16px */
	line-height: 1.25em; /* 20px */
}
#tag-cloud h2 {
	font-size: 1.125em; /* 18px */
	line-height: 1.2222em; /* 22px */
}
h3#sitemap,
.stats #not-sidebar h3,
.carousel h3,
#facebook-link h3,
#sidebar h2,
#boost h3,
#nav li,
p.question {
	font-size: 1.25em; /* 20px */
	line-height: 1.2em; /* 24px */
}
.carousel h3 {
	line-height: 1.15em; /* 23px */
}
body.makers h3,
.slide-overlay h3,
#intro p#subhead,
#sidebar .quiz-teaser h3,
#user-scores h3 {
	font-size: 1.3125em; /* 21px */
	line-height: 1.238em; /* 26px */
}
h2,
body.learning .quote p,
p.position {
	font-size: 1.5625em; /* 25px */
	line-height: 1.12em; /* 28px */
}
body.scoreboard #intro p#subhead {
	font-size: 1.6875em; /* 27px */
}
.quiz-teaser h3.tk-1 {
	font-size: 1.8125em; /* 29px */
	line-height: 1em; /* 29px */
}
#scoreboard-intro h2 {
	font-size: 2em; /* 32px */
	line-height: 1em; /* 32px */
}
h1,
#intro h2,
.hh-item .quote p span.quote-text {
	font-size: 2.1875em; /* 35px */
	line-height: 1.229em; /* 43px */
}

.tag-1 { font-size: 0.6875em; } /* 11px */
.tag-2 { font-size: 0.8125em; } /* 13px */
.tag-3 { font-size: 1em; } /* 16px */
.tag-4 { font-size: 1.25em; } /* 20px */
.tag-5 { font-size: 1.5625em; } /* 25px */


/* Styles below are modifications on a previously-set font-size, ie, not 16px */


.hh-item .quote p .name {
	font-size: 1em;
}
#controls input.text {
	font-size: 0.846em; /* 11px (based on 13px) */
}
.board-body .bars .label,
.board-body .bars .name {
	font-size: 1.091em; /* 12px (based on 11px) */
}
a.more {
	font-size: 0.857em; /* 12px (based on 14px) */
}
#dashboard #score span {
	font-size: 1.5em; /* 18px (based on 12px) */
}
.carousel-vertical h4 strong {
	font-size: 1.333em; /* 20px (based on 15px) */
}
#intro-progress span.percent {
	font-size: 3.154em; /* 41px (based on 13px) */
	line-height: 1.22em; /* 50px */
}
#controls p {
	font-size: 13px;
}
#flash-container p {
	font-size: 16px;
}
#flash-container p.tk-1 {
	font-size: 30px;
}