/* position: relative is needed on the body to allow the scrollspy feature to work. */
body {
     position: relative;
     background-color: #f8f9fa;
     font-family: Handlee, cursive;
    } 
/*The wanderer text */
.navbar-brand {
    line-height: 2.5;
}

/*dolphin log */
#logo{
    margin-top: 5px;
}

/* aligning items at the top of the page due to the navbar and jumbotron */
.container-fluid {
        margin-top: 130px;
    }

/* Style the hover state of the home link in the side Navbar. */
#top:hover{
    text-decoration: none;
}

.navbar .navbar-toggler {
    border: 0.5px solid rgb(23,162,184);
}

/*dropdown menu styling for active mode, main menu - when click */
.dropdown-menu .dropdown-item:active {
/*    background-color: #6c757d;*/
    background-color: rgb(233,236,239);
}
/*dropdown menu styling for active mode, main menu - when active mode applied. */
.dropdown-menu .active {
/*    background-color: #6c757d;*/
    background-color: rgb(233,236,239);
}

#collapseStates {
    background-color: rgb(233,236,239);
}

/*Jumbotron for heading bar*/
.jumbotron {
    text-align: center;
    margin-top: 10px;
    height: 155px;  
    z-index: 1;
    border-bottom: 0.7px solid rgb(23,162,184);
    padding-top: 90px;
    margin-bottom: -80px;
    position: fixed;
}

/*Height of heading*/
 .jumbotron #title {
        line-height: 15px;
        text-align: center;
        margin: 0 auto;
        color: rgb(23,162,184);
        padding: 0px;
        margin: 0px;
    }

/*Heading link in Jumbotron on hover, ie country.*/
.jumbotron a:hover {
     text-decoration: none;
}

/*navbar within the jumbotron*/
.jumbotron #states {
    line-height: 0px;
    padding: 0px;
    height: 30px;
    margin-top: 80px;
    font-size: 15px;
    background-color: rgb(233,236,239);
}


/* Collapsible button for bottom navbar  */
.jumbotron #statesMenu, .jumbotron #statesMenuBar {
    position: absolute;
    left: 10px;
    top: -55px;
    color: black;
    background-color: rgb(233,236,239);
}

/*gap between side nav bar and top navbar. */
#sidebar {
    border-right: 0.7px solid rgb(23,162,184);
    margin-top: -240px;
    background-color: rgba(233,236,239,0.3);
    margin-right: 0px;
    padding-right: 0;
    width: 100%;
    padding-top: 0px;
}

/*remove padding from left sidebar navigation pane. */
#navs{
    padding: 0px;
    width: 100%;
    position: fixed;
/*    z-index: 1;*/
}


/*page links - padding top moves the links down/up */
#sidebarItems {
    margin-top: -150px;
    padding-left: 10px;
/*    z-index: 1;*/
    font-size: 16px;
    width: 100%;
    height: 100%;
    }

/*scroll bar*/
#side {
    height: 100vh;
    flex-wrap: wrap;
    overflow-y: auto;
/*    z-index: 1;*/
    width: 100%;
    padding-top: 50px;
    margin-top: 50px;
}
/*scrollbar background - scrollable area */
#side::-webkit-scrollbar-track{
    border-radius: 20px;
    max-height: calc (100vh-100px);
    margin-right: auto;
    padding-bottom: 100px;
    margin-bottom: 100px;
    z-index: -1;
    background-color: rgba(23,162,184,0.1);
}

#side::-webkit-scrollbar{
    width: 10px;
    z-index: -1;
}
/* moving part of side scrollbar */
#side::-webkit-scrollbar-thumb{
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 6px rgba(23,162,184,1);
    background-color: rgba(23,162,184,1);
/*    height: 20px;*/
    z-index: -1;
}
#sidebarItems:first-child{
    padding-top: 350px;
}
#sidebarItems:last-child{
    padding-bottom: 50px;
}
/*sidebar index page */
.index #navsIndex {
    margin-top: -25px; 
    padding: 0; 
    position: fixed;
}

/*The place names within the side navbar*/
#sidebarItems li a {
    padding-bottom: 0;
    padding-top: 0;
/*    z-index: 1;*/
}

/*The heading within the side navbar*/
#sidebarItems li h6 {
    padding-bottom: 0;
    font-size: 15px;
    margin-bottom: 0;
}

/*Bullets in side navbar*/
.badge {
    height: 10px;
    width: 10px;
    border-radius: 120px;
    line-height: 0.7;
}

/*carousel container */
#slides {
    max-height: 500px;
    max-width: 750px; 
    margin: auto;
    margin-bottom: 165px;
}
/*main carousel */
.carousel {
/*
    max-height: 500px;
    max-width: 750px; 
    margin: auto;
*/
    max-width: 90%;
    margin: 0 auto;
    padding: 10px;
    margin-top: 0px;
    padding-top: 0px;
    z-index: -1;
}

/*carousel images*/
.carousel-inner img {
/*
    max-height: 500px;
    max-width: 750px;
*/
/*    max-width: 80%;*/
    margin: 0 auto;
    z-index: -1;
}

/*Positioning the arrows in the carousel. */
.carousel-control-next {
    padding-left: 0px;
    margin: 0;
    height: 60%;
    padding-top: 10%;
}

.carousel-control-prev {
    height: 60%;
    padding-top: 10%;
    padding-right: 0px; 
    margin: 0px;
}

/*carousel writing */
.carousel-inner .carousel-caption {
    z-index: 0;
}

/*  Put the caption below the image in the carousel.  */
.carousel .carousel-caption {
    position: relative;
    left: auto;
    right: auto;
    padding: 35px 0px 5px 0px;
    color: rgb(23,162,184);
    margin-bottom: 2px;
}

/*dots at bottom to show image number. Position:relative and under is meant to make the dots under the photo with the text but they just move around the screen as the browser window size is changed.*/
.carousel .carousel-indicators li {
    width: 12px;
    height: 12px;
    border-radius: 100%;
    border: 1px solid #6c757d;
    z-index: 0;
    margin-bottom: 5px;
    margin-top: 0px;
 }

.carousel-indicators{
    z-index: 1;
}



/*Align body/main text*/
.content {
    text-align: justify;
    padding: 0 15px 0 20px;
    z-index: -1;
    margin-left: 0px;
}

/*Divs for main text */
.places {
    padding-top: 165px;
    font-size: 18px;
/*    font-family: Handlee, cursive;*/
    letter-spacing: 1px;
}

/*Divs for main text - headings */
.places h3 {
    color: rgb(23,162,184);
/*    font-family: Handlee, cursive;*/
/*    font-family: The Girl Next Door, cursive;*/
    text-align: left;
}

/*links within the divs for the main text to link to other places. */
.places .links{
    font-style: oblique;
    color: #6c757d;
    font-weight: bold;
}
.places .links:hover {
    text-decoration: none;
    color: #6c757d;
}

/*Spans within the divs for the main text for the places within the main places. */
.places .highlight {
/*    font-style: oblique;*/
    color: #17a2b8;
    font-weight: bold;
}

/* card image overlays -  */
.card-img-overlay {
    padding: 5px;
}

/* card image overlay titles -  */
.photoTitle {
    font-size: 16px;
    }

/* card image overlay titles - links on hover  */
.photoTitle a:hover {
    text-decoration: none;
}

/*card header links - no underline on hover. */
.card-header a:hover{
    text-decoration: none;
}

/*Footer border, colour and positioning */
.footer {
    border-top: 0.7px solid rgb(23,162,184);
    padding: 0px;
    margin: 0px;
    height: 50px;
    background-color: rgba(233,236,239, 1);
    font-size: 12px;
    z-index: -1;
    }

/*Links in footer, normal */
.urls a{
    color: #343a40;
    
}

/*Links in footer, hover */
.urls a:hover{
    color: black;
    text-decoration: none;
}

/*Tooltips - less padding and colour */
.tooltip-inner {
    padding: 7px 7px 5px 7px; 
    background-color: rgba(239,240,240, 1);
    color: #6c757d;
    border: 0.7px solid rgb(23,162,184);
    font-family: Handlee, cursive;
    letter-spacing: 0.7px;
    z-index: 3;
}
/*Tooltips - no arrow, */
.tooltip.bs-tooltip-bottom .arrow:before, .tooltip.bs-tooltip-top .arrow:before {
    border-bottom-color: transparent;
    border-top-color: transparent;
    z-index: 3;
}




/*media queries - adjusting for different sized devices */

/*  xs screens  */ 
@media (max-width: 575.98px) {
    .jumbotron {
        height: 120px;
        padding-top: 55px;
    }
    .container-fluid {
        margin-top: 110px;
    }
/*    dropdown side bar for xs*/
    #sidebar {
        padding: 5px;
        margin-top: 20px;
        position: fixed;
        background-color: #f8f9fa;
        border-right: none;
        width: auto;
        max-height: 40%;
        z-index: 2;
    }
/*    list items within the dropdown side menu */
    #sidebar #sidebarItems {
        padding: 5px;
        margin-top: 0px;
        width: auto;
        background-color: #f8f9fa;
    }
    #side{
        padding-top: 0;
        margin-top: 0;
        overflow-y: scroll;
        flex-wrap: wrap;
        max-height: 40vh;
        background-color: #f8f9fa;
    }
    
    /*    short sidebar styling for shorter menus. */
    #side.smallMenu{
        overflow-y: auto;
        flex-wrap: wrap;
        height: 20vh; 
    }
    
   /*scrollbar background - scrollable area - move the scrollbar down lower. */
    #side::-webkit-scrollbar-track{
        margin-bottom: 0px;
        max-height: 70vh;
    }
    

/*    menu button */
    .navbar-toggler {
        width: 47px;
        height: 47px;
        margin: 0px;
        padding: 2px;
        font-size: 13px;
        line-height: 18px;
    }
    
/*    height/position of the page menu button - the side menu */
    #pageMenu {
        margin-top: 10px;
        margin-left: 5px;
    }
    
    /* Collapsible button for bottom navbar  */
    .jumbotron #statesMenu, .jumbotron #statesMenuBar {
        left: 5px;
        top: -58px;
    }
       
    #mainBody {
        margin: auto;
        margin: 0 30px;
    }
      .jumbotron #title {
        line-height: 70px;
        text-align: center;
        margin: 0 auto;
    }
    
/*    place the collapse menu button in the jumbotron  */
    #statesMenu{
        margin-top: 12px;
    }
    /*   2nd navbar */
    .jumbotron #states {
    line-height: 0px;
    padding: 0px;
    height: 0px;
    margin-top: 60px;  
}
    /*  Dropdown styling for the 2nd menu - spacing items out. */
.jumbotron .collapse li {
    padding-top: 12px;
     background-color: rgba(233,236,239, 1);
}

/* Bottom item in dropdown 2nd menu  */
.jumbotron .collapse li:last-child {
    padding-bottom: 15px;
}
    
    /*carousel container */
#slides {
    margin-bottom: -30px;
}
    
    /*Positioning the arrows in the carousel. */
.carousel-control-next {
    padding-left: 0px;
    margin: 0;
    height: 75%;
    padding-top: 10%;
}

.carousel-control-prev {
    height: 75%;
    padding-top: 10%;
    padding-right: 0px; 
    margin: 0px;
}
    
/*    hide the carousel caption on small screens. */
    .carousel-caption{
       display: none; 
    }

/*Adding gap between kata Tjuta and Uluru sunrise images, NT page.*/
    #KJI {
        margin-bottom: 10px;
    }
}


/*   sm devices   */
@media (min-width: 576px) and (max-width: 767.98px) {
/*   Heading banner  */
    .jumbotron {
        height: 100px;
        padding-top: 65px;
    }
    
/*    heading text  */
    .jumbotron #title {
        line-height: 50px;
        text-align: center;
        margin: 0 auto;
        padding-bottom: 9px;
        padding-top: 2px;
    }
    
    /*    place the collapse menu button in the jumbotron  */
    #statesMenu{
        margin-top: 15px;
    }
    
/*   2nd navbar */
    .jumbotron #states {
    line-height: 0px;
    padding: 0px;
    height: 0px;
    margin-top: 60px; 
}
    /*  Dropdown styling for the 2nd menu - spacing items out. */
.jumbotron .collapse li {
    padding-top: 12px;
    background-color: rgba(233,236,239, 1);
}

/* Bottom item in dropdown 2nd menu  */
.jumbotron .collapse li:last-child {
    padding-bottom: 15px;
}
    
    /*    menu button */
    .navbar-toggler {
        width: 50px;
        height: 50px;
        margin: 0px;
        padding: 2px 0;
        font-size: 13px;
        line-height: 18px;
    }
    
    /* Collapsible button for bottom navbar  */
    .jumbotron #statesMenu, .jumbotron #statesMenuBar {
        top: -59px;
    }
/*    Distance of sidebar menu items from the top of the page. */
    #sidebarItems {
        margin-top: 200px;
/*        z-index: -5;*/
    }
    
        /*scrollbar background - scrollable area - move the scrollbar down lower. */
#side::-webkit-scrollbar-track{
    margin-top: 200px;
    margin-bottom: 0px;
}
    
    #side::-webkit-scrollbar {
        height: 100vh;
    }

    
/*    this and the one below (navs) arranges height of text and (scrollbar) in the side navbar.    */
    #sidebarItems:first-child{
    padding-top: 0px;
    margin-top: 170px;
}
    
    #sidebarItems:last-child{
    padding-bottom: 100px;
}
    
        /*carousel container */
#slides {
    margin-bottom: -30px;
}
    
    
      /*Positioning the arrows in the carousel. */
.carousel-control-next {
    padding-left: 0px;
    margin: 0;
    height: 75%;
    padding-top: 10%;
}

.carousel-control-prev {
    height: 75%;
    padding-top: 10%;
    padding-right: 0px; 
    margin: 0px;
}
    
/*    hide the carousel caption on small screens. */
    .carousel-caption{
       display: none; 
    }
    
    /*    remove padding around text and reduce font size on cards in main Country page for small screens. */
    .card-body {
        padding: 5px;
        font-size: 16px;
    }
    
/*    Make card columns, for main country pages, have 2 columns on small screens rather than the default 3. */
    .card-columns {
        column-count: 2;
        -webkit-column-count: 2;
        -moz-column-count: 2;
        -o-column-count: 2;
        -ms-column-count: 2;
    }
}


/*   md devices   */
@media (min-width: 768px) and (max-width: 991.99px) {
    .footer {
       font-size: 14px; 
    }
     /*    menu button */
    .navbar-toggler {
        width: 55px;
        height: 55px;
        margin: 0px;
        padding: 2px 0;
        font-size: 16px;
        line-height: 19px;
    }
    
    /*    Distance of sidebar menu items from the top of the page. */
    #sidebarItems {
        margin-top: 150px;
/*        z-index: -5;*/
        padding: 0;
    }
    
   
/*    this and the one below (navs) arranges height of text and (scrollbar) in the side navbar.    */
    #sidebarItems:first-child{
    padding-top: 0px;
    margin-top: 190px;
}
    
    /*scrollbar background - scrollable area - move the scrollbar down lower. */
#side::-webkit-scrollbar-track{
    margin-top: 230px;
    margin-bottom: 0;
}
    
    #side::-webkit-scrollbar-thumb{
/*        max-height: 100px;*/
    }
    
    #sidebarItems:last-child{
    padding-bottom: 100px;
    }
    
/*    remove padding around text on cards in main Country page for medium screens. */
    .card-body {
        padding: 10px;
    }
    
            /*dots at bottom to show image number.*/
.carousel .carousel-indicators li {
    margin-bottom: 10px;
    height: 13px;
    width: 13px;
    margin-top: 0px;
    padding: 0px;
 }
}

/*    lg  */
@media (min-width: 992px) and (max-width: 1200px) {
    .content {
        padding: 0 40px 0 30px;
    }
    #sidebarItems {
        padding-left: 5px;
    }
    
     /*    Distance of sidebar menu items from the top of the page. */
    #sidebarItems {
        margin-top: 150px;
/*        z-index: -5;*/
    }
    
   
/*    this and the one below (navs) arranges height of text and (scrollbar) in the side navbar.    */
    #sidebarItems:first-child{
    padding-top: 0px;
    margin-top: 200px;
}
    
    /*scrollbar background - scrollable area - move the scrollbar down lower. */
#side::-webkit-scrollbar-track{
    margin-top: 230px;
    margin-bottom: 0;
}
    
    #side::-webkit-scrollbar-thumb{
/*        max-height: 100px;*/
    }
    
    #sidebarItems:last-child{
    padding-bottom: 100px;
}
    
/*    line spacing of side navbar items*/
    #sidebarItems li {
        line-height: 1.6;
        font-size: 15px;
    }
    
       
    /*dots at bottom to show image number.*/
.carousel .carousel-indicators li {
    margin-bottom: 10px;
    height: 13px;
    width: 13px;
 }
    
    .footer {
       font-size: 15px;   
    }
    
/* Top menu bar items, font size. */
    .collapse ul li {
        font-size: 13px;
        line-height: 25px;
    }
}

/*style for xl*/
@media (min-width: 1200px) {
     .content {
        padding: 0 40px 0 30px;
    }
    #sidebarItems {
        padding-left: 20px;
    }
    
       /*    Distance of sidebar menu items from the top of the page. */
    #sidebarItems {
        margin-top: 150px;
/*        z-index: -5;*/
    }
    
   
/*    this and the one below (navs) arranges height of text and (scrollbar) in the side navbar.    */
    #sidebarItems:first-child{
    padding-top: 0px;
    margin-top: 200px;
}
    
    /*scrollbar background - scrollable area - move the scrollbar down lower. */
#side::-webkit-scrollbar-track{
    margin-top: 230px;
    margin-bottom: 0;
}
    
    #side::-webkit-scrollbar-thumb{
/*        max-height: 100px;*/
    }
    
    #sidebarItems:last-child{
    padding-bottom: 100px;
    }
    
        /*dots at bottom to show image number.*/
.carousel .carousel-indicators li {
    margin-bottom: 10px;
    height: 13px;
    width: 13px;
/*
    background-color: rgb(23,162,184);
    border: none;
*/
 }

    .footer {
       font-size: 15px; 
    }

} 


/*  Media queries for xs and sm devices  */


/* navbar styling for xs devices  */ 
@media (max-device-width: 575.98px) {
/*text alignment on phones  */
    #mainBody {
        text-align: left;
    }
    
    .content{
        text-align: left;
    }
    
/*    remove margin after The Wanderer title for phones. */
    #blogName {
        margin-right: 0;
    }
    
/*    The wanderer text*/
    .navbar-brand {
        line-height: 1.8;
        margin-right: 0;
    }
/*    Dolphin photo*/
    #logo {
        margin-top: -3px;
        margin-left: -12px;
    }
/*    Main menu toggle button */
    #mainMenuButton{
        margin-top: -3px;
        margin-right: -12px;
    }
       /*Jumbotron for heading bar*/
.jumbotron {
    margin-top: 0;
    padding-top: 52px;
    position: fixed;
}

/*Height of Country heading*/
 .jumbotron #title {
        line-height: 80px;
    }
    /* Collapsible button for bottom navbar  */
.jumbotron #statesMenu, .jumbotron #statesMenuBar {
    position: absolute;
    top: -55px;
}
    /*navbar within the jumbotron*/
.jumbotron #states {
    margin-top: 48px;
    font-size: 15px;
}
    
    .urls {
        padding: auto 0;
        margin: auto 0;
        font-size: 11px;
    }
}



/* navbar styling for horizontal phones  */
@media (min-device-width: 576px) and (max-device-width: 767.98px) {

/*    The wanderer text*/
    .navbar-brand {
        line-height: 1.9;
    }
/*    Dolphin photo*/
    #logo {
        margin-top: -4px;
    }
/*    Main menu toggle button */
    #mainMenuButton{
        margin-top: -2px;
    }
    
   /*Jumbotron for heading bar*/
.jumbotron {
    margin-top: 0;
    padding-top: 54px;
    position: fixed;
}

/*Height of Country heading*/
 .jumbotron #title {
        line-height: 75px;
    }
    /* Collapsible button for bottom navbar  */
.jumbotron #statesMenu, .jumbotron #statesMenuBar {
    position: absolute;
    top: -67px;
}
    /*navbar within the jumbotron*/
.jumbotron #states {
    margin-top: 48px;
    font-size: 15px;
}
    /*    Distance of sidebar menu items from the top of the page. */
    #sidebarItems {
        margin-top: 200px;
/*        z-index: -5;*/
    }
    
        /*scrollbar background - scrollable area - move the scrollbar down lower. */
#side::-webkit-scrollbar-track{
    margin-top: 200px;
    margin-bottom: 0px;
}
    
    #side::-webkit-scrollbar {
        height: 100vh;
    }

    
/*    this and the one below (navs) arranges height of text and (scrollbar) in the side navbar.    */
    #sidebarItems:first-child{
    padding-top: 0px;
    margin-top: 170px;
}
    
    #sidebarItems:last-child{
    padding-bottom: 100px;
}
}