/* Original design: In Response (v1.1 - May 15th, 2013) For more information, see http://andreasviklund.com/dt_portfolio/in-response/ */ @import url("font/niconne.css"); * { margin: 0; padding: 0; } /* General styles */ body { background: #ffe9bf top center no-repeat; color: #ccc; font: 85% Tahoma, sans-serif; line-height: 1.5em; overflow-y: scroll; } a { color: #A03232; text-decoration: none; font-weight: 400; } a:hover { text-decoration: underline; } p, ul, ol, dl { margin: 0 0 15px 0; line-height: 1.6em; } h1 { color: #A03232; font-size: 4.6em; margin-bottom: 0; } h1 a { text-transform: none; font-weight: 400; } h1 a:hover { text-decoration: none; color: #eee; } h2 { font-size: 2.8em; margin: 0 0 10px; } h3 { font-size: 2.0em; margin: 0 0 10px 0; } h4 { font-size: 1.4em; margin: 0 0 10px 0; font-weight: bold; } h1, h2 { font-family: "Niconne", serif; color: #A03232; font-weight: 400; line-height: 1.4em; } h3, h4 { color: #A03232; font-weight: 400; line-height: 1.4em; margin-top: 1em; } /* Main layout container */ #layout { margin: 40px auto 0; width: 960px; } body.wider #layout { margin: 40px auto 0; width: 1200px; } /* Footer */ #footer { background: #0a0a0a top center no-repeat; } #footer .col { color: #555; border-top: 1px dotted #1a1a1a; padding: 20px 0; } #footer p { text-align: center; } #footer a { color: #555; font-weight: 400; text-decoration: none; border-bottom: 1px dotted #333; } #footer a:hover { color: #aaa; text-decoration: none; border-bottom: 1px dotted #888; } /* Grid classes, fixed width, 960px with 12 columns */ .col { float: left; margin: 0 10px; overflow: hidden; display: inline; } .col img { max-width: 100%; } .row { width: 960px; margin: 30px auto 0; overflow: hidden; } .row .row { margin: 0 -10px; width: auto; display: inline-block; } .c1 { width: 60px; } .c2 { width: 140px; } .c3 { width: 220px; } .c4 { width: 300px; } .c5 { width: 380px; } .c6 { width: 460px; } .c7 { width: 540px; } .c8 { width: 620px; } .c9 { width: 700px; } .c10 { width: 780px; } .c11 { width: 860px; } .c12 { width: 940px; } /* Grid classes, fixed width, 1200px with 12 columns - add class="wider" to the element to use this */ body.wider .row { width: 1200px; } body.wider .c1 { width: 80px; } body.wider .c2 { width: 180px; } body.wider .c3 { width: 280px; } body.wider .c4 { width: 380px; } body.wider .c5 { width: 480px; } body.wider .c6 { width: 580px; } body.wider .c7 { width: 680px; } body.wider .c8 { width: 780px; } body.wider .c9 { width: 880px; } body.wider .c10 { width: 980px; } body.wider .c11 { width: 1080px; } body.wider .c12 { width: 1180px; } /* Menu list styles */ ul.menu { list-style: none; margin: 0; padding: 10px 0; border-top: 1px solid #333; } ul.menu li { list-style: none; text-align: center; font-size: 1.2em; margin: 0 0 10px; padding: 0 0 8px 0; color: #888; border-bottom: 1px solid #333; } ul.menu li a { font-size: 1.2em; font-weight: 400; } ul.menu li a:hover { color: #eee; text-decoration: none; } /* Additional text classes */ .slogan { font-size: 2.0em; font-style: italic; font-family: "Niconne", Tahoma, sans-serif; } .alignleft { text-align: left; } .alignright { text-align: right; } .aligncenter { text-align: center; } .alignjustify { text-align: justify; } .nomargin { margin: 0; padding: 0; } .separator { height: 100px; margin: 0; padding: 0; background: #0a0a0a bottom center no-repeat; border-bottom: 1px dotted #1a1a1a; } .larger { font-size: 1.2em; } .smaller { font-size: 0.9em; } .spacer { margin: 0 20px; } .clear { clear: both; } .hide { display: none; } .border { border: 1px solid red; } body .navmenu a { font-size: 1.4em; } /* Light styles, apply by using class="light" on the body HTML element */ body.light { background: #ffe7c5 url(images/background.jpg) top center no-repeat; color: #333; } body.light a { color: #A03232; } body.light a:hover { color: #555; } body.light h1 { color: #555; font-size: 4.4em; margin-bottom: 0; font-family: "Niconne", serif; } body.light h1 a:hover { color: #303030; } body.light h2 { color: #555; font-size: 2.8em; font-family: "Niconne", serif; } body.light h1, body.light h2, body.light h3 { color: #A03232; } body.light ul.menu { border-top: 1px solid #ddd; } body.light ul.menu li { border-bottom: 1px solid #ddd; } body.light ul.menu li a:hover { color: #333; } body.light .separator { background: #f5f5f5 bottom center no-repeat; border-bottom: 1px dotted #ccc; } body.light .slogan { color: #333; } body.light #footer { background: #f5f5f5 top center no-repeat; } body.light #footer .col { color: #555; border-top: 1px dotted #ccc; } body.light #footer a { color: #555; border-bottom: 1px dotted #ddd; } body.light #footer a:hover { color: #444; border-bottom: 1px dotted #eee; } body.light .navmenu a { font-size: 1.4em; } /* Alternate colors, apply by adding class="blue" (or any of the other available colors) to the body HTML element */ body.blue a { color: #3288a8; } body.blue h1, body.blue h2, body.blue h3 { color: #3288a8; } body.grey a { color: #666; } body.grey h1, body.grey h2, body.grey h3 { color: #666; } .navmenu a { font-size: 1.2em; margin: 0 20px; } .navmenu a.current { text-decoration: underline; } div.thumbnails img { width: 160px; margin: 0 10px 10px 0; border-radius: 12px; } div.thumbnails img.last { margin-right: 0; } div.thumbnails.buch img { width: 150px; float: left; margin-right: 20px; } div.left { float: left; margin-right: 20px; } div.left img { border-radius: 12px; } div.right { float: right; margin-left: 20px; } .headerimage img { border-radius: 12px; } @media only screen and (max-width: 960px) { #layout, body.wider #layout { width: auto; margin: 0; padding: 20px; } .row { width: 100%; } .col { margin: 0 0 20px 0; } .c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12 { width: 100%; } h1 { margin: -15px auto 5px; line-height: 1.4em; } body .navmenu { margin: 0 0 -15px; } body .navmenu a { font-size: 1.4em; display: inline-block; line-height: 2.0em; padding: 7px 12px; margin: 0 10px 8px 0; background-color: #111; border: 1px solid #222; border-radius: 10px; } body.light .navmenu a { font-size: 1.4em; display: inline-block; line-height: 2.0em; padding: 7px 12px; margin: 0 10px 8px 0; background-color: #fff; border: 1px solid #eee; border-radius: 10px; } body.light .navmenu a.current { border-color: #ddd; text-decoration: underline; } .headerimage img { width: 100%; height: auto; } div.thumbnails img { width: 24%; margin: 0; } div.thumbnails img.last { margin-right: 0; } } form input[type="text"] { display: block; margin: 0 0 10px 0; width: 500px; font-family: monospace; border: 1px solid gray; background: #dce3e8; } form textarea { display: block; margin: 0 0 10px 0; width: 500px; font-family: monospace; border: 1px solid gray; background: #dce3e8; } form label { display: block; } form #contact-form-submit { padding: 5px 10px; font-weight: bold; } div.fotogalerie { margin: 30px 0; } div.fotogalerie img { border-radius: 12px; margin: 0 40px 0 0; } div.fotogalerie img.first { margin: 0 40px 0 0; } div.fotogalerie img.last { margin: 0; } .leseprobe img { border-radius: 12px; margin: 0 10px; } .leseprobe img.first { margin: 0 10px 0 0; } .leseprobe img.last { margin: 0 0 0 10px; } img.portrait { border-radius: 12px; float: right; max-width: 35%; margin: 0 0 1em 1em; } img.book { border-radius: 12px; float: right; max-width: 25%; margin: 0 0 1em 1em; }