/* 
   IMPORTANT NOTICE
   This XHTML and CSS layout is COPYRIGHT 2006-2010 Design215 Inc. 
   
   It MAY NOT be copied or used for any other web site without the express
   written permission of Design215 Inc. 954-630-3695 www.design215.com

   Design215.com CSS/102b stylesheet, v07.24.05 
   for poestories.com V2, v10.21.2013
   
   body
     #container
       #pagehead
         .navbar
         .navlinks
         .navlinks2
       #pagebody
         #titlebar
         #contentbg
           #contentbox
             #contenthead
             .column1a
             .minheight
             .column2a
             .xclearline
             #sidebar  (new to 102b)
           #endcap
     #footer
      

   Overall styles and classes for HTML elements 
   ----------------------------------------------------------------------------- 
*/
body {
  font-family:verdana,helvetica,sans-serif; font-size:10px; color:#ffffff;
  text-align:center; margin:0; padding:0;
  background:#2F3238;
  min-width:850px; /* fixes some iphone/android rendering issues */
}

  /* Separators to clear column floats */
  div.xclear {
    clear:right; height:1px; line-height:1px; 
    margin:0; padding:0;
  }
  div.xclearline {
    clear:both; height:1px; line-height:1px;
    margin:0 3px 0 1px; padding:0;
  }

  /* Sets the minimum height of the page content, or can be a column divider */
  div.minheight {
    position:relative; float:left; text-align:right;
    width:10px; height:600px; 
  }

br.clr {
  clear:both;
}

table {
  width:100%;
  background:transparent;
}
table td {
  font-family:verdana,helvetica,sans-serif; font-size:10px; color:#bbbbbb; line-height:130%;
}
h1 {
  font-family:times new roman,times,serif; font-size:20px; color:#dddddd; letter-spacing:3px;
  margin:16px 4px 0 12px; padding:0;
}
  /* create an h1 for the left column for standards compliance so h2 doesn't come before h1 */
  h1.m1 {
    font-family:times new roman,times,serif; font-size:14px; font-weight:bold; color:#dddddd;
    margin:2px 2px 0 12px; padding:0; letter-spacing:3px;
  }
  /* titles of stories in text.php */
  h1.t1 {
    position:relative; text-align:center;
    font-family:times new roman,times,serif; font-size:20px; color:#dddddd;
    margin:2px 0 0 0; padding:0; letter-spacing:3px;
  }   
h2 {
  font-family:times new roman,times,serif; font-size:14px; font-weight:bold; color:#dddddd;
  margin:2px 2px 0 12px; padding:0; letter-spacing:2px;
}
h3 {
  position:relative; text-align:right;
  font-family:times new roman,times,serif; font-size:14px; font-weight:bold; color:#dddddd;
  margin:-12px 4px 0 0; padding:0;
}
p {
  font-family:verdana,helvetica,sans-serif; font-size:10px; color:#bbbbbb;
  margin:4px 2px 0 12px; padding:0;
}
  p.m1 {
    font-family:verdana,helvetica,sans-serif; font-size:10px; color:#bbbbbb;
    margin:10px 2px 0 12px; padding:0;
  }
  p.p1 {
    font-family:verdana,helvetica,sans-serif; font-size:10px; color:#aaaaaa;
    margin:4px 2px 0 12px; padding:0; text-align:justify;
  }
  p.gb1 {
    font-family:verdana,helvetica,sans-serif; font-size:10px;  color:#ffbf11;
    margin:4px 2px 0 12px; padding:0;
  }
  p.p2,div.p2 {  /* div.p2 used for amazon store */
    font-family:verdana,helvetica,sans-serif; font-size:11px; color:#aaaaaa; line-height:150%;
    margin:4px 4px 0 12px; padding:0;
  }
  p.poem {
    font-family:verdana,helvetica,sans-serif; font-size:11px; color:#aaaaaa; line-height:150%;
    margin:4px 4px 0 80px; padding:0;
  }
  /* used for the last updated date on links.php */
  p.r1 {
    text-align:right;
    font-family:verdana,helvetica,sans-serif; font-size:10px; color:#cccccc; line-height:100%;
    margin:-10px 4px 0 0; padding:0;
  }
  p.r2 {
    text-align:right;
    font-family:verdana,helvetica,sans-serif; font-size:11px; color:#aaaaaa; line-height:150%;
    margin:4px 4px 4px 12px; padding:0;
  }
  /* date and author under each story */
  p.t1 {
    position:relative; text-align:center;
    font-family:times new roman,times,serif; font-size:14px; color:#dddddd;
    margin:0; padding:8px 0 4px 0; letter-spacing:3px; line-height:110%;
  }
    
a:link,
a:visited {text-decoration:none; font-weight:bold; color:#8AAEFF;}
a:hover {text-decoration:underline; font-weight:bold; color:#8AAEFF;}

/* vocabulary links */
a.vocab {
  text-decoration:none; font-weight:bold; color:#8AAEFF;
  cursor:pointer;
}
a.vocab:link,
a.vocab:visited {text-decoration:none; font-weight:bold; color:#8AAEFF;}
a.vocab:hover {text-decoration:underline; font-weight:bold; color:#8AAEFF;}


/* menu links */
a.a1 {
  display:block;
  font-family:times new roman,times,serif; font-size:14px; letter-spacing:3px;
  margin:4px 0 4px 0; padding:0 0 0 18px; width:130px; line-height:16px;
}
a.a1:link,
a.a1:visited {
  text-decoration:none; font-weight:bold; color:#888888;
  background:transparent; 
}  
a.a1:hover {
  text-decoration:none; font-weight:bold; color:#ffbf11;
  background:transparent url(images/bulletpoe.gif) 1px 4px no-repeat; 
}

/* Selected menu link */
a.a2 {
  display:block;
  font-family:times new roman,times,serif; font-size:14px; letter-spacing:3px;
  margin:4px 0 4px 0; padding:0 0 0 18px; width:130px; line-height:16px;
}
a.a2:link,
a.a2:visited {
  text-decoration:none; font-weight:bold; color:#ffbf11;
  background:transparent url(images/bulletpoe.gif) 1px 4px no-repeat; 
}
a.a2:hover {
  text-decoration:none; font-weight:bold; color:#ffbf11;
  background:transparent url(images/bulletpoe.gif) 1px 4px no-repeat; 
}

blockquote {
  font-family:verdana,helvetica,sans-serif; font-size:11px; color:#aaaaaa; line-height:150%;
  margin:4px 32px 0 32px; padding:0;
}

  ul.alist {margin:0 0 0 12px; padding:0; list-style:none;}
  ul.alist li {
    margin-bottom:6px; padding:0 0 0 16px;  
    background:transparent url(images/bt5.gif) no-repeat;
  }
  
/* styles for the timeline page */
table.timeline {
  margin:0 0 0 12px;
}
  td.t1 {
    width:80px; text-align:center;
    border-bottom:1px dashed #888888;
    margin:0; padding:8px 0 8px 0;
  }
  td.t2 {
    text-align:left;
    font-family:verdana,helvetica,sans-serif; font-size:11px; color:#aaaaaa; line-height:100%;
  }
  ul.elist {margin:0; padding:0; list-style:none;}
  ul.elist li { /* Poe event */
    margin-bottom:6px; padding:0 0 0 16px;  
    background:transparent url(images/bt5.gif) no-repeat;
  }
  ul.elist li.ev { /* world event */
    margin-bottom:6px; padding:0 0 0 16px;  
    background:transparent url(images/bt3.gif) no-repeat;
  }
  ul.elist li.none { /* no bullet */
    margin-bottom:6px; padding:0 0 0 16px;  
    background:transparent;
  }
  h2.year {
    font-family:times new roman,times,serif; font-size:14px; font-weight:bold; color:#dddddd;
    margin:2px 2px 0 0; padding:0; letter-spacing:2px;
  }
  
/* articles page */
table.topics {
  width:90%; margin:0 0 0 12px;
}
  table.topics td {
    text-align:left;
    font-family:verdana,helvetica,sans-serif; font-size:11px; color:#aaaaaa; line-height:100%;
    margin:0 14px 0 0; padding:2px 0 2px 0;
  }
  table.topics td.t1 {
    border-bottom:1px dashed #888888;
  }
    
iframe {
  border:0; margin:0 0 0 12px;
}

img {
  margin:0; padding:0; border:0;
}
img.xpic {
  margin:1px 3px 3px 1px; padding:0;
  border:solid 1px #888888;
}
img.xleft {  /* left aligned image */
  float:left; margin:5px 10px 2px 0;
}
img.xright {  /* right aligned image */
  float:right; margin:5px 0 2px 10px;
}

img.printicon {
  margin:0 0 0 12px;
}

b {font-weight:bold; color:#dddddd;}

form {
  margin:0; padding:0 0 0 12px;
}
label.noshow,
span.noshow {display:none;}

pre {font-size:12px; margin:0 0 0 12px;}
  pre.p2 {
    font-family:verdana,helvetica,sans-serif; font-size:11px; color:#aaaaaa; line-height:150%;
    margin:4px 4px 0 12px; padding:0;
  }
  pre.cite {
    font-size:11px; color:#ffbf11; line-height:normal;
    margin:4px 4px 0 12px; padding:0;
  }
  
dl.alist {
  margin:0; padding:4px 0 0 0;
}
  dl.alist dt {
    font-family:verdana,helvetica,sans-serif; font-size:11px; color:#aaaaaa; line-height:150%;
    margin:0; padding:0 0 0 12px;
  }
  dl.alist dd {
    font-family:verdana,helvetica,sans-serif; font-size:11px; color:#aaaaaa; line-height:120%;
    margin:0; padding:0 0 6px 20px;
  }
  
acronym {border-bottom:dashed 1px #000000; cursor:help; font-weight:bold; color:#0000aa;}

/* 
   Styles for layout DIVs
   -----------------------------------------------------------------------------
*/

/* 
   for this site, #container needs a fixed width so all of the backgrounds and other
   divs inside it line up. Otherwise there are some 1px rounding issues depending on the 
   size of the browser window.
*/
#container {
  position:relative; width:830px;
  text-align:center; margin:0 auto 0 auto; padding:0;
}

  /* Page Header, full width of container */
  #pagehead {
    position:relative;
    text-align:center; margin:0; padding:0;
    background:transparent url(images/topbg.gif) top center no-repeat;
  }
    #pagehead div.navbar {
      position:relative; width:782px; height:140px;
      text-align:center; margin:0 auto 0 auto; padding:20px 0 0 0;
    }
    #pagehead p {
      display:inline;
      text-align:left;
    }
    #pagehead ul {
      display:none;
    }
  
    /* DIVs for navigation links */
    div.navlinks {display:none;}
    div.navlinks2 {display:none;}

  /* Page body, full width of container */
  #pagebody {
    position:relative;
    text-align:center; margin:0; padding:0;
    background:transparent url(images/bodybg01.gif) center repeat-y;
  }

    /* Titlebar, content above content box */
    #titlebar {
      position:relative;
      text-align:left; margin:0; line-height:1px; /* removes 2px space under leaf.jpg */
    }

    /* Outer content box, defines outer width of content (use width:??px )*/
    #contentbg {
      position:relative; width:736px;
      text-align:left; margin:0 auto 0 auto; padding:0;
    }
      /* Inner content box for margins and a second background (do NOT define a width) */
      #contentbox {
        position:relative;
        font-family:verdana,helvetica,sans-serif; font-size:10px; color:#ffffff; line-height:100%;
        text-align:left; margin:0; padding:0;
      }
        /* Content above columns */
        #contenthead {
          position:relative; margin:0; padding:0;
        }
      
          /* Columns, Total width must be <= 720px */
          
          /* LEFT columns */
          div.L_xxsmall,
          div.L_xsmall,
          div.L_small,
          div.L_large,
          div.L_xlarge,
          div.L_xxlarge,
          div.L_full,
          div.L_full2 {
            position:relative; float:left; margin:0; padding:0;
          }
          
          /* RIGHT columns */
          div.R_xxsmall,
          div.R_xsmall,
          div.R_small,
          div.R_large,
          div.R_xlarge,
          div.R_xxlarge,
          div.R_full {
            position:relative; float:right; margin:0; padding:0;
          }
          
          /* Column width combinations:  xxs+xxl, xs+xl, xs+xs+xs, s+l, full */
          div.L_xxsmall,div.R_xxsmall {width:170px;}
          div.L_xsmall,div.R_xsmall {width:260px;}
          div.L_small,div.R_small {width:360px;}
          div.L_large,div.R_large {width:450px;}
          div.L_xlarge,div.R_xlarge {width:520px;}
          div.L_xxlarge,div.R_xxlarge {width:540px;}
          div.L_full {width:720px;}
          div.R_full {width:720px;}
          
          div.L_xxsmall {
            background:transparent url(images/menubg.gif) top left no-repeat;
          }
                    
          #sidebar {
            position:absolute; left:0px; top:400px; width:170px;
            margin:0; padding:0;
            background:transparent;
          }
          
      /* Bottom of content box */
      #endcap {
        position:relative; width:720px; height:10px;
        clear:both; margin:0 auto 0 auto;
      }
      
    /* Footer, extends to bottom edge of window */
    #footer {
      position:relative;
      margin:0; padding:0; text-align:center; 
      background:#2F3238 url(images/footerbg.gif) top center no-repeat;
    }
      #footer p {
        position:relative; width:720px;
        text-align:left; margin:0 auto 0 auto; padding:0;
        font-family:arial,helvetica,sans-serif; font-size:10px; color:#888888;
      }
      #footer p.xnav {
        position:relative; width:720px;
        text-align:center; margin:0 auto 0 auto; padding:12px 0 0 0;
        font-family:arial,helvetica,sans-serif; font-size:10px; color:#888888;
      }
  
      #footer a:link,
      #footer a:visited {text-decoration:none; color:#bbbbbb;}
      #footer a:hover {text-decoration:underline; color:#ffbf11;}
  
      /* W3C validation links */
      #footer a.w3 {
        font-family:verdana,helvetica,sans-serif; font-size:12px; font-weight:bold;
      }
      #footer a.w3:link,
      #footer a.w3:visited {text-decoration:none; color:#000000;}
      #footer a.w3:hover {text-decoration:none; color:#ffe347;}

/* General purpose DIVs */

  /* accent line */
  div.xline {
    height:1px; line-height:1px;
    margin:3px; padding:0 0 3px 0;
    border-top:solid 1px #aaaaaa;
  }

  /* forms boxes */
  div.xbox1 {
    width:90%; padding:4px 8px 4px 8px; border:solid 1px #000000;
    background:#eeeeee;
  }
  div.xbox2 {
    width:90%; padding:4px 8px 4px 8px; margin:0 0 8px 12px; border:solid 1px #ff9900;
    background:#444444;
  }
    div.xbox2 p {
      line-height:120%;
    }

/* Extra Styles for this site */
.xdash {border:1px dashed #000000;} 
.xred {color:#ff8800;} /* form errors */

  .boxBlur {
    font-family:courier new,courier,monospace; font-size:12px; 
    border:1px solid #666666; color:#ffffff; background:#2F3238;
    margin:0; padding:0;
  }
  .boxFocus {
    font-family:courier new,courier,monospace; font-size:12px;
    border:1px solid #ffbf11; color:#ffffff; background:#2F3238;
    margin:0; padding:0;
  }
  .fbutton {
    font-family:arial,helvetica,sans-serif; font-size:11px; font-weight:bold;
    border:1px solid #ffbf11; color:#ffffff; background:#2F3238;
    margin:0; padding:0;
  }
  
.dash2 {
  position:relative; display:block;
  margin:0 0 4px 12px; padding:0 0 2px 0;
  border-bottom:1px dashed #888888;
}
.dash3 {  /* paragraph separator */
  position:relative; display:block; line-height:4px;
  margin:0 40px 4px 40px; padding:0;
  border-bottom:1px dashed #888888;
}

.xline {
  position:relative; display:block; line-height:4px;
  margin:0 2px 8px 12px; padding:0;
  border-bottom:1px solid #888888;
}
.xtitle {
  position:relative; text-align:center;
  font-family:times new roman,times,serif; font-size:20px; color:#dddddd; letter-spacing:3px;
} 
.xbig {  
  font-family:times new roman,times,serif; font-size:18px; font-weight:bold; color:#dddddd;
}
.xbig2 {  
  font-family:times new roman,times,serif; font-size:18px; color:#dddddd;
}
.xword {
  font-family:verdana,helvetica,sans-serif; font-size:11px; font-weight:bold; color:#dddddd;
}

.counter {
  font-family:verdana,helvetica,sans-serif; font-size:10px; color:#666666; 
}

/* Design215 Guestbook/Comments v01.27.06 */
.xguest {  /* outside table */
  width:520px; margin:0;
}
table.xguest table {
  margin:0;
}
table.xtopics {
  width:90%; 
  margin:0 0 0 12px;
}
table.xtopics td {
  width:auto;
  margin:0 10px 0 0;
}
table.xtopics td p {
  margin:0 10px 0 0;
  border-bottom:1px dashed #888888;
} 

.gbox {  /* remaining characters field, guestbook */ 
  text-align:right; width:250px;
  border:0; color:#aaaaaa; background:transparent;
}
.cbox {  /* remaining characters field, comments */ 
  width:250px;
  border:0; color:#aaaaaa; background:transparent;
}
.guestErr {
  font-weight:bold; color:#ff8800; 
}
.gline { /* user entries separator */
  position:relative; display:block; line-height:4px;
  margin:0 20px 4px 20px; padding:0;
  border-bottom:1px dashed #888888;
}
.xquote1 {
  font-family:serif; font-size:12px; color:#0d1117;
  background:transparent url(images/quote1.gif) no-repeat;
  padding:0 0 0 8px;
}
.xquote2 {
  font-family:serif; font-size:12px; color:#0d1117;
  background:transparent url(images/quote2.gif) no-repeat;
  padding:0 0 0 8px; margin:0 0 0 2px;
}
p.gst1 {margin:4px 0 8px 12px; font-size:11px; color:#aaaaaa; line-height:120%;}
p.gst2 {margin:4px 60px 0 12px; font-size:11px; color:#aaaaaa; line-height:130%;}


/* Design215 Drop Menu, v11.22.2012 */
#xtooltip {
  position:absolute; left:-200px; z-index:98;
  margin:0; padding:0;
}
#xtooltip p.tt1,
#xtooltip p.tt2 {
  text-align:left; margin:0; padding:6px 8px 8px 8px;
  font-family:verdana,helvetica,sans-serif; font-size:11px;
  color:#dddddd; background:#2F3238;
  border-radius:4px; border:2px solid #ffbf11;
}

/* stories and poems, text.php, uses a class for all wordlist divs */
div.wordmenu {
  visibility:hidden;
  position:absolute; width:220px; text-align:left;
  text-align:left; margin:0; padding:6px 8px 8px 8px;
  font-family:verdana,helvetica,sans-serif; font-size:11px;
  color:#dddddd; background:#2F3238;
  border-radius:4px; border:2px solid #ffbf11;
}

/* gallery page, images.php */
#xpic {  
  position:relative;
}

/* Google Search box */
table.gsearch {
  width:500px;
  border:0; margin:0; padding:0;
}

/* Special Styles for Specific Pages/Stories */

#pag_gallery div.minheight,
#pag_text div.minheight {
  height:1200px; 
}

#pag_text div#sidebar {
  top:450px;
}


/* Balloon Hoax */
.npr {
  display:block; text-align:center; color:#dddddd;
  font-family:times new roman,serif; font-size:14px; line-height:normal;
}
.hd1 {text-align:center; font-size:44px; font-weight:bold;}
.hd2 {text-align:center; font-size:36px; font-weight:bold;}
.hd3 {text-align:center; font-size:24px; font-weight:bold;}
.hd4 {text-align:center; font-size:18px; font-weight:bold;}

/* replace or resize images */
img.rp50 { /* small footer logo v12.29.2009 */
  position:relative; margin:-12px 0 0 0; top:12px;
}