* {
	
	margin: 0px;
}

html, body, td {
	
	background-color: #FFF;
    color: #000;
    
    font-family: Palatino, Georgia, Serif;
}

body {
	
	margin-top: 0px;
}

td {
	
	padding: 15px;
}

body, html {
	
	height: 100%;
	margin-bottom: 0px;
}

@media screen and (orientation: portrait) {

	.wrapper {
		
		min-height: 100%;
		height: auto !important;
		height: 100%;
		margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
		font-size: 32px;
	}

	.subwrapper {
		
		padding: 30px;
	}

	.footer, .push {
		
		height: 50px; /* .push must be the same height as .footer */
	}

	.footer {
		
		color: #999;
		font-weight: bold;
		font-size: 13px;
		margin-left: 55px;
		clear: both;
	}

	input {

		font-size:  28px;
		padding:  .2em;
	}

	.footer a {
		
		color: #999;
	}

	a {
		
		color: #000;
		text-decoration: none;
	}

	a:hover {
		
		color: #9B1115;
	}

	img {
		
		border: 0px;
		max-width:  80vw;
		max-height:  80vh;
	}

	.BreadCrumb {
		
		color: #BBB;
		font-size:  .75em;
		padding:  1em 0;
	}

	.BreadCrumb a {
		
		color: #BBB; 
	}

	.BreadCrumb a:hover {
		

		color: #9B1115;
	}

	.EditLink {
		
		color: #32CD32;
	}

	.Arrows {
		
		padding: 0px;
	}

	.Arrows td {
		
		padding: 0px;
	}

	.BigBox {
		
		border: 0px;
	}

	.SmallBox {
		display:  flex;
		flex-wrap:  wrap;
		width: 90vw;
		padding: 1em 0;
	}

	.left-column {
		width:  90vw;
		padding: 0 1em; 
		line-height: 1.6em;
	}

	.right-column {
		width:  90vw;
		padding:  1em;
	}

	.PrevNext {
		
		font-size: 1em;
		padding: 5px;
	}

	.DeleteLink {
		
		color: #FF0000;
	}

	.Error {
		
		color: #FF0000;
	}

	.DisplayImage {
		
		border: 0;
		max-height: 500px;
	}

	.PhotoDetails {
		
		font-size: 1em;
		padding-top:  1em;
		padding-bottom: 2em;
	}

	.Biography {
		
		font-size: 1em;
		max-width:  30em;
		line-height: 1.2em;
	}


	.Instructions {
		
		color: #CCC;
		font-weight: bold;
	}

	.MoreInfo {
		
		font-size: 1em;
		line-height: 1.2em;
	}

	.Test {
		
	 position: absolute;
	 bottom: 0px;		
	}

	.LowerLeft {
		
		width: 90vw;
		height: 100%;
		margin-top:  2em;
		margin-bottom: 2.5em;
	}

	.PhotoDetails, .Photo {
		
		position: relative;
	}

	.Logo {
		
		height: 75px;
		padding: 10px;
	}

	.AdminBox {
		
		border: 0;
		font-size: 1em;
	}

	.AdminBox a:hover {
		
		color: #FFCC33;
	}

	.MainContent {
		
		height: 100%;
		font-size: 1em;
	}

	.ArtistsList {
		padding: 0;
		max-width:  80vw;
		display: flex;
	    flex-direction: column;
	    flex-wrap: nowrap;
	}

	.ArtistsList li {

		list-style-type:  none;
		width:  15em;
		display:  inline-block;
		height:  1.2em;
		margin-right:  2em;
	}

	.FilesList {
		
		font-size: 1em;
	}

	.ManageList td {
		
		text-align: left;
		padding: 2px;
		font-size: 1em;
	}

	.MainContent {
		
		vertical-align: top;
	}

}


@media screen and (orientation: landscape) {

	.wrapper {
		
		min-height: 100%;
		height: auto !important;
		height: 100%;
		margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
	}

	.subwrapper {
		
		padding: 30px;
	}

	.footer, .push {
		
		height: 50px; /* .push must be the same height as .footer */
	}

	.footer {
		
		color: #999;
		font-weight: bold;
		font-size: 1em;
		margin-left: 4em;
		clear: both;
	}

	.footer a {
		
		color: #999;
	}

	a {
		
		color: #000;
		text-decoration: none;
	}

	a:hover {
		
		color: #9B1115;
	}

	img {
		
		border: 0px;
		max-width:  100%;
		max-height:  80vh;
	}

	.BreadCrumb {
		
		position: relative;
		top: -44px;
		left:  50px;
		color: #BBB;
		font-size: 1em;
	}

	.left-column {
		width:  20vw;
		padding: 0 1em; 
		line-height: 1.6em;
	}

	.right-column {
		width:  70vw;
		padding:  1em;
	}

	input {

		font-size:  1.2em;
		padding:  .2em;
	}

	.BreadCrumb a {
		
		color: #BBB; 
	}

	.BreadCrumb a:hover {
		
		color: #9B1115;
	}

	.EditLink {
		
		color: #32CD32;
	}

	.Arrows {
		
		padding: 0px;
	}

	.Arrows td {
		
		padding: 0px;
	}

	.BigBox {
		
		border: 0px;
	}

	.SmallBox {
		
		display: flex;
		align-items: stretch;
		border: 0px dotted;
		padding: 1em;
		min-height:  80vh;
	}

	.PrevNext {
		
		font-size: 1em;
		padding: 5px;
	}

	.DeleteLink {
		
		color: #FF0000;
	}

	.Error {
		
		color: #FF0000;
	}

	.DisplayImage {
		
		border: 0;
		max-height: 500px;
	}

	.PhotoDetails {
		
		font-size: 1em;
		padding-top:  1em;
		padding-bottom: 2em;
	}

	.Biography {
		
		font-size: .75em;
		width: auto;
		line-height: 1.2em;
		padding-right:  1em;
	}


	.Instructions {
		
		color: #CCC;
		font-weight: bold;
	}

	.MoreInfo {
		
		font-size: 1em;
		line-height: 15px;
	}

	.Test {
		
	 position: absolute;
	 bottom: 0px;		
	}

	.LowerLeft {
		
		position: relative;
		top: 75px;
		width: 200px;
		line-height: 18px;
		height: 100%;
		margin-bottom: 50px;
	}

	.PhotoDetails, .Photo {
		
		position: relative;
	}

	.Logo {
		
		height: 75px;
		padding: 10px;
	}

	.AdminBox {
		
		border: 0;
		font-size: 1em;
	}

	.AdminBox a:hover {
		
		color: #FFCC33;
	}

	.MainContent {
		
		height: 100%;
		font-size: 1em;
	}

	.ArtistsList {
		padding: 0;
		height:  80vh;
		min-height:  80vh;
		max-height:  80vh;
		display: flex;
	    flex-direction: column;
	    flex-wrap: wrap;
	}

	.ArtistsList li {

		list-style-type:  none;
		width:  15em;
		display:  inline-block;
		height:  1.2em;
		margin-right:  2em;
	}

	.FilesList {
		
		font-size: 1em;
	}

	.ManageList td {
		
		text-align: left;
		padding: 2px;
		font-size: 1em;
	}

	.MainContent td {
		
		vertical-align: top;
	}
}