/* * 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 */ /* #Tablet (Portrait) ================================================== */ @media only screen and (max-width: 960px) { .brace, header.brace { width: auto; padding: 20px; } #banner .brace, #slide-wrap .brace, #homepage-leadins.brace, #homepage-sidebar, #heading-wrap .brace { padding: 0px; } footer .brace, #credits .brace { padding: 0 20px; } /* Homepage */ #homepage-leadins .leadin { width: 50%; } #homepage-leadins .leadin.last { position: relative; clear: both; width: auto; float: none; border-top: 1px solid #785b74; } #homepage-leadins .leadin.last .padding { text-align: left; padding-right: 310px; } #homepage-leadins .leadin.last small { margin-bottom: 0px; } #homepage-leadins .leadin.last a.button { position: absolute; bottom: 45px; right: 40px; } /* Homepage - News & Events */ .content .slider .article-image { padding: 40px; } /* Internal */ #heading h1 span { right: 0px; } /* Sidebar */ #sidebar-details { padding-right: 20px; } #sidebar-details p.text-teal { margin-bottom: 10px; } #sidebar-details p .label { line-height: 1em; width: 100%; } } /* #Mobile (Landscape) ================================================== */ @media only screen and (max-width: 767px) { /* Header styling ---- starts */ header.brace { height: 118px; } header #logo { background-size: 100%; background-position: left center; width: 200px; font-size: 12px; } #weather { display: none; } #subnav li { margin-left: 20px; font-size: 12px; } #mainnav li a { font-size: 11px; padding: 18px 0 14px; } /* Drop menu styling */ #mainnav li.drop-parent div.drop .padding { padding: 20px; } #mainnav li.drop-parent div.drop .drop-nav-wrap { width: 35%; min-height: 280px; } #mainnav li.drop-parent div.drop .drop-extra { width: 65%; } #mainnav li.drop-parent div.drop ul.drop-nav li { width: auto; float: none; margin-bottom: 0px; } #mainnav li.drop-parent div.drop ul.drop-nav li a { padding: 10px 10px 10px 30px; margin-right: 0px; } #mainnav li.drop-parent div.drop .drop-extra .left, #mainnav li.drop-parent div.drop .drop-extra .right { width: auto; float: none; margin-bottom: 20px; } #mainnav li.drop-parent div.drop .drop-extra .enrolment .right { float: right; margin-bottom: 0px; } /* Header styling ---- ends */ /* Footer styling ---- starts */ footer { background-image: none; padding: 40px 0 10px; } footer ul { margin-bottom: 30px; } /* footer #schools { width: 66%; float: left; } footer #schools #lowerschool, footer #schools #upperschool { width: 50%; } #sitemap { width: 34%; } #resources { clear: both; width: 33%; } #policies { width: 33%;} #quicklinks { width: 34%; } */ #lowerschool, #upperschool, #sitemap, #resources, #policies, #quicklinks { width: 50%; } #sitemap, #quicklinks { clear: left; } #credits { padding-bottom: 0px; } #credits p { } #credits .left, #credits .right { width: auto; text-align: center; float: none; line-height: 1.6em; margin-bottom: 10px; } /* footer styling ---- ends */ /* Homepage */ #homepage-leadins .leadin { width: 100%; clear: both; float: none; border-top: 1px solid #785b74; border-right: 0px; } #homepage-leadins .leadin .padding { text-align: left; } #homepage-leadins .title, #homepage-leadins small { margin-bottom: 10px; } h2.heading-intro { padding: 30px 40px; } /* Sidebar */ #homepage-sidebar .sidebar { padding-top: 20px; } #homepage-sidebar .sidebar ul { margin-left: 0px; } #homepage-sidebar .sidebar .title { font-size: 14px; padding: 19px 15px 15px; } #homepage-sidebar .sidebar ul li { padding: 6px 15px 4px; background-image: none; } #homepage-sidebar .sidebar ul li.icon-phone, #homepage-sidebar .sidebar ul li.icon-directory, #homepage-sidebar .sidebar ul li.icon-newsletter { background-image: none; } #homepage-sidebar .sidebar #sidebar-onlinelearning ul li.logo-worldbook, #homepage-sidebar .sidebar #sidebar-onlinelearning ul li.logo-khanacademy { background-size: 80% auto; background-position: center center; } #homepage-sidebar .sidebar #sidebar-onlinelearning ul li.logo-moodle { background-size: 50% auto; background-position: center center; } /* News & Events */ #homepage-sidebar .content .title { padding: 19px 30px 15px; } .content .slider { margin-left: -5%; padding: 0 30px; } .content .slider article { width: 45%; margin-left: 5%; } .content .slider article.last { display: block; } .content .slider .article-image { padding: 30px; } /* Internal */ .internal #content-wrap { padding-top: 75px; } #breadcrumbs, #heading h2 { padding: 19px 30px 15px; font-size: 18px; } #breadcrumbs { font-size: 10px; line-height: 1em; } #heading h1 { font-size: 18px; } #heading h1 span { width: 150px; height: 50px; background-size: 100%; } .crest { display: none; } .content .cat li { width: 43%; } .content .cat li:nth-child(4), .content .cat li:nth-child(8) { clear:none; } /* Sidebar */ .internal #homepage-sidebar .sidebar .padding { padding: 0px; } .internal #homepage-sidebar .sidebar ul li { background-image: none; padding-left: 0px; } .internal #homepage-sidebar .sidebar ul li a { padding: 6px 15px 4px; } .internal #homepage-sidebar .sidebar h3 { margin-left: 15px; margin-bottom: 15px; } .internal #homepage-sidebar .sidebar #sidebar-details { padding: 0 15px; } .internal #homepage-sidebar .sidebar #sidebar-details h3 { margin-left: 0px; } .internal #homepage-sidebar .sidebar ul li.active { position:static; padding-left: 0px; width: 100%!important; background-image: none; box-shadow: none; } .internal #homepage-sidebar .sidebar ul li.active:hover a { padding-left: 20px !important; } .internal #homepage-sidebar .sidebar ul li.active a span { display: none; } .internal #homepage-sidebar .sidebar ul li.active a { background-color: #aaa155; padding: 6px 15px 4px; background-image: none; } .internal #homepage-sidebar .sidebar ul li ul { margin-bottom: 0px; margin-left: 30px; } .internal #homepage-sidebar .sidebar ul li ul li a, .internal #homepage-sidebar .sidebar ul li.active ul li a { background-color: transparent; padding: 6px 20px; } #calendar-drop { clear: both; } #calendar-drop select { float: left; margin-right: 10px; margin-left: 0px; } } /* #Mobile (Portrait) ================================================== */ @media only screen and (max-width: 480px) { /* Hide elements */ #weather-pane, #subnav, #mainnav, #banner-wrap, .banner-nav, .screen, #homepage-leadins, footer, #sidebar-requests, #sidebar-onlinelearning, #content-mask, #sidebar-details, #sidebar-calendar { display: none; } /* Display elements */ footer.mob, #mob-banner, #mob-enrolment, .slider-wrap a.prev, .slider-wrap a.next { display: block; } .fixed { position: fixed; box-shadow: 0 1px 3px rgba(0,0,0, .3); } #nav-button { display: block; } #mob-buttons { display: block; } #mob-wrap, #mob-content { width: 100%; } #mob-sidebar { width: 245px; } header #logo { width: 200px; height: 60px; top: 15px; right: 20px; left: auto; background-size: 100%; } /* Footer */ #credits { padding: 40px 50px; background-color: #fff; color: #5a5a5a } #credits .brace { padding: 0px; } #credits .left, #credits .right { margin-bottom: 0px; } #credits a { color: #563952; } footer #schools { width: 100%; } #sitemap, #resources, #policies, #quicklinks { width: 50%; } #resources { clear: none; } #sitemap, #policies { clear: both; } /* Drop styling */ .drop { background-color: #fff; border-bottom: 1px solid #dedede; } .drop-button { display: block; } .drop-menu { display: none; border-bottom: 0px!important; margin-bottom: 0px!important; } .drop-menu li { padding: 0px!important; } .drop-menu li a { padding: 10px!important; } #content-wrap { padding-bottom: 0px; } /* Slider */ .content .slider, .internal .content .slider { padding: 0px; margin-left: 0px; } .content .slider article { float: none; width: auto; margin-left: 0px; text-align: center; } .content .pager { margin-top: 30px; } .content .slider small { margin: 0 40px 20px; } .content .slider a.readmore { background-color: #efefef; border-bottom: 1px solid #d9d9d9; border-radius: 2px; padding: 15px 30px 15px 10px ; line-height: 1em; display: block; width: 100px; margin: 0 auto; background-position: 85% center; } /* Homepage structure */ #homepage-sidebar { background-image: none; } #homepage-sidebar .content { float: none; width: auto; background-image: none; } #homepage-sidebar .sidebar { float: none; width: auto; background-color: #f7f7f7; } /* Homepage leadin bar */ #homepage-leadins .leadin.last .padding { padding-right: 40px; } #homepage-leadins .leadin.last a.button { left: 0px; right: auto; bottom: 0px; position: relative; float: none; display: block; margin-top: 20px; } /* Homepage sidebar */ #homepage-sidebar .sidebar { padding: 0px; } #homepage-sidebar .sidebar .drop-wrap { padding: 40px; } #homepage-sidebar .sidebar #sidebar-links { padding: 40px; text-align: center; } #homepage-sidebar .sidebar .title { padding: 0px; margin-bottom: 20px; font-size: 18px; } #sidebar-links small { display: block; font-size: 12px; line-height: 18px; margin-bottom: 20px; } /* Homepage features */ #homepage-newswrap, #homepage-eventswrap { padding-bottom: 20px; } #homepage-newswrap { border-bottom: 1px solid #e5e5e5; } #homepage-eventswrap { padding-bottom: 35px; } #homepage-sidebar .content .title { text-align: center; background: url(../img/icon-crest-leaf-gold.png) no-repeat center bottom; border-bottom: 0px; padding: 30px 40px; margin-bottom: 35px; } #homepage-sidebar .content #homepage-eventswrap .title { background: url(../img/icon-crest-leaf-teal.png) no-repeat center bottom; } #homepage-sidebar .content .title span { display: none; } /* Internal */ .internal #content-wrap { padding-top: 150px; } .content .cat ul { left: 0px; } .content .cat li { width: 100%; margin: 0 auto; float: none; margin-bottom: 30px; } .content .cat li:nth-child(4), .content .cat li:nth-child(8) { clear:none; } .content .padding, .content .cat { padding: 40px; } .featured-news { border-bottom: 1px solid #e5e5e5; } /* sidebar */ .internal #homepage-sidebar .sidebar h3 { font-size: 18px; margin-bottom: 20px; text-align: center; text-transform: none; } .internal #homepage-sidebar .sidebar ul li { background-image: none; text-align: center; } .internal #homepage-sidebar .sidebar ul li a { font-family: 'AvenirLT-Roman'; font-size: 12px; } .internal #homepage-sidebar .sidebar ul li ul, .internal #homepage-sidebar .sidebar ul li.active ul { margin-left: 0px; } #calendar { display: none; } #calendar-mob { display: block; } #calendar-drop select { width: 100px; } #content.calendar { padding-bottom: 20px; } .calendar .padding { padding: 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; }