@charset 'utf-8';

/*
POPUP 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/popup.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
________________________________________________________________________________
*/



* {
	padding: 0;
	border: 0;
	margin: 0;
	color: #000;
	font-size-adjust: 0.55 !important;
	font-family: 'Arial Unicode MS', Arial, 'Lucida Sans Unicode', Lucida, Tahoma, Helvetica, Verdana, sans-serif;

	}

html, body {
	width: 100%;
	height: auto;
	}

body {
	background: #f8f8f8;
	font-size: 90%;
	line-height: 1.5em;
	}

table, caption, th, td, h1, h2, h3, h4, h5, h6, div, p, blockquote, a, span {
	font-size: 1em;
	}

pre, code, kbd, tt, input, textarea, select, optgroup, option {
	/* white-space: pre; */
	font-family: 'Lucida Console', 'Lucida Sans Typewriter Regular', 'Courier New', Courier, monospace;
	font-size: 1em;
	letter-spacing: 0;
	}

br {
	display: block;
	}


/*anchors*/



a {
	background: transparent;
	text-decoration: none;
	}

a:link {
	color: #33b;
	}

a:visited {
	color: #434d57;
	font-style: italic;
	}

a:visited::after {
	margin-left: 0.5em;
	margin-right: 0.5em;
	content : "\002713";
	}

a:active, a:hover, a:focus {
	color: #c36;
	text-decoration: underline;
	}

a code {
	color: inherit;
	text-decoration: inherit;
	}


h1 {
	padding: 0.2em 0;
	border-bottom: 1px solid #000;
	margin: 0;
	background: #e0e0e0;
	color: #000;
	text-align: center;
	font-size: 1em;
	font-weight: bolder;
	}

img {
	display: block;
	border: 1px solid #ccc;
	margin: auto;
	}

hr {
	clear: both;
	height: 1px;
	border: 0;
	border-bottom: 1px solid #999;
	margin: 0 auto;
	background: transparent;
	}

fieldset {
	padding: 0.5em;
	border: 1px inset #fff;
	margin: 0.2em auto;
	}

legend {
	padding: 0;
	}

input, select {
	height: 1.5em;
	margin: 0.5em;
	background: transparent;
	color: #000;
	vertical-align: middle;
	}



input[type='text'] {
	padding: 0.1em;
	border: 1px inset #fff;
	background: #e4e4d8;
	color: #000;
	vertical-align: middle;
	}

input[type='radio'],
input[type='checkbox'] {   
	width: 1em; 
	height: 1em;
	vertical-align: middle;
	background: transparent;
	color: #000;
	}

input[type='checkbox'] {
	border: 1px solid #666;
	}

input[type='radio'] {
	border: 0;
	}

input[type='text']:focus, 
input[type='radio']:focus, 
input[type='checkbox']:focus,
textarea:focus {
	background: #fff;
	}

textarea {
	padding: 0.5em;
	border: 1px inset #eee;
	background: #e4e4d8;
	}

input[type='button'],
input[type='submit'],
input[type='reset'] {
	font-size: 0px !important;
	}

input[type='submit'] {
	background: url(../graf/but/send) no-repeat center center;
	color: #f8f8f8;
	}

input[type='reset'] {
	background: url(../graf/but/clear) no-repeat center center !important;
	color: #900;
	}

.reset {
	background: url(../graf/but/clear) no-repeat center center !important;
	color: #900;
	}

.calculate {
	background: url(../graf/but/calc) no-repeat center center;
	color: #e0e0e0;
	}

.button {
	width: 34px !important;
	height: 34px !important;
	margin: 0.2em auto;
	border: 1px solid #ccc;
	vertical-align: middle !important;
	cursor: pointer !important;
	}


div#noscript {
	padding-right: 2em;
	text-align: right;
	}

img.button {
	margin: 0.5em 0 auto auto;
	}

img#closeButton {
	margin-right: 2em;
	}

/*__ page data block _________________________________________________________*/

p.pageData {
	width: 100%;
	padding: 0.5em 0;
	border-top: 1px solid #999;
	margin: 0.5em 0 0 0;
	background: transparent;
	color: #666;
	text-align: center;
	font-size: 0.75em;
	font-weight: normal;
	}

p.pageData cite {
	font-style: normal;
	}

p.pageData a {
	color: #666;
	text-decoration: underline;
	}

p.pageData img {
	display: inline;
	width: 5px;
	height: 5px;
	border: 0;
	margin: 0;
	vertical-align: 10%;
	}

/*__ validation ______________________________________________________________*/
ul#validation {
	clear: both;
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
	}

ul#validation li {
	float: left;
	padding: 0;
	margin: 0 0.2em;
	list-style-type: none;
	color: #000;
	font-size: 0.7em;
	}

ul#validation img {
	display: inline;
	width: 80px;
	height: 15px;
	border: 0;
	}


.sepHidOut {
	visibility: hidden;
	float: left;
	}

/*__ [IMAGES] ________________________________________________________________*/

img#pop01 {
	width: 546px;
	height: 324px;
	border: 0;
	}

img#pop02 {
	width: 904px;
	height: 614px;
	border: 0;
	}

img#pop03 {
	width: 140px;
	height: 280px;
	border: 0;
	margin: 10px auto;
	}

img#pop04 {
	width: 298px;
	height: 296px;
	margin: 10px auto;
	}

img#pop05 {
	width: 719px;
	height: 433px;
	border: 0;
	}

img#pop06 {
	width: 231px;
	height: 163px;
	margin: 10px 0;
	}

img#pop07 {
	width: 320px;
	height: 421px;
	border: 1px solid #999;
	margin: 10px auto;
	}

img#pop08 {
	width: 260px;
	height: 260px;
	border: 1px solid #999;
	margin: 10px auto;
	}

img.pop09 {
	width: 300px;
	height: 198px;
	border: 0;
	}

img#pop10 {
	width: 165px;
	height: 239px;
	border: 0;
	margin: 10px auto;
	}

/*__ [/IMAGES] _______________________________________________________________*/

div#loadNormal, div#loadInterlaced {
	width: 306px;
	height: 250px;
	min-height: 230px;
	padding: 2px;
	border: 1px solid #000;
	text-align: left;
	font-size: 0.8em;
	}

div#loadNormal button, div#loadInterlaced button{
	display: block;
	padding: 0.3em;
	border: 1px outset #e8e8e8;
	margin: 0.2em;
	text-align: center;
	background: transparent;
	color: #000;
	font-size: 1.2em;
	}

div#loadNormal {
	float: left;
	margin: 0 0 0 2px;
	}

div#loadInterlaced {
	float: right;
	margin: 0 2px 0 0;
	}

applet#colorPicker {
	display: block;
	width: 308px;
	height: 200px;
	border: 1px solid #999;
	margin: 0.2em auto;
	background: #000;
	color: #fff;
	}


form#translateNumbers, 
form#translateNumbers fieldset {
	width: 98%;
	border: 0;
	margin: 0;
	}

form#translateNumbers label, form#translateNumbers input {
	white-space: pre;
	font-family: 'Lucida Console', 'Lucida Sans Typewriter Regular', 'Courier New', Courier, monospace;	}

form#translateNumbers input[type='text'] {
	width: 30%;
	}

form#translateNumbers input#bina, form#translateNumbers input#binC {
	width: 96%;
	}

form#translateNumbers div#dohbControls {
	text-align: center;
	}

form#translateNumbers input#processNumbers {
	background: url(../graf/but/calc) no-repeat center center;
	color: #e0e0e0;
	}