/* VIEWLET */

/* root element for the scrollable.
 * when scrolling occurs this element stays still. */
.collective.carousel {
	position: relative;
	z-index: 0;
    padding: 0;
    margin: 1em auto;
    width: 100%;
    height: 200px;
}

div.scrollable {
    /* required settings */
    position:relative;
    z-index: 1;
    overflow:hidden;
    width: 100%;
    height:200px;
}

/* root element for scrollable items. Must be absolutely positioned
   and it should have a extremely large width to accomodate scrollable items.
   it's enough that you set width and height for the root element and
   not for this element. */
div.scrollable div.items {
    /* this cannot be too large */
    width:20000em;
    position:absolute;
}

/* a single item. must be floated in horizontal scrolling.
    typically, this element is the one that *you* will style
    the most. */
.scrollable .items .tileItem {
    float:left;
    border: none;
    padding: 0;
    margin: 0;
}

/* Visual padding for a single item in a carousel.
 * It's better to keep the padding here than on .tileItem to avoid messing up
 * the width of an item. */
div.scrollable div.items div.itemPadding {
    position: relative;
    margin: 1.5em 1em 2.2em;
}

/* To make images sit within the carousel's boundaries no matter what */
.collective.carousel img {
    max-width: 100%;
}


/* NAVIGATION BUTTONS */

/* prev, next, prevPage and nextPage buttons */
.collective.carousel:hover a.browse {
    display: block;
}
a.browse {
    display: none;
	position: absolute;
	z-index: 2;
	bottom: 0;
    width:25%;
    height:100%;
    margin: 0;
    cursor:pointer;
}
a.prev {
	left: 0;
}
a.next {
	right: 0;
}
a.browse span {
    position:absolute;
    top: 50%;
    margin-top: -10px;
    display: block;
    width: 13px;
    height: 20px;
    border-radius: 20px;
    color: transparent;
    background-color: #222;
    font-size: 1.4em;
    font-weight: bold;
    padding: 0 0 0 7px
}
a.browse:hover span {
    background-color:lightgrey;
}
a.browse:hover span:before {
    color:#222;
}
a.prev span {
    left: 1.5em;
}
a.next span {
    right: 1.5em;
}
a.prev span:before {
    color: lightgrey;
    content: '\2039';
}
a.next span:before {
    color: lightgrey;
    content: '\203a';
}

/* disabled navigational button */
a.disabled {
    visibility:hidden !important;
}


/* NAVIGATION BAR */

div.navi {
    height:38px;
    text-align: center;
    clear: left;
    /* 38px is the height of the whole navigation bar, including arrows.
     * Adjust this to your need. */
    margin-top: -38px;
    margin-left: 38px;
    margin-right: 38px;
    position: relative;
    z-index: 2;
}
div.navi a {
    height:7px;
    margin:14px 3px 3px;
    width:7px;
    border: 1px solid grey;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background: white;
    display:inline-block;
    font-size:1px;
}
div.navi a:hover {
    border-color: #222;
    background: #222;
    cursor: pointer;
}
div.navi a.active {
    border-color: #222;
    background: #222;
}


/* TOOLBAR */
div.toolBar {
	position: absolute;
	right: 0;
	top:0;
	z-index: 2;
    text-align: right;
    height:2em;
    width: auto;
    padding: 0 0.5em;
    line-height: 2em;
    background-color: #fff; /* for those browsers that don't yet support CSS3
                             *  rgba colors */
	background-color: rgba(256, 256, 256, 0.8); /* CSS3 rgba */
}
.hideTools .toolBar {
    display: none;
}


/* PORTLET */

.portletCarouselWrapper {
	border: none;
}
.portletCarouselWrapper .collective.carousel {
    width: 100%;
    padding: 0;
    margin-bottom: 0;
}

.portletCarouselWrapper div.scrollable {
    width: 100%;
}
