/**
 * ALICE theme for reveal.js. 
 *
 * By Stefan Hoch
 *
 * based on White theme for reveal.js. By Hakim El Hattab, http://hakim.se
 */

@font-face {
	font-family: FontAwesome;
	src: url('../../widgets/core.wdgt/fontawesome-webfont.woff');
}
section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
	color: #fff;
}

/*********************************************
 * GLOBAL STYLES
 *********************************************/
body {
	background: url('../../img/paper_background_03.png') 0 0/100% repeat fixed;
	background-color: #E0E0E0;
	counter-reset: widget ppage;
}
.sf{
	font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
}
.centering{
	text-align: center;
}
.justify{
	text-align: justify;
	hyphens: auto;
}
.indented{
	padding-left: 1em;
}
.reveal {
	font-family: Palatino, serif;
	font-size: 18px;
	font-weight: normal;
	color: #222;
}

::selection {
	color: #fff;
	background: #5288BC;
	text-shadow: none;
}

::-moz-selection {
	color: #fff;
	background: #5288BC;
	text-shadow: none;
}

.reveal .slides>section{
	counter-increment: ppage;
}
.reveal .slides section,
.reveal .slides section > section {
	line-height: 1.3;
	font-weight: inherit;
	text-align: left;
	padding-top: 9px;
}

.reveal .slides section:not(.full)::before/*,
.reveal .slides section > section::before */{
	content:""; /* counter(ppage);*/
	text-align: center;
	font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
	font-weight: bold;
	font-size: 13px;
	height: 29px;
	width: 924px;
	margin-left: 50px;
	margin-bottom: 12px;
	display: block;
	background: url('../../img/banner.png') no-repeat center bottom/contain;
}

#enterPagenumber{
	position: absolute;
	top: 42px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;

	font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
	font-weight: bold;
	font-size: 13px;
	padding: 0;
	padding-top: 1em;
}

span.pagenumber{
	font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
	font-weight: bold;
	font-size: 13px;
	position: absolute;
	top: 9px;
	width: 1024px;
	/* left: 50%;
	transform: translateX(-50%);*/
	display: block;
	text-align: center;
	/* cursor: pointer;*/
}
span.pagenumber a {
	display: inline-block;
	padding-left: 44px;
	padding-right: 44px;
	cursor: pointer;
	color: #222 !important;
}

span.section,
span.subsection{
	font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
	font-weight: bold;
	font-size: 13px;
	position: absolute;
	top: 9px;
	right: 50px;
	cursor: pointer;
}


/*********************************************
 * MATH 
 *********************************************/
.reveal .katex{
	font-size: 1.05em;
}

.reveal .katex.display{
	text-align: center;
	margin-bottom: 20px;
}

.reveal .katex.inline:not(first){
	margin-left: 0px !important;
}
/*********************************************
 * TOC 
 *********************************************/
#toc{
	font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
	position: absolute;
	top: 0px;
	left: 50%;
	transform: translateX(-50%);
	transform-origin: top;
	line-height: 1.2;
	min-width: 60%;
	display: none;
}

#toc a{
	display: block;
	color: #000;
	text-decoration: none;
}

#toc a.h2::before,
#toc a.h3::before{
	float: right;
	text-align: right;
	content: attr(data-pageno);
}
#toc a.h2::after,
#toc a.h3::after{
	content: "";
	border-bottom: 2px dashed #000;
}

#toc a.h1{
	font-weight: bold;
	font-size: 28px;
	padding-top: 15px;
}
#toc a.h2{
	font-size: 24px;
	margin-left: 48px;
}
#toc a.h3{
	margin-left: 96px;
}

/*********************************************
 * COLUMNS 
 *********************************************/

.one-column{
	margin-left: 50px;
	margin-right: 50px;
}
.auto-columns{
	columns: 2;
	column-gap: 44px;
	column-fill: auto;
	max-height: 645px;
	grid-gap:44px;
}

.columns{
	display: flex;
	margin-left: 50px;
	margin-right: 50px;
}

.columns>.col {
	flex: 1;
	margin-left: 22px;
	text-align: justify;
	hyphens: auto;
}
.columns>.col:first-child {
	margin-left: 0px;
	margin-right: 22px;
}

.icon{
	position: relative;
}

.icon::after{
	content: "";
	position: absolute;
	top: 0;
	width: 50px;
	height: 38px; 
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.columns>.col:first-child  .icon::after,
.icon.left::after{
	left: 0;
	transform: translateX(-100%);
}

.columns>.col:last-child .icon::after,
.icon.right::after{
	right: 0;
	transform: translateX(100%);
}

.icon.single::after{  background-image: url('../../img/icon_single.png'); }
.icon.partner::after{ background-image: url('../../img/icon_partner.png'); }
.icon.group::after{   background-image: url('../../img/icon_group.png'); }
.icon.teacher::after{ background-image: url('../../img/icon_teacher.png'); }

/*********************************************
 * WIDGETS 
 *********************************************/

div.widget{
	margin: 0.5em 0;
}
div.widget.exercise{
	counter-increment: widget;
}

div.widget.exercise::before{
	content: "Aufgabe " attr(data-no) " "; /* counter(widget) does not work since reveal will hide stuff for mobile */
	font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
	font-weight: bold;
	color: #0C5AA6;
}

html[lang=en] div.widget.exercise::before{
	content: "Exercise " attr(data-no) " "; /* counter(widget) does not work since reveal will hide stuff for mobile */
}

html[lang=es] div.widget.exercise::before{
	content: "Tarea " attr(data-no) " "; /* counter(widget) does not work since reveal will hide stuff for mobile */
}
div.widget>a{
	display: block;
	text-align: center;
}
a.clone>img,
div.widget>a>img{
	border: 0;
	margin: auto;
	width: 90%;
}
a.clone{
	text-align: center;
}
a.clone::after,
div.widget>a::after{
	font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
	font-weight: bold;
	color: #fff;
	background: rgba(128, 128, 128, 0.9);
	border-radius: 10px;
	width: 300px;
	line-height: 100px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}
div.widget>a:hover::after{
	content: "Aufgabe öffnen";
}
html[lang=en] div.widget>a:hover::after{
	content: "Open exercise";
}
html[lang=es] div.widget>a:hover::after{
	content: "Abrir tarea";
}
.overview div.widget>a:hover::after{
	display: none !important;
}

a.clone.opening::after{
	content: "Aufgabe wird geöffnet";
}
html[lang=en] a.clone.opening::after{
	content: "Opening exercise";
}
html[lang=es] a.clone.opening::after{
	content: "Se abre la tarea";
}
div.merke{
	background: #fff;
	border: 1px solid #232323;
	padding: 0 0.5em;
	margin-bottom: 20px;
}

/* Colors {{{ */
.blue.lighter { color: #5288BC }
.blue.light { color: #306EAB }
.c4,.blue { color: #0C5AA6 }
.blue.dark { color: #094580 }
.blue.darker { color: #053664 }

.orange.lighter { color: #FFB963 }
.orange.light { color: #FFA639 }
.c5,.orange { color: #FF8C00 }
.orange.dark { color: #C56C00 }
.orange.darker { color: #9B5500 }

.green.lighter { color: #83DE5C }
.green.light { color: #63CC35 }
.green { color: #43BA10 }
.green.dark { color: #309605 }
.green.darker { color: #227400 }

.red.lighter { color: #FD696D }
.red.light { color: #EC3E42 }
.red { color: #D71318 }
.red.dark { color: #AD060A }
.red.darker { color: #850003 }

.grey.lighter { color: #E0E0E0 }
.grey.light { color: #ACACAC }
.grey { color: #808080 }
.grey.dark { color: #4E4E4E }
.grey.darker { color: #232323 }
    
.violett.lighter { color: #B36DD4 }
.violett.light { color: #9E3ECC }
.c3,.violett { color: #9113CC }
.violett.dark { color: #7B05B2 }
.violett.darker { color: #5E038A }

.torquoise.lighter { color: #5AB1AB }
.torquoise.light { color: #189C92 }
.c2,.torquoise { color: #008077 }
.torquoise.dark { color: #005F58 }
.torquoise.darker { color: #003C38 }

.yellow.lighter { color: #FFF299 }
.yellow.light { color: #FFED72 }
.yellow { color: #F5E050 }
.yellow.dark { color: #DDC62C }
.yellow.darker { color: #AA9716 }

.brown.lighter { color: #BA682B }
.brown.light { color: #984A10 }
.brown { color: #753200 }
.brown.dark { color: #502200 }
.brown.darker { color: #2A1200 }

.magenta.lighter { color: #FFF6FF }
.magenta.light { color: #FDB5FD }
.magenta { color: #F883F8 }
.magenta.dark { color: #F059F0 }
.magenta.darker { color: #E134E1 }
 /* }}} */

/*********************************************
 * ANLEITUNG
 *********************************************/

#tutorial{
	float: right;
	border: 1px solid #808080;
	width: 619px;
	height: 464px;
	background: url('../../img/tutorial_raw.jpg') no-repeat 0 0/100% 100%;
	position: relative;
}

html[lang=en] #tutorial{
	background-image: url('../../img/tutorial_en.png'); 
}

html[lang=es] #tutorial{
	background-image: url('../../img/tutorial_es.png'); 
}


#tutorial > div{
	position: absolute;
	width: 76px;
	height: 140px;
}
#tutorial > div > i{
	display: block;
	background: url('../../img/arrow_blue.png') no-repeat 0 0/contain;
	width: 76px;
	height: 140px;
	cursor: pointer;
}


#tutorial > div > span{
	font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
	font-size: 16px;
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
	width: 248px;
	padding: 15px;

	background: #fff;

	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translateX(-50%);
	display: none;
	z-index: 42;
}
#tutorial > div.closer > span{
	bottom: 75%;
}

#tutorial > div.tobottom > span{
	bottom: auto;
	top: 100%;
}
#tutorial > div.tobottom.closer > span{
	top: 75%;
}

/* ------------------------------------------
   PURE CSS SPEECH BUBBLES {{{
by Nicolas Gallagher
- http://nicolasgallagher.com/pure-css-speech-bubbles/

http://nicolasgallagher.com
http://twitter.com/necolas

Created: 02 March 2010
Version: 1.2 (03 March 2011)

Dual licensed under MIT and GNU GPLv2 Nicolas Gallagher
------------------------------------------ */
.triangle-border,
.triangle-border-top {
	position: relative;
	padding:  1.5em 1.5em;
	margin: 1em 0 1em;
	border: 5px solid #053664;
	color: #333;
	background: #fff;
	display:  inline-block;
	border-radius: 10px;
	text-align: center;
}

.triangle-border-top {
	margin-bottom: 1em;
}

.triangle-border::before {
	content: "";
	position: absolute;
	bottom: -1em; /* value = - border-top-width - border-bottom-width */
	left: 50%; /* controls horizontal position */
	transform: translateX(-50%);
	border-width: 1em 1em 0;
	border-style: solid;
	border-color: #053664 transparent;
}

/* creates the smaller  triangle */
.triangle-border::after {
	content: "";
	position: absolute;
	bottom: calc(-1em + 7px); /* value = - border-top-width - border-bottom-width */
	left: 50%; /* controls horizontal position */
	transform: translateX(-50%);
	border-width: calc(1em - 2px) calc(1em - 2px) 0;
	border-style: solid;
	border-color: #fff transparent;
}
.triangle-border-top::before {
	position: absolute;
	content: "";
	top: -1em;
	left: 50%; /* controls horizontal position */
	transform: translateX(-50%);
	border-width: 0 1em 1em;
	border-style: solid;
	border-color: #053664 transparent;
}

/* creates the smaller  triangle */
.triangle-border-top::after {
	position: absolute;
	content: "";
	top: calc(-1em + 7px); /* value = - border-top-width - border-bottom-width */
	left: 50%; /* controls horizontal position */
	transform: translateX(-50%);
	border-width: 0 calc(1em - 2px) calc(1em - 2px);
	border-style: solid;
	border-color: #fff transparent;
}



   /* }}} */

/*********************************************
 * SEARCH
 *********************************************/

#searchinput{
	font-size: 24px;
	background: #fff;
	border: 2px solid #ACACAC;
	border-radius: 5px;
}

#searchbutton{
	display: none;
}

#searchinputdiv::after{
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	display: inline-block;
	width: 1.1em;
	position: relative;
	left: -4px;
	top: 6px;
	margin-left: -1.1em;
	content: "\f002";
	color: #e0e0e0;
}

/*********************************************
 * HEADERS
 *********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
	margin: 0 0 20px 0;
	color: #0C5AA6;
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-shadow: none;
	word-wrap: break-word;
	text-align: left;
}

.reveal h1 {
	font-size: 2.5em;
}

.reveal h2 {
	font-size: 2.0em;
}

.reveal h3 {
	font-size: 2.0em;
}

.reveal h4 {
	font-size: 1em;
}

.reveal h1 {
	text-shadow: none;
}
.reveal h1,
.reveal h2{
	visibility: hidden;
}

/*********************************************
 * OTHER
 *********************************************/
.reveal p {
	margin: 20px 0;
	line-height: 1.3;
}

/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
	max-width: 100%;
	max-height: 100%;
}

.reveal strong,
.reveal b {
	font-weight: bold;
}

.reveal em {
	font-style: italic;
}

.reveal ol,
.reveal dl,
.reveal ul {
	display: inline-block;
	text-align: left;
	margin: 0 0 0 1em;
}

.reveal ol {
	list-style-type: decimal;
}

.reveal ul {
	list-style-type: disc;
}

.reveal ul ul {
	list-style-type: square;
}

.reveal ul ul ul {
	list-style-type: circle;
}

.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
	display: block;
	margin-left: 40px;
}

.reveal dt {
	font-weight: bold;
}

.reveal dd {
	margin-left: 40px;
}

.reveal blockquote {
	display: block;
	position: relative;
	width: 80%;
	margin: 20px auto;
	padding: 5px;
}

.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
	display: inline-block;
}

.reveal q {
	font-style: italic;
}

.reveal pre {
	display: block;
	position: relative;
	width: 90%;
	margin: 20px auto;
	text-align: left;
	font-size: 0.55em;
	font-family: monospace;
	line-height: 1.2em;
	word-wrap: break-word;
	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}

.reveal code {
	font-family: monospace;
	text-transform: none;
}

.reveal pre code {
	display: block;
	padding: 5px;
	overflow: auto;
	max-height: 400px;
	word-wrap: normal;
}

.reveal table {
	margin: auto;
	border-collapse: collapse;
	border-spacing: 0;
}

.reveal table th {
	font-weight: bold;
}

.reveal table th,
.reveal table td {
	text-align: left;
	padding: 0em 0.5em 0em 0.5em;
	/*border-bottom: 1px solid;*/
}

.reveal table th[align="center"],
.reveal table td[align="center"] {
	text-align: center;
}

.reveal table th[align="right"],
.reveal table td[align="right"] {
	text-align: right;
}

.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
	border-bottom: none;
}

.reveal sup {
	vertical-align: super;
	font-size: smaller;
}

.reveal sub {
	vertical-align: sub;
	font-size: smaller;
}

.reveal small {
	display: inline-block;
	font-size: 0.6em;
	line-height: 1.2em;
	vertical-align: top;
}

.reveal small * {
	vertical-align: top;
}

/*********************************************
 * LINKS
 *********************************************/
.reveal a {
	color: #C56C00;
	text-decoration: none;
	-webkit-transition: color .15s ease;
	-moz-transition: color .15s ease;
	transition: color .15s ease;
}

.reveal a:hover {
	color: #306EAB;
	text-shadow: none;
	border: none;
}

.reveal .roll span:after {
	color: #fff;
	background: #1a53a1;
}

/*********************************************
 * IMAGES
 *********************************************/
.reveal section img {
	margin: 15px 0px;
}

.reveal section img.plain {
	border: 0;
	box-shadow: none;
}

/*********************************************
 * NAVIGATION CONTROLS
 *********************************************/
.reveal .controls {
	color: #808080;
}
.reveal .slide-number{
	top: 8px;
	bottom: auto;
	right: auto;
	left: 50%;
	transform: translateX(-50%);
	color: #000;
	background: none;
	font-weight: bold;
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	font-size: 14px;
}
/* Fullscreen */
#fullscreener{
	font: normal normal normal 14px/1 FontAwesome;
	font-size: 36px;
	position: absolute;
	bottom: 24px;
	width: 36px;
	height: 36px;
	left: 8px;
	opacity: 0.9;
	color: #808080;
	z-index: 9;
	cursor: pointer;
}
#fullscreener:hover{
	transform: scale(1.05);
	opacity: 1;
}

:fullscreen #fullscreener{
	display: none;
}


/*********************************************
 * PROGRESS BAR
 *********************************************/
.reveal .progress {
	background: rgba(0, 0, 0, 0.2);
	color: #2a76dd;
}

.reveal .progress span {
	-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
	-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
	transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
}

/*********************************************
 * PRINT BACKGROUND
 *********************************************/
@media print {
	.backgrounds {
		background-color: #fff;
} }

   
/* Widget Player {{{ */
#player::after{
	display: none;
}

#player{
	z-index: 103;
	cursor: default;
	visibility: hidden;
	overflow: hidden;
	height: 0px;
}

#player.visible{
	display: block;
	height: auto;
	visibility: visible;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#close_player{
	position: absolute;
	top: 1.7em;
	left: 2.1em;
	z-index: 82;
	
	width: 44px;
	height: 44px;
	line-height: 44px;

}

#close_player>i{
	display: block;
	position: absolute;
	right: 11px;
	top: 11px;

	width: 20px;
	height: 20px;
	background: url('../../img/close.png') center center/12px 12px no-repeat #000;
	border: 1px solid #fff;
	border-radius: 100%;

	-webkit-tap-highlight-color: transparent;
}

iframe{
	border: 0;
	background: #fff;
	cursor: pointer;
}

.ipad{
	position: relative;
	font-size: 120%;
	padding: 1.7em 2.1em;
/*	background-color: #232323;
	border-radius: 0.5em;
	border: 0.2em solid #e0e0e0;*/
}

#playerShader{
	position: fixed;
	top:0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(36, 35, 35, 0.86);
	z-index: 101;

	visibility: hidden;
	opacity: 0;
	transition: all 0.5s ease;
}
#playerShader.visible{
	visibility: visible;
	opacity: 1;
}

#widgetnew{
	display: none; /* inline-block;*/
	padding: 10px;
	font-size: 10pt;
	font-family: Arial, sans-serif;
	text-shadow: 0px 0px 5px #000;
	color: #fff;
	text-decoration: none;
}
/* }}} */


/* cookies {{{ */ 
#cookies{
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(1024px, 100%);
	margin: 0;
	font-size: 11pt;
	font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
	z-index: 99;
	padding: 0.5em 1em;
	text-align: center;
}

#cookies p{
	text-align: justify;
	margin: 1em 0;
}

#cookies button{
	display: inline-block;
	text-align: center;
	padding: 0.4em 1.5em;
	min-width: 80px;
	line-height: 100%;
	white-space: nowrap;
	vertical-align: middle;
	margin: 2px 4px;

	font-family: 'Helvetica Neue', 'Arial', sans-serif;
	font-size: inherit;
	font-weight: bold;
	color: #fff;
	
	border-radius: 4px;
	border: 0px;
	box-shadow: inset 0px -2px rgba(0,0,0,0.205);
	-webkit-tap-highlight-color: transparent;

	position: relative;
}

#cookies button.blue{
	background-color: #0C5AA6;
	box-shadow: inset 0px -2px #053664;
}
#cookies button.grey{
	background-color: #808080;
	box-shadow: inset 0px -2px #4E4E4E;
}
#OWAinfo{
	display: none;
}
#showOWAinfo::after{
	font: normal normal normal 11pt/1 FontAwesome;
	content: " \f107";
}
.card{
	position: relative;
	margin: 20px;
	border: 1px solid #fff;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.15), 5px 5px 10px rgba(0,0,0,0.15);
	background-color: #fff;
	background-image: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 75%,rgba(0,0,0,0.1) 100%);
	background-size: 100% 100%;
	background-position: 0 0;
	display: inline-block;
	-webkit-appearance: none; /* Schatten auf dem iPad */
}
/* }}} */