@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=EB+Garamond');
*{
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing:border-box;
}

body {
	font-family: 'EB Garamond', serif;
	color:#4A4A4A;
    font-size: 100%;
		}
  
#wrapper {
	max-width:1100px;
	width:98%;
	padding:1%;
	margin: 10px auto;
		} 
	
header {
	width:100%;
	min-width:260px;
	height:60px;
	border-bottom: 1px solid #EC1518; 
	margin-bottom:10px;
	  	}
	
nav { 
	width:25%;
	min-width:190px;
	float:left;
	}
	
main{
	width:75%;
	float:left;
	}

#wrapper:after { /*Clear float to prevent parent collapse by creating fake div after the floated element and applying clear: both; to it*/
  content: "";
  display: table;
  clear: both;
} 
	
.web-box{
	width:200px;
	padding:4px 6px 4px 9px;
	background-color:#B8C9C3;
	display:inline-block;
	float:left;
}

.web-box2 {
	position:absolute;
	top:15px;
	right:10px;
	text-align: center;
	float:right;
    background-color:#8AA1AB;
	font-family:'League Gothic', Helvetica, Arial, sans-serif;
	font-weight:light;
	color:white;
	letter-spacing:1px;	
	font-size:110%;
	padding: 5px 10px 5px 10px;
   	display: none;
}

pre{display:inline;}

img{
  max-width: 100%;
  height:auto;
}


.icon{
	display:inline-block; 
	vertical-align:middle;
	margin-right:5px;
		}
		
.icon2{
	display:inline-block; 
	vertical-align:middle;
	margin-right:5px;
	margin-top:-10px;
		}
		
.center{
	display:block;
	margin:auto;
	text-align:center;
	color:red;
	}
	
	.work_but{
	float:left;
	text-align:left;
	margin:10px auto;
	}
.work_but a{
	display: block;
	margin-right: 4px;
	margin-bottom: 5px;
	background-color:#8AA1AB;
	padding:7px 10px;
	font-family:Helvetica, Arial, sans-serif;
	font-size:14px;
	color:white;
	}
.work_but a:hover{	
color:#000;
}
		
		/*--------------------------------------Navigation--------------------------------------*/
#menuToggle span
{
  display: none;
}

#menuToggle input
{
  display: none;}	
	

#menu {
	display:block;
	width:90%;
    list-style-type:none;
	margin-left:0; /*margin-left 0 is because general li has margin-left 50px */
		 }

/*Style for menu links*/
#menu li a {
    display:block;
	background-color:#B8C9C3;
	padding: 8px 0 8px 10%;
	margin-bottom:10px;
    font-family:'League Gothic', Helvetica, Arial, sans-serif;
	font-weight:lighter;
	letter-spacing:1px;	
	font-size:22px;
	color:gray;
	text-decoration:none;
}

#menu li a:hover {
	color:#FFFFFF;
}


/*Hide dropdown links until they are needed*/
.hidden {
	list-style-type:none;
 	position: absolute;
 	top: 0;
 	width: 100%;
 	display: none;
	margin-left:0; /*margin-left 0 is because general li has margin-left 50px */
}

/*there are two sub links, so 50% for each*/
#menu li .hidden li a{
	display: inline-block;
	width:50%;
	padding: 8px 0px;
	text-align: center;
}

/*Hover state for dropdown/sub links*/
#menu li .hidden li a:hover {
    background: #E52825;
    color: #fff;
}

/*Display the dropdown on hover (class hidden is the second level ul)*/
#menu li:first-child a:hover + .hidden, .hidden:hover {
	display:block;
}
/*---------------------------------------End of Navigation------------------------------------------*/
	
.bar{
	width:100%;
	height:40px;
	background-color:#8AA1AB;
	display:flex;
	justify-content:center;
	padding-top:8px;
	margin-bottom:10px;
	font-family:'League Gothic', Helvetica, Arial, sans-serif;
	font-weight:light;
	color:white;
	letter-spacing:2px;	
	font-size:24px;
		}
		
.box{
	width:100%;
	background-color:#DEF2EA;
	padding:15px;
			}
	
.refs{
	width:100%;
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	flex-wrap:wrap;
	
	}
	
.refs-box{
	width:49%;
	min-height:50px;
		}
	
.refs-box p{
	width:100%;
	background-color:#DEF2EA;
	padding:15px;
	margin-bottom:15px;
	}
	
.refs-box a::before{
	content: "-";
	color:red;
	margin-right:4px;
	}
	
.subject{
	width:100%;
	height:28px;
	display:inline-block;
	padding-top:3px;
	padding-bottom:2px;
	border-top: 1px solid;
	border-bottom: 1px solid;
	text-align:center;		
	margin:5px 0;
	font-family:Helvetica, Arial, sans-serif;
	letter-spacing:1px;	
	font-size:18px;
	color:#E52825;
	}


ul{
	list-style-type:circle;
	size:12px;
	margin-left:50px;
	}
	
a.home{
	font-weight:lighter;
	}

a
{
	font-family: 'EB Garamond', serif;
	font-size: 1em; 
	color:#EF7847;
	text-decoration:none;
	font-weight:bold;
}
a:hover{
	color:#E52825;
}

@font-face {
    font-family:'League Gothic';
    src: url('league_gothic-webfont.eot');
    src: url('league_gothic-webfont.eot?#iefix') format('embedded-opentype'),
         url('league_gothic-webfont.woff') format('woff'),
         url('league_gothic-webfont.ttf') format('truetype'),
         url('league_gothic-webfont.svg#LeagueGothicRegular') format('svg');
    font-weight:lighter;
    font-style: normal;
}

.league{	
    font-family:'League Gothic', Helvetica, Arial, sans-serif;
	letter-spacing:1px;	
	font-size:35px; 
	color:white; 
	}

.league-web{
	font-family:'League Gothic', Helvetica, Arial, sans-serif;
	letter-spacing:1px;	
	font-size:40px; 
	color:white; 
	background-color:#E52825; 
	padding-left:5px; 
	padding-right:5px;
		} 
		
.info{
	font-family: Helvetica, Arial, sans-serif;
	color:#E52825;
	font-size:1.4vw;
	margin-top:25px;
	float:right;
			}
			
.info2{
	font-family: Helvetica, Arial, sans-serif;
	color:#E52825;
	font-size:90%;
	margin-top:-25px;
	/*float:right;*/
	display:none;
			}
		
.headline{
	font-family: Helvetica, Arial, sans-serif;
	font-size:14px;
	color:#E52825;
		}
		
.arrow{
	position:fixed; 
	right:40px; 
	bottom:40px; 
	z-index:200
	}		
		
/***This does not prevent info text to become larger (and therefore not fitting in the header) on big screens***/	
@media (min-width: 1100px) { 		
.info{
	font-family: Helvetica, Arial, sans-serif;
	color:#d2112d;
	font-size:1em;
	float:right;
		}
}
/************************************End of font-size:1em media***************************************************/	


/*********************************************************************************************************/	
/****Middle part starts****/	
@media (min-width: 481px) and (max-width: 850px) {         
  
#wrapper {
	max-width:850px;
	min-width:790px;
	/*width:98%;
	padding:1%;*/
	margin: 10px auto;
			}
	
.refs-box{
	width:100%;
}
	
.info{
	display:none;	
	}
	
.info2{ /*This makes info2 box moving for a while to the left with the right browser side*/	
	display:inline;	
	position:absolute;
	right:2%;
	}
   
}

/***This stops info2 box moving to the left with the right browser side on medium screens***/	
@media (max-width: 590px) {
	.info2{
	position:static;
	margin-top:-25px;
	float:left;
	margin-left:30px;
	}
	
	.work_but{
		width: 170px;
	
	}
}



/*********************************************************************************************************/	
/****Mobile part starts****/	
@media (max-width: 480px) {
	
header{
	height: auto;
	margin-bottom: 40px;
}

.web-box{
	display:none;
	}
	
.web-box2{
	display:block;
	z-index:100;
		}

.info, .info2 {
	display:none;	
	}
	
main, .refs, .refs-box{
	width:100%;
	} 

.subject{
	font-size:4vw;
	padding-top:6px;
}
	
	.bar img[src="HallofFame.png"]{
		display:none;
	}	

/*-----------------------------Mobile Navigation--------------------------------------*/
	

#menuToggle{
position: relative; 
margin-top:-40px; 
z-index: 1;

}

#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -5px;
  left: -5px;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  -webkit-touch-callout: none;
}

/*
 hamburger from empty span
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 5px;   
  margin-bottom: 5px;
  position: relative;
  background:red;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px; /* why this line?*/
  transition: transform 0.3s ease-in,
              background 0.3s ease-in,
              opacity 0.2s ease-in;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
  margin-bottom:125px; /* to keep distance from the hamburger to ul */
}

/* Transform all the slices of hamburger into a crossmark. */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background:red;
}

/* hide the middle one. */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/* the last one to go the other direction  */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  opacity: 1;
  transform: rotate(-45deg) translate(2px, -1px);
}

#menu{
  position: absolute; /* to completely remove menu from the flow when it is not on the screen*/
  width: 100%;
  margin: -152px 0 0 0;
  padding-top:50px;
  box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
  text-align: center;
  background: linear-gradient(
    to bottom, 
    transparent 0%,
    transparent 20%, 
    white 20%, 
    white 100%
  );
  -webkit-font-smoothing: antialiased;
   transform: translate(-110%, 0);
  transition: transform 0.5s ease-out;
}

			
/*To move it in from the left on toggle */
#menuToggle input:checked ~ ul
{
transform: translate(0, 0);

}

#menu li a {
		padding-left:0;
	}
	
nav {
    position: absolute;
	top: 60px;	
	left: 0;
	width: 100%;
	height:10px;
	padding: 0 2%;
	
}


/*submenu shows by default on mobile*/
.hidden {
 	display: block;
 	position: static;
}



}
/*---------------------End of Mobile Navigation--------------------------------------*/

/*********************************CLASS/HOMEWORK pages with accordeon style*********/
fieldset{
	border:1px solid red;
	padding: 5px 12px;
	margin-bottom:20px;
		}
	
legend span{
	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	font-size:16px;
	font-weight:bold;
	color:#E52825;
	margin: auto 10px;
		}
.class{
	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	font-size:14px;
	color:#457682;
	font-weight:bold;
	display:inline-block;
	vertical-align:middle;
}

.HW{
	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	font-size:14px;
	color:#E52825;
	font-weight:bold;
}

.HWparts{
	background-color:#FED3A3;
	width:100%;
	padding:2px 0 4px 10px;
	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	font-size:14px;
	color:#E52825;
	}

.HW2{
	width:20%;
	border: 2px solid #B8C9C3; 
	margin:2px auto -15px auto; 
	padding:2px;  
	color:#E52825; 
	font-weight: bold; 
	text-align: center;}


/**********************************************End of CLASS/HOMEWORK pages with accordeon style*********/

/*ACCORDION (don't forget about script for accordion on each page) */
button.accordion {
    background-color: #B8C9C3;
    color: #444;
    cursor: pointer;
    padding: 5px 10px;
	margin-bottom:5px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: all 0.4s ease 0s;
	-webkit-transition:all 0.4s ease 0s;
}

button.accordion:hover {
    background-color: #C7D3CF;
}

.panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

/*End of Accordion */