@charset "UTF-8";
/* CSS Document */

body#timeline-bkgrnd {
	background-image: url(links/sunOutline-red.png), url(links/full-sun-for-bkgrnd.png), url(links/california.png); 
  	background-position: 23rem 3.99rem, 40rem 75rem, 3rem 75rem;
  	background-repeat: no-repeat, no-repeat, no-repeat;
	}
.history {
	font-family: 'Open Sans', sans-serif;
	font-size: 1rem;
	line-height: 150%;
	margin-bottom: .5rem;
	}
p a.reference {
	word-break: break-word;
	font-size: .9rem;
	font-style: italic;
	margin-bottom: .25rem;
	}

/* The actual timeline (the vertical ruler) */
.timeline {
 	position: relative;
  	max-width: 1200px;
  	margin: 0 auto;
	}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  	content: '';
  	position: absolute;
  	width: 6px;
  	background-color: #0e2e71; /* blue */
  	top: 0;
  	bottom: 0;
  	left: 50%;
  	margin-left: -3px;
	}

/* Container around content */
.container {
  	padding: 10px 40px;
  	position: relative;
  	background-color: inherit;
  	width: 50%;
	}

/* The circles on the timeline */
.container::after {
  	content: '';
  	position: absolute;
  	width: 25px;
  	height: 25px;
  	right: -17px;
  	background-color: #fff;
  	border: 4px solid #fdc021; /* old color #FF9F55 */
  	top: 15px;
  	border-radius: 50%;
  	z-index: 1;
	}

/* Place the container to the left */
.left {
  	left: 0;
	}

/* Place the container to the right */
.right {
  	left: 50%;
	}

/* Add arrows to the left container (pointing right) */
.left::before {
  	content: " ";
  	height: 0;
  	position: absolute;
  	top: 22px;
  	width: 0;
  	z-index: 1;
  	right: 30px;
  	border: medium solid #f1f1f0;
  	border-width: 10px 0 10px 10px;
  	border-color: transparent transparent transparent #f1f1f0;
	}

/* Add arrows to the right container (pointing left) */
.right::before {
  	content: " ";
  	height: 0;
  	position: absolute;
  	top: 22px;
  	width: 0;
  	z-index: 1;
  	left: 30px;
  	border: medium solid #f1f1f0;
  	border-width: 10px 10px 10px 0;
  	border-color: transparent #f1f1f0 transparent transparent;
	}

/* Fix the circle for containers on the right side */
.right::after {
	left: -16px;
}

/* The actual content */
.content {
  	padding: 20px 30px;
  	background-color: #f1f1f0;
  	position: relative;
  	border-radius: 6px;
	}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
/* Place the timelime to the left */
	.timeline::after {
    	left: 31px;
  		}

/* Full-width containers */
	.container {
    	width: 100%;
    	padding-left: 70px;
    	padding-right: 25px;
  		}

/* Make sure that all arrows are pointing leftwards */
  .container::before {
   		left: 60px;
    	border: medium solid #f1f1f0;
    	border-width: 10px 10px 10px 0;
    	border-color: transparent #f1f1f0 transparent transparent;
  		}

/* Make sure all circles are at the same spot */
	.left::after, .right::after {
    	left: 15px;
  		}

/* Make all right containers behave like the left ones */
	.right {
    	left: 0%;
  		}
	}