/* http://meyerweb.com/eric/tools/css/reset/  v2.0 | 20110126   License: none (public domain) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, 
img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, 
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, 
summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;} ol, ul {list-style: none;} blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';	content: none;}
table {border-collapse: collapse;	border-spacing: 0;}
/* end reset */

body { font-family: Arial, Helvetica, sans-serif; font-size: 0.750em; background-color: #ccccff; 
background-image:url('P1018741cropweb.jpg'); color: #000066; padding: 0 0 60px 0; margin: 0;}
p {padding: .6em .5em;}
p.right  {float: right; padding-left: 2em;}
.pad {padding: 1em .5em 2em .5em;}
.special  {color: #7a00cc;}
.quotepurple {color: #9933cc;}
.quoteblue {color:Navy;}
.poem  {text-align: center;}
.big  {font-size: large;}
.it {font-style: italic;}
.bold {font-weight: bold;}
.boldit {font-style: italic; font-weight: bold;}

a {text-decoration: none;}
a:link {color: #6633ff;}
a:visited {color: #6633cc;}
a:hover {color: #6633ff;	font-size: 1.1em;}
a:active {color: #9966ff;}

h1, h2, h3, h4 {font-family: Palatino Linotype, Book Antiqua, Palatino, serif; font-weight: bold;}
h1 {font-size: 1.8em; color: #0000cc; margin: 0; padding: 4px 0;}
h2 {font-size: 1.5em; color: #7a00cc; padding: 10px 0 16px 0;}
h3 {font-size: 1.2em; color: #333399; padding: 6px 0 6px 0;}
h4 {font-size: 1em; color: #000063;}

.container {margin: 0 auto; padding: 0; max-width: 3600px;}
.contents  {float: left; width: 20%; margin: 34px 3% 60px 3%; padding: 10px 15px 10px 15px; color: #0000cc;
background-color: #b2c0dd; line-height: 1.3em; opacity: 0.9; -webkit-border-radius: 12px; border-radius: 12px;}
.main {float: left; width: 60%; margin: 34px 0 60px 0; padding: 10px 15px 20px 15px; line-height: 1.6em;
background-color: #b2c0dd; opacity: 0.9; -webkit-border-radius: 12px; border-radius: 12px;}
.specialbox  {width: 60%; border-style: outset; border-width: .5em; border-color: #7a00cc; margin: 2em; padding: 2em;}
hr  {width: 40%; height: .2em; background-color: #d97d00; color: #d97d00;}

@media only screen and (max-width: 600px) {body {font-size: 0.983em;}
.contents {width: 23%; margin: 34px 2% 0 2%; padding: 10px 1% 10px 1%;}
.main {width: 65%; padding: 10px 1% 10px 2%;}}
@media only screen and (min-width: 601px) {body {font-size: 1em;}}
@media only screen and (min-width: 900px) {body {font-size: 1.063em;}}
@media only screen and (min-width: 1026px){body {font-size: 1.125em;}}
@media only screen and (min-width: 1421px){body {font-size: 1.25em;}}
@media screen and (min-width: 1600px) {p {font-size: 105%;}}
@media screen and (min-width: 1621px) {body {}
.contents {width: 20%; margin: 34px 3% 60px 3%; padding: 1%;}
.main {width: 60%; margin: 34px 0 60px 0; padding: 1% 1% 1% 1%;}}
@media screen and (min-width: 1800px) {body {font-size: 1.313em;}}
@media screen and (min-width: 2000px) {body {font-size: 1.5em;}}
@media screen and (min-width: 2400px) {body {font-size: 1.5em;}}
@media screen and (min-width: 2800px) {body {font-size: 2em;}}
@media screen and (min-width: 3000px) {body {font-size: 2.5em;}}
@media screen and (min-width: 3400px) {body {font-size: 3em;}}