/**
This file defines the default look and feel of CTAT components.

Table of Contents:
** Global Utility
	#unselectable
** CTAT General
 	#CTAT Generated Components
** Button Based Components
	#CTAT Generated button components
** CTAT Text Based Components
	#CTAT table components
	#CTAT text components
	#CTATNumericStepper
** CTAT Stateful Components
	#CTAT checkbox
	#CTAT radio button
	#CTAT combobox
	#CTAT jumble
** CTAT SVG Based Component
	#CTAT SVG Component
	#CTAT SVG button
	#CTAT number line
	#CTAT pie chart
	#CTAT fraction bar
** Feedback Components
	#CTAT Hint Button
	#CTAT hint window
	#CTAT Skill Window
** Container Components
	#CTAT Scroll Pane Component
** Multimedia Components
	#CTAT video
** Disabling
	#CTAT button disabled
** Grading
	#CTAT--incorrect
	#CTAT--hint
	#CTAT--correct
*/

/******************************* Global Utility ******************************/

/*-------------------------------------------------*\
	#unselectable
	General class for making entities unselectable.
\*-------------------------------------------------*/
.unselectable {
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

/******************************** CTAT General *******************************/
/*-----------------------------------------*\
 	#CTAT Generated Components
 	Base class for CTAT generated components
\*-----------------------------------------*/

.CTAT-gen-component {
	/* assume generated component is always within a div and
	   that it should occupy the entire div */
	/*position: absolute;*/
	padding: 0px;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

.CTAT-gen-component:focus {
	outline: none; /* No focus highlighting */
}

/******************* CTAT Tutor Container Div Defaults ************************/

.CTATTutorContainer { background: #ffffff; border: 1px solid black; }

/*********************** CTAT Component Size Defaults ************************/
.CTATAudioButton { width: 155px; height: 30px; }
.CTATButton,.CTATSubmitButton { width: 60px; height: 30px; }
.CTATDoneButton, .CTATHintButton  {	width: 66px; height: 66px; }
.CTATCheckBox, .CTATRadioButton { width: 100px; height: 1.4em; }
.CTATComboBox { width: 100px; height: 1.4em; }
.CTATControllerButton {}
.CTATFractionBar { width: 240px; height: 70px; }
.CTATHintWindow { width: 240px;	height: 140px; }
.CTATJumble { width: 150px; height: 40px; }
.CTATNumberLine { width: 360px; height: 90px; }
.CTATPieChart { width: 100px; height: 100px; }
.CTATSkillWindow { width: 240px; height: 140px; }
.CTATTextArea { width: 100px; height: 2em; }
.CTATTextField {}
.CTATTextInput { width: 100px; height: 1.4em; }


/************************** Button Based Components **************************/

/*---------------------------------------------*\
	#CTAT Generated button components
	Covers CTATAudioButton, CTATButton, CTATDoneButton, CTATHintButton
\*---------------------------------------------*/
button.CTAT-gen-component {
	border-radius: 5px;
}




/******************** CTAT Text Based Components ***********************/
/* Note: see CTAT Grading for modifying how text based components look
   for grading */

/*-----------------------------------------------------*\
	#CTAT table components
\*-----------------------------------------------------*/
table.CTAT-gen-component {
	width: 100%;
	height: 100%;
	border: 0px;
	border-spacing: 0px;
	border-collapse: separate;
}
th.CTAT-gen-component, td.CTAT-gen-component {
	border: 1px solid black;
	padding: 0px;
	margin: 0px;
	background-color: white;
}

.CTATTable
{
	display: table;
}

.CTATTableTitle
{
	display: table-caption;
	text-align: center;
	font-weight: bold;
	font-size: larger;
}

.CTATTableHeading
{
	display: table-row;
	font-weight: bold;
	text-align: center;
}

.CTATTableRow
{
	display: table-row;
}

.CTATTableCell
{
	display: table-cell;
	border: solid;
	border-width: thin;
	padding-left: 5px;
	padding-right: 5px;
}

/*---------------------------------------------------*\
	#CTAT text components
\*---------------------------------------------------*/
.CTAT-text {
	resize: none;
}
textarea.CTAT-text {
	overflow: hidden;
}

/*-------------------------------------------------------*\
	#CTATNumericStepper
\*-------------------------------------------------------*/

.CTAT-numeric-stepper {}




/************************* CTAT Stateful Components ***************************/
/*------------------------------------------------*\
	#CTAT checkbox
	#CTAT radio button
\*------------------------------------------------*/
.CTAT-checkbox, .CTAT-radiobutton {
	display: inline-block;
	width: auto;
	background: inherit;
}
/* extra styling for the sub entities */
.CTAT-checkbox--button, .CTAT-radiobutton--button {}
.CTAT-checkbox--label, .CTAT-radiobutton--label {}



/*---------------------------------------------------------*\
	#CTAT combobox
\*---------------------------------------------------------*/
.CTAT-combobox {}
.CTAT-combobox--option {}



/*---------------------------------------------------------*\
	#CTAT jumble
\*---------------------------------------------------------*/
.CTAT-jumble { /* general jumble component styling, (eg) the bounding box */
	border: 1px solid #CCCCCC;
	border-radius: 5px;
}
.CTAT-jumble--item { /* for each individual item in the jumble */
	float: left;
	width: auto;
	height: auto;
	padding: 0.5ch;
}
.CTAT-jumble--item[draggable="true"] { /* for items that are being dragged */
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-khtml-user-drag: element;
	-webkit-user-drag: element;
	cursor: move;
}
.CTAT-jumble--item--over { /* for items that are under the dragged item and
	would be moved by dropping the item */
	border: 1px dashed blue;
}

/******************** CTAT SVG Based Component *************************/
/*-----------------------------------------------*\
	#CTAT SVG Component
\*-----------------------------------------------*/

.CTAT-svg {
	-webkit-user-select: none;
	-mos-user-select: none;
	-sm-user-select: none;
	background-color: white;
	border-radius: 5px;
	box-sizing: border-box;
}




/*-----------------------------------------------*\
	#CTAT SVG button
\*-----------------------------------------------*/

.CTAT-svg-button {
	font: 15px Helvetica Neue,Helvetica,Arial,sans-serif;
	border-radius: 5px;
}




/*-------------------------------------------------------*\
	#CTAT number line
\*-------------------------------------------------------*/

.CTAT-number-line {
	padding: 10px;
	border: 1px solid #CCCCCC;
}
.CTAT-number-line--cursor {
	fill: black;
	fill-opacity: 0.5;
	stroke-width: 0px;
}
.CTAT-number-line--axis {
	stroke: black;
	stroke-linecap: round;
	stroke-width: 2px;
	fill-opacity: 0;
}
.CTAT-number-line--tickmark {
	stroke: black;
	stroke-width: 2px;
}
.CTAT-number-line--tickmark-label {
	stroke: none;
	fill: black;
}

/*-------------------------------------------------------*\
	#CTAT pie chart
	#CTAT fraction bar
\*-------------------------------------------------------*/

.CTAT-pie-chart { /* pie chart container */
	padding: 0px;
	border: 1px solid #CCCCCC;
	border-radius: 5px;
	overflow: visible;
	--explode: 10px; /* only supported in moz */
}
.CTAT-fraction-bar { /* fraction bar container */
	border: 2px solid #CCCCCC;
	border-radius: 5px;
}

.CTAT-pie-chart--piece { /* pie chart wedge */
	stroke: black;
	stroke-width: 1px;
	fill: purple;
	overflow: visible;
}
/* Can specify .CTAT-pie-chart--piece[data-value="1/4"] to change color based on values */
.CTAT-pie-chart--piece[data-selected="false"] { /* deselected pie chart wedge */
	fill-opacity: 0.2;
}
.CTAT-fraction-bar--piece { /* fraction bar piece */
	padding: 2px;
	stroke-width: 1px;
	stroke: black;
	fill: purple;
}
.CTAT-fraction-bar--piece[data-selected="false"] { /* deselected fraction bar piece */
	fill-opacity: 0.2;
}




/************************** Feedback Components *******************************/

/*---------------------------------------------*\
	#CTAT Hint Button
\*---------------------------------------------*/

/* Also used for in CTATHintWindow to increase connection */
/* Should .CTAT-hint-window--button--* be added so that they can be modified
   independently? */
/* This is in the SVG section because of the option to have SVG buttons as
   part of the component.  If this feature is dropped, then this should be
   moved to its own section */
.CTAT-hint-button {
	font: 15px Helvetica Neue,Helvetica,Arial,sans-serif;
	border-radius: 5px;
	background-color: gold; /*#FFCC33;*/
 	border: 1px solid orange;
 	cursor: pointer;
}
.CTAT-hint-button--hover {
	background-color: #E6C200 /*#FFED3A*/;
	/*border: 1px solid orange;
	fill:black; stroke: black;*/
}
.CTAT-hint-button--clicked {
	background-color: #FFDB19 /*#FFED3A*/;
	/*border: 1px solid orange;
	fill:black;
	stroke: black;*/
}
/*.CTAT-hint-button--disabled {
	background-color: #EDEDED;
	border: 1px solid darkgrey;
	fill: #9a9a9a; stroke: #9A9A9A;
	cursor: auto;
}*/




/*--------------------------------------------------*\
	#CTAT Done Button
\*--------------------------------------------------*/

.CTAT-done-button {
	padding-top: 0;
	font: 15px Helvetica Neue,Helvetica,Arial,sans-serif;
	border-radius: 5px;
	background-color: #669900;
	border: 1px solid green;
 	fill: black;
 	stroke: black;
 	cursor: pointer;
}
.CTAT-done-button--hover {
	background-color: #5C8A00;
}
.CTAT-done-button--clicked {
	background-color: #85AD33;
}




/*-----------------------------------------------*\
	#CTAT hint window
\*-----------------------------------------------*/

/* Hint window styling, assumes single instance */
.CTAT-hint-window { /* hint window container styling */
	border-radius: 5px;
	border-width: 1px;
	border-style: solid;
	border-color: #cccccc;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	padding: 5px;
	box-sizing: border-box;
	background-color: #dddddd;
}
.CTAT-hint-window--hintcontent { /* Hint window content (eg) hints */
	text-align: left;
	padding: 2px;
	width: 100%;
	overflow: auto;
	background: white;
	box-sizing: border-box;
	border-width: 1px;
	border-style: solid;
	border-color: #cccccc;
	cursor: default;
	height: calc(100% - 26px); /* 26 = button.height + button.borderWidth + margin */
	margin-bottom: 5px;
}
.CTAT-hint-window--button { /* hint window buttons, also uses CTAT hint button style, mostly for coloring */
	border-radius: 5px;
	font: 11px Helvetica Neue,Helvetical,Arial,sans-serif;
	stroke-width: 0px;
	width: 82px;
	height: 20px;
}
.CTAT-hint-window--previous { float: left; } /* hint window previous button */
.CTAT-hint-window--next { float: right; } /* hint window next button */



/*-----------------------------------------------------*\
	#CTAT Skill Window
\*-----------------------------------------------------*/

.CTAT-skill-window { /* skill window container */
	font-size: 12px;
	padding: 6px;
	border: 1px solid #CCCCCC;
	border-radius: 5px;
	box-sizing: border-box;
	background-color: #FAFAFA;
	overflow-x: hidden;
	overflow-y: auto;
}
.CTAT-skill-window--bar { /* skill meter bar */
	border: 1px solid #CCCCCC;
	border-radius: 0.5em;
	height: 1em;
	width: 50%;
	float: left;
	margin-bottom: .5em;
	overflow: hidden;
}
.CTAT-skill-window--bar--mastery { /* skill meter bar mastery fill */
	background: linear-gradient(to bottom, limegreen 0%, lime 50%, limegreen 100%);
	height: 100%;
}
.CTAT-skill-window--label { /* skill meter label */
	float: right;
	width: 45%;
	overflow: hidden;
	height: 1.5em;
	text-align: left;
	white-space: nowrap;
}



/***************************** Container Components ***************************/

/*---------------------------------------------------------------------------*\
	#CTAT Scroll Pane Component
\*---------------------------------------------------------------------------*/
/* For the scroll pane component, probably not the best way to specify it
   given how html authoring will happen, but it works for now. */
[data-ctat-component="CTATScrollPaneComponent"] {
	overflow-y: scroll;
	overflow-x: hidden;
	border: 4px;
	visibility: block;
}



/*********************** Multimedia Components ********************************/

/*----------------------------------------------------------------------------*\
	#CTAT video
\*----------------------------------------------------------------------------*/
video.CTAT-gen-component {
	background-color: inherit;
	filter: alpha(opacity=0);
}



/********************************* Disabling **********************************/

/*-------------------------------------------------------*\
	#CTAT button disabled
\*-------------------------------------------------------*/

/* goes at bottom so that it takes proper precedence */
.CTAT-svg-button--disabled {
	pointer-events: none;
	background-color: #EDEDED;
	border: 1px solid darkgrey;
	fill: #9a9a9a; stroke: #9A9A9A;
	cursor: default;
}
button.CTAT-gen-component:disabled,
button.CTAT-hint-window--button:disabled {
	background-color: #EDEDED;
	border: 1px solid darkgrey;
	text-color: #9A9A9A;
	cursor: default;
}




/********************** Grading **************************/
/*-------------------------------------------------------*\
	#CTAT--incorrect
\*-------------------------------------------------------*/

.CTAT--incorrect {
	-webkit-box-shadow: 0px 0px 15px 5px red;
	-moz-box-shadow: 0px 0px 15px 5px red;
	box-shadow: 0px 0px 15px 5px red;
}
textarea.CTAT--incorrect,
input.CTAT--incorrect[type="text"] {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	color: red;
}
label.CTAT--incorrect {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	text-shadow: 0px 0px 5px red;
}
input.CTAT--incorrect[type="checkbox"],
input.CTAT--incorrect[type="radio"] {
	-webkit-box-shadow: 0px 0px 5px 0px red;
	-moz-box-shadow: 0px 0px 5px 0px red;
	box-shadow: 0px 0px 5px 0px red;
}


/*-------------------------------------------------------*\
	#CTAT--hint
\*-------------------------------------------------------*/

.CTAT--hint {
	-webkit-box-shadow: 0px 0px 15px 5px yellow;
	-moz-box-shadow: 0px 0px 15px 5px yellow;
	box-shadow: 0px 0px 15px 5px yellow;
}
label.CTAT--hint {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	text-shadow: 0px 0px 5px yellow;
}
input.CTAT--hint[type="checkbox"],
input.CTAT--hint[type="radio"] {
	-webkit-box-shadow: 0px 0px 5px 0px yellow;
	-moz-box-shadow: 0px 0px 5px 0px yellow;
	box-shadow: 0px 0px 5px 0px yellow;
}


/*-------------------------------------------------------*\
	#CTAT--correct
\*-------------------------------------------------------*/

.CTAT--correct { /* general correct highlighting */
	-webkit-box-shadow: 0px 0px 15px 5px limegreen;
	-moz-box-shadow: 0px 0px 15px 5px limegreen;
	box-shadow: 0px 0px 15px 5px limegreen;
}
textarea.CTAT--correct,
input.CTAT--correct[type="text"] { /* font color change for text components */
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	color: limegreen;
}
label.CTAT--correct { /* labels for checkboxes and radio buttons */
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	text-shadow: 0px 0px 5px limegreen;
}
input.CTAT--correct[type="checkbox"],
input.CTAT--correct[type="radio"] {
	-webkit-box-shadow: 0px 0px 5px 0px limegreen;
	-moz-box-shadow: 0px 0px 5px 0px limegreen;
	box-shadow: 0px 0px 5px 0px limegreen;
}

/*[name="button"] {
	background: linear-gradient(to bottom, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.4) 100%), url("../skindata/CTAT-icon.svg") no-repeat center center;
	background-size: 100% 100%;
}*/

/*-------------------------------------------------------*\
	Used by the scrim
\*-------------------------------------------------------*/

.ctatpageoverlay
{
    background-color: rgba(128,128,128,0.5);
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:1000;
}

.css3-windows-7 .fenster
{
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	border-radius:7px;
	-moz-box-shadow:0 0 0 1px #eee inset, 0 0 15px rgba(0,0,0,0.9);
	-webkit-box-shadow:0 0 0 1px #eee inset, 0 0 15px rgba(0,0,0,0.9);
	box-shadow:0 0 0 1px #eee inset, 0 0 15px rgba(0,0,0,0.9);
	background-color:rgba(160,160,160,0.4);
	border:1px solid #000;
	padding-bottom:46px;

	position:absolute;
	width:389px;
	height:146px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.css3-windows-7 .fenster .titel
{
	background:transparent url(data:image/gif;base64,R0lGODlhEAAQAPcAAAAAAP///8TAwv39/ikvVJGUp+rr8UtRcVBWdomNoh0nUiQtVSgyWikyWvHy9u/w9BglViAtXSIvXCUwWwEXVQIYVgMZWAQaWAUbWQUbWAYcWQcdWgcdWQccWAgeWgkfWwogXAsgXQshXQshXA0iXg0iXQ4jXw4kXw4jXg8kXxAlYBElYBEmYBInYRMoYhMoYRMoYBMnXxYrZBYpYBgtZhgsZRktZhkuZhovZx0waCI2bCY5bjFDdTRGeDpMfD5PfkJSgUNUgkdXhEpahllnkGJvloiSr5GbtpOct5ylvaKqwKmwxba8zrm/0L7E1M3R3dzf6N/i6t3g6PLz9g8lXxAmYBguZmVzmGp4nHOAoqqyxsHH1r/F1Ovt8vX2+Pr7/P+eGP+fGP+dGf+bGv6bGvqZG/mZHPiYHPOWHeqSIOWQIcuEKPmYHPaXHfWWHeiQIeaPIeeQIuOOIuKOIuCMI9yLJNGFJ9CFJ8+DKMuCKcyCKo5jO4FeP4dhQXtcRG9VRWZQSP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAIEALAAAAAAQABAAAAjdAHEIxNGnTZyDB8/4wUFDh4qHKvaIIcPmjJkxYPioMGGlhccWf/DocVMGTR47gFqowPGxxQwYBOCIobOgQwyVLD+i8IDgjZg5BYq4WLFSJwslAnzKSTDAyIUqOVl8WDLlgFIIQLCIKNqCA5EAQhQolQCixAuuHpw0qcBg7MeiVGoYyGKhrRg5Et6yTJHDwRUMDdKEUZPXY1EVLKAgoTDhTp01EfR6zHCki4wRLVmQwOmxxI4HWj5oOJFiwwkeLLi20DDEy5YgN2z4YJIkg+oWGXpw+RJFypcnP0JADQgAOw==) no-repeat 6px 6px;
	color:#000;
	cursor:move;
	font:normal 12px/16px "Segoe UI",Arial,sans-serif;
	height:16px;
	overflow:hidden;
	padding:6px 0 6px 28px;
	text-overflow:ellipsis;
	text-shadow:0 0 1px #fff, 3px 3px 5px #fff, -3px -3px 5px #fff, -3px 3px 5px #fff, 3px -3px 5px #fff;
	white-space:nowrap;
	margin: 0px;
}
.css3-windows-7 .fenster .inhalt
{
	-moz-border-radius:1px;
	-webkit-border-radius:1px;
	border-radius:1px;
	-moz-box-shadow:0 0 0 1px rgba(255,255,255,0.65);
	-webkit-box-shadow:0 0 0 1px rgba(255,255,255,0.65);
	box-shadow:0 0 0px 1px rgba(255,255,255,0.65);
	background-color:#fff;
	border:1px solid #666;
	color:#000;
	font:bold 16px arial,sans-serif;
	height:100%;
	margin:0 6px;
	overflow:auto;
	padding:5px;
	position:relative;

	text-align: center;
	vertical-align: middle;
}

.css3-windows-7 .inhalt p
{
	margin-bottom:10px;
}

.css3-windows-7 .inhalt img
{
	background-color:#f1f1f1;
	border:0px solid #ddd;
	float:center;
	margin:0 20px 10px 0;
	padding:1px;
}

/* Resizeable */
.ui-resizable-handle{display:block;position:absolute;}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle{display:none;}
.ui-resizable-n,.ui-resizable-s{height:7px;left:0;width:100%;}
.ui-resizable-n{cursor:n-resize;top:-5px;}
.ui-resizable-s{bottom:-5px;cursor:s-resize;}
.ui-resizable-e,.ui-resizable-w{height:100%;top:0;width:7px;}
.ui-resizable-e{cursor:e-resize;right:-5px;}
.ui-resizable-w{cursor:w-resize;left:-5px;}
.ui-resizable-se,.ui-resizable-sw,
.ui-resizable-nw,.ui-resizable-ne{height:12px;width:12px;}
.ui-resizable-se{bottom:0;cursor:se-resize;right:0;}
.ui-resizable-sw{bottom:0;cursor:sw-resize;left:0;}
.ui-resizable-nw{cursor:nw-resize;left:0;top:0;}
.ui-resizable-ne {cursor:ne-resize;right:0;top:0;}

.scrimButton {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
	background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
	background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
	background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
	background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
	background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
	background-color:#f9f9f9;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #000000;
	display:inline-block;
	cursor:pointer;
	color:#666666;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	margin: 2px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}
.scrimButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9));
	background:-moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
	background:-webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
	background:-o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
	background:-ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
	background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9',GradientType=0);
	background-color:#e9e9e9;
}
.scrimButton:active {
	position:relative;
	top:1px;
}

#container{
	width: 586px !important;
	border: 1px solid gray;
}
.CTATTutorContainer > div:nth-child(2){
	width: 300px !important;
}
img[alt="CTAT: Cognitive Tutor Authoring Tools"]{
	width: 290px !important;
}
.CTAT-text{
	line-height: 30px;
}
.CTAT-skill-window--bar{
	width: 40% !important;
	clear: both;
}
.CTAT-skill-window--label{
	width: 55% !important;
}