@import url("fonts/merriweather-sans/stylesheet.css");
@import url("fonts/fontawesome/font-awesome.min.css");

html {
  font-size: 100%;
  font-family: 'merriweather_sans', "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height: 1.7em;
}

#site {
  padding: 0 0% 1% 0%;
  max-width: 1280px;
  margin: 0 auto;
}

hr {
	border: 0;
	border-top: 1px solid lightgray;
}

.hidden {
	display: none;
}


#header {
	color: black;
	background: white;
	margin: 0;
	padding: 0 3% 0 3%;
}

h1 {
  padding-top: 20px;
	font-weight: 700;
  font-size: 3em;
	text-align: center;
  line-height: 1em;
	font-weight: 300;
}

h1 small {
	font-size: 0.4em;
	line-height: 2px !important;
}

nav {
	text-align: center;
	background: #4c4241;
	padding: 5px 0 5px 0;
	margin: 0 0 0px 0;
}

nav ul {
	margin: 0;
	padding: 0;
}

nav ul li {
	padding: 0;
	margin: 0;
	text-align: center;
	display: inline;
}

nav ul li a {
	padding: 15px 18px 15px 18px;
	color: white;
	text-align: center;
}
nav button:hover,
nav button:active,
nav ul li a:hover,
nav ul li a:active {
	color: orange;
	text-decoration: none;
}

nav button {
	font-weight: 500;
	display: none;
	border: 0;
	background: #4c4241;
	color: white;
	width: 100%;
	height: 30px;
	text-align: center;
	text-transform: uppercase;
}

h2 {
	margin-top: 20px;
	font-size: 1.5em;
}

div.infotext {
	margin-top: 60px;
	margin-bottom: 40px;
	/* -webkit-column-count: 2; 
	-moz-column-count: 2; 
	column-count: 2;
	-webkit-column-gap: 40px; 
	-moz-column-gap: 40px; 
	column-gap: 40px; */
}

button.togglebutton {
  min-width: 200px;
  text-align: center;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

button.showinfo {
  display: none;
}

button.showfilter {
  display: block;
}

p {
  margin-bottom: 20px;
	line-height: 1.7em;
}

a{
  color: #7190cd;
  text-decoration: none;
}

a:hover,
a:active {
  color: #30459e;
  text-decoration: underline;
}

footer a {
	text-decoration: none;
}

form input[type='text'] {
  border: 1px solid darkgray;
  padding: 2px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
	max-width: 500px;
}

ul, ul li  {
  margin: 0 0 0px 23px;
  list-style: disc;
}

ul.iconlist li {
	list-style: none;
	padding: 0;
	margin: 0;
}

span.icontext {
	display: none;
}

table,
button {
  font-size: 1em;
  font-family: 'merriweather_sans', "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

table ul {
  margin: 0;
  list-style: none;
}

button.showfilter,
button.showbutton,
button.showinfo,
button#filter_clear {
	font-weight: 400;
  border: 1px solid lightgray;
  background: white;
  padding: 0.23em 0.5em 0.1em 0.5em;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  text-align: left;
  margin-bottom: 15px;
	text-align: center;
}

button:hover,
button:active {
  
  color: orange;
}


button.showbutton {
  display: none;
  font-weight: bold;
  width: 30px;
  height: 30px;
  text-align: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

table {
	line-height: 1.7em;
  background: #f0f0f0;
  margin-bottom: 30px;

}


table tr {
  /* border-top: 1px solid #d7d7d7;
  border-left: 1px solid #d7d7d7;
  border-right: 1px solid #d7d7d7;
	
  */
  border-bottom: 1px solid gray; 
  background: white;

}
/*
tr:nth-child(even) {
  background: #f4f4f4;
}

tr:nth-child(odd) {
  background: #e8e8e8;
}
*/


table thead tr th {
	text-transform: uppercase;
	font-size: 1em;
	font-weight: 500 !important;
}

table th {
  text-align: center;
  background: lightgray;
  color: white;
  cursor: pointer;

}

table th .fa {
  position: relative;
  top: 3px;
  float: right;
}

table tr th,
table tr td {
  padding: 10px;
  display: table-cell;
  word-wrap: break-word !important;
}

table tr th {
  width: 10%;
}

table tr th,
table tr td {
  vertical-align: top;
	border-left: 1px solid lightgray;
  border-bottom: 2px solid gray;
}

table tr td:first-child {
  font-weight: 600;
}



tr.freeware,
span.freeware,
div.freeware  {
  background: #deeef5;
}

tr.open-source,
span.open-source,
div.open-source {
  background: #ddf0ae;
}

.notebox {
  background: #f3e5c9;
  padding: 1em;
}

form {
  margin-bottom: 20px !important;
}

form#search {
	margin-top: 20px;
  text-align: center;
	color: black;
	position: relative;
	width: 100%;
}

form#search input {
  padding: 0.5em;
	width: 100%;
	padding-right: 40px;
}

form#search button.search_clear {
	border: 0;
	color: white;
	position: absolute;
	right: 5px;
	top: 4px;
	background: #4c4241;
	width: 32px;
	height: 32px;
	text-align: center;
	-webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

form#filter {
  width: 100%;
  display: none;
}



form#filter .filter_info {
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
}

form#filter ul {
	margin-bottom: 25px !important;
}

form#filter fieldset {
  margin: 0px 0 20px 0;
  overflow: auto;
  padding: 0;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
	border: 0;
  height: 250px;
  background: #f4f4f4;
}

form#filter fieldset legend {
	font-weight: 500;
	width: 100%;
	margin:0;
	text-transform: uppercase;
	font-size: 1em;
	border-bottom: 0px dashed lightgray;
	margin-bottom: 5px;
	background: gray;
	color: white;
	padding: 5px 3px 3px 8px;
}

form#filter fieldset legend {
  font-weight: 600;
}

form#filter fieldset ul {
  list-style: none;
  margin: 0 0 10px 0;
	padding: 5px;

}
form#filter fieldset ul li {
	list-style: none;
	margin: 0px 0 4px 0;
	border-bottom: 0px dashed gray;
}

#filter_clear {
	margin-top: 30px !important;
	width: 150px;
	text-align:center;
	display: block;
	margin: 0 auto;
}

#backtop {
  text-decoration: none;
  position: fixed; 
  display: none;
  bottom: 15px; 
  right: 15px;
  z-index: 1000;
  font-size: 2em;
  padding: 4px 5px 4px 5px;
  color: white !important;
  background-color: gray;
  border: 1px solid white;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

#resources {
	margin: 70px 5% 70px 5% !important;
}

footer {
	padding: 30px 0 30px 0;
	text-align: center;
	background: #4c4241;
	border-top: 1px solid lightgray;
	color: white;
}

footer a:hover,
footer a:active {
	color: orange;
	text-decoration: none;
}

footer p {
	padding: 0 2% 0 2%;
}

footer .sharing h3,
footer .sharelinks {
	font-size: 1em;
	display: inline;
	margin: 10px 0 0 5px;
	line-height: 1.1em;
	text-transform: uppercase;
	font-weight: 500;
}

footer .sharing {
	font-size: 1em;
	margin-bottom: 15px;
}

footer .sharelinks li {
	display: inline;
	padding: 0 0px 0 5px;
}

@media only screen and (max-width: 1000px) {

	h1 {
    font-size: 2.5em;
  }

  div.infotext {
    padding: 0 3% 0 3%;
  }

	form#filter {
		padding: 0 3% 0 3%;
	}
	
}

@media only screen and (max-width: 767px) {

	nav ul {
		display: none;
	}

	nav ul li {
		display: block;
	}

	nav ul li a {
		display: block;
		widht: 100%;
	}

	nav button {
		display: block;
	}

  button.showinfo {
    display: block;
  }
	
	div.infotext {
		margin-top: 20px;
		margin-bottom: 20px;
		display: none;
	}

  h1 {
    font-size: 2.5em;
		text-align: center;
  }

	h1 small {
		font-size: 0.4em;
		line-height: 2px !important;
	}


  form input[type='text'] {
    width: 100%;
  }

	button.showfilter,
	button.showinfo {
		width: 95%;
	}

	form#filter fieldset {
		height: 200px;
		margin-bottom: 30px;
  }

	table {
		width: 96%;
		margin: 0 2% 0 2%;
    font-size: 1em;
  }

  table tr th {
    display: none;
  }

  table td {
    display: block;
    width: 100% !important;
  }

  table td.name {
		min-height: 50px;
  }

  table td.name .showbutton {
    font-size: 0.9em !important;
    float: right;
    display: block;
    margin: 0;
  }

  .system,
  .lizenz,
  .kategorie,
  .preis,
  .info,
	.preismodell {
    display: none;
  }
	
	table tr {
    border: 1px solid gray;
  }

	table tr td {
    border: 0px solid lightgray;
  }

  table td ul li {
    /* display: inline; */
  }

}

@media only screen and (max-width: 479px) {

	h1 {
		font-size: 1.6em;
	}

	h1 small {
		font-size: 0.6em;
		line-height: 2px !important;
	}
	

}