/*@font-face {
  font-family: 'M+ 2c';
  font-style: normal;
  font-weight: lighter;
  src: local('M+ 2c'), local('mplus-2c-light'),
       url('style/fonts/mplus-2c-light.ttf') format('truetype');
}
@font-face {
  font-family: 'M+ 2c';
  font-style: normal;
  font-weight: bold;
  src: local('M+ 2c'), local('mplus-2c-medium'),
       url('style/fonts/mplus-2c-medium.ttf') format('truetype');
}*/
@font-face {
  font-family: 'M+ 1m';
  font-style: normal;
  font-weight: lighter;
  src: local('M+ 1m light'), local('mplus-1m-light'),
       url('style/fonts/mplus-1m-light.ttf') format('truetype');
}
@font-face {
  font-family: 'M+ 1m';
  font-style: normal;
  font-weight: bold;
  src: local('M+ 1m bold'), local('mplus-1m-bold'),
       url('style/fonts/mplus-1m-bold.ttf') format('truetype');
}

/* http://almaer.com/scrollbar/ */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
  display: block;
  height: 0px;
}
::-webkit-scrollbar-button:vertical:increment {
  background-color: transparent;
}
::-webkit-scrollbar-track-piece {
  background: #ccc url(scroll-bg.png) repeat-y scroll 0 0;
}
::-webkit-scrollbar-thumb:vertical {
  min-height: 10px;
  background-color: white;
}
::-webkit-scrollbar-thumb:horizontal {
  min-width: 10px;
  background-color: white;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #76B700;
}


* { padding:0; margin:0; }
html { overflow: auto; background-color: white; }
body {
  padding:0 0 2em 0; margin:0;
  background:white;
  color:#111;
  font:13px 'M+ 1m',georgia,serif;
  line-height:18px;
  font-weight: lighter;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	overflow-y: scroll;
	overflow-x: hidden;
}
@media only screen and (max-device-width:1024px) {
	body {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		overflow: auto;
	}
}

p {
  margin: 1em 0;
}
img { border:none; vertical-align:bottom; }
strong { font-weight:bold; }

h1,h2,h3,h4 {
  font-family: 'Helvetica Neue', helvetica, sans-serif;
  color:#333;
  margin: 1.618em 0 1em 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
}
h1,h2 { font-size: 18px; }
h3,h4,h5,h6 { font-size: 14px; }
h4 { color:#666; }
h5 { color:#888; }

a { text-decoration:none; }
a:link, a:active { color:#316d96; }
a:visited { color:#7e5494; }
a:link:hover, a:active:hover { color:#006be4; background:#e2f4ff; }
a:visited:hover { color:#af00cf; background:#f4e6ff; }
a > img { margin-bottom:-1px; }
a.img { border:none; background:transparent !important; }

/* Headlines */
content h1 > a, content h2 > a, content h3 > a, content h4 > a, content h5 > a,
    content h6 > a, content h1 > a:hover, content h2 > a:hover,
    content h3 > a:hover, content h4 > a:hover, content h5 > a:hover,
    content h6 > a:hover {
  color:inherit !important;
  background-color:transparent !important;
}
h1 > a:hover:after, h2 > a:hover:after, h3 > a:hover:after, h4 > a:hover:after,
  h5 > a:hover:after, h6 > a:hover:after { content:" #"; color:#ccc; }
content h2 { border-top:1px dashed #ddd; padding-top:0.618em; }
content h1, content h2, content h3, content h4 {
  background-position: left center;
  background-repeat:no-repeat;
}
content h1:first-child {
  border-top:none; padding-top:0; margin-top:0;
}
  content h1:first-child a {
    display:inline-block;
    background-image:url(minilove.svg);
    background-position: right 3px;
    background-repeat:no-repeat;
    padding-right:10px;
  }
/*content h3#recent { padding-left:18px; background-image:url(new.svg); }*/
/*content h3#dig-deeper { padding-left:18px; background-image:url(eye.svg); }*/

content h1:target, content h2:target, content h3:target {
  margin-left:-999em; margin-right:-999em;
  padding-left:999em; padding-right:999em;
  border-top:1px dashed #ddd;
  padding-top:1em;
}
/*content h1:target::before, content h2:target::before, content h3:target::before, content h4:target::before {
  content:"→";
  font-size:24px;
  line-height:31px;
  color:#980;
  background-color:#fe2;
  border-radius:16px; -webkit-border-radius:16px; -moz-border-radius:16px;
  text-align:center;
  width:32px;
  height:32px;
  margin-left:-64px;
  float:left;
  display:block;
}*/
/*content h1:target::before, content h2:target::before, content h3:target::before, content h4:target::before {
  content:"";
  background-image:url(you-are-here.svg);
  background-position: left center;
  background-repeat:no-repeat;
  width:64px;
  height:64px;
  margin-left:-84px;
  float:left;
  display:block;
}*/
content h1:target::before, content h2:target::before, content h3:target::before, content h4:target::before {
  content:"";
  background-image:url(you-are-here.svg);
  background-position: left center;
  background-repeat:no-repeat;
  width:64px;
  height:64px;
  margin-left:-84px;
  float:left;
  display:block;
}


/* Right-hand side fixed menu */
menu {
  display: block;
  position:fixed;
  right:12px; top:0;
  padding:2em 2em 2em 0.5em;
  background-color:#fff;
  opacity:0.2;
  font-family: 'Helvetica Neue', helvetica, sans-serif;
  text-rendering: optimizelegibility;
}
  menu li { list-style:none; font-weight:bold; }
  menu, menu a:link, menu a:visited, menu a:active { color:#999; }
  menu:hover { opacity:1.0; }
  menu:hover, menu:hover a:hover { color:#000; }
  /*menu a:link:hover::after { content:" →"; color:#006be4; }*/

/* no shortcut menu on mobile devices */
@media only screen and (max-device-width:1024px) {
  menu { display:none; }
}

content {
  display: block;
  width: 500px;
  margin:2em auto;
  /*background:rgba(255,200,100,0.2);*/
}

/* things that want to live in the left hand margin */
content img {
  display:inline-block;
  max-width:500px;
}
content img[in-left-margin] {
  max-width:128px;
  margin-left:-148px;
  display:block;
  float:left;
}

/* definition lists */
content dl {}
  content dt {
    display:inline-block;
    width:10em;
    overflow:hidden;
    text-align:right;
    margin-left:-11em;
    color:#000;
    vertical-align:top;
  }
  content dd {
    margin-top:-18px; /* same as line-height */
    display:block;
    color:#777;
  }

/* bullet lists */
content ul {
  list-style: disc url(bullet-gt.png) outside;
}
  content ul li {
  }

/* #webrel */
content ul#webrel { list-style: none; display:block; }
  ul#webrel li {
    display:inline-block;
    margin-left:2.2em;
  }
  ul#webrel li:first-child { margin-left:0; }
    ul#webrel li > a {
      display:block;
      background:transparent;
    }
    ul#webrel li img {
      display:block;
      vertical-align:bottom;
      opacity:0.6;
    }
    ul#webrel li > a:hover img { opacity:1; }
    ul#webrel li > a label { cursor:pointer; }
    ul#webrel li label {
      margin-top:0.4em;
      display:block;
      text-align:center;
      font:9px 'lucida grande',tahoma,sans-serif;
      color:#ccc;
    }
    ul#webrel li > a:hover label { color:#000; }