/* Test Styling for Development */

p, h4 {
	margin: 0;
	padding-top: 0.7rem;
	padding-bottom: 0.7rem;
}

.columns {
	display: flex;
	justify-content: center;
	gap: 30px;
}

.column {
	display: inline-block;
	flex: 1;
	min-width: 0;
}

#office.double-width {
	width: 1100px;
}

#martyrology {
	white-space: pre-wrap;
}
/* abcjs styling */
.abcjs-title {
	display: none;
}
/* exsurge styling */
text.dropCap tspan {
	fill: maroon;
	font-size: 60px;
	line-height: 60px;
	padding-top: 4px;
	padding-left: 3px;
}

/* Site-wide styling */

body {
    text-align: justify;
    background-color: rgb(234, 234, 234);
	font-family: "EB Garamond", serif;
	font-weight: 450;
	font-size: large;
}

button {
	font-family: inherit;
	font-size: small;
	font-weight: inherit;
}

h1 {
    text-align: center;
}

h2 {
	text-align: left;
}

h3 {
    text-align: center;
	color: maroon;
}

h4 {
	color: maroon;
}

h4 i {
	color: black;
	font-weight: normal;
}

input[type="radio"] {
	margin-left: 10px;
	margin-right: 5px;
}

.italic {
	font-style: italic;
}

.center {
    text-align: center;
}

@supports not ((initial-letter: 2) or (-webkit-initial-letter: 2)) {
	.dropcap::first-letter {
		color: maroon;
		float: left;
		font-size: 60px;
		line-height: 60px;
		padding-top: 4px;
		padding-left: 3px;
	}
}

@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
	.dropcap::first-letter {
		color: maroon;
		initial-letter: 2;
		-webkit-initial-letter: 2;
	}
  }

.hidden {
	display: none;
}

.hymn-line {
	display: block;
}

.hymn-line:first-child::first-letter {
	color: maroon;
}

.liturgical-date {
	text-align: center;
	font-style: italic;
	font-size: 1.4rem;
}

.rubric {
    color: maroon;
}

.black {
    color: black;
}

.note {
    font-variant: small-caps;
}

.bold {
	font-weight: bold;
}

#title {
	color: maroon;
	font-family: "EB Garamond", serif;
	font-size: 2.2rem;
}

#office {
	width: 600px;
	max-width: 90%;
	margin: auto;
	margin-top: 130px;
	padding: 20px;
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px 0px;
}

#promotion {
	max-width: 600px;
	margin: auto;
}

#clocks {
	position: fixed;
	left: 7.3%;
	top: 30%;
	height:150px;
	width: 150px;
	text-align: center;
	display: none;
}

/* Tabs */
/* Style the tab bar */
.tab-container {
	display: flex;
	justify-content: center;
}
.tab-bar {
	overflow: hidden;
	border: 1px solid #ccc;
	border-radius:6px;
	background-color: #f1f1f1;
	display: inline-block;
	margin-top: 8px;
  }
  
  /* Style the buttons that are used to open the tab content */
  .tab-bar button {
	background-color: inherit;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 12px 10px;
	transition: 0.3s;
	color: black;
  }
  
  /* Change background color of buttons on hover */
  .tab-bar button:hover {
	background-color: #ddd;
  }
  
  /* Create an active/current tablink class */
  .tab-bar button.active {
	background-color: #ccc;
  }


/* Nav Bar */

.drop-menu {
	display: none;
	position: absolute;
	background-color: white;
	border:1px solid #dcdcdc;
}

.drop-container:hover .drop-menu {
	display: block;
	z-index: 1;
}

.drop-container {
	position: relative;
}

#nav-bar .drop-menu button {
	border-radius: 0px;
}

.picker {
	max-height: 0px;
	max-width: 0px;
	opacity: 0;
	display:inline-block;
	position: fixed;
}

#nav-bar {
	width: 100%;
	color: #666666;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	position: fixed;
	top: 0;
	left: 0;
	border-bottom: 1px solid;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 4px -4px;
	z-index: 5;
}

#nav-bar > * {
	width: 230px;
	display: inline-block;
}

#nav-bar button {
    box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
	background-color:#ffffff;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color: #666666;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 10px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}

#nav-bar button:hover {
    background: linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
	background-color: #f6f6f6;
}

#nav-bar button:active {
	position:relative;
	top:1px;
}

#nav-bar .drop-button {
	cursor: default;
}

#nav-bar .drop-button:active {
	top: 0px;
}

#date-display {
	width: 146px;
}

#today-btn {
	width: 72px;
}

#picture-buttons {
	display: inline-block;
	position: relative;
	top: 6px;
}

#nav-bar .picture-button {
	height: 31px;
	width: 40px;
	margin: 0 5px;
	display: block;
}

.picture-button img {
	height: 20px;
}

.stack {
	display: inline-block;
}

.stack button {
	width: 110px;
}

#nav-bar, #office, .column {
	background-color: white;
}

.side-buttons {
	position: relative;
	bottom: 10px;
}

/* Bible Browser Styling */
.browser {
	margin: 5px;
}

#browser-display {
	margin: 10px;
}

#browser-reference {
	font-style: italic;
}

/* Sun Dial Styling */

th, td {
	font-size: small;
	text-align: center;
	border: 1px solid black;
	padding: 4px;
}

caption {
	font-size: small;
	font-weight: bold;
}

.info {
	border: 1px solid black;
	border-radius: 50%;
	height: 15px;
	width: 15px;
	display: inline-block;
	color: black;
	cursor: pointer;
}

#table-container {
	position: relative;
}

#info-box {
	position: absolute;
	left: 250px;
	bottom: 0px;
	background-color: white;
	font-weight: normal;
	border: 1px solid black;
	border-radius: 10px;
	font-size: small;
	width: 300px;
	text-align: justify;
	padding: 10px;
	z-index: 3;
}

#attribution {
	font-size: x-small;
	margin: auto;
	text-align: center;
	margin: 5px;
}

#permission {
	margin: 30px;
}

table {
	border-collapse: collapse;
	margin: auto;
}

#dial-container {
	background-color: white;
	width: 320px;
	height: 320px;
	border-radius: 10%;
	position: absolute;
	top: -65%;
	left: -55%;
}

#dial-container > div {
	position: relative;
	top: 40px;
}

#sun-dial {
	border: 5px solid grey;
	border-radius: 50%;
	height: 120px;
	width: 120px;
	margin: auto;
}

#sun-dial img {
	height: 20px;
}

#dial-cover {
	height: 60px;
	width: 130px;
	background-color: white;
	z-index: 1;
	border-top: 5px solid grey;
	position: relative;
	right: 5px;
}

#dial-hand {
	height: 60px;
	width: 5px;
	background-color: grey;
	margin: auto;
	transform-origin: top;
	position: relative;
	top:60px;
}

#sun-prime {
	bottom: 80px;
	right: 95px;
}

#sun-terce {
	bottom: 150px;
	right: 80px;
}

#sun-sext {
	bottom: 190px;
}

#sun-none {
	bottom: 184px;
	right: -80px;
}

#sun-evensong {
	bottom: 155px;
	right: -105px;
}

#sun-mattins {
	bottom: 140px;
	right: 60px;
}

#sun-compline {
	bottom: 165px;
	right: -50px;
}

.sun-label {
	font-size: small;
	position: relative;
	z-index: 2;
}

#sun-quote {
	font-size: small;
	position: relative;
	top: 25px;
}

/* Timer Styling */

#quote {
	position: absolute;
	top: -65%;
	left: -65%;
	width: 300px;
	font-size: small;
	text-align: center;
}

#time-button {
	font-size: small;
}

#background {
	height: 300px;
	width: 320px;
	background-color: white;
	border-radius: 10%;
	position: absolute;
	top: -65%;
	left: -55%;
	z-index: -1;
}

#switch {
	position: fixed;
	left: 10.5%;
	top: 19%;
}

#clock {
	height: 90px;
	width: 90px;
	border-radius: 50%;
	position: relative;
	left: 15%;
	top: 2%;
	border: 5px solid grey;
}

#clock-hand {
	height: 45px;
	width: 5px;
	background-color: grey;
	margin: auto;
	transform-origin: top;
	position: relative;
	top:45px;
}

#timer-container p {
	margin: 25px;
}

.clock-label {
	position: absolute;
	font-size: small;
}

#mattins-label, #compline-label {
	bottom: 20%;
}

#prime-label, #evensong-label {
	bottom: 55%;
}

#terce-label, #none-label {
	bottom: 85%;
}

#mattins-label {
	left: 0%;
}

#compline-label {
	right: 0%;
}

#prime-label {
	left: -12%;
}

#evensong-label {
	right: -14%;
}

#terce-label {
	left: 3%;
}

#none-label {
	right: 3%;
}

#sext-label {
	bottom: 100%;
	left: 38%;
}

/* Mobile and Print Styling */

@media screen and (max-width: 780px) {
	#title {
		display: none;
	}
	#nav-bar {
		all: unset;
		display: block;
		width: 315px;
		margin: auto;
	}
	#nav-bar > .side-buttons {
		width: 165px;
		margin-top: 10px;
	}
	#nav-bar > #date {
		width: 150px;
	}
	#browser-button {
		margin: unset;
		margin-left: 5px;
	}
	#office, #columns {
		margin-top: 10px;
	}
	#nav-bar .drop-button:active {
		top: 1px;
	}
}

@media screen and (max-width: 1310px) {
	#clocks {
		display: none;
	}
}

@media print {
	#nav-bar, .tab-bar, button, #timer-container {
		display: none;
	}
	#office {
		margin-top: 0;
		box-shadow: none;
	}
	body {
		background-color: white;
	}
}