/* Color
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
    --color-1: #554433; /* dark brown */
    --color-2: #aa6644; /* brown */
    --color-3: #cc8855; /* brown - orange */
    --color-4: #888888; /* gray */
    --color-5: #eee;    /* light gray*/
    --color-6: #f7f7f7; /* light light gray*/
}


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
    height: 100%;
    background-color: #eee;
}

body {
    margin: 0;
    min-height: 100%;
    /*
     * https://www.alsacreations.com/article/lire/631-quelles-polices-pour-un-site-web.html
     * https://kinsta.com/fr/blog/meilleures-polices-google-fonts/
     */
    /*font-family: 'Nunito Sans', Helvetica, Arial, sans-serif;*/
    font-family: Verdana, Geneva, sans-serif;
}

.main-container {
    position: relative;
    width: 100%;
    max-width: 1140px;
    /* Be sure height is minium 100% of the viewport
       see https://la-cascade.io/pourquoi-height-100-ne-marche-pas/ */
    min-height: 100vh;
    margin: 0 auto;
    box-sizing: border-box;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    background-color: white;
    
    /* Padding is need for the footer. Set bottom padding at the same
       height + 20 px as bottom margin */
    padding: 0 0 120px 0;
}

.container {
    position: relative;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 20px 20px 0 20px;
    box-sizing: border-box;
}

.box {
    background: #f7f7f7;
    padding: 15px;
    margin-top: 15px;
}

/* For devices larger than 400px */
@media (max-width: 550px) {
    .container {
        padding: 10px 10px 0 10px;
    }
}

/* For devices larger than 550px */
@media (min-width: 640px) {
    .container {
        padding: 20px 20px 0 20px;
    }
    
    .row {
        display: flex;
    }

    .column {
        display: flex;
        flex-direction: column;
        margin-left: 4%;
    }
    .column:first-child {
        margin-left: 0;
    }
    .one-half.column    { flex: 48%; }
    .one-third.column   { flex: 30.6666666667%; }
    .two-thirds.column  { flex: 65.3333333333%; }
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 1.2rem;
}
h1 { font-size: 2.8rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.2rem; }
h5 { font-size: 1rem; }
h6 { font-size: 1rem; font-weight: 300; font-style: italic; }

p {
  margin-top: 0;
}
  
ul {
  margin-top: 0;
}

/* Header
–––––––––––––––––––––––––––––––––––––––––––––––––– */

header.masthead {
    max-width: 1140px;
    margin: 0 auto;
    padding: 10px 0 0;
    background: no-repeat center center;
    position: relative;
    background-size: cover;
}
header.masthead .overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #212529;
    opacity: 0.25;
}


.site-heading {
    padding: 20px 0 15px 0;
    color: white;
    text-align: center;

    line-height: 1.1;
    display: block;
    font-weight: bold;
    margin: 0;
}

.site-heading h1{
    margin-top: 0;
    font-size: 35px;
}

@media only screen and (min-width: 768px) {
    .site-heading {
        padding: 25px 0 15px 0;
    }
    .site-heading h1{
        font-size: 50px;
    }
}

/* Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer {
    background-color: #554433;
    
    /* Stay at the bottom of the main container */
    position: absolute;
    bottom: 0;
    left: 0;
    
    width: 100%;
    height: 80px;
    
    padding-top: 20px;
}

footer p {
    color: white;
    text-align: center;
}

/* Main menu
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.navbar {
    padding: 0;
    display: flex;
    align-items: center;
    flex-direction: row;
}

.space-between {
    justify-content: space-between;
}

.navbar li {
    display: inline;
    padding: 0 0.2em 0 0;
}

.navbar ul {
    padding: 0 0 0 20px;
}

.navbar a {
    color: white;
    font-weight: bold;
    text-decoration: none;
    font-size: 25px;
}

.navbar a:hover {
  color: white;
}

.nav-group {
    display: flex;
    align-items: center;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
}

.navbar-brand img {
    width: 85px;
}
@media (max-width: 768px) {
    .navbar-brand img {
        width: 70px;
    }
    .navbar a {
        font-size: 20px;
    }
} 

@media (max-width: 550px) {
    .navbar-brand img {
        width: 50px;
    }
}

/* Breadcrumbs
–––––––––––––––––––––––––––––––––––––––––––––––––– */

 /* Style the list */
ul.breadcrumb {
  padding: 10px 16px;
  margin: 0;
  list-style: none;
  background-color: #eee;
}

/* Display list items side by side */
ul.breadcrumb li {
  display: inline;
  font-size: 18px;
}

/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: ">";
}

/* Add a color to all links inside the list */
ul.breadcrumb li a {
  color: rgb(100, 100, 100);
  text-decoration: none;
}

/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
  color: black;
  text-decoration: underline;
} 

/* Standard style
-------------------------------------------------- */

/* no underline for link except hover */

a {
  /*color: rgb(100, 100, 100);*/
  color: #cc8855;
  text-decoration: none;
}

a:hover {
  color: #cc8855;
  text-decoration: underline;
}

h2, h3, h4, h5 {
  color: #554433;
}

h2 a, h3 a, h4 a, h5 a {
  color: #554433;
}

h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover {
  color: #554433;
}

/* responsive menu
-------------------------------------------------- */

/* Hide menu icon by default */
.icon {
    width: 25px;
    height: 29px;
    display: none;
}

/* When the screen is less than 600 pixels:
   * hide all links except first one (BGF home).
   * show the menu ico
*/
@media (max-width: 600px) {
  .hide-on-sc  {
      display: none;
  }
  .icon {
    display: block;
  }
  
  .navbar {
    /* Icon must be on the left, so force space between item */
    justify-content: space-between;
    /* Item go at the next line if not enough space*/
    flex-wrap: wrap;
  }
}

/* Responsive class is added when the menu icon is clicked
*/
@media (max-width: 600px) {
  .responsive  {
      display: block;
  }
  .responsive .nav-group {
      display: block;
      align-items: left;
      padding: 0 0 0 20px;
  }
  .responsive li {
      display: block;
      padding: 5px 0 0 0;
  }
  .responsive ul {
      padding: 0;
  }
  .responsive .hide-on-sc  {
      display: block;
  }
}


/* from
–––––––––––––––––––––––––––––––––––––––––––––––––– */
form {
    width:100%;
    max-width: 400px;
}

form input {
    width:100%;
    display: inline-block;
    box-sizing: border-box;
}

input[type=submit] {
    background-color: #aa6644;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    font-weight: bold;
    line-height: 1.1;
}

input[type=submit]:hover {
    background-color: #cc8855;
    color: white;
    border: none;
}

/* table
–––––––––––––––––––––––––––––––––––––––––––––––––– */
table {
  border-collapse: collapse;
  margin-bottom: 1rem;
}

th { 
  background: #eee;
  font-weight: bold; 
}

td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}


/* Result table
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.result table {
  width: 100%;
}



/* SGF player
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.sgf-player {
    width: 70%;
    margin: auto;
}
@media screen and (orientation:portrait) {
    .sgf-player {
		width: 100%;
	}
}



/* News
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.news-title {
}
/* reset link style because title must look like a title*/
.news-title a:link, .news-title a:visited {
    color: #554433;
}

.news-author {
    font-style: italic;
    /*color: #888888;*/
    color: #888888;
}


.paging {
    width: 100%;
    text-align: center;
}

/* Event
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.event-title {
}
/* reset link style because title must look like a title*/
.event-title a:link, .news-title a:visited {
    color: #554433;
}