@font-face {
  font-family: 'Bocklin';
  src: url(../Bocklin.ttf) format('truetype');
  /*
  src: url('MyFont.eot?') format('eot'),
   url('MyFont.woff') format('woff'), 
   url('MyFont.ttf') format('truetype'),
   url('MyFont.svg#webfontwTBKaDwa') format('svg');
   */  
}

/* ============================================================

320 and Up by Andy Clarke
Version: 3.0
URL: http://stuffandnonsense.co.uk/projects/320andup/
Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0

============================================================ */
/* Reset =================================================== */
html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
article,
aside,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
/* Variables =================================================== */
/* Mixins =================================================== */
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  position: static;
  clip: auto;
  height: auto;
  width: auto;
  margin: 0;
  overflow: visible;
}
ul {
  list-style:none;
}


*, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}



#debug {
  font-family:arial;
  font-size:16px;
  text-align:center;
}

html {
  font-size:1em;
}

/**************************************************************/
/*  Smallest screen - Font sizes                              */
/**************************************************************/
 
h1 {
  font-size:1.6em;
}
header h1,
ul.globalMenu li {
	font-size:1em;
}

h2,
a.largeA {
  font-size:2.4em;
}
.largeH2 {
  font-size:2.4em;
}
article p:first-letter,
article p span,
article .caps li:first-letter {
  font-size:1.8em;
}

p, li {
	font-size:1.2em;
}
p.credit {
  font-size:0.8em;
}

/**************************************************************/

body {
  font-family:Overlock;
  color: #000000;
  background: #003300;
  background-image:url(../img/green_scale_2x2.png);
}
a {
  color:#4683D3;
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
  color:#5399F4;
}

.main {
  margin:0 auto;
  max-width:1115px;
  display:block;
}

header {
  border-top-left-radius: 45px;
  border:5px solid #31343D;
  height:90px;
	padding-left:95px;
  background:url(../img/scroll-top-back.png) repeat-x left top;
}
header h1 {
  display:inline-block;
  margin-right:2%;
  margin-top:0.4rem;
}
header nav {
	display:inline-block;
	text-align:left;
}
header:before {
  content: url(../img/scroll-top-left-box.png);
  height: 90px;
  width: 90px;
  position: absolute;
  top:0;
  left: -4px;
  display:block;
  border: 5px solid #003300;
  border-top-left-radius: 45px;
}

header:after {
  content: "";
  background:url(../img/scroll-top-right.png) no-repeat top right;
  height: 90px;
  width: 85px;
  position: absolute;
  top: 0;
  right: -76px;
  display:block;
}

/* global menu setting for the top of the scroll */
ul.globalMenu {
	margin-top:1rem;
	display:inline-block;
}
ul.globalMenu li {
  font-family:Bocklin;
	display:inline;
	padding:0 0.4rem;
}
ul.globalMenu li span {
  display:none;
}

ul.globalMenu a {
  color:#005100;
}
ul.globalMenu a:hover {
  color:#ffcc00;
  text-decoration:none;
  text-shadow:  
   -2px -2px 0 #000,  
    2px -2px 0 #000,
   -2px  2px 0 #000,
    2px  2px 0 #000;
}

.fbook {
  display:flex;
}
.fbook a {
  margin:1em auto;
  width:70px;
}
.pub {
  width:320px;
  margin:0.5em auto;
}

.page {
  border-top-left-radius: 45px;
  width: 100%;
  margin: 0 0 0 85px;
  max-width:1022px;
  min-width:320px;
  height:100%;
  border-left:4px solid #31343D;
  border-right:4px solid #31343D;

  background-image:url(../img/scroll-bottom-back.png);  
  position: relative;
  left: -85px;
}

h1 {
	text-align:center;
}

.gold {
  font-family:Bocklin;
  font-weight:normal;
  color:#ffc000;
  text-shadow:  
   -2px -2px 0 #000,  
    2px -2px 0 #000,
   -2px  2px 0 #000,
    2px  2px 0 #000;
}

h2,
a.largeA {
  font-family:Bocklin;
  font-weight:normal;
  text-align: center;
  color:#ffc000;
  display: block;
  text-shadow:  
   -2px -2px 0 #000,  
    2px -2px 0 #000,
   -2px  2px 0 #000,
    2px  2px 0 #000;
}

img.sTop {
  position:absolute;
  right:0;
  top:0;
}

nav.menu,
footer {
  border:4px solid #31343D;  
}

nav.menu a {
	display:inline-block;
  text-decoration:none;
  font-family:Arial, sans-serif;
  font-weight:700;
  color:white;
  font-size:32px;
  padding:0 0.4rem;
  background-color:#1A3000;  
  opacity:0.75;
}
nav.menu a:hover {
  color:yellow;
  opacity:1;
}
nav.menu ul {
  display:block;
	list-style:none;
  width:100%;
}
nav.menu li {
  display:inline-block;
}
.next {
	float:right;
}
nav.menu ul {
  background:#1A3000 url(../img/header.jpg) no-repeat;
}
nav.menu a {
  height:119px;
  line-height:119px;
}

footer nav.menu ul {
  background:#1A3000 url(../img/footer.jpg) no-repeat;
}
footer nav.menu a {
  height:179px;
  line-height:179px;
}



img.frame {
  border:2px solid #1A3000;
}
.fRight {
	float:right;
}
.largeA:hover {
  text-decoration:none;
}

.f45_1 {
  float:right;
  margin-top:3em;
}
.f45_2 {
  float:left;
  margin-top:3em;
}


/******************************************/
/*                                        */
/*  Narrow Page layout settings           */
/*                                        */
/******************************************/
article {
  padding:2%;
}
section {
	padding-top:1rem;
}

figure {
  text-align:center;
}

section > nav,
section > figure,
section > div {
  width:100%;
  display:block;
  vertical-align:top;
	margin:0 auto;
}


figure img {
  max-width:100%;
  max-height:100%;
}

section:first-of-type {
	padding-top:0;
}

section p {
  margin-bottom:1.2rem;
  text-align:center;
  vertical-align:top;  
}
section li {
  text-align:center;
  padding:1%;
}
section li:last-child {
  margin-bottom:1.2rem;
}
section div figure {
	width:100%;
	text-align:center;
}

/******************************************/
/* End of page layout settings            */
/******************************************/



article p:first-letter,
article p span,
article .caps li:first-letter {
  font-family:Bocklin;  
}
article p.noCap:first-Letter {
  font-size:inherit;
  font-family:inherit;
}
p.notPara {
  margin-bottom:0;
  padding-bottom:0;
}
p.left {
  text-align:left;
}
p em {
  font-weight:700;
  font-style:normal;
}


.nouveau {
  font-family:Bocklin;
}


/* background image only */

.owl_r2,
.owl_l2 {
  font-family:Bocklin;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0 auto;
  
  width:270px;
  height:279px;

  display:block;
  line-height:326px;

  text-decoration:none;
  font-size:32px;
  color:#ffc000;
  text-shadow:  
   -2px -2px 0 #000,  
    2px -2px 0 #000,
   -2px  2px 0 #000,
    2px  2px 0 #000;  
}


.owl_r2:visited
.owl_l2:visited {
  border:none;
} 

nav.left {
	text-align:left;
	display:inline-block;
}
nav.right {
  float:right;
  display:inline-block;
}

.owl_l2 {
  background-image:url(../img/owl_signs.png);
  background-position:0 0;
  padding-left:40px;  
  text-align:left;
}

.owl_r2 {
  background-image:url(../img/owl_signs.png);
  background-position:-270px 0 ;
  padding-right:36px;
  text-align:right;
}

.owl_l2:hover {
  background-image:url(../img/owl_signs.png);
  background-position: 0 -279px;
  text-decoration:none;
  color:#ffc000;  
}

.owl_r2:hover {
  background-image:url(../img/owl_signs.png);
  background-position: -270px -279px;
  text-decoration:none;
  color:#ffc000;
}


img.icon {
	margin-left:1rem;
}
.doubleSpace {
	padding-top: 1.2rem;
}
.ddSpace {
	padding-top:3rem;
}
.halfSpace {
	padding-top:0.6rem;
}
.noSpace {
	padding-top:0;
}
.bottom {
	vertical-align:bottom;
}




p.credit {
  background:url(../img/scroll-bottom-back.png) repeat-x bottom left;
  height:90px;
  line-height:32px;  
  color:#003300;
  font-weight:normal;
  text-align:center;
  border-bottom: 5px solid #003300;
  border-right: 5px solid #003300;
  border-left: 0;
  border-bottom-right-radius: 45px;
  /*
  border-bottom-left-radius: 45px;
  border-top-left-radius: 45px;
  */
  position: relative;
}

p.credit:before {
  content: url(../img/scroll-bottom-left-box.png);
  height: 90px;
  display:block;
  position: absolute;
  left:-90px;
}


/******************************************/
/* Larger screen layouts                  */
/******************************************/

@media only screen and (min-width: 600px) {
  /* Start switching to full width */

/*
  .fbook {
    margin-left:3em;
  }
*/
  section > div {
    width:59%;
    display:inline-block;
  }
  section > aside,
  section > nav,
  section > figure {
    width:40%;
    display:inline-block;

  }

  article {
    padding:2%;
  }
  
  section li {
    text-align:center;
    padding:2%;
  }


  .thirds > div,
  .thirds > nav,
  .thirds > figure,
  .thirds > p {
    width:32%;
    display:inline-block;
    
  }
  
  section > .w20 {
    width:24.5%;
    display:inline-block;
  }
  section > .w30 {
    width:32.7%;
    display:inline-block;
  }
  img.tMargin {
    margin-top:6em;
  } 
  figure.w60 {
    width:60%;
  }
  section > .w50 {
    width:49.7%;
    display:inline-block;
  }  

  nav.left,
  nav.right {
    width:60%;
  }

  p.credit {
    font-size:1.1em;
  }
  
  .flexi {
    display:flex;
    align-items:center;
  }
  .evenly {
    border:1px black;
    display:flex;
    align-items:space-evenly;
  }
  
}

@media only screen and (min-width: 650px) {
  header h1,
  ul.globalMenu li {
    font-size:1.3em;
  }
}
  
@media only screen and (min-width: 850px) {
  /* Start switching to full width */

  header h1,
  ul.globalMenu li {
    font-size:1.6em;
  }
  ul.globalMenu li span {
    display:inline;
  }
  
  header nav {
    text-align:right;
  }
  
  .rightM {
    margin-right:3rem;
  } 
}

@media only screen and (min-width: 890px) {
  .minus {
    margin-top:-7rem;
  }
}

@media only screen and (min-width: 920px) {
  /* crank up the font size */
  html {
    font-size:1.1em;
  }


}

@media only screen and (min-width: 1000px) {
  /* crank up the font size */
  html {
    font-size:1.2em;
  }
}

@media only screen and (min-width: 1040px) {
  
  p.credit {
    margin-right:45px;  
  }
}

@media only screen and (min-width: 1100px) {
  p.credit {
    margin-right:93px;
  }
  
  .eh {
    margin-left:5em;
  }
  .tab {
    margin-right:5em;
  }
 
 .rightM {
  margin-right:3rem;
 } 
 .leftM {
  margin-left:3rem;
 } 

  
}