/*** This stylesheet has seen a minor revamp and now has different default padding and looks. The old appearance can be used via the "old" class. ***/ body { font-family: "Consolas", "Arial", sans-serif; font-size: 14px; background: #8dd0fb url("/misc/pond.gif"); /*Replace this with your own background image.*/ text-align: center; /*Text is centered by default.*/ background-size: cover; background-attachment: fixed; background-position:center; } li { text-align: left; /*You can change this, but centered lists can look kind of weird.*/ margin-left: 20px } h1 { text-align: center; font-size: 20px; letter-spacing:4px; } /*Use as the class of spans or divs you want to have normal left-aligned text.*/ /*You can combine classes by putting them together with a space, i.e.
will be a div using "box" and "left" styles.*/ .left { text-align:left; } /*A box that stays at a fixed height and scrolls when content gets too long.*/ .box { margin: 0 auto; overflow: auto; background-color: #fff; border: 2px solid #000; width: 32em; height: 24em; margin-top: 10.5%; padding: 3.5em 4em; } .box-round { margin: 0 auto; background-color: #fff; border: 2px solid #000; width: 32em; height: 24em; margin-top: 7.5%; overflow: auto; padding: 20px; padding-bottom: 30px; border-radius: 50%; padding: 7.5em 6em; } /*A box that doesn't scroll, instead growing in height.*/ .box-noscroll { margin: 5% auto 4% auto; background-color: #fff; border: 2px solid #000; width: 32em; padding: 3.5em 4em; } /*Old box attributes. Use if you want an old-style box.*/ .old { margin-top: 3%; margin-bottom:3%; width: 460px; min-height:50px; padding: 20px; padding-bottom: 30px; } /*Prevent overflow of large images.*/ .box img, .box-noscroll img, .box-round img { max-width: 100%; height: auto; } /*For narrow screens.*/ @media (max-width: 500px) { .box, .box-noscroll { width: 85%; } } /*Mobile compatibility*/ @media (orientation: portrait) { .box, .box-noscroll { width: 85%; } }