/* Common layout styles                                 */
/* They will define the common web site appearance      */

body {
   font-family:  "Open Sans", Verdana, Helvetica, sans-serif;
   font-size: 16px;
   padding: 0px;
   margin: 0px;
   background-color: white;
   box-sizing: border-box;
   color: black;
}

body * {
  box-sizing: border-box;
}

div {
  margin: 0;
  padding: 0;
  border: 0;
}


/* Title styles */

div.title {
  color: #ffff00;
  text-align: left;
  background-color: #800010;
  padding: 0px 8px 8px 32px; 
}

span.title {
  color: white;
  text-align: left;
  font-size: 4em;
  font-weight: bold;
  line-height: 1.1em;
}

span.title_small {
  color: white;
  text-align: left;
}

/* Footer styles */

div.footer {
  text-align: left;
  background-color: #800010;
  color: white;
}

/*
div.footer * {
  border: 1px solid yellow;
}
*/

div.footer a {
  color: white;
  white-space: nowrap;
}

span.footer_l {
  display: inline-block;
  width: 35%;
  vertical-align: top;
  box-sizing: border-box;
  text-align: left;
  padding: 8px;
}

span.footer_r {
  display: inline-block;
  width: 35%;
  vertical-align: top;
  box-sizing: border-box;
  text-align: right;
  padding: 8px;
}

span.footer_c {
  display: inline-block;
  width: 30%;
  vertical-align: top;
  box-sizing: border-box;
  text-align: center;
  padding: 8px;
}

div.align_left {
  text-align: left;
  display: inline-block;
}

/* Content container */

div.content {
  position: fixed;
  height: 100%;
  width: 70%;
  background-color: white;
  overflow: auto;
  box-sizing: border-box;
}

div.text {
  margin: 16px;
  box-sizing: border-box;
}

div.right2 {
  background-color: #303030;
  color: white;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px;
  box-sizing: border-box;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
  z-index: 300;
}

div.right2 * {
  color: white;
}


div.right {
  position: fixed;
  height: 100%;
  width: 30%;
  right: 0px;

  background-color: #303030;
  color: white;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px;
  padding-right: 0px;
  box-sizing: border-box;

  z-index: 300;
}


div.right * {
  color: white;
}


/* Styles for the article formating. */

table.txt {
   border-left-width: 0px;
   border-top-width: 0px;
   border-right-width: 1px;
   border-bottom-width: 1px;
   border-style: solid;
   border-color: #606060;
   margin:4px;
   background-color: white;
   border-collapse: collapse;
}


/* style of the article table cell */

table.txt td {
   border-left-width: 1px;
   border-top-width: 1px;
   border-right-width: 0px;
   border-bottom-width: 0px;
   border-style: solid;
   border-color: #606060;
   padding-left: 4px;
   padding-right: 4px;
   padding-top: 1px;
   padding-bottom: 1px;
   margin: 0px;
}


/* headings */

h1 {
   font-size: 1.3em;
   font-weight: bold;
   text-align: center;
}


h2 {
  font-size: 1.2em;
  font-weight: bold;
  margin-top: 20pt;
  margin-bottom: 10pt;
  text-align: left;
}

h3 {
  font-weight: bold;
  font-size: 1.1em;
  margin-top: 20pt;
  margin-bottom: 10pt;
  text-align: left;
}

h4 {
  font-weight: bold;
  margin-top: 10pt;
  margin-bottom: 8pt;
  text-align: left;
}


h5, h6 {
  font-weight: bold;
  font-weight: normal;
  display: inline-block;
  background-color: #ffffc0;
  border: 1px solid #606060;
  padding: 2pt 4pt 2pt 4pt;
  margin: 20pt 2pt 2pt 2pt;
}


/* paragraph style */

p {
   text-align: justify;
   margin-top: 0.75em;
   margin-bottom: 0.75em;
}

p.modified {
  text-align: center;
  background-color: #c0c0c0;
}

p.uli {
  display: list-item;
  list-style: disc inside;
}


code {
  font-family: "Source Code Pro", monospace;
  font-weight: bold;

  padding: 0px 3px 0px 3px;
  text-indent: 0px;
  white-space: pre;
}


div.code {
  padding: 1em;

  font-family: "Source Code Pro", monospace;
  font-weight: bold;
  overflow: auto;
  max-height: 30em;
  max-width: 90%;
  white-space: pre;
  border-left: 8px solid #c0c0c0;
}

pre {
  margin: 0px;
  padding: 0px;
  white-space: pre;
}


/* Style of the text included image. */

img.txt {
  margin: 1em;
  margin-left:auto;
  margin-right: auto;
  display: block;
  clear: both;
  max-width: 90%; 
}

img.txt1 {
  border-style: none;
  border-width: 0px;
  float: left;
  clear: left;
  margin-right: 1em;
  margin-bottom: 1em;
}

img.txt2 {
  border-style: none;
  border-width: 0px;
  float: right;
  clear: right;
  margin-left: 1em;
  margin-bottom: 1em;
}



/* block quote div container style */
div.bq {
  border: 0px solid #808080;
  padding: 1em;
  margin: 0.5em;

  border: 2px solid gray;
  clear: both;
}

h1.bq
{
  margin-left: 0px;
  margin-top: -1.7em;
  margin-bottom: 0px;
  padding: 0em 0.3em 0em 0.3em;
  
  border: 2px solid #808080;
  background-color: #f8f8f8;
  
  font-size: 1em;
  font-weight: normal;
  
  float: left;
  clear: both;
}

div.right div.bq, div.right h1.bq {
  background-color: #303030;
}



/* Article anchors content */

a.a:before {
 text-decoration: none;
 display: inline-block;
 overflow: hidden;
 content: url(images/anchor.png);
 vertical-align: bottom;
}


/* headings back link content */
a.back:before {
 margin-left: 0.3em;
 text-decoration: none;
 display: inline-block;
 overflow: hidden;
 content: url(images/toc.gif);
 vertical-align: middle;
}


hr {
 margin-top: 1em;
 margin-bottom: 1em;
}


/* Feedback form styles */


form.feedback {
  padding: 8px;
  box-sizing: border-box;
}

input.subject {
  display: none;
}

input.title {
  display: none;
}

div.label1, div.label2 {
  display: block;
  padding-right: 1em;
}

div.label3 {
  display: none;
}

div.label4 {
  display: none;
}

div.feedback {
  clear: both;
  text-align: justify;
}

div.feedback * {
  font-size: 0.9em;
}

div.feedback h2 {
  font-size: 1em;
  text-align: center;
  margin-top: 0px;
}

div.allopinions * {
  font-size: 0.9em;
}


div.feedback h4 {
  text-align: left;
}

div.feedback textarea {
  border: 2px solid gray;
  resize: vertical;
  box-sizing: border-box;
  background-color: #303030;
  width: 100%;
}

div.feedback input {
  border: 2px solid gray;
  margin-top: 4px;
  margin-bottom: 4px;
  margin-right: 4px;
  box-sizing: border-box;
  width: 100%;
  background-color: #303030;
}

div.feedback input.button {
  border: 2px solid gray;
  background-color: black;
  margin-top: 4px;
  margin-bottom: 4px;
  box-sizing: border-box;
  display: inline-block;
  width: 30%;
}


/* Comments output styles */

div.opinion {
  max-height: 200em;
  overflow: auto;
  background-color: #000000;
  padding: 8px;
  margin: 8px;
}

p.avatar {
  font-weight: bold;
  margin: 0px;
}

img.avatar {
  margin-right: 4px;
  margin-left: 0px;
  width: 32px;
  height: 32px;
  vertical-align: middle;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

h1.preview {
  background-color: yellow;
  color: black;
  font-size: 1em;
  display: none; 
}

div#preview_div {
  display: none;
}


/* MiniMagAsm formatting cheatsheet */

label#help_lbl {
  display: inline;
  vertical-align: top;
}

label#help_lbl img {
  display: inline;
  vertical-align: middle;
}


input#helpcheck {
  display: none;
}

input#helpcheck:checked + #MiniMagChS {
  display: block;
}

div.right2 #MiniMagChS {
  display: none;
  font-size: 0.95em;
  position: fixed;
  left: 16px;
  width: auto;
  right: initial;
  top: 32px;
  background-color: #606060;
  padding: 16px;
  padding-right: 0px;
  box-shadow: -4px 4px 8px black;
}


#MiniMagChS {
  display: none;
  font-size: 1em;
  position: fixed;
  right: 29%;
  top: 32px;
  background-color: #606060;
  padding: 16px;
  padding-right: 0px;

  box-shadow: -4px 4px 8px black;
}

#MiniMagChS h2 {
  color: yellow;
  text-align: left;
  margin: 0px;
}

#MiniMagChS div {
  display: inline-block;
  margin-left: 0px;
  box-sizing: border-box;
  vertical-align: top;
  margin-bottom: 16px;
  margin-right: 16px;
}

#MiniMagChS div.code {
  padding: 8px;

  font-family: "Source Code Pro", monospace;
  font-weight: bold;
  overflow: auto;
  width: 100%;
  max-width: 100%;
  white-space: pre;
  border-left: 4px solid #c0c0c0;
  box-sizing: border-box;
  margin-bottom: 0px;
  margin-right: 0px;
}

#MiniMagChS p.uli {
  color: yellow;
}