@charset "UTF-8";
:root {
	--font-body: Verdana;
	--font-heading: "Century Gothic", "Helvetica", "Arial", sans-serif;
	--radius: 10px;
	--color-key-peach: #ffd6c8;
	--color-key-pink: #fdc7ff;
	--color-key-yellow: #ffea7a;
	--color-key-gold: #ffdc50;
	--color-key-bright-yellow: #ffef4d;
}
/* elements */
h1 {
	font-family: "Georgia", "Times New Roman", serif;
	font-size: 20px;
	text-align: center;
	font-weight: normal;
	clear: both;
	margin: 70px 0 40px;
}
h2 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	color: #78c8ff; /* green: #247E04; */
	margin-top: 60px;
}
h3, .dream-title {
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	margin: 60px 0 50px;
}
h4 {
	font-family: var(--font-heading);
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	color: #247E04;
	margin: 36px 0 32px
}
h5 {
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	margin: 36px 0 32px
}
h6 {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	margin: 30px 0 24px;
	color: #3dbb10;
}
.header-sub {
	font-family: "Georgia", "Times New Roman", serif;
	margin-top: 6px;
	display: block;
	color: #919191;
}
h1 .header-sub {
	font-size: 16px;
}
h2 .header-sub {
	font-size: 16px;
	margin-top: 0;
	font-weight: normal;
}
h3 .header-sub {
	font-size: 14px;
	font-weight: normal;
	color: #b5b5b5;
}
h4 .header-sub {
	font-size: 13px;
	font-weight: normal;
	color: #b5b5b5;
	margin-top: 4px;
}
h5 .header-sub {
	font-size: 12px;
	font-weight: normal;
	color: #b5b5b5;
}
sup {
	vertical-align: top;
	font-size: 0.6em;
	position: relative;
	top: -0.5em;
}
h1 + h3 {
	margin-top: 0px;
}
h2 + h3 {
	margin: 40px 0 36px;
}
.quote i {
	font-family: "Times New Roman";
	line-height: 15px;
    font-size: 14px;
    letter-spacing: 0.4px;
}
input[type="submit"] {
	margin-top: 10px;
}
input[type="text"] {
	width: 300px;
	padding: 2px 6px;
	margin: 2px 0;
}
select {
	margin: 2px 0;
	padding: 2px 4px;
}
textarea {
	padding: 10px 15px;
	border-radius: var(--radius);
	margin: 6px 0;
	font-family: var(--font-body);
	font-size: 12px;
	line-height: 16px;
}
#books {
	font-family: "Times New Roman", "Times", serif;
	font-size: 16px;
}
#books h1 {
	margin: 20px 0 10px;
	text-align: left;
}
#books p {
	margin: 0 0 6px;
	line-height: 18px;
}
p {
	text-indent: 10px;	
	padding: 0;
	margin: 0 0 8px;
	line-height: 16px;
}
a:link, a:visited, .link {
	color: #0099ff;
	text-decoration: none;
	cursor: pointer;
}
hr {
	height: 1px;
	border: none;
	border-top: solid 1px gainsboro;
	margin: 9px 30px 16px 30px;
}
h1 + h2 {
	margin-top: 0;
}
h2 + div {
	margin-top: 40px !important;
}
td {
	vertical-align: top;
}
ol {
	counter-reset: list;
}
ol > li {
	list-style: none;
	position: relative;
}
ol > li:before {
	counter-increment: list;
	content: counter(list, numeric) ") ";
	position: absolute;
	left: -1.4em;
	content: counter(list, upper-alpha) ") ";
}
ol.numeric > li:before {
	content: counter(list, numeric) ") ";
}
ol.numeric-dot > li:before {
	content: counter(list, numeric) ". ";
}
ol.lowercase > li:before {
	content: counter(list, lower-alpha) ". ";
}
ol.bothparen > li:before {
	content: " (" counter(list, numeric) ") ";
}
table {
	margin-top: 16px;
	margin-bottom: 16px;
}
thead tr {
	background-color: #ffe374;
}
tr {
	background-color: #fff;
}
tr:nth-child(even) {
	background-color: #f3f3f3;
}
td {
	padding: 4px 8px;
}
div + h1 {
	margin-top: 80px;
}
div + h2, div + h3, div + h4 {
	margin-top: 50px;
}

/* ids and classes */
.heading {
	font-family: "Helvetica", "Arial", sans-serif;
	font-size: 30px;
	font-weight: normal;
	margin: 6px;
	text-align: center;
}
.left {
	float: left;
	display: inline-block;
}
.left img {
	margin-right: 20px !important;
	margin-top: 0 !important;
}
.right {
	float: right;
	display: inline-block;
}
.right img {
	margin-left: 20px !important;
	margin-top: 0 !important;
}
.center {
	margin: 0px auto;
	text-align: center;
}
.image-right {
	float: right;
	margin-left: 20px;
}
.image-right img {
	margin: 0 0 20px 0;
}
.image-right .text-image {
	margin-top: 0 !important;
}
.book-title {
	font-family: "Times New Roman", "Times", serif;
	font-size: 26px;
	text-align: center;
}
.section-title {
	font-size: 24px;
    text-align: center;
    font-family: "Georgia", "Times New Roman", serif;
    margin: 40px 0 30px;
    border-top: solid 1px #e0e0e0;
    border-bottom: solid 1px #e0e0e0;
    padding: 20px;
}
#main-body {
	width: 648px;
	margin: 0 auto;
	font-family: var(--font-body);
	font-size: 12px;
}
#top-nav, #admin-nav, .dream-nav {
	text-align: center;
	margin: 7px 0 20px 0;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;	
}
.dream-nav {
	font-size: 16px;
	font-weight: bold;
}
.quote {
	margin: 16px 0;
	padding: 20px 20px 8px;
	background-color: #faf4d9;
	border-radius: var(--radius);
	position: relative;
	font-family: Baskerville, "Adobe Garamond Pro", "Times New Roman", serif;
	font-size: 15px;
	line-height: normal;
}
.book .quote {
	margin: 16px 40px;
    padding: 4px 20px 8px;
}
.quote p {
	line-height: 17px;
	letter-spacing: -0.2px;
}
.quote > p:first-child,
.quote > div.poem {
	margin-top: 16px;
}
.quote hr {
	border-color: #e5dec0;
    margin: 20px 60px;
}
.quote-word-count {
	position: absolute;
	right: 14px;
	bottom: 8px;
	font-size: 10px;
	color: #d6c68b;
	font-family: Verdana, Geneva, sans-serif;
}
.book .quote-word-count {
	display: none;
}
.quote-overuse {
	color: #dc8484;
	margin-left: 4px;
}
.quote-title, .my-quote-title {
	margin-bottom: 16px;
}
p + .quote-title, p + .my-quote-title {
	margin-top: 16px;
}
.quote.exp {
	margin: 6px 13px 16px;
	border-top: solid 2px var(--color-key-gold);
}
.quote.exp.key {
	margin-bottom: 16px;
	margin-top: 16px;
}
.quote .quote {
	margin: 0 14px 20px;
    padding: 0 20px 0;
}
.quote .quote.exp {
    margin: 16px 14px;
    padding: 6px 20px 8px;
    border-radius: 12px;
    background-color: #feffe1;
    border-top: solid 4px var(--color-key-gold);
}
.quote .key {
    background-image: linear-gradient(112deg, var(--color-key-peach), #fee686);
    padding: 20px 20px 8px;
    margin: 15px 0 20px;
}
.summary {
	position: relative;
	border-radius: 14px;
	background-color: #fffcef;
	padding: 12px 20px;
	/* acting as a paragraph */
	text-indent: 10px;
    margin: 0 0 8px;
}
.summary .show {
    position: absolute;
    bottom: 8px;
    right: -14px;
}
.summary .quote {
	display: none;
	margin: 16px 0;
}
.summary .sum .cite {
	margin-left: 2px;
    font-size: 10px;
    color: #d6c680;
    text-wrap: auto;
}
.me {
	background-color: white;
	margin: 30px 20px;
	font-family: var(--font-body);
	font-size: 12px;
	line-height: 16px;
	position: relative;
}
.me:not[.key] + .me:not[.key] {
	margin-top: -10px;
}
.me + .psychedelic {
	margin-top: -10px;
}
.me.key + p.see {
    margin-top: -10px;
    margin-bottom: 30px;
}
.me + .me.below {
    margin-top: -10px;
}
.me.below + .psychedelic {
	margin-top: 16px;
}
.me.above {
	margin-top: 20px;
}
.me.above > p:first-child::before {
	content: '⬆ ';
	font-size: 18px;
	position: relative;
	top: -5px;
	color: #ffd942;
}
.me.above.key {
	margin-top: 14px;
}
p + .me.key {
	margin-top: 20px;
}
.me.below, .me.below p:last-child {
	margin-bottom: 6px;
}
.me.below p:last-child::after {
	content: '⬇ ';
	font-size: 18px;
	position: relative;
	top: 5px;
	color: #ffd942;
	margin-left: 3px;
	line-height: 11px;
}
.me.key {
	margin-top: 35px;
	padding: 20px 20px 12px;
}
.section {
	margin: 18px 0 ;
}
#main-body.mine {
	font-family: var(--font-body);
	font-size: 12px;
}
#main-body.mine p {
	line-height: 16px;
}
.script {
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: bold;
	color:#03C	
}
.my-note {
	background-color: white;
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: 12px;
	padding: 0 6px;
	margin: 0 2px;
	line-height: 14px;
	border-left: solid 1px #00d4ff;
	border-right: solid 1px #00d4ff;
}
.note {
	font-weight: bold;
	color:#03C	
}
.attr {
	white-space: nowrap;
	margin: 0 3px;
}
.attr a, .summary-show {
	color: #69bbf0;
	font-family: var(--font-body);
	font-size: 12px;
	cursor: pointer;
}
figcaption, .image-attr {
	text-align: center;
	font-size: 10px;
	font-family: var(--font-body);
	margin-bottom: 20px;
	line-height: 13px;
}
.image-attr {
	opacity: 0.5;
	margin-top: -10px;
}
figure figcaption {
	margin-top: -10px;
}
.important:first-child {
	margin-top: 0;
}
.important:last-child {
	margin-bottom: 0;
}
.image-attr + .image-attr,
.loc .image-attr + .image-attr {
    margin-top: -15px;
    font-size: 9px;
	opacity: 0.5;
}
figcaption + .image-attr {
    font-size: 9px;
	margin-top: -14px;
	opacity: 0.5;
}
.caption {
	margin-bottom: 10px;
}
.h1-sub-header {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	margin-top: 12px;
    color: #c6c6c6;
}
.large {
	font-size: 16px;
}
.large-bold {
	font-size: 16px;
	font-weight: bold;
}
.dream-topics .dream h3 {
	font-size: 13px;
}
.source {
	min-height: 70px;
	padding-top: 16px;
	clear: left;
}
.source img,
.source .no-cover {
	float: left;
	padding-right: 12px;
	height: 77px;
	width: 54px;
}
.source-text {
	float: left;
	width: calc(100% - 90px);
}
.source-acronym {
	font-weight: bold;	
	font-size: 12px;
}
.public-domain {
	color: #51ac15;
	font-weight: bold;
}
.source-title {
	font-weight: bold;
	font-size: 16px;
}
.author {
	font-weight: bold;
	color: #9e27cd;
}
.source-types {
	font-style: italic;
	margin-left: 2px;
	color: #1ec2c4;
}
.cultural-groups {
	color: #008f66;
	font-style: italic;
}
.source-type {
	position: absolute;
	top: 0;
	right: 0;
	border-radius: 0 10px 0 10px;
	background-color: #ffe77f;
	padding: 3px 15px;
	font-family: var(--font-body);
	font-size: 12px;
	text-indent: 0;
	display: block;
}
.book .source-type {
	display: none;
}
.attr-corner {
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 10px 0 10px 0;
	background-color: #ffe77f;
	padding: 3px 15px;
	font-family: var(--font-body);
	font-size: 12px;
	text-indent: 0;
}
.attr-corner a {
	color: #937500;
}
.book .quote .attr-corner {
	display: none;
}
.dream .attr-corner {
	background-color: #dfffa9;
	padding: 7px 30px;
}
.dream .attr-corner .dream-name {
	font-weight: bold;
}
.dream .attr-corner .dream-date {
	color: #a6d369;
}
.age {
	position: absolute;
    left: calc(100% + 12px);
    width: 200px;
    font-size: 10px;
    line-height: 16px;
    color: #bcd98a;
}
.publisher {
	font-weight: bold;
	color: violet;
}
.illustrated-large {
	text-align: center;
}
.contents-note {
	font-size: 14px;
}
.paper-text {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	font-weight: bold;
}
.stars {
	line-height: 5px;
	position: relative;
	top: 8px;
}
.depth-0 {
	font-size: 18px;
	font-weight: bold;
	padding: 20px 0 10px;
}
.depth-0 a {
	color: #000;
}
.depth-1 {
	font-size: 16px;
	font-weight: bold;
	padding: 12px 0 7px;
}
.depth-1 a {
	color: #00C5D6;
}
.depth-2 {
	padding-left: 8px;
	font-weight: bold;
}
.depth-3 {
	padding-left: 16px;
}
.depth-4 {
	padding-left: 30px;
	font-size: 12px;
}
#anchor-spacer {
	height: 850px;
}
.order-source {
	text-align: center;
	margin-bottom: 30px;
}
.hidden {
	display: none;
}


/* Admin */
.dream-admin-header {
	font-size: 16px;
	font-weight: bold;	
}
input[type="text"].short-text {
	width: 120px;
}
#dream-text {
	width: calc(100% - 30px);
	height: 200px;
}
#tag-introduction, #location-description {
	width: 550px;
	height: 200px;
}
.tag-intro {
	color: #333;
	margin: 30px 20px;
}
.tag-intro .key {
	margin-top: 10px;
	padding: 20px 20px 12px;
	background-image: linear-gradient(112deg, var(--color-key-peach), var(--color-key-yellow));
}
.tag-intro .key::before {
	padding: 0;
	top: 0;
	left: 0;
}
.tag-intro .key + .see {
	top: -20px;
}
.my-key {
	margin: 30px 20px;
	font-family: var(--font-body);
	font-size: 12px;
	line-height: 16px;
	padding: 20px 20px 12px;
	border-radius: var(--radius);
	position: relative;
	background-image: linear-gradient(112deg, var(--color-key-peach), var(--color-key-yellow));
}
.bold {
	font-weight: bold;
}
.uses {
	font-weight: bold;
	color: #f07bc1;
}
.comment-text {
	width: 650px;
	height: 120px;
}
.excerpt-text {
	width: 650px;
	height: 200px;
}
.dream-excerpt-text {
	width: 650px;
	height: 200px;
	background-color: #eaffde;
}
.sortable-list {
	list-style-type: none; 
	margin: 0; 
	padding: 0;
}
.sortable-list li div:hover {
	/*background-image: none;
	background-color: #FCFFC0;*/
}
.list-items {
	font: 13px/17px tahoma, arial, sans-serif;
}
.list-items a {
	text-decoration: none;
}
.list-items a:hover {
	text-decoration: underline;
}
/* Single Uses */
#transformational-table {
	width: 100%;
}
#transformational-table td {
	width: 50%;
	vertical-align: top;
	padding: 6px;
}
#illustrated-contents p {
	text-indent: 0;
	margin: 7px 10px;
}
#illustrated-contents a {
	text-decoration: none;
	font-size: 14px;
}
#illustrated-contents h3 {
	text-align: left;
	margin: 20px 10px 0;
}
.mature {
	font-weight: bold;
	text-align: center;
	margin-bottom: 20px;
	color: rgb(219, 147, 55);
	font-size: 14px;
}
h3 + .mature {
	margin-top: -20px;
}
.comment {
	background-color: #fff;
	padding: 14px 14px 6px;
	margin: 0px 10px 10px;
	border-radius: 6px;
	border-bottom: solid 2px #e7e7e7;
	position: relative;
}
.book .comment a {
	display: none;
}
.comment.key {
	background-image: linear-gradient(112deg, var(--color-key-peach), var(--color-key-yellow));
	margin-bottom: 10px;
	margin-top: 16px;
}
.clear-after:after, .comment:after, .dream::after, .me::after {
	content: '';
	display: table;
	clear: both;
}
.comment > a {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 4px 10px;
	border-radius: 0 10px 0 10px;
	font-size: 11px;
}
.key-comment-star {
	width: 40px;
	color: gold;
}
#edit-comment .dream {
	max-height: 300px;
	overflow:  auto;
}
.dream-controls {
	position: absolute;
	top: 0;
	right: 0;
	padding: 6px 15px 0;
	border-radius: 0 15px 0 15px;
	font-size: 12px;
	font-weight: normal;
	font-family: var(--font-heading);
}
.book .dream-controls {
	display: none;
}
.dream-name {
	position: relative;
}
.dream-stars {
	position: absolute;
	right: -45px;
	top: -2px;
	width: 40px;
	color: gold;
	text-align: left;
}
.dream-date {
	font-weight: normal;
	font-size: 12px;
	color: #989898;
	display: inline-block;
	margin-top: 8px;
}
.dream-time {
	font-size: 12px;
}
.dream.short-header {
	padding-top: 48px;
}
.dream {
	background-image: linear-gradient(112deg, #eaffde 40%, #d2ffb9);
	padding: 2px 20px;
	border-radius: 15px;
	margin: 16px 0;
	position: relative;
}
.dream > p:first-child {
	margin-top: 18px;
}
.dream p:last-child {
	padding-bottom: 8px;
}
.comment p:last-child {
	padding-bottom: 0;
}
#dream-list {
	line-height: 18px;
	font-family: var(--font-body);
	font-size: 12px;
}
#dream-list a {
	color: #0099ff;
	text-decoration: none;
}
.stars-list {
	color: gold;
}
.date-list {
	font-style: italic;
	color: #898989;
}
.comments {
	margin-top: 16px;
	clear: both;
}
/* dream styles outside of the dream journal sections */
.dream-outside {
	font-family: var(--font-body);
	font-size: 12px;
	margin: 16px 16px;
}


/* Contents */
.web #contents-nav {
	left: 0;
	top: 0;
	position: fixed;
	z-index: 5;
}
.book #contents-nav {
	text-align: center;
}
#contents-title {
	font-family: var(--font-heading);
}
.web #contents-title {
	font-size: 14px;
	background-color: #a4dbff;
	color: white;
	padding: 10px;
	letter-spacing: 1px;
	cursor: pointer;
	writing-mode: vertical-rl;
	text-orientation: mixed;
}
.series-heading, .book #contents-title {
    font-family: "Helvetica", "Arial", sans-serif;
    font-size: 15px;
    font-weight: normal;
    margin: 6px 6px 12px;
    text-align: center;
    padding: 5px;
    color: #565656;
    background-color: #daeffe;
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(218,239,254,1) 10%, rgba(218,239,254,1) 90%, rgba(255,255,255,1) 100%);
}
.web #contents {
	border: 1px dashed #000;
	padding: 10px 20px 20px;
	display: none;
	max-height: calc(100vh - 116px);
	max-width: 400px;
	overflow: auto;
	background-color: white;
}
.book #contents {
    margin: 10px auto 50px;
    display: inline-block;
}
#contents a {
	color: inherit;
	text-decoration: none;
}
#contents br {
	display: none;
}
#contents h1, #contents h2, #contents h3, #contents h4, #contents h5, #contents h6 {
	margin: 0;
	text-align: left;
	font-weight: normal;
}
#contents h1 {
	font-size: 16px;
	margin: 12px 0 5px 0;
}
#contents h2 {
	font-size: 15px;
	margin: 5px 0 4px 10px;
}
#contents h3 {
	font-size: 13px;
	margin: 3px 0 0 20px;
}
#contents h4 {
	font-size: 12px;
	margin: 3px 0 3px 35px;
}
#contents h5 {
	font-size: 11px;
	margin: 3px 0 3px 50px;
}
#contents h6 {
	font-size: 10px;
	margin: 3px 0 3px 65px;
}
#contents .header-sub {
	font-size: 12px;
	margin-top: 0;
}
#contents h3 .header-sub {
	font-size: 12px;
	margin-left: 10px;
}
#contents h4 .header-sub {
	font-size: 11px;
	margin-left: 5px;
}
#contents h5 .header-sub {
	font-size: 10px;
	margin-left: 5px;
}

.psychedelic {
	margin: 16px 0;
	padding: 22px 20px 14px;
	border-radius: var(--radius);
	background-image: linear-gradient(112deg, var(--color-key-peach) 40%, var(--color-key-pink));
}
.psychedelic.exp {
	margin: 16px 34px;
	border-top: solid 4px var(--color-key-gold);
}
.psychedelic.key {
	margin-top: 35px;
	margin-bottom: 35px;
}
.psychedelic > img:first-child {
	margin-top: 0;
}

/* The best gradient border - but doesn't work nested over a background */
.key {
	border-radius: var(--radius);
	position: relative;
	box-sizing: border-box;
	margin-bottom: 25px;
	margin-top: 25px;
	color: #000000;
}
.key::before {
	border-radius: 14px;
	content: '';
	background-image: linear-gradient(112deg, var(--color-key-peach), var(--color-key-pink));
	padding: 7px;
	width: 100%;
	height: 100%;
	top: -7px;
	left: -7px;
	position: absolute;
	z-index: -1;
}
.psychedelic.key::before {
	background-image: linear-gradient(112deg, var(--color-key-bright-yellow), orange);
}
.key + .above {
	margin-top: -2px;
}
.key > div:not[.my-quote-title] {
	margin-top: 35px; /* account for floating border */
}
.key > div.quote-title {
	margin-top: 0;
}
div > .key {
	margin-bottom: 35px !important; /* account for floating border */
}
.exp.key + .above {
	margin-top: 26px;
}
.exp.key + .above.key {
	margin-top: 34px;
}
.psychedelic.exp.key, .experience.key {
	border-top: none;
}
.psychedelic.exp.key::before {
	padding: 7px;
	top: -7px;
}
.key-mark {
	position: absolute;
	top: calc(50% - 17px);
	left: -44px;
	font-family: var(--font-body);
	font-weight: bold;
	font-size: 16px;
	color: gold;
}
.psychedelic .key-mark {
	top: -23px;
	right: 0;
	left: auto;
	color: #ffa40d;
}
.dream .key-mark {
	top: -16px;
	right: 8px;
	left: auto;
	color: #ffd107;
}

/* a different gradient border that works over gradient boxes but has squarish inner corners */
.psychedelic .psychedelic.exp.key {
	border-radius: var(--radius);
	background: linear-gradient(112deg, #fff0ea 30%, #ffe3f9) padding-box, 
		linear-gradient(112deg, var(--color-key-bright-yellow), orange) border-box;
	border: 7px solid transparent;
}
.psychedelic .key {
	border-radius: var(--radius);
	background: linear-gradient(112deg, #fff0ea 30%, #ffe3f9) padding-box, 
		linear-gradient(112deg, var(--color-key-bright-yellow), orange) border-box;
	border: 7px solid transparent;
	margin-bottom: 25px;
}
.experience .key {
	border-radius: var(--radius);
	background: linear-gradient(112deg, var(--color-key-peach) 40%, var(--color-key-pink)) padding-box, 
		linear-gradient(112deg, var(--color-key-bright-yellow), orange) border-box;
	border: 7px solid transparent;
}

.psychedelic .psychedelic.exp {
	margin: 16px;
	border-top: solid 4px var(--color-key-gold);
	background-image: linear-gradient(112deg, #fff0ea 30%, #ffe3f9);
}
.psychedelic .psychedelic.exp:first-child {
	margin-top: 0;
}
.psychedelic .experience {
	margin: 16px;
}
.experience {
	margin: 16px 13px;
	padding: 20px 20px 8px;
	border-radius: var(--radius);
	background-image: linear-gradient(112deg, #fffff3 40%, #f7ecb3);
	border-top: solid 4px var(--color-key-gold);
}
.experience .experience {
	margin: 16px;
	border-top: solid 4px var(--color-key-gold);
	background-image: linear-gradient(112deg, #fff3c6 30%, #feffe1);
}
.trip-image {
	width: 660px;
	margin: 20px 0 -15px;
	border-radius: 30px;
	border: solid 10px gold;
}
.note-image {
	border: 1px solid #999; 
	margin: 20px auto;
	display: block;
}
.note-image.top {
	margin: 0 20px 25px;
}
.text-image, .dream .text-image {
	margin: 20px auto 20px;
	display: block;
}
.center-image {
	margin: 0 auto 0;
	display: block;
}
.video-box {
	text-align: center;
	margin: 12px 0;
}
.video-box video {
	margin: 10px auto 20px;
}
p.important {
	font-size: 14px !important;
	line-height: 20px !important;
	margin: 20px 0;
	background-color: #ffede2;
	padding: 15px 30px;
	border-radius: var(--radius);
}
.quote p.important {
    font-size: 17px !important;
    line-height: 20px !important;
    margin: 15px 0;
    background-color: #fffbf4;
    padding: 15px;
    border-radius: var(--radius);
}
ol.important li, ul.important li {
	font-size: 14px !important;
	line-height: 18px !important;
}
.see {
    margin: 16px 30px;
    padding: 10px 20px 10px 50px;
    border-radius: var(--radius);
    border: solid 1px #d5d5d5;
    background: rgba(255, 255, 255, 0.8);
    position: relative;
    text-indent: 0;
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 16px;
    color: #6d6d6d;
}
.see:before {
    content: '➔';
    font-size: 16px;
    display: block;
    color: #acacac;
    position: absolute;
    top: 50%;
    left: 21px;
    transform: translateY(-50%);
}
.psychedelic .see, .experience .see {
	margin: 20px 30px;
	border: 0;
}
.psychedelic .see:last-child, .experience .see:last-child {
	margin: 28px 30px 2px;
}
.me .experience:last-child,
.me .psychedelic:last-child {
	margin-bottom: 0;
}
#letter-hole {
	margin:  0 auto;
	text-align: center;
	height: 20px;
	width: 20px;
	line-height: 20px;
	background-color: #fff;
	margin-bottom: 10px;
}
.image-set {
	display: flex;
	justify-content: space-evenly;
}
.image-set figure {
	margin: 0 10px;
    text-align: center;
}
.image-set .image-set-box {
	text-align: left;
}
.experience-date {
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 26px;
}
.check {
	color: #1bc526;
	margin-left: 4px;
}
.book .check {
	display: none;
}
.check.two {
	color: #609dff;
	margin-left: -3px;
}
.check.three {
	color: #f2ee04;
	margin-left: -3px;
}
.check::before {
	content: '✓';
}
.poem {
	margin-left: 20px;
	font-style: italic;
	text-indent: 0;
	line-height: 16px;
	margin-bottom: 10px;
	font-family: var(--font-body);
	font-size: 12px;
}
.subheading {
	font-weight: normal;
	font-size: 14px;
	display: inline-block;
	padding-top: 10px;
}
.info {
	color: #c6c6c6;
	font-style: italic;
	margin-left: 10px;
	font-weight: 100;
	font-size:  12px;
}

/* Locations */

.loc {
	margin: 20px 0;
	background-color: #efffd8;
	border-radius: var(--radius);
	padding: 30px 30px 1px;
	position: relative;
}
.loc .loc {
	margin: 20px 0;
	padding: 0;
	border: none;
}
.loc img {
	margin: 10px auto;
	border: solid 1px #000;
}
.loc .right img, .loc .left img {
	margin: 10px 20px;
}
.dream img {
	margin: 20px 20px 10px;
	border: solid 1px #000;
}
.dream .image-set img {
	margin: 20px 0;
}
.loc img.center {
	margin: 10px auto;
}
.loc-controls {
	font-size: 10px;
	font-weight: normal;
	margin-left: 4px;
	position: absolute;
    top: 10px;
    right: 10px;
}
.loc .image-attr {
	margin-top: 10px;
}
.item-pill {
	display:  inline-block;
	background-color: #c8ed8f;
	border-radius: var(--radius);
	padding: 5px 10px;
	margin-right: 6px;
}
#add-location {
	cursor: pointer;
}
.delete-location {
	margin-left: 6px;
	padding: 0 3px;
	cursor: pointer;
	position: relative;
	top: -1px;
}
.dreams-locations {
	margin-top: 4px;
	font-size: 13px;
	color: green;
}
.dreams-by-location {
	font-size: 12px;
	margin: 20px 0 15px;
}
.weak {
	font-size: 10px;
	font-style: italic;
	color: #979797;
}
.mixed .dream h3 {
	font-size: 12px;
	margin-top: 30px;
}
.mixed .dream .dream-date {
	margin-top: 2px;
}
.references {
	background-color: #eaffde;
	padding: 10px;
	border-radius: var(--radius);
	margin: 7px 0;
}
.no-border {
	border:  none;
}
.integrate {
	background-color: white;
    border: dotted gray 2px;
    padding: 10px;
}
.integrate:before {
	content: "INTEGRATE:";
	display: block;
	padding-bottom: 10px;
}
.image-overlay {
	position: relative;
    width: 100%;
    text-align: center;
}
.image-overlay .overlay {
	position: absolute;
	top: 55px;
    left: 112px;
}
.image-overlay .stack {
    display: inline-block;
    position: relative;
}
.audio-title {
	margin-bottom: 10px;
	color: #5c5c5c;
	font-weight: bold;
	text-align: left;
}
.audio figcaption {
	margin-top: 10px;
	margin-bottom: 10px;
	color: #5c5c5c;
}
.version {
	text-align: center;
	font-size: 11px;
    margin-top: -10px;
    margin-bottom: 30px;
   	color: #a2a2a2;
}
.pages {
	font-size: 10px;
    color: #addbff;
}
.book .pages {
	display: none;
}
.quote-percent {
    color: #d7b07e;
}
h1 .pages {
    position: relative;
    bottom: 3px;
    margin-left: 10px;
}
.cite {
	margin-left: 7px;
    font-size: 10px;
    color: #c5bb8d;
    text-wrap: nowrap;
}
.solo-edit {
	position: absolute;
    font-size: 11px;
    right: 12px;
    bottom: 7px;
}
.rounded {
	border-radius: var(--radius);
}
.sphere {
    border-radius: 50%
}
#mode {
	position: fixed;
    right: 10px;
    top: 3px;
    font-size: 10px;
}
.inner-quote {
    margin: 16px 20px;
}
.admin-link {
    font-size: 12px;
    font-family: var(--font-body);
}
.minor {
	font-style: italic;
	font-size: 11px;
	color: #cccccc;
}