/* the title above the link menu */
h1.banner {
 margin: 0px;
 /* background-color: darkgreen; */
 padding-top: 10px;
 padding-bottom: 10px;
 text-align: center;
 color: gray;
 background: darkblue;
 /* color: white; */
}

h1.banner span {
  background: #e3e3e3;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  background: white;
  display: inline-block;
  font-weight: bold;
  line-height: 40px;
  margin-right: 5px;
  text-align: center;
  width: 40px;
}
    
/* maybe colour the circles like this */
h1.banner span:nth-child(4n+0) {
  color: orange;
}
h1.banner span:nth-child(4n+1) {
  color: lightsalmon;
}
h1.banner span:nth-child(4n+2) {
  color: goldenrod;
}
h1.banner span:nth-child(4n+3) {
  color: darkorange;
}
/*
h1.banner span:nth-child(8n+4) {
  background: cornsilk;
}
h1.banner span:nth-child(8n+5) {
  background: lightsalmon;
}
h1.banner span:nth-child(8n+6) {
  background: burlywood;
}
h1.banner span:nth-child(8n+7) {
  background: wheat;
}
*/

/* colour each circle */
h1.banner span:hover {
  background-color: wheat; 
  color: black;
}

/* sort of invisible variables, for debugging */
pre.page-parameters { color: white; }
pre.page-parameters:hover { color: gray; }

/* The top navigation bar for the ofcourse site */
ul.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #B16E4B;  /* browny orange */
  border-radius: 0px 0px 10px 10px;

}

ul.navbar li {
  float: left;
}

ul.navbar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: large;
}

/* Change the link color to #111 (black) on hover */
ul.navbar li a:hover {
  background-color: #111;
}

/* Change the link color to #111 (black) on hover */
ul.navbar li a.active {
  background-color: orange;
  color: black;
}

.maincontent {
  text-align: center;
}

.maincontent blockquote {
  display: inline-block;
  text-align: left;
}
   
.maincontent pre {
  display: inline-block;
  text-align: left;
}
   
/* compact course listings, one per line */
.compactlist {
  text-align: center;
  border-radius: 10px;
}
   
dl.compact {
  display: inline-block; text-align: left;
  border-radius: 20px;
  width: 70%;
  overflow: hidden;
  background: beige;
  padding: 10px; margin: 10px;
}

dl.compact dt {
  float: left; width: 40%;
  /* adjust the width; make sure the total of both is 100% */
  background: beige;
  padding: 0; margin: 0;
  color: #6e6e6e; /* or dimgray */
}

dl.compact dd {
  float: right; width: 60%;
  padding: 0; margin: 0
}

dl.compact dd a {
  display: block;
  color: purple;
  text-decoration: none;
}

/* Change the link color on hover */
dl.compact dd a:hover {
  color: brown;
  text-decoration: underline;
}

/* trying to make the search bar */
.search-container {
  float: right;
}

.navbar input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

.navbar .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.navbar .search-container button:hover {
  background: #ccc;
}

@media screen and (max-width: 400px) {
  .navbar .search-container {
    float: none;
  }
  .navbar a, .navbar input[type=text], .navbar .search-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .navbar input[type=text] {
    border: 1px solid #ccc;
  }
}

div.display-course {
  margin-left: 5%; 
  margin-right: 5%; 
}

div.course-description {
  margin-left: 3%; 
  margin-right: 3%; 
}

/* trying to display course details using flexbox */
dl.course-details {
  display: flex;
  flex-flow: row wrap;
  border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border: solid #6F4242;  /* dark salmon */
  border-width: 1px 1px 0 0;
}
.course-details dt {
  flex-basis: 20%;
  padding: 2px 4px;
  background: #6F4242; 
  text-align: right;
  color: #fff;
}
.course-details dd {
  flex-basis: 70%;
  flex-grow: 1;
  margin: 0;
  padding: 2px 4px;
  border-bottom: 1px solid #6F4242;
}

/* making the newcourse form at /teach display as a table */
div.newCourse { 
  display:table; 
  width: 100%;
  text-align: center;
}

/* center the new course form on the page */
div.newCourse > form { 
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  width: 80%;
}

div.newCourse > form > div.courseField { display:table-row; }
div.newCourse > form > div.courseField > label { 
  display:table-cell; width 40%; text-align: right; 
  margin-right: 15px; margin-bottom: 10px;
}
div.newCourse > form > div.courseField > input { 
  display:table-cell; width 60%;
  margin-left: 15px; margin-bottom: 10px;
}
div.newCourse > form > div.courseField > input.button { 
  float: right;
}

/* where 'markdown' style text is rendered */
div.markedText { 
  /* background-color: cornsilk; */
  margin-left: 4%; 
  margin-right: 4%; 
  border-radius: 5px 5px 5px 5px;
}


figure.left {
  float: left;
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
img.scaled {
  width: 100%;
}
figure.right {
  float: right;
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}