/*** CSS OUTPUT LOCALLY FROM SCSS AND MODIFIED FOR CODEPEN ***/


/*** There are a lot of things about Superfish that I don't love;
     in particualar, I don't love the mobile application. Further
     modification would be needed to make the mobile-nav a click-
     based setup even in a touch-free environment. Anyway, this is
     the fastest solution to style but not necessearily the best
     responsive pattern. Still, it's functional enough for the
     purposes that the question asker needed. ***/


/*** Get Google font for menu ***/

@import url("https://fonts.googleapis.com/css?family=Droid+Sans:400,700");

/*** Initialize the icon font (home & menu button) ***/

@font-face {
    font-family: 'mindshare';
    src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/72900/mindshare.eot?95499031");
    src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/72900/mindshare.eot?95499031#iefix") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/72900/mindshare.woff?95499031") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/72900/mindshare.ttf?95499031") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/72900/mindshare.svg?95499031#mindshare") format("svg");
    font-weight: normal;
    font-style: normal;
}

:root {
  --background-color: #f4f4f4;
  --branding-color: #2d2d2d;
  --date-search-color: #fcfcfc;
  --shadow-top-left-color: #3a3a3a;
  --shadow-bottom-right-color: #202020; 
  --menu-text-color: #dddddd;
  --menu-arrows-color: #dddddd;
  --lines-color: darkgreen; /* #dd374e*/
}

/*** Theme Styles **/
html {
    box-sizing: border-box;
}

body {
	background: var(--background-color);
    margin: 20px 30px;
}

@media screen and (max-width: 785px) {
    body {
        margin: 0;
    }
}

.wrapup {
    max-width: 1045px;
    margin: 0 auto;
}

.wrap {
    max-width: 1045px;
    margin: 0 auto;
    padding-left: 5px;
    padding-right: 5px;
}

header.global {
    /* Begin modifications to Superfish menu */
}

header.global .date-search {
    height: 10px;
    background: var(--date-search-color);
    border-top: 3px solid var(--lines-color);
}

header.global .bar {
    height: 0px;
    border-top: 3px solid var(--lines-color);
}

header.global .branding {
    background: var(--branding-color);
    height: 120px;
    overflow: none;
    border-top: 4px solid var(--lines-color);
}

header.global .branding h1 {
    margin: 0;
}

.h3inline {
  display: inline;
}
@media screen and (max-width: 400px) {
	.logo-cell {
		text-align: center;
		vertical-align: middle;
		width: 25%;
	}
	.univ-cell {
		text-align: center;
		vertical-align: middle;
		width: 27%;
	}
	.labname-cell {
		text-align: center;
		vertical-align: middle;
		width: 50%;
	}
	.labnamediv {
		margin: 0 0 0 0;
		font-family:Arial;
		color: white;
		font-size: 80%;
	}
}

@media screen and (min-width: 401px) and (max-width: 785px) {
	.logo-cell {
		text-align: center;
		vertical-align: middle;
		width: 25%;
	}
	.univ-cell {
		text-align: center;
		vertical-align: middle;
		width: 20%;
	}
	.labname-cell {
		text-align: center;
		vertical-align: middle;
		width: 52%;
	}
	.labnamediv {
		margin: 0 0 0 0;
		font-family:Arial;
		color: white;
		font-size: 100%;
	}
}

@media screen and (min-width: 785px) {
	.logo-cell {
		text-align: center;
		vertical-align: middle;
		width: 17%;
	}
	.univ-cell {
		text-align: center;
		vertical-align: middle;
		width: 15%;
	}
	.labname-cell {
		text-align: center;
		vertical-align: middle;
		width: 68%;
	}
	.labnamediv {
		margin: 0 0 0 0;
		font-family:Arial;
		color: white;
		font-size: 100%;
	}
}


.logo {
	margin: 0 0 0 0;
	max-width: 100%;
}
.univ {
	margin: 0 0 0 0;
	max-width: 100%;
}