/* Global Styles */

    body {
    	margin:0px;
    	}
    	
    td {
    	font:8px Arial, Helvetica, sans-serif;
    	color:#666666;
    	}
    	
    a {
    	color: #993300;
    	}
    	
    a:hover {
    	color: #5C743D;
    	}
    
/* ID Styles */
    
    #navigation td {
    	border-bottom: 1px solid #F4FFE4;
    	}
    	
    #navigation a {
    	font: bold 8px Arial, Helvetica, sans-serif;
    	color: #D5EDB3;
    	line-height:16px;
    	letter-spacing:.1em;
    	text-decoration: none;
    	display:block;
    	padding:8px 6px 10px 20px;
    	}
    	
    #navigation a:hover {
    	background: #99CC66;
    	color:#993300;
    	}
    	
    #logo 	{
    	font:24px Arial, Helvetica, sans-serif;
    	color: #5C743D;
    	letter-spacing:.2em;
    	line-height:30px;
    	}
    
    #tagline 	{	
    	font:50px Arial, Helvetica, sans-serif;
    	color: #993300;
    	letter-spacing:.2em;
    	line-height:30px;
    	}
    
    #monthformat {
    	border-bottom: 1px dashed #5C743D;
    	}
    		
    #dateformat {
    	font:8px Arial, Helvetica, sans-serif;
    	color: #993300;
    	letter-spacing:.2em;
    	}
    	
    #dateformat a {
    	font:8px Arial, Helvetica, sans-serif;
    	color: #993300;
    	font-weight:bold;
    	letter-spacing:.1em;
    	text-decoration:none;
    	}
    	
    #dateformat a:hover {
    	color: #F4FFE4;
    	letter-spacing:.1em;
    	}
    	
/* Class Styles */
    	
    .bodyText {
    	font:14px Arial, Helvetica, sans-serif;
    	color:#666666;
    	line-height:20px;
    	margin-top:0px;
    	}
    	
    .pageName{
    	font: 18px Arial, Helvetica, sans-serif;
    	color: #99CC66;
    	line-height:26px;
    	letter-spacing:.21em;
    	}
    	
    .subHeader {
    	font:14px Arial, Helvetica, sans-serif;
    	color: #993300;
    	line-height:22px;
    	letter-spacing:.2em;
    	}
    
    .quote {
    	font: 14px Arial, Helvetica, sans-serif;
    	color: #759DA1;
    	line-height:30px;
    	}
    	
    .smallText {
    	font: 12px Arial, Helvetica, sans-serif;
    	color: #666666;
    	line-height: 22px;
    	}
    	
    .navText {
    	font: 12px Arial, Helvetica, sans-serif;
    	color: #003366;
    	line-height:16px;
    	letter-spacing:.1em;
    	text-decoration: none;
    	}

		body {font-family: Arial, Helvetica, sans-serif;}

/* Full-width input fields */
		input[type=text], input[type=password] {
		  width: 100%;
		  padding: 2px 0px;
		  margin: 1px 0;
		  display: inline-block;
		  border: 1px solid #ccc;
		  box-sizing: border-box;
		}

/* Set a style for all buttons */
		button {
		  background-color: #4CAF50;
		  color: white;
		  padding: 14px 20px;
		  margin: 8px 0;
		  border: none;
		  cursor: pointer;
		  width: 100%;
		}

		button:hover {
		  opacity: 0.8;
		}

/* Extra styles for the cancel button */
		.cancelbtn {
		  width: auto;
		  padding: 10px 18px;
		  background-color: #f44336;
		}

/* Center the image and position the close button */
		.imgcontainer {
		  text-align: center;
		  margin: 24px 0 12px 0;
		  position: relative;
		}

		img.avatar {
		  width: 40%;
		  border-radius: 50%;
		}

		.container {
		  padding: 16px;
		}

		span.psw {
		  float: right;
		  padding-top: 16px;
		}

/* Change styles for span and cancel button on extra small screens */
		@media screen and (max-width: 300px) {
		  span.psw {
			 display: block;
			 float: none;
		  }
		  .cancelbtn {
			 width: 100%;
		  }
		}

/* menu */
            ul {
              list-style: none;
              padding: 0;
              margin: 0;
              background: #1bc2a2;
              font-family: Sans-serif;
            }
            
            ul li {
              display: block;
              position: relative;
              float: left;
              background: #1bc2a2;
            }
            
            /* This hides the dropdowns */
            
            
            li ul { display: none; }
            
            ul li a {
              display: block;
              padding: 1em;
              text-decoration: none;
              white-space: nowrap;
              color: #fff;
            }
            
            ul li a:hover { background: #2c3e50; }
            
            /* Display the dropdown */
            
            
            li:hover > ul {
              display: block;
              position: absolute;
            }
            
            li:hover li { float: none; }
            
            li:hover a { background: #1bc2a2; }
            
            li:hover li a:hover { background: #2c3e50; }
            
            .main-navigation li ul li { border-top: 0; }
            
            /* Displays second level dropdowns to the right of the first level dropdown */
            
            
            ul ul ul {
              left: 100%;
              top: 0;
            }
            
            /* Simple clearfix */
            
            
            
            ul:before,
            ul:after {
              content: " "; /* 1 */
              display: table; /* 2 */
            }
            
            ul:after { clear: both; }

            hr.solid {
              border-top: 1px solid #3333FF;
            }
            
/* progress bar */

            myProgress {
              width: 100%;
              background-color: grey;
            }
            
            #myBar {
              width: 1%;
              height: 20px;
              background-color: red;
              text-align: center;
              line-height: 30px;
              color: white;
            }
            
            ul, #myUL {
              list-style-type: none;
            }

/* The Modal (background) */
    body{
        font-family: Arial, Helvetica, sans-serif;
        font-size:17px;
        line-height:1.6;
    }
    .button{
        background:green;
        padding:1em 2em;
        color:#fff;
        border:0;
    }
    .button:hover{
        background:#333;
    }
    .modal{
        display:none;
        position: fixed;  
        z-index:1;
        left: 0;
        top: 0;
        height: 100%;
        width:100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.5);
    }
    .modal-content{
        background-color:#f4f4f4;
        top: 0;
        left: 10px;
        margin: 5% auto; 
        width:90%;
        box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 7px 20px 0 rgba(0,0,0,0.17);
        animation-name:modalopen;
        animation-duration:1s;
    }
    .modal-header h2, .modal-footer h3{
        margin:0;
    }
    .modal-header{
        background:navy;
        padding:5px;
        color:#fff;
    }
    .modal-body{
        background:lemonchiffon;
        padding:10px 20px;
    }
    .modal-footer{
        background:mediumblue;
        padding:10px;
        color:#fff;
        text-align: center;
    }
    .closeBtn{
        color:#ccc;
        float: right;
        font-size:30px;
        color:#fff;
    }
    .closeBtn:hover,.closeBtn:focus{
        color:#000;
        text-decoration: none;
        cursor:pointer;
    }
    @keyframes modalopen{
        from{ opacity: 0}
        to {opacity: 1}
    }