/* This style sheet supports both the WSP Tool Library and the WSP Viewer
 */

body {
  background-color: lemonchiffon;
}

h3 {
  margin: 0 auto;
  text-align: center;
}

#about p {
	-webkit-column-break-inside: avoid;
	break-inside: avoid-column;
	page-break-inside:avoid;
  margin-bottom: 4px;
}

.lib-about-div {
	columns: 2;
	-webkit-columns: 2;
	-moz-columns: 2;
	column-gap: 3rem;
	margin: 0;
}

.credits {
  height: 60px;
}

.credits div {
   display: inline-block;
   vertical-align: middle;
}

.credits.nsf a img {
  height:60px;
}

.credits.mhe a img {
  height:45px;
  padding: 0 8px;
}

/* uLeftPane styles (Library) */

.debug {
  display: none;
}

#sizePane {
  padding: 5px 10px;  
}

#sizePane label {
	font-family: sans-serif;
	width: 3rem;
	float: left;
}

.uLeftPane {
	width: 165px;
	float: left;
  text-align: left;
  font-family: sans-serif;
  font-size: 14px;
  margin-right: 10px;
  margin-top: 2.4rem; /* approximates the rendered height of .uTitle (font-size 1.5rem plus its
                          line-height and padding-bottom), so this pane starts roughly level with
                          the top of the sketch area on the right, which sits below the title. */
}

.uLeftSub {
  position: relative;
  border: 1px solid black;
  border-collapse: collapse;
  background-color: #fff;
  padding: 0.5rem;
  line-height: 1.5rem;
}

.uLeftSub input {
  line-height: 1.2rem;
  margin-bottom: 4px;
}

.uLeftSub input:focus{
  outline: 3px solid blue;
  border-radius: 4px;
  z-index: 1;
}

.uPrefChoices {
  border-bottom: 2px dashed #bbb;
}

input.uDebugActions {
  display: none;
  font-size: 11.5px;
  line-height: inherit;
  border-top: none;
}

.authorPrefList input.wsp-page-buttons { /* prevent this checkbox from floating right */
  float: none;
}

/* uLeftPane end */

/* uRightPane styles (Library) */
.uRightPane {
  width: fit-content;
}

#toolCollection {
	width: 770px;
	height: 340px;
	padding: 0;
	padding-left: 8px;
	margin:0;
	border: 1px solid lightgray;
	overflow-y: auto;
	resize: both;
}

#toolTable {
	box-sizing: border-box;
	clear: both;
	font-family: sans-serif;
	text-align: center;
	font-size: 0.8rem;
	width: 100%;
	margin-top: 1.5rem;
	margin-left: -1px;
}

.toolItem {
	display: inline-block;
	float: left;
	height: 74px;
	width: 82px;
	padding: 0px;
	background-color: white;
	border: 1px solid LightGray;
	border-top: 3px solid black;
	border-bottom: 3px solid black;
	border-collapse: collapse;
	vertical-align: middle;
	text-align: center;
	margin: -2px 0;
}

.toolFocus {
  background-color: #ddddff; /* was ffffc8 */
  outline: 0 !important;  /* Otherwise focus rings are broken on tool library's buttons */
}

.firstToolItem {	/* borders are collapsed. Need to adjust first & last of a group to be same width as other cells */
	border-left: 4px solid black;
  border-radius: 9px 0px 0px 9px;
}

.lastToolItem {
  border-right: 4px solid black;
	padding-right: 0px;
  border-radius: 0 9px 9px 0;
}
	
.toolItem img {
	height: 70%;
}

/* uRightPane end */

/* VIEWER styles */


#uControls {
	position:fixed;
	width: 8rem;
	height: 100%;
	top: 0;
	left: 0;
  margin: 0.5rem;
}

#uContent {	/* The portion of the screen to the right of the uControls */
	margin-left: 9rem;
}

/* defunct styles to be deleted (CHECK AGAINST viewer.shtml)

*/

#uSketchList {
	padding: 0 0.5rem;
	cursor: default;
}

#uSketchList li {
	cursor: default;
	display:block;
	padding:5px;
	font-family: sans-serif;
	font-size: 0.8rem;
	font-weight: 500;
	width: inherit;
	max-width: inherit;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.newPageButton {
	margin:4px 4px 0px 4px;
	font-size: 0.85rem;
	background-color: #ddf;
	float:right;
	cursor: pointer;
}

#uToolList {
padding-left: 0;
cursor: default;
}

#uToolList li {
display:block;
padding: 3px 0px;
font-family: sans-serif;
font-weight: 500;
width: inherit;
max-width: inherit;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

.drag-handle {
display: inline-block;
cursor: grab;
padding: 0 5px 0 2px;
color: #aaa;
font-size: 16px;
user-select: none;
}

.drag-handle:active {
cursor: grabbing;
}

#widgetOptions, .uToolLoc label {
  font-size: 12px;
}

.uDropDown {
  position: relative;
  display: inline-block;
}

#uPrefDiv {
  display: none;
  position: absolute;
  background-color: #f8f8f8;
  min-width: 160px;
  border: 2px solid black;
  z-index: 1;
  width: 250px;
  margin-left: -9px;
}

#uPrefList {
  padding-left: 8px;
  margin: 0;
}

#uPrefList li {
  line-height: 18px;
  list-style: none;
  padding-bottom: 5px;
}

.uOutline {
border: 0.15rem solid blue;
}

.drag-ghost {
opacity: 0.3;
background: #c8ebfb;
}

#uSketchList li.uSelected {
background-color: #e8f0fe;
font-weight: bold;
}

.uTrashIcon {
height: 2rem;
margin-top: 0.5rem;
background-image: url("./trash.png");
background-repeat: no-repeat;
background-position: center;
background-size: 30%;
}

li#clone {
	font-weight:600;
	font-size: 1.5rem;
	padding: 0.4rem;
	margin: 0 auto;
}

.uTitle {
 text-align:center;
 font-family: sans-serif;
 padding-bottom: 0.5rem;
 font-size: 1.5rem;
}

.uTitleButton {
  float: right;
  font-size: 1rem;
}

.uAbout {
margin: 0 auto;
margin-bottom: 1rem;	
border: 1px solid black;
padding: 1rem;
padding-bottom: 1rem;
display:none;
position: relative;
max-width:860px;
width: 100%;
height: auto;
font-family: serif;
background-color: #fff;
}

video.uAbout {
display: none; /* overridden by .visible */
width: 100%;
height: auto;
}

.uAbout ul {
  padding: 5px 20px;
  margin-top: 6px;
}

.visible {
	display: block;
}
.uAboutClose {
position:absolute;
margin-top: -5px;
top: 0;
left: 96%;
}

.uAbout .firstPara {
margin-top: 0;
}

.uClear {
clear: both;
}

.uSizeButton {
width: 3rem;
}

p.uContainerText {
font-size: 1rem;
}

.uLibDirections {
float: left;
font-family: serif;
padding-top: 5px;
}

.uLibButtons {
float: right;
margin: 5px;
display: flex;
flex-direction: row-reverse;
}

.uLibButtons button:focus{
  outline: 3px solid blue;
  border-radius: 4px;
  z-index: 1;
}

.sketch_container {
	margin-left: 2px; /* match left edge with tool collection */
}

#utilPrompt {
  display: block
}

#wsp-tools-resize {
  position:relative;
  z-index: 1;
  height: 15px;
  width: 15px;
  cursor: move;
  padding:0;
}

#wsp-tools-resize img {
  width:14px;
}