/* A Free Design by Bryant Smith (bryantsmith.com) */

html, body {
text-align: center;
}
p {text-align: left;}

body {
	margin: 0;
	padding: 0;
	background: #697281;
	text-align: left;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #F1F5F8;
	background-color:#679159;
}

label {
	margin: 0 5px 0 5px;
}
svg {
	background: repeating-conic-gradient(#dddddd 0% 25%, #999999 0% 50%) 50% / 20px 20px;
}

*
{
 text-align:left;
}

#page
{
  margin: 0 0 0 0; 
  margin-top:25px;
  display: block; 
  height:auto;
  position: relative; 
  overflow: hidden; 
  background: #ffffff;
  border-style: solid;
  border-color: #BED2B7;
  border-radius: 30px;
  border-width: 5px;
}

#generatorContent{
	display: grid;
	grid-template-columns: 235px calc(100vw - 246px);
	font-size:0.9em;
	color:#030712;
}
/* große Viewports */
@media all and (min-width: 810px) {
#page {
    max-width: 800px;
	margin: 0 auto 0 auto;
	border-width: 14px;
  }
#generatorContent{
	max-width: 760px;
	grid-template-columns: 235px 555px;
  }
}

#formContent{
	margin-top:5px;
}

#generatorForm {
	display: grid;
	grid-template-columns: 9em calc(100% - 10em);
	line-height:1.5em;
}

#svgContent{
	width:210px;
	margin-top:5px;
	padding-left:20px;
	padding-right:5px;
}

#header
{
background: linear-gradient(#DAB636,#F2E3B5);
height:95px;
}

#headerTitle
{
position:relative;
left:20px;
top:15px;
color:#283823;
text-align:left;
font-size:2.2em;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
}

#headerSubText
{
position:relative;
left:23px;
top:15px;
color:#679159;
text-align:left;
font-size:1.2em;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
}


#bar
{
background: linear-gradient(#856c19, #D1AE34);
height:30px;
line-height:1.4em;
padding-left:20px;
padding-right:20px;
}

#bar a
{
font-size:1em;
font-weight:bold;
color:#FBFDFB;
margin-left:28px;
margin-right:28px;
}

#bar a:hover
{
color:#C7E0C2;
}

td 
{
    text-align: center; 
    vertical-align: middle;
}

dl {
    padding: 0.5em;
  }
  dt {
    float: left;
    clear: left;
    width: 6em;
    text-align: right;
    font-weight: bold;
	padding: 0 9px 0.5em 0;
  }
  dd {
    margin: 0 0 0 110px;
    padding: 0 0 0.5em 0;
	min-height: 3em;
  }

.contentTitle
{
height:42px;
margin-top:5px;
margin-left:2px;
margin-right:2px;
background: linear-gradient(#D9E0D7,#ffffff);
background-repeat:no-repeat;
  border-style: solid;
  border-color: #ffffff;
  border-radius: 40px 40px 0 0;
  border-width: 15px 15px 0 15px;
}

.contentTitle h1
{
margin-left:31px;
font-size:1.3em;
font-weight:bold;
color:#071027;
}

.comments
{
font-size:11px;
font-style:italic;
}

.contentText
{
padding-left:20px;
padding-right:20px;
color:#030712;
line-height:1.5em;
}

a
{
text-decoration:none;
color:#597A41;
}

a:hover
{
color:#597A41;
font-weight:bold;
}

.container {
  overflow: hidden;
}

.filterDiv {
  float: left;
  margin: 2px;
  display: none; /* Hidden by default */
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 2px 6px;
  background-color: #f1f1f1;
  cursor: pointer;
}

/* Add a light grey background on mouse-over */
.btn:hover {
  background-color: #ddd;
}

/* Add a dark background to the active button */
.btn.active {
  background-color: #666;
  color: white;
}

#printButton {
	margin-left: 10px;
}

.cardwrap {
  position: relative;
  display: inline-block;
  top: 0;
  left: 0;
}
.postcard {
  position: relative;
  top: 0;
  left: 0;
  border: 1px red solid;
}

.outlink {
  position: absolute;
  top: 220px;
  left: 315px;
  border: 1px green solid;
}