/*
Theme Name:The Curator
Styling for the timeline
*/

/*---TIMELINE CONTROLS STUFF---*/
#controlsWrapper {
	font:normal 10px/40px sans-serif; 
	height:40px;  
	position:absolute; 
	bottom:0; 
	z-index:2000;
	box-shadow:0 0 1px rgba(0,0,0,.1);
 	left:0;
	right:0;
}
#controlsWrapper p {margin:0px 15px; font:normal 10px/40px sans-serif;}

/*---TIMELINE CONTAINERS---*/
#timelineWrapper {
	overflow:hidden; 
	position:absolute;
	left:0; 
	top:0;
	top:0px;
	right:0;
	bottom:0;
	z-index:1;
	height:400px;
	/* need to figure out height - should it be it fixed? */
}
#timeline {
	white-space:nowrap; 
	vertical-align:top; 
	position:absolute; 
	padding:30px 0 0 50px; 
	height:403px; /*HEIGHT OF ITEMS + SHADOW */
	top:50%;
	margin:-175px auto 0;
}

/*---LARGE LEFT RIGHT HOVERS---*/
.sidebar {width:49px; position:absolute; top:0; bottom:0; z-index:1000; display:none;}
.sidebar#left {left:0; cursor:url('images/cursors/arrow_left.png'),w-resize;}
.sidebar#right {right:0; cursor:url('images/cursors/arrow_right.png'),e-resize;}

/*---EVENT ITEMS---*/
.event {
	position:relative; 
	height:200px; 
	display:inline-block; 
	overflow:hidden; 
	vertical-align:top;	
	margin:0 60px 0 0;	
	-moz-box-shadow: 1px 0 15px 1px #adadad;
-webkit-box-shadow: 1px 0 15px 1px #adadad;
box-shadow: 1px 0 15px 1px #adadad;
	
}
.event img {width:100%; /*height:200px;*/ display:block;}
.event iframe {display:block; height:350px;}
.eventDetails {
	height:100px;
	white-space:normal;
	position:absolute;
	top:150px;
	width:100%;
	left:0;
}
.home .event{height:150px}
.home .eventDetails {
	height:100px;
	white-space:normal;
	position:absolute;
	top:100px;
	width:100%;
	left:0;
}
.eventDetails h2 {
	white-space:nowrap;
	text-overflow:ellipsis;
	cursor:pointer;
	text-align:center;
	padding:15px 20px;
	height:50px;
	overflow:hidden; 
	display:block;
	font: 16px/21px 'PTSansRegular', Arial, sans-serif;
	margin:0;
}
.eventDetails h2:before {
    border-style:solid;
    border-width:7px;
    content:"";
    display:block;
    left:50%;
    position:absolute;
    top:-14px;
    width:0;
    margin-left:-4px;
    z-index:100;
}
.eventDetails .eventInfo {width:auto; height:300px; padding:25px; overflow:auto;}

/*--EVENT ITEMS WITH NO IMAGE--*/
.noImg {width:350px;}
.noImg .eventDetails {top:0;}
.noImg .eventDetails h2 {cursor:default;}

/*---divider MARKERS---*/
.divider {
	font: 12px/18px 'PTSansRegular', Arial, sans-serif;
	padding: 5px 0 0;
	height:22px;  
	text-align:center; 
	color:#fff; 
	display:inline-block;
	position:relative;
	margin:0 -75px 0 0px;
	width:75px;
	letter-spacing:1px;
	left:0px;
	top:-27px;	
	z-index:1000;
}
.divider:first-child {margin-left:0;}

/*---TIMELINE REFERENCE---*/
#controls {
	position:absolute;
	top:0;
	z-index:1000; 
	display:none;
	left:50px;
	right:50px;
	margin:0 auto; 
	padding:16px 0 0 0; 
}
#referenceWrapper {position:relative;}
#reference { 
	height:9px; 
	margin:0 auto;
	border-radius:10px;
	cursor:pointer;
	background:#d8d8d8;
}

#marker {
	width:7px; 
	height:7px; 
	border-radius:30px; 
	border-width:7px;
	border-style:solid; 
	position:absolute; 
	left:0; 
	top:-6px; 
	z-index:10; 
	cursor:url("https://mail.google.com/mail/images/2/openhand.cur"), default !important;
	background:#fff;
}
#marker.ui-draggable-dragging {cursor:url("https://mail.google.com/mail/images/2/closedhand.cur"), default !important;}

#hoverInfo,
#markerInfo {
	font:bold 11px/28px sans-serif; 
	height:28px;  
	text-align:center; 
	color:#fff; 
	display:inline-block;
	position:absolute;
	width:85px;
	letter-spacing:1px;
	z-index:1000;
	top:-44px;
	left:-39px;
}
#hoverInfo {margin-left:-43px; top:-43px; z-index:2000; opacity:0;}

#hoverInfo:after,
#markerInfo:after {
    border-style:solid;
    border-width:10px;
    content:"";
    display:block;
    left:50%;
    position:absolute;
    bottom:-18px;
    width:0;
    margin-left:-11px;
}
#controls:hover #markerInfo {opacity:1;}

#progress {
	position:absolute; 
	top:0; 
	left:0; 
	bottom:0; 
	z-index:0; 
	width:0; 
	border-radius:10px; 
	padding-right:7px;
}

.referenceDivider {
	position:absolute; 
	width:3px; 
	height:10px; 
	top:0; 
	margin:0; 
	z-index:0; 
	overflow:hidden;
	display:none; 
	cursor:pointer;
}
/*HIDE FIRST REF DIVIDER -- MOSTLY FOR LOOKS ;-) */
#referenceWrapper > div:nth-child(5) {visibility:hidden;}

.sidebarSmall {
	width:50px;
	height:40px;
	position:absolute;
	top:-16px;
	cursor:pointer;
}
#leftSmall {left:-50px;}
#rightSmall {right:-50px;}
#rightSmall:before,
#leftSmall:before {
	content:'';
	border-style:solid;
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    width:0;
    height:0;
    z-index:1000;
}
#leftSmall:before {
    border-width:8px 8px 8px 0;
    margin:-7px 0 0 -4px;
}
#rightSmall:before {
    border-width:8px 0 8px 8px;
    margin:-7px 0 0 -4px;
}