﻿/* Table of Contents
==================================================
    #Base 960 Grid
    #Tablet (Portrait)
    #Mobile (Portrait)
    #Mobile (Landscape)
    #Clearing 
FYI - This style represents the common architecture that is used throughout the new 3DCC pages. 
It's recommended you try and use the defaults before simply creating new divs, but its not required.
Although, this will be what helps a long our responsive efforts moving forward. 
*/

/* #Base 960 Grid
================================================== */
    /**** min-width:1024px; Commentted to Fix SPR 880329 ****/
    .ds_container_12{ position: relative; width: 100%; /* min-width:1024px; */ margin: 0; padding: 0; }
	.ds_grid_1,
	.ds_grid_2,
	.ds_grid_3,
	.ds_grid_4,
	.ds_grid_5,
	.ds_grid_6,
	.ds_grid_7,
	.ds_grid_8,
	.ds_grid_9,
	.ds_grid_10,
	.ds_grid_11,
	.ds_grid_12
	{ float: left; display: inline; margin-left: 10px; margin-right: 10px; }

    /* Nested Column Classes */
     .ds_container_12 .alpha               { margin-left: 0; }
     .ds_container_12 .omega               { margin-right: 0; }

    /* Base Grid */
    .ds_container_12 .ds_grid_1			{ width: 60px;  }
    .ds_container_12 .ds_grid_2			{ width: 140px; }
    .ds_container_12 .ds_grid_3			{ width: 220px; }
    .ds_container_12 .ds_grid_4			{ width: 300px; }
    .ds_container_12 .ds_grid_5			{ width: 380px; }
    .ds_container_12 .ds_grid_6			{ width: 460px; }
    .ds_container_12 .ds_grid_7			{ width: 540px; }
    .ds_container_12 .ds_grid_8			{ width: 620px; }
    .ds_container_12 .ds_grid_9			{ width: 700px; }
    .ds_container_12 .ds_grid_10			{ width: 780px; }
    .ds_container_12 .ds_grid_11			{ width: 860px; }
    .ds_container_12 .ds_grid_12			{ width: 940px; }
    .ds_container_12 .ds_grid_13			{ width: 100%; }
    .ds_container_12 .ds_grid_729			{ width: 729px; }
	/* Prefix Extra Space >> 12 Columns */
	.ds_container_12 .ds_prefix_0 		{padding-left:10px;}
	.ds_container_12 .ds_prefix_1 		{padding-left:80px;}	
	.ds_container_12 .ds_prefix_2 		{padding-left:160px;}
	.ds_container_12 .ds_prefix_3 		{padding-left:240px;}
	.ds_container_12 .ds_prefix_4 		{padding-left:320px;}
	.ds_container_12 .ds_prefix_5 		{padding-left:400px;}
	.ds_container_12 .ds_prefix_6 		{padding-left:480px;}
	.ds_container_12 .ds_prefix_7 		{padding-left:560px;}
	.ds_container_12 .ds_prefix_8 		{padding-left:640px;}
	.ds_container_12 .ds_prefix_9 		{padding-left:720px;}
	.ds_container_12 .ds_prefix_10 		{padding-left:800px;}
	.ds_container_12 .ds_prefix_11 		{padding-left:880px;}
	/* Suffix Extra Space >> 12 Columns */
	.ds_container_12 .ds_suffix_0 		{padding-right:10px;}	
	.ds_container_12 .ds_suffix_1 		{padding-right:80px;}
	.ds_container_12 .ds_suffix_2 		{padding-right:160px;}
	.ds_container_12 .ds_suffix_3 		{padding-right:240px;}
	.ds_container_12 .ds_suffix_4 		{padding-right:320px;}
	.ds_container_12 .ds_suffix_5 		{padding-right:400px;}
	.ds_container_12 .ds_suffix_6 		{padding-right:480px;}
	.ds_container_12 .ds_suffix_7 		{padding-right:560px;}
	.ds_container_12 .ds_suffix_8 		{padding-right:640px;}
	.ds_container_12 .ds_suffix_9 		{padding-right:720px;}
	.ds_container_12 .ds_suffix_10 		{padding-right:800px;}
	.ds_container_12 .ds_suffix_11 		{padding-right:880px;}



/* #Clearing
================================================== */

    .ds_container_12: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'; /*ads a unicode space*/
      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;
    }


