/* Projekt    : Homepage
   Komponente : GUI
   Datei      : Gernot.css
   Inhalt     : Stylesheet für die Anzeige der Homepage von Gernot Daum

     09.06.2011  Gernot Daum  Beginn der Implementierung
     18.10.2011  Gernot Daum  max-width eingeführt
*/

/* Allgemeine Festlegungen */

html {
	height: 100.5%;
	font-size: 62.5%;
}
body {
	/* text-align: center; */
	font: 1.2em/1.8em Verdana, sans-serif;
}

* {margin: 0px; padding: 0px; border: 0px;}

h1, h2, h3, h4, h5, h6 {
	font-family: "Century Gothic", sans-serif;
	margin: 0em 0em 0.5em 0em;
	color: #474342;
	clear: both
}
h1 {
	text-align: center;
	font-size: 2.1em;
	border-bottom: 0.1em dashed #474342;
	/* padding-bottom: 0.2em; */
	font-weight: normal;
}
h2 {font-size: 2.2em;}
h4 {font-size: 1.8em;}
h5 {font-size: 1.6em;}
h6 {
	clear:both;
	text-align: center;
	font-size: 1.2em;
	background: #FFD4D4
	}

/* Textformatierungen */
p.centertext{text-align: center}
span.markedasbold{font-size: 1.2em}
div.ind1{margin-left: 3em} div.ind2{margin-left: 5em}
div.big1{font-size: 1.4em} div.big2{font-size: 1.6em} div.big3{font-size: 1.8em}
div.big4{font-size: 2em} div.big5{font-size: 2.4em}
div.newline, div.ind2 p.emptyline{clear: both}
div.centeredline{text-align: center};

a {color: #6B161B; text-decoration: none;}
a:link {}
a:visited {}
a:hover {}
a:active {}

span.keyword {font-weight: bold; background: #FFD4D4}

/* Tabellen */
table {margin: 0em; padding: 0em;}
body#Über_mich table{width: 98%; text-align: center}
tbody tr {line-height: 1.45em}
tbody tr.odd {background: #D2E7AF}
tbody tr.even {background: #FEFDEB; line-height: 1.5em}
tbody tr td.up {background: #AAFFBB}
tbody tr td.down {background: #FFCCCC}
th, tfoot {text-align: center}
tfoot a {background: #CCCCCC; font-size: 2em}


/* Festlegungen für mit Namen versehene Container sowie Klassen */

/* Fehlerbehandlung */
div#error {
	margin: 2em;
	padding: 1.5em;
	border: 0.3em solid #FF0000;
	text-align: center;
	font-size: 1.6em;
	background: #FFD4D4;
}

/* Äußerer Rahmen / Seitenkopf und Fuss */
div#wrapper {
	max-width: 90em;
	margin: 0 auto; /* horizontale Zentrierung */ 
	background: #FFF6CB;
}
div#header {
	display: inline-block;
	width : 98%; 
	background: #FFF6CB;
	padding: 0.3em;
}
div#header form {display: inline-block}
div#header form#HeaderControls {float: right}
div#header li, div#footer li {display: inline}
div#header h1 {border: 0px;}

div#footer {
	/* height: 2em; */
	padding: 0.2em;
	text-align: center;
	background: #D2E7AF;
}

/* Kopf Navigation (Tabs) */
div#nav {
	padding-top: 0.1em;
	padding-bottom: 0.2em;
	background: #D2E7AF;
	overflow: hidden
}
div#nav li {
	display: inline;
	margin-left: 0.4em;
}
div#nav a {
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	padding-bottom: 0.1em;
}

div#nav li.nav a:hover {
	border-top: 0.2em solid #6B161B;
	border-bottom: 0.2em solid #6B161B;
}
div#nav li.navS a {
	border-top: 0.2em solid #333377;
	border-bottom: 0.2em solid #333377;
}

/* Innerer Rahmen */
div#wrap_content {overflow: auto}

/*   Bereich "Seitenmenü " */
div#menu {
	float: right;
	width: 12%; padding: 0% 0.5%;
	overflow: hidden
}
div#menu li a.menu1:hover,
div#menu li a.menu2:hover{
	border-top: 0.2em solid #6B161B;
	border-bottom: 0.2em solid #6B161B;
}
div#menu li a.menu1S { background: #D2E7AF}
div#menu li a.menu2S {
	border-top: 0.2em solid #000000;
	border-bottom: 0.2em solid #000000;
}
div#menu ul {
  font-size: 0.88em;
  font-weight: bold;
}
div#menu li.subselect {
	border-left: 0.4em solid #E3004F;
	padding-left: 0.2em;
	margin-left: -0.6em;
}
div#pages, div#scrollitems{
	padding: 0.3em;
	text-align: center
}

/*  - zentraler Textbereich  */
div#maintext {
	margin: 0em 0em 0em 0em;
	padding-left: 0.8em;
	padding-right: 0.8em;
	background: #FEFDEB;
	overflow: auto;
}
/* div#maintext p {clear:left} 
img {
  margin: 0.2em 0.4em 0.2em 0.4em;
  border: 0.2em solid #D2E7AF;
}
*/
div#maintext a {padding-bottom: 1px;}
/* div#maintext a:link {border-bottom: 1px solid #E3004F;} */
div#Table1CRow {color: #D2E7AF;}

div#maintext img.symw1s3 {
	border: none;
	width: 1.4em;
	margin-right: 1.9em;
}


/* Einstellungen für bestimmte Elmente */

/* -- Textkästen */
div.Überschrift {text-align: center; margin: 0.4% 0%}

div.Halbseite, div.Halbbox, div.Drittelseite, div.Zweidrittelseite, div.Viertelseite
{ float: left;
	margin-left: 0.5%
}
div.Vollseite {width: 97%}
div.Halbseite, div.Halbbox {width: 48%; margin-right: 1%}
div.Drittelseite{width: 31%}
div.Zweidrittelseite{width: 65%}
div.Viertelseite{width: 23%}
div.Halbseite p, div.Drittelseite p, div.Zweidrittelseite p, div.Viertelseite p 
{margin: 0.5em}
div#Navigator {
	text-align: center; font-size: 0.9em;
}
div.HervorgehobenGrün {
	border: 0.5em solid #FFF6CB;
	-webkit-border-radius: 3em;
	-moz-border-radius: 3em;
	border-radius: 3em;
	background: #D2E7AF; 
	display: inline-block
}	

div.Spezial1, div.blau, div.gelb, div.Spezial2, div.Spezial3, div.Spezial4 {
	float: left;
	padding-top: 1%; padding-left: 2%;
	border: 0.2em solid #46B6D9;
	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	border-radius: 1em;
	background: #B1D2EF
}
div.gelb {background: #FFF6CB}
div.Spezial1 img, div.Spezial2 img  {width: 48%; Margin: 1%}
div.Spezial2 {background: #B3B4BA; border: 0.2em solid #777978}
div.Spezial3 {background: #F2ED6F; border: 0.2em solid #E95205}
div.Spezial4 {background: #D2E7AF; border: 0.2em solid #6B161B}
div.Winter img, div.Knosping img, div.Buding img, div.Prosping img, div.Prospering img,
div.Singsommer img, div.Singsummer img, div.Glühsommer img, div.Heatsummer img,
div.Vollender img, div.Completer img {border: none}

/* -- Bilder -- */
img.floatnone2, img.floatleft2, img.floatright2{
  width: 20em; margin: 1%
}
img.floatleft, img.floatright {width: 16em}
img.floatleftu, img.floatrightu {width: 12em}
img.floatnone3, img.floatleft3, img.floatright3 {width: 30em}
img.floatleft3 {margin-right: 2%}
img.floatright3 {margin-left: 2%}
img.floatleftu3, img.floatrightu3 {width: 24em}
img.floatleft4, img.floatright4 {width: 40em}

img.floatright, img.floatrightu, img.floatright2, img.floatrightu2,
img.floatright3, img.floatrightu3, img.floatright4, img.floatright5
img.floatright6, img.floatright7, img.floatright8, img.floatright9, img.floatright10
{float: right}

img.floatleft, img.floatleftu, img.floatleft2, img.floatleftu2,
img.floatleft3, img.floatleftu3, img.floatleft4, img.floatleft5
img.floatleft6, img.floatleft7, img.floatleft8, img.floatleft9, img.floatleft10
{float: left}

/* Flexi Größen ab 50: Umliegenden Kasten füllen */
img.floatnone50, img.floatnoneu50{
  width: 100%; margin: 1%
}
img.floatnoneFill, img.floatnoneuFill, img.floatleftFill,
input.floatnoneFill, input.floatnoneuFill 
{width: 99%; margin: 1%}
img.floatnoneFill6, img.floatnoneuFill6 {width: 60%; margin: 2% 0%; padding: 1% 20%}

{width: 98%; margin: 1%}

/*    - Bildüberlagerungen */
div.Bildstapel {position: relative}
div.Bildstapel img {width: 100%; margin: 0%}
/*      Quadrantenüberlagerung (Bildviertel im Uhrzeigersinn) */
div.Bildstapel img.floatleftUEQ1, div.Bildstapel img.floatleftUEQ2,
div.Bildstapel img.floatleftUEQ3, div.Bildstapel img.floatleftUEQ4 {
	z-index: 1;
	width: 40%;
  position: absolute; top:2%; left:2%
}
div.Bildstapel img.floatleftUEQ2{left:59%}
div.Bildstapel img.floatleftUEQ3{top:52%; left:59%}
div.Bildstapel img.floatleftUEQ4{top:52%}


/* -- Buttons und Pseudo Buttons */
/* ---- normales Erscheinungsbild */
div#maintext p a, button.ShowButtonT, div#pages a, div#scrollitems a,
form.login button, form.enroll button, form.acknowledge button,
button.outstanding {
	font-size: 1.1em;  font-weight: bold;
	color: #6B161B; background: #D2E7AF;
	padding: 0.2em 0.8em;
  -webkit-box-shadow: inset 0.2em 0.2em 0.2em #688E3B;
	-moz-box-shadow: inset 0.2em 0.2em 0.2em #688E3B;
	box-shadow: inset 0.2em 0.2em 0.2em #688E3B;
	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	border-radius: 1em;
  cursor: pointer
}
button.outstanding {font-size: 1.4em}
div#pages a.pageS {background: #FFF6CB}
div#maintext p a.external{
	-webkit-box-shadow: inset 0.3em 0.3em 0.3em #6B161B;
	-moz-box-shadow: inset 0.3em 0.3em 0.3em #6B161B;
	box-shadow: inset 0.3em 0.3em 0.3em #6B161B;
	padding: 0.4em 0.8em;
}

div#maintext p a:hover, button.ShowButtonT:hover,
div#pages a.page:hover, div#scrollitems a:hover,
form.login button:hover, form.enroll button:hover,
button.outstanding:hover
{ -webkit-box-shadow: inset 0.2em 0.2em 0.2em #EB313F;
	-moz-box-shadow: inset 0.2em 0.2em 0.2em #EB313F;
	box-shadow: inset 0.2em 0.2em 0.2em #EB313F;
	Color: DC4858;
}

/* -- Sonstige Steuerelemente */
.chkradio{
	float: left;
	margin-right: 2%; 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;
}

/*  Hintergründe  */
div.Winter div#maintext	{background: #FFFFFF url(21_Icons/Schnee.JPG)}
div.Knosping div#maintext, div.Buding div#maintext
  {background: #FFFFFF url(21_Icons/Schnee.JPG)}
div.Prosping div#maintext, div.Prospering div#maintext
  {background: #FFFFFF url(21_Icons/Prosping.PNG)}
div#Navigator, div.Singsommer div#maintext, div.Singsummer div#maintext {
	background: #FEB1FD /* Für Internet Explorer */
  background: -webkit-linear-gradient(top, #FEB1FD, #94E262);
	background: -moz-linear-gradient(top, #FEB1FD, #94E262);}
div.Glühsommer div#maintext, div.Heatsummer div#maintext
{background: #FFFFFF url(21_Icons/Wasser.PNG)}
div.Vollender div#maintext, div.Completer div#maintext {background: #A199C4}


/*   Formatierungen für Puzzelspiele */
/* Masken für Spiele */
form#JGame {float: left; width: 99%; margin-left: 0.5em}
div#Header {
	display: inline-block;
	border: 0.3em solid #6B161B;
	padding-left: 1%; padding-right: 1%;
	margin-bottom: 1%;
	background: #FFF6CB;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;	
}
form#HeaderControls button {
	margin-left: 1%; margin-top: 0em
}

div#Jigsaw, div#Jigsawu {width: 720px; margin: 1%; clear: both; float: left}
div#Jigsawu {width: 541px} /* Hochkant Puzzles */
div#Jigsaw div.newline, div#Jigsawu div.newline{clear:both}

div#Jigsaw div.Mover, div#Jigsawu div.Mover {
	width : 0px; height: 0px;
	position : absolute; background: #D2E7AF;
}
/* &Jigsawparts */
span.Preview{
	width: 12%;
	float: left;
	font-weight: bold;
}
img.Preview{
	float: left;
	width: 17%;
	border: 0.4em solid #5D2C2F
}
div#maintext img.Preview{
	width: 18.5%;
	border: 0.1em solid #5D2C2F
}
select.OptionBox{
	margin: 0.3em 0.4em;
	padding: 0.2em;
	width: 12em;
	background: #D2E7AF;
	float: left
}

/*   Formatierungen für Tupel Spiele */
div#Memory  { background: #D2E7AF}
div#Memory span.label, div#Memory h2,
div#Memory table caption, div#scores h2{
	background: #FFF6CB;
	color: #6B161B;
	margin-left : 1.2em;
	padding : 0.2em;
	font-size: 1.2em;
}
div#Memory h2, div#scores h2{
	margin-right: 2em;
	font-size: 1.3em;
	text-align: center;
}
div#Memory table caption{font-size: 1em}
button#IgnoreMe{width: 0em; height:0em; float: left}
/*
div#Memory img {
  margin: 0.0em 0.0em 0.0em 0.0em;
  width: 95%;
}
*/

form#TGame button.btstyle1, form#JGame button.btstyle1,
form#scores button.btstyle1{
	border: 0.2em solid #EB313F;
	background: #6B161B;
	color: #FFFFFF;
	font-size: 1.25em;
	margin-left: 4em;
	margin-top: 0.2em;
	margin-bottom: 0.4em;
  float: left;
  -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: 0.8em;
	-moz-border-radius: 0.8em;
	border-radius: 0.8em;
}
form#JGame button.btstyle1 {margin-left: 0.6em}
form#TGame button.btstyle1:hover, form#JGame button.btstyle1:hover,
form#scores button.btstyle1:hover
{border: 0.2em solid #FFFF2A; Color: #FFFF2A}
form#TGame button.btstyle1:active, form#JGame button.btstyle1:active,
form#scores button.btstyle1:active
{background: #688E3B}

/* 05.03.15: Aktueller Stand: Das meiste wird über die Game Area gesteuert */
div#GameArea{margin: 1% 0.5%; clear: both}
div#GameArea div{float: left} /* Float für die Spielkarten */ 
div#GameArea button{position: relative; background: transparent}
div#GameArea img {width: 92%}
/* Größe "M" */
div.LandscapeM, button.LandscapeM, div.PassepartoutM, button.PassepartoutM 
{width: 11em}

div#Memory button, div.OpenCard {position: relative}
div#Memory div.Overlay {
  position: absolute;
  top: 2.4em;
  left: 0.8em;
  width: 0em;
  text-align: center;
  height: 1.4em;
	font-size: 1.4em;
  background: #6B161B;
  color: #FFF6CB
}
div#score {
	float : left;
	margin-top: -em; margin-bottom: 0.4em;
	margin-left: 1.5em;
}

div#Memory table#table1{
	clear:both;
	margin-left: 0.8em;
}

div#Memory button.cards1, div#Memory button.cards2,
div#Memory button.cards3, div#Memory button.cards4
{ background: transparent;  cursor: pointer}
div#Memory img.cards1 {border: 0.3em solid #5E7ECB}
div#Memory img.cards2 {border: 0.3em solid #FFFF2A}
div#Memory img.cards3 {border: 0.3em solid #E3004F}
div#Memory img.cards4 {border: 0.3em solid #55FF55}

/*   Bestenlisten */
div#Scorelist caption{font-size: 1.5em; margin: 0.2em}
div#Scorelist table {margin: 0.2% 1%; padding: 0.5%; float: left}
div#Scorelist tbody tr {color: #FFFFFF; font-weight: bold; text-align:center}
div#Scorelist tbody tr.odd {background: #D2E7AF; color: #000000}
div#Scorelist tbody tr.even {background: #FFF6CB; color: #000000}
div#Scorelist tbody tr.highlighted {color: #000000; background: #FFFF2A}
div#Scorelist tbody td {padding: 0.2em 0.3em}
div#Scorelist table#table1, div#Scorelist table#table2
{ width: 48%;
 margin-top: 0.2em
}
div#Scorelist thead th {
	padding: 0.1em
}


/* eigene (integrierte) Masken */
form.login, form.enroll, form.acknowledge {
	margin: 2em 10em;
	border: 0.3em solid #6B161B;
	padding: 1em;
	width: 55em;
	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	border-radius: 2em;
  background: #FFF6CB
}
form.login h2, form.enroll h2{font-size: 1.4em; color: #6B161B}
form.login div.usererror, form.enroll div.usererror{
	margin-top: 0.6em;
	color: #EA3c3C; font-size: 1.4em
}
form.acknowledge {width: 40em}

/* -- Spaltenformatierung */
input.col2, input.col4 {width: 20em}

/* Suchfeld im Maskenkopf */
div#header h1 {float: left}
div#header input {float: right}

div#header input.ShowButton {margin: 0.25em;}
div#header input.artless {width : 12em; margin: 0.5em;}
div#header input.ShowButton {
	border-top: 0.2em solid #EFEEE9;
  border-left: 0.2em solid #EFEEE9;
  border-bottom: 0.2em solid #2D3331;
  border-right: 0.2em solid #2D3331;
	background: #E7E3D8
}
div#header input.ShowButton:hover {
  border-top: 0.2em solid #2D3331;
  border-left: 0.2em solid #2D3331;
  border-bottom: 0.2em solid #EFEEE9;
  border-right: 0.2em solid #EFEEE9;
}

div#header input.pbStandard,
div#wrap_content input.pbStandard{
  height: 1.6em;
  margin-bottom: 0.2em;
  border-top: 0.2em solid #EFEEE9;
  border-left: 0.2em solid #EFEEE9;
  border-bottom: 0.2em solid #2D3331;
  border-right: 0.2em solid #2D3331;
}
div#header input.pbStandard:hover,
div#wrap_content input.pbStandard:hover{
  margin-bottom: 0.2em;
  border-top: 0.2em solid #2D3331;
  border-left: 0.2em solid #2D3331;
  border-bottom: 0.2em solid #EFEEE9;
  border-right: 0.2em solid #EFEEE9;
}


/* "Responsive" Design: 1-Spaltig  */ 
div.Halbseite {min-width: 300px}
@media screen and (max-width: 720px) {
	h1 {font-size: 1.9em}
	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}
}