/* Main Style Sheet	  */
/* Created by Devin Cook */
/* Seriously, there is really nothing to see here */


table, tbody, td, p, th, div
{
	font-family: arial;
	font-size: 14pt;  /* 2vw; */
}

@media (orientation: portrait) and (max-width: 1080px) 
{

	table, tbody, td, p, th, div
	{
		font-size: 4.5vw;  
	}

}


body
{
	padding: 0vw;
	margin: 0px;
	background-color: #FFFFFF;  /*match main body*/

	background-image: url('images/riverside-10x4.jpg');
	background-size: 100vw 40vw;
	background-position: left top;
	background-repeat: no-repeat;
	background-attachment: fixed;
}


a,
a:link,
a:active,
a:visited
{
	text-decoration: none;
	font-weight: bold;
	cursor: pointer;
}

a:hover
{
	font-weight: bold;
	text-decoration: none;
}

/*
=======================================
Header Section
=======================================
*/
.HeaderSection
{	
}

/*
=======================================
Breadcrumb Section
=======================================
*/

.BreadcrumbSection
{	
	display: flex;
	float: right;

	padding: none;
	height: 4vw;
	vertical-align: middle;

	background-color: rgba(255, 255, 255, 0.75);
	border-left: 2px rgba(0, 0, 0, 0.5) solid;
	border-bottom: 2px rgba(0, 0, 0, 0.5) solid;
	border-right: none;
	border-top: none;
	
	border-radius: 0vw 0vw 0vw 1.5vw;
}

.BreadcrumbSection a,
.BreadcrumbSection a:link,
.BreadcrumbSection a:active,
.BreadcrumbSection a:visited
{
	color: #404040; 
	text-decoration: none;
}

.BreadcrumbSection a:hover,
.BreadcrumbSection a:hover
{
	color: #404040; 
	text-decoration: underline;
}


.BreadcrumbHead
{
	display: inline-flex; 
	align-items: center;
	text-align: center;

	padding: 0vw 1vw 0vw 2vw;
}

.BreadcrumbBody
{
	display: inline-flex; 
	align-items: center;
	text-align: center;

	padding: 0vw 1vw 0vw 1vw;
	background-image: url('images/breadcrumb-arrow.png');
	background-size: 0.5vw 1vw;
	background-position: left center;
	background-repeat: no-repeat;
}


@media (orientation: portrait) and (max-width: 1080px) 
{
	.BreadcrumbSection
	{	
		display: none;
	}
}

/*
=======================================
Title Section
=======================================
*/

.TitleSection
{
	clear: both;
	display: flex;			  
	flex-direction: column;	 
	justify-content: center;

	/* background-color: pink; */	
	padding: 0vw 0vw 0vw 25vw;

	background-image: url('images/sac-state-s-2.png');
	background-size: 25vw 25vw;
	background-position: left center;
	background-repeat: no-repeat;

	height: 30vw; /* 40 - 4 bread - 5 menu */
}

.TitleText
{
	/*white-space: nowrap;*/
	width: 60vw;
	font-size: 24pt;
	font-weight: bold;

	color: #FFFFFF;
	background-color: rgba(16, 102, 79, 0.60);
	border: rgba(0, 0, 0, 0.50) 0.5vw solid;
	padding: 2vw 3vw 2vw 3vw;
	border-radius: 1.5vw;
	
	vertical-align: middle;
}

@media (orientation: portrait) and (max-width: 1080px) 
{
	.TitleSection
	{
		height: 40vw;
	}

	.TitleText
	{	
		font-size: 6vw;
	}
}

/*
=======================================
Menu
=======================================
*/

.MenuSection
{
	display: flex;
	flex-direction: row; 
	padding: 0vw 0vw 0vw 16pt;
	height: 5vw;
	clear: both;
	background-color: transparent;
}

.MenuInactive,
.MenuSelected
{	
	display: inline-flex; 
	align-items: center;
	text-align: center;

	padding: 0pt 16pt 0pt 16pt;
	vertical-align: middle;
	margin: 0pt 4pt 0pt 0pt; 
	white-space: nowrap;

	border-radius: 16pt 16pt 0vw 0vw;
	border-top: 3px rgba(0, 0, 0, 0.4) solid;
	border-right: 3px rgba(0, 0, 0, 0.4) solid;
	border-left: 3px rgba(0, 0, 0, 0.4) solid;
}
	

.MenuInactive
{
	background-color: rgba(64, 160, 128, 0.75);
}

.MenuSelected
{
	background-color: #FFFFFF;
}

.MenuSelected a,
.MenuSelected a:visited,
.MenuSelected a:link
{
	text-decoration: none;
	color: #043927;
	display: block;
}

.MenuInactive a,
.MenuInactive a:visited,
.MenuInactive a:link
{
	text-decoration: none;
	color: #FFFFFF;	
	display: block;
}


.MenuInactive:hover
{
	color: #FFFFFF;			
	/*background-color: #E0CFA0; */
	background-color: rgba(64, 160, 128, 1);
}

@media (orientation: portrait) and (max-width: 1080px) 
{
	.MenuSection
	{
		height: auto;			  
		flex-direction: column; 
		padding: 0px;
	}

	.MenuInactive,
	.MenuSelected
	{	
		padding: 1vw 1vw 1vw 4vw;
		margin: 0px;

		border-radius: 0px;
		border-top: 0px;
		border-bottom: 0.3vw solid #404040;
		border-right: 0px;
		border-left: 0px;
	}

	.MenuInactive
	{
		background-color: #70B8A0;
	}
	.MenuSelected
	{	
		background-color: #E8E0D0;
	}
}
/*
=======================================
Content Section
=======================================
*/

.ContentSection
{
	color: #202020;
	background-color: #FFFFFF;

	padding: 4vw;
	text-align: left;
	/*vertical-align: top;*/
	clear: both;
}

.ContentSection a,
.ContentSection a:link,
.ContentSection a:active,
.ContentSection a:visited
{
	color: #5070B0;
	text-decoration: none;
	font-weight: bold;
}

.ContentSection a:hover
{
	color: #80A0E0;
	font-weight: bold;
	text-decoration: none;
}


/*
=======================================
Content Items
=======================================
*/

/* ---------------- Headers -------------- */
h1
{
	color: #FFFFFF;
	background-color: #4E7CB0;
	padding:  12pt 24pt 12pt 24pt;
	border-radius: 3vw;
	border: 2px solid #0E3C70;
	
	font-family: arial;
	font-size: 20pt;
	font-weight: bold;
	
	margin: 48pt 0vw 24pt 0vw;
	clear: both;
}

h2
{
	color: #606060;
	background-color: #ECECEC;
	padding:  10pt 24pt 10pt 24pt;
	border-radius: 18pt;
	border: 2px solid #C0C0C0;
	
	font-family: arial;
	font-size: 18pt;
	font-weight: bold;
	
	margin: 32pt 1.5vw 18pt 1.5vw;
	clear: both;
}

h3
{
	color: #606060;
	font-family: arial;
	font-size: bigger;
	margin: 28pt 1.5vw 0pt 3vw;
	text-decoration: none;
}

@media (orientation: portrait) and (max-width: 1080px) 
{
	h1
	{
		font-size: 6vw;
	}

	h2
	{
		font-size: 5vw;
	}
}

p		 				/* Paragraph */
{
	margin: 24pt 3vw 0pt 3vw;
	line-height: 1.5;
}

/* ---------------- Custom -------------- */

.Attention
{
	color: #D00000;
	font-weight: bold;
	font-size: inherit;
}

.Warning   /* has border */
{
	color: #FFFFFF;
	font-weight: bold;
	font-size: inherit;
	line-height: 1.25 !important; 

	background-color: #C04060;
	border: 2px #800020 solid;
	border-radius: 12pt;
	padding: 8pt 16pt 8pt 16pt !important;
}


em
{
	color: #E0CFA0;
	font-weight: bold;
	font-style: italic;
}

strong
{
	color: #001020;
	font-weight: bold;
	font-style: normal;
}

audio
{
	clear: both;
	border-radius: 8px 8px 8px 8px;	
}

iframe
{
	border: 0px;
	width: 100%;	
}

.Icon
{
	width: 32pt;
	height: 32pt;
	vertical-align: middle;

	padding: 0pt 12pt 0pt 12pt;
	border: none;
}

.ImageRight
{
	margin-left: 4vw;
	margin-bottom: 4vw;

	width: 30%;
 	height: auto;

	float: right;
	clear: right;
	border: none;
	border-radius: 2vw;
}

.ImageRightNoRound
{
	margin-left: 4vw;
	margin-bottom: 4vw;

	width: 30%;
 	height: auto;

	float: right;
	clear: right;
	border: none;
}

.ImageRightBig
{
	margin-left: 4vw;
	margin-bottom: 4vw;

	width: 50%;
 	height: auto;

	float: right;
	clear: right;
	border: none;
	border-radius: 2vw;
}

.ImageLeft
{
	margin-right: 4vw;
	margin-bottom: 4vw;

	width: 30%;
 	height: auto;

	float: left;
	clear: left;
	border: none;
	border-radius: 2vw;
}

.ImageCenter
{
	margin-top: 3vw;
	margin-left: auto;
	margin-right: auto;
	display: block;
	clear: both;
}

.ImageCenterBorder
{
	margin: 4vw auto 4vw auto;
	display: block;
	border-radius: 2vw;
	border: #F0F0F0 4px solid;
	clear: both;
}

.ImageBorder
{
	margin: 1.5vw;
	border-radius: 16px 16px 16px 16px;
	border: #F0F0F0 4px solid;
}

.ImageCheckBack
{
	width: 50%;
	height: auto;
	margin-top: 12pt;
	margin-left: auto;
	margin-right: auto;
	display: block;
	clear: both;
}



.ImageRounded
{
	border-radius: 16px 16px 16px 16px;
}

.CodeText
{
	font-family: "Courier New", Courier, monospace;
	font-weight: bold;
}

.InlineCodeWhite
{
	font-family: "Courier New", Courier, monospace;
	font-weight: bold;
	color: #000000;
	background-color: #FFFFFF;

	border: 3px #306090 solid;
	border-radius: 8pt;

	padding: 1pt 8pt 1pt 8pt;
}

.InlineCodeBlack
{
	font-family: "Courier New", Courier, monospace;
	font-weight: bold; 
	color: #FFFFFF;
	background-color: #404040;

	border: 3px #000000 solid;
	border-radius: 8pt;

	padding: 1pt 8pt 1pt 8pt;
}

.CodeTableWhite
{
	margin: 24pt 3vw 0pt 3vw;

	color: #000000;
	background-color: #FFFFFF;
	border: 3px #306090 solid;
	border-radius: 8pt;
}

.CodeTableBlack
{
	margin: 24pt 3vw 0pt 3vw;

	color: #FFFFFF;
	background-color: #404040;
	border: 3px #000000 solid;
	border-radius: 8pt;
}

.CodeTableWhite td,
.CodeTableBlack td
{
	font-family: "Courier New", Courier, monospace;
	font-weight: bold;
	padding: 6pt 12pt 6pt 12pt;
}



.VideoCenter
{
	
	margin: 3vw auto 3vw auto;
	width: 80vw;
	height: 45vw;		   /* 16x9 */
	background-color: #C0C0C0;	
	border-radius: 2vw 2vw 2vw 2vw;
	border: none;
	
	display: block;
	clear: both;
}

.Video
{
	
	margin: 3vw auto auto 3vw;
	width: 80vw;
	height: 45vw;		   /* 16x9 */
	background-color: #C0C0C0;	
	border-radius: 2vw 2vw 2vw 2vw;
	border: none;
	
	display: block;
	clear: both;
}

/* ---------------- Lists -------------- */

ol
{
	margin: 24pt 3vw 0pt 3vw;	
	line-height: 1;
}

ul
{
	margin: 24pt 3vw 0pt 3vw;	
	list-style-type: square;
}

li
{
	margin: 0pt 0pt 12pt 0pt;
	line-height: 1.25;
	padding-left: 8pt;
}


li::marker
{
	color: #4E7CB0;
}


li a:hover
{
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;
}


.LinkComment
{
	color: #202020;
	font-size: 80%;
}

/*
=======================================
Link buttons
=======================================
*/

.LinkTable
{	
	margin: 1.5vw 1.5vw 0vw 1.5vw;   /* matches p */
	border-radius: 1.5vw 1.5vw 1.5vw 1.5vw;
	background-color:  #90C0E0;  /*#80D0C0;*/
}

.LinkCell
{
	padding: 6pt 11vw 6pt 11vw;
	color: #FFFFFF;
}

.LinkCell a:active,
.LinkCell a:link,
.LinkCell a:visited,
.LinkCell a:hover
{
	color: #FFFFFF;	
}

/*
=======================================
Chart
=======================================
*/

.ChartTable,
.ChartTable tbody
{
	border-collapse: collapse;
	margin: 24pt 24pt 0pt 3vw;  /* Same as paragraph */

	font-family: arial;
	font-size: 12pt;
	vertical-align: middle;
	text-align: left;
}

.ChartTable ul
{
	margin: 0pt 8px 0pt 8px;
}

.ChartColumn
{
	text-align: center;

	padding: 8pt 16pt 8pt 16pt;
	border: 2px solid #3E6CA0;
	color: #FFFFFF;
	background-color: #7EACE0;
}

.ChartBody
{
	white-space: nowrap;

	padding: 8pt 16pt 8pt 16pt;
	border: 2px solid #3E6CA0;
	color: #202020;
	background-color: #F8F8F8;
}

.ChartBodyName
{
	vertical-align: middle;
	white-space: nowrap;
	text-align: center;
	padding: 8pt 16pt 8pt 16pt;
	border: 2px solid #3E6CA0;
	color: #202020;
	background-color: #E8E8E8;
}

.ChartColumnSpacer
{
	width: 16pt !important;
	min-width: 16pt;
	background-color: none;
}

.ChartBlank
{
	background-color: none; 
}

.ChartBodyDownload
{
	background-image: url('images/download-icon.png');
	background-size: 16pt 16pt;
	background-position: left 8pt center;
	background-repeat: no-repeat;
	background-padding-left: 16pt;

	vertical-align: middle;
	white-space: nowrap;

	padding: 8pt 16pt 8pt 32pt;
	border: 2px solid #3E6CA0;
	color: #202020;
	background-color: #F8F8F8;
}

.ChartBodyNotes
{
	background-image: url('images/down-icon.png');
	background-size: 16pt 16pt;
	background-position: right 8pt center;
	background-repeat: no-repeat;
	background-padding-left: 16pt;

	vertical-align: middle;
	white-space: nowrap;

	padding: 8pt 32pt 8pt 15pt;
	border: 2px solid #3E6CA0;
	color: #202020;
	background-color: #F8F8F8;
}

/*
=======================================
Javascript Elements
=======================================
*/

.FrameBox
{
	margin: 16pt auto 16pt auto;
	width: 85vw;
		height: 95vh;
	background-color: #F8F8F8;	
	border-radius: 8pt;
	border: 2px solid #C0C0C0;
	display: block;
}

.FormTable
{
	margin: 1.5vw 1.5vw 0vw 3vw;
}

.FormTable td
{
	padding: 1vw 0vw 0vw 0vw;
	vertical-align: middle;
}

.PasswordBox
{
	font-family: "Courier New", Courier, monospace ;
	font-size: 16pt;
	font-weight: bold;
	
	border: 6px #6090C0 solid;
	padding: 10pt;
	border-radius: 1vw;
	background-color: #FFFFFF;
}

.Button
{
	font-size: 16pt;
	margin: 0vw;
	padding: 8pt 16pt 8pt 16pt;
	border: 2px solid #022E24;
	border-radius: 1vw;
	color: #011e14;
	background-color:  #e0cfa0;
}

.Button:hover
{
	background-color: #ffefc0;
}

.ASCIIBoxInput,
.ASCIIBoxOutput
{
	font-family: "Courier New", Courier, monospace;
	font-weight: bold;
		font-size: 14pt;

	padding: 16pt;
	margin: 16pt auto 16pt auto;
	width: 80vw;
		height: 40vh;

	border-radius: 8pt 0pt 0pt 0pt;
	border: 2px solid #C0C0C0;
	display: block;

		overflow: scroll;
		resize: none; /* Remove this if you want the user to resize the textarea */
}

.ASCIIBoxInput
{
	color: #404040;	
	background-color: #FAFAFA;	
}

.ASCIIBoxOutput
{
	color: #FAFAFA;
	background-color: #404040;	
}


.GlossaryTable
{
	margin: 24pt 3vw 0pt 3vw;
	line-height: 1.5;
}

.GlossaryTerm, 
.GlossaryMeaning
{
	border-bottom: 1px #D0D0D0 solid;
	vertical-align: top;
	padding: 8pt 8pt 8pt 0pt;
}

.GlossaryTerm
{
	font-weight: bold;
}