/*****************************************************************************
menu-bar.css
*****************************************************************************/
#top-nav {
    position: relative;
    display: block;
    background:#AEEEEE;      /* R colour 521 */
}
/* constrols the background for the menu bar (nav bar) */
#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.7;
}
#home0 {     /* the home icon */
    position: relative;
    display: inline;
    opacity: 1.0;
}
#banner-small-line1 {
    position: relative;
    display: inline;
    bottom: 22px;
/*    color: blue; */
    color: white;
    z-index: 2;
    padding: 0px 2px 0px 2px;  /* TRBL */
}
#banner-small-line2 {
    position: absolute;
    top: 24px;
    left: 53px;
    color: white;
}
#banner-small-line1, #banner-small-line2 {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 15pt;
    font-style: normal;
    line-height: 0.9;
    z-index: 2;
}
#banner-big {
    position: relative;
    display: none;
}
a#contact-pad:link {
    text-decoration: none;
}
.pad1, .pad2 {
    position: relative;
    bottom: 14px;
    padding: 10px 2px 10px 2px;  /* TRBL */
    border: thin solid black;
    margin: 0px 0px;
    line-height: 1.0;
    font-size: 10pt;
}
.pad1 {
    display: none;
}
.pad2 {
    display: inline;
    background-color: #43CD80;  /* R colour 577 */
}

@media screen and (min-width: 360px) and (max-width: 625px) {
    #banner-small-line1, #banner-small-line2 {
        font-size: 16pt;
    }
}
@media screen and (min-width: 340px) {
    .pad1, .pad2 {
        font-size: 11pt;
        padding-left: 4px;
        padding-right: 4px;        
    }
}
@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;
        font-size: 24pt;
        line-height: 1.0;
        bottom: 10px;
        padding-left: 15px;
        padding-right: 15px;        
        color: white;
    }
}
@media screen and (min-width: 800px) {
    #banner-big {
        font-size: 34pt;
        bottom: 5px;
    }
}
@media screen and (min-width: 900px) { /* laptop, desktop etc */
    #banner-small-line1, #banner-small-line2 {
        display: inline;
        font-size: 18pt;
    }
    #banner-big {
        display: none;
    }
    .pad1 {
        display: inline;
        background-color: #AEEEEE;  /* R colour 521 */
    }
}

