/** Library Styles
* This 'skin' style file changes the webpage to look like a room with books.
*/
@import url( 'animate.css' );

/**Basic Elements*/

body {
	overflow: hidden;
	/* body bg images assigned in animate.css */
}

	
/**HEADER*/
header {
	/* background-image: var(--primaryG); */
}
	
/**Toolbar Elements*/

#MainNav {	
	--topbarC: tan;
	border-radius: 0px;
	background-color: var(--topbarC);
	border-bottom:8px ridge var(--topbarC);
	background-image: linear-gradient(to bottom, hsl(0 100% 0% / 100%), hsl(0 100% 0% / 50%), hsl(0 100% 0% / 50%),	hsl(0 100% 0% / 85%), hsl(0 100% 0% / 0%)), url("../../../SiteGraphics/Library/woodx.jpg");;
	overflow-y: hidden;
}

#MainNav button {
	height: 100px; width: 48px;
	padding:0; margin:0;
	white-space: wrap;
	overflow-y: visible;
	border-right: 2px solid black;
	border-left: 2px solid black;
	border-top: 2px solid grey;
	border-bottom: 2px solid grey;
	background-image: linear-gradient(to right, rgba(50,50,50,.4), rgba(245,245,245,.1),
		rgba(245,245,245,.1),
		rgba(245,245,245,.1),
		rgba(245,245,245,.1),
		rgba(50,50,50,.4));
}
#MainNav button:hover{
	background-color:none;
}

#MainNav button img {
	margin:0px;
	padding:4px 2px 0px 2px; 

	height:auto; width:46px;
	border-radius: 6px;
	border-top: 4px double silver;
}
.navtext {
	color:black;
	display:inline-block;
	padding:2px 2px 5px 2px; margin:0px;
	width:100%;
	border-radius: 6px;
	border-bottom: 4px double silver;
}


button.Home {height: 50px; width: 50px;}

button.Meta {background-color: rgba(100, 100, 100, 1);}
button.Character {background-color: rgba(100, 100, 255, 1);}
button.Plot {background-color: rgba(255, 100, 100, 1);}
button.Setting {background-color: rgba(100, 255, 100, 1);}
button.Other {background-color: rgba(255, 100, 255, 1);}
.MainON, .CharacterON, SettingON, PlotON, OtherON {visibility: hidden;}

button#SwitchEdit {width:48px; height:48px;}
button#SwitchEdit.editOFF {background-color: rgba(100, 255, 100, 1); background-size: 100% auto;}
button#SwitchEdit.editON {background-color: rgba(200, 200, 200, 1); background-size: 100% auto;}


/** TITLE BANNER AREA */
#PageHeader {
	padding: 1vh;
	width: 86vw; height: 8vh;
	margin: 3.5vw 7vw 3.5vw 7vw;
	border: inset 8px  grey;
	box-shadow: 0 0 0 0.5vw tan, 0 0 0 7vw white;
	overflow: hidden;
}
.headspace #PageHeader {	
	height: 14vh;
	
}
	
h1 {
	font-size:x-large;
	font-family: Georgia, serif;
	text-align: center;
	font-weight: bold;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: white;
}
div#Tagline {
	margin:1em 2vw;
	display: block; text-align: right; 
	font-family: Bradley Hand, cursive;
}
 

/** MAIN PAGE AREA */
#Content{
		background-image: url("../../../SiteGraphics/Library/wood.jpg");
}

#Main {
	box-shadow: 0px 2px 0px 4px rgba(245,245,245,.2), 0px 3px 0px 6px rgba(100, 100, 255, 1), 0px 4px 0px 10px rgba(40, 40, 200, 1);
		
}


/**DISPLAY PAGES*/

.editzone button {padding:1px; height:3em; width:auto;  background-color: rgba(230, 230, 230, 1); vertical-align: middle;}
.editzone button:hover,
.editzone button:active
{background-color: rgba(0, 240, 0, 1);}
.editzone button img {padding:1px; height:100%; width:auto;}

.viewbutton button {padding:1px; padding:1px; height:3em; width:auto; background-color: rgba(230, 230, 230, .4); vertical-align: middle; margin:2px;}
.viewbutton button:hover,
.viewbutton button:active {background-color: rgba(0, 240, 0, 1);}
.viewbutton button img {padding:1px; height:100%; width:auto;}
button.addnew  {background-color: rgba(255, 255, 100, .4);}
button.addnew:hover {background-color: rgba(255, 255, 100, 1);}




button.coverbutton {background-color: rgba(100, 100, 100, .4); padding:6px;}

span.longtitle {font-weight: bold;}
span.shorttitle {font-style: italic;}
span.seriestitle {font-variant: small-caps;}
span.smallprint {font-size: smaller;}


/**EDIT PAGES*/

.required {border:2px solid green; background-color: rgba(160, 255, 160, .4)}
.advised {border:2px solid green; background-color: rgba(160, 255, 160, .4)}
.optional {border:2px solid #CCAA55; background-color: rgba(255, 245, 170, .8)}