@font-face {
    font-family: "Roboto";
    src: url('Roboto-Light.ttf');
}
@font-face {
    font-family: "Love Ya Like A Sister";
    src: url('LoveYaLikeASister.ttf');
}

html {
	font-family: Roboto,arial,sans-serif;
	font-size: .9em;
	box-sizing: border-box;
	/*overflow-x: hidden;*/
}

*:focus {
    outline: 0;
}

body{
	margin: 0;
	padding: 0;
	width: 100%;
	background-color: #E5E5E5;
	min-width: 850px;
}

body.detached {
	margin-top: 6em;
}

#logo {
	font-size: 25px;
	background-color: #fff;
	line-height: 45px;
	font-family: "Love Ya Like A Sister";
	z-index: 550;
}

#logo a {
	color: #000; text-decoration: none; margin-left: 1em;
}

body.detached #logo {
	opacity: 0;
}

.lambert {
	height: 50px; 
	float: right; 
	margin-right: 1em;
}
.lambert img {
	height: 35px;
	vertical-align: middle;
	margin-top: -3px;
	margin-right: 2px;
}

a {
	color: #427FED;
}

h1 { 
	font-size: 1.4em;
	color: #000;
	text-align: center;
	margin: .5em 0 1.5em;
	padding: 0;
}

h2 {
	font-size: 1.25em;
  margin: 1.5em 0 .8em 0;
	padding: 0;
}

h3 {
	font-size: 1.1em;
	margin: 1.3em 0 .6em 0;
	color: #333;
}
.div-ex h3 {
	padding: 0 0 0 4px;
	color: #666;
}

.center { margin: 0 auto; }
.content{ margin: 0 auto; padding: 10px 20px; width: 750px; }
.clear { clear: both; }

/* Footer */
#footer {
	position: fixed;
	bottom: -40px;
	left: 20px;
	/*right: 20px;*/
	z-index: 400;
	opacity: 0;
	transition: all .4s ease-in-out;
}
#footer.showme {
	opacity: 1;
	bottom: 15px;
}
#footer img {
	opacity: .65;
	margin-right: 5px;
	transition: all .2s ease-in-out;
}
#footer img:hover {
	opacity: 1;
}
/* Footer end */

#more {
	position: fixed;
	bottom: 15px;
	right: 15px;
	width: 64px;
	height: 210px;
	text-align: center;
	z-index: 450
}
#more #emailme-shadow {
	position: absolute;
	bottom: 0;
	box-shadow: 0 5px 10px rgba(0,0,0,.4);
	height: 64px;
	width: 64px;
	border-radius: 32px;
}
#more #emailme-shadow:hover:after {
  content: attr(data-title);
  padding: 5px 10px;
  color: #fff;
  position: absolute;
  left: -175px;
  top: 20px;
  white-space: nowrap;
  border-radius: 3px;
  background: #333;
  opacity: .7;
}
#more #emailme {
	height: 64px;
	width: 64px;
	background: #D73D32 url('../img/more-emailme.png') 0 0 no-repeat;
	border-radius: 32px;
	transition: transform .33s ease;
	cursor: pointer;
	z-index: 20;
}
#more #emailme.rotate {
	background-position: 0 -64px;
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}
#more #page-down {
	opacity: 0;
	height: 40px;
	width: 40px;
	border-radius: 20px;
	cursor: pointer;
	background: #427FED url('../img/page-down.png') 4px 4px no-repeat;
	margin: 12px;
	position: absolute;
	bottom: 62px;
	box-shadow: 0 5px 10px rgba(0,0,0,.4);
	transform: scale(.1);
	-webkit-transform: scale(.1);
	transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%;
	transition: all .17s ease;
}
#more #page-down.showme {
	transform: scale(1);
	-webkit-transform: scale(1);
	opacity: 1;
}
#more #page-down:hover:after {
  content: attr(data-title);
  padding: 5px 10px;
  color: #fff;
  position: absolute;
  left: -115px;
  top: 5px;
  white-space: nowrap;
  border-radius: 3px;
  background: #333;
  opacity: .7;
}
#more #print-lessons {
	opacity: 0;
	height: 40px;
	width: 40px;
	border-radius: 20px;
	cursor: pointer;
	background: #FEB201 url('../img/print.png') 4px 4px no-repeat;
	margin: 12px;
	position: absolute;
	bottom: 110px;
	box-shadow: 0 5px 10px rgba(0,0,0,.4);
	transform: scale(.1);
	-webkit-transform: scale(.1);
	transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%;
	transition: all .17s ease .05s;
}
#more #print-lessons.showme {
	transform: scale(1);
	-webkit-transform: scale(1);
	opacity: 1;
}
#more #print-lessons:hover:after {
  content: attr(data-title);
  padding: 5px 10px;
  color: #fff;
  position: absolute;
  left: -155px;
  top: 5px;
  white-space: nowrap;
  border-radius: 3px;
  background: #333;
  opacity: .7;
}
#more #change-theme {
	opacity: 0;
	height: 40px;
	width: 40px;
	border-radius: 20px;
	cursor: pointer;
	background: #53A93F url('../img/change-theme.png') 5px 3px no-repeat;
	margin: 12px;
	position: absolute;
	bottom: 158px;
	box-shadow: 0 5px 10px rgba(0,0,0,.4);
	transform: scale(.1);
	-webkit-transform: scale(.1);
	transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%;
	transition: all .17s ease .1s;
}
#more #change-theme.showme {
	transform: scale(1);
	-webkit-transform: scale(1);
	opacity: 1;
}
#more #change-theme:hover:after {
  content: attr(data-title);
  padding: 5px 10px;
  color: #fff;
  position: absolute;
  left: -145px;
  top: 5px;
  white-space: nowrap;
  border-radius: 3px;
  background: #333;
  opacity: .7;
}

#button-mobile-menu {
	display: none;
}

header { 
	width: 100%;
	background-color: #F5F5F5; 
	border-bottom: 1px solid #d8d8d8;
	margin-bottom: 2em;
	z-index: 580;
	position: relative;
}

body.detached header {
	position: fixed;
	top: 0;
	background-color: #fff;
	box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}

header .logo-mini {
	position: absolute;
	z-index: 200;
	top: 53px;
	left: 13px;
	display: none;
	cursor: pointer;
}
body.detached header .logo-mini {
	top: 8px;
}
header .logo-mini img {
	width: 40px;
}

header #menu {
	position: absolute;
	top: 12px;
	left: 25px;
	height: 24px;
	width: 24px;
	border-radius: 50%;
	padding: 4px;
	cursor: pointer;
	background-color: rgba(0,0,0,.07);
}
header #menu img {
	opacity: .3;
}
header #menu:hover img {
	opacity: .5;
}
header #menu:active {
	background-color: rgba(0,0,0,.13);
}

header #menu-detached {
	display: none;
	position: absolute; 
	left: 0;
	line-height: 3.8em;
	padding: 0 1em 0 5em;
	cursor: pointer;
	border-right: 1px dotted transparent;
}
header #menu-detached:after {
	content: "";
	background: url('../img/menu-after.png') no-repeat 0 0;
	padding: 0 8px 8px;
}
header #menu-detached:hover, header #menu-detached.hover {
	background: #f5f5f5;
	border-color: #d8d8d8;
}

body.detached header #menu {
	display: none;
}

body.detached header #menu-detached {
	display: block;
}

#menu-themes {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 230px;
	top: 55px;
	background-color: #fff;
	box-shadow: 5px 0 10px rgba(0,0,0,.3);
	z-index: 550;
	transform: translateX(-250px);
	transition: transform .15s ease-in-out;
}
#menu-themes.noshadow {
	box-shadow: none;
	border-right: 1px solid #e5e5e5;
}
#menu-themes.showme {
	transform: translateX(0);
}
ul.menu-themes {
	list-style: none;
	position: absolute;
	left: 0;
	top: 100px;
	width: 230px;
	padding: 0;
	z-index: 560;
	transform: translateX(-250px);
	transition: transform .15s ease-in-out;
}
ul.menu-themes.showme {
	transform: translateX(0);
}
body.detached ul.menu-themes {
	position: fixed;
	top: 55px;
}
ul.menu-themes li {
	padding: 4px 0 4px 25px;
	cursor: pointer;
	line-height: 45px;
	border-bottom: 1px solid #f5f5f5;
}
ul.menu-themes li:last-child {
	border-bottom: none;
}
ul.menu-themes li:before {
	padding: 7px 25px;
	content: "";
}
ul.menu-themes li.menu-verb:before {
	background: url('../img/menu-verb.png') no-repeat 0 0;
}
ul.menu-themes li.menu-vocabulary:before {
	background: url('../img/menu-vocabulary.png') no-repeat 0 0;
}
ul.menu-themes li.menu-rule:before {
	background: url('../img/menu-rule.png') no-repeat 0 0;
}
ul.menu-themes li.menu-adjectiv:before {
	background: url('../img/menu-adjectiv.png') no-repeat 0 0;
}
ul.menu-themes li.menu-number:before {
	background: url('../img/menu-number.png') no-repeat 0 0;
}
ul.menu-themes li.menu-audio:before {
	background: url('../img/menu-audio.png') no-repeat 0 0;
}
ul.menu-themes.noshadow li.noshadow:after {
	content: "";
	position: absolute;
	width: 0;
	margin-top: 15px;
	right: -1px;
	height: 0;
	border: 10px solid transparent;
	border-left: 0;
	border-right-color: #f5f5f5;
}
ul.menu-themes.noshadow li.noshadow {
	font-weight: bold;
}
ul.menu-themes li:hover {
	background-color: #f5f5f5;
}
ul.menu-themes.noshadow li.menu-verb.noshadow {
	color: #fff;
	background-color: #53A93F;
}
ul.menu-themes.noshadow li.menu-verb.noshadow:before {
	background-position: 0 -40px;
}
ul.menu-themes.noshadow li.menu-vocabulary.noshadow {
	color: #fff;
	background-color: #FEB201;
}
ul.menu-themes.noshadow li.menu-vocabulary.noshadow:before {
	background-position: 0 -40px;
}
ul.menu-themes.noshadow li.menu-rule.noshadow {
	color: #fff;
	background-color: #D73D32;
}
ul.menu-themes.noshadow li.menu-rule.noshadow:before {
	background-position: 0 -40px;
}
ul.menu-themes.noshadow li.menu-audio.noshadow {
	color: #fff;
	background-color: #FF6839;
}
ul.menu-themes.noshadow li.menu-audio.noshadow:before {
	background-position: 0 -40px;
}
ul.menu-themes.noshadow li.menu-number.noshadow {
	color: #fff;
	background-color: #8E22AF;
}
ul.menu-themes.noshadow li.menu-number.noshadow:before {
	background-position: 0 -40px;
}
ul.menu-themes.noshadow li.menu-adjectiv.noshadow {
	color: #fff;
	background-color: #427FED;
}
ul.menu-themes.noshadow li.menu-adjectiv.noshadow:before {
	background-position: 0 -40px;
}

nav { width: 750px; line-height: 3.8em; white-space: nowrap; }

nav span {
	margin-right: 2em;
}

nav a {
	color: #777;
	text-decoration: none;
	padding-bottom: 13px;
}

body.detached nav a {
	padding-bottom: 14px;
}

nav a.active {
	color: #000;
	border-bottom: 5px solid #FFCC02;
}

nav a:hover {
	border-bottom: 5px solid #FFCC02;
}

nav span.menuplusa1 {
	color: #777;
	text-decoration: none;
	padding-bottom: 13px;
	cursor: pointer;
	margin-right: .5em;
}

nav span.menuplus2a1 {
	padding-bottom: 13px;
	cursor: pointer;
}
nav span.menuplus2a1 svg {
	margin-left: 3px;
	width: 15px; 
	height: 12px;
}
nav span.menuplus2a1 g {
	transform: scale(0.013, 0.013)
}
nav span.menuplus2a1 path {
	fill: #777;
}

body.detached nav span.menuplusa1, body.detached nav span.menuplus2a1 {
	padding-bottom: 14px;
}

nav span.menuplusa1:hover, nav span.menuplusa1.hover {
	border-bottom: 5px solid #FFCC02;
}

nav span.menuplusa21 {
	color: #777;
	text-decoration: none;
	padding-bottom: 13px;
	cursor: pointer;
	margin-right: .5em;
}

nav span.menuplus2a21 {
	padding-bottom: 13px;
	cursor: pointer;
}
nav span.menuplus2a21 svg {
	margin-left: 3px;
	width: 15px; 
	height: 12px;
}
nav span.menuplus2a21 g {
	transform: scale(0.013, 0.013)
}
nav span.menuplus2a21 path {
	fill: #777;
}

body.detached nav span.menuplusa21, body.detached nav span.menuplus2a21 {
	padding-bottom: 14px;
}

nav span.menuplusa21:hover, nav span.menuplusa21.hover {
	border-bottom: 5px solid #FFCC02;
}

div.navsuppa1 {
	position: absolute;
	background-color: #fff;
	border: 1px solid #D8D8D8;
	border-radius: 3px;
	margin-top: -6px;
	margin-left: 70px;
	box-shadow: 0 0 20px rgba(0,0,0,.3);
	padding: 4px 0;
	z-index: 150;
	
	visibility: hidden;
	opacity: 0;
	transition: all .2s ease;
	-webkit-transition: all .2s ease;
}

div.navsuppa1.showme {
	visibility:visible;
	opacity: 1;
}
div.navsuppa1 span {
	display: block;
	line-height: 2.3em;
	margin: 0;
}
div.navsuppa1 span a {
	font-family: Roboto,arial,sans-serif;
	margin: 0;
	display: block;
	padding: 3px 5em 4px 1.5em;
	border-left: 3px solid #FFF;
	white-space: nowrap;
}
div.navsuppa1 span a.active, div.navsuppa1 span a.active:hover {
	border: 0;
	background: #fff;
	border-left: 3px solid #FFCC02;
}
div.navsuppa1 span a:hover {
	border: 0;
	background: #f5f5f5;
	border-left: 3px solid #f5f5f5;
}

div.navsuppa21 {
	position: absolute;
	background-color: #fff;
	border: 1px solid #D8D8D8;
	border-radius: 3px;
	margin-top: -6px;
	margin-left: 160px;
	box-shadow: 0 0 20px rgba(0,0,0,.3);
	padding: 4px 0;
	z-index: 150;
	
	visibility: hidden;
	opacity: 0;
	transition: all .2s ease;
	-webkit-transition: all .2s ease;
}

div.navsuppa21.showme {
	visibility:visible;
	opacity: 1;
}
div.navsuppa21 span {
	display: block;
	line-height: 2.3em;
	margin: 0;
}
div.navsuppa21 span a {
	font-family: Roboto,arial,sans-serif;
	margin: 0;
	display: block;
	padding: 3px 5em 4px 1.5em;
	border-left: 3px solid #FFF;
	white-space: nowrap;
}
div.navsuppa21 span a.active, div.navsuppa21 span a.active:hover {
	border: 0;
	background: #fff;
	border-left: 3px solid #FFCC02;
}
div.navsuppa21 span a:hover {
	border: 0;
	background: #f5f5f5;
	border-left: 3px solid #f5f5f5;
}

header#header-detached nav a {
	padding-bottom: 14px;
}

.howmuchstars {
	position: absolute;
	left: 50%;
	z-index: 100;
	cursor: help;
	margin-left: 400px;
	background-color: #FFF;
	padding: 5px;
	padding-bottom: 1px;
	text-align: center;
	top: 0;
	transition: top .2s ease-out;
	-webkit-transition: top .2s ease-out;
	/*border-radius: 3px;
	border: 1px solid #D8D8D8;
	border-bottom-width: 2px;*/
	box-shadow: 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.24);
}
.howmuchstars.bottom {
	bottom: 0;
	top: inherit !important;
}

.mystarcookie {
	cursor: pointer;
	background-color: #FFF;
	padding: 4px;
	border-radius: 15px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.backtoschool {
	display: none;
	position: absolute;
	right: 20px;
	top: 22px;
	background-color: #ededed;
	color: #000;
	padding: 4px 13px 6px;
	border-radius: 3px;
	cursor: pointer;
	box-shadow: 0 0 4px rgba(0,0,0,.08),0 4px 8px rgba(0,0,0,.18);
	transition: all .4s ease;
}
.backtoschool:hover {
	background-color: #e0e0e0;
	box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}

.top {
	position: relative;
	text-align: right;
	margin: 0px -20px -10px;
}
.top .select-exercice {
	position: absolute;
	left: 20px;
	top: 12px;
}
.top .select-exercice span {
	background-color: #ededed;
	color: #000;
	padding: 4px 13px 6px;
	border-radius: 3px;
	margin-right: 5px;
	cursor: pointer;
	box-shadow: 0 0 4px rgba(0,0,0,.08),0 4px 8px rgba(0,0,0,.18);
	transition: all .4s ease;
}
.top .select-exercice span:hover {
	background-color: #e0e0e0;
	box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}
.top .select-exercice span.active {
	background-color: #427FED;
	color: #fff;
}
.top .select-exercice span.active:hover {
	background-color: rgb(42, 106, 221);
	box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}
.top div.border {
	cursor: pointer; 
	display: inline-block; 
	width: 22px; 
	height: 22px; 
	border-radius: 16px; 
	border: 5px solid rgba(0, 0, 0, 0.12); 
	margin: 5px 20px 12px 10px;
}
.top div.circle {
	width: 20px; 
	height: 20px; 
	border-radius: 10px; 
	background: rgba(0, 0, 0, 0.12); 
	margin-top: 1px; 
	margin-right: 1px; 
	display: inline-block;
	text-align: center;
}
.top svg {
	height: 13px; 
	width: 14px; 
}
.top g {
	transform: scale(0.014);
}
.top path {
	fill: #fff;
}
.top.div-ex-open {
	background-color: #f5f5f5;
}

.content {
	/*z-index: 50;*/
	position: relative;
	background-color: #fff;
	box-shadow: 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.24);
}

section {
	margin-bottom: 10px;
}

section[id^='section'] .content {
	opacity: 0;
	-webkit-transition: opacity .2s linear;
	-webkit-transition-delay: .3s;
	transition: opacity .2s linear;
	transition-delay: .3s;
}
section[id^='section'].show-section .content {
	opacity: 1;
}

table { border-spacing : 0; border-collapse : collapse; width: 100%; margin-bottom: .7em;}

.plusminus {
	cursor: pointer;
}
span.plusminus {
	vertical-align: middle;
}
img.plusminus {
	margin-left: 10px;
}

div.date-level {
	position: absolute;
	top: 15px;
	left: -5px;
	margin: 0;
	border: none;
	transition: all .4s ease;
}
div.date-level.showme {
	background: #f5f5f5;
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.24);
}
span.date, span.level {
	background-color: #F5F5F5 !important;
	margin: 0;
	font-family: Roboto;
	font-size: .8em;
	color: #888;
	display: block;
	padding-left: 20px;
	border-left: 5px solid;
	cursor: default;
	box-shadow: none !important;
}
span.level {
	border-left-color: #4B585D;
}
span.date {
	border-left-color: #919EA3;
	color: #fff;
	background-color: transparent !important;
	transition: all .4s ease;
}
div.date-level.showme span.date {
	color: #888;
}

.div-cours {
	padding-bottom: 20px;
}
div.div-ex {
	display: none;
	background-color: #F5F5F5;
	margin-left: -20px;
	margin-right: -20px;
	border-top: 1px solid #E5E5E5;
	padding: 0px 20px 20px;
}

.content table td {
	padding: 3px 7px 3px 0;
	width: 200px;
	vertical-align: top;
}

.content table.note-rule-2col td {
	padding: 2px 7px 1px 0px;
	vertical-align: middle;
}

.div-grey, .div-imparfait, .div-conditionnel, .div-modal {
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	background-color: #F5F5F5;
	padding: 3px 7px 5px;
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.24);
	margin-right: 7px;
	margin-bottom: 10px;
}

.photocentree { 
	background-position:50% 50%;
}

.div-grey:last-child, .div-imparfait:last-child, .div-conditionnel:last-child, .div-modal:last-child {
	margin-right: 0;
}

.div-100 {
	width: 100%;
}
.div-50 {
	width: calc(50% - 10px);
}
.div-50:last-child {
	width: calc(50% - 1px);
}
.div-33 {
	width: calc(33% - 5px);
}
.div-25 {
	width: calc(25% - 10px);
}
.div-25:last-child {
	width: calc(25% - 2px);
}

table.grey {
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.24);
}
table.grey td {
	width: inherit;
	padding: 3px 7px;
	background-color: #f0f0f0;
	border: 1px solid #e0e0e0;
}
table.grey strong {
	color: rgba(0, 0, 0, 0.6);
}
table.grey td.title {
	vertical-align: middle;
	text-align: center;
}

.content table.ex {
	margin-bottom: 0;
}
.content table.ex td {
	padding: 4px 4px;
	position: relative;
}
.content table.ex td:first-child {
	width: 30%;
}
.content table.ex td:last-child {
	width: 15%;
	max-width: 15%;
}

.content table.white-border tr {
	border-bottom: 1px solid #e5e5e5;
}
.content table.white-border tr:first-child td {
	padding-top: 0;
	padding-bottom: 0;
}
.content table.white-border tr td {
	padding: 2px 7px;
	padding-top: .3em;
	padding-bottom: .3em;
}

.content table.ex.droppable td {
	width: auto;
}
.content table.ex.droppable td.title {
	font-weight: bold;
	color: #666;
	text-align: center;
}
ul.droppable-initial-list {
	padding: 0px;
  margin: 0px;
}
ul.droppable-initial-list li {
	cursor: grab;
	list-style-position: inside;
	float: left;
	width: 14% !important;
	padding: 0 15px 6px 0;
}
ul.droppable {
	min-height: 250px;
	padding: 5px;
	margin: 0px;
	border: 1px solid #e5e5e5;
	background-color: #fff;
}
ul.droppable li {
	cursor: grab;
	width: 100% !important;
	list-style-position: inside;
	padding-bottom: 3px;
}

input.exercice {
		width: 300px;
		border: 1px solid #E5E5E5;
		border-left-width: 5px;
		padding: 4px;
		color: #555;
}
input.exercice:focus {
	border-color: #427FED;
}
div.answer-exercice-container {
	position: absolute;
	top: 2px;
	right: -35px;
	z-index: 110;
}
div.answer-exercice {
	width: 30px; 
	height: 30px; 
	margin-left: 10px;
	border-radius: 50%; 
	background: #fff;
	box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
	cursor: pointer;
	opacity: 0;
	transition: opacity .25s ease;
}
div.answer-exercice:hover:after {
  content: attr(data-title);
  padding: 5px 10px;
  color: #fff;
  position: absolute;
  left: 55px;
  top: 0;
  white-space: nowrap;
  border-radius: 3px;
  background: #333;
  opacity: .7;
}
div.answer-exercice-icon {
	opacity: .3;
	transition: opacity .25s ease;
}
div.answer-exercice-icon:after {
	content: ' ';
	background: url('../img/exercice-light-me.png') no-repeat 2px 2px;
	background-size: 20px;
	width: 24px;
	height: 24px;
	position: absolute;
	z-index: 150;
	top: 3px;
	left: 13px;
}

.input-success {
	 color: #53a93f;
}
.input-error {
	 color: #D73D32;
}

verb {
	color: #427FED;
	cursor: help;
	position: relative;
}
pronom-adverb-int {
	color: #D73D32;
	cursor: help;
}
subject {
	color: #53a93f;
	cursor: help;
}
artikel {
	color: #e88800;
	cursor: help;
}
pronom {
	color: #FF73BF;
	cursor: help;
}
prepo {
	color: #9156AF;
	cursor: help;
}
adj-pos {
	color: #408694;
	cursor: help;
}

.note, .rule {
	color: rgba(255,255,255,.85);
	display: inline-block;
	margin-right: 8px;
	margin-bottom: 3px;
	padding: 2px 7px 4px;
	border: 0;
	line-height: 1.5em;
	box-shadow: 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.24);
	/*border-radius: 3px;*/
}

.rule {
	background-color: #D73D32;
}

.note {
	background-color: #427FED;
}

.note.note-white {
	background-color: #f5f5f5;
	color: #000
}

.content table td .note, .content table td .rule {
	margin-bottom: 0px;
}

.note.margin, .rule.margin {
	margin-bottom: 3px !important;
}

note, rule, todo {
	color: #fff;
	display: block;
	position: relative;
	padding: 7px;
	margin: 15px 0 20px;
	line-height: 1.5em;
	box-shadow: 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.24);
	min-height: 55px;
	line-height: 55px;
}

note {
	background-color: #427FED;
}

rule {
	background-color: #D73D32;
}

todo {
	background-color: #FEB201;
}

note span.title, rule span.title, todo span.title {
	font-weight: bold;
	color: rgba(255,255,255,.7);
	padding-right: 5px;
}

note *, rule *, todo * {
	color: #fff;
}

.content note table, .content rule table {
	margin-bottom: 0;
}

note > div, rule > div, todo > div {
	line-height: normal;
	display: inline-block;
	vertical-align: middle;
	margin-top: -4px;
}

/* RIBBON */

.ribbon {
  position: absolute;
  top: 5px;
  right: 1px;
  text-align: center
}
.div-grey .ribbon, .div-imparfait .ribbon, .div-conditionnel .ribbon, .div-modal .ribbon {
	top: 0;
  right: 0;
}
.ribbon .text, .ribbon .banner, .ribbon a {
  margin: 0px;
  padding: 0px;
  border: 0px none;
  outline: 0px none;
  font-size: 100%;
  vertical-align: baseline;
  background: none repeat scroll 0% 0% transparent;
}
.ribbon .banner {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  color: #FFF;
  display: block;
  float: right;
  position: relative;
  right: -7px;
  top: 10px;
  width: 50px;
}
.ribbon .banner:after, .ribbon .banner:before {
  content: "";
  display: block;
  position: absolute;
  height: 6px;
  width: 15px;
}
.ribbon .banner:before {
  transform: skewY(-45deg) translate(50%, 15px);
  -webkit-transform: skewY(-45deg) translate(50%, 15px);
  transform-origin: 100% center 0px;
  -webkit-transform-origin: 100% center 0px;
  top: -7px;
  left: -22px;
}
rule .ribbon .banner:after, rule .ribbon .banner:before {
  background-color: #a02016;
}
note .ribbon .banner:after, note .ribbon .banner:before {
  background-color: #2259bd;
}
todo .ribbon .banner:after, todo .ribbon .banner:before {
  background-color: #C78B01;
}
.div-grey .ribbon .banner:after, .div-grey .ribbon .banner:before {
  background-color: #2a5f1e;
}
.div-imparfait .ribbon .banner:after, .div-imparfait .ribbon .banner:before {
	background-color: #946b07;
}
.div-conditionnel .ribbon .banner:after, .div-conditionnel .ribbon .banner:before {
	background-color: #2259bd;
}
.div-modal .ribbon .banner:after, .div-modal .ribbon .banner:before {
	background-color: #A93FA0;
}
.ribbon .banner:after {
  transform: translate(100%, -100%) skewY(45deg) translateX(-58%);
  -webkit-transform: translate(100%, -100%) skewY(45deg) translateX(-58%);
  transform-origin: 0px center 0px;
  -webkit-transform-origin: 0px center 0px;
  top: 16px;
  right: -9px;
}
.ribbon .text, .ribbon .banner, .ribbon a {
  margin: 0px;
  padding: 0px;
  border: 0px none;
  outline: 0px none;
  font-size: 100%;
  vertical-align: baseline;
  background: none;
}
.ribbon .text {
  position: relative;
  z-index: 2;
  padding: 1px;
  font-size: .75em;
  font-weight: bold;
  min-height: 14px;
  line-height: 10px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ribbon-verb .text {
	color: #707070;
	text-shadow: 1px 1px 1px rgba(255,255,255, 0.5);
}
.ribbon .text:before, .ribbon .text:after {
  content: "";
  display: block;
  height: 15px;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: -1;
}
.ribbon .text:before {
  transform: translateX(-15%) skewX(-45deg);
  -webkit-transform: translateX(-15%) skewX(-45deg);
}
rule .ribbon .text:before, rule .ribbon .text:after {
  background-color: #e85d53;
}
note .ribbon .text:before, note .ribbon .text:after {
  background-color: #6b9bf3;
}
todo .ribbon .text:before, todo .ribbon .text:after {
  background-color: #FECA51;
}
.div-grey .ribbon .text:before, .div-grey .ribbon .text:after {
  background-color: #53A93F;
}
.div-imparfait .ribbon .text:before, .div-imparfait .ribbon .text:after {
	background-color: #FEB201;
}
.div-conditionnel .ribbon .text:before, .div-conditionnel .ribbon .text:after {
	background-color: #6b9bf3;
}
.div-modal .ribbon .text:before, .div-modal .ribbon .text:after {
	background-color: #A93FA0;
}
.ribbon .text:after {
  transform: translateX(15%) skewX(45deg);
  -webkit-transform: translateX(15%) skewX(45deg);
}

/* END RIBBON */

/* Verb helper */
verb div.div-grey, verb div.div-imparfait, verb div.div-conditionnel, verb div.div-modal {
	position: absolute !important;
	width: 225px !important;
	z-index: 70 !important;
	top: 40px;
	left: 50%;
	margin-left: -105px;
	border: 1px solid #d8d8d8;
	box-shadow: 0 3px 6px rgba(0,0,0,.2);
	border-radius: 4px;
	opacity: 0;
	animation: verbfadein .4s ease forwards;
	-webkit-animation: verbfadein .4s ease forwards;
}
@keyframes verbfadein {
  to {
    opacity: 1;
    top: 30px;
  }
}
@-webkit-keyframes verbfadein {
  to {
    opacity: 1;
    top: 30px;
  }
}

verb div.div-grey:before, verb div.div-imparfait:before, verb div.div-conditionnel:before, verb div.div-modal:before {
	content: "";
	border: 11px solid transparent;
	border-bottom-color: #d8d8d8;
	border-top: none;
	position: absolute;
	top: -11px;
	left: 50%;
	margin-left: -18px;
}
verb div.div-grey:after, verb div.div-imparfait:after, verb div.div-conditionnel:after, verb div.div-modal:after {
	content: "";
	border: 10px solid transparent;
	border-bottom-color: #f5f5f5;
	border-top: none;
	position: absolute;
	top: -10px;
	left: 50%;
	margin-left: -17px;
}
/* Verb helper end */

div.mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.7);
	z-index: 1500;
}

div.popup-message {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 600px;
	margin-left: -300px;
	margin-top: -100px;
	background: #fff;
	border: 1px solid #D8D8D8;
	border-bottom-width: 2px;
	box-shadow: 0px 0px 10px #000;
	border-radius: 3px;
}
div.popup-message h1 {
	margin: 1em 0 .5em;
	text-align: center;
}
div.popup-message .popup-message-content {
	padding: 15px 40px 20px;
	margin: 0px;
	text-align: justify;
}
div.popup-message .popup-message-close {
	color: #fff;
	font-size: .8em;
	border: none;
	display: block;
	margin: 3em auto 0;
	padding: 10px 22px;
	background:rgba(0, 0, 0, 0.5);
	font-family: Roboto,arial,sans-serif;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.4s ease 0s;
	-webkit-transition: all 0.4s ease 0s;
	text-shadow: 0 0 10px rgba(0,0,0,0.8);
}
div.popup-message .popup-message-close:hover {
	color: #000;
	background:rgba(0, 0, 0, 0.2);;
}

vignette {
	margin: 0 20px 6px 0;
	display: inline-block;
}

vignette:before {
	content: "";
	padding-left: 25px;
}

.star {
	float: right;
	margin-top: 2px;
}

.color {
	margin-right: 7px;
}
.color:before {
	content: "";
	padding-left: 20px;
	background-repeat: no-repeat;
	background-position: 0 3px;
}

.color.white:before { background-image: url('../img/color/waiss.png'); }
.color.grey:before { background-image: url('../img/color/gro.png'); }
.color.black:before { background-image: url('../img/color/schwaarz.png'); }
.color.pink:before { background-image: url('../img/color/rosa.png'); }
.color.red:before { background-image: url('../img/color/rout.png'); }
.color.orange:before { background-image: url('../img/color/orange.png'); }
.color.yellow:before { background-image: url('../img/color/giel.png'); }
.color.green:before { background-image: url('../img/color/greng.png'); }
.color.blue:before { background-image: url('../img/color/blo.png'); }
.color.mov:before { background-image: url('../img/color/mof.png'); }
.color.brown:before { background-image: url('../img/color/brong.png'); }

.colorpicker {
	padding: 0 10px;
	margin-right: 3px;
	cursor: pointer;
	border: 1px solid #E5E5E5;
}

.colorpicker.radius {
	border-radius: 15px;
	border: 0;
	margin-right: 4px;
	margin-left: 1px;
}

.colorpicker.white { background-color: #fff; }
.colorpicker.grey {	background-color: #bbb; }
.colorpicker.black { background-color: #000; }
.colorpicker.pink { background-color: #FE95F7; }
.colorpicker.red { background-color: #D40000; }
.colorpicker.orange { background-color: #F0B60A; }
.colorpicker.yellow { background-color: #FAFF73; }
.colorpicker.green { background-color: #27E33D; }
.colorpicker.blue { background-color: #6488FE; }
.colorpicker.mov { background-color: #772CB0; }
.colorpicker.brown { background-color: #94752E; }

.radiospan, .incorrectspan, .multipleradiospan {
	display: inline-block;
	border: 1px solid #E5E5E5;
	border-left-width: 5px;
	padding: 2px 5px;
	background-color: #fff;
	margin: 0 2px;
	cursor: pointer;
	color: #AAA;
	text-decoration: none;
}

.multipleradiospan {
	margin: 2px;
}

.radiospan.active, .multipleradiospan.active {
	border-color: #427FED;
	color: #555;
}

.incorrectspan {
	margin: 4px 2px;
}

.incorrectspan.active {
	color: #555;
	border-color: #D73D32;
	text-decoration: line-through;
}

/* Cookie won */
.cookie-won {
	position: fixed;
	z-index: 300;
	text-align: center;
	line-height: 5em;
	padding: 0 2.5em 0 1.8em;
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.24);
	left: 1em;
	background-color: #404040;
	color: #FFF;
	display: none;
	font-weight: bold;
	border-radius: 3px
}

.cookie-won span:before {
	content: '';
	background: url('../img/cookie-won.png') 0 0 no-repeat;
	padding-left: 40px;
	padding-top: 2px;
}

.cookie-won img {
	vertical-align: middle;
	padding-left: 3px;
	margin-top: -2px;
}

.cookie-won span.close-cookie-won {
	position: absolute;
	top: 5px;
	right: 5px;
	line-height: normal;
	cursor: pointer
}
.cookie-won span.close-cookie-won:before {
	background: url('../img/close-cookie-won.png') 0 0 no-repeat;
	padding-left: 16px;
	padding-top: 1px;
}

/* Modal */

div.modal-body {
	position: fixed;
	top: 55px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 500;
	background-color: rgba(0, 0, 0, .4);
	box-sizing: border-box;
}
div.modal-container {
	position: fixed;
	width: 450px;
	top: 100px;
	bottom: 0;
	background-color: #f5f5f5;
	padding: 10px 20px;
	left: 230px;
	border-right: 1px solid #e5e5e5;
	overflow-y: auto;
}

div.modal-container rule .ribbon, div.modal-container .div-grey .ribbon, div.modal-container .div-imparfait .ribbon, div.modal-container .div-conditionnel .ribbon, div.modal-container .div-modal .ribbon {
	display: none;
}

div.modal-container .div-100, div.modal-container .div-50, div.modal-container .div-33, div.modal-container .div-25 {
	width: calc(50% - 7px) !important;
}
div.modal-container .div-grey, div.modal-container .div-imparfait, div.modal-container .div-conditionnel, div.modal-container .div-modal {
	margin-bottom: 1em;
}

div.modal-container rule, div.modal-container .div-grey, div.modal-container .div-imparfait, div.modal-container .div-conditionnel, div.modal-container .div-modal {
	background-color: #fff;
	box-shadow: none;
	border: 1px solid #e0e0e0;
	border-left-width: 6px;
	border-radius: 4px
}
div.modal-container rule *, div.modal-container .div-grey *, div.modal-container .div-imparfait *, div.modal-container .div-conditionnel *, div.modal-container .div-modal * {
	color: #000 !important;
}
div.modal-container rule {
	min-height: inherit;
	line-height: inherit;
	border-left-color: #D73D32;
}
div.modal-container rule span.title {
	color: #888 !important;
}
div.modal-container span.note {
	box-shadow: none;
	border-radius: 4px;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-left-width: 6px;
	border-left-color: #427FED;
	color: #000;
}
div.modal-container .div-grey {
	border-left-color: #53A93F;
}
div.modal-container .div-imparfait {
	border-left-color: #FEB201;
}
div.modal-container .div-conditionnel {
	border-left-color: #427FED;
}
div.modal-container .div-modal {
	border-left-color: #A93FA0;
}
div.modal-container .div-grey strong, div.modal-container .div-imparfait strong, div.modal-container .div-conditionnel strong, div.modal-container .div-modal strong {
	color: #888 !important;
}
div.modal-container audio {
	position: relative;
	width: 100%;
}
div.modal-container .zuelen {
	width: 100%;
}
div.modal-container .zuelen td:first-child {
	width: 50%
}
div.modal-container .zuelen span.note {
	border-left-color: #8E22AF;
}
div.modal-container vignette {
	width: 185px;
}
div.modal-container #voc-faarwen span {
	display: inline-block;
	width: 93px;
	margin-bottom: 6px
}
div.modal-container div[id^='modal-voc-'] {
	padding: 4px 7px;
	background: #fff;
	border-radius: 4px;
	border: 1px solid #e0e0e0;
	border-left: 6px solid #FEB201;
}

div.modal-container table.grey {
	box-shadow: none;
}
div.modal-container table.grey td {
	background-color: #fff;
}
div.modal-container table.adjectiven, div.modal-container table.adjectiven tr, div.modal-container table.adjectiven td {
	display: block;
}

/* Horizontal Datum */
ol.horizontalDatum {
	position: relative;
	display: block;
	margin: 100px 0 75px;
	height: 4px;
	background: #FEB201;
}
ol.horizontalDatum:before, ol..horizontalDatum:after {
	content: "";
	position: absolute;
	top: -8px;
	display: block;
	width: 0;
	height: 0;
  border-radius: 10px;
	border: 10px solid #FEB201;
}
ol.horizontalDatum:before {
	left: -5px;
}
ol.horizontalDatum:after {
	right: -10px;
	border: 10px solid transparent;
	border-right: 0;
	border-left: 20px solid #FEB201;
  border-radius: 3px;
}
ol.horizontalDatum li {
	position: relative;
	top: -73px;
	display: inline-block;
	float: left;
	width: 140px;
	transform: rotate(-45deg);
	font-weight: bold;
	font-size: 14px;
}
ol.horizontalDatum.element6 li {
       top: -64px;
       width: 115px;
}
ol.horizontalDatum li:before {
	content: "";
	position: absolute;
	top: 3px;
	left: -29px;
	display: block;
	width: 6px;
	height: 6px;
	border: 4px solid #FEB201;
	border-radius: 10px;
	background: #eee;
}
ol.horizontalDatum .details {
	display: none;
	position: absolute;
	left: -76px;
	top: 43px;
	padding: 5px 10px 6px;
	transform: rotate(45deg);
	background: #427FED;
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.24);
	font-weight: initial;
	width: 86px;
	text-align: center;
}
ol.horizontalDatum .details:before {
	content: "";
	position: absolute;
	left: 10px;
	top: -9px;
	display: block;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-bottom-color: #427FED;
	border-top: 0;
}
ol.horizontalDatum li:hover {
	cursor: pointer;
  color: #427FED;
}
ol.horizontalDatum li:hover:before {
	top: 1px;
	left: -31px;
	width: 8px;
	height: 8px;
	border-width: 5px;
	border-color: #427FED;
}
ol.horizontalDatum li:hover .details {
	display: block;
  color: #fff;
}


/* Situation géo */
#s05-img {
	width: 100%
}
#s05-um {
	display: block; position: absolute; margin-top: -190px; right: 40px
}
#s05-zu {
	display: block; position: absolute; margin-top: -135px; left: 40%
}
#s05-am {
	display: block; position: absolute; margin-top: -75px; left: 80px
}

/* Family */
#s07-bopi {
	position: absolute; margin-top: 32px; left: 150px; text-align: center; z-index: 30
}
#s07-bomi {
	position: absolute; margin-top: 32px; right: 140px; text-align: center; z-index: 30
}
#s07-grousselteren {
	position: absolute; margin-top: 135px; left: 348px; text-align: center; z-index: 30
}
#s07-img {
	width: 100%; margin-bottom: 110px;
}
#s07-papp1 {
	position: absolute; margin-top: -400px; left: 90px; text-align: center; z-index: 30
}
#s07-mamm1 {
	position: absolute; margin-top: -400px; left: 248px; text-align: center; z-index: 30
}
#s07-koppel1 {
	position: absolute; margin-top: -426px; left: 147px; text-align: center; z-index: 30
}
#s07-papp2 {
	position: absolute; margin-top: -400px; right: 235px; text-align: center; z-index: 30
}
#s07-mamm2 {
	position: absolute; margin-top: -400px; right: 75px; text-align: center; z-index: 30
}
#s07-koppel2 {
	position: absolute; margin-top: -426px; right: 132px; text-align: center; z-index: 30
}
#s07-kanner {
	position: absolute; margin-top: -276px; left: 126px; text-align: center; z-index: 30
}
#s07-jong {
	position: absolute; margin-top: -120px; left: 89px; text-align: center; z-index: 30
}
#s07-meedchen1 {
	position: absolute; margin-top: -120px; left: 241px; text-align: center; z-index: 30
}
#s07-meedchen2 {
	position: absolute; margin-top: -120px; right: 153px; text-align: center; z-index: 30
}

/* Spinner */

.spinner {
  margin: 1em 0 0 0;
  width: 50px;
  height: 30px;
  text-align: center;
  font-size: 10px;
  position: absolute;
  left: 50%;
  margin-left: -25px;
  opacity: .8;
}

.spinner > div {
  background-color: #C8C8C8;
  height: 100%;
  width: 6px;
  margin: 0px 3px 0px 0px;
  display: inline-block;
  
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

.kalenner:before {	background: url("../img/vocabulary/kalenner.gif") no-repeat 0 0; }
#draggable-genre-kalenner {	list-style-image: url("../img/vocabulary/kalenner.gif") }
.desch:before {	background: url("../img/vocabulary/desch.png") no-repeat 0 0; }
#draggable-genre-desch {	list-style-image: url("../img/vocabulary/desch.png") }
.enauto:before { background: url("../img/vocabulary/auto.png") no-repeat 0 0; }
#draggable-genre-auto {	list-style-image: url("../img/vocabulary/auto.png") }
.bic:before { background: url("../img/vocabulary/bic.png") no-repeat 0 0; }
#draggable-genre-bic {	list-style-image: url("../img/vocabulary/bic.png") }
.schlessel:before { background: url("../img/vocabulary/schlessel.png") no-repeat 0 0; }
#draggable-genre-schlessel {	list-style-image: url("../img/vocabulary/schlessel.png") }
.blaisteft:before { background: url("../img/vocabulary/blaisteft.png") no-repeat 0 0; }
#draggable-genre-blaisteft {	list-style-image: url("../img/vocabulary/blaisteft.png") }
.luucht:before { background: url("../img/vocabulary/luucht.png") no-repeat 0 0; }
#draggable-genre-luucht {	list-style-image: url("../img/vocabulary/luucht.png") }
.schoul:before { background: url("../img/vocabulary/schoul.png") no-repeat 0 0; }
#draggable-genre-schoul {	list-style-image: url("../img/vocabulary/schoul.png") }
.fenster:before { background: url("../img/vocabulary/fenster.png") no-repeat 0 0; }
#draggable-genre-fenster {	list-style-image: url("../img/vocabulary/fenster.png") }
.planz:before { background: url("../img/vocabulary/planz.png") no-repeat 0 0; }
#draggable-genre-planz {	list-style-image: url("../img/vocabulary/planz.png") }
.tas:before { background: url("../img/vocabulary/tas.png") no-repeat 0 0; }
#draggable-genre-tas {	list-style-image: url("../img/vocabulary/tas.png") }
.dier:before { background: url("../img/vocabulary/dier.png") no-repeat 0 0; }
#draggable-genre-dier {	list-style-image: url("../img/vocabulary/dier.png") }
.bild:before { background: url("../img/vocabulary/bild.gif") no-repeat 0 0; }
#draggable-genre-bild {	list-style-image: url("../img/vocabulary/bild.gif") }
.buch:before { background: url("../img/vocabulary/buch.png") no-repeat 0 0; }
#draggable-genre-buch {	list-style-image: url("../img/vocabulary/buch.png") }
.regal:before { background: url("../img/vocabulary/regal.gif") no-repeat 0 0; }
#draggable-genre-regal {	list-style-image: url("../img/vocabulary/regal.gif") }
.gebai:before { background: url("../img/vocabulary/gebai.png") no-repeat 0 0; }
#draggable-genre-gebai {	list-style-image: url("../img/vocabulary/gebai.png") }
.heft:before { background: url("../img/vocabulary/heft.png") no-repeat 0 0; }
#draggable-genre-heft {	list-style-image: url("../img/vocabulary/heft.png") }
.blat:before { background: url("../img/vocabulary/blat.png") no-repeat 0 0; }
#draggable-genre-blat {	list-style-image: url("../img/vocabulary/blat.png") }
.stull:before { background: url("../img/vocabulary/stull.png") no-repeat 0 0; }
#draggable-genre-stull {	list-style-image: url("../img/vocabulary/stull.png") }
.mapp:before { background: url("../img/vocabulary/mapp.png") no-repeat 0 0; }
#draggable-genre-mapp {	list-style-image: url("../img/vocabulary/mapp.png") }
.flasch:before { background: url("../img/vocabulary/flasch.png") no-repeat 0 0; }
#draggable-genre-flasch {	list-style-image: url("../img/vocabulary/flasch.png") }
.cd:before { background: url("../img/vocabulary/cd.png") no-repeat 0 0; }
#draggable-genre-cd {	list-style-image: url("../img/vocabulary/cd.png") }
.kreditkaart:before { background: url("../img/vocabulary/kreditkaart.jpg") no-repeat 0 0; }
#draggable-genre-kreditkaart {	list-style-image: url("../img/vocabulary/kreditkaart.jpg") }
.auer:before { background: url("../img/vocabulary/auer.gif") no-repeat 0 0; }
#draggable-genre-auer {	list-style-image: url("../img/vocabulary/auer.gif") }
.enveloppe:before { background: url("../img/vocabulary/enveloppe.png") no-repeat 0 0; }
#draggable-genre-enveloppe {	list-style-image: url("../img/vocabulary/enveloppe.png") }
.maus:before { background: url("../img/vocabulary/maus.png") no-repeat 0 0; }
#draggable-genre-maus {	list-style-image: url("../img/vocabulary/maus.png") }
.telee:before { background: url("../img/vocabulary/telee.png") no-repeat 0 0; }
#draggable-genre-telee {	list-style-image: url("../img/vocabulary/telee.png") }
.brell:before { background: url("../img/vocabulary/brell.png") no-repeat 0 0; }
#draggable-genre-brell {	list-style-image: url("../img/vocabulary/brell.png") }
.computer:before { background: url("../img/vocabulary/computer.png") no-repeat 0 0; }
#draggable-genre-computer {	list-style-image: url("../img/vocabulary/computer.png") }
.telefon:before { background: url("../img/vocabulary/telephon.png") no-repeat 0 0; }
#draggable-genre-telefon {	list-style-image: url("../img/vocabulary/telephon.png") }
.velo:before { background: url("../img/vocabulary/velo.png") no-repeat 0 0; }
#draggable-genre-velo {	list-style-image: url("../img/vocabulary/velo.png") }
.fliger:before { background: url("../img/vocabulary/fliger.png") no-repeat 0 0; }
#draggable-genre-fliger {	list-style-image: url("../img/vocabulary/fliger.png") }
.schaf:before { background: url("../img/vocabulary/schaf.jpg") no-repeat 0 0; }
#draggable-genre-schaf {	list-style-image: url("../img/vocabulary/schaf.jpg") }
.glas:before { background: url("../img/vocabulary/glas.png") no-repeat 0 0; }
#draggable-genre-glas {	list-style-image: url("../img/vocabulary/glas.png") }
.boot:before { background: url("../img/vocabulary/boot.jpg") no-repeat 0 0; }
#draggable-genre-boot {	list-style-image: url("../img/vocabulary/boot.jpg") }
.wecker:before { background: url("../img/vocabulary/wecker.png") no-repeat 0 0; }
#draggable-genre-wecker {	list-style-image: url("../img/vocabulary/wecker.png") }
.lineal:before { background: url("../img/vocabulary/lineal.png") no-repeat 0 0; }
#draggable-genre-lineal {	list-style-image: url("../img/vocabulary/lineal.png") }
.konscht:before { background: url("../img/vocabulary/konscht.png") no-repeat 0 0; }
#draggable-genre-konscht {	list-style-image: url("../img/vocabulary/konscht.png") }
.stad:before { background: url("../img/vocabulary/stad.png") no-repeat 0 0; }
#draggable-genre-stad {	list-style-image: url("../img/vocabulary/stad.png") }
.duerf:before { background: url("../img/vocabulary/duerf.png") no-repeat 0 0; }
#draggable-genre-duerf {	list-style-image: url("../img/vocabulary/duerf.png") }
.beruff:before { background: url("../img/vocabulary/beruff.png") no-repeat 0 0; }
#draggable-genre-beruff {	list-style-image: url("../img/vocabulary/beruff.png") }
.deier:before { background: url("../img/vocabulary/deier.png") no-repeat 0 0; }
#draggable-genre-deier {	list-style-image: url("../img/vocabulary/deier.png") }
.klinik:before { background: url("../img/vocabulary/klinik.jpg") no-repeat 0 0; }
#draggable-genre-klinik {	list-style-image: url("../img/vocabulary/klinik.jpg") }
.spidol:before { background: url("../img/vocabulary/spidol.jpg") no-repeat 0 0; }
#draggable-genre-spidol {	list-style-image: url("../img/vocabulary/spidol.jpg") }
.aarbechter:before { background: url("../img/vocabulary/aarbechter.png") no-repeat 0 0; }
#draggable-genre-aarbechter {	list-style-image: url("../img/vocabulary/aarbechter.png") }
.meedchen:before { background: url("../img/vocabulary/meedchen.png") no-repeat 0 0; }
#draggable-genre-meedchen {	list-style-image: url("../img/vocabulary/meedchen.png") }
.jong:before { background: url("../img/vocabulary/jong.png") no-repeat 0 0; }
#draggable-genre-jong {	list-style-image: url("../img/vocabulary/jong.png") }
.kand:before { background: url("../img/vocabulary/kand.png") no-repeat 0 0; }
#draggable-genre-kand {	list-style-image: url("../img/vocabulary/kand.png") }
.kanengchen:before { background: url("../img/vocabulary/kanengchen.png") no-repeat 0 0; }
#draggable-genre-kanengchen {	list-style-image: url("../img/vocabulary/kanengchen.png") }
.handschen:before { background: url("../img/vocabulary/handschen.png") no-repeat 0 0; }
#draggable-genre-handschen {	list-style-image: url("../img/vocabulary/handschen.png") }
.handsch:before { background: url("../img/vocabulary/handsch.png") no-repeat 0 0; }
#draggable-genre-handsch {	list-style-image: url("../img/vocabulary/handsch.png") }
.hummer:before { background: url("../img/vocabulary/hummer.png") no-repeat 0 0; }
#draggable-genre-hummer {	list-style-image: url("../img/vocabulary/hummer.png") }
.kamp:before { background: url("../img/vocabulary/kamp.png") no-repeat 0 0; }
#draggable-genre-kamp {	list-style-image: url("../img/vocabulary/kamp.png") }
.drecker:before { background: url("../img/vocabulary/drecker.png") no-repeat 0 0; }
#draggable-genre-drecker {	list-style-image: url("../img/vocabulary/drecker.png") }
.zeitung:before { background: url("../img/vocabulary/zeitung.png") no-repeat 0 0; }
#draggable-genre-zeitung {	list-style-image: url("../img/vocabulary/zeitung.png") }
.foto:before { background: url("../img/vocabulary/foto.png") no-repeat 0 0; }
#draggable-genre-foto {	list-style-image: url("../img/vocabulary/foto.png") }
.handy:before { background: url("../img/vocabulary/handy.png") no-repeat 0 0; }
#draggable-genre-handy {	list-style-image: url("../img/vocabulary/handy.png") }
.tirang:before { background: url("../img/vocabulary/tirang.png") no-repeat 0 0; }
#draggable-genre-tirang {	list-style-image: url("../img/vocabulary/tirang.png") }
.scheier:before { background: url("../img/vocabulary/scheier.png") no-repeat 0 0; }
#draggable-genre-scheier {	list-style-image: url("../img/vocabulary/scheier.png") }
.kaffismaschinn:before { background: url("../img/vocabulary/kaffismaschinn.png") no-repeat 0 0; }
#draggable-genre-kaffismaschinn {	list-style-image: url("../img/vocabulary/kaffismaschinn.png") }
.blummenstack:before { background: url("../img/vocabulary/blummenstack.png") no-repeat 0 0; }
#draggable-genre-blummenstack {	list-style-image: url("../img/vocabulary/blummenstack.png") }
.hutt:before { background: url("../img/vocabulary/hutt.png") no-repeat 0 0; }
#draggable-genre-hutt {	list-style-image: url("../img/vocabulary/hutt.png") }
.drecksketscht:before { background: url("../img/vocabulary/drecksketscht.png") no-repeat 0 0; }
#draggable-genre-drecksketscht {	list-style-image: url("../img/vocabulary/drecksketscht.png") }
.prabbeli:before { background: url("../img/vocabulary/prabbeli.png") no-repeat 0 0; }
#draggable-genre-prabbeli {	list-style-image: url("../img/vocabulary/prabbeli.png") }
.pabieirkuerf:before { background: url("../img/vocabulary/pabieirkuerf.png") no-repeat 0 0; }
#draggable-genre-pabieirkuerf {	list-style-image: url("../img/vocabulary/pabieirkuerf.png") }
.feiss:before { background: url("../img/vocabulary/feiss.png") no-repeat 0 0; }
#draggable-genre-feiss {	list-style-image: url("../img/vocabulary/feiss.png") }
.leit:before { background: url("../img/vocabulary/leit.png") no-repeat 0 0; }
#draggable-genre-leit {	list-style-image: url("../img/vocabulary/leit.png") }
.lenks:before { background: url("../img/vocabulary/lenks.png") no-repeat 0 0; }
#draggable-genre-lenks {	list-style-image: url("../img/vocabulary/lenks.png") }
.nues:before { background: url("../img/vocabulary/nues.png") no-repeat 0 0; }
#draggable-genre-nues {	list-style-image: url("../img/vocabulary/nues.png") }
.plover:before { background: url("../img/vocabulary/plover.png") no-repeat 0 0; }
#draggable-genre-plover {	list-style-image: url("../img/vocabulary/plover.png") }
.riets:before { background: url("../img/vocabulary/riets.png") no-repeat 0 0; }
#draggable-genre-riets {	list-style-image: url("../img/vocabulary/riets.png") }
.schong:before { background: url("../img/vocabulary/schong.png") no-repeat 0 0; }
#draggable-genre-schong {	list-style-image: url("../img/vocabulary/schong.png") }
.tirangpl:before { background: url("../img/vocabulary/tirangpl.png") no-repeat 0 0; }
#draggable-genre-tirangpl {	list-style-image: url("../img/vocabulary/tirangpl.png") }
.tafel:before { background: url("../img/vocabulary/tafel.png") no-repeat 0 0; }
#draggable-genre-tafel {	list-style-image: url("../img/vocabulary/tafel.png") }
.zelt:before { background: url("../img/vocabulary/zelt.png") no-repeat 0 0; }
#draggable-genre-zelt {	list-style-image: url("../img/vocabulary/zelt.png") }

@media only screen and (max-width:1175px) {
	div#menu-detached {
		display: none !important;
	}
}

@media only screen and (max-width:1050px) {
	div.answer-exercice:hover:after {
		left: auto;
		right: 45px;
	}
	
	#footer {
		display: none;
	}
}

@media only screen and (max-width:950px) {
	header .logo-mini {
		display: none !important;
	}
	
	.howmuchstars {
		display: none !important;
	}
	
	header div#menu {
		left: auto;
		right: 25px;
	}
	body.detached header #menu {
    display: block;
	}
}

@media only screen and (max-width:860px) {
	div.answer-exercice-container {
		display: none;
	}
}