﻿body {
	font-size:x-large; font-family: 'Jura', sans-serif; color: black; font-weight:normal; font-size:medium; min-height:591px; 
	min-width:300px; margin-left:0px; margin-right:0px; margin-top:0px; background-image:none;
}

a { font-family: 'Jura', sans-serif; font-size:medium; font-size:small; font-weight:bold; text-decoration:none; color:black; 
	padding-left:4px; padding-right:4px; padding-top:4px; padding-bottom:4px; }
a.link { 
	font-family: 'Jura', sans-serif; font-weight:bold; text-decoration:none; color:black; padding-left:4px; 
	padding-right:4px; padding-top:4px; padding-bottom:4px; text-decoration:underline;
}
a.menu { font-size:large; text-decoration:none; color:#E0E0E0; margin-left:0px; margin-right:8px; margin-top:0px; font-size:medium; }
a.active { font-size:large; text-decoration:none; color:white; margin-left:0px; margin-right:8px; margin-top:0px; font-size:medium; font-weight:bold;	} 
a.menusuper {
	color:white; margin-left:10px; margin-right:10px; margin-top:0px; padding-left:1px; padding-right:1px; font-size:medium; text-align:right; 
	font-weight:bold; text-decoration:underline;
}

div.logo {
	font-family:"Caudex"; height:136px; background-image:url('images/FromAboveCrop2.png'); color:white;
	position:fixed; vertical-align:top; width:100%;
}
div.menusuper { text-align:right; top:0px; margin-top:-124px; margin-bottom:20px; margin-left:10px; margin-right:-10px; font-size:xx-large; }
div.footer { background-color:#009900; height:70px; font-size:small; text-align:center; bottom:0px; position:fixed; vertical-align:bottom; width:100%; margin-left:0px; }
div.home { text-align:center; font-size:medium; }


figcaption.small { font-size:small; }

li.menusuper { background-color:#005500; display:inline; padding-bottom:0px; padding-top:0px; margin-right:0px; margin-left:0px; }

nav.menu {
	font-size:medium; text-decoration:none; background-color:#009900;
	color:white; margin-left:-20px; margin-right:-20px; margin-top:8px; font-size:medium; text-align:center; 
}

p { margin-left:10px;}
p.footer { text-align:center;  color:white; }
p.home-title { text-align:center; font-size:x-large; font-weight:bold; margin-top:0px; }
p.home { text-align:center; font-size:medium; font-weight:bold; }


table { margin-left:10px;} 
table.concerts { margin-left:10px; border-spacing:0px; } 
th.heading { font-weight:bold; padding-left:12px; margin-top:12px; margin-bottom:2px; padding-top:12px; padding-bottom:2px; border-bottom-style:solid; border-color:black; }
td { padding-left:10px; padding-right:10px; padding-top:4px; padding-bottom:4px; text-align:left; }
td.heading { font-weight:bold; margin-top:12px; margin-bottom:12px; padding-top:12px; padding-bottom:12px; border-bottom-style:solid; border-color:black; }
td.concerts2 { font-weight:normal; vertical-align:top; margin-top:0px; margin-bottom:2px; padding-top:0px; padding-bottom:2px; border-bottom-style:solid; border-color:black; }
td.project { margin:1px; }
td.equipment { font-size:x-small; }
tr { margin-left:10px; margin-right:10px; }
tr.heading { margin-left:10px; margin-right:10px; margin-bottom:10px; padding-bottom:10px; }
tr.spacer { font-size:xx-small; border-bottom-style:solid; border-color:silver; }
tr.center { text-align:center; }
tr.concerts { margin-left:10px; margin-right:10px; padding-top:0px; padding-bottom:2px; margin-top:0px; margin-bottom:0px; }
td.concerts { font-weight:normal; vertical-align:top; margin-top:2px; margin-bottom:0px; padding-top:2px; padding-bottom:10px; 
	border-bottom-style:solid; border-color:black; justify-content: start; }
img.concert { width:70px; margin: 0px; padding: 0px; justify-content: center; }
button.concert { width:74px; height:34px; margin: 0px; padding: 0px; justify-content: start; border: 2px silver outset; }
button.detail { width:80px; margin: 0px; padding-left: 2px; padding-right: 2px; padding-top: 5px; padding-bottom: 5px; 
	justify-content: start; border: 2px silver outset; }
input.detail { opacity: 0; position: absolute; z-index: 12; top: 0; left: 0; }
/*input.detail { visibility:visible; }*/
/*input.detail { opacity: 0; }*/

span.menusuper { background-color:#005500; height:20px; margin-top:-20px; margin-bottom:0px; margin-left:0px; margin-right:0px; 
	padding-top:0px; padding-bottom:0px; }

ul { font-size:x-small; font-weight:bold; margin-left:-20px;}
li { font-size:x-small; font-weight:normal;}
p.features { font-size:10pt; font-weight:normal;}
img.project { width:150px; }
img.projectImage { object-position:left top; width: 100%; }
img.staff { width:150px; top:5pt; }
img.home { width:300px; margin-left:20px; }
figcaption.project { font-size:xx-small; margin-left:8px; }
figcaption.projectImage { font-size:xx-small; margin-left:8px; }
div.project { font-size:small; }
div.staff { font-size:x-small; }
div.ducker { margin-top:180px; }
div.home-title { text-align:center; font-size:x-small; }
a.project { font-size:x-small; }
a.staff { font-size:xx-small; margin-left:-4px; }
button.project {
	font-size: small;
	border: 2px silver outset;
	margin: 4px;
	padding: 4px 4px 4px 4px;
	
}
button.cancel { width:100px; }
button.arrow { width:50px; }

/* Bootstrap 4 breakpoints.                                 */
/* All the styles defined above are included.               */
/* Extra small devices (portrait phones, less than 544px)   */
@media (min-width: 300px) {

	p.heading {
		text-align: center;
		font-size: large;
		font-weight: bold;
		margin-top: 180px;
	}
  div.ducker { margin-top:158px; }
  figcaption.project { font-size:xx-small; margin-left:8px; }
  figcaption.projectImage { font-size:xx-small; margin-left:128px; }
  img.projectImage { width:100%; }
}

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 544px) {
	ul {
		font-size: x-small;
	}

	li {
		font-size: x-small;
	}

	p.heading {
		text-align: center;
		font-size: x-large;
		font-weight: bold;
		margin-top: 0px;
	}

	p.features {
		font-size: x-small;
	}

	p.home {
		text-align: center;
		font-size: large;
		font-weight: bold;
		margin-top: 0px;
	}

	img.project {
		width: 250px;
	}

	img.projectImage {
		object-position: left top;
		width: 100%;
	}

	img.staff {
		width: 250px;
	}

	img.home {
		width: 260px;
	}

	figcaption.project {
		font-size: xx-small;
		margin-left: 8px;
	}

	figcaption.projectImage {
		font-size: xx-small;
		margin-left: 148px;
	}

	td.project {
		margin: 2px;
	}

	td.equipment {
		font-size: small;
	}

	div.project {
		font-size: medium;
	}

	div.staff {
		font-size: medium;
	}

	div.ducker {
		margin-top: 158px;
	}

	div.home {
		text-align: center;
		margin-top: 0px;
		font-size: medium;
	}

	a.project {
		font-size: x-small;
	}

	a.staff {
		font-size: small;
		margin-left: -4px;
	}

	button.project {
		height: 40px;
		font-size: small;
		margin: 4px;
		padding: 4px 4px 4px 4px;
	}

	button.cancel {
		width: 60px;
	}

	button.arrow {
		width: 30px;
	}
}
 
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
  ul {font-size:small;}
  li {font-size:small;}
	p.heading {
		text-align: center;
		font-size: x-large;
		font-weight: bold;
		margin-top: 160px;
	}
  p.features {font-size:small;}
  p.home { text-align:center; font-size:x-large; font-weight:bold; margin-top:0px; }
  img.project { width:350px; }
	img.projectImage {
		object-position: left top;
		width: 100%;
	}
  img.staff { width:350px; }
  img.home { width:400px; }
  figcaption.project { font-size:x-small; margin-left:8px; }
  figcaption.projectImage { font-size:xx-small; margin-left:170px; }
  td.project { margin:4px; }
  td.equipment { font-size:medium; }
  div.project { font-size:medium; }
  div.staff { font-size:medium; }
  div.ducker { margin-top:158px; }
  div.home { text-align:center; margin-top:0px; font-size:large; }
  a.project { font-size:small; }
  a.staff { font-size:small; margin-left:-4px; }
	button.project {
		height: 45px;
		font-size: medium;
		margin: 4px;
		padding: 4px 4px 4px 4px;
	}
  button.cancel { width:70px; }
  button.arrow { width:35px; }
}
 
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  ul {font-size:medium;}
  li {font-size:medium;}
  img.project { width:500px; }
	img.projectImage {
		object-position: left top;
		width: 100%;
	}
  img.staff { width:500px; }
  img.home { width:400px; }
	p.heading {
		text-align: center;
		font-size: x-large;
		font-weight: bold;
		margin-top: 160px;
	}
  p.features {font-size:medium;}
  p.home { text-align:center; font-size:x-large; font-weight:bold; margin-top:0px; }
  figcaption.project { font-size:small; margin-left:8px; }
  figcaption.projectImage { font-size:xx-small; margin-left:190px; }
  td.project { margin:5px; }
  td.equipment { font-size:large; }
  div.project { font-size:medium; }
  div.staff { font-size:medium; }
  div.ducker { margin-top:158px; }
  div.home { text-align:center; margin-top:0px; font-size:large; }
  a.project { font-size:medium; }
  a.staff{ font-size:medium; margin-left:-4px; }
	button.project {
		height: 50px;
		font-size: large;
		margin: 4px;
		padding: 4px 4px 4px 4px;
	}
  button.cancel { width:80px; }
  button.arrow { width:40px; }
}
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	img.projectImage {
		object-position: left top;
		width: 100%;
	}  
  img.home { width:400px; }
	p.heading {
		text-align: center;
		font-size: x-large;
		font-weight: bold;
		margin-top: 0px;
	}
  div.project { font-size:large; }
  div.home { font-size:large; }
}


