/*-----------------------------------------------------------------------------------

	Schoolzine Styles
	Description: CSS for edits to the Canvas Template and layout options for SZ Products
	Author: Karl Short

====================================================================================
    DIY Newsletters
-----------------------------------------------------------------------------------*/
#access {background: #000; color: #fff; float: left; width: 100%; margin: 0; padding: 0; clear: both; font-size: 80%; text-align: left; position: fixed; z-index: 1000; font-size: 14px;}

#access ul {list-style-type: none; margin: 0; padding: 0;}
#access li {float: left;}
#access a {position: absolute;}
#access a:focus, #access.visible a{position:static; }
#access a {float: left; display: block; color: #fff; padding: .2em .5em; margin: .2em .5em .3em; position: absolute; left: -9999px;}

.accessibilityActive a:focus {outline: 2px solid yellow !important;}
/*====================================================================================
	DIY Newsletters
-----------------------------------------------------------------------------------*/

.container .container{padding:0;}
#header, #header-wrap {height:auto;}
#mainHeader{height:325px; width: 100%; background-repeat: no-repeat; background-position: top center; background-color: transparent;}
#header { border-bottom: none; }
body.stretched #header.full-header .container{max-width: 1170px;}
#header.sticky-header:not(.static-sticky) #primary-menu.style-5 > ul > li > a{ line-height: 22px; padding-top: 8px; padding-bottom: 8px; }
#header.newsletter1.sticky-header:not(.static-sticky) #primary-menu.style-5 > ul > li > a i{ display: block; width: auto; top: -1px; margin: 0 6px 0 0; font-size: 14px; line-height: 22px; }

#header.newsletter1 #primary-menu{float:none;}
#header.newsletter1.full-header #primary-menu.style-5 > ul{border-right: none; margin-right: 0; width: 97%; }

#header.newsletter1 #top-search{width: 1%; margin-left: 1%;}

#header.newsletter1 #primary-menu > ul > li > a{font-size: 11px;}
#header.newsletter1 #logo {font-size: 20px; display: none; height: auto;}

#header.newsletter1 #header-wrap #logo{ display: flex; align-items: center; min-height:100px;  justify-content: center; }
#header.newsletter1 #header-wrap #logo{ display: none; }


#content #content01 {
    box-shadow: 0 6px 12px -1px rgba(152,162,179,.2), 0 4px 4px -1px rgba(152,162,179,.2), 0 2px 2px 0 rgba(152,162,179,.2);
    border-bottom-color: rgba(152,162,179,.5);
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

#content aside.sidebar {
    border-bottom-color: rgba(152,162,179,.5);
    box-shadow: 0 6px 12px -1px rgba(152,162,179,.2), 0 4px 4px -1px rgba(152,162,179,.2), 0 2px 2px 0 rgba(152,162,179,.2);
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}


.bgImgColor #content > .content-wrap, .bgImg  #content> .content-wrap, .bgColor #content > .content-wrap {  }
.bgImgColor #content .content-wrap > .container, .bgImg #content .content-wrap > .container, .bgColor #content .content-wrap > .container,  #content .content-wrap > .container { padding: 0; }

.bgImgColor #content aside.sidebar, .bgImg #content aside.sidebar, .bgColor #content aside.sidebar, aside.sidebar{ background: rgba(255,255,255,0.9); padding: 40px 20px; border-radius: 2px 0 0 2px; border-right: 1px solid rgba(0,0,0, 0.1); margin-right: 0;}

.bgImgColor #content aside.sidebar.mobileMenu, .bgImg #content aside.sidebar.mobileMenu, .bgColor #content aside.sidebar.mobileMenu  { padding-bottom:0; background: rgba(255,255,255,1);  }

.bgImgColor #content #content01, .bgImg #content #content01, .bgColor #content #content01, #content #content01 { background: #fff; padding: 40px; width: calc(100% - 300px); }

.bgImgColor #content .divider.divider-border i, .bgImg #content .divider.divider-border i, .bgColor #content .divider.divider-border i{ border: 1px solid rgba(0, 0, 0, 0.2); }

.bgImgColor #content .divider:after,  .bgColor #content .divider:after, .bgImg #content .divider:after {border-top: 1px solid rgba(0, 0, 0, 0.2); }

@media (max-width: 575px) {
    .bgImgColor #content #content01, .bgImg #content #content01, .bgColor #content #content01, #content #content01 { padding:20px;}
}

#accessibilityBar.stickyNow{
    position: absolute;
    top: 0;
    background: #fff;
    z-index: 1000;
}
#accessibilityBar.stickyNow{
    width:100%; 
}
.bgImgColor #content #accessibilityBar.stickyNow, .bgColor #content #accessibilityBar.stickyNow, .bgImg #content #accessibilityBar.stickyNow {
    max-width: 790px;
    left: 50%;
    transform: translateX(-50%);
}
/*=================================================================================
    Header 1
-----------------------------------------------------------------------------------*/
.newsletter1 #primary-menu ul > li {text-align: center; }
.newsletter1 #primary-menu.style-5 > ul > li:not(:first-child), #header.sticky-header:not(.static-sticky).newsletter1 #primary-menu.style-5 > ul > li {margin-left:0;}
.newsletter1 #primary-menu ul.count2 > li {width: 50%;}
.newsletter1 #primary-menu ul.count3 > li {width: 33.3%;}
.newsletter1 #primary-menu ul.count4 > li {width: 25%;}
.newsletter1 #primary-menu ul.count5 > li {width: 20%;}
.newsletter1 #primary-menu ul.count6 > li {width: 16.6%;}
.newsletter1 #primary-menu ul.count7 > li {width: 14.2%;}
.newsletter1 #primary-menu ul.count8 > li {width: 12.5%;}
.newsletter1 #primary-menu ul.count9 > li {width: 11.1%;}
.newsletter1 #primary-menu ul.count10 > li {width: 10%;}
.newsletter1 #primary-menu ul.count11 > li {width: 9%;}

.newsletter1 #primary-menu ul.count12 > li,
.newsletter1 #primary-menu ul.count13 > li,
.newsletter1 #primary-menu ul.count14 > li,
.newsletter1 #primary-menu ul.count15 > li {width: 8.3%;}

#header.sticky-header:not(.static-sticky).newsletter1 #primary-menu.style-5 > ul > li > a{line-height: 14px;}

#header.full-header #primary-menu.style-5 > ul.count9,
#header.full-header #primary-menu.style-5 > ul.count10,
#header.full-header #primary-menu.style-5 > ul.count11,
#header.full-header #primary-menu.style-5 > ul.count12,
#header.full-header #primary-menu.style-5 > ul.count13,
#header.full-header #primary-menu.style-5 > ul.count14,
#header.full-header #primary-menu.style-5 > ul.count15 { padding-right: 0; }

#primary-menu.style-5 > ul.count9 > li > a,
#primary-menu.style-5 > ul.count10 > li > a,
#primary-menu.style-5 > ul.count11 > li > a,
#primary-menu.style-5 > ul.count12 > li > a,
#primary-menu.style-5 > ul.count13 > li > a,
#primary-menu.style-5 > ul.count14 > li > a,
#primary-menu.style-5 > ul.count15 > li > a{padding-left:5px; padding-right:5px; letter-spacing: normal; font-weight: normal;}

#primary-menu.style-5 > ul li:nth-child(1n+13){display:none;}

#primary-menu.style-5 ul li > a div.stickyHidden{  }
#primary-menu.style-5 ul li > a div.stickyHidden span{ display:inline-block; }

.sticky-header #primary-menu.style-5 ul li > a div.stickyHidden span{ display:none; }
.sticky-header #primary-menu.style-5 ul li > a div.stickyHidden{  }
#header.newsletter1.sticky-header:not(.static-sticky) #primary-menu.style-5 > ul > li > a div.stickyHidden i{ font-size: 28px; line-height: 44px; }


/*=================================================================================
    DIY Newsletters
-----------------------------------------------------------------------------------*/
#accessibilityBar{ line-height: 20px; border-bottom: 1px solid #e5e5e5;  border-top: 1px solid #e5e5e5; text-align: center; padding-top: 17px; padding-bottom: 7px; margin-bottom:30px;}
    #accessibilityBar label { margin-right: 10px; display: inline-block; }
    #accessibilityBar #google_translate_element, #google_translate_element .goog-te-gadget { display: inline-block; }
    #accessibilityBar #google_translate_element{margin-right:20px;}
    #accessibilityBar .font-increase { position: relative; font-size: 20px; margin-right: 12px; border-right: 1px solid #eee; padding-right: 15px; cursor: pointer;}
        #accessibilityBar .font-increase .fa-search-plus { position: absolute; font-size: 12px; right: 10px; }
    #accessibilityBar .font-decrease { position: relative; font-size: 16px; cursor: pointer;}
        #accessibilityBar .font-decrease .fa-search-minus { position: absolute; font-size: 11px; right: -8px; top:-3px; }


nav.sideNav {  }
    nav.sideNav ul { list-style: none; }
        nav.sideNav ul li { margin-bottom:10px; }
            nav.sideNav ul li .fa{ margin-right: 10px; font-size: 16px; color: #174470; transition: all 0.5s;}
            nav.sideNav ul li a{ color:#444; transition: all 0.5s; display: block; padding: 3px 0;}
                nav.sideNav ul li a:hover{ color: #174470; }
                nav.sideNav ul li a:hover .fa{ margin-right: 15px; }

aside.sidebar { min-width: 300px; max-width:100%; width: 300px; }

aside.sidebar .widget, aside.sidebar nav.sideNav { padding-left: 20px; padding-right:20px; }
aside.sidebar .widget{ padding-bottom: 10px; /* border-bottom: 1px solid rgba(0, 0, 0, 0.05); */ }
aside.sidebar .widget.no-header h4 {
    display: none;
}
    aside.sidebar.mobileMenu .divider{ margin:20px 0; }
    aside.sidebar .divider.divider-border.first, aside.sidebar.mobileMenu .divider.divider-border.first{margin-top: -20px;}
    aside.sidebar .divider.divider-border i { color: #333; }

.flex {
    display: flex;
}

aside.sidebar .sidepanel-ads-wrapper.widget { padding:0; text-align: center; }

aside.sidebar .sidepanel-ads-wrapper.widget img { margin-bottom: 20px; }

#adspace01 {  }
   #adspace01 { text-align: center; }
#adspaceSide a { margin-bottom: 20px; display: block; text-align: center; }

#adFooter {
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 1170px;
    left: 50%;
    z-index: 100;
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    transform: translate(-50%, 0);
}
    #adFooter span.footerClose{ position: absolute; top: -34px; right: 0; background:#fff; padding: 10px; cursor: pointer; box-shadow: 0 0 10px rgba(0,0,0,0.1);
    background: #333; color: #fff; }
    #adFooter span.footerClose.fa-times, #adFooter span.footerClose.fa-arrow-up{ display: none; }
#adFooter a{ margin: 1%; display: inline-block; }

#content01 { 
    border-left: 1px dotted #eee;
 }

@media (max-width: 575px){
    #content.bgImgColor #content01, #content.bgImg #content01, #content.bgColor #content01{
        padding: 20px;
    }
}

/*=================================================================================
    Sticky Side Menu on Mobile
-----------------------------------------------------------------------------------*/


@media (max-width: 991px){

    .sidebar.sticky-sidebar-wrap.mobileMenu{ width: 100%; margin-bottom:0 !important; border-bottom:none;  z-index: 100; }
    .sidebar.sticky-sidebar-wrap.mobileMenu .scwStickySidebar{  }

    aside.sidebar .divider.divider-border{
        display: none; }
    aside.sidebar .divider.divider-border.first{
        display: block; margin-bottom:0; }
    #content.bgImgColor aside.sidebar, #content.bgImg aside.sidebar, #content.bgColor aside.sidebar{ background:#fff; padding-bottom:20px;}
    #filterTags{display:none;}

    .sticky-sidebar.openMenu #filterTags{display:block; padding-top: 10px;}
    .sticky-sidebar.openMenu .divider.divider-border i{background-color:#f1f1f1;}
}
    /*=================================================================================
        Feature Article Section
    -----------------------------------------------------------------------------------*/
#featureArea .postcontent {
    width: calc(98% - 275px); margin-right: 2%;
}
#featureArea .postcontent img {border: 1px solid #fff;}


/*=================================================================================
    Tag Cloud
-----------------------------------------------------------------------------------*/

.tagwrp { 
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 25px;
}

.tagwrp .radiof{ 
    display:inline-block; border-radius: 18px; margin-right:10px; margin-bottom:10px;
}

.tagwrp .radiof .radio-style-1-label { color: #fff;padding-right: 10px;line-height: 1.9; }

.tagwrp .radiof .radio-style-1-label:before, .tagwrp .radiof .radio-style-2-label:before, .tagwrp .radiof  .radio-style-3-label:before{display:block; float:left;
}
.grey a.clearSideTags{ color:#ccc; }


/*=================================================================================
Content Builder Notice Board
-----------------------------------------------------------------------------------*/
.contentPadding {padding:0 40px;}


/*=================================================================================
    Back to Top
-----------------------------------------------------------------------------------*/

a.backTop {
    background: rgba(0,0,0,0.5);
    padding: 0px 10px 5px;
    position: fixed;
    color: #fff;
    bottom: 200px;
    right: 0px;
    font-size: 25px;
    opacity: 0;
    transition: all 0.3s;
}

a.backTop.show {
    opacity: 1;
}

/* ==================================================================================
   Compatible Header
 -----------------------------------------------------------------------------------*/
#newsHeader4 .header-img {
    background-size: contain;
    margin: 0 auto;
    height: 100%;
    width: 980px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -490px;
    height: 325px;
}
.main-header {
    width: 100%;
    height: 325px;
    display: block;
    position: relative;
}

.transp-bg-left, .transp-bg-right {
    width: 50%;
    height: 100%;
    float: left;
}

.transp-bg-left {
    background: #FFF;
    background: -moz-linear-gradient(left,	rgba(255,255,255,0.65) 0%, rgba(255,255,255,1) 35%, rgba(255,255,255,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.65)), color-stop(35%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(255,255,255,0.65) 0%,rgba(255,255,255,1) 35%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(255,255,255,0.65) 0%,rgba(255,255,255,1) 35%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(255,255,255,0.65) 0%,rgba(255,255,255,1) 35%,rgba(255,255,255,1) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(255,255,255,0.65) 0%,rgba(255,255,255,1) 35%,rgba(255,255,255,1) 100%); /* W3C */
}

.transp-bg-right {
    background: #FFF;
    background: -moz-linear-gradient(right,  rgba(255,255,255,0.65) 0%, rgba(255,255,255,1) 35%); /* FF3.6+ */
    background: -webkit-gradient(linear, right top, right top, color-stop(0%,rgba(255,255,255,0.65)), color-stop(35%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(right,	rgba(255,255,255,0.65) 0%,rgba(255,255,255,1) 35%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(right,  rgba(255,255,255,0.65) 0%,rgba(255,255,255,1) 35%); /* Opera 11.10+ */
    background: -ms-linear-gradient(right,	rgba(255,255,255,0.65) 0%,rgba(255,255,255,1) 35%); /* IE10+ */
    background: linear-gradient(to left,  rgba(255,255,255,0.65) 0%,rgba(255,255,255,1) 35%); /* W3C */
}

@media only screen and (min-width: 1100px) and (max-width: 1500px) {

    .transp-bg-left {
        background: #FFF;
        background: -moz-linear-gradient(left,	rgba(255,255,255,0.9) 0%, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.9)), color-stop(10%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left,  rgba(255,255,255,0.9) 0%,rgba(255,255,255,1) 10%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left,  rgba(255,255,255,0.9) 0%,rgba(255,255,255,1) 10%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(left,  rgba(255,255,255,0.9) 0%,rgba(255,255,255,1) 10%,rgba(255,255,255,1) 100%); /* IE10+ */
        background: linear-gradient(to right,  rgba(255,255,255,0.9) 0%,rgba(255,255,255,1) 10%,rgba(255,255,255,1) 100%); /* W3C */
    }

    .transp-bg-right {
        background: #FFF;
        background: -moz-linear-gradient(right,  rgba(255,255,255,0.9) 0%, rgba(255,255,255,1) 10%); /* FF3.6+ */
        background: -webkit-gradient(linear, right top, right top, color-stop(0%,rgba(255,255,255,0.9)), color-stop(10%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(right,	rgba(255,255,255,0.9) 0%,rgba(255,255,255,1) 10%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(right,  rgba(255,255,255,0.9) 0%,rgba(255,255,255,1) 10%); /* Opera 11.10+ */
        background: -ms-linear-gradient(right,	rgba(255,255,255,0.9) 0%,rgba(255,255,255,1) 10%); /* IE10+ */
        background: linear-gradient(to left,  rgba(255,255,255,0.9) 0%,rgba(255,255,255,1) 10%); /* W3C */
    }

}

@media only screen and (min-width: 800px) and (max-width: 1099px) {

    .transp-bg-left {
        background: #FFF;
        background: -moz-linear-gradient(left,	rgba(255,255,255,0.95) 0%, rgba(255,255,255,1) 5%, rgba(255,255,255,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.95)), color-stop(5%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left,  rgba(255,255,255,0.95) 0%,rgba(255,255,255,1) 5%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left,  rgba(255,255,255,0.95) 0%,rgba(255,255,255,1) 5%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(left,  rgba(255,255,255,0.95) 0%,rgba(255,255,255,1) 5%,rgba(255,255,255,1) 100%); /* IE10+ */
        background: linear-gradient(to right,  rgba(255,255,255,0.95) 0%,rgba(255,255,255,1) 5%,rgba(255,255,255,1) 100%); /* W3C */
    }

    .transp-bg-right {
        background: #FFF;
        background: -moz-linear-gradient(right,  rgba(255,255,255,0.95) 0%, rgba(255,255,255,1) 5%); /* FF3.6+ */
        background: -webkit-gradient(linear, right top, right top, color-stop(0%,rgba(255,255,255,0.95)), color-stop(5%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(right,	rgba(255,255,255,0.95) 0%,rgba(255,255,255,1) 5%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(right,  rgba(255,255,255,0.95) 0%,rgba(255,255,255,1) 5%); /* Opera 11.10+ */
        background: -ms-linear-gradient(right,	rgba(255,255,255,0.95) 0%,rgba(255,255,255,1) 5%); /* IE10+ */
        background: linear-gradient(to left,  rgba(255,255,255,0.95) 0%,rgba(255,255,255,1) 5%); /* W3C */
    }

}
@media (min-width: 992px) {
    .transp-bg-right, .transp-bg-left, .header-img{display:block;}
    .mobileHeader{display:none;}
}
@media (max-width: 991px) {
    .main-header {
        height:auto;
    }
    .transp-bg-right, .transp-bg-left, .header-img{display:none;}
    .mobileHeader{display:block;}
}
/*=================================================================================
    QLD Government Logo
-----------------------------------------------------------------------------------*/

.qld-gov-footer{
    background: url(img/qld-gov-footer-web.png) no-repeat scroll right center #ffffff;
    width: 100%;
    height: 100px;
}


/*=================================================================================
    TasDoE Header
-----------------------------------------------------------------------------------*/

#tasDoeHeader{ background:#fff; border-top:8px solid #beb7b3; }
#tasDoeHeader .wrapper{padding:12px 0; position: relative; }
#tasDoeHeader .left{display: flex; align-items: center;}
#tasDoeHeader .middle{ text-align:center; line-height: 64px; color:#243644; font-size: 18px; text-transform: uppercase; font-weight: bold;}
#tasDoeHeader .right{order:1;}

#tasDoeHeader #learnersFirstLogo {position:absolute; top:-8px; right: 0; max-width: 260px;}
#tasDoeHeader #learnersFirstLogo img { width:100%; }

@media screen and (max-width: 767px){
    #tasDoeHeader{background:#484d56;}
    #tasDoeHeader .left, #tasDoeHeader .middle{display:none;}
    #tasDoeHeader .right{  }
    #tasDoeHeader #learnersFirstLogo{ position: relative; top: auto; right: auto; width:100%; }
    #accessibilityBar label{display:none;}

    #accessibilityBar #google_translate_element{ margin-right:0; margin-bottom:10px;}
    #accessibilityBar .skiptranslate > div {display:block !important;}
    #accessibilityBar #google_translate_element {display: block; margin-bottom: 20px;}
}

/*=================================================================================
    Print Styles
-----------------------------------------------------------------------------------*/
@media print{
    header.pdf-header{
        height:1.1cm !important;
    }
    .pdf-details{
        padding-top:0.5cm !important;
    }
    .pdf-header img{
        display:none !important;
    }
    #mainHeader{
        display:block !important;
        background-size: cover;
        height:6cm !important;
        background-position:center center !important;
    }
    .form_wrap {
        display:none;
    }
    .legacyHeader{
        padding-bottom:3px !important;
        padding-top:8px !important;
        margin-top:20px !important;
    }
    .articleHeader{
        padding-bottom:0 !important;
    }
}

.sfHover {
    outline: 2px solid black;
}
#primary-menu a:focus-visible {
    outline: 2px solid black;
    outline-offset: 2px;
}

/* Ensure the focus indicator is visible on both the link and inner div */
#primary-menu .stickyHidden:focus-visible {
    outline: 2px solid black;
    outline-offset: 2px;
}