/*
* CSS for johannes.emerich.de/
*/

/*** Page Layout ***/

html {
  margin:0;
  padding:0 0 0 5em;
}
body {
  font-family:Palatino, serif;
  font-size:120%;
  background-color:#fff;
  color:#2C1313;
  max-width: 30em;
}
p.block {
  max-width: 30em;
  margin: 0;
}
body > p:first-child {
  text-decoration:underline;
  white-space: nowrap;
  margin-top: 1em;
}
#name {
  font-style: italic;
  font-size: 118%;
}
h1 {
  margin-top: 1em;
  padding-bottom: 0.1em;
  padding-top: 0.1em;
  font-size: 150%;
}
h2 {
  font-size: 125%;
}
h2.often {
  border-right: 3px solid #B81714;
}
h2.frequently {
  border-right: 3px solid #B6B814;
}
h2.sometimes {
  border-right: 3px solid #278B1B;
}
h2.seldom {
  border-right: 3px solid #1B6A8B;
}
code {
  font-family: 'Monaco', 'Consolas', 'Courier', monospace;
  font-size: 85%;
}
ul {
  list-style-type: lower-greek;
}
* html ul {
  list-style-type: lower-latin;
}

#disclaimer {
  display: none;
}

/*** Heatmap Legend ***/

#legend {
  margin:2em 0;
  padding:0;
  font-size:90%;
}
#legend dt, dd {
  margin:0 0.1em 0 0;
  display:inline-block;
  vertical-align:middle;
}
#legend dd {
  margin: 0 1em 0 0.5em;
}
#legend dt {
  padding:0;
  width:1em;
  height:1em;
  text-indent: 2em;
  overflow:hidden;
  display:inline-block;
}
#legend *.interactive {
  cursor: pointer;
}
#legend dt.interactive.activated:hover, #legend dt.activated.hover {
  background-image: url('images/crossout.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
#often {
  color:#B81714;
  background-color:#B81714;
}
#frequently {
  color:#B6B814;
  background-color:#B6B814;
}
#sometimes {
  color:#278B1B;
  background-color:#278B1B;
}
#seldom {
  color:#1B6A8B;
  background-color:#1B6A8B;
}
#explanation {
  max-width: 25%;
  padding: 0.5em;
  background-color: #528CE0;
  -webkit-box-shadow: 15px 15px 9px #bbb;
  -moz-box-shadow: 15px 15px 9px #bbb;
  box-shadow: 15px 15px 9px #bbb;
  font-size: 90%;
  line-height: 125%;
  color: #fff;
}
#explanation:before {
  content: '.';
  display: block;
  overflow: hidden;
  position: absolute;
  top: 3px;
  left: -13px;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent; 
  border-right: 13px solid #528CE0;
}

/* Non-tracked links */
a:link, a:visited {
  color: #528CE0;
}

/*** Heat Map ***/

a.often {
  color:#B81714;
}
a.frequently {
  color:#B6B814;
}
a.sometimes {
  color:#278B1B;
}
a.seldom {
  color:#1B6A8B;
}
a:hover {
	text-decoration: none;
}

/*** Images ***/

#social a {
  text-decoration:none;
}

#social a:visited:after {
  content:"";
}

a.often img, a.frequently img, a.sometimes img, a.seldom img {
  padding-bottom:3px;
  border-width: 0 0 3px 0;
  border-style: solid;
}
a.often img {
  border-color: #C2707C;
}
a.frequently img {
  border-color: #CAC868;
}
a.sometimes img {
  border-color: #7EB15A;
}
a.seldom img {
  border-color: #5A83B1;
}


/*** Text ***/

p.block {
	line-height: 150%;
}

/*** Blog Entry ***/
#entry {
	margin-top: 1em;
	padding-top: 1em;
	max-width: 30em;
	border: 1px solid #ACB2B9;
	border-width: 1px 0;
}
#entry h1 {
	margin: 0;
	padding: 0;
	font-size: 1.5em;
}
#entry *.date {
	font-family: Monaco;
	font-size: 9px;
	margin: 0 1em 0 0;
	padding: 1em;
	float: left;
	background-color: #ACB2B9;
	color: #fff;
}
#entry *.text {
	clear: both;
	margin: 0.5em 0;
	padding: 0;
}
#entry blockquote {
	font-style: italic;
}