/* Theme Name: MassEcon Author: PersonalCTO.net and Foster Design Group Author URI: personalcto.net Description: MassEcon design by Foster Design Group implemented as a theme based on Wycks WP-Skeleton Responsive Bare Bones framework based on Dave Gamache's getskeleton.com Version: 1.4 License: http://www.opensource.org/licenses/mit-license.php. Tags: Responsive, grid, mobile, framework, bare-bones, white, minimal This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ /* Table of Contents ================================================== #Base 960 Grid #Tablet (Portrait) #Mobile (Portrait) #Mobile (Landscape) #Clearing */ /* #Base 960 Grid ================================================== */ .container, .bcontainer { position: relative; width: 100%; margin: 0 auto; padding: 0; } @media only screen and (min-width: 960px) { .bcontainer { position: relative; width: 960px; margin: 0 auto; padding: 0; } } @media only screen and (min-width: 768px) and (max-width: 959px) { .bcontainer { position: relative; width: 768px; margin: 0 auto; padding: 0; } } .column, .columns { float: left; display: inline; margin-left: .695%; margin-right: .695%;} /*.column, .columns { float: left; display: inline;}*/ .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, .container .one.columns {width: 4.861%; } .container .two.columns {width: 11.111%; } .container .three.columns {width: 17.361%; } .container .four.columns {width: 23.611%; } .container .five.columns {width: 29.861%; } .container .six.columns {width: 36.111%; } .container .seven.columns {width: 42.361%; } .container .eight.columns {width: 48.611%; } .container .nine.columns {width: 54.861%; } .container .ten.columns {width: 61.111%; } .container .eleven.columns {width: 67.361%; } .container .twelve.columns {width: 73.611%; } .container .thirteen.columns {width: 79.861%; } .container .fourteen.columns {width: 86.111%; } .container .fixteen.columns {width: 92.361%; } .container .sixteen.columns {width: 98.611%; } .container .one-half.column {width: 48.611%; } .container .one-third.column {width: 31.944%; } .container .two-thirds.column {width: 65.278%; } .container .one-quarter.column {width: 23.611%; } .container .three-quarters.column {width: 73.611%; } .container .one-fifth.column {width: 18.611%; } .container .two-fifths.column {width: 38.611%; } .container .three-fifths.column {width: 58.611%; } .container .four-fifths.column {width: 78.611%; } .container .one-sixth.column {width: 15.278%; } .container .two-sixths.column {width: 31.944%; } .container .three-sixths.column {width: 48.611%; } .container .four-sixths.column {width: 65.278%; } .container .five-sixths.column {width: 81.944%; } .container .homecontent { width: 680px; } .container .homemembers { width: 250px; } .container .sixteen.columns.bannerdiv {width: 100%; margin: 0; } .container .sixteen.columns.missiondiv {width: 90%; margin: 0; } /* .container .sixteen.columns.bannerdiv {width: 100%; padding-top: 28.57%; margin: 0; }*/ /* Offsets */ .container .offset-by-one {margin-left: 6.250%; } .container .offset-by-two {margin-left: 12.500%; } .container .offset-by-three {margin-left: 18.750%; } .container .offset-by-four {margin-left: 25.000%; } .container .offset-by-five {margin-left: 31.250%; } .container .offset-by-six {margin-left: 37.500%; } .container .offset-by-seven {margin-left: 43.750%; } .container .offset-by-eight {margin-left: 50.000%; } .container .offset-by-nine {margin-left: 56.250%; } .container .offset-by-ten {margin-left: 62.500%; } .container .offset-by-eleven {margin-left: 68.750%; } .container .offset-by-twelve {margin-left: 75.000%; } .container .offset-by-thirteen {margin-left: 81.250%; } .container .offset-by-fourteen {margin-left: 87.500%; } .container .offset-by-fifteen {margin-left: 93.750%; } /* WordPress sidebar*/ .one-third.column{ /* margin-left: 30px;*/ } /* #Tablet (Portrait) ================================================== */ /* Note: Design for a width of 768px */ @media only screen and (min-width: 768px) and (max-width: 959px) { .container .homecontent { width: 544px; } .container .homemembers { width: 200px; } /* WordPress sidebar*/ .one-third.column{ /* margin-left: 30px;*/ } } /* #Mobile (Portrait) ================================================== */ /* Note: Design for a width of 320px */ @media only screen and (max-width: 767px) { .container .homecontent,.container .homemembers { width: 300px; } .container .one.column, .container .one.columns, .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 .fixteen.columns, .container .sixteen.columns {width: 98.611%; } .container .one-half.column, .container .one-third.column, .container .two-thirds.column, .container .one-quarter.column, .container .three-quarters.column, .container .one-fifth.column, .container .two-fifths.column, .container .three-fifths.column, .container .four-fifths.column, .container .one-sixth.column, .container .two-sixths.column, .container .three-sixths.column, .container .four-sixths.column, .container .five-sixths.column {width: 98.611%; } .container .newsrow .four.columns {width: 23.611%; } .container .newsrow .twelve.columns {width: 73.611%; } /* 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; } .container .sixteen.columns.bannerdiv {width: 100%; } /* .container .sixteen.columns.bannerdiv {width: 100%; padding-top: 40%; }*/ /* Float WordPress menu left now, and reduce padding*/ .menu {padding-top: 20px;float: left;} /* WordPress sidebar*/ #side{margin-left: 0px;} } /* #Mobile (Landscape) ================================================== */ /* Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { /* .container { width: 420px; }*/ .container .columns, .container .column { margin: 0; } .container .homecontent,.container .homemembers { width: 420px; } /* Float WordPress menu left now and reduce padding*/ .menu {padding-top: 20px;float: left;} /* WordPress sidebar*/ #side{margin-left: 0px;} } /* #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; }