:root {
  --backgroundcolour:        #FFFFFF; /*white*/
  --foregroundcolour:        #000000;/* pure black */
  --accentuatecolour:        #FF0000;
  --dullifycolour:           #919799; /* ...a shade darker as was perhaps a smidge too light */
  --reportpagecolour:        #F2FEFF; /* duck egg blue */
  --SPSSpagecolour:          #F2FEFF; /* same duck egg blue as report */
  --optionsbackgroundcolour: #FFFFFF; /* white */
}

@font-face {
  font-family: "OktaNeue-UltraLight";
  src: url('webFonts/OktaNeueUltraLight/font.woff2') format('woff2'), url('webFonts/OktaNeueUltraLight/font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/*
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: var(--backgroundcolour);
  color: var(--foregroundcolour);
}
*/
body {
  font-family: "OktaNeue-UltraLight";
  background-color: var(--backgroundcolour);
  color: var(--foregroundcolour);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-weight: normal;
  font-size: 20px;
  -webkit-text-stroke: .77px;
}

/*
h2{
  font-weight: normal;
}
*/

/*
p {
	font-size: 20px;
	font-weight: bold;
}

*/

/*
div{
	border-style:solid;
	border-width:5px;
	border-color:var(--foregroundcolour);
}
*/

/*
div {
    outline: 1px solid red;
}
*/

.story-text{
	font-size: 5vw;
	-webkit-text-stroke:.17vw;
}
.general-text{
	font-size: 5vw;
	-webkit-text-stroke:.17vw;
}
.report-text{
	font-size: 5vw;
	-webkit-text-stroke:.17vw;
}
.collapsible-heading{
	font-size: 7vw;
	-webkit-text-stroke:.23vw;
	font-weight:normal;
}
.collapsible-popup-heading{
	font-size: 6vw;
	-webkit-text-stroke:.2vw;
	font-weight:normal;
}
.collapsible-popup-text{
	font-size: 4.5vw;
	-webkit-text-stroke:.15vw;
}
.collapsible-text{
	font-size: 5.8vw;
	-webkit-text-stroke:.19vw;
}
.collapsible-read-more{
	font-size: 4.4vw;
	-webkit-text-stroke:.15vw;
}
.contact-buttons-text{
	font-size: 3.5vw;
	-webkit-text-stroke:.12vw;
}
@media screen and (min-width: 450px) {
	.story-text{
		font-size: 20px;
		-webkit-text-stroke:.67px;
	}
	.general-text{
		font-size: 20px;
		-webkit-text-stroke:.67px;
	}
	.report-text{
		font-size: 20px;
		-webkit-text-stroke:.67px;
	}
	.collapsible-heading{
		font-size: 1.5em;
		-webkit-text-stroke:.05em;
	}
	.collapsible-popup-heading{
		font-size: 2em;
		-webkit-text-stroke:.067em;
	}
	.collapsible-text{
		font-size: 20px;
		-webkit-text-stroke:.67px;
	}
	.collapsible-popup-text{
		font-size: 20px;
		-webkit-text-stroke:.67px;
	}
	.collapsible-read-more{
		font-size: 15px;
		-webkit-text-stroke:.5px;
	}
	.contact-buttons-text{
		font-size: 15px;
		-webkit-text-stroke:.5px;
	}
}

.fullwidthURLtext{
	font-size:11.5vw;
	-webkit-text-stroke:.38vw;
	text-align:center;
	color:var(--foregroundcolour);
	font-weight:normal;
}
.main-page-title1{
	font-size:8vw;
	-webkit-text-stroke:.27vw;
	margin-top:12vw;
	margin-bottom:0em;
	align-self:center;
	font-weight:normal;
}
.main-page-title2{
	font-size:6.4vw;
	-webkit-text-stroke:.21vw;
	margin-top:0em;
	margin-bottom:0em;
	align-self:center;
	font-weight:normal;
}
.main-page-title3{
	font-size:5.5vw;
	-webkit-text-stroke:.18vw;
	margin-top:0em;
	margin-bottom:0em;
	align-self:center;
	font-weight:normal;
}
.main-page-title4{
	font-size:3.5vw;
	-webkit-text-stroke:.12vw;
	margin-top:0em;
	align-self:center;
	font-weight:normal;
}
.powered-by-statsadvice{
	margin-top:0px;
	align-self:center;
	font-weight:normal;
	font-size:9.8vw;
	line-height:6.2vw;
	-webkit-text-stroke: .34vw;
	margin-bottom:1.56vw;
}

.powered-by{
	font-size:3.4vw;
	-webkit-text-stroke:.12vw;
}

.powered-by-page-text{
	font-size: 4vw;
	#-webkit-text-stroke: ;
}

@media screen and (min-width: 450px) {
	.fullwidthURLtext{
		font-size:10vw;
		-webkit-text-stroke:.33vw;
	}
	.main-page-title1{
		margin-top:.67em;
		font-size:6.8vw;
		-webkit-text-stroke: .23vw;
	}
	.main-page-title2{
		font-size:5.0vw;
		-webkit-text-stroke: .17vw;
	}
	.main-page-title3{
		font-size:4.2vw;
		-webkit-text-stroke: .14vw;
	}
	.main-page-title4{
		font-size:2.7vw;
		-webkit-text-stroke: .09vw;
	}
	.powered-by-statsadvice{
		font-size:8.2vw;
		line-height:5.2vw;
		-webkit-text-stroke: .28vw;
		margin-bottom:1.3vw;
	}
	.powered-by{
		font-size:2.8vw;
		-webkit-text-stroke:.1vw;
	}
	.powered-by-page-text{
		font-size: 20px;
		-webkit-text-stroke: .77px;
	}
	.powered-by-page-title{
		font-size: 40px;
		-webkit-text-stroke: 2px;
		margin-bottom:0px;
	}
}
@media screen and (min-width: 800px) {
	.main-page-title1{
		font-size:54px;
		-webkit-text-stroke:1.8px;
	}
	.main-page-title2{
		font-size:40px;
		-webkit-text-stroke:1.33px;
	}
	.main-page-title3{
		font-size:34px;
		-webkit-text-stroke:1.1px;
	}
	.main-page-title4{
		font-size:22px;
		-webkit-text-stroke:.73px;
	}
	.powered-by-statsadvice{
		font-size:61px;
		line-height:40px;
		-webkit-text-stroke:2.0px;
		margin-bottom:10px;
	}
	.powered-by{
		font-size:20px;
		-webkit-text-stroke:.7px;
	}
}



.microcolumn{
	float: center;
	width: 0%;
}
.mostcolumn{
	width: 100%;
}










.main-responsive-column1{
	display:none;
	flex:0%; 
	flex-direction:column; 
	padding:20px
}
.main-responsive-chooser-sidebar{
	width:100%; 
	padding:0px;
}

.phil-pic  {
	display:block;
	margin-left:auto;
	margin-right:auto;
	margin-top:auto;
	margin-bottom:auto;
	width:50%;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 1%;
  top: 1%;
  width: 98%; /* Full width */
  height: 98%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: var(--reportpagecolour);
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: animatetop;
  animation-duration: 0.4s;
  top: 10%;
}

/* Add Animation */
@keyframes animatetop {
  from {top: -100%; opacity: 0}
  to {top: 10%; opacity: 1}
}

/* The Close Button */
.close {
  color: var(--foregroundcolour);
  float: right;
  font-size: 28px;
  -webkit-text-stroke:.93px;
}

.close:hover,
.close:focus {
  color: var(--accentuatecolour);
  text-shadow: 0 0 2px var(--accentuatecolour), 0 0 2px var(--accentuatecolour); 
  text-decoration: none;
  cursor: pointer;
}

@media screen and (min-width: 600px) {
  .phil-pic{
	 width:250px;
  }
}

@media screen and (min-width: 800px) {  
  .mostcolumn{
	/*float:center;*/
	align-self:center;
	width: 764px;
  }
  
  .main-responsive-chooser-sidebar{
	width:90%; 
	padding:40px;
  }
}
@media screen and (min-width: 1200px) {
  .main-responsive-column1{
	display:block;
	flex:0%; 
	flex-direction:column; 
	padding:20px
  }
  .main-responsive-chooser-sidebar{
	width:478px; 
	padding:40px;
  }
  .things-that-have-to-go-before-main-in-mobile{
	display:none;
  }
  .things-that-have-to-go-after-main-in-mobile{
	display:none;
  }
  .phil-pic{
	  float:right;
	  margin-top:40px;
	  margin-left:30px;
  }
  .modal-content{
	  width: 1000px;
  }
}



/******************************************************************************************************************/
/*      
/*          sidebar clickables
/*      
/******************************************************************************************************************/

.collapsible-container {
	background-color: var(--reportpagecolour);
	border-style: transparent;
	padding: 10px;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  font-family: "OktaNeue-UltraLight";
  background-color: var(--reportpagecolour);
  /*text-shadow: 0 0 1px var(--foregroundcolour), 0 0 1px var(--dullifycolour);*/
  color: var(--dullifycolour);
  cursor: pointer;
  padding-left:10px;
  padding-right:10px;
  padding-top:0px;
  padding-bottom:0px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 19px;
  -webkit-text-stroke:.63px;
}

.collapsible:hover {
  color: var(--foregroundcolour);
  /*text-shadow: 0 0 1px var(--foregroundcolour), 0 0 1px var(--foregroundcolour);*/
}






a:link, a:visited {
	color: var(--foregroundcolour);
	text-decoration: none;
}
a:hover, a:active {
	color: var(--foregroundcolour);
	text-decoration: none;
	text-shadow: 0 0 2px var(--foregroundcolour), 0 0 2px var(--foregroundcolour);
}






.contactButton:link, .contactButton:visited{
	color: var(--backgroundcolour);
	text-decoration: none;
	text-shadow: 0px 0px;
	border:3px; 
	border-style:solid; 
	border-radius:2em; 
	border-color:var(--backgroundcolour); 
	background-color:var(--foregroundcolour);/*#eeeeee;*/
	padding: 1em;
}

.contactButton:hover, .contactButton:active{
	text-shadow: 0 0 .15em var(--backgroundcolour), 0 0 .15em var(--backgroundcolour);
}

.contactButtonInverse:link, .contactButtonInverse:visited{
	color: var(--backgroundcolour);
	text-decoration: none;
	text-shadow: 0px 0px;
	border:3px; 
	border-style:solid; 
	border-radius:2em; 
	border-color:#ffffff; 
	background-color:#ffffff; 
	padding: 1em;
	/*box-shadow: 3px 3px var(--backgroundcolour);*/
}

.contactButtonInverse:hover, .contactButtonInverse:active{
	text-shadow: 0 0 .2em var(--backgroundcolour), 0 0 var(--backgroundcolour);
}

.darklink:link, darklink:visited{
	color: var(--backgroundcolour);
	text-decoration: none;
}
.darklink:hover, .darklink:active{
	color: var(--backgroundcolour);
	text-decoration: none;
	text-shadow: 0 0 2px var(--backgroundcolour), 0 0 2px var(--backgroundcolour);
}

table {
  /*font-family: "OktaNeue-UltraLight";*/
  font-family: 'Courier New', monospace;
  border-collapse: collapse;
  width: 100%;
}

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

tr:nth-child(even) {
  background-color: #dddddd;
}


/* This stuff is for the t-test entry -- we might be able to move this into another file at some point... */

/* Container holding the image and the text */
.container {
  position: relative;
  text-align: center;
  color: var(--foregroundcolour);
}

.example-button{
  font-family: "OktaNeue-UltraLight";
  font-size:20px;
  -webkit-text-stroke:.67px;
  background-color:var(--foregroundcolour);
  color:var(--backgroundcolour);
  border-radius:5px;
  border:8px solid var(--foregroundcolour);
}

.example-button:hover{
	text-shadow: 0 0 6px var(--accentuatecolour), 0 0 6px var(--accentuatecolour);
}

/* Bottom left text */
.SPSS-submit {
  font-family: "OktaNeue-UltraLight";
  position: absolute;
  right: 0px;
  bottom: -72px;
  font-size:40px;
  -webkit-text-stroke:1.33px;
  background-color:var(--foregroundcolour);
  color:var(--backgroundcolour);
  border-radius:5px;
  border:8px solid var(--foregroundcolour);
}
.SPSS-submit:hover{
	text-shadow: 0 0 4px var(--backgroundcolour), 0 0 4px var(--backgroundcolour);
}

.SPSS-field {
	background-color: red;
	color: black;
	text-align: right;
}

/**/
.SPSS-field:focus{
	background-color:var(--foregroundcolour);
}

.SPSS-field:invalid{
	background-color: red;
}

/* This is the ugly bit to get rid of the annoying spinner arrows on the number inputs */
/* PHIL!!  Test this on more browsers?  I guess it's not super important though */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}









/* stuff for t-test output.... */
/* t-test aligned boxes */

.section-heading {
	font-size: 30px;
	-webkit-text-stroke:1px;
}

.SPSS-out {
	display:flex;
	/*align-items:center; USE THIS TO PUT NUMBERS VERTICALLY CENTERED -- BUT SPSS DOES NOT DO THIS */
	justify-content:flex-end;
	background-color: transparent;
	color: grey;
	border:transparent;
	border-style: solid;
	border-width: 2px;
	/*border-color: red;*/
}

.story {
	color: var(--foregroundcolour);
}

.space-under-report-in-page-one {
	padding-bottom:.5vw;
}

#out-report {
	background-color: var(--reportpagecolour);
	border-style: transparent;
	width: 100%;
}

#out-report-text{
	margin:20px;
	color: var(--dullifycolour); /* PHIL!!  review this -- previously was black on first page... */
}

#out-tweak-your-results {
    position: absolute;
    bottom: 0px;
    left:   0px;
    padding-left: 10px;
    padding-right: 10px;
    color: var(--dullifycolour);
	border-left:   5px solid var(--dullifycolour);
	border-right:  5px solid var(--dullifycolour);
	border-top:    5px solid var(--dullifycolour);
    /*width: 38px;
    height: 9px;
    font-size: 10px;*/

}

#out-options {
	position:relative;
	display: block;
	width: 100%;
	/*height:97vh;*/
	background-color: var(--optionsbackgroundcolour);
	color: var(--dullifycolour);
	margin-top: 0px;
	font-size: 15px;
	-webkit-text-stroke:.5px;
	border-left: 5px solid var(--dullifycolour);
	border-right: 5px solid var(--dullifycolour);
	border-bottom: 5px solid var(--dullifycolour);
	border-top: 5px solid var(--dullifycolour);
	box-sizing: border-box;
}


#out-options:before{
    display:block;
    content:'';
    background-color:var(--backgroundcolour);
    width:283px;
    height:5px;
    position:absolute;
	top:-5px
}

.out-options-textinput{
    font-family: "OktaNeue-UltraLight";
    background-color: var(--backgroundcolour);
    color: var(--foregroundcolour);
	font-size:15px;
	-webkit-text-stroke:.5px;
	border: 0px solid var(--optionsbackgroundcolour);	
	padding-left: 10px;
	padding-right: 10px;
	width:50%;
	box-sizing: border-box;
	text-align: right;
	/*border-color: var(--reportpagecolour)*/
}

.out-options-textinput:focus{
	outline-width: 0;
	color: var(--accentuatecolour);
	text-shadow: 0 0 1px var(--accentuatecolour), 0 0 1px var(--accentuatecolour);
}

#out-SPSS-img {
	border-style: transparent;
	background-color: var(--SPSSpagecolour);
}

#storydiv {
	position:relative;
	width: 100%;
	height:361px;
	background-color: var(--backgroundcolour);
	foreground-color: var(--foregroundcolour);
	/*display: block;*/
}

#story-main-text {
	display: flex;
	flex-direction: column;
	height:85vh;
}

.story-link{
	text-decoration-line: underline;
	text-decoration-style: dashed;
	text-decoration-thickness: 1.5px;
	text-underline-position: under;
}

.story-button{
	/*font-family: 'Courier New', monospace;*/
	font-family: "OktaNeue-UltraLight";
	position:absolute;
	color: var(--backgroundcolour);
	background-color: var(--foregroundcolour);
	font-size:30px;
	-webkit-text-stroke:1px;
	border: 5px solid transparent;	
}

.story-option-button{
	/*font-family: 'Courier New', monospace;*/
	font-family: "OktaNeue-UltraLight";
	color: var(--backgroundcolour);
	background-color: var(--foregroundcolour);
	font-size: 20px;
	-webkit-text-stroke:.67px;
	border: 5px solid transparent;	
}

.story-input{
	/*font-family: 'Courier New', monospace;*/
	font-family: "OktaNeue-UltraLight";
	color: var(--foregroundcolour);
	background-color: var(--reportpagecolour);
	font-size:20px;
	-webkit-text-stroke:.67px;
	border: 15px solid white;	
	padding: 10px;
	width:100%;
	box-sizing: border-box;
	/*border-color: var(--reportpagecolour)*/
}

.story-input:focus{
	outline-width: 0;
	color: var(--accentuatecolour);
	text-shadow: 0 0 2px var(--accentuatecolour), 0 0 2px var(--accentuatecolour);
}

.story-button:hover, .story-option-button:hover{
	text-shadow: 0 0 3px var(--accentuatecolour), 0 0 3px var(--accentuatecolour);
}

.story-button-tip:after{
	color: var(--foregroundcolour);
	position: absolute;
	content: attr(tip);/*'Or press "Enter" key';*/
	font-size: 15px;
		-webkit-text-stroke:.5px;
	left: 0px;
	bottom: -50px;
	text-shadow: 0 0 0px var(--backgroundcolour), 0 0 0px var(--backgroundcolour);
	opacity: 0;
}

.story-button-tip:hover:after{
	opacity: 1;
}


.story-button-prev {
	bottom:20px;
	left:0px;
}

.story-button-next {
	bottom:20px;
	right:20px;
}

#story-button-launch {
	position:relative;
	display: block;
	width: 100%;
	/*height:97vh;*/
}

.story-img {
	width : 80%;
	display: block;
	margin: auto;
}

.story-plot-y-axis-text {
  position: absolute;
  bottom: 30px;
  left: 0px;
  width: 62px;
  height: 210px;
  font-size: 16px;
  writing-mode: vertical-rl;
  transform: rotate(-180deg);
  vertical-align: bottom;
  /*background-color:green;*/
  
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.story-plot-x-axis-text {
  /*position: absolute;
  bottom: -20px;
  left: 61px;
  padding-left: 61px;
  padding-right: 61px;*/
  width: 470px;
  /*height: 210px;*/
  text-align:center;
  font-size: 16px;
  /*background-color: red;*/
}


/* make sure dullify is higher than accentuate, so that accentuate will be higher priority in case of conflict!*/
.dullify {
	color: var(--dullifycolour);
}



.mainpage-accentuate {
	/*color: var(--accentuatecolour);*/
	/*text-shadow: 0 0 2px var(--accentuatecolour), 0 0 2px var(--accentuatecolour);*/
}
.mainpage-accentuate0{
}

.mainpage-accentuate1{
	color: var(--accentuatecolour);
	text-shadow: 0 0 1px var(--accentuatecolour), 0 0 0px var(--accentuatecolour);
}

.mainpage-accentuate2{
	color: var(--accentuatecolour);
	text-shadow: 0 0 1px var(--accentuatecolour), 0 0 1px var(--accentuatecolour);
}

.mainpage-accentuate3{
	color: var(--accentuatecolour);
	text-shadow: 0 0 2px var(--accentuatecolour), 0 0 1px var(--accentuatecolour);
}

.mainpage-accentuate4{
	color: var(--accentuatecolour);
	text-shadow: 0 0 2px var(--accentuatecolour), 0 0 2px var(--accentuatecolour);
}

.mainpage-accentuate5{
	color: var(--accentuatecolour);
	text-shadow: 0 0 3px var(--accentuatecolour), 0 0 2px var(--accentuatecolour);
}

.mainpage-accentuate6{
	color: var(--accentuatecolour);
	text-shadow: 0 0 3px var(--accentuatecolour), 0 0 3px var(--accentuatecolour);
}



.accentuate {
	color: var(--accentuatecolour);
	text-shadow: 0 0 5px var(--accentuatecolour), 0 0 5px var(--accentuatecolour);
}

.story-accentuate {
	color: var(--accentuatecolour);
}

.story-accentuate0{
}

.story-accentuate1{
	text-shadow: 0 0 1px var(--accentuatecolour), 0 0 1px var(--accentuatecolour);
}

.story-accentuate2{
	text-shadow: 0 0 2px var(--accentuatecolour), 0 0 2px var(--accentuatecolour);
}

.story-accentuate3{
	text-shadow: 0 0 3px var(--accentuatecolour), 0 0 3px var(--accentuatecolour);
}

.story-accentuate4{
	text-shadow: 0 0 4px var(--accentuatecolour), 0 0 4px var(--accentuatecolour);
}

.story-accentuate5{
	text-shadow: 0 0 5px var(--accentuatecolour), 0 0 5px var(--accentuatecolour);
}

.story-accentuate6{
	text-shadow: 0 0 6px var(--accentuatecolour), 0 0 6px var(--accentuatecolour);
}

.story-accentuate-steady{
	text-shadow: 0 0 2px var(--accentuatecolour), 0 0 2px var(--accentuatecolour);
}

.SPSS-out-highlight {
	color:        var(--accentuatecolour);
	border-color: var(--accentuatecolour);
	background-color: yellow;
}