@import url('normalize.css');
html.has-results {overflow-y:scroll;}
body
{
background: #F9F9F9;
font-family: 'Lato', sans-serif;
font-size: 15px;
color: #333;
font-weight: 400;
text-align:center;
}
#content
{
background: #f3f3f3;
}
div#content
{
min-height: 400px;
padding:0 0 20px 0;
}
h1
{
font-weight: normal;
font-size: 15px;
}
h2
{
font-weight: 300;
margin: 50px 0 20px 0;
padding: 85px 0 0 0;
font-size: 24px;
text-transform: uppercase;
letter-spacing: 10px;
background: url(../img/gears.png) 50% 0 no-repeat;
display: inline-block;
}
ul.result
{
margin-top: 20px;
}
h3
{
font-size: 18px;
}
h4
{
font-size: 15px;
}
div.text
{
margin: 0 auto;
max-width: 700px;
text-align: left;
padding: 0 20px;
}
@media screen and (min-height: 600px) { div#content { min-height: 465px; } }
@media screen and (min-height: 650px) { div#content { min-height: 515px; } }
@media screen and (min-height: 700px) { div#content { min-height: 565px; } }
@media screen and (min-height: 750px) { div#content { min-height: 615px; } }
@media screen and (min-height: 800px) { div#content { min-height: 665px; } }
@media screen and (min-height: 850px) { div#content { min-height: 715px; } }
@media screen and (min-height: 900px) { div#content { min-height: 765px; } }
@media screen and (min-height: 950px) { div#content { min-height: 815px; } }
@media screen and (min-height: 1000px) { div#content { min-height: 865px; } }
@media screen and (min-height: 1050px) { div#content { min-height: 915px; } }
@media screen and (min-height: 1100px) { div#content { min-height: 965px; } }
@media screen and (min-height: 1150px) { div#content { min-height: 1015px; } }
@media screen and (min-height: 1200px) { div#content { min-height: 1065px; } }
a
{
color: inherit;
*color: #333;
text-decoration: none;
}
ul.result li.match > a,
a:hover
{
color: #FF6600;
}
input, button
{
font-family: inherit;
}
input#wort
{
width: 230px;
border: 1px solid #ccc;
padding: 10px;
}
div.filter
{
margin:20px 0 0 0;
}
div.filter input,
div.filter label
{
vertical-align: middle;
}
div.filter input ~ input
{
margin-left: 10px;
}
ul.result,
ul.result ul,
#footer ul
{
list-style: none;
padding: 0;
margin: 0;
}
form + h1,
form + p
{
margin-top: 70px;
}
div.filter + h1,
html.has-results form + h1
{
margin: 40px 0 0 0;
}
form + h1 + p
{
margin-top:100px;
}
ul.result
{
margin: 50px 0 100px 0;
white-space: nowrap;
overflow: auto;
}
ul.result > li
{
display: inline-block;
vertical-align: top;
text-align: left;
margin: 0 20px;
white-space: normal;
min-width: 75px;
max-width: 125px;
}
ul.result ul.empty:after
{
white-space: pre;
content: "(ausgeblendet)";
color: #aaa;
font-size: 12px;
margin-bottom: 10px;
display: block;
}
ul.result > li > span
{
color: #999;
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
white-space: nowrap;
background:#f3f3f3;
width: 100%;
display:block;
padding: 5px 0;
}
ul.result.detached > li > span
{
top:0;
position: fixed;
}
ul.result > li > span + ul
{
padding-top: 40px;
}
ul.result > li > ul ~ ul
{
padding-top:10px;
border-top: 1px dotted black;
}
ul.result > li > ul > li
{
margin: 0 0 15px 0;
}
ul.result > li > ul > li li
{
margin-top: 3px;
font-size: 12px;
color: #999;
}
ul.result.anim-enabled > li > ul > li
{
transition:height 0.5s, margin 0.5s;
}
ul.result > li > ul > li
{
overflow: hidden;
}
ul.result > li > ul > li.hidden
{
margin: 0;
*display:none;
}
#footer
{
padding: 15px 30px;
color: #333;
font-size: 12px;
/*position:fixed;
bottom:0;
width:100%;*/
text-align: center;
}
#footer div ~ div
{
margin-top:15px;
}
#footer .fol li a { margin: 0 10px; }
#footer .fol li { list-style: none; display: inline; }
#footer .fol li:after { content: " \2022"; }
#footer .fol li:last-child:after { content: none; }