/* ---------------------------------------------------------------------------- Set General Page Style */
html
	{
	background-color:#cccccc;

	margin:0;
	padding:0;

	height:100%;
	}

/* gets rid of cross in IE form inputs */
*::-ms-clear
	{
	display: none;
	}

*::-ms-reveal 
	{
    display: none;
	}

/* ---------------------------------------------------------------------------- Body */
body
	{	
	height: 100%;
	
	background:#f2f2f2;

	margin:0;
	padding:0;


	/* font-family: Helvetica, Arial, sans-serif; */
	/*
	#############################################

	DO NOT SET FONT in html or body, set font in child elements
	line-height seems to cause problem-creating a gap at the bottom of the page
	
	----
	good resouce for checking out fonts: http://www.cssfontstack.com/Web-Fonts
	
	#############################################
	*/

	/*
	font-family: 'Titillium Web', sans-serif;
	font-size: 14px;
	font-weight: normal;
	line-height: 14px;
	color: #535061;

	margin: 0px;		
	text-align: left;
	*/

	font-size:100%;

	color:#505569;
	}

*, *::after, *::before 
	{
	/* this makes borders and padding be on the inside rather than outside */
	
	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	-ms-box-sizing:			border-box;
	box-sizing:					border-box;

	margin:0; 
	padding:0;

	outline:none;
	}

	/* NEW MENU */

	.menu-wrap {
		position: relative;
		width: 60px;
		height: 60px;
		top: 0;
		left: 0;
		z-index: 10001;
	}
	
	.menu-wrap .toggler {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10002;
		cursor: pointer;
		width: 60px;
		height: 60px;
		opacity: 0;
		clip: auto;
	}
	
	.menu-wrap .hamburger {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10001;
		width: 60px;
		height: 60px;
		padding: 1rem;
		background: var(--primary-color);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	/* Hamburger Line */
	.menu-wrap .hamburger > div {
		position: relative;
		flex: none;
		width: 100%;
		height: 2px;
		background: #505569;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all .4s ease;
	}
	
	/* Hamburger lines before after */
	.menu-wrap .hamburger > div:before,
	.menu-wrap .hamburger > div:after {
		content: '';
		position: absolute;
		z-index: 10001;
		top: -10px;
		width: 100%;
		height: 2px;
		background: inherit;
	}
	
	.menu-wrap .hamburger > div:after {
		top: 10px;
	}
	
	/* Toggler Animation */
	.menu-wrap .toggler:checked + .hamburger > div {
		background: #fff; 
		transform: rotate(135deg);
	}
	
	/*  Turns lines into X */
	.menu-wrap .toggler:checked + .hamburger > div:before,
	.menu-wrap .toggler:checked + .hamburger > div:after {
		top: 0;
		transform: rotate(90deg);
	}
	
	/* Rotate on hover when checked */
	.menu-wrap .toggler:checked:hover + .hamburger > div {
		transform: rotate(225deg);
	}
	
	/* Show Menu */
	.menu-wrap .toggler:checked ~ .menu {
		visibility: visible;
	}
	
	.menu-wrap .toggler:checked ~ .menu > div {
		transform: scale(1);
		transition-duration: 0.75s;
	}
	
	.menu-wrap .toggler:checked ~ .menu > div > div {
		opacity: 1;
		transition: opacity .4s ease .4s;
	}
	
	.menu-wrap .menu {
		position: fixed;
		top: 0;
		left: 0;
		width: 20%;
		height: 100%;
		visibility: hidden;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	@media (max-width: 1024px) {
		.menu-wrap .menu {
			width: 30%;
		}
	 }

	@media (max-width: 770px) {
		.menu-wrap .menu {
			width: 40vw;
			height: 100vh;
		}
	}

	@media (max-width: 600px) {
		.menu-wrap .menu {
			width: 100vw;
			height: 100vh;
		}
	}

	
	.menu-wrap .menu > div {
		/* background: #48535b; */
		/* background: linear-gradient(to right, #383f45, #48535b); */
		  background-color: rgb(32, 32, 32);
  background-image: linear-gradient(to right, rgba(0,0,0,.6), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,.6)), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(to bottom, rgb(8, 8, 8), rgb(32, 32, 32));
  background-size: 100% 100%, 10px 10px, 10px 10px, 10px 5px;
  background-position: 0px 0px, 0px 0px, 5px 5px, 0px 0px;
		/* background: linear-gradient(to right,rgba(24, 39, 51, 1), rgba(24, 39, 51, .7)); */
		/* background: rgb(249, 142, 29); */
		/* background: -webkit-repeating-linear-gradient(left, hsla(31,95%,70%,0) 0%, hsla(31,95%,70%,0)   6%, hsla(31,95%,70%, .1) 7.5%),
    -webkit-repeating-linear-gradient(left, hsla(31,95%,  29%,0) 0%, hsla(31,95%, 30%,0)   4%, hsla(31,95%,  30%,.03) 4.5%),
    -webkit-repeating-linear-gradient(left, hsla(31,95%,70%,0) 0%, hsla(31,95%,70%,0) 1.2%, hsla(31,95%,70%,.15) 2.2%),
    
    linear-gradient(180deg, hsl(31,96%,55%)  0%, 
    hsl(31,95%,60%) 47%, 
    hsl(31,95%,61%) 50%,
    hsl(31,95%,60%)100%); */

		width: 100%;
		height: 100%;
		display: flex;
		flex: none;
		align-items: center;
		justify-content: center;
		transform: translateX(-100%);
		transition: all .4s ease;
	}
	
	.menu-wrap .menu > div > div {
		text-align: center;
		width: 100%;
		opacity: 0; 
		transition: opacity .4s ease;
	}

	.menu-wrap .menu > div > div > ul {
		display: block;
		width: 100%;
	}
	
	.menu-wrap .menu > div > div > ul > li {
		list-style: none;
		color: #fff;
		font-size: 1rem;
		padding: 1rem;
		/* border-bottom: 1px solid rgba(255,255,255, .5); */
	}


	@media (max-width: 600px) {
		.menu-wrap .menu > div > div > ul > li {
			padding: .7rem;
		}
	}
	
	.menu-wrap .menu > div > div > ul > li > a {
		display: block;
		/* color: inherit; */
		color: rgba(255,255,255,.9);
		/* color: #48535b; */
		/* color: rgba(0,0,0, .8); */
		text-transform: uppercase;
		font-size: .8rem;
		letter-spacing: 2px;
		font-weight: 400;
		text-shadow: 0px 1px 0px rgba(0,0,0,.25);
		text-decoration: none;
		transition: color .4s ease;
		/* border-bottom: 1px solid rgba(255,255,255, .25); */
		/* border-bottom: 1px solid rgba(72, 83, 91, .25); */
		transition: all .3s ease-in-out;
	}

	.menu-wrap .menu > div > div > ul > li > a:after {
		content: "";
		display: block;
		margin: 0 auto;
		margin-top: 5px;
		width: 20%;
		border-bottom: 2px solid rgba(249, 142, 29, 1);
		transition: all .3s ease-in-out;
	}

	.menu-wrap .menu > div > div > ul > li > a:hover:after {
		width: 50%;
	}
	
	.menu-wrap .menu > div > div > ul > li > a:hover {
		color: #fff;
	}

/* END OF MENU */

div#wrapper
	{
	width:100%;
	height:100%;
	display:table;

	background:#f2f2f2;

	font-family: "Helvetica Neue", HelveticaNeue, "TeX Gyre Heros", TeXGyreHeros, FreeSans, "Nimbus Sans L", "Liberation Sans", Arimo, Helvetica, Arial, sans-serif;
	}



div.header
	{
	height: 60px;
	display:table-row;

	background:#ffffff;

	z-index:9999;
	}

div.footer
	{
	height:38px;
	display:table-row;

	background:#ffffff;
	}



div.headerInner,
div.footerInner
	{
	float:left;
	position:relative;
	width:100%;
	height:30px;

	background:#262626;
	background:#ffffff;

	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	box-sizing:					border-box;

	padding:0 10px 0 10px;

	line-height:30px;
	color:#ffffff;
	color:#505569;
	}

	/* Sorting for new nav */
div.headerInner {
	height: 60px;
}

div.headerInner > div{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

div.headerInner > div div {
	width: 33%;
}

img#logoSafran
	{
	width: 200px;
	}

div.footerInner
	{
	height:38px;
	line-height:38px;

	/* background:url("/images/macrailLogo102x34.png") right 10px center / 102px 34px no-repeat, #404040; */
	}


div.footerLeft
	{
	float:left;
	position:relative;
	background:transparent;
	}

div.footerRight
	{
	float:right;
	position:relative;
	background:transparent;

	font-weight:bold;
	}



div.headerColumns
	{
	float:left;
	position:relative;
	width:33%;
	height:100%;

	background:transparent;

	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	box-sizing:					border-box;

	/* debug */
	/*border-width:1px;
	border-style:solid;
	border-color:#fff;*/
	}


div#headerLeft
	{
	/*padding:3px 0 3px 0;*/
	overflow:hidden;
	}

div#headerMiddle
	{
	text-align:center;
	overflow:hidden;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	background:transparent;
	}

div#headerRight
	{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 60px;
	/* float:right; */
	text-align:right;
	font-weight:normal;
	font-size:14px;
	overflow:hidden;
	}

	div#headerRight > p {
		margin-bottom: 0;
	}

div#headerRunningTotal
	{
	float:right;
	position:relative;
	background:transparent;
	text-align:right;
	}


img#activeHerdLogoHeader
	{
	float:left;
	position:relative;
	width:154px;
	height:21px;

	background:transparent;

	/*  center our img */
	left:50%;
	margin-left:-77px;

	margin-top:4px;
	margin-bottom:0px;
	}


@media screen and (max-width: 650px) {
	div.headerInner {
		height: 120px;
	}

	div.headerInner > div {
		flex-wrap: wrap;
	}

	div#headerLeft {
		padding: 0;
		width: 20%;
		order: 2;
	}

	div#headerMiddle {
		order: 1;
		width: 100%;
		justify-content: center;
		align-items: center;
	}

	div#headerRight {
		order: 3;
		width: 80%;
	}

}








/* content */
div.content
	{
	width:100%;
	height:calc(100% - 68px);
	display:table-row;
	position:absolute;

	background:transparent;

	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	box-sizing:					border-box;

	padding:10px 10px 10px 10px;
	}

div.listContent
	{
	width:100%;
	height:calc(100% - 68px);
	display:table-row;
	position:absolute;

	background:transparent;

	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	box-sizing:					border-box;

	padding:0px 0px 0px 0px;
	}


/* 
###################################################
home
###################################################
*/


/* h2 (title) */
button.homeButton h2
	{
	margin-top:-7px;
	margin-bottom:15px;

	border-bottom-style:solid;
	border-bottom-width:1px;
	border-bottom-color:transparent;

	padding-bottom:3px;

	font-size:105%;

	color:#404040;
	}

/* h3 (number) */
button.homeButton h3.homeNumber
	{
	font-size:340%;

	color:#ffffff;
	}

div.homeContentSection
	{
	width:100%;
	height:100%;

	background:transparent;
	}


/* 
#################
columns 
#################
*/
div#homeColumn01
	{
	background:transparent;

	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	box-sizing:					border-box;
	}

div#homeColumn02
	{
	background:transparent;

	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	box-sizing:					border-box;

	padding:0px;
	}

div#homeColumn03
	{
	background:transparent;

	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	box-sizing:					border-box;
	}



/* 
#################
responsive
#################
*/


/*
@media all and (orientation:portrait) { � }
@media all and (orientation:landscape) { � }

*/


/* this styles for portrait mobile */
/*@media only screen and (max-width: 480px)*/
@media all and (orientation:portrait) 
	{
	.col 
		{ 
		margin: 10px 0 0px 0;
		}

	.col:first-child
		{ 
		margin: 0px 0 0px 0;
		}

	div#homeColumn01
		{
		display:table-row;
		height:calc(25% - 5px);
		background:transparent;
		}

	div#homeColumn02
		{
		display:table-row;
		position:relative;
		float:left;
		height:calc(50% - 10px);
		background:transparent;

		padding:0px;
		}

	div#homeColumn03
		{
		display:table-row;
		height:calc(25% - 5px);
		background:transparent;
		}

	}


/* this styles for landscape and bigger mobiles */
/*@media only screen and (min-width: 480px)*/
@media all and (orientation:landscape)
	{

	div.homeContent
		{
		padding:10px 10px 10px 10px;
		}

	div#homeColumn01
		{
		display:table-cell;
		height:100%;

		}

	div#homeColumn02
		{
		display:table-cell;
		height:100%;
		}

	div#homeColumn03
		{
		display:table-cell;
		height:100%;
		}
	}


/* 
###################################################
list pages 
###################################################
*/

div.listHeader
	{
	float:left;
	position:relative;

	width:100%;
	height:20px;
	line-height:20px;

	/*background:#666666;*/
	/*color:#404040;*/
	}






div.listHeader div.listLeft,
div.listHeader div.listRight
	{
	text-align:center;
	}

div.listWrap
	{
	float:left;
	position:relative;
	display:block;
	overflow:auto;

	width:100%;
	height:calc(100% - 20px);

	background:transparent;
	}

div.listWrap div.listLeft,
div.listWrap div.listRight
	{
	padding:10px;
	}

div.listLeft
	{
	float:left;
	position:relative;

	width:50%;
	height:100%;

	background:transparent;

	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	box-sizing:					border-box;

	text-align:center;
	}

div.listRight
	{
	float:left;
	position:relative;

	width:50%;
	height:100%;

	background:transparent;

	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	box-sizing:					border-box;

	text-align:center;
	}

span.listColumnWrap
	{
	display:inline-block;
	height:20px;
	background:lime;

	margin:0px;

	clear:both;
	}

span.listColumn
	{
	display:inline-block;

	height:20px;

	background:#e6e6e6;
	text-align:left;
	overflow:hidden;

	margin-right:1px;

	padding:0 3px 0 3px;
	}

span.nameOfPerson
	{
	width:200px;
	font-weight:bold;
	}


/* extra reports */

#tunnelsStationaryList,
#tunnelsNotUpdatingList
	{
	text-align:left;
	}

#tunnelsStationaryList div.listItem,
#tunnelsNotUpdatingList div.listItem
	{
	float:left;
	position:relative;
	display:block;
	width:362px;
	height:22px;

	background:transparent;
	clear:both;
	
	left:50%;
	margin-left:-181px;
	}