/* reset
----------------------------------------------- */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}

/* typography
----------------------------------------------- */

body {
	font:13px/1.25 arial,helvetica,clean,sans-serif;
	/* for IE6/7 */ 
	*font-size:small;
	/* for IE Quirks Mode */
	*font:x-small;
}

/* Nudge down to get to 13px equivalent for these form elements */ 
select, input, button, textarea, button {font:99% arial,helvetica,clean,sans-serif;}

h1{font:1.8em/.8em arial,helvetica,clean,sans-serif; padding-top:.4em;}
h2{font:1.4em/.8em arial,helvetica,clean,sans-serif; padding-top:.2em; color:#3366ff}
h3{font:1.2em/1.2em arial,helvetica,clean,sans-serif}
h4{font:.8em/1.4em arial,helvetica,clean,sans-serif}
h5{font:.6em/1.6em arial,helvetica,clean,sans-serif}

a {color: #eb008b; text-decoration:none}
a:hover {color:#fff}

.quiz-meta a:hover, .main a:hover, .sidebar a:hover {color:#333}

.reverse a {color: #fff; text-decoration:none;}
.reverse a:hover {color:#eb008b;}

.question a {color:#333;display:block; padding: 7px 0 8px 15px;}
.question a:hover {background:url(/images/quiz-hilight.png) no-repeat 0 0; color:#eb008b}

.arrow {background:url(/images/arrow.png) no-repeat 0; color:#333; padding:0 0 0 10px;}

/* structure
----------------------------------------------- */

html {background:url(/images/bg-light.png); height: 100%;}
body {margin:0; background:url(/images/bg-dark2.png) repeat-x top; height: 100%;}
body.home {background:url(/images/bg-dark1.png) repeat-x top}
.wrap {height:100%}
.shell {width:956px; margin:0 auto; padding-bottom:100px}
.main {float:left;}
.sidebar {float:right; width:310px}
.fill { background:#fff}

/* header
----------------------------------------------- */

.head {
	background:url(/images/bg-top2.png) no-repeat top center;
	color:#fff; 
	height:80px;
	padding:20px 15px 0;
	}
/* body.home no longer has large logo */
body.gate .head {
	background:url(/images/bg-top1.png) no-repeat top center;
	height:110px;
	padding:40px 15px 0
	}
.logo{background:url(/images/flixiq-logo_small.png); width:100px; height:40px;}
body.gate .logo{background:url(/images/flixiq-logo.png); width:222px; height:84px;}
.logo h1 {text-indent:-9999em}
.login {float:right; padding:20px 0 0; 
  width: 400px; text-align:right;
}
.nav {text-align:right; padding: 5px 0 0}
.nav p {float:left}
	
/* quiz
----------------------------------------------- */

.quiz {
	background: url(/images/quiz-shadow.png)  no-repeat bottom center;
	width: 956px;
	padding: 0 0 52px
	}
.quiz .fill {height:352px;}

.quiz img {margin:10px; border: 1px solid}

.video {float:left; width:590px; height:332px}
.quiz-meta {float:right; /*width:350px*/; width: 344px; height:352px;position:relative;}

.question {padding: 25px 0 0;}
.question ul {padding: 7px 0 0;}
.q-tracker {position:absolute;bottom:0;right:10px;height:30px;width:100%}

/*.q-tracker li {background:url(/images/quiz-counter.png) 0 0;float:right;height:30px;width: 20px}
.q-tracker li .done {background: url(/images/quiz-counter.png) 0 30px;height:30px;width: 20px}
.q-tracker li .select {background: url(/images/quiz-counter.png) 0 60px;height:30px;width: 20px}
*/
.q-tracker li {
  background:url(/images/button-blank.png) transparent no-repeat 0 0;
  float:right;height:30px;width: 20px
}
.q-tracker li .todo {
  background:url(/images/button-blank.png) transparent no-repeat 0 0;
  float:right;height:30px;width: 20px
}
.q-tracker li .done {
  background: url(/images/button-empty.png) no-repeat 0 0;
  height:30px;width: 20px
}
.q-tracker li .select {
  background: url(/images/button-taken.png) transparent no-repeat 0 0;
  height:30px;width: 20px
}
.q-tracker li .correct {
  background: url(/images/button-right.png) no-repeat 0 0;
  height:30px;width: 20px
}
.q-tracker li .wrong {
  background: url(/images/button-wrong.png) no-repeat 0 0;
  height:30px;width: 20px
}
/* content
----------------------------------------------- */

.content {
	background: url(/images/content-shadow.png)  no-repeat bottom center;
	width: 600px;
	padding: 0 0 20px;
	clear:both;
	}
.content .fill {height:100px;padding:10px;} 
.content img {float:left;}
.challenge .about {
  width:200px;float:left; padding: 0 0 0 10px;
  position: relative; height: 100px;
}
.user .about {
  width:300px;float:left; padding: 0 0 0 10px;
  position: relative; height: 100px;  
}
.q-take {position: absolute; bottom: 0;}
.user .badges img {padding:8px}
.content .meta {height:100px; width:180px;float:right; padding: 0 0 0 10px; border-left: 1px solid #000}
.content .meta span {color:#333}
.quote {font:.8em/1.4em arial,helvetica,clean,sans-serif; font-style:italic;}
.title {color:fff; text-align:right; padding: 25px 15px 15px}
.title h1 { color:#fff; padding:0; float:left}

/* panel
----------------------------------------------- */

.panel {
	background: url(/images/panel-shadow.png)  no-repeat bottom center;
	width: 300px;
	padding: 0 4px 9px;
	clear:both;
	}
.panel .fill {padding:0 0 10px;}

.search {padding: 56px 4px 9px;}
.search h3 {background: url(/images/hilight.png) repeat-x; height: 32px; padding: 7px 25px 0 25px}
.search p {padding: 0 20px}
.searchform {padding: 20px 0 20px 20px;}
.seachfield {width:200px}

.sidebar .user {	padding: 12px 4px 9px;}
.sidebar .user .fill {min-height:145px; padding: 10px}
.sidebar .user .meta {margin-left:85px}

.add {	padding: 16px 4px 9px;}
.add .fill {min-height:165px; padding: 10px}

/* sliver
----------------------------------------------- */

.sliver {
	background: url(/images/sliver-shadow.png)  no-repeat bottom center;
	width: 95px;
	padding: 0 4px 10px;
	float:left;
	}
.sliver .fill {min-height:165px; padding: 10px}

/* misc.
----------------------------------------------- */

.footer {
	background:url(/images/bg-dark1.png);
  position: relative;
  margin-top: -100px; /* negative value of footer height */
  height: 100px;
	clear:both;
	} 
.foot {width:980px; margin:0 auto; padding-top:40px}
.foot .nav {color:#aaa}

/* misc.
----------------------------------------------- */

.float-l {float:left}
.float-r {float:right}

.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

ul a { 
/*  display: block; */
/*  float: left; causes problems displaying correct/wrong indication*/
/*  clear: left; */
}

/* channels
---------------------------------------------- */
/* allow room for 2 columns */
ul.channels {
  width: 290px;
  margin-left: 10px;
}

/* float and allow room for the widest item */
ul.channels li {
  float: left;
  width: 145px;
  padding: 5px 0;
}
/* this style should be applied to the next class to stop the float */
br {clear: left;}