﻿/* TimeLIne Control Styling */
.timeline {font-size:14px;overflow:hidden;clear:both;}
.timeline a{text-decoration:none;text-transform:capitalize;}
.timeline .top
{
    background:transparent url(../images/TimeLineTop.gif) no-repeat top left;
    height:32px;
    width:524px;
}
.timeline .top a{height:24px;color:#a00;font-size:1.2em;line-height:24px;text-transform:capitalize}
.timeline .top .prev{background:transparent url(../images/LeftArrow.gif) no-repeat center left;float:left;padding-left:30px}
.timeline .top .next{background:transparent url(../images/RightArrow.gif) no-repeat center right;float:right;padding-right:30px}
.timeline .footer
{
    background:transparent url(../images/TimeLineBottom.gif) no-repeat top left;
    height:10px;
    width:524px;
    margin-bottom:10px;
    }
.timeline .content
{
    background:#640E17 url(../images/TimeLineFill.png) repeat-y top left;
    padding:15px 15px 0 15px;
    width:494px;
    width:524px;
    vertical-align:top;
   }

.timeline .content .scrollable a.selected
{
    background:#600;
    }
.timeline .content .scrollable a .wrap, .timeline .panes a .wrap{height:80px;overflow:hidden;display:block;}
.timeline .content a .date{font-size:.7em}
.timeline .ruler
{
    clear:both;
    background:#640E17 url(../images/TimeLineFill.png) repeat-y top left;
    width:514px;
    width:524px;
    padding:5px 5px 4px 5px;
    }
.timeline .ruler a
{
    width:43px;background:transparent url(../images/TimeRule.gif) no-repeat top center;
    color:#fff;
    display:inline;
    display:inline-block;
    padding:16px 0 10px 0;
    margin:0;
    text-align:center;
}
.timeline .ruler a.current, .timeline .ruler a.current:hover
{
    background:transparent url(../images/TimeRuleSelect.gif) no-repeat top center;
}
.timeline .ruler a:hover
{
    background:transparent url(../images/TimeRuleHover.png) no-repeat top center;
    color:#eee;
}

   
/* root element for tabs  */
ul.tabs {  
	padding:0;
    clear:both;
    margin:6px 0;
    float:left;
}

/* single tab */
ul.tabs li {  
	float:left;	 
	padding:0; 
	margin:0;  
	list-style-type:none;	
}

/* link inside the tab. uses a background image */
ul.tabs a { 
	float:left;
	display:block;
	text-decoration:none;
	margin-right:2px;
	position:relative;
}

ul.tabs a:hover {
	background-color:#F7F7F7;
	color:#333;
}
	
/* selected tab */
ul.tabs a.current {
	color:#000;	
	cursor:default;
}

/* tab pane */
.timeline .content .scrollable a
{
    vertical-align:top;
    display:inline;
    display:inline-block;
    text-decoration:none;
    text-align:center;
    color:#fff;
    width:120px;
    overflow:hidden;
    padding:4px 0;
    text-transform:capitalize;
}

/* TimeLine results control */
.tResults .panes a{color:#000;text-transform:capitalize;}
.tResults .panes div{height:404px;overflow:hidden;/*padding:5px;border:dashed 1px #ddd;*/clear:both;}
.tResults .panes .Images{background:url(../images/imagesbar.png) no-repeat top; /*padding-top:28px; border-top:none;*/}
.tResults .panes .Audio{background:url(../images/audiobar.png) no-repeat top; /*padding-top:28px; border-top:none;*/}
.tResults .panes .Video{background:url(../images/videosbar.png) no-repeat top; /*padding-top:28px; border-top:none;*/}
.tResults .panes .Written{background:url(../images/writtenbar.png) no-repeat top; /*padding-top:28px; border-top:none;*/}
.tResults .panes .All{background:url(../images/allbar.png) no-repeat top; /*padding-top:28px; border-top:none;*/}
.tResults .panes .Audio .Audio, .tResults .panes .All .Audio{background:none}

/* tabs without any items */
div.tResults ul.tabs li a.empty {opacity:.3;filter:alpha(opacity=30);}

.panes .Images .Copy,
.panes .Audio .Copy,
.panes .Video .Copy,
.panes .Written .Copy,
.panes .All .Copy{padding:0; clear:both; height:365px; margin:28px 0 0 0; overflow:auto; width:520px; border:dashed 1px #ddd; border-top:none;position:relative;}

.tResults .panes div .TimeWrap
{
    padding:0px;
    font-size:13px;
    text-align:center;
    float:left; 
    clear:none;
    overflow:hidden; 
    margin:4px 2px; 
    width:120px; 
    height:120px; 
    max-height:120px; 
    background: url(../images/imagebase.png) no-repeat left bottom;
    position:relative;
   }
.tResults .panes div .TimeWrap img{width:120px;margin:0;padding:0;z-index:-1;position:relative}
.tResults .panes div .TimeWrap a{text-decoration:none;color:#fff; font-size:12px;display:block;zoom:1;z-index:10;cursor:pointer;position:relative;}
.tResults .panes div .TimeWrap a b{color:#fff;font-weight:normal;display:block;height:15px;overflow:hidden;padding:3px 5px;}
.tResults .panes div .TimeWrap a .date{font-size:10px;padding:0 5px;display:block}
.tResults .panes div .TimeWrap a span.wrap
{
    background:#333;overflow:hidden;width:120px;height:85px;display:block;
    /* if we don;t set this back in the index and relative it sits above the link in IE7. grrr */
    position:relative;
    z-index:-1;
    zoom:1;
}
.tResults .panes div .TimeWrap a:hover{*text-decoration:underline}
.tResults .panes div .TimeWrap span.audio img{width:auto}


.tResults .panes div.Audio span,
.tResults .panes div.Written span
    {height:auto;display:block;}
.tResults .panes div.Audio div.Copy,
.tResults .panes div.Written div.Copy
    {height:365px;}/* have to reset this as we've just cancelled it*/
.tResults .panes div.Audio div.head,
.tResults .panes div.Written div.head
    {height:30px;overflow:hidden;vertical-align:top;padding:3px;margin:3px 0 6px 0;float:left;clear:both;}
.tResults .panes div.Audio div.head div,
 .tResults .panes div.Written div.head div
{
    line-height:30px;
    border-top:dashed 1px #aaa;
    border-bottom:dashed 1px #aaa;
    display:block;
    color:#600;
    font-weight:normal;
    font-size:16px;
    height:30px;
    padding-left:1em;
    width:410px;
    float:left;
    clear:none;
}
.tResults .panes div.Audio div.head img,
.tResults .panes div.Written div.head img   
    {vertical-align:top;margin-right:10px;float:left;clear:none}
.tResults .panes div.Audio div.head div span.date,
.tResults .panes div.Written div span.date
    {color:#888;padding-left:10px;font-size:1em;display:inline;}
.tResults .panes div.Audio span.audio span
    {clear:left;background:#fff url(../images/AudioListBack.png) no-repeat left center;padding-left:40px;height:30px;line-height:30px}
.tResults .panes div.Audio div.Copy a.download{display:none}

.tResults .panes div.Written span.doc {background:#fff url(../images/WrittenListBack.png) no-repeat left center;padding-left:40px;height:30px;line-height:30px;display:block;clear:left;}
.tResults .panes div.Written span.doc span{line-height:30px}
.tResults .panes div.Written div.Copy a.download{display:block;float:right;margin-right:30px;text-decoration:underline;line-height:30px;clear:none;margin-top:-30px;}

/* you may want to setup some decorations to active item */ 
div.items div.active { 
    border:1px inset #ccc; 
    background-color:#fff; 
}

/* 
    root element for the scrollable. 
    when scrolling occurs this element stays still. 
*/ 
div.scrollable { 
 
    /* required settings */ 
    position:relative; 
    overflow:hidden; 
    width: 480px; 
    height:150px; 
} 
 
/* 
    root element for scrollable items. Must be absolutely positioned 
    and it should have a super 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 on horizontal scrolling 
    typically this element is the one that *you* will style 
    the most. 
*/ 
div.scrollable div.items a { 
    float:left; 
} 
 
/* Memory Items */
div.memory {border-bottom:solid 1px #eee;margin-bottom:.5em;padding-bottom:.5em}
div.memory table.production {color:#000;float:left;border-collapse:collapse;margin-bottom:1em;}
div.memory table.production tr td{padding:3px 0}
div.memory table.production tr td.ie{width:120px;font-weight:bold;}

.memory .media .file {clear:both;margin:4px 0;background:#ddd;float:left;width:520px;padding:4px}
.memory .media .file a.download{display:block;float:right;margin-right:30px;text-decoration:underline;clear:none}

.RelatedTags {clear:both;margin:10px 0;display:block;}
.RelatedTags ul{display:inline;}
.RelatedTags ul li {display:inline;padding-right:.5em;}

/* a.vid{width:500px;height:400px;} */

