*
{
	font-family			: "Helvetica", "Lucida Grande", "Arial", "Verdana", "sans-serif";
	-webkit-font-smoothing		: antialiased;
}

html, body
{
	top				: 0px;
	left				: 0px;
	background-color		: #4c3665;
	color				: #383838;
}

p
{
	font-size			: 1.1em;
	line-height			: 1.5294717647;
	letter-spacing			: -0.021em;
}

html, body, #container
{
	height				: 100%;
}

body > #container
{
	height				: auto;
	min-height			: 100%;
	margin-left			: 0px;
	margin-right			: 0px;
}

html, body, h1, h2, h3, h4, div, p, input, select, pre
{
	margin				: 0px;
	padding				: 0px;
}

.nomargin
{
	margin-top			: 0px;
	margin-bottom			: 0px;
}

pre
{
	color				: #55e213;
	background-color		: black; 
	padding				: 3px;
	margin				: .5em 0px .5em 0px;
}

b
{
	color				: black;
}

ul, nav.toc ul
{
	padding				: 0px 0px 0px 2em;
}

audio
{
	display				: block;
}

h1, h2, h3, h4
{
	letter-spacing			: -1px;
	padding-bottom			: .5em;
	color				: #4c3665;
	font-weight			: 700;
}

.piclook h1, .piclook h2, .piclook h3, .piclook h4
{
	color				: black;
}

h1
{
	font-size			: 1.7em;
}

h2
{
	font-size			: 1.5em;
}

h3
{
	font-size			: 1.3em;
}

h4
{
	font-size			: 1.2em;
}

hr
{
	background-color		: #050505;
	color				: black;
}

li
{
	display				: list-item;
	list-style-type			: square;
}

select
{
	background-color		: white;
	color				: black;
	scrollbar-face-color		: #a8bdae;
	scrollbar-shadow-color		: black;
	scrollbar-highlight-color	: black;
	scrollbar-3dlight-color		: black;
	scrollbar-darkshadow-color	: black;
	scrollbar-track-color		: white;
	scrollbar-arrow-color		: black;
	scrollbar-base-color		: white;
}

video
{
	width				: 100%;
	max-width			: 50% !important;
	height				: auto !important;
	margin-bottom			: 25px;
	border				: 1px solid black;
}

.galleryPic video
{
	width				: 100% !important;
	max-width			: 100% !important;
}

/*
 * Instead of using the text-decoration to get an underline
 * we use a border-bottom so we can give it a custom color and style
 * This makes the links less obtrusive to the eye, as they are not
 * that important to read, but they should be there
 */
a
{
	color				: #4c3665;
	background-color		: transparent;
	text-decoration			: none;
	border-bottom			: 2px dotted #bbbbbb;
}

a:hover
{
	text-decoration			: none;
	border-bottom			: 2px solid purple;
}

/* Fix the #hashmark targets as we have a fixed header */
:target:before
{
	content				: "";
	display				: block;
	height				: 3em;
	margin				: -2em 0 0;
}

hidden
{
	visibility			: hidden;
}

figure
{
	margin				: 0px;
}

.rightpic a, figcaption
{
	color				: black;
}

table tr th a
{
	color				: black;
}

nav ul
{
	margin				: 0px;
	padding				: 0px;
}

nav ul li a, footer ul li a
{
	border-bottom			: 0px solid transparent;
	padding-top			: 5px;
	padding-bottom			: 5px;
}

nav ul li, nav ul li:hover
{
	padding-top			: 5px;
	padding-bottom			: 5px;
	font-size			: initial;
	line-height			: initial;
}

nav.toc ul li, nav.toc ul li:hover
{
	padding-top			: 3px;
	padding-bottom			: 0px;
}

.menu ul li a:hover
{
	background-color		: transparent;
	border-bottom			: 2px solid #a8bdae;
}

/* add a flavor of purple to the first menu */
.menu ul:first-child li a:hover
{
	background-color		: transparent;
	border-bottom			: 2px solid #d4cde2;
}

nav ul li:hover, footer ul li:hover
{
	text-decoration			: none;
	background-color		: transparent;
	border-bottom			: 0px solid transparent;
}

nav.top
{
	position			: fixed;
	right				: .5em;
	bottom				: 3em;
	padding				: 3px;
	background-color		: rgba(248, 249, 250, 0.63);
	box-shadow			: 0 1px 2px #fff, 0 -1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8);
}

nav.top a
{
	text-decoration			: none;
	border-bottom			: none;
}

nav.toc
{
	float				: right;
	position			: initial;
	min-width			: 150px;
	max-width			: 250px;
	font-size			: small;
	margin				: 2em;
	padding				: .5em;
	border				: 2px solid #4c3665;
	background-color		: #f8f8f8;
}

nav.toc p
{
	color				: #555;
	margin-bottom			: 0px;
	text-align			: center;
	font-weight			: bold;
}

nav.toc ul li
{
	color				: #888;
	display				: list-item;
	list-style-type			: square;
}

nav.toc ul li a:hover
{
	text-decoration			: underline;
	border-bottom			: none;
}

/* Force no lines, used to hide the underlines from <a href="...">..</a>'s */
.nolines, .nolines:hover, a.logotop
{
	text-decoration			: none;
	border-bottom			: none;
	background-color		: transparent;
}

a.logotop
{
	color				: #a8bdae;
}

a.logotop:hover
{
	color				: #314536;
}

a.logotop img.round
{
	width				: 60px;
	border-radius			: 30px;
}

@media (max-width: 425px)
{
	a.logotop img.round
	{
		width			: 30px;
	}
}

.projpic, .projpic:hover, .fampic, .fampic:hover, .personpic, table.team tr td img
{
	text-align			: center;
	font-size			: x-small;
	background-color		: #a8bdae;
	border				: 3px solid #a8bdae;
}

table.team tr td img
{
	border-radius			: 150px;
}

table.team tr td:nth-child(2)
{
	border				: 1px solid #bbbbbb;
} 

tr.selected
{
	background-color		: #d4cde2 !important;
}

.projpic, .projpic:hover, .fampic, .fampic:hover, .personpic, .rightpic, .rightpic:hover
{
	margin				: 20px;
}

.projpic img
{
	width				: 250px;
}

.gallerylistpic
{
	margin				: 20px;
}

.oldgalleryfloat
{
	float				: left;
	text-align			: center;
	width				: 200px;
	min-height			: 200px;
	background-color		: #eeeeee;
	border				: 1px solid white;
	padding-top			: 10px;
}

table.team tr td p
{
	margin-top			: 20px;
}

table.cruises tbody tr th
{
	width				: 10em;
}

table.cruises tbody tr td table tbody tr td
{
	width				: 20em;
}

table.presentations tbody tr td:nth-child(20n+7), table.publications tbody tr td:nth-child(20n+5), table.publications tbody tr td:nth-child(20n+6), table.nowrap
{
	white-space			: nowrap;
}

table.publications tbody tr td:nth-child(20n+1)
{
	text-align			: center;
}

table.presentations tbody tr td ul, table.publications tbody tr td ul
{
	margin				: 0px;
	padding				: 0px;
}

table.presentations tbody tr td ul li, table.publications tbody tr td ul li
{
	list-style-position		: inside;
}

table.presentations tbody tr td ul li:before
{
	content				: "";
	display				: inline-block;
	margin-left			: -10px;
}

table.presentations tbody tr td:nth-child(20n+8) img, table.presentations tbody tr td:nth-child(20n+9) img
{
	border				: 1px solid black;
	max-width			: 100px;
}

table.presentations tbody tr td
{
	vertical-align			: top;
}

table.publications tbody tr td ul li
{
	list-style-type			: none;
	list-style-position		: initial;
	margin-bottom			: 5px;
}

table.publications tbody tr td ul li a
{
	text-decoration			: none;
	border-bottom			: none;
	padding				: 3px;
	background-color		: rgba(248, 249, 250, 0.63);
	box-shadow			: 0 1px 2px #fff, 0 -1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8);
	display				: inline-block;
	min-width			: 100px;
	max-width			: 500px;
}

.projpic, .projpic:hover, .fampic, .fampic:hover, .personpic, .rightpic, .right iframe, .logopic, .galleryClose, .button
{
	border-radius			: 10px;
	box-shadow			: 2px 5px 12px #555555;
}

.galleryPic
{
	display				: block;
	text-align			: center;
	background-color		: black;
	color				: white;
	font-weight			: bold;
	font-size			: medium;
	border				: 15px solid black;
	width				: 85%;
	height				: 85%;
}

.galleryPic img
{
	margin				: auto;
	height				: auto;
}

a.galleryDownload
{
	border				: none;
	margin				: 30px;
	text-align			: right;
	width				: 50px;
	height				: 50px;
	background-image		: url(/gfx/download-green.png);
	background-repeat		: no-repeat;
	background-size			: cover;
}

a.galleryDownload:hover
{
	background-image		: url(/gfx/download-blue.png);
}

.projpic:hover, .fampic:hover, a.rightpic:hover, div.galleryList .personpic:hover
{
	border				: 3px solid #eeeeee;
	background-color		: #eeeeee;
}

.clearboth, .projpix
{
	clear				: both;
	display				: inline-block;
}

.rightpic
{
	float				: right;
	clear				: right;
	padding				: 1em;
	background-color		: white;
	border-radius			: initial;
	text-align			: center;
	font-size			: small;
	transform			: rotate(-1deg);
}

main article:nth-child(odd) figure.rightpic
{
	transform			: rotate(2deg);
}

.rightpic img
{
	display				: block;
}

.rightpic figcaption
{
	padding-top			: .5em;
	display				: inline-block;
}

.rightpic img.country
{
	float				: right;
	margin-top			: .5em;
}

.right
{
	float				: right;
}

.right, .floatright, table.right tbody tr td
{
	text-align			: right;
}

.floatright
{
	float				: right;
}

.right iframe
{
	float				: right;
	width				: 300px;
	height				: 200px;
	border				: 3px solid #a8bdae;
}

.left, table.right tbody tr td.left
{
	text-align			: left
}

.textright
{
	text-align			: right;
}

.mini img
{
	height				: 8em;
}

a.mini
{
	border-bottom			: none;
}

a.mini:hover
{
	border-bottom			: none;
}

.projpic
{
	width				: 250px;
	float				: left;
}

.floatleft, .fampic
{
	float				: left;
}

a.fampic img
{
	height				: 150px;
}

p
{
	margin-bottom			: 1em;
}

/*
 * - No image borders please, it makes them ugly
 * - Max width of an image is the width of the screen
 */
img
{
	border				: none;
	max-width			: 100%;
}

/* But we want a little border around our flags */
img.country
{
	border				: 1px solid black !important;
	width				: 16px !important;
	height				: 16px !important;
	max-width			: initial !important;
}

footer a.country img
{
	width				: 10px !important;
	height				: 10px !important;
	opacity				: 0.5;
}

footer a.country
{
	padding				: 0px;
}

img.hat
{
	width				: 16px;
	height				: 16px;
}

img.dot
{
	width				: 24px;
	height				: 24px;
}

.halfwidth
{
	display				: inline-block;
	width				: 400px;
	margin-right			: 20px;
}

@media all
{
	.printOnly
	{
		display			: none;
	}
}

/* Printing support */
@media print
{
	.printOnly
	{
		display			: inline;
	}

	body, html
	{
		background-color	: transparent;
		height			: initial;
	}

	body > #container
	{
		height			: initial;
		overflow		: initial;
		min-height		: initial;
	}

	a
	{
		text-decoration		: none;
		border-bottom		: none;
	}

	a:hover
	{
		text-decoration		: none;
		border-bottom		: none;
	}

	/* Annotate external URLs */
	a[href^="http"]:link:after, a[href^="http"]:visited:after
	{
		content			: " (" attr(href) ") ";
		font-size		: 75%;
	}

	/* Don't annotate full URL to own site (bio page) */
	a[href^="https://jeroen.massar.ch"]:link:after, a[href^="//jeroen.massar.ch"]:link:after
	{
		content			: "";
	}

	h1, h2, h3, h4, p
	{
		page-break-after	: avoid;
		padding-top		: 0.3em;
		padding-bottom		: 0.2em;
	}

	h1, h2, h3, h4, p, tr
	{
		page-break-inside	: avoid;
	}

	article
	{
		border-bottom		: none;
	}

	tr
	{
		margin-top		: 10px;
		margin-bottom		: 10px;
	}

	nav ul li, .navbar-handle, audio, .noprint, footer
	{
		display			: none !important;
	}

	footer ul li:last-child
	{
		display			: inline !important;
	}

	nav div.navbar-header
	{
		display			: inline !important;
		visibility		: visible !important;
		text-transform		: none;
		font-size		: xx-large;
		margin-left		: 10px;
	}

	nav.menu, body > #container
	{
		margin			: 0px !important;
		padding			: 0px !important;
	}

	.projpic, .projpic:hover, .fampic, .fampic:hover, .personpic, .right iframe, .logopic, .galleryClose, .button
	{
		border-radius		: 10px !important;
		box-shadow		: none;
	}

	.projpic
	{
		background-color	: transparent !important;
		color			: black !important;
		page-break-inside	: avoid;
		width			: auto !important;
		margin			: 2em !important;
	}

	.projpic img
	{
		border			: 2px solid black !important;
	}

	div.rightpic, a.rightpic
	{
		padding-left		: 5px;
		padding-right		: 5px;
		padding-top		: 5px;
	}

	#receptacle
	{
		padding-top		: 0em !important;
		padding-bottom		: 1em !important;
		margin-left		: 0px !important;
		margin-right		: 0px !important;
	}

	p
	{
		line-height		: 1.2;
	}
}

.logo, .logopic
{
	color				: #a8bdae;
	text-decoration			: none;
	border-bottom			: none;
	background-color		: transparent;
}

.logo
{
	font-size			: 150px;
	font-family			: "serif";
}

.logopic
{
	font-size			: 150px;
	float				: right;
	border				: 3px solid #a8bdae;
	margin				: 10px;
	padding				: 10px;
	background-color		: #fafafa;
}

a.logo:hover
{
	text-decoration			: none;
	background-color		: transparent;
	border-bottom			: none;
	color				: #314536;
}

header.org
{
	width				: 100%;
	overflow			: auto;
	padding-bottom			: 20px;
}

header.org div:first-child
{
	width				: 15em;
	height				: 5em;
	text-align			: center;
	font-size			: large;
	border				: 1px solid black;
	color				: white;
	background-color		: #383838;
	background-image		: linear-gradient(#eeeeee, #000000);
	padding-top			: 20px;
	text-transform			: uppercase;
	display				: inline-block;
	margin-left			: 0px;
}

header.org div:first-child::first-line
{
	font-size			: x-large;
}

header div
{
	margin-left			: 2em;
	display				: inline-block;
	white-space			: nowrap;
}

header.org div:nth-child(2)::first-line
{
	font-size			: large;
	font-weight			: bold;
}

header.logotop
{
	position			: absolute;
	right				: 15px;
	top				: 5px;
	font-size			: 30px;
	background-color		: transparent;
}

.slogan
{
	font-size			: small;
	font-style			: italic;
	padding-top			: 10px;
	padding-bottom			: 10px;
}

th, td, tr
{
	text-align			: left;
}

table.details
{
	text-align			: left;
}

table.details tbody th, table.details td, table tr:nth-child(even), table tr:nth-child(odd)
{
	background-color		: transparent;
}

table.details img.country
{
	float				: right;
}

.detnom
{
	color				: black;
	font-size			: medium;
	font-weight			: bold;
}

.detpgp
{
	font-family			: Tahoma, monospace;
	font-size			: small;
}

.botinfo th
{
	font-size			: xx-small;
	text-align			: right;
	color				: #a8bdae;
}

table
{
	padding-bottom			: 10px;
	color				: #666666;
}

table tr:nth-child(even)
{
	background-color		: #fefefe;
}

table tr:nth-child(odd)
{
	background-color		: #f8f8f8;
}

table tr th
{
	color				: black;
	background-color		: #a8bdae;
}

table tr th, table tr td
{
	padding				: 4px;
}

table.scrolling
{
	width				: 100%;
}

.botinfo table
{
	margin				: auto;
}

.botinfo
{
	padding-top			: 5px;
	float				: left;
	width				: 33%;
}

div.botinfo table tbody tr td b
{
	color				: black;
}

nav
{
	font-weight			: 500;
	z-index				: 1042;
	position			: fixed;
	margin-left			: 0px;
	margin-right			: 0px;
	padding-left			: 20px;
	background-color		: rgba(255, 255, 255, 0.95);
}

nav.slider
{
	border-bottom			: none;
}

nav ul li.sel a
{
	color				: black;
	border-bottom			: 2px solid #5da370;
}

nav.menu ul li.sel a
{
	color				: white;
}

nav.menu ul li.sel a
{
	color				: black;
}

nav ul:first-child li.sel a
{
	border-bottom			: 2px solid purple;
}

nav ul li, nav ul li.sel, footer ul li
{
	display				: inline-block;
	list-style			: none;
	list-style-image		: none;
}

footer ul
{
	margin				: 0px;
	margin-right			: 30px;
	padding-top			: 5px;
	padding-bottom			: 5px;
}

#container
{
	height				: 100%;
	background-color		: white;
	position			: relative;
}

#receptacle
{
	position			: relative;
	padding-top			: 5em;
	padding-bottom			: 3em;
	margin-left			: 1em;
	margin-right			: 1em;
}

.gallery main
{
	padding				: 0px;
	margin				: 0px;
}

.gallery footer
{
	display				: none;
}

html.gallery, .gallery body
{
	background-color		: white;
}

main:after
{
	content				: "";
	display				: table;
	clear				: both;
}

.center, .frontpage
{
	text-align			: center;
}

footer
{
	clear				: both;
	position			: relative;
	z-index				: 10;
	margin-top			: -4em;
	font-size			: xx-small;
	text-align			: right; 
	width				: 100%;
	background-color		: #4c3665;
	font-size			: xx-small;
}

.copyright a
{
	color				: #cccccc;
}

.bold
{
	font-weight			: bold;
}

.cooppic
{
	float				: right;
	width				: 100px;
	margin-right			: 10px;
}

.galleryBox
{
	position			: absolute;
	top				: 0px;
	left				: 0px;
	right				: 0px;
	bottom				: 0px;
	background			: black;
}

.galleryList
{
	float				: left;
	width				: 15%;
	height				: 100%;
	background			: black;
	overflow			: scroll;
}

.galleryClose
{
	margin				: 5px;
	border				: 1px solid #444444;

	position			: absolute;
	right				: 0px;
	top				: 0px;
	z-index				: 1000;

	text-align			: center;
	width				: 42px;
	height				: 42px;
	border-radius			: 21px;

	font-size			: xx-large;

	background-color		: #ec9592;
	color				: white;
}

.galleryClose:hover
{
	background-color		: red;
	color				: white;
}

.button
{
	margin-right			: 15px;
	min-width			: 10px;
	min-height			: 10px;
	border				: 1px solid #444444;
}

.small
{
	font-size			: xx-small;
}

/* Album */

a.album_prev
{
	float				: left;
}

a.album_prev:after, a.album_next:after
{
	position			: absolute;
	content				: "";
	width				: 142px;
	height				: 100px;
	z-index				: 2;
	opacity				: 0.7;
}

a.album_prev:after
{
	background			: url(/gfx/prev.png) no-repeat;
	background-position-y		: 50%;
	left				: 60px;
}

a.album_prev img, a.album_next img
{
	width				: 142px;
}

a.album_next
{
	float				: right;
}

a.album_next:after
{
	background			: url(/gfx/next.png) no-repeat;
	background-position-y		: 50%;
	margin-left			: -90px;
}

a.album_prev, a.album_next
{
	border				: 1px solid #666666;
	background			: #aaaaaa;
}

/* Different Me (v) */

ul.dmpix, ul.dmpix > li
{
	list-style			: none;
	list-style-image		: none;
	font-style			: italic;
	font-size			: small;
}

ul.dmpix > li > figure > a > div
{
	position			: absolute;
	right				: 10px;
	top				: 5px;
	min-width			: 1.5em;
	padding				: 5px;
	background-color		: rgba(255, 255, 255, .7);
	color				: rgba(10,10,10,0.6);
	border				: 2px solid #ffffff;
	opacity				: 0.7;
	box-shadow			: -1px -1px 0 0px rgba(200,200,200,0.5), 3px 3px 0 0px rgba(230,230,230,0.5), 6px 6px 0 0px rgba(215, 215, 215, 0.5);
}

ul.dmpix > li > figure figcaption
{
	padding				: .5em;
}

ul.dmpix > li > figure figcaption ul
{
	float				: right;
	padding				: 0px;
}

ul.dmpix > li > figure > figcaption > ul > li,
ul.dmpix > li > figure > figcaption > ul > li:nth-child(even),
ul.dmpix > li > figure > figcaption > ul > li:nth-child(3n)
{
	transform			: initial;
	box-shadow			: initial;
	top				: initial;
	position			: initial;
}

figcaption > ul > li
{
	display				: inline-block;
	list-style			: none;
	list-style-image		: none;
}

ul.dmpix > li > figure figcaption > ul > li
{
	margin				: 0px;
}

ul.dmpix > li > figure figcaption > ul > li > a
{
	font-size			: x-small;
	border-bottom			: none;
}

ul.dmpix > li > figure figcaption > ul > li > a:hover
{
	text-decoration			: underline;
}

@media (min-width: 600px)
{

ul.dmpix > li, div.dmpix > img
{
	background-color		: #fafafa;
	text-align			: center;
	transform			: rotate(-1deg);
	margin				: .3em;
	display				: inline-block;		/* Fallback */
	display				: inline-flex;
	box-shadow			: 0 4px 20px rgba(0, 0, 0, .9);
}

/* Rotate all even images 2 degrees */
ul.dmpix > li:nth-child(even)
{
	transform			: rotate(1.5deg);
}

/* Don't rotate every third image, but offset its position */
ul.dmpix > li:nth-child(3n)
{
	transform			: rotate(-2deg);
	top				: -5px;
}
 
/* Do not rotate every 5th image */
ul.dmpix > li:nth-child(5n)
{
	transform			: rotate(2deg);
	top				: 5px;
}

/* Keep default rotate for every eleventh, but offset it */
ul.dmpix > li:nth-child(11n)
{
	position			: relative;
	top				: 3px;
	left				: -5px;
}

div.lazy > ul.dmpix > li,
div.lazy > ul.dmpix > li:nth-child(even),
div.lazy > ul.dmpix > li:nth-child(3n),
div.lazy > ul.dmpix > li:nth-child(5n),
div.lazy > ul.dmpix > li:nth-child(11n)
{
	position			: initial;
	transform			: initial;
	top				: initial;
	left				: initial;
}

/* For lazyloaded images, do not do rotations */
div.lazy > ul.dmpix > li
{
	transform			: initial;
}

ul.dmpix > li:hover
{
	z-index				: 5;
	box-shadow			: 0 10px 40px rgba(0, 0, 0, 1);
}

ul.dmpix li img.country
{
	position			: absolute;
	bottom				: 5px;
	right				: 5px;
}

} /* min-width 600px */

@media (max-width: 600px)
{

ul.dmpix, ul.dmpix img
{
	padding				: 0px;
	width				: 100%;
	text-align			: center;
}

ul.dmpix > li
{
	position			: relative;
	margin-bottom			: 2em;
	padding-bottom			: 1em;
	border-bottom			: 1px dotted #d5d5d5;
}

ul.dmpix img.country
{
	margin-left			: 10px;
}

} /* max-width 600px */

/* Different Me (^) */

#map-container
{
	border-top		: 3px solid #4c3665;
	border-bottom		: 3px solid #4c3665;
	margin-bottom		: 20px;
	width			: 100%;
}

#map-container #dmpix img
{
	max-width		: 300px;
	width			: 300px;
}

#map
{
	width			: 100%;
	min-width		: 400px;
	min-height		: 600px;
}

@media screen and (max-height: 600px)
{
	#map
	{
		width		: 90%;
		height		: 400px;
		min-width	: 200px;
		min-height	: 300px;
	}
}

#mapsctrl
{
	background-color	: white;
	height			: 75px;
	border			: 1px solid black;
}

#mapsctrl table thead tr th input
{
	margin-right		: 5px;
}

#mapsctrl input
{
	height			: initial;
}

#mapsctrl button
{
	float			: right;
	top			: 0px;
}

#mapsctrl thead, #mapsctrl tbody
{
	display			: block;
}

#mapsctrl table tbody
{
	overflow		: auto;
	max-height		: 39px;
}

#mapsctrl table tbody tr td:last-child
{
	cursor			: zoom-in;
	width			: 155px;
}

.noselect, #mapsctrl
{
	-webkit-touch-callout	: none;
	-webkit-user-select	: none;
	 -khtml-user-select	: none;
	   -moz-user-select	: none;
	    -ms-user-select	: none;
	        user-select	: none;
}

#table-scroll
{
	height			: 250px;
	overflow		: auto;
	border-top		: 3px solid #4c3665;
	border-bottom		: 3px solid #4c3665;
}

#table-wrapper
{
	width			: 100%;
	margin-bottom		: 20px;
}

#table-scroll > ul
{
	columns			: 3;
}

#table-scroll > ul > li
{
	list-style-type		: none;
	padding-bottom		: 1em;
	break-inside		: avoid;
}

nav ul li a, footer ul li a
{
	text-decoration		: none;
	border-bottom		: none;
	padding			: 5px 5px 2px 5px;
	color			: #555555;
}

footer ul li a
{
	color			: white;
}

.menu ul li a.brand
{
	font-size		: 1.2em;
}

.menu li
{
	display			: inline-block;
}

nav div.navbar-header
{
	visibility		: hidden;
	display			: none;
}

.navbar-checkbox
{
	display			: none;
}

.navbar-handle
{
	display			: none;
	cursor			: pointer;
	position		: relative;
	font-size		: 45px;
	padding			: .5em 0;
	height			: 0;
	width			: 1.6666666666666667em;
}

.navbar-handle:before, .navbar-handle:after
{
	position		: absolute;
	left			: 0;
	right			: 0;
	content			: ' ';
}

.menu
{
	top			: 0;
	left			: 0;
	right			: 0;
	padding-top		: 5px;
	padding-bottom		: 5px;
	color			: #999999;
	background-color	: white;
	background-color	: rgba(255, 255, 255, 0.95);
	min-height		: 3.5em;
	border-bottom		: 2px solid #008000;
}

.menu .navbar-handle
{
	position		: absolute;
	font-size		: 1.2em;
	top			: 0.6em;
	left			: 12px;
	z-index			: 10;
}

@media (max-width: 810px)
{
	header.org
	{
		visibility	: hidden;
		display		: none;
	}

	.menu ul
	{
		max-height	: 0;
		overflow	: hidden;
		padding-left	: 3em;
	}

	.menu li
	{
		visibility	: hidden;
		display		: block;
		border		: none;
	}

	.menu ul li a
	{
		display		: block;
	}

	.menu .navbar-handle
	{
		display		: block;
		top		: 0.5em;
	}

	nav
	{
		margin-left	: 0px;
		margin-right	: 0px;
		padding-left	: 0px;
	}

	nav.menu
	{
		min-height	: 2em;
		border-bottom	: 2px solid #a8bdae;
	}

	#navbar-checkbox:checked + nav.menu
	{
		z-index		: 1000;
	}

	#navbar-checkbox:checked + .menu ul
	{
		max-height	: 300px;
		overflow	: inherit;
		border-left	: 2px solid black;
		border-right	: 2px solid black;
	}

	#navbar-checkbox:checked + .menu li
	{
		visibility	: visible;
		display		: block;
	}

	.navbar-handle
	{
		-webkit-touch-callout	: none;
		-webkit-user-select	: none;
		 -khtml-user-select	: none;
		   -moz-user-select	: none;
		    -ms-user-select	: none;
		        user-select	: none;
	}

	.navbar-handle,
	.navbar-handle:before,
	.navbar-handle:after
	{
		border-top		: 0.27em solid #a8bdae;
	}

	.navbar-handle:before
	{
		top			: 0.37777777777777777em;
	}

	.navbar-handle:after
	{
		top			: 0.8888888888888888em;
	}

	#navbar-checkbox:checked .navbar-handle,
	#navbar-checkbox:checked .navbar-handle:before,
	#navbar-checkbox:checked .navbar-handle:after
	{
		border-top	: 0.27em solid #4c3665 !important;
	}


	#navbar-checkbox:checked + nav div.navbar-header
	{
		border-top	: 2px solid black;
		padding-top	: 20px;
	}

	nav div.navbar-header
	{
		visibility	: visible;
		display		: block;
		width		: 100%;
		text-align	: center;
		z-index		: 20;
		text-transform	: none;
		color		: white;
	}

	nav.toc
	{
		width		: 90%;
		max-width	: initial;
		float		: none;
		margin		: 10px;
	}

	nav.toc p
	{
		text-align	: initial;
	}

	article
	{
		border-bottom	: 2px solid #a8bdae;
	}

	p, h1, h2, h3, h4, h5
	{
		margin-left	: 5px;
		margin-right	: 5px;
		margin-top	: 10px;
		margin-bottom	: 5px;
		padding		: 0px;
	}

	#container, #receptacle, main, .projpic, header.logotop
	{
		margin-left	: 0px;
		margin-right	: 0px;
		margin-top	: 0px;
		padding-left	: 0px;
		padding-right	: 0px;
	}

	.projpic
	{
		width		: 100%;
		border-radius	: initial;
		border		: none;
		color		: white;
		background-color: black;
	}

	.projpic img
	{
		width		: 100%;
	}

	.rightpic
	{
		border		: none;
		margin-left	: 0px;
		margin-right	: 0px;
		border-radius	: initial;
	}

	footer
	{
		font-size	: small;
	}

	#table-scroll > ul
	{
		columns		: 1;
	}
}

ul.sideboxes
{
	display			: flex;
	padding			: 0px;
}

ul.sideboxes > li
{
	display			: inline-block;
	overflow		: auto;
	background-color	: #eeebf7;
	border			: 2px solid #548;
	margin-right		: 20px;
}

ul.sideboxes > li > h2
{
	text-align		: center;
	color			: white;
	padding			: 5px;
	background-color	: #548;
}

ul.sideboxes > li > p
{
	padding			: 10px;
	margin			: 0px;
	display			: inline-block;
	clear			: both;
	border-bottom		: 1px solid #548;
	width			: 100%;
}

ul.sideboxes > li > ul
{
	padding-top		: 10px;
	padding-bottom		: 10px;
}

/* hide the side-bar on small screens */
@media (max-width: 810px)
{
	ul.sideboxes
	{
		display		: inline-block; 
	}

	ul.sideboxes > li > h2
	{
		margin-left	: 0px;
		margin-right	: 0px;
		margin-top	: 0px;
		margin-bottom	: 0px;
	}

	ul.sideboxes > li
	{
		clear		: left;
		display		: inline-block;
		width		: 100%;
		height		: initial;
	}
}

p.slogan
{
	font-size		: large;
}

div.gallerymenu a
{
	padding-left		: 5px;
	padding-right		: 5px;
	display			: block;
	text-decoration		: none;
	font-size		: small;
	overflow		: hidden;
	white-space		: nowrap;
}

.gallery a:hover
{
	text-decoration		: none;
	background-color	: #d4cde2;
}

.galleryselect a, .galleryselect
{
	background-color	: #a8bdae;
	font-size		: large;
	display			: initial;
	border-bottom		: none;
}

/* gallery (^) */

/* ribbon (v) */

.ribbon
{
	background-color	: #aa0000;
	overflow		: hidden;
	white-space		: nowrap;

	/* top right corner */
	position		: absolute;
	right			: -70px;
	top			: 70px;
	width			: 400px;
	z-index			: 1000;

	/* 45 deg ccw rotation */
	transform		: rotate(45deg);

	/* shadow */
	box-shadow		: 0 0 10px #888;
}

.ribbonlogo
{
	margin-right		: 120px !important;
}

.ribbon a, .ribbon div
{
	border			: 1px solid #ffaaaa;
	color			: #ffffff;
	display			: block;
	font			: bold 81.25% 'Helvetica Neue', Helvetica, Arial, sans-serif;
	margin			: 1px 0;
	padding			: 10px 50px;
	text-align		: center;
	text-decoration		: none;
	text-shadow		: 0 0 5px #444;
}

.ribbon a:hover
{
	background-color	: #880000;
}

/* ribbon (^) */

/* progress bar (shar.li) (v) */
.progress
{
	width			: 300px;
	border			: 1px solid black;
	background-color	: transparent;
	margin-top		: 10px;
	margin-bottom		: 10px;
	font-size		: xx-small;
}

.progress span
{
	display			: block;
	width			: 0px;
	height			: 15px;
	background-color	: #a8bdae;
}

/* progress bar (shar.li) (^) */

/* forms (shar.li) (v) */

form label
{
	float			: left;
	width			: 150px;
	clear			: left;
}

form input
{
	float			: left;
	clear			: right;
}

form input[type=text]
{
	width			: 20em;
}

.scrolling input
{
	width			: 100%;
}

input
{
	font-size		: medium;
	height			: 1.5em;
}

/* forms (shar.li) (^) */

.gallery body > #container
{
	height			: initial;
	min-height		: 100%;
}

.gallery body > #container, .gallery #receptacle
{
	margin			: 0px;
	padding			: 0px;
}

div.gallerymenu
{
	position		: fixed;
	top			: 0px;
	left			: 0px;
	width			: 180px;
	background-color	: #a8bdae;
	color			: #000000;
	font-size		: small;
	height			: 100%;
	overflow		: scroll;
}

div.gallerymenu ul
{
	padding			: 0px;
}

.gallery div.lazy
{
	position		: absolute;
	left			: 190px;
	right			: 0px;
}

.cambig, .camsmall
{
	max-width		: 100%;
	max-height		: 100%;
	border			: 1px solid black;
}

.cambig
{
	width			: 1280px;
	height			: 720px;
}

.camsmall
{
	width			: 640px;
	height			: 360px;
}

img.webcam
{
	min-height		: 100px;
	min-width		: 100px;
	width			: 100%;
	border			: 1px solid black;
}

img.webcam:hover
{
	width			: 100%;
	position		: absolute;
	top			: 0px;
	left			: 0px;
	z-index			: 960;
}

div.webcam
{
	width			: 400px;
	height			: 400px;
	float			: left;
}

div.lazy
{
	text-align		: center;
}

div.lazy ul.dmpix > ul > li
{
	border			: 0px;
}

div.lazy ul.dmpix li figure img
{
	background-color	: #eeeeee; 
}

ul.dmpix li figure video
{
	width				: 600px;
	max-width			: initial !important;
	height				: initial !important;
	margin-bottom			: 0px;
	border				: 1px solid black;
}

@media (max-width: 600px)
{
	.gallery div.gallerymenu
	{
		position	: initial;
		top		: initial;
		left		: initial;
		width		: initial;
		height		: initial;
	}

	.gallery div.lazy
	{
		position	: initial;
		left		: initial;
		right		: initial;
	}
}

.fullscreen #container
{
	background-color	: black;
}

.fullscreen div.gallerymenu,
.fullscreen nav,
.fullscreen a.album_next,
.fullscreen a.album_prev
{
	display			: none;
}

.fullscreen div.gallerypix
{
	margin-left		: initial;
}

.fullscreen div.lazy
{
	position		: initial;
	left			: initial;
	right			: initial;
	text-align		: center;
}

.fullscreen div.lazy ul
{
	padding-left		: 0px;
	margin			: 0px;
	display			: inline-block;
}

.fullscreen div.lazy > ul > li
{
	margin			: 0px;
	box-shadow		: initial;
	border-top		: 10px solid black;
	border-bottom		: 200px solid black;
}

.fullscreen div.lazy ul li figure img,
.fullscreen div.lazy ul li figure video
{
	border			: none;
	max-height		: 100%;
	max-width		: 100%;
	height			: 100%;
	width			: 100%;
}

/* Piclook */
html.piclook, body.piclook
{
	background-color		: initial;
}

.piclook nav
{
	margin-left			: 0px;
	margin-right			: 0px;
}

.piclook main, .piclook main, .piclook main.frontpage p, .piclook main.frontpage h1, .piclook main.frontpage h2, .piclook main.frontpage h3, .piclook main.frontpage a
{
	color			: white;
}

.piclook figcaption, .piclook main.frontpage figcaption ul li a
{
	color			: black;
}

.piclook #container
{
	background-color	: #738f93;
	background-color	: rgba(0, 0, 0, 0.42);
}

.piclook body
{
	background-position-x	: center;
	background-position-y	: center;
	background-repeat	: no-repeat;
	background-size		: cover;
	background-attachment	: fixed;
}

.piclook main a
{
	color			: white;
}

.jeroen body
{
	background-color	: #738f93;
	background-image	: url("/jeroen.jpg");
}

.jeroen body main article
{
	width			: 60%;
}

@media (max-width: 425px)
{
	.piclook.jeroen body
	{
		background-position-x	: 60%;
	}

	.jeroen body main article
	{
		width			: 70%;
	}

	.piclook.evamaria body
	{
		background-position-x	: 30%;
	}
}

@media (max-height: 1000px)
{
	.piclook.jeroen body
	{
		background-position-y	: 5%;
	}
}

.evamaria body
{
	background-image	: url("/evamaria.jpg");
}

.rocio body
{
	background-image	: url("/rocio.jpg");
}

.antonio body
{
	background-image	: url("/antonio.jpg");
}

/* eubach.ch/news */
article.news h1
{
	background-color	: #eeeeee;
	margin-top		: 1em;
	padding			: 0px;
}

kbd
{
	background-color	: #a8bdae;
	color			: black;
	display			: inline-block;
	margin			: 0 .1em;
	padding			: .1em .6em;
}

code
{
	display			: inline-block;
	background-color	: #424242;
	color			: #55e213;
	padding			: 2px 5px 2px 5px;
	border-radius		: 5px;
}

pre code
{
	display			: block;
	padding			: 5px 10px 5px 10px;
}

kbd, code
{
	font-family		: monospace;
	font-size		: 0.9em;
}

.error
{
	border			: 1px solid red;
	color			: red;
}

.invisible
{
	display			: none;
}

table.scubagear tbody tr td:nth-child(20n+5)
{
	white-space			: nowrap;
}

table.scubagear tbody tr td:nth-child(20n+4)
{
	white-space			: nowrap;
	text-align			: right;
}

/* form.css */
/* === Remove input autofocus webkit === */
*:focus
{
	outline			: none;
}

/* === Form Typography === */
.styled_form .form_hint, .styled_form .required
{
	font-size		: 11px;
}

/* === List Styles === */
.styled_form ul
{
	width			: 600px;
	list-style-type		: none;
	list-style-position	: outside;
	margin			: 0px;
	padding			: 0px;
}

.styled_form li
{
	list-style-type		: none;
 	padding			: .5em;
 	position		: relative;
	clear			: both;
}

.styled_form ul li ul
{
	float			: left;
	clear			: right;
	width			: initial;
}

.styled_form ul li ul li
{
	padding-left		: 0px;
}

/* === Form Header === */
.styled_form h2
{
	margin			: 0;
	display			: inline;
}

/* === Form Elements === */
.styled_form label
{
	width			: 200px;
	margin-top		: 3px;
	margin-right		: 10px;
	display			: inline-block;
	float			: left;
}

.styled_form input, .styled_form .fakebutton
{
	min-width		: 42em;
	min-height		: 2em;
	padding			: .5em .8em;
}

.styled-form select
{
	min-width		: 42em; 
	min-height		: 2.2em;
	background-color	: white;
}

.styled_form textarea
{
	padding			: 8px;
	width			: 42em;
	height			: 12em;
}

.styled_form input[type=number]
{
	min-width		: 15em;
}

.styled_form input[type=number]
{
	width			: 5em;
	padding-right		: 0px;
}

.styled_form input[type=submit], .fakebutton
{
	font-size		: 100%;
}

/* form element visual styles */
.styled_form input, .styled_form textarea, .fakebutton
{
	border			: 1px solid #aaa;
	box-shadow		: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
	border-radius		: 2px;
	padding-right		: 30px;
	-moz-transition		: padding .25s;
	-webkit-transition	: padding .25s;
	-o-transition		: padding .25s;
	transition		: padding .25s;
}

.styled_form input[type="radio"]
{
	border			: initial;
	box-shadow		: initial;
	border-radius		: initial;
	padding-right		: initial;
	-moz-transition		: initial;
	-webkit-transition	: initial;
	-o-transition		: initial;
	transition		: initial;
	margin-right		: 5px;
}

.styled_form input:focus, .styled_form textarea:focus, .fakebutton
{
	background		: white;
	border			: 1px solid #555;
	box-shadow		: 0 0 3px #aaa;
}

/* === HTML5 validation styles === */
.styled_form input:required, .styled_form textarea:required
{
	background		: white url(/gfx/red_asterisk.png) no-repeat 98% center;
}

.styled_form span#login-required
{
	background		: white url(/gfx/red_asterisk.png) no-repeat 0% center;
	padding-left		: 1em;
}

.styled_form input:required:valid, .styled_form textarea:required:valid
{
	background		: white url(/gfx/valid.png) no-repeat 98% center;
	box-shadow		: 0 0 5px #5cd053;
	border-color		: #28921f;
}

.styled_form input:focus:invalid, .styled_form textarea:focus:invalid
{
	background		: white url(/gfx/invalid.png) no-repeat 98% center;
	box-shadow		: 0 0 5px #d45252;
	border-color		: #b03535
}

form.styled_form li.info > label, form.styled_form li.error > label, form.styled_form li.okay > label, form.styled_form li.warning > label, form.styled_form li.required > label
{
	background-repeat	: no-repeat;
	background-position-x	: 95%;
	background-position-y	: 0px;
	background-position	: top right;
}

form.styled_form li.info label
{
	background-image	: url(/gfx/info.png);
}

form.styled_form li.error label
{
	background-image	: url(/gfx/invalid.png);
}

form.styled_form li.okay label
{
	background-image	: url(/gfx/valid.png);
}

form.styled_form li.warning label
{
	background-image	: url(/gfx/warning.png);
}

form.styled_form li.required label
{
	background-image	: url(/gfx/red_asterisk.png);
}

form.styled_form li span.error
{
	color			: white;
	background		: red url(/gfx/warning.png) no-repeat 2% center;
	font-weight		: bold;
	padding			: 10px;
	border			: 1px solid black;
	padding-left		: 30px;
}

.styled_form ul li div input[type="radio"]
{
	float			: left;
}

.form_hint
{
	background		: #d45252;
	border-radius		: 3px 3px 3px 3px;
	color			: white;
	margin-left		: 8px;
	padding			: 1px 6px;
	z-index			: 999; /* hints stay above all other elements */
	position		: absolute; /* allows proper formatting if hint is two lines */
	display			: none;
}

.form_hint::before {
	content			: "\25C0";
	color			: #d45252;
	position		: absolute;
	top			: 1px;
	left			: -6px;
}

.styled_form input:hover + .form_hint, .styled_form textarea:hover + .form_hint
{
	display			: inline;
}

.styled_form input:required:valid + .form_hint, .styled_form textarea:required:valid + .form_hint,
{
	background		: #28921f;
}

.styled_form input:required:valid + .form_hint::before, .styled_form textarea:required:valid + .form_hint::before
{
	color			: #28921f;
}

.fakebutton
{
	-webkit-touch-callout	: none;
	  -webkit-user-select	: none;
	   -khtml-user-select	: none;
	     -moz-user-select	: none;
	      -ms-user-select	: none;
	          user-select	: none;
}

.styled_form input[type=submit], .fakebutton
{
	border-radius		: 3px;
	-webkit-border-radius	: 3px;
	-moz-border-radius	: 3px;
	-ms-border-radius	: 3px;
	-o-border-radius	: 3px;
	box-shadow		: inset 0 1px 0 0 #9fd574;
	-webkit-box-shadow	: 0 1px 0 0 #9fd574 inset;
	-moz-box-shadow		: 0 1px 0 0 #9fd574 inset;
	-ms-box-shadow		: 0 1px 0 0 #9fd574 inset;
	-o-box-shadow		: 0 1px 0 0 #9fd574 inset;
	color			: white;
	font-weight		: bold;
	padding			: 6px 20px;
	text-align		: center;
	text-shadow		: 0 -1px 0 #396715;
}

.styled_form input[type=submit], .fakebutton
{
	background-color	: #68b12f;
	background		: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
	background		: -webkit-linear-gradient(top, #68b12f, #50911e);
	background		: -moz-linear-gradient(top, #68b12f, #50911e);
	background		: -ms-linear-gradient(top, #68b12f, #50911e);
	background		: -o-linear-gradient(top, #68b12f, #50911e);
	background		: linear-gradient(top, #68b12f, #50911e);
	border			: 1px solid #509111;
	border-bottom		: 1px solid #5b992b;
}

input:disabled, input:read-only
{
	background-color	: #eeeeee;
	border			: none;
	box-shadow		: none;
	-webkit-box-shadow	: none;
	-moz-box-shadow		: none;
	-ms-box-shadow		: none;
	-o-box-shadow		: none;
}

.styled_form input[type=submit]:disabled, a.fakebutton.disabled, a.fakebutton.disabled:hover
{
	background-color	: #eeeeee;
	background		: -webkit-gradient(linear, left top, left bottom, from(#aaaaaa), to(#911e0d));
	background		: -webkit-linear-gradient(top, #aaaaaa, #555555);
	background		: -moz-linear-gradient(top, #aaaaaa, #555555);
	background		: -ms-linear-gradient(top, #aaaaaa, #555555);
	background		: -o-linear-gradient(top, #aaaaaa, #555555);
	background		: linear-gradient(top, #aaaaaa, #555555);
	border			: 1px solid #aaaaaa;
	border-bottom		: 1px solid #555555;
	cursor                  : not-allowed;
	-webkit-box-shadow      : 0 1px 0 0 #aaaaaa inset;
	   -moz-box-shadow	: 0 1px 0 0 #aaaaaa inset;
	    -ms-box-shadow	: 0 1px 0 0 #aaaaaa inset;
	     -o-box-shadow	: 0 1px 0 0 #aaaaaa inset;
	        box-shadow	: inset 0 1px 0 0 #aaaaaa;
}

.styled_form input[type=submit].allow, .fakebutton.allow
{
	background-color	: green;
	background		: -webkit-gradient(linear, left top, left bottom, from(#00ff00), to(#1e910d));
	background		: -webkit-linear-gradient(top, #00ff00, #1e910d);
	background		: -moz-linear-gradient(top, #00ff00, #1e910d);
	background		: -ms-linear-gradient(top, #00ff00, #1e910d);
	background		: -o-linear-gradient(top, #00ff00, #1e910d);
	background		: linear-gradient(top, #00ff00, #1e910d);
	border			: 1px solid #00ff00;
	border-bottom		: 1px solid #1e910d;
}

.styled_form input[type=submit].deny, .fakebutton.deny
{
	background-color	: red;
	background		: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#911e0d));
	background		: -webkit-linear-gradient(top, #ff0000, #911e0d);
	background		: -moz-linear-gradient(top, #ff0000, #911e0d);
	background		: -ms-linear-gradient(top, #ff0000, #911e0d);
	background		: -o-linear-gradient(top, #ff0000, #911e0d);
	background		: linear-gradient(top, #ff0000, #911e0d);
	border			: 1px solid #ff0000;
	border-bottom		: 1px solid #911e0d;
}

input[type=submit]:hover, .fakebutton:hover
{
	opacity			: .85;
	cursor			: pointer;
}

a.fakebutton, a.fakebutton a:visited, a.fakebutton:hover
{
	color			: white;
	text-decoration		: none;
	border-bottom		: none;
}

input[type=submit]:active, .fakebutton:active
{
	border			: 1px solid #20911e;
	box-shadow		: 0 0 10px 5px #356b0b inset;
	-webkit-box-shadow	: 0 0 10px 5px #356b0b inset;
	-moz-box-shadow		: 0 0 10px 5px #356b0b inset;
	-ms-box-shadow		: 0 0 10px 5px #356b0b inset;
	-o-box-shadow		: 0 0 10px 5px #356b0b inset;
}

input[type=submit].allow:active, .fakebutton.allow:active
{
	border			: 1px solid #00ff00;
	box-shadow		: 0 0 10px 5px #1e910d inset;
	-webkit-box-shadow	: 0 0 10px 5px #1e910d inset;
	-moz-box-shadow		: 0 0 10px 5px #1e910d inset;
	-ms-box-shadow		: 0 0 10px 5px #1e910d inset;
	-o-box-shadow		: 0 0 10px 5px #1e910d inset;
}

input[type=submit].deny:active, .fakebutton.deny:active
{
	border			: 1px solid #ff0000;
	box-shadow		: 0 0 10px 5px #911e0d inset;
	-webkit-box-shadow	: 0 0 10px 5px #911e0d inset;
	-moz-box-shadow		: 0 0 10px 5px #911e0d inset;
	-ms-box-shadow		: 0 0 10px 5px #911e0d inset;
	-o-box-shadow		: 0 0 10px 5px #911e0d inset;
}

.styled_form input[type=checkbox]
{
	appearance		: none;
	-webkit-appearance	: none;
	box-shadow		: inset 0px 0px 0px 1px #e6e6e6;
	border-radius		: 15px;
	background-color	: white;
	padding			: 1px;
	display			: inline-block;
	width			: 52px;
	min-width		: 52px;
	height			: 31px;
	position		: relative;
	cursor			: pointer;
	transition		: all .3s ease-out;
	margin			: 0px;
	transform		: scale(1);
	-webkit-transform	: scale(1);
}

.styled_form input[type=checkbox]:checked
{
	box-shadow: inset 0px 0px 0px 20px #53d76a;
}

.styled_form input[type=checkbox]:disabled, .styled_form input[type=radio]:disabled, .styled_form input[type=checkbox]:read-only, .input[type=submit]:disabled,
{
	cursor			: not-allowed;
}

.styled_form input[type=checkbox]:checked:disabled, input[type=radio]:checked:disabled, .styled_form input[type=checkbox]:checked:read-only, input[type=radio]:checked:read-only
{
	box-shadow: inset 0px 0px 0px 20px #82ab89;
}

.styled_form input[type=checkbox]:after
{
	content			: '';
	position		: absolute;
	width			: 29px;
	height			: 29px;
	border-radius		: 15px;
	box-shadow		: 0px 2px 2px 1px rgba(0,0,0,.2);
	cursor			: pointer;
	background-color	: white;
	transition		: all 0.1s ease-in .1s;
}

.styled_form input[type="checkbox"]:checked:after,input[type="radio"]:checked:after
{
	left			: 22px;
}

.styled_form input[type="checkbox"]:focus
{
	padding-right		: 0px;
}

.styled_form textarea.console
{
	font-family		: "Lucida Console", Monaco, "Courier New", Courier, monospace;
	width			: 80%;
	min-height		: 200px;
}

input.search, input.search:active, input.search:focus
{
	background              : white url(/gfx/search.png) no-repeat 98% center;
	background-size		: 2em 2em;
}

input.hidebox
{
	display			: none;
}

div.hidebox
{
	display			: none;
}

input.hidebox:checked ~ div.hidebox
{
	display			: block;
}

label.hidebox:after
{
	content			: " >>>";
}

input.hidebox:checked ~ label.hidebox:after
{
	content			: " <<<";
}

.styled_form label.hidebox
{
	float			: none;
	width			: initial;
	min-width		: initial;
}

.styled_form div.hidebox input
{
	min-width		: 35em;
}

.styled_form input.hidebox:checked ~ div.hidebox
{
	display			: inline;
}

@media (max-width: 450px)
{
	.styled_form label, .styled_form ul, .styled_form input, .styled_form select, .styled_form textarea
	{
		text-align	: left;
		width		: initial;
		min-width	: 100%;
		max-width	: 100%;
	}

	.styled_form fieldset, .styled_form li
	{
		padding		: 0px;
	}
}

/* Needed so that float: right (e.g. images) stick to the right */
article
{
	width				: 100%;
}

article.expl:first-child h1
{
        float                           : left;
}

article.expl:first-child p.small
{
        float                           : right;
}

article.expl
{
	display				: inline-block;
	clear				: both;
}