/* Atlas-MenuSections()
    Purpose:        Contains styling that are useful for several projects that use menus to get around
					Also very useful to setup testing frameworks to quickly try out functions and APIs
    Author:         Drew Topel
  Copyright (c) 2009-2017 Atlas Software Services - Licensed to clients for use in their project
  All Rights Reserved - Used by Permission
	Ownership and licensed use: The software contained in this file was wholly Created by AtlasSoftwareServices independently 
 				from client projects. As such AtlasSoftwareServices retains ownership and can elect to use this code
 				within any client's project when needed. 
 				There is NO implied transfer or sharing of ownership of the content of this file when used within a client project
*/

/* By utilizing percentages for most of the settings, it will make it so that the
	sizes of all those elements, i.e. the menu buttons, etc. will all scale automatically
*/
.MenuPage, .MenuTitle, .M_Item, .Common {
	position:relative;
	border-style: solid;
	border-width: 6px;
	border-radius: 14px;
	border-color: rgb(111,83,59);
	}

.MenuPage {
	background-color: transparent;
	background-image:url("../img/MenuBkgnd.jpg");
	overflow: hidden;
	/* width:100%; */
	/* height: 100%; */
	color: black;
	font-family: 'Nunito', sans-serif;
	font-size: 14px;
	text-align: center;
	padding: 10px 0px 50px 0px;	/* This is what made the black color go all the way to the top */
	}

.MenuTitle {
	background-color: rgb(111,83,59);
	color: antiquewhite;
	border-color: rgb(194, 162, 141);
	font-size: 40px;
	font-weight: 700;
	width: 60%;
	text-align: center;
	max-width: 600px;
	margin: auto;
	margin-bottom: 15px;
	margin-top: 15px;
	}

.subtitle {
	font-size: 20px;
	font-weight: initial;
	height:initial;
	border-width: 2px;
	border-radius: 4px;
	background-color: rgb(145,103,89);
	/* margin: 5px 20% 5px 20%; */
}
/* MenuItems is the container within which the M_Items are placed. So here we will establish how the 
	column is setup so that it can scale what is within it if they are setup right
*/
.MenuItems {
	position: relative;
	width: 45%;
	height: 75%;
	margin:2% 20% 10% 26%;
}

.M_Item {
	position:relative;
	background-color:  rgb(230,198,132);
	border-width: 5px;
	/* font-size: 20px; */
	/* color: black; */
	/* min-width: 125px; */
	/* max-width: 250px; */
	/* margin: auto; */
	/* margin-top: 10px; */
}

.ClickBut {
    cursor: pointer;
}

/* This moves the element a little way down so it looks like it got clicked */
.ClickBut:active {
  box-shadow: 0 3px 0 rgb(145,103,89);
  top: calc(top + 3px);
}

/* Make the color a darker red to contrast with the bright red button which is 255,0,0*/
.RedClickBut:active {
  box-shadow: 0 3px 0 rgba(140, 0, 0, 1);
  top: 3px;
}

#Output { 
	position: relative; 
	width: 100%; height: 5%; 
	margin: 5px, 10px, 10px, 10px; 
	font-size: 16px; 
	background-color: lightblue; 
	color: black; 
}

.MenuFooter {
	position:relative;
	margin-top: 20px;
}

.NavButton {
	background-color: rgb(230,198,132);
	color: black;
	width: 20%;
	height:45px;
	font-size: 18px;
	padding: 4px;
	margin-bottom:20px;
}

.Nav { /* Navbar at the top */
	height: 70px;
	width: 100%;
	background-color: black;
	color: whitesmoke;
	border-style: solid;
	border-width: 4px;
	border-radius: 4px;
	border-color: rgb(145,103,89);
}


.NavTxt {	/* Text Blurb in the Nav Bar*/
	position: relative;
	/* margin: auto; */
	text-align: center;
	font-size: 30px;
	font-family: segoe;
	font-family: 'Nunito', sans-serif;
	padding-top: 10px;
	margin-right: 90px;
}

.MenuFooter {position: relative;/* margin-bottom: 100px; */height: 80px;}

/* this is the only CSS support needed for the clock (minutes) input for the report start time*/
.container {
    padding: 20px;
}

.Footer-Return {
	left: 20%;
	float: left;
}

.Footer-Run, .Footer-Save {
	float:right;
	right: 20%;
	margin-bottom:20px;
}

/* when you have two buttons that are supposed to be side by side, use these classes*/
.button-left {
	float: left;
}

.button-right {
	float: right;
}