/* style1 is for smartphones in landscape mode (links at the side, vertical, sticky) */

/* archived in "page template" as v1 */
body 
{
	background-image: url("images/BackgroundBrt.jpg");		/*  */
	background-size: cover;   /* cover the entire body container */
	background-repeat: repeat;
	background-position: center;
	font-size: 100%;  					/*	1vw = 1% of viewport width  */
	position: relative;
	width:100%;					/* set based on parent size  */
	height:100vh;
	border-style: none;
    border-color: blue; /* border color */ 
}

@font-face {
  font-family: Papyrus;
  src: url("Papyrus ICG(1).ttf");
}

#header 
{
}
 
.myheader /* child of the body */
{  
  margin-left: 0;
  margin-right: 0;
	padding: 0px;
	width:95vw;
	height: 16vw; /* Set a height for the header  % of viewport*/ 
    background-image: url('images/creekv3.jpg'); /*  image path */ 
    background-size: contain; /* Cover the entire header container*/ 
	background-repeat:no-repeat;
    background-position: center top; /* Center the image */
	
font-family: Papyrus, Helvetica, sans-serif;
	
    color: black; /* Text/border color */ 
    justify-content: center; /* Center horizontally */ 
    align-items: center; /* Center vertically */ 
    text-align: center; /* Center text */
	border-style: none;
	border-color:black
}

#headertitle						 /* child of the header */
{
	position: relative;				/* top | right | bottom | left */
	top: 42%; left: 5%; 
	color:white;
	font-weight:bold;
	font-family: Papyrus, Helvetica, sans-serif;
	font-size:3vw;					/*	1vw = 1% of viewport width  */
  text-align: left;
  border-style: none;
	border-color:white
 /*   justify-content: left;  Center horizontally */ 
/*    align-items: center;  Center vertically */ 
/*    padding: 10px 0px 10px 10px;		 top | right | bottom | left */
/*	margin: 10px 50px 20px 0;*/
}
				/*		^^^^^^^^^^^^^^ set top,left and font-size ? ^^^^^^^^^^^^^^^^^   */

#headersubtext						/* child of the header */
{
	position: relative;
	top: 40%; left: 5%; 
	color:white;
	font-size:2vw;					/*	1vw = 1% of viewport width  */
	text-align: left;
	font-weight:bold;
	font-family:Papyrus, Helvetica, sans-serif;
		border-style: none;
	border-color:white

}

#authorsubtext						/* child of the header */
{
	position: relative;
	top: 40%; left: 5%; 
	color:white;
	font-size:1vw;					/*	1vw = 1% of viewport width  */
	text-align: left;
	font-weight:bold;
	font-family:'Liberation Serif';
	border-style: none;
	border-color:white

}
.css-type::after {
	content: "styleTL.css";
	font-size:3vw;
	color: darkviolet;
	font-weight: bolder;
}
	/*	Page title with bigger top/bottom margins  */
    .paragraph-P1
    { font-size:3vw; font-family:'Liberation Serif'; writing-mode:horizontal-tb;   direction:ltr; text-indent: 2vw;text-align:center ! important; font-weight:bold;line-height: 1.3; }
	
	/*	generic text for readability  */
    .paragraph-P2{ font-size:2vw; font-family:'Liberation Serif'; writing-mode:horizontal-tb; direction:ltr;   text-indent: 2vw;line-height: 1.3;margin-bottom:0px; margin-top: 2%;}
	
	/*	highlight text:  */
    .paragraph-P3{ font-size:2vw; font-family:Papyrus, Helvetica, sans-serif; writing-mode:horizontal-tb;   direction:ltr; text-indent: 2vw;font-weight:bold;line-height: 1.3;}
	
	/*	generic text with minimum line spacing (for book sub-titles)  */
    .paragraph-P4{ font-size:2vw; font-family:'Liberation Serif'; writing-mode:horizontal-tb; direction:ltr;   text-indent: 2vw;line-height: .5;margin-bottom:0px; margin-top: 2%;}
	
	/*	generic text without indent */
    .paragraph-P5{ font-size:2vw; font-family:'Liberation Serif'; writing-mode:horizontal-tb; direction:ltr;   text-indent: 0vw;line-height: 1.2;margin-bottom:0px; margin-top: 2%;}
	
    .text-T1{ font-weight:bold; }	/*	bold text  */
	.text-T2{ font-family:'Liberation Serif'; font-size:2vw; font-style: normal; }	/*	normal text  */
    .text-T3{ font-family:'Liberation Serif'; font-size:2vw; font-style: italic; }	/*	italic text  */
    .text-T4{ font-family:'Liberation Serif'; font-size:2vw; color:blue; }	/*	 link text  */
    .text-T5{ font-family:'Liberation Serif'; font-size:2vw; }	/*	 text  */
    .text-T6{ font-family:'Liberation Serif'; font-size:.7vw; line-height: .5; }	/*	 image attrib  */
	


/* 
dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value

 */

#main	/*	child of the body  */
				/*		^^^^^^^^^^^^^^ set width to viewport ? ^^^^^^^^^^^^^^^^^   */
{
	width:90%;	/*	0% of body container  */
	height: fit-content;
	padding-top: 1vh;
	padding-right: 5vw;
	padding-bottom: 1vh;
	padding-left: 5vw;
	margin: 0;
	border-style: none;
    border-color: green; /* border color */ 
}
 
	#columnone
{
	float: left;
	width: 64%;	/*	% of main container  */
	height:auto;				/*	1vh = 1% of main height  */
	height: fit-content;
	display: block;
	margin-left: 1%;
	margin-right: auto;
	border-style: none;
	border-color:red;
}

	#columnone ul 
{				
	margin: 0;
	padding: 0;
	list-style: none;
	color:white;
}
	#columntwo
{
	position: sticky;
	top: 0;
	float: right;
	width: 25%;	/*	% of main container  */
	height: auto;
	display: block;
	margin-left: 0vw;
	margin-right: auto;
	border-style: none;
	border-color:yellow;
}

	#columntwo ul 
{				
	margin: 0;
	padding: 0;
	list-style: none;
	color:black;
}

a
{						 /* changes links and bookmark links */
	/* text-decoration:none; */
	color:black;
	font-family: 'Liberation Serif'; font-size:3vw;
	font-size:100%;					/*	1vw = 1% of viewport width  */
}

b
{						 /* changes links and bookmark link */
	/* text-decoration:none; */
	color:black;
}

 	#texttitle
	{
	height:4%;
    justify-content: center; /* Center horizontally */ 
    align-items: center; /* Center vertically */ 
    text-align: center; /* Center text */
	margin: 0;
	}

.embedtext
				/*		^^^^^^^^^^^^^^ set height to text length ^^^^^^^^^^^^^^^^^   */
{
	margin-top:15%;
	height:auto;		/*		100% of column 1   */
	width:100%;			/*		100% of column 1   */	
	margin-top:0vh;
	border-style: none;
	border-color:red;
display: block;
  margin-left: auto;
  margin-right: auto;
  }
  
  .extlinks
				/*		^^^^^^^^^^^^^^ external links ^^^^^^^^^^^^^^^^^   */
{
	margin-top:10%;
	height:auto;		/*		100% of column 1   */
	width:100%;			/*		100% of column 1   */	
	font-size: 100%;  					/*	1vw = 1% of viewport width  */
	margin-top:0vh;
	border-style: none;
	border-color:red;
  margin-left: auto;
  margin-right: auto;
  }
 
img {		/*	applies to all three images   */
width: 100%;
height: auto;
object-fit: fill;
border-style: none;		/*	sets the border around the image   */
border-color:green;
	}

.highlightDiv
{
margin-right: 0em;
display: block;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
width: 25%;
height: 20%;	
position:relative;	
left:0%;					/*	sets the container position relitive to the container left */
padding-top: 0vh;
padding-right: 5vw;
padding-bottom: 0vh;
padding-left: 1vw;
border-style: none;		/*	sets the border around the container   */
border-color:black;
}

.my1stImage
{
	width: 25%;
	height: 25%;	
	float: left; 
	padding-top: 1vh;
	padding-right: 5vw;
	padding-bottom: 1vh;
	padding-left: 1vw;
	position:relative; 
	right:5%;
	top: 20px;
	left: 20px;
	border-style: none;		/*	sets the border around the container   */
	border-color:black;
}

.my2ndImage
{
	width: 25%;
	height: 25%;	
	float: left; 
	padding-top: 1vh;
	padding-right: 5vw;
	padding-bottom: 1vh;
	padding-left: 1vw;
	margin: 1vw;
	position:relative; 
	right:5%;
	top: 20px;
	left: 20px;
	border-style: none;
	border-color:black;
}

.my3rdImage
{
	clear:both;
	width: 10%;
	height: auto;	
	float: left; 
	padding-top: 1vh;
	padding-right: 50vw;
	padding-bottom: 1vh;
	padding-left: 0vw;
	margin: 1vw;
	position:relative; 
	right:5%;
	top: 20px;
	left: 20px;
	border-style: none;
	border-color:blue;
}

				/*		^^^^^^^^^^^^^^ horizontal links ^^^^^^^^^^^^^^^^^   */
.horzlinks 
{
    border: 1px solid #ccc;
	min-width:100%;			/*		100% of column 1   */	
    border-width: 1px 0;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center; /* « The magic. */
	font-size: 100%;  					/*	1vw = 1% of viewport width  */
	border-style: none;
	border-color:black;
}

.horzlinks li 
{
    display: inline; /* « More magic. */
	font-size: 100%;  					/*	1vw = 1% of viewport width  */
}

.horzlinks a 
				/*		^^^^^^^^^^^^^^ set padding ? ^^^^^^^^^^^^^^^^^   */
{
    display: inline-block; /* « Last bit of magic. */
  margin-top: 1vw;
  margin-bottom: 1vw;
  margin-right: 2vw; 
  font-size: 1.5vw;  					/*	1vw = 1% of viewport width  */
  
}
				/*		^^^^^^^^^^^^^^ verticle links ^^^^^^^^^^^^^^^^^   */
.vertlinks 
{
    border: 1px solid #ccc;
    border-width: 1px 0;
    list-style: none;
	line-height: 3vw;
	margin-top: 1vw;
	margin-bottom: 1vw;
    padding: 0;
    text-align: left; /* « The magic. */
	font-size: 1vw;  					/*	1vw = 1% of viewport width  */
	border-style: none;
	border-color:black;
}

.vertlinks li 
{
	font-size: 1vw;  					/*	1vw = 1% of viewport width  */
}

.vertlinks a 
				/*		^^^^^^^^^^^^^^ set padding ? ^^^^^^^^^^^^^^^^^   */
{
  margin-top: 3vw;
  margin-bottom: 2vw;
  margin-right: 2vw; 
  margin-left: 3vw; 
  font-size: 1vw;  					/*	1vw = 1% of viewport width  */
}
				/*		^^^^^^^^^^^^^^ verticle for landscape mode links ^^^^^^^^^^^^^^^^^   */
.sitelinks 
{
    border: 1px solid #ccc;
    border-width: 1px 0;
    list-style: none;
	line-height: 3vw;
	margin-top: 1vw;
	margin-bottom: 1vw;
    padding: 0;
    text-align: left; /* « The magic. */
	font-size: 1vw;  					/*	1vw = 1% of viewport width  */
	border-style: none;
	border-color:black;
}

.sitelinks li 
{
	font-size: 1vw;  					
}

.sitelinks a 
				/*		^^^^^^^^^^^^^^ set padding ? ^^^^^^^^^^^^^^^^^   */
{
  margin-top: 3vw;
  margin-bottom: 2vw;
  margin-right: 2vw; 
  margin-left: 3vw; 
  font-size: 1vw;  					/*	1vw = 1% of viewport width  */
}


#footer 
				/*		^^^^^^^^^^^^^^ set height and font-size ? ^^^^^^^^^^^^^^^^^   */
{
	clear:both;
	width: 100%;	/*	100% of the footer container  */
	height:2vw;
	background: url(footer.png) no-repeat;
	text-align:center;
	font-size:1vw;					/*	1vw = 1% of viewport width  */
	border-style: none;
	position: relative;
}