@charset "utf-8";

/*
 * Stéphane Charette o/a C Code Run
 * Stéphane Charette dba C Code Run
 * "Stéphane Charette" stephanecharette@gmail.com
 * $Id: stephane.css 2525 2018-05-01 18:40:43Z stephane $
 */


body
{
	color:					#006;
	background:				url('/background_swirl.jpg');
	background-size:		cover;
	background-attachment:	fixed;
}

a:link, a:visited, a:hover, a:active
{
	text-decoration:		none;
	color:					#00f;
}

a:hover
{
	text-decoration:		underline;
}

h1
{
	font-size:				120%;
	margin-top:				1.5em;
}

h2
{
	margin:					auto;
	font-size:				90%;
	text-align:				center;
	font-family:			"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-variant:			small-caps;
	margin-bottom:			0.5em;
}

form
{
	margin-left:			2em;
	padding:				1em;
	display:				inline-block;
	border:					1px solid black;
	background-color:		rgba( 100%, 97%, 95%, 0.4 );
	box-shadow:				5px 5px 2px #c88;
	opacity:				0.5;
}

form:hover, .top_paragraph:hover
{
	background-color:		rgba( 100%, 97%, 95%, 0.8 );
	box-shadow:				15px 15px 15px #844;
	opacity:				1.0;
}

@keyframes drop_down_and_fade_up
{
	0%		{ opacity:	1.0; top: -9em;	left: -2em;	}
	10%		{ opacity:	1.0; top: 0em;	left: 2em;	}
	95%		{ opacity:	1.0; top: 0em;	left: 2em;	background-color: rgba( 100%, 100%, 100%, 0.8 ); }
	100%	{ opacity:	0.7; top: 0em;	left: 2em;	background-color: rgba( 100%,  97%,  95%, 0.4 ); }
}

.top_paragraph
{
	position:				relative;
	top:					-9em;
	left:					-2em;
	padding-right:			1em;
	font-size:				110%;
	border:					1px solid black;
	display:				inline-block;
	vertical-align:			top;
	background-color:		rgba( 100%, 100%, 100%, 0.8 );
	box-shadow:				5px 5px 2px #844;
	z-index:				1;

	animation-name:				drop_down_and_fade_up;
	animation-duration:			15s;
	animation-timing-function:	ease-out;
	animation-delay:			0s;
	animation-iteration-count:	1;
	animation-direction:		normal;
	animation-fill-mode:		forwards;
	animation-play-state:		running;
}

.top_url
{
	margin-left:			25%;
	font-size:				150%;
	text-align:				center;
	color:					#888;
	padding:				0.5em;
	display:				none;
	border:					1px solid #888;
}

@keyframes fadeout
{
	0%		{ opacity: 1.0; transform: scale(1.00, 1.00) rotate(0deg);		}
	100%	{ opacity: 0.0; transform: scale(0.01, 0.01) rotate(360deg);	}
}

.box
{
	width:					15em;
	height:					15em;
	border:					1px solid black;
	padding:				0.5em;
	display:				inline-block;
	position:				relative;
	overflow:				hidden;
	margin-top:				1em;
	margin-left:			1em;
	vertical-align:			top;
	background-color:		rgba( 100%, 97%, 95%, 0.4 );
	box-shadow:				5px 5px 2px #844;
	z-index:				2;

	animation-name:				fadeout;
	animation-direction:		normal;
	animation-duration:			1500ms;
	animation-timing-function:	linear;
	animation-delay:			0s;
	animation-iteration-count:	1;
	animation-direction:		normal;
	animation-fill-mode:		forwards;
	animation-play-state:		paused;
}

.box:hover
{
	box-shadow:				15px 15px 15px #844;
	background-color:		rgba( 100%, 97%, 95%, 0.8 );
	overflow:				visible;
	z-index:				3;
}

.summary
{
	vertical-align:			middle;
	text-align:				justify;
	font-family:			Arial, Helvetica, sans-serif;
	font-size:				85%;
}

.box .summary img
{
	margin:					auto;
	display:				block;
	margin-bottom:			1em;
}

.box .summary .thumb
{
	border:					1px solid black;
	height:					64px;
}

.box .summary .thumb:hover
{
	top:					-20px;
	left:					-10px;
	width:					auto;
	height:					auto;
	position:				absolute;
	border-radius:			10px;
	box-shadow:				15px 15px 15px rgba( 0, 0, 0, 0.75 );
}


@media print
{
	/* undo most of the CSS we setup above to have it print in a simple manner */

	body
	{
		background:			#fff;
		margin:				0em;
		padding:			0em;
	}

	form
	{
		display:			none;
	}

	h1, h2
	{
		margin:				0em;
		padding:			0em;
	}

	h1
	{
		padding-top:		1em;
		page-break-after:	avoid;
	}

	.top_paragraph
	{
		display:			none;
	}

	.top_url
	{
		display:			inline-block;
	}

	.group
	{
		page-break-before:	always;
		page-break-inside:	avoid;
	}

	.summary
	{
		text-align:			left;
	}

	.box
	{
		background-color:	#fff;
		box-shadow:			none;
		padding:			0.5em;
		margin:				0.1em;
		border:				1px solid #ddd;
		width:				13.5em;
		height:				15em;
	}

	.box:hover
	{
		box-shadow:			none;
		background-color:	#fff;
		overflow:			hidden;
	}

	.box .summary .thumb:hover
	{
		top:				0;
		left:				0;
		height:				64px;
		position:			static;
		border-radius:		0;
		box-shadow:			none;
	}

	.move_up
	{
		display:			none;
	}
}