/* 	Copyright: Xavier ten Hove. */

/* The selector for the whole windows like pop-up UI. */
.UiBox_Object 
{
	margin: 0 auto;
	width: 65%;
}

.UiBox_Header 
{
	height: 30px;
	padding: 2px 1px 7px 2px;
	
	border: 3px groove blue;
	border-bottom: 0px;
	border-top-left-radius:  4px;
	border-top-right-radius: 4px;

	color: white;
	font-size: 18px;
	text-align: left;
	font-weight: bold;

	background-color: #1c37ff;/* Alternative if the browser don't supports gradients! */
	background-image: linear-gradient(#1403ab, #0856d1, #1804d4);
}


.UiBox_Content
{
	padding: 4px 10px 4px 25px;

	border: 3px groove blue;

	color: black;
	font-size: 18px;
	text-align: left;

	background-color: white;/* Alternative if the browser don't supports gradients! */
	background-image: radial-gradient(white 30%, #d4cfc5 70%);
	/*background-image: radial-gradient(white 30%, #c7c6b5 70%);*/
}


.ArticleLeft
{
	width: 65%;
	float: left;
	padding-top: 10px;
}
.AsideRight
{
	width: 35%;
	float: right;
	padding-top: 25px;
	text-align: center;
}
.AsideRight img
{
	border: 3px groove yellow;
	border-radius: 25%;

	width: 250px;
}

@media screen and (max-width: 1320px)
{
	.MobileImageInIndexUiBox
	{
		border: 3px groove black;
		border-radius: 25%;
		width: 250px;
	}
}



/* The selector for the Mini windows like pop-up UI's that I use for the projects. */
.GridOfProjects 
{
	margin: 0 auto;
	width: 95%;

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	grid-column-gap: 8px;
	grid-row-gap: 24px;
}
/*.GridOfProjects .UiBox_Header
{
	width: 467px;
}*/
.GridOfProjects .UiBox_Content
{
	padding: 10px 10px 15px 10px;
	height: 525px; /* 510px; */
/*	width: 450px;*/
	font-size: 16px;
}
.GridOfProjects article     { text-align: left;   }
.GridOfProjects article div { text-align: center; }
.GridOfProjects article p   { height: 120px;      }

.GridOfProjects .UiBox_Empty
{
	padding: 10px 10px 15px 10px;
	height: 525px;
	background-color: none;
	border-color: none;
}

.ImgBox
{
	width: 200px;
	height: 200px;
	border-radius: 5px;
	border: 1px solid black;
}
.ImgSquare
{
	width: 400px;
	height: 200px;
	border-radius: 5px;
	border: 1px solid black;
}



/* ******************** */
/* *** Menu Buttons *** */
/* ******************** */

.MenuButtons
{
	display: table;
	margin: 0 auto;
}

.MenuButtons ul
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.MenuButtons li
{
	float: left;
	padding-left: 5px;
	padding-right: 5px;
}


@media screen and (max-width: 1035px)
{
	.MenuButtons
	{
		display: block;
		margin: 0 auto;
	}

	.MenuButtons ul
	{
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	.MenuButtons li
	{
		float: none;
		padding-top:    8px;
		padding-bottom: 8px;
	}
}


.MenuButtons li a
{
	padding: 4px 20px;

	color: black;
	font-size: 18px;
	font-weight: bold;
	text-decoration: none; 

	/*font-family: "Times New Roman", Times, serif, Arial;*/
	font-family: 'Comic Sans MS', Arial, Helvetica, sans-serif;
	
	border: 2px groove #5630ff;
	border-radius: 5px;

	background-color: white;/* Alternative if the browser don't supports gradients! */
	background-image: linear-gradient(0deg, #c8c8c8 0%, #f6f6ff 50%, #c8c8c8 100%);
}
.MenuButtons li a:hover
{
	border-color: darkorange;

	background-color: whitesmoke;/* Alternative if the browser don't supports gradients! */
	background-image: linear-gradient(0deg, #bbbbbb 0%, #e9e9e9 50%, #bbbbbb 100%);
}


.ButtonMiniWindow
{
	margin: 0 auto;
	text-align: center;
	padding-top: 12px;
}
.ButtonMiniWindow a
{
	padding: 4px 20px;

	color: black;
	font-size: 18px;
	font-weight: normal;
	text-decoration: none; 
	font-family: "Times New Roman", Times, serif, Arial;
	
	border: 2px groove #5630ff;
	border-radius: 5px;

	background-color: white;/* Alternative if the browser don't supports gradients! */
	background-image: linear-gradient(0deg, #c8c8c8 0%, #f6f6ff 50%, #c8c8c8 100%);
}
.ButtonMiniWindow a:hover
{
	border-color: darkorange;

	background-color: whitesmoke;/* Alternative if the browser don't supports gradients! */
	background-image: linear-gradient(0deg, #bbbbbb 0%, #e9e9e9 50%, #bbbbbb 100%);
}


.ButtonMiniWindowDisabled
{
	margin: 0 auto;
	text-align: center;
	padding: 4px 20px;
	width: 150px;

	color: black;
	font-size: 18px;
	font-weight: normal;
	text-decoration: none; 
	font-family: "Times New Roman", Times, serif, Arial;
	
	border: 2px groove #001542;
	border-radius: 5px;

	background-color: darkgrey;/* Alternative if the browser don't supports gradients! */
	background-image: linear-gradient(0deg, #7a7a7a 0%, #6e6e6e 50%,  #7a7a7a  100%);
}
/*.ButtonMiniWindowDisabled:hover
{
	border-color: darkgrey;

	background-color: whitesmoke;*//* Alternative if the browser don't supports gradients! */
	/*background-image: linear-gradient(0deg, #bbbbbb 0%, #e9e9e9 50%, #bbbbbb 100%);
}*/



/* ************************************************************************ */
/* *** Other fun stuff to add some extra details like buttons and icons *** */
/* ************************************************************************ */

.Icon
{
	width:  22px;
	padding-right: 5px;
}

.TitelBar
{
	color: white;
	width: 100%;
}

.CloseButton 
{
	border: 1px solid white; 
	border-radius: 3px;

	color: white;
	font-size: 16px;

	background-color: red;/* Alternative if the browser don't supports gradients! */
	background-image: radial-gradient(#ff402b 25%, #c61300 75%);
}
.CloseButton:hover
{
	color: #dddddd;
	font-size: 16px;

	border: 1px solid #ffc863; 
	border-radius: 3px;

	background-color: darkred;/* Alternative if the browser don't supports gradients! */
	background-image: radial-gradient(#c61300 25%, #ff402b 75%);
}
.CloseButton_Disabled
{
	color: #dddddd;
	font-size: 20px;

	border: 1px solid #ffc863; 
	border-radius: 3px;
	
	background-color: dimgrey;/* Alternative if the browser don't supports gradients! */
	background-image: radial-gradient(#9b9b9b 45%, #4c4c4c 75%);

	pointer-events: none;
}