body { 
  color: #000;
  background-color: #fff; 
  font-family: "Segoe UI",SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif; 
  font-size:14pt;
  line-height: 1.1; }

#mainContainer { max-width:800px;margin:auto; }
#archivedWarning { border: 3px solid; padding:1em }
#mainContainer header { width:620px; }

#headerMenu { display:block; padding:0.5em;}
#footer { padding: 0.5em;}
.menu { padding: 2px 10px; font-size: 14pt }
.menu a {color:#fff}
hr {size: 1; width:33%; justify-self: left;}
img { left: auto; right: auto; display:block;}
.breadcrumbs { margin-top:0.5em; margin-bottom: 0.5em; font-size: 0.75em; }
.breadcrumbs > ol { list-style: none; padding:0; margin: 0;}
.breadcrumbs > ol > li { display: inline-block;}
.breadcrumbs > ol > li:not(:last-child)::after { content: '>';}

/* Panels <div.panel><div.panelHeading/><div.panelContent/></div>*/
.panel { display: block; float: right; width: 200px; margin: 5px; }
.panelHeading { padding: 5px; border: 1px solid; border-radius: 8px 8px 0 0; }
.panelContent { padding: 5px; border: 1px solid; font-size: smaller; }
.panel h3 { font-size: 14pt; color:#fff; margin: 0; }
.panelContent img { border: 1px solid #777; box-shadow: 3px 3px 7px #777; }

.byline { font-style:italic; text-align:right }

blockquote { margin: 1em 4em 1em 2em; padding-left:0.5em; border-left: 0.5em solid;
             font-family: "Times New Roman", Times, serif; 
             font-style:italic; font-size: 18pt; }
.quote { margin: initial; padding-left:0.5em; border-left: initial; }

.tb { border-style: solid; border-width:1px; border-collapse:collapse }
td.info      { background-color: #D7E3F3; border: 1px solid #1A3664; }
p.info       { font-size: 14pt; line-height: 12pt; margin-top: 0; margin-bottom: 0.5em }
.dark        { font-size: 14pt; color: #FFFFFF }
.small	     { font-size: 10pt }
.caption     { font-size: 10pt; font-style: italic }
.emphasis    { color: #1A3664; font-weight: bold; }

a { color: #663; }
a:visited { color: #996; }
a:hover { color: #336; }

.menu a { text-decoration:none; }
.menu a:hover { text-decoration: underline; }

/* Articles */
.layout--articles {
  & blockquote { border-color: #cc9 }
  & .menu { color:#fff; background-color: #663 }
  & .menu a {color:#fff;}
  & .menu a:visited {color:#cc9; }
  & .menu a:hover { color:#ffc; }
  & .panelHeading { border-color: #663; background-color: #663; }
  & .panelContent { border-color: #663; }
  & .tb { border-color: #663 }
  & .tr1 { background-color: #CC9; }
  & .th { background-color: #663; color: #fff; }
  & .ths { font-size: 10pt; background-color: #663; color: #fff; }
  & .ph { background-color: #663; color: #fff; }a { color: #063; }
  & a {color:#330}
  & a:visited { color: #663; }
  & a:hover { color: #330; }
}

.layout--concepts {
  & .menu { color:#fff; background-color: #063 }
  & .menu a {color:#fff;}
  & .menu a:visited {color:#6c9; }
  & .menu a:hover { color:#9fc; }
  & .panelHeading { border-color: #063; background-color: #063; }
  & .panelContent { border-color: #063; }
  & .tb { border-color: #663 }
  & .tr1 { background-color: #6c9; }
  & .th { background-color: #063; color: #fff; }
  & .ths { font-size: 10pt; background-color: #063; color: #fff; }
  & .ph { background-color: #063; color: #fff; }
  & h1 { text-align:center }a       { color: #1A3664 }
  & a:hover      { color: #415F8F }
  & a:active     { color: #336699 }
  & a:visited    { color: #415F8F }
}

.layout--home {
  & .menu { color:#fff; background-color: #336 }
  & .menu a {color:#fff;}
  & .menu a:visited {color:#9cf; }
  & .menu a:hover { color:#69f; }
  & .panelHeading { border-color: #336; background-color: #336; }
  & .panelContent { border-color: #336; }
  & .tb { border-color: #663 }
  & .tr1 { background-color: #69f; }
  & .th { background-color: #336; color: #fff; }
  & .ths { font-size: 10pt; background-color: #336; color: #fff; }
  & .ph { background-color: #336; color: #fff; }
  & a	{ color: #333 }
  & a:visited	{ color: #666 }
  & a:hover	{ color: #999 }
}

.layout--movies {
  & .menu { color:#fff; background-color: #67D }
  & .menu a {color:#fff;}
  & .menu a:visited {color:#cc9; }
  & .menu a:hover { color:#ffc; }
  & .panelHeading { border-color: #67D; background-color: #67D; }
  & .panelContent { border-color: #67D; }
  & .tb { border-color: #663 }
  & .tr1 { background-color: #cc6; }
  & .th { background-color: #67D; color: #fff; }
  & .ths { font-size: 10pt; background-color: #67D; color: #fff; }
  & .ph { background-color: #67D; color: #fff; }a { color: #663; }
  & a:visited { color: #996; }
  & a:hover { color: #336; }
}

.layout--poetry {
  & blockquote { margin: initial; padding-left:0.5em; border-left: initial;
              font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
              font-style: initial; font-size: 18pt; }
  & .menu { color:#fff; background-color: #663 }
  & .menu a {color:#fff;}
  & .menu a:visited {color:#cc9; }
  & .menu a:hover { color:#ffc; }
  & .panelHeading { border-color: #663; background-color: #663; }
  & .panelContent { border-color: #663; }
  & .tb { border-color: #663 }
  & .tr1 { background-color: #CC9; }
  & .th { background-color: #663; color: #fff; }
  & .ths { font-size: 10pt; background-color: #663; color: #fff; }
  & .ph { background-color: #663; color: #fff; }a	{ color: #930 }
  & a {color:#330}
  & a:visited { color: #663 }
  & a:hover	{ color: #330 }
}

.layout--visions {
  & .menu { color:#fff; background-color: #930 }
  & .menu a:visited {color:#f96; }
  & .menu a:hover { color:#ffc; }
  & .panelHeading { border-color: #930; background-color: #930; }
  & .panelContent { border-color: #930; }
  & .tb { border-color: #930 }
  & .tr1 { background-color: #6cf; }
  & .th { background-color: #930; color: #fff; }
  & .ths { font-size: 10pt; background-color: #930; color: #fff; }
  & .ph { background-color: #930; color: #fff; }
}

.layout--web-design {
  & .menu { color:#fff; background-color: #000 }
  & .menu a:visited {color:#999; }
  & .menu a:hover { color:#ccc; text-decoration: underline; }
  a	{ color: #333333 }
  a:visited	{ color: #666666 }
  a:hover	{ color: #999999 }
  .footer { background-color: #000000; color: #FFFFFF;  }
  .footer a { color: #fff }
  .tb { border-color: Black }
  .tr1 { background-color: #ccc; }
  .th { background-color: Black; color: #fff; }
  .ths { font-size: 10pt; background-color: Black; color: #fff; }
  .ph { background-color: Black; color: #fff; }
}
