/* |--------- general ----------| */

html { width:100%; background-color:#fff; repeat; color:#000; font-family: 'Source Sans Pro', sans-serif; line-height:1.5; font-size:1em; font-weight:400; box-sizing:border-box;  }
html * { box-sizing:border-box; margin:0 0 0 0; padding: 0 0 0 0; border:none; outline:none; text-indent:0; }
body { font-size:1em; background-color:#fff; min-width:350px; }

/* |--------- headings ----------| */

h1, h2, h3, h4, h5 { margin-bottom:0.5em; font-weight:normal; font-weight:400; color:#000; }
h1 { font-weight:700; margin-bottom:1.55em; color:#fff; font-size:1.25em; word-spacing:-0.1vw; }
h2 { font-size:1.5em; clear:both; margin-top:0.5em; }
h2:first-of-type { margin-top:0; }
h3 { font-size:1.3em; color:#000; margin-bottom:0.333em; }
h4 { font-size:1.25em; }

#readings h3 { font-style:italic; }

/* |--------- tags / elements ----------| */

p { margin-bottom:0.75em; }
a { color:#295D7D; }
a:visited { color:#295D7D;}
ul { list-style-position:inside; list-style-type:square; line-height:1.375; margin-bottom:0.75em; }
ul li small { letter-spacing:-0.51pt; }
ul li { margin-left:1em; text-indent:-1em; }
small { font-size:0.85em; }
section { clear:right; margin-bottom:0.67em; }
section:last-of-type { margin-bottom:1em; }
img { border-radius:2pt; }
iframe { width:100%; min-height:180px; height:25.5vh; border-none; opacity:0.9; border-radius:2pt; padding-bottom:0.25em; outline-none; }


/*  This PSI character within HR stopped working very well on Chrome so  I had to find another solution; see #psi below
hr { clear:both; margin-left:2em; height:2em; padding-top:2em; margin-bottom:2em; border-bottom: 1px solid #99AA56; color: #99AA56; text-align: center; }
hr:after { display: inline-block; position: relative; top: -0.6em; padding: 0.125em 0.25em 0 0.25em; color:#fff; background-color: #99AA56; border-radius:1em; content:'\03A8'; font-size: 1.25em; line-height:1.25; font-weight:400; }
*/

#psi { position:relative; float:left; clear:both; width:100%; text-align:center; }
#psi p {background: #99AA56; height:1px; margin-top:1em; margin-bottom:1em; }
#psi span { background-color:#99AA56; color:#fff; padding:0 0.3em 0.1em 0.3em; line-height: 1.25; font-size:1.25em; position:relative; top:-0.625em; border-radius:1.25em;}


/* |--------- top navigation ----------| */

nav { font-size:1em; display:block; margin-bottom:1.25em; text-transform:uppercase; }
nav ul { font-size:1em; padding:0; margin:0; list-style-type:none; list-style-position:inside; }
nav ul li { padding:0 1.375em 0 0; margin:0; float:left; text-indent:0;
white-space: nowrap; }
nav ul li a { color:#222 !important; text-decoration:none; font-weight:bold; }
a.navactive { color: #677D29 !important; }

nav.grid ul li a { background: transparent url("../images/triangup.png") no-repeat scroll 1px 0.25em; background-size:0.8em; padding-left:1.2em; }
nav.grid ul li a.navactive { background-image: url("../images/triangright.png"); }

/* |--------- named ----------| */

.facilitypic { height:auto; width:100%; }
.circle-img { padding:0.25%; border-radius:50%; float:left; background-color:beige; margin-right:1em; }
.no-mbottom { margin-bottom:0; }
.footer { font-size:0.9em; color:#222; padding-bottom:1em; }
.bookbreak { width:100%; display:none; float:left; clear:all; }
.design-by { opacity:0.75; color:#000; font-size:0.8em; }
.design-by a { color:#444; text-decoration:none; }
.large-screen-show { display:none; visibility:hidden; }
.small-screen-show { display:none; visibility:hidden; }
#aboutann { margin-bottom:0.25em; }


/* ---|     GRIDS    |------------------------------------ */

body { width:100%; margin:0; margin-top: 0.5em; }

.header { font-size:1.1em; position:relative; display:table; width: 100%; padding: 0 0 0 0; color:#fff; height:auto; background-color: #99AA56; background: linear-gradient(#99AA56, #9AAD53);}
.withinheader { display:block; width: 87.5%; padding: 0 0 0 0; margin: 0 auto; min-width:320px; }
.withinheader h1 { font-weight:normal; margin:3.5em 0 2.75em 1em; float:left; max-width:75%; width:75%; line-height:1.025; }
.withinheader small { text-transform:uppercase; font-size:0.75em; color:#FCFFF1; }

.withinheader img { display:inline; vertical-align:middle; height:8.5em; margin:1.5em 0; border-radius:50%; float:left; box-shradow: 0 0 1px #444; }

.circle-img { }

h1 { }

.container { display:block; width: 87.5%; padding: 3em 0 0 0; margin: 0 auto; min-width: 320px; }

.grid-wrap {
  margin-left: -2em; /* same as gutter */
  overflow: hidden; }
  .grid-wrap:before, .grid-wrap:after { content:""; display:table; }
  .grid-wrap:after { clear:both; }

.grid {
  float: left;
  padding-left: 2em; /* gutter between columns */
  width: 100%; }

.half-gutter { margin-left: -1.5em; }
  .half-gutter .grid-col { padding-left: 1.5em; }

.column-full { width: 100%; }
.column-one-half { width: 50%; }
.column-one-third { width: 33.333%; }
.column-two-thirds { width: 66.666%; }
.column-one-quarter { width: 25%; }
.column-three-quarters { width: 75%; }

.nonmqsize-hide { display:none; }
.nonmqsize-show { display: inline; }

/* ---|     MEDIA QUERIES    |----------------------------- */

/* -- Media query min 98em  ------------------------------- */
@media only screen and (min-width: 98em) { /* begin 13 / 1024 */

	.large-screen-show { display:inline; visibility:visible; }
}

/* -- Media query min 110em  ------------------------------- */
@media only screen and (min-width: 110em) { /* begin 13 / 1024 */
	body { font-size:1.125vw; }
}

/* -- Media query 64em  ------------------------------- */
@media only screen and (max-width: 64em) { /* Grids begin 13 / 1024 */
	.size64em-column-full { width: 100%; }
	.size64em-column-one-half { width: 50%; }
	.size64em-column-one-third { width: 33.333%; }
	.size64em-column-two-thirds { width: 66.666%; }
	.size64em-column-one-quarter { width: 25%; }
	.size64em-column-three-quarters { width: 75%; }
	.size64em-hide { display: none; }
	.size64em-show { display: inline; }
	/* Grids end */

	.container { padding: 2em 0 0 0; }
	h2 { margin-bottom:0.333em; }
	p { margin-bottom: 0.5em; }
}


/* -- Media query 2 (48em)  -------------------------------- */
@media(max-width: 48em) { /* Grids begin 13 / 768 */
	.size48em-column-full { width: 100%; }
	.size30em-column-full { width: 100%; }
	.size30em-column-one-half { width: 50%; }
	.size30em-column-one-third { width: 33.333%; }
	.size30em-column-two-thirds { width: 66.666%; }
	.size30em-column-one-quarter { width: 25%; }
	.size30em-column-three-quarters { width: 75%; }
	.size30em-hide { display: none; }
	.size30em-show { display: inline; }
	/* Grids end */

	.container { width: 90%; padding: 1.5em 0 0 0; }
	h1 { word-spacing:-1pt; }
	h2 { font-size:1.2em ; word-spacing: -1pt; letter-spacing: -0.5px; }
	.header h1 { font-size:1.1em; max-width:50% !important; line-height:1.1; margin: 0 0 0 0; padding: 0 0 0 0; }
	.longestheaderheading { display:none; }
	.longerheaderheading { display:none; }
		ul { font-size:1em; }
	h2 { font-size:1.25em; margin-bottom:0.5em; }
	.bookbreak { display:block; }
	nav { font-size:1.25em; }
	nav ul li { clear:left; padding:0 1.15em 0 0; }
	.small-screen-show { display:inline; visibility:visible; }
	.withinheader h1 { margin:3.75em 0 3.5em 1em; float:left; max-width:80%; width:80%; }
}

/* -- Media query 2 (32em)  -------------------------------- */
@media(max-width: 27em) {

	h1 { word-spacing: 0; }
	h2 { font-size:1.2em ; word-spacing: 0; letter-spacing: 0; }
	.header h1 { font-size:1em; max-width:45% !important; line-height:1.2; margin: 0 0 0 0; padding: 0 0 0 0; }

	.withinheader h1 { margin:3.75em 0 3.5em 1em; float:left; max-width:80%; width:80%; }
}