/* 
* Brolik Platform v3 "Threesponsive"
* Copyright 2011, Brolik Productions, Inc
* www.brolik.com
* 8/2011
*/
/* 
* BASED ON
* Skeleton V1.0.3
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 7/17/2011
*/


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

/* #Base 960 Grid 
================================================== */
	
	body										{ width:100%; }
	
    .centered                            		{ position: relative; width: 90%; margin: 0 auto; padding: 0; } /* overwrite this width in style.css if you need to */
	.column, .columns							{ float:left; display:inline; margin-left:1.04167%; margin-right:1.04167%; /* 10px / 960px */ position:relative; } 
    .row                                        { margin-bottom: 02.0833%; } /* 20px / 960px */
    
    /* Nested Column Classes - OLD STYLE, but I left them in for a little just in case */
    .column.alpha, .columns.alpha               { margin-left: 0; }
    .column.omega, .columns.omega               { margin-right: 0; }
    
    /* Base Grid */
    .one.column	                     { width: 04.167%;  } /* 40px / 960px */
    .two.columns                     { width: 10.4167%; } /* 100px / 960px */
    .three.columns                   { width: 16.7%; } /* 160px / 960px */
    .four.columns                    { width: 22.9167%; } /* 220px / 960px */
    .five.columns                    { width: 29.167%; } /* 280px / 960px */
    .six.columns                     { width: 35.4167%; } /* 340px / 960px */
    .seven.columns                   { width: 41.67%; } /* 400px / 960px */
    .eight.columns                   { width: 47.9167%; } /* 460px / 960px */
    .nine.columns                    { width: 54.167%; } /* 520px / 960px */
    .ten.columns                     { width: 60.4167%; } /* 580px / 960px */
    .eleven.columns                  { width: 66.67%; } /* 640px / 960px */
    .twelve.columns                  { width: 72.9167%; } /* 700px / 960px */
    .thirteen.columns                { width: 79.167%; } /* 760px / 960px */
    .fourteen.columns                { width: 85.4167%; } /* 820px / 960px */
    .fifteen.columns                 { width: 91.67%; } /* 880px / 960px */
    .sixteen.columns                 { width: 97.9167%; } /* 940px / 960px */
    
    .one-third.column                { width: 31.25%; } /* 300px / 960px */
    .two-thirds.column               { width: 64.583%; } /* 620px / 960px */
	.half.column					 { width: 47.9167%; } /* 460px / 960px; */
	
	/* no margin left */
	.one.column.noMarginLeft	     { width: 05.208333333%; margin-left:0; } /* 50px / 960px */
    .two.columns.noMarginLeft        { width: 11.458333333%; margin-left:0; } /* 110px / 960px */
    .three.columns.noMarginLeft      { width: 17.708333333%; margin-left:0; } /* 170px / 960px */
    .four.columns.noMarginLeft       { width: 23.958333333%; margin-left:0; } /* 230px / 960px */
    .five.columns.noMarginLeft       { width: 30.208333333%; margin-left:0; } /* 290px / 960px */
    .six.columns.noMarginLeft        { width: 36.458333333%; margin-left:0; } /* 350px / 960px */
    .seven.columns.noMarginLeft      { width: 42.708333333%; margin-left:0; } /* 410px / 960px */
    .eight.columns.noMarginLeft      { width: 48.958333333%; margin-left:0; } /* 470px / 960px */
    .nine.columns.noMarginLeft       { width: 55.208333333%; margin-left:0; } /* 530px / 960px */
    .ten.columns.noMarginLeft        { width: 61.458333333%; margin-left:0; } /* 590px / 960px */
    .eleven.columns.noMarginLeft     { width: 67.708333333%; margin-left:0; } /* 650px / 960px */
    .twelve.columns.noMarginLeft     { width: 73.958333333%; margin-left:0; } /* 710px / 960px */
    .thirteen.columns.noMarginLeft   { width: 80.208333333%; margin-left:0; } /* 770px / 960px */
    .fourteen.columns.noMarginLeft   { width: 86.458333333%; margin-left:0; } /* 830px / 960px */
    .fifteen.columns.noMarginLeft    { width: 92.708333333%; margin-left:0; } /* 890px / 960px */
    .sixteen.columns.noMarginLeft    { width: 98.958333333%; margin-left:0; } /* 950px / 960px */
	
	.one-third.column.noMarginLeft   { width: 32.291666667%; margin-left:0; } /* 310px / 960px */
    .two-thirds.column.noMarginLeft  { width: 65.625%; margin-left:0; } /* 630px / 960px */
	.half.column.noMarginLeft		 { width: 48.958333333%; margin-left:0; } /* 470px / 960px; */
	
	/* no margin right */
	.one.column.noMarginRight	     { width: 05.208333333%; margin-right:0; } /* 50px / 960px */
    .two.columns.noMarginRight       { width: 11.458333333%; margin-right:0; } /* 110px / 960px */
    .three.columns.noMarginRight     { width: 17.708333333%; margin-right:0; } /* 170px / 960px */
    .four.columns.noMarginRight      { width: 23.958333333%; margin-right:0; } /* 230px / 960px */
    .five.columns.noMarginRight      { width: 30.208333333%; margin-right:0; } /* 290px / 960px */
    .six.columns.noMarginRight       { width: 36.458333333%; margin-right:0; } /* 350px / 960px */
    .seven.columns.noMarginRight     { width: 42.708333333%; margin-right:0; } /* 410px / 960px */
    .eight.columns.noMarginRight     { width: 48.958333333%; margin-right:0; } /* 470px / 960px */
    .nine.columns.noMarginRight      { width: 55.208333333%; margin-right:0; } /* 530px / 960px */
    .ten.columns.noMarginRight       { width: 61.458333333%; margin-right:0; } /* 590px / 960px */
    .eleven.columns.noMarginRight    { width: 67.708333333%; margin-right:0; } /* 650px / 960px */
    .twelve.columns.noMarginRight    { width: 73.958333333%; margin-right:0; } /* 710px / 960px */
    .thirteen.columns.noMarginRight  { width: 80.208333333%; margin-right:0; } /* 770px / 960px */
    .fourteen.columns.noMarginRight  { width: 86.458333333%; margin-right:0; } /* 830px / 960px */
    .fifteen.columns.noMarginRight   { width: 92.708333333%; margin-right:0; } /* 890px / 960px */
    .sixteen.columns.noMarginRight   { width: 98.958333333%; margin-right:0; } /* 950px / 960px */
    
    .one-third.column.noMarginRight  { width: 32.291666667%; margin-right:0; } /* 310px / 960px */
    .two-thirds.column.noMarginRight { width: 65.625%; margin-right:0; } /* 630px / 960px */
	.half.column.noMarginRight		 { width: 48.958333333%; margin-right:0; } /* 470px / 960px; */
	
	/* no margin at all (left or right) */
	.one.column.noMargin	    	 { width: 6.25%; margin:0; } /* 60px / 960px */
    .two.columns.noMargin      		 { width: 12.5%; margin:0; } /* 120px / 960px */
    .three.columns.noMargin     	 { width: 18.75%; margin:0; } /* 180px / 960px */
    .four.columns.noMargin      	 { width: 25%; margin:0; } /* 240px / 960px */
    .five.columns.noMargin      	 { width: 31.25%; margin:0; } /* 300px / 960px */
    .six.columns.noMargin       	 { width: 37.5%; margin:0; } /* 360px / 960px */
    .seven.columns.noMargin     	 { width: 43.75%; margin:0; } /* 420px / 960px */
    .eight.columns.noMargin     	 { width: 50%; margin:0; } /* 480px / 960px */
    .nine.columns.noMargin      	 { width: 56.25%; margin:0; } /* 540px / 960px */
    .ten.columns.noMargin       	 { width: 62.5%; margin:0; } /* 600px / 960px */
    .eleven.columns.noMargin    	 { width: 68.75%; margin:0; } /* 660px / 960px */
    .twelve.columns.noMargin    	 { width: 75%; margin:0; } /* 720px / 960px */
    .thirteen.columns.noMargin  	 { width: 81.25%; margin:0; } /* 780px / 960px */
    .fourteen.columns.noMargin  	 { width: 87.5%; margin:0; } /* 840px / 960px */
    .fifteen.columns.noMargin   	 { width: 93.75%; margin:0; } /* 900px / 960px */
    .sixteen.columns.noMargin	   	 { width: 100%; margin:0; } /* 960px / 960px */
    
    .one-third.column.noMargin 		 { width: 33.333333333%; margin:0; } /* 320px / 960px */
    .two-thirds.column.noMargin 	 { width: 66.666666667%; margin:0; } /* 640px / 960px */
	.half.column.noMargin			 { width: 50%; margin:0; } /* 480px / 960px; */
	
    /* Offsets */   
    .offset-by-one                   { padding-left: 6.25%;  } /* 60px / 960px */
    .offset-by-two                   { padding-left: 12.5%; } /* 120px / 960px */
    .offset-by-three                 { padding-left: 18.75%; } /* 180px / 960px */
    .offset-by-four                  { padding-left: 25%; } /* 240px / 960px */
    .offset-by-five                  { padding-left: 31.35%; } /* 300px / 960px */
    .offset-by-six                   { padding-left: 37.5%; } /* 360px / 960px */
    .offset-by-seven                 { padding-left: 43.75%; } /* 420px / 960px */
    .offset-by-eight                 { padding-left: 50%; } /* 480px / 960px */
    .offset-by-nine                  { padding-left: 56.25%; } /* 540px / 960px */
    .offset-by-ten                   { padding-left: 62.5%; } /* 600px / 960px */
    .offset-by-eleven                { padding-left: 68.75%; } /* 660px / 960px */
    .offset-by-twelve                { padding-left: 75%; } /* 720px / 960px */
    .offset-by-thirteen              { padding-left: 81.25%; } /* 780px / 960px */
    .offset-by-fourteen              { padding-left: 87.5%; } /* 840px / 960px */
    .offset-by-fifteen               { padding-left: 93.75%; } /* 900px / 960px */
    
	.centered .gallery							{ text-align:center; }
	.centered .gallery img						{ max-width:100%; }
    
    
/* #Tablet (Portrait)
================================================== */   

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

    @media only screen and (min-width: 768px) and (max-width: 959px) {
        
		.centered                                  { width: 90%; }
		
		/* make one third and two third columns into half columns for tablets */
		/* .centered .one-third.column				   	{ width: 47.9167%; } /* 460px / 960px; */
		/* .centered .two-thirds.column			   		{ width: 47.9167%; } /* 460px / 960px; */
		/* .centered .one-third.column.noMarginLeft		{ width: 48.958333333%; margin-left:0; } /* 470px / 960px; */
		/* .centered .two-thirds.column.noMarginLeft	{ width: 48.958333333%; margin-left:0; } /* 470px / 960px; */
		/* .centered .one-third.column.noMarginRight	{ width: 48.958333333%; margin-left:0; } /* 470px / 960px; */
		/* .centered .two-thirds.column.noMarginRight	{ width: 48.958333333%; margin-left:0; } /* 470px / 960px; */
		/* .centered .one-third.column.noMargin			{ width: 50%; margin:0; } /* 480px / 960px; */
		/* .centered .two-thirds.column.noMargin		{ width: 50%; margin:0; } /* 480px / 960px; */
		
		.centered .four.columns.gallery				{ width: 47.9167%; } /* 460px / 960px; */
		
    }
    
    
/*  #Mobile (Portrait) 
================================================== */
    
    /* Note: Design for a width of 320px */
    
    @media only screen and (max-width: 767px) {
        /* .centered { width: 300px; } */
        .columns, .column { margin: 0; }
        
        .one.column,
        .two.columns,
        .three.columns,
        .four.columns,
        .five.columns,
        .six.columns,
        .seven.columns,
        .eight.columns,
        .nine.columns,
        .ten.columns,
        .eleven.columns,
        .twelve.columns,
        .thirteen.columns,
        .fourteen.columns,
        .fifteen.columns,
        .sixteen.columns, 
        .one-third.column, 
        .two-thirds.column,
		.half.column		  { width: 100%; }
        
        /* Offsets */   
        .offset-by-one,              
        .offset-by-two,                  
        .offset-by-three,                
        .offset-by-four,                     
        .offset-by-five,                     
        .offset-by-six,                  
        .offset-by-seven,                
        .offset-by-eight,                
        .offset-by-nine,                     
        .offset-by-ten,                  
        .offset-by-eleven,               
        .offset-by-twelve,               
        .offset-by-thirteen,             
        .offset-by-fourteen,             
        .offset-by-fifteen { padding-left: 0; }  
		
		.one.column.noMargin,
        .two.columns.noMargin,
        .three.columns.noMargin,
        .four.columns.noMargin,
        .five.columns.noMargin,
        .six.columns.noMargin,
        .seven.columns.noMargin,
        .eight.columns.noMargin,
        .nine.columns.noMargin,
        .ten.columns.noMargin,
        .eleven.columns.noMargin,
        .twelve.columns.noMargin,
        .thirteen.columns.noMargin,
        .fourteen.columns.noMargin,
        .fifteen.columns.noMargin,
        .sixteen.columns.noMargin,
        .one-third.column.noMargin, 
        .two-thirds.column.noMargin,
		.half.column.noMargin { width: 100%; }
		                
    }    
    
    
/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */
    
    @media only screen and (min-width: 480px) and (max-width: 767px) {
        /* .centered { width: 420px; } */
        .columns, .column { margin: 0; }
        
        .one.column,
        .two.columns,
        .three.columns,
        .four.columns,
        .five.columns,
        .six.columns,
        .seven.columns,
        .eight.columns,
        .nine.columns,
        .ten.columns,
        .eleven.columns,
        .twelve.columns,
        .thirteen.columns,
        .fourteen.columns,
        .fifteen.columns,
        .sixteen.columns,
        .one-third.column, 
        .two-thirds.column { width: 100%; }
		
		.one.column.noMargin,
        .two.columns.noMargin,
        .three.columns.noMargin,
        .four.columns.noMargin,
        .five.columns.noMargin,
        .six.columns.noMargin,
        .seven.columns.noMargin,
        .eight.columns.noMargin,
        .nine.columns.noMargin,
        .ten.columns.noMargin,
        .eleven.columns.noMargin,
        .twelve.columns.noMargin,
        .thirteen.columns.noMargin,
        .fourteen.columns.noMargin,
        .fifteen.columns.noMargin,
        .sixteen.columns.noMargin,
        .one-third.column.noMargin, 
        .two-thirds.column.noMargin { width: 100%; }
    }
     
    
/* #Clearing
================================================== */

    /* Self Clearing Goodness */
    .centered: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;
    }