@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(/elements/objects/open-sans-300.woff) format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(/elements/objects/open-sans-400.woff) format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(/elements/objects/open-sans-600.woff) format('woff');
}


*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

body
{
 background: #ffffff;
 color: #000000;
 margin: 0;
 padding: 0;
 font-size: 16px;
 font-weight: 300;
 font-family: 'Open Sans', sans-serif;
}

h1
{
 font-size: 30px;
 font-weight: 300;
}

input, textarea
{
 /* Per default, input fields other then submit use content-box.
    That makes it very hard to align suff. So lets switch it to
    border-box. */
 box-sizing: border-box; 
 -moz-box-sizing: border-box;
}

@media screen and (-webkit-min-device-pixel-ratio:0)
{
 /* Webkit based browsers have a grey background
    in radio buttons. To get rid of them, -webkit-appearance: none is
    needed. That makes them invisible in some browsers.
    So there is a lot of styleing needed to make them look right: */
 input[type=radio]
 {
  -webkit-appearance: none;
  height: 1em;
  width: 1em;
  border: 1px solid #000000;
  cursor: pointer; 
  border-radius: 2em;
 }
 input[type=radio]:checked
 {
  background-color: #000000;
 }
}

input[type=text], input[type=number], input[type=submit], textarea, button
{
 border: 1px solid #c0c0c0;
 font-family: 'Open Sans';
 font-weight: 300;
 -webkit-appearance: none;
 vertical-align: middle;
}

a
{
 color: #000000;
 text-decoration: none;
 outline: 0;
}

a:hover
{
 text-decoration: underline;
}
 
form {
  margin: 0;
}

input::-moz-focus-inner
{ 
 border: 0;
}

input[type="submit"],.continue,button
{
 background-color: #808080;
 border-radius: 4px 4px 4px 4px;
 border: 1px solid #c0c0c0;
 color: #303030;
 cursor: pointer;
 font-size: 17px;
 padding: 6px 12px;
 vertical-align: middle;
 outline: 0;
 font-weight: 400;
 /* without the following 2 styles, my ipad 2 will make funny things with
    input[type=submit] elements. 2013-09-04 /mg */
 -webkit-appearance: none;
 -webkit-border-radius: 4px 4px 4px 4px;

 background: #c2c2c2; /* Old browsers */
 background: -moz-linear-gradient(top, #c2c2c2 0%, #a2a2a2 40%, #737373 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c2c2c2), color-stop(40%,#a2a2a2), color-stop(100%,#737373)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #c2c2c2 0%,#a2a2a2 40%,#737373 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #c2c2c2 0%,#a2a2a2 40%,#737373 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #c2c2c2 0%,#a2a2a2 40%,#737373 100%); /* IE10+ */
 background: linear-gradient(to bottom, #f0f0f0 0%,#e0e0e0 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c2c2c2', endColorstr='#737373',GradientType=0 ); /* IE6-9 */
}

a.continue
{
 display: inline-block;
}

.continue:hover
{
 text-decoration: none;
}

table
{
 border-collapse: collapse;
 border-spacing: 0;
}

td
{
 padding: 0;
}

th
{
 padding-bottom: 20px;
}

.universe
{
 height: 100%;
 width: 100%;
}

/* HEADER */

.logo
{
 position: absolute;
 top: 0;
 left: 0; 
 width: 200px;
 height: 82px;
 line-height: 78px;
 background: #f0f0f0;
 font-size: 18px;
 font-family: 'Open Sans', sans-serif;
 font-weight: 600;
 white-space: nowrap;
 border-bottom: 1px solid #d0d0d0;
 text-align: center;
}

.logo a
{
 color: #505050;
 padding: 8px;
 text-decoration: none;
}

.logo a:hover, .title a:hover
{
 text-decoration: none;
 color: #000;
 transition: all 0.5s linear;
}

.title
{
 position: absolute;
 top: 0;
 left: 200px;
 right: 0;
 font-size: 30px;
 font-family: 'Open Sans', sans-serif;
 font-weight: 300;
 /* white-space: nowrap; */
 height: 82px;
 line-height: 78px;
 border-bottom: 1px solid #d0d0d0;
}

.content
{
 text-align: left;
 vertical-align: middle;
}

/* IMPRINT */

.imprint {
  width: 400px;
  margin: auto;
}

.spacer_top
{
 height: 10%;
}

@media (max-height: 710px)
{
 .spacer_top
 {
  height: 5%;
 }
}

/* INDEX */

.faves
{
 	margin-top: 0px;
}

.faves table 
{
 margin: auto;
 text-align: left; /* reset content */
}

.intro
{
 line-height: 1.5;
 text-align: left;
 font-weight: 400;
 margin-bottom: 20px;
 padding-right: 15px;
 padding-left:  15px;
}

@media (min-width: 480px)
{
 .intro span
 {
  display: block;
  text-align: center;
 }
}