/*
Magic Tabs by John Liddiard (aka JohntheFish)
www.jlunderwater.co.uk
This software is licensed under the terms described in the concrete5.org marketplace.
Please find the add-on there for the latest license copy.

Create a tabbed interface simply by inserting magic tabs blocks into the page

THIS TEMPLATE IS INTENDED TO SERVE AS A STARTING POINT FOR THOSE DESIGNING FROM SCRATCH WHO DO
NOT WANT TO OVERCOME C5 STYLES OR ROLL A DESIGN WITH THEME ROLLER.

The use of !important to force styling is dependant on the theme the tabs are used with. Some themes will not
need it at all. Some themes will need it in more places.
*/


div.jl_magic_tabs_self_contained_starter_fill_width {
    margin-bottom: 5px;
}

.jl_magic_tabs_controls {
    position: relative;
}

.jl_magic_tabs_self_contained_starter_fill_width ul {
    clear: both;
    padding: 0;
    list-style: none;
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.jl_magic_tabs_self_contained_starter_fill_width ul li {
    float: left;
    display: inline-grid;
    flex-grow: 1;
    text-align: center;
}

/* Basic tab */
.jl_magic_tabs_self_contained_starter_fill_width ul.jl_magic_tabs li a {
    border-style: outset outset none outset;
    font-family: Roboto, sans-serif !important;
    font-size: 16px !important;
    color: #fff !important;
    display: block;
    line-height: 16px;
    padding-top: 18px;
    padding-bottom: 18px;
    padding-right: 14px;
    padding-left: 14px;
    background-color: #006fd8;
    border: 1px solid #006fd8;
    border-bottom-color: transparent;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

/* Basic tab hover*/
.jl_magic_tabs_self_contained_starter_fill_width ul.jl_magic_tabs li a:hover {
    border-style: inset inset none inset;
    color: #fff !important;
    background-color: #197ddc;
    border: 1px solid #197ddc;
    border-bottom-color: transparent;

    /* removes the default undeline on links */
    text-decoration: none !important;
    /* but keep the cursor change to show it is clickable */
    cursor: pointer;
}

/* Active tab */
.jl_magic_tabs_self_contained_starter_fill_width li.jl_magic_tabs_self_contained_starter_fill_width_active a.jl_magic_tabs_self_contained_starter_fill_width_active {
    color: #fff !important;
    border-style: inset inset none inset;
    background-color: #00195a;
    border: 1px solid #00195a;
    border-bottom-color: transparent;
}

/* Active tab hover - mainly here to stop the hover from the basic tab pushing through*/

.jl_magic_tabs_self_contained_starter_fill_width li.jl_magic_tabs_self_contained_starter_fill_width_active a.jl_magic_tabs_self_contained_starter_fill_width_active:hover {
    border-style: inset inset none inset;
    color: #fff !important;
    background-color: #19181a;
    border: 1px solid #19181a;
    border-bottom-color: transparent !important;

    /* removes the default undeline on links */
    text-decoration: none !important;
    /* makes sure that the active tab does not react on hover */
    cursor: default;
}

/*
Accordion styles
*/

/* Fill whole width */
.jl_magic_tabs_self_contained_starter_fill_width.jl_magic_tabs_controls.jl_magic_tabs.jl_magic_tabs_accordion > ul.jl_magic_tabs > li {
    width: 100%;
}

.jl_magic_tabs_self_contained_starter_fill_width.jl_magic_tabs_controls.jl_magic_tabs.jl_magic_tabs_accordion > ul.jl_magic_tabs > li > a {
    text-align: left;
}

.jl_magic_tabs_self_contained_starter_fill_width.jl_magic_tabs_controls.jl_magic_tabs.jl_magic_tabs_accordion.jl_magic_tabs_level_1 > ul.jl_magic_tabs > li,
.jl_magic_tabs_self_contained_starter_fill_width.jl_magic_tabs_controls.jl_magic_tabs.jl_magic_tabs_accordion.jl_magic_tabs_level_2 > ul.jl_magic_tabs > li {
    padding-right: 20px;
    padding-left: 20px;
}

/* Cursor so to indicate click to collapse */
.jl_magic_tabs_self_contained_starter_fill_width.jl_magic_tabs_controls.jl_magic_tabs.jl_magic_tabs_accordion > ul.jl_magic_tabs > li > a.jl_magic_tabs_self_contained_starter_fill_width_active {
    cursor: pointer;
}

/* + to indicate expandable */
.jl_magic_tabs_self_contained_starter_fill_width.jl_magic_tabs_controls.jl_magic_tabs.jl_magic_tabs_accordion > ul.jl_magic_tabs > li > a:after {
    content: "+";
    font-weight: 900;
    float: right;
    text-decoration: none;
    font-size: 200%;
}

/* - to indicate collapsible */
.jl_magic_tabs_self_contained_starter_fill_width.jl_magic_tabs_controls.jl_magic_tabs.jl_magic_tabs_accordion > ul.jl_magic_tabs > li > a.jl_magic_tabs_self_contained_starter_fill_width_active:after {
    content: "-";
}