/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Navigation*/ 

/* #Site Styles
================================================== */
#header {text-align:center; min-height:200px;}
#banner { background-color:#559C46; height:auto; margin-bottom:20px;}
#banner h2 {color:#FFF; font-style:italic; font-size:24px; text-align:center; padding:50px 20px 20px 30px;}
#banner a:link, #banner a:visited {color:#FFF;}
#banner img {float:left; margin-right:20px;}
#footer {border-top:#559C46 1px solid; padding:10px 0;}

/* #Page Styles
================================================== */

/*Make Google map responsive*/

.google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
		margin-bottom:20px;
    }
.google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
}

/* Slideshow
================================================== */
#slideshow { height:auto; margin-bottom:10px; background-color:#559C46; }
#slideshow .textbox {width:320px; float:left; }
#slideshow h2 {color:#FFF; font-style:italic; font-size:24px; text-align:center; padding:140px 20px; }

    #slides {
      display: none;
	  width:100%; max-width:620px; height:auto; 
	  float:left;
    }

    #slides .slidesjs-navigation {
      margin-top:3px;
    }

    #slides .slidesjs-previous {
      margin-right: 5px;
      float: left;
    }

    #slides .slidesjs-next {
      margin-right: 5px;
      float: left;
    }

   .slidesjs-pagination {
      /*margin: 6px 0 0;
      float: right;
      list-style: none;*/
	  display:none;
	}

    .slidesjs-pagination li {
      float: left;
      margin: 0 1px;
	  list-style:none;
    }

    .slidesjs-pagination li a {
      display: block;
      width: 13px;
      height: 0;
      padding-top: 13px;
	  list-style:none;
      background-image: url(images/bullet.png);
      background-position: 0 0;
      float: left;
      overflow: hidden;
    }

    .slidesjs-pagination li a.active,
    .slidesjs-pagination li a:hover.active {
      background-position: 0 -13px
    }

    .slidesjs-pagination li a:hover {
      background-position: 0 -26px
    }

    #slides a:link,
    #slides a:visited {
      color: #333
    }

    #slides a:hover,
    #slides a:active {
      color: #Ff99cc
    }

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		
		}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		#banner img {width:50%;}
		#slideshow .textbox {width:50%; float:left; }
        #slideshow h2 {color:#FFF; font-style:italic; font-size:24px; text-align:center; padding:80px 20px 40px 20px; }
		#slides {
      display: none;
	  width:50%; height:auto; 
	  float:left;
    }
		}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		#header h1 {font-size:20px;}
		#banner img {margin-bottom:20px;}
		#slideshow .textbox {width:100%; float:left; }
        #slideshow h2 {color:#FFF; font-style:italic; font-size:24px; text-align:center; padding:40px 20px; }
		#slides {
      display: none;
	  width:100%; height:auto; 
	  float:left;
    }
		}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {}


/*Navigation*/



#navbar {width:940px; height:40px; background-color:#0061AF; margin-left:10px; }

.fixed {
  position: fixed;
  width: 100%;
  top: 0px;
  left: 0;
}

.nav-collapse,
.nav-collapse * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.nav-collapse,
.nav-collapse ul {
  list-style: none;
  width:100%;
  float: left;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
  font-weight:normal;
}

.nav-collapse li {
  display: inline;
  margin: 0;
}


.nav-collapse li a {
float: left;
display:block;
text-decoration: none;
margin: 0;
line-height:40px;
padding: 0 25px; /*padding inside each tab*/
text-align:center;
color: #FFF;
background-color:#0061AF;
}

.nav-collapse li a:hover, .nav-collapse li.selected a {color:#FFF; background-color:#559C46;}

/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		#navbar {width:748px; height:40px; background-color:#0061AF;}
		.nav-collapse,
		.nav-collapse ul { margin-left:0;}
		.nav-collapse li a {
		float: left;
		display:block;
		text-decoration: none;
		margin: 0;
		padding:0 20px; /*padding inside each tab*/
		color: #fff;
		font-size:1em;
}		
	}

@media screen and (max-width: 768px) {
	#navbar {margin:0;}
	.nav-collapse,
	.nav-collapse ul {
  list-style: none;
  width: 100%;
  float: left;
}
.nav-collapse li a { background-color:#0061AF; color:#FFF;}	
  .nav-collapse a {
    margin: 0;
	width: 100%;
    float: left;
    text-align:left;
	border-bottom: 0;
	border-bottom:#fff 1px solid;
  }
}

.nav-collapse ul ul a {
  background: #559C46;
  padding-left: 2em;
}

@media screen and (min-width: 40em) {
	.nav-collapse ul ul a {
    display: none;
  }
}
@media screen and (max-width: 479px) {
	#navbar { width: 300px; }
	.nav-collapse,
	.nav-collapse ul {
  list-style: none;
  width: 100%;
  float: left;
}
}


@media only screen and (min-width: 480px) and (max-width: 767px) {

#navbar { width: 420px; }
}

/* ------------------------------------------
  NAV TOGGLE STYLES
--------------------------------------------- */

@font-face {
  font-family: "responsivenav";
  src:url("../icons/responsivenav.eot");
  src:url("../icons/responsivenav.eot?#iefix") format("embedded-opentype"),
    url("../icons/responsivenav.ttf") format("truetype"),
    url("../icons/responsivenav.woff") format("woff"),
    url("../icons/responsivenav.svg#responsivenav") format("svg");
  font-weight: normal;
  font-style: normal;
}

.nav-toggle {
  position: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;
  text-indent: -999px;
  position: relative;
  overflow: hidden;
  width: 70px;
  height: 55px;
  float: right;
}

.nav-toggle:before {
  color: #fff; /* Edit this to change the icon color */
  font-family: "responsivenav", sans-serif;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  font-size: 28px;
  text-transform: none;
  position: absolute;
  content: "=";
  text-indent: 0;
  text-align: center;
  line-height: 55px;
  speak: none;
  width: 100%;
  top: 0;
  left: 0;
}

.nav-toggle.active::before {
  font-size: 24px;
  color:#000;
  content:"x";
}