.hg-input
{
	max-width: 100px;
}

.eingabefeld 
{
    width: 180px;	
}

.sortable
{
	margin-bottom: 20px;
}

.eingabezeile
{
	background: #fff;
    border: 2px dotted #006398;
	padding: 10px;
	margin: 5px;
	cursor: move;
}

.eingabezeile p
{   
    margin-bottom: 0;
} 

.hg-zeilerichtig
{
	background: #e3efaf;
    border: 2px solid #393;
}

.hg-zeilefalsch
{
	background: #ffe8e8;
    border: 2px solid #ff0000;
}

/*
* Eine Class hätte gereicht, wenn Grafik und Tabelle immer 48% groß sein sollen.
* Mit zwei getrennten Klassen hat man nun aber die Möglichkeit, die Breite der Grafik
* und dem Sortable je nach Bildschirmbreite mit mediaquery anzupassen. Und das kann
* nun hier an dieser Stelle erfolgen.
*/
.sortable-rechts, .grafik-links
{
	display: inline-block;
	width: 48%;
	vertical-align: middle;
}

/*
*	Wir haben über 90 IÜs. Damit wir bei Änderungen des Layouts nicht in jeder einzelnen Übung anpassen müssen,
*   ist es wichtig, dass das HTML-Grundgerüst bei allen Übungen gleich ist - insbesondere, wenn IMA die IÜs
*	später mit einem CMS in die Webseite einsetzen.
*	Änderungen am Layout müssen bei den vielen IÜs jetzt nur in der main-css ausgeführt werden. Es ist dann
* 	direkt für alle IÜs gemacht. 
*
*/