/* */ /* http://www.colorcombos.com/color-schemes/7626/ColorCombo7626.html */ /* Notes: DO NOT USE ALL-IN-ONE PROPERTIES IN ANY RULES UNLESS IT WILL NEVER BE OVERWRITTEN! Examples... margin: 0 2px; margin: 22px 0px 3px 1px; padding: 3px; border: 1px solid #000; border-radius: 6px 6px 3px 3px; Why you might ask? It's because I've had to work on many, many, style sheets for various websites and I've learned that the all-in-one properties hinder more than help. You can end up not overwriting a property from something else because of all-in-ones. Let me show you... XHTML

CSS body > div { margin: 0 1px; } div { margin-top: 22px; } Explanation Okay, so, basically, as you can see here "body > div" will take priority over just "div". Because of this, "margin-left" or any other "margin-xyz" will be ignored unless it's explicitly set to "!important", which is bad CSS. What if instead it had been like this... CSS body > div { margin-right: 1px; margin-left: 1px } Explanation With this, instead we can now set "margin-top" without it failing because of the all-in-one property. This may not sound like much of a problem, but once you deal with a huge style sheet or the style sheet from other people, it becomes shockingly apparent why you shouldn't use it. */ html { height: 100%; } body { padding: 0; margin-top: 10px; margin-left: auto; margin-right: auto; width: calc(100% - 60px); min-width: 600px; height: calc(100% - 30px); } #header { width: auto; height: 90px; background-color: #74828F; color: #FFF; font-size: 4.5rem; line-height: 80px; padding-left: 10px; border-top-left-radius: 15px; border-top-right-radius: 15px; } #content { padding-top: 20px; padding-bottom: 20px; width: auto; min-height: calc(100% - 250px - 20px); height: auto; background-color: #525564; } #footer { width: auto; height: 160px; .margin-bottom: 10px; background-color: #74828F; .border-bottom-left-radius: 15px; .border-bottom-right-radius: 15px; } /* Content */ .content-box { padding: 10px 5px; margin-left: auto; margin-right: auto; margin-top: 15px; margin-bottom: 15px; width: calc(100% - 60px); border: 3px solid #74828F; background-color: #74828F; box-shadow: 0 0 5px 3px #BEB9B5; border-radius: 5px; text-align: center; vertical-align: middle; color: #FFF; text-shadow: 0 0 10px #000, 0 5px 15px #000; font-family: "Noto Serif CJK JP Light","MS PMincho",serif; } .content-box:first-child { margin-top: 0px; } .content-box:last-child { margin-bottom: 0px; } #question-display { font-size: 3rem; line-height: 3rem; margin-bottom: 15px; } #romaji-display { } #definition-display { margin-bottom: 4px; } #response { margin-left: auto; margin-right: auto; padding-top: 5px; padding-bottom: 3px; padding-right: 10px; padding-left: 10px; width: calc(100% - 100px); text-align: center; background-color: #FEF6EB; border: none; border-radius: 5px; box-shadow: 0 0 5px 1px #000; font-family: monospace; outline: none; -animation: response-rainbow-box-shadow-0 0s linear 0s 1; transition: all 2s; } #response::placeholder { color: rgba(0, 0, 0, 0.15); } #response:focus { -animation: response-rainbow-box-shadow 5s linear 0s infinite; transition: all 2s; } .wrong-right-box { line-height: 1rem; padding: 5px 5px; margin-left: auto; margin-right: auto; margin-top: -25px; margin-bottom: 15px; width: 300px; -border: 3px solid #74828F; background-color: #74828F; box-shadow: 0 0 5px 3px #BEB9B5; border-radius: 5px; text-align: center; vertical-align: middle; color: #FFF; text-shadow: 0 0 10px #000, 0 5px 15px #000; /* to explain this...well, Arial has JPN set, but really I want serif font */ font-family: "Noto Serif CJK JP Light","MS PMincho",serif; } .answer-is-wrong { background-color: #C25B56; } .answer-is-right { background-color: #96C0CE; } /* body.color-kanjikana ruby:nth-child(3n-2) { color: lightgreen; } body.color-kanjikana ruby:nth-child(3n-1) { color: pink; } body.color-kanjikana ruby:nth-child(3n-0) { color: yellow; } */ body.color-kanjikana ruby.group-0 { color: lightgreen; } body.color-kanjikana ruby.group-1 { color: pink; } body.color-kanjikana ruby.group-2 { color: yellow; } body.color-kanjikana span.blank-space ruby { text-decoration: underline; } input[type="button"].start { width: 320px; margin-top: 5px; padding: 4px; box-sizing: padding-box; border-radius: 5px; border: 1px solid #444; } .clear-all { clear: both; } #multiple-answers { -height: 55px; width: 320px; margin-left: auto; margin-right: auto; } #multiple-answers input[type="button"] { float:left; border: 0; background: rgba(255, 255, 255, 0.6); border-radius: 6px; box-shadow: 0 5px 9px -3px #000; margin-top: 5px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; transform: translateY(0px); transition: all 400ms ease-out; /* font-size and font-family wouldn't work alone because of user-agent stylesheet, ugh */ font: 2.6rem "Noto Serif CJK JP Light","MS PMincho",sans-serif; box-sizing: border-box; width: 54px; height: 70px; padding: 0; } #multiple-answers input[type="button"]:hover { border: 0; background: rgba(255, 255, 255, 0.9); font-size: 2.6em; -border-radius: 0px; transition: all 150ms ease-in; cursor: pointer; color: rgba(50, 90, 100, 0.7); } #multiple-answers input[type="button"]:focus, #multiple-answers input[type="button"].selected { border: 0; background: rgba(255, 255, 255, 0.9); font-size: 2.6em; -border-radius: 0px; box-shadow: 0 0px 5px 0px #FFF; transform: translateY(5px) scale(0.95); transition: all 150ms ease-in; cursor: pointer; outline: none; color: rgba(50, 90, 100, 0.7); } @keyframes response-rainbow-box-shadow-0 { 0%, 100% { box-shadow: 0 0 5px 1px #000; } } @keyframes response-rainbow-box-shadow { 0% { -box-shadow: 4px 4px 5px 1px rgb(255, 0, 0); -background-color: rgb(255, 0, 0); background-color: #5df79d; } 16.6% { -box-shadow: -4px 4px 5px 1px rgb(255, 0, 255); -background-color: rgb(255, 0, 255); } 33.3% { -box-shadow: -4px -4px 5px 1px rgb(0, 0, 255); -background-color: rgb(0, 0, 255); } 50% { -box-shadow: 4px -4px 5px 1px rgb(0, 255, 255); -background-color: rgb(0, 255, 255); background-color: #ffb135; } 66.6% { -box-shadow: -4px -4px 5px 1px rgb(0, 255, 0); -background-color: rgb(0, 255, 0); } 83.3% { -box-shadow: -4px 4px 5px 1px rgb(255, 255, 0); -background-color: rgb(255, 255, 0); } 100% { -box-shadow: 4px 4px 5px 1px rgb(255, 0, 0); -background-color: rgb(255, 0, 0); background-color: #ff5b5b; } } .settings .lists { height: 27px; margin-bottom: 8px; } .settings .lists select { height: 27px; line-height: 27px; overflow: hidden; } #list-group { width: 350px; } #list-subgroup { width: 60px; } .settings .options { height: 27px; } .settings .options span { display: inline-block; height: 27px; min-width: 75px; margin-right: 10px; } .css-label.lite-gray-check, .css-label.lite-x-gray { color: #CCC; } .css-label.lite-green-check, .css-label.lite-x-green { color: lightgreen; } .css-label.lite-red-check, .css-label.lite-x-red { color: #ff5b5b; } .css-label.lite-blue-check, .css-label.lite-x-blue { color: lightskyblue; } .hidden-display { color: transparent; text-shadow: none; } #statistics div.entry { box-sizing: border-box; display: inline-block; width: 15%; margin-right: 1.5%; text-align: right; } #statistics div.entry div { box-sizing: border-box; display: inline-block; } #statistics div.entry div.word { box-sizing: border-box; .width: calc(100% - 30 * 2); } #statistics div.entry div.correct { box-sizing: border-box; width: 30px; color: lightgreen; } #statistics div.entry div.wrong { box-sizing: border-box; width: 30px; color: lightcoral; } /* */