@import url('https://fonts.googleapis.com/css?family=Lora|Open+Sans');


html {
    color: #444;
    font-size: 1em;
	background-color: #DEDEDE;
	font-family: 'Open Sans', sans-serif;
	margin:0;
	padding:0;
}
body {margin: 0}


::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

 /* Navbar container */
.navbar {
  overflow: hidden;
  background-color: #015850;
max-height:80px;
  font-family: Arial;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color:#99f8ef!important;
  text-align: center;
  padding: 30px 16px;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: #99f8ef;
  padding: 30px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
	color:#fff;
  background-color: #015850;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #015850;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #444444;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
} 

.headergraphic {

    height: 113px;
    background-image: url(../img/graphicnew.jpg);
}

.hidden {
    display: none !important;
}



.main-content {max-width:1040px;margin:20px auto}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}




    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }
h1,
h2,
h3,
h4,
h5,
h6 
{
  color: inherit;
  font-family: 'Lora', serif;
  font-weight: 500;
  line-height: 1.1;
}
    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
		margin: 0 0 10px;}

    h2,
    h3 {
        page-break-after: avoid;
    }

h1 {
 font-size: 1.9rem;
      margin-bottom: .625rem;
}
h2 {
  font-size: 1.8rem;
      margin-bottom: .625rem;
}
h3 {
  font-size: 1.3rem;
      margin-bottom: .625rem;
}
h4 {
  font-size: 1.1rem;
      margin-bottom: .625rem;
}
h5 {
  font-size: 1.1em;
      margin-bottom: .625rem;
}
h6 {
  font-size: 1em;
      margin-bottom: .625rem;
}






	footer {
		background: #858382;
		color: #DEDEDE;
		padding:20px;
		
	}
		footer p {
		max-width:1040px;
		margin: auto;
		font-size:10pt;
	}
a {
  color: #015850;
  text-decoration: none;
  outline: none;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
a:hover,
a:focus {
  color: #00466e;
  text-decoration: underline;
}
a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

small, .small {font-size: 8pt}

	.whatsnew {
		background-color: #3E7973;
		color:#e1e1e1!important;
		text-aign:center!important;
	}
	.whatsnew h2 {text-aign:center!important;max-width: 1040px;margin:5px auto;padding:10px 0}
	.whatsnew p {text-aign:center!important;max-width: 1040px;margin:5px auto;padding:10px 0}


table.timeline {
  background-color: #dedede;
        margin-left:auto;
        margin-right:auto;
}

table.timeline td {
  padding: 3px;
  vertical-align:top;
  border-bottom: 1px dotted #858382;
}

table.timeline tr {
  padding-bottom:3px;
}

table.timeline p {
        color:#00574F;
        font-size:15px;
        font-weight:bold;
        margin:0px;

}




/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}



/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*  COLUMN SETUP  */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
  width: 96%;
  float: left;
  margin: 0.5rem 2%;
}
@media only screen and (min-width: 45em) {
  /* 720px */
  .col-1 {
    width: 4.33%;
  }
  .col-2 {
    width: 12.66%;
  }
  .col-3 {
    width: 21%;
  }
  .col-4 {
    width: 29.33%;
  }
  .col-5 {
    width: 37.66%;
  }
  .col-6 {
    width: 46%;
  }
  .col-7 {
    width: 54.33%;
  }
  .col-8 {
    width: 62.66%;
  }
  .col-9 {
    width: 71%;
  }
  .col-10 {
    width: 79.33%;
  }
  .col-11 {
    width: 87.66%;
  }
  .col-12 {
    width: 96%;
  }
}