/* 
	CSS3 stylesheet for the Webb Society 
	Author: James Whinfrey
	Date: 24 October 2016
	*/

/* GENERAL RULES */
* {
	box-sizing: border-box;
}

html {
	font-size: 11px;
	line-height: 1.85em;
	color: rgb(30, 15, 25);
}

@media screen and (min-width: 768px) {
	html {
		font-size: 14px;
	}
}

/* ALL PAGES */
/** HEADER */
#banner {
	background-color: rgb(45, 20, 20);
	background-image: url("/images/horsehead_flame_nebulae_dfarley_webbcrop_darkened_small.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	color: #fff;
	padding: 21px 40px;
	text-align: center;
}

#website-title {
	color: #fff;
	background-color: rgba(0,0,0,0);
	text-decoration: none;
	border-bottom: none;
}

/** CONTENT */
#main-content, #advertising, #admin-notice {
	margin: 1.5em 0em;
	padding: 0em 20px;
}

p {
	margin: 1.5em 0em;
}

figure {
	margin: 0px;
	padding: 1.5em 10px;
	border: 1px solid #eef;
	border-radius: 5px;	
}

div.article {
	margin-bottom: 3em;
}

.news, #object-archive-list {
	list-style-type: none;
	padding: 0px;
}

div[id^="aladin-lite-div-"] {
	margin: 0px auto;
	max-width: 80%;
}

/*** IMAGES */
img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0px auto;
}

.paypal img {
	width: 1px;
	height: 1px;
}

.article-image {
	max-width: 600px;	
}

.large-publication-thumbnail {
	max-width: 540px;	
}

.dso-cover-image, .publication-thumbnail {
	max-width: 300px;
}

.small-publication-thumbnail {
	max-width: 120px;
}

.small-article-image {
	max-width: 360px;
}

.thumbnail-image, .sample-image {
	max-width: 300px;
}

.rss-icon {
	display: inline-block;
	height: 1em;
	width: auto;
	padding: 2px 5px 0px;
}

.feed-icon {
	height: 1em;
	width: auto;
	padding: 0px 5px 0px;
}

a:link.feed-icon {
	display: inline-block;
	border: none;
	text-decoration: none;
}

/**** Fix height issues with IE */
@media \0screen {
	img, .article-image, .thumbnail-image, .small-article-image, .dso-cover-image { 
		width: auto 
	}
}

/*** IFRAMES - https://benmarshall.me/responsive-iframes */
.intrinsic-container {
  position: relative;
  height: 0;
  overflow: hidden;
}
 
/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
  padding-bottom: 56.25%;
}
 
/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
  padding-bottom: 75%;
}
 
.intrinsic-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*** TABLES */
table {
	table-layout: fixed;
	border-collapse: collapse;
	width: 100%;
}

th, td {
	border: 1px solid rgb(30, 15, 25);
	padding: 1.5em 10px;
	word-wrap: break-word;
}

table#committee {
	table-layout: auto;
}

#meeting-programme tr td:first-child {
	width: 120px;
	text-align: center;
}

/*** FORMS */
form > * {
	display: block;
	margin: 1.5em 0px;
}

form > *[type^="hidden"] {
	margin: 0px;
}

form#login input {
	min-width: 300px;
}

/*** LISTS */
ul {
	margin: 1.5em 0em;
}

dl.single-line-entries * {
	display: inline;
}

.single-line-entries dt {
	display: inline-block;
	width: 30px;
}

.single-line-entries dd::after {
  content: "";
  display: block;
}

dl.blocks {
	margin: 0;
	padding: 0;
}
	
.blocks dt {
	margin: 0;
	padding: 0;
	font-weight: bold;
}
	
.blocks dd {
	margin: 0 0 1em 0;
	padding: 0;
}

dl.object-data {
	margin: 1.5em;
}

dl.observation_list * {
	display: block;
}

.observation_list dt {
	font-weight: bold;
}

.observation_list dd {
	margin: 0 0 1em 0;
}

dl.observing-data * {
	display: inline-block;
	vertical-align: text-top;
	width: 130px;
}

.observing-data dd {
	width: 180px;
}

.observing-data dd.extra-wide {
	width: 480px;
}

ul.flex-list-container {
	list-style-type: none;
	padding: 0px;
}

.flex-list-container li {
	padding: 10px;
	text-align: center;
}

/*** UPDATES TICKER USING CSS3 ANIMATIONS */
#updates-ticker {
	position: relative;
	width: 100%;
	height: 3em;
	margin: 0em 0em;
	padding: 0px;
	background-color: rgb(45, 20, 20);
  	overflow: hidden;
}

#updates-ticker p {
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0em;
	line-height: 3em;
	color: #fff;
	text-align: center;
	transform:translateX(100%);
}

/*** The animation code for the update ticker. There is a maximum of four paragraphs */
@keyframes up-one {
  0%  {
    transform:translateY(100%);
  }
  5% {
    transform:translateY(0);
  }
  20% {
    transform:translateY(0);
  }
  25% {
    transform:translateY(-100%);
  }
  100%{
    transform:translateY(-100%);
  }
}
@keyframes up-two {
  0% {
    transform:translateY(100%);
  }
  25% {
    transform:translateY(100%);
  }
  30% {
    transform:translateY(0);    
  }
  45% {
    transform:translateY(0);    
  }
  50% {
    transform:translateY(-100%);    
  }
  100%{
    transform:translateY(-100%);
  }
}
@keyframes up-three {
  0% {
    transform:translateY(100%);
  }
  50% {
    transform:translateY(100%);
  }
  55% {
    transform:translateY(0);    
  }
  70% {
    transform:translateY(0);    
  }
  75% {
    transform:translateY(-100%);    
  }
  100%{
    transform:translateY(-100%);
  }
}
@keyframes up-four {
  0% {
    transform:translateY(100%);
  }
  75% {
    transform:translateY(100%);
  }
  80% {
    transform:translateY(0);    
  }
  95% {
    transform:translateY(0);    
  }
  100%{
    transform:translateY(-100%);
  }
}

#updates-ticker p:nth-child(1) {
	animation: up-one 20s ease infinite;
}
#updates-ticker p:nth-child(2) {
	animation: up-two 20s ease infinite;
}
#updates-ticker p:nth-child(3) {
	animation: up-three 20s ease infinite;
}
#updates-ticker p:nth-child(4) {
	animation: up-four 20s ease infinite;
}

/*** CONTENT ON LARGE SCREENS */
@media screen and (min-width: 768px) {
	#banner {
		background-image: url("/images/horsehead_flame_nebulae_dfarley_webbcrop_darkened.jpg");
	}

	#object-archive-list, .flex-list-container {
		display: flex;
		flex-direction: row;
		flex-flow: wrap;
		justify-content: space-between;
	}

	.adjacent-images {
		display: flex;
		flex-direction: row;
		flex-flow: nowrap;
		justify-content: space-between;
	}

	.double-column {
		flex-grow: 1;
	}

	.feature h1 {
		min-height: 2.5em;
	}
}

/*** FLAT FORMAT PAGES */
@media screen and (min-width: 768px) {
	.flat #main-content, .flat #advertising {
		display: flex;
		flex-direction: row;
		flex-flow: nowrap;
		justify-content: space-between;
	}

	.flat #main-content.short-list {
		display: flex;
		flex-direction: row;
		flex-flow: nowrap;
		justify-content: space-around;
	}

	.flat #main-content {
		flex-flow: wrap;
	}

	.flat #main-content div, .flat #advertising div {
		flex-basis: 25%;
		-ms-flex-preferred-size: 20%;
		margin: 5px 0px;
		padding: 0px 20px;
	}

	.flat .introduction {
		text-align: center;
	}
}

/*** SIDE NAVIGATION PAGES */
@media screen and (min-width: 768px) {
	.side #flex-container {
		display: flex;
		flex-direction: row;
		flex-flow: nowrap;
		justify-content: space-around;
		margin: auto;
	}	

	.side #main-content {
		order: 1;
		flex: 1 1 65%;
		max-width: 660px;
		margin: 0px auto;
	}
}


/* NAVIGATION */
a:link {
	font-weight: bold;
	color: rgb(144, 40, 40);
	border-bottom: 1px solid rgb(144, 40, 40);
	text-decoration: none;
}

a:visited {
	color: rgb(45, 20, 20);
	border-bottom: 1px solid rgb(45, 20, 20);
}

a:active, a:hover {
	color: rgb(128, 157, 169);
	border-bottom: 1px solid rgb(128, 157, 169);	
}

#updates-ticker p a:link {
	font-weight: normal;
	color: #fff;
	border-bottom: 1px solid #fff;
}

#updates-ticker p a:visited {
	color: #fff;
	border-bottom: 1px #fff;
}

#updates-ticker p a:active, #updates-ticker p a:hover {
	font-weight: bold;
}

#main-menu {
	font-size: 1em;
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}

#main-menu li {
	background-color: rgb(45, 20, 20);
	border: 1px solid #eef;
	border-radius: 5px;
	min-height: 30px;
	padding: 5px;
}

#main-menu a {
	color: #fff;
	text-decoration: none;
	border-bottom: none;
}

#secondary-menu {
	list-style-type: none;
	padding: 0px;
	margin: 1.43em 0px;
	border: 1px solid #eef;
	border-radius: 5px;
}

#secondary-menu>li {
	padding: 1.5em 10px;
}

#secondary-menu ul {
	list-style-type: none;
	padding: 0px;
}

/** NAVIGATION ON LARGE SCREENS */
/*** ALL PAGES */
@media screen and (min-width: 768px) {
	#main-menu {
		display: flex;
		flex-direction: row;
		flex-flow: nowrap;
		justify-content: space-between;
	}

	#main-menu li {
		flex: 1 1 16%;
	}

	#main-menu li>a {
		font-weight: normal;
	}

	.navigation-assist-menu {
		display: none;
	}
}

/*** FLAT PAGES */
@media screen and (min-width: 768px) {
	.flat #secondary-menu {
		display: flex;
		flex-direction: row;
		flex-flow: wrap;
		justify-content: space-between;
	}

	.flat #secondary-menu>li {
		flex: 0 1 25%;
		-ms-flex: 0 1 20%;
	}
}

/*** SIDE NAVIGATION PAGES */
@media screen and (min-width: 768px) {
	#articles #secondary-menu {
		flex: 1 1 30%;
	}
}

/* FOOTER */
#footer {
	border: 1px solid #eef;
	border-radius: 5px;	
	text-align: center;
}

/* TYPOGRAPHY */
body {
	font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;	
}

.article.of-the-month,
.article[id^='nebula-cluster'],
.article[id^='double'],
.article[id^='galaxy'],
.article.pom,
.article.oots,
dl[id^='object-data'] {
	font-family: 'Helvetica Neue', Arial, sans-serif;
}

#website-title {
	font-size: 2.429em;
	line-height: 1.2em;
}

h1, h2, h3 {
	font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
}

h1 {
	font-size: 1.728em;
	line-height: 1.736em;
	margin: 0.868em 0px;
}

h2, .publication-intro h1, #advertising h1 {
	font-size: 1.44em;
	line-height: 2.083em;
	margin: 1.042em 0px;

}

h3, .publication-intro h2, .flat #main-content h1 {
	font-size: 1.2em;
	line-height: 1.25em;
	margin: 1.25em 0px;
}

h4 {
	margin: 1.5em 0px;
}

.introduction, .notice p, .feature p, .alert-message {
	font-size: 1.1em;
	line-height: 1.364em;
	margin: 1.364em 0px;
}

.publication-intro h1, .publication-intro h2 {
	text-align: center;
}

.small-print {
	font-size: 0.7em;
	line-height: 2.143em;
	margin: 2.143em 0px;
}

.alert-message {
	font-weight: bold;
	color: #f00;
}

figcaption {
	margin: 1.5em;
	text-align: center;
}

#home figcaption {
	font-size: 0.7em;
	line-height: 2.143em;
	margin: 0px;
	min-height: 4.286em;
	text-align: center;
}

em, .prices {
	font-weight: bold;
}

q, blockquote {
	font-style: italic;
	quotes: "‘" "’";
}

blockquote {
	margin: 0px 5px;
}

.font-normal {
	font-style: normal;
}

form label {
	font-weight: bold;
}

/* SPECIFIC MODIFICATIONS DEPENDENT ON CASCADING */
.dso-issue-page .dso-magazine>h1 {
	display: none;
}