/*
Theme Name: WP-Skeleton
Theme URI: https://github.com/wycks/WP-Skeleton-Theme
Author: Wycks
Author URI: wpsecure.net
Description: Responsive Bare Bones framework based on Dave Gamache's getskeleton.com 
Version: 1.0
License: http://www.opensource.org/licenses/mit-license.php.
Tags: Responsive, grid, mobile, framework, bare-bones, white, minimal

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* Table of Contents
==================================================
    #Base 960 Grid
    #Tablet (Portrait)
    #Mobile (Portrait)
    #Mobile (Landscape)
    #Clearing */



/* #Base 1280 Grid
================================================== */
    /*@media only screen and (min-width: 1280px) {
      #wrapper, #header, #footer { width: 1280px; }
      .container, #nav { position: relative; width: 880px; margin: 0 auto; }
      .row { margin-bottom: 20px; }
      #slider { width: 876px; }
      #slider img { width: 427px; }
      #slider h3 { width: 408px; }
    }*/


/* #Base 960 Grid
================================================== */

    /* Note: Design for a width of 1024px */

    /*@media only screen and (min-width: 1024px) {
    }*/



/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    /*@media only screen and (min-width: 768px) and (max-width: 1024px) {
  }*/


/* #Tablet 7" (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    /*@media only screen and (max-width: 767px) {
    }*/


/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 479px) {
      * { box-sizing: border-box; margin: 0; padding: 0; }
      p, ul { margin: 0 0 15px 0; }
      body { font-size: 15px; }
      .header .header_right, .header .logo { display: none; }
      .header .logo-mobiel { display: block; }
      .container, 
      .sidebar_left, 
      .content_container, 
      .container .header .logo, 
      .container .header .logo-mobiel img,
      #DossierPagina .gevuldelayout { 
        width: 100%; 
      }
      .sidebar_left div.block { padding: 15px; }
      .footer { width: 100%; height: auto; padding: 20px 0; visibility: inherit; }
      .footer .inner, .footer .inner .menu_footer, .footer .menu { width: 100%; }
      .footer li { display: block; }
      .sidebar_left, .content_container { float: none; height: auto !important; min-height: auto !important; }
      .content_container { padding: 0; }
      .content_container .inner { margin: 0 20px; }
      #block-block-5 { float: none; margin: 10px 0 0 0; }
      #block-menu-menu-headermenu h2.title { 
        background: #fff url(images/hamburger.png) 10px 9px no-repeat;
        color: #000;
        cursor: pointer;
        display: block; 
        padding: 4px 0 0 0;
        text-indent: 35px;
      }
      .container .header .navigation ul {
        border-bottom: 10px solid #fff;
        height: auto;
        margin: 0 0 10px 0;
        padding: 0px;
        width: 100%;
      }
      .container .header .navigation ul.menu { display: none; }
      .nav-toggle .container .header .navigation ul.menu { display: block; }
      .container .header .navigation ul li { border: none; float: none; height: auto; padding: 0; width: 100%; }
      .container .header .navigation ul li a { font-size: 16px; font-weight: bold; }
      .container .header .navigation li ul {
        background: #fff;
        display: block;
        margin: 0;
        padding: 0px;
        position: relative;
        width: 100%;
      }
      .container .header .navigation li li { line-height: 25px; }
      .container .header .navigation li li a {
        background: #fff;
        color: #333;
        font-size: 13px;
        font-weight: normal;
        padding: 3px 0;
      }
      .container .header .navigation li li a, .container .header .navigation li.active-trail li a { border: none; color: #333; text-align: center; width: auto; }
      .node .view-civicrm-events .view-content { margin: 10px 0 0 0; top: 0; width: 100%; }
      .view-eajg-events-contentlist {  margin: 10px 0 0 0; top: 0; }
      .view-eajg-events .calendar-calendar .date-nav, .view-eajg-events .month-view, .view-eajg-events .calendar-calendar .month-view table { float: none; }
      #home .ticker_container, .ticker_title, .ticker_content { float: none; width: 100%; }
      .renderer_output { float: none; height: auto; }
      .ticker_controls { visibility: hidden !important; }
      .panel-2col-stacked .panel-col-first, 
      .panel-2col-stacked .panel-col-last, 
      .panel-3col-stacked .panel-col-first, 
      .panel-3col-stacked .panel-col-last, 
      #DossierPagina .panel-col-first,
      #DossierPagina .panel-col-last,
      #Dossiers .panel-col-first, 
      #Dossiers .panel-col-last,
      #news .panel-col-first { border: none; float: none; margin: 0 0 20px 0; width: 100% !important; }
      #news .panel-col-last { float: none; width: 100% !important; }
      .panel-3col-stacked .panel-col-last .inside { margin: 0; }
      .pane-homerandomimage { box-sizing: content-box; }
      .sidebar_left .block h2 { cursor: pointer; }
      .sidebar_left .block .content { display: none; }
      .sidebar-content-toggle .sidebar_left .block .content { display: block; }
      iframe.video-filter { height: auto !important; width: 100% !important; }
      #Dossiers .view-dossierspagelastchanged .view-content { width: 100%; }
      #Dossiers .view-dossierspagelastchanged .views-field-field-afbeelding-fid, #Dossiers .view-dossierspagelastchanged .views-field-field-afbeelding-fid img { height: auto !important; width: 100% !important; }
      #Dossiers .view-dossierspagelastchanged .views-field-title-1 { bottom: auto; height: auto; position: relative; }
      .pane-node-body p img { float: none; margin: 10px 0; height: auto !important; width: 100% !important; }
      #Dossiers .view-dossierspagelastitems .views-row { margin: 0 0 20px 0; }
      #DossierPagina .gevuldelayout .views-field-field-afbeelding-fid,
      #DossierPagina .gevuldelayout .views-field-title,
      #DossierPagina .gevuldelayout .views-field-body,
      #news .panel-col-first .field-field-afbeelding { 
        float: none;
        position: relative;
        width: 100%;
      }
      .webform-client-form input.form-text, .webform-client-form textarea, .webform-client-form .resizable-textarea { width: 100%; }
      .view-pageperspagina .views-row { margin: 0 0 15px 0; }
      #Persbericht .view-pageperspagina .views-field-phpcode {
        color: #333;
        display: block;
        float: none;
        font-size: 13px;
      }
      .donate { padding: 10px; }
      .donate img { height: auto; width: 100%; }
      .donate input.form-text { width: 100%; }
      .crm-container .crm-section .label, .crm-container-snippet .crm-section .label { float: none; }
      .crm-container .crm-section .content, .crm-container-snippet .crm-section .content { margin: 0 0 10px 0; }
    } 



/* #Clearing
================================================== */

    /* Self Clearing Goodness */
    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

    /* You can also use a <br class="clear" /> to clear columns */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }

	img.scale-with-grid {
		max-width: 100%;
		height: auto; }