/* Aleph Null 3.0 by Jim Andrews, October 2017 */

/* Styles for Aleph Null. */

/* *************************************************************
HTML AND BODY
************************************************************** */

html, body {
	padding:0;
	margin:0;
}
body { 
	background-color: #ffffff;
	transition: background-color 5s;
}
strong { 
	font-weight: bold;
}

/* *************************************************************
INTRO
************************************************************** */

.openingImageDiv {
	/* Div of the first image seen, which then fades out */
	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%;
}

/* *************************************************************
PERSISTENT LOGOS (unless you press the 'l' key)
************************************************************** */

.titleImage {
	/*Aleph Null logo (Hebrew letter aleph) */
	position:absolute;
	top:5px;
	left:5px;
	cursor:pointer;
	z-index: 1005;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
.vispoLogo {
	/* Logo at bottom right */
	position:absolute;
	cursor:pointer;
	right:14px;
	top:14px;
}

/* *************************************************************
CANVAS
************************************************************** */

#canvasContainer {
	/* Div that contains all the canvas elements*/
	position:absolute;
	z-index: -1;
	/*overflow: hidden;*/
}
.canvas {
	/* The drawing surface. They can be stacked in layers. */
	position: absolute;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	z-index:-1;
}

/*
@font-face {
    font-family: Impact;
    src: url(../../fonts/impact.ttf);
}
*/

/* *************************************************************
DROP DOWN MENU
************************************************************** */

#editableBrushMenuContainer {
	/*Div that contains the drop down menu to select editable brush.*/
	height:100%;
	display:inline-block;
	width:45%;
	width:calc(49% - 18px);
}
.dropDownMenu {
	/*Applied in createButtons to dynamically created dropdowns.*/
	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;
}
option {
	/*The options in the editable brush menu are set to central color.
	The options in the Nib Options window are black.*/
	background-color: black;
}

/* *************************************************************
BUTTONS
************************************************************** */

a.buttonA2:link, a.buttonA2:visited {
	/* The 'erase' and 'about' buttons and their ilk. */
	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.65);
	border: 1px solid #000;
	display:block;
	text-align:center;
	float:left;
	height:100%;
	margin-right:2px;
	margin-left:0px;
	cursor:pointer;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
a.buttonA2:hover {
	color: red; /*#288db1;*/
}
a.buttonA2:active {
	color: red;
	background-color: rgba(55,55,55,1);
}
.buttonA3 {
	/*Applied to the Add System Font button.*/
	float:none;
	width:200px;
}
#newBrushButton, #deleteBrushButton, #stopButton {
	/*First row of buttons in control panel.*/
	width:17%;
}
#pauseButton, #eraseButton, #routeButton, #fullscreenButton, #upButton, #downButton {
	/*Second row of buttons in control panel.*/
	width:36px;
	width:calc(16.667% - 4px);
}
#tipsButton, #mouseControlledPositionButton, #aboutButton, #shareButton, #canvasButton {
	/*Bottom row of buttons in control panel.*/
	width:36px;
	width:calc(16.667% - 4px);
}
#saveButton {
	/*Button you click to create a png screenshot in new browser tab.*/
	margin-right: 0px;
	width:36px;
	width:calc(16.667% - 2px);
}

/* *************************************************************
COLOR PICKERS
************************************************************** */

.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;
	margin-right:0px;
}
#backgroundColorPickerInput {
	float:right;
}
a.whiteLink:link, a.whiteLink:visited {
	/*Applied to the word 'Close' the color pickers.*/
	cursor: pointer;
	color:white;
	text-decoration: none;
}
a.whiteLink:hover {
	color:red;
}

#colorPickerTransparencyContainer {
	/*div that contains the Transparency checkbox for bg*/
	color: #000000;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	background-color: white;
	padding-bottom:3px;
	text-align: center;
}

#colorPickerTransparency {
	/* bg transparency checkbox */
	position: relative;
    top: 3px;
    cursor: pointer;
}

#colorPickerTransparencyLabel {
	cursor: pointer;
}

/* *************************************************************
CONTROL TABLE AND SLIDERS
************************************************************** */

.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;
	border-spacing: 0px;
}
#nibIconScroller {
	/*The div in which the scrollable row of nib icons is located.*/
	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 {
	/*The nib icons are the fun icons in the control panel.*/
	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  (0,0,0,0.65); 
    background-color: #676767;
}
.control {
	/* Applied to sliders in their creation process. */
	line-height:14px;
	font-size:11px;
	background:rgba(55,55,55,0.65); 
	padding-bottom:5 px;
	margin:1px;
	color:#ffffff;
	font-family: Verdana, Geneva, sans-serif;
	border: 1px solid #000;
}
.handle {
	/* Slider handle */
	background:#676767;
	border: 1px solid #979797;
	opacity:0.9;
	cursor:grab !important;
}
/*.slider {
	padding-right:6px;
	padding-left:6px;
}*/
.sliderLabel {
	/* Slider label */
	text-shadow: 1px 1px #000000;
	/*padding-top:1px;*/
	padding-left:2px;
	width: 185px;
	max-width:185px;
	display:inline-block;
	text-overflow: ellipsis;
}
.controlCell {
	/* Table cell style for all controls in controlsTable */
	height: 18px;	
	width:100%;
	padding-left:0px;
	padding-right:0px;
}
.sliderCell {
	/* Table cell style for all controls in controlsTable */
	/*height: 18px;	*/
	width:100%;
	padding-left:6px;
	padding-right:6px;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
.sliderButtonLeft {
	/* For the buttons on the left side of sliders for granular adjustment. */
	padding:0;
	border-top: 1px solid rgb(33,33,33);
	border-left: 1px solid rgb(33,33,33);
	border-right: 1px solid rgb(33,33,33);
	margin:0px;
	cursor:pointer;
	text-align: center;
	vertical-align:middle;
	min-width:50px;
	width:50px;
}
.sliderButtonRight {
	/* Table cell style for all right arrows for slider buttons. */                          
	padding:0;
	border-top: 1px solid rgb(33,33,33);
	border-left: 1px solid rgb(33,33,33);
	border-right: 1px solid rgb(33,33,33);
	margin:0px;
	cursor:pointer;
	text-align: center;
	vertical-align:middle;
	min-width:50px;
	width:50px;
}
.arrow {
	/*Attached to the arrow images in the td's for the slider buttons.*/
	display:block;
	margin:0 auto;
	pointer-events: none;
	/*pointer-events:none gets rid of the 'copy save' dialog box in ios on tap hold of image*/
	-webkit-user-select: none;
	/*prevents the copy dialog box in ios on tap hold*/
}
.notouch {
    pointer-events: none;
}
.controlLabel {
	/* The slider 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;
}
.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.65) 0%, rgba(109,109,109,0.65) 50%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(50%,rgba(109,109,109,0.65)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(109,109,109,0.65) 50%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(109,109,109,0.65) 50%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(109,109,109,0.65) 50%,rgba(0,0,0,0.65) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(109,109,109,0.65) 50%,rgba(0,0,0,0.65) 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 */
}
.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;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
.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:140px;
	z-index:999999;
	padding-bottom:10px;
}
#shareContainer {
	/* The container for the Share window. The Share window
	is assigned the aboutContainer style with the below
	differences. */
	width:100%;
	top:0px;
	left:0px;
	height:140px;
	z-index:9999999999;
	padding-bottom:10px;
}
.nibConfigContainer {
	position:absolute;
	background-color:#202020;
	width:90%;
	max-width:550px;
	border: 1px groove #c0c0c0;
	z-index:999999999;
	display:none;
	padding-bottom:10px;
}
.canvasConfigContainer {
	position:absolute;
	background-color:#202020;
	width:90%;
	max-width:550px;
	border: 1px groove #c0c0c0;
	z-index:999999999;
	display:none;
	padding-bottom:10px;
}
#aboutTitleImg {
	/* Title image in About window. */
	max-width: 100%;
	height:auto;
	margin-bottom:-10px;
}
#aboutTitleDiv {
	/* 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;
}
.aboutTitleBar {
	/* The about window's title bar */
	background-image: url(../../images/titleBarGradient.gif);
	background-repeat: repeat-x;
	position: relative;
	width:97%;
	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%;
	border: 1px solid #FFF;
	padding-right: 2%;
	padding-bottom:10px;
	padding-left: 2%;
	height:70px;
}
.helpText2 {
	/* This is the Tips text itself */
	font-family: Verdana, Geneva, sans-serif;
	font-size: 13px;
	color: #FFF;
	height:60px;
	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;
}
a.helpButton2:link, a.helpButton2:visited {
	/* The buttons in the Nib Options window for text features */
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	text-shadow: 1px 1px #000000;
	color: #FFF;
	margin-top:5px;
	width:49%;
	line-height:20px;
	text-decoration: none;
	background: black;
	border: 1px outset #fff;
	display:block;
	text-align:center;
	cursor:pointer;
	margin-bottom: 10px;
}
a.helpButton2:active {
	border: 1px inset #fff;
	background-color: #F60;
}
a.helpButton2:hover {
	background-color: #222;
}
.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;
	margin-bottom:10px;
	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;	
}
.aboutArtistLink {
	line-height: 50px;
	margin-bottom: 5px;
}
.aboutArtistNibIcon {
	vertical-align: middle;
}
a.aboutArtist:link, a.aboutArtist:visited {
	/* Links in the 'about' window */
	font-family: Verdana, Geneva, sans-serif;
	font-size:14px;
	color: #999;
	text-decoration: none;
	font-weight: bold;
	text-shadow: 1px 1px #000000;
}
a.aboutArtist:hover {
	color: #CA0000;
	text-decoration: none;
	font-weight: bold;
}
a.aboutLink:link, a.aboutLink:visited {
	/* Links in the 'about' window */
	font-family: Verdana, Geneva, sans-serif;
	color: #999;
	text-decoration: none;
	font-weight: bold;
	text-shadow: 1px 1px #000000;
}
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.65);
	margin: 0px;
	padding: 5px;
	border: 1px solid #000;	
	cursor:pointer;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
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;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
	text-shadow: 1px 1px #000000;
}
.uu {
	/* Orange text in About window */
	color: #fd8f46;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
	text-shadow: 1px 1px #000000;
}
.uuu {
	/* Orange text in About window */
	color: #fa4444;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
	text-shadow: 1px 1px #000000;
}
.uuuu {
	/* Orange text in About window */
	color: #fe7f7f;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
	text-shadow: 1px 1px #000000;
}
ul.bullet-orange {
    list-style-image: url('../../images/bullet-orange.png');
}
ul.bullet-white {
    list-style-image: url('../../images/bullet-white.png');
}
.v {
	/* Orange text in About window */
	font-family: Verdana, Geneva, sans-serif;
	color: #F60;
	text-shadow: 1px 1px #000000;
	font-weight: bold;
}

/* *************************************************************
NIB OPTIONS WINDOW
************************************************************** */

/*#nibConfigTextContainer {
	height:100px;
}*/
.nibConfigText {
	/* This is a container for a major section of the Nib Options window,
	such as the Underlying Image section, or the Text section, or the Other
	section. */
	background-color:#333;
	width:92%;
	margin-left:2%;
	border: 1px solid #FFF;
	padding:5px;
	margin-bottom:5px;
}
.nibConfigInput {
	/*This is for the "Choose Files" input in the Nib Options window
	in the Underlying Images section. */
	margin-top:10px;
	margin-bottom:5px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	text-shadow: 1px 1px #000000;
	color: #FFF;
	text-decoration: none;
	background: black;
	border: 1px solid #fff;
	display:inline-block;
}
.nibConfigDropdown {
	/*All the dropdown menus in the Nib Options window*/
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	text-shadow: 1px 1px #000000;
	color: #FFF;
	text-decoration: none;
	background: black;
	border: 1px solid #fff;
}
.nibConfigControlAndCommentContainer {
	/*Container for a Nib Options control and comment*/
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	text-shadow: 1px 1px #000000;
	color: #FFF;
	text-decoration: none;
	margin-bottom:10px;
	width:100%;
}
#underlyingImageSlidersTable {
	/*The table that holds all the Underlying Image sliders.*/
	width:100%;
}
#nibConfigMsPerImageSlider, #nibConfigTrailLifeSlider, #nibConfigLeftMarginSlider, #nibConfigRightMarginSlider, #nibConfigTopMarginSlider, #nibConfigBottomMarginSlider {
	/*All the sliders in the Underlying Image section of the Nib Options window.*/
	margin-bottom:10px;
}
.inputTextArea {
	/*You input your text here for the text nibs.*/
	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;
}
.inputTextArea2 {
	/*The 'Add System Font' text box.*/
	font-family: Verdana, Geneva, sans-serif;
	color: #cccccc;
	background-color: #222;
	width:200px;
	height:20px;
	border:1px solid #505050;
	-moz-user-select: text;
  	-khtml-user-select: text;
  	-webkit-user-select: text;
  	user-select: text;
}
#otherNibPropertiesSliders {
	/*Table of Other sliders*/
	margin-bottom:10px;
}

.divLine {
	margin-top:10px;
}