@charset "utf-8";


@font-face {
    font-family: 'Transit';
    src: url("fonts/transit.ttf") format('truetype');
}

body {
    text-align: left;
    font-size: 12px;

}

span {
    cursor:auto;
}

a:hover{
    cursor:pointer;
}



a.canh {
    text-decoration: none;
    color: red;
    font-family: Arial, Helvetica, sans-serif;
}
b.can {
    text-decoration: none;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
}
a.can {
    text-decoration: none;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
}

#content-body {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;

}


p.tjust {
    font-family: "Laila", Arial, Helvetica, sans-serif;
    text-align:justify;
    font-size:11px;
}


p.center {
    font-family: "Salsa", Arial, Helvetica, sans-serif;
    font-size:12px;
    text-align:center;
    margin-left: 10px;
    margin-right: 13px;
    margin-top: 8px;
    margin-bottom: 8px;
}
p.pass{
    font-family: "Salsa", Arial, Helvetica, sans-serif;
    font-size:10px;
    text-align:justify;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 3px;
    margin-bottom: 8px;
}

.hrl {
    margin-left: 0px;
    margin-right: 00px;
    margin-top: 3px;
    margin-bottom: 3px;
}
h3,h4 {
        padding-left: 10px;
}

img.slrcl {
    border: 1px solid gray;
    margin-right: 9px;
    margin-bottom : 10px;
    -webkit-box-shadow: 4px 4px 5px #000000;
    box-shadow: 4px 4px 5px #000000;
    filter: progid:DXImageTransform.Microsoft.Shadow(strength = 4, direction = 135, color = '#000000');
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(strength = 4, Direction = 135, Color = '#000000')";
}
img.slrcl:hover {
    border: 1px dotted white;
    margin-right: 9px;
    margin-bottom : 10px;
    -webkit-box-shadow: 4px 4px 5px #333;
    box-shadow: 4px 4px 5px #333;
    filter: progid:DXImageTransform.Microsoft.Shadow(strength = 4, direction = 135, color = '#000000');
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(strength = 4, Direction = 135, Color = '#000000')";
    border-radius: 8px;
}



.pcent  {
    text-align: center;
}

hr  { height: 1px solid #a29b9b;
      margin-top : 2px;
      margin-bottom : 4px;
}   

.trans {
    background: transparent;
}

table {
    border: 1px solid gray; 
    border-collapse: separate;
    border-spacing: 4px; border-radius: 6px;
    empty-cells: show;
    background-color : #f5f5f5; 
}

.pad3 { 
    padding: 3px; 
    color:black; 
    font-size: 10px; 
    font-weight: 600;
    font-family: Laila, Arial, Helvetica, sans-serif;
}

td.p2 {
    border: 1px solid gray;
    border-spacing: 2px; border-radius: 3px;
    padding: 2px;
    font-family: Gorgia, Arial, Helvetica, sans-serif;
    font-size: 70%;
    text-align: center;
    vertical-align: top;
}

table.ohne {
    border: 0px solid gray; 
    border-collapse: separate;
    border-spacing: 3px; 
    border-radius: 4px;
    empty-cells: show;
    background: transparent;
}
table.min {
    border: 0px; 
    border-collapse: separate;
    empty-cells: show;
    background: transparent;
    border-spacing: 6px 1px;
}

td.quick {
    border-radius: 5px;
    border-spacing: 1px;
    padding: 0px 0px 0px 5px;
    font-family: "Laila", Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 11px;
    text-shadow: 3px 3px 3px black;
    text-align: left;
    vertical-align: top;
    color: white;
   }

td.tvline {
    border: 1px solid white; 
    border-radius: 4px;
    padding: 1px 0px 0px 5px;
    font-family: "Salsa", Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 12px;
    text-shadow: 2px 2px 2px gray;
    text-align: left;
    vertical-align: top;
    background-color: lightgrey;
    color: black;
    cursor: pointer;
}

td.tvline:hover{
    background-color: #e78f08;
}




.tabimg {
    vertical-align: -1px;
    margin-right: 5px;
    margin-left: 0px;
}

.tabimg1 {
    vertical-align: sub;
    margin-right: 0px;
    margin-left: 0px;
    padding-bottom: 1px;
}


th.ohne{
    border: 0px solid gray;
    border-spacing: 2px; border-radius: 4px;
    padding: 4px;
    font-family: Gorgia, Arial, Helvetica, sans-serif;
    font-size: 90%;
    text-align: center;
    vertical-align: top;
}

tr.ohne {
    vertical-align: top;
    background: transparent;
}


td.ohne{
    border: 0px solid gray;
    border-spacing: 2px; 
    border-radius: 4px;
    padding: 4px;
    font-family: "Salsa", Arial, Helvetica, sans-serif;
    font-size:12px;
    text-align: left;
    vertical-align: top;
    background: transparent;
    empty-cells: show;
    
}

td.tdes{
    border: 0px;
    padding: 0px;
    margin: 0px;
    font-family: "Salsa", Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-align: left;
    vertical-align: top;
    background: transparent;
    empty-cells: show;
}

td.tedi{
    border: 0px;
    padding: 0px;
    margin: 0px;
    font-family: "Salsa", Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: left;
    vertical-align: top;
    background: transparent;
    empty-cells: show;
}



td.ohne-p{
    border: 0px solid gray;
    border-spacing: 0px; 
    padding: 0px;
    font-family: "Salsa", Arial, Helvetica, sans-serif;
    font-size: 1.0em;
    text-align: left;
    vertical-align: middle;
    text-shadow: 1px 2px 2px gray;
}

#aaaa{
    font-weight: 500;
}

.tab-zentriert {
    margin: 0 auto;
}

.vc {	
    text-align: center;
    width: 720px;
    height: 480px;
}
.vc720405 {	
    text-align: center;
    width: 720px;
    height: 405px;
    padding: 0px;
}
.vc800450 {	
    text-align: center;
    width: 800px;
    height: 450px;
    padding: 0px;
}



.vc480   {   
    text-align: center;
    width: 480px;
    height: 360px;
    padding: 0px;
}  

.vc770430   {   
    width: 770px;
    height: 433px;
    padding: 0px;
}  


.vc480320   {   
    text-align: center;
    width: 480px;
    height: 320px;
    padding: 0px;
}  
.vc480270   {   
    text-align: center;
    width: 480px;
    height: 270px;
    padding: 0px;
}  

.vc420   {   
    text-align: center;
    width: 420px;
    height: 240px;
    padding: 0px;
}  

.vc640   {   
    text-align: center;
    width: 640px;
    height: 360px;
    padding: 0px;
}   

.vc640-1   {   
    text-align: center;
    width: 640px;
    height: 272px;
    padding: 0px;
}   

.vc120   {   
    width: 120px;
    height: 68px;
    padding: 0px;
} 

.rundv  {
    width: 170px;
    height: 165px;
}


.video-container {
    display: inline-block;
    text-align: center;
}

video {
    border: 1px solid var(--spruchfarbe);
    -webkit-border-radius: 2px;
    border-radius: 3px;
    padding: 0px;
}



figure {float: left;
        max-width: 260px;
        border: none;
        margin: 0 10px 2px 10px;
        padding: 8px;
        text-align: center;}

figcaption {font-style: italic;
            font-size: 0.8em;}


ul {
    list-style-type: square;
    padding: 0px;
    margin-left: 25px;
    margin-top: 3px;
    font-size: 0.6em;
    text-decoration: none;
    font-family: "Salsa", Arial, Helvetica, sans-serif;
   }
   


#rnav {
    position: absolute;
    left: 1px;
    top: 1px;
    width: 148px;
    height: 148px;
    z-index: 100;

}

#bnav {
    position: absolute;
    left: 1px;
    top: 1px;
    width: 148px;
    height: 148px;
    z-index: 1000;
}

#rpar
{
    font-family: "Salsa", Arial, Helvetica, sans-serif;
    font-size: 15px;
    position: relative;
    font-weight: 500;
    text-shadow: 3px 3px 3px black;
}

pre {
    font-family: "Laila", Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 10px;
}
#startinfo {
    position: absolute;
    left: 165px;
    top: 0px;
    width: 550px;
    height: 140px;
    color: white;   
    font-family: "Salsa", Arial, Helvetica, sans-serif;
    text-align: justify;
    font-size: 13px;
    margin-top: 5px;
    text-shadow: 4px 4px 4px black;
}


#subm {
    padding-top: 5px;
    text-align: center;
    top : 5px;
    left: 5px;
    position: absolute;
    height: 170px;
    width: 290px;
    background-image: url(../images/misc/infotable.png);
    background-repeat:no-repeat;
    font-family: "Laila", Arial, Helvetica, sans-serif;
}


#la {
    cursor:pointer;
   }
#ra {
    cursor: pointer;
    
}


.pix40 {

    width: 60px;
}

.lreif {
    margin-left: 35px; 
    margin-top: 5px;
}
.lreif1 {
    margin-left: 65px; 
    margin-top: 5px;
}

.contm {
    margin-top: 5px;
}

.contm h3 {
    line-height: 0.4;
    margin-top: 0px;
}
.contm h3 div {
    font-size: 13px;
    color: black;
    display: inline-block;
    font-family: "Salsa", Arial, Helvetica, sans-serif;
    margin-bottom: 0px;
    margin-top: -7px;
    font-weight: 500;
    text-shadow: 3px 2px 2px grey;
    
}
.contm h3 div img {
    vertical-align: auto;
    float: left;
}

.contm p{
    font-family: "Salsa", Arial, Helvetica, sans-serif;
    font-size:12px;
    text-align:justify;
    margin-left: 10px;
    margin-right: 10px;
    font-weight: 400;
    line-height: 1.3;    
}

.redbold {
    color: red;
    font-weight: bold;
}


#kontakt-mann {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 340px;
    top: 330px;
    z-index: 1000;
}

#att {
    position: absolute;
    left: 70px;
    top: 345px;
    z-index: 1000;
}



#quickbar {
    opacity: 0.3;
}
#qb5 {
    opacity: 0.4;
}


.footer-img { 
    background: transparent;
    padding: 0px;
    margin: 0px;
}

#fixhead {
    position: fixed ;
    position: absolute;
    width:810px;
    height:100px;
    margin-bottom: 0px;
    }

#bikehead {
    position: fixed ;
    position: absolute;
    width:140px;
    height:100px;
    margin-bottom: 0px;
    left: 815px;
    }

#nofixhome {
    position:relative;
    overflow:auto;
    width: 787px;
    top: 105px;
    height: 400px;
    left: 8px;
    border: 1px solid #808080;
    background-color:  #f5f5f5;
    opacity: 1.0;
    padding-top: 4px;
    padding-right: 5px;
    cursor: pointer;
    border-radius: 3px;
    }

#nofixtrailer {
    position:absolute;
    overflow: hidden;
    width: 142px;
    top: 105px;
    height: 430px;
    left: 810px;
    background-color:  transparent;
    opacity: 1.0;
    padding-top: 4px;
    cursor: pointer;
    border: 1px solid white;
    }
#nofixtrailer img {
        margin-bottom: 3px;
    }   
#homefooter {
    position: fixed;
    position: absolute;
    width:789px;
    height: 20px;
    top: 515px;
    left: 8px;
    border: 1px solid #808080;
    background-color:  #f5f5f5;
    opacity: 0.9;
    padding-top: 4px;
    padding-left: 3px;
    border-radius: 3px;
    font-family: "Salsa", Arial, Helvetica, sans-serif;
    color: #808080;
    }


    
hr.style-four { height: 12px; border: 0; box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5); }
hr.style-two { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));  margin-bottom: 3px;}
hr.style-seven { height: 30px; border-style: solid; border-color: black; border-width: 1px 0 0 0; border-radius: 20px; } 
hr.style-seven:before { /* Not really supposed to work, but does */ display: block; content: ""; height: 30px; margin-top: -31px; border-style: solid; border-color: black; border-width: 0 0 1px 0; border-radius: 20px; }

.hr-sect {
	display: flex;
	flex-basis: 90%;
	align-items: center;
	margin: 2px 0px;
        margin-left: 8px;
        margin-right: 8px;
        font-family: "Salsa", Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 1.1em;
}
.hr-sect::before,
.hr-sect::after {
	content: "";
	flex-grow: 1;
    height: 1px;
	font-size: 0px;
	line-height: 0px;
	margin: 0px 2px;
}

.img-zoom {
    z-index: 500000000;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
}
 
.transition {
    -webkit-transform: scale(2.3); 
    -moz-transform: scale(2.3);
    -o-transform: scale(2.3);
    transform: scale(2.3);
    z-index: 500000000;
    border: 1px solid black;
}

.transition2 {
    -webkit-transform: scale(2.5); 
    -moz-transform: scale(2.5);
    -o-transform: scale(2.5);
    transform: scale(2.5);
    z-index: 500000000;
    
}

.dot {
        display:inline; 
    	white-space: nowrap;
}

.imgbest {
    border: 1px solid grey; 
    border-radius: 2px;
}

.tooltip_templates { display: none; }

.tooltip-content { 
        
        z-index: 100000;
}
.tooltip img {
    cursor:  help;
}


.bild:hover {
-webkit-box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);
}
.bild {
-webkit-box-shadow: 0px 0px 15px 5px rgba(0, 185, 233, .75);
box-shadow: 0px 0px 15px 5px rgba(0, 185, 233, .75);
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

.galleria-tb {
    visibility: visible; 
    border-radius: 3px; 
    border: 1px solid gray; width: 480px; 
    height: 300px; 
    background: transparent;
    padding-top: 0px; 
    left: 0px; 
    top: 5px; 
    margin: 0; 
    position: relative; 
    overflow: hidden;
}


.galleria{ 
    width: 700px; 
    height: 423px; 
    left: 15px; 
    top: 17px; 
    position: absolute; 
}

.galleriacenter{ 
    width: 700px; 
    height: 1px;
    left: 15px; 
    top: 50%;
    position: absolute; 
    background: white;
    display: none;
    z-index: 1;
}
.galleriabottom{ 
    width: 700px; 
    height: 423px; 
    left: 15px; 
    top: 17px; 
    position: absolute; 
    background-color: #000; 
    
}

.button-3d:active{
    -webkit-box-shadow: 0px 2px 0px #d35400;
    box-shadow: 0px 2px 0px #d35400;
    position:relative;
    top:4px;
}


.text {
  fill: url(#gr-radial);
}


.myctab {
    width: 25px;
    height: 14px;
    vertical-align: middle;
    margin: 1px 3px 1px 3px;
    
}

.stattab {
    width: 24px;
    height: 13px;
    margin: 0px 3px 1px 3px;
    cursor: pointer;
    vertical-align: sub;
}

td.eutour{
    border: 1px solid gray; 
    border-radius: 4px;
    padding: 1px 0px 0px 5px;
    font-family: "Salsa", Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 12px;
    text-shadow: 2px 2px 2px white;
    text-align: center;
    vertical-align: text-top;
    background-color: #f5f5f5;
    color: black;
    cursor: pointer;
    empty-cells: show;
    opacity: 0.8;
}



#quickb {
    position: absolute;
    left: 31px;
    top: 3px;
    width: 70px;
    height: 145px;
    cursor:url("/images/misc/idee.cur"),pointer;
    z-index: 5000;
}

#bike1 {
    position: relative;
    width: 300px;
    left: 10px;
    top: 7px;
    float: left;
}
#bike2 {
    position: relative;
    top: 7px;
    margin-left: 30px;
    float: left;
    width: 310px;
}
#bike3 {
    position: relative;
    width: 300px;
    top: 7px;
    float: right;
    margin-right: 10px;
}
#men-home,#tog,#but-kut,#but-touren,#but-bikes,#but-ext,#but-pdf,#but-quick,#but-otv,#but-imp,#but-bil,#but-vid,#but-kon,#but-trb,#but-stat,#btwitter,#nerec,#barec,#firec,#larec {
    cursor: pointer;
}
#opahelp {
    cursor: help;
}
#whiteknopf,#darkknopf, #aboutme, #diaknopf, #impress, #login, #paesse, #inform, #meinung, #playrund {
    cursor: pointer;
}

#laufma {
    -moz-transition: all 1s ease-in;
    -webkit-transition: all 1s ease-in;
    -ms-transition: all 1s ease-in;
    transition: all 1s ease-in;
}

#ifrclose {
    position : absolute;
    top: 520px;
    left: 800px;
    width: 100px;
    height: 25px;
    font-family: "Laila", Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 1.1em;
}

#gpxdesc {
    position : absolute;
    top: 520px;
    left: 15px;
    width: 500px;
    height: 25px;
    font-family: "Laila", Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 1.1em;
}

#tblis {
    position: absolute;
    width: 150px;
    height: 100px;
    left: 780px;
    top: 30px;
    cursor: pointer;
}

#tbgpx {
    position: absolute;
    width: 150px;
    height: 100px;
    left: 780px;
    top: 110px;
    cursor: pointer;
}
#tbaudio {
    position: absolute;
    width: 150px;
    height: 130px;
    left: 780px;
    top: 190px;
    cursor: pointer;
}

#tbynav {
    position: absolute;
    width: 150px;
    height: 30px;
    left: 800px;
    top: 310px;
    cursor: pointer;
    border: 1px solid red;
}



#tbcal {
    position: absolute;
    width: 240px;
    height: 320px;
    left: 8px;
    top: 5px;
    z-index: 1000;
}

#gal-rahmen {
    position: absolute;
    width: 497px;
    height: 315px;
    left: 272px;
    top: 5px;  
    background-image: url(../images/misc/tbookbg.png);
    z-index: 1;
    border-radius: 4px;
    border: 1px solid grey;
}

#gal-popover {
    position: absolute;
    width: 490px;
    height: 310px;
    left: 280px;
    top: 7px;   
    z-index: 2;
}
#date-popover {
    position: absolute;
    width: 940px;
    height: 193px;
    left: 5px;
    top: 347px;
    overflow: auto;
    padding-right: 10px;
    border: 1px dotted lightsteelblue;
    
}

p.pjustcal {
    font-family: "Salsa", Arial, Helvetica, sans-serif;
    font-size:12px;
    text-align:justify;
    margin-left: 5px;
    margin-right: 10px;
    margin-top: 2px;
    margin-bottom: 2px;
    padding-bottom: 3px;
    text-shadow: 2px 2px 2px #ffffff;
}

h4.cal {
    margin-top: 2px;
    margin-bottom: 2px;
    padding-left: 4px;
}
#tbx {
    position: absolute;
    top: 700px;
    left: 910px;
    width: 50px;
    height: 50px;
    z-index: 20000;
    visibility: hidden;
    cursor: pointer;
}

#gpxdown {
    float: right;
    margin-right: 5px;
    margin-top: 3px;
    
}

#hometrailer {
    cursor: pointer;
}


#playlist {
    width:450px;
    height: 395px; 
    overflow: auto;
    margin-left: 13px; 
    font-size: 1.1em; 
}


#audio    {background:#eee;width:433px;padding:0px; border: 1px solid rgb(185, 161, 115); border-radius: 4px;}

#zubild {
    width: 430px;
    height: 270px;
    position: absolute;
    margin-left: 530px;
    left: -50px;
    top: 9px;
    
}

#zutext {
    width: 430px;
    height: 236px;
    position: absolute;
    margin-left: 530px;
    left: -50px;
    top: 280px;
    overflow: auto;
    text-align: justify;
    padding-right: 12px;
    padding-left: 3px;
    padding-top: 3px;
    font-size: 11px;
    font-family: "Salsa", Arial, Helvetica, sans-serif;
    
}

.ohnebull {
list-style-type: none;
padding: 0;
margin: 0;

}


.dwrapper { 
    position: absolute;
    left: 4px;
    top: 1px;
    height: 535px;
    width: 950px; 
    overflow: auto;
}

.textv { vertical-align: middle;}


#blog_pic {
    position: absolute;
    left: 7px;
    top: 418px;
    width: 192px;
    height: 108px;
}




#blog_shadow {
    position: absolute;
    width: 725px;
    height: 531px;
    left: 219px;
    top: 8px;
    opacity: 1.0;
    visibility: hidden;
    z-index: 10000;
    padding: 0px;
    }

#blog_text {
    position:absolute;
    width: 745px;
    height: 533px;
    left: 210px;
    top: 3px;
    opacity: 1.0;
    padding-top: 4px;
    padding-right: 5px;
    border-radius: 3px;
    color: #eee;
    z-index: 5000;
    }

.blog_body {
    width: 720px;
    color: #eee;
    background-color: rgb(71, 71, 71);
    font-size: 1.0em;
    margin-left: 10px; 
    border: 1px solid grey;
    text-align: justify;
    margin-bottom: 14px;
    padding-right: 1px;
    padding-left: 1px;
    border-radius: 4px;
}

.blog_body_rund_vid {
    width: 200px;
    color: #eee;
    background-color: rgb(71, 71, 71);
    font-size: 1.0em;
    margin-left: 10px; 
    border: 1px solid grey;
    text-align: justify;
    margin-bottom: 14px;
    padding-right: 1px;
    padding-left: 1px;
    border-radius: 4px;
}


.blog_body_lang {
    width: 98%;
    color: #eee;
    background-color: rgb(71, 71, 71);
    font-size: 1.0em;
    margin-left: 10px; 
    border: 1px solid grey;
    text-align: justify;
    margin-bottom: 14px;
    padding-right: 1px;
    padding-left: 1px;
    border-radius: 4px;
}

.img_border {
    border: 1px solid grey;
    border-radius: 3px;
}

.img_border:hover  {
    opacity: 0.6;
    border: 1px solid white;
}

.rtext {
    margin-right: 8px;
    height: auto;
    margin-top: 3px;
    float: left;
    margin-bottom: 3px;
    margin-left: 3px;
}
.pblog {
    margin-left: 3px;
    margin-right: 3px;
}


#oplink {
    position: absolute;
    left: 10px;
    top: 5px;
    width: 410px;
    height: 480px; 
}
#zutzl {
    position: absolute;
    left: 349px;
    top: 245px;
    width: 390px;
    height: 280px;
}




#bloglogo {
    position: absolute;
    left: 10px;
    top: 2px;
    width: 40px;
    height: 40px;
}


.novisblog {
    display: none;
    z-index: 10000;
}


.aktuelle_km {
    padding-left: 80px;
    padding-top: 20px;
    text-align: left;
}
#retc {
    position:absolute;
    width: 738px;
    height: 40px;
    left: 215px;
    top: 492px;
    background-color: lightgrey;
    opacity: 1.0;
    padding-top: 0px;
    padding-right: 2px;
    border-radius: 2px;
    color:black;
    border: 1px solid rgb(75, 74, 74);
    border-radius: 5px;
    font-size: 1.1em;
}

.i50 {
    text-indent: 10px;
    font-size: 0.8em;
    margin: 0px;
}

.i60 {
    text-indent: 10px;
    font-size: 0.8em;
    margin: 0px;
    color: black;
}
.h4s {
    margin: 0px;
    color: rgb(9, 96, 136);
    font-size: 0.9em;
}

.links {
    float: left;
    margin-right: 10px;
    } 
.rechts {
        float: right;
        margin-left: 10px;
        } 

.npass {
        opacity: 0.6;
}

.dlbutton {
    background-color: rgb(19, 132, 170);
    border: 1px solid white;
    border-radius: 3px;
    color: white;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 15px;
    cursor: pointer;
  }

  .dlbutton:hover {
      opacity: 0.8;
      background-color: rgb(58, 185, 228);
      color: black;
      border: 1px solid black;
  }