/**********************
*  	TRANSITIONS		  *
**********************/

a, a:link, a:visited, a:focus, a:hover, a:active, button, .button, .share-link, .open .share-link{
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

/**********************
*    	 COLORS 	  *
**********************/

body{ background: #f9f8f6; color: #444; }
aside{	background: #f9f8f6; border-left: 30px solid #FFF; border-right: 30px solid #FFF; border-bottom: 30px solid #FFF; }
.main-menu li.folder.level-1{ border-left: 4px solid #f9f8f6; }
.main-menu li.active.folder.level-1{ background: #fdfcfa; border-left: 4px solid #e0474c; }
.main-menu li a:focus, .main-menu li a:hover, .main-menu li a:active, .main-menu li.active.file a{ color: #e0474c; }
article {background: #FFF; }
article a, article a:link, article a:visited,
footer a, footer a:link, footer a:visited
.lead a, .lead a:link, .lead a:visited{ text-decoration: none; color: #e0474c; }
article a:focus, article a:hover, article a:active,
footer a:focus, footer a:hover, footer a:active
.lead a:focus, .lead a:hover, .lead a:active{ text-decoration: underline }
article .breadcrumb,article .paging a{ background: #f9f8f6; }
article .breadcrumb span a{ background: #e0474c; color: #f9f8f6; border: 1px solid #e0474c; }
article .breadcrumb a:focus,article .breadcrumb a:hover,article .breadcrumb a:active { background: #f9f8f6; color: #e0474c; }
article .breadcrumb button{ border: 1px solid #e0474c; color: #e0474c; background: #f9f8f6; }
article .breadcrumb button.active{ border: 1px solid #e0474c; color: #f9f8f6; background: #e0474c; }
article .paging a{ color: #e0474c; }
article .paging a:focus, article .paging a:hover, article .paging a:active{ color: #f9f8f6; background: #e0474c; }
header a span, .cover span{ color: #e0474c; }
header a, .cover{ color: #444; }
footer{ background: #FFF; }
.chapterNumber{ color: #bbb; }
.chapter h1{ border-bottom: 2px solid #f9f8f6; }
.cover .actionLink a, .cover .actionLink a:link, .cover .actionLink a:visited,
a.readMore, a.readMore:link, a.readMore:visited{ border: 2px solid #e0474c; background: #e0474c; color: #f9f8f6; }
.cover .lead a:focus, .cover .actionLink a:hover, .cover .actionLink a:active,
a.readMore:focus, a.readMore:hover, a.readMore:active{
	border: 2px solid #e0474c;
	color: #444;
	background: transparent;
	text-decoration: none;
}
pre,code{ color: #333; background: #f9f8f6; }
pre{ border-left: 4px solid #e0474c;	}
code.hljs{ background: transparent; }
.TOC li:before{ color: #bbb; }

/********************
*  		FONTS 	    *
********************/

body{
	font-family: Calibri, Helvetica, Arial, sans-serif;	
}
pre,code{
	font-family: monospace;
}

/********************
*  	   HEADLINES    *
********************/

h1, h2, h3, h4, h5, h6{ font-weight: 700; line-height: 1em; position: relative;}
h1{ font-size: 2.2em; margin: 1.4em 0 0.6em; }
h2{ font-size: 1.6em; margin: 1.3em 0 0.6em; }
h3{	font-size: 1.3em; margin: 1.2em 0 0.6em; }
h4{	font-size: 1.1em; margin: 1.2em 0 0.6em; }
h5{	font-size: 1em; margin: 1.2em 0 0.6em; }
h6{	font-size: 1em; font-style: italic; font-weight:300; margin: 1em 0 0.6em; }

/********************
*    STRUCTURE      *
********************/

html,body{
	padding: 0;
	margin:0;
}
html{
    /* Adjust font size */
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    /* Font varient */
    font-variant-ligatures: none;
    -webkit-font-variant-ligatures: none;
    /* Smoothing */
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
	text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
}
body{
	padding: 20px;
	font-size: 16px;
}
.main{
	display: block;
	margin: auto;
	max-width: 1200px;
}
header, aside, article{
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
}
header{
	width: 100%;
}
aside{
	display: block;
	padding: 0;
	margin: 0;
	left: 20px;
	right: 20px;
}
aside#tmnavigation{
	position: absolute;
	top: 175px;
}
article{
	width: 100%;
	position: relative;
}
.cover{
	display: block;
	margin: auto;
	max-width: 800px;
	text-align: center;
}
footer{
	margin: 20px 0;
	width: 100%;
}

/********************
*      HEADER       *
********************/
header{ 
	font-weight: 700;
	text-align: center;
}
header a{ 
	font-weight: 700;
	font-size: 2.5em;
	text-decoration: none;
}
header p{
	padding-top: 0;
	margin-top: 0;
}

/************************
*  		NAVIGATION  	*
************************/
.close{
	max-height: 0;
	transition: max-height 0.25s ease-out;
	overflow: hidden;
	z-index: -1;
}
.open{
	max-height: 2500px;
	transition: max-height 0.25s ease-in;
	overflow: hidden;
}
.main-menu{ 
	line-height: 1.4em; 
	padding-left: 0px;
	margin-left: 0px;
}
.main-menu a, .main-menu a:link, .main-menu a:focus, .main-menu a:hover, .main-menu a:active, .main-menu a:visited{
	text-decoration: none;
	color: #333;
}
.main-menu a:focus, .main-menu a:hover, .main-menu a:active, .main-menu a.active{}
.main-menu ul, .main-menu li{
	padding:0 5px;
	margin: 0;
	list-style: none;
	text-transform: none;
	font-size: 1em;
	font-weight: 300;
}
.main-menu li.folder{
	padding:5px;
}
.main-menu li.folder.level-1{
	padding-left: 15px;
}
.main-menu li.file.level-1{
	padding-left: 20px;
}
.main-menu > ul > li
{
	font-size: 0.8em;
}
.main-menu > ul > li.folder
{
	text-transform: uppercase;
	margin: 15px 0 5px;
	font-weight: 700;
}

/************************
*  		COVER		    *
************************/
.cover h1{ 
	font-size: 2.5em; 
	font-weight: 700;
}
.cover .actionLink a, a.readMore{
	display: inline-block;
	min-width: 100px;
	padding: 5px 10px;
	margin: 25px 5px;
	border-radius: 3px;
	font-size: 0.8em;
	line-height: 1.7em;
	text-align: center;
	text-decoration: none;
}
.cover.startpage h1{
	margin: 1em 0 0.6em;
}
.cover.startpage .breadcrumb{
	background: transparent;
}
.cover footer{
	background: transparent;
	width: 100%;
	float: none;
}

/************************
*  		TOC-NAV		    *
************************/

.toc-nav{
	display: inline-block;
	width: 100%;
	font-size: 0.8em;
	border-top: 2px solid #f9f8f6;
	padding-top: 50px;
	margin-bottom: 50px;
}
.cover .toc-nav{
	border-top: 0;
	margin-top: 100px;
}
.toc-nav ul, .toc-nav li{
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	list-style: none;
	text-transform: none;
	font-weight: 300;
}
.toc-nav li{
	box-sizing: border-box;
    width: 100%;
    display: inline-block;
    text-transform: capitalize;
	text-align: left;
}
.toc-nav li a {
    display: inline-block;
	margin: 5px 0;
    width: 100%;
    padding: 12px 8px;
    box-sizing: border-box;
}
.toc-nav li.level-1{
	padding-left: 0px;
	text-transform: uppercase;
	margin: 15px 0 5px;
	font-weight: 700;	
}
.toc-nav li.level-1 a{
	text-decoration: none;
	color: #444;
}
.toc-nav li.level-2{
    width: 100%;
    margin: 0% 1%;
}
.toc-nav li.level-2 a{
	background: #fdfcfa;	
	border-left: 2px solid #ddd;
	color: #444;
	text-decoration: none;
}
.toc-nav li.level-2 a:hover{
	background: #f4f3f1;
	border-left: 2px solid #e0474c;
}


/************************
*  		CHAPTER		    *
************************/
.chapterNumber, .chapter h1{
	text-align: center;
}
.chapterNumber{
	font-size: 1em;
	font-weight: 300;
	padding: 1.5em 0 0;
	margin: 0px
}
.chapter h1{
	text-transform: uppercase;
	padding-bottom: 40px;
}

/************************
*  		ARTICLE		    *
************************/
article{
	padding: 30px 30px;
	font-size: 1em;
	line-height: 1.35em;
}

img, figure,figure img{
	max-width: 100%;	
}
figure{
	display: table;
	margin: 2em auto;
	padding: 0;
}
figure.left{
	width: auto;
	float: left;
	margin: 0px 30px 30px 0;
}
figure.right{
	width: auto;
	float: right;
	margin: 0px 0px 30px 30px;	
}
figure img{
	display: block;
	margin: auto;
}
figcaption{
	display: table-caption;
	caption-side: bottom;
}


article img.youtube{
	position: relative;
	max-width: 560px;
}
.video-container{
	position: relative;
	text-align: center;
}
button.play-video { 
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -50px;
	margin-left: -50px;
	height: 100px;
	width: 100px;
	background: #e0474c;
	color: #FFFFFF;
	border-radius: 50%;
	border: 0px;
	padding: 0;
	text-align: center;
}
button.play-video:hover {
	background: #cc4146;
	cursor: pointer;
}
button.play-video::after {
	position: absolute;
	top: 50%;
	margin: -20px 0 0 -15px;
	height: 0;
	width: 0;
	border-style: solid;
	border-width: 20px 0 20px 40px;
	border-color: transparent transparent transparent rgba(255, 255, 255, 0.75);
	content: ' ';
}
article .gitlink{
	float: right;
}
.herocontainer{
	position: relative;
    margin: -30px -90px 0px;
    height: 300px;
	overflow: hidden;
}
.heroimage{
	width: 100%;
}
.herocontainer .breadcrumb{
	position: absolute;
	top: 30px;
	left: 10%;
	width: 80%;	
}
.notice1 {
    margin: 1em 0;
    padding: 10px 1em;
    background-color: #fdf0f0;
    border-left: 10px solid #d00;
}
.notice2 {
    margin: 1em 0;
    padding: 10px 1em;
    background-color: #fffbf0;
    border-left: 10px solid #fb0;
}
.notice3,
.notice4,
.notice5,
.notice6 {
    margin: 1em 0;
    padding: 10px 1em;
    background-color: #f0f8fe;
    border-left: 10px solid #08e;
}


/************************
*  	PAGING / BREADCRUMB *
************************/
article .paging, article .breadcrumb{
	position: relative;
	width: 100%;
	padding: 5px 0;
	font-size: 0.8em;
	border-radius: 3px;
	margin: 0 0 10px 0;
	box-sizing: border-box;
}
article .breadcrumb{
	display: inline-block;
	min-height: 40px;
}
article .paging a{
	display: inline-block;
	border-radius: 3px;
	padding: 5px 10px;
	text-decoration: none;
	width: 100%;
	margin: 5px 0;
	box-sizing: border-box;
}
article .breadcrumb a{
	text-decoration: none;
	padding: 5px;
}
article .paging{
	margin: 50px 0 30px;
}
article .paging .next{
	text-align: right;
}
article .breadcrumb span{
	position: absolute;
	top: 5px;
}
article .breadcrumb span a{
	display: inline-block;
	padding: 0px;
	border-radius: 50%;
	width: 25px;
	height: 25px;
	text-align: center;
}
article .breadcrumb span.prev{
	left: 5px;
}
article .breadcrumb span.next{
	right: 5px;
}
article .breadcrumb ul{
	display: none;
	list-style: none;
	padding: 0;
	margin: 0;
}
article .breadcrumb ul li{
	display: inline-block;
	padding:0;
	margin:0;
}
article .breadcrumb ul li:before{
	content: '>';
}
article .breadcrumb ul li:first-child:before{
	content: '';
	padding:0;
}
article .breadcrumb button{
	display: block;
	margin: auto;
	border-radius: 3px;
	padding: 5px;
}
/************************
*  		FOOTER			*
************************/

footer{
	font-size: 0.7em;
	padding: 5px 30px;
	box-sizing: border-box;
}
footer a{
	text-decoration: none;
}
footer p{
	line-height: 1.5em;
}

/************************
*  	CONTENT ELEMENTS	*
************************/

code{
	display: inline-block;
	padding: 0 0.5em;
	font-size: 0.8em; 
	line-height: 1.4em;	
	border-radius: 3px;	
	word-break: break-all;
}
pre{
	white-space: pre;
	padding: 10px;
	display: block;	
	max-width: 100%;
	overflow-x: auto;
}
.math{
	white-space: pre;
}
table{
	width: 100%;
	border-collapse: collapse;
}
thead{
	border-bottom: 1px solid #e0474c;
	border-top: 1px solid #e0474c;
	background: #f9f8f6;
	font-weight: 700;
}
tbody{}
tr{}
tr:nth-child(odd){ }
tr:nth-child(even){ background-color:#f9f8f6; }
td{ padding: 5px;}
th{ padding: 10px 0;}


dl{
	border-top: 1px solid #e0474c;
	border-bottom: 1px solid #e0474c;
	padding: 0.5em 0;
	box-sizing: border-box;
}
dt,dd{
	width: 100%;
	margin: 0;
	padding: 3px 5px;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: top;
}
dt{
	font-weight: 700;
}
dt::after{
	content: ":";
}
dd{
	width: 80%
}
ul,ol{ 
	padding-left: 0px;
	margin-left: 18px;
}
ul.post{
	list-style: none;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
}
blockquote{
	border-left: 4px solid #e0474c;
	background: #f9f8f6;
}
blockquote{
	position: relative;
	font-style: italic;
	font-family: serif;
	border-left: 4px solid #e0474c;
	background: #f9f8f6;
	margin: 0;
	padding: 5px;
}
blockquote:before {
	position: absolute;
	left: 0px;
	top: 20px; 
	color: #ccc;
	content: open-quote;
	font-size: 4em;
}
blockquote p{
	margin-left: 50px;
}
img{}
sup{}
cite{}
abbr{}
hr{}

img.logo{
	width: 100%;
}
img.coverlogo{
	margin-top: 4em;
}
/****************************
*  	download-commponent		*
****************************/

a.tm-download
{
	line-height: 35px;
	margin-left: 40px;
}
a.tm-download::before{
	content: '\2193';
	position: absolute;
	margin-left: -40px;
	width: 30px;
	height: 30px;
	line-height: 30px;
	font-family: Calibri, "Segoe UI", Roboto, Courier, Helvetica, -apple-system, BlinkMacSystemFont, sans-serif, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 1.3em;
	font-weight: 900;	
	border: 2px solid #e0474c;
	border-radius: 50%;
	text-align: center;
	text-decoration: none;
}
a.tm-download:hover::before{
	text-decoration: none;
	color: #fff;
	background: #e0474c;
}
a.tm-heading-anchor {
    display: none;
    position: absolute;
    top: 0;
    left: -1em;
    width: 1em;
    opacity: 0;
}
a.tm-heading-anchor:hover,a.tm-heading-anchor:focus {
    opacity: 1;
    text-decoration: none;
}
h2:focus > .tm-heading-anchor, 
h2:hover > .tm-heading-anchor, 
h3:focus > .tm-heading-anchor, 
h3:hover > .tm-heading-anchor, 
h4:focus > .tm-heading-anchor, 
h4:hover > .tm-heading-anchor,
h5:focus > .tm-heading-anchor, 
h5:hover > .tm-heading-anchor,
h6:focus > .tm-heading-anchor, 
h6:hover > .tm-heading-anchor{
	opacity: .75;
}


/************************
*  	TABLE OF CONTENTS 	*
************************/

ul.TOC,.TOC ul{
	list-style: none;
	padding-left: 0px;
	margin-left: 0px;
}
.TOC li:before{
	content: "\2192";
	margin-left: -7px;
	margin-right: 7px;
}
.TOC li.h1:before{
	content: "";
}
ul.TOC{
	background: #f9f8f6;
	width: 100%;
	padding: 20px;
	box-sizing:border-box;
}
li.h1{
	font-weight: 700;
}
li.h2, li.h3, li.h4, li.h5, li.h6
{
	font-weight: 400;
	padding-left: 25px;	
}

.control-set{
	margin: 10px 0;
}

/************************
*  		GitHub Ribbon	*
************************/

.github a{
	color:#e0474c;
	background:#f9f8f6;
	text-decoration:none;
	font-family: calibri,"Helvetica Neue",arial,sans-serif;
	text-align:center;
	font-weight:300;
	padding:5px 30px;
	font-size:1rem;
	line-height:1.5rem;
	position:relative;
}
.github a:hover{
	text-decoration: underline;
}

/************************
*  		Share Buttons	*
************************/

.meta-info{
	position: relative;
	display: inline-block; 
	width: 100%;
}
.meta-info .share-icons{
	position: absolute;
	right: 0px;
	display: inline-block;
	background: #fff;
}
.meta-info .share-link, .meta-info .share-button{
	display: inline-block;
	text-align: right;
}
.meta-info .hide .share-link{
	width: 0px;
	opacity: 1;
}
.meta-info .hide .share-link a{
	color: #fff;
}
.meta-info .show .share-link{
	width: 30px;
	opacity: 1;
}
.share-link{
	transition: width 0.25s ease out;
}
.share-icons .share-button{
	cursor: pointer;
}

/* for test only */

img.imgClass{
	width: auto;
	max-width: 100px;
	display: block;
}
img.myClass{
	border: 4px solid #e0474c;
}

/************************
*  		RESPONSIVE		*
************************/
@media only screen and (min-width: 360px) {
	.cover h1{ 
		font-size: 3em; 
	}
	h1{
		margin: 1.6em 0 0.6em;
	}
	h2{
		margin: 1.4em 0 0.6em;
	}
}
@media only screen and (min-width: 600px) {
	.cover h1{ 
		font-size: 4em; 
	}
	a.tm-heading-anchor{
    	display: block;
    }
	.github{
		position:absolute;
		display:block;
		top:0;
		right:0;
		width:150px;
		overflow:hidden;
		height:150px;
		z-index:9999;
	}
	.github a{
		background:#444;
		color:#f9f8f6;
		font-weight: 700;
		width:150px;
		position:absolute;
		top:45px;
		right:-45px;
		transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
		-moz-transform:rotate(45deg);
		-o-transform:rotate(45deg);
		box-shadow:1px 1px 2px rgba(0,0,0,0.8);
	}
	.github a:hover{
		text-decoration: none;
		background:#e0474c;
		color:#f9f8f6;		
	}
	.github a::before,.github a::after{
		content:"";
		width:100%;
		display:block;
		position:absolute;
		top:1px;
		left:0;
		height:1px;
		background:#f9f8f6;
	}
	.github a::after{
		bottom:1px;
		top:auto;
	}	
	.cover .lead a, a.readMore{
		min-width: 150px;
	}
	.cover .toc-nav{
		margin-top: 150px;
	}	
	.toc-nav li.level-2{
		width: 47.5%;
	}	
	article .paging a{
		width: auto;
	}
	article .paging .next{
		float: right;
	}
	ul,ol{ 
		list-style-position: outside;
		padding-left: 40px;
	}
	dd{
		width: 80%;
	}
	dt{
		width: 19%;
		text-align: right;
	}
	.meta-info .show .share-link{
		width: 40px;
	}
}
@media only screen and (min-width: 980px) {
	header p{
		margin: 20px 0;
	}
	.close{ 
		display: block;
		max-height: none;
		overflow: visible;
	}
	.chapterNumber{
		margin: 20px auto 0;
	}
	body{
		font-size: 18px;
	}
	header, aside{
		width: 20%;
		margin-right: 5%;
		float:left;
	}
	header{ 
		text-align: left;
	}
	aside, aside#tmnavigation{
		position: relative;
		top: 0;
		left: 0;
		right: 0;
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
	}
	article,footer{
		width: 75%;
		float: right;
	}
	footer{
		padding: 5px 90px;
	}
	article{
		padding: 30px 90px;
	}
	article .breadcrumb ul{
		display: inline-block;
	}
	article .breadcrumb span.prev{
		left: -40px;
	}
	article .breadcrumb span.next{
		right: -40px;
	}
	article .breadcrumb button{
		display: none;
	}
	.cover.startpage .breadcrumb{
		display:none;
	}	
}