/* White, Jim (1218784086) – IFT 301 (46909) – JimWhite.css */
/*
****************************************************************************
****************************************************************************

Main Screen, Big Block Layout.

****************************************************************************
****************************************************************************
*/
:root {
	--WindowFrameWidth: 16px;
	--TitleFrameWidth: 8px;
	--TitlePaddingTop: 20px;
	--TitlePaddingBottom: 20px;
	--TitleFontSize: 60px;
	--ReservedTop: calc(var(--WindowFrameWidth) + var(--TitleFrameWidth) + var(--TitlePaddingTop) + var(--TitlePaddingBottom) + var(--TitleFontSize) + 15px);

/* 	--ButtonHigh: calc() */

}

.overflow {
	height: 200px;
}


#myWarning {
	font-family: sans-serif;
	font-weight: 900;
	font-size: 25px;
	text-shadow: 0px 0px 10px black;
	letter-spacing: .02em;
	text-rendering: optimizeLegibility;
	color: var(--colorThemeCLL);
	padding: 0px;
	margin: 0px;
}


html {
	background-color: var(--colorThemePLL);
	border: var(--WindowFrameWidth) solid #650cb1;
	position: absolute;
	bottom: 0%;
	top: 0%;
	left: 0%;
	right: 0%;
}

body {
	padding: 0px;
	margin: 0px;
}

p {
	padding-top: 15px;
	padding-bottom: 0px;
	margin: 0px;
	margin-left: 1vw;
	color: var(--colorThemeS1DD);
}


h1,
h2 {
	background-color: var(--colorThemeS2DD);
	color: var(--colorThemeCL);
	
	border: 9px ridge rgba(0, 10, 255, 0.91);
	font-size: clamp(16px, 1rem + 3vw, 72px);
	text-shadow: 4px 4px 4px var(--colorThemeCD);
	letter-spacing: .02em;
	text-align: center;
	font-weight: bolder;

	padding-top: 2.1vh;
	padding-bottom: 2.1vh;
	padding-left: 3vw;
	padding-right: 3vw;
	
	margin-top: 0%;
	margin-bottom: 0%;
	margin-left: 0%;
	margin-right: 0%;

	transition: all var(--hoverTransitionTime) ease;
	-webkit-transition: all var(--hoverTransitionTime) ease;
}

h2 {
	background-color: var(--colorThemeS2D);
	font-size: clamp(14px, 1rem + 1vw, 30px);
	text-shadow: 2px 2px 2px var(--colorThemeCD);
	padding-top: 1vh;
	padding-bottom: 1vh;
	margin-top: 2.1vh;
	margin-bottom: 2.1vh;
	border: 6px ridge rgba(0, 10, 255, 0.91);
	color: var(--colorThemeCLL);
}

h1:hover,
h2:hover {
	background-color: var(--colorThemeS2LL);
	color: var(--colorThemeCD);
	text-shadow: 4px 4px 4px var(--colorThemeCL);
}


#IncomeSourceEntry {
/* 	width: 80vw; */
	margin-top: 3vh;
	position: relative;
/* 	height: 80vh; */
	margin-left: auto;
	margin-right: auto;
	--padd: 20px;
	display: grid;
	--colGap: 2%;
	--rowGap: 10px;
	--widthAdjust: calc(2 * var(--colGap) / 3);
	--colWidth1: calc(20% - var(--widthAdjust));
	--colWidth2: calc(20% - var(--widthAdjust));
	--colWidth3: calc(30% - var(--widthAdjust));
	--colWidth4: calc(30% - var(--widthAdjust));
	grid-template-columns: var(--colWidth1) var(--colWidth2) var(--colWidth3) var(--colWidth4);
	grid-template-rows: 25px 25px 25px 25px;
	grid-column-gap: var(--colGap);
	grid-row-gap: 18px;
	border: 4px solid #000aff;
	padding: var(--padd);
}

/*
****************************************************************************
****************************************************************************

Form Layout.

****************************************************************************
****************************************************************************
*/
.primaryField {
	height: 30px;
	font-size: 20px;
	padding-left: 5px;
	position: relative;
	top: -8px;
	border-radius: 6px;
	border-top-color: var(--colorThemePLL);
	border-left-color: var(--colorThemePLL);
	border-bottom-color: var(--colorThemeP);
	border-right-color: var(--colorThemeP);
	/* 	border-color: var(--colorThemePDD); */
}

.secondaryField {
	height: 20px;
	font-size: 16px;
	padding-left: 5px;
	border-radius: 6px;
	/* 	font-size: 15px; */
	/* 	border-color: var(--colorThemePDD); */
	border-top-color: var(--colorThemePLL);
	border-left-color: var(--colorThemePLL);
	border-bottom-color: var(--colorThemeP);
	border-right-color: var(--colorThemeP);
}

#WeekOfMonth1 {
	font-size: 18px;
	height: 50px;
	padding-left: 15px;
	border-left: 15px;
	/* 	margin-left: 15px; */
}

#amountHigh {
	font-size: 15;
}

#amountLow {
	font-size: 15;
}

.primaryField:focus {
	border-color: #000aff;
	border-width: 1px;
}

.secondaryField:focus {
	border-color: #000aff;
}

.wideSelect {
	-webkit-appearance: menulist-button;
	height: 30px;
}

/*
****************************************************************************
****************************************************************************

Grid Layout within the Form.

****************************************************************************
****************************************************************************
*/
#incomeTitle,
primaryField {
	grid-column: 1/5;
	grid-row: 1;
}

#incomeDescription {
	grid-column: 1/4;
	grid-row: 2;
}

#incomeSource {
	grid-column: 4/5;
	grid-row: 2;
}

#amountLow {
	grid-column: 4;
	grid-row: 3;
}

#amountHigh {
	grid-column: 4;
	grid-row: 4;
}

#iFrequency {
	grid-column: 1/3;
	grid-row: 3;
}

#WeekOfMonth1 {
	grid-column: 1/2;
	grid-row: 4;
}

#WeekOfMonth2 {
	grid-column: 2/3;
	grid-row: 4;
}

#WeekOfMonth1-button {
	grid-column: 1/2;
	grid-row: 4;
}

#WeekOfMonth2-button {
	grid-column: 2/3;
	grid-row: 4;
}

#startDate {
	grid-column: 3;
	grid-row: 3;
	font-size: 15px;
	text-align: center;
}

#endDate {
	grid-column: 3;
	grid-row: 4;
	font-size: 15px;
	text-align: center;
}

#myWarning {
	grid-column: 1/3;
	grid-row: 4;
	text-align: center;
	
}

#Weekday,
#Weekday-button {
	grid-column: 1/3;
	grid-row: 4;
}

/*
****************************************************************************
****************************************************************************

Update/Modifications to JQuery UI Widgets.

****************************************************************************
****************************************************************************
*/
.ui-widget-header {
	background: -webkit-linear-gradient(var(--colorThemePDD) 10%, var(--colorThemePL) 70%);
	color: white;
}

.ui-selectmenu-menu {
	font-size: 14px;
	left: 15px;
}

.ui-selectmenu-icon {
	padding-top: 6px;
	margin-top: 6px;
}

.ui-selectmenu-button {
	padding-top: 2px;
	padding-right: 4px;
	position: relative;
	left: 2px;
	font-size: 15px;
	height: 14px;
	border-radius: 6px;
	border-width: 2px;
	border-style: inset;
	border-top-color: var(--colorThemePLL);
	border-left-color: var(--colorThemePLL);
	border-bottom-color: var(--colorThemeP);
	border-right-color: var(--colorThemeP);
}

.ui-selectmenu-text {
	left: 2px;
	font-size: 15px;
}

#iFrequency-button {
	--colWidth1p2: calc(80% - var(--widthAdjust));
	grid-column: 1/3;
	grid-row: 3;
}

#day-button {
	--colWidth1p2: calc(80% - var(--widthAdjust));
	grid-column: 1/3;
	grid-row: 4;
}

/*
****************************************************************************
****************************************************************************

Footer Stuff.

****************************************************************************
****************************************************************************
*/
#SaveIncomeButton {
	height: 35px;
	width: 160px;
	top: 440px;
	margin-top: -1.0vh;
	position: absolute;
	bottom: : 1vh;
	left: calc(80vw - 118px);
}

#myFooter {
	position: absolute;
	text-align: center;
	font-weight: lighter;
	width: 100%;
	font-size: 20px;
	color: var(--colorThemeCLL);
	text-shadow: 4px 4px 3px var(--colorThemeCDD);
	bottom: 10px;
}

hr {
	background: url("../images/Rainbow (Sinebow) 4px 50ms LtoR.gif");
	position: absolute;
	bottom: 35px;
	height: 5px;
	width: 96%;
	left: 2%;
	right: 2%;
	border-top: 2px inset #dfdfdf;
	border-right: 2px inset #989898;
	border-left: 2px inset #dfdfdf;
	border-bottom: 2px inset #989898;
}