/*################################################################################################*/ /* GLOBALS */ /*################################################################################################*/ HTML,BODY { margin:0; background:#DDD; } #wrapper { } #wrapper > .container { padding-left:0; padding-right:0; background:#FFF; } HR { margin:25px 15px; border:0; border-top:1px solid; border-color:#9c9c9c; } /* clearfix */ .clear:before, .clear:after { content:" "; display: table; } .clear:after { clear: both; } /* bootstrap overrides */ /*.row { margin:0; }*/ /*================================================================================================*/ /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { #wrapper > .container { -webkit-box-shadow: 0px 0px 7px 5px rgba(0,0,0,0.15); -moz-box-shadow: 0px 0px 7px 5px rgba(0,0,0,0.15); box-shadow: 0px 0px 7px 5px rgba(0,0,0,0.15); } } /*================================================================================================*/ /* Small devices (tablets, 768px to 991px) */ @media ( max-width:991px ) { /* lets the container fill the whole frame on iPad portrait */ .container { width:auto; } } /*################################################################################################*/ /* TYPEFACES */ /*################################################################################################*/ /* see content.css */ /*################################################################################################*/ /* HEADER */ /*################################################################################################*/ /* banner */ #banner { position:relative; overflow:hidden; } #banner A { display:block; } #banner .header-content { position:absolute; width:100%; height:100%; padding-left:5px; display:table; } #banner .issue-date { display:none; font-size:24px; font-style:italic; } /* using an image banner */ #banner.image-banner { height:auto; } #banner.image-banner IMG.custom-header { display:block; width:100%; height:auto; } /* featured image */ #featured-image { position:relative; } #featured-image IMG { width:100%; height:auto; } /*================================================================================================*/ /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { #banner { } #banner .header-content { padding-left:20px; } #banner .site-text { margin:15px 0 0 10px; } #banner .site-text H1 { font-size:28px; } #banner .site-text P { font-size:12px; } #banner .issue-date { top:20%; right:32%; display:block; position:absolute; font-size:24px; } } /*================================================================================================*/ /* Medium devices (desktops, 992px and up) */ @media (min-width: 992px) { #banner .issue-date { top:20%; right:35%; font-size:26px; } } /*================================================================================================*/ /* Large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { #banner .issue-date { top:20%; right:35%; font-size:30px; } } /*################################################################################################*/ /* MAIN NAV */ /*################################################################################################*/ #nav { border-radius:0; margin:0; border:0; } #nav > DIV { color:#FFF; text-transform:uppercase; } #nav A { display:block; text-decoration:none; } #nav .date { text-transform:none; padding:0 0 0 15px; } #nav .nav > LI { border-top:1px solid rgba(255,255,255,0.1); border-bottom:1px solid rgba(0,0,0,0.2); } #nav .nav > LI > A { text-transform:uppercase; } #nav .dropdown-menu > LI > A { white-space:normal; } #nav .dropdown.open { background:rgba(255,255,255,0.2); } #nav .dropdown.open .dropdown-menu { background:none; } #nav .nav .article-item A { text-transform:none; position:relative; padding-right:20px; } #nav .nav .article-item .icon { position:absolute; top:0; right:0; height:100%; padding:10px; } /* toggle */ #nav .navbar-toggle { border:1px solid #ccc; background:#FFF; } #nav .navbar-toggle .icon-bar { background:#999; } #nav .navbar-toggle[aria-expanded=true] { opacity:0.5; } /* form */ #nav #searchform { margin:0; } #nav #searchform INPUT, #nav #searchform BUTTON { height:50px; border-radius:0; border:0; } #nav #searchform INPUT { width:180px; color:#FFF; text-transform:uppercase; } #nav #searchform BUTTON { width:50px; background:none; } #nav #searchsubmit { margin-top:-1px; } /* appears above navigation in handset view */ #nav .handset-nav-top { text-align:center; } #nav .handset-nav-top #social { padding:10px 0 10px 0; border-bottom:1px solid border-bottom:1px solid rgba(0,0,0,0.2); } #nav .handset-nav-top #searchform{ border-top:none; box-shadow:none; border-top:1px solid rgba(255,255,255,0.1); } #nav .handset-nav-top #searchform INPUT, #nav .handset-nav-top #searchform BUTTON { height:auto; } #nav .handset-nav-top #s { width:75%; } #nav .handset-nav-top #searchsubmit { width:15%; } /* drop down */ #nav .dropdown-menu { border:0; border-radius:0; box-shadow:none; } #nav .open > A, #nav .open > A:focus, #nav .open > A:hover { background:none; } /* bootstrap override */ .form-control::-moz-placeholder { color:inherit; opacity:0.6; } .form-control:focus { box-shadow:none; } #nav .navbar-toggle { background:none; border-radius:0; } #nav .navbar-toggle .icon-bar { border-radius:0; } /* alternate date view (tablet only) */ .alt-issue-date { padding:5px 15px; } /*================================================================================================*/ /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { .navbar-collapse { padding:0; } #nav .container-fluid, #nav #searchform { padding-right:0; } #nav .dropdown.open .dropdown-menu { background:#33BEF2; -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.5); -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.5); box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.5); } #nav .nav > LI { border-top:none; border-bottom:none; } #nav .nav .article-item, #nav .nav .category-item { display:none; } #nav #searchform INPUT { width:150px; } } /*################################################################################################*/ /* NEWSLETTER VIEW */ /*################################################################################################*/ /*#main { padding:20px 0; }*/ #main IMG { max-width:100%; height:auto; } /*#col-main, #col-side { padding-left:0; padding-right:0; }*/ #col-side H2 { border-bottom:1px solid #00aeef; padding-bottom:5px; } /* featured articles */ .first-feature { color:#FFF; } .first-feature .feature-thumb { padding-left:0; padding-right:0; } .first-feature .feature-text { padding-bottom:15px; } #main .first-feature .feature-text A { color:#FFF; } #main .first-feature .feature-text A.more { text-decoration:underline; } #featured-articles .feature-container { margin-bottom:15px; } #featured-articles .feature-thumb { position:relative; } #featured-articles IMG { display:block; } #featured-articles .feature-title { position:absolute; bottom:0; left:0; width:100%; height:100%; z-index:100; padding:15px; background:url(../images/feature_bg.png) bottom left no-repeat; background-size:contain; color:#FFF; font-size:24px; line-height:1em; } #featured-articles .feature-title .feature-title-text { position:absolute; bottom:15px; left:15px; } /* index categories */ #index-categories { } #index-categories .category:nth-of-type(3n+1) { clear:left; } #index-categories > UL > .article-item { display:none; } /* index articles */ #index-articles { margin-top:20px; } #index-articles .featured { display:none; } #index-articles .article-item { display:block; padding-left:0; padding-right:0; position:relative; margin:0 0 15px 0; } #index-articles .article-item:nth-of-type(3n+1) { clear:left; } #index-articles .article-item IMG { display:block; } #index-articles .article-item .article-thumb { z-index:98; position:relative; } #index-articles .article-item .article-title { display:block; left:0; right:0; bottom:0; padding:5px; min-height:50px; line-height:1.1em; z-index:99; position:absolute; color:#FFF; font-size:16px; } .article-container { padding-bottom:15px; } .article-container .article-thumb { padding:0; } .article-container .article-text { padding:0 0 0 15px; } .article-container .article-text H3 { margin:5px 0 0; font-size:14px; } .article-container .article-text.no-img { padding-left:0; } .article-container .article-text .excerpt { padding-top:5px; } #main #index-categories .more { display:block; margin:10px 0; color:#333; text-decoration:underline; } /* index categories */ #index-categories { margin:15px 0; } #index-categories UL { margin:0; padding:0; list-style:none; } #index-categories .category { padding-right:15px; padding-bottom:15px; } #index-categories .category-name { display:block; border-bottom:2px solid; font-size:26px; } #index-categories .article-item { padding:5px 0 5px 20px; position:relative; } #index-categories .article-item A { color:#333; font-size:18px; } #index-categories .article-item:before { display:block; position:absolute; top:9px; left:0; content:'\25B6'; font-size:12px; color:#00AEEF; } /* category colours - applies to article nav also */ .category.category-none .category-name, .category.category-none .article-item:before, .category.category-none .category-name, .category.category-none .article-item:before { color:#00AEEF; border-color:#00AEEF; } .category.category-elc .category-name, .category.category-elc .article-item:before, .category.category-senior-college .category-name, .category.category-senior-college .article-item:before { color:#34327e; border-color:#34327e; } .category.category-boys-junior .category-name, .category.category-boys-junior .article-item:before, .category.category-boys-middle .category-name, .category.category-boys-middle .article-item:before { color:#8d2445; border-color:#8d2445; } .category.category-girls-junior .category-name, .category.category-girls-junior .article-item:before, .category.category-girls-middle .category-name, .category.category-girls-middle .article-item:before { color:#a6ce39; border-color:#a6ce39; } /* tags */ #main .tags { padding:5px 0 0; color:#666; font-size:12px; } #main .tags SPAN { padding-right:5px; } #main .tags A { color:#666; } /* facebook feed */ #facebook-feed { padding:0 15px; } #cff .cff-item { padding:0 0 10px 0 !important; } #cff .cff-date { margin:0; padding:0; } /*================================================================================================*/ /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { /*#main { padding:15px; }*/ /*#col-main { padding:0; }*/ #col-side { padding-right:0; padding-left:15px; } .first-feature .feature-thumb { padding-right:15px; } .first-feature .feature-text { padding-left:0; padding-bottom:0; } .first-feature .feature-text H3 { margin-top:15px; margin-bottom:5px; line-height:1.1em; } #featured-articles .feature-title { font-size:16px; } #index-articles { margin-top:0; } #index-articles .article-item { padding-right:15px; } #index-articles .article-item .article-title { right:15px; padding:5px 15px; } .feature-container, .article-container { padding-bottom:15px; } .article-container .article-text { padding:0; } .article-container .article-text H3 { font-size:16px; } #facebook-feed { padding:0; } } /*================================================================================================*/ /* Medium devices (desktops, 992px and up) */ @media (min-width: 992px) { .first-feature .feature-text { font-size:16px; line-height:1.6em; } #featured-articles .feature-title { font-size:24px; } } /*################################################################################################*/ /* ARTICLE VIEW */ /*################################################################################################*/ /* general */ #content { } #content .post-title { display:block; } /* featured image */ #featured-image .post-title { display:none; } /* sidebar */ #sidebar .featured SPAN { padding-right:5px; font-size:12px; } #sidebar UL { margin:0; padding:0; list-style:none; } #sidebar UL LI { padding:0; } /* in this issue */ #sidebar .this-issue { border:8px solid #d9d9d9; font-size:14px; } #sidebar .this-issue > UL { padding:15px 0; } #sidebar .this-issue .category { margin-bottom:5px; } #sidebar .this-issue > UL > LI { padding:3px 15px; } #sidebar .this-issue .category-name { display:block; border-bottom:2px solid; padding:5px 0; font-size:24px; font-weight:normal; } #sidebar .this-issue H3 { display:none; font-size:18px; padding:10px 10px; margin:0; border-bottom:1px solid; font-weight:normal; text-align:center; color:#333333; } #sidebar .this-issue UL UL { padding:6px 0; } #sidebar .this-issue LI { padding:5px 0; } #sidebar .this-issue A { display:block; padding-left:0; position:relative; } #sidebar .this-issue A .icon { display:none; } #sidebar .this-issue A.featured { font-weight:bold; padding-left:25px; } #sidebar .this-issue .article-item { padding:5px 0 5px 20px; position:relative; } #sidebar .this-issue .article-item A { color:#333; font-size:16px; } #sidebar .this-issue .article-item:before { display:block; position:absolute; top:9px; left:0; content:'\25B6'; font-size:12px; } #sidebar .this-issue .featured:before { content:'\f005'; font-family:FontAwesome; } #sidebar .this-issue .featured A { color:#00AEEF; } /* navigation */ #article-prevnext { margin:30px 0; padding:15px 0 0 0; border-top:1px solid; } #article-prevnext .prev, #article-prevnext .next { display:block; padding:0; overflow:hidden; } #article-prevnext .next { text-align:right; } #article-prevnext A { display:block; } #content #article-prevnext A { text-decoration:none; } /* duplicate definition to work with customiser */ #article-prevnext .direction { display:block; font-size:16px; } #article-prevnext .direction SPAN { font-size:12px; } #article-prevnext .title { display:block; font-size:14px; } /*================================================================================================*/ /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { #sidebar { padding-left:0; } /*#content .post-title { display:none; }*/ .single #featured-image { min-height:120px; } #featured-image .post-title { display:block; position:absolute; bottom:20px; left:20px; right:0; padding:20px 30px 20px 20px; color:#FFF; font-size:36px; line-height:30px; min-height:55px; background:rgba(0,174,239,0.9); } #featured-image .post-title #social { position:absolute; left:100%; bottom:0; top:auto; width:168px; } #featured-image .post-title #social .social-link { float:left; margin:0 0 0 1px; } #article-prevnext .prev .title { padding-left:20px; } #article-prevnext .next .title { padding-right:20px; } #article-prevnext .direction { font-size:20px; } #article-prevnext .direction SPAN { font-size:15px; } } /*================================================================================================*/ /* Medium devices (desktops, 992px and up) */ @media (min-width: 992px) { /* content text -- indented */ .content-txt { /*padding:0 10% 0 0;*/ position:relative; } } /*################################################################################################*/ /* PAGINATION */ /*################################################################################################*/ /* pagination */ .paging-navigation { text-align:center; } .pagination { padding:20px 0; height:40px; text-align:center; } .pagination .page-numbers { padding:0 8px; } .pagination A { } .pagination .current { } /*################################################################################################*/ /* SEARCH FORM */ /*################################################################################################*/ #searchform #searchsubmit { width:34px; height:34px; margin-top:-1px; } #searchform .form-control { display:inline-block; width:80%; } /* override form styles in main */ #main .navbar-form { padding:0; } #main .navbar-right { float:none !important; } /*================================================================================================*/ /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { #searchform #searchsubmit { margin:0; } .search-wrapper { padding:0; } } /*################################################################################################*/ /* SOCIAL MEDIA LINKS */ /*################################################################################################*/ #social { font-size:28px; } #social .social-link { display:inline-block; width:55px; height:55px; position:relative; margin:0 0 1px 0; padding:8px 0 0 0; text-align:center; color:#FFF; line-height:0px; text-decoration:none !important; } #social .social-link .share-text { text-transform:uppercase; font-size:10px; font-weight:bold; } #social .social-link .fa { margin:0; display:block; font-size:1em;} #social .social-link:hover, #social.brand .social-link:hover { background:#333; color:#fff; text-decoration:none; } /* icons in featured image */ #featured-image #social { position:absolute; right:0; top:20%; } #featured-image #social .social-link { display:block; } /* display social icons in brand colours */ #social.brand .social-twitter { background-color:#55ACEE; } #social.brand .social-linkedin { background-color:#0177B5; } #social.brand .social-facebook { background-color:#4867AA; } #social.brand .social-link .fa { color:#FFF; } /*################################################################################################*/ /* QUICK LINKS */ /*################################################################################################*/ #widgets { padding:15px 0; background:#DDD; line-height:20px; } #widgets H3 { margin:5px 0 8px; text-transform:none; font-size:20px; } #widgets UL { padding:0; margin:0; list-style:none; } #widgets UL LI { padding:0; } #widgets UL LI A { display:block; } #widgets .widget { margin-bottom:20px; padding:0; } #widgets P { padding-left:10px; } #widgets H3 + .menu, #widgets H3 + P { margin-top:0; } #widgets .widget_nav_menu:after { display:block; clear:both; content:" "; height:0; overflow:hidden; } /* OLD IE STYLE */ #widgets .menu { padding-left:0px; /* CSS3 browser only */ -webkit-column-gap: 20px; /* Chrome, Safari, Opera */ -moz-column-gap: 20px; /* Firefox */ column-gap: 20px; -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ column-count: 2; -moz-column-fill: balance; column-fill: balance; } /*================================================================================================*/ /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { #widgets .widget { margin-bottom:0; } #widgets H3 { padding-bottom:10px; } #widgets .widget_nav_menu > H3 { float:left; width:25%; } #widgets .widget_nav_menu > DIV { float:left; width:75%; } #widgets .menu { /* CSS3 browser only */ -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; } } /*================================================================================================*/ /* Medium devices (desktops, 992px and up) */ @media (min-width: 992px) { #widgets .menu { /* CSS3 browser only */ -webkit-column-count: 4; /* Chrome, Safari, Opera */ -moz-column-count: 4; /* Firefox */ column-count: 4; } } /*################################################################################################*/ /* FOOTER */ /*################################################################################################*/ #footer { padding:10px 0 10px 0; background:#CCC; font-size:12px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00aeef+0,113e88+100 */ background: #00aeef; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYWVlZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMTNlODgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(left, #00aeef 0%, #113e88 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#00aeef), color-stop(100%,#113e88)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #00aeef 0%,#113e88 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #00aeef 0%,#113e88 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #00aeef 0%,#113e88 100%); /* IE10+ */ background: linear-gradient(to right, #00aeef 0%,#113e88 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00aeef', endColorstr='#113e88',GradientType=1 ); /* IE6-8 */} #footer .credit, #footer .copyright { text-align:center; line-height:20px; } /*================================================================================================*/ /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { #footer { padding:0; } #footer .credit { text-align:right; } #footer .copyright { text-align:left; } #footer .inner DIV { line-height:40px; } }