/*
=Timeline (main)
------------------------------------------------------ */
#timelinea {
	position:relative;
	width: 730px; height: 513px; /* NEW */  /* NEW +75px +18 */
	border: 3px double  #ccc; /* this is the border. should have the same value for the links */
	margin-bottom:40px;
	cursor:pointer; /* Change main cursor to pointer */
}
#timelinea h1 {
	color:#828282;
	font-size:14px; font-weight:bold;
	margin-top:1px;
	padding-left: 280px; /*  moving the text in from the left - if possible.. /TORK*/
}

div.yslider-viewer { /* This is the viewing window */
    position: relative;
    margin: auto;
    height: 513px; width: 100%; /* NEW */ /* NEW +75px+18 */
    clear: both;
    overflow:hidden; /* comment for debug */
	cursor:pointer; /* Change main cursor to pointer */
}

div.yslider-viewer div.yslider-container { 
	background:url('/css/img/timeline_bg_new.jpg') repeat-x;	   /* NEW */
	position: relative;
	left: 0; top: 0;
	padding-left:30px;
	height:100%;
	cursor:pointer; /* Change main cursor to pointer */
}

/*
=Timeline (Panel)
------------------------------------------------------ */

div.panelwrapper { /*position:relative; sword overflow bug*/ display:none; cursor:pointer; /* Change main cursor to pointer */}
div.panelwrapper div.era { 
	/*position:absolute;  sword overflow bug*	*/
	margin-top:15px;
	left:0; 
	min-height:0; 
	text-align:left; 
		cursor:pointer; /* Change main cursor to pointer */
}
div.panelwrapper div.sword { 
	position:static; 
	clear:both; 
	margin-left:0; 
	min-height:0; 
	cursor:pointer; /* Change main cursor to pointer */
}
div.panelwrapper h1 { padding-bottom:2px; }

div.yslider-viewer div.yslider-container div.yslider-panel { 
	background:none;
	float:left; /* Each panel is arranged end-to-end */
	height: 100%;
	/*position: relative;  sword overflow bug*/
	text-align:left; /* moved from center to left. Added also padding, to puish it 300px in /TORK */
	cursor:pointer; /* Change main cursor to pointer */
}
div.yslider-viewer div.yslider-container div.yslider-panel div.yslider-panelwrapper { 
	background:none;
	height:475px;  /* NEW */ /* NEW +75px+18 */
	text-align: left;
	padding:10px;
	cursor:pointer; /* Change main cursor to pointer */
}

/*
=Timeline (Navigation)
------------------------------------------------------ */

div.yslider-nav { /* This is the div to hold your nav (the UL generated at run time) */
	position:absolute;
	margin: auto;
	top:515px; left:-3px; /* NEW */ /* NEW +75px+18 */
	bottom:0;
	width:100.6%; height:30px;
	border:1px solid #B2B2B2;
	background:#fff url('/css/img/sortbg.gif') bottom repeat-x;	
}
div.yslider-nav ul { /* The auto-generated set of links */
    list-style: none;
    margin: 7px 0 0 0; padding: 0;/* RESET */ 
}
div.yslider-nav ul li {
    float: left;
    margin-right: 0px; /* If you change this, be sure to adjust the initial value of navWidth in slideviewer.js */
    list-style-type:none;
	border-right:1px solid #DEDEDE;
}
div.yslider-nav a { /* The nav links */
	color:#666666;
	text-decoration:none;
	padding-right:15px;
}
div.yslider-nav a:hover { }
div.yslider-nav a.current { font-weight:bold; }
div.yslider-navl, div.yslider-navr { /* The left and right arrows */
    position: absolute;
    top: 0px;
    text-indent: -9000em;
}
div.yslider-navl a, div.yslider-navr a {
    display: block;
    height: 513px; width: 19px; /* NEW */ /* NEW +75px+18 */
}
div.yslider-navl { left: 0; }
div.yslider-navr { right: 0; }
div.yslider-navl { background: url("/css/img/timenav_left_new.gif") no-repeat center; }  /* NEW */
div.yslider-navr { background: url("/css/img/timenav_right_new.gif") no-repeat center; }  /* NEW */

.ui-slider { 
	position: relative;
	background-repeat: no-repeat;  background-position: center center; 
	margin-left:17px;	margin-top:-17px;
	width: 693px; height:15px; 
	border:1px solid #DEDEDE;	
 }
.ui-slider-handle { 
	position: absolute; 
	z-index:0; 
	height: 513px; width: 13px; /* NEW */  /* NEW +75px +18*/
	bottom:0; left: 0px; 
	background: url('/css/img/time_slider_handle_new.png') no-repeat; 
	outline-style:none; 
	cursor:w-resize; 
}

/* TROPPO SECCO: div.yslider-wrap *{margin: 0; padding: 0;} */
a:focus { outline:none }



/*
=Timeline (Swords)
------------------------------------------------------ */

#timelinea .sword .timehandle { 
	display:block; 
	width:1px; height:3px; 
	background:url('/css/img/time_handle.gif') center no-repeat; 
}
#timelinea .sword a.trigger { display:block; }
#timelinea .sword { 
	position:relative; /* sword overflow bug*/
	margin-top:5px;  /*  NEW from 6  */
	background:#fff url('/css/img/sword_bg.jpg') repeat-x right center; 
	height:3px;
	font-size:3px; 
}

#timelinea .sword .point { 
	display:block; 
	width:20px; height:3px; 
	font-size:1px; 
	background:#fff url('/css/img/d_sword.gif') repeat-x; 
	cursor:pointer; 
	border:1px solid #999; 
}

#timelinea #roman .sword .point { background:#fff url('/css/img/sword.gif') repeat-x; } 
#timelinea #migration .sword .point { background:#fff url('/css/img/m_sword.gif') repeat-x; } 
#timelinea #viking .sword .point { background:#fff url('/css/img/v_sword.gif') repeat-x;  } 
#timelinea #medieval .sword .point { background:#fff url('/css/img/me_sword.gif') repeat-x;  }
#timelinea #renaissance .sword .point { background:#fff url('/css/img/sword.gif') repeat-x;  } 


/*
=Timeline (Timeline popups)
------------------------------------------------------ */

.popBox { 
	position:absolute;
	border:1px solid #999;
	width:270px; height:230px;
	background:#fff url('/css/img/sortbg.gif') bottom repeat-x;
	z-index: 1000;
	display:none;
	cursor:auto;
}
.popBox .popContent { 
	font-size:12px; 
	padding:10px;
}
.popBox .popContent p { font-size:11px; margin-top:-15px;}
.popBox h2.popTitle { float:left; }
.popBox span.popTime { 
	color:#666; 
	float:right;
	padding-right:22px;
}
.popBox div.popImage { 
	clear:both; 
	padding-bottom:5px;
}
.popBox div.popLinks { 
	position:absolute; 
	bottom:10px; 
}
.popBox div.popLinks a { display:inline;}
.popBox div.popClose { 
	background:transparent url('../js/fancybox/fancy_closebox.png') repeat scroll 0;
	cursor:pointer;
	height:30px;
	position:absolute;
	/*right:-12px;*/
	/*top:-12px;*/
	right:-1px;
	top:-1px;
	width:30px;
	z-index:99999;
}