/* 'stilla' is a wondercms theme which uses simplified HTML5 markup, Google Fonts, CSS3 animations (for the credits) and images that fade in/out in the background (thanks to a small script) You can see the theme in use on: http://css4.pub The theme includes a class name on the element to identify the page, e.g. Håkon Wium Lie March 2015 Nov 2016 */ @import url(http://fonts.googleapis.com/css?family=Tauri); @import url(http://fonts.googleapis.com/css?family=Lato); @import url(http://fonts.googleapis.com/css?family=Fanwood+Text:400,400italic); html, body, div, h1, h2, h3, p, blockquote, ul, ol, li, pre { margin: 0; padding: 0 } li { margin-left: 1.5em } html { min-height: 100%; position: relative; } body { margin-top: 100px; background: #dfe2ad; font: 16px Lato, sans-serif; } h1, h2, h3 { margin: 0.5 0 0.7em; padding: 0; font-family: "Fanwood Text", serif; font-weight: normal } h1 { font-size: 3em; font-style: italic; text-align: center } h2 { font-size: 2em; } h2 { font-size: 1em; font-weight: bold } a { text-decoration: none; border-bottom: 1px #fff dotted; } p, blockquote { margin: 0.8em 0 } blockquote { font-style: italic } /* navigation on top */ nav { position: fixed; top: 0; left: 0; right: 0; height: 100px; background: #036; color: white; z-index: 2; } nav a { color: white } nav h1 { float: left; margin: 10px 20px 0 20px; font: 60px Tauri, sans-serif; text-transform: uppercase; } @media (max-width: 1000px) { /* reduce font size on small screens */ nav h1 { font-size: 30px } } nav ul { text-align: right; margin: 20px 20px 10px 0; font: bold 14px/1.6 Lato, sans-serif; text-transform: uppercase; } nav li { display: inline; list-style: none; margin: 5px; } nav a { border: none; transition: 0.2s; } nav li a:hover { color: orange; } #wrapper { color: black; margin: 100px 0 0 20px; xpadding: 20px; min-height: 800px; border-top-right-radius: 5px; } #wrapper:after { content: ""; display: block; clear: both; } #wrapper a { color: #444; border-bottom: 1px #444 dotted; } #wrapper p:first-of-type { padding-top: 20px } aside { display: none; width: 30%; position: absolute; right: 0; top: 60px; /* z-index: -1;*/ min-height: 1000px; margin: 0; background: white; border: none; } figure.picol { width: 40%; float: right; margin: 0 0 0 10px; padding: 0; border: none; } figure.picol img { width: 100%; } #over { position: absolute; top: 100px; left: 0px; width: 100%; } footer { display: block; position: fixed; bottom: 0; width: 50em; /* hopefully credits fit this space */ right: -47em; /* hopefully the word 'credit' fits into the 3 em difference */ height: 1.6em; background: black; color: white; font-size: 13px; padding: 0.4em 0.8em; transition: 0.5s; } footer a { color: white } footer:hover { right: 0 } /* move footer in when hovered */ /* styles to for image that fade in/out */ .fadein { position: relative; width: 100%; z-index: -1 } .fadein img { position: absolute; left:0; top:0; width: 100%; } /* some sensible settings on tables */ table { margin: 1em 0; border-collase: collapse; vertical-align: top } td, th { padding: 0.1em 0.3em; } th { text-align: left } td.sum { text-align: right } /* some sensible classes to keep around */ .right { float: right; margin: 0.8em 0 0.8em 1%; max-width: 40%; clear: right } .center { text-align: center } .border { margin-bottom: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .hide { margin: 0; width: 100%; display: none; } /* style for thumnails */ body.bilder #wrapper a { border: none !important } body.bilder #wrapper img { border: none !important } body.bilder #wrapper img { margin: 6px 4px; box-shadow: 2px 2px 2px 0px gray } body.bilder #wrapper img:hover { box-shadow: 4px 4px 4px 0px gray } /* style for settings and editing */ span.editText { display: block; cursor: pointer; } span.editText textarea { border: 0; padding: 0; width: 100%; resize: none; color: inherit; display: block; overflow: hidden; font-size: inherit; line-height: inherit; font-family: inherit; background-color: transparent; } .change { width: 100%; height: auto; padding: 20px; margin-top: 5px; background: #1F2B33; } .change select { width: 20%; color: #fff; border: none; padding: 10px; font-weight: bold; background: #16a6b6; } .settings { width: 100%; clear: both; color: #fff; height: auto; padding: 5px 0; text-align: center; background: #16a6b6; } .settings h3 { font-family: Lato, sans-serif; } .settings .change { width: 52%; text-align: left; margin-left: 10%; }