/* * 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 1400 Grid and after #Base 960 Grid to 1399 Grid #Tablet (Portrait) #Mobile (Portrait) #Mobile (Landscape) #Clearing */ @media only screen and (min-width: 1400px) { .container { position: relative; margin: 0 auto; padding: 0; width:100%} .Header { min-width: 960px;height:5vw; margin: 0 auto; padding: 0; width:60%} .Copyright {width: 60%;min-width:960px; font-size: 12px;} #Menu {width:100%} #menu { margin: 0 auto; min-width: inherit; width: 79% !important} #Logo { height: 5vw;width:79%; border: 1px solid #000020} .border { width: 80% } #Description { height: 5vw;width:79%; border: 1px solid #000020} .FloatLeft {float: left} .FloatRight {float:right} .banner-clone {width: 60%; margin: 0 19.8%; min-width: 960px; float: inherit;} .barre {width: 60%; min-width: 960px;} .barre .head {height:1.5vw; width:100%} .banner-clone .container .menu-item a {font-size: 14px} .container .column, .container .columns { float: left; display: inline;} .row { margin-bottom: 20px; } /*Text Sizing*/ .PageTitle {font-size: 25px; text-transform: uppercase;} .Title {font-size: 23px;} .PageText {font-size: 21px;} .Widget {font-size: 20px;} .Text {font-size: 17px} #Input {font-size: 14px;} .menu-primary a {font-size: 18px} .TabContent {width: 60%;min-width: 960px} /* 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: 58px; } .container .two.columns { width: 145px; } .container .three.columns { width: 233px; } .container .four.columns { width: 320px; } .container .five.columns { width: 408px; } .container .six.columns { width: 495px; } .container .seven.columns { width: 583px; } .container .eight.columns { width: 670px; } .container .nine.columns { width: 758px; } .container .ten.columns { width: 845px; } .container .eleven.columns { width: 100%; min-width: 100% } .container .twelve.columns { width: 100%; min-width: 100% } .container .thirteen.columns { width: 1108px; } .container .fourteen.columns { width: 1195px; } .container .fifteen.columns { width: 1283px; } .container .sixteen.columns { width: 1370px; } .container .one-third.column { width: 437px; } .container .two-thirds.column { width: 904px; } /* Offsets */ .container .offset-by-one { padding-left: 60px; } .container .offset-by-two { padding-left: 0; } .container .offset-by-three { padding-left: 180px; } .container .offset-by-four { padding-left: 240px; } .container .offset-by-five { padding-left: 300px; } .container .offset-by-six { padding-left: 360px; } .container .offset-by-seven { padding-left: 420px; } .container .offset-by-eight { padding-left: 480px; } .container .offset-by-nine { padding-left: 540px; } .container .offset-by-ten { padding-left: 600px; } .container .offset-by-eleven { padding-left: 660px; } .container .offset-by-twelve { padding-left: 720px; } .container .offset-by-thirteen { padding-left: 780px; } .container .offset-by-fourteen { padding-left: 840px; } .container .offset-by-fifteen { padding-left: 900px; } } /* #Base 960 Grid to 1399 Grid ================================================== */ @media only screen and (min-width: 960px) and (max-width:1399px) { .container { position: relative; margin: 0 auto; padding: 0; width:100% } .Header { min-width: 840px;height:5vw; margin: 0 auto; padding: 0; width:60% } .Copyright { width: 60%; min-width: 840px; font-size: 10px } .border { width: 80% } #Menu { width:100% } #menu { margin: 0 auto } #Logo { height: 5vw; width: 79% !important; border: 1px solid #000020 } #Description { height: 5vw; width: 79%; border: 1px solid #000020 } .FloatLeft { float: left } .FloatRight { float: right } .TabContent { width: 60%; min-width: 840px } .barre { width: 60%; min-width: 840px } .banner-clone .container .menu-item a { font-size: 14px } .FooterContainer { width:60%; min-width: 840px } .banner-clone { background-color: transparent } .banner-clone ul { width: 60%; min-width: 840px; margin: 0px auto; background-color: #fff } .container .column, .container .columns { float: left; display: inline } .row { margin-bottom: 20px } /*Text Sizing*/ #Description h1 { font-size: 26px } #Description h2 { font-size: 20px !important } .PageTitle { font-size: 22px; text-transform: uppercase } .Title { font-size: 20px } .PageText { font-size: 18px } .Widget { font-size: 17px } .Text { font-size: 15px } #Input { font-size: 14px } .menu-primary a { font-size: 18px } /* 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: 40px; } .container .two.columns { width: 100px; } .container .three.columns { width: 160px; } .container .four.columns { width: 220px; } .container .five.columns { width: 280px; } .container .six.columns { width: 340px; } .container .seven.columns { width: 400px; } .container .eight.columns { width: 460px; } .container .nine.columns { width: 520px; } .container .ten.columns { width: 580px; } .container .eleven.columns { width: 100%; min-width: 100% } .container .twelve.columns { width: 100%; min-width: 100% } .container .thirteen.columns { width: 760px; } .container .fourteen.columns { width: 820px; } .container .fifteen.columns { width: 880px; } .container .sixteen.columns { width: 940px; } .container .one-third.column { width: 300px; } .container .two-thirds.column { width: 620px; } /* Offsets */ .container .offset-by-one { padding-left: 60px; } .container .offset-by-two { padding-left: 0; } .container .offset-by-three { padding-left: 180px; } .container .offset-by-four { padding-left: 240px; } .container .offset-by-five { padding-left: 300px; } .container .offset-by-six { padding-left: 360px; } .container .offset-by-seven { padding-left: 420px; } .container .offset-by-eight { padding-left: 480px; } .container .offset-by-nine { padding-left: 540px; } .container .offset-by-ten { padding-left: 600px; } .container .offset-by-eleven { padding-left: 660px; } .container .offset-by-twelve { padding-left: 720px; } .container .offset-by-thirteen { padding-left: 780px; } .container .offset-by-fourteen { padding-left: 840px; } .container .offset-by-fifteen { padding-left: 900px; } } /* #Tablet (Portrait) ================================================== */ /* Note: Design for a width of 768px */ /* Note: Design for a width of 768px */ @media only screen and (min-width: 768px) and (max-width: 959px) { .container { margin: 0 auto } .Header { min-width: 700px; width: 80%; height: 8vw; margin: 0 auto } #Menu { margin: 0 auto } #menu { margin: 0 auto } .border { width: 80% } #Copyright { min-width: 700px; width: 80%; margin: 0 auto; font-size: 10px } #Logo { width:78%; height: 8vw; border: 1px solid #000020 } #Description { width:78%; height: 8vw; border: 1px solid #000020 } .banner-clone { top: 0px; background-color: transparent } .TabContent { width: 80%;min-width: 700px } .banner-clone .container { width: 80%; min-width: 700px; background-color: #fff } .barre { width: 80%; min-width: 700px; } .menu-primary { min-width: 100% } .menu-primary-top { min-width:100% } .menu-primary-bottom { min-width:100% } .FooterContainer { min-width:100% } .FloatLeft { float: left } .FloatRight { float:right } .FooterContainer { width:80%; min-width: 700px; margin: 0 auto } .container .column, .container .columns { margin-left: 10px; margin-right: 10px; } .column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; } .column.omega, .columns.omega { margin-right: 0; margin-left: 10px; } .alpha.omega { margin-left: 0; margin-right: 0; } /*Text Sizing*/ .PageTitle { font-size: 18px; text-transform: uppercase; } .Title { font-size: 17px; } .PageText { font-size: 15px; } .Widget { font-size: 14px; } .Text { font-size: 13px } #Input { font-size: 11px; } .menu-primary a { font-size: 14px } article { font-size: 14px; } .banner-clone .container .menu-item a { font-size: 11px } .container .one.column, .container .one.columns { width: 28px; } .container .two.columns { width: 76px; } .container .three.columns { width: 124px; } .container .four.columns { width: 172px; } .container .five.columns { width: 220px; } .container .six.columns { width: 268px; } .container .seven.columns { width: 316px; } .container .eight.columns { width: 364px; } .container .nine.columns { width: 412px; } .container .ten.columns { width: 460px; } .container .eleven.columns { width: 100%; min-width: 100%; } .container .twelve.columns { width: 100%; min-width: 100%;} .container .thirteen.columns { width: 604px; } .container .fourteen.columns { width: 652px; } .container .fifteen.columns { width: 700px; } .container .sixteen.columns { width: 748px; } .container .one-third.column { width: 236px; } .container .two-thirds.column { width: 492px; } /* Offsets */ .container .offset-by-one { padding-left: 48px; } .container .offset-by-two { padding-left: 0px; } .container .offset-by-three { padding-left: 144px; } .container .offset-by-four { padding-left: 192px; } .container .offset-by-five { padding-left: 240px; } .container .offset-by-six { padding-left: 288px; } .container .offset-by-seven { padding-left: 336px; } .container .offset-by-eight { padding-left: 384px; } .container .offset-by-nine { padding-left: 432px; } .container .offset-by-ten { padding-left: 480px; } .container .offset-by-eleven { padding-left: 528px; } .container .offset-by-twelve { padding-left: 576px; } .container .offset-by-thirteen { padding-left: 624px; } .container .offset-by-fourteen { padding-left: 672px; } .container .offset-by-fifteen { padding-left: 720px; } } /* #Mobile (Portrait) ================================================== */ /* Note: Design for a width of 320px */ @media only screen and (min-width: 320px) and (max-width: 479px) { .slicknav_menu { width:100%; margin: 0 auto; } .container { width:100%;margin: 0 auto; } .Header { height: 12vw; width:100%; margin: 0 auto } .Copyright { width: 100%; font-size: 9px } .copyright { width: 100%; } .border { width:80% } .menu-primary-top { display: none; min-width: 100% } .menu-primary-bottom {display: none; min-width: 100% } #Menu { width: 100%; min-width: 320px; margin: 0 auto; display:none } #Logo { width: 78%; height: 12vw; border: 1px solid #000020} #Description { width: 78%; height: 12vw; border: 1px solid #000020} #footer { width:100%; } table.Footer {} article { font-size: 10px } .FooterContainer { min-width:100% } .container .columns, .container .column { margin: 0; } /*Text Sizing*/ #Description h1 { font-size: 22px } #Description h2 { font-size: 16px !important } .PageTitle { font-size: 15px; text-transform: uppercase; } .Title { font-size: 14px; } .PageText { font-size: 13px; } .Widget { font-size: 12px; } .Text { font-size: 10px } #Input { font-size: 10px; } .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 .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column { width: 100%; } } /* #Mobile (Landscape) ================================================== */ /* Note: Design for a width of 652px */ @media only screen and (min-width: 480px) and (max-width: 767px) { #Menu { } h1 { front-size : 1.6rem; } h2 { font-size: 1.2rem !important; } .Copyright { width:80%; min-width: 400px; font-size: 9px } .copyright { width: 100%; } #Logo { width:78%; border: 1px solid #000020; height: 100% } #Description { width:78%; border: 1px solid #000020; height: 100% } .barre { width: 80%; min-width: 400px; margin: 0 auto} .border { width: 80% } table.Footer {} .menu-primary-top { min-width: 100% } .menu-primary-bottom { min-width: 100% } .FooterContainer { width: 80%; min-width: 400px; } .Header { width: 80%; height: 10vw;margin: 0 auto; min-width: 400px} .slicknav_menu { width: 100%;margin: 0 auto; } .container { width: 100%; margin: 0 auto; } .TabContent { width: 80%; min-width: 400px; margin: 0 auto } .banner-clone { top: 0px; background-color: transparent } .banner-clone .container { width: 80%; min-width: 400px; background-color: #fff } .banner-clone .container .sub-menu { margin-top: 0 } .menu-primary ul ul { margin-top: -60% } article { font-size: 10px} .container .columns, .container .column { margin: 0; } /*Text Sizing*/ #Description h1 { font-size: 28px } #Description h2 { font-size: 20px !important } .PageTitle { font-size: 13px; text-transform: uppercase; } .Title { font-size: 13px; } .PageText { font-size: 12px; } .Widget { font-size: 11px; } .Text { font-size: 11px } #Input { font-size: 12px; } .banner-clone .container .menu-item a { font-size: 9px } .menu-primary a { font-size: 10px } .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 .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column { width: 100%; } } @media only screen and (min-width: 0px) and (max-width: 319px) { .slicknav_menu {width:100%} .White {width:100%; max-width: 319px} } /* #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; } /* Table of Content ================================================== #Site Styles #Page Styles #Media Queries #Font-Face */ /* #Site Styles ================================================== */ /* #Page Styles ================================================== */ /* #Media Queries ================================================== */ @media screen and (max-width: 479px) { #nav { display: none; } .slicknav_menu { display: block !important; margin: 0 auto; } .menu-item-has-children > a::after { content: ""; font-size: 10px; padding-left: 0 } } /* #Font-Face ================================================== */ /* This is the proper syntax for an @font-face file Just create a "fonts" folder at the root, copy your FontName into code below and remove comment brackets */ /* @font-face { font-family: 'FontName'; src: url('../fonts/FontName.eot'); src: url('../fonts/FontName.eot?iefix') format('eot'), url('../fonts/FontName.woff') format('woff'), url('../fonts/FontName.ttf') format('truetype'), url('../fonts/FontName.svg#webfontZam02nTh') format('svg'); font-weight: normal; font-style: normal; } */