/* Projekt    : MeinOnlineSpiel
   Komponente : GameBase
   Datei      : MeinOnlineSpiel.css
   Inhalt     : Stylesheet für die Anzeige der Website "MeinOnlineSpiel"

     15.08.2013  Gernot Daum  Beginn der Implementierung
     20.01.2015  Gernot Daum  Spezialformatierung: Bilder in gemischten Größen
*/

/* Browser Reset */
* {margin: 0px; padding: 0px; border: 0px}


/* Allgemeine Festlegungen */

html {font-size: 62.5%} /* "Normierungstrick" */

/* -- Überschriften */
h1, h2, h3, h4, h5, h6 {
	text-align: center;
	font-family: "Century Gothic", sans-serif;
	margin: 0em 0em 0.5em 0em;
	color: #2D2E32;
	clear:both;
}

/* -- Textformatierungen */
div.ind1 p {margin-left: 1em; display: list-item}
div.ind2{margin-left: 5em; clear: both}
span.bulletpoint{display: list-item; margin-left: 1em}
textarea {
	width: 98%;
	margin: 1%;
	background: #D4F5D8
}

body {
	/* text-align: center; */
	font: 1.2em/1.8em Verdana, sans-serif;
}

/* Hintergrundfarben */
div#wrapper, div#nav, div#footer, form#footer, div#maintext, div#menu,
div#pages, div#scrollitems
{background: #FFFDEA}
div#wrapper {
	margin: 0 auto;
	background: -webkit-linear-gradient(top, #FFFDEA, #EDA6C4);
	background: -moz-linear-gradient(top, #FFFDEA, #EDA6C4);
}


/* Fehlerbehandlung */
div.error {
	margin: 2em; padding: 1.5em;
	background: #FFD4D4;
	border: 0.3em solid #FF0000;
	font-size: 1.6em;
	text-align: center;
	float: left
}
/* div.usererror {clear: both; font-size: 1.4em; color: #FF0000} */

/* -- Äußerer Rahmen */
div#wrapper {
	max-width: 90em;
	color: #2D2E32;
}

/* -- Seitenkopf */
div#logoheader{
	width : 96%;
	padding-top: 0.5em; padding-left: 0.5em;
}
div#logo, div#logotext {float: left}
div#logo {width: 15%}
div#logo img {width: 75%}

/* Navigationsrahmen */
div#nav, div#footer, form#footer{
	margin: 0.6em;
	padding: 0.8em 0em;
	text-align: center;
	overflow: auto
}
div#nav{float: left; margin: 0em; padding: 0.6em}
div#footer, form#footer{
	clear : both;
	width: 60%;
	padding-left: 13%;
	border-bottom: 0.4em solid #EDA6C4
}

div#nav li, div#footer li, form#footer li  {
	display: inline;
	padding: 0.2em 0.6em;
}

div#nav li.navS a, div#menu li a.menu1S, div#pages a.pageS
{ background: #FFFDEA;
  border: 0.3em solid #5D6D84
}

div#nav a:hover, div#menu a:hover, div#pages a.page:hover, div#scrollitems a:hover
{border: 0.3em solid #5D6D84}

div.SeitenNavigation p {text-align: center}

/* -- Innerer Rahmen */
div#wrap_content {clear:both; overflow: auto}

/* -- Seitenmenü */
div#menu {
	clear: both; float: left;
	width: 12%;
	margin-left: 0.6em; margin-bottom: 0.6em;
	padding: 0.6em 0.4em
}
div#menu ul {list-style-type: none; font-weight: bold; line-height: 1.5em}
div#menu li a.menu1, div#menu li a.menu2 {
	text-decoration: none;
	font-weight: bold;
	/* padding-left: 0.2em; padding-right: 0.2em;
	padding-bottom: 0.1em; */
}


/* Zentralbereich  */

div#maintext {
	width: 82%;
	float: left;
	margin: 0.6em; margin-top: 0em; padding: 1em;
	overflow: auto
}

div#maintext p {margin-bottom: 1.2em}

div#pages, div#scrollitems {
	margin-left: 10%;
	display: inline-block;
	text-align: center
}
div#scrollitems {margin-left: 45%}

/* Einstellungen für bestimmte Elmente */

/* -- Überlagerungen */
.overlay-container {position: relative}
.overlay-item {
  position: absolute;
  top: 200px;
  left: 0
}
.overlay-item > * {
	display: block ! important;  
  width: 90%;
  margin-left: auto;
  margin-right: auto
}
.overlay-item.pop-up {
	--js-height: 50px;
	overflow: hidden;
	height: 0;
  transition: height 1s;
}
.overlay-container:hover .overlay-item.pop-up {
	height: var(--js-height)
}

/* -- Bilder */
img {margin: 0.2em}

img.floatleftS {float: left}
img.floatleft, img.floatleft0, img.floatleftu, img.floatleft2, img.floatleftu2,
img.floatleft3, img.floatleft3u, img.floatleft4, img.floatleft4u,
img.floatleft5, img.floatleft5u,
img.floatleft10, img.floatleft10u, img.floatleft11, img.floatleft11u,
img.floatleft12, img.floatleft12u
{float: left; clear: both; margin-right: 0.6em}
img.floatright, img.floatrightu, img.floatright2, img.floatrightu2,
img.floatright3, img.floatrightu3, img.floatright4, img.floatrighu4,
img.floatright5, img.floatrightu5
{float: right; clear: both; margin-left: 0.6em}
img.floatleftu, img.floatnoneu, img.floatrightu {width: 6em}
div.Zweidrittelseite-sideways img, div.Drittelseite img {margin-left: 5%}

/* ---- Standard Bild Größen */
img.floatnoneFill, img.floatnoneuFill, input.floatnoneFill, input.floatnoneuFill 
{width: 99%; margin: 1%}
.floatnoneFill8, .floatnoneuFill8 {width: 80%; margin: 1% 10%}
.floatnoneFill6, .floatnoneuFill6 img {width: 60%; margin: 1% 20%}
.floatnoneFill4, .floatnoneuFill4 img {width: 40%; margin: 1% 30%}
img.floatnoneS, img.floatleftS {width: 8em}
img.floatnoneuS {width: 6em}
img.floatnone, img.floatright, img.floatleft{width: 12em}
img.floatnone2, img.floatright2, img.floatleft2{width: 18em}
img.floatnone3, img.floatright3, img.floatleft3{width: 27em}
img.floatnone4, img.floatright4, img.floatleft4{width: 37em}
img.floatnone5, img.floatright5, img.floatleft5{width: 49em}
img.floatnone6, img.floatright6, img.floatleft6{width: 62em}

img.floatnoneu, img.floatrightu, img.floatleftu{width: 9em}
img.floatnoneu2, img.floatrightu2, img.floatleftu2{width: 13.5em}
img.floatnoneu3, img.floatrightu3, img.floatleftu3{width: 20.75em}
img.floatnoneu4, img.floatrightu4, img.floatleftu4{width: 27.75em}
img.floatnoneu5, img.floatrightu5, img.floatleftu5{width: 37.75em}
img.floatnoneu6, img.floatrightu6, img.floatleftu6{width: 46.5em}

/* ---- Spezial Bild Größen */
img.floatleft10 {
	width: 30em;
	margin-top: -1em;
	margin-left: 4em; margin-right: 2em
}

img.symw1s3 {
	width: 2.2em; margin-right: 1.5em;
  margin-top: 0.5em; margin-bottom: 0.3em
}

/* Sondereinstellungen für bestimmte Seiten */
body#Mosie_erklärt img, body#Mosie_explains img {border: 0.1em solid #5D2C2F}

/* -- Text neben Bildern */
span.floatleft p {clear: none}
div.newline{clear:both}

/* -- Textkästen */
div.Halbseite, div.HalbseiteLinks, div.Halbseite-sideways, div.HalbseiteRechts,
div.Halbbox,
div.Drittelseite, div.Zweidrittelseite, div.Drittelbox, div.Zweidrittelbox, 
div.Zweidrittelseite-sideways, 
div.Dreisiebtelseite, div.Viersiebtelseite, div.Vollseite
{margin-right: 1%;
 float: left;
}
div.Halbseite, div.Halbbox, div.HalbseiteLinks, div.HalbseiteRechts, div.Halbseite-sideways
 {width: 45.5%}
div.Drittelseite, div.Drittelbox, div.Drittelseite-sideways{width: 30%}
div.Zweidrittelseite, div.Zweidrittelbox{width: 64%}
div.Dreisiebtelseite{width: 39%}
div.Viersiebtelseite{width: 52%; margin-top: 6.5%}
/*
div.Halbseite div.newline, div.HalbseiteLinks div.newline,
div.Zweidrittelseite div.newline, div.HalbseiteRechts div.newline
{clear:none}
*/
div.HervorgehobenRot, div.HervorgehobenGrün, div#LinkBox, div.usererror, div.warning{
  display: inline-block;
  border: 0.3em solid #A6C0E1; padding: 0.3em;
  -webkit-box-shadow: inset 0.2em 0.2em 0.2em #efefef;
	-moz-box-shadow: inset 0.2em 0.2em 0.2em #efefef;
	box-shadow: inset 0.2em 0.2em 0.2em #efefef;
	/*
	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	border-radius: 1em;
	*/
	background: #EDA6C4
}
div.HervorgehobenGrün, div#LinkBox{background: #D4F5D8}
div.usererror{font-size: 1.1em; font-weight: bold}
div.warning{background: #FFFF7F; font-size: 1.1em; font-weight: bold}
div.Zentrieren p {text-align: center}

/* Tabellen */
th {
	font-size: 1.3em; font-weight: bold;
	padding-left: 0.5em; padding-right: 0.5em
}
td {
	padding-left: 1em;
/*	background: #ffffff; 11.04.14: Konflikt mit Tabellen in Spielen */
	font-weight: bold
}
td.amount, td.amountsum {
	font-family: "Courier New";
	text-align: right;
	padding-right: 0.5em
}
td.amountsum {
	font-weight: bold
}
body#Mosie_erklärt td, body#Mosie_explains td{font-weight: normal}
body#Mosie_erklärt tr.even td, body#Mosie_explains tr.even td
{background: #A6C0E1}
tr.green td{background: #D4F5D8}
tr.red td{background: #EDA6C4}

/* -- Buttons und Pseudo Buttons */
/* ---- normales Erscheinungsbild */
div#nav a, div#menu a, div#maintext a, div#footer a, form#footer button,
button.btstyle1, button.Doit1, button.Doit2, button.btstyle2, button.btstyle3,
label.btstyle1, label.btstyle2, label.btstyle3,
button.FormSubmitL, button.FormSubmitR,
button.outstanding,
button.SelectButtonT, button.ShowButtonT,  button.DeleteButtonT,
button.ExplainButtonT, div#LinkBox div#LinkBox a.ExtLink,
div#pages a, div#scrollitems a{
	font-size: 1.3em;
	margin: 0.2em; padding: 0.3em;
	background: #EDA6C4; color: #5D2C2F;
	text-decoration: none;
	float: left;
	border: 0.3em solid #A6C0E1;
  -webkit-box-shadow: inset 0.2em 0.2em 0.2em #efefef;
	-moz-box-shadow: inset 0.2em 0.2em 0.2em #efefef;
	box-shadow: inset 0.2em 0.2em 0.2em #efefef;
	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	border-radius: 1em;
  cursor: pointer
}

div#maintext a.ExplainButton{
	background: #D4F5D8;
	display: inline-block;
	margin: 0.5em 0em;
}
div#maintext a.PayPal {
	border: none;
	background: transparent;
	border-radius: 0em;
	box-shadow: none;
}

div#menu a{font-size: 1.1em}
div#pages a, div#scrollitems a, div#footer a, form#footer button
{font-size: 1em; margin: 0.0em 0.1em; padding: 0em 0.2em}
button.btstyle1, button.Doit1, button.Doit2, button.btstyle2, button.btstyle3,
button.FormSubmitL, button.FormSubmitR, button.outstanding,
button.SelectButtonT,  button.ShowButtonT, button.ExplainButtonT,
button.DeleteButtonT, div#maintext a{
	font-size: 1em;
	margin: 0.2em; padding: 0.3em;
	line-height: normal;
	background: #A6C0E1; color: #000000
}
button.DeleteButtonT {margin: 0.1em; padding: 0.2em}
button.FormSubmitL{margin-left: 1em}
button.FormSubmitR{float: right; margin-right: 1em}
button.Doit2, button.btstyle2, button.ExplainButtonT {background: #D4F5D8}
button.btstyle3, button.DeleteButtonT {background: #EDA6C4}
button.outstanding{padding: 0.6em; background: #FF557F}
div#LinkBox a {margin: 0.4em 0em; display: block; background: #FFFF7F}
form#navigation button {margin-left: 47%}
form#footer button{line-height: 2em}
form#footer button.Selected{; background: #FFFDEA}

div#maintext a{float: none}

button img {background: #FFFFFF}

/* ---- Effekte beim Überrollen nit der Maus */
div#logo img:hover {opacity: 0.80}

button.btstyle1:hover, button.btstyle2:hover, button.btstyle3:hover,
button.Doit1:hover, button.Doit2:hover,
button.FormSubmitL:hover, button.FormSubmitR:hover, button.outstanding:hover,
button.ShowButtonT:hover, div#maintext a:hover
{border: 0.3em solid #5D6D84}
div#maintext a.PayPal:hover {
	border: none;
	box-shadow: none;
}

div#nav a:active, div#menu a:active, div#maintext a:active
{	background: #D4F5D8;
	-webkit-box-shadow: inset 0.2em 0.2em 0.2em silver;
	-moz-box-shadow: inset 0.2em 0.2em 0.2em silver;
	box-shadow: inset 0.2em 0.2em 0.2em silver}

/* -- Sonstige Steuerelemente */
.chkradio{
	float: left;
	margin-right: 1%; margin-bottom: 1%; padding: 0.5%;
	font-size: 1.2em; font-weight: bold;
	background: #FFFF7F;
	border: 0.3em solid #A6C0E1;
	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	border-radius: 1em;
}


/* -- Bestellprozess */

form#ProductSelectionTable td, form#ExtraSelectionTable td{
	padding-right: 1em;
}

form.fileupload {float: left; width: 74em}
form.fileupload div.warning /* Überlagerung verhindern: */
  {display: inline-block}
div.Uploader, div.UploadElm, div.UploadElmCell
  {float: left; position:relative; width: 60em}
div.UploadElmCell {width: 100%}
div.UploadElm{
	margin-left: 2%; margin-Bottom: 0.4%;
	width: 42em
}
div.Uploader button.btstyle1, div.UploadElm button.btstyle1 {float: left; width: 8em}
div.UploadGadget {
	float: left;
	position: absolute;
	top: 0px;	left: 16.2em;
	z-index: 1;
}
td div.UploadGadget {left: 0}
div.UploadElm div.UploadGadget {left: 10.2em}
div.UploadGadget input{
	float: left;
	color: #000000; background: #D4F5D8;
	margin: 0.3em;
	width: 15em; height: 1.8em
}
div.UploadElm div.UploadGadget input {width: 13.5em}
div.UploadGadget button.btstyle1,
div.UploadGadget label.btstyle1 {
	font-size: 1em;
	margin: 0.2em; padding: 0.3em;
	line-height: normal;
	width: 8em; float: left;
	background: #A6C0E1; color: #000000
}
div.lblfileupload {float: left; margin-top: 0.4em; width: 16em}
/* Mittelteil */
input.filevisible, input.filehidden, div.UploadGadget
{float: left; width: 26em}
div.UploadElm input.filevisible, div.UploadElm input.filehidden,
div.UploadElm div.UploadGadget
{float: left; width: 26em}
input.filehidden {
	position: relative;
	text-align: right;
	-moz-opacity:0 ;
	filter:alpha(opacity: 0);
	opacity: 0;
	z-index: 2;
	height: 2.6em;
	cursor: pointer
}

/* Tabellen mit Vorschaubildern */
div#PictureTab, div#PictureTab1, div#PictureTab2
{float: left; margin: 0.1em; border: 0.1em solid #A6C0E1}
div#PictureTab {width: 99%}
div#PictureTab1, div#PictureTab2 {width: 49%}
div#PictureTab p.MedT, div#PictureTab p.Med, div#PictureTab p.Medu,
div#PictureTab1 p.MedT, div#PictureTab1 p.Med, div#PictureTab1 p.Medu,
div#PictureTab2 p.MedT, div#PictureTab2 p.Med, div#PictureTab2 p.Medu,
form#PicUpload p.Med, p.Medm, p.Medmu {
   margin-left: 1%;
   float: left;
}
p.T {width: 16em}
p.Q {width: 10em; height: 8.5em}
p.H {width: 8em; height: 8.5em}
p.Q input.checkbox {height: 3em}
p.H input.checkbox {height: 7em}
/* Spezialformatierung: Bilder in gemischten Größen */
p.Medm, p.Medmu {
	position: relative; 
	height: 10em; width: 10em;
	margin-bottom: 0em;
}
p.Medm img {position: absolute; top: 12%; left: 10%; width: 88%}
p.Medmu img {position: absolute; left: 25%; width: 66%}
p.Medm input.checkbox  {position: absolute; top: 44%; left: 0%}
p.Medmu input.checkbox {position: absolute; top: 44%; left: 15%}

img.Medium {width: 8em}
img.Mediumu {width: 6em}

form#GameControl img {margin-left: 1%; margin-bottom: 1em; width: 18%}
form#GameControl p {float: left; width: 78%}

/* -- Spielelemente */
/* body#Testspiele table#table1 {margin: 0.6em; clear:both} */
/* table#table1 {margin: 0.6em; clear:both} */

/*       Memoryspiele */
/* Einstellungen für bestimmte Spiele der Hauptseite (statt "Customer.css" */
div#Beanielings, div#Vogelspiel, div#Tasmanien, div#Chartlings, div#Rindviecher 
{float : left; margin-left: 1em; width: 84%}
div#Memory-Tryout{width: 99%}
div#Beanielings {background: #D1EDB2 url(21_Icons/Beanielings.jpg)}
div#Vogelspiel  {background: #D1EDB2 url(21_Icons/Vogelspiel.jpg)}
div#Tasmanien   {background: #D1EDB2 url(21_Icons/Tasmanien.jpg)}
div#Chartlings  {background: #D1EDB2 url(21_Icons/Chartlings.jpg)}
div#Rindviecher {background: #D1EDB2 url(21_Icons/Rindviecher.jpg)}
div#Rindviecher h2 {background: #D1EDB2}

/* Spielbereiche */
div#score, table#table1 caption, table#table2 caption{
	background: #F9F0D1;	color: #040678;
	font-size: 1em; font-weight: bold;
	margin: 0.2em 0em;
}

div#Memory {float : left; margin-left: 1em}
div#GameArea {clear: both}
div#GameArea div{float: left} /* Float für die Spielkarten */ 
div#GameArea button{position: relative; background: transparent}

/* ---- Größenverhältnisse der Kartentabellen */
/*
div#Beanielings table, div#Vogelspiel table,
div#Tasmanien table, div#Chartlings table {width: 80%}
div#Rindviecher table,
div#Memory table{width: 98%}, div#Memory-Tryout table{width: 98%}
div#Beanielings tbody button, div#Vogelspiel tbody button,
div#Tasmanien tbody button, div#Chartlings tbody button {width: 97%}

*/
 button.cards1, button.cards2, button.cards3, button.cards4
{background: transparent;  cursor: pointer }
button#IgnoreMe{width: 0em; height:0em; float: left}

/* Kartenbilder */
/*
div#Beanielings img, div#Vogelspiel img, div#Tasmanien img,
div#Chartlings img, div#Rindviecher img,
*/ 
div#GameArea img {width: 92%}

/* Größenklassen für die Kartencontainer */
/* Größe "S" */
div.LandscapeS, button.LandscapeS, div.PassepartoutS, button.PassepartoutS 
{width: 10em}
div.PassepartoutS, button.PassepartoutS 
{height: 10em; vertical-align: middle; text-align:center}
div.PortraitS, button.PortraitS{width: 7.5em}
/* Größe "M" */
div.LandscapeM, button.LandscapeM, div.PassepartoutM, button.PassepartoutM 
{width: 12em}
div.PassepartoutM, button.PassepartoutM 
{height: 12em; vertical-align: middle; text-align:center}
div.PortraitM, button.PortraitM {width: 9em}
button.PassepartoutM img.cards1u, button.PassepartoutM img.cards2u, 
button.PassepartoutM img.cards3u, button.PassepartoutM img.cards4u, 
div.PassepartoutM img.cards4v
{width: 61% !important}
/* Größe "L" */
div.LandscapeL, button.LandscapeL, div.PassepartoutL, button.PassepartoutL 
{width: 16em}
div.PassepartoutL, button.PassepartoutL 
{height: 16em; vertical-align: middle; text-align:center}
div.PortraitL, button.PortraitL{width: 12em}
/* Größe "XL" */
div.LandscapeXL, button.LandscapeXL, div.PassepartoutXL, button.PassepartoutXL 
{width: 18em}
div.PassepartoutXL, button.PassepartoutXL 
{height: 18em; vertical-align: middle; text-align:center}
div.PortraitXL, button.PortraitXL{width: 13.5em}



/* 17.05.15: Einstellungen für kleinere Bildschirme */
 
@media screen  and (max-width: 500px) {
div.LandscapeM, button.LandscapeM, div.PassepartoutM, button.PassepartoutM 
{width: 5em}
div.PassepartoutM, button.PassepartoutM {height: 5em}
div.PortraitM, button.PortraitM {width: 5em}
div.LandscapeL, button.LandscapeL, div.PassepartoutL, button.PassepartoutL 
{width: 6em}
}
@media screen and (min-width: 501px) and (max-width: 650px) {
div.LandscapeM, button.LandscapeM, div.PassepartoutM, button.PassepartoutM 
{width: 6.5em}
div.PassepartoutM, button.PassepartoutM {height: 6.5em}
div.PortraitM, button.PortraitM {width: 6em}
div.LandscapeL, button.LandscapeL, div.PassepartoutL, button.PassepartoutL 
{width: 8em}
}
@media screen and (min-width: 651px) and (max-width: 800px) {
div.LandscapeM, button.LandscapeM, div.PassepartoutM, button.PassepartoutM 
{width: 8em}
div.PassepartoutM, button.PassepartoutM {height: 8em}
div.PortraitM, button.PortraitM {width: 7em}
div.LandscapeL, button.LandscapeL, div.PassepartoutL, button.PassepartoutL 
{width: 10em}
}
@media screen and (min-width: 801px) and (max-width: 1000px) {
div.LandscapeM, button.LandscapeM, div.PassepartoutM, button.PassepartoutM 
{width: 10em}
div.PassepartoutM, button.PassepartoutM {height: 10em}
div.PortraitM, button.PortraitM {width: 8em}
div.LandscapeL, button.LandscapeL, div.PassepartoutL, button.PassepartoutL 
{width: 13em}
}


/*
div#Beanielings button, div#Vogelspiel button, div#Tasmanien button,
div#Chartlings button, div#Rindviecher button,
*/

/* Darstellung einer Beschriftung auf aufgedeckten Karten */
div.Overlay {
  position: absolute;
  top: 2.4em;
  left: 0.8em;
  width: 0em;
  height: 1.4em;
	font-size: 1.4em;
  background: #EDA6C4;
  color: #FFFFFF
}
img.cards1, img.cards1h, img.cards1v, img.cards1u, img.cards1s
  {border: 0.3em solid #90CAF6 !important}
img.cards2, img.cards2h, img.cards2v, img.cards2u, img.cards2s
  {border: 0.3em solid #F0F7C4 !important}
img.cards3, img.cards3h, img.cards3v, img.cards3u, img.cards3s
  {border: 0.3em solid #E3004F !important}
img.cards4, img.cards4h, img.cards4v, img.cards4u, img.cards4s
  {border: 0.3em solid #55FF55 !important}
div.OpenCard img.cards4, div.OpenCard img.cards4h,
div.OpenCard img.cards4v, div.OpenCard img.cards4u, div.OpenCard img.cards4s
{border: 0.2em solid #EDA6C4 !important}
div.OpenCard img.cards4v {margin-left: 12%}
div.NamedCard div.Overlay {width: 75%}

div#Memory-Tryout img.cards1h, div#Memory-Tryout img.cards2h
div#Memory-Tryout img.cards3h, div#Memory-Tryout img.cards4h
{margin-top: 15%; margin-bottom: 15%}
div#Memory-Tryout img.cards1v, div#Memory-Tryout img.cards2v,
div#Memory-Tryout img.cards3v, div#Memory-Tryout img.cards4v {width: 72%}

div#Memory-Tryout img.cards1u, div#Memory-Tryout img.cards2u,
div#Memory-Tryout img.cards3u, div#Memory-Tryout img.cards4u
{border-collapse: separate}

div#score {
	float : left;
	font-weight: bold;
	/* margin-top: 0.5em; margin-bottom: 0.4em; */
	margin: 0.5em 0.2em;
	width: 98%;
}
/* form#GameControl div#score {width: 79%} */

/*       Puzzelspiele */
form#JGame {float: left; width: 99%; margin-left: 0.5em}
body#Spielen form#JGame, body#Play form#JGame{width: 85%}
form#JGame div#score {clear: both; float: none; margin-left: 0.5em}
div#Jigsaw, div#Jigsawu, div#Jigsaws {margin: 0.5%; clear: both; float: left}
/* 4 Folgezeilen: 1 Pixel mehr für Rechenungenauigkeiten für "nicht teilbare" Layouts */
div#Jigsaw {width: 721px}
body#Meine_eigene_Spielewebsite div#Jigsaw, body#My_own_game_website div#Jigsaw
{width: 541px}
div#Jigsawu {width: 541px} /* Hochkant Puzzles */
body#Meine_eigene_Spielewebsite div#Jigsawu, body#My_own_game_website div#Jigsawu
{width: 406px}
div#Jigsaws {width: 541px} /* Hochkant Puzzles */
body#Meine_eigene_Spielewebsite div#Jigsaws, body#My_own_game_website div#Jigsaws
{width: 541px}

@media screen and (max-width: 960px) {
	div#Jigsaw {width: 541px}
	div#Jigsawu {width: 406px} /* Hochkant Puzzles */
}
@media screen and (max-width: 720px) {
	div#Jigsaw {width: 361px}
	div#Jigsawu {width: 271px} /* Hochkant Puzzles */
}
@media screen and (max-width: 480px) {
	div#Jigsaw {width: 241px}
	div#Jigsawu {width: 181px} /* Hochkant Puzzles */
}

div#Jigsaw div.newline, div#Jigsawu div.newline, div#Jigsaws div.newline
{clear: both}
div#Jigsaw div.Mover, div#Jigsawu div.Mover, div#Jigsaws div.Mover
{ width : 0px; height: 0px;
	position : absolute; background: #D2E7AF;
}
span.Preview{
	width: 10%; margin: 0.9em;
	float: left;
	font-weight: bold;
}
img.Preview{
	width: 25%; margin-left 0.5em;
	border: 0.4em solid #5D2C2F
}
/* Seitenmenü im "Spielprobe Buch" berücksichtigen */
body#Spielen img.Preview, body#Play img.Preview {width: 18%}
body#Spielen div#scores, body#Play div#scores {width: 86%}
body#Spielen table.time, body#Spielen table.highscore,
body#Play table.time, body#Play table.highscore
{width: 49%}
body#Spielen th, body#Play th {font-size: 1.1em}

img.halfpage{width: 49%; float: left}
div.halfpagewimg{
	float: left;
	width: 49%;
	margin-left: 1%
}
img.halfpageu{width: 39%; float: left}
div.halfpagewimgu{
	float: left;
	width: 59%;
	margin-left: 1%
}
table#tableHalfpage {float: left; width: 48% !important}
div.JPiece1, div.JPiece2, div.JPiece3, div.JPiece4, div.JPiece5, div.JPiece6
{width: 240px; height: 270px; float: left}

div.JPiece1 {background: url("22_Images/JigsawsL/Bananas.JPG") no-repeat -0px -0px}
div.JPiece2 {background: url("22_Images/JigsawsL/Bananas.JPG") no-repeat -240px -0px}
div.JPiece3 {background: url("22_Images/JigsawsL/Bananas.JPG") no-repeat -480px -0px}
div.JPiece4 {background: url("22_Images/JigsawsL/Bananas.JPG") no-repeat -0px -270px}
div.JPiece5 {background: url("22_Images/JigsawsL/Bananas.JPG") no-repeat -240px -270px}
div.JPiece6 {background: url("22_Images/JigsawsL/Bananas.JPG") no-repeat -480px -270px}
@media screen and (max-width: 960px) {
div.JPiece1, div.JPiece2, div.JPiece3, div.JPiece4, div.JPiece5, div.JPiece6
{width: 180px; height: 202px; float: left}

div.JPiece1 {background: url("22_Images/JigsawsM/Bananas.JPG") no-repeat -0px -0px}
div.JPiece2 {background: url("22_Images/JigsawsM/Bananas.JPG") no-repeat -180px -0px}
div.JPiece3 {background: url("22_Images/JigsawsM/Bananas.JPG") no-repeat -360px -0px}
div.JPiece4 {background: url("22_Images/JigsawsM/Bananas.JPG") no-repeat -0px -202px}
div.JPiece5 {background: url("22_Images/JigsawsM/Bananas.JPG") no-repeat -180px -202px}
div.JPiece6 {background: url("22_Images/JigsawsM/Bananas.JPG") no-repeat -360px -202px}
}
@media screen and (max-width: 720px) {
div.JPiece1, div.JPiece2, div.JPiece3, div.JPiece4, div.JPiece5, div.JPiece6
{width: 120px; height: 135px; float: left}

div.JPiece1 {background: url("22_Images/JigsawsS/Bananas.JPG") no-repeat -0px -0px}
div.JPiece2 {background: url("22_Images/JigsawsS/Bananas.JPG") no-repeat -120px -0px}
div.JPiece3 {background: url("22_Images/JigsawsS/Bananas.JPG") no-repeat -240px -0px}
div.JPiece4 {background: url("22_Images/JigsawsS/Bananas.JPG") no-repeat -0px -135px}
div.JPiece5 {background: url("22_Images/JigsawsS/Bananas.JPG") no-repeat -120px -135px}
div.JPiece6 {background: url("22_Images/JigsawsS/Bananas.JPG") no-repeat -240px -135px}
}


/* Masken */
div#Form, div#wrap_content form.login, div#wrap_content form.enroll{
	border: 0.2em solid #90CAF6;
	padding: 1em;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
  background: #FFFFE1; /* Für IE */
	background: -webkit-linear-gradient(top, #FFFFE1, #C6D3FB);
	background: -moz-linear-gradient(top, #FFFFE1, #C6D3FB);
	/* 16.11.12: W3C Fehler background: linear-gradient(top, #FFFFE1, #C6D3FB); */
}
div#wrap_content form.login{width: 60%; margin: 2%; float:left}
div#Form{display: inline-block}

form#HeaderControls button{margin-left: 1%; margin-top: 0em}
form#PicUpload {
	border: 0.2em solid #90CAF6;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
	background: #EDA6C4;
	width: 97%;
	padding: 1em
}
form#PicUpload img.Medium{width: 14em}
form#PicUpload textarea{width: 70%; float: left}
form#PicUpload input.checkbox{height: 10em}
select.OptionBox, select.OptionBoxSmall{
	/* margin-top: 0.5em; margin-right: 0.3em; */
	margin: 0.5em 0.3em;
	padding: 0.2em;
	width: 15em;
	background: #D4F5D8;
	float: left
}
 select.OptionBoxSmall{width: 7em}

input.ckStyle1 {margin-left: 0.5em}

/* Spaltenformatierung*/
div.lblHighlightNo, div.lblHighlightYes
{float: left; margin-top: 0.5%; background: #D4F5D8}
div.lblHighlightNo {background: #EDA6C4}
div.lblcol1, div.lblcol1a, div.lblcol1b, div.lblcol1c, div.lblcol3,
div.txtcol2, div.txtcol4
{float: left; margin-top: 0.4em}
div.lblcol1, div.lblcol1a {margin-left: 1em; width:10em}
div.lblcol1b, div.lblcol3b {width: 12em}
div.lblcol1c, div.lblcol3c {width: 16em}
div.lblcol3, div.lblcol3b, div.lblcol3c {margin-left: 1em}
input.col2, input.col4, input.cell{
	width: 18em;
	margin-left: 0.4em;
	padding: 0.2em;
	background: #D4F5D8
	}
input.cell{width: 100%}
.chkcol3{margin-top: 0.6em; margin-left: 1em;}

/* Masken für Spiele */
form#TGame h2{background: #FFFDEA; margin: 0% 3%}

div#scores{width: 100%}
div#scores{float: left}
div#scores h2{margin: 0em 0.2em; clear: left}
div#Scorelist table {width: 48%; margin: 0.2em; padding: 0em; float: left}

div#Scorelist tbody td {
	padding-left: 0.4em;
	padding-top: 0.2em;
	padding-right: 0.2em;
	padding-bottom: 0.1em
}

div#Scorelist table#table1, div#Scorelist table#table2
{float : left; margin-top: 0.2em}
div#Scorelist caption{font-size: 1.5em; margin: 0.2em}
div#Scorelist thead th {background: #EDA6C4; padding: 0.3em}

div#Scorelist tr.highlighted {background: #55FF55}


/* "Responsive" Design: 1-Spaltig  */ 
/*
div.Drittelseite {min-width: 200px}
div.Halbseite {min-width: 300px}
div.Zweidrittelseite {min-width: 400px}
div.Drittelbox {min-width: 100px}
div.Halbbox {min-width: 150px}
div.Zweidrittelbox {min-width: 200px}
*/
@media screen and (max-width: 720px) {
	/* Äußerer Rahmen */
	div#logo img {width: 6em}
	div#logotext{margin-left: 1%; margin-top: 1%}
	div#logotext h2 {font-size: 1.4em}
	div#nav li a, div#footer li a{
	  font-size: 1em; font-weight: normal;
	  margin: 0.1em; 
	  padding: 0.1em 0.5em;
	}
	div#menu{width: 97%; margin: 1em 0}
	div#menu li, div#footer li{display: inline; font-weight: normal; margin: 0em 1em}
	div#pages, div#maintext {clear: both}
  
  div.Halbseite, div.Drittelseite, div.Zweidrittelseite{width: 97%}
  div.Drittelseite{max-width: 360px}
  div.Halbseite{max-width: 480px}
  div.Halbseite{max-width: 720px}
}

/* Ende MeinOnlineSpiel.css */