html {
        min-height: 100%;
        margin-bottom: 1px;
} /* This stabilizes the html so pages don't jump around when navigating through the site   */

body {
    background: #8a8b8c;
	margin-top: 0px;
	margin-right: 2%;
	margin-left: 2%;
    /* Mozilla Firefox: */
 	  background-image: url(../images/background-image-D.jpg); 
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow-y: auto;	
  font-family: "franklin-gothic-urw",sans-serif;			

}

/* link color and behavior */
a { 
color: #A31F34; 
text-decoration: none;
font-weight:bold;
}
a:visited {
	text-decoration: none;
	color: #A31F34;
}	
a:hover {
	text-decoration: underline;
	color: #990033;
}	
a:active {
	text-decoration: none;
	color:#903;
}	

.photo {
	float: clear;
	width: 100%;

	}
.photodiv {
	float: left;
	width: 50%;
	height: auto;
	margin-top: 4px;
	margin-right: 3%;
	margin-bottom: 1%;
	}

.top {
	margin-top: 18px;
	}

.photo-right {
	float: right;
	margin-top: 3%;
	margin-left: 3%;
	margin-bottom: 1%;
	}

.newsthumb {
	margin-right: 5%;
	margin-top: 0;
	margin-bottom: 5%;
	}

.photoholder {
	height: auto;
	width: 96%;
	float: left;
	
	}

.photogroup {
	float: left;
	width: 26%;
	margin-right: 3%;
	margin-bottom: 3%;
	margin-top: 2%;
	border: 1px solid #CCC;
	padding: 1%;
		-moz-box-shadow: 3px 3px 3px #CCC;
		-webkit-box-shadow: 3px 3px 3px #CCC;
		box-shadow: 3px 3px 3px #CCC;
		border-radius: 3px 3px 3px 3px;  /* for Chrome */
	}

.photocaption {
	font-size: 11px;
	line-height: 11px;
	
	}
.googlemap {
	float: right;
	width: 64%;
	height: 424px;
	margin: 2%;
	border: 2px solid #999;
		-moz-box-shadow: 4px 4px 4px #CCC;
		-webkit-box-shadow: 4px 4px 4px #CCC;
		box-shadow: 4px 4px 4px #CCC;
		margin-right: -12%;
		border-radius: 5px 5px 5px 5px; 
	}
/* the master branded logo at upper left */

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

#logo-holder {
	float: right;
	width: 56px;
	height: 30px;
	margin-top: -3%;
	margin-left: 6%;
	}
	
#org-name a {
	display: block;
	width: 66%;
	height: auto;
	font-family: "adobe-caslon-pro",serif;
	font-size: 28px;
	font-weight:normal;
	line-height:30px;
	color: #60606b;
	float: left;
	margin-top: 0;
	padding-bottom: 2px;
	margin-bottom: 2px;	
	
	}

#org-name a:hover {
	color: #A31F34;
	text-decoration: none;
	}	

#tagline {
	color: #60606b;
	float: left;
	width: 64%;
	font-family: "adobe-caslon-pro",serif;
	font-size: 18px;
	line-height: 18px;
	padding-bottom: 1%;
	margin-top: 0;
	margin-bottom: 1%;
	border-bottom: 1px solid #CCC;
	}

#subtitle {
	color: #60606b;
	float: left;
	width: 70%;
	font-family: "adobe-caslon-pro",serif;
	font-size: 19px;
	line-height: 24px;
	margin-top: 0;
	margin-bottom: 0;
	}

.subtitle {
	color: #60606b;
	float: left;
	width: 100%;
	font-family: "adobe-caslon-pro",serif;
	font-size: 18px;
	line-height: 23px;
	margin-top: 0;
	margin-bottom: 2%;
	}

#csail-logo {
	display: block;
	float: left;
	margin-left: 4%;
	margin-top: -2px;
	margin-bottom: 1%;
	width: 100px;
	height: 86px;
	background-image: url(../images/csail-logo.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	}

#big-data-at-csail-logo {
	display: block;
	float: left;
	margin-left: 3%;
	margin-top: 1%;
	margin-bottom: 1%;
	width: 157px;
	height: 42px;
	background-image: url(../images/bigdata-csail-logo.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	}
#white-house-logo {
	display: block;
	float: left;
	margin-left: 0;
	margin-top: -1%;
	margin-right: 5%;
	margin-bottom: 1%;
	width: 124px;
	height: 85px;
	background-image: url(../images/WhiteHouse.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	}	

#ipp-logo {
	display: block;
	float: left;
	margin-left: 3%;
	margin-top: 1%;
	margin-bottom: 1%;
	width: 157px;
	height: 42px;
	background-image: url(../images/mit-ipp.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	}

/* basic text formats */

h1 {
	font-size:18px;
	line-height:24px;
	color: #808285;
	font-weight:bold;
	margin-bottom: 0;
	margin-top: 1%;
}

h2 {
	font-size: 14px;
	color: #808285;
	font-weight: bold;
	margin-bottom: 0;

}

h3 {
	font-size: 12px;
	color: #8A8B8C;
	font-weight: bold;
	margin-top: 0;
}

h4 {
	font-size: 14px;
	color: #A31F34;
	font-weight: bold;
	padding: 0;
	padding-left: 18px;
	margin-top: 0;
	background-image: url(../images/red-arrow.png);
	background-repeat: no-repeat;
	background-position: 0px 3px;
}

.rule {
	width: 100%;
	height: 6px;
	border-bottom: 1px solid #CCC;
	margin-bottom: 3%
	}
#socialmediawidget {
	float: right;
	margin-top: 1%;
	margin-bottom: 2%;
	margin-right: 4px;
	}

#container { /* The container is the live area that holds all the pages elements */
        z-index: 2;
		margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
        max-width: 1060px;
		min-width: 280px;
        padding: 3%;
		padding-bottom: 1%;
		padding-top: 2%;
        background: #fff;
        font-size: 13px;
        color: #000;
      	border-top-width: 6px;
		border-top-style: solid;
		border-top-color: #A31F34;
		-moz-box-shadow: 5px 5px 5px #666;
		-webkit-box-shadow: 5px 5px 5px #666;
		box-shadow: 5px 5px 5px #666;
		border-radius: 0px 0px 4px 4px;  /* for Chrome */
		overflow:hidden;
		font-family: "franklin-gothic-urw",sans-serif;
			 opacity: 0.98;
        -moz-opacity: 0.98;
        filter: alpha(opacity=98);
    }

#header {
	width: 100%;
	float: left;
	height: auto;
	padding: 0px;
	margin-bottom: 2%;

	}

.pdf-icon {
	margin-bottom: -12px;	
	}

.ppt-icon {
	display:block;
	vertical-align: middle;
	float: clear;
	height: 16px;
	font-size: 11px;
	font-weight:bold;
	padding-left: 20px;
	margin-bottom: 8px;
	background-image: url(../images/PowerPoint-icon.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;	
	}
	
.pdf {
	display:block;
	float: clear;
	height: 20px;
	font-size: 11px;
	font-weight:bold;
	padding-left: 24px;
	margin-bottom: 8px;
	background-image: url(../images/pdf-icon.png);
	background-repeat: no-repeat;
	background-position: -2px -2px;	
	}
	
.video-icon {
	display:block;
	vertical-align: middle;
	float: clear;
	height: 16px;
	font-size: 11px;
	font-weight:bold;
	padding-left: 20px;
	margin-bottom: 8px;
	background-image: url(../images/video-icon.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;	
	}
	
.span {
	float: left;
	width: 100%;
	}

#logo {
	display:block;
	float: right;
	z-index: 12;
	max-width: 11%;
	height: 100%;
	margin-left: 3%;
	margin-bottom: 6px;
}




#searchbox {
	float: right;
	width: auto;
	height: auto;
	z-index: 16;
	padding: 0px;
	margin-top: 1%;
}


	
#content {
	width: 100%;
	float: left;
	height: auto;
	border-bottom-width: 1px;
	border-bottom-color: #CCC;
	border-bottom-style: solid;
	padding: 0;
	padding-bottom: 2%;
	margin-bottom: 2%;
	z-index: 25;
	}

#contentbox {
	float: left;
	width: 80%;
	height: auto;
	padding: 0%;
	padding-top: 0%;
	padding-right: 2%;
	margin-right: 1%;
	font-size: 14px;
	line-height: 20px;
	z-index: 12;

	}
#homepagebox {
	float: left;
	width: 72%;
	height: auto;
	padding: 0%;
	padding-top: 0%;
	padding-right: 2%;
	margin-right: 1%;
	font-size: 14px;
	line-height: 20px;
	z-index: 12;

	}

#videobox {
	float: left;
	width: 68%;
	height: auto;
	padding: 0%;
	padding-top: 0%;
	padding-right: 2%;
	margin-right: 1%;
	font-size: 14px;
	line-height: 20px;
	z-index: 12;

	}
	
#locationbox {
	float: left;
	width: 84%;
	height: auto;
	padding: 0%;
	padding-top: 0%;
	padding-right: 2%;
	margin-right: 1%;
	font-size: 14px;
	line-height: 20px;
	z-index: 12;

	}

#silo {
	float: left;
	padding: 2%;
	padding-top: 0%;
	padding-right: 2%;
	margin-right: 2%;
    color: #000;
    font-size: 12px;
	line-height: 20px;
	z-index: 12;
	border: 1px solid #CCC;
			-moz-box-shadow: 3px 3px 3px #666;
		-webkit-box-shadow: 3px 3px 3px #666;
		box-shadow: 3px 3px 3px #666;
	border-radius: 4px 4px 4px 4px;  /* for Chrome */
	}

#register a  {
	display: block;
	float: clear;
	width: 92px;
	height: 15px;
	padding: 1%;
	padding-top: 4px;
	margin: 1%;
	margin-left: 0;
	font-size: 14px;
	color: #A31F34;
  	z-index: 12;
	border: 3px solid #CCC;
	border-right: 3px solid #666;
	border-bottom: 3px solid #666;
  background: #edece7;
    /* Mozilla Firefox: */
    background: -moz-linear-gradient(top, #dcddd9, #edece7);
    /* Chrome and Safari:*/
    background: -webkit-gradient(linear,
                left top, left bottom, from(#dcddd9), to(#edece7));
    /* Microsoft Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#dcddd9', EndColorStr='#edece7', GradientType=0);
	/* for Chrome */
	}	

#register a:hover  {
	border: 3px solid #999;
	border-top: 3px solid #666;
	border-left: 3px solid #666;

	}		
	
	
#sliderbox {
	float: left;
	width: 60%;
	padding-left: 3%;
	padding-top: 1%;
	padding-right: 2%;
	margin-top: 0;
	margin-left: 0;
	margin-right: 2%;
	border: 1px solid #CCC;
			-moz-box-shadow: 3px 3px 3px #666;
		-webkit-box-shadow: 3px 3px 3px #666;
		box-shadow: 3px 3px 3px #666;
	border-radius: 4px 4px 4px 4px;  /* for Chrome */
	}

.video {
	width: 65%;
	height: 336px;
	}

.intro {
	font-size: 17px;
	line-height: 26px;
	color:#666;
	}	

.indented-text {
	margin-left: 5%;
	margin-right: 3%;
	margin-top: 0;
	 font-size: 12px;
	line-height: 16px;
	
	}
.blurb {
	font-size: 18px;
	line-height: 25px;
	color: #8A8B8C;
	}	
	
.button {
	width: auto;
	float:left;
	margin-right: 1%;
	}
	
#twitterfeed {
	display: block;
	float: left;
	width: 100%;
	height: auto;
	padding-top: 16%;
	padding-right: 0;
	padding-left: 0;
	margin-right: 0;
  

	}

#newsfeed {
	float: left;
	width: 27%;
	height: auto;
	padding-top: 2%;
	padding-right: 2%;
	padding-left: 2%;
	margin: 0px;
	margin-right: 2%;
    color: #666666;
	font-size: 11px;
	line-height: 16px;
	border: 1px solid #CCC;
				-moz-box-shadow: 3px 3px 3px #666;
		-webkit-box-shadow: 3px 3px 3px #666;
		box-shadow: 3px 3px 3px #666;
	border-radius: 4px 4px 4px 4px;  /* for Chrome */
	}	
		
#eventsfeed {
	float: left;
	width: 27%;
	height: auto;
	padding-top: 2%;
	padding-right: 2%;
	padding-left: 2%;
	margin: 0px;
    color: #666666;
	font-size: 11px;
	line-height: 16px;
	border: 1px solid #CCC;
				-moz-box-shadow: 3px 3px 3px #666;
		-webkit-box-shadow: 3px 3px 3px #666;
		box-shadow: 3px 3px 3px #666;
	border-radius: 4px 4px 4px 4px;  /* for Chrome */
	}		
		
#siderail {
	float: left;
	width: 22%;
	height: auto;
	padding-left: 1%;
	padding-top: 0;
	margin-top: 0;
	font-size: 12px;
	line-height: 18px;

	
	}	

.register {
	background-image: url(../images/gray-pointer.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;	
	}
	
.floatright {
	float: right;
	margin-top: 2%;
	}
	
#footerlogo {
	float: left;
	width: 135px;
	height: 52px;
	background-image: url(../images/MIT-logo-with-spelling_gray-light-gray.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	margin-top:2px;
	margin-left: 1%;	
	margin-bottom: 4%;
	}
#footer-text {
	float: left;
	height: auto;
	margin-top: -12px;
	padding-bottom: 1%;
	}

#sponsor-text {
	float: left;
	margin-left: 4%;
	margin-top: -12px;
	}

	
.footertext {
	font-size:13px;
	line-height: 16px;
	color:#666;
	}
		
.width70 {
	width: 60%;
}

.width-auto {
	
	width: auto;
	}

@media screen and (max-width: 860px) {
	
#contentbox {
	width: 98%;
	}	

#homepagebox {
	width: 98%;
	}	

	
#searchbox {
	padding-top: 3%;
	padding-bottom: 2%;
}

#siderail {
	width: 44%;
	margin-top: 2%;

	}

.googlemap {
	margin-right: 2%;
	}


	
}

@media screen and (max-width: 640px) {



#logo-holder {
	margin-top: 2%;
	margin-left: 6%;
	}

#searchbox {
	float: right;
	margin-top: 1%;
	margin-bottom: 2%;
}

#sliderbox {
	float: left;
	width: 100%;
	margin-left: 0;
}

#twitterfeed {
	display: block;
	float: left;
	width: 100%;
	margin-top: 4%;
	margin-bottom: 6%;
}

#newsfeed {
	float: left;
	width: 96%;
	margin-top: 4%;
}

#eventsfeed {
	float: left;
	width: 96%;
	margin-top: 4%;
}

.video {
	width: 76%;
	height: 224px;
	margin-bottom: 4%;
	}

#org-name a {
	display: block;
	width: 100%;
	font-size: 24px;
}

.googlemap {
	float: left;
	width: 96%;
	height: 440px;
		margin-right: 2%;
	}

#siderail {
	width: 64%;
	margin-top: 4%;
	margin-bottom: 6%;

	}

}

@media screen and (max-width: 480px) {

h1 {
	margin-top: 2%;
	margin-bottom: 3%;
	}

#org-name a {
	display: block;
	width: 96%;
	font-size: 24px;
	padding-bottom: 0;
	margin-bottom: 0;
}

#tagline {
	width: 84%;
	padding-bottom: 1%;
	margin-top: 1%;
	padding-bottom: 5%;
	margin-bottom: 4%;
	
	}

#logo-holder {
	margin-top: 2%;
	margin-bottom: 2%;
	}

#subtitle {
	width: 96%;
	line-height: 24px;
	margin-top: 0;
	}

.subtitle {
	line-height: 20px;
	margin-bottom: 6%;
	}

#footerlogo {
	margin-top:4%;
	margin-left: 6%;
	margin-bottom: 4%;	
	}

.video {
	width: 94%;
	height: 360px;
	margin-bottom: 4%;
	}
	
#socialmediawidget {
	float: right;
	margin-top: 4%;
	margin-bottom: 4%;
	margin-right: 1%;
}	

#csail-logo {
	display: block;
	float: right;
	margin-left: 5%;
	margin-top: 2%;
	margin-bottom: 4%;
	
	}

#big-data-at-csail-logo {
	display: block;
	float: right;
	margin-top: 3%;
	margin-bottom: 6%;
	}

#sponsor-text {
	float: left;
	margin-left: 0;
	margin-top: -12px;
	}
#siderail {
	width: 94%;
	margin-top: 2%;
	border-top: 1px solid #CCC;
	}

.googlemap {
	float: left;
	width: 96%;
	height: 320px;
	margin: 0;
	margin-bottom: 4%;
	}
	
#register a  {
	padding: 3%;
	padding-top: 2%;
	margin-bottom: 4%;
}

.photodiv {
	margin-right: 6%;
	margin-bottom: 2%;
	}

}