/* 
	The navigation button style

	Class explanation/usage:
	.navigation-btn - Used for normal navigation buttons, use this on anchors
	.navigation-btn-dropdown-outer-wrapper - The outermost wrapper for a dropdown menu, which holds the button	
*/

.navigation-btn, .navigation-btn-dropdown-outer-wrapper
{
	/* Sizes */
	background: #4CAF50;
	color: white;
	font-family: "Brush Script Std";
	font-size: 150%;
	text-decoration: none;
	white-space: nowrap;
	letter-spacing: normal;
	cursor: pointer;

    transition: 0.5s background-color, 0.5s text-shadow;
    -webkit-transition: 0.5s background-color, 0.5s text-shadow;
    -moz-transition: 0.5s background-color, 0.5s text-shadow;
    -ms-transition: 0.5s background-color, 0.5s text-shadow;
    -o-transition: 0.5s background-color, 0.5s text-shadow;
}

.navigation-btn:hover, .navigation-btn-dropdown-outer-wrapper:hover
{
	background: #459648;
}

.navigation-btn-dropdown
{
	color: white;
	text-decoration: none;
}

.navigation-btn-dropdown-outer-wrapper
{
	cursor: pointer;
	position: relative;
}

/*
	The wrapper around the dropdown content. By default it is only visible when hovering over it.

	To change alignment, change left: 0 to your desired alignment code
*/
.navigation-btn-dropdown-inner-content
{
	width: 100%;

	line-height: 1.6;
	background: #4CAF50;
	text-shadow: none;
	font-size: 90%;
	
	/* Fixes border-radius disappearing when hovering over dropdown links */
	overflow: hidden;

	/* Only set cursor: pointer if actually needed and dont allow inheritance */
	cursor: default;
}

.navigation-btn-dropdown-inner-content hr
{
	border-style: none;
    border-width: 0px;
    border-bottom: 1px solid #e5e5e5;
}

/*
	A link inside a dropdown, not all inline elements work nicely though, most notably forms
*/
.navigation-btn-dropdown-inner-content a
{
	display: block;
	text-decoration: none;
	color: white;
	font-family: "Raleway";
	font-size: 80%;
	padding: 5px;
	
	/* Standard */
	white-space: initial;

	/* IE 11 */
	white-space: normal;
	text-align: center;
	transition: 0.5s background-color;
	-webkit-transition: 0.5s background-color;
	-moz-transition: 0.5s background-color;
	-ms-transition: 0.5s background-color;
	-o-transition: 0.5s background-color;
}

.navigation-btn-dropdown-inner-content a:hover
{
	background-color: #459648;
}

.navigation-btn-dropdown-outer-wrapper:hover .navigation-btn-dropdown-inner-content
{
	visibility: visible;
	opacity: 1.0;
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
	-moz-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	-o-transform: translate(0, 0);
}

.navigation-table
{
	border-spacing: 0;
	border-collapse: collapse;
	width: 100%;
	table-layout: fixed;
}

.navigation-table td
{
	letter-spacing: -1em;
	vertical-align: top;
	padding: 0;
	margin: 0;
}

#index-btn
{
	display: inline-block;
	height: 60px;
	width: 60px;
	color: white;
	line-height: 60px;
	font-size: 300%;
	text-align: center;

	/* Don't use tap highlight colour */
	-webkit-tap-highlight-color: transparent;

	transition: 0.5s background-color;
    -webkit-transition: 0.5s background-color;
    -moz-transition: 0.5s background-color;
    -ms-transition: 0.5s background-color;
    -o-transition: 0.5s background-color;
}

#index-btn:hover
{
	background-color: #459648;
}

.nav-logo
{
	display: block;
	width: 75%;
	height: 75%;
	margin: 12.5% auto;
	padding: 2.5%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.nav-logo path
{
	fill: white;
}

nav
{
	display: block;
	height: 60px;
	white-space: nowrap;
	background: #4CAF50;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
	-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

.navbar-right-togglebtn
{
	height: 60px;
	width: 60px;
	cursor: pointer;
	border: none;
	background: #4CAF50;
	color: white;
	font-size: 150%;

	/* Don't inherit any padding */
	padding: 0;

	/* Don't use tap highlight colour */
	-webkit-tap-highlight-color: transparent;

	transition: 0.5s background-color;
    -webkit-transition: 0.5s background-color;
    -moz-transition: 0.5s background-color;
    -ms-transition: 0.5s background-color;
    -o-transition: 0.5s background-color;
}

.navbar-right-togglebtn span
{
	/* Basic rotation animation */
	display: block;

	/* Width should not exceed content */
	width: fit-content;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	max-width: 100%;

	/* Center horizontally */
	margin: 0 auto;

	/* Fixes transform: rotate animation starting at the element edge instead of the center */
	letter-spacing: normal;

	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);

	transition: 0.5s transform;
	-webkit-transition: 0.5s transform, 0.5s -webkit-transform;
	-moz-transition: 0.5s transform, 0.5s -moz-transform;
	-ms-transition: 0.5s transform, 0.5s -ms-transform;
	-o-transition: 0.5s transform, 0.5s -webkit-transform, 0.5s -o-transform;
}

.navbar-right-togglebtn:hover
{
	background: #459648;
}

.navbar-right-togglebtn:focus
{
	outline: none;
}


@media screen and (min-width: 1250px) 
{
	.navbar-right
	{
		display: block;
	}

	.navbar-right-togglebtn
	{
		display: none;
	}

	.navigation-btn, .navigation-btn-dropdown-outer-wrapper
	{
		display: inline-block;
		vertical-align: top;
		text-align: center;

		/* Sizes */
		min-width: 175px;
		padding-left: 7.5px;
		padding-right: 7.5px;
		height: 60px;
		line-height: 60px;
	}

	.navigation-btn-dropdown-outer-wrapper
	{
		position: relative;
	}

	.navigation-btn-dropdown-inner-content
	{
		/* Use display: table instead of display: block! */
		display: table;
		visibility: hidden;

		position: absolute;
		left: 0;
		z-index: 11;

		/* Simplistic border */
		border: 1px solid rgba(0, 0, 0, 0.15);
		background-clip: padding-box;
		-webkit-background-clip: padding-box;
		-moz-background-clip: padding-box;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;

		/* Simplistic animation */
		opacity: 0.0;
		transform: translate(0, -12.5%);
		-webkit-transform: translate(0, -12.5%);
		-moz-transform: translate(0, -12.5%);
		-ms-transform: translate(0, -12.5%);
		-o-transform: translate(0, -12.5%);
		transition: 0.25s visibility, 0.25s opacity, 0.25s transform;
		-webkit-transition: 0.25s visibility, 0.25s opacity, 0.25s transform, 0.25s -webkit-transform;
		-moz-transition: 0.25s visibility, 0.25s opacity, 0.25s transform, 0.25s -moz-transform;
		-ms-transition: 0.25s visibility, 0.25s opacity, 0.25s transform, 0.25s -ms-transform;
		-o-transition: 0.25s visibility, 0.25s opacity, 0.25s transform, 0.25s -webkit-transform, 0.25s -o-transform;

		/* Dropdown box shadow */
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
		-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
		-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
	}
}

@media screen and (max-width: 1250px) 
{
	nav hr
	{
		display: none;
	}

	.navbar-right
	{
		visibility: hidden;
		position: absolute;
		width: 100%;
		left: 0;
		overflow-y: visible;
		overflow-x: hidden;
		z-index: 2;

		/* Move up/down animation */
		margin-top: -2.5%;
		opacity: 0.0;
	}

	.navbar-right-togglebtn
	{
		display: block;
	}

	.navigation-btn, .navigation-btn-dropdown-outer-wrapper
	{
		display: block;

		/* There are only four buttons! */
		font-size: 1em;
		width: 100%;
		text-align: center;

		/* Sizes */
		min-height: 60px;
		line-height: 60px;
	}

	.navigation-btn-dropdown-inner-content
	{
		display: block;
		z-index: 10000;
		height: 100%;
	}
}