/* CSS rules written by Tom Pixton, October 2018 */

.container { /* changes the default max 1130px page size to 1060 */
    width: 100%;
    max-width: 1060px;
}

#page {
    opacity: 0.86;
    font-family: 'Raleway', sans-serif;
    border-top-color: #237d40;
    font-size: 1em;
    line-height: 1.4em;
}

#site-name { /* hides the default html site name so we can display the custom wordmark instead */
    display: none;
}

#mit-header-logo { /* hides the default MIT logo at upper right so we can display the custom MIT logo instead */
    display: none;
}

.region-header { /* floats the elements in the header left (duh). Why this is float:right to begin with is a mystery */
    float: left;
    margin-top: 0;
    padding: 0;
    width: 100%;
    margin-bottom: -2%;
}

header .block-search { /* floats the search box to the right  */
    padding: 0px;
    margin: 0;
    float: right;
    margin-bottom: 0;
    margin-top: -48px;
}


#working-green-word-mark  { /* the custom wordmark at the upper left (see Blocks) */
    display: block;
    position: relative;
    float: left;
    margin-top: -1%;
    width: 352px;
    height: 90px;
	background-image: url(/sites/default/files/images/working-green-wordmark-s-off.svg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
    background-size:100%;
}

#working-green-word-mark:hover  { /* the custom wordmark at the upper left (see Blocks) */
    display: block;
    position: relative;
    float: left;
    margin-top: -1%;
    width: 352px;
    height: 90px;
	background-image: url(/sites/default/files/images/working-green-wordmark-s-on.svg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
    background-size:100%;
}

#working-green-mit-logo  { /* the custom green MIT logo at the upper right (see Blocks) */
    display: block;
    position: relative;
    float: right;
    width: 72px;
    height: 54px;
    margin-top: -96px;
    background-image: url(/sites/default/files/images/MIT-green-blue-logo.svg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
    background-size:100%;
}

#working-green-mit-logo:hover  { /* rollover state of the custom green MIT logo at the upper right (see Blocks) */
    background-image: url(/sites/default/files/images/MIT-green-blue-logo-on.svg);
}


#page > footer { /* Makes the footer background solid #5e5656  */
    border-top: 0px solid #ccc;
    background-color:#5e5e56;
    margin: 0 0 -3%;
    padding: 3.2%;
    box-shadow: 4px 4px 4px #333;
}

#mit-footer-logo img { /* changes the MIT logo from the default red-nad-black to the light-gray-and-white (the logo file is my 6-piece sprite) */
    left: -223px;
}

#mit-footer-logo a:hover img {
    left: -279px;
}

#mit-footer-text {
    color: #ededed;
    margin-top: -3px;
    margin-left: 0;
    font-weight: 600;
}

.footer-text {
    color: #fff;
    margin-top: -3px;
    margin-left: 0;
    font-weight: 600;
    margin-right:60px;
}

.footer-text a {
    color: #fff;
}

#mit-footer { /* width of the footer text block  */
    width: 420px;
}

.mit-text { /*  I have no idea what this is but it's locked in the core CSS and was set to 274 for the width of the footer text block. WTF?  */
    max-width: 374px;
}

/*  menu styles  */

#menu-bar {
    padding:0;
    margin:0;
}

#primary-menu-bar, #menu-bar #block-system-main-menu.block-menu .menu-wrapper {
    background-color:rgba(255,255,255,0.0); /* removes background color of menu */
    border: 0px;
    margin-bottom: 1%;
}

#primary-menu-bar nav .menu a, #menu-bar #block-system-main-menu.block-menu .menu a {
    color: #237d40;
    text-decoration: none;
    font-size: 1.2em;
    margin-top:0px;
}

primary-menu-bar nav .menu a:hover, #primary-menu-bar nav .menu li:hover > a, #menu-bar #block-system-main-menu.block-menu .menu a:hover, #menu-bar #block-system-main-menu.block-menu .menu li:hover > a, #primary-menu-bar nav .menu a.active-trail, #menu-bar #block-system-main-menu.block-menu .menu li.active-trail > a {
    background-color:rgba(255,255,255,0);
    color: #16407f;
}


#menu-rule { /* green rule below menu items - supressed below 680 - see below */
    display: block;
    position: relative;
    float: left;
    margin-left: -.4%;
    margin-right: -.2%;
    margin-bottom: 2%;
    width: 101%;
    height: 3px;
    background-color: #237d40;
}

#secondary-menu-bar, #menu-bar nav.block-menu {
    margin-bottom: 0;
    margin-top: 0;
}

.responsive-menus.responsified span.toggler, .responsive-menus.responsified .responsive-menus-simple li a { /* the mobile menu */
    background-color: #237d40;
    color: #FFF;
    text-transform: none;
    font-size: 1.2em;
    font-weight: 700;
}

.responsive-menus.responsified {
    margin-bottom: 4%;
}

#primary-menu-bar nav .menu .menu, #menu-bar #block-system-main-menu.block-menu .menu .menu { /* background color of the lower-level hover menu */
    background-color: #fff;
    padding: .6% 1% .6% 0;
}

.region-sidebar-first {
    width: 18%;
    margin-left: -98.5%;
    margin-top:-2.5%;
}

/*  text styles */

p {
    margin: 0 0 .6em;
    padding: 0;
}

h1, h2, h3 {
color: #237d40;
}

h1 {
    font-size: 1.5em;
}

h2 {
    font-size: 1.1em;
    margin-top:1.1em;
    margin-bottom:.3em;
}

h3 {
    font-size: .9em;
    margin-top:.9em;
    margin-bottom:.2em;
}

.no-top-margin {
    margin-top:0;
}

.callout {
    font-size: 1.14em;
    line-height:1.5em;
    color: #16407f;
    font-weight:500;
    font-style:italic;
}

.finial:after  { /* displays the leaf icon at the end of a paragraph of text */
    content: "";
    display: inline-block;
    margin-top: -10px;
    margin-bottom: -4px;
    width: 54px;
    height: 32px;
	background-image: url(/sites/default/files/images/working-green-leaf-solid.svg);
	background-repeat: no-repeat;
	background-position: 2px 4px;
    background-size:52%;
}

.columns {
	-moz-column-count: 2;
	-moz-column-gap: 24px;
	-webkit-column-count: 2;
	-webkit-column-gap: 24px;
	margin: 0;
	padding-right: 2%;
	-webkit-hyphens: none;
    -moz-hyphens: none;
    hyphens: none;
	display:inline-block;
	}

.divider {
    width: 100%;
    clear: both;
    height:2px;
    border-bottom: solid 1px #237d40;
    margin-bottom: 2px;
}

/* adjust width and spacing of main content area and right sidebar  */

#content-column {
    width: 98%;
    margin-right: 1%;
}

.region-sidebar-second {
    width: 22%;
    margin-left: -23%;
}

.logo-display {
    width: 50%;
    height: auto;
    padding:4%;
}

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

#menu-rule { /* green rule below desktop menu items */
    display: none;
}

.region-sidebar-first {
width: 100%;
margin-left: 0;
margin-top: 0;
border-top: 1px solid #CCC;
padding-top: 2%;
}

.region-sidebar-second {
width: 100%;
margin-left: 0;
margin-top: 0;
border-top: 1px solid #CCC;
padding-top: 2%;
}

.menu-level-2 { /* hides the left-side sub-menu on mobile */
display: none;
}

.sidebar .block-title {
    display: none;
}

.logo-display {
    width: 65%;
    height: auto;
}

}

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

#working-green-word-mark {
    width: 280px;
    height: 74px;
    background-size: 100%;
}

#working-green-mit-logo {
    margin-top:-12px;
    margin-right:12px;
}

header .block-search {
    margin-bottom: 24px;
    margin-top: -16px;
    float: left;
}

#mit-footer-logo {
    margin-top: 0;
    float: none;
    margin-bottom: 4%;
}

.logo-display {
    width: 80%;
    height: auto;
}

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

}