/*****************************************************************
   styles01.css
   Style-sheet for earth.acrocephalus.com subdomain website
   Arial is default font
   body is centred, using div#wrap
   2017-06-14.
   2019-03-20 mods to fonts etc.
   2020-03-27 pdf-link etc
   2021-04-10 version on HERMES, with command-text
   2021-06-03 top-nav design simplified
*****************************************************************/
*   {                               /* clears browser defaults */
    margin: 0px;
    padding: 0px;
}

/*  zero margin and padding for body & html force content to reach edge
    of browser window */
body {
    font-family: arial, helvetica, sans-serif;
    font-weight:normal;
    font-style: normal;
    color:black;
}

/* Top-level layout controls */

#wrap {                    /* wrap all body elements in this div... */
    position: relative;    /* becomes containing block for its descendants */
    margin: 0 auto;
/* Realistic minimum for typical smartphones. Likely minimum screen
   width is 320px, so some horizontal scrolling may be required. */
    min-width: 320px;      
    max-width: 1026px;
    border: thin double black;
    background: #b9d3ee none repeat scroll 0% 0%;    /* R colour 601 */
}
#top-nav {
    position: relative;
    display: block;
}
#top-nav:before {
    content: "";
    position: absolute;
    display: block;
    background:#AEEEEE;      /* R colour 521 */
    background-image: url("../IMAGES/DSCN0545_1024x80.jpg");
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 0.6;
}
#home0 {
    position: relative;
    display: inline;
    opacity: 1.0;    
}
/* For the main title in the masthead... */
/* width 320:
 * Apple: iPhone 5, iPhone 4, iPhone 3, iPod Touch
 * Samsung: Galaxy S3 mini, Galaxy S2, Galaxy S
 * Microsoft:
 * Lumia 1020, Lumia 925, Lumia 920, Lumia 900, Lumia 830, Lumia 620
 * HTC 8X; ZTE Open (Firefox OS)
 */
#banner-small-line1 {
    position: relative;
    bottom: 20px;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 19pt;
    line-height: 0.9;
    color: white;
    z-index: 2;
    padding: 0px 2px 0px 2px;  /* TRBL */
}
#banner-small-line2 {
    position: absolute;
    top: 30px;
    left: 48px;
    font-family: Helvetica, sans-serif;
    font-size: 14pt;
    font-style: italic;
    line-height: 0.9;
    color: white;
    z-index: 2;
}
/* banner for widescreen: mobile-first >> display: none */
#banner-big {
    position: relative;
    display: none;
    bottom: 8px;      /* shift up from masthead base */
}
/*
a#company-profile:link {
    text-decoration: none;
}
*/
.pad2 {
    position: relative;
    display: inline;
    background-color: #43CD80;   /* R colour 577 */
    bottom: 20px;
    font-size: 9pt;
    line-height: 1.0;
    padding: 14px 2px 14px 2px;  /* TRBL */
    border: thin solid black;
    margin: 0px 0px;
}

#main {
    float: left;   
    width:100%;
    background-color: white;
}
#sidebar {
    float: right;
    padding-left: 5px;
    background-color: white;
    display: none;
}
#footer {
    clear:both;
    background:#cc9;
    font-size:small;
}
#main-domain {
    background:#FFB90F;
    padding-top:    0.5em;
    padding-bottom: 0.5em;
    padding-left:   1.0em;
    padding-right:   1.0em;
    border: thin solid black;
}
#email {
    /* link on contacts page */
    background-color: #FFA54F;  /* R colour 621 */
    display: block;
    width: 50px;
    font-size: medium;
    padding: 10px 10px;
    margin:  15px 10px;
}
p   {
    font-size:      1em;
    padding-right:  10px;
    padding-top:    0;
    padding-bottom: 0.7em;
    margin-top:     0em;
    margin-bottom:  0em;
    line-height:    1.3;
}
h1, h2, h3, h4 {
    clear: both;      /* force heading onto newline after image */
    margin-top: 0em;
    margin-bottom: 0em;
    /* following altered 2017-11-04 (was Arial) */
/*    font-family: Verdana; */
    font-family: Tahoma;    
    font-weight: bold;
}
h1  {
    font-family: Verdana, Arial, sans-serif;
/*    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;*/
    font-weight: normal;
    font-size: 1.29em;
    color: blue;
    clear: right;
    margin-top: 1.0em;
    margin-bottom: 0.8em;
}
h2  {
    font-size: 1.2em;
    padding-top: .4em;
    padding-bottom: .5em;
}
h2-blog {
    display: block;
    clear: both;      /* force heading onto newline after image */
    margin-top: 0em;
    margin-bottom: 0em;
    font-family: Arial;
    font-weight: bold;
    font-size: 1.2em;
    padding-top: .75em;
    padding-bottom: 0.6em;
}
h3  {
    font-size: 1.0em;
    padding-top: .5em;
    padding-bottom: .5em;
}
h4  {
    font-size: 1em;
    padding-top: .1em;
    padding-bottom: .5em;
}
ul, ol  {
    list-style-position: inside; 
}
ol  {
    padding-top: 0;
    padding-bottom: .8em;
    margin-top: 0em;
    margin-bottom: 0em;
}
ul  {
    list-style-type: square;
    padding-top: 0;
    padding-bottom: .8em;
    margin-top: 0em;
    margin-bottom: 0em;
}
li  {
    padding-bottom: .8em;
}
p, h1, h2, h3, h4, ul, ol, h2-blog {
    margin-left: 6px;
    margin-right: 6px;
}
address {
    font-family: "andale mono", monospace;
    font-style: normal;
}
pre {
    font-family: "andale mono", "Andale Mono", monospace;
    font-style: normal;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 11pt;
}
.exampleheading {  /* for headings inside the list of examples */
    color: white;
    background-color: #43CD80;  /* R colour 577 */
    padding: .2em;
}
img {
    overflow: hidden;
    max-width: 100%;
}
.celltitle {
    clear: both;
    margin-left: auto;
    margin-right: auto;
}
.ptable {     /* for paragraph divisions inside a table cell */
    font-size: 1em;
    line-height: 1.2;
    margin: 0px 0px 0.4em 0px;
}
.picrhs {
    float: right;
    margin: 2px 0px 10px 12px;
    border: thin solid black;
}
.heading-link { /* used for making headings into links, in examples.html */
    font-size:1.0em;
    font-weight: normal !important;
}
.pdf-link {             /* only show links for pdf files on wider screens */
    display: none;
}
.top-para {  /* sometimes needed to space away from images etc */
    margin-top: 1em;
}
div#download {
    display: none;
}
/* sidebar links */
.link-major, .link-minor {
    padding-left: .25em;
    margin: 8px 4px 8px 0px;
}
.link-major {
    background-color: #43CD80;  /* R colour 577 */
}
.link-minor {
    background-color: #C1FFC1;  /* R colour 103 */
}
.link-major a:hover, .link-minor a:hover {
    color: white;
    background-color: #666;
}

iframe#strings7 {
    width: 400px;
    height: 300px;
}

span.command-text {
    font-family:"Andale Mono", "Liberation Mono", "Courier New", monospace;
}
span.qualifications {
    font-size: 80%;
    font-style: italic;
}
/* the table of data transfer with/without AVG */
#avg-big {
    display: none;
}
.Rplot {
    float: right;
    margin: 2px 0px 10px 20px; /* TRBL */
    border: thin solid black;
}

/* styles conditional on media width */
/* width 360:
 * LG G4, LG G3, LG Nexus 5
 * Samsung: Galaxy Note 4, Galaxy Note 3
 * Galaxy Note 2, Galaxy S5, Galaxy S4, Galaxy S4 mini, Galaxy S3
 * HTC One, HTC Evo 3D
 * Sony: Xperia Z3, Xperia Z, Xperia S, Xperia P
 * Xiaomi Mi 4, Xiaomi Mi 3; Lenovo K900; Pantech Vega n°6
 * Blackberry Torch 9800; ZTE Grand S
 */
@media screen and (min-width: 360px) {
    .pad2 {
        font-size: 12pt;
        padding-left: 4px;
        padding-right: 4px;        
    }
}
/* Apple iPhone 6, LG Nexus 4, Blackberry Leap, Blackberry Z10 */
@media screen and (min-width: 360px) and (max-width: 399px) {
    h1 {
        font-size: 1.5em;
    }
}
/* Apple iPhone 6 Plus (414), Motorola Nexus 6 (412)
 * Microsoft Lumia 1520 (432), Google Glass (427)
 * Asus Nexus 7 (v2), Asus Nexus 7 (v1), LG G Pad 8.3
 */

@media screen and (min-width: 400px) and (max-width: 624px) {
    #banner-small-line1, #banner-small-line2 {
        padding-left: 8px;
        padding-right: 8px;        
    }
    #banner-small-line1 {
        font-size: 22pt;
    }
    #banner-small-line2 {
        font-size: 16pt;
    }
    h1 {
        font-size: 1.6em;
    }
    .floatrhs {
        margin: 8px 2px 8px 2px;
    }
    .exampleheading {  /* for headings inside the list of examples */
        font-size:1.25em;
    }
}
@media screen and (min-width: 625px) {
    #banner-small-line1, #banner-small-line2 {
        display: none;
    }
    #banner-big {
        display: inline;
        font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
        line-height: 1.0;
        padding-left: 15px;
        padding-right: 15px;        
        color: white;
    }
    #avg-small {
        display: none;    
    }
    #avg-big {
/*        display: inline;    */
        display: table;
        margin-left: auto;
        margin-right: auto;
    }
}
@media screen and (min-width: 625px) and (max-width: 799px) {
    #banner-big {
        font-size: 26pt;
    }
}
/* width 800: Samsung Galaxy Tab 3 10", Samsung Galaxy Tab 2 10",
 * Samsung Galaxy Tab (8.9"), Samsung Nexus 10
 * Amazon Kindle Fire HD 8.9
 */
@media screen and (min-width: 800px) {
    #banner-big {
        font-size: 30pt;
    }
}
/* width 768:
 * Apple iPad 3, 4, Air: Apple iPad 1, 2;
 * Apple iPad mini 2, 3; Apple iPad mini
 */
@media screen and (min-device-width: 768px) {
    div#download {
        display: block;
    }
    #main {
        width: 80%;            /* 100% less main width */
    }
    #sidebar {
        /* sidebar gets displayed if screen is wide enough */
        display: inline;
        width: 19%;            /* 100% less main width */
    }
    h1 {
        font-size: 2.0em;
    }
    .pdf-link {      /* only show links for pdf files on wider screens */
        display: block;
    }
    iframe#strings7 {
        width: 600px;
        height: 400px;
    }
}

/*
.newblock {
    clear: right;
    font-family:arial, helvetica, sans-serif;
    font-size:1em;
    padding-top: .2em;
    padding-bottom: 1em;
    margin-top: 0em;
    margin-bottom: 0em;
}
*/
