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

body {
   	margin-top: 0px;
	margin-right: 2%;
	margin-left: 2%;  
	overflow-y: auto;				
    background: #edece7;
    /* Mozilla Firefox: */
    background: -moz-linear-gradient(top, #8a7f7b, #dbd4d2);
    /* Chrome and Safari:*/
    background: -webkit-gradient(linear,
                left top, left bottom, from(#8a7f7b), to(#dbd4d2));
    /* Microsoft Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#8a7f7b', EndColorStr='#dbd4d2', GradientType=0);
	  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;			
}

#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: 2%;
		padding-left: 3%;
		padding-bottom: 1%;
		padding-top: 2%;
     	overflow:hidden;
        background: #fff;
        font-size: .96em;
		line-height: 1.3em;
        color: #000;
		border: 1px solid #662200;
		-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 */
		 opacity: 0.96;
        -moz-opacity: 0.96;
        filter: alpha(opacity=96);
		font-family: 'Source Sans Pro', sans-serif;
		}	

#header { /* holds all the header elements: */
	width: 100%;
	float: left;
	height: auto;
	min-height: 100px;
	padding: 0;
	margin: 0;
	padding-top: 7%;
	margin-top: -4%;
	padding-left: 7%;
	margin-left: -7%;
	padding-right: 8%;
	margin-right: 0;
	background-color: #003a7b;
	padding-bottom: -1%;
	background-image: url(../images/lobby7.png);
	background-repeat: no-repeat;
	background-position: center;
	}

#green-bar {
	width: 112%;
	float: left;
	height: 10px;
	padding: 0px;
	margin-bottom: 0px;
	margin-left: -6%;
	background-color:#5dbb9b;
	}

.gray-rule {
	float: left;
	width: 100%;
	position: relative;
	height: 8px;
	margin-bottom: 12px;
	border-bottom: 1px solid #CCC;
	}

.brown-rule {
	float: left;
	width: 100%;
	position: relative;
	height: 8px;
	margin-bottom: 12px;
	border-bottom: 1px solid #662200;
	}
	

/* header group at upper left */
	

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

/* MIT master logo at upper right */
#logo-holder {
	float: right;
	width: 56px;
	height: 30px;
	margin-top: -30px;
	margin-left: 6%;
	margin-right:2%;
	}

#MIT-logo {
	width: 56px;
	height: 33px;
	float: left;
	background-image: url(../images/MIT-logo-white-54x28-shadow.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

#MIT-logo:hover {
		width: 54px;
	height: 28px;
	background-image: url(../images/MIT-logo-sprite-54x28.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	}	

#org-name {
	position:relative;
	width: 16%;
	float: left;
	margin-top: -18px;
	margin-left: 1%;
	margin-bottom: -60%;
	margin-right: 4%;
	}


/* basic text formats */

p {
	margin:0;
	margin-bottom: 2%;
	}

a { 
color: #003a7b; 
text-decoration: none;
font-weight:bold;
}
a:visited {
	text-decoration: none;
	color: #003a7b;
}	
a:hover {
	text-decoration: none;
	color: #990033;
}	
a:active {
	text-decoration: none;
	color:#903;
}		

h1 {
	font-size: 1.3em;
	color: #003a7b;
	font-weight:bold;
	margin-bottom: 2%;
	margin-top: 0;
	padding-bottom: 6px;
	border-bottom: 2px solid #662200;
}

h2 {
	font-size: 1.15em;
	color: #003a7b;
	font-weight: bold;
	margin-top: 2%;
	margin-bottom: 3%;
	padding-bottom: 6px;
	border-bottom: 2px solid #662200;
}

h3 {
	font-size: 1em;
	color: #003a7b;
	font-weight: bold;
	margin-top: 18px;
	margin-bottom: 8px;
	padding-bottom: 2px;
	border-bottom: 1px solid #662200;
}

h4 {
	font-size: 1.1em;
	color: #003a7b;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 1%;
	
}
/*
#contentbox ul {
	padding-left: 3%;
	padding-right: 8%;
	margin-top: 1%;
	}
	
	
#contentbox li {
	margin-left: 0;
	padding-left: 0;
	margin-bottom: 2%;
	list-style-type:none;
	list-style-position:outside;
	}
	
#contentbox li:before {
  content: "\2794";
  color: #003a7b;
  margin-right: 1%;
  font-size:1em;
  padding: 0; 
}

#contentbox li li:before {
  content: "\25B6";
  color: #003a7b;
  margin-right: 1%;
  font-size:.66em;
  padding: 0; 
}
*/
#home-page-left-sidebar {
	display: block;
	float: left;
	font-size: .9em;
	line-height:1.4em;
	width: 20.6%;
	height: auto;
	margin-top: 0;
	margin-left: 0;
	margin-right: 3.5%;
	margin-bottom: 4%;
	}

.callout {
	font-size:1.3em;
	line-height:1.4em;
	color: #662200;
	font-weight:bold;
	font-style:italic;
	}	

.quote {
	font-size:1em;
	font-style:italic;
	margin-top: 12px;
	}
.quote-highlight {
	font-size:1.3em;
	font-style:italic;
	font-weight:bold;
	margin-top: 12px;
	color: #662200;
	}
.smaller-text {
	font-size:.8em;
	line-height:1em;
	}
.float-right {
	float:right;
	}

.columns {
	-moz-column-count: 2;
	-moz-column-gap: 30px;
	-webkit-column-count: 2;
	-webkit-column-gap: 30px;
	column-count: 2;
	column-gap: 30px;
	margin: 0;
	padding-right: 2%;
	}
	
.directory {
	font-size:.9em;
	line-height:.9em;
	}
	

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

#contentbox {
	float: left;
	height: auto;
	padding: 0%;
	padding-top: 0%;
	padding-right: 1%;
	margin-right: 2%;
	z-index: 12;
	}
	
.portrait {
	float: left;
	width: 50%;
	height: auto;
	margin-right: 6%;
	margin-bottom: 2%;
	margin-top: 12px;
	}


	
#sliderbox {
	float: left;
	width: 100%;
	padding-top: 1%;
	padding: 1%;
	margin-top: -2%;
	margin-left: 0;
	margin-right: 0;
	}

#sliderbox ul {
	content: 0;
	color: #003a7b;
	margin-right: 0;
	padding: 0;
	list-style-position: inside;
	list-style-image: none;
	list-style-type: none;
}

.silo {
	float: left;
	width: 29%;
	height: auto;
	padding: 1%;
	margin-right: 1.5%;
	margin-bottom: 4%;
	margin-top: -1%;
	padding-top: 1%;
			-moz-box-shadow: 5px 5px 5px #666;
		-webkit-box-shadow: 5px 5px 5px #666;
		box-shadow: 5px 5px 5px #666;
		border: 1px solid #CCC;  /* for Chrome */
	}
	
.width20 {
	width: 20%;
	}

.width30 {
	width: 30%;
	}

.width36 {
	width: 36%;
	}		

.width44 {
	width: 42%;
	}

.width50 {
	width: 50%;
	}

.width56 {
	width: 58%;
	}

.width60 {
	width: 60%;
	}

.width64 {
	width: 64%;
	}

.width70 {
	width: 70%;
	}

.width80 {
	width: 80%;
	}
	
.width90 {
	width: 90%;
	}

.top {
	margin-top: 18px;
	}

.rule {
	width: 100%;
	height: 6px;
	border-bottom: 1px solid #CCC;
	margin-bottom: 3%
	}
	
.mobile-show {
	display: none;
	}

.hide {
	display:none;
	}

.news-box {
	float:left;
	width: 96%;
	height: auto;
	padding: 2%;
	border-top: 1px solid #003a7b;
	border-bottom: 2px solid #003a7b;
	margin-top: 1%;
	margin-bottom: 2%;
	background-color:#d9f3ea;
		
	}


.square-photo {
	float:none;
	width: 120px;
	height: 120px;
	border: 1px solid #662200;
	margin-bottom: 1%;
	margin-top: 2%;
	}
	
.recipient-highlights  {
	float:left;
	width: 90%;
	height: auto;
	font-size:.86em;
	line-height:1.4em;
	padding: 3%;
	border-top: 1px solid #003a7b;
	border-bottom: 2px solid #003a7b;
	margin-top: 1%;
	margin-bottom: 3%;
	background-color:#d9f3ea;
			}

.recipient-highlights:hover  {
	background-color:#c0f5e3;
	}

.recipient-photo {
	float: none;
	width: 70%;
	height: auto;
	margin-right: 2%;
	margin-bottom: 2%;
	margin-top: 1%;
	border-radius: 2px 2px 2px 2px;  /* for Chrome */
	}

.photo-blurb  {
	float:left;
	width: 60%;
	height: auto;
	font-size:.86em;
	line-height:1.4em;
	padding: 3%;
	border-top: 1px solid #003a7b;
	border-bottom: 2px solid #003a7b;
	margin-top: 1%;
	margin-bottom: 2%;
	background-color:#d9f3ea;
		
	}

.video {
	width: 100%;
	height: 300px;
	margin-bottom: 4%;
	margin-top: 1%;
	padding: 0;
	}

	

.indented-text {
	margin-left: 5%;
	margin-right: 3%;
	margin-top: 0;
	}

	
.button {
	width: auto;
	float:left;
	margin-right: 1%;
	}
	
#twitterfeed {
	float: left;
	width: 100%;
	height: auto;
	color: #666666;
	}


		
#siderail {
	float: left;
	font-size: .9em;
	height: auto;
	padding-top: 0;
	padding-right: 1%;
	padding-left: 1%;
	margin: 0px;
    color: #333;
	}	
		
.floatright {
	float: right;
	margin-top: 2%;
	}
	
.floatleft {
	float: left;
	margin-right: 2%;
	}
		
	
#footer {
	float: left;
	width: 100%;
	margin-top: 0;
	margin-bottom: 2%;
	padding: 0;
	color:#666;
	font-size: .9em;
	line-height: 1.165em;
	}
	
#footerlogo {
	float: left;
	width: 56px;
	height: 30px;
	background-image: url(../images/MIT-logo-sprite-54x28.gif);
	background-repeat: no-repeat;
	background-position: -168px 0px;
	margin-top:2px;
	margin-right: 2%;	
	}
#footerlogo:hover {
	background-image: url(../images/MIT-logo-sprite-54x28.gif);
	background-repeat: no-repeat;
	background-position: -56px 0px;
	}
	
.footertext {
	float: left;
	margin-left: 0;
	margin-top: 0;
	margin-right: 4%;
	}	


#socialmediawidget {
	float: right;
	margin-top: 1%;
	margin-bottom: 2%;
	margin-right: 4px;
	}
.pdf-icon {
	margin-bottom: -12px;	
	}

#button-container {
	position:relative;
	display: block;
	float: left;
	width: 100%;
	height: auto;
	margin-top: 0;
	margin-left: 0;
	margin-right: 3.5%;
	margin-bottom: 4%;
	}

#button-l-container {
	position:relative;
	display: block;
	float: left;
	width: 50%;
	height: 300px;
	margin-top: 0;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 4%;
	}

#button-container {
	position:relative;
	display: block;
	float: left;
	width: 100%;
	height: auto;
	margin-top: 0;
	margin-left: 0;
	margin-right: 3.5%;
	margin-bottom: 4%;
	}

#button-l-container {
	position:relative;
	display: block;
	float: left;
	width: 40%;
	height: 125px;
	margin-top: 0;
	margin-left: 6%;
	margin-right: 10%;
	margin-bottom: 4%;
	}

#button-r-container {
	position:relative;
	display: inline;
	float: right;
	width: 40%;
	height: 125px;
	margin-top: 0;
	margin-left: 0;
	margin-right: 4%;
	margin-bottom: 4%;
	}

#give-now-button {
	float:clear;
	position:relative;
	width: 129px;
	height: auto;
	font-size:1.6em;
	font-style:italic;
	text-align:center;
	font-weight:bold;
	color: #FFF;
	background-color:#003a7b;
	border-top: 3px solid #CCC;
	border-right: 3px solid #CCC;
	border-bottom: 3px solid #7c7c7c;
	border-left: 3px solid #7c7c7c;
	padding: 2%;
	margin-bottom: 4%;

	}

#give-now-button:hover {
	background-color:#990033;
	border-top: 3px solid #7c7c7c;
	border-right: 3px solid #7c7c7c;
	border-bottom: 3px solid #CCC;
	border-left: 3px solid #CCC;
	color: #003a7b;
	font-weight:normal;
	text-decoration:none;
}

#give-to-mit-button {
	float:clear;
	position:relative;
	width: 129px;
	height: auto;
	font-size:1.6em;
	font-style:italic;
	text-align:center;
	font-weight:bold;
	color: #FFF;
	background-color:#990033;
	border-top: 3px solid #CCC;
	border-right: 3px solid #CCC;
	border-bottom: 3px solid #7c7c7c;
	border-left: 3px solid #7c7c7c;
	padding: 2%;
	margin-bottom: 4%;

	}

#give-to-mit-button:hover {
	background-color:#003a7b;
	border-top: 3px solid #7c7c7c;
	border-right: 3px solid #7c7c7c;
	border-bottom: 3px solid #CCC;
	border-left: 3px solid #CCC;
	color: #990033;
	font-weight:normal;
	text-decoration:none;
}

/* 
#FFFFFF White
#003a7b Deep Blue
#990033 Red-Bown
#d9f3ea Sea Green
*/

#give-now-button a {
	color:#FFFFFF;
}

#give-now-button a:hover {
	color:#d9f3ea;
}

#give-to-mit-button a {
	color:#FFFFFF;
}

#give-to-mit-button a:hover {
	color:#d9f3ea;
}

ul.charity-list a {
	color:#003a7b;
    text-decoration: none;
}

ul.charity-list a:hover {
	text-decoration: underline;
}

@media screen and (max-width: 840px) {
	
#header {
	padding-top: 8%;
	margin-bottom: -2%;
	}
	
#org-name {
	position:relative;
	width: 20%;
	float: left;
	margin-top: -40px;
	margin-left: 1%;
	margin-bottom: -10%;
	margin-right: 4%;
	}

	
.mobile-show {
	display: block;
	}
	
#searchbox {
	padding-top: 2%;
	padding-bottom: 2%;
}

#home-page-left-sidebar {
	display:none;
}

.portrait {
	float: left;
	width: 20%;
	height: auto;
	margin-right: 3%;
	margin-bottom: 2%;
	margin-top: 1%;
	}

.photobox {
	width: 20%;
}

.video {
	width: 66%;
	height: 224px;
	margin-bottom: 4%;
	}
	
.width20,
.width30,
.width40,
.width50,
.width56,
.width60,
.width70,
.width80 {
	width: 94%;
	}	

}

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

#org-name {
	position:relative;
	width: 30%;
	float: left;
	margin-top: -16px;
	margin-left: 3%;
	margin-bottom: 4%;
	margin-right: 4%;
	}


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

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

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

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

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

.photobox {
	width: 26%;
	margin-right: 3%;
}

.portrait {
	float: left;
	width: 30%;
	height: auto;
	margin-right: 5%;
	margin-bottom: 2%;
	margin-top: 1%;
	}

.silo {
	float: left;
	width: 98%;
	margin-bottom: 4%;
}

.columns {
	       -moz-column-count: 1;
       -webkit-column-count: 1;
	}


}

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

#header { /* holds all the header elements: */
	background-image: url(../images/lobby7.png);
	background-repeat: no-repeat;
	background-position: -466px 0px;
	padding-top: 4%;
	margin-bottom: 0%;
	}

#org-name {
	position:relative;
	width: 40%;
	float: left;
	margin-top: 0;
	margin-left: 4%;
	margin-bottom: 1%;
	margin-right: 4%;
	}

#MIT-logo {
	width: 58px;
	height: 33px;
	float: left;
	background-image: url(../images/MIT-logo-white-54x28-shadow.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	}
	
#MIT-logo:hover {
	width: 54px;
	height: 28px;
	background-image: url(../images/MIT-logo-sprite-54x28.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	}	

#footer {
	float: left;
	margin-top: 4%;
	padding-top: 4%;
	margin-bottom: 4%;
	padding: 0;
	}

#footerlogo {
	margin-left: 2%;
	margin-top: 1%;
	margin-bottom:4%;
	margin-right: 3%;	
	}

	
.footertext {
	font-size: .9em;
	line-height: 1.25em;
	margin-bottom: 2%;
	}
		
.margin-left2 {
	margin-left: 2%;
	}
	

.video {
	width: 96%;
	height: 260px;
	margin-bottom: 4%;
	}
	

}