@import url('https://fonts.googleapis.com/css?family=Jura:500,700|Source+Code+Pro|Exo+2:400,800');

@font-face {
  font-family: Peinaud;
  font-style:  normal;
  font-weight: normal;
  src: url('peinaud.woff2') format('woff2'),
       url('peinaud.woff') format('woff');
}


body {
  background-color: #f8ffee;
  font-family: Jura, Arial, sans-serif; 
  font-weight: 500;  
  margin: 0;
}

 .topbar {
   position: fixed;
   z-index: 2;
   top: 0;
   left: 0;
   width: 100%;
   height: 48px;
   overflow-x: hidden;
   overflow-y: hidden;
   background-color: #222;
   color: #2c0;
   
   transition: transform 1s;
   transform-style: preserve-3d;
   transform-origin: 50% 50% -60px;

   
   transform: rotateX(90deg);
 }
  
 .pagesidebar {
   position: fixed;
   z-index: 1;
   top: 0;
   left: 0;
   height: 100%;
   width: 120px;
   overflow-x: hidden;
   overflow-y: hidden;
   
   background-color: #222;
   color: #2c0;
   
   transition: transform 1s;
   transform-style: preserve-3d;
   transform-origin: 50% 50% -60px;
   perspective: 1000px;
 }

 .topbar .frisket, 
 .pagesidebar .frisket {
   background-color: #2c0;
   display: inline-block;
   overflow-x: hidden;
   overflow-y: hidden;
 }

 .pagesidebar .frisket {
   margin-top:1em;
 }

 .bct {
   padding-bottom: 1em;
 }

 .allcontent 
 /*, .content*/ {
    height: 400%;
    font-size: 12pt;
    color: #160;
    margin-top: 1em;
    margin-left: 128px;
    margin-right: 40px;
    margin-bottom: 2em;
    transition: margin-left 1s, 
                margin-top 1s;
    max-width: 48em;
 }
  
h1, .Headline {
  font-family: Peinaud, /*Exo 2,*/ sans-serif;
  color: #280;
  font-size: 36pt;
  font-weight: normal;
  margin-top: 1em;
  margin-bottom: 0.1em;
   /*margin-left: 80px;*/
}
h2, {
  font-family: Peinaud, /*Exo 2,*/ sans-serif;
  color: #280;
  font-size: 28pt;
  font-weight: normal;
  margin-top: 0.5em;
  margin-bottom: 0.1em;

}

.Summary tbody tr  td.Title {
  font-family: Peinaud, /*Exo 2,*/ sans-serif;
  color: #280;
  font-size: 16pt;
  font-weight: normal;
  margin-top: 0.5em;
  margin-bottom: 0.1em;
}
.Summary tbody tr  td.Teaser {
  font-size: 12pt;
  color: #160;
  line-height: 140%;
  font-weight: normal;
  margin-top: 0.5em;
  margin-bottom: 0.1em;
  font-family: Jura, Arial, sans-serif; 
}


.content h3, 
.content h4, 
.content h5, 
.content h6 {
  font-family: Peinaud, /*Exo 2,*/ sans-serif;
  color: #280;
  font-weight: normal;
  margin-top: 0.5em;
  margin-bottom: 0.1em;
}

h3 {
  font-family: Peinaud, /*Exo 2,*/ sans-serif;
  color: #280;
  font-weight: normal;
  font-size: 20pt;
  height: 1.1em;

  border-bottom: 1px solid #280;
  border-right: 2px solid #280;
  padding-right: 0.5em;
  margin-top: 0em;
  margin-right: 0.5em;
  margin-bottom: 0em;
  
  float:left;
}

h4 {
  font-size: 16pt;
}

p, ul, ol {
 color: #020;
 margin-top: 0pt;
 margin-bottom: 1em;
 line-height: 180%;
}

b {
  font-weight:heavy;
}

pre {
  font-family: Source Code Pro, monospace;
  color: #180;
  font-size: 85%;

}

table {
  margin: 1em;
}

img {
  border: 0px;
  display: block; /* thank you, standards mode, for this irritating interpretation */
}

.Bigger1 {
  font-size: 120%;
}

.Bigger2 {
  font-size: 160%;
}

a:link        {color: #080; text-decoration: underline; }
a:active    {color: #286; text-decoration: none; }
a:hover      {color: #2c0; text-decoration: underline; }
a:visited  {color: #686; text-decoration: underline; }

.tinybutton {
  display: inline-block;
  text-decoration: none;
  background-color: #280;  
  color: #f8ffee;
  border: 1px solid #280;
  
  border-radius: 0.5em;
  padding-top: -.25em;
  min-width: 1.2em;
  text-align: center;
}
 
.copyright {
  color: #180;
  margin-top: 1em;
  margin-left: 160px;
  font-size: 8pt;
  transition: margin-left 1s, 
              margin-top 1s;
}
 
.emphasized {
  margin: 1em;
  border-left: 2px solid #2a0;
  padding-left: 0.2em;
  margin-right: -2em;
}

.emphasized tr td b {
    font-family: Peinaud, /*Exo 2,*/ sans-serif;
    color: #2a0;
    font-weight: normal;
    font-size: 120%;
}

.quote {
  padding-top: 0.5em;
  line-height: 150%;
  padding-bottom: 0.5em;
}

.ruledquote {
  border-top: 4px solid #2a0;
  padding-top: 0.5em;
  line-height: 150%;
  padding-bottom: 0.5em;
  border-bottom: 2px solid #2a0;
}

.leftquote {
  border-top: 4px solid #2a0;
  padding-top: 0.5em;
  line-height: 150%;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 0.5em;
  border-bottom: 2px solid #2a0;
  margin-left: -2em;
}

.rightquote {
  border-top: 4px solid #2a0;
  padding-top: 0.5em;
  line-height: 150%;
  padding-bottom: 0.5em;
  padding-left: 20px;
  padding-right: 20px;
  border-bottom: 2px solid #2a0;
  margin-right: -2em;
}


.pullquote {
  font-size: 140%;
  line-height: 120%;
  border-top: 4px solid #2a0;
  padding-top: 0.5em;
  line-height: 150%;
  padding-bottom: 0.5em;
  padding-left: 20px;
  padding-right: 20px;
  border-bottom: 2px solid #2a0;
}

.openquote {
  margin-top: 1em;
  margin-bottom: 1em;
  line-height: 180%;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 20px;
  padding-right: 20px;
}


.txtlquote {
  font-family: Exo 2;
  background-color: #cfc;
  border: 2px solid #cfc;
  border-radius: 8px;
  padding: 8px;
  bottom: 125%;
  left: 50%;
  margin-right: 8em;
  max-width:50%;
  box-shadow: 0 4px 20px 0 rgba(0, 120, 0, 0.3), 
              0 6px 20px 0 rgba(0, 120, 0, 0.3);
}

/* Nifty caret: */
.txtlquote::after {
  content: "";
  top: 100%;
  left: 20%;
  margin-left: -1.2em;
  border-width: .5em;
  border-style: solid;
  border-color: #cfc transparent transparent transparent;
} 

.txtrquote {
  font-family: Exo 2;
  background-color: #af6;
  border: 2px solid #af6;
  border-radius: 8px;
  padding: 8px;
  right: 50%;
  margin-left: 16em;
  box-shadow: 0 4px 20px 0 rgba(0, 120, 0, 0.3), 
              0 6px 20px 0 rgba(0, 120, 0, 0.3);
}

.txtrquote::after {
  content: "";
  bottom: 100%;
  left: 100.5%;
  position:relative;
  max-width:50%;
  border-width: .5em;
  border-style: solid;
  border-color: #af6 transparent transparent transparent;
}


.quote      .passage::before,
.ruledquoe  .passage::before,
.leftquote  .passage::before,
.rightquote .passage::before,
.pullquote  .passage::before,
.openquote  .passage::before {
  content: url(../images/tmt-pullquote-open.png);
  opacity: 0.1;
  z-index: -1;
  margin-left: -20px;
}

.quote      .passage::after,
.ruledquoe  .passage::after,
.leftquote  .passage::after,
.rightquote .passage::after,
.pullquote  .passage::after,
.openquote  .passage::after {
  content: url(../images/tmt-pullquote-close.png);
  margin-right: -20px;
  opacity: 0.1;
  z-index: -1;
}

blockquote .attribution {
  font-size: 80%;
 /* padding-left: 1em;*/
  margin-left:0em;
}
blockquote .attribution::before {
  content: ' \2014 ';
}

video {
  margin: 1em;
}


/* New Tool tips support */
.notetext {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-bottom:1px dotted #6a6;
}

.notetext:hover {
  background-color:#ffc; /* cfc; */
  transition: all 0.3s ease-out;
}

.notetext .popup  {
  visibility: hidden;
  background-color: #cf4;
  color: #141;
  width: 16em;
  max-width: 20em;
  border: 2px solid #2c0;
  border-bottom-color: #2a0;
  border-right-color: #2a0;
  border-radius: 8px;
  padding: 8px;
  position: absolute;
  line-height: 140%;
  z-index: 10;
  bottom: 125%;
  left: 50%;
  margin-left: -8em;
  box-shadow: 0 4px 20px 0 rgba(0, 120, 0, 0.3), 
              0 6px 20px 0 rgba(0, 120, 0, 0.3);
}

/* Nifty caret: */
.notetext .popup::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -1.2em;
  border-width: .5em;
  border-style: solid;
  border-color: #6a6 transparent transparent transparent;
} 

.notetext .show {
  visibility: visible;
  -webkit-animation: fadeIn 2s;
  animation: fadeIn .2s;
}

.notetext:hover .popup {
  visibility: visible;
  -webkit-animation: fadeIn 2s;
  animation: fadeIn .2s;
}

@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}
 


 .negativespace {
  position:              relative;
  max-width:             60em;
 }

.negativespace .background {
  position:              relative;
  background-attachment: fixed;
  background-position:   center;
  background-repeat:     no-repeat;
  background-size:       cover;
  min-height:            300px;
}

.negativespace .faded  {
     filter:                opacity(32%)
                            sepia(100%) 
                            hue-rotate(60deg) 
                            ;
     transition: filter 2s;
   }

.negativespace .blurred  {
     filter:                opacity(32%)
                            blur(8px) 
                            ;
     transition: filter 2s;
   }

.negativespace:hover .background {
     filter: none;
}

.negativespace  .heading {
  position: absolute;
  /* margin-left: 120px; */
  bottom: 0;
  height: 100%;
  width: 100%;
  max-width: 42em;
}
 
.negativespace .heading  p ,
.negativespace .heading  h1,
.negativespace .heading  h2,
.negativespace .heading  h3, 
.negativespace .heading  h4 {
  position: absolute;
  font-family: Peinaud, /*Exo 2,*/ sans-serif;
  font-weight: 500;
  letter-spacing: 2px;
  left: 0;
  bottom: 0.5em;
  width: 100%;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  text-align: center;
  color: #dfc !important;
  background-color: rgba(0,0,0,0.5);
}

.negativespace  .heading  blockquote {
  position: absolute;
  padding-top: 0.5em;
  line-height: 150%;
  padding-bottom: 0.5em;
  padding-left: 20px;
  padding-right: 20px;
  margin-right: -2em;
  font-family: Jura, Arial, sans-serif;
  font-size:   20pt;
  bottom: 20%;
  color: #dfc !important;
  background-color: rgba(0,0,0,0.5);
}

 /* For narrow screens */
@media 
  only screen 
  and (max-width: 700px),
  and (max-width < max-height)
{
  .topbar {
    transform: rotateZ(0);
  }
  .pagesidebar {
    transform: rotateY(-90deg);
  }
  
  .allcontent,
  .content  {
    margin-left: 20px;
    margin-top: 60px;
  }
  
  .negativespace  .heading {
    margin-left: 0;
    color: #efc !important;
  }

  
  .copyright {
    margin-left: 20px;
  }
 
}
 
 
  
 .fieldspace {
   position:              relative;
 }
 
   .field {
     position:              relative;
     background-attachment: fixed;
     background-position:   center;
     background-repeat:     no-repeat;
     background-size:       cover;
     filter:                opacity(32%)
                            sepia(100%) 
                            hue-rotate(60deg) 
                            ;
     transition: filter 2s;
     min-height: 300px;
   }
   
   .fieldspace:hover .field {
     filter: none;
   }

   .foreground {
    text-align: center;
    font-family: sans-serif;
    font-weight: bold;
    padding: 20px;
    color: white;
    background-color: #444;
   }

   .foreground h2, .title h2 {
     letter-spacing: 2px;
     text-transform: capitalize;
     font-family: 'Cinzel';

   }
   
   .title {
     position: absolute;
     left: 0;
     bottom: 10%;
     width: 100%;
     text-align: center;
     color: white;
     background-color: rgba(0,0,0,0.5);
     font-size: 25px;
   }


.helptable {
  font-size: 80%;
  background-color: #efe;
}

.helptable tr td {
  border-bottom: dotted 2 #cfc;
}

.helptable table {
  font-size: 90%;
  background-color: #fff;
}

.helptable ol li, .helptable ul li, .helptable blockquote {
  font-size: 100%;
  background-color: #efe;
}

.helptable .heading {
  font-weight: bold;
  font-size: 140%;
  background-color: #cfc;
}
.helptable .subheading {
  font-size: 130%
  font-weight: bold;
  background-color: #dfd;
}


.PullQuote {
  background-color: #cfc;
  color: #040;
  font-family: Arial;
  font-size: 10pt;
  padding: 4px;
  border-bottom: solid 2px #8c8;
  border-top: solid 4px #8c8;
}

.Emphasized {
  background-color: #cfc;
  margin: 4px;
  font-size: 9pt;
  zoom:100%;
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr='#FFddffdd',EndColorStr='#FFbbeebb');
}

.Emphasizedpq {
  background-color: #cfc;
  margin: 8px;
  font-size: 19pt;
  zoom:100%;
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr='#FFddffdd',EndColorStr='#FFbbeebb');
}

.dialog {
  background-color: #666;
  zoom:100%;
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFaaaaaa',EndColorStr='#FF444444');
  border: 1 solid #444;
}
.dialog .caption {
  font-weight: bold;
  background-color: #006;
  color:#fff;
  zoom:100%;
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FF0000aa',EndColorStr='#FF000066');
  padding: 2px;
}
.dialog .text {
   padding: 4px;
}

.calcin {
  background-color: #efe;
  border: 1px solid #cc8;
}

.SessionClock {
  border: solid 2px #cc8;
  position: absolute;
  width: 80px;
  font-family: Verdana;
  font-size: x-small;
  text-align: center;
  z-index:1000;
  zoom:100%;
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#CCddddaa', EndColorStr='#88cccc88');
  margin-right:-15px;
  margin-bottom:-15px;
}
.SessionMessage {
  font-size: xx-small;
}


@font-face {
  font-family: Peinaud;
  font-style:  normal;
  font-weight: normal;
  src: url(../images/PEINAUD0.eot);
}

/* Tool tips support */
.notetext {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-bottom:1px dotted #6a6;
//  transition: all 0.3s ease-out;
}

.notetext:hover {
  background-color:#cfc;
  transition: all 0.3s ease-out;
}

.notetext .popup  {
  visibility: hidden;
  background-color: #cfc;
  color: #141;
  width: 16em;
  max-width: 20em;
  border: 2px solid #8c8;
  border-bottom-color: #6a6;
  border-right-color: #6a6;
  border-radius: 8px;
  padding: 8px;
  position: absolute;
  z-index: 10;
  bottom: 125%;
  left: 50%;
  margin-left: -8em;
  box-shadow: 0 4px 20px 0 rgba(0, 120, 0, 0.3), 
              0 6px 20px 0 rgba(0, 120, 0, 0.3);
}

/* Nifty caret: */
.notetext .popup::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -1.2em;
  border-width: .5em;
  border-style: solid;
  border-color: #6a6 transparent transparent transparent;
} 

.notetext .show {
  visibility: visible;
  -webkit-animation: fadeIn 2s;
  animation: fadeIn .2s;
}

.notetext:hover .popup {
  visibility: visible;
  -webkit-animation: fadeIn 2s;
  animation: fadeIn .2s;
}

@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}


.toc_chrome 
{
  position: relative;
  float: right;
  width: 12em;

  margin-bottom: 0.5em;
  overflow:auto;
  zoom:100%;
  /* filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr='#FFddffdd',EndColorStr='#FFbbeebb'); */
  border-left:4px solid #280;
  padding: 4px;
}
.toc_chrome .heading 
{
  font-size: 80%;
  cursor: hand;
  font-weight: bold;
}

.toc {
  zoom:100%;
  /* filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr='#FFddffdd',EndColorStr='#FFbbeebb'); */
  font-size: 80%;
  /* float:left; */
}

.toc .item {
  padding-left: 1em;
  font-size: 10px;
  line-height: 120%;
}
.toc .item .level {
  font-size: 80%;
}
.Dateline {
  font-size: x-small;
  page-break-after: avoid;
   /* margin-left: 80px;*/
}
.Contributor {
  margin-bottom: .5em;
    margin-left: 80px;
}

table {
 margin: 0px;	
 margin-right:8px;
 font-family: Arial;
 font-size: 10pt;
 page-break-inside: avoid;
 
}
td {
 vertical-align: top;
}

.highlight1 {
  background-color: #ffff88;
}

.highlight2 {
  background-color: #88ff88;
}

.highlight3 {
  background-color: #8888ff;
}

.highlight4 {
  background-color: #ff8888;
}

.bigger1 {
 font-size: 120%;
}
.bigger2 {
 font-size: 150%;
}
.bigger3 {
 font-size: 200%;
}
.bigger4 {
 font-size: 300%;
}


#divSearch {
  border-top: 2px solid #cfc;
  font-size: 90%;
  color: #290;
}

#divSearchInner {
  float: right;
}

#divSearch #Query {
  background-color: #dfd;
  border: 0px solid transparent;
  font-weight: bold;
}

#divSearch #Submit, #divSearch #Cancel {
  background-color: #dfd;
  border-top:   1px solid #efe;
  border-left:  1px solid #efe;
  border-right: 1px solid #8c8;
  border-bottom:1px solid #8c8;
}

#divPostSearch {
  clear: both;
}

.emphasized {
  background-color: #efd;
  margin: 1em;
  padding: .5em;
  font-size: .9em;
  line-height: 140%;  
  zoom:100%;
}

.emphasizedrow {
  background-color: #efd;
  margin: 1em;
  padding: .5em;
  font-size: .9em;
  line-height: 140%;  
  display: table-row;
}

.emphasizedrow tr {
  background-color: #afa;
  margin: 1em;
  padding: .5em;
  font-size: .9em;
  line-height: 140%;  
}

.emphasizedcell {
  background-color: #efd;
  margin: 1em;
  padding: .5em;
  font-size: .9em;
  line-height: 140%;  
}

.emphasizedcell tr .header ,
.emphasizedcell tr .cellstyle_header,
.emphasizedcell tr .cellstyle_heading,
.emphasizedcell tr .cellstyle_head , /* - preferred spelling */
.emphasized tr .cellstyle_head { 
  background-color: #333; /*image: url(/images/GreenVeinedMarble.jpg);*/
  color: white;
  font-weight: bold;
  font-variant: small-caps;
  font-size: 120%;
  margin: 1em;
  padding: .25em;
}

emphasized tr .cellstyle_sub,
.emphasizedcell tr .cellstyle_sub {
  background-color: #444; /* image: url(/images/brightgold.jpg); */
  color: white;
  font-variant: small-caps;
  font-weight: bold;
  font-size:110%;
  margin: 1em;
  padding: .25em;
}


.emphasizedcell tr td {
  background-color: #aea;
  margin: 1em;
  padding: .5em;
  font-size: .9em;
  line-height: 140%;  
}

/* About Favorites */
.PageHead, .pagehead {
  font-family: Peinaud;
  font-style: italic;
  font-size:xx-large;
  color: #060;
  border-bottom: solid 3 #284;
}
.PageSubhead, .pagesubhead {
  font-family: Peinaud;
  border-top: solid 1 #ccc;
  font-size:x-large;
  color:#060;
  padding-bottom: 8px;
  padding-right: 8px;
}