/* this makes it possible to add next button beside scrollable */
div.scrollable
{
    float: left;
    font-family: Arial, Helvetica, sans-serif;
}

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage
{
    background-position: url(../img/scrollable/left.gif) no-repeat;
    display: block;
    width: 18px;
    height: 18px;
    background: url(../img/scrollable/left.gif) no-repeat;
    float: left;
    margin: 43px 1px;
    cursor: pointer;
    font-size: 1px;
    font-family: Arial, Helvetica, sans-serif;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	background-position:0px -18px;		
}

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

/* next button uses another background image */
a.next, a.nextPage {
	background-image:url(../img/scrollable/right.gif);
	clear:right;	
}



/*********** navigator ***********/


/* position and dimensions of the navigator */
div.navi {
	margin-left:20px;
	width:749px;
	height:20px;
}


/* items inside navigator */
div.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(../img/scrollable/navigator.gif) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
div.navi a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
div.navi a.active {
	background-position:0 -16px;     
} 	


/* get rid of those system borders being generated for A tags */
a:active {
  outline:none;
}
 
:focus {
  -moz-outline-style:none;
}
/* root element for the whole scrollable setup */
div.scrollable {  
	position:relative;
	overflow:hidden;
	width: 753px;	 
	height:155px;
}
 
/* 
	root element for scrollable items. It is 
	absolutely positioned with large width. 
*/
#thumbs {	
	position:absolute;
	width:20000em;	
	clear:both;
	border:0px solid #222;
}
 
/* custom positioning for navigational links */
a.prev, a.next {
	margin-top:0px;	
}
 
/* single item */
#thumbs div.outter {
	float:left;
	width:377px;
	height:155px;
	border-left:0px solid #333;
	cursor:pointer;
}
 
/*                  Hotpick tiles                  */

div.hotpick_outter
{
    background-color: #212120;
    padding: 0px 0px 0px 0px;
    width: 100%;
}

div.hotpick_inner_home
{
    background-color:#212120;
}

div.hotpick_image_home
{
    float:left;
    width:100px;
    min-height:100px;
    height:100px;
    padding: 0px 0px 0px 0px;

}

div.hotpick_mainbody_home
{
    min-height:100px;
    height:100px;
    padding: 0px 2px 0px 5px;
    background-image: url('../img/fillers/hotpick100-filler.jpg');
    background-repeat:repeat-x;
    color:White;
    border-left: solid 1px #003A4E;
    border-top: solid 1px #003A4E;
 }
 
 div.hotpick_description_home
 {
  background-image: url('../img/fillers/hotpick22-filler.jpg');
  background-repeat :repeat;
  background-color: #212120;
  color: white;
  padding:  0px 0px 0px 5px;
  border-left: solid 1px #003A4E;
 }
 
 div.hotpick_buttons_home
 {
     padding: 2px 0px 0px 0px;
     width:100%;
     }
     
.buttonBluePlain
{ border-style: none;
        border-color: inherit;
        border-width: medium;
        width: 107px;
        height: 20px;
        text-align: center;
  background-image: url('../../img/buttons/DTButtonBlue-Plain.gif');
        background-color: transparent;
        font-size: small;
        font-family: Arial, Helvetica, sans-serif;
        color: white;
        font-weight: bold;
        cursor: pointer;
}

    /* use a semi-transparent image for the overlay */
#overlay {
	background-image:url(http://static.flowplayer.org/img/overlay/transparent.png);
	color:#efefef;
	height:450px;
}