/*
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 is an example proforma for tabs created using Buttons Factory Pro.

  This template is linked to a specific theme name in Buttons factory Pro. From there on, you can edit the
  theme in Buttons factory Pro and your tabs design will follow that theme.

  If you want to use more than one theme, then you can create additional templates. REMEMBER you also need to edit the class
  name jl_magic_tabs_buttons_pro_example to be unique in the view.php and view.css, ideally named after your template name.

  Any Buttons Factory Pro compatible template for Magic Tabs should begin 'buttons_pro_' or end '_buttons_pro'

  Not all Buttons Factory Pro theme styles create nice tabs.

  The theme styles that work best are 'Limelight' and the various 'Border...' styles. Other styles
  can work if you also have a strongly contrasting 'Text Color on Hover'

  The best shapes to use are 'Default' and 'Rounded'.
 */


div.jl_magic_tabs_buttons_pro_vertical_left_example.jl_magic_tabs_screen {
    margin-right: 5px;
    /* The line across the right of the tabs */
    border-right: 1px solid #e6e6e6;
    float: left;

    /* The width of the tabs. The tab body automatically takes up any remaining width */
    width: 160px;
}

.jl_magic_tabs_controls {
    position: relative;
}


.jl_magic_tabs_buttons_pro_vertical_left_example.jl_magic_tabs_screen.jl_magic_tabs ul.magic_tabs {
    clear: both;
    padding: 0;
    list-style: none;
    margin-right: 0px;
    margin-bottom: 5px;
    margin-top: 5px;
    display: flex !important;
    flex-wrap: wrap;
}

.jl_magic_tabs_buttons_pro_vertical_left_example.jl_magic_tabs_screen.jl_magic_tabs ul.magic_tabs li {
    list-style-type: none;
    float: left;
    margin-top: 0px;
    /* need this to kill the browser default indent on li elements*/
    margin-left: 0px;
    margin-bottom: 3px;
    display: inline-grid !important;
    width: 100%;
}

/*
 * Remove any bottom corner styling. If this is removed, you end up with buttons rather than tabs.
 * (maybe that is what you require!)
 */
.jl_magic_tabs_buttons_pro_vertical_left_example.jl_magic_tabs_screen.jl_magic_tabs ul.magic_tabs li a {
    border-right-color: transparent;

    -webkit-bottom-right-border-radius: 0;
    -moz-bottom-right-border-radius: 0;
    border-bottom-right-radius: 0;

    -webkit-top-right-border-radius: 0;
    -moz-top-right-border-radius: 0;
    border-top-right-radius: 0;

    height: auto;
    text-align: right;
    padding-left: 12px;
    padding-right: 12px;
}

.jl_magic_tabs_buttons_pro_vertical_left_example.jl_magic_tabs_screen.jl_magic_tabs ul.magic_tabs > li.active > a.active {
    cursor: default;
}

/*
http://stackoverflow.com/questions/1260122/expand-div-to-take-remaining-width
*/
div.jl_magic_tabs_buttons_pro_vertical_left_example_tab_body {
    overflow: hidden;
    padding-top: 5px
}


/*
Accordion styles - need to undo some tab styles
*/

div.jl_magic_tabs_buttons_pro_vertical_left_example.jl_magic_tabs_accordion {
    margin-bottom: 5px;
    /* The line across beneath the tabs */
    border-bottom: 1px solid #e6e6e6;
}

.jl_magic_tabs_buttons_pro_vertical_left_example.jl_magic_tabs_accordion ul {
    clear: both;
    padding: 0;
    list-style: none;
    margin-bottom: 6px;
}

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

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


.jl_magic_tabs_buttons_pro_vertical_left_example.jl_magic_tabs_accordion ul li {
    float: left;
    margin-left: 5px;
    margin-right: 5px;
    display: inline-grid;
    width: 100%;
}

.jl_magic_tabs_buttons_pro_vertical_left_example.jl_magic_tabs_accordion.jl_magic_tabs_level_1 ul li,
.jl_magic_tabs_buttons_pro_vertical_left_example.jl_magic_tabs_accordion.jl_magic_tabs_level_2 ul li {
    padding-left: 20px;
    padding-right: 20px;
}


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

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


/*
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
*/

.jl_magic_tabs_default.jl_magic_tabs ul.nav-tabs.nav {
    display: flex;
    flex-wrap: wrap;
}


.ccm-ui.jl_magic_tabs_default.jl_magic_tabs ul.nav-tabs.nav li {
    display: inline-grid;
    list-style-type: none;
}

.ccm-ui.jl_magic_tabs_default.jl_magic_tabs_controls {
    position: relative;
}

/*
Accordion styles
*/

/* Fill whole width */
.ccm-ui.jl_magic_tabs_default.jl_magic_tabs_controls.jl_magic_tabs.jl_magic_tabs_accordion > ul.nav-tabs.nav.jl_magic_tabs > li {
    width: 100%;
}

/* Cursor so to indicate click to collapse */
.ccm-ui.jl_magic_tabs_default.jl_magic_tabs_controls.jl_magic_tabs.jl_magic_tabs_accordion > ul.nav-tabs.nav.jl_magic_tabs > li.active > a.active {
    cursor: pointer;
}

.jl_magic_tabs_default.ccm-ui.jl_magic_tabs_controls.jl_magic_tabs.jl_magic_tabs_accordion.jl_magic_tabs_level_1 > ul.nav-tabs.nav.jl_magic_tabs > li,
.jl_magic_tabs_default.ccm-ui.jl_magic_tabs_controls.jl_magic_tabs.jl_magic_tabs_accordion.jl_magic_tabs_level_2 > ul.nav-tabs.nav.jl_magic_tabs > li {
    padding-right: 20px;
    padding-left: 20px;
}

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

/* - to indicate collapsible */
.ccm-ui.jl_magic_tabs_default.jl_magic_tabs_controls.jl_magic_tabs.jl_magic_tabs_accordion > ul.nav-tabs.nav.jl_magic_tabs > li > a.active:after {
    content: "-";
}