/* /css/styles.css for http://jayts.com */

@import "/css/normalize.css";

/* *************** Global Settings ********************* */

html, body
{
	overflow: visible;
	color: rgb(0%,0%,0%);  /* black #000 */
	background-color: rgb(100%,100%,100%);  /* white #fff */
	background-repeat: repeat;	/* or "initial" */
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 100%;

	margin-left:  2px;
	margin-right: 2px;
	box-sizing: border-box;
	width: calc(100% - 4px);
}

/* ************** <h1> through <h6> **************** */

h1, h2, h3, h4, h5, h6 { color: blue; }

h1 { font-size: 120%; }
h2 { font-size: 100%; }
h3 { font-size:  90%; }
h4 { font-size:  80%; }
h5 { font-size:  70%; }
h6 { font-size:  50%; }

.hidden
{
	display: none;
}

/* *************** Monospace Text ******************* */

pre, tt { font-family: "Lucida Console", "Lucida Sans Typewriter", Monaco, monospace; }

/* *************** Header *************************** */

header
{
	display: inline;
}

div.header
{
	display: grid;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	white-space: nowrap;
}

span.header_left
{
	display: inline-grid;
	grid-row: 1 / 1;
	grid-column: 1;
	overflow: visible;
	background-color: rgb(100%,100%,100%);  /* white #fff */
	width: 16vw;
	height: auto;
	margin-left: 2vw;
}

/* At the top, to the right of the Jay Ts logo. Title for the page. */

span.header_right
{
	display: inline-grid;
	grid-row: 1 / 1;
	grid-column: 2;
	overflow: visible;
	color: rgb(0%,70%,70%);	/* light teal */
	background-color: rgb(100%,100%,100%);  /* white #fff */
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 4vw;
	transform: translate(calc(150px - 18vw),calc(60px - 0.6em));
}

/* Paragraphs */

p
{
	margin-left: 0.5em;
	margin-right: 0.5em;
}

/* List elements */

ul li
{
	margin: 0.3em;
}

/* *************** Link Behavior ********************** */

a
{
	text-decoration: none;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	color: rgb(0%,0%,100%); /* bright blue #00f */
}

a:link
{
	color: rgb(0%,0%,100%); /* bright blue #00f */
}

a:visited
{
	color: rgb(20%,20%,100%); /* lighter blue */
}

/* :hover must be specified after :visited */

a:hover
{
	color: rgb(0%,67%,0%); /* medium green #0a0 */
}

/* while it's being clicked */

a:active
{
	color: rgb(100%,6.7%,40%); /* bright magenta-red #f16 */
}

/* Link behavior for links that do not change on hover, active, visited. */

a.plain
{
	text-decoration: none;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	color: rgb(0%,0%,0%); /* black #000 (same as default text color) */
	font-weight: bold;
}

a.plain:link
{
        color: rgb(0%,0%,0%); /* black #000 (same as default text color) */
}

a.plain:visited
{
	color: rgb(0%,0%,0%); /* black #000 */
}

a.plain:hover
{
	color: rgb(0%,67%,0%); /* medium green, same as default link behavior #0a0 */
}

a.plain:active
{
	color: rgb(100%,6.7%,40%); /* bright magenta-red. Same as default link behavior #f16 */
}

/* ************************ Navbar ********************** */

div.navbar a:visited
{
	color: rgb(0%,0%,100%); /* bright blue #00f */
}

/* Change background image in navbar on hover. Also put box around it. */

div.navbar a:hover
{
	color: rgb(0%,67%,0%);	/* rgb(0,170,0) or #0a0 */
	background-image: url(../images/ybtile.gif);
	padding-top: 5px;
	padding-bottom: 6px;
	padding-left: 6px;
	padding-right: 6px;
	border: 1px;
	border-style: solid;
	position: relative;
	left: -7px;
	margin-right: -14px;
}

/* Navigation Bar */

div.navbar
{
	background-image: url("../images/ybtile.gif");

	/* sticky positioning: stick to top of viewport */

	position: sticky;
	z-index: 1000;
	top: 0;
	bottom: auto;
	right: auto;
	left: auto;

	white-space: nowrap;
	border-width: 1px 2px;	/* top, bottom = 1 px, sides = 2 px */
	border-color: rgb(65%,16%,16%); /* #a52a2a or rgb(165,42,42) */
	border-style: solid;

	padding-bottom: 4px;
	padding-top:    3px;

	margin-top:    6px;
	margin-bottom: 8px;

	font-size:   100%;
	font-weight: bold;

	box-sizing: border-box;
	overflow: visible;
	width: 100%;
	min-width: fit-content;
}

ul.navbar, li.navbar
{
	display: inline;
	list-style-type: none;
	overflow: hidden;
	white-space: nowrap;
	padding: 0px;
	margin: 0px;
	border: 0px;
}

li.navbar
{
	padding-left:  1em; 
	padding-right: 1em;
}

/* ********** Home Page Grid ************* */

div.homegrid
{
	display: grid;
	width: 100%;

	font-size: 225%;
	text-align: center;
}

/* ********** Home Page Grid Items ************* */

div.hgtext
{
	position: relative;
	margin: 0;
	top: 50%;
/*	transform: translate(0%, calc(-50% - 0.25em)); */
	transform: translate(0%, -50%);
}

/* Home Page Item 1 */

div.homegrid1
{
	display: inline-grid;
	grid-row: 1 / 1;
	grid-column: 1 / 1;

	height: 150px;

	/* background-image: url(../images/ybtile.gif); */
	background-color: rgb(100%,95%,85%);	/* Matches average of ybtile.gif */
	border: 2px;
	border-radius: 20px;
	border-style: solid;
	border-color: rgb(65%,16%,16%); /* #a52a2a or rgb(165,42,42) */
	margin: 5%;
}

/* Home Page Item 2 */

div.homegrid2
{
	display: inline-grid;
	grid-row: 1 / 1;
	grid-column: 2 / 2;

	height: 150px;

	/* background-image: url(../images/ybtile.gif); */
	background-color: rgb(100%,95%,85%);	/* Matches average of ybtile.gif */
	border: 2px;
	border-radius: 20px;
	border-style: solid;
	border-color: rgb(65%,16%,16%); /* #a52a2a or rgb(165,42,42) */
	margin: 5%;
}

/* Home Page Item 3 */

div.homegrid3
{
	display: inline-grid;
	grid-row: 2 / 2;
	grid-column: 1 / 1;

	height: 150px;

	/* background-image: url(../images/ybtile.gif); */
	background-color: rgb(100%,95%,85%);	/* Matches average of ybtile.gif */
	border: 2px;
	border-radius: 20px;
	border-style: solid;
	border-color: rgb(65%,16%,16%); /* #a52a2a or rgb(165,42,42) */
	margin: 5%;
}

/* Home Page Item 4 */

div.homegrid4
{
	display: inline-grid;
	grid-row: 2 / 2;
	grid-column: 2 / 2;

	height: 150px;

	/* background-image: url(../images/ybtile.gif); */
	background-color: rgb(100%,95%,85%);	/* Matches average of ybtile.gif */
	border: 2px;
	border-radius: 20px;
	border-style: solid;
	border-color: rgb(65%,16%,16%); /* #a52a2a or rgb(165,42,42) */ 
	margin: 5%;
}

/* Home Page Item 5 */

div.homegrid5
{
	display: inline-grid;
	grid-row: 3 / 3;
	grid-column: 1 / 1;

	height: 150px;

	/* background-image: url(../images/ybtile.gif); */
	background-color: rgb(100%,95%,85%);	/* Matches average of ybtile.gif */
	border: 2px;
	border-radius: 20px;
	border-style: solid;
	border-color: rgb(65%,16%,16%); /* #a52a2a or rgb(165,42,42) */ 
	margin: 5%;
}

/* Home Page Item 6 */

div.homegrid6
{
	display: inline-grid;
	grid-row: 3 / 3;
	grid-column: 2 / 2;

	height: 150px;

	/* background-image: url(../images/ybtile.gif); */
	background-color: rgb(100%,95%,85%);	/* Matches average of ybtile.gif */
	border: 2px;
	border-radius: 20px;
	border-style: solid;
	border-color: rgb(65%,16%,16%); /* #a52a2a or rgb(165,42,42) */ 
	margin: 5%;
}

/* ********** Top Intro for Intuitive Coaching and Night Sky Tours ************* */

img.myphoto
{
	height: 300px;
	width: auto;
}

img.map
{
	height: 500px;
	width: auto;
}

img.gridphoto300
{
	height: 300px;
	width: auto;
}

div.top_intro
{
	display: grid;
}

/* ********** Intuitive Coaching Top Intro Grid ************* */

/* Grid Item 1 */

div.grid_item1
{
	display: inline-grid;
	grid-row: 1 / 1;
	grid-column: 1 / 1;
}

/* Grid Item 2 */

div.grid_item2
{
	display: inline-grid;
	grid-row: 1 / 1;
	grid-column: 2 / 2;
}

div.features
{
	min-height: 14vw;
        padding: 1em;

	text-align: center;
        font-size: 105%;
        font-weight: bold;
}

/* Grid Item 3 */

div.grid_item3
{
	display: inline-grid;
	grid-row: 1 / 1;
	grid-column: 3 / 3;
}

div.summary
{
	background: transparent;
        min-height: 14vw;
	margin-top: 0.5em;
}

div.col3_title
{
	font-size: 125%;
	color: rgb(0%,0%,100%);
	margin-top: 0.5em;
	margin-bottom: 0;
	max-width: 19em;
}

div.col3
{
	font-size: 110%;
	margin-top: 0;
}

/* Where is ul.col3 used? It is no longer in the intuitive coaching page. */
ul.col3
{
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	margin-left: 2em;
}

ul.col3 li
{
	margin-top: 1em;
	margin-bottom: 1em;
}

/* Grid Item 4 */

div.grid_item4
{
        display: inline-grid;
        grid-row: 1 / 1;
        grid-column: 4 / 4;

        background: transparent;
        min-height: 14vw;
        margin-top: 0.5em;
}

/* ************ Crystal Bed Sessions Top Intro Grid ************** */

img.vogelphoto
{
	height: 350px;
	width: auto;
	margin-left: 4px;
	margin-right: 4px;
}

/* ************************* Div styles ********************** */

/* Section Headings */

div.stripheader
{
	color: black;
	background-image: url(../images/ybtile.gif);

	border-width: 1px 2px;
	border-color: rgb(65%,16%,16%); /* brown #a52a2a or rgb(165,42,42) */
	border-style: solid;

	padding-bottom: 4px;
	padding-top:    3px;
	padding-left: 2em;

	margin-top:    6px;
	margin-bottom: 8px;

	font-size:   100%;
	font-weight: bold;

	box-sizing: border-box;
	overflow: visible;
	width: 100%;
	min-width: fit-content;
}

div.subheader
{
	color: black;
	background-image: url(../images/ybtile.gif);

	border-width: 1px 2px;
	/* border color is {stripheader border color} -> halfway to white */
	border-color: rgb(83%,58%,58%);
	border-style: solid;

	padding-bottom: 4px;
	padding-top:    3px;
	padding-left:  1em;
	padding-right: 1em;

	margin-top:    6px;
	margin-bottom: 8px;
	margin-left: 0.5em;	/* Indent */

	font-size:   100%;
	font-weight: bold;

	box-sizing: border-box;
	overflow: visible;

	width: fit-content;
}

.columns	/* Can be used with <div>, <p>, and others. */
{
	column-width: 25em;	/* automatically chooses the number of columns */
	margin-left: 0.5em;
	margin-right: 0.5em;
}

div.banner
{
	text-align: center;
}

.largebold
{
	font-size: 125%;
}

div.signed
{
	text-indent: 5em;
}

.blue
{
	color: rgb(0%,0%,100%);
}

.largeboldblue
{
	font-size: 125%;
	color: rgb(0%,0%,100%);
}

.largeteal
{
	font-size: 125%;
	color: rgb(0%,60%,60%);	/* slightly-light teal */
}

/* Center text */

.center { text-align: center; }

/* Center the containing box */

.centercontent
{
	display: grid;
	justify-content: center;
	margin: 1em;
}

.strikeout
{
	text-decoration: line-through red;
}

div.vertspace
{
	margin-bottom: 20em;
}

/* Errors in Contact form */

div.error
{
	color: red;
}

/* ******************* Photos with Bios ******************* */

div.sdports
{
	display: grid;
	justify-content: center;
	margin: 1em;
}

/* Item 1 for Photos/Bios */

div.sdport1
{
	display: inline-grid;
	grid-row: 1 / 1;
	grid-column: 1 / 1;
}

/* Item 2 for Photos/Bios */

div.sdport2
{
	display: inline-grid;
	grid-row: 1 / 1;
	grid-column: 2 / 2;

	margin-left: 2em;
	margin-right: 2em;
}

/* Item 3 for Photos/Bios */

div.sdport3
{
	display: inline-grid;
	grid-row: 1 / 1;
	grid-column: 3 / 3;
}

img.sdport
{
	height: 300px;
	width: auto;
	margin: auto;
}

/* ********* Tarot Card Images with Captions  ******* */

div.cards
{
	display: grid;
	justify-content: center;
	margin: 1em;
}

/* Item 1 for Cards */

div.card1
{
	display: inline-grid;
	grid-row: 1 / 1;
	grid-column: 1 / 1;
}

/* Item 2 for Cards */

div.card2
{
	display: inline-grid;
	grid-row: 1 / 1;
	grid-column: 2 / 2;

	margin-left: 2em;
	margin-right: 2em;
}

/* Item 3 for Cards */

div.card3
{
	display: inline-grid;
	grid-row: 1 / 1;
	grid-column: 3 / 3;
}

img.card
{
	height: 300px;
	width: auto;
	margin: auto;
}

p.card
{
	text-align: center;
}

/* ****************** Sedona Trail Guide ****************** */

img.trailphoto
{
/*	max-height: 350px; */
	max-width: 100%;
	margin-left: 4px;
	margin-right: 4px;
}

/* ********************* Contact Form ********************* */

div.contactform
{
	width: 37em;
	margin-left: calc(100% / 5);
	overflow: visible;
}

div.footer
{
	font-size: 75%;
	margin-bottom: 5px;
}

/* ****************** Span styles ******************** */

span.aboutme
{
	display: flex;
	flex: 1;
	flex-flow: row nowrap;
	justify-content: space-between;
	overflow: visible;
	width: 90%;
}

/* Error message from SSI failure */

span.errormsg
{
	color: red;
	font-style: italic;
}

span.mvrt
{
	padding-left: 1em;
}

/* ************************** Forms ******************** */

span.required
{
	font-size: larger;
	color: teal;
	position: relative;
	top: 0.3em;
}

img.valimage	/* letters in noisy background */
{
	transform: translate(0%, 35%);
}

/* Send button on contact form */

input.sendbutton
{
	background-image: url("../images/ybtile.gif");
	font-size: 100%;
	border-style: solid;
	border-color: teal;
	border-width: 1px;
	padding: 4px;
}

div.validate
{
	margin-top: -15px;
	margin-right: 6px;
	text-align: left;
}

input, textarea
{
	background-image: url("../images/ybtile.gif");
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 100%;
	color: blue;
	padding-left: 3px;
	border-style: solid;
	border-color: teal;
	border-width: 1px;
}

textarea.wide, input.wide
{
	width: calc(100% - 8px);
}

/* select, option and input.addr are currently unused in the Contact form */

select, option
{
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 100%;
	color: blue;
	padding-left: 3px;
	border-style: none;
}

select
{
	border-color: teal;
	border-style: solid;
	border-width: 1px;
}

option
{
	background-color: #dcfff8;  /* rgb(86%,100%,97%); */
	color: black;
}

input.addr
{
	margin-bottom: 2px;
}

/* ***************** Sitemap ************** */

ul.sitemap
{
	list-style-type: none;
}

/* *********************************************** */
/* ******************* MOBILE ******************** */
/* *********************************************** */

/* Samsung Galaxy S8+ width is 980 px */

@media screen and (max-width: 992px)
{
	html { font-size: 80% }

	body {
		font-size : 1.5em;
	}

	h1, h2, h3, h4, h5, h6 { color : blue; }

	h1 { font-size : 1.7em; }
	span.h1size { font-size : 1.7em; }
	div.h1size { font-size : 1.7em; }

	h2 { font-size : 1.4em; }
	span.h2size { font-size : 1.4em; }
	div.h2size { font-size : 1.4em; }

	h3 { font-size : 1.2em; }
	span.h3size { font-size : 1.2em; }
	div.h3size { font-size : 1.2em; }

	h4 { font-size : 1em; }
	span.h4size { font-size : 1em; }
	div.h4size { font-size : 1em; }

	h5 { font-size : 0.84em; }
	span.h5size { font-size : 0.84em; }
	div.h5size { font-size : 0.84em; }

	h6 { font-size : 0.7em; }
	span.h6size { font-size : 0.7em; }
	div.h6size { font-size : 0.7em; }

	pre, kbd { font-family : Courier, monospace; }

	/* Mobile: Home Page Grid */

	div.homegrid
	{
		display: grid;
		width: 100%;

		font-size: 150%;
	}

	/* Mobile: Home Page Grid Items */

	div.hgtext	/* text of hyperlinks: center it vertically */
	{
		position: relative;
		margin: 0;
		top: 50%;
		transform: translate(0%, -50%);
	}

	/* Grid that is horizontal on desktop, vertical on mobile. */
	/* Used in top intro for Intuitive Coaching and Sedona Night Sky Tours */

	div.grid_item1
	{
		grid-row: 1 / 1;
		grid-column: 1 / 1;
	}

	img.myphoto
	{
		width: 50%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}

	img.map
	{
		width: 100%;
		height: auto;
	}

	img.gridphoto300
	{
		width: 50%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}

	/* Mobile: Grid Item 2 */

	div.grid_item2
	{
		grid-row: 2 / 2;
		grid-column: 1 / 1;
		padding-bottom: 0;
		border-bottom: 0;
		margin-bottom: 0;
	}

	/* Mobile: Grid Item 3 */

	div.grid_item3
	{
		grid-row: 3 / 3;
		grid-column: 1 / 1;
		margin-top: 0;
		padding-top: 0;
		border: 0;
	}

	div.col3_title
	{
		margin-left: 1em;
		margin-right: 1em;
	}

	ul.col3
	{
		margin-top: 0.5em;
		margin-bottom: 0.5em;
	}

	/* Mobile: Grid Item 4 */

	div.grid_item4
	{
		grid-row: 4 / 4;
		grid-column: 1 / 1;
		margin-top: 0;
		padding-top: 0;
		border: 0;
	}

	/* Mobile: Top Intro */

	img.vogelphoto
	{
		width: 100%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		margin-top: 3px;
		margin-bottom: 3px;
	}

	/* Mobile: Top Intro Grid */

	div.top_intro
	{
		display: grid;
		justify-content: initial;
	}

	/* Mobile: Navigation Bar */

	div.navbar
	{
		width: auto;
		min-width: auto;
		overflow: auto;
	}

	/* Mobile: Header */

	header
	{
		display: grid;
	}

	span.header_left
	{
		display: grid;
		grid-column: 1 / 1;
		grid-row: 1;

		width: auto;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}

	img.logo
	{
		width: 100%;
	}

	span.header_right
	{
		display: grid;
		grid-column: 1 / 1;
		grid-row: 2;

		color: rgb(0%,60%,60%);	/* slightly-light teal */
		font-family: Arial, Verdana, Helvetica, sans-serif;
		font-size: 8vw;
		width: auto;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 1vw;
		transform: none;
	}

	div.stripheader
	{
		padding-left: 0.5em;
	}

	div.subheader
	{
		padding-left: 0.5em;
		padding-right: 0.5em;
	}

	/* Mobile: Photos with Bios */

	div.sdports
	{
		display: grid;
		justify-content: center;
		font-size : smaller;
		width: 90%;
	}

	/* Item 1 for Photos/Bios (crystalbedsessions) */

	div.sdport1
	{
		display: inline-grid;
		grid-row: 1 / 1;
		grid-column: 1 / 1;
	}

	/* Item 2 for Photos/Bios */

	div.sdport2
	{
		display: inline-grid;
		grid-row: 2 / 2;
		grid-column: 1 / 1;

		margin-left: 0em;
		margin-right: 0em;
	}

	/* Item 3 for Photos/Bios */

	div.sdport3
	{
		display: inline-grid;
		grid-row: 3 / 3;
		grid-column: 1 / 1;
	}

	img.sdport
	{
		height: 300px;
		width: auto;
		margin: auto;
	}

	p.sdport
	{
		margin-left: 1em;
		margin-right: 1em;
	}

	/* Tarot Cards (intuitivecoaching) */

	div.cards
	{
		display: grid;
		justify-content: center;
		font-size : smaller;
		width: 90%;
	}

	/* Item 1 for Tarot Cards */

	div.card1
	{
		display: inline-grid;
		grid-row: 1 / 1;
		grid-column: 1 / 1;
	}

	/* Item 2 for Tarot Cards */

	div.card2
	{
		display: inline-grid;
		grid-row: 2 / 2;
		grid-column: 1 / 1;

		margin-left: 0em;
		margin-right: 0em;
	}

	/* Item 3 for Tarot Cards */

	div.card3
	{
		display: inline-grid;
		grid-row: 3 / 3;
		grid-column: 1 / 1;
	}

	img.card
	{
		height: 300px;
		width: auto;
		margin: auto;
	}

	p.card
	{
		margin-left: 1em;
		margin-right: 1em;
		text-align: center;
	}

	/* Mobile: Misc stuff */

	img { border : 0; }

	/* Mobile: Contact Form */

	div.contactform
	{
		width: auto;
		margin-left: 5px;
		font-size : 1.0em;
	}
	
	/* Mobile: Footer */

	div.footer
	{
		font-size: 50%;
	}

}

/* End */