/* * WVU - Eberly College of Arts and Sciences - Wireframe Template * Created by: Dustin B. Mazon * 11/11/11 * Based off of Skeleton V1.1 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 8/17/2011 */ /* Table of Contents ================================================== #Base 960 Grid #Tablet (Portrait) #Mobile (Portrait) #Mobile (Landscape) #Clearing */ /* #Base 1008 Grid ================================================== */ .container { position: relative; width: 1008px; margin: 0 auto; padding: 0; } /* Column (col=column) */ .col { float: left; display: inline; margin-left: 10.5px; margin-right: 10.5px; } /* Two Column (col=column) Use to create two columns in the content region */ .col-2 { float: left; display: inline; margin-left: 10.5px; margin-right: 10.5px; width: 45%; } /* Three Column (col=column) Use to create three columns in the content region */ .col-3 { float: left; display: inline; margin-left: 10.5px; margin-right: 10.5px; width: 30%; } .row { margin-bottom: 21px; } /* Nested col Classes (col=column)*/ .col.alpha { margin-left: 0; } .col.omega { margin-right: 0; } /* Base Grid (g = grid) */ .container .g-1.col { width: 63px; } .container .g-2.col { width: 147px; } .container .g-3.col { width: 231px; } .container .g-4.col { width: 315px; } .container .g-5.col { width: 399px; } .container .g-6.col { width: 483px; } .container .g-7.col { width: 567px; } .container .g-8.col { width: 651px; } .container .g-9.col { width: 735px; } .container .g-10.col { width: 819px; } .container .g-11.col { width: 904px; } .container .g-12.col { width: 987px; } /* Offsets (off=offset) */ .container .off-1 { padding-left: 42px; } .container .off-2 { padding-left: 126px; } .container .off-3 { padding-left: 210px; } .container .off-4 { padding-left: 294px; } .container .off-5 { padding-left: 378px; } .container .off-6 { padding-left: 462px; } .container .off-7 { padding-left: 546px; } .container .off-8 { padding-left: 630px; } .container .off-9 { padding-left: 714px; } .container .off-10 { padding-left: 798px; } .container .off-11 { padding-left: 883px; } /* #Tablet (Portrait) ================================================== */ /* Note: Design for a width of 768px */ @media only screen and (min-width: 768px) and (max-width: 1007px) { .container { width: 768px; } .container .col { margin-left: 10.5px; margin-right: 10.5px; } .col.alpha { margin-left: 0; margin-right: 10.5px; } .col.omega { margin-right: 0; margin-left: 10.5px; } /* Three Column (col=column) Use to create three columns in the content region */ .col-3 { margin: 0; width: 100% } .container .g-1.col { width: 43px; } .container .g-2.col { width: 107px; } .container .g-3.col { width: 171px; } .container .g-4.col { width: 235px; } .container .g-5.col { width: 299px; } .container .g-6.col { width: 363px; } .container .g-7.col { width: 427px; } .container .g-8.col { width: 491px; } .container .g-9.col { width: 555px; } .container .g-10.col { width: 619px; } .container .g-11.col { width: 683px; } .container .g-12.col { width: 747px; } /* Offsets */ .container .off-1 { padding-left: 22px; } .container .off-2 { padding-left: 86px; } .container .off-3 { padding-left: 150px; } .container .off-4 { padding-left: 214px; } .container .off-5 { padding-left: 278px; } .container .off-6 { padding-left: 342px; } .container .off-7 { padding-left: 406px; } .container .off-8 { padding-left: 470px; } .container .off-9 { padding-left: 534px; } .container .off-10 { padding-left: 598px; } .container .off-11 { padding-left: 662px; } } /* #Mobile (Portrait) ================================================== */ /* Note: Design for a width of 320px */ @media only screen and (max-width: 767px) { .container { width: 315px; } .col { margin: 0; } .container .g-1.col, .container .g-2.col, .container .g-3.col, .container .g-4.col, .container .g-5.col, .container .g-6.col, .container .g-7.col, .container .g-8.col, .container .g-9.col, .container .g-10.col, .container .g-11.col, .container .g-12.col { width: 315px; } /* Two Column (col=column) Use to create two columns in the content region */ /* Three Column (col=column) Use to create three columns in the content region */ .col-2, .col-3 { margin: 0; width: 100% } /* Offsets */ .container .off-1, .container .off-2, .container .off-3, .container .off-4, .container .off-5, .container .off-6, .container .off-7, .container .off-8, .container .off-9, .container .off-10, .container .off-11 { padding-left: 0; } } /* #Mobile (Landscape) ================================================== */ /* Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { .container { width: 420px; } .col { margin: 0; } .container .g-1.col, .container .g-2.col, .container .g-3.col, .container .g-4.col, .container .g-5.col, .container .g-6.col, .container .g-7.col, .container .g-8.col, .container .g-9.col, .container .g-10.col, .container .g-11.col, .container .g-12.col { width: 420px; } /* Two Column (col=column) Use to create two columns in the content region */ /* Three Column (col=column) Use to create three columns in the content region */ .col-2, .col-3 { margin: 0; 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 cols, or wrap each row of cols 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 cols */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }