@font-face {
  font-family: Ubuntu;
  src: url(UbuntuFont/Ubuntu-Regular.ttf);
}

@font-face {
  font-family: Ubuntu;
  src: url(UbuntuFont/Ubuntu-Bold.ttf);
  font-weight: bold;
}

@font-face {
  font-family: Ubuntu;
  src: url(UbuntuFont/Ubuntu-Italic.ttf);
  font-style: italic;
}

@font-face {
  font-family: Ubuntu;
  src: url(UbuntuFont/Ubuntu-BoldItalic.ttf);
  font-weight: bold;
  font-style: italic;
}

#container {
	display:grid;
	grid-template-columns: 20% auto 20%;
	grid-template-rows: 150px auto auto auto;
}

body {
	margin:0;
	padding:0;
	font-family:Ubuntu;
    background-image:url('img/LucidGrass.png');
}

header {
	grid-row: 1;
	grid-column: 2;
	background-color: rgb(131,58,180);
    background-image: url('img/SpiritualistCentral.png');
    background-repeat:no-repeat;
	/*background: linear-gradient(0deg, rgba(131,58,180,1) 0%, rgba(226,141,232,1) 100%);*/
	color:white;
	padding:1%;
	text-align:right;
}

header #TagLine {
    text-shadow:1px 1px #777;
}

#mainnav {
	grid-row: 2;
	grid-column: 2;
	background: rgba(153,204,120,1);
	background: linear-gradient(0deg, rgba(153,204,120,1) 0%, rgba(204,255,170,1) 100%);
	border-top:1px #aaa solid;
}

#mainnav #menucontent {
	display:table;
}		

#mainnav #menucontent ul {
	display: table-row;
}

#mainnav #menucontent ul li {
	display: table-cell;
	text-align:center;
	width:150px;
}

#mainnav #menucontent ul li a {
	color:#222;
	display:block;
	text-decoration:none;
	align-items:center;
	margin:0 5px 0;
	padding:5px;
	font-weight:bold;
}

#mainnav #menucontent ul li a:hover {
	background-color: rgba(204,255,170,1);
}

#middle {
	display:grid;
	grid-row: 3;
	grid-column: 2;
	grid-template-columns: 20% 80%;
	grid-template-rows: auto;
}

main {
	grid-row: 1;
	grid-column: 2;
    background-color:#fff;
}

section {
	padding-left:1%;
	padding-right:1%;
}

h1, h2 {
	margin: 10px 0 10px 0;
}

#subnav {
	grid-row: 1;
	grid-column: 1;
    background-color:#fff;
}

#subnav ul {
	padding:0;
	margin: 10px 4% 4% 4%;
	border:2px solid #ddd;
	border-radius:5px;
}

#subnav ul li {
	display:block;
	width:auto;
	background-color:#bbb;
	background: linear-gradient(0deg, #ddd 0%, #bbb 100%);
}

#subnav ul li a {
	display:block;
	text-decoration:none;
	font-weight:bold;
	text-align:center;
	padding:5px;
	color:#000;
}

#subnav ul li a:hover {
	background-color:#ddd;
}

footer {
	grid-row: 4;
	grid-column: 2;
	background: rgb(131,58,180);
	/*background: linear-gradient(0deg, rgba(226,141,232,1) 0%, rgba(131,58,180,1) 100%);*/
	color:white;
	padding:1%;
	text-align:left;
	font-style:italic;
}

@media screen and (min-width: 1334px) {
	#menu {
		display:none;
	}
}

@media screen and (max-width: 1333px) {
	#container {
		grid-template-columns: 0% auto 0%;
        grid-template-rows: 100px auto auto auto;
	}

    header {
        background-image: url('img/SpiritualistCentralSmall.png');
    }

    header #TagLine {
        display:block;
        padding-top:75px;
    }
	
	#menu {
		text-align:center;
		padding:5px 0 5px 0;
		font-weight:bold;
		cursor:pointer;
	}
	
	#mainnav {
		height:30px;
		overflow:hidden;
	}
	
	#mainnav:hover, nav:active, nav:focus {
		height:auto;
		overflow: visible;
	}
	
	#mainnav #menucontent {
		display:block;
	}		

	#mainnav #menucontent ul {
		display: block;
		padding:0;
		margin:0;
		border-top:1px dashed #fff;
	}

	#mainnav #menucontent ul li {
		display: block;
		width:auto;
	}

	#middle {
		grid-template-columns: auto;
		grid-template-rows: auto auto;
	}
	
	main {
		grid-row: 1;
		grid-column: 1;
	}

	#subnav {
		grid-row: 2;
		grid-column: 1;
	}
	
	footer {
		text-align: center;
	}
}