@import url(/css/normalize.css);

/*Styles for HTML tags*/

body{
	font-family:'NanLight', sans-serif;
	font-size:16px;
	margin:0;
	padding:0;
	color:#646464;
	line-height:1.5em;
}
h1{
	font-weight:400;
	color:#0f7964;
	font-size:160%;
	text-align:left;
	font-weight:300;
	margin:30px 0 15px 0;
	line-height:1.5em;
}
h2{
	font-weight:400;
	color:#383838;
	font-size:130%;
	text-align:left;
	font-weight:300;
	line-height:1.5em;
}
h3{
	color:#383838;
	font-size:110%;
	text-align:left;
	font-weight:300;
	line-height:1.5em;
}
h1:before,
h2:before,
h3:before,
h4:before,
h5:before{
	content:"";
	display:block;
	height:100px;
	margin:-100px 0 0;
}
a:link,
a:visited,
a:active{
	color:#2c6fad;
	text-decoration:none;
}
a:link:hover,
a:visited:hover,
a:active:hover{
	color:#63a4e1;
}
a img,
a:link img,
a:visited img,
a:active img{
	border:0;
}
blockquote{
	margin-left:0;
	margin-bottom:18px;
	border-left:5px solid #eee;
	padding-left:15px;
}
pre{
	background-color:#f5f5f5;
	display:block;
	padding:17px;
	margin:0 0 18px;
	line-height:18px;
	font-size:12px;
	border:1px solid #ccc;
	white-space:pre;
	overflow-y:auto;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
}
pre code{
	font-size:12px;
	padding:0;
	border:0;
}
code{
	padding:2px 4px;
	background-color:#f5f5f5;
	font-size:14px;
	border:1px solid #ccc;
}
ul,ol{
	padding-left:20px;
	margin-left:0;
}
ul ul{
	list-style-type:disc;
}
li{
	margin:10px 0;
}
li p{
	margin:0;
}
table td,table th{
	padding:10px;
	border:1px solid #ddd;
}
table tr.even td{
	background-color:#f8f8f8;
}

/*Styles for whole website*/

@font-face{
    font-family:'NanLight';
    src: url('/font/nanlight-webfont.eot');
    src: url('/font/nanlight-webfont.eot?#iefix') format('embedded-opentype'),
         url('/font/nanlight-webfont.woff') format('woff'),
         url('/font/nanlight-webfont.ttf') format('truetype'),
         url('/font/nanlight-webfont.svg#nanlight') format('svg');
    font-weight:300;
    font-style:normal;
}
@font-face{
    font-family:'NanLight';
    src: url('/font/nanlightbold-webfont.eot');
    src: url('/font/nanlightbold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/font/nanlightbold-webfont.woff') format('woff'),
         url('/font/nanlightbold-webfont.ttf') format('truetype'),
         url('/font/nanlightbold-webfont.svg#nanlight') format('svg');
    font-weight:700;
    font-style:normal;
}

.headercontainer{
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:1000;
	background-color:#fff;
}
.header{
	max-width:900px;
	margin:0 auto;
	position:relative;
	border-bottom:2px solid #ebebeb;
}

.logo{
	display:block;
	position:absolute;
	left:0;
	top:20px;
	z-index:1000;
}

.menu{
	margin:0;
	padding:0;
	text-align:right;
	position:relative;
	right:-10px;
}
.menu li{
	list-style:none;
	display:inline-block;
	position:relative;
	padding:0 10px;
	margin:0 5px;
}
.menu li a{
	font-size:120%;
	display:block;
	padding:25px 0;
	text-decoration:none;
	color:#2c6fad;
	white-space:nowrap;
	border-bottom:2px solid transparent;
	position:relative;
	bottom:-2px;
}
.menu li:hover a,
.menu li.active a{
	color:#2c6fad;
	border-bottom:2px solid #2c6fad;
}

.menumobile{
	display:none;
}
	
.content{
	position:relative;
	padding:0 10px 40px 10px;
	text-align:justify;
	min-height:400px;
	max-width:900px;
	margin:100px auto 200px auto;
}

.toc{
	position:absolute;
	text-align:left;
	margin-left:-20px;
}
.toc div{
	top:105px;
	position:fixed;
	overflow-y:auto;
	overflow-x:hidden;
}
.toc ul,
.toc li{
	list-style:none;
	padding:0;
	margin:0;
}
.toc ul{
	width:200px;
	border-right:2px solid #ebebeb;
	padding:0 20px 0 0;
	margin-top:-10px;
}
.toc ul li ul{
	padding:10px 0 0 0;
	border:0;
}
.toc ul li a{
	display:block;
	padding:5px 0 5px 20px;
	font-weight:bold;
}
.toc ul li a.active:before{
	content:">";
	position:absolute;
	font-weight:bold;
	left:0px;
}
.toc ul li ul li a{
	font-weight:normal;
}
.toc ul li ul li ul li{
	padding-left:10px;
}
.toccontent{
	width:680px;
	margin:auto 0 auto auto;
	position:relative;
	text-align:left;
}

.floaticon{
	width:42px;
	height:42px;
	float:left;
	margin-right:6px;
}

.features{
	padding-left:0;
	margin:-10px 0 -10px -15px;
	text-align:left;
}
.features li{
	display:inline-block;
	vertical-align:top;
	width:47%;
	margin:10px 0px 10px 15px;
}

.projectsbadge{
	float:right;
	margin:-10px 0px 20px 20px;
	text-align:center;
	font-size:80%;
}
.projectsbadge a{
	margin:4px 6px;
	display:inline-block;
}
.projectsbadge span{
	margin-top:8px;
	display:inline-block;
}
.projectsbadge img{
	width:50px;
	height:50px;
}

/*Styles for code highlighting*/

.highlight  { background: #ffffff; }
.highlight .c { color: #999988; font-style: italic } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { font-weight: bold } /* Keyword */
.highlight .o { font-weight: bold } /* Operator */
.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #aa0000 } /* Generic.Error */
.highlight .gh { color: #999999 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #555555 } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
.highlight .kc { font-weight: bold } /* Keyword.Constant */
.highlight .kd { font-weight: bold } /* Keyword.Declaration */
.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
.highlight .kr { font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #009999 } /* Literal.Number */
.highlight .s { color: #d14 } /* Literal.String */
.highlight .na { color: #008080 } /* Name.Attribute */
.highlight .nb { color: #0086B3 } /* Name.Builtin */
.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
.highlight .no { color: #008080 } /* Name.Constant */
.highlight .ni { color: #800080 } /* Name.Entity */
.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
.highlight .nn { color: #555555 } /* Name.Namespace */
.highlight .nt { color: #000080 } /* Name.Tag */
.highlight .nv { color: #008080 } /* Name.Variable */
.highlight .ow { font-weight: bold } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mf { color: #009999 } /* Literal.Number.Float */
.highlight .mh { color: #009999 } /* Literal.Number.Hex */
.highlight .mi { color: #009999 } /* Literal.Number.Integer */
.highlight .mo { color: #009999 } /* Literal.Number.Oct */
.highlight .sb { color: #d14 } /* Literal.String.Backtick */
.highlight .sc { color: #d14 } /* Literal.String.Char */
.highlight .sd { color: #d14 } /* Literal.String.Doc */
.highlight .s2 { color: #080 } /* Literal.String.Double */
.highlight .se { color: #d14 } /* Literal.String.Escape */
.highlight .sh { color: #d14 } /* Literal.String.Heredoc */
.highlight .si { color: #d14 } /* Literal.String.Interpol */
.highlight .sx { color: #d14 } /* Literal.String.Other */
.highlight .sr { color: #009926 } /* Literal.String.Regex */
.highlight .s1 { color: #d14 } /* Literal.String.Single */
.highlight .ss { color: #990073 } /* Literal.String.Symbol */
.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #008080 } /* Name.Variable.Class */
.highlight .vg { color: #008080 } /* Name.Variable.Global */
.highlight .vi { color: #008080 } /* Name.Variable.Instance */
.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */

/*Styles specific to mobiles*/

@media handheld, only screen and ( max-width: 60em ), only screen and ( max-device-width: 60em ){
	h1,
	h2,
	h3,
	h4,
	h5{
		text-align:center;
	}
	h1:before,
	h2:before,
	h3:before,
	h4:before,
	h5:before{
		height:80px;
		margin:-80px 0 0;
	}
	pre{
		overflow:visible;
		padding:10px;
		display:table;/* This workaround creates a block formatting context so the content can overflow outside of the container */
		width:100%;
		box-sizing:border-box;
	}
	img{
		max-width:100%;
	}
	.logo{
		top:10px;
		left:10px;
	}
	.header{
		position:static;
	}
        .menucontainer{
		display:none;
		background-color:#fff;
		border-top:2px solid #ebebeb;
		overflow-y:auto;
		position:fixed;
		top:60px;
		left:0;
		right:0;
		bottom:0;
        }
	.menucontainer.menuvisible{
		display:block;
	}
	.headercontainer{
		padding-top:60px;
	}
	.menumobile{
		display:block;
		position:absolute;
		background:url('/img/menumobile.svg') no-repeat;
		width:40px;
		height:40px;
		top:10px;
		right:10px;
		cursor:pointer;
	}
	.menu{
		display:none;
		position:static;
		padding:10px 0;
		border-bottom:2px solid #ebebeb;
	}
	.menucontainer.menuvisible .menu{
		display:block;
	}
	.menu li{
		display:block;
	}
	.menu li a{
		padding:15px 0;
		text-align:center;
	}
	.menu li:hover a,
	.menu li.active a{
		font-weight:bold;
		border-color:transparent;
	}
	.toc{
		display:none;
		position:static;
		text-align:center;
		margin:0;
	}
	.menucontainer.menuvisible .toc{
		display:block;
		padding:10px;
	}
	.toc div{
		position:static;
	}
	.toc ul{
		width:auto;
		margin:auto;
		border:0;
		padding:0;
	}
	.toc ul li a {
		font-weight:bold;
		font-size:110%;
		padding:10px 0;
	}
	.toc ul li a.active:before{
		content:"";
	}
	.toc ul li a:hover,
	.toc ul li a.active{
		font-weight:bold;
		color:#2c6fad;
	}
	.toc ul li ul{
		padding:0;
	}
	.toc ul li ul li a{
		font-weight:normal;
	}
	.toc ul li ul li ul li{
		padding:0;
	}
	.toc ul li ul li ul li a{
		font-size:95%;
	}
	.toccontent{
		width:auto;
	}
	.content{
		text-align:left;
		margin-top:90px;
	}
	.projectsbadge{
		float:none;
		margin:20px 0;
	}
}
@media handheld, only screen and ( max-width: 40em ), only screen and ( max-device-width: 40em ){
	.features li{
		width:auto;
	}
}