/*---------------------- Pure CSS Timeline ---------------------------
--------------------------by Jimmy Pautz------------------------------
----------------------------------------------------------------------
This code may be used, modified, styled as you see fit.  Please give 
me credit when you use it.
----------------------------------------------------------------------
*/


/*-------First, let's default everything. ---------- */

@import url('reset.css');


/* ----------- CSS begins ---------- */



html,body {
	font-family: inherit, sans-serif;
    background: url(images/bg-image.jpg) no-repeat center center fixed;
	-webkit-background-size: cover; /* For WebKit*/
	-moz-background-size: cover;    /* Mozilla*/
	-o-background-size: cover;      /* Opera*/
	background-size: cover;         /* Generic*/
	background-attachment: fixed;
	
	
	@media (max-width: @iphone-screen) {
      background-attachment: scroll;
  }
}

img {
    image-orientation: from-image;
}

/* intro */
#header {
	/*padding-left:50px;*/
	margin-top:20px;
	max-width:33%;
	float:left;
	padding-left: 32%;
	font-size: 35px;
	text-align: justify;
  text-justify: inter-word;
  font-family: 'Great Vibes', cursive;
}

/* intro */
#intro {
	/*padding-left:50px;*/
	margin-top:20px;
	max-width:33%;
	float:left;
	padding-left: 32%;
	font-size: 20px;
	text-align: justify;
  text-justify: inter-word;
  font-family: 'Rancho', cursive;
}


/* intro */
#vip {
	/*padding-left:50px;*/
	margin-top:20px;
	max-width:33%;
	float:left;
	padding-left: 32%;
	font-size: 15px;
	text-align: justify;
  text-justify: inter-word;
	font-family: 'Lato', sans-serif;
}

#vip p {
	padding-left: 20px;
}



/* --------------------- top bar for quick jump to the years "Jumpstrip"----------------- */
#jumpstrip li {
	display:block;
	}
#jumpstrip {
			float: left;
			margin-top:25px;
			font-size:16px;
			font-family: inherit, sans-serif;
			color:black;
			padding-left: 35%;
			clear:both;
			padding-bottom: 25px;
				}
#jumpstrip li{
			position: relative;
			float: left; 
			list-style: none;
			margin: 0px;
			padding:0px;
			} 
#jumpstrip li a{
			display: block;
			text-decoration:none;
			font-size:16px;
			padding: 10px;
			padding-top:20px;
			color:black;
			border-bottom: 5px solid transparent; /* if making for IE 6 transparent won't work.  See http://snippets.dzone.com/posts/show/6089 for solution */
			} 
#jumpstrip li a:hover{
			color:green;
			border-bottom: 5px solid #22241C;
			}
/* -------------- end "Jumpstrip"----- Start Timeline--------------- */
#timewrap {
	/*padding-left:50px;*/
	max-width:33%;
	float:left;
	padding-left: 35%;
	}
.timeline a, .entry a, .entry {text-decoration:none;color:black;}
.timeline li a:hover {
    text-decoration:none;
}
.timeline li,
.timeline ol li {
	list-style:none;
}

.timeline,
.timeline ol,
.timeline ol ol {
	margin:0;
	padding:0;
}
.timeline ol li {
	padding:0 0 0 50px;
	margin:0 0 0 50px;
}
.timeline li a {
	position:relative;
	top:-50px;
	}
.timeline li div.entry {
	padding:20px;
	margin:0;
	border-style:none;
}
.timeline li a .entry:hover, .timeline .entry:hover {
	background-color:#e8e8e8;
	text-decoration:none;
	color:black;
}
.timeline ol li {
	background:url('images/org-tree-mid.gif') no-repeat left top;
}

.timeline ol li.last {
	background:url('images/org-tree-last.gif') no-repeat left top;
}
/*----------- Main Content Elements ---------------- */
.date {font-style:italic;}
.year {  /* this is the year on the left side.  If you decide to add a month or other content, adjustments will need to be made. */
	top: 22px;
	font-weight:bold;
	display:block;
	position:relative; /* for browser (IE) compatability */
	width: 75px;
    border-bottom: 2px solid #666666;
    font-size: 1.6em;
    right:125px;
}
.title {
	padding:0 0 10px 0;
	font-weight:bold; 
	font-style:normal; 
	line-height:100%;
	}
	
.history { /* I didn't really style this, it is here for posterity. */
	font-family:inherit;
}

.pdfLink {
	font-weight:bold;
	font-style:italic;
}

.nonBold {
	font-weight:normal;
}

	
/* ----------- Mobile Devices ----------- */
@media only screen
and (min-device-width : 320px) 
and (max-device-width : 1000px) { 
	#header {
		max-width: 75%;
		padding-left:33%;
		padding-right:5%;
		float:left;
	}
	#intro {
		max-width: 75%;
		padding-left:33%;
		padding-right:5%;
		float:left;
	}
	#vip {
		max-width: 75%;
		padding-left:33%;
		padding-right:5%;
		float:left;
	}

	#timewrap {
		max-width: 75%;
		padding-left:33%;
		padding-right:5%;
		float:left;
	}
	#jumpstrip { 
		padding-left:33%;
		padding-right:5%;
	}
	html, body {
		background-size: 100% 100%;
		background: url(images/bg-image_mobile.jpg);
	}
}