body {
  background-color: #ffd6e7;
  background-image: url("images/main.png");
  background-repeat: repeat;
	background-position: 50% -240px;
	background-attachment: scroll;
  font-size: 18px;
  font-family: "wondermagic", "windows";
  margin: 0;
  
}

p {
  line-height: 1.6em; /*I find the default HTML line-height tends to be a bit claustrophobic for main text*/
}
#content li {
  line-height: 1.6em; /*I find the default HTML line-height tends to be a bit claustrophobic for main text*/
}

a:hover, a:focus {
  background-color: #ffbedb;
}

img {
  max-width: 100%;
  height: auto;
}
.right {
  float: right;
  margin-left: 1em;
}
.left {
  float: left;
  margin-right: 1em;
}
.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
@media only screen and (min-width: 600px) {
  .small {
  max-width: 60%;
  height: auto;
  }
}
.caption {
  margin-top: 0;
  font-size: 0.9em;
  font-style: italic;
}

/*The horizontal rule appears at the top of the footer to visually separate the footer
from the content. You can also use <hr> to divide sections in the content!*/
hr {
  border-width: 5px 0 0 0;
  border-style: dotted;
  border-color: #ff75af; 
}

/*#CONTAINER is the rectangle that has contains everything but the background!*/
#container {
  margin: 3em auto;
  width: 90%;
	max-width: 700px;
	background-color: white;
  color: #830037; 
  border-radius: 30px 30px 20px 20px;
  overflow: hidden;
  box-shadow: 0 -2px 10px 0 #d70552 inset;
}

#content {
  padding: 10px 5% 20px 5%;
  font-family:  "windows";
}


/*HEADER STYLE*/
#header {
  position: relative; /*doesn't change this element, but needed for the pink ring's positioning*/
  background-color: #f9a8ca;
  padding: 0 5%;
  border-color: #ff75af;
  border-style: solid;
  border-width: 0 0 5px 0;
  background-clip: padding-box;
  box-shadow: 0 -2px 12px 0 #d70552 inset;
  /*This is a workaround for the fact that overflow:hidden on parent element apparently didn't work in older versions of firefox:
  https://stackoverflow.com/questions/3714862/forcing-child-to-obey-parents-curved-borders-in-css*/
  -moz-border-radius: 20px; 
  font-family: "windows";
}
#header ul {
  display: inline-block;
  list-style-type: none;
  padding: 0;
  margin-bottom: 1em;
  margin-top: 1em;

}
#header li {
  font-size: 1.2em;
  display: inline-block;
  margin-right: 0.5em;
  margin-bottom: 0.7em;
  margin-top: 0.7em;
 
}
#header li a {
  color:  #830037e;
  background-color: #c99eb0;
  border-radius: 25px;
  border: 3px solid #ff65a6;
  padding: 6px 30px;
  box-shadow: 0 -2px 12px 0 #5d0a3c inset;
  text-transform: lowercase;
  text-decoration: none;
}
#header li a:hover {
  background-color: #ff65a6;
  text-decoration: none;
}
#header li a:active {
  background-color: #ff65a6;
  text-decoration: none;
  box-shadow: 0 -2px 12px 0 #fe83ff inset;
}
/*Floating ring*/
#header:after {
    position: absolute;
    right: 5%;
    bottom: -27px;
    content: '';
    background-color: #ffd6e7;
    box-shadow: 0 -1px 8px 0 #ffeaf3 inset;
    border-radius: 50%;
    border: 5px solid #ff75af;
    width: 40px;
    height: 40px;
    font-family:  "windows";
    pointer-events: none;
}

/*POST LIST STYLE*/
#postlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  font-family:  "windows";
  list-style-type: none;
}
#recentpostlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  font-family:  "windows";
  list-style-type: none;
}
.moreposts {
  font-size: 0.8em;
  margin-top: 0.2em;
  font-family:  "windows";
}

/*NEXT AND PREVIOUS LINKS STYLE*/
#nextprev {
  text-align: center;
  margin-top: 1.4em;
}

/*DISQUS STYLE*/
#disqus_thread {
  margin-top: 1.6em;
}

/*FOOTER STYLE*/
#footer {
  font-size: 0.8em;
  padding: 0 5% 10px 5%;
  font-family:  "windows";
}
.divider {
height: 19px;
background-image: url("/images/candybar7.gif");
border: none;
}


/*FONTS STYLE*/
 h1 {
   font-family: "wondermagic";
 }
 @font-face {
    font-family: "wondermagic";
    src: url("https://dl.dropbox.com/s/96st2g32e05zhr1/Wonder%20Magic.ttf");
  }
 
  div {
    font-family: "wondermagic";
    font-size: 18px;
  }
@font-face {
    font-family: "windows";
    src: url("https://dl.dropbox.com/s/cn0l1yjacta4whv/W95FA.otf?#iefix") format("opentype");
   }
  body  {
    font-family: "windows";
  }
   h2 {
    font-family: "windows";
   }
   p2 {
      font-family: "windows";
   }

  
/* The sidebar menu */
Sidenav {
      height: 100%; /* Full-height: remove this if you want "auto" height */
      width: 160px; /* Set the width of the sidebar */
      position: fixed; /* Fixed Sidebar (stay in place on scroll) */
      z-index: 1; /* Stay on top */
      top: 0; /* Stay at the top */
      left: 0;
    	border: blue dashed 10px;
    	border-radius: 10px;
      background-color: #FF93B0;
      overflow-x: hidden; /* Disable horizontal scroll */
      padding-top: 20px;
    }
    
    /* The navigation menu links */
    .sidenav a {
      padding: 6px 8px 6px 16px;
      text-decoration: none;
      font-size: 25px;
      color: #818181;
      display: block;
    }
    
    /* When you mouse over the navigation links, change their color */
    .sidenav a:hover {
      color: #f1f1f1;
    }
    
    /* Style page content */
    .main {
      margin-left: 160px; /* Same as the width of the sidebar */
      padding: 0px 10px;
    }
    
    /* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
    @media screen and (max-height: 450px) {
      .sidenav {padding-top: 15px;}
      .sidenav a {font-size: 18px;}
    }