@import url("https://fonts.googleapis.com/css?family=Open Sans|Tinos");

body, #contentcolumn .highlightblock p {
  font-family:"Open Sans","Trebuchet MS",Arial,Helvetica,sans-serif;
}
#contentcolumn p, #contentcolumn ul, #contentcolumn .varprompt, #contentcolumn .contactprompt {
  font-family:"Tinos","Times New Roman",Times,serif;
}

body {
  margin:0;
  background:black;
}

/* Common colors */
#header, #leftcolumn, #maincontainer, .navmoredown, .navmenu ul, #footer {
	background:#540430; /* dark burgundy */
}
.navbutton {
	background:#761650; /* lighter burgundy */ 
}
#contentcolumn a, #contentcolumn a:hover, #contentcolumn a:visited, #contentcolumn a:active {
	color:#761650; /* lighter burgundy */ 
}
#tabrow a:hover, .navbutton:hover {
	background:#f6e795; /* gold */
}
#footer a:active, #footer a:hover, .linksblock h3 {
	color:#f6e795; /* gold */
}
#contentcolumn {
	color:black;
	background: #eeeecc; /* cream page */
}
#topsection, #footer {
	color: #ddd; /* almost white text */
}
.navmenu {
	border-bottom:1px solid #320210; /* darkest burgundy line */
}

/* Fixed width container unless media query overrides */
#maincontainer{
    width:960px;
	min-width:320px;
    margin:0 auto; /* center */
    overflow: hidden;
}

/* Menu column */
#leftcolumn{
    padding: 0;
    width: 260px;
    z-index: 2;   
    /* Equal-height column trick */
	margin-bottom: -99999px;
    padding-bottom: 99999px;
}

/* Main content area */
#contentcolumn {
	width:700px;
    float:right;
	font-size:20px;
    z-index: 1;
    /* Equal-height column trick */
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}
#contentcolumn .innertube {
	margin-left:24px;
	margin-right:24px;
	margin-bottom:16px;
}
#contentcolumn h2 {
  font-size:24px;
}
#contentcolumn select, #contentcolumn textarea, #contentcolumn input[type="text"], #contentcolumn input[type="password"], #contentcolumn input[type="submit"] {
  font-size:18px;
}
#contentcolumn li {
	margin-bottom:11px;
}
#contentcolumn ul li a {
	text-decoration:none;
}
#contentcolumn ul li a:hover {
	text-decoration:underline;
}
#contentcolumn .bookmarklink {
	float:right;
	padding:0;
	margin:0;
	font-size:10px;
}

/* Title and hamburger section at top */
#topsection {
  display:table;
  width: 100%;
  height:80px;
  background-image:url('/images/background.jpg');
  background-position:center top;
  background-repeat:no-repeat;
  overflow:hidden;
}
#topsection .innertube {
	display:table-row;
}
#topsection h1 {
  text-align:center;
  margin:0;
  padding-top:32px;
  font-size:20px;
}
#title {
  display:table-cell;
  vertical-align:middle;
  width:100%;
  overflow:hidden;
  padding-left:8px;padding-right:8px;
  background-image:url('/images/title.png');
  background-position:center 2px;
  background-repeat:no-repeat;
  background-size:480px;
}

/* Hamburger menu button */
#toggle-leftcolumn {
	display:none;
	vertical-align:middle;
    background:url(/images/hbshow.png) no-repeat;
    background-size:40px 40px;
    cursor:pointer;
    border:none;
    width:40px;
	height:40px;
	margin-top:20px;
	margin-left:8px;
}
.leftcolumn-active #toggle-leftcolumn{   
    background:url(/images/hbhide.png) no-repeat;
    background-size:40px 40px;
}
#toggle-leftcolumn2 {
	display:none;
	float:left;
    background:url(/images/hbshow.png) no-repeat;
    background-size:20px 20px;
    cursor:pointer;
    border:none;
    width:20px;
	height:20px;
}
.leftcolumn-active #toggle-leftcolumn2{   
    background:url(/images/hbhide.png) no-repeat;
    background-size:20px 20px;
}

/* Signup section */
.highlightblock {
	text-align:center;
	width:auto;
	padding-left:10px;
	padding-right:10px;
	background:#6F9;
	-webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;
	border:1px solid black;
	overflow:hidden;
}
.highlightblock em {
	font-size:14px;line-height:20px;
}
.highlightbox {
	display:inline-block;padding:4px;margin-top:4px;border-style:solid;border-width:2px;border-color:red;
}

textarea{ resize:none; }

p.continued { font-style:italic; font-size:small; color:#888888; }
p.theend { font-weight:bold; }
p.noscript { font-style:italic; color:red; }

.varline { width:100%;margin-top:.5em;margin-bottom:.5em;clear:both; }
.varprompt { width:50%; float:left; margin-bottom:.5em; }
.contactprompt { width:140px; float:left; margin-bottom:.5em; }

a.author { text-decoration:none; }

/* Tabs on interactive-stories.php and customizable-stories.php */
#tabrow ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
#tabrow li {
	float: left;
	border: 1px solid #bbb;
	border-bottom-width: 0;
	height:32px;
	margin: 0;
}
#tabrow a {
	text-decoration: none;
	display: block;
	background: #eee;
	padding: 8px 20px;
	text-align: center;
}
#tabrow a:hover {
	text-decoration: none;
}
#tabrow #selected {
	border-color: black;
}
#tabrow #selected a {
	position: relative;
	top: 1px;
	background: #eeeecc;
	color: black;
	font-weight: bold;
}
#tabcontent {
	border: 1px solid black;
	clear: both;
	padding: 0 1em;
	margin-bottom:20px;
}

.linksblock ul { padding: 0; padding-left:30px; margin:0; list-style-type: none; margin-bottom:15px;}
.linksblock li { font-size:13px;line-height:105%;margin-bottom:7px; }
.linksblock a { color: #cccccc; text-decoration:none;}
.linksblock a:link { color: #cccccc;  }
.linksblock a:active { color: #cccccc;  }
.linksblock a:hover { color: white; text-decoration:underline; }
.linksblock h3 { padding-left:10px;font-size: 15px; margin-bottom:7px; }

/* Expanding navigation */
.navmenu {
    font-size:15px;
    width:100%;
}
.navbutton {
    color:white;
    padding:10px;
    font-weight:bold;
    margin:0px;
    text-decoration:none;
}
.navbutton:hover {
    color:black;
}
.navsection {
    display:block;
    width:auto;
    overflow:hidden;
}
.navmore {
    display:inline-block;
    float:right;
    width:20px;
    text-align:center;
    cursor:pointer;
}
.navmoredown {
    color:white;
}
.navmenu ul {
    display:none;
	color:white;
    margin:0;
    padding:0;
    overflow:hidden;
}
.navmenu ul li {
   list-style:none;
   width:100%;
   display:block;
   padding:.5em;
   padding-left:2em;
}
.navmenu ul li a {
   color:white;
   text-decoration:none;
}
.navmenu ul li a:visited {
    color:white;
}
.navmenu ul li a:hover {
   text-decoration:underline;
}

#vertbanner {
	text-align:center;
}

/* Full-width footer */
#footer {
	clear:both;
	text-align:center;
	padding:1em;
	color: #aaa;
	font-size: 12px;
	background-image:url('/images/background.jpg');
	background-position:center top;
	background-repeat:no-repeat;
	/* Equal-height column trick */
	position:relative;
	z-index:3;
}

#footer a { color: #cccccc; }
#footer a:link { text-decoration: none; }
#footer a:active { text-decoration: none; }
#footer a:hover { text-decoration: underline; }


/* Standard audio player */
#audioplayer{
	position:relative;
	width:100%;
	height: 60px;
	margin: 50px auto auto auto;
	border: 2px solid #761650;
	background-color: #eee;
	border-radius:8px;
}
#pButton{
    height:60px; 
    width:60px;
    border:none;
    background-repeat:no-repeat;
    background-position:center;
    float:left;
    outline:none;
	background-color:transparent;
	cursor:pointer;
}
.play  { background-image: url('/images/play.png'); }
.pause { background-image: url('/images/pause.png'); }
.rewind { background-image: url('/images/rewind.png'); }
#timeline{
	position:absolute;
	left:60px;
	right:10px;
	height: 30px;
	margin-top: 15px;
	float: left;
	border-radius: 15px;
	background: rgba(0,0,0,.3);
	cursor:pointer;
}
#playhead{
	width: 28px;
	height: 28px;
	border-radius: 50%;
	margin-top: 1px;
	background: rgba(0, 0, 0,1);
	cursor:pointer;
}

/* Interactive audio player */
#interactiveAudioControls {
	position:relative;
    background-color:#eee;
    margin:auto;
    width:100%;
	border: 2px solid #761650;
	border-radius:8px;
}
#rButton{
	clear:both;
	display:none;
	position:absolute;
	margin-left:-602px;
	margin-top:50px;
    height:60px; 
    width:60px;
    border:none;
    background-repeat:no-repeat;
    background-position:center;
    outline:none;
	background-color:transparent;
	cursor:pointer;
}
#nowPlaying {
	clear:both;
	margin-left:14px;
	margin-top:10px;
	margin-bottom:15px;
	font-size:16px;
}
.chapterButton {
    font-size:18px;
	margin:10px;
	margin-right:5px;
    height:40px; 
	border:2px solid #761650;
	background-color:#eee;
	border-radius:20px;
	text-align:left;
	cursor:pointer;
}
.nextChapter {
	background-color:#f6e795;
}
#interactiveAudioControls p {
    font-size:10px;
	margin-left:64px;
}
#interactiveAudioControls a {
    font-size:18px;
	margin-left:64px;
}


/* Adjustments for tablet screen sizes */
@media (min-width: 501px) and (max-width: 940px){
	#maincontainer {
		width:100%;
	}
    #toggle-leftcolumn, #toggle-leftcolumn2 {
        display:inline-block;
    }
    #contentcolumn{
        width: 100%;
    }
    .leftcolumn-active #contentcolumn{
        margin-right: -260px;
    }
    #leftcolumn{
        width: 260px;
        margin-left: -100%;
    }
    .leftcolumn-active #leftcolumn{
        margin-left: 0;
    }
	#title {
	  background-size:360px;
	  background-position:center 4px;
	}
	#topsection h1 {
	font-size:17px;
		padding-top:28px;
	}
}

/* Adjustments for mobile screen sizes */
@media (max-width: 500px){
	#maincontainer {
		width:100%;
	}
	#toggle-leftcolumn, #toggle-leftcolumn2 {
        display: inline-block;
    }
    #contentcolumn{
		font-size:16px;
        width: 100%;
    }
	#contentcolumn h2 {
  		font-size:20px;
	}
    .leftcolumn-active #contentcolumn{
        margin-right: -260px;
    }
    #leftcolumn{
        width: 260px;
        margin-left: -100%;
    }
    .leftcolumn-active #leftcolumn{
        margin-left: 0;
    }
	#topsection h1 {
	   padding-top:28px;
	   font-size:13px;
	}
	#title{
		background-size:260px;
		background-position:center 12px;
	}
	.varprompt { width:100%; }
	#sexkeyblock {
		display:none;
/*	    zoom: 0.75;
	    -moz-transform: scale(0.75);*/
	}
}