/*
Role: Media Queries
Author: Marco Siniscalco
License: MIT
Copyright: 2012, Marco Siniscalco. All Rights Reserved
Project Site: http://orchardmetrotheme.codeplex.com/
***************************************************************/

/* 
    1. 12 Column Grid 0px - 320px - MOBILE & SMALL TABLET
---------------------------------------------------------------------------*/
@media screen and (min-width: 0px) and (max-width: 480px) {

    #topBar, 
	#layout-header, 
	#layout-navigation,
    #layout-before, 
	#layout-featured, 
	#aside-first, 
	#layout-content,
	#aside-second,
    #layout-after-main,
    #tripel-first,
    #tripel-second,
    #tripel-third,
	#footer-quad-first,
    #footer-quad-second,
    #footer-quad-third,
    #footer-quad-fourth,
    #footer { width:100%; }

    #layout-navigation nav ul li { float: none; margin: 0 0 1px 0; }
    #layout-navigation nav ul li a { float: none; }
    #layout-navigation { border: none; }
}

/* 
    2. 12 Column Grid 481px - 768px - TABLET PRTRAIT
---------------------------------------------------------------------------*/
@media screen and (min-width: 481px) and (max-width: 768px) {

    .col_1 { width: 8.33333333333%; }
    .col_2 { width: 16.6666666667%; }
    .col_3 { width: 25.0%; }

    .col_4,
	.aside-1 #aside-first,
    .aside-2 #aside-second { width: 32%; }
        
    .col_5 { width: 41.6666666667%; }

    .col_6,
    .tripel-12 #layout-tripel-container > div, /* If zones 1, 2 are on */
    .tripel-23 #layout-tripel-container > div, /* If zones 2, 3 are on */
    .tripel-13 #layout-tripel-container > div  /* If zones 1, 3 are on */ { width: 50.0%; }

    .col_7 { width: 58.3333333333%; }

    .col_8,
    .aside-1 #layout-content,
    .aside-2 #layout-content { width: 66.6666666667%; }
        
    .col_9  { width: 75.0%; }
    .col_10 { width: 83.3333333333%; }
    .col_11 { width: 91.6666666667%; }

    .col_12,
    #topBar,
	#layout-header, 
	#layout-navigation,
    #layout-before, 
	#layout-featured,
    #layout-content,
    #layout-after-main,
    .aside-12 #aside-first,
    .aside-12 #layout-content,
    .aside-12 #aside-second,
    #footer-quad-container > div,
    #footer { width: 100%; }        

    #layout-navigation nav ul li { float: left; width: 50%; margin-bottom: 1px; }
    #layout-navigation nav ul li a { float: none; }
    #layout-navigation { border: none; }

}

/* 
    3. 12 Column Grid 768px - 968px - ...
---------------------------------------------------------------------------*/
@media screen and (min-width: 769px) and (max-width: 968px) {

    .col_1 { width: 8.33333333333%; }
    .col_2,
    .aside-12 #aside-first,
	.aside-12 #aside-second { width: 16.6666666667%; }

    .col_3,
    .split-1234 #footer-quad-container > div  { width: 25.0%; }
        
    .col_4,
    .aside-1 #aside-first,
	.aside-2 #aside-second,
    .tripel-123 #layout-tripel-container > div,
    .split-123 #footer-quad-container > div,  /* If zones 1, 2, 3 are on */ 
    .split-124 #footer-quad-container > div, /* If zones 1, 2, 4 are on */
    .split-134 #footer-quad-container > div,  /* If zones 1, 3, 4 are on */
    .split-234 #footer-quad-container > div  /* If zones 2, 3, 4 are on */  { width: 33.3333333333%; }

    .col_5 { width: 41.6666666667%; }

    .col_6,
    .tripel-12 #layout-tripel-container > div, /* If zones 1, 2 are on */
    .tripel-23 #layout-tripel-container > div, /* If zones 2, 3 are on */
    .tripel-13 #layout-tripel-container > div,  /* If zones 1, 3 are on */
    .split-12 #footer-quad-container > div, /* If zones 1, 2 are on */
    .split-13 #footer-quad-container > div, /* If zones 1, 3 are on */
    .split-14 #footer-quad-container > div, /* If zones 1, 4 are on */
    .split-23 #footer-quad-container > div, /* If zones 2, 3 are on */
    .split-24 #footer-quad-container > div, /* If zones 2, 4 are on */
    .split-34 #footer-quad-container > div  /* If zones 3, 4 are on */ { width: 50.0%; }

    .col_7 { width: 58.3333333333%; }

    .col_8,
    .aside-12 #layout-content,
    .aside-1 #layout-content,
    .aside-2 #layout-content { width: 66.6666666667%; }

    .col_9  { width: 75.0%; }
    .col_10 { width: 83.3333333333%; }
    .col_11 { width: 91.6666666667%; }

    .col_12,
    #topBar,
	#layout-header, 
	#layout-navigation,
    #layout-before,
	#layout-featured,
    #layout-content, 
    #layout-after-main,
    #footer { width: 100%; }

    #layout-navigation nav ul li { float: left; width: 33.3%; margin-bottom: 1px; }
    #layout-navigation nav ul li a { float: none; }
    #layout-navigation { border: none; }

}

    /* 
        4. 12 Column Grid 968px - 1024px - ...
---------------------------------------------------------------------------*/
@media screen and (min-width: 969px) and (max-width: 1024px) {

    .col_1 { width: 8.33333333333%; }

    .col_2,
    .aside-12 #aside-first { width: 16.6666666667%; }

    .col_3,
	.aside-1 #aside-first,
	.aside-2 #aside-second,
	.aside-12 #aside-second,
    .split-1234 #footer-quad-container > div { width: 25.0%; }
        
    .col_4,
    .tripel-123 #layout-tripel-container > div,
    .split-123 #footer-quad-container > div,  /* If zones 1, 2, 3 are on */ 
    .split-124 #footer-quad-container > div, /* If zones 1, 2, 4 are on */
    .split-134 #footer-quad-container > div,  /* If zones 1, 3, 4 are on */
    .split-234 #footer-quad-container > div  /* If zones 2, 3, 4 are on */ { width: 33.3333333333%; }

    .col_5 { width: 41.6666666667%; }
    .col_6,
    .tripel-12 #layout-tripel-container > div, /* If zones 1, 2 are on */
    .tripel-23 #layout-tripel-container > div, /* If zones 2, 3 are on */
    .tripel-13 #layout-tripel-container > div,  /* If zones 1, 3 are on */ 
    .split-12 #footer-quad-container > div, /* If zones 1, 2 are on */
    .split-13 #footer-quad-container > div, /* If zones 1, 3 are on */
    .split-14 #footer-quad-container > div, /* If zones 1, 4 are on */
    .split-23 #footer-quad-container > div, /* If zones 2, 3 are on */
    .split-24 #footer-quad-container > div, /* If zones 2, 4 are on */
    .split-34 #footer-quad-container > div  /* If zones 3, 4 are on */ { width: 50.0%; }

    .col_7,
    .aside-12 #layout-content { width: 58.3333333333%; }
        
    .col_8  { width: 66.6666666667%; }

    .col_9,
    .aside-1 #layout-content,
    .aside-2 #layout-content { width: 75%; }

    .col_10 { width: 83.3333333333%; }
    .col_11 { width: 91.6666666667%; }

    .col_12,
    #topBar,
	#layout-header, 
	#layout-navigation,
    #layout-before, 
	#layout-featured,
    #layout-content,
    #layout-after-main,
    #footer {  width: 100%; }

    #layout-navigation nav ul li { border-bottom: none; }

}

    /* 
        5. 12 Column Grid 968px - Infinity - ...
---------------------------------------------------------------------------*/
@media screen and (min-width: 1025px) {
    
    .col_1 { width: 8.33333333333%; }
    .col_2 { width: 16.6666666667%; }

    .col_3,
    .aside-1 #aside-first,
	.aside-2 #aside-second,
    .aside-12 #aside-first,
	.aside-12 #aside-second,
    .split-1234 #footer-quad-container > div { width: 25.0%; }

    .col_4,
    .tripel-123 #layout-tripel-container > div,
    .split-123 #footer-quad-container > div,  /* If zones 1, 2, 3 are on */ 
    .split-124 #footer-quad-container > div,  /* If zones 1, 2, 4 are on */
    .split-134 #footer-quad-container > div,  /* If zones 1, 3, 4 are on */
    .split-234 #footer-quad-container > div   /* If zones 2, 3, 4 are on */ { width: 33.3333333333%; }

    .col_5 { width: 41.6666666667%; }
        
    .col_6,
    .aside-12 #layout-content,
    .aside-12 #layout-content,
    .tripel-12 #layout-tripel-container > div, /* If zones 1, 2 are on */
    .tripel-23 #layout-tripel-container > div, /* If zones 2, 3 are on */
    .tripel-13 #layout-tripel-container > div, /* If zones 1, 3 are on */ 
    .split-12 #footer-quad-container > div, /* If zones 1, 2 are on */
    .split-13 #footer-quad-container > div, /* If zones 1, 3 are on */
    .split-14 #footer-quad-container > div, /* If zones 1, 4 are on */
    .split-23 #footer-quad-container > div, /* If zones 2, 3 are on */
    .split-24 #footer-quad-container > div, /* If zones 2, 4 are on */
    .split-34 #footer-quad-container > div  /* If zones 3, 4 are on */ { width: 50.0%; }

    .col_7  { width: 58.3333333333%; }
    .col_8 { width: 66.6666666667%; }

    .col_9,
    .aside-1 #layout-content,
    .aside-2 #layout-content  { width: 75.0%; }

    .col_10 { width: 83.3333333333%; }
    .col_11 { width: 91.6666666667%; }

    .col_12,
    #topBar,
	#layout-header, 
	#layout-navigation,
    #layout-before, 
	#layout-featured,
    #layout-content,
    #layout-after-main,
    #footer { width: 100%; }

    #layout-navigation nav ul li { border-bottom: none; }

}