/* *********************************************************************
Styles for the black window, sometimes referred to as the Help window.
********************************************************************** */

.bContainer {
	/* Contains the black window. */
	position:absolute;
	background-color:hsla(0, 0%, 13%,0.8);
	width:340px;
	border: 1px groove #c0c0c0;
    visibility: visible;
    z-index: 4;
    transition: opacity 1s, visibility 1s;
    top: 10px;
    left: 10px;
}

.bContainer {
	/* 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,  hsla(0, 0%, 0%,0.8) 0%, hsla(0, 0%, 13%, 0.8) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(0, 0%, 0%, 0.8)), color-stop(100%,hsla(0, 0%, 13%, 0.8))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  hsla(0, 0%, 0%, 0.8) 0%,hsla(0, 0%, 13%) 100%, 0.8); /* 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,  hsla(0, 0%, 0%, 0.8) 0%,hsla(0, 0%, 13%, 0.8) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#222222',GradientType=0 ); /* IE6-9 */
}

.bContainer_handle {
	/* The black window's title bar */
    background-color: black;
	position: relative;
    box-sizing: border-box;
	width:100%;
	height:45px;
	top:0px;
	left:0px;
	padding:4px;
	padding-left:10px;
    border-bottom: 1px solid #c0c0c0;
	color:#FFF;
	font-family:Verdana, Geneva, sans-serif;
	font-size:0.9em;
	cursor:move;
	line-height: 35px;
}

.blackGrayGradient {
    /* Headers in black window  */
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,333333+57,333333+57,333333+100 */
    background: #000000; /* Old browsers */
    background: -moz-linear-gradient(left,  #000000 0%, #333333 57%, #333333 57%, #333333 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #000000 0%,#333333 57%,#333333 57%,#333333 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #000000 0%,#333333 57%,#333333 57%,#333333 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#333333',GradientType=1 ); /* IE6-9 */
}

.bContainer_fullscreen {
	/* The black window fullscreen button */
	position: absolute;
	top: 4px;
	right: 68px;
	cursor:pointer;
    z-index: 99999999;
}

.bContainer_close {
	/* The black window close button */
	position: absolute;
	top: 4px;
	right: 3px;
	cursor:pointer;
    z-index: 99999999;
}

.bMenuContainer {
	/* Contains the menu icons in the black window  */
	height:50px;
	border-left: 1px solid #c0c0c0;
	border-right: 1px solid #c0c0c0;
}

.bMenuButton {
	/* Applied to the icon menu buttons in the black window. By default,
	there are 5 of them displayed, but the package icon will be a tab 
	icon if the Sea of Po app has not been installed and the browser 
	supports the beforeinstallprompt event. In that case, the width 
	of bMenuButton's gets set in JS to 16.666%.  */
	float:left;
	width:20%;
	height:50px;
	box-sizing: border-box;
	background-color: #222222;
	background-repeat: no-repeat;
	background-position: center center;
	border-right: 1px solid black;
	transition: background-color 0.5s;
	cursor: pointer;
}
.bMenuButton:hover {
	background-color: #505050;
}

#bMenuPoetry {
	background-image: url(images/sv_PoetryUp.png);
}
#bMenuEdit {
	background-image: url(images/sv_EditUp.png);
}
#bMenuOptions {
	background-image: url(images/sv_OptionsUp.png);
}
#bMenuInfo {
	background-image: url(images/sv_InfoUp.png);
}
#bMenuHelp {
	background-image: url(images/sv_HelpUp.png);
}
#bMenuPackage {
	background-image: url(images/sv_PackageUp.png);
	display:none;
}

#bPoetryMenuContainer {
	/* Contains section in black window where you select a writer name  */
	display:block;
	padding:5px;
	background-color:hsla(0, 0%, 13%,0.8);
	border-left: 1px solid #c0c0c0;
	border-right: 1px solid #c0c0c0;
	border-top: 1px solid #c0c0c0;
}

.bHeader2 {
	/* Applied where it says 'Very Present Poet' */
	box-sizing: border-box;
    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;
	margin-right:12px;
	padding:3px;
	margin-bottom:5px;
	border: 1px solid #505050;
	width:100%;
}

.bSmallTabIcon {
	/* Style for really small Sea of Po logo */
	width: 20px;
	height:20px;
	float:left;
	margin-right: 5px;
}

.bContent2 {
    box-sizing: border-box;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 13px;
    text-shadow: 1px 1px black;
	color: #eee;
    padding-right:12px;
    word-wrap: break-word;
    max-width: 320px;
}

.bButtonsContainer {
	/* For the invited writer drop-down menu,
	the Bio button and the Share button. */
	width:100%;
	display:grid;
	grid-template-columns: 60% 20% 20%;
	grid-row: auto auto;
	grid-column-gap: 10px;
	grid-row-gap: 10px;
}

.bButtonsElement {
	/* Attached to many buttons */
	display:flex;
	align-items:center;
	justify-content:center;
	padding-left:5px;
	padding-right:5px;
	border-radius:5px;
}

.poetCount {
	/* nothing but useful  */
}

#bPoemMenu, #bWreaderPoemMenu, #bAnimateButton, #bSaveButton, #bDeleteButton, #bScreenshotLayerButton, #bImportButton, #bTutorialButton, #bReorderButton, #bImportButton2, #bEditButton2, #bScreenshotButton, #setCanvasSizeButton, #textbox1FontMenu, #cAlertButton {
	/* Orange buttons and drop down menus  */
	background-color: #f60;
	text-shadow: 1px 1px hsl(24, 100%, 70%);
	text-align: center;
	color:black;
	font-size: 13px;
	font-weight: bold;
	font-variant:small-caps;
	cursor: pointer;
	box-sizing: border-box;
	padding:2px;
	width:100%;
	border:1px solid gray;
}

#bPoemMenu:hover, #bBioButton:hover, #bWreaderPoemMenu:hover, #bAnimateButton:hover, #bSaveButton:hover, #bDeleteButton:hover, #bReorderButton:hover, #bScreenshotLayerButton:hover, #bImportButton:hover, #bTutorialButton:hover, #bImportButton2:hover, #bEditButton2:hover, #bScreenshotButton:hover, #bShareButton:hover, #bTextColorButton1:hover, #bTextFontButton1:hover, #bFpsInfoButton:hover, #returnToOptionsButton:hover, #returnToOptionsButton2:hover,#setCanvasSizeButton:hover, #install:hover, #bText2boxOK:hover, #cAlertButton:hover {
	/* background-color: rgb(192, 29, 0); */
	/* background-color: hsl(9, 90%, 38%);  */
	background-color: red;
}

#bBioButton, #bShareButton, #install, #bText2boxOK {
	color:black;
	text-align: center;
	text-shadow: 1px 1px hsl(24, 100%, 70%);
	font-size: 1em;
	font-variant:small-caps;
	cursor: pointer;
	border:1px solid gray;
	background-color: #F60;
	border-radius:5px;
}

.bLayerContainer {
	/* This is a container of all the tab layers */
    box-sizing: border-box;
	width:100%;
    background-color: hsl(0, 0%, 0%, 0.9);
	border: 1px solid #c0c0c0;
    height:360px;
	position:absolute;
}

.bLayer {
	/* Each of the tabbed layers has this style */
    position:absolute;
	padding:8px;
    height: 340px;
    overflow: auto;
    width:calc(100%-17px);
	overflow-x: hidden;
	top:0px;
	left:0px;
	opacity:0;
	z-index: 1;
}

.bContent {
	/* Normal paragraph content in the black window  */
    box-sizing: border-box;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 13px;
    text-shadow: 1px 1px black;
	color: #eee;
    padding-right:12px;
    word-wrap: break-word;
    max-width: 320px;
    margin-bottom:15px;
}

#bPoemContainer {
	/* The container for all the poems in the black window */
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 13px;
	width:305px;
}

.bEditLayer {
	/* The container of the edit tab  */
	width:330px;
	overflow:hidden;
}

.bHeader {
	/* The orange text headers in the black window. */
	box-sizing: border-box;
    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;
	padding:3px;
	margin-bottom:10px;
	border: 1px solid #505050;
	width:100%;
}

.bButtonsContainer2 {
	/* Contains multiple buttons */
	/* This is in the Edit window for all the buttons  */
	width:100%;
	display:grid;
	grid-template-columns: 75% 25%;
	grid-row: auto auto;
	grid-column-gap: 10px;
	grid-row-gap: 10px;
}

#bDeleteButton {
	padding-left:5px;
	padding-right:5px;
}

.bTextArea {
	/* Editable texts in Edit and Import layers */
	box-sizing: border-box;
	width: 100%;
	height:150px;
	padding:10px;
	font-size: 0.8em;
}

#bScreenshotContainer {
	align-items:left;
	justify-content:left;
	padding-left:0px;
	padding-right:0px;
}

#bScreenshotButton {
	display: inline-block;
	margin-left:0px;
	padding-left: 0px;
	padding-right: 0px;
}

.bDivLine {
	margin-bottom:5px;
}

.bTips1 {
	font-size:10px;
}

.bTextArea::placeholder {
	font-size: 0.8em;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-weight:bold;
}

.bButtonsContainer3 {
	/* This is in the Reorder window*/
	display:grid;
	width:100%;
	grid-template-columns: 85% 15%;
	/* grid-row: auto auto; */
	grid-column-gap: 10px;
	align-items: center;
}

.bUpAndDownArrows {
	/* background-color: aquamarine; */
	text-align:center;
	align-items: center;
	/* width:50px; */
}

.reorderArrow {
	cursor: pointer;
}

.bSliderContainer {
    /* Contains a single slider  */
    position: relative;
    height:40px;
    width:100%;
}

.nouisliderJim1 {
    padding: 0 16px;
    cursor:pointer;
    opacity:0.8;
    transition: opacity 0.25s;
}
.nouisliderJim1:hover {
    opacity:1;
}

.bSliderLabel {
    /* position:absolute; */
    top:0px;
    left:5px;
    color:black;
    font-size: 1em;
    font-weight: bold;
    text-shadow: 1px 1px rgba(255,255,255,0.6);
    pointer-events: none;
    position: absolute;
}

.bValueLabel {
    /* Slider labels on right side of sliders that show slider value.  */
    position:absolute;
    top:2px;
    right:5px;
    color:black;
    font-size: 11px;
    font-weight: bold;
    text-shadow: 1px 1px white;
    pointer-events: none;
}

.bCheckBoxContainer {
    margin-bottom:20px;
}
.bCheckbox {
    cursor: pointer;
}
.bCheckboxLabel {
    cursor: pointer;
}

.bColorContainer1 {
    /* In Options, the container of the two color controls */
    display:flex;
    align-items:center;
}

#bTextColorButton1, #bTextFontButton1 {
    margin-right:10px;
    cursor: pointer;
    color:white;
    background-color:#f60;
    padding-left:7px;
    padding-right:7px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    font-size:1em;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border:1px solid rgb(255, 255, 255);
}

#bFpsInfoButton {
    cursor: pointer;
    color:white;
    background-color:#f60;
    padding-left:7px;
    padding-right:7px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    font-size:1em;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border:1px solid rgb(255, 255, 255);
}

#bHSLALayerHeader, #bFontLayerHeader {
    display:grid;
    grid-template-columns: 1fr 80px;
    margin-bottom:30px;
}

.bHeader3 {
	/* The orange text headers in the black window. */
	box-sizing: border-box;
    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;
	margin-right:12px;
	padding:3px;
	padding-right:5px;
	border: 1px solid #505050;
}

.bButton1 {
    cursor: pointer;
    color:white;
    text-shadow: 2px 2px black;
    background-color:#f60;
    padding:3px;
    padding-left:5px;
    padding-right:5px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    font-size:0.8em;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border:1px solid rgb(255, 255, 255);
}

.bDoubleTextListsContainer {
	/* Contains the two controls in the font layer  */
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto 1fr;
	gap:5px;
}

.bFontControls1 {
	display:flex;
	font-size:12px;
	color:white;
	width:120px;
	overflow-x:hidden;
}

.bFontHelp {
	color:white;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size:10px;
}

.bAddFont {
	margin-top:10px;
	width:120px
}

.bInputTextArea2 {
	color:black;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size:10px;
	max-width: 115px;
	width:115px;
}

#bText2boxOK {
	width:108px;
}

.bLinky {
	color:#f60;
	cursor: pointer;
	text-decoration: none;
}

.bLinky:hover {
	color:hsl(0, 100%, 50%);
}

.bBios1 {
	/* Contributor bios */
	text-shadow: 1px 1px #000;
	margin-top:25px;
	padding-top:5px;
	padding-left:5px;
	padding-bottom:5px;
	color: #eee;
	border:1px solid #222222;
	background-color: rgba(0,0,0,1);
}
.bBios1:nth-child(even) {
	background-color: rgba(30,30,30,0.7);
}
.bBioLinks {
	margin-top:5px;
	font-style: italic;
	font-size:0.8em;
	font-variant: small-caps;
	color:#ffffff;
}

.bLinky2 {
	color:#f60;
	cursor: pointer;
	font-weight: bold;
	text-decoration:none;
	font-variant: small-caps;
}

.bLinky2:hover {
	/* Most black window links */
	color:red;
}

.bBiosUl {
	margin-top:0px;
	margin-bottom:0px;
}

.bLogo {
	/* For the VispO logo */
    text-align: center;
}

.keyboardImage {
	padding:0px;
}

.bHeader {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#444444+1,111111+100 */
	background: #444444; /* Old browsers */
	background: -moz-linear-gradient(left,  #444444 1%, #111111 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #444444 1%,#111111 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #444444 1%,#111111 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#111111',GradientType=1 ); /* IE6-9 */
}

.bTitleText {
	/* Names in Credits */
    font-weight: bold;
    font-style: italic;
}

.bMid2 {
	cursor:pointer;
	color:#f60;
	text-decoration: none;
}
.bMid2:link, .bMid2:visited {
	color:#f60;
}
.bMid2:hover {
	color:red;
}

.bpdfIcon {
	float:left;
	width:26px;
	height:32px;
	margin-right:7px;
}

.bMid3 {
	line-height: 30px;
}

.videoIcon {
	float:left;
	width:30px;
	height:30px;
	margin-right:7px;
}

.bMid {
	line-height:27px;
	cursor:pointer;
	color:#f60;
}
.bMid:link, .bMid:visited {
	color:#f60;
}
.bMid:hover {
	color:red;
}

.bMidImage {
	vertical-align: middle;
	width:25px;
	height:25px;
}

.bOpacity1 {
	opacity:0.5;
}

.bContent3 {
	/* Normal paragraph content in the black window  */
    box-sizing: border-box;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 13px;
    text-shadow: 1px 1px black;
	color: #eee;
    padding-right:0px;
    word-wrap: break-word;
    max-width: 320px;
    margin-bottom:15px;
}

.bIcon {
    /* img that appears at top left and in black window  */
    width:15px;
    height:15px;
    box-sizing: border-box;
}

option {
	font-weight: bold;
}

#bReorderLayer {
	overflow: hidden;
}

.bSavedTextTitle {
	/* Each saved text title displayed in 
	bSavedTextTitles has this style. */
	color:white;
	background-color: #f60;
	text-align:center;
	margin-bottom:2px;
	width:100%;
	height:30px;
	line-height: 30px;
	cursor: pointer;
	overflow-y: auto;
	max-height: 250px;
}

.bCreditsName:link, .bCreditsName:visited {
    font-weight: bold;
    color:#f60;
    text-shadow: 1px 1px black;
    text-decoration: none;
}

.bCreditsName:hover {
    color: #d22f32;
}

.bCreditsName2 {
    font-weight: bold;
    color:rgb(255, 255, 255);
    text-shadow: 1px 1px black;
    text-decoration: none;
}

ul {
    margin-left:-20px;
}

td {
	text-align: center;
}

table {
	margin-left: auto;
  	margin-right: auto;
}

.liC {
	height:40px;
	line-height: 40px;
}

#packageC {
	display:none;
}

audio::-webkit-media-controls-play-button {
	background-color: #f60; /* Red play button */
	border-radius:5px;
	height:20px;
}
audio::-webkit-media-controls-panel {
	background-color: #f60; /* Dark panel background */
	border-radius:5px;
	height:20px;
}


.textListContainer {
	overflow-y:scroll;
	overflow-x:hidden;
	width:120px;
	background-color:#222;
	height:100px;
}

.textListItem {
	width:120px;
	overflow-x: hidden;
	color:black;
	/* font-family: Verdana, Geneva, Tahoma, sans-serif; */
	font-size: 13px;
	text-shadow: 1px 1px rgb(255, 143, 69);
	background-color: #f60;
	cursor: pointer;
	padding-left:3px;
	line-height: 1.5;
	border-bottom: 1px solid black;
}

.textListItem:hover {
	background-color: red;
	text-shadow: 1px 1px rgb(255, 118, 118);
}