@font-face {
  font-family: 'Tenor Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/tenor-sans.woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/open-sans.woff');
}

.image-inset {
	float: right;
	margin: 0px 0px 0px 15px;
}

.ui-widget-content a:active, a:active,
.ui-widget-content a:hover, a:hover,
.ui-widget-content a:link, a:link,
.ui-widget-content a:visited, a:visited {
	color: rgb(48,48,192);
	text-decoration: none;
}

.ui-widget-content a:hover, a:hover {
	color: rgb(96,96,145);
	text-decoration: underline;
}

#events .ui-widget-content a:hover, a:hover {
	text-decoration: none;
}

body, h3, p, td {
	font-family: 'Open Sans', 'Tenor Sans', verdana, helvetica, arial;
	font-weight: normal;
	color: rgb(64,64,64);
}

body {
	background-color: white;
	font-size: 16px;
        -webkit-text-size-adjust: 100%;
} 

p {
        hyphens: auto;
        overflow-wrap: break-word;
	text-align: justify;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
}

p.center {
        text-align: center;
}

p.alert-color {
        color: rgb(192,64,64);
}

#content_div {
	bottom: 0px;
	left: 0px;
	margin: 0px;
	padding: 0px;
	position: fixed;
	right: 0px;
	top: 0px;
	overflow: auto;
}

#content_div>table {
	border: none;
	border-spacing: 0px;
	height: 100%;
	margin: auto;
	padding: 0px;
}

#content_div>table>tr,
#content_div>table>tr>td {
	vertical-align: middle;
}

.content {
	background-color: white;
	border: 0px;
	top: 0px;
	left: 0px;
	margin: 0px auto auto auto;
	max-width: 720px;
	padding: 8px 20px;
	position: relative;
	right: 0px;
	width: 100%;
}

#copyright {
	font-size: 9pt;
	text-align: center;
}

#home-inner-box {
	background: 20px center no-repeat url('images/image4m.png');
	border-bottom: 1px solid rgb(192,160,128);
	border-top: 1px solid rgb(192,160,128);
	padding: 0px 0px 10px 0px;
}

#home-inner-right-box table {
	width: 100%;
}

#home-inner-right-box td {
	width: 50%;
}

#home-inner-right-box {
	background-color: rgb(250,250,250);
	border: 1px solid rgb(192,192,192);
	padding: 15px;
	border-radius: 16px;
	margin: 30px 6px 20px 260px;
}

#author-name {
	color: rgb(128,128,128);
	font-family: 'Tenor Sans', 'Open Sans', verdana, helvetica, arial;
	font-size: 24pt;
	font-weight: lighter;
	padding: 0px;
	margin: 0px;
	text-align: center;
	text-transform: uppercase;
}

#book-name {
	color: rgb(128,128,128);
	font-family: 'Open Sans', 'Tenor Sans', verdana, helvetica, arial;
	font-size: 10.5pt;
	font-weight: normal;
	margin-top: 0px;
	text-align: center;
}

.announce {
	color: rgb(128,128,128);
	font-size: 12pt;
	text-align: center;
}

#skyfireTall {
	display: none;
}
#skyfireTall img, #skyfireWide img  {
	border-radius: 8px;
}

#xmas-special,
#xmas-special a:active,
#xmas-special a:hover,
#xmas-special a:link,
#xmas-special a:visited {
	color: rgb(48,128,48);
	text-decoration: none;
}

#xmas-special b {
	color: rgb(128,48,48);
}

#book h2 {
	font-size: 16pt;
}

#book table {
	border: none;
	margin: 0px;
	padding: 0px;
}

#book table td {
	padding-bottom: 10px;
}

#book img#fits {
	width: 260px;
	float: left;
}

#excerpt .title, h1 {
	font-family: 'Tenor Sans', 'Open Sans', verdana, helvetica, arial;
	font-size: 24pt;
	margin: 0px 0px 0px 0px;
	padding: 0px;
}
#excerpt .sub-title {
	margin: 0px;
	padding: 0px;
}

#excerpt .right {
	text-align: right;
	float: right;
}

#excerpt .condensed {
	color: rgb(250,96,128);
}

#excerpt p {
}

#events .image {
	width: 220px;
}

#events .image img {
	max-height: 140px;;
	max-width: 296px;
}

#events .valign {
	vertical-align: middle;
}

#events td.gap {
	width: 10px;
}

#events #upcoming-events,
#events #past-events,
#faq #accordion {
	margin-top: 20px;
}

#events .ui-accordion-content,
#faq .ui-accordion-content {
	padding: 1em;
}

#upcoming-events .ui-widget,
#upcoming-events, h3,
#past-events .ui-widget,
#past-events, h3,
#faq .ui-widget,
#faq h3 {
	font-size: 1em;
}

#upcoming-events td.event,
#past-events td.event{
	width: 441px;
	text-align: left;
}

#upcoming-events .detail td,
#past-events .detail td {
	font-size: 11pt;
}

#upcoming-events hr,
#past-events hr {
	color: rgb(192,192,192);
	margin: 20px 0px;
}

#witness table {
	border-spacing: 0px 20px;
	padding: 0px;
	margin: 0px;
}
#witness td {
	vertical-align: middle;
}

#witness td p {
	text-align: left;
	padding: 0px;
	margin: 0px 0px 10px 0px;
}

#witness img {
	border: none;
	margin-right: 20px;
	width: 240px;
	opacity: 0.9;
}

p#best {
	margin-top: 0px;
}

p.quote {
	margin-top: 0px;
}

.image-inset img {
	margin: 0px 0px 2px 0px;
	border: 1px solid rgb(32,32,32);
}

#excerpt .image-inset p {
	margin: 0px;
	font-size: 8pt;
}

#upcoming-events,
#past-events {
	margin: 20px 0px;
}

#upcoming-events table table,
#past-events table table {
	border-spacing: 0px 8px;
	margin: 0px;
	padding: 0px;
}

#upcoming-events table table td:last-child,
#past-events table table td:last-child {
	border-left: 1px dotted rgb(128,128,128);
	padding-left: 10px;
}

#upcoming-events img,
#past-events img {
	float: right;
}

#upcoming-events table td.banner,
#past-events table td.banner {
        width: 100%;
}

#upcoming-events table td.banner img,
#past-events table td.banner img {
	float: none;
        max-width: 100%;
}

#upcoming-events .more-info,
#past-events .more-info {
	text-align: left;
}

#upcoming-events .event-name,
#past-events .event-name {
	color: rgb(64,64,128);
	font-size: 1.3em; 
	text-align: left;
	margin: 0px;
	padding: 0px;
} 

#guestbook textarea,
#guestbook table,
#guestbook tr,
#guestbook td,
#orderform textarea,
#orderform table,
#orderform tr,
#orderform td {
	margin: 0px;
	padding: 0px;
}

#guestbook input.button,
#orderform input.button {
        background-color: rgb(240,240,240);
        border-radius: 8px;
        margin: 0px 8px 0px 0px;
        padding: 8px;
}

#noscript {
	padding: 80px 0px;
}
#noscript p {
	color: rgb(192,64,64);
	text-align: center;
}

#orderform {
	display: none;
}

#orderform form {
        display: inline;
        margin: 0px;
}
#orderform #form-data {
        text-align: center;
        margin-top: 10px
}
#orderform .hide {
        display: none;
}
#orderform img,
#orderform input {
	border: none;
}
#orderform img[src^="images/cc-"] {
        max-width: 75%;
}

#orderform .heading {
        background-color: rgb(250,250,250);
        border: 1px solid rgb(128,128,128);
        border-radius: 10px;
        font-size: 1.1em;
        margin: 0px;
        padding: 10px;
        text-align: center;
}
#orderform table {
	border: none;
	margin: 0px;
	padding: 0px;
}

#orderform table td {
	padding-bottom: 10px;
}

#orderform table {
	width: 100%;
}
#orderform .smallcaps {
        font-size: 0.9em;
        text-transform: uppercase;
}
#orderform .warning {
        color: rgb(160,64,64);
}
#orderform table#products td.left {
        vertical-align: top;
}
#orderform table#products td.left p.desc {
        font-weight: bold;
        text-align: left;
}
#orderform table#products td.right {
        padding-top: 10px;
        text-align: right;
        vertical-align: top;
}
#orderform table#detail {
	width: 100%;
}
#orderform table#detail th {
	padding-bottom: 10px;
}
#orderform table#detail td {
	padding-bottom: 0px;
}

#guestbook input.contact,
#orderform input.contact {
        border: 0.9px solid black;
	font-size: 12pt;
	padding: 8px;
	width: 350px;
}

#guestbook textarea,
#orderform textarea {
        font-family: monospace;
	font-size: 12pt;
        padding: 8px;
	width: 100%;
}

#guestbook .heading {
        background-color: rgb(250,250,250);
        border: 1px solid rgb(128,128,128);
        border-radius: 10px;
        font-size: 1.1em;
        margin: 0px;
        padding: 10px;
        text-align: center;
}

#orderform select {
	font-size: 12pt;
}

#orderform .left {
	text-align: left;
}

#orderform .total,
#orderform .right {
	text-align: right;
}

#orderform .total {
	font-weight: bold;
}

.video-frame {
        text-align: center;
}
.video-frame img {
	border: none;
	width: 560px;
}
.video-frame iframe {
	border: none;
	width: 560px;
	height: 315px;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: rgb(32,32,32);
    color: rgb(180,180,180);
  }
  #author-name, #book-name, .announce, .content, h3, p, td {
    background-color: transparent;
    color: rgb(232,232,232);
  }
  #home-inner-box {
    background: 20px center no-repeat url('images/image4m_dark.png');
    background-color: rgb(32,32,32);
    color: rgb(232,232,232);
  }
  #home-inner-right-box, #guestbook .heading, #orderform .heading {
    background-color: rgb(48,48,48);
    color: rgb(232,232,232);
  }
  #orderform .warning {
    color: rgb(252,80,96);
  }
  img#onwinges {
    filter: invert(90%);
  }
  select, input[type="text"], textarea {
    background-color: rgb(192,192,192);
    color: black;
  }
  #guestbook input.button,
  #orderform input.button {
    background-color: rgb(160,160,160);
  }
  #upcoming-events .event-name,
  #past-events .event-name {
    color: rgb(232,232,232);
  }
  .ui-state-default, .ui-accordion-header .ui-state-default {
    background: none;
    background-color: rgb(64,64,64);
    color: rgb(232,232,232);
  }
  .ui-state-active, .ui-accordion-header .ui-state-active {
    background: none;
    background-color: rgb(48,48,48);
    color: rgb(232,232,232);
  }
  .ui-accordion-content, .ui-accordion-content > p {
    background: none;
    background-color: rgb(64,64,64);
  }
  .ui-widget-content a:active, a:active,
  .ui-widget-content a:hover, a:hover,
  .ui-widget-content a:link, a:link,
  .ui-widget-content a:visited, a:visited {
    color: rgb(128,192,255);
    text-decoration: none;
  }
}

@media all and (max-width: 1024px) {
	body {
		font-size: 16px;
                -webkit-text-size-adjust: 100%;
	}
	#upcoming-events .detail td,
	#past-events .detail td {
		font-size: 10pt;
	}
	.content {
		width: 100%;
	}
	#guestbook input.contact,
	#guestbook textarea,
	#orderform input.contact,
	#orderform select,
	#orderform textarea {
		font-size: 10pt;
	}
	#home-inner-box {
		padding: 8px 0px;
	}
	#home-inner-right-box {
		/*background-color: rgb(250,250,250);*/
		border: 1px solid rgb(192,192,192);
		padding: 18px;
		border-radius: 16px;
		margin: 10px 6px 10px 260px;
	}
}

#homepage {
	position: absolute;
	top: 0px;
	right: 20px;
	margin: 0px;
        z-index: 10;
}

@media all and (max-width: 640px) {
	body {
		font-size: 16px;
                -webkit-text-size-adjust: 100%;
	}
	#copyright {
		font-size: 7.5pt;
	}
	#skyfireTall {
		display: block;
	}
	#skyfireWide {
		display: none;
	}
	#upcoming-events .detail td,
	#past-events .detail td {
		font-size: 10pt;
	}
	.content {
                width: 100%;
		padding: 8px 0px;
	}
	.announce {
		font-size: 9pt;
	}
	#guestbook input.contact,
	#guestbook textarea,
	#orderform input.contact,
	#orderform textarea {
		width: 274px;
		font-size: 10pt;
	}
	#orderform select {
		font-size: 10pt;
	}
	#home-inner-box {
		/*background: white;*/
		border-bottom: none;
		border-top: none;
		padding: 8px;
	}
	#home-inner-right-box {
		padding: 15px;
		margin: 12px auto 10px auto;
	}
	#home-inner-box td {
		width: 50%;
	}
	#book img#fits {
		width: 112px;
	}
	#upcoming-events table td.banner,
	#upcoming-events table td.image,
	#past-events table td.banner,
	#past-events table td.image {
		display: none;
	}
	#excerpt .condensed {
		font-size: 10.5pt;
	}
	#excerpt .image-inset p,
	#excerpt .image-inset img {
		font-size: 7.5pt;
		text-align: left;
		width: 136px;
	}
	#excerpt .title, h1 {
		font-size: 22pt;
	}
	#faq h3 {
		font-size: 1em;
	}
	#faq .ui-accordion-content {
		padding: 1em;
	}
	#faq p {
		font-size: 1em;
	}
	#homepage {
		top: -6px;
		right: 0px;
	}
	#witness img {
		width: 120px;
	}
	.video-frame img {
		width: 260px;
        }
	.video-frame iframe {
		width: 260px;
		height: 146px;
	}
}