/*Bible Margin Styles Version 1 Created 27/3/2020 to reduce load times. */
/*V2 Quote reveal added */
/*V3 button added 23/7/2025 */
/*V4 un username class added 24/8/2025*/

html, body {
	height:100%;
	padding:0;
	margin:0;
}
body {
	font-family: Times New Roman;
	font-size:1em;
	color:#000;
	background-color:#fff;
	vertical-align:top;
	overflow-y:hidden;
}
h1 {
	margin-top: 5px; 
	padding-top:0;
	margin-bottom: 0px;
	font-weight:normal;
}
h3 {
	margin-top:0.5em;
	margin-bottom:0.5em;
}
a {
	margin-top:0px;
	outline:0;
	font-weight:normal;
}
.anchor {
	display:block;
}
textarea {
	border-style:solid;
	border-width:3px;
	border-color:#573b00;
	border-radius:10px;
	font-family: Times New Roman;
	font-size:1em;
	width: 97%;
}
input, button {
	border-style:solid;
	border-width:3px;
	border-color:#573b00;
	border-radius:7px;
	font-size:1em;
}
input[type="submit"], button {
	box-sizing:border-box;
	padding:2px;
	border-radius:10px;
	background-color:#573b00;
	font-size:1.02em;
	line-height:1em;
	font-weight:400;
	color:#573b00;
	color:#ffffff;
}
hr {
	border: none; /* Remove default border */
    border-top: 3px solid #744400; /* Set height (4px) and style */
}
.Margin1em {
	margin: 1em 0 1em 1em;
}
.yn { /* your note */
	padding-right: 1px;
	padding-left: 1px;
	background-color: #008fff;
	border-radius: 0.5em;
	color:#fff;
}
.on { /* others notes */
	position:relative; /* this is to make the z-index work */
	border:solid 1.7px #00f;
	border-radius: 0.5em;
	padding-right: 1px;
	padding-left: 1px;
	z-index: 2; /* to stop word & verse highlighting going over the top of this */
}
.cbv { /* chapter breakup verse number only */
	box-shadow:0px 0px 4px 2px #5dee64;
	border-radius: 0.5em;
}
.un { /*User Name that appears above the note */
	font-family:Helvetica;
	font-weight:bold;
	font-size:0.8em;
	color:#44f;
}

#menu {
	box-sizing:border-box;
	position:absolute;
	display:block;
	top:0px;
	left:0;
	width:225px;
	height:100%;
	padding:0px 8px 0px 7px;
	background-color: #0066cb;
	background:linear-gradient(to right, #0066cb 0%, #0066cb 92%, #1471c9 94%, #ffffff 100%);
	color:#ffffff;
	text-shadow:1px 1px 4px #000000;
	overflow-y:auto;
	z-index:2;
}
#menu a { color: lime; }
#menu a:visited { color: aqua; }
#menu a:hover { color:#ff8800; }
#menu a:active { color:#ffff00; }

table {
	border-spacing:0px;
}
td, tr {
	margin:0px;
	padding:0px;
	border:0px solid #000000;
}
.bullets {
	padding:0.5em 0;
}
.tableborders, .tableborders td, .tableborders th {
	border:1px solid #000000;
}
#ShareTable td, #ShareTable th {
	padding:0.2em;
}
#text {
	box-sizing:border-box;
	position:absolute;
	top:0;
	width:auto;
	height:100%;
	margin-left:220px;
	padding-left:0px;
	margin-right:25%;
	margin-right:max(15em, 25%);
	padding-right:0px;
	background-color:#ffffff;
	/* ooverflow-y:scroll; An overflow property here with any value stops snap scrolling working */
}
#text a {
	text-decoration:none;
	color:#000000;
}
#textinner { /*In theory this shouldn't be needed, but iOS won't stop in the middle pannel with snap scroll without it. Took 6-8 hours to find the problem*/
	height:100%; /* with 100vh it scrolls down wierd on iPad*/
	padding-left:0.5em;
	padding-right:0.5em;
	-webkit-overflow-scrolling: touch;
	overflow-y:scroll;
}
#NotesButtons {
	box-sizing:border-box;
	position:absolute;
	top:0;
	right:0;
	width:25%;
	min-width: 15em;
	height:1.5em;
	background-color:#744400;
	padding-top:4px;
	padding-bottom:3px;
	padding-left:5px;
	font-family:Helvetica;
	font-weight:bold;
}
#RightPanelContainer {
	min-width: 12em;
}
#rightpanel {
	box-sizing:border-box;
	position:absolute;
	top:1.5em;
	right:0;
	width:25%; /*calc(25% - 10px);*/
	min-width: 15em;
	height:calc(100% - 1.5em);
	padding-left: 0px;
	padding-right: 0px;
	background-color:#dac291;
	z-index:2;
}

#NewNote { display:none; }
#NewColour { display:none; }
#NewStartVerse {
	position:relative;
	z-index:4;
}
#NewEndVerse {
	position:relative;
	margin-top:0.1em;
	margin-bottom:0.1em;
	z-index:3;
}
#notes {
	position:relative;
	height:100%;
	padding-left: 5px;
	padding-right: 5px;
	overflow-y:scroll;
}
#editcolours {
	position:absolute;
	top:0em;
	height:100%;
	padding-left: 5px;
	padding-right: 5px;
	overflow-y:scroll;
	width:calc(100% - 10px);
	background-color:#dac291;
}

#settings {
	display:none;
	position:absolute;
	top:0em;
	height:100%;
	padding-left: 5px;
	padding-right: 5px;
	overflow-y:scroll;
	width:calc(100% - 10px);
	background-color:#dac291;
}
#NewThings {
	display:none;
	position:absolute;
	top:0em;
	height:100%;
	padding-left: 5px;
	padding-right: 5px;
	overflow-y:scroll;
	width:calc(100% - 10px);
	background-color:#dac291;
}
#Login {
	margin-top:0.5em;
}
.h { font-family: Helvetica; }
.fw { width:97%; } /*full width*/
.Ref {
	font-weight:bold;
	color:#ee0000;
	text-decoration:none;
}
.Ref:visited { color:#ff0000; }
.r {
	color:#ee0000;
	text-decoration:none;
	cursor: pointer; /* I'm leaving the href out of some <a>'s so this shows the hand */
}
.q { /*quote box */
	position:absolute;
	width:92%;
	padding:0.2em;
	background-color:#ffccff;
	border-style:solid;
	border-width:3px;
	border-color:#ff0000;
	border-radius:0.5em;
	display:none;
}
.x { /* close button */
	float:right;
	margin-left:2px;
	font-weight:bold;
	background-color:#f00;
	color:#fff;
	border-style:solid;
	border-width:2px;
	border-color:#f00;
	border-radius:0.5em;
	box-shadow:0px 0px 1px 2px #08f;
}
.x:hover {
	background-color:#33f;
	border-color:#08f;
}
/* This was changed to show on click with JS .r:hover + .q {
	display:block;
} */
.cb {
	box-sizing:border-box;
	margin:4px 0;
	padding-left:0.3em;
	font-family:Helvetica;
	font-weight:bold;
	font-size:0.97em;
	color:#127016;
	background-color:#5dee64;
	border-top:1px solid #127016;
	border-bottom:1px solid #127016;
}
.tab {
	padding:3px;
	border-radius:12px 12px 0 0;
}
@media (max-width: 428px)
{
	body {
		margin:0;
		padding:0;
		height:100dvh;
		overflow-x:hidden;
	}
	textarea {
		width: 95vw;
	}
	.fw { width:95%; } /*full width iOS requires a little narrower iOS 11.4*/
	.containerdiv {
		display: flex;
		align-items: center;
		width:100%;
		overflow-y:hidden;
		height:100dvh;
		min-height:100dvh;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
		-webkit-scroll-snap-type: mandatory;
		scroll-snap-type: x mandatory;
		-webkit-scroll-snap-points-x: repeat(50%);
		scroll-snap-points-x: repeat(50%);
	}
	#menu, #text, #RightPanelContainer, #menu2 {
		position:relative;
		min-width: 100%; /* needed so Firefox doesn't make img shrink to fit */
		width:100%;
		height:100dvh;
		scroll-snap-align: start;
	}
	#RightPanelContainer {
		padding:0;
		color:#000;
	}
	#NotesButtons, #rightpanel, #editcolours, #settings, #NewThings {
		position:relative;
		width:100%
	}
	#menu {
		background:linear-gradient(to right, #0066cb 0%, #0066cb 95%, #1471c9 97%, #ffffff 100%); /*Move further across*/
		font-size:1.5em;
	}
	#text {
		display:block;
		margin-left:0;
		margin-right:0;
		color:#000;
		left:0;
		max-height:100dvh;
	}
	#NotesButtons {
		font-size:1.8em;
	}
	#rightpanel {
		top:0;
	}
	#editcolours {
		width:auto;
	}
	#settings {
		width:auto;
	}
	.cb {
		margin:4px -0.5em;	/*This plus the padding below is to stretch the green bar to the edge on mobiles */
		padding-left: 0.5em;
	}
	.anchor {
		margin-left: -0.5em;
		margin-right: -0.5em;
		padding-left: 0.5em;
	}
}
@media (max-width: 400px)
{
	.tab {
		font-size: 6vw;
	}
	#NotesButtons {
		font-size: 6vw;
		height:9vw;
	}
}

#menu a.readings {
	color: #ffff00;
}
#menu a.readings:visited {
	color: #ffff00;
}
#menu a.readings:hover {
	color: #ff8800;
}