/* Cascading Style Sheet (CSS) for Terms list */

/* Start with the style-sheet reset. */

html, body, div, iframe, h1, h2, h3, h4, h5, h6, p, a, code, em, img, q, strong, sub, sup, b, u, i, center, table, caption, tr, th, td
{
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
}

/* For storing images on page, hidden, to make them available to scripts */
img.hidden
{
  display: none;
}


/* Ensure that HTML5 elements display as blocks, like <div>, for consistency even if the browser doesn't speak HTML5.  See http://net.tutsplus.com/tutorials/html-css-techniques/how-to-make-all-browsers-render-html5-mark-up-correctly-even-ie6/ for specifics.  Do not include the <div> in this... causes overlap. */
section, aside, header, nav, article, footer, address, figure, figcaption, dl, dt, dd
{
  display: block;
}


/* Set the standard page background (FFFFCC, a mild, browser-safe beige), and the margins between the text and the window edge:  5 line heights at the top, 3 to the right, 16 at the bottom, and 6 to the left because the navigation menu bar goes there. */
body
{
  background-color: #FFFFCC;
  margin: 3.5em 3em 15em 6em;
  /* This instruction creates extra space between paragraphs.  Why? */
  /*white-space: pre-wrap;*/
}


/* A reset just for tables, plus some local changes */
table
{
  border-collapse: collapse;
  border-spacing: 0;
  font-family: "Arial", sans-serif;
  /* Padding isn't working well in IE, so use margin instead. */
  margin: 1em 3em 0em 3em;
}

.centered-columns
{
  text-align: center;
}

.courier
{
  font-family: courier, monocode;
  font-size:  110%;
  text-align:  center;
}

/* New HTML 5 element, essentially a <div> for containing site navigation. */
nav
{
  text-align: center;
}



/* Define the paragraph types used by the document. */

/* The header for each page -- color is dark gray.  For fully W3C-compliant CSS, if you define the color you define background too, even though "transparent" is the default. */
h1
{
  font-size: 6em;
  font-weight: bold;
  color: #303030;
  background-color: transparent;
  text-align: left;
  margin: 0 auto .5em 0;
}


/* The title block for the home page, in black, with border, centered, etc. */
h1.title
{
  font-size: 2.5em;
  color: #000000;
  text-align: center;
  margin: 1em 2em 1em 2em;
  border-style: double;
  border-width: .1em;
  padding: 1em 1em 1em 1em;
}


h1.recipe
{
  font-size: 2.5em;
}


h2
{
  font-size: 2em;
  font-weight: bold;
  text-align: left;
  margin: 2em auto .5em 0;
}


/* Defined in HTML5 as a term in a <dl>, a definition list.  That's what I'm doing, so I'm using it as the markup element for each term.  Leave plenty of space (4 lines) before it to keep the terms well separated. */
dt
{
  margin: 4em 0em 0em 0em;
  font-family: "Times", "Times New Roman", serif;
  font-size: 130%;
  font-weight: bold;
}

/* Defined in HTML5 as the explanatory text following a <dt> element.  Again, custom-made for my purposes.  Left-indent it 2.5 line spaces. */
dd
{
  margin: 1em 0em 0em 2em;
  font-family: "Times", "Times New Roman", serif;
  font-size: 115%;
  /* This doesn't work in IE 7. */
  white-space: pre-wrap;
}

/* Addressing complaints by the sistrix.com algorithm, this replaces p.sub1. */
/* Sub-entry under <dd> text -- left-indented another 2 lines, slightly smaller font. */
dd.sub1
{
  margin: 1em 2em 0em 4em;
  font-size: 105%;
}

/* Addressing complaints by the sistrix.com algorithm, this replaces p.sub1_cont. */
/* This is a continuation of dd.sub1. */
dd.sub1_cont
{
  margin: 0.5em 2em 0em 4em;
  font-size: 105%;
}

/* Addressing complaints by the sistrix.com algorithm, this replaces dd.sub2. */
/* The little-used sub-sub-entry -- left-indented another 2 lines, to 6, and font continues to shrink. */
dd.sub2
{
  margin: 1em 4em 0em 6em;
  font-size: 100%;
}

/* Addressing complaints by the sistrix.com algorithm, this replaces p.sub2_cont. */
/* Continuation of dd.sub2. */
dd.sub2_cont
{
  margin: 0.5em 4em 0em 6em;
  font-size: 100%;
}

/* Addressing complaints by the sistrix.com algorithm, this replaces p.disam_tag */
dd.disam_tag
{
  margin: 1em 0 0 0;
  display: inline;
  float: left;
  font-size: 110%
  font-weight: bold;
  color: #666666;
}


/* Old standard paragraph type for entry text -- one line-height space below the paragraph, two to the left, none above or to the right; preserve all whitespace characters instead of condensing them to a single space; and use Times New Roman or the generic serif font.  I'm keeping this   */
p{
  margin: 1em 0em 0em 2em;
  font-family: "Times", "Times New Roman", serif;
  font-size: 110%;
  /* This doesn't work in IE 7. */
  white-space: pre-wrap;
}


/* For the instructions at the top of the home page */
p.instructions{
  margin: 2em 4em 1em 4em;
  text-indent: 0;
  font-family: "Arial", sans-serif;
  font-size: 1.5em;
  text-align: center;
  color: #800000;
}

/* For use only in the introduction, with a different font. */
p.intro{
  margin: 1em 0 1em 0;
  text-indent: 0;
/*  font-family: "Arial", sans-serif; */
  font-size: 120%;
  line-height: 125%;
}

/* For fine print at the bottom of a page. */
p.fineprint{
  margin: 1em 9em 0em 9em;
  text-indent: 0;
  text-align: center;
  font-size: 0.6em;
}

/* For the "Last updated" comment near the top of the home page */
p.update
{
  font-family: "Arial", sans-serif;
  font-size: 100%;
  font-weight: bold;
  margin: -2.5em 5em 0 0;
  text-align: right;
  color: #3300CC;
}


/* For placing a caption under multiple figures created within a <div> as <figure class="tile"> (each figure can have its own caption as well).
   Tried doing this as a class of <caption> but that didn't work, for reasons unknown. */
p.multi_image
{
  margin: 0.5em 0 0 0;
  display: block;
  text-align: center;
  font-family: "Arial", sans-serif;
  font-weight: bold;
}


/* Used for the Q: and A: in the FAQ */
p.faq_q{
  margin: 2em 0 0 0;
  text-indent: 0;
  font-family: "Arial", sans-serif;
  font-size: 105%;
  font-weight: bold;
}
p.faq_a{
  margin: .75em 0 0 0;
  text-indent: 0;
  font-family: "Arial", sans-serif;
  font-size: 105%;
}

/* For ASCII art and suchlike, no spacing above or below */
p.monocode{
  font-family: "Courier New", monocode;
  font-size: 115%;
  margin: 0 0 0 4em;
}


/* Bulleted list */
ul{
  margin: 0em 0em 0em 2em;
  text-indent: 0.25em;
  font-family: "Times", "Times New Roman", serif;
  font-size: 110%;
}

/* Lines of bulleted list */
li
{
  margin-top: .25em;
  padding-left: 2em;
  text-indent: -2em;
  white-space: pre-wrap;
}


/* For holding multiple linked figures:  centered, 1 line space before it */
div.image
{
  margin: 1em 0em 1em 3em;
/*  align: center;  */
  font-family: "Arial", sans-serif;
  text-align: center;
  max-width: 100%;
}

/* Only use so far is containing a figure within the "image" div above */
span
{
  display: inline-block;
}

/* The new HTML5 figure and figcaption elements -- BE WARNED, most versions of IE don't support this!  What can I do about that if I go ahead and use it anyway?  See http://net.tutsplus.com/tutorials/html-css-techniques/how-to-make-all-browsers-render-html5-mark-up-correctly-even-ie6/ */
figure
{
  margin: 1em 0 0 0;
  display: block;
/*  align: center;  */
  font-family: "Arial", sans-serif;
  text-align: center;
}

figcaption
{
  margin: 0.5em 0 0 0;
  display: block;
  text-align: center;
  font-weight: bold;
}

/* For multiple figures side-by-side in a div.image */
figure.tile
{
  margin: 1em .5em 0 .5em;
}


/* For drawing with JavaScript */
canvas
{
  margin: .5em .25em .5em .25em;
  border: 1px solid black;
}

/*
 Canvas that uses an X-Y plane 257 pixels square as its background
 IMPORTANT:  Scripts can't read CSS.  So, when defining an instance of this canvas in HTML, do <canvas class="polar" id="whatever" width="257px" height="257px">.  If a JavaScript function doesn't have inline dimensions to go by, it defaults to treating canvases as 300x150 pixels.
*/
canvas.xy_plane
{
  width: 257px;
  height: 257px;
  background-image:url(terms/js/images/xyplane.png);
}
 
/* Similarly, create instances of this one with <canvas class="capacitor" id="whatever" width="676px" height="412px">. */
canvas.capacitor
{
  width: 676px;
  height: 412px;
  background-image:url(terms/js/images/capacitor.png);
}

/* And one for the lightning demo */
canvas.lightning
{
  width: 730px;
  height: 340px;
  background-image:url(terms/js/images/lightning.png);
}


div.multi_canvas
{
  font-family: "Arial", sans-serif;
  color: #FF0000;
  /* Relative position allows elements within this div to use absolute position. */
  position: relative;
  /* Setting auto margins will horizontally center this div on the page. */
  margin: auto;
  padding:  .5em .5em .5em .5em;
  text-align: center;
  border: 1px solid black;
  /* Must be at least wide enough to hold two button divs and a div containing a canvas.xy_plane */
  min-width: 756px;
  /* Limit to half the page */
  width: 50%;
}

div.canvas_capacitor
{
  font-family: "Arial", sans-serif;
  color: #FF0000;
  /* Relative position allows elements within this div to use absolute position. */
  position: relative;
  /* Setting auto margins will horizontally center this div on the page. */
  margin: auto;
  padding:  .5em .5em .5em .5em;
  text-align: center;
  border: 1px solid black;
  /* Must be at least wide enough to hold two divs:  One for a canvas.capacitor instance, and one div.left_buttons */
  min-width: 856px;
  /* Limit to 3/4 of the page */
  width: 75%;
}

div.canvas
{
  font-size: 90%;
  display: inline;
  margin-bottom: 0;
  /* Must be at least wide enough to hold a canvas.xy_plane */
  min-width: 257px;
}

/* For positioning button controls to the left of another div */
div.left_buttons
{
  /* place at top left within the div that encloses it */
  position: absolute;
  top: 0;
  left: 0;
  margin: .5em .1em .5em .1em;
  text-align: right;
  display: inline;
  /* At least as wide as a button */
  min-width: 80px;
}
 
/* For positioning button controls to the right of another div */
div.right_buttons
{
  /* place at top right within the div that encloses it */
  position: absolute;
  top: 0;
  right: 0;
  margin: .5em .1em .5em .1em;
  text-align: left;
  display: inline;
  /* Wide enough for a minimum-width button, plus a little for luck */
  min-width: 130px;
}

/* Just to cancel "float" property at the end of a div that contains floated items */
div.clear
{
  clear: both;
}
 
/* Button control */
button
{
  margin: 0.6em 0.1em 0.1em 0.1em;
  text-align: center;
  min-width: 80px;
}
 

/* Adjust the size and spacing of the superscript and subscript tags. */
sup, sub
{
  font-size: 80%;
  position: relative;
}
sup { bottom: 0.4em; padding-left: .15em; }
sub { top: 0.3em; }



/* Metric Conversion Page features */

input[type=number]
{
/*  line-height: 1.4em; */
  min-height: 1.4em;
  margin: 0em 0.1em 0em 0.1em;
  /* Hide the default spinner control that Mozilla Firefox adds to <input> field when type=number */
  -moz-appearance: textfield;
  text-align: right;
  width: 80px;
}

button.convert
{
  margin: 0em 0.1em 0em 0.1em;
  min-width: 40px;
  min-height: 1.2em;
}

/* Divs to display side by side */
div.leftcolumn
{
  position: relative;
  float: left;
  width: 29%;
  text-align: right;
  display: inline;
}
div.rightcolumn
{
  position: relative;
  float: left;
  width: 70%;
  text-align: left;
  display: inline;
}
div.clear
{
  clear: both;
}



/* Create a format for an iframe that carries the id="navbar" tag, which is the navigation bar for the pages. */

iframe{
  /* This is a hack to create an absolutely positioned menu for IE 6, which doesn't support fixed positioning. */
  *position: absolute; position: fixed;
  /* These set the top, left, right, and bottom positions of the iframe with respect to the top, left, etc. of
  the next positioned object on the page.  Okay, what does that mean?  */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  /* Setting height to auto doesn't do what you would hope. */
  /* height: 3.5em;
  width: 100%; */
  height: 98%;
  width: 4.2em;
  border-style: ridge;
  border-width: .25em;
  border-color: gray;
  /* Setting these here does nothing.  I think the formatting for the page that includes the iframe overrides them. */
  background-image: none;
  background-color: #AFEEEE;
}


/* Put the anchors (used for hyperlinks) in bold font.  Looks better. */
a
{
  font-weight: bold;
}
/* Don't underline hyperlinks. */
a:link
{
  text-decoration: none;
}
/* For the navigation bar's one-letter hyperlinks to the terms pages. */
a.navbar
{
  font-family: courier, monocode;
  font-size:  110%;
}
/* Use for all links to external sites, so they'll stand out (underlined & red). */
a.web
{
  font-weight: normal;
  text-decoration: underline;
  color: #FF0000;
}

/* The default font size for the <code> tag is too small, so increase it. */
code
{
  font-size: 110%;
}


/* Horizontal rule -- "text-align: center" centers it for IE, and L/R margin "auto" centers it for Firefox. */
hr
{
  text-align: center;
  margin: .75em auto 0 auto;
  width: 75%;
}


/* TABLE FORMATTING */

/* Align text to the middle of the cell, and leave some space to the left of and above each cell. */
td
{
  vertical-align: middle;
  padding-left: 1.25em;
  padding-top: 0.2em;
}

/* For the table that contains Maxwell's Equations */
td.max
{
  font-size: 125%;
  font-weight: bold;
  min-width: 10em;
}