h1 {color: /*#330099;*/ #660099;
font-family: "Lucida Grande", sans-serif;
font-size: 20pt;}

body {
	font-family: "Verdana", sans-serif;
	margin-left: 8%; 
	margin-right: 8%; 
	margin-top: 0px;
	line-height: 1.2;
	}

audio {
	width:100%;
}


/*#content {background-color: #CCCCCC}*/

h2 {color: /*#00CC00*/#339933; font-size: 14pt}

h3 {color: #FF0000/*#660000*/}

h4 {color: #6633FF; font-size: 14pt}

h5 {color: #9900FF; font-size: 14pt;}

h6 {color: #000000; font-size: 8pt;}

/*p {color: #9900CC}*/

A {text-decoration:none}

A:link {color: /*#3300CC*/#009900;}

A:visited {color: #996600;}

A:hover {color: #660066;}

li {line-height: 200%}

e {color: #009900}

d {color: #9900FF}

n {color: #FF0000}

m {color: #9900CC}

.goto {background: #33CC66; width: 100%; border-spacing: 20px}

.gocell {background: #FFFF66; padding: 20px; font-weight:bold;}

.empty {float: left;}

.wdwk {background: #FFCCFF; border="1"; cellpadding="10";}

.grwk {font-family: sans-serif; background: #CCFFFF}

.irvb {font-family: sans-serif; background: #CCFF66; text-align: center;}

.grn {background: #CCFFCC;  border: 1; cellpadding: 10;}

.ochre {background: #FF9933;  border: 1; cellpadding: 10;}

.qn {font-family: sans-serif; font-weight: 900; background: #FFFF66}

.fl {float: left; margin: 10px;}

.green {
	background-color: green;
	color: #000000;
	margin: 5px;
	padding: 5px;
	border-radius: 5px;
	border-style: solid;
	border-width: 1px;
	display: inline-block;
	}

#navigation-bar {
	background-color: #CCCCFF; 
	font-family: sans-serif
	}

hr.f {border: none 0; 
	border-top: 3px double #c00;
	width: 100%;
	height: 3px;
	margin: 10px auto 0 0;
	}	
	
hr.b { 
	background-color: blue; 
	height: 2px; 
	border: 0; 
	}

div.artl {margin-left: 100px; margin-right: 250px;}

table {width: 100%; table-layout: fixed; border: 1px solid black;}

th {color: #FF0000/*#660000*/}

tr {vertical-align:text-top;}

td {padding: 10px; border: 1px solid black;}

.menu1 {
	background-color: #CCCCFF;
	color: #006600;
	width: 120px;
	height: 60px;
	float: left;
	margin: 5px;
	padding: 5px;
	border-radius: 5px;
	text-align:center;
	vertical-align: middle;
}

.doneInClass {
	background-color: #FFFF66;
	color: #006600;
	width: 120px;
	height: 60px;
	float: left;
	margin: 5px;
	padding: 5px;
	border-radius: 5px;
	text-align:center;
}

.myClass {
	background-color: #6495ED;
	color: #006600;
	width: 120px;
	height: 60px;
	float: left;
	margin: 5px;
	padding: 5px;
	border-radius: 5px;
	text-align:center;
}

.clear {
	clear: left;
}

.menu2 {
	background-color: #D0D0D0;
	/*color: #006600;
	*/width: 240px;
	height: 40px;
	float: left;
	margin: 5px;
	padding: 5px;
	border-radius: 5px;
	text-align:center;
}

.menu3 {
	background-color: #1DCFC9;
	/*color: #006600;
	*/width: 240px;
	height: 40px;
	float: left;
	margin: 5px;
	padding: 5px;
	border-radius: 5px;
	text-align:center;
}

.menu4 {
	background-color: #CCCCFF;
	color: #006600;
	width: 120px;
	height: 60px;
	float: left;
	margin: 5px;
	padding: 5px;
	border-radius: 5px;
	text-align:center;
      font-family: sans-serif;
	font-size: 12pt;
}

.menu4b {
	background-color: #CCCCFF;
	color: #006600;
	width: 120px;
	height: 20px;
	float: left;
	margin: 2px;
	padding: 5px;
	border-radius: 5px;
	text-align:center;
      font-family: sans-serif;
	font-size: 12pt;
}
      
.menu5  {
	background-color: #CCFFFF;
	margin: 5px;
	padding: 5px;
	border-radius: 5px;
	border-style: solid;
	border-width: 1px;
	display: inline-block;
}
     
.ans  {
	background-color: #ffcccc;
	color: #000000;
	margin: 5px;
	padding: 5px;
	border-radius: 5px;
	border-style: solid;
	border-width: 1px;
	display: inline-block;
}

.menu6 {
	background-color: #FF99FF;
	color: #000000;
	width: 120px;
	height: 60px;
	float: left;
	margin: 5px;
	padding: 5px;
	border-radius: 5px;
	text-align:center;
      font-family: sans-serif;
	font-size: 12pt;
}

.spotify {
	background-color: #99CCFF;
	color: #000000;
	margin: 5px;
	padding: 5px;
	border-radius: 5px;
	border-style: solid;
	border-width: 1px;
	display: inline-block;
}

      
.hw {
	color: #9900FF;
	font-family: sans-serif;
	font-weight: bold;
}

.title {
	color: #9900FF;
	font-family: sans-serif;
	font-weight: bold;
}

           
      
.footer {
    position: fixed; 
    z-index: -1;
    top: 105px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 90px;
    width: 25px;
    background-color: /*#FF9999#3333CC*/#33CC66;
    font-weight: bold;
    font-size: 25px;
    text-align: center;
}

.hw-cl {background: #FFFF66; padding: 20px; font-weight:bold; border-radius: 5px; border-style: solid; border-width: 1px; display: inline-block;}

.del {text-decoration:line-through;}

.compr  {

	width:100%; border-style:hidden; border-collapse:collapse;
}	

table, td, th { border: 1px solid gray;}

.al-rt {
	text-align:right;
	}
	
.al-centre {
	text-align:center;
	}
	
.italic {
	font-style: italic;
	}
	
.bold {
	font-weight: bold;
	}		

.indent {
  text-indent: 20px;
}

.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 90%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  font-weight: bold;
}

/*
attempt to get html pop ups

.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
  background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  width: 280px;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

*/


/*
audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure {
  max-width: 100%;
}


audio {
	width:100%;
}


@media only screen and (min-width: 300px) {
    /* For phones:
    
    body {
    	margin:0px;
    }
    
}    	
    

@media only screen and (min-width: 600px) {
    /* For tablets:


@media only screen and (min-width: 768px) {
    /* For desktop: 
    
    



* {
    box-sizing: border-box;
}

[class*="col-"] {
    float: left;
    padding: 15px;
    border: 1.5px solid purple;
    width: 100%;
}

.row:after {
    content: "";
    clear: both;
    display: block;
}

@media only screen and (min-width: 600px) {
    /* For tablets: 
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: 
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

.col-m-* {
	
}	
*/