/* * 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; }