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

Styles for auto_play play and pause buttons

The styles of this template are designed to blend with the default MT template.
Creating templates to match other tab templates should not be difficult, there are only
a few colurs and dimensions.
*/

.jl_magic_tabs_autoplay_player.jl_magic_tabs_autoplay_play_pause_icons {
    float: left;
}

.jl_magic_tabs_autoplay_player.jl_magic_tabs_autoplay_play_pause_icons.jl_magic_tabs_playing > .jl_magic_tabs_play {
    display: none;
}

.jl_magic_tabs_autoplay_player.jl_magic_tabs_autoplay_play_pause_icons:not(.jl_magic_tabs_playing) > .jl_magic_tabs_play {
    display: inline-block;
}

.jl_magic_tabs_autoplay_player.jl_magic_tabs_autoplay_play_pause_icons.jl_magic_tabs_playing > .jl_magic_tabs_pause {
    display: inline-block;
}

.jl_magic_tabs_autoplay_player.jl_magic_tabs_autoplay_play_pause_icons:not(.jl_magic_tabs_playing) > .jl_magic_tabs_pause {
    display: none;
}

/*
 * Styling for the buttons
 */

.jl_magic_tabs_autoplay_player.jl_magic_tabs_autoplay_play_pause_icons > .jl_magic_tabs_play,
.jl_magic_tabs_autoplay_player.jl_magic_tabs_autoplay_play_pause_icons > .jl_magic_tabs_pause {
    border: 1px solid #DDD;
    color: #555 !important;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 2px;
    background-color: #EEE;
    margin-left: 0 !important;
}

.jl_magic_tabs_autoplay_player.jl_magic_tabs_autoplay_play_pause_icons > .jl_magic_tabs_play > a {
    background-image: url(../../../../packages/jl_magic_tabs/blocks/jl_magic_tabs_auto_play/templates/play_pause_icons/play.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 16px;
    min-height: 20px;
    min-width: 20px;
}

.jl_magic_tabs_autoplay_player.jl_magic_tabs_autoplay_play_pause_icons > .jl_magic_tabs_pause > a {
    background-image: url(../../../../packages/jl_magic_tabs/blocks/jl_magic_tabs_auto_play/templates/play_pause_icons/pause.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 16px;
    min-height: 20px;
    min-width: 20px;
}


/*
When the list has the class jl_magic_tabs_additional_controls, the buttons are moved by js onto the
tab bar and this class decides where they are placed. To make it work, the tab controls container
needs a relative position.
*/
.jl_magic_tabs_autoplay_player.jl_magic_tabs_autoplay_play_pause_icons.jl_magic_tabs_additional_controls {
    display: none;
    position: absolute;
    /*
    When designing a player template to work with
    other tab layous, such as vertical tabs,
    these are the styles to edit/change/adjust/replace
    */
    right: 0;
    top: 0;
}

/* Adjustments for accordion and vertical templates */
.jl_magic_tabs_vertical_left .jl_magic_tabs_autoplay_player.jl_magic_tabs_autoplay_play_pause_icons.jl_magic_tabs_additional_controls {
    top: -20px;
    left: -22px;
    right: auto;
}

.jl_magic_tabs_vertical_right .jl_magic_tabs_autoplay_player.jl_magic_tabs_autoplay_play_pause_icons.jl_magic_tabs_additional_controls {
    top: -20px;
}

.jl_magic_tabs_accordion .jl_magic_tabs_autoplay_player.jl_magic_tabs_autoplay_play_pause_icons.jl_magic_tabs_additional_controls {
    top: -20px;
    left: auto !important;
    right: 0 !important;
}

div.jl_magic_tabs_controls {
    position: relative;
}

/*
Prevent the above positioning css in edit mode
*/
.ccm-edit-mode .jl_magic_tabs_autoplay_player.jl_magic_tabs_additional_controls,
.ccm-area-move-enabled .jl_magic_tabs_autoplay_player.jl_magic_tabs_additional_controls {
    display: block !important;
    position: relative !important;
    right: auto !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
}

.ccm-edit-mode .jl_magic_tabs_autoplay_player > li.jl_magic_tabs_play,
.ccm-area-move-enabled .jl_magic_tabs_autoplay_player > li.jl_magic_tabs_play,
.ccm-edit-mode .jl_magic_tabs_autoplay_player > li.jl_magic_tabs_pause,
.ccm-area-move-enabled .jl_magic_tabs_autoplay_player > li.jl_magic_tabs_pause {
    float: none !important;
    display: inline-block !important;
}

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

/*
 * Icons, hide while loading
 */
h1.jl_magic_tabs_has_icon > i[class*='fa-'],
h2.jl_magic_tabs_has_icon > i[class*='fa-'],
h3.jl_magic_tabs_has_icon > i[class*='fa-'],
h4.jl_magic_tabs_has_icon > i[class*='fa-'],
h5.jl_magic_tabs_has_icon > i[class*='fa-'],
h6.jl_magic_tabs_has_icon > i[class*='fa-'] {
    display: none;
}

h1.jl_magic_tabs_has_icon > i[class^='fa'].jl_magic_tabs_icon_tab,
h2.jl_magic_tabs_has_icon > i[class*='fa-'].jl_magic_tabs_icon_tab,
h3.jl_magic_tabs_has_icon > i[class*='fa-'].jl_magic_tabs_icon_tab,
h4.jl_magic_tabs_has_icon > i[class*='fa-'].jl_magic_tabs_icon_tab,
h5.jl_magic_tabs_has_icon > i[class*='fa-'].jl_magic_tabs_icon_tab,
h6.jl_magic_tabs_has_icon > i[class*='fa-'].jl_magic_tabs_icon_tab{
    display: inline-block;
}


/*
 * Icon states, tabs
 */

/*
 * Inactive tab
 */

.jl_magic_tabs_controls .jl_magic_tabs_has_icon .jl_magic_tabs_icon_tab {
    display: inline-block;
}

.jl_magic_tabs_controls .jl_magic_tabs_has_icon .jl_magic_tabs_icon_tab_active,
.jl_magic_tabs_controls .jl_magic_tabs_has_icon .jl_magic_tabs_icon_tab_hover {
    display: none;
}

/*
 * Inactive tab, hover
 */

.jl_magic_tabs_controls .jl_magic_tabs_has_icon:hover .jl_magic_tabs_icon_tab {
    display: none;
}

.jl_magic_tabs_controls .jl_magic_tabs_has_icon:hover .jl_magic_tabs_icon_tab_hover {
    display: inline-block;
}


/*
 * Active tab
 */

.jl_magic_tabs_controls .jl_magic_tabs_has_icon.jl_magic_tabs_active .jl_magic_tabs_icon_tab,
.jl_magic_tabs_controls .jl_magic_tabs_has_icon.jl_magic_tabs_active .jl_magic_tabs_icon_tab_hover {
    display: none;
}

.jl_magic_tabs_controls .jl_magic_tabs_has_icon.jl_magic_tabs_active .jl_magic_tabs_icon_tab_active {
    display: inline-block;
}


/*
 * Icon states, accordions
 */

/*
 * Inactive accordion
 */

.jl_magic_tabs_controls .jl_magic_tabs_has_icon .jl_magic_tabs_icon_accordion {
    display: inline-block;
}

.jl_magic_tabs_controls .jl_magic_tabs_has_icon .jl_magic_tabs_icon_accordion_active,
.jl_magic_tabs_controls .jl_magic_tabs_has_icon .jl_magic_tabs_icon_accordion_active_hover,
.jl_magic_tabs_controls .jl_magic_tabs_has_icon .jl_magic_tabs_icon_accordion_hover {
    display: none;
}

/*
 * Inactive accordion, hover
 */

.jl_magic_tabs_controls .jl_magic_tabs_has_icon:hover .jl_magic_tabs_icon_accordion {
    display: none;
}

.jl_magic_tabs_controls .jl_magic_tabs_has_icon:hover .jl_magic_tabs_icon_accordion_hover {
    display: inline-block;
}


/*
 * Active accordion
 */

.jl_magic_tabs_controls.jl_magic_tabs_accordion .jl_magic_tabs_has_icon.jl_magic_tabs_active .jl_magic_tabs_icon_accordion,
.jl_magic_tabs_controls.jl_magic_tabs_accordion .jl_magic_tabs_has_icon.jl_magic_tabs_active .jl_magic_tabs_icon_accordion_active_hover,
.jl_magic_tabs_controls.jl_magic_tabs_accordion .jl_magic_tabs_has_icon.jl_magic_tabs_active .jl_magic_tabs_icon_accordion_hover {
    display: none;
}

.jl_magic_tabs_controls.jl_magic_tabs_accordion .jl_magic_tabs_has_icon.jl_magic_tabs_active .jl_magic_tabs_icon_accordion_active {
    display: inline-block;
}

/*
 * Active accordion, hover
 */
.jl_magic_tabs_controls.jl_magic_tabs_accordion .jl_magic_tabs_has_icon.jl_magic_tabs_active:hover .jl_magic_tabs_icon_accordion_active {
    display: none;
}

.jl_magic_tabs_controls.jl_magic_tabs_accordion .jl_magic_tabs_has_icon.jl_magic_tabs_active:hover .jl_magic_tabs_icon_accordion_active_hover {
    display: inline-block;
}

/*
 * right positioning of icon
 */

.jl_magic_tabs_controls.jl_magic_tabs_accordion .jl_magic_tabs_has_icon.jl_magic_tabs_accordion_icon_push_right i[class*='fa-']{
    float: right;
}

.jl_magic_tabs_controls.jl_magic_tabs_accordion .jl_magic_tabs_has_icon.jl_magic_tabs_accordion_icon_push_right a:after,
.jl_magic_tabs_controls.jl_magic_tabs_accordion .jl_magic_tabs_has_icon.jl_magic_tabs_no_accordion_default a:after {
    content: none !important;
}

/*
 * Some additions to font awesome
 (note, some missing equivalents for old MS)
 */

.fa-mt-rotate-22 {
    -webkit-transform: rotate(22deg);
    -ms-transform: rotate(22deg);
    transform: rotate(22deg)
}

.fa-mt-rotate-45 {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.fa-mt-rotate-135 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg)
}

.fa-mt-rotate-225 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg)
}

.fa-mt-rotate-315 {
    -webkit-transform: rotate(315deg);
    -ms-transform: rotate(315deg);
    transform: rotate(315deg)
}

.fa-mt-rotate-338 {
    -webkit-transform: rotate(338deg);
    -ms-transform: rotate(338deg);
    transform: rotate(338deg)
}