@charset  "UTF-8";

* {
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto
}

body {
	background: #ceebf1;
	background-image: url(../images/background.png);
	background-size: 100%;
	background-position: top;
	background-repeat: repeat-y;
}

#wrapper {
    background-color: #FFF;
    width: 970px;
    margin-right: auto;
    box-shadow: 0 0 20px 1px #666;
}

#wrapper #header {
    margin-top: 0;
    background-image: url(../images/header.png);
    background-repeat: no-repeat;
    height: 188px;
    width: auto;
    margin-bottom: 0
}

#wrapper #breadcrumbs {
    height: 20px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: small;
    color: #fff;
    margin-top: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 54px;
    padding-left: 54px;
    background-color: #666
}

#wrapper #cover {
    width: 230px;
    float: left;
    margin-top: 20px;
    padding-top: 0;
    padding-left: 54px;
    padding-bottom: 60px;
    padding-right: 10px
}

#wrapper #cover img {
    border: 1px solid #ccc;
    box-shadow: 5px 5px 5px #999
}

#wrapper #content {
    width: 550px;
    float: left;
    margin-top: 0;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 10px
}

#wrapper #footer {
    background-color: #ddd;
    height: 21px;
    clear: both;
    padding-top: 10px;
    padding-right: 54px;
    padding-left: 54px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: x-small;
    color: #333;
    text-align: right
}

.HeadingText {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 175%;
	margin-bottom: 10px;
    color: #6dabb6;
    font-weight: 700
}

.subHeading {
    color: #4285F4;
    font-size: 120%;
    font-weight: 700;
    font-family: Arial,Helvetica,sans-serif
}

.Heading3, h3 {
    color: #a0d1da;
    font-size: 110%;
    font-family: Arial,Helvetica,sans-serif;
	font-weight: bold;
	padding-bottom: 5px;
	padding-top: 20px; 
	text-align: left;
}

.bodyText {
    font-family: Arial,Helvetica,sans-serif;
    font-size: small;
    color: #333
}

.bodyText li {
    padding-top: 3px;
    padding-bottom: 3px
}

a:link {
    color: #1A6F9D;
    text-decoration: none;
}

a:visited {
    color: #1A6F9D;
    text-decoration: none;
}

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

a:active {
    color: #f8ef30;
    text-decoration: none;
}

a.white:link {
    color: #fff;
    text-decoration: none
}

a.white:visited {
    color: #fff;
    text-decoration: none
}

a.white:hover {
    color: #CCC;
    text-decoration: none
}

a.white:active {
    color: #fff;
    text-decoration: none;
    text-align: right
}

.nodot {
	list-style-type: none;
	padding-bottom: 5px;
}

.hangingIndent {
	padding-left: 100px;
	text-indent: -75px;
	list-style-type: none;
	padding-bottom: 5px;
}

audio {
	width: 90%;
}

.columnSingle {
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
	text-align: center;
	margin-top: 10px;
	margin-left: 0px;
	width: 50%;
}

.columns1 {
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
	text-align: center;
	margin-top: 10px;
	margin-left: 0px;
	width: 33%;
}
.columns2 {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
	text-align: center;
	margin-top: 10px;
}

.columns2left {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
	text-align: left;
	margin-top: 10px;
}

.columns3 {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
	text-align: center;
	margin-top: 10px;
}

.columns3 p, .columns2 p, .columns2left p {
	padding-top: 10px;
	widows: 4;
	orphans: 4;
}

.columnspan { 
  -webkit-column-span: all; 
          column-span: all;
text-align: left;		  
}

.phoneticTable {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	border-collapse: collapse;
	margin-top: 5px;
}

.phoneticTable td {
	padding: 5px 2px;
	text-align: center;
}

.phoneticLeft {
	text-align: left !important;
}

.phoneticGrey {
	color: #aaaaaa;
}

.phoneticHeader {
    color: #a0d1da;
    font-size: 110%;
    font-family: Arial,Helvetica,sans-serif;
	font-weight: bold;
	padding-bottom: 5px;
	text-align: left !important;
}

.phoneticSubHead {
	text-align: left !important;
	font-size: 105%;
	font-weight: bold;
}

.phoneticSubHeadCenter {
	text-align: center;
	font-size: 105%;
	font-weight: bold;
}

.phoneticLine td {
	padding: 5px 0px 10px;
	text-align: center;
}

.phoneticNoLine td {
	padding: 5px 0px 10px;
	text-align: center;
}

.phoneticLine {
	border-bottom: 2px solid #dddddd;
}

.phoneticDiv {
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
	padding-bottom: 15px;
}



/* use Charis SIL - Regular in .woff format */
@font-face {
  font-family: CharisSILW;
  src: url(../fonts/CharisSIL-R.woff);
}
/* use Charis SIL - Italic in .woff format */
@font-face {
  font-family: CharisSILW;
  font-style: italic;
  src: url(../fonts/CharisSIL-I.woff);
}

@font-face {
	font-family: CharisSILW;
	font-weight: bold;
	src: url(../fonts/CharisSIL-B.woff);
}

@font-face {
	font-family: CharisSILW;
	font-weight: bold;
	font-style: italic;
	src: url(../fonts/CharisSIL-BI.woff);
}

.Charis {
	font-family: CharisSILW, serif !important;
	line-height: 0.9;
	font-size: 120%;
}