/*
Theme Name: Inge Rens
Theme URI: http://www.ritho.nl/
Author: NH, RITHO
Author URI: ritho.nl
Description: Responsive Bare Bones framework based on Dave Gamache's getskeleton.com 
Version: 2.0
License: http://www.opensource.org/licenses/mit-license.php.
Tags: Responsive, framework, NH, Inge Rens

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 1200 Grid
================================================== */

    .container                                  { position: relative; width: 1200px; margin: 0 auto; padding: 0; }
    .column, .columns                           { float: left; display: inline; margin-left: 0px; margin-right: 0px;}
    
    .contentrow 								{ width: 100%; }
    .contentrow.grey 							{ background-color: #f0efef; } 
    .contentrow.grey .container 				{ padding-top: 20px; padding-bottom: 20px; }
	.container .wide 							{ width: 100%; float: none; margin: 0 0 0 0; }
    .container .half-left 						{ width: 50%; float: left; margin: 0 0 0 0; }
	.container .half-right 						{ width: 50%; float: right; margin: 0 0 0 0; }
	/*.container .half-leftjump 					{ width: 40%; float: left; margin: 0 0 0 0; }
	.container .half-rightjump 					{ width: 60%; float: right; margin: 0 0 0 0; }*/
	.container .half-leftjump 					{ width: 50%; float: left; margin: 0 0 0 0; }
	.container .half-rightjump 					{ width: 50%; float: right; margin: 0 0 0 0; }
	.container .half-left .main, .container .half-leftjump .main  				{ width: 90%; float: left; }
	.container .half-right .main, .container .half-rightjump .main 				{ width: 90%; float: right; }
    .container .one-third.column				{ width: 25%; float: left; margin: 0 0 0 0; }
    .container .two-thirds.column				{ width: 75%; float: right; margin: 0 0 0 0; }
	.container .quarter 						{ width: 25%; float: left; margin: 0 0 0 0; }
	.container .third	 						{ width: 33.33336%; float: left; margin: 0 0 0 0; }
	.twocolumn 									{ -webkit-column-count: 2; -moz-column-count: 2; column-count: 2;  -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; }   


	@media only screen and (max-width: 1360px) {
		.headertop .logo, .headertop .logo img { width: 220px; height: 80px; }
		.headertop { height: 90px; }
		.headertop .menuholder .mainmenu { margin-top: 10px; }
		.header { margin: 80px auto 0 auto; }
		.mainmenu li { font-size: 15.5; padding: 0 0 0 8px; }
		.container { width: 100%; }
	}

	@media only screen and (min-width: 960px) and (max-width: 1199px) {
        .container { width: 960px; }
		.header { margin: 40px auto 0 auto; }
		.container { width: 100%; }
        
    }   
        

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

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

    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .container { width: 100%;  }
		
		.header { margin: 40px auto 0 auto; }
		.header-empty { margin: 0px auto 0 auto; }
		/*.container .half-left, .container .half-leftjump { width: 100% !important; float: none; margin: 0 0 0 0; }
		.container .half-right, .container .half-rightjump { width: 100% !important; float: none; margin: 0 0 0 0; }*/
        .container .quarter { width: 50%; float: left; margin: 0 0 0 0; }
		
		.fmenu { display: none; }
        
    }   
    
    

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

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

    @media only screen and (max-width: 767px) {
        .container { width: 100%; }
		
		.header { margin: 40px auto 0 auto; }
		.header-empty { margin: 0px auto 0 auto; }
		.container .half-left, .container .half-leftjump { width: 100% !important; float: none; margin: 0 0 0 0; }
		.container .half-right, .container .half-rightjump { width: 100% !important; float: none; margin: 0 0 0 0; }
		.container .quarter { width: 100% !important; float: left; margin: 0 0 0 0; }
		.blogitm { width: 100%; float: none; margin: 0 0 25px 0; }
		
		.container .one-third.column { width: 100% !important; float: none; margin: 0 0 0 0; }
    	.container .two-thirds.column { width: 100% !important; float: none; margin: 0 0 0 0; }
		.container .third { width: 100%; float: none; margin: 0 0 0 0; }
		.container .third.left, .container .third.middle { width: 100%; float: left; }
		.container .third.right .main.rmargin { margin-left: 25px !important; margin-right: 25px !important; margin-bottom: 25px !important; }
		.imagewide img { width: 1024px !important; max-width:  1024px !important; height: 100%; }
		
		.fmenu { display: none; }       
        
    }

/* #Mobile (Landscape)
================================================== */

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

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 90%; }
		
		.header { margin: 40px auto 0 auto; }
		.header-empty { margin: 0px auto 0 auto; }
		.container .half-left, .container .half-leftjump { width: 100% !important; float: none; margin: 0 0 0 0; }
		.container .half-right, .container .half-rightjump { width: 100% !important; float: none; margin: 0 0 0 0; }		
		.container .quarter { width: 100% !important; float: left; margin: 0 0 0 0; }
		.blogitm { width: 100%; float: none; margin: 0 0 25px 0; }
		
		.container .one-third.column { width: 100% !important; float: none; margin: 0 0 0 0; }
    	.container .two-thirds.column { width: 100% !important; float: none; margin: 0 0 0 0; }
		.container .third { width: 100%; float: none; margin: 0 0 0 0; } 
		.container .third.left, .container .third.middle { width: 100%; float: left; }
		.container .third.right .main.rmargin { margin-left: 25px !important; margin-right: 25px !important; margin-bottom: 25px !important; }
        .imagewide img { width: 1024px !important; max-width:  1024px !important; height: 100%; }
		
		.fmenu { display: none; }
        
      }

/* #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;
    }