/*
Theme Name: Red Feather Lakes - widget in header - 2012 riff
Theme URI: https://wordpress.org/themes/twentytwelve/
Template: twentytwelve
Author: hixon
Author URI: colibraries.org
Description: A riff on the 2012 theme for WordPress with widget in header
Tags: blog,one-column,two-columns,right-sidebar,custom-background,custom-header,custom-menu,editor-style,featured-images,flexible-header,footer-widgets,full-width-template,microformats,post-formats,rtl-language-support,sticky-post,theme-options,translation-ready
Version: 2.2.1492580975
Updated: 2017-04-18 23:49:35

*/

/* styles for in-header site search */
/* these apply only to larger screens (at least 782px wide) */
@media screen and (min-width:782px) {
   #search-4  {
       display: block;
       position: relative;
       float: right;
       margin-top: -40px;
   }
}
/* these apply only to smaller screens (anything smaller than 782px wide) */
@media screen and (max-width:781px) {
   #search-4 {
       display: inline-block;
       position: relative;
       width: 100%;
       padding-top:10px;
   }
   input#s {
      width: 75%;
      box-sizing: border-box;
      float:left;
   }
   input#searchsubmit {
      width: 20%;
      box-sizing: border-box;
   }
}
/* additional styles for menu button (visible only on small screens) */
/* these are unrelated to the search widget, so are entirely optional */
@media screen and (max-width: 600px) {
   button.menu-toggle { 
      width:100%; 
   }
   #site-navigation .menu-main-container {
      width:100%;
      padding:0;
      background-color:#F6F6F6;
      margin-top:2px;
   }
   .menu-main-container #menu-main.nav-menu {
      width: 100%;
      padding: 0;
   }
   .main-navigation li {
      display: inline-block;
      width: 100%;
      margin: 0;
      padding: 1.5em 0 1.5em;
      border-bottom: 1px solid #ccc;
      border-top: 1px solid #ccc;
   }
   #menu-main .menu-item a {
      color: #000!important;
      font-size: 125%!important;
      width: 80%;
      display: inline-block;
   }
   #menu-main .menu-item a:hover {
      color: blue!important;
   }
}