@charset "UTF-8";

/*Scrolling window*/

.scroller {
	//display: block;   
	overflow-y: hidden;
	overflow-x: scroll;   
	margin: 0px; 
	padding: 0px;
	height: 540px; 
	min-width: 20px;
	max-width: 100%;
	margin-right: 190px;
	z-index: 10;
}



/*Decade columns*/

td.decade {
	font-size: 18pt;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	text-align: center;
	vertical-align: middle;
	width: 320px;
	max-width: 320px;
	line-height: normal;
	color: #525252;
	background:#F3F3F3;	
}

/*Telescope rows*/

#rows {
	width: auto;
	float: left;
	border-spacing: 0px 8px;	
	padding: 0px 12px 0px 20px;
	vertical-align: middle;
	text-align: right;	
	font-size: 11pt;
	font-family: Helvetica, Arial, sans-serif;
	color: #1c1c1c;
}

#timeline {
	display: block;
	max-width: 320px; /*???? seems needs to be smaller than scroller*/
	border-spacing: 8px;
	padding: 0px;
	background-color: #FFF;	
}

#rows td, #timeline td { 
	height: 76px;
}


.positioner {
	 margin-top: 0px;
	 margin-left: 0px;
    width: 3270px;
	 height: 76px;
	 position: relative;
	 display: block;
	 //border: #F36 solid 1px;
}


tr.p18 {
	background:#CCD2DF;
}

tr.p48 {
	background:#E8F1FF;
}

tr.p200 {
	background:#D6DFF5;
}

tr.site {
	background:#E0E7F7;
}

tr.p60 {
	background:#CCD4E9;
}

tr.p18, tr.p48, tr.p200, tr.p60, tr.site {
	background-image: url(/palomar/about/images/timeline/grid.png);
	vertical-align: top;	
}

/*Telescope operation span*/

.operational, .goperational {
	filter: alpha(opacity=40);
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
	opacity: 0.4;
	padding: 0px;
	display: block;
	column-span: all; 
	position: absolute;
	z-index: 0;
}

.operational {
	top: 0px;
	height: 76px;
	-webkit-border-radius: 6px 0px 0px 6px;
	-moz-border-radius: 6px 0px 0px 6px;
	-ms-border-radius: 6px 0px 0px 6px;
	-o-border-radius: 6px 0px 0px 6px;
	border-radius: 6px 0px 0px 6px;

}


.goperational {
	height: 14px;
	-webkit-border-radius: 3px 0px 0px 3px;
	-moz-border-radius: 3px 0px 0px 3px;
	-ms-border-radius: 3px 0px 0px 3px;
	-o-border-radius: 3px 0px 0px 3px;
	border-radius: 3px 0px 0px 3px;

}

#o18, #opti {
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	-webkit-border-top-right-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	-moz-border-top-right-radius: 3px;
	-moz-border-bottom-right-radius: 3px;
	-ms-border-top-right-radius: 3px;
	-ms-border-bottom-right-radius: 3px;
	-o-border-top-right-radius: 3px;
	-o-border-bottom-right-radius: 3px;
}

#o18 {
	left: 543px; width: 1931px; background: #33497F;
}

#o48 {
	left: 950px; width: 2321px; background: #8CB7FF; 			
}

#o200 {
	left: 970px; width: 2301px; background: #5C7FD5;
}

#o60 {
	left: 1714px; width: 1557px; background: #3354A5;
}

#opti {
	left: 2465px; width: 467px; background: #859FE0;
}

/*World War II image placement*/

.wwii {
	 left: 728px;
	 top: 0px;
	 background-image: url(/palomar/about/images/timeline/wwii.png);
	 //height: 76px;
	 width: 121px;
	 position: absolute;
	 display:block;
	 //resize:none;
	 z-index: 8;
}


/*Events: marker (variable width) + label*/

.event {
	display: inline-block; 
	height: 24px; 
	column-span: all;
	z-index: 4;
	filter: alpha(opacity=70);
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
	opacity: 0.7;
  -webkit-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  	transition: opacity 0.4s;
	position: static; 
	width: 0px; 
}


a:hover div.event { 
	filter: alpha(opacity=100);
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 
	opacity: 1; 
	text-decoration: none;
} 

/*markers*/

div.site, div.p18, div.p48, div.p200, div.p60, div.pti {
	border: solid 2px #FFF;
	padding: 0px;
	display: inline-block;
	height: 20px;
	column-span: all; 
	position: absolute;
	//z-index: 4; 
	min-width: 20px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	-ms-border-radius: 12px;
	-o-border-radius: 12px;
	border-radius: 12px;
}


div.site {
	background-color: #859FE0;
}

div.p18 {
	background-color: #33497F;
}

div.p48 {
	background-color: #8CB7FF;
}

div.p200 {
	background-color: #5C7FD5;
}

div.p60 {
	background-color: #3354A5;
}


/*labels*/

.label {
	display: inline;
	font-size: 10pt;
	font-family: Helvetica, Arial, sans-serif;
	position: absolute;
	margin: 0px;
	padding: 0px;
	column-span: all;
	color: #1c1c1c;	
}


/*Pop-up*/



a.popup, a.popup:hover {
	text-decoration: none;
}


.popup span { 
	position: fixed;
	background-color: #333;
	padding: 14px;
	width: 126px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	right: -1000px;
	filter: alpha(opacity=0);
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	opacity: 0;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  	transition: opacity 0.5s;
}

.popup:hover span  { 
	filter: alpha(opacity=100);
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity: 1;
	top: 50%;
	right: 0%;
	margin-right: 20px;
	-ms-transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	-o-transform: translate(0, -50%);
	transform: translate(0, -50%);
	z-index: 100;
	text-decoration: none;
	border: none;
}

.popup span img { 
	width: 126px;
	padding: 0px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;

}

.popup span p, .popup span h4, .popup span h5 {
  	color: #F3F3F3;
	text-decoration: none;
	font-family: Helvetica, Arial, sans-serif;
}

.popup span p {
	font-size: 9pt;
	text-align: left;
	-webkit-hyphens: manual;
   -moz-hyphens: manual;
   hyphens: manual;
	margin-bottom: 0px;
}

.popup span h4, .popup span h5 {
	text-align: center;
	margin: 0px 0px 12px 0px;
	padding:0px;
	font-weight: normal;
	font-size: 10pt;
}

.popup span h5 {
	white-space: nowrap;
	margin: 0px 0px 4px 0px;

}