/*
	RuppOnline Style Sheet.
	
	Created by ..: David Rupp
	Created on ..: 8 March 2010

	Revision History
	Modified on ..: 3 July 2010
	Modified by ..: David Rupp
	Modification Summary
		Area layout with:
		- Header
		- Menu bar
		- Body: an image that is changed periodically.
		- Footer: Credits
		
	Modified on ..: 18 August 2010
	Modified by ..: David Rupp
	Modification Summary
		Revision 3b.
		Moved home page-specific items to home.css.

	Modified on ..: 31 August 2010
	Modified by ..: David Rupp
	Modification Summary
		Revision 3c.
		Moved #pgMenuBar and #pgFooter to page-specific css.

	Modified on ..: 31 January 2023
	Modified by ..: David Rupp
	Modification Summary
		Changed default font and background color.	
		Changed #pgHeader.
		Removed #pgName.
		Changed menu to single column left justified.

	Modified on ..: 18 March 2023
	Modified by ..: David Rupp
	Modification Summary
		Changed #pgHeader.

	Modified on ..: 29 March 2023
	Modified by ..: David Rupp
	Modification Summary
		Changed hyperlink override colors to blue.
		Changed mnuItem background color from Blue to Light Blue.
		Added body font size (large).

	Modified on ..: 8 April 2023
	Modified by ..: David Rupp
	Modification Summary
		Added table stlyes used by the website title (header).

	Modified on ..: 16-22 January 2025
	Modified by ..: David Rupp
	Modification Summary
		Added box-sizing (global property).
		Added grid classes, etc.
		Modified .mnuItem for Grid.
		Added .mnuHeader, mnuItemBranch, mnuItemLeaf.
		Changed <a> color.
		Added audio, video, score, comment classes.
*/

/*********************
 Page
**********************/
	/* Re-define width and height property values to include padding and margin values. */
	* {
		box-sizing: border-box;
	}

	body {
		background-color: rgb(174, 171, 168);
		color: rgb(42, 42, 42);
		font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
		font-size: large;
	}

/*********************
 Grid
**********************/
	/* Remove the effects of page flow, such as left and right float. */
	.row::after {
		content: "";
		clear: both;
		display: table;
	}

	/* Applies to all classes whose name starts with "col-". */
	[class*="col-"] {
		float: left;
	}

	/*
		Tiny viewport, e.g., smaller phones.
		Right side is clear for finger scrolling withou activating a link.
	*/
	@media only screen and (max-width: 600px) {
		
		.col-t-0 {width: 0%;}
		.col-t-1 {width: 8.33%;}
		.col-t-2 {width: 16.66%;}
		.col-t-3 {width: 25%;}
		.col-t-4 {width: 33.33%;}
		.col-t-5 {width: 41.66%;}
		.col-t-6 {width: 50%;}
		.col-t-7 {width: 58.33%;}
		.col-t-8 {width: 66.66%;}
		.col-t-9 {width: 75%;}
		.col-t-10 {width: 83.33%;}
		.col-t-11 {width: 91.66%;}
		.col-t-12 {width: 100%;}
	}

	/* Small viewport, e.g., portrait tablets, larger phones, landscape phones. */
	@media only screen and (min-width: 600px) {
		
		.col-s-0 {width: 0%;}
		.col-s-1 {width: 8.33%;}
		.col-s-2 {width: 16.66%;}
		.col-s-3 {width: 25%;}
		.col-s-4 {width: 33.33%;}
		.col-s-5 {width: 41.66%;}
		.col-s-6 {width: 50%;}
		.col-s-7 {width: 58.33%;}
		.col-s-8 {width: 66.66%;}
		.col-s-9 {width: 75%;}
		.col-s-10 {width: 83.33%;}
		.col-s-11 {width: 91.66%;}
		.col-s-12 {width: 100%;}
	}

	/* Medium viewport, e.g., landscape tablets. */
	@media only screen and (min-width: 768px) {
		
		.col-m-0 {width: 0%;}
		.col-m-1 {width: 8.33%;}
		.col-m-2 {width: 16.66%;}
		.col-m-3 {width: 25%;}
		.col-m-4 {width: 33.33%;}
		.col-m-5 {width: 41.66%;}
		.col-m-6 {width: 50%;}
		.col-m-7 {width: 58.33%;}
		.col-m-8 {width: 66.66%;}
		.col-m-9 {width: 75%;}
		.col-m-10 {width: 83.33%;}
		.col-m-11 {width: 91.66%;}
		.col-m-12 {width: 100%;}
	}

	/* Large viewport, e.g., smaller laptops. */
	@media only screen and (min-width: 992px) {
		
		.col-l-0 {width: 0%;}
		.col-l-1 {width: 8.33%;}
		.col-l-2 {width: 16.66%;}
		.col-l-3 {width: 25%;}
		.col-l-4 {width: 33.33%;}
		.col-l-5 {width: 41.66%;}
		.col-l-6 {width: 50%;}
		.col-l-7 {width: 58.33%;}
		.col-l-8 {width: 66.66%;}
		.col-l-9 {width: 75%;}
		.col-l-10 {width: 83.33%;}
		.col-l-11 {width: 91.66%;}
		.col-l-12 {width: 100%;}
	}

	/* Extra large viewports, e.g, large laptops, desktops. */
	@media only screen and (min-width: 1200px) {
		
		.col-x-0 {width: 0%;}
		.col-x-1 {width: 8.33%;}
		.col-x-2 {width: 16.66%;}
		.col-x-3 {width: 25%;}
		.col-x-4 {width: 33.33%;}
		.col-x-5 {width: 41.66%;}
		.col-x-6 {width: 50%;}
		.col-x-7 {width: 58.33%;}
		.col-x-8 {width: 66.66%;}
		.col-x-9 {width: 75%;}
		.col-x-10 {width: 83.33%;}
		.col-x-11 {width: 91.66%;}
		.col-x-12 {width: 100%;}
	}

/*********************
 Header (Title)
**********************/
	.headerFooter {
		height: 25px;
	}

	.titleImg {
		border: 5px solid rgb(100, 100, 100);
		padding: 15px;
	}

/*********************
 Direct Links
**********************/
	.directLink {
		font-size: 16px;
		padding: 15px;
		text-align: center;
	}

/*********************
 Menu Items
**********************/

	/* Use on menu item destination page. */
	.mnuHeader {
		background-color: rgb(174, 171, 168);
		border: 5px solid rgb(100, 100, 100);
		font-size: 48px;
		padding: 15px;
		text-align: center;
	}

	.mnuItem {
		border: 10px solid rgb(174, 171, 168);
		height: 100px;
	}

	.mnuItemBranch {
		background-color: rgb(200, 196, 192);
		border: 5px outset rgb(160, 10, 4);
		height: 80px;
		padding: 5px;
		text-align: center;
	}

	.mnuItemLeaf {
		background-color: rgb(200, 196, 192);
		border: 5px outset rgb(4, 10, 160);
		height: 80px;
		padding: 5px;
		text-align: center;
	}

	.mnuItemLongName {
		font-size: 16px;
	}

	.mnuItemMediumName {
		font-size: 20px;
	}

	.mnuItemShortName {
		font-size: 48px;
	}

/********************
 Audio, Video, Score, Comment (AVSC)
*********************/
	.baseBox {
		align-content: center;
		justify-content: center;
		border: 10px solid rgb(174, 171, 168);
		height: 100px;
	}
	
	.audioBox {
		display: flex;
		align-content: center;
		justify-content: center;
		background-color: rgb(174, 171, 168);
		border: 5px solid rgb(100, 100, 100);
		height: 80px;
		padding: 20px;
	}

	.videoBox {
		display: flex;
		align-content: center;
		justify-content: center;
		background-color: rgb(174, 171, 168);
	}

	.commentBox {
		display: flex;
		align-content: center;
		justify-content: center;
		background-color: rgb(200, 196, 192);
		border: 5px outset rgb(4, 10, 160);
		height: 80px;
		padding: 5px;
	}

	.scoreBox {
		display: flex;
		align-content: center;
		justify-content: center;
		background-color: rgb(200, 196, 192);
		border: 5px outset rgb(4, 10, 160);
		height: 80px;
		padding: 5px;
	}

/********************
 Social Media
*********************/
	.logos {
		height: 40px;
	}
	.socMedia {
		height: 70px;
		padding: 15px;
	}
/********************
 Copyright
*********************/
	
	/* Copyright for Page. Use only for copyright notice on each page. */
	.copyrightPage {
		font-size: small;
		font-variant: small-caps;
		Padding: 15px;
		text-align: center;
	}

/********************
 Hyperlink overrides
*********************/
	a {
		color: rgb(10, 10, 10);
	}

	a:link {
		text-decoration: underline;
	}

	a:visited {
		text-decoration: underline;
	}

	a:hover {
		text-decoration: none;
	}

	a:active {
		text-decoration: underline;
	}

	a:focus {
		text-decoration: underline;
	}