@media screen and (min-width: 480px) {
    body {
        margin:15;
        padding-left:0;
        background-color:#000;
        background-position:left top;
        max-width:950px;
       font-family:'Varela',sans-serif;
           
        color:#DDD;
         background-image:url(../images/tidal_disruption_04.png);
        background-repeat:no-repeat
        
    }

    h1 {
        font-size:60px;
        margin-left:20px;
        color:#DDD;
        margin-top:0%;
        margin-bottom:0%;
        font-family: 'Bebas Neue', cursive;
    }

    h2 {
        font-size:30px;
        margin-left:20px;
        color:#DDD;
        margin-top:0%;
        margin-bottom:1%;
        font-family: 'Bebas Neue', cursive;
    }
}

@media screen and (max-width: 479px) {
body {
    margin:15;
    padding:0;
    background-color:#000;
    background-position:left top;
  	
    font-family:'Varela',sans-serif;
    color:#DDD;
     background-image:url(../images/tidal_disruption_04.png);
    background-repeat:no-repeat
}

h1 {
	font-size:16px;
	margin-left:3%;
	margin-top:15%;
	color:#333;
}

}


#container {
 margin-top:75px;
  max-width:100%;
}

#top {

  display: inline-block; width: 100%;
}

#mainBody {
		font-size:14px;
		line-height:20px;
		max-width:600px;
		text-align:justify;
		padding-left:10px;
		padding-right:15px;
		margin-left: auto;
		margin-right:auto;
}

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

#footer {
    max-width:100%
}

.acknowledgement {
    font-size: 12px;
    font-weight: 400;
    color: #AAA;
}

.copyright {
  font-size: 11px;
  font-weight: 400;
  font-style: italic;
  color: #666;
}

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

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

ul {
  margin           : 0px 0px 0px 0px;
}

hr {
  background       : #CCC;
  height           : 1px;
  width            : 100%;
}

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

.title {
font-family: sans-serif;
font-size: 24px;
font-weight: bold;
color            : #666;
}

.pathway {
  color: #AAA333;
}

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

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

/* -- Menus -- */
 @media screen and (min-width: 380px) {
 
	.menu {
		font-family:'Varela Round',sans-serif
		display: -webkit-flex; /* Safari */
		-webkit-flex-wrap: wrap; /* Safari 6.1+ */
		display: flex;
		flex-wrap: wrap;
	}

	ul.menu {
	  list-style: none;
	  width:65%;
	  text-align: center;
	 max-width:620px;
		
		padding-left:0px;
		padding-right:0px;
		margin-left: auto;
		margin-right:auto;
	}

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

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

 @media screen and (max-width: 380px) {
 
	.menu {
		font-family:'Varela Round',sans-serif
	}

	ul.menu {
	  list-style: none;
	  width:100%;
	  text-align: left;
	}

	.menu li
	{
	  font-size:14px;
	  line-height:20px;
	}

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




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

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

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

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

/* -- ////////////////// -- */
    
table.moduletable {
        margin: 0px 0px 0px 0px;
        width: 95%;
        border-left: solid 0px #666;
        border-right: solid 0px #666;
        border-top: solid 0px #666;
        border-bottom: solid 0px #666;
        }

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;
}

carousel-wrapper {
	width: %100;
	height:%100;
}

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

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

/* 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;
  font-weight: bold;
  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: #DDD;
}

.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;
}