/* Styles for NeoNio by Jim Andrews, 2021 vispo.com/nio/neo */

body {
	overscroll-behavior-y: none;
	/* The above prevents iOS overscroll in non-Safari browsers. See 
	https://bram.us/2016/05/02/prevent-overscroll-bounce-in-ios-mobilesafari-pure-css/ */
	background-color: black;
	margin:0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
}

body {
	/* We don't want anything to be selectable.  */
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

#nioContainer {
	/* The div that contains all of Nio, the whole app. */
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	background-color: black;
}

/* VERSE 0 ------------------------------------------------------ */

#v0Container, #v1Container, #v2Container {
	/* There may be more on these divs below, like v2Container is display:flex  */
	position:absolute;
	width:100%;
	height:100%;
	opacity:0;
	visibility:hidden;
	transition: visibility 1.5s, opacity 1.5s linear;
	top:0px;
	left:0px;
}

#v0Container {
	/* The div that holds the whole intro that appears before verse 1  */
	color:silver;
	background-color:black;
	background-image: url('../images/SVGarchive/looping/viewBoxAdjusted/1.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

#v0Text {
	/* The text that initially displays on screen.  */
	position: absolute;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	height:200px;
	text-shadow: 1px 1px black;
	font-weight: 550;
}

#v0Title {
	/* Says NeoNio by Jim Andrews  */
	font-size: 20px;
	text-align: center;
	color:#fd7200;
}

#v0Typewriter {
	/* The div that displays the 'typewritten' text in v0.  */
	width:100%;
	text-align: center;
	color:white;
	font-size: 17px;
	font-family:'Courier New', Courier, monospace;
	font-weight: bold;
	text-shadow: 2px 2px black;
}

/* VERSE 1 ------------------------------------------------------ */

#v1Container {
	/* Verse 1 container  */
	background-color:black;
}

#v0LiveAria {
	/* Used to send voice instructions to screen reader  */
	position:absolute;
	left:-1000px;
	top:-1000px;
}

#v1BigSquare {
	/* The big square contains the animations and the v1 sound icons. */
	position:absolute;
	width:100%;
	height:100%;
	z-index:1; 
}

#keyboardHelpImage {
	/* Contains the keyboard Help image  */
	position:fixed;
	left:10px;
	bottom:10px;
	opacity:0;
	visibility: hidden;
	transition: visibility 1.5s, opacity 1.5s linear;
	cursor: pointer;
	z-index: 2;
}

#v1HelpTextContainer {
	/* Contains the v1 Help window  */
	position:absolute;
	z-index:4; 
}
#v1BuyTextContainer {
	/* Contains the Buy window  */
	position:absolute;
	z-index:4; 
	padding: 15px;
}
#v2BuyTextContainer {
	/* Contains the Buy window  */
	position:absolute;
	z-index:4; 
	padding: 15px;
}
.v2HelpTable {
	margin-top:-10px;
}
.helpTableRow {
	/* Applied to each row in the Help table in v1  */
	width:100%;
	height:40px;
}
.helpTableRow2 {
	/* Applied to each row in the Help table in v2  */
	width:100%;
	height:30px;
	vertical-align:middle;
}
.v1HelpExplain {
	/* Special explanatory text  */
	font-size:12px;
	color:rgb(111, 145, 240);
	text-align: center;
}
.v1HelpReg {
	/* Special explanatory text  */
	font-size:11px;
	color:rgb(111, 145, 240);
	text-align: left;
}
.v1BuyStack {
	margin-top:7px;
	text-align: center;
}
.helpContainer {
	/* div that contains the Help (v1 and v2) */
	font-family: Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight: 550;
	text-shadow: 2px 2px black;
	color:#1853b9;
	text-align: center;
	width:190px;
	padding:25px;
	border:1px solid #adadad;
	background-color: rgba(0,0,0,0.7);
	cursor: pointer;
	/* ----------------- */
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	/* ----------------- */
	opacity:0;
	visibility:hidden;
	transition: visibility 1.5s, opacity 1.5s linear;
}

.helpTitle {
	/* v1 and v2 Help title  */
	font-size:20px;
	font-weight: bold;
	margin-bottom:10px;
	color:#ff7200;
}
.helpTitle2 {
	font-size: 18px;
	color:#ff7200;
	font-weight: bold;
	/* background-color: #FD40F8; */
	margin-bottom:-10px;
}
.buyTitle {
	margin-bottom:0px;
}

.link {
	/* In v1 Help, there is an email link.  */
	text-decoration: none;
	color:#4e8cf8;
}

.link:hover {
	color:white;
}
.link2 {
	text-decoration: none;
	color:#2371f8;
}
.link2:hover {
	color:white;
}
.nat {
	/* In v1, Nat's name is in the Credits in the Help.  */
	color:#4e8cf8;
}

.v1HelpText2 {
	/* Each paragraph of Help text with an image has this style. */
	/* line-height: 39px; */
	/* vertical-align: middle; */
	text-align: left;
	text-shadow: 1px 1px black;
}

.v1HelpText3 { 
	/* Each paragraph of Help text with an image has this style. */
	vertical-align: middle;
	text-align: left;
}
.v1HelpText4 {
	/* Each paragraph of Help text with an image has this style. */
	color:rgb(111, 145, 240);
	font-size:11px;
	vertical-align: middle;
	text-align: left;
}
.v1HelpText5 {
	line-height: 1.2;
	font-size:12px;
}

.v1HelpImage {
	/* The Help contains images of the buttons and other controls.  */
	vertical-align: middle;
}

#SVGContainer {
	/* This div contains all the SWF animations. This div is 
	moved from verse 1 to verse 2 when the player goes to verse 2,
	and back again when they return from verse 2 to verse 1.  */
	position:absolute;
	width:100%;
	height:100%;
	z-index: 1; 
}

.svg {
	/* Attached to all the SVG animations  */
	position:absolute;
	visibility: hidden;
	top:0px;
	left:0px;
}

/* ------------------------------------------------------ */

.v1SoundIcon, .v2SoundIcon {
	/* Attached to all sound icons in v1 and v2.  */
	width:39px;
	height:39px;
	cursor:pointer;
	position:absolute;
}

.v1SoundIcon {
	/* v1 sound icon z-index is constant but v2 z-index is dynamic.  */
	z-index: 2;
}

#v1ButtonContainer {
	/* Verse 1 button container  */
	position:fixed;
	text-align: right;
	right:0px;
	top:0px;
	box-sizing: border-box;
	width: 250px;
	padding-top:40px;
	padding-right:10px;
	z-index:3; 
}

.v1Button {
	/* Verse 1 button  */
	cursor: pointer;
	width:36px;
	height:29px;
	display:inline-block;
}

#v1StarButton {
	background-image: url('../images/starDown.jpg');
}

#v1StopButton {
	background-image: url('../images/stopDown.jpg');
}

#v1HelpButton {
	background-image: url('../images/helpDown.jpg');
}

#v1BuyButton {
	background-image: url('../images/buyDown.jpg');
}

/* v1 VOLUME SLIDER -------------------------------------------------- */

#v1SliderContainer {
	/* Div that contains the v1 volume slider input  */
	position:absolute;
	width: 110px;
	height:55px;
	line-height: 55px;
	left:0px;
	top:0px;
	padding-top:25px;
	padding-left:10px;
	z-index:2; 
}

#v1VolumeSlider {
	width:100px;
    cursor: -webkit-grab; /* Chrome 1-21, Safari 4+ */
    cursor:    -moz-grab; /* Firefox 1.5-26 */
    cursor:         grab; /* W3C standards syntax, should come last */
}

#v1VolumeSlider:active {
    cursor: -webkit-grabbing;
    cursor:    -moz-grabbing;
    cursor:         grabbing;
}

#v1VolumeSlider {
	-webkit-appearance: none;
	height: 15px;
	border-radius: 5px;
	background: #0043b3;
	outline: none;
	opacity: 0.7;
	-webkit-transition: .2s; 
	transition: opacity .2s;
}

#v1VolumeSlider:hover {
	opacity: 1;
}

#v1VolumeSlider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 25px;
	height: 35px;
	border-radius: 5px;
	background: #fd7200;
}

#v1VolumeSlider::-moz-range-thumb {
	width: 25px;
	height: 35px;
	border-radius: 5px;
	background: #fd7200;
}

/* VERSE 2 ------------------------------------------------------ */

#v2Container {
	/* Verse 2 container. Covers all Nio screen. There are 
	two elements in the flex box: the animations and the controls. 
	Read https://css-tricks.com/snippets/css/a-guide-to-flexbox */
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center; /* This is the default value  */
	align-items: center;
	background-color:black; 
	margin: 0px;
	padding:0px;
}

#v2AnimationsContainer {
	/* The div that contains the animations. This is a square. 
	See v2PositionLayout() in nio.js for the size of it.  */
	position: relative;
}

#v2HelpTextContainer {
	/* Contains the v2 Help window */
	position:absolute;
	z-index:4; 
}

.v2HelpText {
	/* Applied to v2HelpTextContainer div  */
	width:220px;
	padding:15px;
}

#v2InteractivesContainer {
	/* Contains the grid and controls. It appears to 
	the right of the animations or, if the display 
	is portrait, at the bottom beneath the animations.  */
	position:relative;
	width:100%;
	height: 100%;
	/* The next three lines center the grid vertically and horizontally within this div  */
	display: flex;
  	justify-content: center;
  	align-items: center;
	z-index: 1;
}

#v2SoundGrid {
	/* The sound grid  */
	position: absolute;
	width:350px;
	height:428px;
	background-image: url('../images/verse2b.png');
}

#v2Purple {
	/* This purple image appears behind the grid in the 
	blank spaces of the column currently playing sound */
	position:absolute;
	top:30px;
	left:100px;
	z-index: -1; 
	/* z-index puts the purple image behind the parent 
	sound grid as long as the sound grid has no z-index. See
	https://stackoverflow.com/questions/54897916/why-cant-an-element-with-a-z-index-value-cover-its-child
	*/
}

#v2Black {
	/* div behind v2Purple that makes the grid holes black.  */
	position:absolute;
	z-index: -2;
	background-color: black;
	top:22px;
	width:100%;
	height:280px;
}

.v2SoundIcon {
	/* v2 sound icons are draggable  */
	cursor:grab;
}

.v2SoundIcon:active {
	cursor:grabbing;
}

#v2ColumnSelectorContainer {
	/* This div is the 'rail' the column selector is dragged along.  */
	position: relative;
	top:0px;
	left:101px;
	width:230px;
	height: 17px;
}

#v2ColumnSelector {
	/* The div that holds the draggable triangle at the top of the grid */
	position: absolute;
	background-image: url('../images/arrow.png');
	width:31px;
	height:17px;
	left:0px;
	cursor:-moz-grab;
	cursor:-webkit-grab;
	cursor:grab;
}

#v2ColumnSelector:active {
	/* The grabbable triangle at the top of the 4x4 grid.  */
	cursor:grabbing;
}

#v2ButtonContainer {
	/* Contains the 5 blue, vertically arranged buttons.  */
	position:absolute;
	top:20px;
	left:5px;
	box-sizing: border-box;
	width: 36px;
	height:260px;
	padding-top:4px;
	padding-right:0px;
	z-index:3; 
	/* background-color: red; */
}

.v2Button {
	/* Verse 2 button  */
	margin-bottom:12px;
	cursor: pointer;
	width:36px;
	height:29px;
}

#v2StopButton{
	background-image: url('../images/stopDown.jpg');
	margin-top:10px;
}

#v2FullscreenButton {
	background-image: url("../images/fullscreenUp.jpg");
}

#v2FullscreenButton:active {
	background-image: url("../images/fullscreenDown.jpg");
}

#v2BonkButton {
	background-image: url("../images/bonkDown.jpg");
}

#v2StarButton {
	background-image: url("../images/starDown.jpg");
}

#v2HelpButton {
	background-image: url("../images/helpDown.jpg");
}

#v2BuyButton {
	background-image: url("../images/buyDown.jpg");
}

#v2VolumeContainer {
	/* The rail along which the volume handle is dragged  */
	position: absolute;
	background-image: url('../images/volRailVertical2.png');
	width:39px;
	height:126px;
	left:45px;
	top:22px;
	cursor: pointer;
}

#v2VolumeHandle {
	/* The handle that is dragged to change volume  */
	position: absolute;
	background-image: url('../images/volHandleVertical2.png');
	width:39px;
	height:26px;
	cursor:grab;
	left:0px;
}

#v2VolumeHandle:active {
	cursor: grabbing;
}

#v2ColorContainer {
	/* The rail along which the color handle is dragged to change bg color  */
	position: absolute;
	background-image: url('../images/volRailVertical2.png');
	width:39px;
	height:126px;
	left:45px;
	top:150px;
	cursor: pointer;
}

#v2ColorHandle {
	/* The handle that is dragged to change bg color  */
	position: absolute;
	background-image: url('../images/volHandleVertical2.png');
	width:39px;
	height:26px;
	cursor:grab;
	left:0px;
	top:100px;
}

#v2LoopButtonContainer {
	/* Contains the 4 loop buttons  */
	position:absolute;
	top:283px;
	left:101px;
	width:240px;
	height: 29px;
}

#v2LoopButton0, #v2LoopButton1, #v2LoopButton2, #v2LoopButton3 {
	position:absolute;
	width:36px;
	height:29px;
	cursor: pointer;
}

#v2LoopButton0 {
	left:0px;
}

#v2LoopButton0:active {
	background-image: url('../images/loopDown.jpg');
}

#v2LoopButton1 {
	left:66px;
}

#v2LoopButton2 {
	left:132px;
}

#v2LoopButton3 {
	left:198px;
}

/* Vispo logo styles---------------------------------------- */

a.old:link, a.old:visited, a.old:active {
	color:white;
	text-decoration: none;
	font-size: 1.4em;
	font-weight: bold;
}
a.old:hover {
	color:#fd7200;
}

a.logoContainer:link, a.logoContainer:visited, a.logoContainer:active {
  text-decoration:none;
  font-weight:400;
}
a.logoContainer:hover {
  text-decoration:none;
  font-size:1.1em;
  font-weight:500;
}
#logoContainer {
  font-family: "Times New Roman", Times, serif;
  letter-spacing:2px;
  text-align:center;
  text-shadow: 1px 1px #000000;
  position: fixed ;
  right:20px;
  bottom:20px;
  height:53px;
  z-index: 2; 
  visibility: hidden;
  opacity: 0;
  transition: visibility 1.5s, opacity 1.5s linear;
}
#v {
  color:maroon;
  font-size:1.5em;
}
#i {
  color:yellow;
  font-size:1.2em;
}
#s {
  color:green;
  font-size:0.9em;
}
#p {
  color: #06F;
  font-size: 1.2em;
}
#o {
  color: #FD40F8;
  font-size: 1.5em;
}
/* end of Vispo logo styles------------------------------------ */