/*

* Framework

* 

* @package WP Pro Automotive

* @subpackage CSS

*



WARNING! DO NOT EDIT THIS FILE!



To make it easy to update your theme, you should not edit the styles in this file. Instead use 

the Child Theme Generator in WP Admin > Appearance > Child Theme



View the screencast: http://www.screenr.com/tbos



/* ==============================================================================



Stylesheet Guide



    2.1 Base 1200 Grid

	2.2 960 Grid

    2.2 Tablet (Portrait)

    2.3 Mobile (Portrait)

    2.4 Mobile (Landscape)

    2.5 Clearing



/* ============================================================================== */

/* 2.1 Base 1200 Grid

/* ==============================================================================



.container                                  { position: relative; width: 1200px; margin: 0 auto; padding: 0;}

    .column, .columns                           { float: left; display: inline; margin: 0 0 0 20px;}

    .row                                        { margin-bottom: 20px;}



    /* Nested Column Classes 

    .column.alpha, .columns.alpha               { margin-left: 0;}

    .column.omega, .columns.omega               { margin-right: 0;}



    /* Base Grid 

    .container .one.column                      { width: 40px;}

    .container .two.columns                     { width: 125px;}

    .container .three.columns                   { width: 200px;}

    .container .four.columns                    { width: 275px;}

    .container .five.columns                    { width: 340px;}

    .container .six.columns                     { width: 425px;}

    .container .seven.columns                   { width: 490px;}

    .container .eight.columns                   { width: 565px;}

    .container .nine.columns                    { width: 640px;}

    .container .ten.columns                     { width: 715px;}

    .container .eleven.columns                  { width: 790px;}

    .container .twelve.columns                  { width: 865px;}

    .container .thirteen.columns                { width: 940px;}

    .container .fourteen.columns                { width: 1015px;}

    .container .fifteen.columns                 { width: 1090px;}

    .container .sixteen.columns                 { width: 1160px;}



    .container .one-third.column                { width: 365px;}

    .container .two-thirds.column               { width: 385px;}



    /* Offsets 

    .container .offset-by-one                   { padding-left: 60px;}

    .container .offset-by-two                   { padding-left: 135px;}

    .container .offset-by-three                 { padding-left: 240px;}

    .container .offset-by-four                  { padding-left: 285px;}

    .container .offset-by-five                  { padding-left: 360px;}

    .container .offset-by-six                   { padding-left: 435px;}

    .container .offset-by-seven                 { padding-left: 510px;}

    .container .offset-by-eight                 { padding-left: 585px;}

    .container .offset-by-nine                  { padding-left: 660px;}

    .container .offset-by-ten                   { padding-left: 735px;}

    .container .offset-by-eleven                { padding-left: 810px;}

    .container .offset-by-twelve                { padding-left: 885px;}

    .container .offset-by-thirteen              { padding-left: 940px;}

    .container .offset-by-fourteen              { padding-left: 1035px;}

    .container .offset-by-fifteen               { padding-left: 1110px;}

	

/* ============================================================================== */

/* 2.2 960 Grid

/* ============================================================================== */



	@media only screen and (min-width: 960px) and (max-width: 3000px) {

	        .container                                  { position: relative; width: 960px; margin: 0 auto; padding: 0;}

	        .column, .columns                           { float: left; display: inline; margin: 0 0 0 20px;}

	        .row                                        { margin-bottom: 20px;}



	        /* Nested Column Classes */

	        .column.alpha, .columns.alpha               { margin-left: 0;}

	        .column.omega, .columns.omega               { margin-right: 0;}



	        /* Base Grid */

	        .container .one.column                      { width: 20px;}

	        .container .two.columns                     { width: 80px;}

	        .container .three.columns                   { width: 158px;}

	        .container .four.columns                    { width: 195px;}

	        .container .five.columns                    { width: 260px;}

	        .container .six.columns                     { width: 335px;}

	        .container .seven.columns                   { width: 385px;}

	        .container .eight.columns                   { width: 440px;}

	        .container .nine.columns                    { width: 500px;}

	        .container .ten.columns                     { width: 565px;}

	        .container .eleven.columns                  { width: 620px;}

	        .container .twelve.columns                  { width: 680px;}

	        .container .thirteen.columns                { width: 740px;}

	        .container .fourteen.columns                { width: 800px;}

	        .container .fifteen.columns                 { width: 860px;}

	        .container .sixteen.columns                 { width: 920px;}



	        .container .one-third.column                { width: 285px;}

	        .container .two-thirds.column               { width: 605px;}



	        /* Offsets */

	        .container .offset-by-one                   { padding-left: 40px;}

	        .container .offset-by-two                   { padding-left: 100px;}

	        .container .offset-by-three                 { padding-left: 160px;}

	        .container .offset-by-four                  { padding-left: 220px;}

	        .container .offset-by-five                  { padding-left: 280px;}

	        .container .offset-by-six                   { padding-left: 340px;}

	        .container .offset-by-seven                 { padding-left: 400px;}

	        .container .offset-by-eight                 { padding-left: 460px;}

	        .container .offset-by-nine                  { padding-left: 520px;}

	        .container .offset-by-ten                   { padding-left: 580px;}

	        .container .offset-by-eleven                { padding-left: 640px;}

	        .container .offset-by-twelve                { padding-left: 700px;}

	        .container .offset-by-thirteen              { padding-left: 760px;}

	        .container .offset-by-fourteen              { padding-left: 820px;}

	        .container .offset-by-fifteen               { padding-left: 880px;}

		}



/* ============================================================================== */

/* 2.3 Tablet (Portrait)

/* Note: Design for a width of 768px

/* ============================================================================== */



    @media only screen and (min-width: 768px) and (max-width: 959px) {

        .container                                  { width: 768px; margin: 0 auto;}

        .container .column,

        .container .columns                         { margin-left: 20px; margin-right: 0;}

        .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 20px;}

        .column.omega, .columns.omega               { margin-right: 0; margin-left: 20px;}



        .container .one.column                      { width: 23px;}

        .container .two.columns                     { width: 71px;}

        .container .three.columns                   { width: 116px;}

        .container .four.columns                    { width: 157px;}

        .container .five.columns                    { width: 215px;}

        .container .six.columns                     { width: 253px;}

        .container .seven.columns                   { width: 311px;}

        .container .eight.columns                   { width: 359px;}

        .container .nine.columns                    { width: 407px;}

        .container .ten.columns                     { width: 455px;}

        .container .eleven.columns                  { width: 503px;}

        .container .twelve.columns                  { width: 551px;}

        .container .thirteen.columns                { width: 599px;}

        .container .fourteen.columns                { width: 647px;}

        .container .fifteen.columns                 { width: 695px;}

        .container .sixteen.columns                 { width: 728px;}



        .container .one-third.column                { width: 231px;}

        .container .two-thirds.column               { width: 487px;}



        /* Offsets */

        .container .offset-by-one                   { padding-left: 43px;}

        .container .offset-by-two                   { padding-left: 91px;}

        .container .offset-by-three                 { padding-left: 139px;}

        .container .offset-by-four                  { padding-left: 187px;}

        .container .offset-by-five                  { padding-left: 235px;}

        .container .offset-by-six                   { padding-left: 283px;}

        .container .offset-by-seven                 { padding-left: 331px;}

        .container .offset-by-eight                 { padding-left: 343px;}

        .container .offset-by-nine                  { padding-left: 427px;}

        .container .offset-by-ten                   { padding-left: 475px;}

        .container .offset-by-eleven                { padding-left: 523px;}

        .container .offset-by-twelve                { padding-left: 571px;}

        .container .offset-by-thirteen              { padding-left: 619px;}

        .container .offset-by-fourteen              { padding-left: 667px;}

        .container .offset-by-fifteen               { padding-left: 715px;}

   }



/* ============================================================================== */

/* 2.4 Mobile (Portrait)

/* Note: Design for a width of 320px

/* ============================================================================== */



    @media only screen and (max-width: 767px) {

        .container { width: 300px; margin: 0 auto;}

        .columns, .column { margin: 0 20px;}



        .container .one.column,

        .container .two.columns,

        .container .three.columns,

        .container .four.columns,

        .container .five.columns,

        .container .six.columns,

        .container .seven.columns,

        .container .eight.columns,

        .container .nine.columns,

        .container .ten.columns,

        .container .eleven.columns,

        .container .twelve.columns,

        .container .thirteen.columns,

        .container .fourteen.columns,

        .container .fifteen.columns,

        .container .sixteen.columns,

        .container .one-third.column,

        .container .two-thirds.column  { width: 260px;}



        /* Offsets */

        .container .offset-by-one,

        .container .offset-by-two,

        .container .offset-by-three,

        .container .offset-by-four,

        .container .offset-by-five,

        .container .offset-by-six,

        .container .offset-by-seven,

        .container .offset-by-eight,

        .container .offset-by-nine,

        .container .offset-by-ten,

        .container .offset-by-eleven,

        .container .offset-by-twelve,

        .container .offset-by-thirteen,

        .container .offset-by-fourteen,

        .container .offset-by-fifteen { padding-left: 0;}

	}



/* ============================================================================== */

/* 2.5 Mobile (Landscape)

/* Note: Design for a width of 480px

/* ============================================================================== */



    @media only screen and (min-width: 480px) and (max-width: 767px) {

        .container { width: 420px; margin: 0 auto;}

        .columns, .column { margin: 0 20px;}



        .container .one.column,

        .container .two.columns,

        .container .three.columns,

        .container .four.columns,

        .container .five.columns,

        .container .six.columns,

        .container .seven.columns,

        .container .eight.columns,

        .container .nine.columns,

        .container .ten.columns,

        .container .eleven.columns,

        .container .twelve.columns,

        .container .thirteen.columns,

        .container .fourteen.columns,

        .container .fifteen.columns,

        .container .sixteen.columns,

        .container .one-third.column,

        .container .two-thirds.column { width: 380px;}

	}



/* ============================================================================== */

/* 2.6 Clearing

/* ============================================================================== */



    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden;}



    .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;}



    .clear:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

	.clear { display: inline-block; }

	* html .clear { height: 1%; } /* Hides from IE-mac */

	.clear { display: block; }