/*
	Stylesheet voor Evert's website
	www.evertmouw.nl
	Commentaar in willekeurig Nederlands of Engels
	Evert Mouw, 2010
	2013-10: responsiever gemaakt
*/

/* Externe links
   gebaseerd op tips van Jim Wilkinson en Roger Johansson
   http://www.456bereastreet.com/archive/200812/reveal_new_window_links_and_links_to_non-html_files_with_a_user_stylesheet/
*/

a {
	text-decoration: none;
	color: #6a5acd;
	cursor: url("/inc/cur117.png"), auto;
}

a[target=blank]:after,
a[target=_blank]:after,
a[target="_blank"]:after,
a[target=new]:after,
a[target=_new]:after,
a[target="_new"]:after {
	/*content: "\21D2";*/
	content: "+";
	background-color: transparent;
	color: orange;
	/* superscript */
	vertical-align: super;
	font-size: 80%;
	line-height: 0; /* fix for line height when using super */
}

a[target=blank]:hover:after,
a[target=_blank]:hover:after,
a[target="_blank"]:hover:after,
a[target=new]:hover:after,
a[target=_new]:hover:after,
a[target="_new"]:hover:after {
	background-color: orange;
	color: blue;
	transition: background-color 2s ease 0.1s;
}

a[href$="pdf"]:after {
	margin:0 0 0 0.3em;
	content: url("/inc/pdf_icon.png");
}

a[href$="doc"]:after {
	margin:0 0 0 0.3em;
	content: url("/inc/doc_icon.png");
}

img {
	padding: 1em;
}

.rounded {
	border: 1em solid transparent;
	border-radius: 3em;
}

/* fluid max width for images */
img,
embed,
object,
video {
	max-width: 100%;
	height: auto;
}

body {
	color: White;
	background-color: Teal; /* Gray was zakelijker, maar lelijk en saai */
	text-align: center;
	font-size: 1em;
}

cite {
	font-size: smaller;
}

/* textuele inhoud krijgt een andere stijl */

.inhoud {
	background-color: #f0ffff;
	/* 
	the calc function doesn't work yet in firefox 17
	see example 16 at http://www.w3.org/TR/css3-values/#calc
	i first set the version without calc, only browsers supporting calc will use the second one
	*/
	background-image: linear-gradient(175deg, red 0%, white 1.5em, #fffaf0, #f0ffff 95%,              blue 100%);
	background-image: linear-gradient(175deg, red 0%, white 1.5em, #fffaf0, #f0ffff calc(100% - 2em), blue 100%);
	border-radius: 2em / 4em;
	padding: 1%;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: black;
	line-height: 130%;
	max-width: 60em;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
.inhoud h1 {
	color: #f08080;
}
.inhoud h2 {
	color: #FF7F50;
}
.inhoud h3 {
	 color: #FF6347;
}

.inhoud a {
	text-decoration: none;
	color: #6495ed;
	/* border instellen, maar niet zichtbaar maken (pas zichbaar bij een hover)*/
	border-color: transparent;
	border-width: 0.1em;
	border-style: solid;
	border-radius: 0.3em; /* rounded boxes */
}
.inhoud a:link { color: #6495ed; }
.inhoud a:visited { color: #6495ed; }
.inhoud a:hover {
	/*background-color: #fffacd;*/
	background-color: white;
	border-color: green;
	transition: all 1.5s ease 0.1s;
}

/* code samples */
.code {
	background-color: inherit;
	color: Gray;
	border: thin dotted Gray;
	padding-left: 1em;
	font-family: monospace;
}

/* de bovenbalk op de pagina */
.top {
	font-size: xx-large;
	letter-spacing: 0.7em;
	font-variant: small-caps;
	font-weight: bold;
	font-family: cursive;
}

.menu {
	background-color: orange;
	border-radius: 0.5em; /* rounded boxes */
	font-style: normal;
	font-variant: normal;
	font-size: 1.3em;
	color: black;
	margin: 0.3em; /* keep the menu items seperated from each other */
	padding: 1em; /* nice boxes around the text */
	display: inline-block; /* prevents overlapping on small screens */
}
.menu:hover {
	background-color: yellow;
	transition: background-color 0.3s ease 0.1s;
}