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

	body {
		margin:0;
		padding-left:0;
		background-color:#FFF;
		background-position:left top;
		max-width:100%;
		font-family:'Varela',sans-serif;
		color:#000;
		background-repeat:no-repeat
	}

	h1 {
		font-size:24px;
	
		color:#000;
		margin-top:0%;
	}
	
	
	#mainBody {
		font-size:15px;
		line-height:20px;
		max-width:85%;
		text-align:justify;
		margin-left: auto;
		margin-right:auto;
	}
	
	#abstract{
  		margin-top:2px;
  		max-width:100%;
	}

	#overview, #biosensing, #bios, #genpoetry, #bringingittogether {
  		max-width:100%;
  		padding-top:55px;
	}
	
	.title {
		font-family: sans-serif;
		font-size: 36px;
		font-weight: bold;
		color: #444;
  		padding-top:10px;
	}
	
	iframe {
		width:100%;
	}
	
	.menu {
		font-family:'Varela Round',sans-serif;
		
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
  		background-color: #fff;
  		position: fixed; /* Set the navbar to fixed position */
  		top: 0; /* Position the navbar at the top of the page */
  		width: 100%; /* Full width */
  		
	}

	ul.menu {
	  list-style: none;

	  text-align: left;
	 	max-width:90%;
		
		padding-left:6%;
		margin-left: auto;
		margin-right:auto;
	}

	.menu li
	{
	  font-size:14px;
	  line-height:20px;
	  display: inline;
	  padding-right:20px;
	  padding-left:15px;
	}

	a.menu:link,a.menu:visited {
		color:#666;
		font-weight:700;
	}


/* ------ */

@media screen and (max-width: 479px) {
	body {
 	   margin:0;
 	   padding:0;
  	   background-color:#FFF;
  	   background-position:left top;
  	   font-family:'Varela',sans-serif;
 	   color:#000;    
 	   background-repeat:no-repeat
	}

	h1 {
		font-size:24px;
		line-height:26px;
		margin-left:3%;

		color:#000;
	}
	
	#mainBody {
		font-size:18px;
		line-height:22px;
		max-width:85%;
		text-align:justify;

		margin-left: auto;
		margin-right:auto;
	}
	
	#abstract{
  		margin-top:2px;
  		max-width:100%;
	}

	#overview, #biosensing, #bios, #genpoetry, #bringingittogether {
  		max-width:100%;
  		padding-top:150px;
	}
	
	.title {
		font-family: sans-serif;
		font-size: 36px;
		font-weight: bold;
		color: #444;
  		padding-top:140px;
	}
	
	iframe {
		width:100%;
	}
	
	.menu {
		font-family:'Varela Round',sans-serif;
		
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
  		background-color: #fff;
  		position: fixed; /* Set the navbar to fixed position */
  		top: 0; /* Position the navbar at the top of the page */
  		width: 100%; /* Full width */
  		
	}

	ul.menu {
	  list-style: none;

	  text-align: left;
	 	max-width:100%;
		
		margin-left: auto;
		margin-right:auto;
	}

	.menu li
	{
	  font-size:18px;
	  line-height:40px;
	  padding-right:20px;
	  padding-left:15px;
	  display: inline;
	}

	a.menu:link,a.menu:visited {
		color:#666;
		font-weight:700;
	}


/* -------------------------------------- */
#container {
  margin-top:2px;
  max-width:100%;
}

#top {
  display: inline-block; 
  width: 100%;
}

#bottom {
  max-width:100%;
  height: 25px;
  background-position:right top;
  background-repeat: no-repeat; 
  clear: both;
}

#footer {
    max-width:100%
}

.copyright {
  font-size: 12px;
  font-weight: 400;
  font-style: italic;
  color: #666;
  padding-left:40px;

}

a:link, a:visited {
  color            : #448;
  text-decoration  : none;
  font-weight: bold;
}

a:hover {
  color            : #000;
  text-decoration  : none;
  font-weight: bold;
}

td, tr, p, div {
  color            : #000;
}

img {
	border: 0 none;
	max-width: 100%;
	height: auto;
	width: auto\9;/* ie8 */
}

/*
ul {

}
*/

hr {
  background       : #CCC;
  width            : 50%;
}

.boxes {
        border: dotted;
        border-width: 1px;
        border-bottom-color: #B0C4DE;
        border-top-color: #B0C4DE;
        border-left-color: #B0C4DE;
        border-right-color: #B0C4DE;
}

.pathway {
  color: #AAAFFF;
}

a.pathway:link, a.pathway:visited {
  color            : #666;
  font-weight      : normal;
}

a.pathway:hover {
  color            : #336666;
  font-weight      : normal;
  text-decoration   : underline;
}

/* -------------------------------------- */

a.mainlevel:link, a.mainlevel:visited {
    font-size:14px;
        color: #666;
    float: left; 
        font-weight: bold;
    padding-right: 12px;
    vertical-align:bottom;
 }

a.mainlevel:hover {
        color: #000;
        }

a.sublevel:link, a.sublevel:visited {
        color: #666; 
    
        font-weight: bold;
}

a.sublevel:hover {
        color: #000;
     
        }

/* -------------------------------------- */
    
table.moduletable {

        width: 95%;

        }

table.moduletable th {

  font-weight      : bold;
  color            : #666;
  text-align       : left;
  width            : 100%;
}

/*
table.moduletable td {

        }
        */

.poll {
  font-size        : 10px;
  color            : #666;
  line-height      : 14px;
}

/* -------------------------------------- */
.sectiontableheader {
  
  color            : #666;
  font-weight      : bold;
}
/*

.sectiontableentry1 {
  
}

.sectiontableentry2 {
 
}
*/
/* -------------------------------------- */
.small {
  font-size        : 10px;
  color            : #3366C0;
  text-decoration  : none;
  font-weight      : medium;
}

.smalldark {
  font-size        : 10px;
  color            : #666;
  text-decoration  : none;
  font-weight      : normal;
}
/* -------------------------------------- */
.contentpane {
font-weight: normal;
}

.contentpaneopen {
font-weight: normal;
}

.contentheading, .componentheading {
  
  font-size        : 11px;
  font-weight      : bold;
  color            : #666;
  text-align       : left;
}

.createdate {
  
  font-size        : 10px;
  color            : #999999;
  text-align       : left;
}

.button {
  
  font-style       : normal;
  font-size        : 10px;
  font-weight      : bold;
  background-color : #F0F0F0;
  color            : #666;
  border           : 1px solid #CCC;
}

.inputbox {
  
  font-size        : 10px;
  color            : #666;
  background-color : #F0F0F0;
  border           : 1px solid #CCC;
}

/* -------------------------------------- */
/* For content item titles that are hyperlink instead of Read On */
a.contentpagetitle:link, a.contentpagetitle:visited {
  
  font-size: 13px;
  font-weight: bold;
   color: #666;
  text-align:left;
  }

a.contentpagetitle:hover {
  
  font-size: 13px;
  text-align:left;
  color: #336666;
  text-decoration: underline;
  font-weight: bold;
  }

a.category:link, a.category:visited {
  color            : #666;
  font-weight      : bold;
}

a.category:hover {
  color            : #336666;
}

/* -------------------------------------- */
/* Styles for dhtml tabbed-pages */
.ontab {
  background-color: #ffae00;
  border-left: outset 2px #ff9900;
  border-right: outset 2px #808080;
  border-top: outset 2px #ff9900;
  border-bottom: solid 1px #d5d5d5;
  text-align: center;
  cursor: hand;
  font-weight: bold;
  color: #000;
}

.offtab {
  background-color : #e5e5e5;
  border-left: outset 2px #E0E0E0;
  border-right: outset 2px #E0E0E0;
  border-top: outset 2px #E0E0E0;
  border-bottom: solid 1px #d5d5d5;
  text-align: center;
  cursor: hand;
  font-weight: normal;
}

/*
.tabpadding {
}
*/

.tabheading {
  background-color: #ffae00;
  text-align: left;
}

.pagetext {
  visibility: hidden;
  display: none;
  position: relative;
  top: 0;
}

/* -------------------------------------- */
/* for modifying {moscode}
 output.  Don't set the colour! */
.moscode {
  background-color: #f0f0f0;
}

/* Text passed with mosmsg url parameter */
.message {
  
  font-weight: bold;
  font-size : 10pt;
  color : #ff6600;
  text-align: center;
}

  }}