/* Styles for Aleph Null. */
html, body {
	padding:0;
	margin:0;
}
body { 
	background-color: #ffffff;
}
.titleImage {
	/*Aleph Null logo (Hebrew letter aleph) */
	position:absolute;
	top:5px;
	left:5px;
	cursor:pointer;
	z-index: 1005;
}
#titleDiv {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,333333+100 */
	background: #000000; /* Old browsers */
	background: -moz-linear-gradient(top,  #000000 0%, #333333 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #000000 0%,#333333 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #000000 0%,#333333 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#333333',GradientType=0 ); /* IE6-9 */
	padding:5px;
}
#titleWords {
	/* Title image in About window. */
	max-width: 100%;
	height:auto;
	margin-bottom:-10px;
}
.openingImageDiv {
	/* Div of the first image seen, then faded */
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	text-align: center;
	background-color: black;
	z-index: 999999999;
}
#openingImage {
	/* The title image with the words on it 'Aleph Null'
	that appears first. */
	position:relative;
	max-width: 100%;
	height:auto;
	top:35%;
}
.vispoLogo {
	/* Logo at bottom right */
	position:absolute;
	cursor:pointer;
	right:14px;
	top:14px;
}
#canvasContainer {
	/* Div that contains all the canvas elements*/
	position:absolute;
	z-index: -1;
}
.canvas {
	/* the drawing surface */
	position: absolute;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	z-index:-1;
}
#editableBrushMenuContainer {
	height:100%;
	display:inline-block;
	width:45%;
	width:calc(49% - 18px);
}
.dropDownMenu {
	font-weight: normal;
	padding-left:5px;
	text-align: center;
	color: #ffffff;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	text-shadow: 1px 1px #000000;
	width:100%;
	float: left;
	border: 1px solid #505050;
	background-color: #373737;
	height:100%;
	cursor:pointer;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	-webkit-appearance:none;
  outline: none;
}
a.buttonA2:link, a.buttonA2:visited {
	/* The 'erase' and 'about' buttons */
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	text-shadow: 1px 1px #000000;
	color: #FFF;
	text-decoration: none;
	background-color: rgba(55,55,55,0.5);
	border: 1px solid #000;
	display:block;
	text-align:center;
	float:left;
	height:100%;
	margin-right:1px;
	margin-left:1px;
	cursor:pointer;
}
a.buttonA2:hover {
	color: red; /*#288db1;*/
}
a.buttonA2:active {
	color: red;
	background-color: rgba(55,55,55,1);
}
#newBrushButton, #deleteBrushButton, #stopButton {
	width:17%;
}
#aboutButton, #pauseButton, #eraseButton, #routeButton {
	width:47px;
	width:calc(25% - 6px);
}
#tipsButton, #mouseControlledPositionButton, #moreControlsButton, #saveButton {
	width:47px;
	width:calc(25% - 6px);
}
#shapeMenuCell {
	width:100px;
	height:18px;
}
.dropDown {
	background:rgba(55,55,55,0.5); 
	width:200px;
	border: 1px solid #000;
	font-weight: normal;
	color: #fff;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	text-shadow: 1px 1px #000000;
	text-align:center;
	height: 100%; /* 17px; */
	cursor:pointer;
	-webkit-appearance: none;
	-webkit-border-radius: 0.0em;
	border-radius: 0px;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
option {
	background-color: black;
}
.colorPickerInput {
	/* Color-picker input box */
	color:#FFF;
	text-align:center;
	background-color:#000;
	line-height:11px; 
	font-size:11px;
	width:47%;
	width:calc(50% - 14px);
	border: 1px solid #373737;
	font-family: Verdana, Geneva, sans-serif;
	cursor:pointer;
}
#backgroundColorPickerInput {
	float:right;
}
.controlsTable {
	/* Table in which the controls are located */
	width:330px;
	position:absolute;
	top: 57px;
	left:8px;
	margin:0px;
	z-index:1000;
	padding:0px;
	display: block;
}
#nibIconScroller {
	width:300px;
	white-space: nowrap;
	overflow-y: hidden;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
	-moz-user-select: none; 
  -khtml-user-select: none; 
  -webkit-user-select: none; 
  -o-user-select: none; 
}
#nibIconScroller {
    scrollbar-face-color: #555;
    scrollbar-shadow-color: #888;
    scrollbar-highlight-color: #000;
    scrollbar-3dlight-color: #000;  
    scrollbar-darkshadow-color: #000;
    scrollbar-track-color: #373737;
    scrollbar-arrow-color: #888;
}
.nibIcon {
	display: inline;
	opacity:0.7;
	cursor:pointer;
}
::-webkit-scrollbar {
    width: 12px;
    background-color: #000;
    height:16px;
    border: 1px solid #373737;
    cursor:grabbing;
}
::-webkit-scrollbar-track {

}
::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    background-color: #676767;
}
.control {
	/* Slider */
	line-height:11px;
	font-size:11px;
	background:rgba(55,55,55,0.5); 
	padding-bottom:5px;
	margin:1px;
	color:#ffffff;
	font-family: Verdana, Geneva, sans-serif;
	border: 1px solid #000;
}
.greyScaleGradient {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,6d6d6d+50,000000+100 */
	background: rgb(0,0,0); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(109,109,109,0.3) 50%, rgba(0,0,0,0.3) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.3)), color-stop(50%,rgba(109,109,109,0.3)), color-stop(100%,rgba(0,0,0,0.3))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(109,109,109,0.3) 50%,rgba(0,0,0,0.3) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(109,109,109,0.3) 50%,rgba(0,0,0,0.3) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(109,109,109,0.3) 50%,rgba(0,0,0,0.3) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(109,109,109,0.3) 50%,rgba(0,0,0,0.3) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
.greyScaleGradientOpaque {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,6d6d6d+50,000000+100 */
	background: rgb(0,0,0); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(0,0,0,1.0) 0%, rgba(109,109,109,1.0) 50%, rgba(0,0,0,1.0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1.0)), color-stop(50%,rgba(109,109,109,1.0)), color-stop(100%,rgba(0,0,0,1.0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(0,0,0,1.0) 0%,rgba(109,109,109,1.0) 50%,rgba(0,0,0,1.0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(0,0,0,1.0) 0%,rgba(109,109,109,1.0) 50%,rgba(0,0,0,1.0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(0,0,0,1.0) 0%,rgba(109,109,109,1.0) 50%,rgba(0,0,0,1.0) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(0,0,0,1.0) 0%,rgba(109,109,109,1.0) 50%,rgba(0,0,0,1.0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
.handle {
	/* Slider handle */
	background:#676767;
	border: 1px solid #979797;
	opacity:0.9;
	cursor:grab !important;
}
.sliderLabel {
	/* Slider label */
	text-shadow: 1px 1px #000000;
	padding-top:1px;
	padding-left:5px;
}
.controlCell {
	/* Table cell style for all controls in controlsTable */
	height: 18px;	
	width:100%;
}
.controlLabelCell {
	/* Table cell style for all control labels */
	width:15px;
}
.controlLabel {
	/* The control labels themselves */
	text-shadow: 1px 1px #000000;
	filter: glow(color=#000000,strength=1);
	line-height:11px;
	font-size:11px;
	text-align:left;
	margin:1px;
	color:#ffffff;
	font-family: Verdana, Geneva, sans-serif;
	padding-left: 4px;
}
.keyLabel {
	/* The numbers to the left of the controls */
	text-shadow:#000000 1px 1px 0px;
	filter: glow(color=#000000,strength=1);
	line-height:11px;
	font-size:11px;
	text-align:center;
	margin:1px;
	color:#ffffff;
	font-family: Verdana, Geneva, sans-serif;
	padding-left: 0px;
}
.checkBox {
	color: #FFF;
	float:left;
	margin:1px;
	cursor:pointer;
}

/* *************************************************************
ABOUT and TIPS windows
************************************************************** */

.aboutContainer {
	/* All the 'about' styles refer to the window of text about
	   Aleph Null and the Tips window. This one's the container 
	   of those windows.*/
	position:absolute;
	background-color:#202020;
	width:90%;
	max-width:550px;
	height:90%;
	border: 1px groove #c0c0c0;
	z-index:20000;
	display:none;
}
.aboutContainer {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,222222+100 */
	background: #000000; /* Old browsers */
	background: -moz-linear-gradient(top,  #000000 0%, #222222 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#222222)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #000000 0%,#222222 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #000000 0%,#222222 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #000000 0%,#222222 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #000000 0%,#222222 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#222222',GradientType=0 ); /* IE6-9 */
}
#helpContainer {
	/* The container for the Tips window. The Tips window
	is assigned the aboutContainer style with the below
	differences. */
	width:100%;
	right:0px;
	bottom:0px;
	height:134px;
	z-index:19000;
}
.aboutTitleBar {
	/* The about window's title bar */
	background-image: url(../images/titleBarGradient.gif);
	background-repeat: repeat-x;
	position: relative;
	height:28px;
	top:0px;
	left:0px;
	right:0px;
	padding:4px;
	padding-left:10px;
	color:#FFF;
	font-family:Verdana, Geneva, sans-serif;
	font-size:15px;
	cursor:move;
	z-index:20001;
}
#helpTitleBar {
	/* The Tips window title bar uses the aboutTitleBar
	style with this exception. */
	z-index: 19001
}
.aboutTextContainer {
	/* This is a container of the whole 'about' text */
	background-color:#333; 
	position:relative;
	margin-top:10px;
	margin-left:10px;
	margin-right:10px;
	margin-bottom: 10px;
	padding-top:10px;
	padding-bottom:10px;
	bottom:10px;
	border: 1px solid #FFF;
	height:95%;
	height:calc(100% - 68px);
	overflow:auto;
}
.aboutText {
	/* This is the whole 'about' text */
	background-color:#333; 
	margin:0;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}
.helpText {
	/* This is a container of the Tips text */
	background-color:#333;
	width:92%;
	margin-left:2%;
	height:53px;
	border: 1px solid #FFF;
	padding-right: 2%;
	padding-bottom:10px;
	padding-left: 2%;
	z-index:19001;
	overflow:auto;
}
#introText {
	/* The Tips text */
	padding-top:7px;
	margin-top:0px;
}
.helpButtonsContainer {
	width:96%;
	margin-left:2%;
	text-align:center;
}
.helpButton {
	/* The buttons in the Tips window */
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	text-shadow: 1px 1px #000000;
	color: #FFF;
	float:left;
	margin-top:5px;
	width:49%;
	line-height:20px;
	text-decoration: none;
	background: black;
	border: 1px solid #fff;
	display:block;
	text-align:center;
	float:left;
	cursor:pointer;
}
#helpNextButton {
	float:right;
}
.aboutHeader {
	/* The orange text headers in the About window. */
	font-family: Verdana, Geneva, sans-serif;
	font-size: 15px;
	font-weight: bold;
	font-variant: small-caps;
	color: #F60;
	text-shadow: 1px 1px #000;
	background-color: #111;
	width:97.5%;
	padding:3px;
	border: 1px solid #505050;
}
.aboutHeader {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#111111+0,444444+100 */
	background: #111111; /* Old browsers */
	background: -moz-linear-gradient(left,  #111111 0%, #444444 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #111111 0%,#444444 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #111111 0%,#444444 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111111', endColorstr='#444444',GradientType=1 ); /* IE6-9 */
}
.aboutRegular {
	/* Regular 'about' text. */
	font-family: Verdana, Geneva, sans-serif;
	font-size: 13px;
	color: #FFF;	
}
a.aboutLink:link, a.aboutLink:visited {
	/* Links in the 'about' window */
	color: #999;
	text-decoration: none;
	font-weight: bold;
}
a.aboutLink:hover {
	color: #CA0000;
	text-decoration: none;
	font-weight: bold;
}
.aboutClose {
	/* The 'about' window close button */
	position: absolute;
	top: 6px;
	right: 10px;
	cursor:pointer;
	z-index:20002; 
}
.aboutWindowMenu {
	font-weight: normal;
	color: #ffffff;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	padding: 5px;
	position: relative;
	float: left;
	margin: 3px;
	border: 1px solid #505050;
	background-color: #373737;
	cursor:pointer;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
.aboutWindowMenu:focus {
    outline: none !important;
    border:1px solid #f60;
    box-shadow: 0 0 10px #719ECE;
}
.help {
	/* The Help text below the controls */
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	color: #FFF;
	text-shadow: 1px 1px #000000;
	background-color: rgba(55,55,55,0.5);
	margin: 2px;
	padding: 5px;
	border: 1px solid #000;	
	cursor:pointer;
}
ul {
	list-style-position: outside;
	padding-left: 15px;
}
.t {
	/* Red text in tips window */
	color:#ede168;
	font-weight: 900;
	text-shadow: 1px 1px #000000;
	font-variant: small-caps;
}
.u {
	/* Orange text in About window */
	color: #F60;
	text-shadow: 1px 1px #000000;
}
.v {
	/* Orange text in About window */
	font-family: Verdana, Geneva, sans-serif;
	color: #F60;
	text-shadow: 1px 1px #000000;
	font-weight: bold;
}
.inputTextArea {
	font-family: Verdana, Geneva, sans-serif;
	color: #cccccc;
	background-color: #222;
	width:97.5%;
	height:45px;
	border:1px solid #505050;
	-moz-user-select: text;
  -khtml-user-select: text;
  -webkit-user-select: text;
  user-select: text;
}
.inputTextArea:focus {
    outline: none !important;
    border:1px solid #f60;
    box-shadow: 0 0 10px #719ECE;
}
#text1boxOK, #text2boxOK {
	width:50px;
	border:1px solid #505050;
	padding:5px;
	float:none;
}
.listGraphic {
	float:left;
	clear:both;
}
a.whiteLink:link, a.whiteLink:visited {
	cursor: pointer;
	color:white;
	text-decoration: none;
}
a.whiteLink:hover {
	color:red;
}