/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	body {
		font-size: 0.9em;
	}
	
	/* The header Div */
	.header {
		height: 50px;
	}
	

	.header img {
		height: 50px;
	}
	
	/* The logon Box */
	div.logonPrompt {
		width: 95%;
	}
	
	div.logonPrompt button {
		margin-right: 5em;
	}
	
	img.indexLogo {
		width: 50%;
	}
	
	/* General class for hiding elements not needed on mobile screens */
	.hideOnMobile {
		display: none;
	}
	
	/* Put spacing between buttons */
	button {
		margin-top: 1em;
		margin-left: 2em;
	}
	
	/* Dijit Dialog CLose Icon */	
	.tundra .dijitDialogCloseIcon {
		width: 0px;
	}
		
	.tundra .dijitDialogCloseIcon::before {
		content: 'Close';
		position: absolute;
	    vertical-align: middle;
	    right: 3px;
	    top: 2px;
	    height: 15px;
		width: 30px;
		color: grey;
		font-weight: bold;
	}
	
	.tundra .dijitDialogCloseIcon:hover::before {
		color: black;
	}
	
	
	/* Left Menu */
	.leftMenu {
		position: relative;
		width: 0px;
		top: 0px;
		right: 0px;
	}

	/* Left Menu */
	.leftMenu a {
		width: 220px;
	}
	
	.leftMenuContent {
		position: fixed;
		width: 35px;
		height: 35px;
		top: 0px;
		right: 0px;		
		overflow: hidden;
  		background-color: #ffffff;
  		z-index: 999;
	}

	.leftMenuContent div.itemList{
		position: absolute;
		top: 35px;
		right: 0px;
		bottom: 0px;
		
	}
	
	.leftMenuContent.activated {
	   height: 100%;
	   width: 220px;
	 }
	
	.leftMenuContent.activated div.itemList{
		height: 80%;
		overflow-y: auto;
		overflow-x: hidden;
		
	}
 
	.leftMenu div.barContainer {
		position: absolute;
		top: 0px;
		right: 0px;
	}
	
	.leftMenu div.bar {
		display: block;
	    width: 35px;
	    height: 5px;
	    background-color: black;
	    margin: 6px 0;		
	}
	
	/* The main content container */
	.mainContent {
		position: fixed;
		top: 77px;
		left: 0px;
		bottom: 51px;
		right: 0px;
		overflow: auto;
		padding-left: 10px;
		padding-top: 5px;
	}
	
	table.list {
		width: 100%;
	}
	table.list thead {
	    border: none;
	    clip: rect(0 0 0 0);
	    height: 1px;
	    margin: -1px;
	    overflow: hidden;
	    padding: 0;
	    position: absolute;
	    width: 1px;
	  }
	  
	  table.list tr {
	    border-bottom: 3px solid #ddd;
	    display: block;
	  }
	  
	  table.list td {
	    border-bottom: 1px solid #ddd;
	    display: block;
	    text-align: right;
	    min-width: 50%;
	    min-height: 1em;
	  }
	  
	  table.list td::before {
	    content: attr(data-label);
	    float: left;
	    min-width: 50%;
	    text-align: left;
	    font-weight: bold;
	  }
	  
	  table.list td span.debit {
	  	color: black;
	  }
	  
	  table.list td span.debit::after {
	  	content: "-";
	  }
	  
	  table.list td span.credit {
	  	color: green;
	  }
	  
	  table.list td:empty {
	  	display: none;
	  }
	  
	  table.list td span.credit::after {
	  	content: "-";
	  }
	  
	  table.list td.firstRow {
	  	display: none;
	  }
	  
	  table.list::after {
	  	content: '*** End of list ***';
	  	font-weight: bold;
	  	
	  }
	  
	  input {
	  	width: 90%;
	  }
	  
	  /* Table on Detail type pages */
	table.detail {
		width: 100%;
	}
	table.detail thead {
	    border: none;
	    clip: rect(0 0 0 0);
	    height: 1px;
	    margin: -1px;
	    overflow: hidden;
	    padding: 0;
	    position: absolute;
	    width: 1px;
	  }
	  
	  table.detail tr {
	    margin-bottom: 0.5em;
	  }

	  table.detail tr:nth-child(odd) {
	    background-color: #eeeeee;
	  }
	  
	  table.detail td {
	    width: 50%;
	    min-height: 1em;
	  }
	  
	  table.detail td:nth-child(even) {
	 	 text-align: right;
	  }
	  
	.header h1 {
		font-size: 1em;
		max-width: 150px;
		white-space: nowrap; 
	    overflow: hidden;
	    text-overflow: ellipsis;
	}
	
	.navigation {
		padding-left: 1em;
	}
} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
}