* {
	margin : 0;
	padding : 0;
	border : 0;
	font : 100% karla, sans-serif;
}

body, html {
	background : #eee;
}

@font-face {
	font-family: 'karla';
	src: url('https://css-ig.net/style/karla.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/* ----- */

#header {
	position : fixed;
	top : 0;
	left : 0;
	width : 100%;
	padding : 1em 0;
	background-color : #111;
	border-bottom : 1px solid #111;
	box-shadow : 1px 3px 5px #777;
	max-height : 4em;
}
#header-bar {
	width : 75%;
	max-width : 1280px;
	margin : 0 auto;
}

#header-home {
	display : none;
}

/* ----- */

#header-logo {
	display : block;
	float : left;
	padding : 0.1em 0 0.2em 3.5em;
	background : url(https://css-ig.net/images/icons/logo.svgz) 0 0 no-repeat;
}
#header-logo a  {
	font-size: 120%;
	color : #fff;
	text-decoration : none;
}
#header-logo span {
	display : block;
	font-size : 80%;
	font-style : italic;
}

/* ----- */

#header-menu {
	float : right;
	margin : 0.5em 0 0 0;
}
#header-menu ul {
	margin : 0;
	padding : 0;
	list-style-type : none;
}
#header-menu li {
	display : inline-block;
	margin : 0.1em 0.6em;
}
#header-menu li img {
	position: absolute;
	top : 30%;
	height : 32px;
	width : auto;
}
#header-menu a  {
	font-size: 120%;
	color : #fff;
	text-decoration : none;
}
#header a:hover {
	color : #fc0;
}

/* ----- */

#content {
	width : 80%;
	max-width : 1280px;
	margin: 7em auto 2em;
}

/* ----- */

.cadre {
	margin : 1em;
	padding : 1.5em;
	border : 1px solid #e0e0e0;
	border-radius : 10px;
	box-shadow : 1px 3px 5px #dadada;
	color : #555;
}
.cadre {
	background : #fff;
}
.cadre a  {
	color : #138cb6;
}
.cadre a:hover {
	color : #b63113;
}
.cadre h2 a {
	text-decoration : none;
	padding : 0.1em 0;
}

.cadre h2 {
	margin-top : 0.5em;
	font-size : 180%;
}
.cadre-h2sub {
	display : block;
	margin : 0.2em 0 2em 0 ;
	font-size : 90%;
	color : #aaa;
	font-style : italic;
}
.cadre h3 {
	margin : 1.8em 0 1em;
	font-size : 150%;
}
.cadre h4, .cadre h5 {
	margin : 1.8em 0 1em;
}
.cadre h4 {
	font-size : 140%;
}
.cadre h5 {
	font-size : 130%;
}
.cadre p {
	line-height : 1.3em;
	margin : 1em 0 1.8em;
}
.cadre ul {
	margin : 1em 0 0.8em 1.8em;
}
.cadre li {
	list-style : square;
}
.cadre table {
	width : 100%;
	margin : 0.8em 0;
	border-collapse : collapse;
}
.cadre caption {
	margin : 0.8em 0;
	text-align : left;
	font-style : italic;
	color : #999;
}
.cadre th, .cadre td {
	padding : 0.5em;
	text-align : left;
}
.cadre th, .cadre td {
	border : 1px solid #444;
}
.cadre th {
	font-weight : bold;
	background : #888;
	color : #fcfcfc;
}
.cadre td svg {
	padding : 0 0 1em 0;
	
}
.cadre pre {
	margin : 0.3em 0 1.8em 0;
	padding : 1em;
	border : 1px solid #ccc;
	border-left : 4px solid #aaa;
	background : #fafafa;
	white-space : pre-wrap;
}
.cadre .pre-code {
	background : #fff url(https://css-ig.net/images/icons/pre-code.svgz) 0.8em 1em no-repeat;
	padding-left : 2.5em;
}
.cadre .pre-quote {
	background : #fff url(https://css-ig.net/images/icons/pre-quote.svgz) 0.8em 1em no-repeat;
	font-style : italic;
	padding-left : 2.5em;
	color : #888;
}
.cadre code {
	padding : 0.1em;
	border : 1px solid #ccc;
	background : #fafafa;
}
.cadre pre .pre-tool {
	color : #222;
}
.cadre pre .pre-flag {
	color : #000;
	font-weight : bold;
}
.cadre pre .pre-target {
	color : #bbb;
}

.cadre .list dt, .cadre .list dd {
	line-height : 1.8em;
}
.cadre .list dt {
	margin-top : 2em;
	font-size : 110%;
	font-weight : bold;
}
.cadre .bugs dt {
	padding-left : 1.5em;
	background : url(https://css-ig.net/images/icons/subjectm.svgz) 0 0 no-repeat;
}
.cadre .bugs .ok {
	background : url(https://css-ig.net/images/icons/check.svgz) 0 0.1em no-repeat;
}
.cadre .bugs dt a {
	padding : 0.2em 0;
	font-weight : bold;
}
.cadre .bugs dd {
	margin : 0 0 2em 0;
	padding : 0 0 0.2em 0;
	color : #bbb;
}
.cadre .legend {
	color : #999;
}
.highlight {
	background : #fff1d7;
}

/* ----- */

.cadre input {
	margin : 0;
	padding : 0.5em;
	border : 1px solid #ddd;
	font-size : 120%;
}
#name {
	width : 25%;
	margin : 0 1em 0 0;
}
#title {
	width : 60%;
}
#comment {
	margin : 1em 0;
	padding : 0.5em;
	display : block;
	width : 90%;
	height : 10em;
	border : 1px solid #ddd;
	font-size : 120%;
}
#capi {
	width : 3em;
}
#postit {
	margin : 1em;
	padding : 1em;
	border : 1px solid #e0e0e0;
	border-radius : 10px;
	box-shadow : 1px 3px 5px #dadada;
	background : #fff;
	color : #138cb6;
	font-size : 120%;
	font-weight : bold;
	cursor : pointer;
}
#postit :hover {
	color : #b63113;
}
.add-bug {
	padding-left : 1.5em;
	background : url(https://css-ig.net/images/icons/file-add.svgz) 0 0 no-repeat;
	font-size : 120%;
	font-weight : bold;
}
.file-bug {
	padding-left : 1.5em;
	background : url(https://css-ig.net/images/icons/file-see.svgz) 0 0 no-repeat;
	font-size : 120%;
	font-weight : bold;
}
#help {
	border-left : 1px solid #eee;
	padding : 0 3em 3em 3em;
	float : right;
	margin-right : 10%;
}
#help li {
	margin : 0.4em 0 0 1em;
}


/* ----- */

.cadre-comment, .cadre-cedric {
	margin-top : 2em;
	padding : 2em 2em 0 2em;
	font-weight : bold;
	border-radius : 1em;
}

.cadre-comment {
	background : #f4f4f4 url(https://css-ig.net/images/icons/comment.svgz) 0.8em 2.1em no-repeat;
	border : 1px #ddd solid;
}

.cadre-cedric {
	background : #fff4de url(https://css-ig.net/images/icons/comment.svgz) 0.8em 2.1em no-repeat;
	border : 1px #ddd solid;
}

.cadre-comment-title {
	margin-left : 2em;
	display : block;
	font-size : 110%;
	font-weight : bold;
}
.cadre-comment-title-said {
	display : block;
	margin : 0 0 1.8em 0;
	color : #aaa;
	font-size : 90%;
}
.button-comment {
	margin : 3em 0;
}
.button-comment a {
	margin : 1em;
	padding : 1em;
	border : 1px solid #e0e0e0;
	border-radius : 10px;
	box-shadow : 1px 3px 5px #dadada;
	background : #fff;
	color : #138cb6;
	font-size : 120%;
	font-weight : bold;
	text-decoration : none;
}
.button-comment a:hover {
	color : #b63113;
	border : 1px solid #ccc;
	box-shadow : 1px 3px 5px #ddd;
}
.sample-comment {
	padding-left : 1em;
}
.sample-comment a {
	padding-left : 1.5em;
	margin-right : 2em;
	background : url(https://css-ig.net/images/icons/sample-comment.svgz) 0 0 no-repeat;
}
.sample-comment td a {
	display : inline-block;
	margin : 0.5em 2em 0.5em 0;
}
	
/* ----- */

.float {
	margin : -1.76em 2.4em 0 0;
	float : left;
	width : 55%;
	min-width : 650px;
}
.float-bar {
	border-right : 1px solid #ddd;
	padding : 0 2em;
}
.float-clear {
	clear : both;
}
.pingo-list li {
	margin : 0.8em 0;
	list-style : none;
	line-height : 1.4em;
}
.pingo-list li span {
	padding-left : 1.5em;
	background : url(https://css-ig.net/images/icons/point.svgz) 0.1em 0.05em no-repeat;
	font-weight : bold;
}

/* ----- */

td a img:hover, td a svg:hover {
	cursor: zoom-in;
}

.transparent td:hover {
	background : url(https://css-ig.net/images/icons/background-trans.png);
}

.bad {
	color : #921f13;
}

.good {
	color : #509213;
}

.bold, .bad, .good, .cadre strong {
	font-weight : bold;
}

.cadre em {
	border-bottom : 1px dotted #aaa;
}

.cadre hr {
	margin : 1.8em 0;
	border : 0.5px solid #ccc;
}

.large li {
	margin : 0.8em 0;
}

.table2 td, .table2 th  {
	width : 50%;
}

.table3 td, .table3 th  {
	width : 33.3%;
}
.table4 td, .table4 th  {
	width : 25%;
}
.table5 td, .table5 th  {
	width : 20%;
}
.table6 td, .table6 th  {
	width : 16.6%;
}
.tableb {
	max-width : 48%;
}
#tablefloat {
	float : left;
}

.warning {
	padding-left : 1.5em;
	background : url(https://css-ig.net/images/icons/warning.svgz) no-repeat;
}

.play {
	margin-left : 0.9em;
}
.play a {
	padding-left : 1.3em;
	background : url(https://css-ig.net/images/icons/play.svgz) 0 2px no-repeat;
}

#download {
	margin : 0.5em 0;
}

#download li {
	list-style : none;
	margin : 0.4em 0;
}

#download-win {
	padding-left : 1.8em;
	background : url(https://css-ig.net/images/icons/download-win.svgz) 0 0 no-repeat;
}

#download-nix {
	padding-left : 1.8em;
	background : url(https://css-ig.net/images/icons/download-nix.svgz) -0.35em 0 no-repeat;
}
#see-also {
	margin : 1.5em 0;
	padding : 0 0 0 1.5em;
	background : url(https://css-ig.net/images/icons/seealso.svgz) 0 0 no-repeat;
}
#donate {
	margin : 1.5em 0;
	padding : 0 0 0 1.5em;
	background : url(https://css-ig.net/images/icons/donate.svgz) 0 0 no-repeat;
}

/* ----- */

@media screen and (max-width:1024px) {
	#help {
		float : none;
		padding : 0 1em 1em 1em;
		margin : 1em 0;
	}
	.cadre h2 {
		font-weight : bold;
		font-size : 130%;
	}
	.cadre h3 {
		font-weight : bold;
		font-size : 120%;
	}
	.cadre h4, .cadre h5 {
		font-weight : bold;
		font-size : 110%;
	}
	.cadre p, .cadre li, .cadre table, .cadre pre, .cadre dt, .cadre dd {
		font-size : 100%;
	}
	
	#header-logo {
		display : none;
	}
	#header-home {
		display : inline;
	}
	#header-menu li {
		margin : -0.2em 0.5em 0;
	}
	#header-menu li image {
		top : 0%;
	}
	h3 img {
		width : 90%;
		height : auto;
	}
	.table2 td img, .table3 td img  {
		width : 60%;
		height : auto;
	}
	.table4 td img  {
		width : 40%;
		height : auto;
	}
	.table5 td img, .table6 td img  {
		width : 30%;
		height : auto;
	}
	.float {
		margin : 0;
		float : none;
		display : block;
		width : 100%;
		min-width : 0;
	}
	.float-bar {
		border : 0;
	}
	svg {
		width : 50%;
		height : auto;
	}
	#performance {
		display : none;
	}
	#content {
		width : 95%;
		margin: 4em auto 2em;
	}
}

@media screen and (max-width:640px) {
	
	.cadre h2 {
		font-weight : bold;
		font-size : 130%;
	}
	.cadre h3 {
		font-weight : bold;
		font-size : 120%;
	}
	.cadre h4, .cadre h5 {
		font-weight : bold;
		font-size : 110%;
	}
	.cadre p, .cadre li, .cadre table, .cadre pre, .cadre dt, .cadre dd {
		font-size : 100%;
	}
	
	#header {
		padding : 0.6em 0;
	}
	#header-logo {
		display : none;
	}
	#header-menu {
		float : none;
		font-size : 90%;
		text-align : center;
	}
	#header-home {
		display : inline;
	}
	#header-menu ul {
		margin : 0 auto;
	}
	#header-menu li {
		margin : -0.2em 0.5em 0;
	}
	#header-menu li img {
		height : 24px;
		width : auto;
	}
}