@charset "utf-8";
html, body {
	width: 100%;
	height: 100%;
}

#sketch {
	border: 3px solid gray;
	height: 300px;
	position: relative;
}

#tmp_canvas {
	position: absolute;
	left: 0px; right: 0;
	bottom: 0; top: 0;
	cursor: crosshair;
}/* CSS Document */

a:link {
    text-decoration: none;
	color:#000000;
}

/*** worksheet box ***/

#reviews_box1
{
  position:absolute;
  width:290px;
  height:450px;	
  left:-60px;
  top:25px;
  overflow:auto;
}
#reviews_box2
{
  position:absolute;
  width:742px;
  height:390px;
  left:219px;	
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

#reviews_box21
{
  position:absolute;
  width:732px;
  height:390px;
  left:231px;	
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

#reviews_topics_box {
	left:0px;
	width:710px;
	height:78px;
	padding:15px;
	border-radius:0px;
    border:1px solid #999;
 	}

#reviews_topics {
	width:400px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	font-style:normal;
	font-weight:lighter;
	left:0px;
	padding:15px;
	cursor:pointer;
	text-decoration:none;
}

#reviews_topics_date {
	width:250px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	font-weight:200px;
	position:absolute;
	left:495px;
	padding:15px;
	font-weight:lighter;
	text-decoration:none;
}

.reviews_online {
	position:absolute;
	right:90px;
	width:50px;
	height:61px;
	background-image:url("images/worksheet_online.png");
	background-color:transparent;
	border:none;
	padding:15px;
	cursor:pointer;
}

.reviews_offline {
	position:absolute;
	right:30px;
	width:50px;
	height:61px;
	background-image:url("images/worksheet_offline.png");
	background-color:transparent;
	border:none;
	padding:15px;
	cursor:pointer;
}
ul.reviews
{ 
    font-family:Helvetica;
	font-weight:100;
	font-style:normal;
	font-size:18px;
	letter-spacing:1px;
	color:black; 
}

ul.reviews li
{ 
position:relative;
width:716px;  
margin:20px 0px;
height:20px;
}
.lists li.rounds {
	
}
label
{
    margin: 4px 0px 2px 0px;
    float: left;
    width: 150px;
	font:Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:lighter;
}
label {
  width:800px;
}

/* hide input */
input.radio:empty {
	margin-left: -999px;
}

/* style label */
input.radio:empty ~ label {
	position: relative;
	float: left;
	line-height: 2.5em;
	text-indent: 3.25em;
	margin-top: 2em;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

input.radio:empty ~ label:before {
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	content: '';
	width: 2.5em;
	background: #D1D3D4;
	border-radius: 6px 0 0 3px;
}

/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
	content:'\2714';
	text-indent: .9em;
	color: #C2C2C2;
}

input.radio:hover:not(:checked) ~ label {
	color: #777;
}

/* toggle on */
input.radio:checked ~ label:before {
	content:'\2714';
	text-indent: .9em;
	color: #9CE2AE;
	background-color: #4DCB6D;
}

input.radio:checked ~ label {
	color:#777;
}


/***POPUP CALC ***/

.modal-box {
  display: none;
  position: absolute;
  z-index: 1000;
  width: 100%;
  background:url('jquery.confirm/body_bg.jpg') repeat-x left bottom #e5e5e5;
  border-bottom: 1px solid #aaa;
  border-radius: 5px;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-clip: padding-box;
}
@media (min-width: 32em) {

.modal-box { width: 80%; 
background:url('jquery.confirm/body_bg.jpg') repeat-x left bottom #e5e5e5;}
}

.modal-box header,
.modal-box .modal-header {
  padding: 0.25em 1.5em;
  border-bottom: 1px solid #ddd;
  background:url('jquery.confirm/header_bg.jpg') repeat-x left bottom #f5f5f5;
  color:#666666;
  font:Helvetica;
  font-size:16px;
}

.modal-box header h3,
.modal-box header h4,
.modal-box .modal-header h3,
.modal-box .modal-header h4 { margin: 0; }

.modal-box .modal-body { padding: 0em 1.5em; }

.modal-box footer,
.modal-box .modal-footer {
  padding: 0em;
  border-top: 1px solid #ddd;
  background: rgba(0, 0, 0, 0.02);
  text-align: right;
}

.modal-overlay {
  opacity: 0;
  filter: alpha(opacity=0);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100%;
  height: 100%;
 /* background: rgba(0, 0, 0, 0.3) !important; */
	background:url('jquery.confirm/ie.png');
	background: -moz-linear-gradient(rgba(11,11,11,0.1), rgba(11,11,11,0.6)) repeat-x rgba(11,11,11,0.2);
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(11,11,11,0.1)), to(rgba(11,11,11,0.6))) repeat-x rgba(11,11,11,0.2);

}

a.close {
  line-height: 1;
  font-size: 1.5em;
  position:fixed;
  top: 17%;
  right: 17%;
  text-decoration: none;
  color: #bbb;
}

a.close:hover {
  color: #222;
  -webkit-transition: color 1s ease;
  -moz-transition: color 1s ease;
  transition: color 1s ease;
}


/*** Worksheet answer key ***/

h1 {
    text-align: center;
}

.wrapper {
    width: 250px;
    margin: 40px auto;
}

.tree-menu ul { list-style: none; }

.tree-menu > ul { padding: 0; }

.tree-menu a {
  display: block;
  vertical-align: middle;
  text-decoration: none;
  padding: 6px;
  background-color: #efefef;
  border-radius: 4px;
  margin-bottom: 1px;
  color: #002888;
  -moz-transition: background-color 0.25s linear;
  -webkit-transition: background-color 0.25s linear;
  -o-transition: background-color 0.25s linear;
  transition: background-color 0.25s linear;
  -moz-transition-delay: 0.15s;
  -webkit-transition-delay: 0.15s;
  -o-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

.tree-menu a:hover {
  color: #f53d3e;
  -moz-transition: background-color 0.1s linear;
  -webkit-transition: background-color 0.1s linear;
  -o-transition: background-color 0.1s linear;
  transition: background-color 0.1s linear;
}

.tree-menu .active > a:hover,
.tree-menu .selected > a,
.tree-menu a:hover { background-color: #c6cdde; }

.tree-menu .selected > a {
  color: #f53d3e;
  font-weight: bold;
  text-decoration: none;
}

.tree-menu .active > a { background-color: #e1e3e9; }

.tree-menu .closed > a,
.tree-menu .opened > a {
  padding-left: 24px;
  background-position: 4px 8px;
  background-repeat: no-repeat;
}

.tree-menu .closed > a { background-image: url(images/icon-expand.gif); }

.tree-menu .opened > a { background-image: url(images/icon-collapse.gif); }

