html {
	overflow-y: scroll;
}
html,body {
	margin:0;
	padding:0;

	height: 100%;

	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	background: #E2F6FF; /* Old browsers */
	/* IE9 #pc svg, needs conditional override of 'filter' to 'none' */
	background: url(data:image/#pc svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZTJmNmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-radial-gradient(center, ellipse cover,  #ffffff 0%, #e2f6ff 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2f6ff)); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 0%,#e2f6ff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover,  #ffffff 0%,#e2f6ff 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover,  #ffffff 0%,#e2f6ff 100%); /* IE10+ */
	background: radial-gradient(ellipse at center,  #ffffff 0%,#e2f6ff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2f6ff',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}
h1,h2,h3,h4,h5,h6 {
	text-rendering: optimizeLegibility;
}
a {
	text-decoration: none;
	color:#006AAD;
}
a:hover {
	color:#A06535;
}
#header {
	width:80%;
	min-width: 960px;
	margin:0 auto 10px;
	padding-bottom:5px;
	position: relative;
}
#header h1 {
	font-size: 23px;
	color:#A06535;
	font-weight: 400;
	margin:0;
	text-align: center;
	padding: 0;
}
#header h1 b{
	font-weight: 700;
}
#header h2 {
	font-size: 13px;
	color:#666;
	font-weight: 300;
	margin:0;
	text-align: center;
	padding: 0;
	text-transform: uppercase;
}
#pc {
	width:80%;
	min-width: 960px;
	margin:0 auto;
	min-height:400px;
	position: relative;
}
#pc div#tooltip {
	position: absolute;
	font-size:11px;
	
	top:0;
	bottom:0;
	z-index:9;
	font-size: 11px;
	color:#333;
	display: none;
}
#pc div#tooltip div {
	width: 180px;
	background: rgba(0,0,0,0.8);
	padding:5px;
	color:#fff;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
#pc div#tooltip.visible {
	display: block;
}
#pc div#tooltip h4 {
	margin: 2px;
	font-weight: 400;
	text-transform: uppercase;
}
#pc svg {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	margin:0 auto;
	display: block;
}
#pc svg #columns line {
	shape-rendering: crispEdges;
	stroke:#666;
	stroke-width:1;
	fill:none;
}
#pc svg #languages circle {
	stroke:none;
	fill:#333;
}
#pc svg #languages path {
	stroke:#A06535;
	stroke-opacity:0.2;
	stroke-width:1;
	fill:none;
}

#pc svg #languages text {
	fill:#000;
	font-size: 12px;
	text-anchor: end;
	
}
#pc svg #languages g .lang-label {
	cursor: pointer;
}
#pc svg #languages g.new .lang-label text {
	fill:#339933;
}
#pc svg #languages g.hover .lang-label text,
#pc svg #languages g.highlight .lang-label text,
#pc svg #languages g.year .lang-label text {
	fill-opacity:1;
	fill:#fff;
}
#pc svg #languages .lang-label rect {
	fill:#A06535;
	fill-opacity:0;
}
#pc svg #languages g.hover .lang-label rect,
#pc svg #languages g.year .lang-label rect {
	fill-opacity:1;
}
#pc svg #languages g.highlight .lang-label rect {
	fill-opacity:1;	
	fill:#333;
}
#pc svg #languages g.hover .lang-label rect.hover {
	fill-opacity:0;
}
#pc svg #labels .label text {
	
	fill-opacity:0;
	text-anchor:middle;
	font-weight: normal;
	fill:#333;
}
#pc svg #labels .label rect.ix {
	fill:#000;
	fill-opacity:0;
	cursor: pointer;
}
#pc svg #labels g.label path.label {
	fill:#fff;
	stroke:#A06535;
	fill-opacity:0.8;
	stroke-opacity:0.8;
	display: none;
}

#pc svg #labels g.hover .label path.label,
#pc svg #labels g.hover .label text {
	font-size:12px;
	display: block;
	fill-opacity:1;
}
#pc svg #labels g.hover .label path.label {
	fill-opacity:0.8;	
}
#pc svg #labels g.hover.year .label path.label,
#pc svg #labels g.hover.year .label text {
	display: none;
	fill-opacity:0;
}

#pc svg #labels g.hover.year .label:last-child text {
	display: block;
	fill-opacity:1;
}
#pc svg #labels g.hover.year .label.year text {
	display: block;
	fill-opacity:1;
}
#pc svg #languages g.highlight g.connection path,
#pc svg #languages g.highlight g.connection.year path,
#pc svg #languages g.hover g.connection path,
#pc svg #languages g.year g.connection path {
	stroke:#A06535;
	stroke-opacity:0.8;
	stroke-width:3;
}
#pc svg #languages g.highlight g.connection path,
#pc svg #languages g.highlight g.connection.year path,
#pc svg #labels g.highlight g.label path.label {
	stroke:#333;
}
#pc svg #languages .connection path.hover {
	stroke-opacity:0;
	stroke-width:10;
}

#pc svg #languages .marker circle {
	fill:#333;
	fill-opacity:1;
}
#pc svg #languages .marker circle.hover {
	fill:#A06535;
	fill-opacity:0.2;
}
#pc svg #languages .marker.ordinal circle {
	fill-opacity:0;
}
#pc svg #languages .marker text {
	text-anchor:middle;
	font-size:10px;
	fill:#333;
}
#pc svg #languages .marker line {
	stroke-width:4;
	stroke:#333;
	stroke-opacity:0;
}
#pc svg #languages .marker rect {
	shape-rendering: crispEdges;
	stroke-width:1;
	stroke:#A06535;
	stroke-opacity:0;
	fill-opacity:0;
}
#pc svg #languages .marker.ordinal line {
	stroke-opacity:1;
}
#pc svg #languages .marker.ordinal rect {
	stroke-opacity:0.5;
	fill-opacity:1;
}
#pc svg #languages g.hover .marker rect,
#pc svg #languages g.year .marker rect {
	stroke-width:1;
	stroke-opacity:1;
}
#pc svg #languages g.highlight .marker rect {
	stroke:#333;
	stroke-opacity:1;
}
#pc svg .column text.title {
	text-anchor:middle;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 400;
	cursor: help;
}
#pc svg .column text.title.first {
	text-anchor:end;
}
#pc svg #columns g.axis {
	
}
#pc svg #columns g.axis line {
	shape-rendering: crispEdges;
	stroke:#777;
	stroke-width:1;
}
#pc svg #columns g.axis g.tick text {
	font-size: 10px;
	fill:#777;
	text-anchor:middle;
}
#pc svg #columns g.axis g.tick.start text {
	text-anchor:start;
}
#pc svg #columns g.axis g.tick.end text {
	text-anchor:end;
}
#contents {
	width:100%;
	max-width:960px;
	margin:0 auto;
	overflow: hidden;
}
#contents .description {
	margin:20px 100px;
	padding:10px;
	color:#111;
	font-size: 13px;
}
#contents .description h5 {
	font-size: 15px;
	color: #000;
	font-weight: 400;
	margin: 0;
	text-align: center;
	padding: 0;
	text-transform: uppercase;
}
#footer {
	width: 600px;
	margin:0 auto 10px;
	padding-bottom:5px;
	font-size:12px;
	text-align: center;
}
#footer #licence {
	font-size: 10px;
	width:280px;
	margin: 0 auto;
	text-align: center;
	margin-top: 20px;
	padding-top: 10px;
	clear: both;
}
#footer #licence div{
	text-align: left;
}
#footer #licence a {
	color:#000;
	text-decoration: none;
}
.no-touch #footer #licence a:hover {
	color:gold;
}
#footer #licence a.cc {
	float:left;
	margin-right: 10px;
}
.social {
	text-align: center;
	font-size: 23px;
	width: 110px;
	height: 23px;
}
.social.social-top {
	position: absolute;
	right:20px;
	top:5px;
	font-size:20px;
}
#footer .social {
	position: relative;
	margin: 10px auto;
}
#footer .social a,
.social-top a {
	text-decoration: none;
	font-size: 11px;
	color: #666;
	background-color: transparent;
	-webkit-border-radius: 11px;
	border-radius: 11px;
	width: 19px;
	height: 20px;
	line-height: 20px;
	display: block;
	float: left;
	margin: 0 3px;
	border:1px solid #999;
}
.social-top a {
	background-color: transparent;
	border:1px solid #999;
}
#footer .social a:hover,
.social-top a:hover {
	background-color:#fff;
	color:#000;
	border-color:#000;
}
#footer .social a span,
.social-top a span {
	display: block;
	font-size: 10px;
	font-weight: normal;
}

@font-face {
  font-family: 'githut';
  src: url('../font/githut.eot?66889746');
  src: url('../font/githut.eot?66889746#iefix') format('embedded-opentype'),
       url('../font/githut.woff?66889746') format('woff'),
       url('../font/githut.ttf?66889746') format('truetype'),
       url('../font/githut.svg?66889746#githut') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'githut';
    src: url('../font/githut.svg?66889746#githut') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "githut";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
     
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-github:before { content: '\e800'; } /* '' */
.icon-twitter:before { content: '\e801'; } /* '' */
.icon-gplus:before { content: '\e802'; } /* '' */
.icon-facebook:before { content: '\e803'; } /* '' */