/* do not limit to media screen, needs to exist for print as well */
img {
   padding:       0;
   margin:        0;
   text-align:    left;
}

tt {
   font-family:   "Lucida Sans Typewriter","Lucida Console","Consolas",Mono,"Courier 10 Pitch","Courier New",Courier, monospace;
   font-size:     90%;
   color:         #191919;
   padding:       0pt 0pt;
   border:        2pt solid #f1f1f1;
   margin:        -1pt;
}

.hidden {
   display:       none;
}

#top_return {
   text-align:   right;
   white-space:  nowrap;
   padding:      0;
   margin:       0 1em;
   font-size:    85%;
   clear:        right;
}

div.summary {
   width:         100%;
   max-width:     8.735in;
   margin:        0 auto;
   /*border-top:    0.5em solid #f2f2f2;*/
   border-bottom: 0.5em solid #eee;
   padding-top:   1em;
}
.summary {
   clear:         left;
   display:       block;
   margin:        0.5in 5pt 5pt 5pt;
   width:         8.5in;
   max-width:     8.5in;
   display:       block;
   color: rgb(42, 91, 41);
}
#goal, .goal {
   font-family:   "Century Gothic", "DejaVu Sans", Arial, Helvetica, sans-serif, sans;
   text-align:    left;
   font-size:     16px;
}
.overview {
  line-height:   1.5;
}
table.overview {
   border: 0 none;
}
.summary h1 {
   display:       block;
   margin:        1.25em 0 5pt 1em;
   width:         100%;
   text-align:    center;
   clear:         both;
   font-size:     24px;
}
.summary h2 {
  font-size:     22px;
}
.summary h2,.summary h3,.summary p {
   display:       block;
}
.summary, .summary p {
   line-height:   1.25;
   font-size:     16px;
}

.summary h3>ul {
    font-size:    16px;
    margin:       0 0 0 14pt;
}

.summary h3 a:link, .summary h3>ul a:link, #top_return:link {
    color:        rgb(170,119,0);
}

.summary h3 a:visited, .summary h3>ul a:visited, #top_return:visited {
    color:        gray;
}

.summary table {
   max-width:     8.4in;
   padding:       0;
   margin:        0;
   border:        0 none;
}
.summary tr, .summary td {
   vertical-align: top;
   padding:       0;
   margin:        0;
}

.summary img {
   margin-top:    0.5em;
   width:         auto;
   max-width:     6in;
}

.summary_r, img.summary_r {
   display:       inline-block;
   width:         auto;
   float:         right;
   max-width:     400px;
   border:        none; /*4px solid #eee;*/
   padding:       4px;
   margin:        0 1.5em;
   background:    white;
}
.summary li img {
   display:       block;
   text-align:    left;
   clear:         left;
}

li>p {
   display:       inline;
   margin:        0;
   padding:       0 0.25em 0 0;
   text-indent:   0;
}

li img {
   display:       block;
   text-align:    left;
}

.selected_topic {
   background:    #fafafa;
   font-weight:   bold;
   font-size:     14px;
}

.imdiv, .imdiv img {
   text-align:          left;
   margin:              0;
   padding:             0;
   border:              0;
   background-repeat:   no-repeat;
   max-height:          500px;
}

.topic {
   background:       #f6f6f6;
   border:           5px solid #fafafa;
   color:            #505050;
   list-style-type:  decimal;
   margin:           0;
   max-width:        8.5in;
   padding:          5pt 0 0 10pt;
   font-size:        12pt;
}

.topic li, .topic p {
   color:            black;
}
.topic li:first-child {
   margin-top: 1px;
}

.topic>li>ol {
   list-style-type:  upper-alpha;
   color:            black;
}

.topic>li:not(first-child), .topic>li>ol>li:not(first-child) {
   display:          list-item;
   margin:           1em 0 0 5pt;
}

/*.topic>li :not(first-child) {
   margin-top:       1.5em;
}*/

.topic>li>ol>li:last-child {
   margin-bottom:    0;
}

.topic>p {
   margin:           1pt 0 2em 10pt;
}

.topic img {
   border:           2pt solid white;
   background:       white;
   margin:           0 auto;
}

.cropped {
   overflow: hidden;
}
.cropped-top img {
   display: block;
   vertical-align: top;
}
.top-tear {
   margin-bottom: -20px;
}
.cropped-right img{
   display: inline;
   vertical-align: top;
}
.right-tear {
   margin-left: -12px;
}
.cropped-bottom img{
   display: block;
   vertical-align: top;
}
.bottom-tear {
   margin-top: -20px;
}
.cropped-left img{
   display: inline;
   vertical-align: top;
}
.left-tear{
   margin-right: -12px;
}

.contentDiv, #contentDiv {
   margin:           0 auto 0 auto ;
   max-width:        8.5in;
   text-align:       left;
}
.contentDiv *, #contentDiv * {
   text-align:       left;
}
.contentDiv li, #contentDiv li {
   margin-bottom:    0.5em;
   margin-top:       0.5em;
}
.contentDiv li, .contentDiv p, .contentDiv td, .contentDiv dd, #contentDiv li, #contentDiv p, #contentDiv td, #contentDiv dd {
   color:            #444;
}

.contentDiv ol li::marker, #contentDiv ol li::marker, .contentDiv ol li::before, #contentDiv ol li::before {
   color:            #999;
}

#contentDiv a, #contentDiv div.tip a, .contentDiv a, .contentDiv div.tip a {
   font-family:   "Century Gothic", "DejaVu Sans", Arial, Helvetica, sans-serif, sans;
}

#detailPane div {
   text-align:       center;
   vertical-align:   top;
   margin:           0 auto 0 auto;
   white-space:      normal;
   height:           auto;
   width:            100%;
}

#detailPane p {
   font-size:        150%;
   margin:           10pt;
   color:            #aaa;
   height:           auto;
}
/* step_img are searched and scaled */
.step_img {
   border:           2pt solid white;
   cursor:           pointer;
   background:       white;
}
.lightbox {
   vertical-align:   middle;
   z-index:          10;
   position:         absolute;
   min-width:        400px;
   min-height:       400px;
   max-width:        100%;
   max-height:       100%;
   margin-left:      2%;
   padding:          10pt;
   background:       white;
   color:            black;
   cursor:           pointer;
   overflow:         auto;
   border:           5pt solid gray;
}
.close {
   z-index:          12;
   text-align:       center;
   margin:           -15pt 0 0 -15pt;
   position:         inherit;
   padding:          3pt;
   width:            1.5em;
   font-size:        12pt;
   font-weight:      bold;
   border:           5pt solid gray;
   color:            gray;
   background:       black;
   cursor:           pointer;
}

.zoomed {
   display:          block;
   position:         absolute;
   z-index:          11;
}
.small9 {
   font-size:        9pt;
}
.small8 {
   font-size:        8pt;
}
.small7 {
   font-size:        7pt;
}
.scroll {
   overflow:         auto;
}
.overview, .holds_overview {
   display:          table;
   margin:           0em auto 1.5em;
   padding:          0.25em 0.25em;
   max-width:        8.5in;
   min-height:       1.5in;
   font-size:        16px;
}
.overview img {
   display:         block;
   /*margin-top:    -10px;*/
   padding:         0 10px;
}
.summary_r, .overview_img {
   display:         table-cell;
   float:           right;
   max-height:      4in;
}

pre {
   line-height: 1.3;
}
ol.topic li pre {
  margin: 0 0.25em 0 0.25em;
}
@media only screen and (min-device-width:300px) and (max-device-width:800px) {
  .contentDiv, #contentDiv {
     margin: 0 auto 0 auto ;
     width: 99%;
     text-align: left;
  }
  .contentDiv li {
     margin-bottom: 0.25em;
   }
   .summary_r, img.summary_r {
      float: none !important;
      clear: both !important;
   }
   .contentDiv ol li pre {
      position: relative;
      margin-left: -2.1em;
      margin-top: 0;
      margin-bottom: 0;
      font-size: 80%;
      overflow: scroll;
      display: block;
      clear: both;
   }
   .overview img {
      width: 100%;
      margin-left: -1em;
   }
   ol.topic {
     margin-right:0;
     padding-right:0;
   }
   ol[type=a] {
    padding-left: 1px;
   }
   li.skipbr tt.cmd, li.skipbr tt.rcmd {
      padding: 0;
      margin-left: -2.1em;
      margin-bottom: -2px;
      font-size: 80%;
      break-after: auto;
   }
   tt.cmd, tt.rcmd {
      display: inline-block;
      clear: right;
   }
  ol.topic li pre {
    margin: 0 0 0 0;
    overflow: auto;
  }

}