/** * CSS- * * @version 2.0 * @author Vaska & punpunsoulmate * * There are also some obscure rules in base.css */ @font-face {font-family: "Newport Gothic"; src: url("//db.onlinewebfonts.com/t/041a708dba6b7808c58769ba731b975b.eot"); src: url("//db.onlinewebfonts.com/t/041a708dba6b7808c58769ba731b975b.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/041a708dba6b7808c58769ba731b975b.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/041a708dba6b7808c58769ba731b975b.woff") format("woff"), url("//db.onlinewebfonts.com/t/041a708dba6b7808c58769ba731b975b.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/041a708dba6b7808c58769ba731b975b.svg#Newport Gothic") format("svg"); } body { font-size: 16px; font-family: "Newport Gothic"; /**font-family: "New Times Roman";*/ background: #f8f6f4; color: #000; line-height: 1.4em; /* font-weight: 300; */ } /* link scheme */ /* you can customize links further down the page too */ //a:link { text-decoration: none; color: #fdd310; } a:link { text-decoration: none; color: #000; } a:visited { text-decoration: none; color: #000; } a:hover { text-decoration: none; color: #3657ff } a:active { text-decoration: none; color: #ff0000; } a img { border: none; } /* general styles */ small { font-size: 9px; } code { font-family: Newport Gothic; } blockquote { padding-left: 9px; } /* headings */ h1 { font-size: 18px; margin-bottom: 1em; font-weight: bold; } h2 { font-size: 16px; margin-bottom: 1em; font-weight: bold; } h3 { font-size: 16px; margin-bottom: 1em; } h4 { font-size: 16px; margin-bottom: 1em; } /* paragraph width */ #index p { margin-bottom: 1em; } //#exhibit p, code, blockquote { width: 600px; margin-bottom: 1em; /* line-height: 1.3em; */ } #exhibit p, code, blockquote { width: 98%; margin-bottom: 1em; /* line-height: 1.3em; */ } /* highlighter style - maybe you want to change colors? */ .highlight { background: #ddff00; color: #000; } /* never adjust the margin or padding here unless you seriously know what you are doing */ /* think #index .container and #exhibit .container for only padding adjustments */ #index { width: 215px; background: none; line-height: 1.3em; margin-left: 0.3em;} #exhibit { max-width: 800px; margin: 0 0 0 215px; } /* styling the index */ #index ul { list-style: none; margin: 0; text-align: left; } #index ul.section { margin-bottom: 1em; text-align: left; } #index ul.subsection { text-align: left; } /* the follow rules for index are not required */ /* they are mostly for complex customization */ /* for tag display */ #index ul#all_tags { list-style-type: none; margin-bottom: 1em; } #index ul#all_tags li { display: inline; margin-right: 3px; } #index ul#all_tags li a { } /* styles for the section titles */ #index ul.section span.section_title, #index ul.section span.section_title a a:link { text-decoration: none; color: #999; } a:visited { text-decoration: none; color: #000; } a:hover { text-decoration: none; color: #3657ff ; } a:active { text-decoration: none; color: #ff0000; } a img { border: none; } { color: black; } /* active section title */ #index span.active_section_title, #index span.active_section_title a { font-weight: bold; font-size: 18px; color: #3657ff; } /* active exhibit title parts */ /* color of active exhibit title link and font-weight */ li.active a:link, li a.active, li.active a:hover a:hover { text-decoration: none; font-style: italic; color: #3657ff }, li a.active, li.active a:active, li a.active, li.active a:visited , li a.active, li span.active, #index ul.section li.active a:link, #index ul.section { font-weight: normal; color: #00f; font-size: 14px; } li.active a:hover, #index ul.section li.active a:active, #index ul.section li.active a:visited { font-weight: normal; color: #00f; font-size: 19px; } /* additional #index options */ #index ul li .password a { /* background: url(../img/locked.gif) right center no-repeat; padding-right: 18px; */ } /* the "new" indicator */ #index ul li sup.new_exhibit { color: #0c0; font-weight: bold; text-transform: uppercase; font-size: 8px; vertical-align: top; } #index ul li sup.new_exhibit:before { color: #0c0; font-weight: bold; text-transform: uppercase; font-size: 8px; vertical-align: top; content: "New"; } /* end styling for index */ /* links styles only for the #index region */ #index a:link { } #index a:visited { } #index a:hover { text-decoration: none; color: #3657ff } #index a:active { } /* links styles only for the #exhibit region */ //#exhibit a:link { text-decoration: none; } #exhibit a:visited { } #exhibit a:hover { text-decoration: none; color: #3657ff } #exhibit a:active { } /* links styles just for h1 title of site (your name/logo) */ #index h1 { font-size: 18px; color: #3657ff; text-decoration: none; margin-top: 1em; margin-bottom: 2em; margin-left: 1em; text-align: left;} #index h1 a:hover { font-size: 18px; text-decoration: none; color: #3657ff;} #index h1 a:visited { font-size: 18px; color: #3657ff; text-decoration: none;} /* this is where you adjust your paddings for #index and #exhibit together */ .container { padding: 0px 0px 0px 0px; } /* this is where you pad them separately */ #index .container { } #exhibit .container { padding: 1em 0 0 1em; margin-right: 10px; } /* size and style of titles and captions (not mobile though) */ .captioning { margin-top: 2px; } .title { font-size: 0.7em; font-style: italic; line-height: 1.2em; } .caption { font-size: 0.7em; font-style: italic; line-height: 1.2em; } #float-footer { position: fixed; width: 215px; bottom: 0px; left: 0px; background-color: #fff; color: #000; text-align: center; font-size: 10px; line-height: 1.3em; margin: 0; padding: 0; } #float-footer a:link { text-decoration: none; color: #000; } #float-footer a:hover { text-decoration: none; color: #3657ff } #float-footer a:visited { text-decoration: none; color: #000; } .codeblock { background-color: #ffd3b8; padding: 0.5em 0.5em 0.5em 0.5em; margin-right: 1em; border-left: 5px solid #ff5500; border-radius: 5px; font-family: Newport Gothic; } .codeblock code { display: block; white-space: pre-wrap; } /** BILDER SKALIEREN AUTOMATISCH KLEINER, ABER NIE GRÖSSER ALS 100% sie müssen in indexhibit aber auf der page eingefügt sein/werden und ggflsauf "inactive" gestellt werden, denn indexhibit gallery bilder folgen ihrer eigenen formatierung ________________________________________________________________*/ img { width: 100%; } /** COVER BILD, mit der #cover-bild ID, skaliert nicht, sondern bleibt orginal */ #cover-bild { width: auto; } #cover-bild-alt { max-width: 100%; min-width: 1000px; float: left; } #cover-bild-flip { width: auto; /* Mirror the background image */ -webkit-transform: scaleX(-1); -khtml-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); } /* Three image containers (use 25% for four, and 50% for two, etc) */ .column { float: left; width: 50%; padding: 5px; } /* Clear floats after image containers */ .row::after { content: ""; clear: both; display: table; } /** OBLSOLET */ .abstandrechts { margin-right: 10px; } /** nothumb GALERIEOPTION hat rechts immer einen abstand, auch wenn das bild inactive is und einge-pastet */ .nothumb { margin-right: 10px; } /**OBLSOLET */ /** SECTION EINZELN STYLEN YEA _______________________________*/ /** stylen einzelner sections --->page scource zeigt welche nummer die section hat - in dem fall die exhibit eintellungen der "main page" section*/ /** so wäre das hintergrundbild scalierend responsive -- hinter dem menü .page_style_1 #exhibit { max-width: 1920px; margin: 0 0 0 0;} */ /** so ist das hintergrundbild 100% groß --hinter dem menü .page_style_1 #exhibit { max-width: 100%; margin: 0 0 0 0;} */ /** hier hab ich gemacht dass das hintergrundbild von section 1 keinen abstand zum rand hat - vorher war #exhibit .container { padding: 1em 0 0 1em; } .page_style_1 #exhibit .container { padding: 0 0 0 0;} */ /** .page_style_1 { font-size: 16px; /** font-family: "Times New Roman"; */ font-family: "Newport Gothic"; background: #fff; color: #000; img-width:20%; line-height: 1.4em; } */ /** RESPONSIVE VIDEO - mitskalierend, wenn das browserfenster klein ist, mit maximalbreite!! _______________________________________________________________________________________*/ /** HOW TO: Youtube (gilt auch für vimeo) iframe in ein div stecken: