/* 1. Page body */ body { background: #fff; } /* 2. Toolbar changes These css changes area to reset bootstrap default values for non-bootstrap based components (Such as personal toolbar) and dialog box. */ /* Logged out */ .toolbar-loggedout { z-index: 100; position: fixed; width: 100%; } .PublicToolbarBase { box-sizing: content-box; } /* Logged in */ .PersonalToolbarWrapper { box-sizing: content-box; font-size: 11px; } /*Fix to makesure personal toolbar doesn't inherit bootstrap styling.*/ personal * { box-sizing: content-box; } .PersonalToolbarWrapper footer { padding: 0; } #htmlBodyFrame { padding: 15px; } /* Close button position for dialog boxes. */ .close { width: 25px; height: 25px; } /* 3.1 Responsive thumbnails Default bootstrap '.img-responsive' only provide the option to scale an image down. This following code will allow the image to scale up when required. */ .thumbnail { margin:0;padding:0} .IconLinks .thumbnail { margin-bottom:20px} .thumbnail .img-responsive { width: 100%; max-width: none; max-width: unset; } /* 3.2 CSS polyfils Following CSS options are included via polyfils. 3.2.1 Support for viewport units. Both height and width can be set via 'vh' and 'vw' units. 3.2.2 Support for calc for width and height. calc function can be used to compute height and width.*/ /*.carousel[data-authenticated='0'] .carousel-item .slide { height: 100vh; height: calc(100vh - 100px); } .carousel[data-authenticated='1'] .carousel-item .slide { height: 100vh; height: calc(100vh - 134px); }*/ /* 3.2.3 Support for 'position: sticky' Support for position sticky is added via a plugin. Note that this will not function for iOS. For iOS use the native prefixed attribute. When scrolling up sticky element will reach the top position and will behave as position : fixed. At the switching point '.stuck' class is added to that element. */ .u2-menu-outer { top: 0; z-index: 90; } /*.u2-menu-outer[data-authenticated="0"].stuck + main:before {height: 15px;}*/ .u2-menu-outer .navbar-nav li.no-hover a { color: #999; text-align: right; } .u2-menu-outer .navbar-nav li.no-hover a:hover { background: none; color: #999; } /* 3.3 Formatting 3.3.1 Heading Sizes (Heading) ------------------------------------------------------------------------------------------------------------- When in published view Page builder (view) Page builder (edit) */ .h1, .h2, .h3, h1, h2, h3, hr, .panel-group { padding: 0; margin: 0; } h3.u2-heading[data-size], .outer > .inner li[data-lock='1'][data-size] .Heading .u2-content, .outer > .inner li[data-lock='1'][data-size] .Heading .u2-editview { } h3.u2-heading[data-size='1'], .outer > .inner li[data-lock='1'][data-size='1'] .Heading .u2-content, .outer > .inner li[data-lock='1'][data-size='1'] .Heading .u2-editview { font-size: 22px; line-height: 31px; } h3.u2-heading[data-size='2'], .outer > .inner li[data-lock='1'][data-size='2'] .Heading .u2-content, .outer > .inner li[data-lock='1'][data-size='2'] .Heading .u2-editview { font-size: 24px; line-height: 33px; } h3.u2-heading[data-size='3'], .outer > .inner li[data-lock='1'][data-size='3'] .Heading .u2-content, .outer > .inner li[data-lock='1'][data-size='3'] .Heading .u2-editview { font-size: 26px; line-height: 35px; } h3.u2-heading[data-size='4'], .outer > .inner li[data-lock='1'][data-size='4'] .Heading .u2-content, .outer > .inner li[data-lock='1'][data-size='4'] .Heading .u2-editview { font-size: 28px; line-height: 37px; } h3.u2-heading[data-size='5'], .outer > .inner li[data-lock='1'][data-size='5'] .Heading .u2-content, .outer > .inner li[data-lock='1'][data-size='5'] .Heading .u2-editview { font-size: 30px; line-height: 39px; } h3.u2-heading[data-size='6'], .outer > .inner li[data-lock='1'][data-size='6'] .Heading .u2-content, .outer > .inner li[data-lock='1'][data-size='6'] .Heading .u2-editview { font-size: 32px; line-height: 41px; } /* 3.3.2 Paragraph columns (Paragraph) Paragraphs are collapsed when screen size is smaller than 767px to a single column. This can be changed by altering the following CSS block. ------------------------------------------------------------------------------------------------------------- When in published view. Page builder (view) Page builder (edit) */ .u2-paragraph[data-cols], .outer > .inner li[data-lock='1'][data-cols] .Paragraph .u2-content, body[data-cols].u2-paragraph { } .u2-paragraph[data-cols='1'], .outer > .inner li[data-lock='1'][data-cols='1'] .Paragraph .u2-content, body[data-cols='1'].u2-paragraph { } @media(min-width:767px) { .u2-paragraph[data-cols='2'], .outer > .inner li[data-lock='1'][data-cols='2'] .Paragraph .u2-content, body[data-cols='2'].u2-paragraph { -moz-column-count: 2; -moz-column-gap: 20px; -moz-column-fill: balance; -moz-column-span: all; -webkit-column-count: 2; -webkit-column-gap: 20px; -webkit-column-fill: balance; -webkit-column-span: all; column-count: 2; column-gap: 20px; column-fill: balance; column-span: all; } .u2-paragraph[data-cols='3'], .outer > .inner li[data-lock='1'][data-cols='3'] .Paragraph .u2-content, body[data-cols='3'].u2-paragraph { -moz-column-count: 3; -moz-column-gap: 20px; -moz-column-fill: balance; -moz-column-span: all; -webkit-column-count: 3; -webkit-column-gap: 20px; -webkit-column-fill: balance; -webkit-column-span: all; column-count: 3; column-gap: 20px; column-fill: balance; column-span: all; } .u2-paragraph[data-cols='4'], .outer > .inner li[data-lock='1'][data-cols='4'] .Paragraph .u2-content, body[data-cols='4'].u2-paragraph { -moz-column-count: 3; -moz-column-gap: 20px; -moz-column-fill: balance; -moz-column-span: all; -webkit-column-count: 3; -webkit-column-gap: 20px; -webkit-column-fill: balance; -webkit-column-span: all; column-count: 3; column-gap: 20px; column-fill: balance; column-span: all; } .Page_p[data-cols='2'] {-moz-column-count: 2;-moz-column-gap: 20px;-moz-column-fill: balance;-moz-column-span: all;-webkit-column-count: 2;-webkit-column-gap: 20px;-webkit-column-fill: balance;-webkit-column-span: all;column-count: 2;column-gap: 20px;column-fill: balance;column-span: all;} .Page_p[data-cols='3'] {-moz-column-count: 3;-moz-column-gap: 20px;-moz-column-fill: balance;-moz-column-span: all;-webkit-column-count: 3;-webkit-column-gap: 20px;-webkit-column-fill: balance;-webkit-column-span: all;column-count: 3;column-gap: 20px;column-fill: balance;column-span: all;} .Page_p[data-cols='4'] {-moz-column-count: 3;-moz-column-gap: 20px;-moz-column-fill: balance;-moz-column-span: all;-webkit-column-count: 3;-webkit-column-gap: 20px;-webkit-column-fill: balance;-webkit-column-span: all;column-count: 3;column-gap: 20px;column-fill: balance;column-span: all;} } /* 3.3.4 Gradients Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+100*/ .carousel-caption { background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ } /* 3.3.5 CSS transition delay Configure delay between css transitions. */ .u2-menu-outer, .u2-menu-outer .navbar-toggle .icon-bar { transition: all 350ms ease-in-out; } /* ============================================================================================================== 4. Modules Structure of a module is as follows. Container class {container} can be either 'container-fluid' or 'container'. User can set the values for margin, padding and background via the page builder. Also can select the box-shadow effect. -------------------------------------------------------------------------------------------------------------
{Module content}
============================================================================================================== 4.1 Nav Bar Bootstrap documentation: https://getbootstrap.com/components/#navbar Navbar (main menu bar on the top) is using mostly default bootstrap layout with the exception of 'navbar-brand' which usually hold just the logo. navbar-brand is extended in this case to hold two additional lines of text for school name and a tag line. Note : 1. "data-authenticated" attribute is set to 1 when the user is logged in. this can be used to style nav bar diffrently for logged in and logged out state if required. 2. Bootstrap 3.x provide the affix class to make menu sticky. However we are not using this built in plugin. (depricated on bootstrap 4.x) 3. Text for school name and tagline can be set under '/Admin/Config/'. -------------------------------------------------------------------------------------------------------------
*/ nav .container { padding-right: 0; } .u2-menu-outer .main-navigation { margin-bottom: 0; } .u2-menu-outer .navbar-nav a { cursor: default; color: #666; font-size: 12px; border-radius: 4px; } .u2-menu-outer .navbar-nav a[href]:hover { color: #39c; cursor: pointer; } .u2-menu-outer .navbar-nav .dropdown-menu a { font-size: 12px; border-radius: 4px; line-height: 30px; text-overflow: ellipsis; overflow: hidden; } /* Navbar Expand collapse menu */ .u2-menu-outer .dropdown-menu { border: 1px solid rgba(0,0,0,0.05); } .u2-menu-outer .navbar-toggle .icon-bar { position: relative; background-color: #B9B9B9; } .u2-menu-outer .navbar-toggle:not(.collapsed) .icon-bar:nth-child(2) { top: 6px; transform: rotate(45deg); } .u2-menu-outer .navbar-toggle:not(.collapsed) .icon-bar:nth-child(1) { background-color: transparent; } .u2-menu-outer .navbar-toggle:not(.collapsed) .icon-bar:nth-child(3) { top: 0px; transform: rotate(-45deg); } .u2-menu-outer .navbar-toggle:not(.collapsed) .icon-bar:nth-child(4) { background-color: transparent; } .u2-menu-outer .navbar-collapse { max-height: calc(100vh - 80px); overflow-y: auto; } /* Sub menu expand style*/ .u2-menu-outer .dropdown-submenu { position: relative; } .u2-menu-outer .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; border-radius: 0; } /* Arrow indicator for sub menu items */ .u2-menu-outer .expand-left-pointer > a:after, .u2-menu-outer .dropdown-submenu:hover > a:after, .u2-menu-outer .dropdown-submenu > a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #cccccc; margin-top: 10px; margin-right: -10px; } .u2-menu-outer .expand-right-pointer:hover > a:after, .u2-menu-outer .expand-right-pointer > a:after { border-color: transparent; border-style: solid; border-width: 5px 5px 5px 0; border-right-color: #cccccc; } .u2-menu-outer .navbar-brand a { display: block; width: 80px; float: left; } .u2-menu-outer .navbar-brand { padding: 0; } .u2-menu-outer .navbar-brand .name { display: block; width: 130px; padding: 8px 8px; margin: 0; float: left; } .u2-menu-outer .navbar-brand .name a { text-decoration: none; } .u2-menu-outer .name h1 { font-size: 12px; width: 100px; margin: 0; padding: 0; display: block; clear: both; } .u2-menu-outer .name h1 small { font-size: 12px; width: 100px; margin: 8px 0 0 0; padding: 0; display: block; clear: both; } /*Ensure there is a slight space above the menu at all times so collapsing logic works as expected. (When the menu is placed at the very top)*/ .Spacer { height: 0.1px; display: block; content: ' '; } /*Any styles to be applied when the menu is not floating.*/ /* Drop down expanding style for non-collapsed menu */ @media (min-width: 768px) { .u2-menu-outer .dropdown-submenu > .expand-right.dropdown-menu { left: -100%; width: 100%; } .u2-menu-outer .dropdown-submenu > .expand-right.dropdown-menu > .dropdown-menu { left: -100%; } .u2-menu-outer .dropdown-submenu > .expand-left.dropdown-menu { left: 100%; width: 100%; } .u2-menu-outer .dropdown-submenu > .expand-left.dropdown-menu > .dropdown-menu { left: 100%; } .u2-menu-outer .expand-right > .dropdown-submenu > .expand-left, .u2-menu-outer .dropdown-menu:not(.expand-right) > .dropdown-submenu > .expand-right, .u2-menu-outer .expand-left > .dropdown-submenu > .expand-right { top: 40px; } } @media (max-width: 768px) { .u2-menu-outer .dropdown-submenu { margin-left: 10px; border-left: solid 1px #eee; } } @media (max-width: 992px) { .u2-nav-links { max-width: 590px; } } /* ============================================================================================================== 4.2 News centre slide show (NewsCentreBanner) Bootstrap documentation: https://getbootstrap.com/javascript/#carousel Attribute {data-authenticated} changes between logged in and not logged in state. This can be used to compute heights for the two different toolbars and their different sizes.'vh' viewport unit is supported via a plugin. ------------------------------------------------------------------------------------------------------------- */ .NewsCentreBanner.col, .NewsCentreBanner :not(.notices ) .row .col { padding: 0; margin: 0; } .NewsCentreBanner.container-fluid { padding: 0; margin: 0; } .NewsCentreBanner .carousel-caption { position: absolute; max-width: 100%; right: 0; left: 0; bottom: 0; text-align: left; padding: 90px 30px 30px 30px; } .NewsCentreBanner .carousel-caption h1 { display: block; max-width: 800px; padding: 0 0 15px 15px; } .NewsCentreBanner .carousel-caption p { display: block; max-width: 800px; padding: 0 15px; } .NewsCentreBanner .carousel-caption p .posted-on { display: block; clear: both; margin: 15px 0; } .NewsCentreBanner .carousel-caption p a { display: inline-block; } .NewsCentreBanner .carousel-caption p a.link { display: block; clear: both; margin: 15px 0; } .NewsCentreBanner .carousel-control { width: 40px; } .carousel[data-authenticated='0'] .slide { height: 40vw; /*height: calc(30vw - 102px);*/ min-height: 400px; background-size: cover; background-repeat: no-repeat; overflow:hidden;position:relative} .carousel[data-authenticated='1'] .slide { height: 40vw; /* height: calc(30vw - 136px);*/ min-height: 400px; background-size: cover; background-repeat: no-repeat; overflow:hidden;position:relative} /*.carousel .slide video.slide-video {object-fit: cover;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}*/ .carousel .slide video.slide-video {width:100%} .NewsCentreBanner .notices .row { margin-right: 15px;margin-left: 15px; } .NewsCentreBanner .notices .row .col { padding-right: 15px;padding-left: 15px; } .notices .carousel-indicators { bottom:-5px} .notices .carousel-indicators li { border-color:#ccc;} .notices .carousel-indicators .active { background-color:#ccc} .notices .carousel-inner { padding-bottom:20px;min-height:250px;} .notices .news-tile {height:230px;margin-bottom:15px;border:solid 1px #ddd;padding:10px } .notices .news-tile .news-title {text-align:center;font-size:16px;font-weight:500;line-height:normal;} .notices .news-tile .news-text {padding:15px 0; margin:0 15px;font-weight:500;height:120px;overflow:hidden;font-size:14px;white-space:pre-line;word-break:break-word} .notices .news-tile .news-date { text-align:center;font-weight:500;font-style:italic;font-size:12px;padding-bottom:0px;} .notices .carousel-control.right, .notices .carousel-control.left {color: #39c; text-shadow:none;background:rgba(0,0,0,0.01)} /* 4.2.1 Replace the sliding effect of the carousel with a fade effect.*/ .carousel.articles .carousel-inner .item { -webkit-transition-property: opacity; transition-property: opacity; } .carousel.articles .carousel-inner .item, .carousel.articles .carousel-inner .active.left, /*.carousel .carousel-inner .active.right { opacity: 0; }*/ .carousel.articles .carousel-inner .active, .carousel.articles .carousel-inner .next.left, .carousel.articles .carousel-inner .prev.right { opacity: 1; } .carousel.articles .carousel-inner .next, .carousel.articles .carousel-inner .prev, .carousel.articles .carousel-inner .active.left, .carousel.articles .carousel-inner .active.right { left: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel.articles .carousel-control { z-index: 2; } /* 4.3 News centre card view */ /* Cards with link image and short title */ .u2-news-card { border: 1px solid #dadada; margin-bottom: 0; } .u2-news-card .u2-content { padding: 20px 30px; text-align: center; } .u2-news-card .u2-thumb { width: 100%; height: 340px; display: block; background-size: cover; background-color: #eee; } .u2-news-card .u2-description { border-bottom: 1px solid #dadada; height: 140px; display: block; overflow:hidden} .u2-news-card .u2-description h4 { margin-bottom: 1em; } .u2-news-card .u2-description p { font-size: 0.85em; } .u2-news-card .u2-link { padding-top: 12px; } .u2-news-card .u2-link a { margin: 0 3px; font-size: 12px; color: #39c; } /* More news item block with the list of links */ .u2-news-card .u2-find-more p { padding: 30px 30px; margin: 0; } .u2-news-card .u2-more { height: 482px; padding: 20px 0; margin: 0; border-top: 1px solid #dadada; } .u2-news-card .u2-more > a { color: #39c; padding: 5px 30px; font-size: 0.85em; border: none; background: none; } .u2-news-card .u2-more > a:hover { background: #fff; } .u2-news-card a.list-group, .u2-news-card a.list-group-item:first-child, .u2-news-card a.list-group-item:last-child { border-radius: 0; } .u2-news-card .list-group:empty:after { display: block; content: 'No news items found.'; font-style: italic; color: #969595; text-align: center; font-size: 12px; } /* ============================================================================================================== 4.4 List of 6 images with links This module is simply a 6 column grid with brake points set to extra small, small and medium size screens differently. Bootstrap documentation: https://getbootstrap.com/css/#grid -------------------------------------------------------------------------------------------------------------
.....
*/ .IconLinks .thumbnail { display: block; background-position: center center; background-repeat: no-repeat; } .IconLinks .thumbnail[href]:hover { } .IconLinks .thumbnail-block .img-responsive { display: none; } .thumbnail { border: none; background-color: transparent; } /* ============================================================================================================== 5. Styling for the footer ------------------------------------------------------------------------------------------------------------- */ /* Links to other pages */ footer { background-color: rgba(0,0,0,0.75); padding: 50px 0; } footer .list-unstyled { display: block; margin: 10px 0 25px 0; } footer .col a { color: #eee; font-size: 12px; } footer .col li a { color: #999; font-size: 11px; } /* Links to help terms of use etc. (Configured via '/Admin/Config/' under 'Terms of Use & Privacy Policy' section) */ .footer-nav { background-color: #2d2d2d; border-radius: 0px; margin-bottom: 0px; } .footer-nav li a { color: #6b6b6b; font-size: 12px; } .footer-nav li a:hover { background-color: transparent; color: #fff; } /* ============================================================================================================== 6. Other components that are not yet finalized. Cards (module with 3 columns with an image, text and links) this module will get rebuilt to allow other types of content such as embedded iframes etc. ------------------------------------------------------------------------------------------------------------- */ .card { border: 1px solid #dadada; margin-bottom: 0; } .card a.list-group, .card a.list-group-item:first-child, .card a.list-group-item:last-child { border-radius: 0; } .card .card-block p { padding: 30px 30px; margin: 0; } .card .list-group { background: #eee; padding: 20px 0; margin: 0; border-top: 1px solid #dadada; } .card .list-group > a { color: #39c; padding: 5px 30px; font-size: 0.85em; border: none; background: none; } .card .list-group > a:hover { background: #fff; } .ContentWithLinks .Text { line-height: 1.62em; } .card .list-group:empty:after { display: block; content: 'No resources attached'; font-style: italic; color: #969595; text-align: center; font-size: 12px; } [data-theme="1"] .u2-content, [data-theme="1"] .u2-paragraph, [data-theme="1"] .u2-heading, [data-theme="1"] .ContentWithLinks .Text, [data-theme="1"] .card-text, [data-theme="1"] .u2-find-more, [data-theme="1"] .u2-description p { color: #eee; } [data-theme="1"] .u2-news-card .u2-more, [data-theme="1"] .u2-news-card .u2-content { background: rgba(0,0,0,0.5); } [data-theme="0"] .u2-content, [data-theme="0"] .u2-paragraph, [data-theme="0"] .u2-heading, [data-theme="0"] .ContentWithLinks .Text, [data-theme="0"] .card-text, [data-theme="0"] .u2-find-more, [data-theme="0"] .u2-description p { color: #969595; } [data-theme="0"] .u2-news-card .u2-more, [data-theme="0"] .u2-news-card .u2-content { background: #fff; } /* Styles for 6 image links */ .IconLinks .col h4:empty { display: none; } .IconLinks .col p:empty { display: none; } .IconLinks .col .u2_icon_title { font-size: 0.85em; line-height: 1.5em; color: #666; word-wrap: break-word; overflow: hidden; text-align: center; font-weight: 700; } .IconLinks .col .u2_icon_content { font-size: 0.85em; line-height: 1.5em; color: #999; word-wrap: break-word; overflow: hidden; text-align: center; } .IconLinks .row { text-align: center; } .IconLinks [data-u2-alignment='0'] { float: left; } .IconLinks [data-u2-alignment='1'] { display: inline-block; float: none; text-align: left; margin-right: -4px; vertical-align: top; } .IconLinks [data-u2-alignment='2'] { float: right; } .IconLinks [data-u2-scale='1'] .thumbnail { background-size: cover; } .IconLinks [data-u2-scale='0'] .thumbnail { background-size: contain; } /* Optional - make icon wrap nicely when screen size change.*/ @media only screen and (max-width : 479px) { .IconLinks .col:nth-child(2n+1) { clear: left; } } @media only screen and (max-width : 991px) and (min-width : 768px) { .IconLinks .col:nth-child(4n+1) { clear: left; } } /* Style for divider module */ .Divider hr { border-top: 1px solid rgba(0,0,0,0.2);padding:0 } main.container-fluid { min-height: calc(100vh - 220px); } .page-head { background-size: cover; background-position: center; background-repeat: no-repeat; background-color: rgba(0,0,0,0.5); } .page-head .header-wrapper { position: relative; padding: 15px 0px; } .page-head .header-wrapper > .row { margin: 0; } a:hover { text-decoration: none; } .breadcrumb { background-color: transparent; font-size: 12px; text-shadow: 1px 0 1px rgba(0,0,0,1); margin: 0; font-weight: 100; float: right; } .breadcrumb a { color: #C7C4C0; } .breadcrumb a:hover { color: #ffffff; } .breadcrumb > .active { color: #fff; } .breadcrumb > li + li:before { padding: 0 10px; color: #C7C4C0; font-family: 'FontAwesome'; } .list-group { background: rgb(238, 238, 238); margin: 0; border-top: 1px solid rgb(218, 218, 218); padding: 15px 0; } .list-group-item { border: none; background: none; font-size: 12px; color: #39c; -ms-word-break: break-word; word-break: break-word; padding: 5px 70px 5px 35px; margin: 0; cursor: pointer; position: relative; } .list-group-item i { color: #999; } .list-group-item i.fa { position: absolute; left: 15px; top: 8px; height: 16px; width: 16px; } .list-group-item:hover { background: #fff; padding: 5px 70px 5px 35px; } .panel-group .panel { border-color: rgb(218, 218, 218); border-radius: 0; } .panel-default > .panel-heading { margin: 0; padding: 0; background: #fff; color: #969595; } .panel-default > .panel-heading .panel-title a { font-size: 12px; padding: 15px 15px; display: block; line-height: 1.5em; } .module_caption { } .note { font-size: 12px; font-style: italic; padding: 15px 25px; text-align: center; display: block; color: #969595; } #ImgGallery .Item { background-size: cover; background-position: center; background-repeat: no-repeat; cursor: pointer; } #ImgGallery .Item, #ImgGallery .Item .Slides { position: relative; } #ImgGallery .Item .Slides { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0); opacity: 0; padding-top: 50%; } #ImgGallery .Item .Slides .Title { display: block; margin-top: -50px; font-weight: 300; font-size: 16px; color: #fff; clear: both; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; height: 25px; } #ImgGallery .Item .Slides .Notes { display: block; font-weight: 300; font-size: 12px; color: #ddd; clear: both; text-align: center; height: 20px; overflow: hidden; text-overflow: ellipsis; } #ImgGallery .Item:hover { background-size: contain; } #ImgGallery .Item:hover .Slides { opacity: 1; } #ImgGallery .Item:before { content: ""; display: block; padding-top: 75%; } /* Media queries for Media Gallery module.*/ @media (max-width: 399px) { .col-md-4 #ImgGallery .Album { width: 100%; float: left; } .col-md-3 #ImgGallery .Album { width: 100%; float: left; } .col-md-6 #ImgGallery .Album { width: 100%; float: left; } .col-md-9 #ImgGallery .Album { width: 100%; float: left; } .col-md-3 #ImgGallery .Album:nth-child(n) { clear: right; } .col-md-6 #ImgGallery .Album:nth-child(n) { clear: right; } .col-md-9 #ImgGallery .Album:nth-child(n) { clear: right; } } @media (min-width: 400px) and (max-width: 767px) { .col-md-4 #ImgGallery .Album { width: 50%; float: left; } .col-md-3 #ImgGallery .Album { width: 50%; float: left; } .col-md-6 #ImgGallery .Album { width: 50%; float: left; } .col-md-9 #ImgGallery .Album { width: 50%; float: left; } .col-md-3 #ImgGallery .Album:nth-child(2n + 1) { clear: right; } .col-md-6 #ImgGallery .Album:nth-child(2n + 1) { clear: right; } .col-md-9 #ImgGallery .Album:nth-child(2n + 1) { clear: right; } } @media (min-width: 768px) and (max-width: 992px) { .col-md-4 #ImgGallery .Album { width: 33.33333333%; float: left; } .col-md-3 #ImgGallery .Album { width: 33.33333333%; float: left; } .col-md-6 #ImgGallery .Album { width: 33.33333333%; float: left; } .col-md-9 #ImgGallery .Album { width: 33.33333333%; float: left; } .col-md-3 #ImgGallery .Album:nth-child(3n + 1) { clear: right; } .col-md-6 #ImgGallery .Album:nth-child(3n + 1) { clear: right; } .col-md-9 #ImgGallery .Album:nth-child(3n + 1) { clear: right; } } @media (min-width: 992px) and (max-width: 1200px) { .col-md-4 #ImgGallery .Album { width: 100%; } .col-md-3 #ImgGallery .Album { width: 100%; } .col-md-6 #ImgGallery .Album { width: 50%; } .col-md-9 #ImgGallery .Album { width: 33.33333333%; } .col-md-3 #ImgGallery .Album:nth-child(n) { clear: right; } .col-md-6 #ImgGallery .Album:nth-child(2n + 1) { clear: right; } .col-md-9 #ImgGallery .Album:nth-child(3n + 1) { clear: right; } } @media (min-width: 1200px) { .col-md-4 #ImgGallery .Album { width: 100%; } .col-md-3 #ImgGallery .Album { width: 100%; } .col-md-6 #ImgGallery .Album { width: 33.33333333%; } .col-md-9 #ImgGallery .Album { width: 25%; } .col-md-3 #ImgGallery .Album:nth-child(n) { clear: right; } .col-md-6 #ImgGallery .Album:nth-child(3n + 1) { clear: right; } .col-md-9 #ImgGallery .Album:nth-child(4n + 1) { clear: right; } } #Categories .nav.nav-pills { padding: 0; list-style: none; } #Categories .nav.nav-pills > li { border: none; list-style: none; display: block; padding: 5px 0 15px 0; position: relative; } #Categories .nav.nav-pills > li > a { margin-right: 15px; font-size: 12px; color: #666; padding: 5px 15px; font-weight: 300; } #Categories .nav.nav-pills > li:hover > a { color: #39c; } #Categories .nav.nav-pills > li.active a { color: #fff; } #Categories .tabs { border: none; } #Categories .panel { border: none; box-shadow: none; -webkit-box-shadow: none; } #Categories #collapseOne .panel-body { padding: 15px 0; } #Categories img { min-width: 100%; border-radius: 3px; } #Categories .links h5 { margin: 15px 0 10px 0; font-size: 13px; color: #333; } #Categories .links .list-group { background: none; } /* Media queries for categories module.*/ @media (max-width: 399px) { .col-md-4 #Categories .links { width: 100%; float: left; } .col-md-3 #Categories .links { width: 100%; float: left; } .col-md-6 #Categories .links { width: 100%; float: left; } .col-md-9 #Categories .links { width: 100%; float: left; } .col-md-3 #Categories .links:nth-child(n) { clear: right; } .col-md-6 #Categories .links:nth-child(n) { clear: right; } .col-md-9 #Categories .links:nth-child(n) { clear: right; } } @media (min-width: 400px) and (max-width: 767px) { .col-md-4 #Categories .links { width: 50%; float: left; } .col-md-3 #Categories .links { width: 50%; float: left; } .col-md-6 #Categories .links { width: 50%; float: left; } .col-md-9 #Categories .links { width: 50%; float: left; } .col-md-3 #Categories .links:nth-child(2n + 1) { clear: right; } .col-md-6 #Categories .links:nth-child(2n + 1) { clear: right; } .col-md-9 #Categories .links:nth-child(2n + 1) { clear: right; } } @media (min-width: 768px) and (max-width: 992px) { .col-md-4 #Categories .links { width: 33.33333333%; float: left; } .col-md-3 #Categories .links { width: 33.33333333%; float: left; } .col-md-6 #Categories .links { width: 33.33333333%; float: left; } .col-md-9 #Categories .links { width: 33.33333333%; float: left; } .col-md-3 #Categories .links:nth-child(3n + 1) { clear: right; } .col-md-6 #Categories .links:nth-child(3n + 1) { clear: right; } .col-md-9 #Categories .links:nth-child(3n + 1) { clear: right; } } @media (min-width: 992px) and (max-width: 1200px) { .col-md-4 #Categories .links { width: 100%; } .col-md-3 #Categories .links { width: 100%; } .col-md-6 #Categories .links { width: 50%; } .col-md-9 #Categories .links { width: 33.33333333%; } .col-md-3 #Categories .links:nth-child(n) { clear: left; } .col-md-6 #Categories .links:nth-child(2n + 1) { clear: right; } .col-md-9 #Categories .links:nth-child(3n + 1) { clear: right; } } @media (min-width: 1200px) { .col-md-4 #Categories .links { width: 100%; } .col-md-3 #Categories .links { width: 100%; } .col-md-6 #Categories .links { width: 33.33333333%; } .col-md-9 #Categories .links { width: 25%; } .col-md-3 #Categories .links:nth-child(n) { clear: left; } .col-md-6 #Categories .links:nth-child(3n + 1) { clear: right; } .col-md-9 #Categories .links:nth-child(4n + 1) { clear: right; } } #ClassTasks .nav.nav-pills > li { border: none; list-style: none; display: block; padding: 5px 0 15px 0; position: relative; } #ClassTasks .nav.nav-pills > li > a { margin-right: 15px; font-size: 12px; color: #666; padding: 5px 15px; font-weight: 300; } #ClassTasks .nav.nav-pills > li:hover > a { color: #39c; } #ClassTasks .nav.nav-pills > li.active a { color: #fff; } #ClassTasks .tabs { border: none; } #ClassTasks .panel { border: none; box-shadow: none; -webkit-box-shadow: none; font-size: 12px; } #ClassTasks .panel-body { padding: 15px 15px; border: 1px solid #ddd; background: rgb(238, 238, 238); } #ClassTasks .panel-body .row { padding: 5px; color: #39c; } #ClassTasks .panel-body .row:hover { background: #fff; cursor: pointer; } #ClassQuizzes .nav.nav-pills > li { border: none; list-style: none; display: block; padding: 5px 0 15px 0; position: relative; } #ClassQuizzes .nav.nav-pills > li > a { margin-right: 15px; font-size: 12px; color: #666; padding: 5px 15px; font-weight: 300; } #ClassQuizzes .nav.nav-pills > li:hover > a { color: #39c; } #ClassQuizzes .nav.nav-pills > li.active a { color: #fff; } #ClassQuizzes .tabs { border: none; } #ClassQuizzes .panel { border: none; box-shadow: none; -webkit-box-shadow: none; font-size: 12px; } #ClassQuizzes .panel-body { padding: 15px 15px; border: 1px solid #ddd; background: rgb(238, 238, 238); } #ClassQuizzes .panel-body .row { padding: 5px; color: #39c; } #ClassQuizzes .panel-body .row:not(.no-hover):hover { background: #fff; cursor: pointer; } #ClassQuizzes .panel-body h4 { clear: both; display: block; font-size: 12px; color: #666; margin: 0; } #Discussions .panel-heading .col { padding: 0; } #Discussions .panel-heading .panel-title { padding: 0 80px 0 10px; margin: 0; } #Discussions .panel-heading .col a { font-size: 12px; padding: 5px 8px; margin: 10px 10px 10px 0; display: block; cursor: pointer; } #Discussions .panel-heading .col a.button-normal { font-size: 12px; padding: 3px 8px; margin: 10px 10px 10px 0; display: block; cursor: pointer; } #Discussions .list-group-item { color: #39c; padding: 5px 80px 5px 10px; margin: 0; } #Discussions .list-group-item.head { border: none; background: none; color: #666; } #Discussions .list-group-item.head:hover { background: none; } .progress { position: relative; margin-bottom: 0; } .progress .progress-bar-danger span { position: absolute; display: block; width: 100%; color: #fff; } .progress .progress-bar-success span { position: absolute; display: block; width: 100%; color: #333; } .u2-control-menu li a:hover { text-shadow: 1px 0 1px rgba(255,255,255,0.5); } .u2-control-menu li a, .u2-control-menu li a:hover { font-size: 12px; color: #39c; cursor: pointer; } .u2-control-menu li a.u2-opt-delete { color: #c33; font-weight: 700; } .u2-control-menu .u2-edit { font-weight: normal; text-decoration: none; text-shadow: none; color: #666; font-size: 12px; padding: 5px 8px; border-radius: 3px; } .u2-control-menu .u2-edit:hover, .u2-control-menu .u2-edit[aria-expanded=true] { background: #eee; color: #39c; } .u2-control-menu .dropdown-menu { z-index: 80; } .u2-control-menu .dropdown-menu:before { position: absolute; top: -7px; right: 4px; display: inline-block; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-left: 7px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.2); content: ''; } .u2-control-menu .dropdown-menu:after { position: absolute; top: -6px; right: 5px; display: inline-block; border-right: 6px solid transparent; border-bottom: 6px solid #ffffff; border-left: 6px solid transparent; content: ''; } .u2-control-menu .dropdown-header { color: #666; height: 30px; line-height: 30px; } .u2-center-align-text { display: block; clear: both; text-align: center; margin-top: 50px; } .col .fc-toolbar button { font-size: 10px; width: unset; } .col .fc-toolbar h2 { color: #39c; font-size: 16px; line-height: 25px; } .col .fc .fc-axis { font-size: 10px; } .col a.fc-more { text-overflow: ellipsis; overflow: hidden; } .col .fc-ltr .fc-basic-view .fc-day-number { font-size: 10px; } .col .fc .fc-toolbar > * > * { margin-left: .25em; } .col .fc-state-default.fc-corner-left, .col .fc-state-default.fc-corner-right { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; padding: 0 9px; } .col .fc-toolbar { height: 30px; overflow: hidden; } .col.col-md-3 .fc-toolbar button { font-size: 10px; width: unset; } .col.col-md-3 .fc-toolbar h2 { color: #39c; font-size: 12px; display: none; } .col.col-md-3 .fc .fc-axis { font-size: 10px; } .col.col-md-3 a.fc-more { padding: 0; text-overflow: ellipsis; overflow: hidden; } .col.col-md-3 .fc-ltr .fc-basic-view .fc-day-number { font-size: 10px; } .col.col-md-3 .fc .fc-toolbar > * > * { margin-left: 2px; } .col.col-md-3 .fc-state-default.fc-corner-left, .col.col-md-3 .fc-state-default.fc-corner-right { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; padding: 0 5px; } .col.col-md-4 .fc-toolbar button { font-size: 10px; width: unset; } .col.col-md-4 .fc-toolbar h2 { color: #39c; font-size: 12px; display: none; } .col.col-md-4 .fc .fc-axis { font-size: 10px; } .col.col-md-4 a.fc-more { padding: 0; text-overflow: ellipsis; overflow: hidden; } .col.col-md-4 .fc-ltr .fc-basic-view .fc-day-number { font-size: 10px; } .col.col-md-4 .fc .fc-toolbar > * > * { margin-left: 2px; } .col.col-md-4 .fc-state-default.fc-corner-left, .col.col-md-4 .fc-state-default.fc-corner-right { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; padding: 0 5px; } .u2-nav-controls li.dropdown ul.dropdown-menu a { padding: 0 0 0 25px; position: relative; cursor: pointer; } .u2-nav-controls li.dropdown ul.dropdown-menu a i { position: absolute; left: 12px; top: 8px; } .u2-nav-controls.navbar-nav .open .dropdown-menu { min-width: 200px; background: #eee; } .u2-nav-controls.navbar-nav .open .dropdown-menu.columns-2 { min-width: 400px; } .u2-nav-controls.navbar-nav .open .dropdown-menu.columns-3 { min-width: 600px; } .u2-nav-controls .dropdown-menu li a { padding: 5px 15px; color: #39c; } .u2-nav-controls .multi-column-dropdown { list-style: none; margin: 0; padding: 0; } .u2-nav-controls .multi-column-dropdown li a { display: block; clear: both; line-height: 1.428571429; white-space: normal; background: url("../images/newskin/Page-Options.png") no-repeat 10px -72px; } .u2-nav-controls .multi-column-dropdown li a:hover { text-decoration: none; } .u2-nav-controls .dropdown-menu.multi-column { padding: 15px; } .u2-nav-controls .dropdown-menu.multi-column .divider { margin: 5px -15px 5px -15px; } .u2-nav-controls .dropdown-menu li.delete a { color: #c33; } @media (min-width: 768px) { .u2-nav-controls .open > a, .u2-nav-controls .open > a:hover { background: #333; color: #fff; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .u2-nav-controls .dropdown-menu.multi-column { padding: 0; border: none; } .multi-column .row { display: table; table-layout: fixed; margin: 0; width: 100%; height: 100%; } .multi-column .row .col { display: table-cell; height: 100%; float: none; padding: 15px 15px 35px 15px; margin: 0; } .multi-column .row .col.dark { background: #333; } .u2-nav-controls .dropdown-menu .col.dark li a { color: #fff; } } @media (max-width: 767px) { .u2-nav-controls .multi-column-dropdown { margin: 0 0 15px 0; } .u2-nav-controls .dropdown-menu.multi-column { min-width: 240px !important; overflow-x: hidden; } .u2-nav-controls .dropdown-menu.multi-column .divider { margin: 5px 0; } } .ParentAccessIndicator { padding: 18px 10px; color: #999; } .ParentAccessIndicator .PageTools_ParentToolTip { display: none; } .ParentAccessIndicator:hover .PageTools_ParentToolTip { display: block; position: absolute; right: 0; top: 35px; width: 270px; background: #fcfcab; z-index: 98; padding: 15px; font-size: 12px; line-height: 1.5em; border-radius: 3px; border: solid 1px #996600; } .ParentAccessIndicator:hover .PageTools_ParentToolTip span a { display: inline-block; height: 16px; color: #996600; text-decoration: none; background: url('../images/Admin/Pages/ParentIndicatorArrow.png') no-repeat center right; padding-right: 18px; cursor: pointer; } .ParentAccessIndicator:hover .PageTools_ParentToolTip:after { content: ' '; width: 0; height: 0; top: -4px; right: 8px; border-left: 5px solid transparent; border-right: 5px solid transparent; position: absolute; border-bottom: 5px solid #fcfcab; } .ParentAccessIndicator:hover .PageTools_ParentToolTip:before { content: ' '; width: 0; height: 0; top: -5px; right: 8px; border-left: 5px solid transparent; border-right: 5px solid transparent; position: absolute; border-bottom: 5px solid #996600; } main { min-height: 500px; display: block; } .list-group-item span { /*display: block; clear: both;*/ cursor: pointer; } .list-group-item span a { display: inline-block; font-size: 14px; line-height: 26px; padding: 0 10px 0 0; } .Discussion_toApprove, .Discussion_Approve, .Discussion_Delete { display: inline-block; font-size: 14px; line-height: 26px; padding: 0 5px; color: #999; } .Discussion_Approve { color: limegreen; } .Discussion_toApprove { } .Discussion_Delete { /*color:#c33;*/ } .list-group-item .controls { display: none; } .list-group-item:hover .controls { display: block; position: absolute; right: 5px; top: 0; } .panel-title { position: relative; } .panel-title .controls { position: absolute; right: 1px; top: 1px; display: none; } a[aria-expanded='true'] + .controls { display: block; cursor: pointer; } .panel-title .controls a { cursor: pointer; color: #999; } .list-group-item:hover .controls a { color: #999; font-size: 12px; } .PageBioBox { padding: 25px !important; display: block; } .PageBioBox h3 { margin: 0 0 25px 0; } .PageHeader_ImageThumb { border: solid 4px rgba(255,255,255,0.8); } .themeLight { padding: 25px; text-align: left; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.5); } #ImgGallery .row { margin: 0; } #ImgGallery .Album { padding: 0; margin: 0; } #ImgGallery .Album .Item:hover .Slides { background-color: rgba(16, 123, 168, 0.9); } #ImgGallery .Album .Item { padding: 0; margin: 2px; background-color: #39c; image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */ image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; } .Page_Media .pb-audio-block { background: none; border: none; padding: 0 15px; min-height: 60px; } .container.NewsCentreBanner .row .slide { margin: 0 -15px; } #SubPages .list-group { border: none; } #SubPages .list-group-item { padding: 5px 15px 5px 35px; } #SubPages .list-group-item:hover { padding: 5px 15px 5px 35px; } #Categories .list-group-item { padding: 5px 5px 5px 35px; } #Categories .list-group-item:hover { padding: 5px 5px 5px 35px; } .col-md-0, .col-sm-0, .col-xs-0 { display: none; } .NewsCentreCards > .row { margin:0 -15px} @media (max-width: 767px) { /*Removed padding around news centre tiles , increased height of the text block and centred the image*/ .NewsCentreCards > .row { padding-left: 0 !important; margin-left: 0 !important; padding-right: 0 !important; margin-right: 0 !important; } .NewsCentreCards .u2-news-card .u2-description { height: 120px; } .NewsCentreCards .u2-news-card .u2-description h4 { margin-bottom: 15px; line-height: normal; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .NewsCentreCards .u2-news-card .u2-thumb { background-position: center center; } /*Reduced the text size of the slideshow for small screens and removed the paging at the bottom*/ .NewsCentreBanner .carousel-caption h1 { font-size: 18px; } .NewsCentreBanner .carousel-caption p { font-size: 13px; } .NewsCentreBanner .carousel-caption { padding: 90px 15px 15px 15px; } .NewsCentreBanner .carousel-indicators { display: none; } .NewsCentreBanner .carousel .slide { background-position: center center; } /*Tweaks to the menu and footer CSS*/ .u2-menu-outer .u2-menu-block { padding: 55px 0 25px 25px; } .Page_multiple_iframes { padding-left: 0; margin-left: 0; padding-right: 0; margin-right: 0; } } @media (max-width: 320px) { /*Tweaks for very small size screens*/ .u2-news-card .u2-content { padding: 15px; } .u2-menu-outer .navbar-brand img { width: 150px; height: 38px; } } .iFrame .u2-content.col {padding:0} .ContentWithLinks .u2-content.col {padding:0} .NewsCentreCards .u2-content.col {padding:0} .IconLinks .u2-content.col {padding:0} .Divider .u2-content.col {padding:0} .PageFooter .container .row {padding: 0 15px;} .Forms .form-controls {padding-bottom:15px} main.Subpage.container-fluid > .container > .row { padding: 0 15px;} /*News centre home page styles*/ .NCH_NewsBySection_Outer:before { display: inline-block; font-family: FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #999; } .NCH_NewsBySection { display:block;clear:both; padding:0 0 0 0} .NCH_NewsBySection_Outer:before { position: absolute; top: 1px; left: 30px;content: "\f1ea"; } .NCH_NewsBySection_body { color: #666; padding: 5px 0 10px 0; word-break:break-word; white-space:pre-wrap} .NCH_NewsBySection_Title { padding: 15px 30px; font-size: 16px; font-weight: 300; color: #39c; cursor:pointer} .NCH_NewsBySection_NoData , .NCH_NoData{ font-size:12px;font-style:italic;color:#999;font-weight:300;padding:0 50px;} .NCH_NewsBySection_Outer {border:solid 1px rgba(0,0,0,0);background:none;padding:0 40px 0 55px ;position:relative;font-size:12px;color:#39c} .NCH_NewsBySection_Outer:hover { border: solid 1px #f1faff; background: #f1faff; padding: 0 40px 0 55px; } .panel-scroll{overflow-y:scroll;} .u2-menu-outer {transition: all 350ms ease-in-out;webkit-transition: all 350ms ease-in-out;} .u2-menu-outer[data-authenticated="0"].stuck {top: 0;} .u2-menu-outer[data-authenticated="1"].stuck {top: 32px;} @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .u2-menu-outer.stuck { position:fixed; } } .NC_Marquee:hover { cursor:pointer; } .NC_Marquee:empty:after { display: block; content: 'No news items found.'; font-style: italic; color: #969595; text-align: center; font-size: 12px; } .embed-responsive-width {width:100% !important} @media (min-width: 768px) { ul.nav.u2-nav-links li.dropdown:hover > ul.dropdown-menu.expand-on-hover { display: block; } .navbar .dropdown-menu.expand-on-hover { margin-top: 0px; } } .isLink {cursor:pointer}