@charset "UTF-8";
/* CSS Document */

@media only screen and (min-device-width: 1000px) {
*{
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #777777;
}

body, html {
  width: 100%;
  height: 100%;
}

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -3em auto;
}

.videowrap {
  position: relative;
  width: 80%;
  height: 300px;
  display: inline-block;
  top: 0;
  left: 15%;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: .8em;
  text-transform: uppercase;
  letter-spacing: 0.4em;


}


.playvideo {
  position: relative;
  width: 40%;
  display: block;
  top: 3%;
  left: 55%;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;

  font-size: .95em;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  cursor: pointer;
  margin: 1.75em 0;
  -webkit-transition: all 1s;

}

.playvideo p {
  text-indent: 6em;
  text-transform: none;
  letter-spacing: 0.1em;
  font-size: .8em;
  margin: .45em 0 0;
}


video {
  height: 400px;
  width: auto;
  display: inline-block;

}

video#fullscreen {

  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;

  /*
  background: url(.lpg) no-repeat;
  background-size: cover;
  */


}

#content {
  position: relative;
  width: 45%;
  text-align: left;
  top: 4%;
  left: 15%;
  z-index: 2;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 0.9em;
  line-height: 3em;
  padding: 0 0 6em 0;

}

#backtocontents {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 1.2em;
  letter-spacing: 0.2em;
  text-transform: uppercase;

  position: absolute;
  left: 65%;
  width: 20%;
  top: 1.6em;
  color: #777777;

}

#prosebio {
  float: right;
  position: relative;
  display: inline-block;
  left: 25%;

  margin: 0% 0 0% -12.5%;
  width: 50%;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 0.9em;
  line-height: 2em;
  font-style: italic;
  color: #DD4D38;
}

#prosebio a, #poembio a {
  color: #620000;
}

#prosebio a:hover, #poembio a:hover {
  color: #AE0000;
}

#poembio {
  float: right;
  position: relative;
  display: inline-block;
  left: 50%;

  margin: 0% 0 0% -12.5%;
  width: 40%;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 0.9em;
  line-height: 2em;
  font-style: italic;
  color: #DD4D38;
}



#content p {
  padding: 1.6em 0 0 0;


}

.tight-gray {
  line-height: 1.6em;
  color: #8A8A8A;
}

#content div#playwrap p {
  text-indent: 4em;
}

#content p.playintro {
  text-indent: 0em;
  padding: 0;
}

.playsetup {

  font-size: 1.2em;
  text-transform: uppercase;
  color: #8B8B8B;
  position: relative;
  left: -2em;
}


span.smallcapsCharacter {
  text-transform: uppercase;
  font-size: 1em;
  font-weight: bold;
}

#content p.stagedirections {
  font-style: italic;
}

#content p.mastheadname {
  padding: 0.4em 0 0 0;
}

#content p.introtext {
  font-size: 0.8em;
  line-height: 2.6em;
  color: #4C4C4C;
}

pre.poem {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 1em;
  line-height: 2.4em;
  padding: 1em 0 2em 0;
}

.heading {
  position: relative;
  top: 0;
  width: 100%;
  background:#FBFBFB;
  box-shadow: 0px 3px 5px #CBCBCB;
}

img.logo-content {
  width: 300px;
  height: auto;
  position: relative;
  left: 65%;
  top: 0px;
  opacity: 1;
  background: #FBFBFB;
}



.title {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 2em;
  position: relative;
  left: 10%;
  width: 90%;
  margin: 2em 0 0 0;
  letter-spacing: 0.2em;
  text-transform: uppercase;

}

.mastheadtitle {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 2em;
  position: relative;
  left: 10%;
  width: 35%;
  display: inline-block;
  margin: 2em 0 0 0;
  letter-spacing: 0.2em;
  text-transform: uppercase;

}

.authorName {
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: 1.25em;
  position: relative;
  left: 10%;
  width: 90%;
}

.subtitle {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 1.6em;
  color: #4D4D4D;
}

.subtitle:hover{
  position: relative;

  cursor: pointer;
  color: #000000;
}

.subtitle span {
  font-weight: 300;
}

.subsection {
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: 1.6em;
  color: #000000;
  padding: 1.1em 0 0 0;
}

.subsection:hover {
  cursor: pointer;
}

.mastheadsection {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 1.6em;
  color: #4D4D4D;
  padding: 1.1em 0 0 0;
  text-decoration: underline;

}

.whatwedo {
  float: right;
  position: relative;
  display: inline-block;
  left: 35%;

  margin: 0% 0 0% -15.5%;
  width: 62%;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 0.9em;
  line-height: 2em;

  color: #000000;
}

p.poemtitle {
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: 1.6em;
  line-height: 0.9em;

}


.firstcharacter {
float: left; color: #4C4C4C; font-size: 4em; line-height: 1.3em; padding-top: 4px; padding-right: 6px; padding-left: 3px; font-family: "Oswald"; }




#morecontent {
  font-family: "Oswald", sans-serif;
  width: 280px;
  text-align: left;
  background: #fff;
  position: fixed;
  z-index: 9999;
  bottom: 10%;
  right: -240px;
  opacity: 0.3;
  font-size: 0.8em;
  padding: 0;
  transition: all .5s;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  color: #fff;
  background: #000;




}

#morecontent:hover {

  right: 20px;
  opacity: 1.0;
  transition: all .5s;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
}




#morecontent ul {
  list-style: none;
  display: inline-block;
}

#morecontent ul li {
  display: block;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-weight: 300;
  font-size: 1em;
  line-height: 1.4em;
  margin: 0.6em 0;

  color: #fff;

}


#morecontent ul li a {
text-decoration: none;
  color: #fff;
}

#morecontent ul li a:hover {
  color: #777777;
}

#moreconimg {
  position: relative;
  display: inline-block;
  vertical-align: top;
  float: none;
  width: 60px;
  height: 260px;
  margin: 0 0.6em 0 0;

}



.artwrap {
  position: relative;
  width: 65%;
  text-align: left;
  top: 4%;
  left: 5%;
  z-index: 200;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 0.8em;

  padding: 0 0 3em 0;
  float: left;


}

.artbio {
float: right;
  position: relative;
  display: inline-block;
  left: 35%;
  z-index: 1;
  margin: 5% 0 0% -70%;
  width: 30%;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 0.9em;
  line-height: 2em;
  font-style: italic;
  color: #DD4D38;
}

img.artseries {
  display: block;
  margin: 0 auto;
  width: auto;
  max-width: 100%;
  max-height: 570px;

}



.art p {
  text-align: center;
  margin: 1em 0 0 0;
  text-indent: 0;

}

#prev, #next {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 0.9em;
  color: #4D4D4D;
  display: inline-block;
  position: relative;
  width: 30%;
  margin: 0 10%;
  text-align: center;
  padding: 3em 0 0 0;
  cursor: pointer;

}

footer, .push {
  height: -3em;
  clear: both;
}

footer {
  position: relative;
  width: 100%;

  z-index: 4;
  border-top: 1px solid #E4E4E4;


}


footer ul {
  list-style: none;
  position: relative;
  text-align: center;

}

footer ul li {
  font-family: "Oswald", sans-serif;
  font-size: 1.2em;
  display: inline-block;
  padding: 0.5em 1.5em 0 1.5em;
}

footer ul li a:hover {
  color: #A2A2A2;
}

#mobilebio, .mobilefrogbio {
  display: none;
}

#mobilecontents {
  display: none;
}

#mobilecontentbutton {
display: none;
}

.videocontainer {
  background: url(../Issue1/Kelner/images/tv.jpg) no-repeat center;
  background-size: contain;
  width: 600px;
  height: 433px;
  display: block;
  margin: 0;


}

.videocontainer video {
  width: 60%;
  height: auto;
  position: relative;
  display: block;
  top: 72px;
  left: 62px;
}

/*DYNAMIC FOOTNOTES*/

sup {
  cursor: pointer;
  color: #777777;
  text-decoration: underline;
}

.footnotecontent {
  position: absolute;
  left: 65%;
  width: 20%;

  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: .7em;
  line-height: 1.7em;
  color: #777777;
  z-index: 1000;
}




.sidebarimg {
  display: inline;
  width: 100%;
  position: relative;
  left: -35%;
  float: left;
  margin: 2em -30% 0 0;
}

.sidebarimgright {
  display: inline;
  width: 80%;
  position: relative;
  right: -45%;
  float: right;
  margin: 0 0 0 -30%;
}

.datetime {

  width: 30%;
  display: inline-block;
  position: absolute;
  left: -30%;
  top: .4em;
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: 2.1em;
  color: #B7B7B7;
  line-height: 1.2em;
}

#poembio em, #prosebio em, #mobilebio em, #artbio em {
  font-style: normal;

}

pre.poem div {
	position: relative;
	width: 35%;
	max-width: 150px;
	display: inline-block;
	vertical-align: top;

}

pre.poem div:last {
	padding: 0 0 0 25px;
}


p#2col-poem1 {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 1em;
  line-height: 2.4em;
  padding: 1em 0 2em 0;
	position: relative;
	width: 50px;
	display: inline-block;
	vertical-align: top;
}

p#2col-poem2 {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 1em;
  line-height: 2.4em;
  padding: 1em 0 2em 0;
	position: relative;
	width: 150px;
	display: inline-block;
	vertical-align: top;
}

}

@media only screen and (max-device-width: 1001px) {

a {
  text-decoration: none;
  color: #777777;
}

#content {
  position: relative;
  width: 85%;
  text-align: left;
  top: 0;
  left: 10%;
  z-index: 2;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 3em;
  line-height: 2.25em;
  padding: 1em 0 3em 0;
  float: none;

}

.datetime {


  display: block;

  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: 2.1em;
  color: #B7B7B7;
  line-height: 1.2em;
}

#content p {
  padding: 1.6em 0 0 0;
}

#prosebio, #poembio, .artbio {
  display: none;
}

#mobilebio {
  float: none;
  position: relative;
  display: block;
  left: 10%;

  margin: 0;
  width: 85%;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 2.25em;
  line-height: 2em;
  font-style: italic;
  color: #DD4D38;
  padding: 0 0 1em 0;

}

#mobilebio a {
  font-size: 1.2em;
}

.mobilefrogbio {
  float: none;
  position: relative;
  display: block;
  left: 5%;

  margin: 0;
  width: 90%;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 1em;
  line-height: 2em;
  font-style: italic;
  color: #DD4D38;
  padding: 0 0 1em 0;

}

.heading {
  position: relative;
  top: 0;
  width: 100%;
  background:#FBFBFB;
  box-shadow: 0px 3px 5px #CBCBCB;
}

img.logo-content {
  width: 70%;
  height: auto;
  position: relative;
  left: 10%;
  top: 0px;
  opacity: 1;
  background: #FBFBFB;
}

#backtocontents {
  display: none;

}

#mobilecontents {
  position: relative;
  width: 95%;
  background: #F5F5F5;
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: 3em;
  padding: 1em 0 1em 5%;
  box-shadow: 0px 3px 5px #CBCBCB;
}

#mobilecontents a {
  padding: 1em 0 1em 5%;

  display: block;
  color: #373737;
  text-decoration: none;
  font-size: .8em;
}

#mobilecontents a span, #mobilecontents span {
  font-weight: 400;
  text-transform: uppercase;
  color: #000000;
}

#mobilecontentbutton {
  width: 10%;
  height: auto;
  display: inline;
  vertical-align: top;
  padding: 5% 0 0 5%;
}



.title {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 3.75em;
  position: relative;
  left: 10%;
  width: 80%;
  margin: 2em 0 0 0;
  letter-spacing: 0.2em;
  text-transform: uppercase;

}

.authorName {
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: 3.25em;
  position: relative;
  left: 10%;
  width: 80%;
}

.firstcharacter {
float: left; color: #4C4C4C; font-size: 3.5em; line-height: 1.3em; padding-top: 4px; padding-right: 6px; padding-left: 3px; font-family: "Oswald"; }

footer {
  position: relative;
  width: 100%;

  z-index: 4;
  border-top: 1px solid #E4E4E4;


}


footer ul {
  list-style: none;
  position: relative;
  text-align: center;

}

footer ul li {
  font-family: "Oswald", sans-serif;
  font-size:2.5em;
  display: block;
  padding: 0.5em 1.5em 0 1.5em;
}

.subtitle {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 1.1em;
  color: #4D4D4D;
}

p.poemtitle {
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: 1.6em;

}

pre.poem {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 1.0em;
  line-height: 2.4em;
  padding: 1em 0 2em 0;
}

.artwrap {
  position: relative;
  width: 85%;
  text-align: left;
  top: 0;
  left: 0;
  margin: 0 auto;
  z-index: 200;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 0.8em;

  padding: 0 0 3em 0;
  float: none;


}

img.artseries {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: none;
  max-height: none;

}

.art p {
  text-align: center;
  margin: 1em 0 0 0;
  text-indent: 0;
  font-size: 1.5em;

}

#prev, #next {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 2em;
  color: #4D4D4D;
  display: inline-block;
  position: relative;
  width: 30%;
  margin: 0 10% 2em 10%;
  text-align: center;
  padding: 3em 0 0 0;
  cursor: pointer;

}

.videocontainer {
  background: url(../Issue1/Kelner/images/tv.jpg) no-repeat center;
  background-size: contain;
  width: 600px;
  height: 433px;
  display: block;
  margin: 2em 0;


}

.videocontainer video {
  width: 60%;
  height: auto;
  position: relative;
  display: block;
  top: 72px;
  left: 62px;
}

.mastheadtitle {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 3.5em;
  position: relative;
  left: 10%;
  width: 80%;
  display: inline-block;
  margin: 2em 0 0 0;
  letter-spacing: 0.2em;
  text-transform: uppercase;

}

.mastheadsection {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 0.9em;
  color: #4D4D4D;
  padding: 1.1em 0 0 0;
  text-decoration: underline;

}

#content p.mastheadname {
  padding: 0;
}

#morecontent {
  display: none;
}

pre.poem div {
	position: relative;
	width: 360px;
	display: inline-block;
	vertical-align: top;

}

}