/* * Skeleton V1.2 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 6/20/2012 */ .container { position: relative; width: 930px; margin: 0 auto; padding: 0; } .container .column, .container .columns { float: left; display: inline; margin: 0px; padding: 0px; } .conin { margin-left:15px; margin-right:15px; } .container .pdleft10{ padding-left:10px; } .container .pdright10{ padding-right:10px; } .container .pdtop10{ padding-top:10px; } .container .pdbottom10{ padding-bottom:10px; } .container .pdleft20{ padding-left:20px; } .container .pdleft40{ padding-left:40px; } .container .pdright20{ padding-right:20px; } .container .pdright40{ padding-right:40px; } .container .pdtop20{ padding-top:20px; } .container .pdbottom20{ padding-bottom:20px; } .container .pd5{ padding:5px; } .container .pd10{ padding:10px; } .container .pd20{ padding:20px; } .container .c1.column, .container .c1.columns { width: 15px; } .container .c2.columns { width: 30px; } .container .c3.columns { width: 45px; } .container .c4.columns { width: 60px; } .container .c5.columns { width: 75px; } .container .c6.columns { width: 90px; } .container .c7.columns { width: 105px; } .container .c8.columns { width: 120px; } .container .c9.columns { width: 135px; } .container .c10.columns { width: 150px; } .container .c11.columns { width: 165px; } .container .c12.columns { width: 180px; } .container .c13.columns { width: 195px; } .container .c14.columns { width: 210px; } .container .c15.columns { width: 225px; } .container .c16.columns { width: 240px; } .container .c17.columns { width: 255px; } .container .c18.columns { width: 270px; } .container .c19.columns { width: 285px; } .container .c20.columns { width: 300px; } .container .c21.columns { width: 315px; } .container .c22.columns { width: 330px; } .container .c23.columns { width: 345px; } .container .c24.columns { width: 360px; } .container .c25.columns { width: 375px; } .container .c26.columns { width: 390px; } .container .c27.columns { width: 405px; } .container .c28.columns { width: 420px; } .container .c29.columns { width: 435px; } .container .c30.columns { width: 450px; } .container .c31.columns { width: 465px; } .container .c32.columns { width: 480px; } .container .c33.columns { width: 495px; } .container .c34.columns { width: 510px; } .container .c35.columns { width: 525px; } .container .c36.columns { width: 540px; } .container .c37.columns { width: 555px; } .container .c38.columns { width: 570px; } .container .c39.columns { width: 585px; } .container .c40.columns { width: 600px; } .container .c41.columns { width: 615px; } .container .c42.columns { width: 630px; } .container .c43.columns { width: 645px; } .container .c44.columns { width: 660px; } .container .c45.columns { width: 675px; } .container .c46.columns { width: 690px; } .container .c47.columns { width: 705px; } .container .c48.columns { width: 720px; } .container .c49.columns { width: 735px; } .container .c50.columns { width: 750px; } .container .c51.columns { width: 765px; } .container .c52.columns { width: 780px; } .container .c53.columns { width: 795px; } .container .c54.columns { width: 810px; } .container .c55.columns { width: 825px; } .container .c56.columns { width: 840px; } .container .c57.columns { width: 855px; } .container .c58.columns { width: 870px; } .container .c59.columns { width: 885px; } .container .c60.columns { width: 900px; } .container .c61.columns { width: 915px; } .container .c62.columns { width: 930px; } /* required if take out left and right padding on conin */ /* .container .c63.columns { width: 945px; } .container .c64.columns { width: 960px; } .container .one-third.column { width: 320px; } .container .two-thirds.column { width: 640px; } */ /* fractions */ .container .one-third.column { width: 310px; } .container .two-thirds.column { width: 620px; } .container img{ max-width: 100%; } /* Table of Contents ================================================== #Base 960 Grid #Tablet (Portrait) #Mobile (Portrait) #Mobile (Landscape) #Clearing */ /* #Additional - Large Screens beyond 1280px ================================================== */ /* Note: Design for a width of 1280px */ @media only screen and (min-width: 1280px) { .container { position: relative; width: 1178px; margin: 0 auto; padding: 0; } .container .column, .container .columns { float: left; display: inline; margin: 0px; padding: 0px; } .conin { margin-left:20px; margin-right:20px; } .container .c1.column, .container .c1.columns { width: 19px; } .container .c2.columns { width: 38px; } .container .c3.columns { width: 57px; } .container .c4.columns { width: 76px; } .container .c5.columns { width: 95px; } .container .c6.columns { width: 114px; } .container .c7.columns { width: 133px; } .container .c8.columns { width: 152px; } .container .c9.columns { width: 171px; } .container .c10.columns { width: 190px; } .container .c11.columns { width: 209px; } .container .c12.columns { width: 228px; } .container .c13.columns { width: 247px; } .container .c14.columns { width: 266px; } .container .c15.columns { width: 285px; } .container .c16.columns { width: 304px; } .container .c17.columns { width: 323px; } .container .c18.columns { width: 342px; } .container .c19.columns { width: 361px; } .container .c20.columns { width: 380px; } .container .c21.columns { width: 399px; } .container .c22.columns { width: 418px; } .container .c23.columns { width: 437px; } .container .c24.columns { width: 456px; } .container .c25.columns { width: 475px; } .container .c26.columns { width: 494px; } .container .c27.columns { width: 513px; } .container .c28.columns { width: 532px; } .container .c29.columns { width: 551px; } .container .c30.columns { width: 570px; } .container .c31.columns { width: 589px; } .container .c32.columns { width: 608px; } .container .c33.columns { width: 627px; } .container .c34.columns { width: 646px; } .container .c35.columns { width: 665px; } .container .c36.columns { width: 684px; } .container .c37.columns { width: 703px; } .container .c38.columns { width: 722px; } .container .c39.columns { width: 741px; } .container .c40.columns { width: 760px; } .container .c41.columns { width: 779px; } .container .c42.columns { width: 798px; } .container .c43.columns { width: 817px; } .container .c44.columns { width: 836px; } .container .c45.columns { width: 855px; } .container .c46.columns { width: 874px; } .container .c47.columns { width: 893px; } .container .c48.columns { width: 912px; } .container .c49.columns { width: 931px; } .container .c50.columns { width: 950px; } .container .c51.columns { width: 969px; } .container .c52.columns { width: 988px; } .container .c53.columns { width: 1007px; } .container .c54.columns { width: 1026px; } .container .c55.columns { width: 1045px; } .container .c56.columns { width: 1064px; } .container .c57.columns { width: 1083px; } .container .c58.columns { width: 1102px; } .container .c59.columns { width: 1121px; } .container .c60.columns { width: 1140px; } .container .c61.columns { width: 1159px; } .container .c62.columns { width: 1178px; } /* required if take out left and right padding on conin */ /* .container .c63.columns { width: 1197px; } .container .c64.columns { width: 1216px; } .container .one-third.column { width: 405.33px; } .container .two-thirds.column { width: 810.66px; } */ /* fractions of 1240px */ .container .one-third.column { width: 392.66px; } .container .two-thirds.column { width: 785.32px; } .container img{ max-width: 100%; } } @media only screen and (min-width: 960px) and (max-width: 1279px) { /* #Base 960 Grid ================================================== */ .container { position: relative; width: 930px; margin: 0 auto; padding: 0; } .container .column, .container .columns { float: left; display: inline; margin: 0px; padding: 0px; } .conin { margin-left:15px; margin-right:15px; } .container .c1.column, .container .c1.columns { width: 15px; } .container .c2.columns { width: 30px; } .container .c3.columns { width: 45px; } .container .c4.columns { width: 60px; } .container .c5.columns { width: 75px; } .container .c6.columns { width: 90px; } .container .c7.columns { width: 105px; } .container .c8.columns { width: 120px; } .container .c9.columns { width: 135px; } .container .c10.columns { width: 150px; } .container .c11.columns { width: 165px; } .container .c12.columns { width: 180px; } .container .c13.columns { width: 195px; } .container .c14.columns { width: 210px; } .container .c15.columns { width: 225px; } .container .c16.columns { width: 240px; } .container .c17.columns { width: 255px; } .container .c18.columns { width: 270px; } .container .c19.columns { width: 285px; } .container .c20.columns { width: 300px; } .container .c21.columns { width: 315px; } .container .c22.columns { width: 330px; } .container .c23.columns { width: 345px; } .container .c24.columns { width: 360px; } .container .c25.columns { width: 375px; } .container .c26.columns { width: 390px; } .container .c27.columns { width: 405px; } .container .c28.columns { width: 420px; } .container .c29.columns { width: 435px; } .container .c30.columns { width: 450px; } .container .c31.columns { width: 465px; } .container .c32.columns { width: 480px; } .container .c33.columns { width: 495px; } .container .c34.columns { width: 510px; } .container .c35.columns { width: 525px; } .container .c36.columns { width: 540px; } .container .c37.columns { width: 555px; } .container .c38.columns { width: 570px; } .container .c39.columns { width: 585px; } .container .c40.columns { width: 600px; } .container .c41.columns { width: 615px; } .container .c42.columns { width: 630px; } .container .c43.columns { width: 645px; } .container .c44.columns { width: 660px; } .container .c45.columns { width: 675px; } .container .c46.columns { width: 690px; } .container .c47.columns { width: 705px; } .container .c48.columns { width: 720px; } .container .c49.columns { width: 735px; } .container .c50.columns { width: 750px; } .container .c51.columns { width: 765px; } .container .c52.columns { width: 780px; } .container .c53.columns { width: 795px; } .container .c54.columns { width: 810px; } .container .c55.columns { width: 825px; } .container .c56.columns { width: 840px; } .container .c57.columns { width: 855px; } .container .c58.columns { width: 870px; } .container .c59.columns { width: 885px; } .container .c60.columns { width: 900px; } .container .c61.columns { width: 915px; } .container .c62.columns { width: 930px; } /* required if take out left and right padding on conin */ /* .container .c63.columns { width: 945px; } .container .c64.columns { width: 960px; } .container .one-third.column { width: 320px; } .container .two-thirds.column { width: 640px; } */ /* fractions */ .container .one-third.column { width: 310px; } .container .two-thirds.column { width: 620px; } .container img{ max-width: 100%; } } /* #Mobile (Portrait) ================================================== */ /* Note: Design for a width of 320px */ @media only screen and (max-width: 959px) { .container { width: 100%; } .container .columns, .container .column { margin: 0; } .conin { margin-left:3%; margin-right:3%; } .container .c1.column, .container .c1.columns, .container .c2.columns, .container .c3.columns, .container .c4.columns, .container .c5.columns, .container .c6.columns, .container .c7.columns, .container .c8.columns, .container .c9.columns, .container .c10.columns, .container .c11.columns, .container .c12.columns, .container .c13.columns, .container .c14.columns, .container .c15.columns, .container .c16.columns, .container .c17.columns, .container .c18.columns, .container .c19.columns, .container .c20.columns, .container .c21.columns, .container .c22.columns, .container .c23.columns, .container .c24.columns, .container .c25.columns, .container .c26.columns, .container .c27.columns, .container .c28.columns, .container .c29.columns, .container .c30.columns, .container .c31.columns, .container .c32.columns, .container .c33.columns, .container .c34.columns, .container .c35.columns, .container .c36.columns, .container .c37.columns, .container .c38.columns, .container .c39.columns, .container .c40.columns, .container .c41.columns, .container .c42.columns, .container .c43.columns, .container .c44.columns, .container .c45.columns, .container .c46.columns, .container .c47.columns, .container .c48.columns, .container .c49.columns, .container .c50.columns, .container .c51.columns, .container .c52.columns, .container .c53.columns, .container .c54.columns, .container .c55.columns, .container .c56.columns, .container .c57.columns, .container .c58.columns, .container .c59.columns, .container .c60.columns, .container .one-third.column, .container .two-thirds.column, /* required if take out left and right padding on conin */ /* .container .c63.columns, .container .c64.columns, */ .container .c61.columns, .container .c62.columns { width: 100%; } .container img{ max-width: 100%; } .container .pdtop10, .container .pdleft20{ padding:0px; } } /* #Mobile (Landscape) ================================================== */ /* Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { .container { width: 100%; } .container .columns, .container .column { margin: 0; } .conin { margin-left:3%; margin-right:3%; } .container .c1.column, .container .c1.columns, .container .c2.columns, .container .c3.columns, .container .c4.columns, .container .c5.columns, .container .c6.columns, .container .c7.columns, .container .c8.columns, .container .c9.columns, .container .c10.columns, .container .c11.columns, .container .c12.columns, .container .c13.columns, .container .c14.columns, .container .c15.columns, .container .c16.columns, .container .c17.columns, .container .c18.columns, .container .c19.columns, .container .c20.columns, .container .c21.columns, .container .c22.columns, .container .c23.columns, .container .c24.columns, .container .c25.columns, .container .c26.columns, .container .c27.columns, .container .c28.columns, .container .c29.columns, .container .c30.columns, .container .c31.columns, .container .c32.columns, .container .c33.columns, .container .c34.columns, .container .c35.columns, .container .c36.columns, .container .c37.columns, .container .c38.columns, .container .c39.columns, .container .c40.columns, .container .c41.columns, .container .c42.columns, .container .c43.columns, .container .c44.columns, .container .c45.columns, .container .c46.columns, .container .c47.columns, .container .c48.columns, .container .c49.columns, .container .c50.columns, .container .c51.columns, .container .c52.columns, .container .c53.columns, .container .c54.columns, .container .c55.columns, .container .c56.columns, .container .c57.columns, .container .c58.columns, .container .c59.columns, .container .c60.columns, .container .one-third.column, .container .two-thirds.column, /* required if take out left and right padding on conin */ /* .container .c63.columns, .container .c64.columns, */ .container .c61.columns, .container .c62.columns { width: 100%; } .container img{ max-width: 100%; } } /* #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; }