/* CALI Viewer 5, Version: 03/21/2012 
   CALI Author HTML Viewer - Full style sheet -  */

BODY {
	margin: 0px;
	font-weight: normal;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #FFFFFF;
}
TABLE {
	/*border: dotted !important;*/
}

TR{
	vertical-align: top;
	padding: 1px;
}
P {
	padding-top: 0px;
	margin-top: 0px;
}
a {
	color: #0066CC;
}
.ReadText a:link{
	color: #0066CC;	
}
.ReadText a.visited{
	color: #9999DD;
}
/*
#Lesson a[href^="jump"]{
	background-color: inherit;
   padding-left: 18px;
   background: transparent url(img/link_icon_internal.gif) no-repeat center left;
}
#Lesson a[href^="popup"]{
	background-color: inherit;
   padding-left: 18px;
   background: transparent url(img/link_icon_popup.gif) no-repeat center left;
}
*/
.PageHeader a[href^="http"],.PageHeader a[href^="lesson"]{/*external links have external icon*/
	background-color: inherit;
   padding-right: 18px;
   background: transparent url(img/link_icon_external.gif) no-repeat center right;
}


#Loader {
	width:300px;
	position: relative;
	left: 50%;
	margin-left: -150px;
	text-align: center;
}
	
OLD.#Viewer {
	text-align: center;
	/* display: none; */
}

#Tracer-toggle {
	color:#FFFFFF;
}
#Lesson {
	padding: 0px;
	margin: 0 15px 15px 15px;
	/*border: double;*/
}

#HeaderLesson {
	color:#88f;
	margin: 5px;
}
#HeaderLessonBook {
	float: left;
}
/*
#HeaderLessonCAV {
	float: right;
}
*/
#HeaderLesson a {
	text-decoration: none; 
}
#HeaderLesson a:hover {
	text-decoration: underline;
}


#HeaderPage {
	margin: 5px;
	padding-top: 15px;
	clear: both;
	background-color:#fff;
}
#HeaderPageCALI {
	color:#e0e;
	float: left;
	margin: 5px;
	padding-right: 25px;
}
.PageHeader {
	height: auto;
	padding: 5px;
	margin: 5px;
}
x.PageName {
	color:#000;
	text-align: left;
	float: left;
}
x.PageScore {
	float: right;
}
.PageComment{
}

x#ScoreSaveError {
	background:yellow;
	padding:1em;
	margin:1em;
	text-align:left;
}
OLD.Navigation {
	clear: both;
	display: table;
	width: 100%;
	vertical-align:top;
}
.NavigationLesson {
	font-size: smaller;
	margin: 0px;
	padding: 5px;
	text-align:left;
	display: table-cell;
	vertical-align:top;
	min-width:250px;
}

.NavOutline {
	min-width: 250px;
}

.NavigationPage {
	display: table-cell;
	width: 100%;
}

.NavigationLesson{
	font-size:smaller;
}
.NavigationLesson  ul{
	margin-left: 10px; 
	padding-left: 10px;
	text-indent:  0px;
}
.NavigationLesson  li {
	margin-left: 0px; 
	padding-left: 0px;
	text-indent:  -15px;
	list-style:inside;
}
.NavPage {
	margin-left:-20px;
}
.PageBorder {
	-moz-border-radius:5px 5px 5px 5px;
	border-radius:5px 5px 5px 5px;
	border: 3px solid #0066CC;
	background-color: #C4E1FF;
	margin: auto;
	width: 80%;	
	/* 
		margin: auto;
	*/
}

.PageText {
	background-color: #fff;
	padding: 15px;
	margin: auto;
	text-align: center;
}
.TextCols1{
	width: 66%;
	margin: auto;
	text-align: left;
}
.TextCols2{
	width:100%;
	text-align: left;
}
.TableWide {
	width: auto;
}
.PageInteraction{
	background-color: #fff;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	text-align: left;
	padding: 5px;
	margin: 0px;
}
.PageSpecificGrade{
	background-color: #fff;
	padding: 15px;
	text-align: center;
}
x.PageSpecificNav {
	background-color: #fff;
	padding: 15px;
	text-align: center;
}

.PageNavigation {
	margin: 0px;
	/* text-align: right; */
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
}
OLD.LinkNavBar{
	text-align: left;
	padding-bottom: 5px;
}
OLD.LinkNavBar > a {
	-moz-border-radius:5px;
	border-radius:5px;
	border-right: #ececec outset;
	border-top: #ececec outset;
	border-left: #ececec outset;
	border-bottom: #ececec outset;
	border-top-width: thin;
	border-top-color: #FCFCFC;
	border-top-style: outset;
	border-right-width: thin;
	border-right-color: #FCFCFC;
	border-right-style: outset;
	border-bottom-width:  thin;
	border-bottom-color: #FCFCFC;
	border-bottom-style: outset;
	border-left-width: thin;
	border-left-color: #FCFCFC;
	border-left-style: outset;
	text-decoration:none;
	background: url(img/button_gradient_blue.png) repeat-x;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: normal;
	font-style: normal;
	font-weight: bold;
	padding: 2px;
	padding-left: 9px;
	padding-right: 9px;
	margin: 3px;
	color:#000;
	white-space: nowrap;
}
OLD.LinkNavBar > a.hilite {
	background-color:#FFFF00;
	background: url(img/button_gradient_yellow.png) repeat-x;
}

div.hilite {
	background-color:#FFFF00;
}


.PageNavBar{
	float: right;
	text-align: right;
}
.PageNavBar > a {
	white-space: nowrap;
	padding-left: 5px;
	padding-right: 5px;
}
.Footer {
	margin-top: 15px;
	clear: both;
	color: #999999;
	font-size: .7em;
}
.Footer .Copyright {
	font-size: .7em;
}

.larger {
	font-size: larger;
}

.styleswitch {
	font-style: inherit;
}

table.layout{
	border:dotted;
}
.ButtonGroup{
	padding: 5px;
	text-align: center;
	/*white-space: nowrap;line-height: normal;*/
	line-height: 2em;
	vertical-align: top;
}
.ButtonGroup input[type="button"]{
	vertical-align: top;
}
.GradeIcon {
	padding: 1px;
	padding-left: 5px;
	padding-right: 5px;
	vertical-align: middle;
	text-align: right;
}

.ButtonChoices{
	vertical-align:text-top;
	text-align:center;
}


.BigLetter{
	font-size: x-large;
	font-weight: bold;
	display: table-cell;
}

.MatchLeft, .MatchRight {
	border: 1px solid #000000;
	margin: 2px;
	padding: 2px;
	height: 60px;
	width: 300px;
	overflow: auto;
	text-align:left;
}
.MatchLeft {
	background-color: #CCCCCC;
}
.MatchRight {
	background-color: #00CCFF;
}



/* Checkbox/radio buttons */
.cbcoltext{
	padding: 5px;
	width: 100%;
}
.cbcol, .cbcol0, .cbcol1, .cbcol2, .cbcol3 {
	width: 25px;
	margin: 1px;
	padding: 1px;
}
.cbcol {
	background-color:#fff;
}
.cbcol0{
	background-color:#FC0;
}
.cbcol1{
	background-color:#99C;
}
.cbcol2{
	background-color:#9CF;
}
.cbcol3{
	background-color:#F93;
}
.cbcol0, .cbcol1, .cbcol2, .cbcol3{
	/* margin-top: -25px;*/
	text-align:center;
}
.CheckBoxItem {
	padding: 4px;
	background-color: #FFFFFF;
}
.CheckBoxHeading {
	font-size: inherit;
	font-weight: inherit;
	text-align: left;
	padding: 1em;
}
.TableCB {
	/*width: 100%;*/
	border: none;
	border-spacing: 0px;
	border-collapse: collapse;
	padding:5px;
}

.RadioGroup {
	margin-left: 50px;
}
.CheckBoxGroup {
	float: left;
	white-space: nowrap; 
}
.CheckBoxGroupV {
	margin-left: 30px;
}


.TableChoices {
	margin: 0px;
	width: 100%;
	/* border-style: dotted;*/
}
.TableChoices * TD {
	/* background-color: #fff;*/
}
.TableChoices * TR {
	vertical-align: top;
}
.Choice {
	display: table;
}
.ChoiceText {
	/* xbackground-color:#fff;*/
	padding:  0px 0px 0px 5px  ;
}

x.MultipleChoice {
	clear: both;
}

#textResponse {
	width: 80%;
	font-family: Tahoma, sans-serif;
	font-size: larger;
	padding: 5px;
}

x.EssayBox {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* IE 8+ */
	width: 100%;
	height: 100%;
	min-height: 200px;
	padding: 5px;
	font-family: Tahoma, sans-serif;
}
x.EssayTable {
	width : 100%;
	/*  align=center*/
}
x.EssayTable * TD {
	text-align: center;
	padding: 15px;
}

x#slideshow {
	background-color: #eec;
	-moz-border-radius:5px;
	border-radius:5px;
	margin: auto;
	border: 3px solid #886;
	padding: 0px;
}
x#slideshow li{
	width:400px;
	height:300px;
}
x#slideshow ul, li{
	padding:0;
	margin:0;
}
x#slideshow img{
	width: 100%;
	height: 100%;
}




/*  backgrounds for feedback popups */
.Feedback, #ScoreReport {
	padding: 5px;
	margin: 15px;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: left top;
	background:url("img/popup_gradient.png") repeat-x scroll 0 0 transparent;
/*	max-width: 75%;*/
}
.FeedbackButton {
	text-align:center;
	padding-top: 25px;
	padding-bottom: 5px;
}
.Feedback.RIGHT {
	border: 3px solid #009900;
	background-color: #efe;
}
.Feedback.WRONG {
	border: 3px solid #990000;
	background-color: #fee;
}
.Feedback.MAYBE {
	border: 3px solid #ff0;
	background-color: #ffe;
}
.Feedback.INFO{
	border: 3px solid #00f;
	background-color: #ddf;
}
.Feedback.Blank {
	background-image:none;
}
.Feedback .Icon , #ScoreReport .INFO{
	background-repeat: no-repeat;
	float:  left;
	width: 25px;
	height: 30px;
}
.Feedback .Icon.RIGHT {
	background-image: url(img/grade-right.gif);
}
.Feedback .Icon.WRONG {
	background-image: url(img/grade-wrong.gif);
}
.Feedback .Icon.MAYBE {
	background-image: url(img/grade-maybe.gif);
}
.Feedback .Icon.INFO {
	background-image: url(img/grade-info.gif);
}
.Feedback .Title, #ScoreReport .Title{
	text-align: center;
	margin-top: 5px;
	font-style: italic;
	height: 20px;
}
.Feedback div.Close , #ScoreReport div.Close{
	float:  right;
	width: 32px;
	height: 32px;
	background-image: url(img/CloseIcon.png);
	background-repeat: no-repeat;
}
.Feedback div.Close a, #ScoreReport div.Close a {
	line-height: 32px;
	padding:   10px 10px;
}
.Feedback div.Next {
	float:  right;
	width: 32px;
	height: 32px;
	background-image: url(img/NextIcon.png);
	background-repeat: no-repeat;
}
.Feedback div.Next a {
	line-height: 32px;
	padding:   10px 10px;
}
.Feedback > .Text {
	padding: 5px;
	margin: 5px 5px 5px 15px;
}
#fbText {
	min-height:25px;
}
.helptext {
	margin-left:20%;
	margin-right:20%;
	font-style: italic;
	font-size: 90%;
	text-align: left;
	padding-bottom: 25px;
}

/*
input[type="button"]:enabled, button:enabled {
	-moz-border-radius:10px 10px 10px 10px;
	border-radius:10px 10px 10px 10px;
	background:url("img/button_gradient.png") repeat-x scroll 0 0 transparent;
	border:1px solid #CCCCCC;
	color:#404040;
	cursor:pointer;
	padding:2px 10px;
}
input[type="button"]:enabled:focus, input[type="submit"]:enabled:hover, button:enabled:focus, button:enabled:hover {
	border-color:#666666;
}
*/

.GradeIconRIGHT, .GradeIconWRONG{
	padding: 8px;
	background-position: left center;
}
.GradeIconRIGHT {
	background-image: url(img/grade-right.gif);
}
.GradeIconWRONG {
	background-image: url(img/grade-wrong.gif);
}





.ReadText {/*applied to lesson's content text*/
	/*font-family: Lucida Grande,Verdana,Lucida Sans Regular,Lucida Sans Unicode,Arial,sans-serif;*/
	color: #000;
	text-align: left;
	text-decoration: none;
	font-weight: normal;
	font-style: normal;
}
.ReadText > TABLE, .multi-btn-txt > TABLE {
	border: 1px;
	border-style: solid;
	border-color: #000000;
	border-spacing: 0px;
	border-collapse: collapse;
}
.ReadText  BLOCKQUOTE { 
	margin-left: 1em;
	margin-right: 1em;
}
.ReadText * TD, .multi-btn-txt * TD {
	border: 1px solid #000;
	padding: 5px;
}








.ListText {
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

x.HyperButton {
	cursor: pointer;
	-moz-border-radius:10px;
	border-radius:10px;
	border-right: #ececec outset;
	border-top: #ececec outset;
	border-left: #ececec outset;
	border-bottom: #ececec outset;
	border-top-width: thin;
	border-top-color: #FCFCFC;
	border-top-style: outset;
	border-right-width: thin;
	border-right-color: #FCFCFC;
	border-right-style: outset;
	border-bottom-width:  thin;
	border-bottom-color: #FCFCFC;
	border-bottom-style: outset;
	border-left-width: thin;
	border-left-color: #FCFCFC;
	border-left-style: outset;
	text-decoration:none;
	background: url(img/button_gradient.png) repeat-x;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: normal;
	font-style: normal;
	font-weight: bold;
	padding: 4px;
	padding-left: 9px;
	padding-right: 9px;
	margin: 5px;
	color:#000;
	white-space: nowrap;
}
.HyperButton.RIGHT {
	background: url(img/button_gradient_green.png) repeat-x;
}
.HyperButton.WRONG {
	background: url(img/button_gradient_red.png) repeat-x;
}
.HyperButton.MAYBE {
	background: url(img/button_gradient_yellow.png) repeat-x;
}
.HyperButton.INFO {
	background: url(img/button_gradient_blue.png) repeat-x;
}
.HyperButton#gonext{
	background: url(img/button_gradient_blue.png) repeat-x;
}
x.HyperButton .gonext {/*gonext chevron*/
	background-position: 100% 2px;
	background-repeat: no-repeat;
	padding: 0px 20px 5px 5px; 
	background-image: url(img/NextPage.png);
}
.Small {
	font-size: .8em;
}
.MediaPanel {
	text-align: center;
	vertical-align: top;
}

.Transcript {
	display: none;
}
.HotspotList {
	text-align:left;
}


td.info {
	min-width: 250px;
}
.NoWrap {
	white-space:nowrap;
}



/*  Score screens */
#ScoreReport {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color:#000;
	padding: 5px;
	margin: 15px;
	text-align: center;
	xwidth: 100%;
	font-size: smaller;
	background-color: #fff;
}
.PageScore > .ScoringButton {
	text-decoration: none;
}
.UploadScore {
	border: 3px solid #C4E1FF;
	margin: auto;
	text-align:left;
	padding: 5px;
	width: 50%;
}
.ButtonRow {
	line-height: 2em;
	padding: 5px;
	width:100%;
	text-align:center;
}
#ScoreReportDetails {
	font-size: smaller;
}
#ScoreReportDetails > TABLE {
	margin: auto;
}
.Certificate {
	font-size:larger;

	border:10px solid #C4E1FF;
	color: #008;
	margin: 25px;
	padding: 15px; 
	text-align: center;
	margin-left: 10%;
	margin-right: 10%;
}
.Certificate  .gray{
	background-color:#ddd;
	padding: 15px;
}
.Certificate > table {
	font-size:.75em;
	color: #000;
}
.LessonName {
	font-style: italic;
	font-size: 1.5em;
	text-align: left;
	font-weight: bold;
}
.Footer > .LessonName {
	text-align: center;
}
div.UserName {
	font-size: 9pt;
	font-weight: bold;
	padding-top: 4px;
	padding-bottom: 4px;
}
.OrgName {
	font-size: 9pt;
}


.ScoreReportCol1 {
	text-align: left;
}
.ScoreReportCol2 {
	text-align:center;
}
.ScoreReportCol3 {
	text-align:center;
}
.ScoreReportCol4 {
	text-align:right;
}
/*  No JavaScript  */
.NoJS {
	background-color: #FFFFFF;
	padding: 25px;
	border: 2px solid #FF0000;
}

.noborder {
	border: none !important;
}
/*  Page type Drag drop interaction */
.dragItem {
	background-color: #DAFF9F;
	border-top: 2px solid #bbf;/*#DAFF9F;*/
	color: #000;
	cursor: move;
	min-height: 28px;
	position: relative;
	font-weight:normal;
	margin: 2px; 
	padding: 2px; 
	//min-width: 120px; 	
}
.dragRIGHT {
	border: 2px solid #009900;
	background-color: #efe;
}
.dragWRONG {
	border: 2px solid #990000;
	background-color: #fee;
}
.dragExpander{
	position: absolute;
	right: 1px;
	top: 1px;
	/*float: right;
	right: 10px;
	top: 10px;
	*/
	font-weight: normal;
	font-size: 11px;
	text-decoration: none;
	background-color: #eee;
}
.dragCollapse {
	overflow: hidden;
	height: 28px;
	font-size: .7em;
}
.dragExpanded {
	overflow: visible;
	height: auto;
	width: 200%;
	font-size: 1em;
}
.dragExpanded .dragExpander{
	position: inherit;
	float: right;
	right: 1px;
	top: 1px;
	text-decoration: none;
	font-weight: normal;
	font-size: 11px;
}
.sortable {
	background-color: #eee;
	list-style-type: none; 
	margin: 0; 
	padding: 0; 
	float: left; 
	margin-right: 10px; 
	padding: 5px; 
	//min-width: 143px;
	min-height: 50px;
	width: 90%;
}
.drawable {
	background-color: #eee;
	list-style-type: none; 
	margin: 4px; 
	/* float: left; */
	margin-right: 10px; 
	padding: 5px; 
	min-width: 143px;
	min-height: 50px;
	width: 90%;
}
.DragTable * TH {
	font-weight: normal;
	font-size: 80%;
}

.Transcript {
	background-color: #ff8;
	border:thin;
	padding: 10px;
	
}
/*
#sortable0, #sortable1, #sortable2 {
	list-style-type: none; 
	margin: 0; 
	padding: 0; 
	float: left; 
	margin-right: 10px; 
	background: #eee; 
	padding: 5px; 
	width: 143px;
	min-height: 50px;
}
#sortable0 li, #sortable1 li, #sortable2 li {
	background-color: #DAFF9F;
	border-top: 2px solid #B5EF59;
	cursor: move; 
	border:2px; 
	margin: 5px; 
	padding: 5px; 
	width: 120px; 
}
*/

.SliderGrid {
	border: 1px solid;
	display: block;
}
.SliderGrid * TD {
	background-color:#eee;
	padding: 5px;
}
.SliderGrid * TR.even {
	background-color: #eee;
}
.SliderGrid * TR.odd {
	background-color: #ddd;
}

/* Mapper */

.MapBorder {
	background-color: #eec;
	-moz-border-radius:5px;
	border-radius:5px;
	border: 3px solid #886;
	padding: 5px;
}
.MapViewer {
	background-color: #ffd;
	width: 95%;
	height: 100%;
	min-height:300px;
	min-width: 300px;
	overflow:scroll;
	border-top-width: thick;
	border-right-width: thick;
	border-bottom-width: thick;
	border-left-width: thick;
	padding: 5px;
	margin-top: 5px;
}
.MapViewer.big {
	min-height:400px;
	min-width: 500px;
}
.map {
	height: 100%;
	width: 100%;
	padding: 15px;
	position: relative;
}
.map  .node {
	font-size: 12px;
	background-color: #D0F0F0;
	margin: 1px;
	padding: 4px;
	height: 35px;
	width: 100px;
	border: 1px outset #006699;
	text-align: center;
	position: absolute;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #000000;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius: 5px;
	cursor: pointer;
}
.map   .tiny {
	background-image: url(img/map_page.png);
	background-repeat:no-repeat;
	background-color:  inherit;
	border: 0px hidden;
	margin: 1px;
	padding: 0px;
	cursor: pointer;
	width: 12px;
	height: 8px;
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	border-radius: 0px;
}
.map .mark {
	border: 2px double;
}
.node .text {
	overflow: hidden;
	height: 35px;
	width: 100px;
}
.map .branch {
	font-size: 8px;
	background-color: #fff;
	margin: 1px;
	padding: 1px;
	width: 15px;
	border: 0px none;
	text-align: center;
	position: absolute;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #000000;
	overflow: hidden;
	cursor: pointer;
}
.map   .branch.RIGHT {
	color: #080;
}
.map   .branch.WRONG {
	color: #f00;
}
.map   .line {
	background-color: #0f0;
	border: 1px #000;
	position: absolute;
}
.map   .arrow {
	position: absolute;
	background-image: url(img/map_arrow_down.png);
	background-repeat:no-repeat;
	width:16px;
	height:20px;
	margin-top: -5px;
}

#picloader { 
	position: absolute;
	left: -5000px;
}
.MediaPanel  a {
	text-decoration: none; 
}
.MediaPanel  a:hover {
	text-decoration: underline;
}
.picture {
	position: relative;
	text-align:left;
	margin: auto; 
}
.picture img { 
}
img.fit {
	width: 100%;
}
.hotspots { 
}
.hotspot_transparent {
	background-color: #ff8;
	/* various browser opacity settings */
	filter: alpha(opacity=20);
	-moz-opacity: 0.2;
	-khtml-opacity: 0.2;
	opacity: 0.2;
}
.hotspot:hover {
	border: dotted;
	border-color:#000;
	border-width: 2px;
	cursor: pointer;
}

div.flashcard{
	border: 2px inset #222;
	margin: 15px;
	padding: 15px;
}
div.flashcard.question{
	background-color: #ffd;
	cursor: pointer;
}
div.flashcard.answer{
	background-color: #dfd;
	margin-left: 25px;
}

/* Testing codes */


.testshow{
	display: inherit; 
}

.border {
	border: solid !important;
	border-style: double !important;
}
.disabled {
	color: #888 !important;
	cursor: normal  !important;
}


.DevBar {
	display:none;
	background-color:#000000;
	color:#FFFFFF;
	padding: 5px;
	font-size:10px;
}
.Trace {
	font-family: Arial;
	background-color:#eee;
	font-size:9px;
	color:#000;
	text-align: left;
	display:table-cell;
	vertical-align:top;
	display:none;
}
.Trace * TR {
	vertical-align: top;
}
.Trace * TR.even {
	background-color: #eee;
}
.Trace * TR.odd {
	background-color: #ddd;
}
.Center {
	text-align:center;
}

/* LessonLive */
#llHeaderPage {
	color: #e0e;
	float: right;
	margin: 5px;
	padding-right: 25px;
}
.llNavigation {
	float: right;
	font-size: smaller;
	margin: 0px;
	padding: 5px;
	text-align:left;
	display: table-cell; 
	vertical-align:top;
	min-width:250px;
	height: auto;
	/*
	 height: 100%;
	 */
}
#llPanel {
	white-space: nowrap;	
	xwidth: 25%;
	xbackground-color: #f8f;
}
.llPageInfo {
	text-align:center;
	padding: 1em;
	margin-right: -5px;
	margin-left: -5px;
	xbackground-color: #c4e1ff; 
}
.llButton {
	display: inline;
	white-space: nowrap;	
}
.llChoice {
	display: inline-block;
	margin-left: 2px;
	vertical-align: middle;
	padding-left: 4px;
	padding-right: 4px; 
	xbackground-color: #c4e1ff;
}
.llBar {
	display: inline-block;
	white-space: nowrap;
	height: 1.2em;
	padding: 0;
	margin: 0;
	margin-right: 1em;
	background-color: #d4f1ff;
	width: 66px;
}
.llBarSlots {
	background-color: inherit;
	width: inherit;
}
.llBarChunk{
	display: inline-block;
	background-color: #008;
	height: 1em;
	width: 2px; 
	margin: 0 1px 0 0;
	padding: 0;
}
.llBarChunk.answer {
	width: .25em;
}
.llBarChunk.answer.none {
	background-color: #ccc;	
}
.llBarChunk.answer.answered {
	background-color: #000;	
}
.llBarChunk.answer.right {
	background-color: #080;	
}
.llBarChunk.answer.wrong {
	background-color: #800;	
}
.llBarChunk.answer.info {
	background-color: #008;	
}
.llBarChunk.answer.maybe {
	background-color: #ff8;	
}
.ll.none {
	background-color: #fff;	
}
.ll.answered {
	background-color: #eee;	
}
.ll.right {
	background-color: #8f8;	
}
.ll.wrong {
	background-color: #f88;	
}
.ll.info {
	background-color: #88f;	
}
.ll.maybe {
	background-color: #ff8;	
}
.llUser {
	width: 100%;
	background-color: #eee;
	font-weight: normal;
	padding: 2px;
	white-space: nowrap;
	overflow: hidden;
}
.llIcon {
	display: inline-block;
	line-height: 1em;
	max-width: 1em;
	overflow: hidden;
	white-space: nowrap;
	width: 1em;
	margin: 1px;
	padding: 1px;
}
.llShortAnswerMatches {
	margin-left: auto;
	margin-right: auto;
}
.llShortAnswerMatches * tr {
	vertical-align: middle;
}
.llShortAnswerMatches * td{
	text-align: left;
	border: 1px solid #fff;
	padding: 5px;
	margin: 2px;
}
.llUserName {	
	margin: 1px;
	padding: 1px;
	padding-left: 1em;
}
.llDialogRevealNames {
	border: 3px solid #C4E1FF;
	-moz-border-radius:10px 10px 10px 10px;
	border-radius:10px 10px 10px 10px;
	margin: auto;
	text-align:left;
	padding: 5px;
	width: 50%;
}
.ScorePoints {
	border: 0px solid #88f;
	border-radius: 50%;
	color: #88f;
	display: inline-block;
	font-weight: normal;
	font-size: 80%;
	width: 1em;
   padding: 1px;
}
x.PageScore {
	cursor: pointer;
}
.PageScore.unscored{
	opacity: 0.5;
}

.hidestart { /* hide some elements initially */
	display: none;
}

blockquote{
	border:0px solid #999;
	page-break-inside:avoid;
}