.usersnap75 { height: 75px; width: 75px; overflow:hidden; }
.usersnap75 img {min-height: 75px; min-width: 75px; }

.cloud1 {font-size:12px;}
.cloud2 {font-size:14px;}
.cloud3 {font-size:16px;}
.cloud4 {font-size:18px;}	
.cloud5 {font-size:20px;}		
.cloud6 {font-size:22px;}			
.cloud7 {font-size:24px;}

.vidsq100 {height:100px; overflow:hidden; float:left;}
.vidsq100 img {width: 177px; margin-top: -15px; margin-left:0px;  }

.video { height: 342px; overflow: hidden;}
.quiz .video img { width: 590px; }

body.player {
  background: transparent;
  height: 404px;
  width: 956px;  
}

.pitch {text-align: center; margin:0px auto; width: 100%;}
.pitch h1 {color: #fff; margin: -20px 0; line-height: 2em;}

input.lrg {
  font-size: 24px;
  color: #555;
  height: 1.5em;
  width: 18em;
  text-align: center;
}

.right {float:right; padding-right: 2px;}
#notice {width: 100%; background-color: black; padding: 2px; margin: 2px 0;
  text-align:center; color: #3366FF;
}

/* video controls
---------------------------------------- */
.record {background: url(/images/record48.png) transparent no-repeat;}
.stop {background: url(/images/stop48.png) transparent no-repeat;}
.recording {background: url(/images/recordpress48.png) transparent no-repeat;}
/* IEPNGfix mucks up the image positioning, e.g. 271px 123px to 0 0 
   consider making an overlay image equal to video size with actual control in middle
 */
.replay {background: url(/images/repeat48.png) transparent no-repeat 50% 50%;}
.playfull {background: url(/images/play48.png) transparent no-repeat;}
.goplay {background: url(/images/replay48.png) transparent no-repeat 50% 50%;}
.play {background: url(/images/play48.png) transparent no-repeat 50% 50%;}

#sticker { width:590px; height:342px; cursor: pointer;}
#plastic {
  background: url(/images/blackbar.png) repeat-x 0% 100%;
  width:590px; 
  height:332px; 
}
#curtain {
  background: url(/images/curtain.jpg) no-repeat 0 0;
  width:590px; 
  height:332px;
}

.quiz .embed {/*border: 1px solid;*/ margin: 10px;}

body.gate .logo{background:url(/images/flixiq-logo.png); width:222px; height:84px;}
.gate .main {clear:left;}

/* quizbox modes 
----------------------------------*/
#quizbox.browse {display:none;}

#quizbox.home {display:block;}
#quizbox.gate {display:none;}

#quizbox.popup {
  position:absolute; 
/*  top: 165px;*/
  z-index: 2;
}
#quizbox.popup .quiz {
/*  background: none;*/
}

.quiz_overlay {
  background-color: lightgrey;
  opacity: 0.5;
  /* IE7/6 uses filter instead of opacity */
  filter: alpha(opacity=50);
  position:fixed;
  width: 100%;
  top: 0px; bottom: 0px; left: 0px; right: 0px;
  z-index: 42;
}

/* quiz actions 
---------------------------------------*/
.q-actions {position:absolute;bottom:0;left:10px;height:30px;width:auto}

/* quiz results 
----------------------------------------*/
.correct {background: url(/images/accept16.png) no-repeat 0 50% }
.wrong {background: url(/images/cross.png) no-repeat 0 50% }

/* sliver name height allow 2 lines */
.sliver li p {height: 2.5em;}

/* generic css
--------------------------------------*/
.generic {
  background: url(/images/quiz-shadow-trans.png)  no-repeat bottom center;
  width: 956px;
  padding: 0 0 52px
}
.center {text-align: center;}
.generic .fill {min-height:150px;} /* this can be whatever */

.generic .fill a:hover {color:#3366FF;}

/* IE fix for transparent pngs and nice looking drop shadows 
---------------------------------------------*/
.quiz {
  background: url(/images/quiz-shadow-trans.png)  no-repeat bottom center;
}
/* selectively direct PNG fix behavior */
/* div#sticker - positioned 0, 0 instead of 50% 50% */
/*, div.quiz*/
div.logo, div.head { behavior: url(/stylesheets/iepngfix.htc) }


/* User forms 
-------------------------------------- */
/* User forms */
fieldset { margin: 10px 0pt; border: 0pt none; }
fieldset th {
  text-align:right;
  width:15em;
}
fieldset th, td {
  padding: 7px 3px;
  vertical-align: top;
}
input[type="text"], textarea {
  border: 1px solid #AAAAAA;
}
fieldset input.acct {
  width: 12em;
  border: 1px solid #AAAAAA;
}
fieldset input.acct, select, checkbox {
  margin-right: 3px;
  padding: 4px 2px;
}
fieldset input.acct.lng {
  width: 24em;
}
form .data { border: 1px solid #aaaaff; width:32em; margin: 2px 2px ;}
form input { padding: 4px 2px;}
form .lbl { width:8em; padding: 5px 3px; text-align:right; float:left; clear:left; }
form .cntr {margin-left:8em; padding: 9px 10px;}
form .submitbutton, .submitbutton {background-color:darkblue; color:white; 
  font-weight: bold; font-size: 12px; padding: 5px 7px;}

.optionlink {
  font-size:12px; font-weight:bold; 
  padding: 5px; margin: 4px 0 2px 0; 
  background-color: #ffeec7; color: darkred;
}

/* Challenge Create 
------------------------------------------ */
.active, .next, .complete {width: 320px;}
.step { padding: 5px 0 2px 10px; float:left;}
.stephdr {font-family: helvetica; font-weight: bold; margin-bottom: 10px;}
.stepnum {font-size:42px; padding:2px; color: #888;}
.steptitle {font-size: 21px; color: #02679C;}
.active .stephdr {border-bottom: 4px solid #02679C; }
.done .stephdr, .complete .stephdr {border-bottom: 4px solid darkgreen; }

.quiz-create .quiz-meta {
  float:left; width: 345px; height:352px;position:relative;
  padding: 5px;
}

.quiz-create {float:left;}
.quiz-create .video {width: 320px; height: 275px;}

.minim, .done {/*width: 70px;*/ overflow:hidden;}
.minim .steptitle, .done .steptitle, .complete .steptitle {color: #ccc; /*font-size: 14px;*/}
.next .steptitle, .complete .steptitle {font-size: 21px; color: #ccc;}

.done .steptitle {display:none;}
.done .stepnum {background: url(/images/accept24.png) 50 100 no-repeat transparent;}
.done {background-color: #eee;}

.ctl {float:left; cursor:pointer;}
.psrs {width: 50px; height:50px; margin: 0; padding: 0;}

.pbav {width: 60px; margin-left: 25px;}

.searchbox .query {width: 250px;}
#resultinfo2 {width: 230px;}
#vidchoices {height:300px; }
#vidchoices.vidresults {overflow-x: hidden;}

#pickloading {padding: 100px 0 0 20px; height: 170px; color: #ccc; font-size:21px;}

/* YouTube search results - vide list display */
.vidimg {float:left; width:60px;}
.vidtxt {padding-left: 5px; margin-left:60px; width: auto;}
.vidtitle {float:left;
	vertical-align: top; width:100%; 
	/*height: 1.1em; overflow: hidden;*/ 
	padding: 2px; margin: 0 0 0 0;
}
.viddesc {font-size:11px; margin: 0 0 0 0; color: #888;}
.videntry {margin:2px 0; padding: 2px; 
  border-bottom: 1px dotted lightgrey;
	width: auto; min-height: 50px; 
	overflow:hidden; 
	clear:both; display:block;
}
#results {height:270px;}
.vidresults {
  /*width: 320px;*/ 
  border: 1px dotted lightgrey; 
	overflow-x:none; overflow-y:auto; clear:both;
}
#qt {width: 250px; margin: 2px 2px 2px 0px;}
.busy {text-align:center; margin: 20px auto;}

/* Pick a scene */
.button {font-weight: bold; font-family: "helvetica"; 
  background-color: #f33; color: white; /*float:left;*/
  font-size: 18px;
  padding: 7px 10px 4px;
  cursor:pointer;
}
.bluebg {background-color: darkblue;}
.compactbutton {font-weight: normal; font-family: "helvetica"; 
  background-color: darkblue; color: white; /*float:left;*/
  font-size: 12px;
  padding: 5px 6px 3px 6px;
  cursor:pointer;
  border: 1px solid lightgrey;
}
.greenbg {background-color:darkgreen;}
a.button {color: white; text-decoration:none;}
a:hover.compactbutton  {color:white; text-decoration:none;}
a:visited.compactbutton {color:white;}		

/* Question Area */
#guesswhat {position:absolute; margin-left:140px; /*right: 200px;*/ opacity: 100%; background-color:#ffddcc; padding: 5px 0 5px 0; z-index:200;}
#guesswhat li {font-size:14px; color: darkred; padding: 2px 7px 2px 7px; border-bottom: 1px dotted darkorange; cursor: pointer;  }
#guesswhat li.last {border:none;}
#guesswhat li.sel {background-color: #ffccbb;}

#guessoverlay {position:absolute; top: 0; right: 0; width: 320px; height:100%; opacity: 0; z-index:2 ; cursor:normal;}

#qnchoice, .qnchoice {width: 260px;}

#qnlist {max-height: 175px; overflow-y: auto; margin-bottom: 10px;}
#qnlist .qnachoice {padding:2px 25px;}
#qnlist .correctchoice {background: url(/images/accept16.png) no-repeat transparent 0% 100%;}
#qnlist .qntxt {font-size: 14px; color:darkblue;}
.choiceentry {cursor: pointer; padding: 5px 2px 2px 2px; clear:both;}
.choiceconsider {background: url(/images/accept16.png) no-repeat transparent 50% 50%;}
#donechoice {clear:both;}
#donequestion {margin: 7px 0;}
.correctchoice {
  color: darkblue; 
  background: lightcyan url(/images/accept16.png) no-repeat 100% 50%;
}
.choicetxt { padding: 3px 25px 3px 5px; color: #00344F; float:left;
}
.remove {
  width: 20px; height: 20px;
  background: 0% 60% transparent no-repeat url(/images/remove16.png);
  cursor: pointer; float:left; margin-left: 10px;
}
.qnpanel {padding: 2px 0 5px 30px;}
.qntxt {font-weight:bold; float:left; padding-top: 3px;
  font-size:16px; color: darkred;
}

.close {float:right; cursor:pointer; color:darkblue;}
.helpbox {
  position:absolute; 
  border: 2px solid #999; 
  width: 300px;  
  background-color: lightgrey;
  padding: 2px 7px;
}

/* icon integration */
.closebutton {
  background:url(/images/button-close.png) transparent no-repeat; 
  width: 20px; height: 20px; 
  cursor: pointer;
  float:right;
  padding: 1px;
}
.q-take img {border: none;}
.q-tracker {position:absolute;bottom:0;right:10px;height:30px;width:100%}

/* admin fixups 
---------------------------------*/
.wall .panel {float:left; clear:none;}
.wall .panel .fill {height: 130px; overflow: hidden; padding: 10px;}
.moderate {float:right; margin-top: 10px; }
.moderate a {padding: 0px 5px 0 15px;}
.marked {background-color: lightblue;}
.starred {
  background: url(/images/star.png) transparent no-repeat;
  width: 16px; height: 16px;
}
img.novid {border-left: 5px solid red; }