Difference between revisions of "Template:Team:TU Darmstadt/Css"

Revision as of 22:53, 15 October 2016

@font-face {

 font-family: 'Calibri';
 font-style: normal;
 font-weight: 400;
 src: local('Calibri'), url(https://fonts.gstatic.com/l/font?kit=YH3ek_qpdaY7ILI-bfzlYQ&skey=a1029226f80653a8&v=v8) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;

}

@font-face {

 font-family: 'Love Ya Like A Sister';
 font-style: normal;
 font-weight: 400;
 src: local('Love Ya Like A Sister Regular'), local('LoveYaLikeASister-Regular'), url(https://fonts.gstatic.com/s/loveyalikeasister/v7/LzkxWS-af0Br2Sk_YgSJY9N6oT7VVZB_kATuDWj1CMI.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;

}

/* Reset */

/* DEBUG

{

   outline: 1px solid red;
   opacity: 1 !important;
   visibility: visible !important;

}

/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; /*border: 0;*/ font-size: 100%; /*font: inherit; vertical-align: baseline;*/ }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

.navbar ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ; content: none; }

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

/*body { -webkit-text-size-adjust: none; }*/

h1 { color:black; }

/* Box Model

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

/* Containers */

.container { margin-left: 0; margin-right: 0; }

.container.\31 25\25 { width: 100%; max-width: 1750px; min-width: 1400px; }

.container.\37 5\25 { width: 1050px; }

.container.\35 0\25 { width: 700px; }

.container.\32 5\25 { width: 350px; }

.container { width: 1400px; }

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

.container.\31 25\25 { width: 100%; max-width: 1500px; min-width: 1200px; }

.container.\37 5\25 { width: 900px; }

.container.\35 0\25 { width: 600px; }

.container.\32 5\25 { width: 300px; }

.container { width: 1200px; }

}

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

.container.\31 25\25 { width: 100%; max-width: 1200px; min-width: 960px; }

.container.\37 5\25 { width: 720px; }

.container.\35 0\25 { width: 480px; }

.container.\32 5\25 { width: 240px; }

.container { width: 960px; }

}

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

.container.\31 25\25 { width: 100%; max-width: 118.75%; min-width: 95%; }

.container.\37 5\25 { width: 71.25%; }

.container.\35 0\25 { width: 47.5%; }

.container.\32 5\25 { width: 23.75%; }

.container { width: 95%; }

}

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

.container.\31 25\25 { width: 100%; max-width: 118.75%; min-width: 95%; }

.container.\37 5\25 { width: 71.25%; }

.container.\35 0\25 { width: 47.5%; }

.container.\32 5\25 { width: 23.75%; }

.container { width: 95% !important; }

}

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

.container.\31 25\25 { width: 100%; max-width: 112.5%; min-width: 90%; }

.container.\37 5\25 { width: 67.5%; }

.container.\35 0\25 { width: 45%; }

.container.\32 5\25 { width: 22.5%; }

.container { width: 90% !important; }

}

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

.container.\31 25\25 { width: 100%; max-width: 125%; min-width: 100%; }

.container.\37 5\25 { width: 75%; }

.container.\35 0\25 { width: 50%; }

.container.\32 5\25 { width: 25%; }

.container { width: 100% !important; }

}

/* Basic */

       #top_menu_under{
               align-items:center;
               text-align:center;
       }

       #top_menu_14{
               align-items:center;
               text-align:center;
       }

       #top_menu_inside{
               position:center;
               margin-left:auto;
               float:none;
       }

       #mw-content-text p:first-child{
               margin:0;
               padding:0;
       }

       #mw-content-text p:last-child{
               margin:0;
               padding:0;
       }

       #bodyContent p:last-child{
               margin:0;
               padding:0;
       }

       button{
               align-items:center;
       }

       #HQ_page table{
       margin-left:7vw;
       margin-right:auto;
       border:3px solid #019ac8;
       border-radius:6px;

box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

       margin-bottom:5rem;
       text-align:center;
       }

       #HQ_page table:first-child{
               text-align:center;

}

       #HQ_page th{

font-weight:bold; background-color:#019ac8; color:white;

               text-align:center;

}

       #HQ_page th:first-child{
               text-align:center;

}

#HQ_page th, td{ border:1px solid #019ac8; }

       #sideMenu{
       display:none;
       }

       #HQ_page{
       width:100%;
       text-decoration:none;
       }
       
       #HQ_page p{
       font-family:'Calibri', sans-serif;
       font-size:16px;
       }

       #top_title{
       display:none;
       }

       #content{
               margin:0;
               padding:0;
               width:100%;
       }
       .vviki{
               font-family:'Calibri', sans-serif;
               clear:both;
       }
       body {

background: white;

               margin:0;
               padding-top:0;

}

body.is-loading * { -moz-transition: none !important; -webkit-transition: none !important; -ms-transition: none !important; transition: none !important; -moz-animation: none !important; -webkit-animation: none !important; -ms-animation: none !important; animation: none !important; }

body, input, select, textarea { font-size: 16px; font-weight: 300; /*line-height: 1rem;*/ }

a { -moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out; -webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out; transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out; color: #019ac8; text-decoration: none; }

a:hover { color: #019ac8; border-bottom-color: transparent; }

       a:active {

color: #019ac8; border-bottom-color: transparent; }

       a:visited {

color: #019ac8; border-bottom-color: transparent; }

strong, b { font-weight: 600; }

em, i { font-style: italic; }

ul, ol, dl, table, blockquote { margin: 0 0 0 0; }

h1{ color:black; font-weight: 600; line-height: 2rem; margin-bottom: 1rem;

               font-family: 'Love Ya Like A Sister', cursive;
               font-size:42px;

}

h2{

color:#019ac8; font-weight: 600; line-height: 2rem; margin-bottom: 1rem;

               font-family: 'Love Ya Like A Sister', cursive;
               font-size:42px;
               padding-top:3rem;
               padding-bottom:1rem;

}

h3, h4{ color:black; font-weight:300; line-height:1.5rem }

h5{ color:black; font-weight:600; font-size:25px; font-family: 'Love Ya Like A Sister', cursive; }

h6{

color:black; font-weight:600; font-size:16px; font-family: 'Love Ya Like A Sister', cursive; }

/* Logo */

   #title{

background-color:#333; background: -webkit-radial-gradient(black 30%, #4d4d4d); background: -o-radial-gradient(black 30%, #4d4d4d); background: -moz-radial-gradient(black 30%, #4d4d4d); background: -radial-gradient(black 30%, #4d4d4d); display:inline-block; width:100%; padding-top:25px;

               padding-bottom:25px;

position:static; text-align:center; margin:0; }

#logoleiste{ float:none;

               width: 50%;

}

/* Nav */

.navbar {

               font-family:'Calibri', sans-serif;

margin-left:0;

               text-align:center;

background-color:#019ac8; display:block; width:100%; z-index:9999; position:static; box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.5); }

.navbar ul{ margin: 0; padding: 7px 0; border-bottom:0;

               line-height:20px;
               align-items:center;
               text-align:center;
               font-family:'Calibri', sans-serif;

}

.navbar li a{ font-size: 20px; cursor:pointer; text-decoration: none; color: #ececec; padding-right:2vw; display: block; border-bottom-style:none;

               font-family:'Calibri', sans-serif;

}

.navbar li a:link{ font-weight: normal; text-decoration: none; color: #ececec; }

.navbar li a:visited{ font-weight: normal; text-decoration: none; color: white; }

.navbar li a:hover{ font-weight: bold; text-decoration: none; color: white; }

.navbar li a:active{ font-weight: bold; text-decoration: none; color: white; }

#computer li a:active{ font-weight: bold; text-decoration: none; color: white; }

#tabletmenu li a:active{ font-weight: bold; text-decoration: none; color: white; }

#computer{ text-align:center; width:100%;

               font-family:'Calibri', sans-serif;

}

       .computer ul{
               align-items:center;
               text-align:center;
               padding-left:2vw;
               font-family:'Calibri', sans-serif;
       }

.computer ul li { text-align:center; display:inline-block; z-index:666;

               font-family:'Calibri', sans-serif;

}

       .computer ul li a{
               display:block;
               text-align:center;
       }

/*.drop{ width: auto; position:absolute; display:none; padding-top:0; margin-left:-1.5vw; background-color:#333; box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.5); z-index:333; margin-top:2.3rem; }

li:hover .drop { display: block; }

.drop li { width: auto; height: 6rem; line-height: 2rem; background-color:#333; padding-left:clear; padding-left:1vw; padding-right:1vw; margin:0; } .drop a{ font-size: 2rem; text-align: left; padding-left:0; margin:0; }*/

/* li a.current{ font-weight:600; color:white; }

/

       .navbar ul li a:active, .navbar ul li a:hover {
               font-weight:600;
               color:white;
       }

#menu{ background-color:#019ac8; text-decoration:none; border:none; text-align:left; }

#tabletbutton{ background-color:#019ac8; text-decoration:none; border:none; cursor:pointer; text-align:left; margin-left:1vw; padding-top:1px;

               padding-bottom:5px;

}

       #tabletbutton_bild{
               height:20px;
       }

#tabletmenu{ display:none; background-color:#019ac8; width:auto; text-decoration:none; border:none; cursor:pointer; margin-left:0; padding-right:2vw; padding-left:2vw; text-align:left; position:absolute; z-index:9999; height:100vh; margin-top:0; box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.5); }

       #tabletmenu ul{
               text-align:left;
               font-size:20px;
       }

#tabletmenu > ul > li:first-child{ margin-top:2rem; }

#tabletmenu > ul > li{ margin-top:0; width:auto; padding:0; margin-bottom:0; line-height:1.5rem;

               font-size:20px;

}

#tabletmenu > ul > li > a{ color:#ececec; margin-bottom:0;

               font-size:20px;

}

#tabletmenu > ul > li > a.current{ font-weight:600; color:white; }

#tabletmenu > ul > li > a:hover{ color:white; }

#computer > ul > li > a{ color:#ececec; }

#computer > ul > li > a:hover{ color:white; font-weight:600; }

#computer > ul > li > a.current{ font-weight:600; color:white; }

/*#computer.drop{ width: 100%; position: absolute; display:none; background-color:#333; padding-top:0; margin-left:-1.5vw; box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.5); z-index:333; }

#computer > ul > li .drop li a{ width: auto; height: 6rem; line-height: 1.5rem; background-color:#333; color:#ececec; padding-left:clear; padding-left:0.5vw; margin:0; } #computer .drop a{ font-size: 16px; text-align: left; padding-left:0; margin:0; }

#computer > ul > li .drop li a:hover{ font-weight: bold; text-decoration: none; color: white; }*/

#computer > ul > li > a:active{ color:white; font-weight:600; }

/* Banner */

   .banner{

position: center; width:100%; height:auto; text-align:center; position: relative; margin:0; z-index:333; } #banner{ width:100%; height:auto; }

/* MainHeader */

.mainHeader{ text-align:center; width:100%; }

#mainHeader{ text-align:center; } #mainHeader h1{

vertical-align:middle; font-family: 'Love Ya Like A Sister', cursive; font-size:42px; padding-top:7rem; padding-bottom:7rem; }

.page{ font-family:'Calibri', sans-serif;

               width:65vw;

margin-left:7vw; float:left;

               font-family:'Calibri', sans-serif;
               font-size:16px;

}

       .page_full{
               width:65vw;
               float:none;
               font-family:'Calibri', sans-serif;
               font-size:16px;
       }
       .page_full h5{
               float:left;
       }

/* abstract */

        .abstract{
               font-family:'Calibri', sans-serif;

float:left; width:60.8vw; height:auto; border:3px solid #019ac8; /*text-align:center;*/ box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); border-radius:6px; margin-bottom:2rem; padding:1rem 2vw;

               font-size:16px;
               font-weight:bold;
               margin-left: auto;
               margin-right: auto;

}

/*.abstract h5{ float:left; padding-bottom:7px; font-family: 'Love Ya Like A Sister', cursive; }*/ .abstract p{ clear:both; text-align:justify; font-size:16px;

               font-family:'Calibri', sans-serif;
               font-weight:bold;

}

.abstract2{ float:none; height:auto; border:3px solid #019ac8; /*text-align:center;*/ box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); border-radius:6px; margin-bottom:5rem; padding:1rem 2vw;

               font-size:16px;
               font-weight:bold;

}

       #check{
               font-size:42px;
       }

/*.abstractHP{ float:left; width:70%; margin-left:0; height:auto; border:3px solid #019ac8; text-align:center; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); border-radius:6px; margin-bottom:5rem; padding:1rem 3%; }*/

       .abstract2 #archie{
               border:none;
               margin-left:0;
               box-shadow:none;
               text-align:left;
       }
       .abstract2 #archie td, tr{
               border:none;
               text-align:left;
               vertical-align:middle;
       }

       #archie{
               border:none;
       }

/* highlights */ .rechts{ float:right; margin-right:7vw; width:14vw; height:auto; font-size:16px; text-align:center;

               padding:0;
               font-family:'Calibri', sans-serif;

}

   .highlights{

/*float:right;*/ margin-right:0; height:auto;

               width:13.6vw;
               font-family:'Calibri', sans-serif;

font-size:16px;

               border-top:3px solid #019ac8;

border-bottom:3px solid #019ac8;

               border-left:0.2vw solid #019ac8;
               border-right:0.2vw solid #019ac8;

text-align:center; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); border-radius:6px; margin-bottom:1rem;

               padding-bottom:0.2rem;

}

.highlights a{ border-bottom:none;

               text-decoration:none;

line-height:auto;

               float:none;
               text-align:center;
               padding-top:1rem;

}

       .highlights a:visited{

color:#019ac8;

               text-decoration:none;

}

.highlights a:hover{ font-weight:600; }

       .highlights a:active{
               text-decoration:none;
       }

.see_other{ width:14vw;

               font-family:'Calibri', sans-serif;

height:auto; margin-bottom:1rem; font-size:16px; color:#019ac8; background-color:white; border:3px solid #019ac8; text-align:center; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); border-radius:6px; padding:5px 0; }

a button.see_other:hover{ font-weight: bold; text-decoration: none; cursor:pointer; }

       .vf2_vr{

width:14vw;

               font-family:'Calibri', sans-serif;

height:auto; margin-bottom:1rem; font-size:16px; color:#019ac8; background-color:white; border:3px solid #019ac8; text-align:center; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); border-radius:6px; padding:5px 0; }

a button.vf2_vr:hover{ font-weight: bold; text-decoration: none; cursor:pointer; }

       .see_other_full{

width:14vw;

               font-family:'Calibri', sans-serif;

height:auto; margin-bottom:1rem; font-size:16px; color:#ececec; background-color:#019ac8; border:3px solid #019ac8; text-align:center; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); border-radius:6px; padding:5px 0; }

a button.see_other_full:hover{ font-weight: bold; text-decoration: none; color: white; cursor:pointer; }

       .vf2_vr_full{

width:14vw;

               font-family:'Calibri', sans-serif;

height:auto; margin-bottom:1rem; font-size:16px; color:#ececec; background-color:#019ac8; border:3px solid #019ac8; text-align:center; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); border-radius:6px; padding:5px 0; }

a button.vf2_vr_full:hover{ font-weight: bold; text-decoration: none;

               color:white;

cursor:pointer; }

.back_top{ height:auto;

               font-family:'Calibri', sans-serif;
               width:14vw;

font-size:16px; color:#019ac8; background-color:white; border:3px solid #019ac8; text-align:center; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); border-radius:6px; padding:5px 0; }

a button.back_top:hover{ font-weight: bold; text-decoration: none; cursor:pointer; }

       .back_top_full{

height:auto;

               font-family:'Calibri', sans-serif;
               width:14vw;

font-size:16px; color:#ececec; background-color:#019ac8; border:3px solid #019ac8; text-align:center; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); border-radius:6px; padding:5px 0; }

a button.back_top_full:hover{ font-weight: bold; text-decoration: none; color: white; cursor:pointer; } /* submenu

.submenu{ width:30%; height:10rem; margin-left:34.5%; background-color:white; text-align:center; margin-bottom:10rem; }

.submenu_results{ width:90%; height:10rem; margin-left:5%; background-color:white; margin-bottom:100px; text-align:center; }

.button_r{ background-color:#019ac8; cursor:pointer; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); border:none; border-radius:6px; text-align:center; vertical-align:middle; padding: 0 0 0 0; width:42vw; }

.button_r h2{ color:#ececec; font-size:30px; line-height:42px; vertical-align:middle; display:block; text-align:center; padding-top:33px; }

.button_r:hover{ cursor:pointer; }

   .button_r h2:hover{

font-weight:bold; text-decoration:none; color:white; cursor:pointer; } .button_m{ background-color:#019ac8; cursor:pointer; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); border:none; border-radius:6px; text-align:center; vertical-align:middle; padding: 0 0 0 0; width:27vw; }

.button_m h2{ color:#ececec; font-size:30px; line-height:42px; vertical-align:middle; display:block; text-align:center; padding-top:33px; }

.button_m:hover{ cursor:pointer; }

   .button_m h2:hover{

font-weight:bold; text-decoration:none; color:white; cursor:pointer; }

#a{ float:left; }

#b{ float:none; }

#c{ float:right; }*/

/* Content */

   .content{

clear:both;

               font-size:16px;

font-family:'Calibri', sans-serif; text-align:justify; float:left;

               width:100%;
               padding:0;
               margin-bottom:3rem;

}

       .content h6{
               padding-top:1rem;
               padding-bottom:0.5rem;
       }

       .content h5{
               padding-top:3rem;
               padding-bottom:0.5rem;
       }

       .content a{
               text-decoration:none;
               color:#019ac8;
       }

.content2{ font-size:16px; } #content2{ font-family:'Calibri', sans-serif; width:86vw; margin-left:7vw; text-align:justify; padding:0 0 0 0; } .content_left{ font-size:16px; font-family:'Calibri', sans-serif; width:40vw; margin-left:0; text-align:justify; margin-bottom:5rem; float:left; } .content_right{ font-size:16px; font-family:'Calibri', sans-serif; width:40vw; margin-right:0; text-align:justify; float:right; margin-bottom:5rem; } /*.contentHP3{ clear:both; font-size:16px; font-family:'Calibri', sans-serif; width:30vw; margin-left:0; text-align:justify; float:left; margin-bottom:5rem; }*/

.more_parts{ width:86vw; margin-left:7vw; background-color:white; margin-bottom:10rem;

               padding:0;
               text-align:center;
               text-decoration:none;
               font-family:'Calibri', sans-serif;

}

       .more_parts a{
               padding-top:0;
               margin-top:0;
       }

.specialPrize{ width:25vw; font-size:16px; color:#ececec; background-color:#019ac8; border:3px solid #019ac8; text-align:center; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); border-radius:6px; padding:0.2rem 0;

               margin-top:0;
               font-family:'Calibri', sans-serif;

}

       button .specialPrize{
               margin-top:0;
       }

       #a{
               float:left;
       }

       #b{
               float:left;
               margin-left:5.5vw;
       }

       #c{
               float:right;
       }

       a button.specialPrize:{

align-items:justify; }

.specialPrize h2{ font-weight:normal; color:#ececec; margin:0; /* dringend notwendig damit der button schmal ist!!!*/ }

.specialPrize h2:hover{ font-weight: bold; text-decoration: none; color: white; cursor:pointer; }

a button.specialPrize:hover{ font-weight: bold; text-decoration:none; color:white; cursor:pointer; }

       .politician{
               clear:both;
       }

       button.einstein_rosen_bridge{

font-size:16px; color:#ececec; background-color:#019ac8; border:3px solid #019ac8; text-align:center; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); border-radius:6px; padding:0.2rem 10px;

               margin-top:0;
               font-family:'Calibri', sans-serif;

}

button.einstein_rosen_bridge:hover{ font-weight: bold; text-decoration:none; color:white; cursor:pointer; }

       button.einstein_rosen_bridge:active{

font-weight: bold; text-decoration:none; color:white; cursor:pointer; }

/* Images */

   .imageHP_r{

width:20vw; height:auto; margin-right:0; float:right;

               margin-bottom:5rem;

} .imageHP_l{ width:20vw; height:auto; margin-left:0; float:left;

               margin-bottom:5rem;

}

       .team{
               width:100%;
               margin:0;
               padding:0;
       }

/* Tabelle */

       table{

border:3px solid #019ac8; border-radius:6px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

               font-family:'Calibri', sans-serif;

} #groupParts{ margin-left:7vw; margin-right:7vw; width:86vw; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); border:3px solid #019ac8; border-radius:6px; font-size:16px; height:auto; border-spacing:0; text-align:center; margin-bottom:5rem; }

       #lj_calender table{
               margin-left:0;
               margin-right:0;
       }

       #lj_calender table td{
               width:70px;
               padding:0;
       }

       caption h5{

background-color:#019ac8; color:white;

               text-align:center;
               padding-top:0.5rem;
               padding-bottom:0.5rem;
       }

       #lj_calender button{
               background-color:white;
               border:none;
               font-size:16px;
               padding:5px 7px;
       }

       button p.LWdate{
               color:#808080;
               font-size:12px;
       }

       #lj_calender button:hover{
               background-color:#019ac8;
               border:none;
               color:white;
               font-size:16px;
               cursor:pointer;
       }

       #lj_calender button:hover p.LWdate{
               color:#ececec;
       }

       #lj_calender button:active{
               background-color:white;
               border-style:none;
               font-size:16px;
       }

       #lj_calender button:visited{
               background-color:white;
               border-style:none;
               font-size:16px;
       }

th{ font-weight:bold; background-color:#019ac8; color:white;

               text-align:center;

} th, td{ border:1px solid #019ac8;

               text-align:center;

} th #t1{ width:7vw;

               text-align:center;

} th #t2{ width:7vw; } th #t3{ width:7vw; } th #t4{ width:11vw; } th #t5{ width:16vw; } th #t6{ width:16vw; } th #t7{ width:16vw; } th #t8{ width:6vw; }

/* Footer */

#footer{ background-color:#333; background: -webkit-linear-gradient(top, black 30%, #4d4d4d); background: -o-linear-gradient(bottom, black 30%, #4d4d4d); background: -moz-linear-gradient(bottom, black 30%, #4d4d4d); background: -linear-gradient(to bottom, black 30%, #4d4d4d); /*height:10%;*/ padding-bottom:0; width:100%; } .footer{ clear:both; margin-bottom:0;

               font-family:'Calibri', sans-serif;

}

/* Links IDs */

   .verlinked{

margin-bottom:1rem; margin-top:1rem; clear:both;

               z-index:666;

}

   .verlinked h5{
               padding-top:5rem;
               padding-bottom:0.5rem;
   }

.read_more{ width:auto; float:left; font-size:16px; color:#ececec; background-color:#019ac8; border:3px solid #019ac8; text-align:center; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); border-radius:6px; margin-bottom:0.5rem;

               margin-top:0.5rem;
               padding:5px 1vw;
               font-family:'Calibri', sans-serif;

}

button.read_more:hover{ font-weight: bold; text-decoration: none; color: white; cursor:pointer; }

       button.read_more:visited{
               text-decoration:none;
               border:none;
       }

       button.read_more:active{
               text-decoration:none;
               border:none;
               width:auto;

float:left; font-size:16px;

       .bild{
       font-size:14px;
       text-align:justify;
       font-family:'Calibri', sans-serif;
       line-height:1.5rem;
       }

       .bild p{
       font-size:14px;
       text-align:justify;
       font-family:'Calibri', sans-serif;
       }

       .bild50{
       height:5rem;
       float:left;
       }

/*references*/

       .references{
               clear:both;
               font-family:'Calibri', sans-serif;
               font-size:12px;
               border-top:3px solid #019ac8;
               margin-top:5rem;
               text-decoration:none;
       }
       
       .references h6{
               color:#019ac8;
               padding-top:0.5rem;
       }

       .references ul{
               margin-left:0;
               padding-left:0;
       }

rel="stylesheet" href="bluebox/css/theDoctor.css"

.scrollbox {

   z-index: 999;
   -webkit-transition: top 1.5s;
   transition: top 1.5s;
   width: 13.6vw;

}

.scrollbox div, .scrollbox button {

   position: relative;

}

.scrollbox.scrolled {

   position: fixed;
   top: 80px;
   bottom: auto;

}

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

   body{
       width:100%;
       padding:0;
       overflow-x: hidden;
   }

   .vviki{
       width:100%;
       padding:0;
   }

   #HQ_page{
       width:100%;
       padding:0;
   }

   #head{
       padding:0;
       margin:0;
       width:100%;
   }

   #logoleiste{
       width: 90%;
   }

   .page {
       width: 100%;
       float: none;
       margin-left:0;
       margin-right:0;
   }

   .page_full {
       width: 100%;
       float: none;
       margin-left:0;
       margin-right:0;
   }

   .abstract {
       width: 90%;
       float: none;
   }
   
   .abstract2{
       width:80%;
   }

   .right {
       width: 100%;
       float: none;
       display: none;
   }

   .scrollbox {
       display: none;
       width: 100%;
       left: 0px;
       right:0px;
       background-color: whitesmoke;
       box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
       border:3px solid #019ac8;

border-radius:6px;

   .scrollbox.scrolled {
       display: none;
       top: auto;
       bottom: 0;
   }

   .scrollbox > div {
       display: none;
       width: 100%;
   }

   .back_top_full{
       width:auto;
   }

   .see_other_full{
       width:auto;
   }

   .highlights{
       border:none;
   }
   
   .banner{
       width:100%;
       margin:0;
   }

   #banner{
       width:100%;
       margin:0;
   }

  #title{
       width:100%;
       margin:0;
   }
  .navbar{
       width:100%;
       margin:0;
  }

}