

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

html, body {
    background: #f0f0f0 url('../images/grain.gif');
    background-attachment: fixed;
    width: 100%;
    font: 14px/21px Arial, Sans-serif;
    color: #444;
    -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
    -webkit-text-size-adjust: 100%;
    padding-bottom: 10px;
}

#TopAd { float: right;  }
#CenterAd { float: right; margin-left: 10px; margin-top: -30px; margin-bottom: 20px; }
/*#BottomAd { margin-left: 20px; }*/
#BottomAd { float:left; margin-left: 0px; margin-bottom: 0px; margin-right: 30px; min-width: 50%; }

#engage pre { width: auto; }


h1, h2, h3, h4, blockquote, q, .subnav { 
    font-family: 'Droid Sans', Arial, Sans-serif; 
}
h1, h2, h3, h4 {
    font-weight: bold;
    margin: 20px 0 10px;
}
h1, h2 { line-height: 30px; }
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
h3, h4 { line-height: 20px; }
h4, h5, h6 { font-size: 15px; }

p { color: #444; }

a, a:link, a:visited { color: #508bb2; }
a:active { color: gray; }
a:hover { color: #264e8a; }

/*#content img { width: 100%; height: auto; }*/
img.right { float: right; margin: 0 0 6px 6px; width: 50%; height: auto; }
img.left, img.leftAlone { float: left; width: 100%; height: auto; margin-bottom: 10px; }

.container, #footer { width: 90%; margin: 0 auto; min-width: 900px; max-width: 1200px; clear: both; }
.header { height: 100px; padding-top: 10px; }
.header a { text-decoration: none; color: #666; position: absolute; }
.header span.tagline { font-family: 'Droid Sans', Arial, Sans-serif; 
    margin-left: 216px; margin-top: -30px; display: block; }

.header.small_logo  a { margin-top: 15px; }
.header.small_logo span.tagline { margin-left: 30px; margin-top: -14px; }

#content { margin-right: -310px; float:left; width: 100%; }
/*#left {
	float:left;
	width:150px;
	margin:0; padding:0;
	background:url("corner.gif") top right no-repeat;
	font-size:80%;
	}
#right {
	float:right;
	width:150px;
	margin:0; padding:0;
	background:url("corner.gif") top right no-repeat;
	font-size:80%;
	}
#middle {
	margin:0 150px;
	background:yellow;
	font-size:80%;
	}*/
#maincontent { margin-right: 310px; margin-left: 4px; margin-bottom: 30px;
	z-index: 1; position: relative; padding: 16px 10px 40px 16px;
    background: white; border: 1px solid #ddd; 
    -webkit-border-top-right-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-bottomright: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
.leftcol { width: 160px; float: left; min-height: 100px; }
.middlecol { margin-left:170px; margin-top: -10px; margin-right: 10px; }
.rightcol { width: 300px; min-height: 100px; float:left; margin-left: 6px; }
/* home has no left column */
.home .leftcol { display: none; }
.home .middlecol { margin-left: 0px; }

/* Menu customizations */
ul.menu li:hover > ul {  
	opacity: 1; visibility: visible; /* visibility setting for IE no opacity support fuck IE, this should be fun... */
}
ul.menu li > ul { display: block; opacity: 0; visibility: hidden;
	transition: opacity .25s ease-in;
	-moz-transition: opacity .25s ease-in;
	-webkit-transition: opacity .25s ease-in;
}

.menu li a { padding: 12px 20px; }
.menu{
    margin-bottom: 10px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px; 
    border:1px solid #dbe3e2;
    text-shadow:0px 1px 1px #508bb2;
    background: #508bb2; /* Old browsers */
    background: -moz-linear-gradient(top, #508bb2 0%, #264e8a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#508bb2), color-stop(100%,#264e8a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #508bb2 0%,#264e8a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #508bb2 0%,#264e8a 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #508bb2 0%,#264e8a 100%); /* IE10+ */
    background: linear-gradient(top, #508bb2 0%,#264e8a 100%); /* W3C */
}

.menu li a{ color: #dbe3e2; }
		
.menu li.current>a,
.menu li.current>a:hover,
.menu li.current.hover>a,
.menu li a:hover,
.menu li.hover>a{
    background: #508bb2; /* Old browsers */
    background: -moz-linear-gradient(top, #264e8a 0%, #508bb2 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#264e8a), color-stop(100%,#508bb2)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #264e8a 0%,#508bb2 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #264e8a 0%,#508bb2 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #508bb2 0%,#264e8a 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#508bb2', endColorstr='#264e8a',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #264e8a 0%,#508bb2 100%); /* W3C */
    text-shadow:0px -1px 0px rgba(0,0,0,0.2);
}
/* sub menus in menu */

.menu ul{
    background: #508bb2;
    border:1px solid #ccc;
}
.menu ul li.current>a,
.menu ul li.current>a:hover,
.menu ul li.current.hover>a,
.menu ul li a:hover,
.menu ul li.hover>a { background: #264e8a; cursor: pointer; }
.menu > li:first-child a { 
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-top-left-radius: 5px;
}

ul.breadcrumbs.alt1 { border: none; margin-top: 14px; margin-bottom: -2px; width: 100%; height: 30px; }
.breadcrumbs span.icon { font-size: 20px; margin: -4px; height: 24px; }
ul.breadcrumbs.alt1 li a { padding-top: 7px; padding: 7px 16px 7px 8px; }

/* submenu left */
.subnav h3 { margin-top: 8px; margin-bottom: 24px; }
.subnav a { text-decoration: none; }
.subnav a.current { color: #666; }
.subnav a:hover { text-decoration: underline; }

.subnav ul { list-style: none; margin: 0; padding: 0; }
.subnav > ul { margin-bottom: 40px; }
.subnav ul li { display: block; padding: 2px 1px; margin-right: 20px; 
	       border-top: 1px solid #ccc; }
.subnav ul li.last { border-bottom: 1px solid #ccc; }
.subnav ul li a { padding: 6px 0; display: block; }
.subnav ul li a.current { font-weight: bold;  }

ul.sub li { margin: 0; padding: 2px; margin-left: 4px; }
ul.sub li.first { margin-left:-2px; padding-left:8px; }
ul.sub li.last { border-bottom: none; }

#footer, #footer p { color: #999; }
#footer strong, #footer b { color: #666; }
#footer hr { margin: 12px 0; }
#footer table, #footer tr { margin: 0; border: 0; background: none; }
/*#footer .tablewrapper { margin-right: 310px; float: left; }*/
#footer ul { margin: 0; margin-left: 10px; }
#footer li { margin: 0; padding: 0; }
#footer h3 { margin: 0; }
#footer .autolinks a { text-decoration: none; color: #999; }
#footer .autolinks a:hover { text-decoration: underline; color: #666; }
#footer .autolinks a, #footer .autolinks li { padding: 2px 0; }
.footerBottom p { margin: 0 16px; }
.footerTopRightCol { width: 290px; }


/* SideBar */
.latestupdates { margin-bottom: 20px;
	       padding: 16px 10px 40px 16px;
    background: white; border: 1px solid #ddd;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
.latestupdates h3 { margin-top: 4px; }
.latestupdates a { text-decoration: none; }
.latestupdates h3.updates-header { color: #666; padding-top: 2px; height: 34px; }
.latestupdates h4 { 
	color: #666; 
	margin-top: 12px;
	padding-top: 12px; 
	border-top: 1px solid #CCC;
	margin-bottom: 2px;
}

/* #Page Styles
================================================== */

ul.breadcrumbs + h1 { border-top: 1px solid #ccc; padding-top: 10px; padding-right: 360px; }

h1.huge { border-top: none; font-size: 400%; 
       line-height: 24px; margin-top: -5px; margin-bottom: 30px;  }
form+h2 { margin-top: 0px; }
strong, b { background: none; padding: 0; }
.bigger { font-size: 140%; line-height:140%; }
.smaller { font-size: 70%; }

/*.addthis_toolbox.addthis_default_style { height: 30px; float:right; margin-top: -32px; }*/

/* Minor addthis google +1 fix (no bubble please) */
/*.addthis_button_google_plusone div { width: 25px !important; overflow: hidden; }
.addthis_toolbox { margin-top: 16px; }*/
.addthis_button_google_plusone div { width: 40px !important; overflow: hidden; margin-top: 4px !important; }


/* some small adjustments */
.message { color: darkred; background:pink; padding: 3px; padding-left:8px; width:300px; }
fieldset .field.checkbox { margin-left: 200px; }
.stack fieldset .field.checkbox { margin-left: 0; }
input.text { width: 278px; }
input.smallinput { width: 50px; }
select { height: 30px; }
div.padTop, label.padTop { padding-top: 10px; display: block; }
.nonbold { font-weight: normal; }
textarea.smallinput {
  height: initial;
  min-height: 80px;
}
input[type=text], input[type=password], input[type=url], input[type=email], input.text, input.title, textarea, select {
  margin: 0.25em 0;
  font-size: 12px;
  vertical-align: bottom;
  padding: 6px;
}
.extra-info {
  margin-left: 6px;
  font-style: italic;
  font-size: 80%;
  color: gray;
}
input + .extra-info {
  margin-bottom: 6px;
  vertical-align: bottom;
  display: inline-block;
}
.steganography-encode-text-into-image form hr { margin: 14px 0; }
.icon span { top: 0; }

div#AscAns { margin-top: 10px; }
code.inline { color:#444;background:white;padding:3px;font-weight:normal; }
.result strong { font-size: 140%; }

/* password generator */
#Form_go_PassQuantity_Holder,
#Form_go_UseNoSimilar_Holder,
#Form_go_UseGame_Holder,
#Form_go_CustomChars_Holder
{
  margin-bottom: 12px;
}
.password-generator fieldset > label {
  width: 190px;
  float: left;
  text-align: right;
}
/* twitter symbols table (symbols bigger) */
.symboltable td+td { font-size: 140%; line-height: 80%; }
table td { padding: 7px; }
table th { font-weight: bold; font-size: 100%; padding-left: 7px; }

/* extra for code blocks */
code { border: none; padding: 0px; white-space: pre-wrap; color: black; }
pre { overflow: hidden; overflow-x: auto; width: 95%; }
code, pre {
  font-family: monospace;
  font-family: "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
}

/* Alternative fieldset styles #DCDBFC */
form { margin-top: 10px; clear: both; }
form fieldset { background: #E0EDF9; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }

/* Form stuff */
@media only screen and (min-width: 1100px) {
    form .middleColumn, p.field.checkbox { margin-left: 200px; }
    label + p.field.checkbox { margin-top: 32px; }
    div.Actions { margin-left: 220px; }
    form label.left, form label.padTop { width: 190px; float: left; text-align: right; margin-top: 10px; clear: left; }
    form .middleColumn ul { margin: 0px; padding-top: 4px; }
    .string-manipulation form textarea { width: 280px; }
    
    /* smaller form left col */
    form.smallerleft .middleColumn, form.smallerleft p.field.checkbox { margin-left: 100px; }
    form.smallerleft div.Actions { margin-left: 120px; }
    form.smallerleft label.left, form.smallerleft label.padTop { width: 90px; }
    form.smallerleft textarea { width: 300px; }
}
/* forms with extra .stack class -> stacked vertically */
form.stack .middleColumn, form.stack p.field.checkbox { margin-left: 0px; }
form.stack label + p.field.checkbox { margin-top: 32px; }
form.stack div.Actions { margin-left: 0px; }
form.stack label.left, form.stack label.padTop { width: 100%; float: none; text-align: left; margin-top: 10px; }
form.stack .middleColumn ul { margin: 0px; padding-top: 4px; }

.toollisting > div { width: 48%; float: left; margin-right: 4%; }
.toollisting > div.col2 { margin-right: 0px; }
.home .toollisting > div { width: 32%; margin-right: 2%; float:left; }
.toollisting > div.col3 { margin-right: 0px; }
.toollisting > div > div { /*border: 1px solid #CCC;*/ margin-bottom: 20px; padding: 6px 16px; 
    background: #efefef;/*#DCDBFC;*/ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.toollisting h2 { margin-top: 0px; margin-bottom: -10px; }
.toollisting a { text-decoration: none; }
.toollisting a:hover { text-decoration: underline; }
.toollisting a:hover img { opacity: 0.8; }
.toollisting h2 img { width: 54px; float: left; margin: -2px 6px -6px -10px; }
.toollisting ul { clear: left; }
.ToolHolderPage img.toolgroupimg { width: 120px; height: 120px; float:left; margin: -10px 0 -10px -12px; }
.ToolHolderPage img.toolgroupimg + p { min-height: 106px; }

.toollisting h2 img.ToolImage { height: auto; width: 100%; display: block; float: none; margin: 10px 0px 4px; }



/* Share action box */
div#socialsharewidget {
	background: #e0edf9;
	border: 1px dotted grey;
	-webkit-border-radius: 5px; 
	-moz-border-radius: 5px; 
	border-radius: 5px; 
	padding: 10px 18px;
	max-width: 340px;
	margin-bottom: 20px;
}
div#socialsharewidget h3 { margin: 4px 0px; }
div#socialsharewidget textarea#social_text {
	width: 330px; height: 60px; font-size: 85%;
}
a#socialsharetwitter, a#socialsharefacebook {
	display: inline-block; 
	zoom:1;*display:inline;
	height: 32px; width: 32px;
	background-image: url( ../images/twitter32.png );
}
a#socialsharefacebook { background-image: url( ../images/facebook32.png ); }
a#socialsharetwitter span, a#socialsharefacebook span { display: none; }
#social_gotoright { display: block; float: right; font-size: 80%; }
a#insertlink {
	background: url("../images/icon_link.png") no-repeat;
	padding: 2px 0px 2px 20px;
}

/* Tool specific: */
.slider label { display: block; clear: both; }
.slider .middleColumn { 
	float: left; margin-top: 0px; }
.slider .ui-slider { 
	margin-left: 80px; margin-top: 10px; }

/*#Form_go fieldset img { width: 100%; }*/
#Form_go fieldset img[title="favicon.ico"] { width: 16px; }

.labelmargintop { margin-top: 6px; }

.strikethrough-text textarea,
.strikethrough-text label {
    /*font-family: Roboto, "DejaVu Sans", "Arial Unicode MS", Arial, sans-serif !important;*/
    font-family: -apple-system, system-ui, "AppleGothic", "Lucida Grande", "Arial Unicode MS", "Times New Roman" !important;
}
.system-font { font-family: -apple-system, system-ui, "AppleGothic", "Lucida Grande", "Arial Unicode MS", "Times New Roman" !important; }
.times-font { font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;}

/*
 TXT ICONS
 */
.symboltable td:first-child {
  font-weight: bold;
}
.symboltable .copybuttons button {
  margin: 2px;
  padding: 3px 2px;
  border-radius: 4px;
  color: black;
  background: white;
  font-size: 18px;
  min-width: 26px;
  text-align: center;
  vertical-align: middle;
}

/* Barcodes */
img[title="Barcode"] {
    width: inherit;
    background: white;
}
p + #Form_go[action*="barcode"] #Form_go_action_Process {
  margin-bottom: 0;
}
#Form_go + #Form_go[action*="barcode"] fieldset {
  display: none;
}

.barcode-info:before {
  content: "";
  display: block;
  clear: both;
}
.barcode-info h3 small {
  display: block;
}
.barcode-sample {
  float: left;
  margin-right: 8px;
  display: inline-block;
  border-radius: 4px;
  background: white;
  border: 1px solid lightgrey;
  padding: 8px;
  padding-bottom: 4px;
  line-height: 1.3;
  max-width: 50%;
  word-break: break-word;
  font-size: 90%;
  color: gray;
}
.barcode-sample img {
  max-width: 100%;
  height: auto;
}
.barcode-result {
  display: inline-block;
  background: white;
  padding: 12px;
}
@media only screen and (min-width: 768px) {
  .barcode-AZTEC .barcode-sample,
  .barcode-DATAMATRIX .barcode-sample,
  .barcode-QRCODE .barcode-sample
  {
    max-width: 25%;
  }
}
#Form_go[action*="barcode"] + p {
  clear: left;
  padding-top: 32px;
  font-size: 90%;
}

/* Interest calc */
.financeCalculator h2, .InterestCalculatorTool h3 { 
	font-weight: normal; border-top: 1px solid #ccc; 
	padding-top: 6px; margin-top: 20px;
}
.financeCalculator h3 { padding-top: 10px; margin-top: 10px; }
.financeCalculator h2 #years { font-weight: bold; }
.financeCalculator h2 #totalamount {
	font-weight: bold; font-size: 130%;
}
.financeCalculator h3 #totalinterest {
	font-weight: bold; font-size: 130%;
}
#interestdetails { padding: 10px 20px 0; border: 1px solid #ccc; margin-bottom: 20px; }
#interestdetails table th { text-align: left; }
p.interestinfo { padding: 10px; margin-bottom: 20px; width: 300px;
	border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; }
#interestgraph { width: 320px; height: 260px; margin-top: 10px; }
#interestgraph table { width: auto; margin: 0px; }


/* Image stuff V2 */
p img.leftAlone { float: none; }

div#imgcolorize,
div#imgbwsep,
div.imgdroparea
{
  min-height: 140px;
  min-width:400px;
  border: 2px dashed grey;
  margin-top: 10px;
  border-radius: 20px;
  padding: 20px;
  text-align: center;
  background: white;
}
div#imgcolorize.highlight,
div#imgbwsep.highlight,
div.imgdroparea.highlight
{
  border-color: #508bb2;
  background-color: #E0EDF9;
}
/*div#imgbwsep { min-height: 120px; width:150px; border: 1px dotted grey; margin-top: 10px; background:white; }*/
div#imgbwsep.loaded,
div#imgcolorize.loaded,
div.imgdroparea.loaded {
  padding: 10px; width: auto;
}
div#imgcolorize canvas,
div#imgbwsep canvas,
div.imgdroparea canvas {
  max-width: 100%;
  height: auto !important;
}

/*div#imgcolorize { min-height: 120px; width:150px; border: 1px dotted grey; margin-top: 10px; background:white; }*/
/*div#imgcolorize.loaded { padding: 10px; width: auto; }*/


/*
DNSSEC
 */

.dnssec_frame {
  width: 100%;
  min-height: 1000px;
  border: none;
}

/*
IMG BYTE ARRAY
 */
.img_bytearr_preview {
  font-size: 0;
  line-height: 0;
  display: inline-block;
  border: 16px solid rgb(30,30,10);
  white-space: pre;
}
.img_bytearr_preview:before {
  content: '';
}
.ba_prev {
  display: inline-block;
  border-radius: 999px;
  height: 24px;
  width: 24px;
  cursor: pointer;
  border: 2px solid white;
  background: rgb(130,220,60);
}
.ba_prev.active {
  border: 2px solid transparent;
}
.ba_prev[data-toggle="blue"] {
  background: rgb(80,135,240);
}
.ba_prev[data-toggle="red"] {
  background: rgb(180,15,40);
}
.ba_prev[data-toggle="black"] {
  background: rgb(70,75,70);
}
.img_bytearr_preview div {
  display: inline-block;
  width: 6px;
  height: 6px;
  padding: 0;
  margin: 0 -2px -2px 0;
  background: rgb(130, 220, 60);
  border: 2px solid rgb(110, 200, 50);
}
.img_bytearr_preview.blue div {
  background: rgb(80, 135, 240);
  border-color: rgb(50, 130, 230);
}
.img_bytearr_preview.red div {
  background: rgb(180, 15, 40);
  border-color: rgb(190, 10, 30);
}
.img_bytearr_preview.black div {
  background: rgb(70,75,70);
  border-color: rgb(90,80,85);
}
.img_bytearr_preview.big-img div {
  width: 3px;
  height: 3px;
  border-width: 1px;
  margin: 0 -1px -1px 0;
}
.img_bytearr_preview.huge-img div {
  width: 2px;
  height: 2px;
  border-width: 0;
  margin: 0;
}
.img_bytearr_preview div.dark {
  background: rgb(30, 80, 24);
}
.img_bytearr_preview.blue div.dark {
  background: rgb(165, 220, 240);
}
.img_bytearr_preview.red div.dark {
  background: rgb(240, 55, 60);
}
.img_bytearr_preview.black div.dark {
  background: rgb(200,220,225);
}
/*.img_bytearr_outer {*/
  /*border: 10px solid rgb(10,100,40);*/
  /*display: inline-block;*/
  /*border-top-width: 24px;*/
  /*border-bottom-width: 24px;*/
/*}*/

/* ANSI / ASCII */
code span.ascii, code span.ansi {
    display: inline-block;
    white-space: pre;
    letter-spacing: 0;
    line-height:1;
    font-family: "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;

    /*font-weight: bold;*/
    font-size: 14px !important;

    color: black;
    background: white;
}
/*code span.ascii.vga-view, code span.ansi.vga-view {*/
  /*font-family: "BlockZone", monospace !important;*/
  /*font-size: 24px !important;*/
  /*font-weight: normal !important;*/
  /*font-smooth: never !important;*/
  /*-webkit-font-smoothing : none !important;*/
/*}*/
code span.ansi span {
  display: inline-block;
  /* depending on font size: 12/6, 16/8 or 12/7 */
  width: 7px !important;
}

#acii_ansi_holder.fullscreen_item span {
  font-size: 24px !important;
  font-weight: normal !important;
  font-smooth: never !important;
  -webkit-font-smoothing : none !important;
}
#acii_ansi_holder.fullscreen_item span.ascii {
  font-family: "BlockZone", monospace !important;
}
#acii_ansi_holder.fullscreen_item span.ansi {
  font-family: "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
}
#acii_ansi_holder.fullscreen_item span.ansi span {
  width: 12px !important;;
}

/*
  WHATSAPP SPOILER
 */
form.whatsapp-styling fieldset {
  position: relative;
  background-color: #e5ddd5;
  /*background-color: transparent;*/
}
form.whatsapp-styling fieldset > * {
  position: relative;
  z-index: 1;
}
form.whatsapp-styling .wa_intro_suggestions {
  display: block;
  margin-bottom: 8px;
}
form.whatsapp-styling .wa_intro_suggestions a {
  text-decoration: none;
  padding: 3px 2px;
  border-radius: 4px;
  background-color: lightgrey;
  border: 1px solid #bbb;
}
form.whatsapp-styling .wa_intro_suggestions a:hover {
  background-color: #eee;
}
form.whatsapp-styling label[for="Form_Content"] small {
  font-weight: normal;
}
form.whatsapp-styling fieldset::after {
  content: "";
  /* https://web.whatsapp.com/img/bg-chat-tile_9e8a2898faedb7db9bf5638405cf81ae.png */
  background-image: url('../images/whatsapp-bg-chat-tile.png');
  opacity: 0.06;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  /*z-index: -1;*/
}
div.whatsapp_preview {
  position: relative;
  display: inline-block;
  margin-bottom: 12px;
  white-space: pre;
  min-width: 6rem;
  /* duplicated from WhatsApp web interface */
  font-family: Segoe UI,Helvetica Neue,Helvetica,Lucida Grande,Arial,Ubuntu,Cantarell,Fira Sans,sans-serif;
  font-size: 14.2px;
  line-height: 19px;
  padding: 6px 7px 8px 9px;
  border-radius: 7.5px;
  box-shadow: 0 1px 0.5px rgba(0,0,0,.13);
  background-color: #dcf8c6;
  color: #262626;
  color: black;

  border-top-right-radius: 0;
}
div.whatsapp_preview::before {
  content: '';
  display: block;
  /* duplicated from WhatsApp web interface */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAmCAMAAADp2asXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAADAUExURUxpcXmHa4maet/4yA0aDRMTE8fhsgAAAAAAAMDXrCsxJeX/z1xzXIiYetPsvGBsVUdPPuH8zOH8zNDrvMvmtrrOpwAAAAAAABUVFRoaGtnyxLTMozQ+MMfftFBeSR8nH5aoh6q/mW9+ZN/4yMjhtRwlHAAAAIOWd+r/06C1kkNLOwsLC9z4xur/0+n/0t76x9v4xeL9y+b/z+j/0d/7yeH8yuX/zeD8ytz5xt76yOP/zeH+y+b/zuD8yd35xuf/0MY9jkkAAAAsdFJOUwBvd/ATDZIBAsMp/At/11c9yPbizHoICQwT4bY1ykkgjahl6s8bBYT6nUAWOLbtFAAAAIhJREFUKM/tzbUWwlAURNFBE9zdg0NecLf//yvKUJyUdDnl7HXXletXqmXl9wPbQ9JCcC+VJsOj2mDwovzj3osjHGNFEVxNRAj7UR1hlx+I4FbuC8HkZBE8OwnRxamdFsEmUxCCGdoI51RLBK9xVwTvjyMEbzlDMJMp7lqseNc8YNc6CGyF/a0vcmwhZbCG+kEAAAAASUVORK5CYII=);
  right: -12px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  position: absolute;
  top: 0;
  width: 12px;
  height: 19px;
}
div.whatsapp_preview a {
  color: #00a5f4;
  white-space: nowrap;
}
div.whatsapp_preview #wa_readmore .readmore_content  {
  display: none;
}
div.whatsapp_preview #wa_readmore.show_spoiler .readmore_link {
  display: none;
}
div.whatsapp_preview #wa_readmore.show_spoiler .readmore_content {
  display: inline;
}

/*
  ASCII BANNER
*/
form.ascii_banner .js-link {
  display:inline-block;padding:7px;margin-left:12px;
}
form.ascii_banner h3 {
  display: inline-block;
}
form.ascii_banner h3 + small a {
  display: inline-block;
  padding: 7px;
  margin-top: -3px;
  margin-left: 8px;
  vertical-align: middle;
}
#ascii_banner_preview pre {
  width: unset;
  box-shadow: none;
  border: none;
  white-space: pre;
  overflow: visible;
  font-size: 10px;
  line-height: 1;
  font-weight: bold;
  color: white;
  background: black;
}
#ascii_banner_preview.for_message_app pre {
  color: black;
  background: transparent;
  font-size: 13px;
  margin: 0;
}

#ascii_banner_preview.fullscreen_item {
  padding-top: 20vh;
  background: black;
}
#ascii_banner_preview.fullscreen_item small {
  color: white;
  border-color: white;
}
#ascii_banner_preview.fullscreen_item pre {
  /*font-family: "BlockZone", monospace !important;*/
  font-size: 24px !important;
  /*font-weight: normal !important;*/
  /*font-smooth: never !important;*/
  /*-webkit-font-smoothing : none !important;*/
  border: none;
}

/* GENERAL FULL SCREEN MODUS */
body.item_fullscreen_modus {
  overflow: hidden;
}
body.item_fullscreen_modus .Navigation {
  display: none;
}
.fullscreen_item {
  position: fixed;
  z-index: 9999;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  padding: 32px;
  overflow-x: scroll;
  background: lightgrey;
}
.fullscreen_item small {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid black;
  border-radius: 4px;
  color: black;
  cursor: pointer;
  /*text-decoration: underline;*/
  font-size: 16px;
  position: fixed;
  top: 20px;
  right: 20px;
}

/* #Media Queries
================================================== */

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}


@media only screen and (max-width: 1200px){
	#BottomAd, #CenterAd { float:none; margin-left: 10px; }
	#CenterAd { margin-top: 20px; }
	h1 { padding-right: 0px; }
}



