body {
  margin: 				0;
  background-color: 	#F0F0F0;
  color: 				#121212;
  line-height: 			1.5;
  height:				100vh;;
  font-family:			Verdana, sans-serif;
  background-image:		url('../images/background.png');
  background-attachment:fixed;
	margin: 				0px;  
}

.container {
	min-height: 			97vh;
	display: 				grid;
	grid-template-columns: 	50px 10fr 10px;
	grid-template-rows: 		100px 10fr 1fr;
	grid-template-areas: 
		"header header header"
		"sidebar main rightbar"
		". footer .";
	background:			linear-gradient(to bottom, 	rgba(255, 255, 255, 0.8),
													rgba(255, 255, 255, 0.8) 90%,
													rgba(255, 255, 255, 0.0));	
}

.header {
	grid-area: 				header;
	justify-self: 			center;
	height:					70px;
	width:					100%;	
	background-color:		rgba(255, 255, 255, 0.7);
	border-bottom:			3px solid #CE5200;
	background-image:		linear-gradient(to right, rgba(30, 40, 86, 1.0), rgba(30, 40, 86, 0.0) 50%),
							url('../images/header_background.jpg');
	background-size: 		cover;
}
.footer {
	grid-area: 				footer;
}
.bottomBar {
	overflow: 				hidden;
	position: 				fixed;
	bottom: 				0;
	width: 					100%;
	background-color:		rgba(20, 20, 20, 0.9);
	text-align:				center;
	color:					#FFF;
	font-size:				12px;
	padding-top: 			4px;
	padding-bottom:			4px;
	border-top:				3px solid #CE5200;
	z-index: 2;
}
.bottomBar > a {
	color: #FFF;
}


/** Popups cover the whole page, except for a bright notice area **/
#popupContainer {
	width: 					100%;
	height: 				100%;
	z-index: 				100;
	position: 				fixed;
	background-color:		rgba(20, 20, 20, 0.8);
	display:				none;
}
#popupContent {
	position:				fixed;
	min-height:				100px;
	max-width: 				90%;
	min-width:				60%;
	left: 					50%;
    transform: 				translate(-50%, 0);
	top:					100px;
	border-radius:			15px;
	background-color:		white;
	box-shadow: 			0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	padding:				15px 30px 40px 30px;
	text-align:				justify;
}
#popupContent > h1 {
	color:					#CE5200;
	font-size:				30px;
	margin: 				0px 30px 30px 30px;
}
#popupBody > table {
	width:					80%;
}




h1 {
	margin-left: 		50px;
	margin-bottom: 		-20px;
	font-size:			40px;
	font-family: 		Calibri, Tahoma, sans-serif;
	color:				#CE5200;
}
h1:hover {
	cursor: 			pointer;
}
h2 {
	color:				#888;
	margin-top: 		0px;
}
h3 {
	font-size:			20px;
	font-weight:		bold;
	margin-bottom:		2px;
	margin-top:			0px;
}
h3:hover { 
	cursor: 			pointer;
}

a { 
	text-decoration:	none;
}

blockquote {
	text-align:			justify;
	font-size:			small;
	border-radius:		0px 5px 5px 5px;
	padding:			5px 10px 5px 10px;
	margin-top:			-10px;
	margin-right:		0px;
	color: 				white;
	background:			linear-gradient(to bottom, 	rgba(100, 100, 100, 0.8),
													rgba(80, 80, 80, 0.8));
	font-style:			italic;
}


comment {
	display:				block;
	margin-left:			40px;
	margin-top:				10px;
	padding:				20px;
	background-color:		#F2F9FF;
	border-radius:			10px;
	box-shadow: 			0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);	
}

#blueSkyComments > comment {
	background-color: 		#161E27;
	color: 					white;
	cursor: 				pointer;
}
#blueSkyComments > comment > author {
	font-size:				small;
	float: 					right;
}
#blueSkyComments > comment > author > a {
	font-weight: 			bold;
	color: 					#AAA;
}
#blueSkyComments > comment > author > a:hover {
	text-decoration:		underline;
}




.rightbar {
	grid-area:				rightbar;
}
.sidebar {
	grid-area: 				sidebar;
}
.sidebar > div {
	background-color:		#FAFAFA;
	border-radius: 			0px 15px 15px 0px;
	padding-bottom:			1px;
	width:					70px;
	box-shadow: 			0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	color: 					#888;
	font-size:				20px;
	text-align: 			center;
}
.sidebar > div > a {
	margin-top:		0px;
	color: 				white;
}
.sidebar > div > a > div {
	width: 				60px;
	height: 			42px;
	background-size: 	auto 50px;
	margin-top: 		0px;
	margin-left:		5px;
	margin-bottom:		10px;
	padding-top:		8px;
	background-image: 	url('/view/images/header_background.jpg');
	border-radius: 		10px;

}
.sidebar > div > a > div:hover {
	box-shadow: 		0 0px 8px 0 rgba(0, 0, 0, 0.2), 0 0px 20px 0 rgba(30, 40, 86, 0.19);
}





.content {
	grid-area: 			main;
	justify-self:		center;
	width:				95%;
	max-width:			1400px;
	
}
.content > div {
	background-color:	rgba(255, 255, 255, 0.9);
	border-radius:		15px;
	color:				#222;
	padding:			40px;
	box-shadow: 		0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.content hr {
	width:				50%;
	margin:				20px auto 20px auto;
	border:				1px solid #CE5200;
}
.content h1 {
	color: 				#888;
	margin-bottom:		10px;
	margin-left:		100px;
	margin-top:			-15px;
}


/** Content divided into two colums uses a LEFT and RIGHT div **/
.left, .right, .center {
	border-radius: 		10px;
	background-color:	#FFF;	
	width:				40%;
	border: 			1px solid #f0f0f0;
	position: 			relative;
	min-width:			300px;
}
.left {
	float: 				left;
	margin-right: 		4%;
	margin-bottom:		4%;
}
.right {
	float: 				left;
}

/** Content with a 3:1 ratio of left:right columns **/
.leftMain {
	position: 			relative;
	float:				left;
	width:				70%;
}
.rightResidual {
	overflow:hidden;
	margin-top: -10px;
}


/** Content which spans a single column: **/
.center {
	width: 				auto;
	min-width:			680px;
}



/** Error messages **/
.error {
	color:				red;
	padding-bottom:		20px;
	width:				60%;
	margin:				auto;

}

.submit {
	border: 			0px;
	background-color: 	#CE5200;
	padding: 			5px 10px 5px 10px;
	color:				#FFF;
	font-weight:		bold;	
}
.submit:hover {
	cursor: 			pointer;
}

/**
	Generic page components
**/
input[type='file']::file-selector-button {
	border: 			1px solid #888;
	border-radius: 		5px;
	background-color:	#FFF;
	content: 			'Select a file';
	padding: 			5px;
	width: 				150px;
}
input[type='file'] {
	color: 				transparent;
}
input[type='file']:hover  {
  transform: 			scale(1.02);
}

input[type='submit'], input[type='button'] {
	border: 			1px solid #888;
	border-radius: 		5px;
	background-color:	#FDFDFD;
	padding: 			5px 20px 4px 20px;
	color: 				#333;
}
input[type='submit']:hover, input[type='button']:hover {
	background-color:	#333;
	color:				white;
}



/** 
	Custom components
**/
#subtitle {
	color: 				#FAFAFA;
	margin-left:		50px;
	font-size:			14px;
	font-weight: 		bold;
}

/** Header links: top-right buttons to control logging in/out, profile preferences, etc **/
#headerLinks  {
	width:				100%;
	margin-bottom:		-110px;
	height:				80px;
	text-align: 		right;
	z-index: 10;

}
#headerLinks > a {
	box-shadow: 		0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);	
}
#headerLinks a {
	margin-right:		1px;
	background:			rgba(255, 255, 255, 0.9);
	padding:			5px 10px 5px 10px;
	width: 				auto;
	font-size:			20px;
	text-decoration:	none;
	color:				#000;
	border-radius:		0px 0px 5px 5px;
}
#headerLinks a:hover {
	background:			rgba(206, 82, 0, 0.8);
	color:				white;
}
#headerLinks a > img {
	position: 			relative;
    top: 				0%;
    transform: 			translateY(18%);
	width:				23px;
}


/** Profile, curation options dropdown menu **/
div.headerDropdown {
	width:				170px;
	min-height: 		150px;
	position: 			fixed;
    top: 				35px;
	right: 				10px;
	display: 			none;
	border-radius:		5px;
	border:				1px solid #F0F0F0;
	background-color:	rgba(255, 255, 255, 0.95);
	box-shadow: 		0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);	
	text-align: 		right;
	line-height:		25px;
	z-index: 10;
}
#curationDropdown {
	width:				200px;
	right: 				150px;		/** This should be made relative to the parent <a> element **/
}

#profileDropdown > a, #curationDropdown > a {
	display: flex; width: 130px;
	margin:				10px 10px 10px 10px;
	border-radius:		5px;
	font-size:			14px;
	background: 		none;
	color:				black;
}
#curationDropdown > a {
	width:				160px;	/** We need a bit more space here **/
}

.headerDropdown > hr {
	width: 				80%; 
}
#userCurationList {
	width:				85%;
	text-align: 		center;
}
#userCurationList > i, #userCurationList > i > a {
	text-align: 		center;
	font-size:			12px;
}
#userCurationList > i > a {
	text-decoration:	underline;
}
#userCurationList > i > a:hover {
	background:			none;
	color: 				#CE5200;
}
#userCurationList > a {
	padding: 			0px;
	margin:				0px;
}
.curationHeaderLink {
	width:				150px;
	margin:				0px 0px 0px 10px;
	font-size:			14px;
	margin-bottom:		5px;
	text-shadow:      	1px 1px 4px #000;
	color:				#FFF;
	background-size: 	1000px;
	min-height:			30px;
	background-color:	#7091BB;
	line-height:		20px;
	padding:			2px 0px 2px 0px;
	border-radius:		5px;
}
.curationHeaderLink:hover {
	font-weight:		bold;
	cursor: 			pointer;
}


/**	Search bar **/
.searchBar {
	width: 				100%; 
	height: 			25px;
	padding:			4px 10px 4px 10px;
	border:				3px solid #CE5200;
	border-bottom: 		3px solid white;
	border-radius:		10px 10px 0px 0px;
	font-size: 			16px;
	z-index: 1;
}



/** Style the login form, and tooltips **/
#loginForm {
	width:				30%;
	min-width:			400px;
	text-align: 		right;
	margin:				auto;
	padding-top: 		20px;
}

.tipText, .tipText a {
	color: 				#888;
	font-size:			12px;
}
.tipText:hover {
	cursor:				help;
}


/** Page specific styling **/
#editCuration input, textarea {
	border: 			1px solid #FAFAFA;
	font-size:			16px;
}
#editCuration input:hover {
	cursor:				pointer;
}
input#smallButton {
	border: 			2px solid #CE5200;
	font-size:			small;
}
input#smallButton:hover {
	background-color:	#CE5200;
	cursor:				pointer;
}

#curationTitleContainer {
	padding: 			20px 0px 0px 20px;
	height: 			50px;
	font-size: 			20px;
	text-shadow:      	1px 1px 4px #000;
	border-radius:		10px;
}
#curationTitleContainer > h2 {
	color: 				white;
}

#curationHeader  {
	width:				calc(100% + 82px);
	text-align: 		center;
	margin: 			-40px -41px 20px -41px;
	border-radius:		15px;
}
#curationHeader td {
	height:				45px;
	width:				200px;
	border-top:			3px solid white;
	border-right:		3px solid white;
	border-bottom:		3px solid #CE5200;	
	background-color: 	#213862;
}
#curationHeader td:hover {
	background-color:	#30568E;
	cursor: 			pointer;
}
#curationHeader td:hover > a {
	color:				white;
}
#curationHeader a {
	text-decoration:	none;
	color:				white;
}


/** Article feed **/
table.articleFeed {
	margin-left: -41px;
	margin-right: -41px;
	border-top:	3px solid black;
	width:  calc(100% + 82px);
}
td.feedGroupButtons {
	text-align:			left;
	padding-right: 		10px;
}
tr.titleRow > td {
	background:			#333;
	font-weight:		heavy;
	font-size:			large;
	border-bottom:		2px solid black;
	color: 				white;
}
.articleFeed td {
	color: 				green;
	padding:			5px 2px 5px 4px;
	font-size:			small;
	border-bottom:		1px solid #EEE;
	white-space: 		nowrap;
}
.articleFeed tr:hover {
	background-color:	#DDD;
}
tr.articleConsidering > td {
	background-color:	#FFF4FE;
}
tr.articleConsidering > td > a {
	font-weight:		bold;
}
tr.articleFeedBody:hover {
	background-color:	#FFF;
}
.articleFeedBody > td > span > a {
	color:				navy;
}


div.feedAuthors {
	padding-top:		1px;
	padding-bottom:		3px;
}
.articleFeed a { 
	color: 				black;
	text-decoration:	none;
}
.articleFeed a:hover {
	color:				#CE5200;
	text-decoration:	underline;
}



/**	Article Consideration page **/
.considerationArticle  {
	background-color:	#FFF4FE;
	border-radius:		10px;
	margin:				10px 5px 20px 5px;
	padding:			8px 5px 10px 15px;
	box-shadow: 		0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	clear:				right;
}
.considerationArticle > div, .readyArticle > div {
	width: 				78%;
	min-height:			300px;
}
.readyArticle  {
	background-color:	#E5FFEE;
	border-radius:		10px;
	margin:				10px 5px 20px 5px;
	padding:			8px 5px 10px 15px;
	box-shadow: 		0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	clear: 				right;
}
.publish {
	font-size: 			medium;
	width:				80%;
	background-color:	grey;
	margin-bottom:		10px;
	border-radius:		4px;
	box-shadow: 		0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}
.publish:hover {
	background-color: 	#CE5200;
}


/** Component for handling generic content blocks **/
.blockContainer {
	display:			table;
	border-collapse:	separate;
	border-spacing:		20px;
}
.block {
	border:				5px solid #EEE;
	color:				#AAA;
	font-size:			20px;
	width:				100px;
	height:				80px;
	border-radius:		20px;
	text-align: 		center;
	display: 			table-cell;
	vertical-align: 	middle;
	background:			#FAFAFA;
	margin-right:		200px;
	font-weight: 		bold;

}
.block:hover {
	border:				5px solid #AAA;	
	cursor: 			pointer;	
}

/** Home page **/
a.latestArticle {
	display: 			block;
	background-color:	#E4F9FF;
	background:			linear-gradient(to bottom, 	rgba(228, 249, 255, 1.0),
													rgba(228, 249, 255, 0.7) 90%,
													rgba(228, 249, 255, 0.1));	
													
	border-radius:		10px;	
	box-shadow: 		0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	clear:				right;
	float: 				left;
	width:				30%;
	margin-left:		2%;
	height:				230px;
	margin-bottom:		10px;
	min-width:			300px;
	text-align: 		center;
	overflow: 			hidden;
	position: relative;
	z-index: 1;
}
.latestArticle > h3 {
	color:				white;
	font-size: 			15px;
	margin:				0px;
	border-radius:		10px 10px 0px 0px;
	padding:			10px;
	background-color:	black;
	text-shadow: 		2px 2px 4px #000;
}
.latestArticleHeader { 
	margin-top: 		00px;
	text-align:			left;
	font-size:			14px;
	color:				#000;
	padding:			0px 10px 0px 10px;
}
.latestArticleAbstract {
	margin-top: 		5px;
	padding:			0px 10px 10px 10px;
	text-align:			justify;
	color: 				grey;
	font-size: 			12px;
}
div.latestArticleButtons {
	position: 			absolute;
	width: 				100%;
	background:			linear-gradient(to bottom, 	rgba(200, 229, 233, 0.0),
													rgba(200, 229, 233, 0.7) 50%,
													rgba(200, 229, 233, 1.0));	
	height:				25px;
	padding-top:		50px;
	top:				155px;
	text-align: 		right;
	z-index: 2;
}
/** Next / previous page **/
a.nextPreviousLinks {
	color:				black;
	font-weight:		bold;
	text-decoration:	none;
}
a.nextPreviousLinks:hover {
	color: 				#CE5200;
}


/**
	Buttons for liking, sharing, commenting
**/
img.likeButtonOn {
	content:			url('../images/like_on.png');
	height:				20px;
}
img.likeButtonOff {
	content:			url('../images/like_off.png');
	height:				20px;
}
/** Like count is position atop the like button **/
span.likeCount {
	position: 			absolute;
	color: 				#999;
	font-weight:		bold;
	transform: 			translateX(-70px) translateY(1px);
	font-size:			12px;
	text-align: 		right;
	width: 				40px;
	text-shadow:      	0px 0px 2px white;
}

img.commentButton {
	content:			url('../images/comment_off.png');
	height:				20px;
}
img.commentButton:hover {
	content:			url('../images/comment_on.png');
}


/** Button to add an article to the currently active curation **/
img.curateButtonOn {
	content:			url('../images/curate_on.png');
	height:				20px;
}
img.curateButtonOff:hover {
	content:			url('../images/curate_on.png');
}
img.curateButtonOff {
	content:			url('../images/curate_off.png');
	height:				20px;
}

/** Button to share this article / curation on social media **/
img.shareButton {
	content:			url('../images/share_off.png');
	height:				20px;
}
img.shareButton:hover {
	content:			url('../images/share_on.png');
	height:				20px;
}

/** Button to subscribe to a curation **/
img.subscribeButtonOn, img.subscribeButtonOff:hover {
	content:			url('../images/subscribe_on.png');
	height:				20px;
}
img.subscribeButtonOff {
	content:			url('../images/subscribe_off.png');
	height:				20px;
}

.largeSubscribeButton, .largeUnSubscribeButton {
	margin-left: 		20px;
	width: 				140px;
	height: 			46px;
	line-height:		46px;
	border-radius:		8px;
	border:				3px solid white;
	background-color: 	#CE5200;
	color: 				white;
	font-weight: 		bold;	
}
.largeSubscribeButton:hover {
	background-color: 	#CCA186;
	border:				3px solid white;
}
.largeUnSubscribeButton {
	background-color: 	#CCA186;
}
.largeUnSubscribeButton:hover {
	background-color: 	#CE5200;
}

.backButton { 
	background-image: 	url('../images/back_off.png');
	background-size: 	cover;	
	width: 				35px;
	height: 			25px;
	float:				right;	
}
.backButton:hover { 
	background-image: 	url('../images/back_on.png');	
}
.homeButton { 
	background-image: 	url('../images/home_off.png');
	background-size: 	cover;	
	width: 				35px;
	height: 			25px;
	float:				right;	
}
.homeButton:hover { 
	background-image: 	url('../images/home_on.png');	
}

/** Button to consider / ignore an article **/
img.considerButtonOn, img.considerButtonOff:hover {
	content:			url('../images/plus_on.png');
	height:				16px;
}
img.considerButtonOff {
	content:			url('../images/plus_off.png');
	height:				16px;
}

img.hideButtonOn, img.hideButtonOff:hover {
	content:			url('../images/hide_on.png');
	height:				16px;
}
img.hideButtonOff {
	content:			url('../images/hide_off.png');
	height:				16px;
}

/** Buttons to consider / ignore all articles in a search query **/
img.hideAllButton {
	content:			url('../images/hide_all_off.png');
	height:				20px;
	margin-right: 10px;
}
img.hideAllButton:hover {
	content:			url('../images/hide_all_on.png');
}
img.addAllButton {
	content:			url('../images/plus_all_off.png');
	height:				20px;
}
img.addAllButton:hover {
	content:			url('../images/plus_all_on.png');
}


/**
	Publication overview table on /curation/published 
**/
.publicationOverview th, .publicationDetails th {
	padding:			8px 5px 8px 10px;
	text-align: 		left;
	background-color: 	#CE5200;
	color: 				white;	
	border-bottom: 		1px solid #ddd;
}
.publicationOverview td, .publicationDetails td {
	padding:			15px 2px 15px 5px;
	font-size:			14px;
}
.publicationOverview tr:nth-child(even){
	background-color: 	#f2f2f2;
}

.publicationOverview tr:hover {
	background-color: 	#ddd;
	cursor: pointer;
}
table.publicationOverview  {
	width:				98%;
	margin-top:			-10px;
}

.publicationDetails td {
	padding:			5px 10px 5px 10px;
	text-align: 		justify;
	background-color:	#FAFAFA;
}


/** Invitation to join a curation, popup. **/
#contributorInvitationList {
	width: 				100%;
	margin-top: 		20px;
}

#contributorInvitationList > tr > td > input {
	margin-left: 		20px;
	cursor:				pointer;
}