/* spinnaker-regular - latin */
@font-face {
  font-family: 'Spinnaker';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/spinnaker-v9-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Spinnaker'), local('Spinnaker-Regular'),
       url('fonts/spinnaker-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/spinnaker-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/spinnaker-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/spinnaker-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/spinnaker-v9-latin-regular.svg#Spinnaker') format('svg'); /* Legacy iOS */
}

html, body{
    margin:0;
    padding:0;
}

#bg{
    background-color:#006969;
    background-image:linear-gradient(to bottom, #006969, #001515 90%);
    margin:0;
    padding:0;
    height:100%;
    width:100%;
    position:fixed;
    z-index:-1;
}

#mainbox{
    padding-top:6%;
    margin-bottom:150px;
}

#impressum{
    position: fixed;    
    bottom:0px;
    width:100%;
    background-color:#cdcdcd;
    font-family:'Spinnaker',sans-serif;
}

#impressum div{
    margin:2px;
    font-size:70%;
}

#impressum div h1{
    font-size:100%;
    margin-bottom:2px;
    margin-top:0px;
}

#impressum div p{
    margin-left:12px;
    margin-bottom:0px;
    margin-top:0px;
}

#outer{
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
}

#topbox{
margin-top:-40px;
}

table tr td{
	padding:3px;
	vertical-align:top;
}

.box{
	margin-bottom:20px;
    
    
    padding:10px;

    background-color:#cdcdcd;
    font-family:'Spinnaker',sans-serif;
}

.inner{

    max-width: 25em;
    margin-left:auto;
    margin-right:auto;
    margin-top:1em;
}

#myface{
    margin-left:auto;
    margin-right:auto;
    margin-bottom:1em;
    width:75px;
    height:75px;    

}
#myface img{
    border-radius:50%;
    border:4pt solid #cdcdcd;
    width:75px;
    height:75px;    
}

.box .link a img{
    width:14pt;
    border:0px;
    margin-right:0.5em;
}

 /* unvisited link */
.box .link a:link {
    color: #0000aa;
}

/* visited link */
.box .link a:visited {
    color: #0000aa;
}

/* mouse over link */
.box .link a:hover {
    color: #006600;
}

/* selected link */
.box .link a:active {
    color: #006600;
}




@media only screen and (min-width: 700px) {
    #topbox{
	margin-top:-75px;
	padding:50px;
    }
    #myface {
	margin-right:-50px;
	margin-left:auto;
	margin-top:0px;
	width:130px;
	height:130px; 
    }
    #myface img {
	width:130px;
	height:130px; 
    }
}