/* 
    root element for the scrollable. 
    when scrolling occurs this element stays still. 
*/ 
div.scrollable { 
 
    /* required settings */ 
    position:relative; 
    overflow:hidden; 
    width: 727px; 
    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. 
*/ 
div.scrollable div.items div { 
    float:left;
    height: 200px;
	margin-left:10px;
	margin-right:23px;
} 

div.scrollable div.items img {
	padding: 5px;
	background-color: white;
	margin: 10px;
	margin-bottom: 3px;
	 
    -moz-box-shadow:0 0 7px 5px #666; 
    -webkit-box-shadow: 0 0 7px #666;
}

div.scrollable div.items div div.speaker_name {
float:none;
text-align:center;
margin:0;
}

div.scrollable div.items div div.speaker_name a {
color:#bbb;
font-family: Helvetica, arial;
font-size: 14px;
}

div.scrollable div.items div div.speaker_name a:hover {
color:white;
text-decoration:none;
}
 
/* you may want to setup some decorations to active the item */ 
div.items div.active { 

}

/*BUTTONS*/

/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	background:url(../img/plus_minus.png) no-repeat;
	display:block;
	width:50px;
	height:50px;
	float:left;
	cursor:pointer;
	font-size:1px;
}

/* right */
a.right
{ 
	background-position: 0 0px; 
	clear:right; 
	margin-right: 0px;
	position: relative;
	left: 63px;
	top: 50px;
}



/* left */
a.left
{ 
	margin-left: 0px;
	background-position: 0 -50px;
	position: relative;
	left: -50px;
	top: 50px;
} 


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



/* position and dimensions of the navigator */ 
.navi { 
    width:200px; 
    height:20px; 
} 
 
 
/* items inside navigator */ 
.navi a { 
    width:8px; 
    height:8px; 
    float:left; 
    margin:3px; 
    background:url(../img/nav/navigator.png) 0 -16px no-repeat; 
    display:block; 
    font-size:1px; 
} 
 
/* mouseover state */ 
.navi a:hover { 
    background-position:0 -8px;       
} 
 
/* active state (current page state) */ 
.navi a.active { 
    background-position:0 0px;      
}



/*overlay stuff*/



/* the overlayed element */ 
.speaker_info{ 
     
   /* must be initially hidden */ 
    display:none; 
     
    /* place overlay on top of other elements */ 
    z-index:10000; 
     
    /* styling */ 
    background-color:#dfdfdf; 

    width:750px;     
    min-height:200px; 
    padding:15px;
     
    /* CSS3 styling for latest browsers */ 
    -moz-box-shadow:0 0 25px 1px #000; 
    -webkit-box-shadow: 0 0 25px #000;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;   
} 

.speaker_info_left{
float:left;
margin: 0 15px 0 0;
width:125px;
font-family: Helvetica, arial;
font-size: 10px;
}
.speaker_info_right{
float:left;
width:610px;
}

.speaker_info_left img {
margin-bottom:5px;
}

.speaker_info .speaker_info_left p {
margin:0;
padding:0;
margin-top: 2px;
margin-left: 2px;
}

.speaker_info a{
color: #1D7FC6;	


}

.speaker_info h3 {
color: #333;
text-transform:none;
font-size: 24px;
font-weight:bold;
margin: 0 0 5px 0;
}

.speaker_info h4 {
color: #f26522;
text-transform:uppercase;
font-size:10px;
margin-bottom:5px;
}

.speaker_info p {
color: #666;
margin: 0;
margin-bottom: 10px;
padding: 0;
line-height: 1.3em;
}
 
/* close button positioned on upper right corner */ 
.speaker_info .close { 
    background-image:url(../img/nav/close.png); 
    position:absolute; 
    right:-15px; 
    top:-15px; 
    cursor:pointer; 
    height:35px; 
    width:35px; 
}

.speaker-thumb 
{
	cursor:pointer;
}

.speaker-thumb-audio
{
	cursor:pointer;
	float:left;
	padding-right:12px;
}

.audio_icon
{
	background-image:url(../img/audio_icon.png);
	background-repeat:no-repeat;
	width:12px;
	height:12px;
	padding:0px;
	margin:0px 0px 0px 25px;
	margin-left:25px;
}