/* ---------------------------------------------------------------------------- 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%;
	}

*, *::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;
	}

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:30px;
	display:table-row;

	background:#ffffff;
	}

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

	background:#ffffff;
	}


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

	background:#262626;

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

	padding:0 10px 0 10px;

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

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;
	}

div#headerRight
	{
	float:right;
	text-align:right;
	font-weight:normal;
	font-size:14px;
	overflow:hidden;
	}

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;
	}











/* 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;
	}