/*!
 * Rules taken verbatim from Bootstrap v3.3.6
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 *
 * ---------------------------------------------------------------------------
 * WHAT THIS IS
 *
 * The site loaded the whole of Bootstrap (121 KB of CSS plus 37 KB of JS, both
 * from a CDN) for the navigation bar, the dropdown menus and a handful of base
 * styles. The JavaScript is gone -- the dropdowns and the sticky bar are now
 * scripts/js/dropdown.js and a CSS position:sticky rule. This file is the only
 * CSS that was still doing work, copied unchanged so that removing the CDN
 * changes nothing on screen.
 *
 * Bootstrap 3 reached end of life in 2019. This file exists so it can be
 * deleted a rule at a time as the navigation is reworked. Do not extend it:
 * new styling belongs in koukoulideio_theme.css.
 *
 * ---------------------------------------------------------------------------
 * DELIBERATELY NOT COPIED
 *
 *   .dropdown-toggle:focus{outline:0}
 *   .open>a{outline:0}
 *     Both suppress the focus ring. They outrank the site's own ring, so the
 *     dropdown toggles had no visible focus at all -- a bug that only became
 *     apparent once the navigation was made keyboard-operable. Leaving them
 *     out restores the ring.
 *
 *   a:focus{color:#23527c;text-decoration:underline}
 *     Bootstrap styles :focus exactly like :hover. That is what turned the
 *     lightbox arrows blue when they were made focusable. Focus is indicated
 *     by the ring in koukoulideio_theme.css instead; :hover is kept below.
 * ---------------------------------------------------------------------------
 */


/* --- base ---------------------------------------------------------------- */
/* Bootstrap was quietly normalising the page's text rhythm. w3.css supplies
   body margin and box-sizing, but none of the following, so without them every
   paragraph and list on the site falls back to the browser default of 1em top
   AND bottom, instead of nothing on top. That is 53 paragraphs and 11 lists --
   it showed up first as the footer's copyright bar growing taller. */

/* Suppresses the translucent blue box a touch browser paints over whatever you
   tap. Without it every link and button on a phone flashes a light blue
   rectangle on touch, which is what happened when Bootstrap was removed.
   w3.css covers text-size-adjust from the same Bootstrap rule, but not this.

   If tap feedback is ever wanted back, delete this rule -- but note the links
   already respond through their hover and active colours. */
html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    color: #333;
}

p {
    margin: 0 0 10px;
}

ol, ul {
    margin-top: 0;
    margin-bottom: 10px;
}

/* 19 rules on the site, some styled by .myHr, some only by inline styles. */
hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
}

img {
    border: 0;
    vertical-align: middle;
}

/* The contact form. Browsers do not let form controls inherit the page's font
   by default, so without this the five inputs, the textarea and the two
   buttons on epikoinwnia.htm drop to the browser's own control font. The label
   rule is what makes the field labels bold. */
button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
input {
    line-height: normal;
}
label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}


/* w3.css sets heading font-size, weight and margin but not line-height, so
   without this every heading on the site would loosen from 1.1 to the 1.5
   inherited from body. */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.1;
}

/* Link colour. w3.css does not set one, so without this every link falls back
   to the browser default blue and visited purple. */
a {
    color: #337ab7;
    text-decoration: none;
}
a:hover {
    color: #23527c;
    text-decoration: underline;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}


/* --- navigation bar ------------------------------------------------------ */

/* Clearfix. Not optional: .navbar-nav and its list items are floated at 768px
   and up, so without this #nav_menu collapses to zero height -- and a
   zero-height element paints no background, which is what made the lilac band
   disappear and left the links sitting over the header. */
.nav:before,
.nav:after,
.navbar:before,
.navbar:after {
    display: table;
    content: " ";
}
.nav:after,
.navbar:after {
    clear: both;
}

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.nav > li {
    position: relative;
    display: block;
}
.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
}
.nav > li > a:focus,
.nav > li > a:hover {
    text-decoration: none;
    background-color: #eee;
}

.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

.navbar-nav {
    margin: 7.5px -15px;
}
.navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
}
.navbar-nav > li > .dropdown-menu {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

@media (min-width: 768px) {
    .navbar {
        border-radius: 4px;
    }
    .navbar-nav {
        float: left;
        margin: 0;
    }
    .navbar-nav > li {
        float: left;
    }
    .navbar-nav > li > a {
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .navbar-right {
        float: right !important;
        margin-right: -15px;
    }
}

@media print {
    .navbar {
        display: none;
    }
}


/* --- dropdown menus ------------------------------------------------------ */
/* The .open class is applied by scripts/js/dropdown.js, which took over from
   Bootstrap's plugin and toggles exactly the class this rule expects. */

.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.open > .dropdown-menu {
    display: block;
}

.dropdown-menu-right {
    right: 0;
    left: auto;
}

/* On narrow screens Bootstrap drops the menu into the flow instead of floating
   it. The theme overrides this for the two navigation menus with
   position:absolute !important; the search panel still relies on it. */
@media (max-width: 767px) {
    .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/* The open toggle's background. Overridden in practice by w3-theme-l1, which
   scripts/js/dropdown.js adds and which carries the important flag, but kept
   so the cascade is exactly what it was. */
.nav .open > a {
    background-color: #eee;
    border-color: #337ab7;
}

@media (min-width: 768px) {
    .navbar-right .dropdown-menu {
        right: 0;
        left: auto;
    }
}


/* --- lightbox ------------------------------------------------------------ */
/* koukoulideio_theme.css defines .modal fully and loads afterwards, so it wins
   for everything it sets -- these are the leftovers Bootstrap was still
   contributing. .modal-content is the lightbox photograph: the theme sets its
   size and its asymmetric border-radius per breakpoint, while the border and
   shadow below came from here. Kept verbatim so nothing shifts. */

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

.modal-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, .2);
    /* border-radius removed: the lightbox photograph is shown square. The
       theme sets border-radius:0 on .modal-content as well, but dropping it
       here keeps the two from disagreeing. */
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}

@media (min-width: 768px) {
    .modal-content {
        -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
        box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    }
}