/* #Base 960 Grid (Small Desktop/Tablet Landscape) ================================================== ================================================== ================================================== */ /* #Base 960 Grid ================================================== */ body { background-color: #fff; margin: 0px; padding: 0px; } .background { margin: 0px; padding: 0px; } .container { position: relative; width: 940px; margin: 0 auto; padding: 0; } .column, .columns { float: left; display: inline; } .row { margin-bottom: 20px; } /* Base Grid */ .container .sixteen.columns { width: 940px; } .container .one-third.column { width: 300px; } .container .two-thirds.column { width: 620px; } .container .one-half.column { width: 460px; } #alpha { float: left; margin: 0px 10px 0px 0px; } #omega { float: left; margin: 0px 0px 0px 0px; } /* Specific Styles for this Screen ====================================================================================================================================================== */ /*.promo { float: left; width: 940px; height: 190px; background-color: #212121; margin: 30px 0px 20px 0px; padding: 0px 0px 0px 0px; } .promo-image { float: left; width: 345px; height: 190px; margin: 0px 20px 0px 0px; background-image: url(../images/promo.jpg); background-repeat: no-repeat; background-position: left top; } .promo-line1 { float: left; width: 575px; font-family: "proxima-nova-extra-condensed", sans-serif; font-style: normal; font-weight: 600; font-size: 52px; line-height: 50px; color: #fff; text-transform: uppercase; letter-spacing: 0px; padding: 15px 0px 0px 0px; margin: 0px 0px 0px 0px; -webkit-margin-before: 0em; -webkit-margin-after: 0em; } .promo-line2 { float: left; width: 575px; font-family: "proxima-nova-extra-condensed", sans-serif; font-style: normal; font-weight: 600; font-size: 32px; line-height: 30px; color: #b2202b; text-transform: uppercase; letter-spacing: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; -webkit-margin-before: 0em; -webkit-margin-after: 0em; } .promo-line3 { float: left; width: 425px; font-family: "proxima-nova-condensed", sans-serif; font-style: normal; font-weight: 300; font-size: 15px; line-height: 18px; color: #ccc; padding: 8px 0px 0px 0px; margin: 0px 0px 0px 0px; -webkit-margin-before: 0em; -webkit-margin-after: 0em; } .learnmore { float: left; width: 100px; height: 30px; margin: 15px 0px 0px 20px; padding: 0px 0px 0px 0px; background-color: #b2202b; background-image: url(../images/arrow2x.png); background-repeat: no-repeat; background-position: 10px; background-size: 3px 6px; -webkit-background-size: 3px 6px; -moz-background-size: 3px 6px; } .learnmore a { font-family: "proxima-nova-condensed", sans-serif; font-style: normal; font-weight: 300; font-size: 14px; line-height: 32px; color: #fff; text-transform: uppercase; padding: 0px 0px 0px 20px; margin: 0px 0px 0px 0px; -webkit-margin-before: 0em; -webkit-margin-after: 0em; text-decoration: none; } #promo-learnmore { float: right; margin: 45px 20px 0px 0px; }*/ .promo { float: left; width: 860px; background-color: #212121; margin: 30px 0px 20px 0px; padding: 20px 40px 30px 40px; } .promo-line1 { float: left; width: 100%; font-family: "proxima-nova-extra-condensed", sans-serif; font-style: normal; font-weight: 600; font-size: 72px; line-height: 64px; color: #fff; text-align: center; text-transform: uppercase; letter-spacing: 0px; padding: 0px; margin: 0px; -webkit-margin-before: 0em; -webkit-margin-after: 0em; } .promo-line2 { float: left; width: 100%; font-family: "proxima-nova-extra-condensed", sans-serif; font-style: normal; font-weight: 600; font-size: 32px; line-height: 30px; color: #ba3234; text-align: center; text-transform: uppercase; letter-spacing: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; -webkit-margin-before: 0em; -webkit-margin-after: 0em; } .promo-line3 { float: left; width: 100%; font-family: "proxima-nova-condensed", sans-serif; font-style: normal; font-weight: 300; font-size: 15px; line-height: 18px; color: #ccc; text-align: center; padding: 8px 0px 0px 0px; margin: 0px 0px 0px 0px; -webkit-margin-before: 0em; -webkit-margin-after: 0em; } .video { float: left; width: 900px; background-color: #212121; margin: 0px 0px 0px 0px; padding: 20px 20px 20px 20px; } /* #Tablet (Portrait) ================================================== ================================================== ================================================== */ /* Note:Design for a width of 768px */ @media only screen and (min-width:768px) and (max-width:959px) { .container { width: 702px; } .container .column, .container .columns .column.alpha, .columns.alpha { margin-left: 0; margin-right: 0px; } .column.omega, .columns.omega { margin-right: 0; margin-left: 0px; } .container .sixteen.columns { width: 702px; } .container .one-third.column { width: 236px; } .container .two-thirds.column { width: 492px; } .container .one-half.column { width: 330px; } /* Specific Styles for this Screen ====================================================================================================================================================== */ /*.promo { float: left; width: 702px; height: 179px; background-color: #212121; margin: 30px 0px 0px 0px; padding: 0px 0px 0px 0px; } .promo-image { float: left; width: 325px; height: 179px; overflow: hidden; margin: 0px 20px 0px 0px; background-image: url(../images/promo.jpg); background-repeat: no-repeat; background-position: left top; } .promo-line1 { float: left; width: 355px; font-family: "proxima-nova-extra-condensed", sans-serif; font-style: normal; font-weight: 600; font-size: 32px; line-height: 40px; color: #fff; text-transform: uppercase; letter-spacing: 0px; padding: 15px 0px 0px 0px; margin: 0px 0px 0px 0px; -webkit-margin-before: 0em; -webkit-margin-after: 0em; } .promo-line2 { float: left; width: 355px; font-family: "proxima-nova-extra-condensed", sans-serif; font-style: normal; font-weight: 600; font-size: 20px; line-height: 16px; color: #b2202b; text-transform: uppercase; letter-spacing: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; -webkit-margin-before: 0em; -webkit-margin-after: 0em; } .promo-line3 { float: left; width: 235px; font-family: "proxima-nova-condensed", sans-serif; font-style: normal; font-weight: 300; font-size: 13px; line-height: 17px; color: #ccc; padding: 8px 0px 0px 0px; margin: 0px 0px 0px 0px; -webkit-margin-before: 0em; -webkit-margin-after: 0em; } #promo-learnmore { float: right; margin: 58px 15px 0px 0px; }*/ .promo { width: 622px; padding: 20px 40px 30px 40px; } .promo-line1 { font-size: 56px; line-height: 56px; padding: 0px; margin: 0px; } .promo-line2 { font-size: 32px; line-height: 30px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; } .promo-line3 { font-size: 15px; line-height: 18px; padding: 8px 0px 0px 0px; margin: 0px 0px 0px 0px; } .video { float: left; width: 662px; background-color: #212121; margin: 0px 0px 0px 0px; padding: 20px 20px 20px 20px; } } /* #Mobile (Landscape) ================================================== ================================================== ================================================== */ /* Note:Design for a width of 480px */ @media only screen and (min-width:480px) and (max-width:767px) { body { -webkit-text-size-adjust: none; } .container { width: 460px; } .columns, .column { margin: 0; } .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column { width: 460px; } .container .one-half.column { width: 460px; } /* Specific Styles for this Screen ====================================================================================================================================================== */ /*.promo { float: left; width: 460px; height: 185px; background-color: #212121; margin: 20px 0px 0px 0px; padding: 0px 0px 0px 0px; } .promo-image { display: none; } .promo-line1 { float: left; width: 440px; font-family: "proxima-nova-extra-condensed", sans-serif; font-style: normal; font-weight: 600; font-size: 41px; line-height: 40px; color: #fff; text-transform: uppercase; letter-spacing: 0px; padding: 10px 0px 0px 10px; margin: 0px 0px 0px 0px; -webkit-margin-before: 0em; -webkit-margin-after: 0em; } .promo-line2 { float: left; width: 440px; font-family: "proxima-nova-extra-condensed", sans-serif; font-style: normal; font-weight: 600; font-size: 25px; line-height: 26px; color: #b2202b; text-transform: uppercase; letter-spacing: 0px; padding: 0px 0px 0px 10px; margin: 0px 0px 0px 0px; -webkit-margin-before: 0em; -webkit-margin-after: 0em; } .promo-line3 { float: left; width: 310px; font-family: "proxima-nova-condensed", sans-serif; font-style: normal; font-weight: 300; font-size: 15px; line-height: 18px; color: #ccc; padding: 4px 0px 0px 10px; margin: 0px 0px 0px 0px; -webkit-margin-before: 0em; -webkit-margin-after: 0em; } #promo-learnmore { float: right; margin: 60px 15px 0px 0px; }*/ .promo { width: 420px; padding: 20px 20px 30px 20px; } .promo-line1 { font-size: 38px; line-height: 38px; padding: 0px; margin: 0px; } .promo-line2 { font-size: 22px; line-height: 20px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; } .promo-line3 { font-size: 14px; line-height: 16px; padding: 8px 0px 0px 0px; margin: 0px 0px 0px 0px; } .video { float: left; width: 420px; background-color: #212121; margin: 0px 0px 0px 0px; padding: 20px 20px 20px 20px; } } /* #Mobile (Portrait) ================================================== ================================================== ================================================== */ /* Note:Design for a width of 320px */ @media only screen and (min-width:320px) and (max-width:479px) { .container { width: 300px; } .columns, .column { margin: 0; } .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column { width: 300px; } .container .one-half.column { width: 300px; } /* Specific Styles for this Screen ====================================================================================================================================================== */ /*.promo { float: left; width: 300px; height: 195px; background-color: #212121; margin: 20px 0px 0px 0px; padding: 0px 0px 0px 0px; } .promo-image { display: none; } .promo-line1 { float: left; width: 280px; font-family: "proxima-nova-extra-condensed", sans-serif; font-style: normal; font-weight: 600; font-size: 26px; line-height: 32px; color: #fff; text-transform: uppercase; letter-spacing: 0px; padding: 10px 0px 0px 10px; margin: 0px 0px 0px 0px; -webkit-margin-before: 0em; -webkit-margin-after: 0em; } .promo-line2 { float: left; width: 280px; font-family: "proxima-nova-extra-condensed", sans-serif; font-style: normal; font-weight: 600; font-size: 16px; line-height: 16px; color: #b2202b; text-transform: uppercase; letter-spacing: 0px; padding: 0px 0px 0px 10px; margin: 0px 0px 0px 0px; -webkit-margin-before: 0em; -webkit-margin-after: 0em; } .promo-line3 { float: left; width: 280px; font-family: "proxima-nova-condensed", sans-serif; font-style: normal; font-weight: 300; font-size: 14px; line-height: 16px; color: #ccc; padding: 4px 0px 0px 10px; margin: 0px 0px 0px 0px; -webkit-margin-before: 0em; -webkit-margin-after: 0em; } #promo-learnmore { float: right; margin: 10px 15px 0px 0px; }*/ .promo { width: 260px; padding: 20px 20px 30px 20px; } .promo-line1 { font-size: 24px; line-height: 24px; padding: 0px; margin: 0px; } .promo-line2 { font-size: 18px; line-height: 18px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; } .promo-line3 { font-size: 14px; line-height: 16px; padding: 8px 0px 0px 0px; margin: 0px 0px 0px 0px; } .video { float: left; width: 260px; background-color: #212121; margin: 0px 0px 0px 0px; padding: 20px 20px 20px 20px; } } /* #Clearing ================================================== ================================================== ================================================== */ /* Self Clearing Goodness */ .container: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
*/ .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; } /* You can also use a
to clear columns */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }