@font-face {
  font-family: 'Arvo';
  src: url('./fonts/arvo/Arvo-Regular-webfont.eot?') format('eot'),
  url('./fonts/arvo/Arvo-Regular-webfont.woff') format('woff'),
  url('./fonts/arvo/Arvo-Regular-webfont.ttf') format('truetype'),
  url('./fonts/arvo/Arvo-Regular-webfont.svg#webfont8lr0n7CK') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Puritan';
  src: url('./fonts/puritan/Puritan_Regular-webfont.eot?') format('eot'),
  url('./fonts/puritan/Puritan_Regular-webfont.woff') format('woff'),
  url('./fonts/puritan/Puritan_Regular-webfont.ttf') format('truetype'),
  url('./fonts/puritan/Puritan_Regular-webfont.svg#webfontr5G3RCkZ') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Puritan';
  src: url('./fonts/puritan/Puritan_Italic-webfont.eot?') format('eot'),
  url('./fonts/puritan/Puritan_Italic-webfont.woff') format('woff'),
  url('./fonts/puritan/Puritan_Italic-webfont.ttf') format('truetype'),
  url('./fonts/puritan/Puritan_Italic-webfont.svg#webfontwEZaDp6E') format('svg');
  font-weight: normal;
  font-style: italic;
}
html {
  background:#EEE;
}
html, a {
  color:#606060;
}
h1 {
  font-family:'Puritan', Helvetica, Arial, sans-serif;
  font-size:25px;
  font-weight:bold;
  text-decoration:underline;
  margin-bottom:16px;
}
h2 {
  font-family:'Puritan', Helvetica, Arial, sans-serif;
  font-size:18px;
  font-weight:bold;
  text-decoration:underline;
  margin-bottom:16px;
}
h3 {
  font-family:'Puritan', Helvetica, Arial, sans-serif;
  font-size:16px;
  font-weight:bold;
  text-decoration:underline;
  margin-bottom:16px;
}
p, hr, code {
  margin-bottom:16px;
}
blockquote {
  font-style:italic;
  margin: 0 0 20px;
  padding: 9px 20px 0 19px;
  border-left: 1px solid #ddd;
}
em {
  font-style:italic;
}
ul,ol,li ul,li ol {
  margin-left:30px;
  margin-bottom:16px;
}
ul li {
  list-style-type:disc;
}
ol li {
  list-style-type:decimal;
}
.arvo {
  font-family:'Arvo', Rockwell, serif;
  font-weight:400;
  text-shadow:0 1px 0 #FFF;
  letter-spacing:0;
  word-spacing:0;
  line-height:1.2;
}
.puritan {
  font-family:'Puritan', Helvetica, Arial, sans-serif;
  font-weight:400;
  text-shadow:0 1px 0 #FFF;
  letter-spacing:0;
  word-spacing:0;
  line-height:1.2;
}
#content {
  display:table-cell;
  border-left:1px dotted #7F7F7F;
  height:590px;
  min-height:590px;
  vertical-align:middle
}
#content div.scroller {
  position:relative;
  height:590px;
  overflow:auto;
}
/*
.padded could have been combined into the .scroller class above (height 510px),
except an IE  bug causes no padding to be rendered on the bottom. So, use two divs.
 */
  #content div.scroller .padded {
    padding:40px;
  }
  #content a {
    color:#009BE3;
  }
  #content .button {
    color:#606060;
  }
  #content .jp-audio a {
    color:#606060;
  }
  .jp-audio ul li {
    list-style-type:none;
  }
  #footer {
    text-align:center;
    padding-top:17px;
    font-size:13px;
    border-top:1px dotted #7F7F7F;
    margin:20px auto;
    width:370px;
  }
  #header {
    font-size:40px;
    -moz-border-radius:10px 10px 0 0;
    -webkit-border-radius:10px 10px 0 0;
    border-radius:10px 10px 0 0;
    border-bottom:1px solid #DDD;
    padding:10px 15px;
    height:90px;
    overflow:hidden;
    text-align:right;

    background: #ffffff; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iI2U5ZTllYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iI2IwYWZhZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top, #ffffff 1%, #e9e9ea 20%, #b0afaf 90%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(20%,#e9e9ea), color-stop(90%,#b0afaf)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 1%,#e9e9ea 20%,#b0afaf 90%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 1%,#e9e9ea 20%,#b0afaf 90%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 1%,#e9e9ea 20%,#b0afaf 90%); /* IE10+ */
    background: linear-gradient(top, #ffffff 1%,#e9e9ea 20%,#b0afaf 90%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#b0afaf',GradientType=0 ); /* IE6-8 */
  }
  #header a {
    text-decoration:none
  }
  #header a:hover {
    color:#222;
  }
  #headerLinks {
    font-size:18px;
  }
  #headerLinks img {
    vertical-align:middle;
    height:16px;
    width:16px;
  }
  #innerWrapper {
    display:table;
    width:100%;
    border-top:1px solid #7F7F7F;
  }
  #loading {
    text-align:center;
    display:none
  }
  #navigation {
    display:table-cell;
    width:320px;
    font-size:20px;
    text-align:center;
    vertical-align:middle
  }
  #navigation .button {
    width:160px;
  }
  #outerWrapper {
    -moz-box-shadow:0 0 5px 0 #888;
    -webkit-box-shadow:0 0 5px 0 #888;
    box-shadow:0 0 5px 0 #888;
    margin:40px 40px 0 40px;
    -moz-border-radius:10px 10px 0 0;
    -webkit-border-radius:10px 10px 0 0;
    border-radius:10px 10px 0 0;
    border:1px solid #7F7F7F;
    background:#FFF;
    overflow:hidden;
  }
 #web_design_list {
    margin:0;
  }
  #web_design_list li {
    list-style-type:none;
    padding:20px;
  }
  #web_design_list .thumb {
    display:block;
    float:left;
    margin-right:20px;
    width:200px;
    height:200px;
    -webkit-box-shadow:0 0 10px 0 rgba(0,0,0,.5);
    -moz-box-shadow:0 0 10px 0 rgba(0,0,0,.5);
    box-shadow:0 0 10px 0 rgba(0,0,0,.5);
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
  }
  #web_design_list .thumb:hover {
    background-position:200px 0;
  }
  #web_design_list .description {
    display:table-cell;
    vertical-align:middle;
    height:200px;
  }
  #writingFooter {
    height:29px;
    line-height:30px;
    text-align:right;
    border-top:1px dotted #7F7F7F;
  }
  .button {
    display:inline-block;
    outline:none;
    cursor:pointer;
    text-align:center;
    text-decoration:none;
    font-size:30px;
    padding:15px 30px;
    text-shadow:0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius:.5em;
    -moz-border-radius:.5em;
    border-radius:.5em;
    -webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow:0 1px 2px rgba(0,0,0,.2);
    box-shadow:0 1px 2px rgba(0,0,0,.2);

    color:#606060;
    border:solid 1px #b7b7b7;
    background-color:#fff;

    background: #ffffff; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZGVkZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #ffffff 0%, #ededed 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#ededed 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#ededed 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#ededed 100%); /* IE10+ */
    background: linear-gradient(top,  #ffffff 0%,#ededed 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-8 */
      }

  .button:hover {
    text-decoration:none;

    background: #ffffff; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkY2RjZGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #ffffff 0%, #dcdcdc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dcdcdc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#dcdcdc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#dcdcdc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#dcdcdc 100%); /* IE10+ */
    background: linear-gradient(top,  #ffffff 0%,#dcdcdc 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dcdcdc',GradientType=0 ); /* IE6-8 */
  }
  .button:active {
    position:relative;
    top:1px;

    color:#999;

    background: #ededed; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VkZWRlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #ededed 0%, #ffffff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ededed 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ededed 0%,#ffffff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ededed 0%,#ffffff 100%); /* IE10+ */
    background: linear-gradient(top,  #ededed 0%,#ffffff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
  }
  .indented{
    padding-left:50px;
    padding-right:50px
  }
  .error {
    border:2px solid #F00;
    margin:20px;
    padding:10px;
    color:#000;
    background:#FFE0E0;
  }