/* FILE: neilvandyke-blueboxes.css

   Copyright 2002-2015 Neil Van Dyke <neil AT neilvandyke DOT org>   

   I created this particular "blue boxes" visual design around 1999, with heavy
   use of `table` and `font` elements.  In 2002-01, I came up with an approach
   to mimic the original look using CSS and only plain least-common-denominator
   HTML elements (and a few strategic `div` elements).  At this point, I'm
   keeping it around for nostalgia value.  In 2015-04, I added CSS `@media`
   queries to make it more "responsive" without requiring multiple CSS files
   for different devices like we used to have to do.

   TODO: When I added the `@media` queries, I was trying to improve various
   padding, and I don't like how the inter-blue-box gap was increased.

   TODO: Should have space for flow around inline images.

   TODO: Image scaling needs work.
  */

body { 
  background-color: #646697;
  color:            white;
  /* font-family:      "Arial", "Helvetica", sans-serif; */
  font-family:      sans-serif;
  /* font-size:        100%; */
  margin: 0em;
}

code, pre {
  /* font-family:      "Courier New", "Courier", monospace; */
  font-family:         monospace;
  /* color:               #88ff88; */
}

code.email {
  font-family:         monospace;
  color:               white;
  background-color:    #646697
}

h1 {
  font-size:           180%;
  font-weight:         bold;
  margin:              0.8em 1em;
  padding:             0;
  text-align:          center;
}

h2 {
  font-size:        120%;
  font-weight:      bold;
  padding-top:      0em;
  margin:           0.4em 0.4em;
}

h3 {
/*  display:          run-in; */
  font-size:        120%;
  font-weight:      bold;
}

p {
  margin:              0.8em 0;
  padding:             0;
}

pre {
  margin:              0.8em 0 0.8em 1em;
  overflow:            auto;
  padding:             0;
}

blockquote {
  font-style:          italic;
  margin:              0.8em 3em 0.8em 3em;
  padding:             0;
}

blockquote.quote {
  font-style:          italic;
  margin:              0.8em 3em 0.8em 3em;
  padding:             0;
}

blockquote.quoteattrib {
  font-style:          normal;
  margin:              -0.8em 3em 0.8em 6em;
  padding:             0;
}

.actualbody { 
  border-spacing:   0.5em;
  color:            white;
  margin-left: auto;
  margin-right: auto;
}

.siteid { 
  background-color: #52547a;
  border-color:     #52547a;
  border-style:     none;
  border-width:     thin;
  display:          block;
  margin-bottom:    0em;
  margin-left:      0em;
  margin-right:     0em;
  margin-top:       0em;
  padding-bottom:   0.8em;
  padding-left:     0.8em;
  padding-right:    0.8em;
  padding-top:      0.8em;
  vertical-align:   middle;
}

.siteid p { 
  font-size:           120%;
  margin:              0em 0em;
  padding:             0;
  text-align:          center;
}

.title { 
  background-color: #7578af;
  display:          block;
  border-color:     #52547a;
  border-style:     none;
  border-width:     thin;
  margin-bottom:    0em;
  margin-left:      0em;
  margin-right:     0em;
  margin-top:       0em;
  padding-bottom:   0.8em;
  padding-left:     0.8em;
  padding-right:    0.8em;
  padding-top:      0.8em;
  vertical-align:   middle;
}

.title h1 {
  font-size:        180%;
  font-weight:      bold;
  margin-bottom:    0em;
  margin-left:      0em;
  margin-right:     0em;
  margin-top:       0em;
  padding-bottom:   0em;
  padding-left:     0em;
  padding-right:    0em;
  padding-top:      0em;
  text-align:       center;
}

.sectionhead, .sectionnohead {
  background-color: #6e709e;
  border-color:     #52547a;
  border-style:     none;
  border-width:     thin;
  padding-bottom:   0.8em;
  padding-left:     0.8em;
  padding-right:    0.8em;
  padding-top:      0.8em;
  text-align:       center;
  display:          block;
  vertical-align:   top;
}

.sectionnohead {
  display:          none;
}

.sectionbody {
  background-color: #5f628e;
  border-color:     #52547a;
  border-style:     none;
  border-width:     thin;
  padding-bottom:   0.4em;
  padding-left:     0.8em;
  padding-right:    0.8em;
  padding-top:      0.4em;
  display:          block;
  vertical-align:   top;
}

.sectioncodebody {
  background-color: #ffffff;
  border-color:     #52547a;
  border-style:     none;
  border-width:     thin;
  padding-bottom:   0.4em;
  padding-left:     0.4em;
  padding-right:    0.4em;
  padding-top:      0.4em;
  display:          block;
  vertical-align:   top;
}

.sectioncodebody pre {
  background-color: #ffffff;
  color:            black;
  display:          block;
  font-size:        90%;
  margin:           0em;
  overflow:         auto;
  padding:          0em;
}

.sectionnavbarbody {
  background-color: #7274a1;
  border-color:     #52547a;
  border-style:     none;
  border-width:     thin;
  padding-bottom:   0.4em;
  padding-left:     0.4em;
  padding-right:    0.4em;
  padding-top:      0.4em;
  display:          block;
  vertical-align:   top;
  text-align:       center;
}

.bottomprefix {
  display:          block;
  padding-bottom:   0em;
  padding-left:     0em;
  padding-right:    0em;
  padding-top:      0em;
}

.bottombody {
  padding-bottom:   0.4em;
  padding-left:     0em;
  padding-right:    0em;
  padding-top:      0.4em;
  display:          block;
  vertical-align:   top;
  text-align:       center;
}

.bottombody p {
  color:            #52547a;
  font-size:        60%;
  margin-bottom:    0em;
  margin-left:      0em;
  margin-right:     0em;
  margin-top:       0em;
}

/* siteid a */

.siteid a { 
  color:            white;
  text-decoration:  none;
}

.siteid a:active {
  color:            white;
  text-decoration:  underline;
}

.siteid a:link {
  color:            white;
  text-decoration:  none;
}

.siteid a:visited { 
  color:            white;
  text-decoration:  none;
}

.siteid a:hover {
  text-decoration:  underline;
}

/* linkothersite */

a.linkothersite {
  font-weight:      normal;
}

a.linkothersite:active {
  color:            #a0a0ff;
  text-decoration:  underline;
}

a.linkothersite:link {
  color:            #ffff00;
  text-decoration:  none;
}

a.linkothersite:visited { 
  color:            #ffff00;
  text-decoration:  none;
}

a.linkothersite:hover {
  text-decoration:  underline;
}

/* linksamesite */

a.linksamesite {
  font-weight:      bold;
}

a.linksamesite:active {
  color:            #a0a0ff;
  text-decoration:  underline;
}

a.linksamesite:link {
  color:            #ffff00;
  text-decoration:  none;
}

a.linksamesite:visited { 
  color:            #ffff00;
  text-decoration:  none;
}

a.linksamesite:hover {
  text-decoration:  underline;
}

/* secpermalink */

a.linksecperm {
}

a.linksecperm:active {
  color:            #a0a0ff;
  text-decoration:  underline;
}

a.linksecperm:link {
  color:            white;
  text-decoration:  none;
}

a.linksecperm:visited { 
  color:            white;
  text-decoration:  none;
}

a.linksecperm:hover {
  /* color:            #ffff00; */
  text-decoration:  underline;
}

/* TODO: This doesn't scale down for the Quack page image. */
img {
  max-width: 100%;
  height: auto
  -ms-interpolation-mode: bicubic;
}

@media (min-width: 45em) {

  body { 
    margin: 0.5em;
  }

  .actualbody {
    display: table;
  }
  
  .top, .section, .bottom { 
    display: table-row;
  }

  .section, .bottom { 
    vertical-align: top;
  }

  .siteid, .title, .sectionhead, .sectionnohead, .sectionbody, .sectioncodebody, .sectionnavbarbody, .bottomprefix, .bottombody { 
    display: table-cell;
  }
  
  .siteid, .title, .sectionhead, .sectionnohead, .sectionbody, .sectioncodebody, .sectionnavbarbody {
    border-style: solid;
  }

  .sectionhead {
    text-align: right;
  }

  .bottombody {
    text-align: left;
  }
}

@media (min-width: 65em) {
  .actualbody {
    width: 64em;
  }
}

/*EOF*/