@charset 'utf-8';

/*
GRAPHICS TOPIC STYLE SHEET  J-A-B.NET

________________________________________________________________________________
author: Jens Brueckmann
        http://www.j-a-b.net/

      created: 2004-05-15
last modified: 2009-12-04
________________________________________________________________________________
This CSS may contain some selectors and attributes from CSS3 which are not yet advanced
beyond Working Draft or Candidate Recommendation and should therefore be regarded 
as experimental.
________________________________________________________________________________
Validation:
http://jigsaw.w3.org/css-validator/validator?uri=http://www.j-a-b.net/css/graf.css.php&warning=2&profile=css3&usermedium=all
________________________________________________________________________________
This style sheet is published under a Creative Commons License. For more information 
about this license visit http://creativecommons.org/licenses/by-sa/2.0/
________________________________________________________________________________
Comments are welcome :-) Use contact form or mail me at jens[at]j-a-b.net
________________________________________________________________________________
*/


/*__ compare data properties of file formats __ ~web/graf/graf-compare-data __*/

table#graficFileProperties th,
table#graficFileProperties td {
	padding: 0.3em 0 0.3em 0.5em;
	border: 1px solid #999;
	}

table#graficFileProperties tbody th {
	background: transparent;
	color: #000;
	text-align: left;
	}

/*__ image properties of file formats I/II ___ ~web/graf/graf-compare-img-1 __*/

table#gjpImgProperties td,
table#gifDitheringSamp td {
	padding: 0.6em 0 0.3em;
	border: 1px solid #ccc;
	}

table#ditheringSamp td {
	border: 1px solid #ccc;
	}


table#gjpImgProperties label {
	display: block;
	padding: 0.3em 0;
	margin: auto;
	text-align: center;
	font-weight: bold;
	}

table#gjpImgProperties dl,
table#gifDitheringSamp dl,
table#ditheringSamp dl {
	padding: 0 0 0 1em;
	margin: auto;
	}

table#gjpImgProperties dt,
table#gjpImgProperties dd,
table#gifDitheringSamp dt,
table#gifDitheringSamp dd,
table#ditheringSamp dt,
table#ditheringSamp dd {
	display: inline;
	padding: 0;
	margin: 0;
	}

table#gifDitheringSamp dt:first-child+dd,
table#ditheringSamp dt:first-child+dd {
	margin-right: 2em;
	}

table#gjpImgProperties dd,
table#gifDitheringSamp dd,
table#ditheringSamp dd {
	padding: 0 0 0 1%;
	white-space: pre;
	}

table#gjpImgProperties img,
table#gifDitheringSamp img,
table#ditheringSamp img,
table#gjpImgProperties div#gjpOrigBackBrush,
table#gjpImgProperties div#gjpOrigBackSquares,
table#gifDitheringSamp div#gjpOrigBackBrush,
table#ditheringSamp div.ditherChartImgBack {
	display: block;
	width: 250px;
	height: 186px;
	padding: 0;
	border: 1px solid #d0d0d0;
	margin: 1em auto;
	}

table#gjpImgProperties div img,
table#gifDitheringSamp div img,
table#ditheringSamp div img {
	border: 0;
	margin: 0;
	}

table#gjpImgProperties div#gjpOrigBackBrush,
table#gifDitheringSamp div#gjpOrigBackBrush,
table#ditheringSamp div.ditherChartImgBack {
	background: url(../web/graf/pics/gjp_compare/brush_bg) no-repeat center center;
	}

table#gjpImgProperties div#gjpOrigBackSquares {
	background: url(../web/graf/pics/gjp_compare/squares_bg) no-repeat center center;
	}

table#gjpImgProperties dl+label,
table#gifDitheringSamp div#gjpOrigBackBrush label {
	padding: 0 0 0 1em;
	vertical-align: 10%;
	font-size: 0.8em;
	font-weight: normal;
	}

table#ditheringSamp input {
	border: 0;
	}

table#ditheringSamp td[colspan] {
	padding: 0 1em;
	text-align: right;
	}

#paletteComparison td img {
	width: 210px;
	height: 210px;
	}

table#pyRaster {
	max-width: 400px;
	}

table#pyRaster th {
	font-size: 0.8em;
	line-height: 1.1em;
	}

table#pyRaster td {
	padding: 0.5em;
	text-align: center;
	}

table#pyRaster img {
	width: 80px;
	height: 80px;
	}

/*__ bitmaps _______________________________________ ~web/graf/graf-general __*/

img#RasterGraficExamplePlain,
img#RasterGraficExampleZoom {
	width: 199px;
	height: 135px;
	border: 1px solid #666;
	margin: 2em 0 2em 2em;
	}

/*__ dithered gifs _____________________________________ ~web/graf/graf-gif __*/


table#gifDitheringSamp td,
table#ditheringSamp td {
	padding: 1em 0;
	text-align: center;
	}

table#gifDitheringSamp h5,
table#ditheringSamp h5 {
	margin: 0 0 1em;
	}

/*__ properties of dithered backgrounds ____ ~web/graf/dithered-backgrounds __*/

dl#ditheredImgProperties {
	padding: 0.2em !important;
	margin: 2em auto;
	font-family: monospace;
	white-space: pre !important;
	}

dl#ditheredImgProperties dt {
	display: inline;
	font-family: monospace;
	white-space: pre !important;
	}

dl#ditheredImgProperties dd {
	display: inline;
	margin: 0;
	font-family: monospace;
	white-space: pre !important;
	}

/* dithered backgrounds */
table#ditheredBack {
/*  	table-layout: auto; */
 	max-width: 100%; 
	border: 1px solid #000;
	text-align: center;
	}

table#ditheredBack td code {
	display: none;
	position: absolute;
	left: 3em;
	width: 5em;
	height: 2em;
	border: 1px solid #ccc;
	}

table#ditheredBack td:active {
	background: #0f0;
	}

table#ditheredBack td:active code {
	display: block;
	}

table#ditheredBack th, table#ditheredBack td {
	height: 3em;
	padding: 2px 0;
	text-align: center;
	vertical-align: middle;
	font-size: 0.75em;
	font-weight: normal;
	}


dl#fsErrorDist {
	width: 33%;
	padding: 0;
	margin: 1em auto 2em;
	}

dl#fsErrorDist dt,
dl#fsErrorDist dd {
	padding: 0;
	margin: 0;
	}

dl#fsErrorDist dt {
	text-align: center;
	}

dl#fsErrorDist dt img {
	width: 94px;
	height: 94px;
	}

dl#fsScanning dt img,
dl#fsScanningX dt img {
	width: 91px;
	height: 91px;
	}

/*__ properties dithered background images ___ ~web/graf/dither-colormixing __*/

img#dithMix {
 	position: relative;
	left: -0.5em;
	display: block;
	width: 444px;
	height: 443px;
	margin: 2em auto;
	}



/*__ transparency in png images ________________ ~web/graf/png-transparency __*/

div.pngTransLeft, div.pngTransRight {
	margin: 4em auto;
	width: 238px;
/* 	height: 380px; */
	text-align: center;
	font-size: 0.8em;
	}

div.pngTransLeft {
	float: left;
	}

div.pngTransRight {
	float: right;
	}

div.pngTransLeft:hover, div.pngTransRight:hover {
	background: #006;
	color: #eee;
	}

div.pngTransLeft img, div.pngTransRight img {
	width: 238px;
	height: 361px;
/* 	margin-top: 3px; */
	}

/*__ compression rates of png graphics __________ ~web/graf/png-compression __*/

ul#colorCount {
	padding: 0.5em 1em;
	border: 1px solid #ccc;
	margin: 1em;
	background: #fff;
	color: inherit;
	}


ul#colorCount li {
	font-family: 'Lucida Console', 'Lucida Sans Typewriter Regular', 'Courier New', Courier, monospace;;
	}


table#pngCompression {
	table-layout: auto;
	}

table#pngCompression td {
	padding: 1em 0;
	border: 1px solid #ccc;
	text-align: center !important;
	}

table#pngCompression img {
	width: 256px;
	height: 256px;
	}

/*__ LZW algorithm ________________________________ ~web/graf/lzw-algorithm __*/

ol#lzwSimpleExample samp,
ol#lzwSimpleExample var {
	display: block;
	padding: 0.5em 0 0.5em 0.3em;
	border: 1px solid #d0d0d0;
	margin: 1em 0;
	background: #f0f0f0;
	color: #000;
	font-family: 'Lucida Console', 'Lucida Sans Typewriter Regular', 'Courier New', Courier, monospace;	font-weight: normal;
	}

ol#lzwSimpleExample samp em {
	padding: 0.2em;
	border: 1px dotted #d0d0d0;
	font-weight: normal;
	}

ol#lzwSimpleExample var,
ol#lzwSimpleExample var em {
	font-style: normal;
	}

ol#lzwSimpleExample var em {
	margin: 0;
	font-style: normal;
	}

.emph1 {
	background: #9cf;
	color: #000
	}

.emph2 {
	background: #fc9;
	color: #000
	}

.emph3 {
	background: #9fc;
	color: #000
	}

.emph4 {
	background: #f9c;
	color: #000
	}

img#lzwEncode,
img#lzwDecode {
	display: block;
	width: 475px;
	height: 500px;
  max-width: 100%;
	margin: auto;
	}