/* roboto-regular - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url('fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */ url('fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */ } /* roboto-700 - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url('fonts/roboto-v20-latin-700.eot'); /* IE9 Compat Modes */ src: local(''), url('fonts/roboto-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/roboto-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/roboto-v20-latin-700.woff') format('woff'), /* Modern Browsers */ url('fonts/roboto-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/roboto-v20-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */ } /* roboto-900 - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 900; src: url('fonts/roboto-v20-latin-900.eot'); /* IE9 Compat Modes */ src: local(''), url('fonts/roboto-v20-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/roboto-v20-latin-900.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/roboto-v20-latin-900.woff') format('woff'), /* Modern Browsers */ url('fonts/roboto-v20-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/roboto-v20-latin-900.svg#Roboto') format('svg'); /* Legacy iOS */ } @media screen { /* font-family: 'Roboto', sans-serif; font-family: 'Roboto Mono', monospace; font-family: 'Roboto Condensed', sans-serif; */ html, body { font-family: 'Roboto', sans-serif; /* background: linear-gradient(180deg, #ffffff 0%, #e1e1e1 80%, #ffffff 100%);*/ width: 100%; scroll-behavior: smooth; } * { padding: 0; margin: 0; box-sizing:border-box; } #wrapper { position: relative; display: flex; flex-direction: column; /* margin: 0 auto; width: 960px; */ height: 100%; min-height: 100%; border-radius: 10px; box-shadow: 7px 20px 30px #ccc; margin-bottom: 20px; } #kopf_video strong a { color: orange !important; } #kopf_video strong a:hover { color: yellow !important; } header { display: flex; background: url(bilder/hintergrund-oben.jpg) no-repeat left 20px; height: 230px; height: 155px; color: white; font-size: 8pt; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+0,000000+100;Black+3D+%231 */ background: #45484d; /* Old browsers */ background: -moz-linear-gradient(-45deg, #45484d 0%, #000000 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, #45484d 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #45484d 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } header #bereich_kopf_links { /* background-color: hsla(0, 50%, 70%, 0.3); */ flex: 50%; padding-top: 22px; padding-left: 20px; } header #bereich_kopf_mitte strong { font-weight: bold; font-size: 2em; color: #555; text-shadow: 1px 1px 1px white, 0px 0px 2px white; } header #bereich_kopf_mitte { /* background-color: hsla(130, 50%, 70%, 0.3); */ flex: 50%; padding-top: 22px; text-align: right; font-size: 2em; } header #bereich_kopf_rechts { /* flex: 183px; */ flex: 30px; /* background-color: hsla(230, 50%, 70%, 0.3); */ text-align: right; padding-left: 10px; } #breadcrumb { background-color: #1472a7; background-color: black; padding: 5px 15px 2px 15px;; font-size: 8pt; color: #ddd; margin-bottom: 15px; } #breadcrumb a { color: #ddd; text-decoration: none; } #breadcrumb .brelast { text-decoration: underline; } #sucheoben { float: right; } #bereich_kopf_mitte a { color: white; text-decoration: none; } #bereich_kopf_mitte a:hover { text-decoration: underline; } #bereich_kopf_mitte .trennstrich { border-right: 1px solid #88f; padding-right: 1em; margin-right: 1em; } #kopf_video { padding-top: 20px; font-size: 10pt; line-height: 1.5em; } #kopf_video strong { font-size: 14pt; display: inline-block; margin-bottom: 10px; line-height: 1.3em; } #kopf_video a { color: white; } #kopf_video a:hover { color: orange; } .abstand_logospruch { padding-left: 60px; } #bereich_inhalt { flex: 1; background-color: white; display: flex; /* flex-direction: row-reverse;*/ padding-bottom: 30px; /* border-left: 1px solid #ccc; border-right: 1px solid #ccc; */ margin: 0 auto; /* width: 960px;*/ max-width: 1100px; } nav { flex: 310px; /* background-color: skyblue; */ /* background-color: #ddd; */ background: linear-gradient(0deg, #ffffff 0%, #e1e1e1 80%, #ffffff 100%); padding-top: 8px; padding-right: 20px; padding-bottom: 30px; padding-left: 10px; } article { flex: 100%; /* background-color: silver; */ padding-bottom: 30px; } footer { background-color: limegreen; background-color: #eeeeee; background-color: #ddd; display: flex; font-size: 9pt; border-left: 1px solid #ccc; border-right: 1px solid #ccc; } footer a { color: black; } #bereich_fuss_spalte_1 { flex: 107px; padding: 0 10px; } #bereich_fuss_spalte_2, #bereich_fuss_spalte_3 { flex: 50%; padding-top: 10px; padding-right: 20px; padding-left: 10px; } #bereich_fuss_spalte_4 { flex: 173px; } #bereich_fuss_spalte_1 img { float: left; } #bereich_fuss_spalte_3 p { text-align: right; } #bereich_fuss_spalte_4 img { float: right; } #copyright { font-size: 9pt; text-align: center; background-color: #1472a7; background-color: black; color: #ddd; /* margin-bottom: 10px; */ padding: 6px 0; border-radius: 0 0 10px 10px; } #copyright a { color: #ddd; text-decoration: none; } #copyright a:hover { text-decoration: underline; } article { padding-top: 10px; padding-left: 20px; } article h1 { font-family: 'Roboto Condensed', sans-serif; /* color: hsl(35, 100%, 45%); color: #cc8800; */ font-size: 2em; font-weight: bold; font-weight: normal; letter-spacing: -0.01em; padding-bottom: 0.2em; /* text-shadow: 0 0 1px black; */ } article p, article ol, article ul { width: 90%; line-height: 1.8em; color: #333; } article p b, article p strong { color: black; } /* ----------------------------------- */ /* STEUERUNG */ /* ----------------------------------- */ #steuerung { line-height: .9em; } #steuerung ul { list-style-type: none; /* background-color: white;*/ line-height: 1.2em; /* background-color: orange !important; */ } /* #steuerung ul ul { line-height: 0.9em !important; background-color: limegreen !important; } */ #steuerung li { /* padding: 0.2em 0.4em; */ /* background-color: orange; */ background-image: url(bilder/verlauf.png) !important; background-size: 100% 100%; } #steuerung li li { /* padding: 0.2em 0 0.2em 0.4em; */ padding: 0 0 4px 0; font-weight: normal; font-size: 80%; letter-spacing: 0em; } #steuerung a { padding: 0.3em 0.4em; width: 100%; display: inline-block; text-decoration: none; color: black; } #steuerung ul ul li { /* margin-left: 0.3em; */ line-height: 1.2em; background-image: url(bilder/icon-aufzaehlung.gif); background-repeat: no-repeat; background-position: 0px 0.92em; /*list-style-type: square;*/ } #steuerung ul ul ul li { /* background-image: url("bilder/icon-aufzaehlung-2.gif"); */ /* background-image: url(bilder/icon-aufzaehlung-2.gif); */ /* list-style: square; */ /* margin-left: 1em; */ /* border-left: 5px dotted red; */ } #steuerung ul ul ul li a { padding-left: 15px; background-image: url(bilder/icon-aufzaehlung.gif); background-position: 4px 5px; background-repeat: no-repeat; } #steuerung ul ul ul ul li a { padding-left: 30px; /* background-image: url(bilder/icon-aufzaehlung-2.gif); */ background-image: url(bilder/icon-aufzaehlung-2.gif); background-position: 14px 5px; background-repeat: no-repeat; } #steuerung ul ul ul li .dsteu_hight>a, #steuerung ul ul ul li a:hover { background-image: url(bilder/icon-aufzaehlung.gif) !important; } #steuerung ul ul ul ul li .dsteu_hight>a, #steuerung ul ul ul ul li a:hover { background-image: url(bilder/icon-aufzaehlung-2.gif) !important; } #steuerung ul ul li a:hover {} /*.dsteu_hight > a{background-color:#666 !important;color:white !important;}*/ /*.dsteu_hight > a:hover{text-decoration:none !important;background-color:#666 !important;color:white !important;cursor:default !important;}*/ #steuerung ul ul .dsteu_normal>a { /* border-right: 5px solid white;*/ } .dsteu_hight>a { /* background-image: none !important; */ background-image: none; text-decoration: underline !important; border-right: 5px solid red !important; background-color: hsla(90, 0%, 70%, .4); } #steuerung a:hover { background-color: hsla(30, 100%, 60%, 0.8); /* text-decoration: underline; */ border-right: 5px solid black !important; } .dsteu1>a, .dsteu2>a, .dsteu3>a, .dsteu4>a, .dsteu5>a, .dsteu6>a, .dsteu7>a, .dsteu8>a, .dsteu9>a, .dsteu10>a, .dsteu11>a, .dsteu12>a { background-image: url(bilder/verlauf.png); background-size: 100% 100%; /*border: 1px solid black !important;*/ border-right: 5px solid #666; margin-top: 10px; } /*.dsteu1 > a { background-color: hsla(30, 100%, 50%, .5); }*/ .dsteu1>a { background-color: hsla(50, 100%, 50%, .5); } /*.dsteu2 > a { background-color: hsla(70, 100%, 50%, .5); }*/ .dsteu2>a { background-color: hsla(90, 100%, 50%, .3); } .dsteu3>a { background-color: hsla(110, 100%, 50%, .3); } .dsteu4>a { background-color: hsla(130, 100%, 50%, .3); } .dsteu5>a { background-color: hsla(150, 100%, 50%, .3); } .dsteu6>a { background-color: hsla(170, 100%, 50%, .3); } .dsteu7>a { background-color: hsla(190, 100%, 50%, .3); } .dsteu8>a { background-color: hsla(210, 100%, 50%, .3); } .dsteu9>a { background-color: hsla(230, 100%, 50%, .3); } .dsteu10>a { background-color: hsla(250, 100%, 50%, .3); } .dsteu11>a { background-color: hsla(270, 100%, 50%, .3); } .dsteu12>a { background-color: hsla(300, 100%, 50%, .3); } .dsteu2 { margin-top: 14px; } .dsteu5 { margin-top: 20px; } /* __________________________________ */ /* VOR- und ZURƜCK unten */ /* __________________________________ */ #nav_unten { /* margin-top: 20px; */ /* width: 80%; */ /* border-top: 1px solid silver; */ padding-top: 20px; display: flex; width: 95%; font-size: 80%; } #nav_unten a { text-decoration: none; color: #666; } #nav_unten a:hover { text-decoration: underline; color: darkblue; } #nav_unten_zurueck { display: block; width: 40%; background-color: #EFEFEF; border: 10px solid #EFEFEF; border-right: dotted 1px silver; /* float: left; */ flex: 50%; order: 1; margin-right: 10px; border-radius: 10px 0 0 10px; box-shadow: 2px 2px 10px silver; } #nav_unten_zurueck span+span { display: block; margin-left: 22px; } #nav_unten_zurueck_pfeil { /* display: block; */ float: left; width: 16px; height: 19px; background-image: url(bilder/icons-links-hoch-rechts.gif); background-position: 0px 2px; background-repeat: no-repeat; vertical-align: text-top; } a:hover #nav_unten_zurueck { background-color: #DBDBDB; } a:hover #nav_unten_zurueck_pfeil { background-position: 0px -30px; } #nav_unten_weiter { display: block; width: 45%; background-color: #EFEFEF; border: 10px solid #EFEFEF; border-left: dotted 1px silver; /* float: right; */ flex: 50%; order: 3; margin-left: 10px; border-radius: 0 10px 10px 0; box-shadow: 2px 2px 10px silver; } #nav_unten_weiter span+span { display: block; text-align: right; margin-right: 22px; } #nav_unten_weiter_pfeil { display: block; float: right; width: 16px; height: 19px; background-image: url(bilder/icons-links-hoch-rechts.gif); background-position: -32px 2px; background-repeat: no-repeat; vertical-align: text-top; } a:hover #nav_unten_weiter { /* background-color: #DBDBDB; */ } a:hover #nav_unten_weiter_pfeil { background-position: -32px -30px; } #nav_unten_anfang { /* display: block; */ /* text-align: center; */ /* background-color: skyblue; */ /* margin: 0 auto; */ /* width: 16px; height: 19px; border: 10px solid white; */ flex: 20px; order: 2; } #nav_unten_anfang span { /* display: block; text-align: center; border: 2px solid red; */ } #nav_unten_anfang_pfeil { display: block; width: 16px; height: 19px; background-image: url(bilder/icons-links-hoch-rechts.gif); background-position: -16px 2px; background-repeat: no-repeat; /* vertical-align: text-top; */ text-align: center; } a:hover #nav_unten_anfang_pfeil { background-position: -16px -30px; } /* ----------------------------------- */ /* ALLGEMEINES DESIGN für Inhalt */ /* ----------------------------------- */ code[class*="language"] { padding: 0 .5em !important; } .beispieltext { position: relative; padding: 0 .8em; border-left: silver 6px solid; display: block; overflow: auto; font-family: "Source Code Pro", Consolas, monospace; font-size: 1em; line-height: 1.5em; background: #eeeeee; margin-bottom: 1em; white-space: pre-line; } .fehlerhaftercode { border-left: red 6px solid !important; } p .beispieltext { padding-bottom: 0 !important; } .browserfenster { position: relative; /* background-image: url(bilder/browserfenster-s.jpg); */ /* background-repeat: no-repeat; */ padding: 16px 16px 0 16px; border: 1px solid silver; overflow: auto; margin-bottom: 1em; box-shadow: 5px 5px 15px 0px #cccccc; } kbd { border: solid 0.2em; border-top-color: #DDDDDD; border-right-color: #BBBBBB; border-bottom-color: #BBBBBB; border-left-color: #DDDDDD; padding: 0pt 0.4em; white-space: nowrap; background-color: #EEEEEE; font-size: 0.9em; } #advorganizer { float: right; width: 18em; padding: 10px 5px 12px 5px; margin-left: 10px; margin-bottom: 10px; margin-right: 5%; border-left: #009E00 6px solid; border-left: silver 6px solid; border-right: #009E00 6px solid; border-right: silver 6px solid; background: #eeeeee; font-size: .83em; color: white; background: -webkit-linear-gradient(150deg, #b08d10 0%, #a87227 54%, #ffee00 100%); background: linear-gradient(-60deg, #b08d10 0%, #a87227 54%, #ffee00 100%); background: -webkit-linear-gradient(-60deg, #b08d10 0%, #a87227 54%, #ffee00 100%); background: -o-linear-gradient(-60deg, #b08d10 0%, #a87227 54%, #ffee00 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b08d10, endColorstr=#ffee00, GradientType=1); } #advorganizer b { color: #009E00; color: white; font-size: 14pt; line-height: 20pt; margin-bottom: 0px !important; padding-bottom: 0px !important; } #advorganizer strong, #advorganizer b, #advorganizer a, #advorganizer p, #advorganizer li { color: white; } pre { max-width: 700px; /* TESTEN wegen extrabreiter Ausgabe ! */ white-space: pre-wrap; } .tabelle_hervorhebung { background-color: skyblue !important; } .cc_banner-wrapper { z-index: 9001; position: relative } .cc_container .cc_btn { cursor: pointer; text-align: center; font-size: 0.6em; -webkit-transition: font-size 200ms; transition: font-size 200ms; line-height: 1em } .cc_container .cc_message { font-size: 0.6em; -webkit-transition: font-size 200ms; transition: font-size 200ms; margin: 0; padding: 0; line-height: 1.5em } @media screen and (min-width:500px) { .cc_container .cc_btn { font-size: 0.8em } .cc_container .cc_message { font-size: 0.8em } } @media screen and (min-width:768px) { .cc_container .cc_btn { font-size: 1em } .cc_container .cc_message { font-size: 1em; line-height: 1em } } @media screen and (min-width:992px) { .cc_container .cc_message { font-size: 1em } } @media print { .cc_banner-wrapper, .cc_container { display: none } } .cc_container { position: fixed; left: 0; right: 0; bottom: 0; overflow: hidden; padding: 10px } .cc_container .cc_btn { padding: 8px 10px; background-color: #f1d600; background-color: black; cursor: pointer; -webkit-transition: font-size 200ms; transition: font-size 200ms; text-align: center; font-size: 0.6em; display: block; width: 33%; margin-left: 10px; float: right; max-width: 80px } .cc_container .cc_message { -webkit-transition: font-size 200ms; transition: font-size 200ms; font-size: 0.6em; display: block } @media screen and (min-width:500px) { .cc_container .cc_btn { font-size: 0.8em } .cc_container .cc_message { margin-top: 0.5em; font-size: 0.8em } } @media screen and (min-width:768px) { .cc_container { padding: 15px 30px 15px } .cc_container .cc_btn { font-size: 1em; padding: 8px 15px } .cc_container .cc_message { font-size: 1em } } @media screen and (min-width:992px) { .cc_container .cc_message { font-size: 1em } } .cc_container { background: #eee; background: black; background-color: hsla(0, 0%, 0%, 0.7); color: #222; color: white; opacity: 0.96; font-size: 17px; font-family: Arial, sans-serif; box-sizing: border-box; border-top: 1px solid #ccc } .cc_container::-moz-selection { background: #ff5e99; color: #fff; text-shadow: none } .cc_container .cc_btn, .cc_container .cc_btn:visited { color: #000; background-color: #f1d600; background-color: limegreen; transition: background 200ms ease-in-out, color 200ms ease-in-out, box-shadow 200ms ease-in-out; -webkit-transition: background 200ms ease-in-out, color 200ms ease-in-out, box-shadow 200ms ease-in-out; border-radius: 5px; -webkit-border-radius: 5px } .cc_container .cc_btn:hover, .cc_container .cc_btn:active { background-color: #d7bf00; color: #000 } .cc_container a, .cc_container a:visited { text-decoration: none; color: #31a8f0; -webkit-transition: 200ms color; transition: 200ms color } .cc_container a:hover, .cc_container a:active { color: #555 } @-webkit-keyframes slideUp { 0% { -webkit-transform: translateY(66px); transform: translateY(66px) } 100% { -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes slideUp { 0% { -webkit-transform: translateY(66px); -ms-transform: translateY(66px); transform: translateY(66px) } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } } .cc_container, .cc_message, .cc_btn { animation-duration: 0.8s; -webkit-animation-duration: 0.8s; -moz-animation-duration: 0.8s; -o-animation-duration: 0.8s; -webkit-animation-name: slideUp; animation-name: slideUp } .slicknav_btn { position: relative; display: block; vertical-align: middle; float: right; padding: 0.438em 0.625em 0.438em 0.625em; line-height: 1.125em; cursor: pointer; } .slicknav_btn .slicknav_icon-bar+.slicknav_icon-bar { margin-top: 0.188em; } .slicknav_menu { *zoom: 1; } .slicknav_menu .slicknav_menutxt { display: block; line-height: 1.188em; float: left; } .slicknav_menu .slicknav_icon { float: left; width: 1.125em; height: 0.875em; margin: 0.188em 0 0 0.438em; } .slicknav_menu .slicknav_icon:before { background: transparent; width: 1.125em; height: 0.875em; display: block; content: ""; position: absolute; } .slicknav_menu .slicknav_no-text { margin: 0; } .slicknav_menu .slicknav_icon-bar { display: block; width: 1.125em; height: 0.125em; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); } .slicknav_menu:before { content: " "; display: table; } .slicknav_menu:after { content: " "; display: table; clear: both; } .slicknav_nav { clear: both; } .slicknav_nav ul { display: block; } .slicknav_nav li { display: block; } .slicknav_nav .slicknav_arrow { font-size: 0.8em; margin: 0 0 0 0.4em; } .slicknav_nav .slicknav_item { cursor: pointer; } .slicknav_nav .slicknav_item a { display: inline; } .slicknav_nav .slicknav_row { display: block; } .slicknav_nav a { display: block; } .slicknav_nav .slicknav_parent-link a { display: inline; } .slicknav_brand { float: left; } .slicknav_menu { font-size: 16px; box-sizing: border-box; background: #4c4c4c; padding: 5px; } .slicknav_menu * { box-sizing: border-box; } .slicknav_menu .slicknav_menutxt { color: #fff; font-weight: bold; text-shadow: 0 1px 3px #000; } .slicknav_menu .slicknav_icon-bar { background-color: #fff; } .slicknav_btn { margin: 5px 5px 6px; text-decoration: none; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #222; } .slicknav_nav { color: #fff; margin: 0; padding: 0; font-size: 0.875em; list-style: none; overflow: hidden; } .slicknav_nav ul { list-style: none; overflow: hidden; padding: 0; margin: 0 0 0 20px; } .slicknav_nav .slicknav_row { padding: 5px 10px; margin: 2px 5px; } .slicknav_nav .slicknav_row:hover { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; background: #ccc; color: #fff; } .slicknav_nav a { padding: 5px 10px; margin: 2px 5px; text-decoration: none; color: #fff; } .slicknav_nav a:hover { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; background: #ccc; color: #222; } .slicknav_nav .slicknav_txtnode { margin-left: 15px; } .slicknav_nav .slicknav_item a { padding: 0; margin: 0; } .slicknav_nav .slicknav_parent-link a { padding: 0; margin: 0; } .slicknav_brand { color: #fff; font-size: 18px; line-height: 30px; padding: 7px 12px; height: 44px; } .hl_phpt { color: #ccc; color: black; } .hl_hcom, .hl_pcom { color: #808080; font-style: italic; } .hl_doctype { color: #4682B4; color: black; } .hl_htag { color: inherit; } .hl_string { color: orange; color: #e57903; } .hl_regex { color: #4682B4; } .hl_number { color: green; font-weight: bold; } .hl_bool { font-weight: bold; color: orange; color: #e57903; } .hl_var { font-weight: bold; color: black; } .hl_enti { color: #FF4500; } .hl_keyw { color: blue; color: #3b64b5; } .hl_htag1 { color: #800080; font-weight: bold; } .hl_htag2 { font-weight: bold; } .hl_htag3 { color: #0000FF; } .php { font-family: "Source Code Pro", Consolas, monospace; } .php .imp { font-weight: bold; color: red; } .php .kw1 { color: #b1b100; } .php .kw2 { color: #000000; font-weight: bold; } .php .kw3 { color: #990000; } .php .kw4 { color: #009900; font-weight: bold; } .php .co1 { color: #666666; font-style: italic; } .php .co2 { color: #666666; font-style: italic; } .php .co3 { color: #0000cc; font-style: italic; } .php .co4 { color: #009933; font-style: italic; } .php .coMULTI { color: #666666; font-style: italic; } .php .es0 { color: #000099; font-weight: bold; } .php .es1 { color: #000099; font-weight: bold; } .php .es2 { color: #660099; font-weight: bold; } .php .es3 { color: #660099; font-weight: bold; } .php .es4 { color: #006699; font-weight: bold; } .php .es5 { color: #006699; font-weight: bold; font-style: italic; } .php .es6 { color: #009933; font-weight: bold; } .php .es_h { color: #000099; font-weight: bold; } .php .br0 { color: #009900; } .php .sy0 { color: #339933; } .php .sy1 { color: #000000; font-weight: bold; } .php .st0 { color: #0000ff; } .php .st_h { color: #0000ff; } .php .nu0 { color: #cc66cc; } .php .nu8 { color: #208080; } .php .nu12 { color: #208080; } .php .nu19 { color: #800080; } .php .me1 { color: #004000; } .php .me2 { color: #004000; } .php .re0 { color: #000088; } .php span.xtra { display: block; } fieldset legend { margin: 0 15px; padding: 0 5px; } fieldset tt { padding: 1em 3em 0 20px; display: inline-block; line-height: 1.7em; } h1 { margin-bottom: 0; } h1+p { margin-top: 0; } h2 { margin-bottom: 0; font-size: 1.6em; margin-top: 1.8em; } h2+p { margin-top: 0.5em; } h1, h2, h3, h4 { font-family: 'Roboto Condensed', sans-serif; width: 90%; /* background-color: skyblue; */ /* color: #cc8800; */ color: #070; font-weight: normal; } h1+h2, h2+h3 { margin-top: .6em !important; /*color: orange !important;*/ /* font-style: italic; */ } article h1 { line-height: 1.3em; } article h2 { line-height: 1.3em; } article p { margin-bottom: 1em; } article ul, article ol { padding-left: 1.2em; line-height: 1.6em; margin-bottom: 1em; width: 90%; } article ul { list-style-type: square; } article li { padding-bottom: 0.75em; } .bildlinks { max-width: 99%; float: left; border: 0px; padding-right: 0.5em; } .bildrechts { display: inline-block; /* max-width: 99%; */ float: right; border: 0px; margin-left: 20px !important; margin-right: 20px; } .zentriert { text-align: center; } .bild-fuellend { max-width: 90%; height: auto; margin-bottom: 30px; } article figure { border: 1px solid black; margin-bottom: 1em; box-shadow: 8px 8px 50px #666; margin-top: 30px; margin-bottom: 40px; width: 95% !important; } article figure { display: block; position: relative; overflow: hidden; } article figure img { max-width: 100%; height: auto; } article figcaption { position: absolute; background: rgba(0, 0, 0, 0.75); color: white; padding: 8px 16px; opacity: 0.85; bottom: 0; left: 0; border-radius: 0 20px 0 0; border-top: 3px solid black; border-right: 3px solid black; } article figure:hover figcaption { opacity: 0; background-color: red; bottom: -10%; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; } .videobereich, #videobereich { position: relative; height: 0; padding-bottom: 56.25%; } .videoExtern { position: absolute; top: 0; left: 0; width: 97%; height: 97%; } dl { line-height: 1.7em; } dt { /* background-color: orange; */ font-weight: bold; margin-bottom: 1.4em; display: inline-block; float: left; width: 190px; } dd { margin-bottom: 1.4em; margin-left: 200px; } table { width: 100%; margin-bottom: 1.5em; } thead th { background-color: black !important; color: white; text-align: left; padding: 0.2em; } td, th { border-bottom: 1px solid #ddd; line-height: 1.7em; padding: 0.3em 0.2em 0.1em 0.2em; vertical-align: top; } td { transition: all 0.5s ease-in-out 0s; } tbody tr:nth-child(odd) td, th { background-color: #f4f4f4; } tbody tr:nth-child(even) td, th { background-color: #d4d4d4; } tr:hover td { background-color: orange !important; } .browserausg { font-family: serif; margin-bottom: 10px !important; } .ueberschrift1 { font-size: 30pt; color: black; } .ueberschrift2 { font-size: 25pt; color: black; } .ueberschrift3 { font-size: 20pt; color: black; } .ueberschrift4 { font-size: 15pt; color: black; } .ueberschrift5 { font-size: 12pt; color: black; } .ueberschrift6 { font-size: 10pt; color: black; } code { color: darkblue !important; font-family: "Source Code Pro", Consolas, monospace; font-weight: 500; /* font-size: 1.3em; */ padding: 0 4px; /* border: 1px solid silver; */ /* background-color: #eee; */ letter-spacing: -0.05em; } h1 code, h2 code { color: #666; border: 0; background-color: white; } .phpvs, .ajaxvs, .jqueryvs, .jsvs, .css, .cssvs, .css_code, .txtvs, .textvs, .htaccessvs, .codebeispiel_css, .html5 { font-family: "Source Code Pro", Consolas, monospace; font-weight: 500; background-position: top right; background-repeat: no-repeat !important; position: relative; padding: 0.6em .8em; padding: 1em .8em; border-left: #b4c6e0 6px solid; display: block; overflow: auto; font-size: 1em; line-height: 1.5em; background-color: #eeeeee; margin-bottom: 1em; min-height: 3em; padding: 0 0 0 0.5em !important; background-color: #eee; line-height: 2em !important; background-image: repeating-linear-gradient(transparent 0, transparent 2em, hsla(0, 100%, 100%, 0.5) 2em, hsla(0, 100%, 100%, 0.5) 4em, transparent 4em); } .cssvs, .css, .css_code, .codebeispiel_css { border-left: limegreen 6px solid; z-index: 100 !important; } table { width: 95% !important; } table, .beispieltext, .browserfenster, pre { margin-right: 20px !important; /* box-shadow: 5px 5px 20px #ccc; */ } pre[class*="cssvs"]::before { content: 'CSS'; background-color: #32cd32 !important; } pre { /* position: relative; */ overflow: visible !important; } pre[class*="html5"]::before { content: 'HTML'; background-color: #b4c6e0 !important; } pre[class*="txtvs"]::before { content: '.txt'; } pre[class*="jsvs"]::before { content: 'JavaScript'; width: 110px !important; /* background-color: #8800ee !important; */ background-color: #4400bb !important; } pre[class*="htaccessvs"]::before { content: '.htaccess'; width: 110px !important; } pre[class*="jsvs"]::before, pre[class*="txtvs"]::before, pre[class*="htaccessvs"]::before, pre[class*="html5"]::before, pre[class*="cssvs"]::before { /* color: white; font-family: Arial, sans-serif; font-size: 1.6em; font-weight: bold; display: block; position: absolute; right: 10px; top: 10px; border-radius: 3px; text-shadow: 1px 1px 10px #666; opacity: 0.6; } pre[class*="html5"]::before { */ /* content: 'HTML'; */ font-size: 10pt !important; background-color: silver; font-weight: bold; color: white; position: absolute; width: 70px; height: 20px; line-height: 20px; /* top: 100px; left: 250px; */ /* border-radius: 20px 20px 0 0 !important; */ border-radius: 2px 0 0 30px !important; text-align: center; /* top: -20px !important; */ /* right: 10px; */ right: 0; opacity: 0.5 !important; } .jsvs { border-left: #8800ee 6px solid; } .ajaxvs { border-left: brown 6px solid; } .jqueryvs { border-left: #91a500 6px solid; } .phpvs { border-left: #00729a 6px solid; } .css50 {} .css75 {} .css100 {} .html100 {} .html75 {} .html50 {} .html5 .kw2 { color: #3333BB; font-weight: bold; } .html5 .kw3 { color: #008000; font-weight: bold; } .html5 .sy0 { color: black; } .html5 .st0 { color: #259BE4; } .html5 .sc-1 { color: #808080; font-style: italic; } .html5 .sc0 { color: #2277AA; font-style: italic; } .html5 .sc1 { color: #555555; } .html5 .sc2 { color: black; } .css { font-weight: bold; } .css .imp { font-weight: bold; color: red; } .css .br0 { color: black; } .css .nu0 { color: #555555; font-weight: normal; } .css .co1 { color: #2277AA; font-style: italic; font-weight: normal; } .css .sy0 { color: black; font-weight: normal; } .css .kw1 { color: #3333BB; font-weight: bold; } .css .re0 { color: #FF7F2A; font-weight: bold; } .css .re1 { color: #60A11E; font-weight: bold; } .css .re3 { color: #259BE4; font-weight: normal; } .css .kw2 { color: #1B74AA; font-weight: normal; } .css .coMULTI { color: #808080; font-weight: normal; } .css .co2 { color: #800080; font-weight: normal; } .css .st0 { color: #800080; font-weight: normal; } .javascript { font-family: "Source Code Pro", Consolas, monospace; } .javascript .imp { font-weight: bold; color: red; } .javascript .kw1 { color: #000066; font-weight: bold; } .javascript .kw2 { color: #003366; font-weight: bold; } .javascript .kw3 { color: #000066; } .javascript .co1 { color: #006600; font-style: italic; } .javascript .co2 { color: #009966; font-style: italic; } .javascript .coMULTI { color: #006600; font-style: italic; } .javascript .es0 { color: #000099; font-weight: bold; } .javascript .br0 { color: #009900; } .javascript .sy0 { color: #339933; } .javascript .st0 { color: #3366CC; } .javascript .nu0 { color: #CC0000; } .javascript .me1 { color: #660066; } .javascript span.xtra { display: block; } .html1-comment { color: #008000; } .html1-djangotemplate { color: #804000; } .html1-escapeampersand { color: #008000; font-weight: bold; } .html1-identifier { color: #007D00; font-weight: bold; } .html1-reservedword { color: #3351C9; font-weight: bold; } .html1-space { color: #008080; font-style: italic; } .html1-symbol { font-weight: bold; } .html1-template { color: #FF6600; } .html1-text {} .html1-unknownword { color: #FF0000; font-weight: bold; } .html1-value { color: #259BE4; } .jscript1-comment { color: #008000; font-style: italic; } .jscript1-event {} .jscript1-identifier {} .jscript1-non-reservedkeyword {} .jscript1-number { color: #000080; } .jscript1-reservedword { font-weight: bold; } .jscript1-space { color: #008080; font-style: italic; } .jscript1-specialvariable { color: #66D9EF; } .jscript1-string { color: #800000; } .jscript1-symbol {} .multi1-marker1 { color: #000000; } .multi1-marker2 { color: #000000; } .multi1-marker3 { color: #000000; } .multi1-marker4 { color: #000000; } .multi1-marker5 { color: #000000; } .multi1-marker6 { color: #000000; } .multi1-marker7 { color: #000000; } .multi1-marker8 { color: #000000; } .multi1-marker9 { color: #000000; } .css1-colorvalue {} .css1-comment { color: #808080; font-style: italic; } .css1-number { color: #800080; } .css1-property { font-weight: bold; } .css1-reservedword { color: #800000; font-weight: bold; } .css1-space { color: #008080; font-style: italic; } .css1-string { color: #008000; } .css1-symbol { color: #000080; font-weight: bold; } .css1-text {} .css1-undefinedproperty { color: #8000FF; font-weight: bold; } .css1-value { color: #0000FF; } .multi1-marker10 { color: #000000; } .multi1-marker11 { color: #000000; font-weight: bold; } a[href^="http://"] { background: url(bilder/extern-link.gif) no-repeat; padding-left: 20px; } a[href^="https://"] { background: url(bilder/extern-link.gif) no-repeat; padding-left: 20px; } a[href^="http://www.python-lernen.de"] { background: none; padding-left: 0px; } a[href^="https://www.python-lernen.de"] { background: none; padding-left: 0px; } a[href$="pdf"] { background: url(bilder/icon-pdf.gif) no-repeat right; padding-right: 20px; } .browserfenster a[href^="http://"] { background: none; padding-left: 0px; } .browserfenster a[href^="https://"] { background: none; padding-left: 0px; } .unterstrichen { text-decoration: underline !important; } #videos_klein_oben { display: none; } .kein_umbruch { white-space: nowrap; } #videos_klein_unten { padding-top: 5px; display: inline-block; } #frmTest { width: 90%; } .spalterechts { width: 75% !important; } .slicknav_menu { display: none; } /* /text-editor-sublime-text.htm */ .bg_hell { background-color: #D3DBEA; margin-top: 0 !important; padding-top: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; clear: both; margin-bottom: 0 !important; } .bg_dunkel { background-color: #E4EDFF; clear: both; margin-bottom: 0 !important; } #sitemap { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; } .einr1, .einr2, .einr3, .einr4, .einr5 { display: block; } .einr1 { background-color: #DADADA; font-weight: bold; margin-top: 1em; } .ein1 a { color: white !important; } .einr3 { padding-left: 2em; } article img { max-width: 100%; height: auto; } @media screen and (max-width:960px) { .js .slicknav_menu{display:block;} nav, #infospalte, #steuerung { display: none; } #frmTest { width: 100%; } #copyright { /* background-color: yellow !important; */ } #fehlermeldung { display: none; } #logourl { display: block; font-style: normal !important; padding-bottom: 3px; } #logourl a { color: white; font-weight: bold; text-decoration: none; } #logourl a:hover { text-decoration: underline; } #breadcrumb { padding-left: 10px; } #breadcrumb span { display: none; } #wrapper { width: 100%; margin: 0; border: 0px solid silver; overflow: hidden; } #bereich_inhalt { flex: 1; flex-direction: column; display: flex; } nav { /* flex: 300px;*/ /* display: initial;*/ } article { flex: 100%; } article p { width: 100%; line-height: 1.6em; } .js #menu { display: none; } .js .slicknav_menu { display: block; } .js #steuerung { display: none; } .slicknav_nav ul { margin: 0 0 0 0 !important; } .bild-fuellend { max-width: 100%; height: auto; margin-bottom: 20px; } } @media screen and (max-width:890px) { #copyright { /* background-color: orange !important; */ } .MD_ausblenden { display: none; } #kopf_video { font-size: 8pt !important; padding-left: 20px; } #kopf_video strong { font-size: 11pt !important; } /* #bereich_kopf_mitte { display: none; } */ } @media screen and (max-width:700px) { #wrapper { width: 100%; margin: 0; border: 0px solid silver; overflow: hidden; } .MD_ausblenden_2 { display: none; } #logo { display: none; } #kopflinks { padding-left: 0px; width: 230px; } #kopflinks p { padding-left: 0px; } #inhalt { width: 100%; float: right; margin-bottom: 1em; padding-right: 0; } article { width: 94%; float: none; margin: 0 auto; padding: 0; } article img { max-width: 100%; height: auto; } } @media screen and (max-width:600px) { #wrapper { border-radius: 0; box-shadow: 0 0 0 #ccc; margin-bottom: 0; } header { /* background: url(bilder/hintergrund-oben.jpg) no-repeat left 0px; /* 20px */ */ /* background-size: cover; */ /* height: 100px; */ } #bereich_kopf_links { padding-top: 0px !important; padding-left: 10px !important; } #bereich_kopf_mitte { padding-right: 10px; padding-top: 0px !important; } /* #kopf_video, */ .MD_ausblenden_3, #bereich_kopf_rechts, /* Samy ausblenden */ #bereich_fuss_spalte_1 { display: none; } #kopf_video { padding-top: 5px; font-size: 9pt; line-height: 1.1em; } #videos_klein_oben { display: inline-block; /* position: absolute; top: 118px; right: 10px; */ } } @media screen and (max-width:500px) { footer { flex-direction: column; } #bereich_fuss_spalte_2 { padding-left: 10px; } #bereich_fuss_spalte_3 { text-align: left !important; padding-bottom: 10px; padding-right: 10px; } #bereich_fuss_spalte_4 { display: none; } article h1 { font-size: 1.4em; font-weight: normal; } article h2 { font-size: 1.3em; font-weight: normal; } } /* Logo */ .flaechen { display: inline-block; width: 72px; height: 80px; height: 90px; line-height: 90px; text-align: center; font-size: 40pt; position: absolute; color: white; font-weight: bold; } #logo { position: absolute; top: 30px; transform-origin: 0% 100%; transform: skew(5deg, 8deg); top: 5px; /* top: 50px; */ /* transform: skew(-2deg, -5deg); */ zoom: 1; zoom: .85; top: 20px !important; left: 5px; /* font-style: italic; */ } /* python */ #logo_p, #logo_o { z-index: 5; background-color: skyblue; background-color: #27e6f7; background: #000000; background: -moz-linear-gradient(-45deg, #000000 0%, #60abf8 56%, #7abcff 100%); background: -webkit-linear-gradient(-45deg, #000000 0%,#60abf8 56%,#7abcff 100%); background: linear-gradient(135deg, #000000 0%,#60abf8 56%,#7abcff 100%); background: linear-gradient(90deg, #000000 0%, hsla(200,50%,50%,.8) 100%); background: linear-gradient(75deg, #000000 0%, hsla(200,50%,50%, .5) 100%); background: linear-gradient(75deg, #000000 0%, hsla(190,70%,50%, .5) 60%, hsla(190,100%,50%, .5) 100%); background: linear-gradient(65deg, hsla(190,70%,0%, .5) 0%, hsla(190,70%,50%, .5) 60%, hsla(190,100%,50%, .5) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#7abcff',GradientType=1 ); width: 65px; left: 25px; top: 30px; /* font-style: italic; */ /* opacity: 0.9; */ } #logo_y, #logo_n { z-index: 3; /* font-family: "Chalkduster", "Bradley Hand"; */ /* font-size: 32pt; */ font-weight: normal; background-color: yellow; background-color: #fee710; background: #000000; background: -moz-linear-gradient(-45deg, #000000 0%, #fee710 100%); background: -webkit-linear-gradient(-45deg, #000000 0%,#fee710 100%); background: linear-gradient(135deg, #000000 0%, #fee710 70%, #fee710 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#fee710',GradientType=1 ); /*left: 84px;*/ top: 10px; /* filter: blur(1px); */ font-size: 37pt; /*zoom: 0.85;*/ left: 77px; } #logo_t { z-index: 5; background-color: red; background-color: #040301; background-color: #fd0e08; background: #fd0e08; background: -moz-linear-gradient(-45deg, #fd0e08 0%, #040301 100%); background: -webkit-linear-gradient(-45deg, #fd0e08 0%,#040301 100%); background: linear-gradient(180deg, hsla(0,100%,50%,.6) 0%, hsla(0,0%,0%,.9) 100%); background: linear-gradient(180deg, hsla(0,100%,50%,.6) 0%, hsla(0,0%,20%,.9) 100%); background: linear-gradient(135deg, hsla(0,100%,50%,.6) 0%, hsla(0,100%,50%,.6) 50%, hsla(0,0%,20%,.9) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fd0e08', endColorstr='#040301',GradientType=1 ); left: 140px; left: 135px; top: 34px; top: 30px; /* font-weight: normal; */ color: #ddd; /* opacity: 0.9; */ width: } #logo_h { /* font-style: italic; */ /* font-family: "", cursiv monospace; */ font-weight: normal; font-size: 45pt; font-size: 40pt; background-color: limegreen; background: linear-gradient(235deg, #000000 0%, hsla(100,50%,50%,1) 100%); background: linear-gradient(90deg, #000000 0%, hsla(100,50%,50%,1) 100%); background: linear-gradient(285deg, hsla(100,50%,50%,1) 0%, #000000 100%); background: linear-gradient(330deg, hsla(100,50%,50%,1) 0%, hsla(100,50%,50%,1) 40%, #000000 100%); left: 210px; top: 10px; /* opacity: 0.8; */ /* filter: blur(1px); */ width: 70px; /* transform: rotate(4deg); */ /*zoom: 0.80;*/ /*left: 247px;*/ left: 197px; } #logo_sem { /* font-style: italic; */ position: absolute; display: inline-block; text-transform: uppercase; font-weight: bold; color: #333; color: white; width: 400px; /* width: 650px; */ /* height: 30px; */ text-align: center; font-size: 23pt; font-size: 36pt; /* border:1px solid black; */ top: 120px; top: 130px; /* top: 150px; */ color: hsla(0, 100%, 100%, 0.5); -webkit-filter: blur(3px); filter: blur(2px); transform: skew(-35deg, 0deg); } #logo_o { left: 260px; zoom: 0.95;} #logo_n { left: 300px; width: 70px; /*zoom: 0.75;*/ } #logo { top: 45px; top: 35px; transform: skew(-3deg, -2deg); } #logo_sem { transform: skew(30deg, 0deg); } .ausblenden { display:none; } #logo_spruch { /* display:none; */ /* TEST */ margin: 192px 0 0 0px; margin: 0px 0 0 0px; background-color: hsla(0, 0%, 80%, 0.5); background-color: hsla(190,50%,50%,0.3); color: white; padding: 2px 30px; font-size: 8pt; /* width: 250px; */ /* text-align: center; */ } nav { order:1; } article { order:2; } #infospalte { box-sizing: border-box; flex: 270px; order:3; color: black; background-color: white; box-sizing: border-box; font-size: 80%; } #infospalte h2 { margin: 0 !important; margin-bottom: .4em; color: yellow; background-color: black; width: 100%; padding: 7px; } #infospalte p { padding: 7px; font-weight: normal; } #infospalte b { font-weight: bold !important; } #infospalte ul { margin-left: 1em; margin-bottom: 1em; padding: 7px; } .infospalteblock { background-color: #eee; } .twitter { background-image: url('data:image/svg+xml;utf8,Twitter icon'); } .whatsapp { background-image: url('data:image/svg+xml;utf8,WhatsApp icon'); } .facebook { background-image: url('data:image/svg+xml;utf8,Facebook icon'); } .pinterest { background-image: url('data:image/svg+xml;utf8,Pinterest icon'); } .linkedin { background-image: url('data:image/svg+xml;utf8,LinkedIn icon'); } .xing { background-image: url('data:image/svg+xml;utf8,Xing icon'); } .tumblr { background-image: url('data:image/svg+xml;utf8,Tumblr icon'); } .flattr { background-image: url('data:image/svg+xml;utf8,Flattr icon'); } .reddit { background-image: url('data:image/svg+xml;utf8,Reddit icon'); } #sobookmarks { padding-top: 30px; } #sobookmarks a { border: 1px solid black; background-color: #ccc; background-image: none !important; color: black; text-decoration: none; padding: 5px 10px; display: inline-block; margin: 4px 10px 4px 0; margin: 0px 10px 0px 0; float: left; border-radius: 6px; border-radius: 50%; height: 40px; width: 40px; overflow: hidden; padding: 10px 10px; border: 0px solid black; } #sobookmarks a:hover { background-color: yellow; text-decoration: underline; } #sobookmarks ul, #sobookmarks li { display: inline-block; padding-left: 0; } #sobookmarks span { /*background-color: orange;*/ line-height: 22px; } #sobookmarks .ico_sob { display: inline-block; height: 20px; margin-right: 5px; vertical-align: top; /*width: 20px;*/ background-repeat: no-repeat; padding-left: 25px; padding-left: 35px; } /*a[href ^="whatsapp://send"] { border: red 2px solid !important; content: attr(title) "TEst: "; }*/ } @media print { nav, header { display: none; } .slicknav_menu, #copyright, #infospalte, #nav_unten, #sobookmarks, #breadcrumb { display: none; } html, body { font-family: 'Roboto', sans-serif; } .browserfenster { position: relative; /* background-image: url(bilder/browserfenster-s.jpg); */ /* background-repeat: no-repeat; */ padding: 0px 16px 0 16px; border: 1px solid silver; overflow: auto; margin-bottom: 1em; box-shadow: 5px 5px 15px 0px #cccccc; } kbd { border: solid 0.2em; border-top-color: #DDDDDD; border-right-color: #BBBBBB; border-bottom-color: #BBBBBB; border-left-color: #DDDDDD; padding: 0pt 0.4em; white-space: nowrap; background-color: #dddddd; font-size: 0.9em; } code { color: darkblue !important; font-family: "Source Code Pro", Consolas, monospace; font-weight: 500; /* font-size: 1.3em; */ padding: 0 4px; /* border: 1px solid silver; */ /* background-color: #eee; */ letter-spacing: -0.05em; } h1 code, h2 code { color: #666; border: 0; background-color: white; } h1 { font-size: 1.8em; margin-bottom: 0; color: #070; } h1+p { margin-top: 0; } h2 { margin-bottom: 0; font-size: 1.6em; margin-top: 1.8em; } h3 { margin-bottom: 0; font-size: 1.4em; margin-top: 1.6em; font-weight: bold; orphans: 2; } h2+p, h3+p{ /* margin-top: 0.5em;*/ margin-top: 0em; } h1, h2, h3, h4 { font-family: 'Roboto Condensed', sans-serif; width: 90%; font-weight: normal; } h1+h2, h2+h3 { margin-top: .6em !important; } article h1 { line-height: 1.3em; orphans: 2; } article h2 { line-height: 1.3em; orphans: 2; } article p { margin-bottom: 1em; max-width: 42em; line-height: 1.5em; orphans:2; color: #333; } article b { font-weight: bold; color: #000000 !important; font-family: } article li { padding-bottom: .6em; max-width: 42em; list-style-type: square; line-height: 1.5em; color: #333; } article { margin-bottom: 3em; } .bildrechts { display: inline-block; float: right; border: 0px; margin-left: 20px !important; margin-right: 20px; } figure { margin-left: 0; padding-left: 0; text-align: center; } figcaption { text-align: center; padding-left: .2em; font-size: 70%; font-style: italic; padding-bottom: .5em; } article a { color: darkblue !important; } table { width: 100%; margin-bottom: 1.5em; } thead th { background-color: black !important; color: white; text-align: left; padding: 0.2em; } td, th { border-bottom: 1px solid #ddd; line-height: 1.7em; padding: 0.3em 0.2em 0.1em 0.2em; vertical-align: top; } tbody tr:nth-child(odd) td, th { background-color: #f4f4f4; } tbody tr:nth-child(even) td, th { background-color: #d4d4d4; } } /* A. Mini Reset */ *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } * { /* margin: 0; padding: 0; */ } ::before, ::after { content: ""; } html, body { /* height: 100%;*/ -webkit-font-smoothing: subpixel-antialiased; } html { /* font-size: 100%;*/ } .ebook { /* border: 1px solid red;*/ display: inline-block; margin: 0 auto; } body { /* background: #ecf0f1; color: #34495e; font-family: 'Lato', 'Arial', sans-serif; font-weight: 400; line-height: 1.2; */ } .ebook ul { margin: 0; padding: 0; list-style: none; text-align: center; } a { /* color: #2c3e50;*/ /* text-decoration: none;*/ } /* */ .btn { display: inline-block; text-transform: uppercase; border: 2px solid #2c3e50; margin-top: 100px; font-size: 0.7em; font-weight: 700; padding: 0.1em 0.4em; text-align: center; -webkit-transition: color 0.3s, border-color 0.3s; -moz-transition: color 0.3s, border-color 0.3s; transition: color 0.3s, border-color 0.3s; } .btn:hover { border-color: #16a085; color: #16a085; } /* basic grid, only for this demo */ .align { clear: both; margin: 90px auto 20px; width: 100%; max-width: 1170px; text-align: center; } .align > li { width: 500px; min-height: 300px; display: inline-block; margin: 30px 20px 30px 30px; padding: 0 0 0 60px; vertical-align: top; } /* /////////////////////////////////////////////////// HARDCOVER Table of Contents 1. container 2. background & color 3. opening cover, back cover and pages 4. position, transform y transition 5. events 6. Bonus - Cover design - Ribbon - Figcaption 7. mini-reset /////////////////////////////////////////////////////*/ /* 1. container */ .ebook .book { position: relative; width: 160px; height: 220px; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } /* 2. background & color */ /* HARDCOVER FRONT */ .ebook .hardcover_front li:first-child { background-color: #eee; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } /* reverse */ .ebook .hardcover_front li:last-child { background: #fffbec; } /* HARDCOVER BACK */ .ebook .hardcover_back li:first-child { background: #fffbec; } /* reverse */ .ebook .hardcover_back li:last-child { background: #fffbec; } .ebook .book_spine li:first-child { background: #eee; } .ebook .book_spine li:last-child { background: #333; } /* thickness of cover */ .ebook .hardcover_front li:first-child:after, .ebook .hardcover_front li:first-child:before, .ebook .hardcover_front li:last-child:after, .ebook .hardcover_front li:last-child:before, .ebook .hardcover_back li:first-child:after, .ebook .hardcover_back li:first-child:before, .ebook .hardcover_back li:last-child:after, .ebook .hardcover_back li:last-child:before, .ebook .book_spine li:first-child:after, .ebook .book_spine li:first-child:before, .ebook .book_spine li:last-child:after, .ebook .book_spine li:last-child:before { background: #999; } /* page */ .ebook .page > li { background: -webkit-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%); background: -moz-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%); background: -ms-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%); background: linear-gradient(left, #e1ddd8 0%, #fffbf6 100%); box-shadow: inset 0px -1px 2px rgba(50, 50, 50, 0.1), inset -1px 0px 1px rgba(150, 150, 150, 0.2); border-radius: 0px 5px 5px 0px; } /* 3. opening cover, back cover and pages */ .ebook .hardcover_front { -webkit-transform: rotateY(-34deg) translateZ(8px); -moz-transform: rotateY(-34deg) translateZ(8px); transform: rotateY(-34deg) translateZ(8px); z-index: 100; } .ebook .hardcover_back { -webkit-transform: rotateY(-15deg) translateZ(-8px); -moz-transform: rotateY(-15deg) translateZ(-8px); transform: rotateY(-15deg) translateZ(-8px); } .ebook .page li:nth-child(1) { -webkit-transform: rotateY(-28deg); -moz-transform: rotateY(-28deg); transform: rotateY(-28deg); } .ebook .page li:nth-child(2) { -webkit-transform: rotateY(-30deg); -moz-transform: rotateY(-30deg); transform: rotateY(-30deg); } .ebook .page li:nth-child(3) { -webkit-transform: rotateY(-32deg); -moz-transform: rotateY(-32deg); transform: rotateY(-32deg); } .ebook .page li:nth-child(4) { -webkit-transform: rotateY(-34deg); -moz-transform: rotateY(-34deg); transform: rotateY(-34deg); } .ebook .page li:nth-child(5) { -webkit-transform: rotateY(-36deg); -moz-transform: rotateY(-36deg); transform: rotateY(-36deg); } /* 4. position, transform & transition */ .ebook .hardcover_front, .ebook .hardcover_back, .ebook .book_spine, .ebook .hardcover_front li, .ebook .hardcover_back li, .ebook .book_spine li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .ebook .hardcover_front, .ebook .hardcover_back { -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; transform-origin: 0% 100%; } .ebook .hardcover_front { -webkit-transition: all 0.8s ease, z-index 0.6s; -moz-transition: all 0.8s ease, z-index 0.6s; transition: all 0.8s ease, z-index 0.6s; } /* HARDCOVER front */ .ebook .hardcover_front li:first-child { cursor: default; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-transform: translateZ(2px); -moz-transform: translateZ(2px); transform: translateZ(2px); } .ebook .hardcover_front li:last-child { -webkit-transform: rotateY(180deg) translateZ(2px); -moz-transform: rotateY(180deg) translateZ(2px); transform: rotateY(180deg) translateZ(2px); } /* HARDCOVER back */ .ebook .hardcover_back li:first-child { -webkit-transform: translateZ(2px); -moz-transform: translateZ(2px); transform: translateZ(2px); } .ebook .hardcover_back li:last-child { -webkit-transform: translateZ(-2px); -moz-transform: translateZ(-2px); transform: translateZ(-2px); } /* thickness of cover */ .ebook .hardcover_front li:first-child:after, .ebook .hardcover_front li:first-child:before, .ebook .hardcover_front li:last-child:after, .ebook .hardcover_front li:last-child:before, .ebook .hardcover_back li:first-child:after, .ebook .hardcover_back li:first-child:before, .ebook .hardcover_back li:last-child:after, .ebook .hardcover_back li:last-child:before, .ebook .book_spine li:first-child:after, .ebook .book_spine li:first-child:before, .ebook .book_spine li:last-child:after, .ebook .book_spine li:last-child:before { position: absolute; top: 0; left: 0; } /* HARDCOVER front */ .ebook .hardcover_front li:first-child:after, .ebook .hardcover_front li:first-child:before { width: 4px; height: 100%; } .ebook .hardcover_front li:first-child:after { -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px); -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px); transform: rotateY(90deg) translateZ(-2px) translateX(2px); } .ebook .hardcover_front li:first-child:before { -webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px); -moz-transform: rotateY(90deg) translateZ(158px) translateX(2px); transform: rotateY(90deg) translateZ(158px) translateX(2px); } .ebook .hardcover_front li:last-child:after, .ebook .hardcover_front li:last-child:before { width: 4px; height: 160px; } .ebook .hardcover_front li:last-child:after { -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px); -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px); transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px); } .ebook .hardcover_front li:last-child:before { box-shadow: 0px 0px 30px 5px #333; -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px); -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px); transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px); } /* thickness of cover */ .ebook .hardcover_back li:first-child:after, .ebook .hardcover_back li:first-child:before { width: 4px; height: 100%; } .ebook .hardcover_back li:first-child:after { -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px); -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px); transform: rotateY(90deg) translateZ(-2px) translateX(2px); } .ebook .hardcover_back li:first-child:before { -webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px); -moz-transform: rotateY(90deg) translateZ(158px) translateX(2px); transform: rotateY(90deg) translateZ(158px) translateX(2px); } .ebook .hardcover_back li:last-child:after, .ebook .hardcover_back li:last-child:before { width: 4px; height: 160px; } .ebook .hardcover_back li:last-child:after { -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px); -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px); transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px); } .ebook .hardcover_back li:last-child:before { box-shadow: 10px -1px 80px 20px #666; -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px); -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px); transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px); } /* BOOK SPINE */ .ebook .book_spine { -webkit-transform: rotateY(60deg) translateX(-5px) translateZ(-12px); -moz-transform: rotateY(60deg) translateX(-5px) translateZ(-12px); transform: rotateY(60deg) translateX(-5px) translateZ(-12px); width: 16px; z-index: 0; } .ebook .book_spine li:first-child { -webkit-transform: translateZ(2px); -moz-transform: translateZ(2px); transform: translateZ(2px); } .ebook .book_spine li:last-child { -webkit-transform: translateZ(-2px); -moz-transform: translateZ(-2px); transform: translateZ(-2px); } /* thickness of book spine */ .ebook .book_spine li:first-child:after, .ebook .book_spine li:first-child:before { width: 4px; height: 100%; } .ebook .book_spine li:first-child:after { -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px); -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px); transform: rotateY(90deg) translateZ(-2px) translateX(2px); } .ebook .book_spine li:first-child:before { -webkit-transform: rotateY(-90deg) translateZ(-12px); -moz-transform: rotateY(-90deg) translateZ(-12px); transform: rotateY(-90deg) translateZ(-12px); } .ebook .book_spine li:last-child:after, .ebook .book_spine li:last-child:before { width: 4px; height: 16px; } .ebook .book_spine li:last-child:after { -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px); -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px); transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px); } .ebook .book_spine li:last-child:before { box-shadow: 5px -1px 100px 40px rgba(0, 0, 0, 0.2); -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px); -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px); transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px); } .ebook .page, .ebook .page > li { position: absolute; top: 0; left: 0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .ebook .page { width: 100%; height: 98%; top: 1%; left: 3%; z-index: 10; } .ebook .page > li { width: 100%; height: 100%; -webkit-transform-origin: left center; -moz-transform-origin: left center; transform-origin: left center; -webkit-transition-property: transform; -moz-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease; -moz-transition-timing-function: ease; transition-timing-function: ease; } .ebook .page > li:nth-child(1) { -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; transition-duration: 0.6s; } .ebook .page > li:nth-child(2) { -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; transition-duration: 0.6s; } .ebook .page > li:nth-child(3) { -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; } .ebook .page > li:nth-child(4) { -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s; } .ebook .page > li:nth-child(5) { -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; transition-duration: 0.6s; } /* 5. events */ .book:hover > .hardcover_front { -webkit-transform: rotateY(-145deg) translateZ(0); -moz-transform: rotateY(-145deg) translateZ(0); transform: rotateY(-145deg) translateZ(0); z-index: 0; } .book:hover > .page li:nth-child(1) { -webkit-transform: rotateY(-30deg); -moz-transform: rotateY(-30deg); transform: rotateY(-30deg); -webkit-transition-duration: 1.5s; -moz-transition-duration: 1.5s; transition-duration: 1.5s; } .book:hover > .page li:nth-child(2) { -webkit-transform: rotateY(-35deg); -moz-transform: rotateY(-35deg); transform: rotateY(-35deg); -webkit-transition-duration: 1.8s; -moz-transition-duration: 1.8s; transition-duration: 1.8s; } .book:hover > .page li:nth-child(3) { -webkit-transform: rotateY(-118deg); -moz-transform: rotateY(-118deg); transform: rotateY(-118deg); -webkit-transition-duration: 1.6s; -moz-transition-duration: 1.6s; transition-duration: 1.6s; } .book:hover > .page li:nth-child(4) { -webkit-transform: rotateY(-130deg); -moz-transform: rotateY(-130deg); transform: rotateY(-130deg); -webkit-transition-duration: 1.4s; -moz-transition-duration: 1.4s; transition-duration: 1.4s; } .book:hover > .page li:nth-child(5) { -webkit-transform: rotateY(-140deg); -moz-transform: rotateY(-140deg); transform: rotateY(-140deg); -webkit-transition-duration: 1.2s; -moz-transition-duration: 1.2s; transition-duration: 1.2s; } /* 6. Bonus */ /* cover CSS */ .coverDesign { position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; z-index: 1; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .coverDesign::after { background-image: -webkit-linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%); background-image: -moz-linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%); background-image: linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%); position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .coverDesign h1 { color: #fff; font-size: 2.2em; letter-spacing: 0.05em; text-align: center; margin: 54% 0 0 0; text-shadow: -1px -1px 0 rgba(0,0,0,0.1); } .coverDesign p { color: #f8f8f8; font-size: 1em; text-align: center; text-shadow: -1px -1px 0 rgba(0,0,0,0.1); } .yellow { background-color: #f1c40f; background-image: -webkit-linear-gradient(top, #f1c40f 58%, #e7ba07 0%); background-image: -moz-linear-gradient(top, #f1c40f 58%, #e7ba07 0%); background-image: linear-gradient(top, #f1c40f 58%, #e7ba07 0%); } .blue { background-color: #3498db; background-image: -webkit-linear-gradient(top, #3498db 58%, #2a90d4 0%); background-image: -moz-linear-gradient(top, #3498db 58%, #2a90d4 0%); background-image: linear-gradient(top, #3498db 58%, #2a90d4 0%); } .grey { background-color: #f8e9d1; background-image: -webkit-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%); background-image: -moz-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%); background-image: linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%); } /* Basic ribbon */ .ribbon { background: #c0392b; color: #fff; display: block; font-size: 0.7em; position: absolute; top: 11px; right: 1px; width: 40px; height: 20px; line-height: 20px; letter-spacing: 0.15em; text-align: center; -webkit-transform: rotateZ(45deg) translateZ(1px); -moz-transform: rotateZ(45deg) translateZ(1px); transform: rotateZ(45deg) translateZ(1px); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; z-index: 10; } .ribbon::before, .ribbon::after{ position: absolute; top: -20px; width: 0; height: 0; border-bottom: 20px solid #c0392b; border-top: 20px solid transparent; } .ribbon::before{ left: -20px; border-left: 20px solid transparent; } .ribbon::after{ right: -20px; border-right: 20px solid transparent; } /* figcaption */ .ebook figcaption { padding-left: 40px; text-align: left; position: absolute; top: 0%; left: 160px; width: 310px; -webkit-backface-visibility: hidden; } .ebook figcaption h1 { margin: 0; } .ebook figcaption span { color: #16a085; padding: 0.6em 0 1em 0; display: block; } .ebook figcaption p { color: #63707d; line-height: 1.3; } /* Media Queries */ @media screen and (max-width: 37.8125em) { .align > li { width: 100%; min-height: 440px; height: auto; padding: 0; margin: 0 0 30px 0; } .book { margin: 0 auto; } .ebook figcaption { text-align: center; width: 320px; top: 250px; padding-left: 0; left: -80px; font-size: 90%; } } /* PrismJS 1.16.0 https://prismjs.com/download.html#themes=prism-coy&languages=markup+css+clike+javascript+python&plugins=toolbar */ /** * prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML * Based on https://github.com/tshedor/workshop-wp-theme (Example: http://workshop.kansan.com/category/sessions/basics or http://workshop.timshedor.com/category/sessions/basics); * @author Tim Shedor */ code[class*="language-"], pre[class*="language-"] { color: black; background: none; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 1em; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; line-height: 1.5; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } /* Code blocks */ pre[class*="language-"] { position: relative; margin: .5em 0; overflow: visible; padding: 0; } pre[class*="language-"]>code { position: relative; border-left: 10px solid #358ccb; box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf; background-color: #fdfdfd; background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%); background-size: 3em 3em; background-origin: content-box; background-attachment: local; } code[class*="language"] { max-height: inherit; height: inherit; padding: 0 1em; display: block; overflow: auto; } /* Margin bottom to accommodate shadow */ :not(pre) > code[class*="language-"], pre[class*="language-"] { background-color: #fdfdfd; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: 1em; } /* Inline code */ :not(pre) > code[class*="language-"] { position: relative; padding: .2em; border-radius: 0.3em; color: #c92c2c; border: 1px solid rgba(0, 0, 0, 0.1); display: inline; white-space: normal; } pre[class*="language-"]:before, pre[class*="language-"]:after { /* content: ''; z-index: -2; display: block; position: absolute; bottom: 0.75em; left: 0.18em; width: 40%; height: 20%; max-height: 13em; box-shadow: 0px 13px 8px #979797; -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -ms-transform: rotate(-2deg); -o-transform: rotate(-2deg); transform: rotate(-2deg); */ } :not(pre) > code[class*="language-"]:after, pre[class*="language-"]:after { /* right: 0.75em; left: auto; -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -ms-transform: rotate(2deg); -o-transform: rotate(2deg); transform: rotate(2deg); */ } .token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata { color: #7D8B99; } .token.punctuation { color: #5F6364; } .token.property, .token.tag, .token.boolean, .token.number, .token.function-name, .token.constant, .token.symbol, .token.deleted { color: #c92c2c; } .token.selector, .token.attr-name, .token.string, .token.char, .token.function, .token.builtin, .token.inserted { color: #2f9c0a; } .token.operator, .token.entity, .token.url, .token.variable { color: #a67f59; background: rgba(255, 255, 255, 0.5); } .token.atrule, .token.attr-value, .token.keyword, .token.class-name { color: #1990b8; } .token.regex, .token.important { color: #e90; } .language-css .token.string, .style .token.string { color: #a67f59; background: rgba(255, 255, 255, 0.5); } .token.important { font-weight: normal; } .token.bold { font-weight: bold; } .token.italic { font-style: italic; } .token.entity { cursor: help; } .namespace { opacity: .7; } @media screen and (max-width: 767px) { pre[class*="language-"]:before, pre[class*="language-"]:after { bottom: 14px; box-shadow: none; } } /* Plugin styles */ .token.tab:not(:empty):before, .token.cr:before, .token.lf:before { color: #e0d7d1; } /* Plugin styles: Line Numbers */ pre[class*="language-"].line-numbers.line-numbers { padding-left: 0; } pre[class*="language-"].line-numbers.line-numbers code { padding-left: 3.8em; } pre[class*="language-"].line-numbers.line-numbers .line-numbers-rows { left: 0; } /* Plugin styles: Line Highlight */ pre[class*="language-"][data-line] { padding-top: 0; padding-bottom: 0; padding-left: 0; } pre[data-line] code { position: relative; padding-left: 4em; } pre .line-highlight { margin-top: 0; } div.code-toolbar { position: relative; } div.code-toolbar > .toolbar { position: absolute; top: .3em; right: .2em; transition: opacity 0.3s ease-in-out; opacity: 0; } div.code-toolbar:hover > .toolbar { opacity: 1; } div.code-toolbar > .toolbar .toolbar-item { display: inline-block; } div.code-toolbar > .toolbar a { cursor: pointer; } div.code-toolbar > .toolbar button { background: none; border: 0; color: inherit; font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-user-select: none; /* for button */ -moz-user-select: none; -ms-user-select: none; } div.code-toolbar > .toolbar a, div.code-toolbar > .toolbar button, div.code-toolbar > .toolbar span { color: #bbb; font-size: .8em; padding: 0 .5em; background: #f5f2f0; background: rgba(224, 224, 224, 0.2); box-shadow: 0 2px 0 0 rgba(0,0,0,0.2); border-radius: .5em; } div.code-toolbar > .toolbar a:hover, div.code-toolbar > .toolbar a:focus, div.code-toolbar > .toolbar button:hover, div.code-toolbar > .toolbar button:focus, div.code-toolbar > .toolbar span:hover, div.code-toolbar > .toolbar span:focus { color: inherit; text-decoration: none; } /* CSS uErweiterung */ #axel { color: blue; } #axel2 { color: orange; }