body
{
	font-family: Helvetica;
}
p
{
	font-family: Helvetica;
	font-size: 12pt;
	font-weight: 110;
	line-height: 1.8;
}

h1
{
	text-align: center;
	font-family: "Courier New", Courier, monospace;
	font-size: 6vw;
	font-weight: 500;
	font-variant: small-caps;
	letter-spacing: 0.75ex;
	word-spacing: 1.50ex;
}

div.subtitle
{
	text-align: center;
	font-family: "Courier New", Courier, monospace;
	font-size: 10pt;
	font-weight: 500;
	font-variant: small-caps;
	letter-spacing: 4ex;
	word-spacing: 6ex;
}

tiny {
 font-size: 9pt;
}

small {
 font-size: 11pt;
}

h2
{
	text-align: left;
	font-size: 16pt;
	font-weight: 600;
	letter-spacing: 0.25ex;
}

h2:before
{
	font-family: "STIXGeneral";
	color: gray;
	content: "⊣";
}

h2:after
{
	font-family: "STIXGeneral";
	color: gray;
	content: "⊢";
}

h3
{
	font-family: "Courier New", Courier, monospace;
	text-align: left;
	font-variant: small-caps;
	font-size: 15pt;
	font-weight: 500;
}

h4
{
	text-align: center;
	font-family: "Courier New", Courier, monospace;
	font-size: 4vw;
	font-weight: 500;
	font-variant: small-caps;
	word-spacing: 3ex;
}
h5
{
	text-align: center;
	font-family: "Courier New", Courier, monospace;
	font-size: 25pt;
	font-weight: 500;
	font-variant: small-caps;
	word-spacing: 6ex;
}
.main
{
	font-family: Helvetica;
}
ul
{
	list-style-type: disc;
	line-height: 1.8;
}

ul > li:before
{
	font-family: "STIXGeneral";
	color: gray;
	display: marker;
	text-align: center;
	font-weight: 110;
	line-height: 1.8;
}
li{
  margin: 15px 0;
}

blockquote
{
	line-height: 1.8;
}

a:link
{
	color: black;
	text-decoration: underline;
}

a:visited
{
	color: black;
	text-decoration: underline;
}

a:hover
{
	background: pink;
}

img
{
	width: 30%;
	height: auto;
}

img.pictures
{
   width:300px;
   height:300px;
}
img.thumbnails
{
   width:100px;
   height:100px;
}
img.header
{
   width:100%;
   height:auto;
}
.ImageBorder
{
    border-width: 1px;
    border-color: Black;
}


@font-face
{
	font-family: "STIXGeneral";
	src: url("fonts/stix/STIXGeneral.otf");
}

@font-face
{
	font-family: "Neo Euler";
	src: url("fonts/euler/euler.otf");
}

td
{
    padding:0 15px 0 15px;
}

img {
 border: 3px solid #444;
}

/***********/
/* Content */
/***********/

#content {
 width: 960px;
 padding-top: 0px;
 padding-left: 70px;
 padding-right: 70px;
 padding-bottom: 10px;
 background: #FFF;
 overflow: hidden;
 margin: 5px 0;
 border-radius:5px;
}

#content h1 {
 border-left: 3px solid #0099CC;
 border-bottom: 3px solid #0099CC;
 padding-left: 15px;
 padding-bottom: 2px;
 border-bottom-left-radius:5px;
}

#content h2 {
 padding-left: 5px;
}

#content ul {
 list-style-type: disc;
 margin-left: 20px;
 margin-right: 20px;
 padding-left: 30px;
 text-indent: 0px;
 font-size: 12pt;
 font-weight: 110;
 line-height: 1.8;
}

#content ol {
 margin-left: 20px;
 margin-right: 20px;
 padding-left: 10px;
 text-indent: 0px;
}

#content li a:hover {
 text-decoration: underline;
}

.courseTitle {
 width: 890px;
 padding-top: 30px;
 padding-left: 70px;
 padding-right: 0px;
 padding-bottom: 30px;
 background: #FFF;
 overflow: hidden;
 margin: 0px 0;
 border-radius:5px;
 font-size: 30pt;
 font-weight: 600;
 color: #444;
}

.contentBlock {
 width: 960px;
 padding-top: 10px;
 padding-bottom: 10px;
 background: #FFF;
 overflow: scroll;
 margin: 0px 0;
 /*border-bottom: 1px dotted #444;*/
}

#content p {
 margin-top: 15px;
 margin-bottom: 10px;
 margin-left: 15px;
}

.contentBlock table {
  width: 900;
}

.contentBlock td {
 font-size: 12pt;
 margin: 200px;
}

/***********/
/* Log */
/***********/
#courseLog {
 width: 960px;
 padding-top: 0px;
 padding-left: 20px;
 padding-right: 20px;
 padding-bottom: 10px;
 background: #FFF;
 overflow: hidden;
 margin: 5px 0;
 border-radius:5px;
}

#courseLog h1 {
 border-left: 75px solid #0099CC;
 padding-left: 15px;
 padding-bottom: 3px;
}

#courseLog h2 {
 font-size: 14pt;
 font-weight: 600;
 color: #444;
 text-decoration: none;
}

/***************/
/* Table Stuff */
/***************/
table {
 border-collapse: collapse;
 margin: 0px 0px;
 table-layout: fixed;
 width: 100%;
}

tr { 
 background: #FFF; 
}

tr.altrow { 
 background: #F9F9F9;	
}
	
th, td {
 text-align: left;			
 border-left: 1px solid #DDD;
 border-top: 1px solid #DDD;
 border-bottom: 1px solid #DDD;
 border-right: 1px solid #DDD;
}

th {
 color: #0099CC;
 background: #F0F0F0; 
 padding: 10px 10px;
 font-size: 14pt;
 font-weight: 600;
}

td {
 border-color: #DDD;	
 padding: 10px 10px;	
 word-wrap: break-word;
}

.wide {
  width: 160px;
}

.narrow {
	width: 400px;
}

/***********/
/* Animation */
/***********/

@keyframes heartbeat {
  0% {
    transform: scale( .25);
  }
  20% {
    transform: scale( .3);
  }
  40% {
    transform: scale( .25);
  }
  60% {
    transform: scale( .3);
  }
  80% {
    transform: scale( .25);
  }
  100% {
    transform: scale( .25);
  }
}

#heart {
  position: relative;
  width: 100px;
  height: 90px;
  animation: heartbeat 1s infinite;
}

#heart:before,
#heart:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  -moz-border-radius: 50px 50px 0 0;
  border-radius: 50px 50px 0 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
}

#heart:after {
  left: 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}