@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,400italic); @import url(https://fonts.googleapis.com/css?family=Merriweather:400,700); /* font-family: 'Open Sans', sans-serif; font-family: 'Merriweather', serif; */ /* --------------------- COLORS ---------------------- */ /*- Header Background Color -*/ #header, #header .inside-padding, #header:after { background: #002d5b; } /*- School Name Color -*/ #header a.logo { color: #ffffff; } /*- Motto Text Color -*/ #header .motto { color: #cccccc; } /*- Header Info Separator Color -*/ #header .motto:after, #header a.logo:after { background: #145993; } /*- Address Text Color -*/ #header .address { color: #b3b3b3; } /*- Social Media Background and Text Color -*/ ul.socialMedia li a { background: #145993; color: #ffffff; } /*- Menubar Border Top Color -*/ #menubar { border-top-color: #c79210; } /*- Banner Radio Background HOVER -*/ #banner .nivo-controlNav a.active { background: #c79210; } /*- News/Events Heading Text Color -*/ .sectionName { color: #002d5b; } /*- News Title Text Color -*/ .newsTitle { color: #002d5b; } /*- News Date Background Color -*/ .newsDate { background: #002d5b; } /*- Events Clock Background and Text Color -*/ a.event .time span.fa { color: #ffffff; background: #c79210; } /*- Weather Background and Text Color -*/ .weather-wrapper { background: #002d5b; color: #ffffff; } /*- Weather Separator Color -*/ .weather-temp:before { background: #145993; } /*- Subpage Page Title Text Color -*/ .mainContent h2.pageTitle { color: #002d5b; } /*- Side Nav Current Page Background and Text Color -*/ .currentpage a.navLink { background: #c79210; color: #000 !important; } /*- Side Nav Current Page Text Color HOVER -*/ .currentpage a.navLink:hover { color: #000 !important; } /*- Mobile Sub-Menu Toggle Background -*/ .nav-toggle { background: #c79210; } /*- Mobile Sub-Menu Toggle Text Color -*/ .nav-toggle a { color: #ffffff; } /*- Mobile Sub-Menu Color (Hidden Item should match background) -*/ .nav-toggle span { color: #c79210; } /*- Mobile Sub-Menu '+' Color -*/ .nav-toggle span { color: #ffffff; } /*- Footer Border Top Color -*/ #footer { border-top-color: #c79210; } /*---- TELERIK COLORS ----*/ /*--TOP LEVEL STYLES--*/ /*--Normal State--*/ .inner-bar a, .telerik_main_menu .rmRootGroup a { color: #666666; } .telerik_main_menu .rmRootGroup a span { color: #000; } /*--Over and Focused State ***/ .inner-bar a:hover, .telerik_main_menu .rmRootGroup a:hover, .telerik_main_menu .rmRootGroup a.rmFocused { color: #ffffff; } .telerik_main_menu .rmRootGroup a:hover span, .telerik_main_menu .rmRootGroup a.rmFocused span { color: #ffffff; } /*--TOP LEVEL HOVER BG COLOR AND IMAGES (two images)--*/ .telerik_main_menu .rmRootGroup a:hover, .telerik_main_menu .rmRootGroup a.rmFocused { background-color: #c79210; } /*--END OF TOP LEVEL STYLES--*/ /*--DROPDOWN MENU STYLES--*/ /*--Normal State--*/ .telerik_main_menu .rmGroup a { color: #ffffff; background: #002d5b; } .telerik_main_menu .rmGroup a span { color: #ffffff; background: #002d5b; } /*--Over and Focused State--*/ .telerik_main_menu .rmGroup a:hover, .telerik_main_menu .rmGroup a.rmFocused { background: #023f7d; color: #ffffff; } .telerik_main_menu .rmGroup a:hover span, .telerik_main_menu .rmGroup a.rmFocused span { background: #023f7d; color: #ffffff; } /*--END OF DROPDOWN MENU STYLES--*/ .rmItem:hover { background-color: #c79210; color: #000; } .telerik_main_menu .rmRootGroup > li:hover > a span { color: #000; } .rmVertical .rmItem:hover a span, .rmVertical .rmItem:hover a { background-color: #023f7d; } /*--DROPDOWN LV2 MENU STYLES--*/ /*--Normal State--*/ .telerik_main_menu .rmGroup .rmGroup a { color: #ffffff; background: #323538; } .telerik_main_menu .rmGroup .rmGroup a span { color: #ffffff; background: #323538; } /*--Over and Focused State--*/ .telerik_main_menu .rmGroup .rmGroup a:hover, .telerik_main_menu .rmGroup .rmGroup a.rmFocused { background: #c79210; color: #000; } .telerik_main_menu .rmGroup .rmGroup a:hover span, .telerik_main_menu .rmGroup .rmGroup a.rmFocused span { background: #c79210; color: #000; } /*--SECOND LEVEL BORDER LEFT--*/ .rmLevel2 { border-left: 4px solid #023f7d; } /*--END OF DROPDOWN MENU STYLES--*/ /*---- END TELERIK COLORS ----*/ /*------------------------------- END COLORS -------------------------------*/ /* --------------------- IMAGES ---------------------- */ /*--Navigation Arrow BG--*/ .telerik_main_menu .rmGroup .rmItem .rmExpandRight:after { background: url('https://cdnsm4-ss1.sharpschool.com/Common/resources/DesignPortfolio/SiteThemes/Metric/Blue/arrows-sprite.png'); } /*--Navigation Arrow--*/ /*--Light--*/ .telerik_main_menu .rmGroup .rmItem .rmExpandRight:after { background-position: -18px -44px !important; } /*or*/ /*--Dark--*/ #menubar .telerik_main_menu .rmGroup .rmItem:hover .rmExpandRight:after, #menubar .telerik_main_menu .rmGroup .rmExpanded .rmExpandRight:after, #menubar .telerik_main_menu .rmGroup .rmFocused .rmExpandRight:after { background-position: -18px -8px !important; } /*------------------------------- END IMAGES -------------------------------*/ .CMS_DragDropWrapper { background: #1d2228; } a:not(.link) { transition: all .2s ease-in-out; } .portletEditMode a, .designMode a { transition: none; } body #pubWrapper .container { max-width: 100%; } body .inside-padding { max-width: 100%; padding-top: 9em; } .w-66 > .inside-padding, .w-33 > .inside-padding {padding: 10px 35px 10px 35px} #contentArea { width: 100%; } .pageContent { font-family: 'Merriweather', serif; } .subpage .pageContent h1, .subpage .pageContent h2, .subpage .pageContent h3, .subpage .pageContent h4, .subpage .pageContent h5, .subpage .pageContent h6 { font-family: 'Open Sans', sans-serif; } body { font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: normal; line-height: normal; color: #666666; -webkit-font-smoothing: antialiased; } .responsiveTemplate #pubWrapper { position: fixed; top: 0px; right: 0%; width: 75%; z-index: 7004; color: #ffffff; } a.logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; } #header { position: fixed; top: 0px; left; 0px; width: 25%; height: 100%; color: #ffffff; display: table; z-index: 7004; } #header:after { content: ''; display: block; position: absolute; right: -1px; width: 1px; height: 100%; } #header > .inside-padding { display: table-cell; vertical-align: middle; text-align: center; } .contentWrapper { width: 75%; margin-left: 25%; } #menubar { width: 75%; position: fixed; top: 0px; right: 0px; background: #ffffff; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.7); z-index: 7003; border-top-width: 4px; border-top-style: solid; } .guestView #menubar { top: 35px; } .adminbarV1.adminbarVisible #pubWrapper { top: 50px; } .adminbarV1.adminbarVisible #menubar { top: 85px; } .classicAdminbar.adminbarVisible #pubWrapper { top: 35px; } .classicAdminbar.adminbarVisible #menubar { top: 70px; } .adminbarV1.adminbarVisible.designMode #pubWrapper { top: 247px; } .adminbarV1.adminbarVisible.designMode #menubar { top: 282px; } .adminbarV1.adminbarVisible.designMode.dragAndDropDisabled #pubWrapper { top: 86px; } .adminbarV1.adminbarVisible.designMode.dragAndDropDisabled #menubar { top: 121px; } #menubar > .inside-padding { padding: 0px; } #menubar .row { margin-bottom: 0px; } /*---- HEADER ----*/ body #header > .inside-padding { padding: 30px; } h1.schoolName { margin: 0px; font-weight: normal; } #header a.logo { display: block; } #header a.logo:hover { text-decoration: none; opacity: 0.7; } #header a.logo:after { content: ''; display: block; width: 40%; height: 1px; margin: 20px auto; } #header .motto { font-size: 15px; font-style: italic; } #header .motto:after { content: ''; display: block; width: 40%; height: 1px; margin: 20px auto; } #header .address { margin-bottom: 20px; } ul.socialMedia { list-style: none; margin: 0px; padding: 0px; } ul.socialMedia li { display: inline; } ul.socialMedia li a { border-radius: 50%; width: 50px; line-height: 50px; font-size: 20px; margin: 0px 5px 10px 5px; text-align: center; } ul.socialMedia li a:hover { text-decoration: none; opacity: 0.7; } /*---- WEATHER ----*/ .weather-wrapper { text-align: center; padding: 20px; } .weather-location { display: none; } .weather-temp { font-size: 45px; font-weight: 700; line-height: 65px; } .weather-temp:before { content: ''; display: block; width: 60%; height: 1px; margin: 0px auto 20px; } .weather-temp span.typ { display: none; } .weather-temp span.deg { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; top: -0.5em; } .weather-img img { max-width: 100px; } /*---- HOMEPAGE LAYOUT ----*/ #bg-d { color: #ffffff; text-align: center; background-size: cover; background-position: center center; position: relative; background-color: #171717; } #bg-d:after { content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(31,31,31,0.7); z-index: 1; } #bg-d > .inside-padding { position: relative; z-index: 2; padding: 50px 10px 50px 10px; } #bg-d p { margin-bottom: 0px; } #contentArea > .inside-padding { background: #f2f2f2; margin: 10px 35px 10px 35px; padding: 20px; } /*---- QUICK LINKS ----*/ #bg-d .ptl_portlet_vertical { overflow: visible; } #bg-d a { color: #ffffff; transition: all .2s ease-in-out; } #bg-d a:hover { text-decoration: none; } #bg-d a span { transition: all .2s ease-in-out; } #bg-d a:hover span { -ms-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); } /*---- SUBPAGE ----*/ .sideBar { width: 24%; float: right; } .mainContent { width: 76%; float: right; } .mainContent h2.pageTitle { font-size: 20px; font-weight: bold; text-transform: uppercase; margin: 0px; background: #f2f2f2; padding: 10px; } #breadcrumbs, #breadcrumbs a { font-family: 'Merriweather', serif; font-size: 14px; color: #666666; } #breadcrumbs { padding: 10px; background: #e6e6e6; margin-bottom: 20px; } a.navLink { font-family: 'Merriweather', serif; color: #666666; font-size: 14px; padding: 10px; display: block; } a.navLink:hover { opacity: 1; text-decoration: underline; color: #666666; } .currentpage a.navLink { display: block; padding: 10px; font-weight: 700; font-family: 'Open Sans', sans-serif; margin-bottom: 10px; font-size: 17px; } .nav-toggle a { font-weight: 700; font-family: 'Open Sans', sans-serif; } .nav-toggle a:hover { text-decoration: none; color: #ffffff; } /*---- FOOTER ----*/ #footer { background: #1F1F1F; border-top-width: 4px; border-top-style: solid; color: #cccccc; } #footer a.logo { width: 100%; display: table; float: left; color: #ffffff; } #footer a.logo:hover { text-decoration: none; } #footer a.logo:hover .logoIcon, #footer a.logo:hover .schoolName { opacity: 0.7; } #footer .logoIcon { display: table-cell; vertical-align: middle; padding-right: 10px; transition: all .2s ease-in-out; } #footer .schoolName { display: table-cell; vertical-align: middle; transition: all .2s ease-in-out; font-weight: normal; } #footer .address { display: table-cell; vertical-align: middle; padding-left: 10px; } .credits { background: #333333; text-align: center; color: #cccccc; } .credits a { color: #ffffff; } .credits a:hover { color: #ffffff; text-decoration: underline; } /*---- BANNER BUTTONS ----*/ #banner .nivo-controlNav a { display: inline-block; background: #ffffff; border-radius: 50%; width: 15px; height: 15px; float: none; margin: 0px 6px 0px 6px; border: 1px solid #E0DFDF; } #banner .nivo-controlNav { text-align: center; width: 100%; padding: 0px; right: 0px; left: 0px; bottom: 10px !important; } .RadMenu a.rmLink { line-height: 45px; } /*** START OF TOP LEVEL MENU STYLES ***/ .telerik_main_menu a, .telerik_main_menu a:hover { text-decoration: none; font-size: 13px; font-weight: normal; } .telerik_main_menu .rmText { padding-top: 5px !important; padding-bottom: 15px !important; } .telerik_main_menu .rmGroup .rmText { padding-bottom: 5px !important; } .RadMenu .rmItem { height: auto; margin-right: 0px; } .RadMenu .rmText { font-weight: normal; font-size: 12pt; } .RadMenu .rmLink { float: left; outline: 0 none; padding-left: 0px !important; } .RadMenu .rmHorizontal .rmText { padding: 0px 10px 0px 10px !important; letter-spacing: 0.06em; } .RadMenu .rmGroup .rmText { margin-left: 0px !important; padding: 8px 10px 8px 10px !important; margin-bottom: 4px; } .rmrootGroup .rmHorizontal li.rmItem { margin-left: 10px; } /*** Normal State ***/ .telerik_main_menu .rmRootGroup a { text-decoration: none; font-size: 18px; } .telerik_main_menu .rmRootGroup a span { text-decoration: none; font-size: 15px; text-transform: uppercase; font-weight: 700; } /*** Over and Focused State ***/ .telerik_main_menu .rmRootGroup a:hover, .telerik_main_menu .rmRootGroup a.rmFocused { text-decoration: none; background-position: left top, right top; background-repeat: no-repeat; } .telerik_main_menu .rmRootGroup a:hover span, .telerik_main_menu .rmRootGroup a.rmFocused span { text-decoration: none; } /*** END OF TOP LEVEL MENU STYLES ***/ /*** START OF DROPDOWN MENU STYLES ***/ /*** Normal State ***/ .telerik_main_menu .rmGroup { } .telerik_main_menu .rmGroup a { text-decoration: none; font-size: 10pt; font-weight: normal; } .telerik_main_menu .rmGroup a span { text-decoration: none; font-size: 15px; font-weight: 400; line-height: normal !important; text-transform: none; } .telerik_main_menu .rmGroup .rmItem .rmExpandRight:after { content: ''; position: absolute; top: 5px; right: 5px; width: 18px; height: 26px; } /*** Over and Focused State ***/ .telerik_main_menu .rmGroup a:hover, .telerik_main_menu .rmGroup a.rmFocused { text-decoration: none; border-bottom: none !important; } .telerik_main_menu .rmGroup a:hover span, .telerik_main_menu .rmGroup a.rmFocused span { text-decoration: none; } /*** Dropdown border ***/ .RadMenu .rmRootGroup .rmItem ul.rmGroup { width: 200px; padding: 0px; } /*** END OF DROPDOWN MENU STYLES ***/ a#mobile-bar { line-height: 45px; color: #666666; font-size: 21px; text-transform: uppercase; } a#mobile-bar span { margin-right: 10px; } ul.quick-links { list-style: none; margin: 0px; padding: 0px; text-align: center; display: table; width: 100%; } ul.quick-links li { display: table-cell; } ul.quick-links li a { display: inline-block; background: #c79210; padding: 5px; margin: 3px; } ul.quick-links li a:hover { opacity: 0.8; } @media screen and (max-width: 1370px) { #header { width: 20%; } .contentWrapper { width: 80%; margin-left: 20%; } .responsiveTemplate #pubWrapper { width: 80%; } #menubar { width: 80%; } } @media screen and (max-width: 1270px) { .w-66 > .inside-padding, .w-33 > .inside-padding { padding: 10px; } #contentArea > .inside-padding { margin: 10px; } } @media screen and (max-width: 1210px) { #header { width: 100%; position: static; } #header a.logo { float: left; } #header .motto:after, #header a.logo:after { display: none; } .contentWrapper { width: 100%; margin-left: 0px; } #menubar { position: static; width: 100%; } .responsiveTemplate #pubWrapper { position: relative; top: 0px !important; width: 100%; } #theme { padding-top: 0px !important; } #theme.subpage #page { min-height: auto !important; } } @media screen and (max-width: 1000px) { .RadMenu .rmHorizontal .rmText { letter-spacing: 0; } } @media screen and (max-width: 960px) { ul.quick-links { display: block; width: 100%; position: relative; } ul.quick-links li { display: inline-block; } } @media screen and (max-width: 890px) { div#contentArea { width: 100% !important; } #header a.logo { float: none; } #header .motto:after, #header a.logo:after { display: block; } body #theme .w-33, body #theme .w-66 { width: 50%; } body #theme #bg-d .w-33 { width: 33.33334%; } .newsItem { width: 100%; float: none; } .newsItem > .inside { height: auto; } .newsItem .image .inside { height: 100px; } .sideBar { width: 26%; } .mainContent { width: 74%; } #footer { text-align: center; } #footer .w-33, #footer .w-66, #footer a.logo, #footer .logoIcon, #footer .schoolName, #footer .address { display: block; width: 100%; float: none; padding: 0px; } #footer .socialMedia { margin-top: 10px; } } @media screen and (max-width: 730px) { .sideBar, .mainContent { width: 100%; float: none; } } @media screen and (max-width: 670px) { body #theme .w-33, body #theme .w-66, body #theme #bg-d .w-33 { width: 100%; float: none; } } .telerik_main_menu .rmRootGroup a:hover span, .telerik_main_menu .rmRootGroup a.rmFocused span { background-color: #c79210; color:#000; } /* level 1 */ .telerik_main_menu .rmGroup a:hover span, .telerik_main_menu .rmGroup a.rmFocused span, .telerik_main_menu .rmGroup a.rmExpanded span { background-color: #c79210; color: #000; } .label_skin_corporation a:hover { text-decoration:none; } .subpage .mainContent .pageContent a { text-decoration: underline; font-weight: bold; } .subpage .mainContent .pageContent a:hover { text-decoration: none; } #menubar { background: #ffffff; border-top-width: 4px; border-top-style: solid; } .ContextBar, a.ContextBar, a.ContextBar:hover { line-height: 45px; color: #666666; text-transform: uppercase; } #menubar > .inside-padding { padding: 0px; } li#pubLinks > a { height: 35px !important; } #pubLinks .fa { top: 8px !important; }