/* Hello. You have found my stylesheet. */
body {
width: auto;
margin: 0 auto;
padding: 0;
background: #FFFBE0;
color: #282943;
}

font, body, td, tr {
font-size: 1.00em;
font-family: 'Mada';
color: #282943;
display: block;
line-height: 1.5;
}
	
a.box:link, a.box:active, a.box:visited {
font-family: 'Mada';
font-weight: bold;
background: #2C489B;
display: inline-block;
padding: 8px 30px;
margin: 5px;
color: #FFFBE0;
text-decoration: none;
border-radius: 3px;
}
	
a.box:hover {
text-decoration: underline;
}

a.box_y:link, a.box_y:active, a.box_y:visited {
font-family: 'Mada';
font-weight: bold;
background: #FEE566;
display: inline-block;
padding: 8px 30px;
margin: 5px;
color: #2C489B;
text-decoration: none;
border-radius: 3px;
}
	
a.box_y:hover {
text-decoration: underline;
}
		
#c {
clear:both;
}

main img {
margin: 0;
max-width: 100%;
}	

img.logotop {
width: 105px;
height: 76px;
}

header {
max-width: 100%;
margin: 0 auto;
}
	
nav {
background: #282943;
min-height: 93px; 
margin: 0 auto;
line-height: 93px;
width: 100%;
text-align: center;
}

nav a:link, nav a:visited, nav a:active {
font-family: 'Bree Serif';
color: #FDF3AF;
font-size: 1.15em;
text-decoration:none;
padding-left: 33px;
padding-right: 20px;
display: inline-block;
vertical-align: middle;
}
	
nav a:hover {
color: #FEE566;
text-decoration: underline;
}	

#purple {
background: #4A4C7E;
padding: 5% 20%;
color: #FFFBE0;
}

#dark {
background: #282943;
padding: 5% 20%;
color: #FFFBE0;
}		

section {
margin: 4% 20%;
}

section h1 {
color: #4A4C7E;
}

section h2 {
color: #4A4C7E;
}

section h3 {
color: #4A4C7E;
}

article {
width: 95%;
margin: 0 auto;
}

aside {
min-width: 300px;
width: 46%;
margin: 0 2%;
float: left;
}

#left {
float: left;
width: 73%;
}

#right {
float: right;
width: 25%;
}

h1 {
color: #FDF3AF;
font-size: 3em;
font-weight: normal;
font-family: 'Bree Serif';
}

h2 {
color: #FDF3AF;
font-size: 2em;
font-weight: normal;
font-family: 'Bree Serif';
}

h3 {
color: #FFFBE0;
font-size: 1.15em;
font-weight: normal;
font-family: 'Bree Serif';
margin-top: 10px;
}	

a.plain:link, a.plain:active, a.plain:visited, a.plain:hover {
color: #FFFBE0;
font-size: 1em;
font-family: 'Mada';
text-decoration: underline;	
display: inline-block;
}

section a.plain:link, section a.plain:active, section a.plain:visited, section a.plain:hover {
color: #2C489B;
}

li {
margin-left: 5%;
margin-bottom: 0;
}

footer {
width: 100%;
background: #4A4C7E;
text-align: left;
margin: 0 auto;
padding-bottom: 1%;
}

img.logofoot {
width: 105px;
height: 76px;
margin-top: 10%;
margin-bottom: 15%;
}

#foot {
max-width: 100%;
margin: 2% 10%;
float: left;
color: #FFFBE0;
}
	
#foot a:link, #foot a:active, #foot a:visited {
color: #FFFBE0;
font-size: 1em;
font-family: 'Mada';
text-decoration: none;	
display: inline-block;
}

#foot a:hover {
text-decoration: underline;
}

a img {
border: none;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

@media all and (max-width:750px) {
nav {
text-align: left;
}
}

/* really specific iframe resizing because videos are annoying like that */
@media all and (max-width:1070px) {
	iframe{width:640px;height:360px;}
}

@media all and (max-width:950px) {
	iframe{width:640px;height:360px;}
}

@media all and (max-width:860px) {
	iframe{width:560px;height:315px;}
}

@media all and (min-width:400px) and (max-width:770px) {
	iframe{width:560px;height:315px;}
}

@media all and (max-width:600px) {
	iframe{width:400px;height:225px;}
}

@media all and (max-width:399px) {
	iframe{width:300px;height:169px;}
}