/*This is pai.css and should be the only one, located in the intropsych folder. Revised 180830*/

.foundcss {
  color: red;
}

.backto {
  text-align: right;
  font-size: 110%;
  padding: 3%;
  margin-bottom: 0;
  }
  
body {
	background-image: url("../weblite.gif");
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

/* c-50 is 80% wide on small viewport. This is approximately centered given the large left margin of default text style in pai.css */

.c-50 {
    margin-right: 14%;
	margin-left: 27%;
	max-width: 100%
    padding: 10px;
    font-size: 90%;
    text-align: center;
}

.c-70 {
    margin-right: 9%;
	margin-left: 22%;
	max-width: 100%
    padding: 10px;
    font-size: 90%;
    text-align: center;
}

.c-90 {
    margin-right: 1%;
	margin-left: 12%;
	max-width: 100%
    padding: 10px;
    font-size: 90%;
    text-align: center;
}

/*For now, same as c-90 in large viewport*/

.c-100 {
  margin-right: 1%;
  margin-left: 12%;
  max-width: 100%
  font-size: 90%;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  margin-right: 2%;
  padding: 1%;
}

.caption {
  clear: both;
  font-size: 80%;
  text-align: center;
  margin-left: 18%;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  padding-right: 1%;
  width: auto;
  background-color: white;
}

.center {
    margin-left: auto;
	margin-right: auto;
/*    width: 50%;*/
	max-width: 100%
    padding: 3px;
}

.clearboth {
  clear: both;
}

.copyright {
  text-align: right;
  font-size: 70%;
  padding: 2%;
}

header {
  text-align: center;
  padding-bottom:3.5%;
}
 
h1, h2, h3, h4, h5, h6 {
  margin-left: 18%;
  text-align: center;
  page-break-after: avoid;
  color: black;
  width: auto;
  font-family: sans-serif;
}

h1 {
  font-size: 200%;
  margin-top: 2%;
}

h2 {
  font-size: 180%;
  font-variant: small-caps;
}

h3 {
  font-size: 150%;
}

h4 {
  font-size: 140%;
}

h5 {
  font-size: 120%;
}

h6 {
  font-size: 110%
}

img {
    max-width: 100%;
    height: auto;
    text-align: center;
}

.indent {
  margin-right: 8%;
  margin-left: 25%;
  text-align: justify;
  font-size: 100%;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  width: auto;
  background-color: white;
}


.indent-center {
  margin-right: 8%;
  margin-left: 25%;
  text-align: center;
  font-size: 100%;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  width: auto;
  background-color: white;
}

.indentdouble {
  margin-right: 10%;
  margin-left: 30%;
  text-align: justify;
  font-size: 100%;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  width: auto;
  background-color: white;
}

.l-20 {
  float: left;
  margin: 0 2% 0 18%;
  width: 20%;
  text-align: center;
  font-size: 75%;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  padding: 1%;
  max-width: 100%;
}

.l-30 {
  float: left;
  margin: 0 2% 0 18%;
  width: 30%;
  text-align: center;
  font-size: 75%;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  padding: 1%;
  max-width: 100%;
}

.l-40 {
  float: left;
  margin: 0 2% 0 18%;
  width: 40%;
  text-align: center;
  font-size: 75%;
  font-family: Arial, Helvetica, sans-serif;
  padding: 1%;
  max-width: 100%;
}

.level2 {
  margin: 0 6% 0 21%;
  padding: 1% 1%;
  text-align: justify;
  background: #DEDEDE;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  width: auto;
  background-clip: border-box;
}

.level2indent { 
  margin: 0 6% 0 21%;
  padding: 1% 6% 1% 10%;
  text-align:justify;
  background:#DEDEDE;
  font-size: 100%;
  font-family: Arial, Helvetica, sans-serif;
  color:black;
  background-clip:border-box;
}

li {
  text-align: left;
  font-size: 100%;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  padding-right: 2%;
  margin-bottom: 2%;
  margin-left: 22%;
  background: white;
}

.li-tight {
  text-align: left;
  font-size: 150%;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  margin-left: 35%;
  padding: 1% 2% 1% 10%;
  background: transparent;
}

/*menu is for top menu items, navbottom is for bottom*/

.menu {
  text-align: left;
  margin-top: 0;
  margin-bottom: 1%;
  margin-left: 2%;
  font-size: 85%;
  width: 15%;
  font-family: Arial, Helvetica, sans-serif;
  font-style: italic;
}

.navbottom {
  font-size: 85%;
  line-height: 100%;
  text-align: right;
  padding-right: 2%;
  }
  
.overview {
  width: auto;
  padding: 1%;
  text-align: justify;
  font-family: Arial, Helvetica, sans-serif;
  background-color: white;
  }
  
.overview-h2 {
  font-size: 140%;
  text-align: center;
  font-variant: small-caps;
  padding: 1%;
  font-family: Arial, Helvetica, sans-serif;
}

.overview-h3 {
  font-size: 120%;
  text-align: center;
  padding-left: 1%;
  font-family: Arial, Helvetica, sans-serif;
  
}

/*p {
 no p! Leave as html default for safety
  }*/
    
.quickcheck {
  clear: both;
  float: left;
  width: 14%;
  font-size: 90%;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  background-color: white;
  margin-left: 1%;
}

.r-10 {
  float: right;
  width: 10%;
}

.r-15 {
  float: right;
  max-width: 15%;
  margin-left: 1%
  }

/*Not perfect. Exp'ing with r-25 now. */ 
  
.r-20 {
  clear: both;
  box-sizing: border-box;
  float: right;
  text-align: center;
  font-size: 75%;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  padding-right: 2%;
  margin-left: 1%;
  width: 20%;
  max-width: 100%;
  background-color: white;
}  

/*Used on James page for example. Works. */

.r-25 {
  box-sizing: border-box;
  float: right;
  max-width: 25%;
  text-align: center;
  font-size: 75%;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  margin: 0 0 0 2%;
  padding-right: 2%;
}

/*Used on Wundt page for example*/

.r-30 {
  box-sizing: border-box;
  float: right;
  text-align: center;
  font-size: 75%;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  padding-right: 2%;
  margin-left: 2%;
  width: 30%;
  max-width: 100%;
  background-color: white;
}  

.r-40 {
  float: right;
  width: 40%;
  text-align: center;
  font-size: 75%;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  margin-right: 2%;
  padding: 1%;
}

.r-50 {
  float: right;
  width: 50%;
  text-align: center;
  font-size: 75%;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  margin-right: 2%;
  padding: 1%;
}
  
.ref {
  padding-left: 5%;
  text-indent: -5%;
  margin-left: 18%;
  text-align: left;
  font-size: 100%;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  padding-right: 2%;
  background-color: white;
}

.searchbottom {
  font-size: 85%;
  padding: 2%;
  }

table {
  margin: 0 0 0 18%;
  max-width: 95%;
  width: auto;
  border-collapse: collapse;
  border-spacing: 0;
  text-align: left;
  background-image: url("../weblite.gif");
}

td {
  vertical-align: top;
  text-align: left;
  border: solid;
  padding: 2%;
}

.td-10 {
  width: 10%;
}

.td-20 {
  width: 20%;
}

.td-30 {
  width: 30%;
}

.td-35 {
  width: 35%;
}

.td-40 {
  width: 40%
}
  
.text {
  margin-left: 18%;
  text-align: justify;
  font-size: 100%;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  padding-right: 2%;
  background-color: white;
}

/*text-no-white is for index pages w larger type. Aligns left so menu items look better when they wrap on small screens*/

.text-no-white {
  margin: 0 0 0 18%;
  text-align: left;
  font-size: 100%;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  padding-right: 2%;
  background: transparent;
}

.writeto {
  text-align: left;
  font-size: 85%;
  padding: 2%;
  }

/* Media Queries 
--------------------------------------------- */

@media only screen and (min-width: 200px) and (max-width: 516px)  {

/*c-50 is 50% wide on large viewport, 80% here*/

.c-50 {
    margin-right: 10%;
	margin-left: 10%;
	max-width: 100%
    padding: 10px;
}

/*Also not really 70% but fine for small viewports*/

.c-70 {
    margin-right: 7%;
	margin-left: 7%;
	max-width: 100%
    padding: 10px;
    text-align: center;
}

.c-90 {
    margin-right: 5%;
	margin-left: 5%;
	max-width: 100%
    padding: 1px;
}

/*Full width to improve legibility in small viewports*/

.c-100 {
    margin: 0;
	max-width: 100%
    padding: 1px;
    font-size: 80%;
    text-align: center;
	}


.caption {
  clear: both;
  font-size: 80%;
  text-align: center;
  margin: 5%;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  padding-right: 1%;
  width: auto;
  background-color: white;
}

.cleartextleft {
  clear: both;
  font-size: 80%;
  text-align: left;
  margin: 5%;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  padding-right: 1%;
  width: auto;
  background-color: white;
}
h1, h2, h3, h4, h5, h6  {
  margin: 10% 3% 3% 3%;
  text-align: center;
  page-break-after: avoid;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
}

/*The rest are unchanged from large viewport I believe*/

/*h1 {
  font-size: 200%;
  }

h2  {
  font-size: 180%;
}

h3  {
  font-size: 160%;
}

h4  {
  font-size: 140%;
}

h5  {
  font-size: 120%;
}
*/

.indent  {
  margin: 5% 9% 5% 12%;
  text-align: left;
  font-size: 100%;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  width: auto;
  background-color: white;
}

.indent-center  {
  margin: 5% 9% 5% 12%;
  text-align: center;
  font-size: 100%;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  width: auto;
  background-color: white;
}

.indentdouble  {
  margin: 5% 14% 5% 16%;
  text-align: left;
  font-size: 100%;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  width: auto;
  background-color: white;
}

.l-20 {
  border: solid;
  float: left;
  margin: 0 2% 0 2%;
  width: 20%;
  text-align: center;
  font-size: 75%;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  padding: 1%;
}

.l-30 {
  border: solid;
  float: left;
  margin: 0 2% 0 2%;
  width: 30%;
  text-align: center;
  font-size: 75%;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  padding: 1%;
}

.l-40 {
  border: solid;
  float: left;
  margin: 0 2% 0 2%;
  width: 40%;
  text-align: center;
  font-size: 75%;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  padding: 1%;
  }

.level2  {
  /*clear: both;*/
  margin: 0 6% 0 6%;
  padding: .5em 1%;
  background: #DEDEDE;
  font-size: 100%;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  text-align: left;
  background-clip: border-box;
}

.level2indent {
  background-clip: border-box;
  margin: 0 6% 0 6%;
  padding: 1% 1% 4% 8%;
  text-align: left;
  background: #DEDEDE;
  font-size: 100%;
  font-family: Arial, Helvetica, sans-serif;
  color: black;

}

li {
  text-align: left;
  font-size: 100%;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  padding-right: 2%;
  margin: 0 5% 4% 5%;
  background: white;
}

.li-tight {
  text-align: left;
  font-size: 90%;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  padding: 0 2% 0 0;
  margin: 0;
  background: transparent;
}

.menu  {
  margin-top: 0;
  margin-bottom: 4%;
  font-size: 70%;
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-style: italic;
}


/*p {
 no p! Leave as html default for safety
  }*/
  
.overview {
  width: auto;
  padding: 1%;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  background-color: white;
  margin: 0 2% 3% 1%;
  }
.quickcheck::before {
  content: "Quickcheck: ";
  display: block;
/*  padding-bottom: 2% 0;*/
}

.quickcheck, p.sidehead, li.sidehead, div.sidehead  {
  clear: both;
  width: 90%;
  margin: 3% 3% 3% 3%;
  font-size: 70%;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: black;
  border-style: solid;
  text-align: center;
  padding: 1% 1%;
}

.ref {
  padding-left: 1em;
  text-indent: -1em;
  margin: 5%;
  text-align: left;
  font-size: 100%;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  padding-right: 2%;
  background-color: white;
}

table {
  margin: 0;
  max-width: 95%;
  width: auto;
  border-collapse: collapse;
  border-spacing: 0;
  text-align: left;
  background-image: url("../weblite.gif");
}

.text {
  margin: 5%;
  text-align: left;
  font-size: 100%;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  padding-right: 1%;
  width: auto;
  background-color: white;
}

.text-no-white {
  margin: 5%;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  padding-right: 2%;
  background: transparent;
  }
  }