@font-face {
    font-family: GoudyOldStyleBold;
    src: url(GoudyOldStyleBold.ttf);
}

@font-face {
    font-family: GoudyOldStyle;
    src: url(GoudyOldStyle.ttf);
}

* {
  margin:0;
  padding:0;
}

/* html {
  background: url(images/moire.png) no-repeat center center fixed;
  background-size: cover;
  width: 100%;
  overflow: hidden;
} */

body {
    background-color:#efefef;
    font-family: 'Times New Roman', sans-serif;
    font-size: 24px;
    margin: 0 auto;
    max-width: 800px;
    min-width: 550px;
    min-height: 1000px;
}

a {
  color: #808080;
}

.img-scaled-mobile-full-bleed {
  width: 100%
}

hr {
    margin: 20px 0px 20px 0px;
    border-top: 3px dotted black;
}

h2 {
  font-family: GoudyOldStyleBold, Times New Roman, serif;
  font-size: 26px;
  margin-top: 25px;
  margin-bottom: 10px;
  text-align: center;
  font-weight: bold;
  text-decoration: solid underline black 1px;
}

.slimsans {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.0em;
  line-height: 1.2em;
  color: #000000;
  margin-top: 2px;
  margin-bottom: 2px;
  font-weight: bold;
}

#navbar-mobile {
  width:100%;
  display:inline-flex;
  justify-content:center;
}

#navbar-mobile li {
  display:inline-flex;
}

#navbar-mobile a {
  font-family: GoudyOldStyleBold, Times New Roman, serif;
  line-height:60px;
  font-size:28px;
  padding: 0 30px 0px 20px;
  color: black;
  /* width:240px; */
  letter-spacing:0px;
}

/* main page container -- a single wide column centered on the page */
#container {
  /* position:relative; */
  /* width:800px; */
  /* margin-top: 30px; */
  padding-left: 20px;
  padding-right: 25px;

  /* outline: 2px solid;
  outline-color: red;
  outline-style: dotted; */
}

#container > nav {
  /* margin-left: -20px; /* shift navbar left slightly to align w/ edge  */
  /* margin-right: -20px; */
  width:100%;

  display:inline-flex;
  justify-content:center;
  /* align-items: center; */

  /* display: block; */
  /* margin-left: auto;
  margin-right: auto; */

  /* margin: auto; */
  line-height:60px;
  max-height:60px;
  font-family: GoudyOldStyleBold, Times New Roman, serif;

  /* outline: 2px solid;
  outline-color: green;
  outline-style: dotted;
  outline-offset: -2px; */
}

#marquee_left {
  width:39px;
  background-image: url("http://r-s-g.org/kriegspiel/images/marquee-left.gif");
  background-color:#efefef;

  /* outline: 2px solid;
  outline-color: blue;
  outline-style: dotted;
  outline-offset: -2px; */
}

#marquee_right {
  width:38px;
  background-image: url("http://r-s-g.org/kriegspiel/images/marquee-right.gif");
  background-color:#efefef;

  /* outline: 2px solid;
  outline-color: blue;
  outline-style: dotted;
  outline-offset: -2px; */
}

#navbar-main-logo {
  display:none;

  line-height:60px;
  font-size:28px;
  padding: 0 30px 0px 20px;
  /* color: black; */
  /* width:240px; */
  letter-spacing:0px;
  background-image: url("http://r-s-g.org/kriegspiel/images/marquee-middle.gif");
}

#navbar-icons {
  display:none;
}

#navbar-main-logo a {
  color: black;
}

.content-grid {
  padding: 0px;
  width: 100%;
  /* display:inline-flex; */

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}


.content-grid-cell1x {
  margin: 10px;
  padding: 20px;
  background-color: white;
  width: 100%;
}

.content-grid-cell2x {
  margin: 10px;
  padding: 20px;
  background-color: white;
  width: 100%;

justify-content: center; /* pertinent */

  /* display: inline-flex; */
}

/* main navigation list */
#container > nav > ul {
  margin:0;
  paddding:0;
  list-style-type:none;
  /* display:flex; */
  /* position:absolute; */
  background-image: url("http://r-s-g.org/kriegspiel/images/marquee-middle.gif");


  /* outline: 2px solid;
  outline-color: blue;
  outline-style: dotted;
  outline-offset: -4px; */
}

/* main navigation cells */
#container > nav > ul > li {
  line-height:33px;
  margin:13px 0px 0px 0px;
  padding:0;
  text-align:center;
  display:inline-block;
  letter-spacing:0px;

/*   background-color:green; */
  /*min-width:120px;*/

}

/* nav anchors */
#container > nav > ul > li > a {
    position:relative;
    /*   background-color:red; */
    margin: 0 15px;
    color:black;
    font-size: 22px;
}

#container > nav > ul > li:hover {
  background-color: #dddddd;
}

#container > nav > ul > .dropdown:hover {
  border-bottom:none;
}

#container > nav > ul > .dropdown:hover > .dd_left {
  display:block;
  margin-left:0px;
}

#container > nav > ul > .dropdown:hover > .dd_right {
  display:block;
  margin-left:-40px;
}

.dropdown:hover > a .fa-caret-down {
  /*display:none;*/
  /* color: white; */
}
a {
  text-decoration:none;
}

/* drop down container */
#container > nav > ul > li > div {
  position:absolute;
  padding: 0px;

  /* background-color:black; */
  display:none;
  /* background-color:rgba(0,0,0,0.2); */
  background-color:#dddddd;

  white-space: nowrap;
  /* min-width:300px; */
  text-align:left;
}

/* drop down cells */
#container > nav > ul > li > div > ul {
  margin:0px;
  padding:0px;
  list-style:none;
  font-size: 22px;
  line-height: 40px;
  letter-spacing:0px;
  background-color:#dddddd;
}

/* #u_a_c {
  position:relative;
  width:100%;
}

#up_arrow {
  position:relative;
  width:20px;
  height:20px;
  left:42%;
  top:-10px;
  background-color:aliceblue;
  transform:rotate(45deg);
} */

/* drop down cells -- hover */
#container > nav > ul > li> div > ul > li:hover {
  background-color:white;
}

#container > nav > ul > li > div > ul > li > a {
  padding: 15px 15px;
  color:black;
}


/* Twitter & Envelope (Font Awesome icons) */
.fa-twitter {
  /* padding: 15px 0px 0px 0px; */
  /* font-size: 24px; */
  /* line-height:38px; */
  /* margin:0px 0px 0px 0px; */
  /* margin-top: 7px; */
}

.fa-envelope {
  /* padding: 16px 7px 0px 0px; */
  /* font-size: 22px; */
  /* line-height:38px; */
  /* margin:0px 0px 0px 0px; */
}


.fa-app-store {
  /* padding: 16px 7px 0px 0px; */
  /* font-size: 22px; */
  /* line-height:38px; */
  /* margin:0px 0px 0px 0px; */
}



/* style from old css file */

table {
  /* border: 1px solid black; */
}

td {
	font-family:georgia,"times new roman",times,serif;
	font-size: 16px;
	/* line-height:1.5em; */
}

#tableUnits td {
	background-color: #ffffff;
	border-top: 1px solid black;
}


.arrow-navbar {
  display:flex;
  justify-content: space-between;

  /* outline: 2px solid;
  outline-color: green;
  outline-style: dotted; */
}

.arrow {
  padding-top:14px

  /* outline: 2px solid;
  outline-color: yellow;
  outline-style: dotted;
  outline-offset: -2px; */
}

.arrow a {
  padding-top:24px
}


/* ///////////////////////////////////////////////////////////////////////////
modify things for larger screens (i.e. laptop)
*/
@media only screen and (min-width: 800px) {

  body {
    font-size: 18px;
  }

  hr {
      border-top: 2px dotted black;
  }

  #container {
    /* position:relative; */
    width:100%;
    margin-top: 20px;
  }

  /* turn off top nav bar */
  #navbar-mobile {
    display: none;
  }

  /* turn on elements in main navbar */
  #navbar-main-logo {
    display: block;
  }

  #navbar-icons {
    display:block;
  }

  #nav {
    width:100%;
    /* margin-top: 20px; */
  }

  #container > nav > ul > li > a {
      font-size: 18px;
  }

  #container > nav > ul > li > div > ul {
    font-size: 18px;
  }

  .content-grid-2x {
    flex-direction:row;
  }

  .content-grid-cell2x {
    width: 42.5%;
  }

  .img-scaled-mobile-full-bleed {
    width:auto;
  }

  #container > nav > ul > .dropdown:hover > .dd_right {
    margin-left:0px;
  }
}