body{
	padding-top: 		70px;
	padding-bottom:		50px;
	margin:				0;
	background-color:   rgb(244, 244, 244);
}


article{
	margin-top: 		20px;
	margin-left:		50px;
	margin-right:		50px;
}



h1 {
	font-size: 			200%;
	margin-bottom: 		30px;
	margin-top:			20px;
	border-bottom-style:outset;
	border-width:		5px;
}

h2 {
	margin-top:			40px;
	margin-bottom:		5px;
	border-bottom-style:outset;
	border-width:		2px;
}

h3{ 
	font-size:			125%;
	margin-top:			40px;
	margin-bottom:		5px;
}


table {
	background-color:	PeachPuff;
	border: 			1px solid black;
	border-collapse:	 collapse;
}

td {
	border: 			1px solid black;
}


.stop-scrolling {
	height: 			100%;
	overflow: 			hidden;
}




/*expanded images
/////////////////////////////*/

#previousArrowImg, #nextArrowImg, #closeButtonImg {
	font-size: 			5vh;
	color: 				white;

	-moz-user-select: 	none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: 	none;
	user-select: 		none;
}


#imgBlackDiv {
	background-color: 	black;
	position: 			fixed;
	left:				0px;
	top:				0px;
	height: 			100%;
	width: 				100%;
	z-index: 			1;
}

#previousArrowImg {
	position: 			fixed;
	left: 				30px;
	top:				50%;	
	z-index: 			3;
}

#nextArrowImg {
	position: 			fixed;
	right: 				30px;
	top:				50%;	
	z-index: 			3;
}

#closeButtonImg{
	position: 			fixed;
	right:				30px;
	top:				1.5%;
	z-index: 			1;
}

/*
Header
////////////////////////////////////////
*/
#header, #header2{
    background-color: #783615;
    height:           60px;
    width:            100%;
    position:         fixed;
    z-index:          1;
    top:              0px;
    color:            white;
}

#menuHeader {
    position:         absolute;
    left:             50px;
    background-color: #783615;
	height: 		  60px;
    
}

#dropDownArticle, #dropDownTools {
	position: 		  fixed;
	background-color: #783615;
	top:              0px;
}

#dropDownArticle {
	left:             120px;
}

#dropDownTools {
	left: 			260px;
}


/* Settings, if mouse enters element*/
.headerText:hover, #icon:hover {
    background-color: #ffaa7f;
    color:            black;
    transition:       0.2s;
}

.headerText{
    font-size:        1.8em;
    padding-left:     10px;
    padding-right:    20px;
    color:            inherit;
    text-decoration:  inherit;
    top:              -20px;
    position:         relative;
	display:          inline-block;
	line-height:      60px;
}

.dropDownHeader{
	width: 			200px;
	height: 		60px;
	top: 			0px;
}

#icon {
    all:              unset;
    width:            50px;
    padding:          5px;
	margin-right:     280px;
}


/*Portrait
/////////*/
#header2 {
	height: 			5vh;
}

#menuHeader2 {
	height: 			5vh;
	background-color: 	#783615;
	transition: 		height 0.5s ease-in-out;
}

#header2Icon {
	right: 				30px;
	position: 			absolute;
	font-size: 			4.44em;
	user-select: 		none;
}

#innerMenu {
	position: 			absolute;
	left: 				10vh;
	top: 				20vh;
	opacity: 			0;
	transition: 		opacity 0.5s ease-in-out;
}

#innerMenu * {
	text-decoration: 	none;
	color: 				white;
	font-size: 			3.5em;
}

@media all and (orientation:landscape) {
	#header2{			display: none;}
}


@media all and (orientation:portrait) {
	#header{display: 	none; }

	body{padding-top: 	6vh;}
}



/*Mobile
///////////////////
*/
@media all and (orientation:landscape) {
	img{
		vertical-align:top;
		height :	250px;
		width: 		auto;
	}
	
	video {
		width:		auto;
		height:		250px;	
	}
}


@media all and (orientation:portrait) {
	img{
		vertical-align:top;
		width: 		100%;
		height :	auto;
	}
	
	video {
		width : 	100%;
		height :	auto;
	}
	
	table{
		width:		100%;
	}
	

	p, li, td, th {
		font-size:	 1.9rem;
	}
	
	h1 {
		font-size:	 3rem;
	}

	h2{
		font-size: 	2.2rem;
	}
	
	h3 { 
		font-size:	2.0rem;
	}
}