@charset "UTF-8";
* {font-size: 10px; margin:0; border:none; padding:0;}
body {
/*	font-size: 1.4em;*/
	font-family: Enriqueta;
	background: url('imgs/foggyTreesBG.png') fixed center 20% no-repeat #000000;
	margin: 0;
	padding: 0;
	color: #ffffff;
}

@font-face {
    font-family: 'Enriqueta';
    font-style: normal;
    font-weight: 400;
    src: local('Enriqueta Regular'), local('Enriqueta-Regular'), url("//static.parastorage.com/tag-bundler/api/v1/fonts-cache/googlefont/woff2/s/enriqueta/v9/goksH6L7AUFrRvV44HVjQkqisv5Io53K.woff2") format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    font-display: swap;
    }



/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0;
	margin: 0;
}
 h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	  /*removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
}
a img { 
	border: none;
}

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a {font-size:inherit;}
a:link {
	color: #fee;
	text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
	color: #fcc;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
}

/* ~~this fixed width container surrounds the other divs~~ */
.container {
	min-height:60em;
	background: rgba(0, 0, 0, 0.5);
    padding:4em;
	margin: 2em auto; /* the auto value on the sides, coupled with the width, centers the layout */
}

/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
header {
	background: url(imgs/MiaLogoTypeAuth.png) 55% no-repeat rgba(0, 0, 0, 0.75);
	height:14em;
    margin-top:4em;
}
header h1 {height:3.75em;text-indent:-500em;}
.authorPic {
	float: left;
	padding-right: 0.8em;
	margin-top:-2em;
	width:16.2em;
	height:22em;
}

p {
	font-size:1.4em;
	padding:0.5em 1em;
	width:30em;
	line-height:1.8em;
}
p.sig {
    font-family:Mr Dafoe, cursive;
    font-size:3em;
    margin-left:2em;
    color:#e33;
}

dt, dd {width:30em;}

/* ~~ Media Calls ~~ */
	@media screen and (max-width : 1027px){
		.container{width:76em;}
		.sidebar1{width:27em;}
		.content{width:46em;margin-left:1em;}
		header {background-size:40em;}
		.authorPic{margin-left:5%;}
		dl.accolades dd {width:29em;}
	}

	@media screen and (max-width : 820px){ 
		.container{width:50em;}
		.sidebar1{width:48em;}
		.content{width:48em;margin-left:0em;margin-top:2em;}
		header {background-size:35em;}
		.authorPic{margin-left:5%;}
		dl.accolades dd {width:30em;}
		ul li#utop{display:none;}
	}

	@media screen and (max-width : 716px){ 
		.container{width:50em;}
		.sidebar1{width:48em;}
		.content{width:48em;margin-left:0em;margin-top:2em;}
		header {background: url(imgs/MiaLogoTypeAuth.png) 85% no-repeat rgba(0, 0, 0, 0.75);background-size:32em;}
		.authorPic{margin-left:2%;margin-top:0%;width:10em;height:auto;}
		dl.accolades dd {width:30em;}
		ul li#utop{display:none;}
	}

	@media screen and (max-width : 579px){ 
		.container{width:34em;}
		.sidebar1{width:30em;}
		.content{width:30em;margin-left:0em;margin-top:2em;}
		header {background: url(imgs/MiaLogoTypeAuth.png) 60% no-repeat rgba(0, 0, 0, 0.75);background-size:22em;}
		.authorPic{margin-left:2%;margin-top:5%;width:8em;height:auto;}
		dl.accolades dd {width:18em;}
		dt, dd {width:18em;}
		ul li#utop{display:none;}
	}

	@media screen and (min-width : 1028px){  /* preferred behavior */
		.container{width:84em;}
		.sidebar1{width:30em;}
		.content{width:50em;margin-left:2em;}
		header {background-size:50em;}
		.authorPic{margin-left:12%;}
		dl.accolades dd {width:32em;}

	}


	/*Responsive Styles*/
	@media screen and (max-width : 1027px){
	p {font-size:1.3em;
		padding:0.75em 1.125em;
		width:auto;
		line-height:1.4em;}
	ul.nav li {font-size:0.59em;}
	}

	@media screen and (min-width : 1028px){
	p {font-size: 1.4em;
		padding:0.5em 1em;
		width:32em;
		line-height:1.8em;
		}
	ul.nav li {font-size:0.75em;}
	}


/* ~~ These are the columns for the layout. ~~ */


.sidebar1 {
	float: left;
    padding: 1em 0 0 1em;
	background: rgba(0, 0, 0, 0.85);
	padding-bottom: 1em;
}
.content {
	padding: 1em 0 0 1em;
	float: left;
	background: rgba(0, 0, 0, 0.65);
}

/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol { 
	padding: 0 1.5em 1.5em 4em; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}

/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
div.links {
    text-transform: uppercase; 
	height: 3.5em;
	background: rgba(0, 0, 0, 0.75);
	text-align: center;
	padding:0.5em 0;
    margin: 8em auto 1em auto;
}
ul.nav {
	list-style: none; /* this removes the list marker */
	width: 81em;
	margin: 0 auto;
}
ul.nav li {
	display: inline;
	float: left;
    font-size:0.9em;
	/* this creates the button separation */
}
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	color: #fff;
	padding: 0.3em 0.3em;
	margin: 0 0.5em;
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
	text-decoration: none;
    border-top: 1px solid #999; border-bottom: 1px solid #999;
	background: rgba(0, 0, 0, 0.5);
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	background: #300;
}
ul.nav a#current {
	color:#fff;
	background: #600;
    border:none;
}


/*Responsive Styles*/
@media screen and (max-width : 820px){
	ul.nav a, ul.nav a:visited, ul.nav a#current, ul.nav a:hover, ul.nav a:focus, ul.nav a:active { /* grouping these selectors makes sure that your links retain their button look even after being visited */
		padding: 0.3em;
	}
}

/*Responsive Styles*/
@media screen and (min-width : 821px){
	ul.nav a, ul.nav a:visited, ul.nav a#current, ul.nav a:hover, ul.nav a:focus, ul.nav a:active { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 0.3em;
	margin: 0 0.3em;
	}
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
    text-decoration: none;
    font-size:2em;
    font-weight:bold;
    text-align: left;
    padding: 0.2em 0;
    margin-left:0.5em;
    display: none;
    }
    
/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
    }


/*Responsive Styles*/
@media screen and (max-width : 820px){
	/*Make dropdown links appear inline*/
    ul#menu {
        position: static;
        display: none;
    }
	/*Make all menu links full width --- was 90% but that was messing up mobile */
    ul li, li a {
        width: 64%;
    }
    /*Display 'show menu' link*/
    .show-menu {
        display:block;
	}
}

/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
    display: block;
	}
/*Hide dropdown links until they are needed*/
li ul {
    display: none;
	}
/*Make dropdown links vertical*/
li ul li {
    display: block;
    float: left;
    clear:left;
    }





dt, dd {font-size:1.4em;}
dt {padding: 0.5em 1em;}
dd {margin-left:2em;color:#caa;margin-bottom:1em;}
dl.accolades dt {font-size:2.4em;color:#e33;font-weight:bold;}
dl.accolades dd {font-size:1.4em;color:#fff;}
dd span {font-size:inherit;}
dd.subtopic {margin-left:3em;margin-top:-1em;}

.costumes a img {margin:0.5em;}

.floatl {width:26em;float:left;padding:0 1em;}

.content ul {list-style-type:circle;padding-top:1em;}
.content ul li {font-size:1.4em; line-height:1.5em;}

.sidebar1 p {width:auto;}
.sidebar1 img {padding:1em;width:25em;}

em, strong {font-size:inherit;}

/*h1, h2, h3, h4, h5, h6 {color:#693750;}*/
h1 {
	font-size:2.4em;
	padding-left: 0.5833em;
	padding-top: 0.5em;
}
h2 {
	font-size:2.1em;
	padding-left: 0.6667em;
	padding-top: 0.5em;
}
h3 {
	font-size:1.8em;
	padding-left: 0.7778em;
	padding-top:1em;
    color:#e33;
}
h4, h5, h6 {
	font-size:1.4em;
	padding-left: 1em;
	padding-top:0.5em;
}

div.violator {
	font-size:2em;
	float:right;
	position: relative;
	right: 2.5em;
	top: 1.5em;
}
div.violator a{	
	color: #33181B;
	padding:0.5em;
	width: 4em;
	height: 1.5em;}
div.violator a:link, div.violator a:visited {color: #33181B;text-decoration:none;background: #C9F;}
div.violator a:hover, div.violator a:active, div.violator a:focus {color: #33181B;background: #cac;}

ul.nav a {
	font-size: 1.6em;
/*	font-weight:bold;*/
}

p.credit {
	font-size: 1em;
	text-align:right;
	padding-right:1em;
}
p.alert {padding:1em;background:#F9C;}

.preload {display:none;}

/* ~~ The footer ~~ */
.footer {
	padding: 1em 0 0 0;
	background: rgba(0, 0, 0, 0.75);
	height:28em;
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}
.footer p {text-align:center;color:#fff;width:auto;padding-top:2em;}
.footer a {color:#fee;}
.footer h2 {text-align:center;width:auto;}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  
	float: right;
	padding-left: 0.8em;
}
.fltlft { 
	float: left;
	padding-right: 0.8em;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
	clear:both;
	height:0;
	font-size: 0.1em;
	line-height: 0;
}
.clearfix::after { /* I might not even need this, seems to work just as having a fakout div */
    content: "";
    clear: both;
    display: table;
  }