@charset "utf-8";

* {
  box-sizing: border-box;
}

body {
	background-color: #040428;
	margin: 0px auto;
	text-align: center;
	padding: 0px;
	background-image: url(images/layout/bodyback.jpg);
	background-repeat: repeat-x;
	background-position: top center;
}

#header {
  position: relative;
  background: url(images/layout/header-back.jpg) no-repeat right top;
  background-size: 150%;
  margin: 0 auto;
	text-align: center;
	width: 100%;
	max-width: 844px;
	padding-bottom: 47.3%;
	border-top: 1px solid #E7EDF0;
	border-bottom: 1px solid #FFFFFF;
	box-sizing: content-box;
}

#header a, #web, #header-dim {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
  
#web {  
  background: url(images/layout/web2.png) no-repeat right top;
  background-size: 150%;
  box-sizing: content-box;
}

#header-pic {
  position: absolute;
  right: 4.8%;
  top: -8.8%;
  width: 25%;
  max-width: 138px;
  height: auto;
  border: 1px solid #FFFFFF;
  box-sizing: content-box;
}

#header-dim {
  background: rgba(209,228,239,0.2);
  background: -webkit-linear-gradient(155deg,#FFFFFF,#6FB5D2,#002C7C);
  background: -moz-linear-gradient(155deg,#FFFFFF,#6FB5D2,#002C7C);
  background: -o-linear-gradient(155deg,#FFFFFF,#6FB5D2,#002C7C);
  background: linear-gradient(155deg,#FFFFFF,#6FB5D2,#002C7C);
  opacity: 0;
  -o-transition: opacity .8s;
  -ms-transition: opacity .8s;
  -moz-transition: opacity .8s;
  -webkit-transition: opacity .8s;
  transition: opacity .8s;
}

#header:hover #header-dim {
  opacity: 0.6;
}

#wrapper {
  background-image: url(images/layout/wrapperback.jpg);
  background-repeat: no-repeat;
  background-position: 78% top;
  background-size: 189%;
	width: 100%;
	min-width: 320px;
	height: auto;
	margin: 0 auto;
	padding: 8.2% 0px 40px 0px;
	text-align: center;
	position: relative;
	border: none;
}

#center {
  position: relative;
  width: 100%;
  max-width: 844px;
  height: auto;
  background-color: #D5E7F1;
  margin: 0px auto;
  text-align: center;
  padding: 0px;
}

#nav {
  float: left;
  padding: 0px;
  margin: 0px;
  width: 205px;
  height: 100%;
}

#main {
  float: left;
  background-image: url(images/layout/maintop.jpg);
  background-position: top;
  background-repeat: repeat-x;
  background-color: #F5F8F9;
  width: 100%;
  height: auto;
  text-align:left;
  padding: 0;
  position: relative;
  margin: 0;
  z-index: 10;
}

#mainin {
  float: left;
  background-image: url(images/layout/mainend.jpg);
  background-repeat: repeat-x;
  background-position: bottom;
  width: 100%;
  height: auto;
  min-height: calc(100vh - 50vw - 130px);
  padding: 0 10px 40px 10px;
  overflow: hidden;
}

#maintitle {
  width: 100%;
  height: auto;
  text-align:left;
  padding: 0px;
  position: relative;
  margin: 0px 0px 20px 0px;
}

div.section {
  display: block;
  clear: both;
  margin: 16px 0;
}

div.two-col > div {
  width: 100%;
  margin-top: 20px;
}

div.two-col .frame, div.two-col .noticebutton {
  width: 100%;
  margin: 10px 0 20px;
}

div.intro > div {
	padding: 10px;
  background: #fff;
	margin: 10px 10px 0 10px;
  border: 1px solid #B7D4F6;
}

div.intro > div:first-child {
	padding: 20px 10px;
}

div.intro p {
	max-width: 658px;
	margin: 0 auto;
	display: block;
}

#main div.intro img {
	display: block;
	margin: 0 auto;
}

div.intro > .framed {
	padding: 2%;
	background: #344a7d;
	border: none;
}

div.intro > .framed img {
	background: #fff;
	padding: 4%;
}

.cover-tiles {
  width: 100%; 
}

.cover-tiles > div {
  position: relative;
  width: 100%;
  padding: 30px 10px 0 10px;
  -o-transition: padding .5s;
  -ms-transition: padding .5s;
  -moz-transition: padding .5s;
  -webkit-transition: padding .5s;
  transition: padding .5s;
}

.cover-tiles > div:hover {
  padding: 26px 10px 4px 10px;
}

.cover-tiles > div > a, .cover-tiles > div > a > img {
  position: relative;
  display: block;
  width: 100%;
  max-width: 179px;
  margin: 0 auto;
}

.cover-tiles > div > a:after {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  opacity: 0;
  -moz-box-shadow: -4px 6px 8px 0px rgba(0,0,0,.5);
  -webkit-box-shadow: -4px 6px 8px 0px rgba(0,0,0,.5);
  box-shadow: -4px 6px 8px 0px rgba(0,0,0,.5);
  -o-transition: top .5s, opacity .5s;
  -ms-transition: top .5s, opacity .5s;
  -moz-transition: top .5s, opacity .5s;
  -webkit-transition: top .5s, opacity .5s;
  transition: top .5s, opacity .5s;
}

.cover-tiles > div:hover > a:after {
  opacity: 1;
}

#footer {
  width: 100%;
  max-width: 842px;
  padding-bottom: 10px;
  text-align: center;
  clear: both;
  margin: 0px auto;
  background: #b6d4e4;
  border-top: 1px solid #fff;
}

#bottom {
  width: 100%;
  max-width: 842px;
  height: 1px;
  background: #fff;
  padding: 0;
  margin: 0;
  clear: both;
}

/* Reviews page index styles */

#mainin.reviewsmain {
  padding: 0 0 40px 0;
}

#mainin.reviewsmain .maintext {
  padding:  0 14px;
}

#reviewindex {
  position: relative;
  width: 200%;
  padding: 0px 0px 16px 0px;
  float: left;
  -o-transition: margin-left .5s;
  -ms-transition: margin-left .5s;
  -moz-transition: margin-left .5s;
  -webkit-transition: margin-left .5s;
  transition: margin-left .5s;
}

#reviewindex.slide {
  margin-left: -100%;
}

#bytitle {
  float: left;
  width: 50%;
  padding: 0 0 0 14px;
  margin: 0px;
  z-index: 10;
}

#byauthor {
  display: block;
  float: left;
  width: 50%;
  padding: 0 0 0 14px;
  margin: 0;
  z-index: 10;
}

#reviewindexhead {
  position: relative;
  width: 100%;
  height: 40px;
}

.fixed #reviewindexhead {
  position: fixed;
  width: 200%;
  min-width: 640px;
  z-index: 20;
  top: 0;
  background: #fff;
  -moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,.5);
  -webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,.5);
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,.5);
}

.slide-trigger {
  position: relative;
  float: left;
  display: block;
  line-height: 20px;
  font-size: 20px;
  font-weight: bold;
  width: 50%;
  padding: 10px 0 0 14px;
}

.slide-trigger span {
  position: relative;
  margin-right: 40px;
  float: right;
}

.slide-trigger span:before {
  position: absolute;
  content: " ";
  top: 2px;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  cursor: pointer;
  -o-transition: border .5s;
  -ms-transition: border .5s;
  -moz-transition: border .5s;
  -webkit-transition: border .5s;
  transition: border .5s;
}

.slide-trigger span {
  font-size: 16px;
  font-weight: normal;
  color: #45A5CC;
  cursor: pointer;
  -o-transition: color .5s;
  -ms-transition: color .5s;
  -moz-transition: color .5s;
  -webkit-transition: color .5s;
  transition: color .5s;
}

.slide-trigger span:hover {
  color: #81C8E5;
}

.slide-trigger.title span:before {
  left: -14px;
  border-left: 10px solid #45A5CC;
}

.slide-trigger.title span:hover:before {
  border-left: 10px solid #81C8E5;
}

.slide-trigger.author span:before {
  left: -22px;
  border-right: 10px solid #45A5CC;
}

.slide-trigger.author span:hover:before {
  border-right: 10px solid #81C8E5;
}

ul.reviews li {
  padding: 4px 0 0 12px;
  text-indent: -12px;
}

#gallery {
  position: relative;
  clear: both;
  padding: 10px 0;
  margin: 0 auto;
  text-align: center;
  width: 600px;
  max-width: 100%;
}

#booklinks {
  position: relative;
  float: left;
  text-align: left;
  width: 100%;
  padding: 4px 0 20px 0;
}

.rightlinks, .frame2 .booklinks, .frame2 h4 {
  float: right;
  position: relative;
  background: #fff;
  padding: 4px 8px 6px 8px;
  -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,.2);
  -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,.2);
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,.2);
}

.rightlinks + .rightlinks {
  clear: both;
  margin-top: 6px;
}

div.maintext {
  float: left;
  width: 100%;
  height: auto; 
  margin: 0px;
  padding: 0 0 32px 0;
}

div.maintextshort {
  float: left;
  width: 100%;
  height: 514px; 
  margin: 20px 0px 0px 0px;
  padding: 0px 10px 32px 30px;
}

div.book {
  float: left;
  width: 100%;
  border: none;
  margin: 0;
  padding: 0;
}

div.cover {
  width: 179px;
  height: auto; 
  padding: 0px;
  margin: 0 auto;
}

div.coverprog {
  background-color: white;
  width: 179px;
  height: auto; 
  padding: 20px 10px;
  margin: 0 auto;
}

div.coverprog h3 {
  text-align: center;
}


div.booktext {
  width: auto;
  height: auto; 
  padding: 14px;
  margin: 0 auto;
}

div.reviewbar {
  width: 100%;
  height: auto;
  background-color: #E7F0F5;
  padding-left: 10px;
  margin: 0px;
}

div.excerpt {
  padding: 20px 10px 10px 40px;
}

div.excerpt p {
  line-height: 17px;
  font-style: italic;
  padding: 4px 10px 4px 0px;
}

div.news {
  background-color: white;
  border: 1px solid #8E9EBF;
  padding: 8px 20px 20px 20px;
  margin-right: 20px;
  width: 100%;
}

div.news > div {
  width: 100%;
  padding: 10px 0 5px 0;
}

div.blueback {
  background-color: #E7F0F5;
  padding: 10px 30px 10px 30px;
  margin: 14px 0 10px 0;
}

div.center {
  text-align: center;
  margin: 0px auto;
  padding: 20px 0 0 0;
}

div.box {
  position: relative;
  clear: both;
  float: left;
  width: 100%;
  margin: 10px 0 0 0;
  padding: 0;
  background: #E7F0F5;
}

div.halfbox {
  padding: 0 15px 20px 15px;
}

div.halfbox + div.halfbox {
  border-top: 10px solid #f5f8f9;
}
  
div.frame2 {
  float: none;
  padding: 0;
  margin: 0 auto 14px auto;
  width: auto;
  text-align: center;
} 

.booktext div.frame2 {
	margin-left: 0;
}	

.booktext div.frame2 h4 {
	display: block;
}

div.series {
  position: relative;
  float: left;
  width: auto;
  height: auto;
  padding: 0;
  overflow: hidden;
}

div.seriesback {
  background: url(images/layout/bluline.gif) repeat-y left top;
  padding: 0;
  margin: 0;
  float: left;
  position: relative;
}

div.serclear {
  width: 86px;
  height: 2px;
  margin: 0 0 40px 0;
  background: url(images/layout/bluline.gif) repeat-x left top;
  position: relative;
  clear: both;
}

div.servline {
  background: url(images/layout/bluline.gif) repeat-y left top;
  float: left;
  width: 2px;
  height: 14px;
  margin: 14px 0 0 0;
}

div.noticebutton, a.noticebutton, div.noticebox, .button {
  width: 380px;
  max-width: 100%;
  height: auto;
  background-image: url(images/layout/buttonback.jpg);
  background-repeat: repeat-x;
  background-size: auto 150%;
  background-position: center bottom;
  border: 1px solid white;
  -o-transition: background-position 1s;
  -ms-transition: background-position 1s;
  -moz-transition: background-position 1s;
  -webkit-transition: background-position 1s;
  transition: background-position 1s;
}

div.noticebox {
	background: white;
	text-align: center;
	padding: 6px 10px 10px 10px;
	margin: 20px 0;
	-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,.2);
  -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,.2);
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,.2);
}

.button {
	display: inline-block;
	width: auto;
	font-family: "Lato", sans-serif; 
	padding: 6px 10px;
	margin: 10px auto;
}

div.noticebutton:hover, a.noticebutton:hover, .button:hover {
  background-position: center top;
  cursor: pointer;
}

a.noticebutton.smallnotice {
  width: auto;
  padding: 6px 8px;
  font-size: 14px;
  text-align: center;
}

#disabilities, #research {
  float: none;
  width: 292px;
  max-width: 100%;
  margin: 0 auto;
}

#research {
  margin-top: 20px;
}

.tiles div.noticebutton {
  border: none;
  width: 282px;
  height: 40px;
} 

.tiles > div {
  position: relative;
  background: #fff;
  border: 1px solid #B7D4F6;
  padding: 0;
  width: 284px;
  height: 274px;
  float: left;
  margin: 5px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.tiles > div:first-child {

}

.tiles img {
  display: block;
}

.l {
  margin: 14px 0px 10px 30px;
}

.covimg {
  margin: 20px 0px 10px 0;
}

.

.r {
  margin: 16px 90px 0px 30px;
  float: right;
}

img.right {
  float: right;
  border: 0px;
  margin: 10px 20px 10px 30px;
}


  
p {
  font-family: "Lato", sans-serif;
  font-size: 14px; 
  margin: 0px 0px 0px 0px; 
  line-height: 16px;
  letter-spacing: 0px;
  word-spacing: 0px;
  color: #465F92;
  padding: 6px 0px;
}

p.noto {
  font-family: "Noto Serif", serif;
  font-style: italic;
  line-height: 20px;
}

#header p {
  position: absolute;
  margin-top: 2.5%;
  left: 2.7%;
  font-family: Rosarivo, serif;
  font-size: 40px;
  line-height: 44px;
  color: #3071BC;
  width: 170px;
  padding: 0;
  text-align: left;
  background: -webkit-linear-gradient(0deg,#45A5CC,#3071BC);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

p.email {
  padding: 20px;
  font-size: 18px;
  line-height: 22px;  
}

p.frame, div.frame {
  padding: 20px 30px 20px 30px;
  font-size: 14px;
  line-height: 16px;
  margin: 0px 0px 20px 0px;
  border: 1px solid #B7D4F6;
  background-color: #FAFDFE;
}

div.frame {
  margin-top: 20px;
}

span.largetab {
  padding-left: 116px;
}

p.special-notice {
  font-family: "Noto Serif", serif;
  font-style: italic;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
}

p.poem {
  text-align: center;
  margin: 0px auto;
  padding: 12px 0 20px 0;
}

p.quotcred {
  padding: 5px 20px 8px 18px;
}

p.intro {
  padding: 10px;
  background: #fff;
  margin-top: 20px;
}

p.intro + p.intro {
  padding-top: 0;
  margin: 0;
}

p.intro + p:not(.intro) {
  margin-top: 14px;
}

p.booklist {
  font-size: 14px;
  line-height: 20px;
}

p.navcontact {
  font-family: "Noto Serif", serif;
  font-size: 12px;
  line-height: 14px;
  word-spacing: 0px;
  font-style: italic;
  text-align: center;
  color: #0F6F96;
  margin: 441px 3px 0px auto;
  padding: 0px;
}

p.copyright {
  font-family: "Noto Serif", serif;
  font-size: 11px;
  line-height: 13px;
  font-style: italic;
  color: #7D8DB0;
}

p.tab {
  padding-left: 30px;
  padding-top: 4px;
}

p.smalltab {
  padding-left: 10px;
  padding-top: 8px;
}


p.footnote {
  font-size: 10px;
}

p.reviewend {
  padding-bottom: 40px;
}

.news p {
  text-align: justify;
  font-family: "Noto Serif", serif;
  padding: 6px 0px 0px 0px;
}

p.topspace {
  padding-top: 24px;
}

.negindent {
  text-indent: -14px;
  padding-left: 14px;
}

p.indent {
  text-indent: 14px;
  }

p.novel {
  text-indent: -20px;
  padding-left: 20px;
  font-size: 14px;
  line-height: 16px;
  padding-top: 30px;
}

p.caption {
  padding: 6px 0px 10px 0px;
}

p.center, .center {
  text-align: center;
}

.tiles p {
  font-size: 13px;
  line-height: 15px;
  font-style: italic;
  padding: 14px 14px 0 14px;
}

.tiles a {
  font-weight: bold;
}


div.noticebutton p {
  color: white;
  font-size: 24px;
  line-height: 26px;
  text-align: center;
  padding: 10px;
}

.tiles div.noticebutton p {
  font-size: 18px;
  line-height: 40px;
  margin: 0;
}

table.reviewtable {
  width: 98%;
  font-family: Lato, sans-serif;
  font-size: 12px; 
  line-height: 14px;
  letter-spacing: 0px;
  word-spacing: -1px;
  color: #465F92;
  padding: 12px 20px 10px 10px;
}

table.reviewtable td {
  float: top left;
  padding: 6px;
  vertical-align: top;
  text-align: left;
  background-color: #E9F3F8;
}

table.reviewtable td.leftcol {
  background-color: #D5E7F1;
}

table.halfbox {
  float: left;
  width: 546px;
  margin: 10px 0px 0px 0px;
  border: none;
  }
  
table.halfbox td { 
  width: 263px;
  padding-left: 20px;
  background-color: #E7F0F5;
  }

ul.reviews {
  list-style: none;
  font-family: Lato, sans-serif;
  color: #465F92;
  font-size: 13px;
  line-height: 16px;
  padding: 16px 0px 12px 0px;
  margin: 0px;
}

ul.booklist {
  font-family: Lato, sans-serif;
  color: #465F92;
  font-size: 14px;
  line-height: 20px;
  list-style: none;
  text-indent: -14px;
  padding-left: 14px;
}

li.tight {
  word-spacing: 0px;
}

ol {
  font-family: Lato, sans-serif;
  color: #465F92;
  font-size: 13px;
  line-height: 16px;
  padding: 12px 20px 12px 30px;
  margin: 0px;
}

ol li {
  padding: 6px 0px 6px 0px;
}

ol.numbered {
  list-style: decimal;
} 

ol.alphasmall {
  list-style: lower-alpha;
} 

ul.disc {
  list-style: disc;
  font-family: Lato, sans-serif;
  color: #465F92;
  font-size: 13px;
  line-height: 16px;
  padding: 0px 20px 12px 30px;
  margin: 0px;
} 

ul.disc li {
    padding: 6px 0px 6px 0px;
}

h5 + ul.disc {
  margin-top: 10px;
}

ul.disc2 {
  list-style: disc;
  font-family: Lato, sans-serif;
  color: #465F92;
  font-size: 13px;
  font-style: italic;
  line-height: 16px;
  padding: 0px 20px 12px 30px;
  margin: 0px;
} 

ul.disc2 li {
    padding: 6px 0px 6px 0px;
}

ul.bold {
  list-style: none;
  font-family: Lato, sans-serif;
  color: #465F92;
  font-size: 13px;
  font-weight: bold;
  line-height: 16px;
  padding: 12px 20px 12px 30px;
  margin: 0px;
} 

ul.bold li {
  padding: 0px 0px 10px 0px;
}

ul.nobullet {
  list-style: none;
  font-family: Lato, sans-serif;
  color: #465F92;
  font-size: 13px;
  font-weight: normal;
  line-height: 16px;
  padding: 12px 20px 12px 30px;
  margin: 0px;
} 

ul.nobullet li {
  padding: 0;
}

ul.lipad li {
  text-indent: -14px;
  padding: 5px 0 0 14px;
}


ul.circle {
  list-style: circle;
  font-family: Lato, sans-serif;
  color: #465F92;
  font-size: 13px;
  font-style: normal;
  line-height: 16px;
  padding: 0px 20px 0px 30px;
  margin: 0px;
} 

ol.alpha {
  list-style: lower-alpha;
  font-family: Lato, sans-serif;
  color: #465F92;
  font-size: 13px;
  line-height: 16px;
  padding: 0px 20px 0px 30px;
  margin: 0px;
} 

ol.alpha li {
  padding: 6px 0px 6px 0px;
}

ul.booklinks {
  padding-left: 0;
  margin: 10px 0;
}

.rightlinks ul.booklinks, .frame2 ul.booklinks {
  margin: 0;
}

.frame2 ul.booklinks, .frame2 h4 {
  float: none;
  display: inline-block;
}

ul.booklinks li, p.booklinks {
  position: relative;
  font-family: Lato, sans-serif;
  font-size: 18px;
  list-style: none;
  padding-left: 16px; 
}

.rightlinks .booklinks li, .frame2 .booklinks li {
  font-size: 16px;
  display: block;
}

.frame2 .booklinks li {
  display: inline-block;
  margin-right: 10px;
}

.frame2 h4.pointer {
  padding-left: 22px;
}

ul ol, ol ol, ul ul, ol ul {
  padding-bottom: 0 !important;
}

p.booklinks {
  padding: 0;
  float: left;
  font-size: 20px;
  line-height: 24px;
}

ul.booklinks li {
  display: inline-block;
}

.booktext ul.booklinks li {
  display: block;
}

ul.booklinks li:before, .pointer:before {
  position: absolute;
  content: " ";
  margin-left: -12px;
  top: 6px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-left: 6px solid #0F6F96;
  -o-transition: border .5s;
  -ms-transition: border .5s;
  -moz-transition: border .5s;
  -webkit-transition: border .5s;
  transition: border .5s;
}

ul.booklinks li:hover:before {
  border-left: 6px solid #81C8E5;
}

.rightlinks ul.booklinks li:before, .pointer:before, .frame2 ul.booklinks li:before {
  border: 5px solid transparent;
  border-left: 5px solid #45a5cc;
}

.rightlinks ul.booklinks li:hover:before, .pointer:hover:before, .frame2 ul.booklinks li:hover:before {
  border-left: 5px solid #81C8E5;
}

.pointer {
  position: relative;
  padding: 0 0 0 14px;
  margin: 5px 0;
}

.frame2 .pointer {
  margin: 0;
}

.pointer:before {
  top: 6px;
}

.frame2 .pointer:before {
  top: 10px;
}

h1 {
  font-family: "Noto Serif", serif;
  font-size: 30px;
  line-height: 34px;
  font-style: italic;
  font-weight: normal;
  color: #B7D4F6;
  margin: 17px 0px 2px 0;
  padding: 0px;
  text-align: center;
}

.condensed {
  letter-spacing: -2px;
}

.condensedplus {
  letter-spacing: -3px;
  word-spacing: -5px;
}

.condensedplus2 {
  letter-spacing: -3px;
  word-spacing: -3px;
}

.condensedplus3 {
  letter-spacing: -3px;
  word-spacing: -2px;
}

span.half {
  font-size: 60%;
  line-height: 60%;
  word-spacing: 4px;
}

span.nbsp {
  padding-left: 20px;
}

.activity-form {
  display: block; 
  width: 100%;
  max-width: 500px; 
  margin: 30px auto;
}

.activity-form > * {
  display: block;
  max-width: 100%;
}

.activity-form span {
  display: inline-block;
  line-height: 1.2;
  overflow-x: hidden;
}

span.empty1 {
  max-width: 90%;
}

span.empty2 {
  max-width: 40%;
}

span.empty3 {
  max-width: 30%;
}

h2 {
  font-family: "Noto Serif", serif;
  font-size: 24px;
  line-height: 26px;
  font-style: italic;
  font-weight: normal;
  color: #465F92;
  margin: 0px 0px 4px 0px;
  padding: 0px;
}

h2.condensed {
  word-spacing: 0px;
  letter-spacing: -1px;
}

.booktext h2 {
  text-align: center;
}


h3 {
  font-family: "Noto Serif", serif;
  font-size: 22px;
  font-style: italic;
  font-weight: normal;
  line-height: 28px;
  color: #8E9EBF;
  margin: 0px;
  padding: 0px;
}

h3.news {
  font-style: normal;
  border: 1px solid #8E9EBF;
  background-color: #E9F3F8;
  text-align: center;
  margin: 0px auto;
}

.tiles h3 {
  color: #fff;
  background: #5296CA;
  font-size: 16px;
  line-height: 20px;
  font-style: normal;
  padding: 10px 14px;
}

.tiles div:nth-child(4n+2) h3, .tiles div:nth-child(4n+3) h3 {
  background: #58B0C9;
}

#disabilities.tiles div:nth-child(4n+2) h3, #disabilities.tiles div:nth-child(4n+3) h3 {
  background: #7192DE;
}

.series h3 {
  position: relative;
  display: table;
  margin: 0 auto;
  padding: 0 6px;
}

.series h3:before {
  content: " ";
  display: block;
  position: absolute;
  width: 500px;
  height: 2px;
  background: url(images/layout/bluline.gif);
  left: -500px;
  top: 50%;
} 

h4 {
  font-family: Lato, sans-serif;
  font-size: 18px;
  font-style: italic;
  font-weight: normal;
  color: #465F92;
  margin: 0px;
  padding: 12px 20px 0px 0px;
}

h4.belowspace {
  margin-bottom: 10px;
}

h4.disa {
  margin-bottom: 350px;
  margin-top: 40px;
}

h4.archrev {
  font-size: 15px;
  padding: 20px 20px 0px 30px;
  text-align: center;
}

h4.advis {
  margin-top: 10px;
  font-size: 18px;
  font-style: normal;
}

span.advismime {
  font-size: 18px;
  line-height: 18px;
}

span.condensed {
  word-spacing: -1px;
  letter-spacing: -1px;
}

span.condensedw {
  word-spacing: -2px;
}


h5 {
  font-family: Lato, sans-serif;
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
  color: #465F92;
  margin: 0;
  padding: 10px 20px 0 0;
}

h5.guide {
  font-weight: bold;
  padding-top: 10px;
  padding-bottom: 0;
}

.inline-heading {
  display: inline;
  font-size: 16px;
  line-height: 18px;
  font-weight: bold;
  color: #465F92;
  margin: 0;
  padding: 12px 6px 0px 0px;
}

.inline-heading + * {
  display: inline;
  line-height: 18px;
}

a.linkspace {
  padding-left: 25px;
}

a.goodreads img {
  height: 58px;
  width: 210px;
  margin-left: 14px;
  margin-bottom: -16px;
  border-radius: 8px;
  -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,.2);
  -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,.2);
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,.2);
  overflow: hidden;
}

a, a.noticebutton, a.button {
  -o-transition: color .5s;
  -ms-transition: color .5s;
  -moz-transition: color .5s;
  -webkit-transition: color .5s;
  transition: color .5s;
}

a.smallinkspace {
  padding-left: 11px;
}

a.biglinkspace {
  padding-left: 80px;
}

a:link i {
  color: #0F6F96;
  text-decoration: none;
}


a:visited i {
	color:#0F6F96;
	text-decoration: none;
}

a:hover i {
	color:#3394BB;
	text-decoration: none;
}

a:link {
	color:#45A5CC;
	text-decoration: none;
}

a:visited {
	color:#45A5CC;
	text-decoration: none;
}

a:visited:hover {
	color:#81C8E5;
	text-decoration: none;
}

a:hover {
	color:#81C8E5;
	text-decoration: none;
}

p.copyright a:link {
	color:#7D8DB0;
	text-decoration: none;
}

p.copyright a:visited {
	color:#7D8DB0;
	text-decoration: none;
}

p.copyright a:hover {
	color:#43567F;
	text-decoration: none;
}

div.noticebutton a, a.noticebutton, a.button, a.button:visited {
  color: white; 
}

div.noticebutton:hover a, a.noticebutton:hover, a.button:hover {
  color:#167BAD; 
}

.small {
  font-size: 80%;
  }
  
.clear {
  clear: both;
} 

.clearfix:after {
  content: " ";
  display: block;
  width: 100%;
  height: 0;
  clear: both;
} 

/* Readings Page images */

#readings-images {
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
}

.readings-left-images, .readings-right-images, .readings-full-image {
  width: 250px;
  margin: 0 auto;
}

.readings-left-images img, .readings-right-images img {
  width: 100%;
}

/* Embed Youtube Video */

.video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  margin: 20px 0;
}

.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Embed Audio */

audio {
	max-width: 100%;
}

/* Navigation */

.toggleMenu {
  display:  block;
  position: relative;
  padding: 5px 0;
  width: 100%;
}

.toggle {
  width: 38px;
  height: 4px;
  margin: 3px 0 6px 10px;
  background: #FFFFFF;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  overflow: hidden; 
	opacity: 1;
	transform: rotate(0) translate(0, 0);
	transition: opacity .5s, transform .5s;
}

.toggleMenu.active .toggle:first-child {
	transform: translateY(10px) rotate(45deg);
}

.toggleMenu.active .toggle:last-child {
	transform: translateY(-10px) rotate(-45deg);
}

.toggleMenu.active .toggle:nth-child(2) {
	opacity: 0;
}

#main img {
  max-width: 100%;
  height: auto !important;
}

#navmenu {
  position: relative;
  background: #B6D4E4;
  border-bottom: 1px solid #FFFFFF;
  font-family: Rosarivo, serif;
}

.nav {
  position: absolute;
  top: 42px;
  left: 0;
  width: 100%;
  background: #fff;
  list-style: none;
  *zoom: 1;
  padding: 10px 0;
  margin: 0;
  z-index: 100;
  -moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,.5);
  -webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,.5);
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,.5);
}

.nav ul {
  list-style: none;
  display: none;
  width: 100%;
  padding: 0;
  z-index: 100;
}

.nav li {
  padding: 4px 0;
}

.nav a {
  position: relative;
  color: #0F6F96;
}

.nav a.parent:after {
  position: absolute;
  content: " ";
  display: inline-block;
  margin-left: 10px;
  top: 2px;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-left: 8px solid #81C8E5;
}

.nav > li:hover > a {
  color:#81C8E5;
}

.nav > li.hover > a.parent:after {
  top: 6px;
  margin-left: 6px;
  border: 8px solid transparent;
  border-top: 8px solid #81C8E5;
}

.nav > li > ul {
  position: relative;
  width: 100%;
  padding: 10px 0;
  -moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,.5) inset;
  -webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,.5) inset;
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,.5) inset;
}

.nav > li > ul a:hover {
  color:#81C8E5;
}

@media screen and (min-width: 330px) {
  
  .slide-trigger span {
    margin-right: 20px;
  }
    
}

@media screen and (min-width: 380px) {

  .cover-tiles div {
    float: left;
    width: 50%;
  }

  .cover-tiles div:nth-child(odd) {
    clear: both;
  }
  
  .slide-trigger span {
    margin-right: 14px;
  }
    
}

@media screen and (min-width: 400px) {

  #header p {
    width: 230px;
    font-size: 50px;
    line-height: 50px;
    height: 150px;
    padding-top: 10px;
  }
  
  #mainin {
    min-height: calc(100vh - 50vw - 130px);
    min-height: calc(100vh - 50vw - 140px);
  }

}

@media screen and (min-width: 440px) {
  
  #brooklyn {
    width: 179px;
    max-width: 100%;
    margin: 0 auto;
  }
  
  div.intro > div {
    background: #fff;
    border: 1px solid #B7D4F6;
  }
  
  .cover-tiles div {
    width: 33%;
  }
  
  .cover-tiles div:nth-child(odd) {
    clear: none;
  }
  
  .cover-tiles div:nth-child(3n+1) {
    clear: both;
  }
  
  div.book {
  float: left;
  width: 100%;
  border: none;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 16px 0px;
}

div.cover {
  float: left;
  max-width: 40%;
  margin: 0;
}

div.booktext {
  width: auto;
  height: auto; 
  padding: 0px;
  margin: 14px 0 0 45%;
}

.booktext h2 {
  text-align: left;
}

div.coverprog {
  float: left;
  max-width: 40%;
  margin: 20px 0 60px 0;
}

div.series {
  position: relative;
  float: left;
  width: auto;
  height: auto;
  padding: 0px;
}

div.seriesback {
  background: url(images/layout/bluline.gif) repeat-y 20% top;
  padding: 0;
  margin: 0;
  float: left;
  position: relative;
}

div.serclear {
  width: 60px;
  height: 2px;
  margin: 0 0 40px 20%;
  background: url(images/layout/bluline.gif) repeat-x left top;
  position: relative;
  clear: both;
}
  
div.serhline {
  background: url(images/layout/bluline.gif) repeat-x left top;
  height: 2px;
  width: 40px;
  float: left;
  margin: 14px 0 0 0;
}

div.servline {
  background: url(images/layout/bluline.gif) repeat-y left top;
  float: left;
  width: 2px;
  height: 14px;
  margin: 14px 0 0 20%;
}

.series h3 {
  display: block;
  float: left;
  margin: 0;
  background: none;
}

.series h3:before {
  content: none;
}

}

@media screen and (min-width: 500px) {

  div.cover, div.coverprog {
    margin-left: 30px;
  }
  
  div.booktext {
    margin-left: 240px;
    margin-right: 30px;
  }
  
  div.seriesback {
    background: url(images/layout/bluline.gif) repeat-y 120px top;
  } 

  div.serclear {
    width: 112px;
    margin-left: 120px;
  }
  
  div.serhline {
    width: 112px;
  }

  div.servline {
    margin-left: 120px;
  }
  
  h1 {
    font-size: 36px;
    line-height: 38px;
  }
  
  .readings-left-images {
    float: left; 
    width: 54.8%;
    max-width: 312px;
    padding-right: 14px;
  }

  .readings-right-images {
    float: right; 
    width: 43%;
    max-width: 246px;
  }
  
  .readings-full-image {
    width: 100%;
  }
  
  #readings-images .caption {
    height: 50px;
  }

}

@media screen and (min-width: 520px) {

  #mainin.reviewsmain .maintext {
    padding:  0 5%;
  }

  #reviewindex {
    width: 100%;
  }
  
  #reviewindexhead, .fixed #reviewindexhead {
    min-width: auto;
    width: 100%;
    max-width: 844px;
  }
  
  .slide-trigger {
    padding-left: 2.5%;
  }
  
  .slide-trigger span {
    display: none;
  }
  
  .slide-trigger span:before {
    content: none;
  }
  
  .slide-trigger.author {
    width: auto;
  }
  
  #bytitle, #byauthor {
    padding-left: 2.5%;
    padding-right: 2.5%;
  }
  

}

@media screen and (min-width: 580px) {

  div.two-col {
    margin-bottom: 20px;
  }

  div.two-col > div {
    width: auto;
    display: table-cell;
    vertical-align: top;
  }
  
  div.two-col .frame, div.two-col .noticebutton {
    max-width: 360px;
  }
	
	div.two-col-flex {
		display: flex;
		gap: 10px;
	}

  #wrapper {
    background-size: 1080px;
    background-position: right -119px top 0;
    padding-top: 48px;
  }

  #header, #web {
    background-size: 842px;
    height: 266px;
  }
  
  #header {  
    padding: 0;
  }
  
  #header-pic {
    width: 138px;
    top: -24px;
    right: 24px;
  }

  #header p {
    position: relative;
    width: 280px;
    font-size: 64px;
    line-height: 64px;
    margin-top: 10px;
    left: 3%;
  }
  
  #mainin {
    min-height: calc(100vh - 430px);
    padding: 0 5% 40px 5%;
  }
  
  div.box:after {
    content: " ";
    display: block;
    position: absolute;
    width: 10px;
    height: 100%;
    top: 0;
    left: calc(50% - 5px);
    background: #f5f8f9;
  }

  div.halfbox {
    float: left;
    width: 50%;
    margin: 0;
    padding: 0 20px 40px 15px;
  }

  div.halfbox + div.halfbox {
    padding: 0 10px 40px 25px;
    border: none;
  } 
  
  h1 {
    font-size: 40px;
    line-height: 44px;
  }  
  
  div.news > div {
    width: 50%;
    padding: 10px;
    float: left;
  } 

}

@media screen and (min-width: 680px) {

  #header p {
    width: 464px;
    font-size: 58px;
    line-height: 58px;
    margin-top: 20px;
  }
  
  h1 {
    font-size: 44px;
    line-height: 50px;
  }
  
  .condensedplus2 {
    font-size: 40px;
  }
  
  .condensedplus3 {
    font-size: 37px;
  }
    
  .cover-tiles div {
    width: 25%;
  }
  
  .cover-tiles div:nth-child(3n+1) {
    clear: none;
  }
  
  .cover-tiles div:nth-child(4n+1) {
    clear: both;
  }
  
  #disabilities, #research {
    width: 588px;
  }
  
  .rightlinks ul.booklinks li {
    display: inline-block;
    padding-left: 30px;
  }
  
  .rightlinks ul.booklinks li:first-child {
    padding-left: 16px;
  }


}

@media screen and (min-width: 720px) {

  #header p {
    width: 500px;
    font-size: 64px;
    line-height: 64px;
  }

  .toggleMenu {
    display:  none;
  }
  
  .nav {
    position: relative;
    background: none;
    top: 0;
    font-size: 0;
    max-width: 740px;
    margin: 0 auto;
    padding: 0;
    text-align: justify;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  
  .nav:after {
    content: " ";
    display: inline-block;
    width: 100%;
  }
  
  .nav > li {
    position: relative;
    font-size: 20px;
    line-height: 40px;
    display: inline-block;
    padding: 0 24px;
  }
  
  .nav a.parent:after {
    display: none;
  }
  
  .nav > li.hover > a {
    color: #fff;
  }
  
  .nav > li ul {
    display: none;
    width: 300px;
    position: absolute;
    top: 40px;
    left: -60px;
    background: #fff;
    padding: 10px 14px;
    z-index: 100;
    -moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,.5);
    -webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,.5);
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,.5);
  }
  
  .nav > li:first-child ul {
    left: 20px;
  }
  
  .nav li.hover ul {
    display: block;
  }
  
  .nav > li ul li {
    line-height: 24px;
    text-align: left;
    text-indent: -30px;
    padding-left: 30px;
  }
  
  .nav > li ul li a {
    font-size: 18px;
    line-height: 18px;
    padding: 0;
    color: #45a5cc;
  }
  
  .nav > li ul li:last-child {
    margin-bottom: 10px;
  }
  
}

@media screen and (min-width: 844px) {

  #wrapper {
    background-position: center top;
  }

  #header {
    border: 1px solid #FFFFFF;
    box-sizing: border-box;
  }

  #header p {
    width: 640px;
    font-size: 82px;
    padding-top: 20px;
    margin-top: 12px;
    left: 28px;
  }
  
  #center {
    border-right: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
  }
  
  .nav > li:first-child ul {
    left: 0;
  }
  
  .fixed #reviewindexhead {
    margin-left: -1px;
  }

}