body {
    font-family: 'Rubik', Arial, Helvetica, sans-serif;
    font-size:1.4rem;
    color:#666;
}

h2, h3 {
	margin-bottom:5px;
	margin-top:26px;
}
p {
	margin-top:5px;
}
a {
	color:#6fb269
}



#header {
	height:140px; 
	background-color:#82ce7b
}
#header_content {
	box-sizing: border-box;
    width:100%;
    max-width:800px;
    margin:0 auto;
	position:relative;
	overflow:show;
	padding-top:16px;
	height:100%;
	color:#fff;
	text-shadow:2px 2px 2px #000;
}
#header_content a {
	color:#fff;
}
#header_content #logo {
	position:absolute;
	bottom:-46px;
	left:-90px;
}
#header_content h1 {
	margin: 10px 0 0 80px;
	font-size:5.4rem;
	text-shadow:3px 3px 2px #000;
}

#header_content ul {
    position:absolute;
    left:80px;
    bottom:6px;
    overflow: visible;
}

#header_content li {
    display:inline-block;
    font-size:14px;
    font-weight:bold;
    text-align:center;
    padding:8px 10px;
	margin:0 5px;
    width:120px;
	 /* background-color:rgba(255, 255, 255, 0.9);  */
	/* border:1px solid #aaa; */
	margin-bottom:1px;
	cursor:pointer;
}
#header_content li:hover {
	background-color:rgba(255, 255, 255, 0.2);
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
#header_content #user {
	position:absolute;
	right:0;
	bottom:30px;
	padding:4px 6px;
}
#header_content #login {
	position:absolute;
	right:0;
	bottom:10px;
	cursor:pointer;
	padding:8px 10px;
}
#header_content #login:hover {
	background-color:rgba(255, 255, 255, 0.2);
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}











#content {
    box-sizing: border-box;
    width:100%;
    max-width:800px;
    margin:40px auto;
	padding-left:60px;

}
#content ul, #content ol {
    margin:0 2em; font-size:12px;
}
#content li {
	list-style: square;  font-size:12px;
}


#home h2 {
	margin-bottom:16px;
}


table.growlist {
	width:720px;
	margin:10px auto;
	table-layout: auto;
}
table.growlist th, table.growlist td {
	border:1px solid #aaa;
}
table.growlist th {
	background-color:#cdf2fa;
	padding:10px;
	text-align:left;
	font-size:1.6rem;
}
table.growlist th span {
	font-size:0.9rem;
}
table.growlist td {
	font-size:12px;
	vertical-align:top;
}

table.growlist td:first-child {
	width:151px;
	white-space: nowrap;
	padding:6px;
	font-size:0;
}
table.growlist td:last-child {
	padding:6px 10px;
	width:auto;
}

table.growlist .name {
	font-weight:700;
	font-size:14px;

}	
table.growlist .heat {
	font-weight:300;
	font-style: italic;
	float:right;
}
table.growlist .species {
	font-weight:300;
	font-style: italic;
}

table.growlist  .row {
  display: flex;
}
/* Create two columns that sit next to each other */
table.growlist .column1 {
  flex: 86%;
  padding: 10px;
}
table.growlist  .column2 {
  flex: 14%;
  padding: 4px 10px 0 10px;
  text-align:center;
}

#article_list .item {
	background-color:white; width:175px; padding:10px; height:175px;
}

#article_list .backdrop {
	border:1px solid #777; height:100%; background-size: cover;
}

#article_list .padding_for_inner_border {
	background-color:rgba(0,0,0,0.1); padding:6px; height:100%;
}
#article_list .padding_for_inner_border:hover {
	background-color:rgba(0,0,0,0.3);
}
#article_list .vertical-centre {
	padding:10px; display:flex; height:100%; border:1px solid #ddd;
	align-items: center; text-align:center;
}
#article_list .item-text {
	color:#fff; font-size:24px; font-weight:200; line-height:32px; text-shadow: 1px 1px 2px #333;
}



.diary_date {
	color:#6fb269
}
#diary .diary_date {
	float:right;
}
#diary div.title {
	overflow:auto;
	margin-top:40px;
	margin-bottom:10px;
}
#diary p{
	margin-bottom: 2rem;
	line-height:1.4em
}
#diary .title h3 {
	font-size:1.8rem;
	color:#6fb269;
	float:left;
	font-weight:bold;
	margin:0;
}

/* Navigation */

/* The 'hamburger' is styled using three divs within a label. Why is this a label
rather than a div? because it toggles a hidden checkbox (#toggle), and the state of
that checkbox is used as a pseudo-element to toggle the styles that display the menu */
.hamburger {
  position: absolute;
  top: 6em;
  right: 5%;
  margin-left: -2em;
  margin-top: -45px;
  width: 2em;
  height: 45px;
  z-index: 5;
  cursor:pointer;
}

.hamburger div {
  position: relative;
  width: 3em;
  height: 7px;
  border-radius: 3px;
  background-color: #fff;
  margin-top: 8px;
  transition: all 0.3s ease-in-out;
  
}

/* #toggle {
    display: none;
}

#toggle:checked + ul#menu {
	display:block;
}
 */






.modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display:none;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}

.modal-window {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 0.2rem 0.2rem;
    /*width: 24rem;*/
    border-radius: 0.5rem;
}
.modal-content {
    padding: 1rem 1rem;

}
.close-button {
    float: right;
    width: 1.2rem;
    line-height: 1.2rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
}

.close-button:hover {
    background-color: darkgray;
}

.show-modal {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}


/* Fancy <select> styles */
select.fancy {
	/* Reset */
	-webkit-appearance: none;
		-moz-appearance: none;
			appearance: none;
	border: 0;
	outline: 0;
	font: inherit;
	/* Personalize */
	
	padding: 0.4rem 1rem 0.4rem 0.6rem;
	width: 5rem;
	background: var(--arrow-icon) no-repeat right 0.6em center/1.4em, linear-gradient(to left, var(--arrow-bg) 3em, var(--select-bg) 3em);
	color: inherit;
	border-radius: 0.25em;
	box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
	cursor: pointer;
	/* Remove IE arrow */
	/* Remove focus outline */
	/* <option> colors */
}
select.fancy::-ms-expand {
display: none;
}
select.fancy:focus {
outline: none;
}
select.fancy option {
color: inherit;
background-color: var(--option-bg);
}