/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

   html,
   button,
   input,
   select,
   textarea {
       color: #222;
   }
   
   html {
       font-size: 1em;
       line-height: 1.4;
   }
         
   /*
    * Remove text-shadow in selection highlight: h5bp.com/i
    * These selection rule sets have to be separate.
    * Customize the background color to match your design.
    */
   
   ::-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;
   }
   
   /*
    * Remove the gap between images, videos, audio and canvas and the bottom of
    * their containers: h5bp.com/i/440
    */
   
   audio,
   canvas,
   img,
   svg,
   video {
       vertical-align: middle;
   }
   
   /*
    * Remove default fieldset styles.
    */
   
   fieldset {
       border: 0;
       margin: 0;
       padding: 0;
   }
   
   /*
    * Allow only vertical resizing of textareas.
    */
   
   textarea {
       resize: vertical;
   }
   
   /* ==========================================================================
      Browse Happy prompt
      ========================================================================== */
   
   .browsehappy {
       margin: 0.2em 0;
       background: #ccc;
       color: #000;
       padding: 0.2em 0;
   }
   
   /* ==========================================================================
      Author's custom styles
      ========================================================================== */
  
   @font-face {
     font-family: 'Avenir';
     src: url('fonts/AvenirLTStd-Book.otf') format('opentype');
   }
     
   @font-face {
      font-family: 'Gordita-Medium';
      src: url('fonts/gordita-cufonfonts-webfont/Gordita-Medium.woff') format('woff');
   }

   /* Add a black background color to the top navigation */
   .topnav {
     background-color: white;
     overflow: hidden;
   }
   
   /* Style the links inside the navigation bar */
   .topnav a {
     float: left;
     display: block;
     color: green;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
     font-family: Gordita-Medium;
     font-size: 15px;
   }
   
   /* Change the color of links on hover */
   .topnav a:hover {
     background-color: white;
     color: red;
   }
   
   /* Add an active class to highlight the current page */
   .topnav a.active {
     background-color: white;
     color: green;
   }
   
   /* Hide the link that should open and close the topnav on small screens */
   .topnav .icon {
     display: none;
   }
   
   /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
   @media screen and (max-width: 700px) {
     .topnav a:not(:no-button) {display: none;}
     .topnav a.icon {
       float: right;
       display: block;
     }
   }
   
   /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
   @media screen and (max-width: 700px) {
     .topnav.responsive {position: relative;}
     .topnav.responsive a.icon {
       position: absolute;
       right: 0;
       top: 0;
       ;
     }
     /* small screen list items */
     .topnav.responsive a {
       float: none;
       display: block;
       text-align: left;
     }
   }
   
   /* Grid Stuff - Begin */
   * {
       box-sizing: border-box;
   }

   .col-05 {width:   5%;}
   .col-10 {width:  10%;}
   .col-15 {width:  15%;}
   .col-20 {width:  20%;}
   .col-25 {width:  25%;}
   .col-30 {width:  30%;}
   .col-35 {width:  35%;}
   .col-40 {width:  40%;}
   .col-45 {width:  45%;}
   .col-50 {width:  50%;}
   .col-55 {width:  55%;}
   .col-60 {width:  60%;}
   .col-65 {width:  65%;}
   .col-70 {width:  70%;}
   .col-75 {width:  75%;}
   .col-80 {width:  80%;}
   .col-85 {width:  85%;}
   .col-90 {width:  90%;}
   .col-95 {width:  95%;}
   .col-100 {width: 100%;}
   
   
   [class*="col-"] {
     float:left;
     padding: 5px;
     border: 0px solid red;
   }
   
   /* Grid Stuff - End */
   
   /* Gallery Stuff - Begin */
   .table {
     display:table;
   }
   
   .table-row {
       display:table-row;
       padding: 5px;
   }
   
   .table-cell {
     display: table-cell;
     padding: 5px;
     vertical-align: top;
   }
   
   /* if the screen size is 700px wide or less, then...*/
   @media screen and (max-width: 700px) {
     .table, .table-row, .table-cell {
       display: block;
       font-size: 13pt;
     }
   }
   
   /* if the screen size is 701px wide or or more, then...*/
   @media screen and (min-width: 701px) {
     .table, .table-row, .table-cell {
       font-size: 15pt;
     }
   }
   
   /* Gallery Stuff - End */
  
   body {
     background-color:           #414141;
     scrollbar-face-color:       #414141;
     scrollbar-shadow-color:     #aaaaaa;
     scrollbar-highlight-color:  #c0c0c0;
     scrollbar-3dlight-color:    #aaaaaa;
     scrollbar-darkshadow-color: #c0c0c0;
     scrollbar-track-color:      #c0c0c0;
     scrollbar-arrow-color:      #8CB5DE; 
   }
   
   input,textarea {
     font-family: Avenir, Verdana, Arial;
     border:                 thin groove;
     background-color:             white;
     font-weight:                 normal;
     font-size:                     15px; 
   }
   
   a.menulinks:link  {
     color:                      green;
     text-decoration:               none; 
   }
   
   a.menulinks:visited {
     color:                      green;
     text-decoration:               none; 
   }
   
   a.menulinks:hover {
     color:                      #ff0000;
     text-decoration:               none; 
   }
   
   li {
     font-family:  "Lucida Sans Unicode",
                                 georgia,
                              sans-serif;
     font-size:                     10pt;
     color:                      #ffffff; 
   }
   
   .photo-location {
       border: 0;
       clip: rect(0 0 0 0);
       height: 1px;
       margin: -1px;
       overflow: hidden;
       padding: 0;
       position: absolute;
       width: 1px;
   }
   
   p.site_title {
     font-family:  "Lucida Sans Unicode",
                                 georgia,
                              sans-serif;
     font-size:                     12pt; 
     color:                      #FFFFFF;
     letter-spacing:               0.2em;
   }
   
   p.site_menu {
     font-family:                 Avenir,
                                 georgia,
                              sans-serif;
     font-size:                      8pt; 
     color:                      green;
     letter-spacing:               0.1em;
   }
   
   p.justified {
     font-family:  "Lucida Sans Unicode",
                                 georgia,
                              sans-serif;
     font-size:                      9pt; 
     color:                      #303030;
     text-align:                 justify; 
   }
   
   p.site_text_small {
     font-family:                 Avenir,
                                 georgia,
                              sans-serif;
     font-size:                     11pt;
     color:                        black;
   }
   
   p.site_text_small_yellow {
     font-family:  "Lucida Sans Unicode",
                                 georgia,
                              sans-serif;
     font-size:                     11pt;
     color:                      #ffff88; 
   }
   
   p.site_text_medium {
     font-family:                 Avenir,
                                 georgia,
                              sans-serif;
     font-size:                     15pt;
     font-weight:                 normal;
     font-variant:            small-caps;
     color:                      black;  
   }
   
   p.site_text_large {
     font-family:         Gordita-Medium,
                                  Avenir,
                                 georgia,
                              sans-serif;
     font-size:                     18pt;
     font-weight:                 normal;
     font-variant:            small-caps;
     text-align:                  center; 
     color:                      black; 
   }

   p.site_text_copyright {
     font-family:                  Arial,
                                 georgia,
                              sans-serif;
     font-size:                      9pt;
     line-height:                    90%;
     color:                      black;
   }
   
   p.site_text_about_header {
     font-family:                 Avenir,
                                 georgia,
                              sans-serif;
     font-size:                     18pt;
     font-weight:                   bold;     
     color:                      #266b53;
   }
   
   p.site_text_about {
     font-family:                 Avenir,
                                 georgia,
                              sans-serif;
     color:                      black; 
   }
   
   p.site_text_contact_error {
     font-family:  "Lucida Sans Unicode",
                                 georgia,
                              sans-serif;
     font-size:                     11pt;
     color:                          red;
   }
   
   
   p.site_text_contact_success {
     font-family:  "Lucida Sans Unicode",
                                 georgia,
                              sans-serif;
     font-size:                     11pt;
     color:                        black;
   }
   
   
   .imglist {
       margin:0;
       padding:0;
       list-style:none;
       margin:0 0 0 -15px;
       width:800px;
       display:block;
   }
   
   .imglist li {
         margin: 0 0 0 15px;
         float: left;
   }
   
   .imglist { display:block }
   .imglist img { opacity:0; }
     
   .example-wrap {
       background:#222;
       padding: 20px 20px 20px 20px;
       margin: 0 auto 20px;
       width:900px;
   }
     
   .group:before, .group:after { content: ""; display: table; }
   .group:after { clear: both; }
   .group { zoom: 1; }
   
   /* ==========================================================================
      Helper classes
      ========================================================================== */
   
   /*
    * Hide from both screenreaders and browsers: h5bp.com/u
    */
   .hidden {
       display: none !important;
       visibility: hidden;
   }
   
   /*
    * Hide only visually, but have it available for screenreaders: h5bp.com/v
    */
   
   .visuallyhidden {
       border: 0;
       clip: rect(0 0 0 0);
       height: 1px;
       margin: -1px;
       overflow: hidden;
       padding: 0;
       position: absolute;
       width: 1px;
   }
         
   /*
    * Extends the .visuallyhidden class to allow the element to be focusable
    * when navigated to via the keyboard: h5bp.com/p
    */
   
   .visuallyhidden.focusable:active,
   .visuallyhidden.focusable:focus {
       clip: auto;
       height: auto;
       margin: 0;
       overflow: visible;
       position: static;
       width: auto;
   }
   
   /*
    * Hide visually and from screenreaders, 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;
   }
   
   /* ==========================================================================
      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 */
   }
   
   @media print,
          (-o-min-device-pixel-ratio: 5/4),
          (-webkit-min-device-pixel-ratio: 1.25),
          (min-resolution: 120dpi) {
       /* Style adjustments for high resolution devices */
   }
   
   /* ==========================================================================
      Print styles.
      Inlined to avoid required HTTP connection: h5bp.com/r
      ========================================================================== */
   
   @media print {
       * {
           background: transparent !important;
           color: #000 !important; /* Black prints faster: h5bp.com/s */
           box-shadow: none !important;
           text-shadow: none !important;
       }
   
       a,
       a:visited {
           text-decoration: underline;
       }
   
       a[href]:after {
           content: " (" attr(href) ")";
       }
   
       abbr[title]:after {
           content: " (" attr(title) ")";
       }
   
       /*
        * Don't show links for images, or javascript/internal links
        */
   
       a[href^="javascript:"]:after,
       a[href^="#"]:after {
           content: "";
       }
   
       pre,
       blockquote {
           border: 1px solid #999;
           page-break-inside: avoid;
       }
   
       thead {
           display: table-header-group; /* h5bp.com/t */
       }
   
       tr,
       img {
           page-break-inside: avoid;
       }
   
       img {
           max-width: 100% !important;
       }
   
       @page {
           margin: 0.5cm;
       }
   
       p,
       h2,
       h3 {
           orphans: 3;
           widows: 3;
       }
   
       h2,
       h3 {
           page-break-after: avoid;
       }
   }