/* ----------HEADER AND NAVIGATION----------*/
/*Sets header position*/
.Header_wrapper{position: relative;}
header{height: 100px; width: 100%;  background-image: url('../img/red_leather-hi.jpg'); background-size: 400px 400px; border-bottom: 2px solid #000; text-align: center;}
header img{height: 100%; float: left;}
/*Creates the horizontal navigation bar under the header and removes bullets*/
header ul {padding: 0; margin: 0;  list-style-type:none; float:right; position:relative; top: 50%; transform: translateY(-50%);}
header ul li {list-style-type:none; float:left; margin:10px;}
/*Styles links in the navigation bar*/
header a:link,  header a:visited {display:block; color:White; font-family: "Arial", Helvetica, sans-serif; height: 35px; text-align:center; text-decoration: none;}
header a:hover,  header a:active,  header a.section:link,  header a.section:visited {color:White;}
/*Sets flex on body so Footer knows to stick to bottom*/
.Site { display: flex; min-height: 100vh; flex-direction: column;}
.Site-content { flex: 1;}
#menu-icon {
	background-color: lightgrey;
	height: 40px;
	width: 40px;
	display: none;
}



/* ----------Breadcrumb NAVIGATION----------*/
/* Creates the horizontal navigation bar under the header and removes bullets
.Breadcrumb_wrapper{width: 100%; margin:auto; margin-bottom:20px;}
.Breadcrumb_wrapper ul {padding: 0; margin: 0; width:100%; list-style-type:none; overflow:hidden; background-color:#791515;}
.Breadcrumb_wrapper ul li {list-style-type:none; float:left; width: 8.1%; border-right: solid;}
.Breadcrumb_wrapper ul li:last-child {border-right: none;}
.Breadcrumb_wrapper ul li p {position: relative; top: 50%; transform: translateY(-50%); padding: 0; margin: 0;}

Styles links in the navigation bar
.Breadcrumb_wrapper a:link, .Breadcrumb_wrapper a:visited {display:block; color:White; font-family: "Arial", Helvetica, sans-serif; background-color:#791515;  height: 35px; text-align:center; text-decoration: none;  padding-bottom:10px; padding-top: 10px;}
.Breadcrumb_wrapper a:hover, .Breadcrumb_wrapper a:active {color:Black; background-color:LightYellow;}
.Breadcrumb_wrapper a.current:link, .Breadcrumb_wrapper a.current:visited {color:Black; background-color:#00FF00;} */

/* -----Flex Version----- */
/*Creates the horizontal navigation bar under the header and removes bullets*/
/*.Breadcrumb_wrapper{width: 100%; margin:auto; margin-bottom:20px;}*/
/*.Breadcrumb_wrapper ul {*/
/*	padding: 0;*/
/*	margin: 0; */
/*	width:100%; */
/*	list-style-type:none; */
/*	overflow:hidden; */
/*	background-color:#791515; */
/*	display: flex; */
/*	flex-wrap: wrap; */
/*}*/
/*.Breadcrumb_wrapper ul li {list-style-type:none;}*/

/*Styles links in the navigation bar*/
/*.Breadcrumb_wrapper a:link, .Breadcrumb_wrapper a:visited {*/
/*	display:block; */
/*	color:White;*/
/*	border: 1px solid black;*/
/*	font-family: "Arial", */
/*	Helvetica, sans-serif; */
/*	background-color:#791515;  */
/*	text-align:center; */
/*	text-decoration: none; */
/*	flex: 1 1 auto;*/
/*}*/
/*.Breadcrumb_wrapper a:hover, .Breadcrumb_wrapper a:active {color:Black; background-color:LightYellow;}*/
/*.Breadcrumb_wrapper a.current:link, .Breadcrumb_wrapper a.current:visited {color:Black; background-color:#497a2b;}*/

/* -----Flex version compiled with webkit stuff-----*/
.Breadcrumb_wrapper{width: 100%; margin:auto;}
.Breadcrumb_wrapper ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
  overflow: hidden;
  background-color: #791515;
  display: flex;
  flex-wrap: wrap;
}

.Breadcrumb_wrapper ul li {
  list-style-type: none;
}

/*Styles links in the navigation bar*/
.Breadcrumb_wrapper a:link, .Breadcrumb_wrapper a:visited {
  display: block;
  color: White;
  border: 1px solid black;
  font-family: "Arial", 
 	Helvetica, sans-serif;
  background-color: #791515;
  text-align: center;
  text-decoration: none;
  flex: 1 1 auto;
}

.Breadcrumb_wrapper a:hover, .Breadcrumb_wrapper a:active {
  color: Black;
  background-color: LightYellow;
}

.Breadcrumb_wrapper a.current:link, .Breadcrumb_wrapper a.current:visited {
  color: Black;
  background-color: #497a2b;
}

.Breadcrumb_wrapper ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.Breadcrumb_wrapper a:link, .Breadcrumb_wrapper a:visited {
  -webkit-box-flex: 1 200px;
  -moz-box-flex: 1 200px;
  -webkit-flex: 1 200px;
  -ms-flex: 1 200px;
  flex: 1 200px;
  -webkit-box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  -ms-flex-order: 2;
  -webkit-order: 2;
  order: 2;
}


/* ----------Saved Character----------*/
.topForm table {width: 100%}
.StatsLeftSide{position:relative; float:left; width: 50%; background: green;}
.StatsRightSide{position:relative; float:left; width: 50%;}
.AbilityStats{position:relative; float:left; width: 50%; background: blue;}
.AbilityStats table{width: 100%;}
.HP{position:relative; float:left; width: 50%; background: gray;}
.HP table{width: 100%;}
.AC{clear: both; padding-top: 20px; background: teal;}
.AC table{width: 100%;}
.Saves{width: 100%; background: orange;}
.Saves table{width: 100%;}
.BaseAtkBonus{width: 100%; background: purple;}
.BaseAtkBonus table{width: 100%;}
.Weapons{width: 100%; background: red;}
.Weapons table{width: 100%;}
div.sheetStats table, div.sheetStats th, div.sheetStats td  {border: 1px solid black; border-collapse: collapse; text-align: center;}
.blackBox{background-color: black; color:white; min-width:6em; text-align: center;}




/* ----------Body of website----------*/
body {font-size:1.2em; margin: 0; background-image: url('../img/wood_table_texture_2_by_tamarar_stock-d5xw1l4.jpg'); background-position:center center; background-attachment:fixed; background-repeat: no-repeat; background-size: 100% 100%;}
.CenterText{text-align:center;}
.CenterDiv{margin:auto;}
.Content {width:85%; background-image: url('../img/scrollMiddle.png'); background-size:100% 100%;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box; /* Firefox, other Gecko */
	box-sizing: border-box; /* Opera/IE 8+ */}
.ContentWrapper{width: 90%; margin: auto;}

a.home:link, a.home:visited {display:block; color:Black; font-size:3.5em; text-align:center; text-decoration: none; position:relative; top: 25%; transform: translateY(-25%);}
a.home:hover, a.home:active, a.home.section:link, a.home.section:visited {color:White;}


.scrollTop{background-image: url('../img/scrollTop.png'); background-size:100% 100%;  height:11vw; margin-left:-15px;}
.scrollBottom{background-image: url('../img/scrollBottom.png'); background-size:100% 100%;  height:11vw; margin-left:-15px; position: relative; top: 10vh;}
.ScrollTitle{padding-top:3%;}
a.BottomButton:link, a.BottomButton:visited{position:relative; top: 20%; transform: translateY(-20%); text-decoration: none; font-size: 3em; color:black;}
.BottomButton img{position: relative; top:20px;}
.MainPage{height:80vh;}


/* ----------Home.php----------*/




/* ----------Step1Class.php----------*/
.iconSize{display: inline-block; vertical-align:middle; height: 100px;/*width: 20%;*/}
.ClassContainer{display: inline-block; vertical-align:middle;width: 79%;}




/* ----------Step2Race.php----------*/
.goodSTAT {color:Green;}
.badSTAT {color:Red;}
.ui-accordion .ui-accordion-icons, .ui-accordion:active{color: black; background: transparent; border:none; text-align: center;}
.ui-accordion .ui-accordion-content {background: transparent;}



/* ----------Step3Stats.php----------*/
.statHeader {background-color: Gray; background-size: 400px 400px; height: 100px; width: 100%;}
.vmenu ul {list-style-type: none; margin: 0;padding: 0; height:100%;}
.vmenu li {height:15%; border-bottom: solid 1px;}
.vmenu a {display: block; width: 100%;}
.vmenu .vmenuParent{position:relative; left:30px; top: 40%; transform: translateY(-40%);}
.vmenu .PhotoshopChild {position:relative; left:10px; top: -5%; transform: translateY(5%)}
.vmenu {float: left; height:750px; width:20%;}
/*Usual color for parent links*/
.vmenu a:link, .vmenu a:visited {display:block; color:White; height:100%; font-family: "Arial", Helvetica, sans-serif; background-image: url('../img/red_leather-hi.jpg'); background-size: 400px 400px; text-decoration: none; box-shadow: inset 0 -30px 40px -30px rgba(0,0,0,0.7);}
/*Usual color for child links*/
.vmenu a.childLink:link, .vmenu a.childLink:visited {display:block; color:White; height:100%; font-family: "Arial", Helvetica, sans-serif; background-color:Gray; text-decoration: none; box-shadow: inset 0 -30px 40px -30px }
/*Color for all links when active or the current page*/
.vmenu a:hover, .vmenu a:active, .vmenu a.current:link, .vmenu a.current:visited, .vmenu a.childLink:hover, .vmenu a.childLink:active {color:Black; background-image: url('../img/Resume_background.jpg');}
/*Sets the colored background for info to display in*/
.projectBody {background-image: url('../img/Resume_background.jpg'); width: 80%; min-height:797px; float: left; padding: 10px; overflow: hidden;   
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
  	box-sizing: border-box;         /* Opera/IE 8+ */}
/*Hides the Stat content till needed*/	
.Hidden {display: none;}


#statsTable {width: 100%;}

/*For Sliding Divs*/
.slider{display:none; margin: auto; width:100%;}
.slider table{width:100%; border:solid;}
.collapseSlider{display:none;}
.sliderExpanded .collapseSlider{display:block;}
.sliderExpanded .expandSlider{display:none;}
.toggler {cursor:pointer; font-size: 2em; text-decoration: none;}

.glow{color: Black;
	-webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;}
.glow:hover{color:black; -webkit-animation: neon2 1.5s ease-in-out infinite alternate;
  -moz-animation: neon2 1.5s ease-in-out infinite alternate;
  animation: neon2 1.5s ease-in-out infinite alternate;}
  /*glow for webkit*/
@-webkit-keyframes neon2 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
  }
}


/*glow for mozilla*/
@-moz-keyframes neon2 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
  }
}

/*glow*/
@keyframes neon2 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
  }
}





/* ----------Step4ClassDetails.php----------*/
div.TableWrap table, div.TableWrap th, div.TableWrap td  {border: 1px solid black; border-collapse: collapse; text-align: center;}
.ui-icon-info {float: right; display:inline-block; height:100px;}



/* ----------Step7Skills.php----------*/
.wrap{float: right;}
.skillDescription{clear: both;}



/* ----------Step8Alignment.php----------*/
/*Flexbox layout*/
.gallery { /*implement FlexBox*/
	width: 100%;
	display: flex; /*make this container a flexbox*/
	flex-wrap: wrap; /*allow items within this container to wrap to the next line*/
	justify-content:center;
}
.gallery .item{margin: 5px; border: 1px solid; text-align:center; width:25%;  height:20vw; background-color: #DEB887;}




/* ----------Step9Faction.php----------*/
/*.FactionDiv{background-color: Gray;}*/


/* ----------Footer css----------*/
.footer {color:White; font-family: "Arial", Helvetica, sans-serif; background-color:#404040; text-align:center; font-size: 0.9em; width: 100%;}
.footer p {margin: 10px 0;}

/*MEDIA QUERY*/
@media only screen and (max-width : 840px) {

	header {
		position: absolute;
	}

	#menu-icon {
		position: absolute;
		display:inline-block;
		top: 30px;
		right:0px;
	}

	header ul, header:active ul { 
		display: none;
		position: absolute;
		padding: 10px;
		background: #404040;
		border: 5px solid #444;
		border-color: red;
		right: 0px;
		border-radius: 4px 0 4px 4px;
		top: 70px; transform: translateY(0%);

	}

	header li {
		text-align: center;
		width: 100%;
		padding: 10px 0;
		margin: 0;
	}

	header:hover ul {
		display: block;
	}
}