/* herbie.css used in imgbar.pl pix.pl themes.pl */

body {font-family: sans-serif; }
a:link {text-decoration:none;}    /* unvisited link */
a:visited {text-decoration:none;} /* visited link */
a:hover {text-decoration:underline;}   /* mouse over link */
a:active {text-decoration:underline;}  /* selected link */
a { color: #077AB1; }
a.h1 {text-decoration: none; }
h1 {font-size: 150%; }
.pixh1 { border: 1px solid black; padding: 5px; background: #DDD; }
h2 {font-size: 125%; color: #CD3A33; background: #eee; border: 3px solid #077AB1; padding: 5px; }
h3 {font-size: 125%; color: #CD3A33; margin: 0px 0 0px 0; } /* herbred */
h4 {font-size: 110%; color: #077AB1; margin-top: 0; margin-bottom: 0;} /* herblue */
.label { font-weight: bold; }
.theme { font-weight: bold; font-size: 100%; display: block; }

.boxed {border: 5px solid #077AB1; margin-left: 5%; padding: 1em; text-align: center; width: 90%; }
.panel {border: 8px solid #F4E1C6; margin: 1em; padding: 1em; }  /* for 300 pixel images */
.panel5 {border: 5px solid #F4E1C6; margin: 1em; padding: 1em; } /* for 200 pixel images */
.counter { background: pink !important; }
.defect  { background: mistyrose !important; }
.bestjpg { background: #F4E1C6 !important; }
.pseudo  { background: seashell !important; }
.caps {font-variant: small-caps; }

.herblue { color: #077AB1; }
.herbred { color: #CD3A33; }
.spaced {margin-top: 8px; }

label:hover {background-color: #FFC; }
label.correct { color: green; }
label.incorrect { color: green; }

.gag   { }
.power { }
.story { }
.lang  { }
.other { }
.catlab { font-size: 90%; color: black; font-weight: 400;}

.villains   {background: #fFfEfF; } /* magenta */
.characters {background: #fDfDfF; } /* blue */
.virtuous   {background: #fFfFfC; } /* yellow */
.sports     {background: #fCfFfC; } /* green */
.school     {background: #fCfFfF; } /* cyan */
.fat-fury   {background: #fFfCfC; } /* red */
.love       {background: #FFF; } /* white */

@media print {
    img { height: 100px !important; }
    .noprint { display: none; }
    .pixbox { min-height: 100px; vertical-align: middle; }
}
@media (min-width: 750px) {
    .table { display: table; width: 100%; }
    .row {display: table-row; }
    .cell {display: table-cell; width: 33%}
}
@media (max-width: 750px) { /* small screen */
   .hide4small { display: none; }
   .indent4small { margin-left: 1cm; }
   .center4small { text-align: center; }
   .pix { max-width: 600px; }
}
.center-align {text-align: center; }
.left-align {text-align: left; }
.right-align {text-align: right; }
.top-align { vertical-align: top; }
.center-valign { vertical-align: middle; }
.cell-spaced { border-spacing: 5px; }

.wikipedia {
   background-image: url(/hpimages/wikipedia.png);
   background-repeat: no-repeat;
   background-position: left;
   padding-left: 21px;
   white-space: nowrap;
   display: inline-block;
}
.gcd {
   background-image: url(/hpimages/gcd.gif);
   background-repeat: no-repeat;
   height: 16px;
   background-position: left top;
   padding-left: 24px;
   /* white-space: nowrap; */
   display: inline-block;
   /* border-bottom: 2px dashed tan; */
}
.amazon {
   background-image: url(/hpimages/amazon.png);
   background-repeat: no-repeat;
   background-position: left top;
   padding-left: 18px;
   /* white-space: nowrap; */
   display: inline-block;
   /* border-bottom: 2px dashed #CCC; */
}
.youtube {
   background-image: url(/hpimages/youtube.png);
   background-repeat: no-repeat;
   background-position: left top;
   padding-left: 18px;
   /* white-space: nowrap; */
   display: inline-block;
   /* border-bottom: 2px dotted #CCC; */
}

.button { 
   color: white;  
   background: #077ab1; 
   font-size:75%;
   line-height: 200%;
   font-weight: 600; 
   padding: 2px 4px 2px 4px; 
   font-variant: small-caps; 
   margin-right: 4px;
   border: 1px solid gray; 
   border-radius: 6px;
}
.buttono { /* inactive */
   color: #EEE;  
   background: #666; 
   font-size:75%;
   line-height: 200%;
   font-weight: 600; 
   padding: 2px 4px 2px 4px; 
   font-variant: small-caps; 
   margin-right: 4px;
   border: 1px solid gray; 
   border-radius: 6px;
}
.entitled {border: 1px dotted #999;} /* shows title of story */

.updated {background: yellow; color: green; font-weight: bold; font-size: 90%; white-space:nowrap;}
.new {background: green; color: yellow; font-weight: bold; font-size: 90%; white-space:nowrap; padding-left: 3px; padding-right: 3px; }

.pixlink {text-decoration: none; color: #077AB1; font-weight: 500; font-family: comic sans ms;}
.tiny { font-size: 70%; }
.small { font-size: 80%; }
.smaller { font-size: 90%; }
.large { font-size: 125%; }
.giant { font-size: 150%; }
.huge { font-size: 200%; }

.metaleft {font-family: sans-serif; } /* imgbar.pl meta desc */
.metatop {font-size: 120%; border: 1px solid gray; padding: 5px; background: #EEE; margin: 1em; } /* pix.pl meta description */

.pixbox { min-height: 250px; vertical-align: middle; }
.pixloc { font-family: sans-serif; white-space: nowrap; }

.imgleft { padding: 4px; max-width: 25em; margin: 5px;}
.imgright { border: 0; background: #FFF; }
.imgtable { border: 0; }
.imginfo { margin-top: 0; margin-bottom: 0; font-size: 80%;} /* dates/counts */
.imgdesc { nt-family: Arial, Helvetica, sans-serif; }

.pix { height: 300px; border: 0; }

/* for pix.pl */
.pixleft { width: 25em; }
.pixright { background: #FFF; }
.pixrow { }
.pixinfo {margin-top: 0; margin-bottom: 8px;; font-family: sans-serif; } /* pix.pl pic desc*/
.pixpara {margin-left: 0%; margin-right: 30%; background: white; padding: 10px; border: 5px solid tan; }

.subtle { color: #CCC; }
.nobr {white-space: nowrap}
.strong {font-weight: 800; }
.offscreen {position: absolute; left: -999px; }

.hot1 {background: #F66}
.hot2 {background: #F77}
.hot3 {background: #F88}
.hot4 {background: #FAA}
.hot5 {background: #FCC}
.hot6 {background: #FEE}

.bg_reprint     { background: #FFF; } /* column for reprint stories */
.bg_vertispacer { background: #CCC; } /* every 5 stories */
.bg_header      { background: #CCC; } /* top and bottom */
.bg_subheader   { background: #DDD; } /* under the bottom header */
.bg_even        { background: #DDD; } /* even lines */
.bg_odd         { background: #EEE; } /* odd lines */

a[target=_blonk] { 
    text-decoration: none; 
    background-image: url(/hpimages/external-link-blue-default03-Shapes4FREE.png);
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 14px;
}