@charset "utf-8";

/* Remixed by @molokoloco 2011 - http://b2bweb.fr              */
/* Src : https://github.com/molokoloco/My-Book-ReadR/ - V0.96 */

/* ------------------------- FONTS FACE ------------------------------------------------------------- */    

@font-face {
	font-family:'Terminal Dosis Light';
	font-style:normal; font-weight:normal;
	src:local('Terminal Dosis Light'),local('TerminalDosis-Light'),url('./Terminal-Dosis-Light.woff') format('woff');
}
@font-face {
	font-family:'Varela';
	font-style:normal; font-weight:normal;
	src:local('Varela'),url('./Varela-Regular.woff') format('woff');
}

/* ------------------------- MAIN ------------------------------------------------------------- */	

::selection { background-color:rgba(160,160,160,0.8); color:rgba(250,250,250,1); }
	::-moz-selection { background-color:rgba(160,160,160,0.8); color:rgba(250,250,250,1); }
	::-webkit-selection { background-color:rgba(160,160,160,0.8); color:rgba(250,250,250,1); }
	::-ms-selection { background-color:rgba(160,160,160,0.8); color:rgba(250,250,250,1); }
	::-o-selection { background-color:rgba(160,160,160,0.8); color:rgba(250,250,250,1); }

* { margin:0; padding:0; }

html { font-size:100%;  }
body {
	font:normal 62.5%/100% 'Varela','Trebuchet',Verdana,Arial,Sans-Serif; /* Setting 1em == 10px (for root elements) !!! */
	text-rendering:optimizeLegibility;
	font-smooth:always; -webkit-font-smoothing:antialiased; -moz-font-smoothing:antialiased; -ms-font-smoothing:antialiased; -o-font-smoothing:antialiased;
	size-adjust:none; -webkit-text-size-adjust:none; -moz-text-size-adjust:none; -ms-text-size-adjust:none; -o-text-size-adjust:none;
	color:rgba(5,5,5,0.8);
	min-width:280px;
	background:#dbdbdb url('../images/bg_vertical.jpg') top left fixed;
	box-shadow:0 0 33px rgba(250,250,250,0.7) inset, 0 0 5px rgba(250,250,250,0.6) inset;
		-moz-box-shadow:0 0 33px rgba(250,250,250,0.7) inset, 0 0 5px rgba(250,250,250,0.6) inset;
		-webkit-box-shadow:0 0 33px rgba(250,250,250,0.7) inset, 0 0 5px rgba(250,250,250,0.6) inset;
		-ms-box-shadow:0 0 33px rgba(250,250,250,0.7) inset, 0 0 5px rgba(250,250,250,0.6) inset;
		-o-box-shadow:0 0 33px rgba(250,250,250,0.7) inset, 0 0 5px rgba(250,250,250,0.6) inset;
}

/* ------------------------- MAIN TAGS - Zoommmable BODY TEXT (with em) ------------------------------------------------------------- */	

p, /*blockquote, */input, pre, code {
	font-size:1.4em; /* 14px */
	color:rgba(5,5,5,0.8);
	text-align:left;
	line-height:175%;
}
p, blockquote, pre, code {
	padding:0 10px;
}
	h1 + p, h2 + p, h3 + p, h4 + p, h5 + p { /* Les P suivants un header... */
	
	}

a, a:visited {
	color:rgba(0,0,99,0.9);
	font-weight:bold;
	text-decoration:none;
	cursor:pointer;
	margin:auto 0.1em; /* little margin with text */
}
a:hover {
	color:rgba(99,0,0,0.9);
}

h1,h2,h3,h4,h5 {
	line-height:100%;
	margin:10px 10px 15px 10px; /* according to p */
	padding:0;
	font-family:'Terminal Dosis Light','Tahoma',Arial,Sans-Serif;
	font-weight:normal;
	letter-spacing:0.05em;
	word-spacing:-0.05em;
	color:rgba(20,20,20,0.8);
	text-shadow:1px 1px 1px rgba(5,5,5,0.25),0 0 6px rgba(5,5,5,0.2);
	overflow:visible;
	width:100%;
	clear:both;
	page-break-after: avoid;
}
	h1 {  /* Book main title */
		font-size:11.3em;
		margin:0.3em 0 0.2em 0;
		text-align:center;
		text-shadow:0 0 16px rgba(5,5,5,0.3),0 1px 1px rgba(5,5,5,0.3),-1px -1px 0px rgba(5,5,5,0.1),1px 1px 0px rgba(5,5,5,0.3);
	}
	h2 { font-size:8em; margin:0 0 15px 7px; text-align:center; } /* Book sub title */
	h3 { font-size:4.2em; margin:40px 0 30px 5px; font-weight:bold; font-variant: small-caps; }  /* Special info (Author... ) */
		h3 a { margin:1.3em 0; padding:20px 0; display:block; border-top:1px solid rgba(5,5,5,0.6); border-bottom:1px solid rgba(5,5,5,0.6); text-align:right; }
	h4 { font-size:6em; margin:0.66em 0 15px 7px; } /* Book Chapters Header */
	h5 { font-size:2.6em; margin:0 0 1em 10px; color:rgba(5,5,5,0.8);  text-align:center; } /* Book Sub Chapters */

em { font-style:italic !important; }
strong { font-weight:bold !important; }
blockquote { margin-top:10px; margin-bottom:25px; }
ul, ol { margin-left: 0; }
li { line-height: 200%;
font-size: 1.2em;
margin-left: 50px; }

blockquote footer { margin:10px 0 0 20px; }

button {
    color: #282828;
    cursor: pointer;
    display: block;
    float:left;
    font-size:1.2em;
	letter-spacing:0;
	width:28px; height: 25px;
    line-height:100%;
    margin: 0 3px 0 0;
    padding:0;
    text-align: center;
    text-shadow: 0 1px 0 rgba(250, 250, 250, 0.8);
}
/* ------------------------- UTILS ------------------------------------------------------------- */

/* Here you can check some utilities in ./modernizr.css too */

.center { text-align:center; }
.spaced { padding:1.8em; }	
.spacer { clear:both; width:100%; height:12px; }

.stageSpace { /* Div inside div for padding */
	padding:8px;
	overflow:hidden;
}

.colonne {
	text-align:left;
	column-count:2; column-gap:1em; column-rule:none;
		-moz-column-count:2; -moz-column-gap:1em; -moz-column-rule:none;
		-webkit-column-count:2; -webkit-column-gap:1em; -webkit-column-rule:none;
		-ms-column-count:2; -ms-column-gap:1em; -ms-column-rule:none;
		-o-column-count:2; -o-column-gap:1em; -o-column-rule:none;
}
	 .colonneBreaker {
		column-break-before:always;
			-webkit-column-break-before:always;
			-moz-column-break-before:always;
			-ms-column-break-before:always;
			-o-column-break-before:always;
	}
	
/* ------------------------- MAIN CONTENT ------------------------------------------------------------- */

#article {
	position:relative; /* IMPORTANT : With RELATIVE, body is content aware (it "wrap") so it made a better scrollTo function... */
	margin:50px 25% 15px 8%; /* 8% left is fixe for JS resize, but 25% can change */
	min-width:280px;
	max-width:920px;
	padding:50px;
	cursor:url('../images/hand.cur') 0 0, move;
}
	#article:active { cursor:url('../images/hand-active.cur') 0 0, move; } /* no active for article on #FF4 ? */
	
	/* Specific TEXT polish ! */
	#article h1, #article h2, #article h3, #article h4, #article h5, #article blockquote { cursor:text; }
		#article a { cursor:pointer; }
		#article a:hover { background:rgba(5,5,5,0.03); }
		#article h2 + p:first-letter, #article h3 + p:first-letter, #article h4 + p:first-letter, #article h5 + p:first-letter { /* P after header... */
			font-size:1.8em;
			line-height:100%;
		}
		
	#article blockquote p {
		text-align:justify;
		word-spacing:0.03em;
		hyphenate:auto; hyphenate-before:3; hyphenate-after:3; hyphenate-lines:3;
		font-variant-numeric: oldstyle-nums;
		position:relative;
		cursor:text;
	}
		#article > blockquote p + p { text-indent:2em; }/* P after an other P */	
		#article p > br:after {} /* Les retours à la ligne dans les paragraphes... */
		#article span.indent { /* :after br not working, so span appended with jQuery cf. JS */
			/* padding-left:10px; */
		}
		#article p.center { text-align:center; }
		
		/* P mouseover + autoscroll hightlight */
		#article > blockquote p {
			border-left:1px dotted rgba(5,5,5,0.5);
			padding-left:9px;
		}
		#article > blockquote p:hover {
			/*border-left:1px dotted rgba(5,5,5,0.4) !important;
			padding-left:9px;
			border-right:1px dotted rgba(5,5,5,0.4) !important;
			padding-right:9px;*/
			background:rgba(5,5,5,0.01);
		}
		#article > blockquote p.p-actif {
			border-left:1px dotted transparent;
			padding-left:9px;
		}
		#article.editable * { /* Content edit hightlight */
			outline:1px dashed rgba(160,160,160,0.4) !important;
		}

#footer {
	position:relative;
	margin:15px 25% 20px 8%;
	min-width:280px;
	max-width:920px;
	padding:50px;
	font-size:1.5em;
	text-shadow:0 1px 0 rgba(250,250,250,0.3);
	line-height:100%;
}
	#footer p { font-size:90%; }
	#footer p, #footer h5, #footer ul { margin-left:0; padding-left:0; }
	#footer li.dsq-widget-item { margin: 20px 0; }
	#footer p.dsq-widget-meta { text-align: right; }
	#footer a { font-weight:normal; text-shadow:0 -1px 0 rgba(250,250,250,0.6); }

#autor p, #autor a {
	font-size:11px;
	font-weight:normal;
	margin:0; padding:0;
	text-shadow:0 1px 0 rgba(250,250,250,0.6);
}
	#autor p { text-align:center; }
	#autor a { color:rgba(100,100,100,0.8); }
	#autor a:hover { color:rgba(5,5,5,0.8); }
	#autor img { vertical-align:middle; }

/* ------------------------- MAIN CONTENT HELPERS (DISCUSS + RESIZE) ------------------------------------------------------------- */

span.comment {
	background: url('../images/comment.png');
	display:block;
	width:25px; height:25px;
	position:absolute;
	top:0; left:-32px;
	line-height:20px;
	opacity:0.15;
	overflow:hidden;
	transition:opacity 500ms linear; -webkit-transition:opacity 500ms linear; -moz-transition:opacity 500ms linear; -ms-transition:opacity 500ms linear; -o-transition:opacity 500ms linear;
}
	span.comment:hover, blockquote:hover span.comment { opacity:0.9; }
	span.comment a, span.comment a:visited {
		display:block;
		width:25px; height:25px;
		font-size:10px;
		color:rgba(250,250,250,0.6);
		text-align:center;
		line-height:20px;
		margin:0;
		padding:0;
		cursor:pointer;
	}
	span.comment a:hover {}
	
#resizeHandle {
	position:absolute;
	top:5%; left:100%;
	height:100%; width:30px;
	cursor:e-resize;
	z-index:1; /* just above the #article book */
	user-select:none; -webkit-user-select:none; -moz-user-select:none; -o-user-select:none; -ms-user-select:none;
	user-focus:none; -webkit-user-focus:none; -moz-user-focus:none; -o-user-focus:none; -ms-user-focus:none;
	background:rgba(5,5,5,0.2);
	background:-moz-linear-gradient(left,rgba(5,5,5,0) 0%,rgba(5,5,5,0.2) 100%); /* FF3.6+ */
		background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(5,5,5,0)),color-stop(100%,rgba(5,5,5,0.2))); /* Chrome,Safari4+ */
		background:-webkit-linear-gradient(left,rgba(5,5,5,0) 0%,rgba(5,5,5,0.2) 100%); /* Chrome10+,Safari5.1+ */
		background:-o-linear-gradient(left,rgba(5,5,5,0) 0%,rgba(5,5,5,0.2) 100%); /* Opera11.10+ */
		background:-ms-linear-gradient(left,rgba(5,5,5,0) 0%,rgba(5,5,5,0.2) 100%); /* IE10+ */
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00fefcea',endColorstr='#f1da36',GradientType=1 ); /* IE6-9 */
	background:linear-gradient(left,rgba(5,5,5,0) 0%,rgba(5,5,5,0.2) 100%); 

	border:1px solid #999;
	border-left:none;
	/* border-radius:0 23px 23px 0; -moz-border-radius:0 23px 23px 0; -webkit-border-radius:0 23px 23px 0; -ms-border-radius:0 23px 23px 0; -o-border-radius:0 23px 23px 0; */
	transition:opacity 500ms linear,height 500ms linear;
		-webkit-transition:opacity 500ms linear,height 500ms linear;
		-moz-transition:opacity 500ms linear,height 500ms linear;
		-ms-transition:opacity 500ms linear,height 500ms linear;
		-o-transition:opacity 500ms linea,height 500ms linear;
	opacity:0;
}
	#resizeHandle:hover {
		opacity:1;
	}
	#resizeHandle.actif  {
		background:-moz-linear-gradient(left,rgba(5,5,5,0) 0%,rgba(0,0,99,0.5) 100%) !important; /* FF3.6+ */
			background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(5,5,5,0)),color-stop(100%,rgba(0,0,99,0.5))) !important; /* Chrome,Safari4+ */
			background:-webkit-linear-gradient(left,rgba(5,5,5,0) 0%,rgba(0,0,99,0.5) 100%) !important; /* Chrome10+,Safari5.1+ */
			background:-o-linear-gradient(left,rgba(5,5,5,0) 0%,rgba(0,0,99,0.5) 100%) !important; /* Opera11.10+ */
			background:-ms-linear-gradient(left,rgba(5,5,5,0) 0%,rgba(0,0,99,0.5) 100%) !important; /* IE10+ */
		filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00fefcea',endColorstr='#f1da36',GradientType=1 ) !important; /* IE6-9 */
		background:linear-gradient(left,rgba(5,5,5,0) 0%,rgba(0,0,99,0.5) 100%) !important; 
	}


#dragLeft, #dragRight {
	position:fixed;
	z-index:0;
	top:0; bottom:0;
	cursor:url('../images/hand.cur') 0 0, move;
}
	#dragLeft:active, #dragRight:active { cursor:url('../images/hand-active.cur') 0 0, move; }
	#dragLeft { left:0; width:8%; }
	#dragRight { right:0; width:25%; }
	
#minibar {
	position:absolute;
	z-index:2;
	top:0; left:0;
	transition:opacity 500ms linear; -webkit-transition:opacity 500ms linear; -moz-transition:opacity 500ms linear; -ms-transition:opacity 500ms linear; -o-transition:opacity 500ms linear;
	padding:3px;
	background:rgba(230,230,230,0.8);
}
	#minibar button { width:45px; height:20px; }

.hightlight {
	background:rgba(0,0,99,0.3) !important;
}
/* ------------------------- BOX RADIUS AND GRADIENTS ------------------------------------------------------------- */

.rounded, #disqus_thread { /* BOOK BG */
	border:1px solid rgba(160,160,160,0.8);
	/* border-radius:23px; -moz-border-radius:23px; -webkit-border-radius:23px; -ms-border-radius:23px; -o-border-radius:23px; *//* FUCKING BORDER-RADIUS IS KILLING SCROLL PERFS */
	background: rgb(250,250,250); /* Plain color for performance with big text */
	box-shadow:1px 1px 3px rgba(5,5,5,0.3),inset 0 0 9px rgba(255,255,255,1);
		-moz-box-shadow:1px 1px 3px rgba(5,5,5,0.3),inset 0 0 9px rgba(255,255,255,1);
		-webkit-box-shadow:1px 1px 3px rgba(5,5,5,0.3),inset 0 0 9px rgba(255,255,255,1);
		-ms-box-shadow:1px 1px 3px rgba(5,5,5,0.3),inset 0 0 9px rgba(255,255,255,1);
		-o-box-shadow:1px 1px 3px rgba(5,5,5,0.3),inset 0 0 9px rgba(255,255,255,1);
	background-clip: padding-box; -moz-background-clip: padding-box; -webkit-background-clip: padding-box; -ms-background-clip: padding-box; -o-background-clip: padding-box;
}
	#disqus_thread { /* BOOK BG */
		border-radius:23px; -moz-border-radius:23px; -webkit-border-radius:23px; -ms-border-radius:23px; -o-border-radius:23px;
	}

.roundered { /* ASIDE BG + header top bar in gradient */
	border:1px solid rgba(250,250,250,0.2);
	border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; -ms-border-radius:8px; -o-border-radius:8px;
	background:rgb(230,230,230);
	background:-moz-linear-gradient(top,rgba(5,5,5,0.20) 1px,rgba(5,5,5,0.35) 22px,rgba(230,230,230,0.75) 23px);
		background:-webkit-gradient(linear,left top,left bottom,color-stop(1px,rgba(5,5,5,0.20)),color-stop(22px,rgba(5,5,5,0.35)),color-stop(23px,rgba(230,230,230,0.75)));
		background:-webkit-linear-gradient(top,rgba(5,5,5,0.20) 1px,rgba(5,5,5,0.35) 22px,rgba(250,250,250,0.75) 23px);
		background:-o-linear-gradient(top,rgba(5,5,5,0.20) 1px,rgba(5,5,5,0.35) 22px,rgba(230,230,230,0.75) 23px);
		background:-ms-linear-gradient(top,rgba(5,5,5,0.20) 1px,rgba(5,5,5,0.35) 22px,rgba(230,230,230,0.75) 23px);
		background:linear-gradient(top,rgba(5,5,5,0.20) 1px,rgba(5,5,5,0.35) 22px,rgba(230,230,230,0.75) 23px);
	background-clip: padding-box; -moz-background-clip: padding-box; -webkit-background-clip: padding-box; -ms-background-clip: padding-box; -o-background-clip: padding-box;
	box-shadow:0 5px 10px rgba(60,60,60,0.8),0 0 10px rgba(250,250,250,0.8);
		-moz-box-shadow:0 5px 10px rgba(60,60,60,0.8),0 0 10px rgba(250,250,250,0.8);
		-webkit-box-shadow:0 5px 10px rgba(60,60,60,0.8),0 0 10px rgba(250,250,250,0.8);
		-ms-box-shadow:0 5px 10px rgba(60,60,60,0.8),0 0 10px rgba(250,250,250,0.8);
		-o-box-shadow:0 5px 10px rgba(60,60,60,0.8),0 0 10px rgba(250,250,250,0.8);
}

.unrounded {
	border:1px solid rgba(160,160,160,0.8);
	border-radius:23px; -moz-border-radius:23px; -webkit-border-radius:23px; -ms-border-radius:23px; -o-border-radius:23px;
	background:rgba(200,200,200,1) url('../images/bg_vertical.jpg') top left;
	box-shadow:0 0 8px rgba(5,5,5,0.6),0 0 32px rgba(5,5,5,0.4), 0 0 6px rgba(250,250,250,0.6) inset;
		-moz-box-shadow:0 0 8px rgba(5,5,5,0.6),0 0 32px rgba(5,5,5,0.4), 0 0 6px rgba(250,250,250,0.6) inset;
		-webkit-box-shadow:0 0 8px rgba(5,5,5,0.6),0 0 32px rgba(5,5,5,0.4), 0 0 6px rgba(250,250,250,0.6) inset;
		-ms-box-shadow:0 0 8px rgba(5,5,5,0.6),0 0 32px rgba(5,5,5,0.4), 0 0 6px rgba(250,250,250,0.6) inset;
		-o-box-shadow:0 0 8px rgba(5,5,5,0.6),0 0 32px rgba(5,5,5,0.4), 0 0 6px rgba(250,250,250,0.6) inset;
	background-clip: padding-box; -moz-background-clip: padding-box; -webkit-background-clip: padding-box; -ms-background-clip: padding-box; -o-background-clip: padding-box;
}

/* ------------------------- ASIDE MENU ( + Dialog jqueryUI) ------------------------------------------------------------- */

#aside {
	display:block;
	z-index:250;
	overflow:auto;
}
	.aside { /* jQuery UI Dialog() offset with fixed */
		position:fixed;
		width:177px;
		bottom:16px; /* it's important to be bottom/right aligned,with window resize...,check JS */
		right:16px;
		overflow:hidden;
		z-index:250;
	}
	
	div.ui-dialog {
		transition:opacity 500ms linear,height 500ms linear;
			-webkit-transition:opacity 500ms linear,height 500ms linear;
			-moz-transition:opacity 500ms linear,height 500ms linear;
			-ms-transition:opacity 500ms linear,height 500ms linear;
			-o-transition:opacity 500ms linea,height 500ms linear;
		opacity:0.3;	
	}
		div.ui-dialog:hover,div.ui-dialog.highlight { opacity:1; }
		div.ui-dialog .ui-dialog-titlebar {
				height:23px; text-align:center; cursor:move; 
				user-select:none; -webkit-user-select:none; -moz-user-select:none; -o-user-select:none; -ms-user-select:none;
				user-focus:none; -webkit-user-focus:none; -moz-user-focus:none; -o-user-focus:none; -ms-user-focus:none;
			}
			div.ui-dialog .ui-dialog-title { font-size:1.3em; line-height:23px; color:rgba(250,250,250,0.9); }
			div.ui-dialog .ui-dialog-titlebar-toggle {
				text-indent:-99999px;
				float:right;
				border:8px solid transparent;
				border-top:8px solid rgba(250,250,250,0.8);
				margin:8px 8px 0 -8px;
			}
			div.ui-dialog .ui-dialog-titlebar-toggle.toggled {
				border-top:8px solid transparent;
				border-bottom:8px solid rgba(250,250,250,0.8);
				margin-top: -10px;
			}
			div.ui-dialog .ui-dialog-titlebar-toggle:hover { border-top:8px solid rgba(99,0,0,0.8);16px }
			div.ui-dialog .ui-dialog-titlebar-toggle.toggled:hover { border-bottom:8px solid rgba(99,0,0,0.8);16px }
			
			a#help, a#help:visited { /* Will be dynamicly detached from #aside and attached to #dialog */
				position: absolute;
				display: block;
				height:17px; width:30px;
				top:0; left:0; 
				margin:0; padding:6px 0 0 0;
				font-size: 14px;
				color:rgba(250,250,250,0.8);
				text-shadow:0 1px 0 rgba(150,150,150,1);
				cursor: help;
			}
			a#help:hover { color:rgba(0,0,99,0.9); }
	
	#aside h3,#aside p {
		font-size:12px;
		letter-spacing:0.3em;
		margin:0 0 8px 0;
		padding:0;
		text-align:center;
		color:rgba(150,150,150,1);
		text-shadow:0 1px 0 rgba(250,250,250,1);
		cursor:default;
	}
	
	ul#viewport { list-style-type:none; margin:0; padding:0; overflow:hidden; }
		ul#viewport li { margin:0; padding:0; float:left; }
		ul#viewport li a,#viewport ul li a:visited {
			display:block;
			margin:0 0 0.5px 0.5px;
			padding:2px 0px;
			width:22px;
			height:16px;
			line-height:16px;
			font-size:12px;
			font-weight:normal;
			text-align:center;
			color:rgba(5,5,5,0.2);
			text-shadow:0 0.05em 0 rgba(250,250,250,0.6);
			border:1px solid rgba(250,250,250,0.6);
			background:rgba(5,5,5,0.05);
		}
		ul#viewport li a:hover,ul#viewport li a.current {
			color:rgba(250,250,250,0.9);
			background:rgba(5,5,5,0.3);
			text-decoration:none;
		}
	
	ul#summary { list-style-type:none;  margin:0; padding:0; overflow:hidden; }
		ul#viewport li { margin:0; padding:0; }
		ul#summary li a,ul#summary li a:visited {
			display:block;
			font-size:12px;
			line-height:100%;
			color:rgba(100,100,100,1);
			text-shadow:0 1px 0 rgba(250,250,250,0.6);
			/* white-space:nowrap; text-overflow:ellipsis; */
			font-weight:normal;
			margin:0.8em 0;
		}
		ul#summary li a:hover,ul#summary li a.current {
			color:rgba(240,20,20,0.9);
			text-decoration:underline;
		}


#notes {
	position:fixed;
	z-index:100;
	top:16px; left:16px;
	width:66px;
	background:rgba(230,230,230,0.75);
}
	#notes .stageSpace { overflow:visible; }
	#notes h3,#notes p {
		font-size:12px;
		letter-spacing:0.3em;
		margin:0 0 8px 0;
		padding:0;
		text-align:center;
		color:rgba(150,150,150,1);
		text-shadow:0 1px 0 rgba(250,250,250,1);
		cursor:default;
	}
	#notes button { width:50px; margin:6px 0; }
	ul#notesList { list-style-type:none; margin:0; padding:0; }
	ul#notesList li { margin:0; padding:0; float:left; position:relative; }
	ul#notesList li a,#viewport ul li a:visited {
		display:block;
		margin:0 0 1px 1px;
		padding:2px;
		width:42px; height:16px; /* real width 48px */
		line-height:100%;
		font-size:12px;
		font-weight:normal;
		white-space:nowrap;
		text-align:center;
		color:rgba(5,5,5,0.2);
		text-shadow:0 0.05em 0 rgba(250,250,250,0.6);
		border:1px solid rgba(250,250,250,0.6);
		background:rgba(5,5,5,0.05);
	}
	ul#notesList li div.note {
		display:none;
		position:absolute;
		left:70px;
		top:0;
		width:240px;
		height:auto;
		padding:12px;
		color:rgba(50,50,50,1);
		background:rgba(230,230,230,1);
		overflow:visible;
		text-align:left;
		font-size:13px;
		line-height:125%;
		font-weight:normal;
		word-wrap: break-word;
		color:rgba(5,5,5,0.9);
	}
	ul#notesList li a:hover {
		color:rgba(250,250,250,0.9);
		background:rgba(5,5,5,0.3);
		text-decoration:none;
	}
/* ------------------------- DISCUSS BOX ------------------------------------------------------------- */

#disqus_thread {
	transition:all 500ms linear; -webkit-transition:all 500ms linear; -moz-transition:all 500ms linear; -ms-transition:all 500ms linear; -o-transition:all 500ms linear;
		position:fixed;
		z-index:300;
		top:16px;
		right:16px;
		width:45%;
		min-width:512px;
		height:auto;
		max-height:90%;
		overflow:auto;
		opacity:1;
		padding:20px;
		font-size:100%;
}
	#disqus_thread.fade { display:none; } /* check .roundered */
	#disqus_thread h3 { font-size:3em; }
	#disqus_thread h3.menu { font-size:1.4em; letter-spacing:0.3em; margin:0 0 8px 0; padding:0; text-align:center; font-weight:normal; color:rgba(250,250,250,0.6); color:rgba(5,5,5,0.5); }
	#disqus_thread em,#disqus_thread span,#disqus_thread a  { font-size:1.4em; font-weight:normal; }
	#disqus_thread .dsq-comment-message { font-size:1.4em; }
	#disqus_thread .dsq-comment-footer,#disqus_thread .dsq-widget-item { font-size:1.5em; }
	#disqus_thread .dsq-trackback-url {display:none;}

/* ------------------------- BACK TO TOP LINK ------------------------------------------------------------- */

a.top {
	position:relative;
	display:block;
	height:23px;
	text-align:center;
	padding:0;
	margin:0;
	display:block;
	transition:opacity 500ms linear; -webkit-transition:opacity 500ms linear; -moz-transition:opacity 500ms linear; -ms-transition:opacity 500ms linear; -o-transition:opacity 500ms linear;
	border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; -ms-border-radius:6px; -o-border-radius:6px; /* Contener have 8px + 10px padding */
	border:1px solid rgba(250,250,250,0.6);
	background:rgba(5,5,5,0.05);
	text-indent:-9999px;
}
	a.top:hover {
		background:rgba(5,5,5,0.3);
		border:1px solid rgba(60,60,60,0.3);
		opacity:1 !important ;
	}
	a.top.fade { opacity:0; }
	a.top:before {
		position:absolute;
		top:5px;
		left:50%;
		margin-left:-12px;
		content:"";
		border-bottom:12px solid rgba(5,5,5,0.6);
		border-left:16px solid transparent;
		border-right:16px solid transparent;
	}
	a.top:hover:before { border-bottom-color:rgba(250,250,250,0.8); }

/* ------------------------ PAGE mini BOX ------------------------------------------------------------- */

a#ribbon {
	display:block;
	position:fixed;
	top:0; left:0;
	width:100px; height:100px;
	z-index:99; 
	margin:0;
	text-indent:-9999px;
	background:url('../images/github-ribbon.png') no-repeat;
	transition:opacity 500ms linear; -webkit-transition:opacity 500ms linear; -moz-transition:opacity 500ms linear; -ms-transition:opacity 500ms linear; -o-transition:opacity 500ms linear;
	opacity:0.05;
}
	a#ribbon:hover { opacity:1; }

#sharing {
	position:fixed;
	z-index:100;
	bottom:16px; left:12px;
	width:120px; height:60px;
	transition:all 500ms linear; -webkit-transition:opacity 500ms linear; -moz-transition:opacity 500ms linear; -ms-transition:opacity 500ms linear; -o-transition:opacity 500ms linear;
	opacity:0.2;
}
	#sharing:hover { opacity:1; }
	#sharing > * { marging:2px 0; padding:0; } /* intent override external js insert */


#helpPanel {
	display:block;
	position:fixed;
	top:-1000px; left:0;
	width:616px; max-width:90%;
	max-height:90%; /* for small screen, 990 not 100 because lot of shadow */
	overflow:auto;
	z-index:600;
}
	#helpPanel h5 { text-align:center; }
	#helpPanel img { max-width:100%; }
	#helpPanel ul, #helpPanel ul li ul { list-style-type:disc; margin:0 0 16px 0; padding:0 0 0 40px; overflow:hidden; color:rgba(250,250,250,1); }
	#helpPanel ul li ul { list-style-type:circle; margin:0; }
	#helpPanel ul li {
		margin:0;
		padding:0 0 0.5em 0;
		font-size:1.5em;
		line-height:100%;
		color:rgba(100,100,100,1);
		text-shadow: 0 1px 0 rgba(250,250,250,0.6);
	}
	#helpPanel ul li ul li { font-size:100%; line-height:100%; padding:0.5em 0 0 0; }

textarea#textEdit {
	font: 13px/13px "Courier New", Courier, monospace;
	color:rgba(5,5,5,0.9);
	display:block;
	width:100%; height:100%;
	overflow:auto;
	margin:0;
	padding:5px;
}
	textarea#textEdit, table#textEdit_tbl /* From TinyMCE */ {
		position:fixed;
		top:5%; left:10%;
		width:80%; height:90%;
		overflow:auto;
		z-index:600;
	}
	table#textEdit_tbl tr.mceLast {
		height:1px;
	}
	table#textEdit_tbl iframe#textEdit_ifr {
		width:100%;
		height:100%;
	}

#overlay {
	z-index:500; /* 500 for OVERLAY ! */
	position:fixed;
	top:0; right:0; bottom:0; left:0;
	background:rgba(250,250,250,0.92);
	cursor:pointer;
	box-shadow:0 0 33px rgba(5,5,5,0.7) inset, 0 0 5px rgba(5,5,5,0.6) inset;
		-moz-box-shadow:0 0 33px rgba(5,5,5,0.7) inset, 0 0 5px rgba(5,5,5,0.6) inset;
		-webkit-box-shadow:0 0 33px rgba(5,5,5,0.7) inset, 0 0 5px rgba(5,5,5,0.6) inset;
		-ms-box-shadow:0 0 33px rgba(5,5,5,0.7) inset, 0 0 5px rgba(5,5,5,0.6) inset;
		-o-box-shadow:0 0 33px rgba(5,5,5,0.7) inset, 0 0 5px rgba(5,5,5,0.6) inset;
}


#message {
	z-index:9999;
	position:fixed;
	top:-20px; left:50%;
	height:15px; width:360px;
	margin:0 0 0 -170px;
	padding:5px;
	border-radius:0 0 15px 15px; -moz-border-radius:0 0 15px 15px; -webkit-border-radius:0 0 15px 15px; -ms-border-radius:0 0 15px 15px; -o-border-radius:0 0 15px 15px;
	background:rgba(200,200,200,1) url('../images/bg_vertical.jpg') top left;
	box-shadow:0 0 8px rgba(5,5,5,0.6),0 0 32px rgba(5,5,5,0.4), 0 0 6px rgba(250,250,250,0.6) inset;
		-moz-box-shadow:0 0 8px rgba(5,5,5,0.6),0 0 32px rgba(5,5,5,0.4), 0 0 6px rgba(250,250,250,0.6) inset;
		-webkit-box-shadow:0 0 8px rgba(5,5,5,0.6),0 0 32px rgba(5,5,5,0.4), 0 0 6px rgba(250,250,250,0.6) inset;
		-ms-box-shadow:0 0 8px rgba(5,5,5,0.6),0 0 32px rgba(5,5,5,0.4), 0 0 6px rgba(250,250,250,0.6) inset;
		-o-box-shadow:0 0 8px rgba(5,5,5,0.6),0 0 32px rgba(5,5,5,0.4), 0 0 6px rgba(250,250,250,0.6) inset;
	background-clip: padding-box; -moz-background-clip: padding-box; -webkit-background-clip: padding-box; -ms-background-clip: padding-box; -o-background-clip: padding-box;
	
	
}
	#message p {
		color:color:rgba(160,160,160,0.8);
		font-size:14px;
		font-weight:bold;
		line-height:16px;
		text-align:center;
	}

/* ------------------------- MEDIA QUERY // ZOOM // Overide above // ------------------------------------------------------------- */

@media all and (min-width:1280px) { body { font-size:70%; } } /* Augmente legererment la taille du taille sur les grands ecrans (65 -> 70%) */
@media all and (max-width:900px) { #article { margin:50px 200px 50px 50px; } #dragLeft { width:50px; } #dragRight { width:200px; }  } /* Elastic resize depending on SCREEN size */
@media all and (max-width:780px) { body { font-size:58%; } #resizeHandle { display:none;} }  /* User resize handle desactived... */
@media all and (max-width:680px) { #article { margin:10px; } #dragLeft { width:10px; } #dragRight { width:10px; } }