body { background: #ffffff; color: #555555; font: normal 100% Georgia, serif; }

.wrapper {
    width: 900px;
    margin: 0 auto;
}
.wrapper:after {
  content: "";
  display: table;
  clear:both;
}

@media (max-width: 900px) {
    .wrapper {
        width: 100%;
        padding: 0 10px;        
    }
}


.important_note {margin: 0; padding: 0;}
.blue {background: #00aad4; color: #ffffff; margin: 0; padding: 5px; border-bottom: 2px solid #999999;}
.orange {background: #dd8820; color: #ffffff; margin: 0; padding: 5px; border-bottom: 2px solid #999999;}

/* .header {margin: 0; padding: 20px 0 0 0; color: black; background: #ffffff url("images/bg_header.png") repeat-x 0 0; } */
.header {margin: 0; padding: 20px 0 0 0; color: black; background-color: #ffffff; } 
header a {font: normal 200% "Yanone Kaffeesatz", sans-serif; font-weight: 300; color: #000000; margin-left: 0px; text-decoration: none;}




h1 {font: normal 300% "Yanone Kaffeesatz", sans-serif; font-weight: 300; padding-bottom: 5px; color: #000000;}
h2 {font: normal 200% "Yanone Kaffeesatz", sans-serif; font-weight: 300; padding-bottom: 5px; color: #000000;}


nav, .block { margin: 0; padding: 0; display: block; float: left; background: #ffffff; color: #333333;  overflow: auto; width: 100%;}
nav:after, .block:after {clear: both;}

.content {padding: 0; color: #555555; background: inherit;}
.notes {padding: 0; color: #555555; background: inherit; font: normal 100% Georgia, serif;}

ul.disc {list-style: disc inside;padding: 0; margin: 0;}
li {margin: 0; padding: 0;}

figcaption {font: italic 100% Georgia, serif; padding: 0 0 15px 0; margin: 0;}
figure {padding: 15px 0 0 0; margin: 0;}
img {max-width: 100%;}

.PaddingTop {padding-top: 10px;}
.PaddingBottom {padding-bottom: 10px;}


a {
  color: #ff0052;
  text-decoration: none;
  display:inline-block; 
  margin:0;
}



a:after {
  display:block;
  content: '';
  border-bottom: solid 2px #ff0052;  
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
  transform-origin:  0% 50%;
}

.header a:hover, .header a:after,.header a:hover:after  {
  border: none !important;
  text-decoration: none!important;
}

a:hover:after, a:hover:before { transform: scaleX(1); }


cite {
  color: #ff0052;
}



/* pre {font: normal 100% serif; background: inherit; color: #339933;} */


p {
  font-family: Georgia, serif;
  font-weight: normal;
  line-height: 1.3em;
  font-size: 100%;
  text-rendering: optimizeLegibility;
  vertical-align: baseline;
  padding: 0 0 10px 0;
  margin: 0;
}

.abstract {font-style: italic; font-size: 110%;}

/* @media (min-width: 801px) */
/*@media (min-width: 801px) {*/
.content {float: left; width: 64%;}
.notes {float: right; width: 25%; font-size: 90%;}
.contentwidth {width: 64%;}



/* .footer {margin: 0; padding: 0; display: block; float: left; width: 100%; clear: both; background: #000000 url("images/bg_footer.png") repeat-x; border-top: 1px solid #000000; }*/
.footer {margin: 0; padding: 0; display: block; float: left; width: 100%; clear: both; background-color: #000000; border-top: 1px solid #999999; }
.footer .content {color: #bbbbbb; background: inherit;}
.footer .content a {color: #ff0052; background: inherit;}
.footer .notes {color: #bbbbbb; background: inherit;}
.footer .notes a {font-size: 120%; color: #bbbbbb; background: inherit; text-decoration: none;}
footer h1 {color:#bbbbbb;} 


/* @media (max-width: 800px) */
@media screen and (max-width: 800px) {
.content {float: none; width: auto;}
.notes {float: none; width: auto;}
figure {width: 100%;}
.fullwidth {width: 100%;}
h1 { margin-left:0;}
.mymath {margin-left: 0; float: left;}

/*.mymath:after {clear: both;}*/
}


/* From Chris Coyier's article :
https://css-tricks.com/dont-overthink-it-grids/

https://codepen.io/chriscoyier/pen/eGcLw
*/

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.grid {
  margin: 0; /* 0 0 20px 0; */
}
.grid:after {
  /* Or @extend clearfix */
  content: "";
  display: table;
  clear: both;
}

[class*='col-'] {
  width:100%;
}

@media (min-width: 900px) {

[class*='col-'] {
  float: left;
  padding-right: 20px;
}
.grid [class*='col-']:last-of-type {
  padding-right: 0;
}

.col-2-3 {
  width: 66.66%;
}

.col-1-3 {
  width: 33.33%;
}

.col-1-2 {
  width: 50%;
}

.col-1-4 {
  width: 25%;
}

.col-1-8 {
  width: 12.5%;
}

.module {
  padding: 20px;
  background: #eee;
}

/* Opt-in outside padding */
.grid-pad {
  padding: 20px 0 20px 20px;
}
.grid-pad [class*='col-']:last-of-type {
  padding-right: 20px;
}
}