/* --- FONTS --- 


 font-family: 'lusitanaregular';
 font-family: 'latobold';
 font-family: 'latoregular';
 font-family: 'latoregularitalic';
 font-family: 'latolight';
 font-family: 'latoblack';
 font-family: 'avenir';



------------ */
/*--- COLOR GUIDE - FIND AND REPLACE THESE COLORS

Dom     : @color1

Sec     : @color2

---*/
/* --------------------- COLORS ---------------------- */
/*--Link Color--*/
a, a:hover {
    color: #FFD700
    }
.subpage .ptl_page a {
    color: #af9200
    }
.more_events_label {
    background-color: #8c7500 !important;
    /*me*/
    }
.read-more {
    background-color: #8c7500 !important;
    /*me*/
    }
/*-- Header BG color --*/
#header {
    background: #808080;
    /* The Fallback */
    background: rgba(128, 128, 128, 0.9)
    }
/*-- School name text color --*/
#school-name h1 {
    color: #000
    }
/*-- Motto text color --*/
#motto {
    color: #000
    }
/*-- Menubar BG color --*/
#menubar {
    background-color: #8a7500 !important;
    /* The Fallback */
    background: rgba(255, 215, 0, 0.9);
    text-align: center
    }
/*-- Under banner ribbon BG color --*/
.d-bg {
    background: #808080
    }
/*-- Under banner ribbon heading text color --*/
.d-bg h2 {
    color: #000
    }
/*-- Section heading text color and border bottom color --*/
.sec-header h3 {
    border-bottom-color: #808080;
    color: #af9200
    }
/*-- Footer BG color --*/
#footer {
    background: #808080
    }
/*-- Footer school name text color --*/
#footer h3 {
    color: #ffdf76
    }
/*-- Sidenav LV2 border left color --*/
.sitenavl1 a.navLink {
    border-left: 3px solid #808080
    }
/*-- Home News and Upcoming events button --*/
#news-summary .content a.read-more, .ptl_upcomingevents .ptl_upcomingevents_footer .more_events:link, .ptl_upcomingevents .ptl_upcomingevents_footer .more_events:visited, .ptl_upcomingevents .ptl_upcomingevents_footer .more_events:active {
    /* background: #af9200; */
    background-color: #8c7500;
    /*me*/
    }
/*-- Home News and Upcoming events button HOVER --*/
#news-summary .content a.read-more:hover, .ptl_upcomingevents .ptl_upcomingevents_footer .more_events:hover {
    background: #808080;
    color: #000
    }
/*---- TELERIK COLORS ----*/
/*--TOP LEVEL STYLES--*/
.RadMenu .rmGroup .rmText {
    color: #fff
    }
/*--Normal State--*/
.telerik_main_menu .rmRootGroup a {
    color: #fff
    }
.telerik_main_menu .rmRootGroup a span {
    color: #fff
    }
/*--Over and Focused State ***/
.telerik_main_menu .rmRootGroup a:hover, .telerik_main_menu .rmRootGroup a.rmFocused {
    color: #000
    }
.telerik_main_menu .rmRootGroup a:hover span, .telerik_main_menu .rmRootGroup a.rmFocused span {
    color: #000
    }
/*--TOP LEVEL HOVER BG COLOR AND IMAGES (two images)--*/
.telerik_main_menu .rmRootGroup a:hover, .telerik_main_menu .rmRootGroup a.rmFocused {
    background-color: #808080
    }
/*--END OF TOP LEVEL STYLES--*/
/*--DROPDOWN MENU STYLES--*/
/*--Normal State--*/
.telerik_main_menu .rmGroup a {
    color: #fff;
    background: #af9200
    }
.telerik_main_menu .rmGroup a span {
    color: #fff;
    background: #af9200
    }
/*--Over and Focused State--*/
.telerik_main_menu .rmGroup a:hover, .telerik_main_menu .rmGroup a.rmFocused {
    background: #808080;
    color: #fff
    }
.telerik_main_menu .rmGroup a:hover span, .telerik_main_menu .rmGroup a.rmFocused span {
    background: #808080;
    color: #fff
    }
/*--END OF DROPDOWN MENU STYLES--*/
.rmItem:hover {
    background-color: #808080
    }
.rmVertical .rmItem:hover a span, .rmVertical .rmItem:hover a {
    background-color: #808080
    }
/*--DROPDOWN LV2 MENU STYLES--*/
/*--Normal State--*/
.telerik_main_menu .rmGroup .rmGroup a {
    color: #171717;
    background: #fff
    }
.telerik_main_menu .rmGroup .rmGroup a span {
    color: #171717;
    background: #fff
    }
/*--Over and Focused State--*/
.telerik_main_menu .rmGroup .rmGroup a:hover, .telerik_main_menu .rmGroup .rmGroup a.rmFocused {
    background: #af9200;
    color: #fff
    }
.telerik_main_menu .rmGroup .rmGroup a:hover span, .telerik_main_menu .rmGroup .rmGroup a.rmFocused span {
    background: #af9200;
    color: #fff
    }
/*--SECOND LEVEL BORDER LEFT--*/
.rmLevel2 {
    border-left: 4px solid #808080
    }
/*--END OF DROPDOWN MENU STYLES--*/
/*---- END TELERIK COLORS ----*/
/*------------------------------- END COLORS -------------------------------*/
/* --------------------- IMAGES ---------------------- */
/*-- body BG image --*/
#background {
    background: url(/p14cdn2static.sharpschool.com/UserFiles/Servers/Server_92289/Image/Jefferson-MSedited.png) no-repeat center center
    }
/*--Navigation Arrow BG--*/
.telerik_main_menu .rmGroup .rmItem .rmExpandRight:after {
    background: url(/p14cdn2static.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--*/
/*
.telerik_main_menu .rmGroup .rmItem .rmExpandRight:after {
 background-position: -18px -8px !important;
}
*/
/*------------------------------- END END IMAGES -------------------------------*/
/* --------------------- QUICK LINKS ---------------------- */
ul.quick-links a {
    font-size: 17px;
    margin-bottom: 10px;
    display: block
    }
/*------------------------------- END QUICK LINKS -------------------------------*/
body .row {
    margin-bottom: 10px
    }
.row.bg-d .inside-padding {
    padding-top: 20px
    }
#content-col-wrapper.row {
    margin-bottom: 0
    }
.sec-header h2 {
    border-bottom-width: 3px;
    border-bottom-style: solid;
    margin: 0 0 15px;
    font-family: "avenir";
    font-weight: normal;
    font-size: 26px;
    padding-bottom: 5px;
    border-bottom-color: #808080;
    color: #141f3e
    }
.sec-header h3 {
    border-bottom-width: 3px;
    border-bottom-style: solid;
    margin: 0 0 15px;
    font-family: "avenir";
    font-weight: normal;
    font-size: 26px;
    padding-bottom: 5px
    }
#header-left {
    width: 85%;
    float: left
    }
#header-right {
    float: left;
    width: 15%
    }
#logo {
    float: left;
    width: 17%
    }
#logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto
    }
#school-name {
    float: left;
    width: 83%
    }
#school-name h1 {
    font-family: "avenir";
    text-transform: uppercase;
    font-size: 33px;
    padding: 10px;
    font-weight: normal
    }
#header-left a:hover {
    text-decoration: none !important
    }
#motto {
    font-family: "avenir";
    font-size: 50%
    }
ul#social {
    list-style: none;
    /* margin: 0px;
      padding: 0px; */
    position: relative;
    top: 14px;
    float: right
    }
#social li.icn {
    display: inline-block;
    padding: 0 3px 0 3px
    }
#social li.icn a {
    width: 40px;
    height: 40px;
    display: inline-block
    }
#social li.icn.facebook a {
    background-position: 0 0
    }
#social li.icn.twitter a {
    background-position: -40px 0
    }
#social li.icn.youtube a {
    background-position: -80px 0
    }
#social li.icn.email a {
    background-position: -120px 0
    }
#social li.icn a {
    background: url(/p14cdn2static.sharpschool.com/common/resources/DesignPortfolio/SiteThemes/CommonLib/social-media/social-sprite.png)
    }
.inner-bar {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 10px 0 10px;
    display: inline-block;
    vertical-align: top
    }
#background {
    z-index: -1;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 200px;
    display: block;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-filter: grayscale(1);
    filter: grayscale(1)
    }
#banner .inside-padding {
    padding: 40px 10px 30px 10px
    }
#banner .bannerContainer {
    position: relative;
    border: 10px solid #fff
    }
#banner .nivoSlider {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none
    }
.d-bg .inside-padding {
    padding: 25px 10px 25px 10px
    }
.d-bg {
    text-align: center
    }
.d-bg h2 {
    font-family: "latoregular";
    font-size: 30px;
    margin: 0 0 15px
    }
.d-bg p {
    font-family: "avenir";
    margin: 0
    }
#footer {
    color: #000
    }
#footer-left {
    width: 66.66666%;
    float: left
    }
#footer-right {
    width: 33.33334%;
    float: right
    }
#footer p {
    font-size: 14px;
    line-height: 18px
    }
#footer-address {
    color: #000
    }
#RSSLink {
    height: 24px;
    position: absolute;
    width: 24px;
    top: -50px;
    right: 9px
    }
#content-col-wrapper > .inside-padding > .w-33 {
    background: #f5f5f5
    }
#footer h3 {
    font-family: "avenir";
    margin: 0 0 10px;
    font-size: 20px
    }
.subpage #page {
    max-width: 1000px;
    margin: 30px auto;
    padding: 10px
    }
#sub-content-left {
    width: 23%;
    float: left
    }
#sub-content-right {
    width: 77%;
    float: left
    }
a.navLink {
    display: block;
    padding: 6px
    }
.sitenavl0.currentpage a.navLink {
    background: #f5f5f5
    }
.sitenavl1 a.navLink {
    padding: 3px 6px 3px 6px;
    margin: 6px 0 6px 0
    }
.credits {
    background: #333;
    text-align: center;
    color: #fff;
    padding: 5px
    }
.credits > a {
    text-decoration: underline !important
    }
.label_skin_corporation {
    font-size: 13px;
    font-family: "avenir"
    }
.label_skin_corporation a {
    color: #fff;
    text-decoration: underline !important;
    font-family: "avenir"
    }
.label_skin_corporation a:hover {
    text-decoration: underline;
    color: #fff
    }
#breadcrumbs {
    margin: 0 0 15px
    }
.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: 0
    }
.RadMenu .rmText {
    font-family: "avenir";
    font-weight: normal;
    font-size: 12pt
    }
.RadMenu .rmLink {
    float: left;
    outline: 0 none;
    padding-left: 0 !important
    }
.RadMenu .rmHorizontal .rmText {
    padding: 0 8px 0 8px !important;
    letter-spacing: 0.06em
    }
.RadMenu .rmGroup .rmText {
    margin-left: 0 !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;
    font-family: "avenir"
    }
.telerik_main_menu .rmRootGroup a span {
    text-decoration: none;
    font-size: 14px;
    font-family: "avenir"
    }
/*** 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 a {
    text-decoration: none;
    font-size: 10pt;
    font-weight: normal
    }
.telerik_main_menu .rmGroup a span {
    text-decoration: none;
    font-size: 10pt;
    font-weight: normal;
    line-height: normal !important;
    font-family: "avenir", Arial, Helvetica, sans-serif;
    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: 0
    }
/*** END OF DROPDOWN MENU STYLES ***/
#mobile-bar {
    line-height: 40px;
    color: #fff;
    text-indent: 15px
    }
@media screen and (max-width: 900px) {
    #background {
        z-index: 1
        }
    #header, #content-wrapper {
        position: relative;
        z-index: 2
        }
    }
#social li.icn a:hover {
    opacity: 0.8
    }
.ptl_upcomingevents_item .ptl_upcomingevents_date .ptl_upcomingevents_month {
    color: #000
    }
/*===== FONTS =====*/
@font-face {
    font-family: "lusitanaregular";
    src: url(/common/template-fonts/lusitana-regular-webfont.eot);
    src: url(/common/template-fonts/lusitana-regular-webfont.eot?#iefix) format("embedded-opentype"), url(/common/template-fonts/lusitana-regular-webfont.woff) format("woff"), url(/common/template-fonts/lusitana-regular-webfont.ttf) format("truetype"), url(/common/template-fonts/lusitana-regular-webfont.svg#lusitanaregular) format("svg");
    font-weight: normal;
    font-style: normal
    }
@font-face {
    font-family: "latoregularitalic";
    src: url(/common/template-fonts/lato-regita-webfont.eot);
    src: url(/common/template-fonts/lato-regita-webfont.eot?#iefix) format("embedded-opentype"), url(/common/template-fonts/lato-regita-webfont.woff) format("woff"), url(/common/template-fonts/lato-regita-webfont.ttf) format("truetype"), url(/common/template-fonts/lato-regita-webfont.svg#latobold) format("svg");
    font-weight: normal;
    font-style: normal
    }
@font-face {
    font-family: "latobold";
    src: url(/common/template-fonts/lato-bol-webfont.eot);
    src: url(/common/template-fonts/lato-bol-webfont.eot?#iefix) format("embedded-opentype"), url(/common/template-fonts/lato-bol-webfont.woff) format("woff"), url(/common/template-fonts/lato-bol-webfont.ttf) format("truetype"), url(/common/template-fonts/lato-bol-webfont.svg#latobold) format("svg");
    font-weight: normal;
    font-style: normal
    }
@font-face {
    font-family: "latoregular";
    src: url(/common/template-fonts/lato-reg-webfont.eot);
    src: url(/common/template-fonts/lato-reg-webfont.eot?#iefix) format("embedded-opentype"), url(/common/template-fonts/lato-reg-webfont.woff) format("woff"), url(/common/template-fonts/lato-reg-webfont.ttf) format("truetype"), url(/common/template-fonts/lato-reg-webfont.svg#latoregular) format("svg");
    font-weight: normal;
    font-style: normal
    }
@font-face {
    font-family: "latolight";
    src: url(/common/template-fonts/lato-lig-webfont.eot);
    src: url(/common/template-fonts/lato-lig-webfont.eot?#iefix) format("embedded-opentype"), url(/common/template-fonts/lato-lig-webfont.woff) format("woff"), url(/common/template-fonts/lato-lig-webfont.ttf) format("truetype"), url(/common/template-fonts/lato-lig-webfont.svg#latolight) format("svg");
    font-weight: normal;
    font-style: normal
    }
@font-face {
    font-family: "latoblack";
    src: url(/common/template-fonts/lato-bla-webfont.eot);
    src: url(/common/template-fonts/lato-bla-webfont.eot?#iefix) format("embedded-opentype"), url(/common/template-fonts/lato-bla-webfont.woff) format("woff"), url(/common/template-fonts/lato-bla-webfont.ttf) format("truetype"), url(/common/template-fonts/lato-bla-webfont.svg#latoblack) format("svg");
    font-weight: normal;
    font-style: normal
    }
/*-------------------------------------------------------------------------*/