/*Thanks Steven Bradley for the fluid layouts :)*/

body {
    margin:0
	}

/* layouts */
	
#header	{
		padding-top:5%;
		text-align:center;
		background-color:#ffffcc;
		width:100%;
		height:auto;
		line-height:3em;
		padding-top:1%;
		padding-bottom:1%;
		text-align:center;
		border-bottom-width:8px;		
		border-bottom-style:solid;
		border-bottom-color:#330000;
		}

#content {
		float:right;
		width:100%;
		height:500px;
		text-align:center;
		background-color:#00a651;
		padding-top:20%;
		}

#content-2 	{
			display:block;
			width:80%;
			height:550px;
			margin-left:10%;
			margin-right:4%;
			text-align:center;
			background-image:url(../images/yellow-brick-road.jpg);
			margin-top:2%;
			margin-bottom:7%;
			}
			
#dorothy-portrait{
				position:absolute;
				left:0;
				margin-top:-4%;
				padding-left:13%;
				}

#oz-portrait{
			position:absolute;
			left:0;
			margin-left:30%;
			margin-top:-4%;			
			}
			
#scarecrow-portrait	{
					position:absolute;
					right:0;
					padding-right:30%;
					margin-top:-3%;
					}
			
#tinman-portrait{
				position:absolute;
				right:0;
				margin-top:-4%;
				margin-left:1%;
				padding-right:14%;
				}
			
			
#logo	{
		position:relative;
		margin-right:1%;
		margin-left:15%;
		margin-top:-20%;
		padding-right:2%;
		padding-top:15%;
		
		}			
		
			
#back-home-portrait{
					position:absolute;
					left:0;
					margin-top:1%;
					margin-left:2%;
					}

#gatekeeper-portrait{
					position:absolute;
					right:0;
					margin-right:35%;
					margin-top:2.5%;
					}					
			
#lion-portrait	{
				position:absolute;
				right:0;
				padding-right:3%;
				margin-top:1.5%;
				}			
		
#footer {
		clear:both;
		padding-top:1%;
		padding-bottom:1%;
		text-align:center;
		background-color:#ffffcc;
		border-top-width:5px;
		border-top-style:solid;
		border-top-color:#330000;
		}
		
/*typography*/

/* Generated by Font Squirrel (https://www.fontsquirrel.com) on July 23, 2016 */

@font-face {
			font-family: 'tanglewood_tales_nfregular';
			src: url('tanglewoodtalesnf-webfont.woff2') format('woff2'),
			url('tanglewoodtalesnf-webfont.woff') format('woff');
			font-weight: normal;
			font-style: normal;
			}

@font-face {
			font-family: 'tanglewood_tales_nfregular';
			src: url('tanglewoodtalesnf-webfont.woff2') format('woff2'),
			url('tanglewoodtalesnf-webfont.woff') format('woff');
			font-weight: normal;
			font-style: normal;
			}

h1, h2, h3, h4, h5, h6	{
						font-family:'Tanglewood Tales NF', 'Hobby Horse NF', Campanile, Columbus;
						font-weight:bold;
						color:#330000;
						text-decoration:none;
						}
			
h1		{
		font-size:3.5em;
		text-decoration:none;
		}
h2		{
		font-size:2.5em;
		}
h3		{
		font-weight:bold;
		font-size:1.5em;
		}
h4		{
		font-weight:bold;
		font-size:1.2em;
		}
		
span		{
		font-family:'Tanglewood Tales NF', 'Hobby Horse NF','Arial Narrow', Campanile, Columbus;	
		font-weight:bold;
		font-size:1.2em;
		}		
		
body	, p		{
			font-family:'Arial Narrow', Arial, Sans-Serif;
			color:#330000;
			text-decoration:none;
			line-height:1.2em;
			}
			
#content-2 p	{
			color:#ffffff;
			font-weight:bold;
			font-size:1.2em;
			text-align:center;
			}
		
/* hyperlinks*/

a:link	{
		text-decoration:none;
		color:#330000;
		}
a:visited	{
			color:#cc6666;
			}
a:hover	{
		color:#00a651;
		}
a:active	{
			color:#ffffff;
			}
		
img {
    max-width:100%;
    height:auto;
	}