/*
Nexus 5   360 598
Nexus 6   412 690
iPhone 5  320 568
iPhone 6  375 667
iPhone 6+ 414 736
Galaxy 5  360 640
Galaxy 6  360 640

iPad            768 1024
Galaxy 2,3 10"  800 1280
Galaxy 2 7"     600 1024

320-359    small phone portrait
360-567    big phone portrate
568-1023   phone landscape, tablets portrate 
1024-      tablets landscape, monitor
*/

html
{
  font-family: sans-serif;
  font-weight: normal;
  font-size:   18px;
  line-height: 1.4em;
}

input 
{
  font-family: inherit;
  font-weight: inherit;
  font-size:   inherit;
  line-height: inherit;
}

body 
{ 
  margin: 0; /* There is non-0 default margin on body. */  
}

/* 320px ~ 20em @ 1 font-size. This is factored in when doing font
   boosting. Specifying 320px directly seems to mess it up.

   Font boosting results for font-size:1.1em, min-width:18em on Nexus 5:

     - about 40 characters in portrait
     - about 70 characters in landscape
     - landscape font appears slightly smaller

   18em on smaller phones (e.g., iPhone 4) appears to trigger scrolling.
   17em works well, however.
*/

body {min-width: 17em;}

@media only screen and (min-width: 360px)
{
  body {min-width: 19em;}
}

/* 
 * Header. 
 */
#header
{
  width: 100%;

  background: rgba(0, 0, 0, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.26); /* Off background. */

  padding: .3em 0 .3em 0;
  margin: 0 0 1.4em 0;
}

#header-menu
{
  /* Same as in #content below. */
  max-width: 40em;
  margin: 0 auto 0 auto;
  padding: 0 .4em 0 .4em;

  text-align: right;
}

#header-menu a:nth-child(n + 2) {padding-left: 1.2em;}

#header-menu a {font-size: 1.12em; color: #eee; text-decoration: none;}
#header-menu a:visited {color: #eee;}
#header-menu a:hover, #header-menu a:active {color: #fff; text-decoration: underline;}


/* 
 * Content. 
 */
#content
{
  max-width: 40em;
  margin: 0 auto 0 auto;
  padding: 0 .4em 0 .4em; /* Space between text and browser frame. */
}

/* 
 * Footer. 
 */
#footer
{
  text-align: center;
}

/* Until we have actual content in the footer. */
#footer:before {content: "\A0";}
#footer:after {content: "\A0";}

/* Screen size indicator in the footer. */
#footer
{
  border-left: 1px solid;
  border-right: 1px solid;
  margin: 0 1px 0 1px; /* To see the border. */
}

@media only screen and (max-width: 359px)
{  
  #footer {border-color: red;}
}

@media only screen and (min-width: 360px) and (max-width: 567px)
{  
  #footer {border-color: orange;}
}

@media only screen and (min-width: 568px) and (max-width: 1023px)
{  
  #footer {border-color: blue;}
}

@media only screen and (min-width: 1024px)
{  
  #footer {border-color: green;}
}

/* 
 * Common elements. 
 */
p {text-align: justify;}

code, pre
{
  font-size: 0.94em;
}

a {color: #006fbf; text-decoration: none;}
a:hover, a:active {color: #0087e7; text-decoration: underline;}
a:visited {color: #003388;}

/* 
 * Form layout table.
 */
.form-table
{
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5em;
}

.form-table table, .form-table th, .form-table td
{
  border: none;
  padding: 0;
}

/* 
 * Property list table. 
 */
.proplist
{
  /* Extend the table into #content's margins that are used to separate
     from the browser frame. If this table gets background/stripe, then
     we want it to cover that extra space so that we get a margin between
     the text and the background edge. This also means that the background
     will touch the browser frame. This looks ok as long as we don't use
     fancy things like rounded corners. */

  width: calc(100% + .8rem); /* Fill the page plus #content margin. */
  padding-right: .4rem;
  padding-left: .4rem;
  margin-left: -.4rem;

  table-layout: fixed;

  border: none;
  border-spacing: 0 0; 
}

.proplist th, .proplist td {padding: .08em 0 .08em 0;}

.proplist th 
{
  font-family: monospace; 
  font-weight: normal;
  text-align: left;
}
.proplist th:after {content: ":";}

.proplist td .comment
{
  color: #666;
  font-size: 0.833em;
}

/* Flexbox-based left/right aligned value/comment implementation. */
.proplist td 
{
  width: 100%;
  white-space: nowrap;

  display: -webkit-inline-flex;
  display: inline-flex;

  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.proplist td .value
{
  display: inline-block;  

  -webkit-flex-shrink: 1;
  flex-shrink: 1;  

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.proplist td .comment
{
  display: inline-block;

  margin-left: 1em;

  -webkit-flex-shrink: 100000;
  flex-shrink: 100000;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fallback for browsers that still don't support flexbox. */

.proplist td 
{  
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
}

.proplist td .value
{  
  float: left;  
  text-align: left;
}

/* Re-styling for full page variant. */

.full .proplist td
{
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;

  white-space: normal;
}

.full .proplist th
{
  vertical-align: top;
}

.full .proplist td .value
{
  margin-right: 1em;

  white-space: normal;
}

.full .proplist td .comment
{
  margin-left: 0;

  text-align: left;
  white-space: normal;
}

/* 
 * Pager. 
 */
#pager
{
  margin-top: 1.8em;

  font-size: 0.916em;
  text-align: center;
}

#pager a
{
  padding: 0 0.4em 0 0.4em;  
}

#pager #prev:before {content: "<\A0";}

#pager #curr {font-weight: bold;}
#pager #curr:before {content: "["; font-weight: normal;}
#pager #curr:after {content: "]"; font-weight: normal;}

#pager #next:after {content: "\A0>";}