body
 {
    font-size:125%;
    font-family:monospace;
    background-color: #000000;
    color:#E2FA00;   
}

h1,h2,h3,h4,h5,h6
{
    text-align:center;
}



table.menu 
{
    
    position:fixed;
    top:0px;
    left:5px;
    border-collapse:collapse;   
}

table.advert 
{
    
    position:fixed;
    top:0px;
    right:5px;
    border-collapse:collapse;   
}
table.myBanner
{
    
    position:relative;
    margin-left:auto;
    margin-right:auto;
    border-collapse:collapse;  
    
}

table.myBody
{
    position:relative;
    top:0px;
    left:170px;
    margin-right:170px;
    /*margin-right:300px; margin for ads*/
    background-color:#000000;
}

a:link
{
    color:#93A300;
    
}
a:visited
{
    color:#AEBC2F;
    
}
a:hover
{
    color:#EAFD3F;
}
a:active
{
    color:#EFFD72;
   
}

a:link.myMenu,a:visited.myMenu
{
    display:block;
    font-weight:bold;
    color:#000000;
    background-color:#E2FA00;
  
    text-align:center;
    text-decoration:none;
}
a:hover.myMenu,a:active.myMenu
{
    background-color:#7A991A;
}

a:link.subSec,a:visited.subSec
{
    display:block;
    font-weight:bold;
    color:#000000;
    background-color:#22ff00;
  
    text-align:center;
    text-decoration:none;
}
a:hover.subSec,a:active.subSec
{
    background-color:#11DD00;
}b
ody
 {
    font-size:125%;
    font-family:monospace;
    background-color: #000000;
    color:#E2FA00;   
}

h1,h2,h3,h4,h5,h6
{
    text-align:center;
}



table.menu 
{
    
    position:fixed;
    top:0px;
    left:5px;
    border-collapse:collapse;   
}

table.advert 
{
    
    position:fixed;
    top:0px;
    right:5px;
    border-collapse:collapse;   
}
table.myBanner
{
    
    position:relative;
    margin-left:auto;
    margin-right:auto;
    border-collapse:collapse;  
    
}

table.myBody
{
    position:relative;
    top:0px;
    left:170px;
    margin-right:170px;
    /*margin-right:300px; margin for ads*/
    background-color:#000000;
}

a:link
{
    color:#93A300;
    
}
a:visited
{
    color:#AEBC2F;
    
}
a:hover
{
    color:#EAFD3F;
}
a:active
{
    color:#EFFD72;
   
}

a:link.myMenu,a:visited.myMenu
{
    display:block;
    font-weight:bold;
    color:#000000;
    background-color:#E2FA00;
  
    text-align:center;
    text-decoration:none;
}
a:hover.myMenu,a:active.myMenu
{
    background-color:#7A991A;
}

a:link.subSec,a:visited.subSec
{
    display:block;
    font-weight:bold;
    color:#000000;
    background-color:#22ff00;
  
    text-align:center;
    text-decoration:none;
}
a:hover.subSec,a:active.subSec
{
    background-color:#11DD00;
}



#matrix
{
	position: relative;
	background:#6aa8ff;
	width: 800px;
	height: 600px;
	
}

.matrixButtOn
{
	background:#FFFFFF;
	width:25px;
	height:25px;
	position:absolute;
}

.matrixButtOff
{
	background:#000000;
	width:25px;
	height:25px;
	position:absolute;
}

.playButton
{
	background:#000000;
	width:800px;
	height:600px;
	position:absolute;
	font-size:300px ;
	color: #ffff00;
	z-index:2;
}


.playButtoff
{
	background:#000000;
	width:0px;
	height:0px;
	position:absolute;
	z-index:-2;
}

.scrubber
{
	background:#FF0000;
	width:30px;
	height:600px;
	position:absolute;
}

.offsets
{
	color:#000000;
	background:#FFFFFF;
	width:25px;
	height:25px;
	position:absolute;
	font-size:20px ;
	text-align: center;

}

.octave
{
	color:#000000;
	background:#FFFFFF00;
	font-size:50px ;
	width:25px;
	height:25px;
	position:absolute;
}

.subdivisions
{
	color:#000000;
	background:#FFFFFF00;
	width:25px;
	height:25px;
	position:absolute;
}
.upTriangle
{
		background-image: url("triangle.svg");
		background-size: contain;
	position:absolute;

}

.downTriangle
{
		background-image: url("triangle.svg");
		background-size: contain;
		filter:invert(1);
		rotate:180deg;
	position:absolute;

}