/* holds the large 3-part logo set */
#logo-holder-large {
	float: none;
	width: 960px;
	height: 54px;
	margin-top: 4%;
	margin-bottom: 3%;
	}	
	
/* holds the small 3-part logo set */
#logo-holder-small {
	float: none;
	width: 903px;
	height: 54px;
	margin-top: 4%;
	margin-bottom: 3%;
		}

/* The EECS-branded MIT logo in two sizes and two color variations, each with it's own hover state */

#MIT-logo-large {
	width: 74px;
	height: 38px;
	float: left;
	background-image: url(../eecs-images/MIT-EECS-logo-large-sprite.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	}
	
#MIT-logo-large:hover {
	background-image: url(../eecs-images/MIT-EECS-logo-large-sprite.png);
	background-repeat: no-repeat;
	background-position: -74px 0px;
	}	

#MIT-logo-large-reversed {
	width: 74px;
	height: 38px;
	float: left;
	background-image: url(../eecs-images/MIT-EECS-logo-large-sprite.png);
	background-repeat: no-repeat;
	background-position: -148px 0px;
	}
	
#MIT-logo-large-reversed:hover {
	background-image: url(../eecs-images/MIT-EECS-logo-large-sprite.png);
	background-repeat: no-repeat;
	background-position: -222px 0px;
	}	

#MIT-logo-small {
	width: 56px;
	height: 30px;
	float: left;
	background-image: url(../eecs-images/MIT-EECS-logo-small-sprite.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	}
	
#MIT-logo-small:hover {
	background-image: url(../eecs-images/MIT-EECS-logo-small-sprite.png);
	background-repeat: no-repeat;
	background-position: -56px 0px;
	}	
	
#MIT-logo-small-reversed {
	width: 56px;
	height: 30px;
	float: left;
	background-image: url(../eecs-images/MIT-EECS-logo-small-sprite.png);
	background-repeat: no-repeat;
	background-position: -112px 0px;
	}
	
#MIT-logo-small-reversed:hover {
	background-image: url(../eecs-images/MIT-EECS-logo-small-sprite.png);
	background-repeat: no-repeat;
	background-position: -168px 0px;
	}	

/* the vertical pipe between the MIT logo and the EECS logo, in two sizes and two color variations */

#divider-large {
	width: 14px;
	height: 54px;
	margin-top: -7px;
	margin-left: 14px;
	border-left: 1px solid #000;
	float: left;
	}

#divider-large-reversed {
	width: 14px;
	height: 54px;
	margin-top: -7px;
	margin-left: 14px;
	border-left: 1px solid #fff;
	float: left;
	}	
	
#divider-small {
	width: 10px;
	height: 40px;
	margin-top: -5px;
	margin-left: 10px;
	border-left: 1px solid #000;
	float: left;
	}
	
#divider-small-reversed {
	width: 12px;
	height: 40px;
	margin-top: -5px;
	margin-left: 12px;
	border-left: 1px solid #fff;
	float: left;
	}

/* logo holders with the EECS gray background to demo the reversed logos */

#EECS-logo-holder-large {
	float: clear;
	width: 100%;
	height: 48px;
	margin-left: -3%;
	margin-top: 2%;
	margin-bottom: 4%;
	margin-right: 2%;
	padding: 3%;
	padding-top: 4%;
	background-color:#55565b; /*  the dark gray-brown background of the Start6 properties */
	z-index: 100;
	}

#EECS-logo-holder-small {
	float: clear;
	width: 100%;
	height: 48px;
	margin-left: -3%;
	margin-top: 2%;
	margin-bottom: 2%;
	margin-right: 2%;
	padding: 3%;
	padding-top: 4%;
	padding-bottom: 1%;
	background-color:#55565b; /*  the dark gray-brown background of the Start6 properties */
	z-index: 100;
	}

/* The EECS logo and wordmark lockups for web, in two sizes and two color variations, each with its own hover state */

#EECS-logo-web-large {
	width: 200px;
	height: 61px;
	float: left;
	margin-top: -10px;
	background-image: url(../eecs-images/EECS-web-large-off.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	}
	
#EECS-logo-web-large:hover {
	background-image: url(../eecs-images/EECS-web-large-on.png);
	background-repeat: no-repeat;
	}


#EECS-logo-reversed-web-large {
	width: 200px;
	height: 61px;
	float: left;
	margin-top: -10px;
	background-image: url(../eecs-images/EECS-web-large-reversed-off.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	}
	
#EECS-logo-reversed-web-large:hover {
	background-image: url(../eecs-images/EECS-web-large-reversed-on.png);
	background-repeat: no-repeat;
	}


#EECS-logo-web-small {
	width: 140px;
	height: 48px;
	float: left;
	margin-top: -8px;
	background-image: url(../eecs-images/EECS-web-small-off.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	}
	
#EECS-logo-web-small:hover {
	background-image: url(../eecs-images/EECS-web-small-on.png);
	background-repeat: no-repeat;
	}


#EECS-logo-reversed-web-small {
	width: 140px;
	height: 52px;
	float: left;
	margin-top: -8px;
	background-image: url(../eecs-images/EECS-web-small-reversed-off.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	}
	
#EECS-logo-reversed-web-small:hover {
	background-image: url(../eecs-images/EECS-web-small-reversed-on.png);
	background-repeat: no-repeat;
	}

/* The short versions of the EECS logo and wordmark lockups for mobile, in two sizes and two color variations, each with its own hover state. These are the same graphics as above but the width is shrotened to display only the logo. */

#EECS-logo-mobile-small {
	display: block;
	width: 38px;
	height: 52px;
	float: left;
	margin-top: -8px;
	background-image: url(../eecs-images/EECS-web-small-off.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	}
	
#EECS-logo-mobile-small:hover {
	background-image: url(../eecs-images/EECS-web-small-on.png);
	background-repeat: no-repeat;
	}

#EECS-logo-reversed-mobile-small {
	display: block;
	width: 38px;
	height: 52px;
	float: left;
	margin-top: -8px;
	background-image: url(../eecs-images/EECS-web-small-reversed-off.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	}
	
#EECS-logo-reversed-mobile-small:hover {
	background-image: url(../eecs-images/EECS-web-small-reversed-on.png);
	background-repeat: no-repeat;
	}

#EECS-logo-mobile-large {
	width: 48px;
	height: 61px;
	float: left;
	margin-top: -10px;
	background-image: url(../eecs-images/EECS-web-large-off.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	}
	
#EECS-logo-mobile-large:hover {
	background-image: url(../eecs-images/EECS-web-large-on.png);
	background-repeat: no-repeat;
	}


#EECS-logo-reversed-mobile-large {
	width: 48px;
	height: 61px;
	float: left;
	margin-top: -10px;
	background-image: url(../eecs-images/EECS-web-large-reversed-off.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	}
	
#EECS-logo-reversed-mobile-large:hover {
	background-image: url(../eecs-images/EECS-web-large-reversed-on.png);
	background-repeat: no-repeat;
	}
	

@media (max-width: 480px) { /* Displays the short versions of the EECS logo and wordmark lockups for web when viewed on screens below 480px in width, such as mobile phones; in two sizes and two color variations, each with its own hover state */
	
#EECS-logo-web-large {
	width: 48px;
	background-image: url(../eecs-images/EECS-web-large-off.png);
	}
	
#EECS-logo-web-large:hover {
	background-image: url(../eecs-images/EECS-web-large-on.png);
	}


#EECS-logo-reversed-web-large {
	width: 48px;
	background-image: url(../eecs-images/EECS-web-large-reversed-off.png);
	}
	
#EECS-logo-reversed-web-large:hover {
	background-image: url(../eecs-images/EECS-web-large-reversed-on.png);
	}

#EECS-logo-web-small {
	width: 36px;
	background-image: url(../eecs-images/EECS-web-small-off.png);
	}
	
#EECS-logo-web-small:hover {
	background-image: url(../eecs-images/EECS-web-small-on.png);
	}


#EECS-logo-reversed-web-small {
	width: 36px;
	background-image: url(../eecs-images/EECS-web-small-reversed-off.png);
	}
	
#EECS-logo-reversed-web-small:hover {
	background-image: url(../eecs-images/EECS-web-small-reversed-on.png);
	}

}

/* p, div, h1, h2, h3, h4, h5, h6, table, td, tr, body, a, img, ins, ul, li, form{ */
p, div, h3, h4, h5, h6, table, td, tr, body, a, img, ins, ul, li, form{
	/* margin: 0; */
	/* padding: 0; */
	/* outline: none; */
	/* border: 0; */
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	/* text-decoration: none; */
	font-size: 100%;
	/* color: #fff */
}

.subheader {
	font-size: 130%;
}

.subsubheader {
	font-size: 80%;
}


 /* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}