git.plutz.net Git - cgilite/blob - common.css

   1 /* ======= GENERIC HTML STYLES ======= */
   2
   3 * {
   4   box-sizing: border-box;
   5   position: relative;
   6   font: inherit;
   7   text-decoration: inherit;
   8   color: inherit; background: transparent;
   9   max-width: 100%;
  10   margin: 0; padding: 0;
  11   border: none;
  12 }
  13
  14 body {
  15   font: normal normal normal medium/1.5em sans-serif;
  16   color: #000; background: #FFF;
  17 }
  18
  19 ul, ol, dl, table, p { margin-bottom: .5em; }
  20
  21 a {
  22   font-style: italic;
  23   text-decoration: underline;
  24   color: #068;
  25 }
  26 a.button {
  27   font-style: inherit;
  28   text-decoration: inherit;
  29   color: inherit;
  30 }
  31
  32 sup { vertical-align: super; }
  33 sub { vertical-align: sub; }
  34 small { font-size: .75em; }
  35 big   { font-size: 1.25em; }
  36 strike, del, s { text-decoration: line-through; }
  37 u {text-decoration: underline; }
  38 i, em { font-style: italic; }
  39 b, strong { font-weight: bolder; }
  40 tt, code, var, samp, kbd { font-family: monospace; }
  41 kbd { font-style: italic; }
  42
  43 ul, ol { margin-left: 1.125em; }
  44 dl dt { font-weight: bolder; }
  45 table th { font-weight: bold; }
  46
  47 hr { border-bottom: 1pt solid; }
  48
  49 h1, h2, h3 {
  50   font-weight: bold;
  51   margin-top: .75em;
  52   margin-bottom: .5em;
  53 }
  54
  55 h4, h5, h6, form legend {
  56   font-weight: bolder;
  57   margin-bottom: .25em;
  58 }
  59
  60 h1 { font-size: 1.5em; }
  61 h2 { font-size: 1.125em; }
  62
  63 select, input, button, textarea, a.button {
  64   display: inline-block;
  65   color: #000; background-color: #FFF;
  66   border: .5pt solid;
  67   padding: .25em .75em;
  68   vertical-align: text-bottom;
  69   border: .5pt solid #000;
  70   border-radius: 2pt;
  71 }
  72 select { padding: .375em 0; }
  73 textarea { min-height: 7em; }
  74
  75 input[type=radio], input[type=checkbox] {
  76   vertical-align: baseline;
  77 }
  78 input[type=number] { text-align: right; padding-right: 0; }
  79
  80 button, input[type=button], a.button {
  81   box-shadow: .125em .125em .25em;
  82   cursor: pointer;
  83 }
  84 input[type=radio], input[type=checkbox], label[for] {
  85   cursor: pointer;
  86 }
  87
  88 label { margin-right: .75em; }
  89 input + label {
  90   margin-left: .375em;
  91 }
  92
  93 @media print {
  94   @page { margin: 20mm; }
  95
  96   h1 { text-align: center; }
  97
  98   h1, h2, h3, h4, h5, h6, form legend {
  99     page-break-inside: avoid;
 100     page-break-after: avoid;
 101     page-break-before: auto;
 102   }
 103   li { page-break-inside: avoid; }
 104   th, dt { page-break-after: avoid; }
 105 }
 106
 107 /* ======= End Generic Styles ======= */
 108
 109 /* ======= Common Styles ======= */
 110
 111 *[tooltip]:hover:after {
 112   display: block;
 113   position: absolute;
 114   min-width: 12em;
 115   bottom: 100%; left: 50%; transform: translate(-50%, 0);
 116   content: attr(tooltip);
 117   padding: .5em;
 118   color: #000; background-color: #FFC;
 119   border: .5pt solid;
 120   z-index: 1;
 121 }
 122
 123 input[type=radio].tab { display: none; }
 124 input[type=radio].tab + label {
 125   display: table-cell;
 126   padding: .5em 1em;
 127   color: #000; background-color: #EEE;
 128   border: .5pt solid;
 129 }
 130 input[type=radio].tab:checked + label {
 131   background-color: #FFF;
 132   border-bottom: none;
 133   box-shadow: .125em -.125em .125em #888;
 134   z-index: 1;
 135 }
 136 input[type=radio].tab ~ *.tab {
 137   display: none;
 138   width: 100%;
 139   margin-top: -.5pt; padding: .25em .75em;
 140   border: .5pt solid;
 141   border-radius: 0;
 142   box-shadow: .125em .125em .125em #888;
 143 }
 144
 145 /* ======= End Common Styles ======= */