/* Arkestra image plugin */

/* remember that many images will be in an <a> that is *not* a link */


/* ================ all images =============== */

.imageset.image a, .imageset .image a  {
    position: relative; /* for any absolutely-positioned elements inside */
    display: block;
}

/* ================ all single imagesets =============== */

/*  span.imageset.image
        a
            img.plugin
            span.image-title.text
            span.image-description.text
            span.link-title.text
            span.link-description.text
            span.more-information
                span.hide
            span.link-arrow (if no span.more-information)
*/

span.imageset.image {
    display: inline-block; /* because otherwise a block, that could get too wide */
}

/* ================ all multiple imagesets =============== */

/*  ul.imageset
        li.image[.link]
            a
                img.plugin
                span.image-title.text
                span.image-description.text
                span.link-title.text
                span.link-description.text
                span.more-information
                    span.hide
                span.link-arrow (if no span.more-information)
*/

ul.imageset {padding: 0; margin: 0;}

/* ================ all items in multiple image sets =============== */

ul.imageset li.image {
    display: inline-block;
    vertical-align: top;
    /* these are default padding/margin values - Arkestra can overwrite them in
    multiple.html and lightbox.html */
    padding: 10px 0;
    margin-right: 20px;
    margin-left: 0;
}

ul.imageset li.image.lastinrow {
    /* no margin needed; it has nothing on its right */
    margin-right: 0;
    }

ul.imageset li.image a {
    vertical-align: middle;
    }

/* applies to items inside lightboxes too, so no ul selector */
.imageset .image img { /* center images within their block anchor containers */
    margin-left: auto;
    margin-right: auto;
    display: block;  /* the image inside is a block, so we don't get text lines */

    }

/* ================ when images are links =============== */

.imageset a:link,
.imageset a:visited,
.imageset a:link:hover,
.imageset a:visited:hover  {
    color: black;
    text-decoration: none;
    font-weight: 300;
}


/* ================ when images have text =============== */

/* all text items */

.imageset span {
    text-align: left;
}

/* all text on imageset items is in a block element */
.imageset .text {
    display: block;
    padding: 0;
    margin: 0;
    zoom: 1;
}


.imageset .link-title {
    font-weight: bold;
}

.imageset .link-description {
    font-weight: lighter;
    }

.imageset a:link:hover .image-title {
    background: rgba(255,255,255,.9);
    }


/* ================ READ MORE buttons =============== */

.imageset a:link .more-information,
.imageset a:visited .more-information,
.imageset a:hover .more-information  {
    text-transform:uppercase;
    font-size: 80%;
    padding: 1px 3px;
    border-radius: 3px;
    text-decoration: none;
    /* default colours white on black; sliders for example are reversed */
    border: 1px solid black;
    color: white;
    background: black;
    }

.imageset a:hover .more-information {
    color: black;
    background: rgba(255,255,255,.7);
}

/* ================ link arrow icons =============== */
.imageset a:link .link-arrow,
.imageset a:visited .link-arrow {
    background: url(/static/arkestra/images/default_styles/image-link-arrow.png) no-repeat;
    width: 20px;
    height: 20px;
    display: block;
    position: absolute;
    right: -4px;
    bottom: -4px;
}

.imageset a:link:hover .link-arrow,
.imageset a:visited:hover .link-arrow {
    background: url(/static/arkestra/images/default_styles/image-link-arrow-reversed.png) no-repeat;
}


/* SemanticEditor class required: no-image-link-arrows */

.no-image-link-arrows .imageset a:link .link-arrow {
    background-image: none;
    }

/* ================ lightboxes =============== */

/*  div#fancybox-content
        div - created by fancybox style="width:auto;height:auto;overflow: auto;position: static;" - needs to be amended in fancybox
            div.imageset.imageset-item
                span.imageset-item-data.image-title.text
                span.imageset-item-data.image-caption.text
                img
                div
                    span.link-title.text
                    span.link-description.text
                    a
                        span.more-information.text */

div#fancybox-content { /* lightbox border and background */
    border: 10px solid black;  /* we ought to get rid of the ones on the element */
    z-index: auto;             /* z-index: auto and position: static required to get IE7 to work properly */
    position: static;
    }

div.imageset.imageset-item  {
}

div#fancybox-content span.image-title,
div#fancybox-content span.image-caption {
    position: relative;   /* override the usual absolute positioning; static's no good because of IE7  */
    z-index: 1103;       /* higher than the 1102 of the left/right anchors */
    padding: 2px 0;
    color: white;
    background: black;
}

div#fancybox-content img {
    display: block;     /* if inline, would expose empty line background  */
    }

div#fancybox-content div.link-information {
    position: relative;       /* z-index: auto and position: relative required to get IE7 to work properly */
    z-index: 1103;            /* higher than the 1102 of the left/right anchors */
    color: black;
    background: white;
    padding: 4px 10px;
    display: block;
    }

div#fancybox-content div.link-information span.link-title,
div#fancybox-content div.link-information span.link-description {
    margin-bottom: 6px;
}

div#fancybox-content a .more-information {
    font-size: 75%;
    }

/* stop the left/right links from covering the border */

a#fancybox-left {
    margin-left: 10px;
}

a#fancybox-right {
    margin-right: 10px;
}

/* ================ images more generally =============== */

/* images as used in news plugins etc are usually floated right */

img.left    {float: left; margin-right: 1em; margin-bottom: .5em;}
img.right   {float: right; margin-left: 1em; margin-bottom: .5em;}

/* image plugin - an image will be inside a span.image, along with its span.image-caption */

a img {border: none;}

span.image {display: block; clear: both;}
span.image span.image-caption {display: block;}

/* styles available to the presentation editor */

/* images: float left/right - left/right floats can be applied either directly to image plugins or their containers */

.images-left span.image,
span.image.left {
    float: left;
    margin-right: 5px;
    clear: none;
    }

.images-right span.image,
span.image.right {
    float: right;
    margin-left: 5px;
    clear: none;
    }

/* images: have borders - appplied to the elements containing images/carousels

it's a bit awkward when non-floated images can have borders, because then the border area is the width of the containing element, which can be rather wide*/

.image-borders span.image,
.image-borders div.anythingSlider {
    background: #efefef;
    padding: 7px;
    border: 1px solid #888;
    margin-bottom: 5px;
    }

.image-borders div.anythingSlider-minimalist-square {
    background: #efefef;
    padding: 7px;
    border: 1px solid #888;
    margin-bottom: 37px;
    }

.image-borders div.anythingSlider-minimalist-square .anythingControls ul.thumbNav {
    margin-top: 12px;
}

.image-borders div.carousel-envelope
  {
    background: #efefef;
    padding: 4px 7px;
    border: 1px solid #888;
    }