experimental: basic set of css rules

diff --git a/common.css b/common.css
new file mode 100644 (file)
index 0000000..4b9501b
--- /dev/null
+++ b/common.css
@@ -0,0 +1,128 @@
+/* ======= GENERIC HTML STYLES ======= */
+
+* {
+  box-sizing: border-box;
+  position: relative;
+  font: inherit;
+  text-decoration: inherit;
+  color: inherit; background: transparent;
+  max-width: 100%;
+  margin: 0; padding: 0;
+  border: none;
+}
+
+body {
+  font: normal normal normal medium/1.5em sans-serif;
+  color: #000; background: #FFF;
+}
+
+ul, ol, dl, table, p { margin-bottom: .5em; }
+
+a {
+  font-style: italic;
+  text-decoration: underline;
+  color: #068;
+}
+a.button {
+  font-style: inherit;
+  text-decoration: inherit;
+  color: inherit;
+}
+
+sup { vertical-align: super; }
+sub { vertical-align: sub; }
+small { font-size: .75em; }
+big   { font-size: 1.25em; }
+strike, del, s { text-decoration: line-through; }
+u {text-decoration: underline; }
+i, em { font-style: italic; }
+b, strong { font-weight: bolder; }
+tt, code, var, samp, kbd { font-family: monospace; }
+kbd { font-style: italic; }
+
+ul, ol { margin-left: 1.125em; }
+dl dt { font-weight: bolder; }
+table th { font-weight: bold; }
+
+h1, h2, h3 {
+  font-weight: bold;
+  margin-top: .75em;
+  margin-bottom: .5em;
+}
+
+h4, h5, h6, form legend {
+  font-weight: bolder;
+  margin-bottom: .25em;
+}
+
+h1 { font-size: 1.5em; }
+h2 { font-size: 1.125em; }
+
+select, input, button, textarea, a.button {
+  display: inline-block;
+  background-color: #FFF;
+  border: .5pt solid;
+  padding: .25em .75em;
+  vertical-align: text-bottom;
+  border: 1pt solid #888;
+  border-radius: 2pt;
+}
+select { padding: .375em 0; }
+
+input[type=radio], input[type=checkbox] {
+  vertical-align: baseline;
+}
+input[type=number] { text-align: right; padding-right: 0; }
+
+button, input[type=button], a.button {
+  box-shadow: .125em .125em .25em;
+  cursor: pointer;
+}
+input[type=radio], input[type=checkbox], label[for] {
+  cursor: pointer;
+}
+
+label { margin-right: .75em; }
+input + label {
+  margin-left: .375em;
+}
+
+/* ======= End Generic Styles ======= */
+
+/* ======= Common Styles ======= */
+
+*[tooltip]:hover:after {
+  display: block;
+  position: absolute;
+  bottom: -100%; left: 50%; transform: translate(-50%, 0);
+  content: attr(tooltip);
+  padding: .5em;
+  background-color: #FFC;
+  color: #000;
+  border: .5pt solid;
+  z-index: 1;
+}
+
+input[type=radio].tab { display: none; }
+input[type=radio].tab + label {
+  display: table-cell;
+  padding: .5em 1em;
+  background-color: #EEE;
+  border: .5pt solid;
+}
+input[type=radio].tab:checked + label {
+  background-color: #FFF;
+  border-bottom: none;
+  box-shadow: .125em -.125em .125em #888;
+  z-index: 1;
+}
+input[type=radio].tab ~ *.tab {
+  display: none;
+  width: 100%;
+  margin-top: 0; padding: .25em .75em;
+  border: .5pt solid; border-top: none;
+  border-radius: 0;
+  box-shadow: .125em .125em .125em #888;
+}
+
+/* ======= End Common Styles ======= */