/*Copyright "Jewish Life in Jericho!" No unauthorised copying of this stylesheet!!*/
body {
	border:  none;
	margin: 0px;
	padding: 0px;
	color: black;
	text-align: left;
	direction: ltr;
	font-size: 17px;
	font-weight: normal;
	line-height: 21px; 
	font-family: 'Rubik', sans-serif;
	font-style: normal;
	list-style-type: square;
	list-style-position: outside;
	background: rgba(255, 255, 255, 0);
}
img {
	max-width: 98%;
	height: auto;
	overflow: hidden;
}

/* font size for small screens */
@media only screen and (max-width: 768px) {
	body {
	/* font-size: 16px; */
	line-height: 20px;	
	}
}

/* HEADINGS and LISTS */	
h1, h2, h3, h4, h5, h6 {
	font-family: 'Frank Ruhl Libre', serif;
	font-weight: normal;
	letter-spacing: 2px;
	margin: 2px;
}
p{
  margin: 10px;
}
ul {
	list-style-type: square;
	list-style-position: outside;
}
li{
  margin: 8px;
}
/* Spaces-out the paragraphs of long articles */
.spaced_out p, .spaced_out li {
	margin-top: 22px;
	margin-bottom: 22px;
}
/* Headings */
h1 {
	text-align: center;
	font-size: 3em;
	line-height: 46px; /* instead of page headline line height */
    color: #8a5700; /* brown */
}
h2 {
	text-align: left;
	font-size: 1.6em;
	line-height: 23px;	
	color: #8a5700; /* brown */
}
h3 {
	text-align: left;
    font-size: 1.2em;
	color: #8a5700; /* brown */
}
h4 {
	text-align: left;
	font-size: 1.05em;
	font-style: italic;
	color: black; /* blue */
	margin-right: 20px;
}
h5 {
	text-align: left;
    font-size: 1em;
	color: black;
}
.subheading { /* use after heading 2 or heading 3 */
	text-align: left;
	font-weight: bold;
	font-size: 1em;
	font-style: italic;
	color: gray;
	margin-right: 20px;
}

/* RESPONSIVE LAYOUT DISPLAY TWEAKS */ 
/* Floats for responsive layout */

/* For narrow floats */
.left-float1 {
	float: left;	
}
.right-float1 {
	float: right;	
}
@media only screen and (max-width: 594px) {
	.left-float1 {
	width: 100%;
	}
	.right-float1 {
	width: 100%;
	}
}
/* For very narrow and landing page floats */
/* For narrow floats */
.left-float2 {
	float: left;	
}
.right-float2 {
	float: right;	
}
@media only screen and (max-width: 404px) {
	.left-float2 {
	width: 100%;
	}
	.right-float2 {
	width: 100%;
	}
}
/* Side insert elements on wide and narrow pages */
@media only screen and (min-width: 595px) {
	.side-element-narrowOnly {
		display: none;
	}
}	

/* CUSTOM TEXT FORMATS */
.fineprint {
  font-size: 0.9em;
  line-height: 15px;
}
.fineprint p {
	margin: 6px;
}
/* Draw attention */
b {
	font-weight: bold;
}
em {
	font-style: normal;
	font-weight: normal;
	background-color: yellow;
}
strong {
	font-weight: bold;
}
.action {
	color: red;
	background-color: yellow;
}
.action time {
	color: red;
	/* font-size: 1.1em; */
	/* font-family: 'Frank Ruhl Libre', serif; */
}
.attention { /* action in-line */
	color: white;
	font-size: 1.15em;
	background-color: #d2691e; /* orange */
}
.do { /* action paragraph */
	color: white;
	font-size: 1.15em;
	font-weight: bold;
	background-color: #d2691e; /* orange */
	border: 2px solid red;
	border-radius: 8px;
	box-shadow: 5px 5px 6px #282828;
	padding: 2px;
}
.do p {
	line-height: 20px;
}
.do a:link {
	color: white;
}
.do a:visited {
	color: white;
}

.intro { /* introductory remarks */
	font-style: italic;
	/* font-size: 0.9em; */
	color: black;
	background-color: #dedede;
}
i {
	font-style: italic;
}
.author {
	color: #d2691e; /* orange */
	/* font-family: 'Frank Ruhl Libre', serif; */
}
.date { 
	color: #6d640e; /* green-brown */
	/* font-family: 'Frank Ruhl Libre', serif; */
}
.date time {
	color: #6d640e; /* green-brown */
	/* font-family: 'Frank Ruhl Libre', serif; */
}

q:lang(en) {
	color: green;
	/* font-size: 1.1em; */
	font-family: 'Frank Ruhl Libre', serif;
	quotes: none;
}
cite { /* source of quote */
	font-style: italic;
	font-size: 0.9em;
	color: #8b4513; /* brown */
	white-space: nowrap;
}

/* Inset map at page top */
.insetMap {
	width: 540px; 
	display: inline-block;
	vertical-align:top;
	text-align: center;
	border: none; 
	margin: 1px; 
	padding: 1px; 
	background-color: transparent;
}
.insetMap figcaption a {
background-color: white; /* Bright teal */	
}	
@media only screen and (max-width: 770px) {
	.insetMap {
	width: 85%;
	}
}
	
/* PICTURES FRAMES and CAPTIONS */
iframe {
border: none;
}

/* Responsive YouTube iframes */
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	overflow: hidden;
}
.tallVideo {
	padding-bottom: 75%; /* 4:3 */
}

.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Use figure instead of picture */
figure {
	display: block;
	text-align: center;
	margin: 5px;
}
figure a {
	text-decoration: none;
	font-weight: normal;
}
figure img
{
	border: none;
}
figcaption {
	text-align: center;
	font-size: 0.9em;
	font-style: italic;
	line-height: 15px;
	margin-bottom: 15px;
}
figcaption a {
	font-weight: normal;
	text-decoration: none;
}
figcaption a:hover {
	text-decoration: underline;
}
figcaption img {
	border: 0px solid ; 
	width: 25px; 
	height: 25px; 
	vertical-align: middle;
}
/* enlargeable images class of figure */
.enlargeImage:hover {
	cursor:zoom-in;
	transform: scale(2,2);
	/* transform-origin: bottom; */
}
.enlargeImageL:hover {
	cursor:zoom-in;
	transform: scale(2,2);
	transform-origin: left;
}
.enlargeImageR:hover {
	cursor:zoom-in;
	transform: scale(2,2);
transform-origin: right;	
}
.enlargeImageB:hover {
	cursor:zoom-in;
	transform: scale(2,2);
	transform-origin: bottom;
}
.enlargeImageBL:hover {
	cursor:zoom-in;
	transform: scale(2,2);
	transform-origin: left bottom;
}
.enlargeImageBR:hover {
	cursor:zoom-in;
	transform: scale(2,2);
transform-origin: right bottom;	
}
@media only screen and (max-width: 1000px) {
	.enlargeImage:hover, .enlargeImageL:hover, .enlargeImageR:hover, .enlargeImageB:hover, .enlargeImageBL:hover, .enlargeImageBR:hover {
		transform: none;
		cursor: default;
	}
}

/* LINKS*/
a {
	text-decoration: underline;
	font-weight: normal;
}
a:link {
  color: blue;
  font-weight: normal;
  text-decoration: underline;
}
a:visited {
  color: purple;
  font-weight: normal;
  text-decoration: underline;
}
a:hover {
  color: fuchsia;
  font-style: italic;
  text-decoration: underline;
}
a:active {
  background-color: yellow;
  color: red;
  text-decoration: none;
}
/* Audiolink is deprecated */
/*Use see_more instead of audiolink */
.see_more{
	font-size: 0.9em;
	font-weight: normal;
}
.see_more a {
	font-weight: normal;
	text-decoration: none;
}
.see_more a:hover {
	text-decoration: underline;
}
.see_more img {
	border: 0px solid ; 
	width: 25px; 
	height: 25px; 
	vertical-align: middle;
}

/*AUDIO CONTROL */
.audiowrapper { /* For wrapping audio intreface commands */
	white-space: nowrap; 
	display: inline-block;
	margin-top: 13px;
	margin-bottom: 13px;
}
@media screen and (max-width: 768px) {
	.audiowrapper {
		margin-top: 16px;
	margin-bottom: 16px;
	}
}
.audiobutton {
	font-family: 'Frank Ruhl Libre', serif;
	padding: 1px;
	color: blue;
	background: transparent;
	border: none;
	cursor:pointer;
	width: 27px;
}
.audiobutton image {
	border: 0px;
	margin:0px;
	width: 25px;
	height: 25px;
	/* z-index: 100; */
}
.progressBar { 
	padding: 0px;
	vertical-align: middle;
	border:1px solid #aaaaaa; 
	color:#ffffff; 
	width:80px; 
	height:8px;
	display:inline-block; 
} 
.progressing { 
	margin: 0px;
	padding: 1px;
	vertical-align: top;
	background-color:#ff0000; /* red  */
	height:6px; 
	display:inline-block; 
}
.progressTimer {
	font-size: 0.8em;
	border: 1px solid black;
	border-radius: 8px;
	padding: 1px;
	margin:1px;
	display: inline-block;
}

/* WRAPPERS */
.outerwrapper { /* use instead of outertable for table-less page configuration */
	width: 97%;
	max-width: 700px; 
	border-left: none; /*2px solid; */
	border-right: none; /*2px solid; */
	border-top: none;
	border-bottom: none;
	margin: auto;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 2px;
	padding-bottom: 2px;
	color: black;
	background: rgba(255, 255, 255, 0);
	text-align: left; 
}

/* CONTENT WRAPPERS */
.content_flexR {
	display: flex;
	flex-wrap: wrap-reverse;
	justify-content: center;	
}
.content_flexF {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
 /* side panel of intro wraps under the slideshow when screen is less than 976px wide */
@media screen and (max-width: 996px) {
	.intro_flexF {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
} 

/* Main body of contents */	
.content_fullWidth {
	width: 97%;
	text-align: left;
	border: none; 
	margin: 1px; 
	padding: 5px; 
	list-style-type: square; 
	background: rgba(255, 255, 255, 0);
}	 

/* PAGE ELEMENTS */

/* home page article */
.article {
	color: black;
	vertical-align: top;
	text-align: left;
	margin: 5px auto; 
	padding: 5px;
	background-color: white;
	border-radius: 8px;
	border: 1px solid #5b7306; /* green - added from main */
	background-color: white;
}
.nav { /* similar to article */
	color: black;
	vertical-align: top;
	text-align: left;
	margin: 5px auto; 
	padding: 2px; /*instead of 5px */
	background-color: white;
	border-radius: 8px;
	border: 1px solid #5b7306; /* green - added from main */
	background-color: white;
}
.scroller {
	color: black;
	vertical-align: top;
	text-align: left;
	margin: 5px auto; 
	padding: 0px;
	/* background-color: white; 
	border-radius: 8px;
	border: 1px solid #5b7306; */
}
@media only screen and (max-width: 325px) {
	.article, .nav, .scroller {
	width: 98%;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0px;
	}
}
.aside {
	color: black;
	font-size: 0.9em;
	font-style: italic;
	vertical-align: top;
	text-align: left;
	margin: 5px auto; 
	padding: 5px;
	background-color: white;
	border-radius: 8px;
	/* z-index: 5; */
	border: 1px solid #5b7306; /* green - added from main */
}
.references { /* material for further reading. Inherits from nav combine with main i.e. nav references main */
	background-color: white;
	width: 90%;
}
.references:hover {
	background-color: #98bf0a; /* very bright green */
}

.nav_headline { /* used for headline of navigation or refrence panels */
	font-weight: bold;
	font-size: 1.2em; 
	color: #d69f40; /* beige */
	text-align: left;
}
.headline {
	vertical-align: middle;
	border: none;
	border-radius: 8px;
	box-shadow: 5px 5px 6px #282828;
	/* line-height: 1.6em; */
	width: 95%;
	margin: 8px auto;
	color: white; /* taken from headline h1 etc */
	background-color: #5b7306; /* green taken from main headline */
}
.pageheadline {
	display: inline-block;
	vertical-align: top;
	border: none;
	border-radius: 8px;
	box-shadow: 5px 5px 6px #282828;
	/* line-height: 3.2em; */
	color: white; /* taken from headline h1 etc */
	background-color: #5b7306; /* green taken from main headline */
	width: 65%;
	margin-top: 30px;
	margin-right: 20px;
}
.pageheadline-compact { /* for pop-up pages */
	display: inline-block;
	vertical-align: top;
	border: none;
	border-radius: 8px;
	box-shadow: 5px 5px 6px #282828;
	line-height: 3.2em;
	color: white; /* taken from headline h1 etc */
	background-color: #5b7306; /* green taken from main headline */
	width: 100%;
	margin-left: auto;
	margin-right: auto;	
}	
@media only screen and (max-width: 1000px) {
	.pageheadline {
		width: 55%;
	}
}
@media only screen and (max-width: 768px) {
	.pageheadline {
		width: 100%;
		margin: 15px auto;
	}
}
.pageheadline h1, .pageheadline-compact h1, .headline h2, .headline h3, .headline h4, .headline p {
	text-align: center;
	color: white;
}

.buttons img {			/* note buttons not button */
	vertical-align: middle;
	border: none;
	width: 25px;
	height: 25px;
}

/* Article Separator */
hr.article_separator {
	margin-top: 20px;
	margin-bottom: 20px;
	/* margin-right: 192px;*/
}

/* Modifies nav and article for frameless text eg content summary menu */
.frameless {
	background-color: transparent;
	border: none;	
}

/* ARTICLE COLOUR THEMES */
/* News */
.news  {
	border-color: #1b4b6b; /* blue */
}
.news .headline {
	background-color: #1b4b6b; /* blue */
}
.news h2, .news h3, .news h4  {
	color: #b7700a; /* brown-red */
}
.news .headline h2, .news .headline h3 {
	color: white;
}
/* Events */
.events  {
	border-color: #058895; /* teal */
}
.events .headline {
	background-color: #058895; /* teal */
}
.events h2, .events h3, .events h4  {
	color: #954105; /* brown-red */
}
.events .headline h2, .events .headline h3 {
	color: white;
}
/* Torah */
.torah  {
	border-color: #870f0f; /* wine red */
}
.torah .headline {
	background-color: #870f0f; /* wine red */	
}
.torah h2, .torah h3, .torah h4 {
	color: #015487	 /* blue */
}
.torah .headline h2, .torah .headline h3 {
	color: white;
}
/*Thoughts */
.thoughts  {
	border-color: #0d7a21; /* green */
}
.thoughts .headline {
	background-color: #0d7a21; /* green */
}
.thoughts h2, .thoughts h3, .thoughts h4 {
	color: #c76f0C	 /* light brown */
}
.thoughts .headline h2, .thoughts .headline h3 {
	color: white;
}
/* History */
.history {
	border-color: #893a94; /* purple */
}
.history .headline {
background-color: #893a94; /* purple */
}
.history h2, .history h3, .history h4 {
	color: #67943a  /* light brown */
}
.history .headline h2, .history .headline h3 {
	color: white;
}
/*Tourism */
.tourism  {
	border-color: #a65101; /* brown */
}
.tourism .headline {
	background-color: #a65101; /* brown */
}
.tourism h2, .tourism h3, .tourism h4 {
	color: #0184a6	 /* blue */
}
.tourism .headline h2, .tourism .headline h3 {
	color: white;
}
/*Hogla */
.hogla  {
	border-color: #1473cc; /* bright blue  */
}
.hogla .headline {
	background-color: #1473cc; /* bright blue  */
}
.hogla h2, .hogla h3, .hogla h4 {
	color: #cc8614; /* mustard */
}
.hogla .headline h2, .hogla .headline h3 {
	color: white;
}
/* BACKGROUND IMAGE */
html { 
	background: rgba(255, 255, 255, 0);
}