/*
 * jquery.mb.components
 * Copyright (c) 2001-2010. Matteo Bicocchi (Pupunzi); Open lab srl, Firenze - Italy
 * email: mbicocchi@open-lab.com
 * site: http://pupunzi.com
 *
 * Licences: MIT, GPL
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 */

#myScroll{
/*display:none;*/
}
div[id^="myScroll_"] {
        -webkit-overflow-scrolling: touch;
        height:auto!important;
}

    div[id^="myScroll_"] .scrollEl,
    #myScroll .scrollEl {
        display: none;
        /*background:url("../elements/elBgnd.png") repeat-x;
        border:1px solid #ddd;
        font-family:sans-serif;
        font-size:180%;
        color:white;
        height:100px;
        padding:10px;
        padding-top:60px;
        text-shadow:#999 1px 1px 1px;
        text-align:center;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;*/
    }
#myScroll1 .scrollEl{
  display:none;
  background:url("../elements/elBgnd.png") repeat-x;
  border:1px solid #ddd;
  font-family:sans-serif;
  font-size:180%;
  padding:10px;
  padding-top:40%;
  color:white;
  height:100%;
  text-shadow:#999 1px 1px 1px;
  text-align:center;
  /*CSS3 properties*/
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
}


#controls div, #controls1 div {
    font-family: sans-serif;
    margin-top: 5px;
    background: #fff;
    display: inline-block;
    padding: 6px;
    cursor: pointer;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-box-shadow: #999 2px 2px 2px;
    -webkit-box-shadow: #999 2px 2px 2px;
}
    div[id^="controls_"] div.positiondisplay,
    #controls div.positiondisplay {
        background: #000;
        color: #fff;
        cursor: default;
    }


#myScroll1{
  float:left;
  margin-right:20px;
}
div[id^="controls_"] .sel,
#controls .sel, #controls1 .sel {
    color: black !important;
    font-weight: bold;
}
div[id^="controls_"] .disabled,
#controls .disabled, #controls1 .disabled {
    color: gray;
}
div[id^="controls_"] .page,
#controls .page, #controls1 .page {
    padding: 5px;
    color: gray;
}

.group-nav-arrows div[id^="controls_"] div.prev,
.group-nav-arrows div[id^="controls_"] div.next {
    display: inline-block;
    cursor:pointer;
}

.group-nav-arrows div[id^="controls_"] div.prev:before,
.group-nav-arrows div[id^="controls_"] div.next:before {
    font-family: FontAwesome;
    /*color: #bc1b0d;*/
    font-size: 24px;
    line-height: 24px;
    display: inline-block;
}
.group-nav-arrows div[id^="controls_"] div.prev:before {
        content: "\f0da";
        padding-right: 4px;
    }
.group-nav-arrows div[id^="controls_"] div.next:before {
    content: "\f0d9";
    padding-left: 4px;
}

    .group-nav-arrows div[id^="controls_"] div.prev.disabled,
    .group-nav-arrows div[id^="controls_"] div.next.disabled {
        border-color: #f7f7f7;
        pointer-events: none;
        cursor: default;
    }

        .group-nav-arrows div[id^="controls_"] div.prev.disabled:before,
        .group-nav-arrows div[id^="controls_"] div.next.disabled:before {
            color: #ededed;
        }


@media (max-width: 768px) {
    /*.scrollableStrip .SECont:first-child {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }*/
    .scrollableStrip .SECont .cItem.scrollEl {
        width: 100% !important;
    }
}



/****************************** special for image thumbnails **********************/

.group_imgThumbs {
    width: 460px;
    position: relative;
}

    .group_imgThumbs .group-nav-arrows {
        position: relative;
        right: initial;
        top: initial;
        left: initial;
    }

    .group_imgThumbs #controls_imgThumbs {
        display: table;
        width: 100%;
    }

#controls_imgThumbs div.prev,
#controls_imgThumbs div.next,
#controls_imgThumbs div.group-nav-content-container {
    display: table-cell !important;
    vertical-align: middle;
}
@media (max-width: 768px) {
    .group_imgThumbs {
        width: 100%;
    }
    #controls_imgThumbs div.prev,
    #controls_imgThumbs div.next {
        display: none !important;
    }
}

.group_imgThumbs .group-nav-content-container {
    height: 80px;
}

#myScroll_imgThumbs .SECont .scrollEl {
    float: left;
    border: solid 1px #e5e5e5;
}

    #myScroll_imgThumbs .SECont .scrollEl a img {
        width: 75px;
        height: 75px;
    }

.group_imgThumbs .group-nav-arrows div[id^="controls_"] div.prev:before,
.group_imgThumbs .group-nav-arrows div[id^="controls_"] div.next:before {
    font-size: 20px;
    line-height: 20px;
}

.group_imgThumbs .group-nav-arrows div[id^="controls_"] div.prev:before {
    content: "\f137";
    padding-right: 4px;
}

.group_imgThumbs .group-nav-arrows div[id^="controls_"] div.next:before {
    content: "\f138";
    padding-left: 4px;
}
