/* style_www.css Dec 2024  This the style sheet used for www.NesterenkoSoftware.com web pages.  
The Web-Applications (TimetableAssistantWeb/TimetableAssistant.php etc. use a different style sheet - style.css - separate file for each app)*/

/* 
An id must be unique in the whole page.
A class may apply to many elements.
Sometimes, it's a good idea to use ids.
In a page, you usually have one footer, one header...
Then the footer may be into a div with an id
<div id="footer" class="...">
and still have a class
*/

	/* Colours: 
	background-color mostly #f1f1f1;
	
	color (text color) 	header Text Maroon;
	
	topnav background-color Maroon;
	
	*/

	* {
		box-sizing: border-box;
	}

	body {
		font-family: Arial; 
		/*font-family: "Verdana", Georgia, Serif; */
		/* font-family: "Times New Roman", Times, serif; */
		padding: 0px 10px 0px 10px; 
		/* background-color: white; */
		/*  background-color: #f1f1f1; was active */
	}

	/* Header/Blog Title */
	.header {
		font-family: "Time New Roman", Times, serif; 
		padding: 0px 5px 0px 5px; 
		text-align: center; 
		/* background-color: white; */
		font-size: 25px;
		color: Maroon;
		/* background-color: #f1f1f1; */
		/* background-color: gray; */
	}

	.header h1 {
		/* font-size: 15px; */
	}

	/* Style the top navigation bar */
	.topnav {
		overflow: hidden;
		/* background-color: #333; */
		/* background-color: CadetBlue; */
		background-color: BurlyWood;
		
	}

	/* Style the topnav links */
	.topnav a {
		float: left; 
		/* float: none; */
		display: block;
		/* color: #f2f2f2; */
		color: black;
		text-align: center;
		padding: 5px 10px;
		text-decoration: none;
	}

	/* Change color on hover */
	.topnav a:hover {
		background-color: #ddd;
		color: black;
	}

	/* Create two unequal columns that float next to each other */
	/* Left column */
	.leftcolumn {   
		float: left;
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
		background-color: white;
	}

	/* Right column */
	.rightcolumn {
		float: left;
		width: 0%;
		/* background-color: #f1f1f1;  */
		padding-left: 20px;
		background-color: white; 
	}

	/* Fake image */
	.fakeimg {
		width: 100%;
		padding: 20px;
		background-color: #aaa;
	}

	/* Add a card effect for articles */
	.cardx {
		/* background-color: #f1f1f1; */
		padding: 0px;
		margin-top: 0px;
		background-color: white; 
	}
	
	.card {
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
		padding: 10px;
		/* text-align: center; */
		background-color: #f1f1f1;
		margin: 5px;
		
	}



	/* Clear floats after the columns */
	.row::after {
		content: "";
		display: table;
		clear: both;
	}

	/* Footer */
	.footer {
		padding: 15px;
		text-align: center;
		margin-top: 10px;
		/* color: CadetBlue; */
		/* background: #ddd; */
		background-color: #f1f1f1; 
		/* background-color: BurlyWood; */
	}

	/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
	@media screen and (max-width: 800px) {
		.leftcolumn, .rightcolumn {   
			width: 100%;
			padding: 0;
		}
	}

	/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
	@media screen and (max-width: 400px) {
		.topnav a {
			float: none;
			width: 100%;
		}
	}
	
	/* Table with Border: */	
	table.Main { 
		border-width: 1px;
		border-spacing: 2px;
		border-style: inset;
		border-color: black;
		border-collapse: collapse;
		/* background-color: white; */
	}
	
	table.Main th {
		border-width: 1px;
		padding: 1px;
		border-style: inset;
		border-color: black;
		/* background-color: white; */
	}
	table.Main td {
		border-width: 1px;
		padding: 1px;
		border-style: inset;
		border-color: black;
		/*vertical-align: top;  didn't work */
		/* background-color: white; */
	}	
	
	/* Table without Border: */	
	table.NoBorder { 
		border:None;
		
	}
	
	
	hr {
		border: 1px solid Maroon;
	}

	h1 {
		color:Maroon;
		margin-top: 0.1em;
		margin-bottom: 0.1em;
	}

	h2 {
		color:Maroon;
		margin-top: 0.1em;
		margin-bottom: 0.1em;
	}

	h3 {
		color:Maroon;
		margin-top: 0.1em;
		margin-bottom: 0.1em;
	}

	h4 {
		color:Maroon;
		margin-top: 0.1em;
		margin-bottom: 0.1em;
	}

	h5 {
		color:Maroon;
		margin-top: 0.1em;
		margin-bottom: 0.1em;
	}

	h6 {
		color:Maroon;
		margin-top: 0.1em;
		margin-bottom: 0.1em;
	}
	
	
		/* Following are 'style' statements specific to the Slide Shows */
		
		.mySlides {display: none}
			img {vertical-align: middle;}

		/* Slideshow container */
		/* Probably set this value to the size of the 'window' in which displaying the slide show - perhaps full size, but perhaps within a table etc. */
		.slideshow-container {
			max-width: 85%; /* *Change*  max-width is specified in all pages, so this is overridden.  max-width: 1000px;   or max-width: 60%;  ie. 60% of container */
			/* The max-width property defines the maximum width of an element.
			If the content is larger than the maximum width, it will automatically change the height of the element.
			If the content is smaller than the maximum width, the max-width property has no effect.
			Note: This prevents the value of the width property from becoming larger than max-width. The value of the max-width property overrides the width property. */
			position: relative;
			margin: auto;
			border: 2px solid black; /* added */
		
		}


		
		
		/* Next & previous buttons */
		.prev, .next {
			cursor: pointer;
			position: absolute;
			top: 50%;
			width: auto;
			padding: 13px; /* was 16px;  this is essentially the size of the buttons */
			margin-top: -22px;
			color: white; /* was white; */
			font-weight: bold;
			font-size: 18px;
			transition: 0.6s ease;
			border-radius: 0 3px 3px 0;
			user-select: none;
			background-color: #ffcc99; /* new parameter. it was SandyBrown; */
		}
		/* Position the "prev button" to the left */
		.prev {
			left: 0;
		}
		/* Position the "next button" to the right */
		.next {
			right: 0;
			border-radius: 3px 0 0 3px;
		}

		/* On hover, add a black background color with a little bit see-through */
		.prev:hover, .next:hover {
			/* background-color: rgba(0,0,0,0.8);  last value is Opacity ie. Transparency 0.1 faint  0.9 dark */
			background-color: rgb(255, 204, 153, 0.5); /* was rgb(244, 164, 96, 0.5); SandyBrown with Opacity */
		}

		/* Caption text Display Filename lower right*/
		.text {
			color:  rgb(204, 204, 204); /* was  rgb(242, 242, 242, 0.7); rgb(204, 204, 204, 0.7);  #000000; was Black was #f2f2f2; */
			/* font-size: 15px; */ /* This was 15px; but commented out since the text was quite small */
			padding: 3px 12px; /* was 8px 12px */
			position: absolute;
			bottom: -35px; /* was top: -25px; */  /* This will display top of text 10px from top of the slideshow-conatiner was bottom: 8px; but moved to top */
			width: 100%;
			text-align: right; /* was center; */
		}

		/* Number text (1/4 etc) */
		.numbertext {
			color: #000000; /* Black was #f2f2f2; */
			/* font-size: 12px; */ /* This was 12px; but commented out since the text was quite small */
			padding: 3px 12px; /* was 8px 12px */
			position: absolute;
			bottom: -35px; /* This will display bottom of the text 10px from bottom of the slideshow-container, I believe.  was top: 0; but moved Number to bottom */
			width: 100%; /* added this to center the text - text-align didn't work until I added width as well - interesting */
			text-align: center; /* added this to center the text */
		}

		/* The dots/bullets/indicators */
		.dot {
			cursor: pointer;
			height: 15px;
			width: 14px; /* was 15px; */
			margin: 0 1px; /* was  0 2px; */
			background-color: #ffcc99; /*   Lighter was #bbb; */
			border-radius: 50%;
			display: inline-block;
			transition: background-color 0.6s ease;
		}

		.active, .dot:hover {
			background-color: Maroon; /* #994d00; Darker was  #717171; */
		}

		/* Fading animation */
		.fade {
			animation-name: fade;
			animation-duration: 1.5s;
		}

		@keyframes fade {
			from {opacity: .4} 
			to {opacity: 1}
		}

		/* On smaller screens, decrease text size */
		@media only screen and (max-width: 300px) {
			.prev, .next,.text {font-size: 11px}
		}
		
		/* end of 'style' statements specific to the Slide Shows */