/* styling for the image wrapper  */
#image_wrap {
    /* dimensions */
    width:657px;
    margin:15px 0 15px 38px;
    padding:15px 0;

    /* centered */
    text-align:center;

    /* some "skinning" */
    background-color:#efefef;
    border:2px solid #fff;
    outline:1px solid #ddd;
    -moz-ouline-radius:4px;
}


/*
    root element for the scrollable.
    when scrolling occurs this element stays still.
*/
.scrollable {
    float:left; 
    
    /* required settings */
    position:relative;
    overflow:hidden;
    width: 660px;
    height:120px;

    /* custom decorations */
    border:1px solid #ccc;
    background: #f7f7f7;
    background: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#eaeaea));
    background: -moz-linear-gradient(top,  #f7f7f7,  #eaeaea);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#eaeaea');
}

/*
    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 the width and height for the root element and
    not for this element.
*/
.scrollable .items {
    /* this cannot be too large */
    width:20000em;
    position:absolute;
    clear:both;
}

.items div {
    float:left;
    width:660px;
}

/* single scrollable item */
.scrollable img {
    float:left;
    margin:20px 6px 20px 17px;
    background-color:#fff;
    padding:2px;
    border:1px solid #ccc;
    width:100px;
    height:75px;
    
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    -khtml-border-radius:4px;
    border-radius:4px;
}

/* active item */
.scrollable .active {
    border:1px solid #000;
    position:relative;
    cursor:default;
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
    display:block;
    width:30px;
    line-height:30px;
    height:30px;
    padding: 0;
    float:left;
    margin:40px 5px;
    cursor:pointer;
    font-size:14px;
}

/* right */
a.right                 { clear:right; margin-right: 0px;}


/* left */
a.left                { margin-left: 0px; } 

/* disabled navigational button */
a.disabled, a.disabled:hover, a.disabled:active {
    background: #fefefe;
    cursor: normal;
}     


/* the overlayed element */
.apple_overlay {
    
    /* initially overlay is hidden */
    display:none;
    
    /* growing background image */
    background-image:url(../images/overlay/white.png);
    
    /* 
        width after the growing animation finishes
        height is automatically calculated
    */
    width:640px;        
    
    /* some padding to layout nested elements nicely  */
    padding:35px;

    /* a little styling */    
    font-size:11px;
}

/* default close button positioned on upper right corner */
.apple_overlay .close {
    background-image:url(../images/overlay/close.png);
    position:absolute; right:10px; top:10px;
    cursor:pointer;
    height:35px;
    width:35px;
}

.apple_overlay.black {
    background-image:url(../images/overlay/transparent.png);        
    color:#fff;
}


/* Splitter (Filter and Sorter)
---------------------------------------------------------------------- */
.splitter {
	padding-top: 12px;
	font-size: 12px;
	float:right;
}

.splitter:after {
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
}

.splitter ul {
  margin-right: 0;
  margin-top: 0;
}

.splitter > li {
  padding-left: 8px;
}

.splitter > li ul {
	margin-left: 8px;
	padding-left:0;
	background:#f5f5f5;
	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fcfcfc',endColorstr='#ececec');
	background:-webkit-gradient(linear,0% 0,0% 100%,from(#fcfcfc),to(#e8e8e8));
	background:-moz-linear-gradient(270deg,#fcfcfc,#ececec);border-color:#eee;
	border:1px solid #e9e9e9;border-bottom-color:#f5f5f5;-webkit-border-radius:5px;
	-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.2);
	-moz-box-shadow:0 1px 1px rgba(0,0,0,0.2);box-shadow:0 1px 1px rgba(0,0,0,0.2);
}

.splitter ul li a {
  border-bottom: 0;
  position: static;
}

.splitter li,
.splitter ul,
.splitter ul li a  {
  display: inline;
  display: inline-block;
  line-height: 1;
}

.splitter ul,
.splitter ul li,
.splitter ul li a {
  
}

.splitter ul {
  background-position: 0 -138px;
  background-repeat: repeat-x;
}

.splitter ul li {
	margin-left: 1px;
	border-right: 1px solid #DDDDDD
}

.splitter ul li:first-child {
  margin-left: 0;
}
.splitter ul li:last-child {
	border-right:none;
}
.splitter ul li a {
  padding: 5px 8px 6px;
  color: #070708;
  text-shadow: rgba(255, 255, 255, 0.1) 0 1px 0;
  text-decoration: none;
}

.splitter ul li.segment-0,
.splitter ul li.segment-2 {
  background-position: -3px -92px;
}

.splitter ul li.segment-1 {
  background-position: 0 -92px;
}

.splitter ul li.segment-0 a,
.splitter ul li.segment-1 a {
  background-position: 0 -161px;
}

.splitter ul li.segment-2 a {
  background-position: 100% -115px;
}

.splitter ul li.selected-0 a,
.splitter ul li.selected-1 a,
.splitter ul li.selected-2 a,
.splitter ul li.selected-3 a {
  color: #4183C4;
  text-shadow: rgba(0, 0, 0, 0.25) 0 1px 0;
}

.splitter ul li.selected-0,
.splitter ul li.selected-2 {
  background-position: 0 -23px;
}

.splitter ul li.selected-0 a,
.splitter ul li.selected-1 a {
  background-position: 100% -46px;
}

.splitter ul li.selected-1 {
  background-position: 0 0;
}

.splitter ul li.selected-2 a {
  background-position: 100% -69px;
}

/* Splitter Image Grid
---------------------------------------------------------------------- */

.image-grid:after {
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
}

.image-grid li {
  width: 128px;
  margin: 20px 0 0 35px;
  float: left;
  text-align: center;
  font-family: "Helvetica Neue", sans-serif;
  line-height: 17px;
  color: #686f74;
  height: 177px;
  overflow: hidden;
}

.image-grid li img,
.image-grid li strong {
  display: block;
}

.image-grid li strong {
  color: #4183C4;
}