/* Copyright 2020, Refdesk.com, Inc. ALL RIGHTS RESERVED. */

h1 {
        text-align: center;
        border: solid red 0.2em;
        border-radius: 1.1em 0em 1.1em 0em;
        padding: 0.3em 1em 0.3em 1em;
        width: max-content;
        margin: 1em auto 1em auto;
}

a:hover { 
	background: yellow; 
	text-decoration: underline;
}

a { 
	text-decoration: none;
}

.back_body {
	margin: 2em 3em 2em 3em;
}

/* Calendar Styles */
.main {
	width:140px;
	border:1px solid black;
}

.month {
	background-color:black;
	font:bold 10px arial;
	color:white;
}

.daysofweek {
	background-color:gray;
	font:bold 9px arial;
	color:white;
}

.days {
	font-size: 9px;
	font-family:arial;
	color:black;
	background-color:#FFFAF0;
	padding: 2px;
}

.days #today{
	font-size:11px;
	font-weight: bold;
	color: red;
}

/*******************/
/* Newsfeed Styles */
/*******************/

.newsfeed_menu a {
	background-color: #fff;
	color: black;
	display: block;
	padding: 5px 5px 5px 10px;
	border: 1px solid #eee;
	border-radius: 4px;
	margin: 1px;
	text-decoration: none;
	/*font-family: Arial;*/
	cursor: default;
}

.newsfeed_menu a:hover {
	border: 1px solid gray;
	background-color: #fff; /* otherwise yellow */
	cursor: default;
}

.newsfeed_menu a:visited {
	color: gray;
}

/***********************/
/* Editors Note Styles */
/***********************/
.dismiss_button {
	float: right; 
	margin: 0px;
	border-radius: 3px; 
	padding: 0px 3px 0px 3px;
	background-color: #efefef; 
	vertical-align: middle;
}

/*******************/
/* Settings Styles */
/*******************/


.settings {
	float: left; 
	margin: 5px 5px 5px 0px;
	border-radius: 5px; 
	background-color: #efefef; 
}

.settings a {
	border-radius: 5px; 
	font-size: 12px;
	display: inline-block;
	vertical-align: middle;
	border: 1px solid gray; 
	padding: 1px;
}

#settings a:hover {
	background-color: #afafaf; /* otherwise yellow */
}

/* ---------------------------- Block design CSS starts here ---------------------------- */
html, body {
	margin: 0px 5px 0px 5px;
	/*font-family: verdana;*/
	font-family: Arial;
}

.mobile_only {
	display: none;
}

.nw { /* Don't wrap on whiespace */
	white-space: nowrap;
}

#rd_header {
	display: grid;
	grid-template-columns: 320px auto 320px;
	grid-template-rows: auto auto;
	align-items: center;
	padding: 10px 5px 5px 5px;
	grid-gap: 0px;
	clear: both; /* for old browsers */
}

#rd_calendar {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	padding-bottom: 5px;
	float: left; /* for old browsers */
	/*width: 33%; /* for old browsers */
}

#logo {
	float: left; /* for old browsers */
	margin: 30px 0px 10px 0px; /* for old browsers */
	text-align: center;
}

#logo span {
	display: block;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	font-family: Arial;
}

.backpage_logo {
	width: 33%;
}

#top_center {
	text-align: center;
	float: left; /* for old browsers */
}

#quick_links {
	float: right; /* for old browsers */
}

#slogan {
	text-align: right;
	grid-column: 3 / 4; /* pin right */
	grid-row: 2 / 3; /* pin bottom */
	float: right; /* for old browsers */
}

#content { /* The main page layout grid */
	clear: both; /* for old browsers */
	display: grid;
	/* grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); */
	grid-template-columns: 320px auto 320px;
	grid-template-rows: auto;
	grid-gap: 5px;
}

#rd_left { /* (Left Ad) Internet Search Resources */
	grid-column: 1 / 2; /* Force left */
	grid-row: 1 / 2; /* Force the top */
	clear: both;
	float: left; /* for old browsers */
	width: 100%; /* for old browsers */
}
#rd_center { /* (Featured Resources) Place this at the top right */
	grid-column: 2 / 3; /* Force center */
	grid-row: 1 / 2; /* Force the top */
	float: right; /* for old browsers */
}
#rd_right { /* (Headlines) place on the left top */
	grid-column: -2 / -1; /* Force right*/
	grid-row: 1 / 2; /* Force the top */
	clear: left; /* for old browsers */
	float: left; /* for old browsers */
}
#footer {
	margin: 5px -10px 0px -10px;
	border: 0px;
	border-radius: 0px;
	padding: 5px;
	background: #efefef;
	color: gray;
	font-family: verdana;
	font-size: 10pt;
	text-align: center;
	clear: both; /* for old browsers */
}
#footer span {
	display: inline-block;
}

#show_all {
	display: none;
	text-align: center;
}

/* If the browser window is 1500px or larger */
@media only screen and (min-width: 1500px) {
	#content {
		grid-template-columns: minmax(320px, 420px) repeat(auto-fit, minmax(600px, 1fr)) minmax(320px, 600px);
	}
}

/* If the browser window is 1300px or larger */
@media only screen and (min-width: 1300px) {
	#content {
		grid-template-columns: minmax(320px, 420px) repeat(auto-fit, minmax(600px, 1fr)) minmax(320px, 420px);
	}
}

/* If the browser window is 1100px or smaller */
@media only screen and (max-width: 1100px) {
	#content {
		grid-template-columns: auto 320px;
	}
	#rd_right { /* (Headlines) place on the right top */
		grid-column: 2 / 3; /* Force right */
		grid-row: 1 / 2; /* Force the top */
	}
	#rd_center { /* (Featured Resources) Place this at the top right */
		grid-column: 1 / 2; /* Force left */
		grid-row: 1 / 2; /* Force the top */
	}
	#rd_left { /* (Left Ad) In this layout, we place this on the left lower */
		grid-column: 1 / span 2; /* Force both */
		grid-row: 3 / 4; /* Force bottom */
	}
}


/* If the browser window is 900px or smaller */
@media only screen and (max-width: 900px) {
	#rd_header { /* In this layout, header is 2 columns, 2 rows */
		grid-template-columns: 240px auto 240px;
		grid-template-rows: auto auto;
	}
	#rd_calendar {
		grid-column: 1 / 2; /* Force left */
		grid-row: 1 / 2; /* Force top */
	}
	#logo {
		grid-column: 2 / 3; /* Force middle */
		grid-row: 1 / 2; /* Force top */
	}
	#quick_links {
		grid-column: 3 / 4; /* Force right */
		grid-row: 1 / 2; /* Force top */
	}
	#top_nav {
		grid-column: 1 / span 2; /* Force left (2-wide) */
		grid-row: 2 / 3; /* Force bottom */
	}
	#slogan {
		grid-column: 3 / 4; /* Force right */
		grid-row: 2 / 3; /* Force bottom */
	}
	#top_center {
		display: none;
	}
}

/* If the browser window is 830px or smaller */
@media only screen and (max-width: 830px) {
	#footer {
		font-size: 8pt;
	}
}


/* If the browser window is 800px or smaller */
@media only screen and (max-width: 800px) {
	#rd_header, #content { /* In this layout, header is a single column */
		grid-template-columns: 100%;
	}
	#logo {
		grid-column: 1 / 2;
		grid-row: 1 / 2; /* Force top */
		width: 100%;
	}
	#top_nav {
		grid-column: 1 / 2;
		grid-row: 2 / 3; /* Force bottom */
	}
	#rd_right { /* (Headlines) place on the left top */
		grid-column: 1 / 2; /* Force left */
		grid-row: 1 / 2; /* Force the top */
	}
	#rd_center { /* (Featured Resources) Place this at the top right */
		grid-column: 1 / 2; /* Force left */
		grid-row: 2 / 3;
	}
	#rd_left { /* (Left Ad) In this layout, we place this on the left lower */
		grid-column: 1 / 2; /* Force left */
		grid-row: 3 / 4;
	}
	.no_mobile {
		display: none;
	}
	.mobile_only {
		display: block;
	}
	#show_all { /* The "Show all sections" button */
		display: block;
	}
}

/* If the browser window is 655px or smaller */
@media only screen and (max-width: 655px) {
	#footer {
		font-size: 6pt;
	}
}

#content div {
	/*background: #efefef;*/
	border: 1px solid gray;
	border-radius: 5px;
	padding: 10px;
}
#content div div {
	border: 0px;
	border-radius: 0px;
	padding: 0px;
}

.borderless section {
	border: 0px;
	padding: 0px;
	margin: 0px;
	margin-bottom: 0px;
}

.bigger_text {
	font-size: 1.2em;
}

.bigger_table_text {
	font-size: 0.95em;
}

.bigger_definition_text {
	font: 1.6em Arial;
}

table, .ArticleOfTheDay, .TodaysHistory, .TodaysBirthday {
	font-size: 1em;
}

ul { /* Allow multi-column lists that line up along left */
	padding-inline-start: 0px;
	margin-block-start: 0px;
	margin-block-end: 0px;
	column-width: 190px;
	-webkit-column-count: 4;
	-moz-column-count: 4;
	-o-column-count: 4;
	column-count: 4;
}
ul li { /* Allow multi-column lists with no bullets */
	list-style-type: none; /* turn off bullets */
}

#content section div { /* Add a bit of sspace after each div in a section */
	margin-bottom: 5px;
}

div#content .title_div {
	padding: 5px;
	margin: -10px -10px 5px -10px;
	border: 10px;
	border-radius: 5px 5px 0px 0px;
	background: #ffcc00; /* dark yellow */
	color: black;
	text-align: center;
}
.title_div {
	padding: 5px;
	margin: -5px -5px 5px -5px;
	border: 10px;
	border-radius: 5px 5px 0px 0px;
	background: #ffcc00; /* dark yellow */
	color: black;
	text-align: center;
}

div#content .title_span {
	display: inline-block;
	font-weight: bold;
}

.title_span {
	display: inline-block;
	font-weight: bold;
}

#div-gpt-ad-1499952499353-0.no_border {
	border: 0px;
	padding: 0px;
}

#right_ad {
	/*padding: 0px 0px 10px 0px;*/
	padding: 0px;
	border: 0px;
}

#right_ad div {
	/*padding: 0px 0px 10px 0px;*/
	padding: 0px;
	border: 0px;
}

.small_text {
	font-size: 0.78em;
}

.rd_heading {
	font-size: 0.8em;
	font-weight: bold;
	background-color:#FFFF00;
}

.rd_heading_small {
	font-size: 0.7em;
	font-weight: bold;
	background-color:#FFFF00;
}

.show {
	display: initial;
}

.button {
	display: inline-block;
	border-radius: 4px;
	background-color: #4CAF50;
	border: none;
	color: #FFFFFF;
	text-align: center;
	font-size: 14px;
	padding: 5px;
	width: 120px;
	transition: all 0.5s;
	cursor: pointer;
	margin: 5px;
}

.settings_button {
	display: inline-block;
	border-radius: 4px;
	background-color: #4CAF50;
	border: none;
	color: #FFFFFF;
	text-align: center;
	font-size: 14px;
	padding: 5px;
	width: 300px;
	min-width: 125px;
	transition: all 0.5s;
	cursor: pointer;
	margin: 5px;
}

.big_button {
	display: inline-block;
	border-radius: 8px;
	background-color: #4CAF50;
	border: none;
	color: #FFFFFF;
	text-align: center;
	font-size: 1em;
	padding: 10px 20px 10px 20px;
	max-width: 250px;
	min-width: 50px;
	margin: 5px;
}

.button span {
	cursor: pointer;
	display: inline-block;
	position: relative;
	transition: 0.5s;
}

.button span:after {
	content: '\00bb';
	position: absolute;
	opacity: 0;
	top: 0;
	right: -20px;
	transition: 0.5s;
}

.button:hover span {
	padding-right: 15px;
}

.button:hover span:after {
	opacity: 1;
	right: 0;
}

.header {
	float: left;
}

form {
	padding: 0;
	margin-top: 0px;
	margin-bottom: 0px;
}

span#calendarspace {
	border: 0;
	padding: 0px 0px 2px 0px; /* Padding below calendar and above years. */
}