@import url(http://fonts.googleapis.com/css?family=Roboto+Slab);
@import url(http://fonts.googleapis.com/css?family=Oswald);

html
{
	height: 100%;
	box-sizing: border-box;
}

body
{
	background: linear-gradient(to top, white, white 85%, #def);
	font: 9pt sans-serif;
	height: 100%;
	margin: 0;
	color: gray;
}

body > #matte > #matteContent
{
	padding: 2em 0 0 2em;
	color: #eee;
	overflow: hidden;
}

body > #matte > #matteContent > #matteText
{
	margin-top: 2em;
	color: #617497;
	font-size: 85%;
	letter-spacing: .1ex;
	text-shadow: none;
	width: 44em;
	line-height: 150%;
	background-color: #fafafa;
}

body > #matte > #matteContent > #matteText strong
{
	color: #343f52;
	font-size: 125%;
}

body > #matte > #matteContent > #matteText > h1
{
	font-family: 'Oswald', sans-serif;
	font-size: 220%;
	margin: 2ex 0;
	padding: 1ex;
	background-color: #def;
	text-transform: uppercase;
}

body > #matte > #matteContent > #matteText > h1 > #matteLoader
{
	margin-right: 1ex;
	vertical-align: middle;
}

body > #matte > #matteContent > #matteText h3
{
	margin-top: 4.5ex;
	margin-bottom: 3ex;
}

body > #matte > #matteContent > #matteText ul.longBullets > li
{
	margin-bottom: 1em;
}


body > #mainScreen
{
	display: -webkit-flex;  /* für Safari */
	display: flex;
	-webkit-flex-direction: column;	  /* für Safari */
	flex-direction: column;
	height: 100%;
}

body > #mainScreen > .preLoader
{
	position: absolute;
	width: 1px;
	height: 1px;
}

body > #mainScreen > #legacy
{
	position: absolute;
	margin: 4em 20% 0;
	padding: 3em;
	background-color: #404040;
	border: 1ex solid #303030;
	border-radius: 1em;
	z-index: 10;
}

body > #mainScreen > #legacy a[href]
{
	color: #cdf;
}

body > #mainScreen > #legacy > .input
{
	text-align: center;
	margin: 3em 0 0;
}

body > #mainScreen > header
{
	padding: 2em;
	-webkit-flex: 0 0 0;	  /* für Safari */
	flex: none;
}

body > #mainScreen > header > nav
{
	border: 1px solid #abd;
	border-radius: 1em;
	padding: 3ex;
	background-color: white;
}

body > #mainScreen > header > nav > div
{
	position: relative;
	margin: 0 .5ex;
	z-index: 0;
	display: inline-block;
}

body > #mainScreen > header > nav > div *
{
	border-width: 0;
}

img.button
,img.shadow
{
	width: 2em;
	vertical-align: middle;
}

img.button:hover
{
	position: relative;
	top: -.1ex;
	left: -.1ex;
}

img.button:active
{
	position: relative;
	top: .1ex;
	left: .1ex;
}

img.shadow
{
	position: absolute;
	top: .5ex;
	left: .5ex;
	z-index: -1;
	opacity: .3;
}

body > #mainScreen > section
{
	display: -webkit-flex;  /* für Safari */
	display: flex;
	-webkit-flex: 1 1 auto;	  /* für Safari */
	flex: auto;
	-webkit-flex-direction: row;	  /* für Safari */
	flex-direction: row;
	overflow: auto;
}

body > #mainScreen > section > main
{
	-webkit-flex: 1 1 auto;	  /* für Safari */
	flex: auto;
	padding: 1em 10%;
	overflow-y: auto;
	overflow-x: hidden;
	font-family: 'Roboto Slab', serif;
	line-height: 1.7em;
	letter-spacing: .05ex;
	word-spacing: .1ex;
}

body > #mainScreen > section > main > div > h1
{
	font-family: 'Oswald', sans-serif;
	font-size: 220%;
	text-align: center;
	margin-bottom: 2em;
	line-height: 1.5em;
}


#blog
{
	-webkit-flex: 0 0 0;	  /* für Safari */
	flex: none;
	opacity: 0;
	width: 0;
	display: none;
	overflow-y: auto;
	overflow-x: hidden;
	margin: 1em;
}

#blog > img#dummy
{
	display: none;
}

#blog > table
{
	border-collapse: collapse;
	width: 25em;
}

#blog tr
{
	border: 1px solid silver;
}

#blog th
{
	text-transform: capitalize;
	font-variant: small-caps;
	font-size: 120%;
	background-color: rgba(240, 240, 240, .35);
	border-radius: 1ex;
	width: 25em;
}

#blog td
{
	padding: 1em;
	vertical-align: top;
}

#blog td.image
{
	border-radius: 2ex 0 0 2ex;
	width: 4em;
	height: 4em;
	vertical-align: top;
}

#blog td.image div
{
	display: inline-block;
	width: 4em;
	height: 4em;
	background: center / 4em no-repeat black;
	border-radius: 50%;
	box-shadow: inset .5ex .5ex 2ex -.5ex rgba(255, 255, 255, 1), inset -.5ex -.5ex 2ex -.5ex rgba(0, 0, 0, .6), .3ex .6ex 1ex -.25ex rgba(0, 0, 0, .5);
	transition: zoom 300ms ease;
	position: absolute;
}

#blog td.image div:hover
{
	zoom: 2;
	z-index: 1;
}

#blog td.remove
{
	border-radius: 0 2ex 2ex 0;
	cursor: pointer;
}

#blog td.remove:hover > *
{
	position: relative;
	left: -.2ex;
	top: -.2ex;
	text-shadow: .1ex .1ex .1ex 0 rgba(0, 0, 0, 1);
}


body > #video
{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	z-index: 1;
	display: none;
	overflow: hidden;
}

body > #video > img
{
	box-shadow: 2ex 4ex 4em 3ex rgba(0, 0, 0, .5);
	border: 20px solid #555;
	border-radius: 1em;
	position: relative;
}