@charset "utf-8";
/* CSS Document */

html, body {
	height: 100%;
	
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
}

.logininfo {

	padding-top: 100px;
	z-index: 30;
	margin-left: 100px;
}

.container{
	display:grid;
	height: 100vh;
	grid-template-columns: 325px 3fr;
				grid-template-rows: 50px 50px 700px 12px;
	/*grid-template-rows: .1fr .8fr .1fr;*/
	grid-template-areas: 
		"nav nav"
		"sidebar topic-header"
					"sidebar content"
		"footer footer";
	grid-gap: 0.2rem;
	font-family: 'Roboto', sans-sarif;
	/*background-image: url(Images/webpic-7-1.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover; */
	/*background-position: fixed;*/
	
	
}

.bg{
	position:fixed;
	top: 0;
	left: 0;
	min-width: 100%;
	height: auto;
	min-height: 100%;
	min-width: 1024px;
}
.sidebar{
	position:fixed;
	top: 30px;
	font-family: 'Roboto', sans-sarif;
	font-weight: 500;
	font-size: 16px;
	align-items: left;
	bottom: 0;
	color: darkblue;
	/*height:calc(100% - 70px);*/
	height: 100%;
	z-index: 1;
	overflow-y:auto;
	padding-top: 40px;
	padding-bottom: 60px;

	
	transition: background-color .2s ease, color .2s ease;
													/*border: 6px solid green;*/
}

body {
	font-size: 16px;
	line-height: 1.1;
	/*background-color: white;*/
	color: black;
	font-family: 'Roboto', sans-sarif;
	background-image: url(file:///G|/NewHandbookGrid/Images/webpic-7-1.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover; 
	
}

.header {
	background-color: #2c3e50;
	padding: 10px;
/*	max-width: 1500px;*/
	/*margin: 0 auto;*/
	display: flex;  /*changed this from block to flex 8-19*/
	width: 100%;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	z-index: 20;
	margin-top: 0;
																/*border: 2px solid red;*/
			
}

.menu ul{
	margin: 0;
	padding: 0;
	display: flex;
}

.menu li {
	list-style: none;
}

.inner_header{
	width: 1000px;
	background-color: red;
	height: 100%;
	display: block;
	margin: 0 auto;
	
}

.button{
	
	font-family: 'Roboto', sans-sarif;
	background: none; 
	border: none; 
	cursor:pointer;
	text-decoration: none;
	font-weight: 500;
	
}

.centerHeader {
	text-align: center;
	line-height:20px; 
	margin-bottom:10px;
}


	




.logo {
	height: 100%;
	display: table;
	float: left;
	color: #fff;
	/*font-size: 1.5rem;
	
	font-weight:400;
	perspective-origin: left;
	max-height:100%;
	max-width: 100px;*/
}

.logo h1{
	color: #fff;
	height: 100%;
	display: table-cell;
	vertical-align: middle;
	font-weight: 100;
		
}

.logo h1 span{
	font-weight:400;
}

.menu li {
	text-decoration: none;
/*display: inline-block;*/
	/*margin-right: 0;*/
	float:right;
	height: 100%;
	list-style: none;
		
}

.menu a {
	text-decoration: none;
	color: #fff;
	display: block;
	padding: 10px 1.5rem;
	transition: background-color .2s ease, color .2s ease;
	margin-right: 0;

	
		
}

.menu a:hover {
	background-color: #f34949;
	color: #fff;
	
}




.toc-menu a {
	text-decoration: none;
	color:darkmagenta;
	display: block;
	padding: 10px;
	transition: background-color .2s ease, color .02s ease;
}

.toc-menu a:hover{
	color:black;
	font-size: 16px;
	font-weight: 500;
	transition: background-color .2s ease, color .2s ease;
	text-decoration: underline;
}

.toc-menu button{
	text-decoration: none;
	font-size: 16px;
	color:darkmagenta;
	display: block;
	padding: 10px;
	transition: background-color .2s ease, color .02s ease;
	
}

.toc-menu button:hover{
	color:black;
	/*font-size: 18px;*/
	font-weight: 500;
	transition: background-color .2s ease, color .2s ease;
	text-decoration: underline;
}
.toc-menu ul{
	text-decoration: none;
}





.tabcontent {
	display: grid;
	grid-template-columns: auto;
	
}

.newcontent {
	font-size: 22px;
	text-align: center;
	position: absolute;
	min-height: 100vh;
	top: 0;
	left: 8px;
	margin-top: 70px;
/*width: calc(100% - 80px);*/
	padding: 1rem;
	color: Black;
	Background-color: none;
	/*margin-left: 100px;*/
}

.content {
	grid-area:content;
	font-size: 18px;
							display: grid;
	Background-color: none;
	z-index: 1;
														/*border: 2px solid purple;*/

}

.content {
	position: absolute;
	min-height: 100vh;
	top: 0;
	left: 8px;
/*width: calc(100% - 80px);*/
	padding: 1rem;
	color: Black;
	Background-color: none;
	margin-left: 100px;
	
	

														/*border: 2px solid purple;*/
}
.content p{
	 margin-bottom:px;
																/*border: 2px solid purple;*/
	
}







section img {
			float: left;
			margin-right: 10px;
		}

footer{
	/*background-color:chartreuse;*/
	grid-area: footer;
	border: 2px solid green;
	
}

#sidebar{
	/*background-color: #18ffff;*/
	grid-area: sidebar;
	border: 8px solid red;
}

ul#remove {
	list-style-type: none;
	padding: 0;
}


#content1{
	/*background-color: #6fffd2;*/
	grid-area: content1;
																	/*border: 8px solid black;*/
	background-color: rgba(0,0,0,.5);
	padding: 30px;
	font-size: 40px;
	color: white;
	font-weight: 100;
}


.active {
    font-weight:bold;
}
.section {
    width:350px;
    float:left;
    padding:10px;
}
.footer {
    background-color:#2c3e50;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
	position: fixed;
	left:325px;
	bottom: 0px;
	right:20px;
	width: 100% -400px;
	font-size: 12px;

}

.footer a{
	color: white;
}
.topic-header {
	/*align: center;*/
	position: absolute;
	font-size: 24px;
	color: black;
	font-weight: bolder;
	padding-bottom: 15px;
	padding-top: 15px;
									margin-top: -20px;
	margin-left: 325px;

}

.text-content {
	font-size: 20px;
	color: white;
	font-weight: 100;
	background-color: rgba(0,0,0,.5);
	padding: 20px;
	position: absolute;
	margin-top: 25px;
	width: 100%-400px;
	margin-left: 325px;
	margin-right: 25px;
																	/*border: 8px solid yellow;*/
	
}

.text-content p{
	line-height:22px; 
     margin-bottom:20px;
	 margin-left: 20px;
	
	
																			/*border: 2px solid blue;*/
        }

.text-content p:last-child {
	margin-bottom: 80px;
}

/*.text-content li:last-child {
	margin-bottom: 80px;
}*/

.text-content h3 {
	margin-left: 20px;
}

.text-content h4 {
	margin-left: 20px;
}

.text-content h5 {
	margin-left: 20px;
}

.text-content li{
	/*display: list-item;*/
	padding: 4px;
	margin-left: 25px;
}

.text-content ul{
	margin-left: 20px;
    margin-bottom: 10px;
																		/*border: 2px solid purple;*/
	padding: 8px;
	
}

.text-content ol{
	margin-left: 20px;
    margin-bottom: 10px;
																	/*border: 2px solid pink;*/
	padding: 8px;
}
.text-content a{
	color:aqua;
	/*background-color: antiquewhite;*/
}
.text-content table td{
	background-color:lightgray;
	color:black;
	padding: 10px;
}
.text-content table th{
	background-color: darkgray;
}
.foottext{
	font-size: 14px;
}

.center{
	display:block;
	margin-left: auto;
	margin-right: auto;

}



.linktext {
	color:antiquewhite;
	font-weight: 500;
}


.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 40;
  top: 30px;
  left: 0;
  background-color:coral;
	background-image: radial-gradient(whitesmoke, coral);
  /*background-color: rgba(0,0,0, 0.5);*/
  overflow-x: hidden;
  transition: 0.5s;
 
}

.overlay-content {
  position: relative;
  top: 15%;
  width: 90%;
  text-align: left;
  margin-top: 10px;
	padding-bottom: 70px;
				
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  /*font-size: 14px;*/
  color:blue;
  display: block;
  transition: 0.3s;
			margin-left: 30px;
}

.overlay a:hover, .overlay a:focus {
  color: black;
  
  
}



.overlay .closebtn {
  position: absolute;
  top: 40px;
  right: 15px;
  font-size: 25px;
}



.submenuTitle {
	font-size: 18px;
	font-weight: 500;
	color: black;
	
	padding-bottom: 10px;
	text-align: center
}



.imageSmall {
	width: 300px;
	height: 300px;
}

.Ptext {
	align-self: flex-end;
}

u{
	text-decoration: underline;
}

.paragraph {
	display: flex;
}

.doctext{
	line-height:16px; 
     margin-bottom:20px;
	margin-left: 8px;
	
}

.centerhead {
	text-align: center;
}

.smalltable {
	width: 75%;
	margin-left: auto;
	margin-right: auto;

}

.xstable {
	width: 50%;
	margin-left: auto;
	margin-right: auto;

}
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}


.toggle-button {
	position: absolute;
	top:.75rem;
	right: 1rem;
	display: none;
	flex-direction: column;
	justify-content: space-between;
	width: 30px;
	height: 21px;
	
}
.toggle-button .bar{
	height: 3px;
	width: 100%;
	background-color: white;
	border-radius: 10px;
}

.caption1 {
    color: white;
    font-size: 16px;
    text-align: center;
}

.xsmImg {
	border-radius: 5px;
	max-Width: 150px;
	height: auto;
	box-shadow: black 10px 10px 10px;
}

.smallImg {
	border-radius: 10%;
	max-Width: 225px;
	height: auto;
	box-shadow: black 10px 10px 10px;
	
}

.smallImg2 {
	border-radius: 10%;
	max-Width: 335px;
	height: auto;
	box-shadow: black 10px 10px 10px;
	
}

ul li {
    position: relative;
    left: 1em;
    padding-right: 1em;    
}​


.medImg {
	border-radius: 10%;
	max-Width: 335px;
	height: auto;
	box-shadow: black 10px 10px 10px;
	
}

.lgImg {
	border-radius: 4px;
	margin:auto;
	display: block;
	max-Width: 750px;
	height: auto;
	box-shadow: black 10px 10px 10px;
}

.xlgImg{
    border-radius: 4px;
	margin:30px;
	display: block;
	max-Width:900px;
	height: auto;
	box-shadow: black 10px 10px 10px;
}

.img1 {
	max-Width: 200px;
	height: auto;
	box-shadow: black 10px 10px 10px;
	
}

.zoomin img {
    width:100%;
    transition: transform .7s ease-in-out;
}

.zoomin:hover img {
    transform: scale(1.3);
    
}

.zoomin2 img{
    width: 700px;
    transition: transform .7s ease-in-out;
    display: block;
    margin-left: auto;
    margin-right: auto;
    

}

.zoomin2:hover img{
    transform: scale(1.3);

}

figure.item {
    /* To correctly align image, regardless of content height: */
    /*vertical-align: top;*/
    display: inline-block;
    /* To horizontally center images and caption */
    text-align: center;
    /* The width of the container also implies margin around the images. */
    width: 400px;
	
}

.new-container {
	display: flex;
            flex-direction: column;
            align-items: center;
	
  }

  .caption {
    /* Make the caption a block so it occupies its own line. */
    display: block;
}



@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 25px;
  right: 35px;
  }
}
@Media screen and (max-width: 1250px){
	.menu > li, .menu > a {
		font-size: 12px;
			}
	.menu ul{font-size: 12px;}
	
}

@Media screen and (max-width: 2000px){
	.text-content{
		margin-left: 325px;
	
}
}
@media(max-width:1024px){
	.toggle-button {
		display: flex;
		
	}
	.menu {
		display: none;
		width: 100%;
		
	}
	.header {
		flex-direction: column;
		align-items: flex-start;
		
	}
	.menu ul {
		flex-direction: column;
		width:100%;
	}
	
	.menu ul {
		width: 100%;
		flex-direction: column;
	}
	.menu li a{
		text-align: center;
			}
	
	.menu li a {
		padding: .5rem 1rem;
	}
	
	.menu.active {
		display: flex;
	}
	
	.smallImg2 {
		max-width: 200px;
	}
	.lgImg {
		max-width: 500px;
	}
	

	
	.nav-item{
		margin: 16px 0;
	}
	.menu.active{
		left: 0;
	}
	
}

/*@media(max-width:768px){
	.lgImg {
		max-width: 400px;
		
	}*/

@media screen and (max-width: 775px){
	.toc-menu button{
		font-size: 12px;
		color:green;
	}
	.text-content{
		min-width: 250px;
		margin-left: 250px;
	}
	.toc-menu a{
		font-size: 12px;
		color: green;
	}
	
	
}