@import url('html5reset.css');

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  }

body {
  font-family: 'Merriweather Sans', sans-serif;
  font-weight: 300;
  font-size: 0.9em;
  }

h1,h2,h3,h4 {
  font-family: 'Merriweather', serif;
  font-weight: 700;
  padding: 0.5em 0;
  }

h1 { font-size: 200%; }
h2 { font-size: 150%; }
h3 { font-size: 125%;   line-height: 140%;}
h4 { font-size: 110%; }

p {
  line-height: 140%;
  margin-bottom: 0.5em;
  }

p:before {  /* avoid narrow text width when squeezed by floated divs */
  content: "";
  width: 9em;
  display: block;
  overflow: hidden;
}

a { 
  text-decoration: none;
  color: inherit;
  }

/*** Page Layout ***/

#container { margin: auto; }

#plugtitle {
  float: left;
  padding: 7px 10px;
  font-weight:400;
  color: white;
  background: #108141;
  }

nav {
  color: #3D3D3D;
  height: 2em;
  border-bottom: 1px solid #BFBFBF;
  }
  
#banner {
  clear:both;
  padding: 1em 0 0 1em;
  border-bottom: 1px solid #BFBFBF;
  }
#banner h1 {text-shadow:2px 3px 5px #8F8F8F;}
#banner-logo { display: inline-block;}
#banner-logo img { width:129px; }
#banner-title { display: inline-block; width:70%; vertical-align:top; padding-top:1em; margin-left:1em;}

#next-meeting { 
  float:right; 
  width:30%; 
  background-color: #DFF1D9; 
  padding:6px 6px 6px 8px; 
  margin:1em 0.5em 1em 0; 
}

#next-meeting a:hover { background-color: #FFF;}

article {
  clear: both;
  padding: 1em;
  min-height:300px;
  background: url(keyboardbg.jpg) no-repeat top;
  }

footer {
  clear: both;
  padding: 1em;
  font-size:90%;
  }


/*** Navigation ***/

/* Main Menu */

nav ul li {
  display: block;
  position: relative;
  float: left;
  border-bottom: 1px solid #BFBFBF
  }

nav li ul { display: none; }

nav ul li a {
  display: block;
  padding: 7px 10px;
  text-decoration: none;
  white-space: nowrap;
  }

nav ul li a:hover { background: #E5E5E5; }

nav li:hover ul { display: block; position: absolute; }

nav li:hover li { float: none; }

nav li:hover a { background: #E5E5E5;}

nav li:hover li a:hover { background: #F3F3F3; }

#drop-nav li ul li:first-of-type { border-top: 1px solid #BFBFBF; }
#drop-nav .active { color: #000; font-weight:400; background: #DFF1D9;}

/* Styles within Articles */

article a { border-bottom: 1px dotted #BFBFBF; }
article a:hover { background-color: #D9EBD4; }
article ul, article ol { margin-left:2em; margin-bottom:0.5em; line-height:130%;}

/* Links in Footer */

footer a { border-bottom: 1px dotted #BFBFBF; }
footer a:hover { background-color: #D9EBD4; }


/*** General layout classes ***/

.narrow {width: 66%;}
.spacer {height:1em;}
.bold { font-weight: 400; }
.smaller { font-size:90%;}
.dropshadow { box-shadow: 4px 4px 20px #333333; }
sup { vertical-align: super; font-size: smaller; }

#meeting-selector { margin-top:1em; }
#meeting-selector ul { margin-left:0; }
#meeting-selector li { display: inline-block; margin:0.5em 0; }

.btn {
  display: block;
  color: #ffffff;
  background: #108141;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  }

.btn:hover {
  background: #13994D;
  text-decoration: none;
  }

  
/*** Meeting display formats ***/

#meeting-details { background: #DFF1D9; padding: 4px;}
#meeting-details.archive  {background: #E6E2DD;}
#meeting-info { border: solid 1px #BFBFBF; padding: 4px; margin-top: 8px;}

/*** media overrides ***/

@media screen and (min-width: 980px) {
  #container { width: 100%; }
  }
@media screen and (min-width: 1200px) {
  #container { width: 1160px; }
  }
@media screen and (max-width: 979px) {
  #container { width: 100%; }
  }
@media screen and (min-width: 768px) and (max-width: 979px) {
  #container { width: 100%; }
  }
@media screen and (max-width: 767px) {
  #container { width: 100%; }
  }
@media screen and (min-width: 621px) and (max-width: 730px) {
  #container { width: 100%; }
  nav li:last-child:hover ul {right:0;}
  }
@media screen and (max-width: 620px) {
  #container { width: 100%; }
  #plugtitle { float: none; }
  #banner { padding: 1em 0 0 0; }
  #banner-logo img { width:100px; }
  #banner-title { padding-top:0; padding-right:6px;}
  #next-meeting { float: none; width:auto; margin-right:0;}
  .narrow { width:100%; }
  }
@media screen and (max-width: 480px) {
  #container { width: 100%; }
  body {font-size:80%;} 
  article { min-height:400px; }
  nav li:last-child:hover ul {right:0;}
  }
@media screen and (max-width: 400px) {
nav { height:auto;  overflow:auto; font-size: 110%; background-color:#DFF1D9; }
nav ul li { float: none; width: 100%;}
nav ul li a { width: 100%; padding: 13px 10px;}
nav ul li:hover ul { display: none; }
#drop-nav .active { background: #CEDEC8;}
}