/*
  root element for the scrollable.
  when scrolling occurs this element stays still.
*/
.scrollable {

  /* required settings */
  position:relative; overflow:hidden; width: 700px; height:174px;

  /* custom decorations */
  border-top:20px solid #000; border-bottom:20px solid #000; }
#fashion-style-news { border:none; height:200px; }
#upcoming-races { border:none; height:274px; }
#upcoming-races-2 { border:none; height:32em; }
#upcoming-races-2 em { margin-right:20px; }
#news-ticker { width:100%; bottom:auto; border:none; height: 43px; }
/*
  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; }
/* #fashion-style-news .items, #upcoming-races .items { margin-top:1.75em; } */

.items div { float:left; width:700px; }
#news-ticker .items div { float: none; background:rgba(255,255,255,0.7); width:1060px; height:3.25em; overflow:hidden; }
.ie8 #news-ticker .items div, .ie7 #news-ticker .items { background:url('../img/img-1px-fff-trans70.png'); }


/* single scrollable item */
.scrollable img { float:left; margin:0 1px; background-color:#fff; padding:0px; width:173px; height:174px; }
#fashion-style-news img { float:none; margin:0; background:transparent; width:340px; height:200px; }
#upcoming-races img { /* width:340px; height:200px; */ width:auto; height:auto; }

/* active item */
.scrollable .active { position:relative; cursor:default; }

/* this makes it possible to add next button beside scrollable */
/*.scrollable { position:absolute; bottom:0; left:0; right:0; z-index:1; }*/

/* prev, next, prevPage and nextPage buttons */
a.browse { background:#000; color:#b3b3b3; display:block; width:20px; height:20px; float:left; margin:0; cursor:pointer; position:absolute; bottom:194px; left:0; z-index:2; line-height:20px; text-align:center; }
a.browse:hover, .listing a.browse:hover,
a.browse:active, .listing a.browse:active  { color:#ff3296; }
#upcoming-races-1 .bgcharcoal p { text-transform:uppercase; }
#upcoming-races-1 nav.view-more a:hover { color:#c8c8c8; }

/* right */
a.right         { left:20px; border-left:1px solid rgba(179,179,179,0.7); }
/* left */
a.left        { margin-left: 0px; } 

.bgpink a.browse { float:right; bottom:auto; top:4px; left:auto; right:4px; background:transparent; color:#fff; border:none; }
.bgpink a.left { right:24px; }

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

/* position and dimensions of the navigator */
.navi { height:20px; width:200px; line-height:20px; padding-left:6px;
  position:absolute; left:40px; bottom:194px; z-index:2; border-left:1px solid rgba(179,179,179,0.7); }

/* items inside navigator */
.navi a { width:8px; height:8px; float:left; margin:5px 3px; background:url('../img/navigator.png') 0 0 no-repeat; display:block; font-size:1px; }
.navi a:hover { background-position:center center; }
.navi a.active, .navi a:active { background-position:bottom center; }

#buttonContainer .navi a { background:url('../img/cycle-navigator.png') bottom center no-repeat; }
#buttonContainer .navi a:hover { background-position:center center; }
#buttonContainer .navi a.activeSlide, #buttonContainer .navi a:active { background-position:top center; }

#buttonContainer { background:#000; overflow:auto; }
#buttonContainer .navi { border:none; }
#buttonContainer .browse { bottom:auto; margin:0.5em 0; border:none; }
#buttonContainer .left { background:url('../img/cycle-left.gif') center center no-repeat; }
#buttonContainer .right { background:url('../img/cycle-right.gif') center center no-repeat; }
#buttonContainer .pause, #buttonContainer .play, #buttonContainer .pause-play { z-index:99999; }
#buttonContainer .pause { background:url('../img/cycle-pause.gif') center center no-repeat; left:40px; }
#buttonContainer .play { background:url('../img/cycle-play.gif') center center no-repeat; left:60px; }
#buttonContainer .pause-play { background:url('../img/cycle-pause.gif') center center no-repeat; left:40px; }

#last-feature-race-result .navi a,
#upcoming-feature-race .navi a { background-image:url('../img/navigator-silks.png'); }

.scrollable img { /* width:173px; */ margin:0px 1px; }
.gallery_overlay .scrollable img {  }

.scrollable img.hover { background-color:#123; }


/* Scrollable silks */
.silks { border-bottom:none; border-top-color:#e7e7e8; }
.silks img { width:auto; height:auto;float:none; background:transparent; margin:0 auto; }
.silks a { width:auto!important; display:inline-block; }
.silks .items { margin-top:1em; }
.silks .items .grid_2 { border-right:1px solid #7d7d7d!important;  }
.silks a.button { margin:0.5em 0 0; }
.silks .detail { margin-top:-0.75em; }

#upcoming-feature-race,
#last-feature-race-result { color:#737373; }
#upcoming-feature-race .browse,
#last-feature-race-result .browse,
#upcoming-feature-race .navi,
#last-feature-race-result .navi { top:0; background:#e7e7e8; color:#000; }

.watch-this-space { font-family: 'TheMix2i', Arial, sans-serif; font-weight: bold; color:#fff; background:#009077; font-size:1.5em; text-align:center; padding:1em 0; position:absolute; left:0; right:0; top:5em; z-index:9000; margin:0 -10px; 
  -moz-box-shadow:0 5px 10px 0px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.5); }
.watch-this-space em { color:#000; position:relative; float:none; text-align:center; font-style:normal; background:transparent!important; }