/* =============================================================================
   Titan Framework 
   Learn more ~ http://titanthemes.com/
   Licensed under GPL and MIT.
   ========================================================================== */
   
/* =============================================================================
   General Settings
   ========================================================================== */ 
body { width: 100%; }

/* =============================================================================
   Container
   ========================================================================== */
.container_12, .container_16 { margin-left: auto;  margin-right: auto; }

/* =============================================================================
   Grid >> Global
   ========================================================================== */ 
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, 
.grid_10, .grid_11, .grid_12 { display: inline; float: left; }

/* =============================================================================
   Grid >> Children (Alpha ~ First, Omega ~ Last)
   ========================================================================== */ 
.alpha { margin-left: 0!important; }
.omega { margin-right: 0!important; }

/* =============================================================================
   Base Grid
   ========================================================================== */ 
.container_12 { width: 960px; }   
.container_12 .grid_1 { width: 60px; }
.container_12 .grid_2 { width: 140px; }
.container_12 .grid_3 { width: 220px; }
.container_12 .grid_4 { width: 300px; }
.container_12 .grid_5 { width: 380px; }
.container_12 .grid_6 { width: 460px; }
.container_12 .grid_7 { width: 540px; }
.container_12 .grid_8 { width: 620px; }
.container_12 .grid_9 { width: 700px; }
.container_12 .grid_10 { width: 780px; }
.container_12 .grid_11 { width: 860px; }
.container_12 .grid_12 { width: 940px; }

.container_12 .grid_1, .container_12 .grid_2, .container_12 .grid_3, 
.container_12 .grid_4, .container_12 .grid_5, .container_12 .grid_6, 
.container_12 .grid_7, .container_12 .grid_8, .container_12 .grid_9,
.container_12 .grid_10, .container_12 .grid_11, .container_12 .grid_12 { margin-left: 10px; margin-right: 10px; }

/* Offset Extra Space >> 16 Columns */

.container_12 .offset_1 { padding-left: 80px; }
.container_12 .offset_2 { padding-left: 160px; }
.container_12 .offset_3 { padding-left: 240px; }
.container_12 .offset_4 { padding-left: 320px;  }
.container_12 .offset_5 { padding-left: 400px; }
.container_12 .offset_6 { padding-left: 480px; }
.container_12 .offset_7 { padding-left: 560px; }
.container_12 .offset_8 { padding-left: 640px; }
.container_12 .offset_9 { padding-left: 720px; }
.container_12 .offset_10 { padding-left: 800px; }
.container_12 .offset_11 { padding-left: 880px; }

/* 16 Column Grid */
.container_16 { width: 960px; }   
.container_16 .grid_1 { width: 40px; }
.container_16 .grid_2 { width: 100px; }
.container_16 .grid_3 { width: 160px; }
.container_16 .grid_4 { width: 220px; }
.container_16 .grid_5 { width: 280px; }
.container_16 .grid_6 { width: 340px; }
.container_16 .grid_7 { width: 400px; }
.container_16 .grid_8 { width: 460px; }
.container_16 .grid_9 { width: 520px; }
.container_16 .grid_10 { width: 580px; }
.container_16 .grid_11 { width: 640px; }
.container_16 .grid_12 { width: 700px; }
.container_16 .grid_13 { width: 760px; }
.container_16 .grid_14 { width: 820px; }
.container_16 .grid_15 { width: 880px; }
.container_16 .grid_16 { width: 940px; }

.container_16 .grid_1, .container_16 .grid_2, .container_16 .grid_3, 
.container_16 .grid_4, .container_16 .grid_5, .container_16 .grid_6, 
.container_16 .grid_7, .container_16 .grid_8, .container_16 .grid_9,
.container_16 .grid_10, .container_16 .grid_11, .container_16 .grid_12,
.container_16 .grid_13, .container_16 .grid_14, .container_16 .grid_15,
.container_16 .grid_16 { margin-left: 10px; margin-right: 10px; }

/* 24 Column Grid */
.container_24 { width: 960px; }   
.container_24 .grid_1 { width: 30px; }
.container_24 .grid_2 { width: 70px; }
.container_24 .grid_3 { width: 110px; }
.container_24 .grid_4 { width: 150px; }
.container_24 .grid_5 { width: 190px; }
.container_24 .grid_6 { width: 230px; }
.container_24 .grid_7 { width: 270px; }
.container_24 .grid_8 { width: 310px; }
.container_24 .grid_9 { width: 350px; }
.container_24 .grid_10 { width: 390px; }
.container_24 .grid_11 { width: 430px; }
.container_24 .grid_12 { width: 470px; }

.container_24 .grid_1, .container_24 .grid_2, .container_24 .grid_3, 
.container_24 .grid_4, .container_24 .grid_5, .container_24 .grid_6, 
.container_24 .grid_7, .container_24 .grid_8, .container_24 .grid_9,
.container_24 .grid_10, .container_24 .grid_11, .container_24 .grid_12 { margin-left: 5px; margin-right: 5px; }


/* =============================================================================
   Clearing
   ========================================================================== */ 
.clear {
  clear: both; display: block; overflow: hidden;
  visibility: hidden; width: 0; height: 0;
}
.clearfix:before, .clearfix:after,
.container_12:before, .container_12:after,
.container_16:before, .container_16:after,
.container_24:before, .container_24:after {
  content: '.'; display: block; overflow: hidden;
  visibility: hidden; font-size: 0; line-height: 0;
  width: 0; height: 0;
}
.clearfix:after,
.container_12:after,
.container_16:after,
.container_24:after { clear: both; }

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/
.clearfix, .container_12, .container_16, .container_24 { zoom: 1; }