/* elementica.css */
/* (c) 2009-2024 Tantek Celik. Some Rights Reserved.      https://tantek.com  */
/* Inspired by the movie Helvetica         https://tantek.com/asin/B000VWEFP8 */
/* and The Elements of Typographical Style https://tantek.com/isbn/0881791326 */
/*       This style sheet is licensed under a Creative Commons License.       */
/*               http://creativecommons.org/licenses/by/3.0/                  */
/* Please attribute this work by keeping the header intact with name & links. */

/* Purpose: provide simple, clean, and modern default styling foundation      */
/* for the semantic elements of HTML, easily overridable with class selectors */


@import "undohtml.css";

body, input, button {  font-size:24px; }

body {
  font-family: "Helvetica Neue", Helvetica, Geneva, sans-serif;
  padding:2em 5% 2em 25%;
  margin:auto;
  max-width: 30em;
  color:#000;
  background:#fff;
}
/* less padding-left for BlackBerry + handhelds, mobiles with ≤480px screens. */
@media screen\, , handheld {
 body  { padding-left:5%;  }
 ul,ol { padding-left:2em; }
}
@media screen and (max-device-width: 480px) {
 body  { padding-left:5%;  }
 ul,ol { padding-left:2em; }
}

body         {   line-height:2em; }
p            { margin-bottom:2em; }
blockquote   {    margin:2em; }
ins { background:#FFC }
div>ins { display:block }


button {
  margin:0 .5em; padding:0 1em;
  background:#EEE;
  border-radius:.4em; -moz-border-radius:.4em; -webkit-border-radius:.4em;
}
/* no button margins for BlackBerry + handhelds, mobiles with ≤480px screens. */
/* top-aligned labels for mobile */
@media screen\, , handheld {
 button { margin:0; }
 label  { display:block }
}
@media screen and (max-device-width: 480px) {
 button { margin:0; }
 label  { display:block }
}

h1,.h1 { font-size:4em;    line-height:1em;  margin:0.5em  0; }
h2,.h2 { font-size:3em;    line-height:1em;    margin:0.67em 0; } /**/
h3,.h3 { font-size:2em;    line-height:1em;    margin:1em    0; } /**/
h4,.h4 { font-size:1.75em; line-height:1.72em; margin:1.14em 0; } /**/
h5,.h5 { font-size:1.5em;  line-height:1.33em; margin:1.33em 0; } /**/
h6,.h6 { font-size:1.33em; line-height:1.65em; margin:1.65em 0; } /*1.5*/
hgroup h1:first-child,hgroup .h1:first-child,
hgroup h2:first-child,hgroup .h2:first-child,
hgroup h3:first-child,hgroup .h3:first-child,
hgroup h4:first-child,hgroup .h4:first-child,
hgroup h5:first-child,hgroup .h5:first-child,
hgroup h6:first-child,hgroup .h6:first-child { margin-bottom:0; }

hgroup *+h2,hgroup *+.h2,
hgroup *+h3,hgroup *+.h3,
hgroup *+h4,hgroup *+.h4,
hgroup *+h5,hgroup *+.h5,
hgroup *+h6,hgroup *+.h6                 { margin-top:0 }

/* extra whitespace at top of mobile displays */
@media screen\, , handheld {
 h1,.h1 { margin-top:0 }
}
@media screen and (max-device-width: 480px) {
 h1,.h1 { margin-top:0 }
}

footer,.footer { margin-top:4em; font-size:.667em; line-height:2em }
footer .footer { font-size:1em; } /* avoid double-applying relative size */
footer p,.footer p { margin:1em 0; }

h1 :link, h1 :visited,
h2 :link, h2 :visited,
h3 :link, h3 :visited,
h4 :link, h4 :visited,
h5 :link, h5 :visited,
h6 :link, h6 :visited
{
  color:inherit;
  text-decoration:none;
}
h1 :link:hover, h1 :visited:hover, 
h2 :link:hover, h2 :visited:hover, 
h3 :link:hover, h3 :visited:hover, 
h4 :link:hover, h4 :visited:hover, 
h5 :link:hover, h5 :visited:hover, 
h6 :link:hover, h6 :visited:hover
{
  text-decoration:none;
}

:link:hover,:visited:hover {text-decoration:underline}

input {
  font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Geneva, sans-serif;
}

dfn { font-style:italic }