/*CSS for pages
Use
<link rel="stylesheet" type="text/css" href="main.css">
to link.
*/

/*Basic Styles*/

BODY{
  background-color: #FFFFFF;
  margin-left:20px;
  margin-top:10px;
  margin-right:20px;
  margin-bottom:10px;	
  color:#333333;
  
}

h1 {
	color: #FD8F00;
	font-size: 24px;
	font: Arial;
}

h2 {
	color: #333333;
	font-size: 18px;
	font: Arial;
}

h3 {
	color: #000000;
	font-size: 14px;
	font: Arial;
	font-weight: normal;

}

hr {
	border-top:1px dashed #000000;
}


/*Menu Bar Styles*/

ul {
    list-style-type: none;
	padding: 0px;
}

li {
    float: left;
	list-style: none;
    border-right:2px solid #000000;
	font-size: 20px;
	background-color: #DBDBDB;
	overflow:hidden;
}

li:first-child {
	border-left: 2px solid #000000;
}

li a {
    display: block;
    color: black;
    text-align: center;
    padding: 10px 10px;
    text-decoration: none;
	height: 25px;
}

li a:hover:not(.active) {
    background-color: #F0F0F0;
}

.active {
    background-color: #AAB3F4;
}
 
 
 /*Button Style*/
 
 .dlbutton {
    background-color: #FFFFFF;
    border: solid;
    border-width: thin;
    border-color: #777777;
    border-radius: 10px;
    color: black;
    padding: 1px 6px;
    text-align: center;
    display: inline-block;
    font-size: 13px;
    cursor: pointer;
}

.dlbutton:active {
    background-color: #CCCCFF;
    font-weight: bold;
}

.dlbutton:hover {
    background-color: #CCCCFF;
}


/*Video Stuff*/

.viddesctext {

    border: 1px solid rgb(136, 136, 136);
    width: 60%;
    height: 150px;
    font-family:Arial;
    color:black;
    font-size:12px;
    resize:both;
    /*Need to use togglevisibility(id) from functions.js to show its hidden by default, or use none=inline to show*/
    display:none;
}

/*Makes the video grow bigger/smalle while keeping aspect ratio*/
.expandingiframe {
    width: 80vw; 
    height: 60vw; /* 100/56.25 = 560/315 = 1.778 */
    max-width: 600px;
    max-height: 450px;
}