/*
 * Copyright (c) 2016, 2024, 5 Mode
 * All rights reserved.
 * 
 * This file is part of Fire6Fly.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are met:
 *     * Redistributions of source code must retain the above copyright
 *       notice, this list of conditions and the following disclaimer.
 *     * Redistributions in binary form must reproduce the above copyright
 *       notice, this list of conditions and the following disclaimer in the
 *       documentation and/or other materials provided with the distribution.
 *     * Neither 5 Mode nor the names of its contributors 
 *       may be used to endorse or promote products derived from this software 
 *       without specific prior written permission.
 * 
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDERS OR CONTRIBUTORS BE LIABLE FOR ANY
 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 * 
 * style.css
 *
 * Fire6Fly style sheet.
 *
 * @author Daniele Bonini <my25mb@aol.com>
 * @copyrights (c) 2021, 2024, 5 Mode 
 */

@import url('https://fonts.googleapis.com/css2?family=Poor+Story&display=swap');

body {
  margin-top:20px;
  /*background: #C2DBF2;*/
}
#appMenuIco {
  float:left; 
  position:relative; 
  top:1px; 
  left:-20px;
  cursor: pointer; 
}
.aaa {
  color: darkgreen;
}
.bbb {
  color: #7bca2e;
  text-decoration: underline;
}
.app-Menu {
  float:left; 
  position:relative; 
  width: 150px; 
  top:+43px; 
  left:+22px; 
  background:#313431; 
  cursor: pointer; 
}
#AFHint {
  width:100%;
  height:fit-content;
  position:fixed;
  top:-5px;
  background:yellow;
  color:darkorange;
  text-align:center;
  cursor:pointer;
  display:inline;
  z-index:99999;
}
#avatarLogo {
  float:left;
  width:255px;
  height:255px;
}
#avatarName {
  width:250px;
  height:255px;
  padding-top:122px;
  float:left;
  border:0px solid yellow;
  vertical-align:middle;
}
#blog {
  height:fit-content;
  float:left;
  margin:6%;
  margin-top:0px;
  margin-bottom:5px;
  width:90%;
  font-size:15px;
  font-family:'Press Start 2P';
  color:#000000;
}
.blog2 {
  margin-top:25px;
  margin-left:9px;
  width:98%;
  height:92%;
  color:#000000;
  background:lightgray;
  border: 1px solid lightgray;
  overflow-y: auto;
  resize:none;
}
.blog-content {
  width:100%;
  float:left;
  border:3px solid darkgray;
  border-radius:4px;
  color:#000000;
}
.blog-entry {
  width:100%;
  margin-bottom:0px;
  min-height:80px;
  background:lightgray;
  /*border:1px solid black;*/
  padding:30px;
  text-align:left;
}
#boxGallery {
  float:left;
  width:70%;
  height:30%;
  font-size:12px;
  background: #333;
  border:1px solid lightgray;
  text-align: center;
}
#boxDirectory {
  float:left;
  width:30%;
  height:30%;
  font-size:12px;
  background: #333;
  border:1px solid lightgray;
  text-align: center;
}
#boxText {
  float:left;
  width:70%;
  height:70%;
  font-size:12px;
  background: #333;
  border:1px solid lightgray;
  text-align: center;
}
#boxNote {
  float:left;
  width:30%;
  height:70%;
  font-size:12px;
  background: #333;
  border:1px solid lightgray;
  text-align: center;
}
.box-title {
  float:left;
  width:100%;
  font-size:11px;
  color: #FFFFFF;
  margin-top:6px;
  margin-left:8px;
  text-align:left;
}
.buttondisplaylist {
  float:right; 
  position:relative; 
  left:-10px; 
  top:+2px; 
  background-color:transparent; 
  border:0px;
}
#cbLang {
  margin-left:22px;
  font-size:10px;
}
#coding {
  float:left;  
  width:100%;
}
#copyrights {
  float:left;
  margin:6%;
  margin-top:50px;
  width:90%;
  font-size:15px;
  font-family:Arial,Sans,Verdana;
  color:#000000;
  background:#dadada
}
.copyrights-content {
  width:100%;
  float:left;
  border:3px solid transparent;
  border-radius:4px;
  color:#000000;
  padding-top:10px;
  text-align:center;
}
.copyright-entry {
  height:fit-content;
  min-height:120px;
  float:left;
  width:fit-content;
  border:0px solid green;
  padding:10px;
  text-align:center;
}
.copyright-ico {
  width:64px;
  border:0px solid gray;
}
#cudoz {
  width:250px;
  height:255px;
  padding-top:116px;
  float:left;border:0px solid green;
  vertical-align:middle;
}
.cudoz-entry {
  float:left;
  width:46px
}
.cv-entry {
  float:left;
  width:64px
}
#cvs {
  float:right;
  border:3px solid darkgray;
  border-radius:4px;
  padding:4px;
  background:#dadada;
  font-size:20px;
  font-family:'Press Start 2P';
  font-weight:900;
}
#directory2 {
  margin-top:25px;
  margin-left:9px;
  width:98%;
  height:82%;
  color:#FFFFFF;
  background:transparent;
  border: 0px solid lightgray;
  overflow-y:auto;
  resize:none;
}
.dragover {
  width:100%;
  height:100%;
}
.element {
  width:80%; 
  margin:auto; 
  background-color:#FFFFFF; 
  border: 3px solid gray; 
  height:fit-content;
  margin-bottom:0px;
}
.element-ghost {
  width:80%; 
  margin:auto; 
  background-color:#FFFFFF; 
  border: 3px dashed lightgray; 
  height:fit-content; 
  margin-bottom:20px;
}
.eltxtfield0 {
  width:98%; 
  font-size: 34px; 
  border-radius:5px; 
  border:1px solid darkgray;
}
.eltxtfield {
  width:98%; 
  font-size: 34px; 
  border-radius:5px; 
  border:1px solid darkgray;
  border-right:0px;
  color: #444;
}
.eltxtarea {
  padding-left:20px; 
  padding-right:20px;
}
.eltitle {
  width:100%;
  height:33px; 
  background-color:gray;
  color:#FFFFFF;
}
.eltitleghost {
  width:100%;
  height:33px; 
  background-color:lightgray;
  color:#FFFFFF;
}
.ffly-list-entry {
  background-color:#061d35;
  text-align:center;
  color:#96ffc0;
}
.ffly-list-entry:hover {
  background-color:#96ffc0;
  color:#061d35;  
}
.file-entry {
  height:fit-content;
  min-height:120px;
  float:left;
  width:fit-content;
  border:0px solid green;
  padding:10px;
  text-align:center;
}
.file-ico {
  width:64px;
  border:0px solid gray;
}
#fileList {
  position:absolute; 
  top:-0px; 
  left:-5px;
  width:450px; 
  height:482px; 
  display:none;
}
#footerCont {
  position: fixed; 
  top: 2000px; 
  left:-10px;
  width: 102%; 
  border: 1px solid #C2DBF2; 
  padding: 7px; 
  background: white; 
  opacity: 0.3;
  color:white; 
  font-family: Arial,Sans,Vardana;
  font-size: 12px; 
  text-align: center; 
  z-index: 99998;
}
#footer {
  position: fixed;
  float: right;
  top: 2000px; 
  left:-10px;
  width: 100%; 
  border: 0px solid #C2DBF2; 
  padding: 7px; 
  opacity: 1.0;
  color:black; 
  font-family: Arial,Sans,Vardana;
  font-size: 12px; 
  font-weight: 400;
  text-align: right; 
  z-index: 99999;
}
#friends {
  float:left;
  margin:6%;
  margin-top:50px;
  width:90%;
  font-size:15px;
  font-family:Arial,Sans,Verdana;
  color:#000000;
  background:#dadada
}
.friends-content {
  width:100%;
  float:left;
  border:3px solid transparent;
  border-radius:4px;
  color:#000000;
  padding-top:10px;
  text-align:center;
}
.friend-entry {
  height:25px;
  min-height:25px;
  width:fit-content;
  border:0px solid green;
  padding:10px;
  margin-left:10px;
  text-align:center;
}
.friend-ico {
  width:64px;
  border:0px solid gray;
}
#gallery {
  float:left;
  margin:6%;
  margin-top:0px;
  margin-bottom:5px;
  width:90%;
  font-size:15px;
  font-family:Arial,Sans,Verdana;
  color:#000000;
  background:#C2DBF2;
}
.gallery2 {
  margin-top:25px;
  margin-left:9px;
  width:98%;
  height:82%;
  color:#FFFFFF;
  background:#28312e;
  border: 1px solid lightgray;
  overflow-y: auto;
  resize:none;
}
.gallery-content {
  width:100%;
  float:left;
  border:3px solid darkgray;
  border-radius:4px;
  color:#000000;
}
#hashMe {
  position:relative; 
  left:-2px; 
  top:+5px; 
  font-size:18px; 
  font-weight:900; 
  color:#000000;
}
.image-entry {
  height:fit-content;
  min-height:120px;
  float:left;
  width:fit-content;
  border:0px solid green;
  padding:10px;
  text-align:center;
  white-space: nowrap;
}
.image-ico {
  width:64px;
  border:1px solid gray;
}
#mycopyrightsTitle {
  font-family:'Press Start 2P';
  width:fit-content;
  margin:auto;
  color:#245269;
}
#mynetworkTitle {
  font-family:'Press Start 2P';
  width:fit-content;
  margin:auto;
  color:#245269;
}
#notBoughties {
  display:none;
}
.lanelist {
  margin-top:12px;
  margin-right:38px;
  margin-left:38px;
} 
.lanelistcyan {
  background-color: cyan;
}
.lanelistorange {
  background-color: orange;
} 
.lanelistwhite {
  background-color: white;
}  
.lanelistred {
  background-color: #f87552;
}
.lanelistyellow {
  background-color: yellow; 
}
.lanelistgray {
  background-color: darkgray; 
}
.lanelistgreen {
  background-color: green; 
}
.lanelistblack {
  background-color: black; 
}
.lanelistblue {
  background-color: blue; 
}
.lanelistlightgreen {
  background-color: lightgreen; 
}
.lanelistyellow {
  background-color: yellow; 
}
.listcont {
  position:relative;
  width:450px; 
  margin-top:20px; 
/*  margin-left:1.2%; 
  margin-bottom:80px;*/
  margin:auto;
}
.listcontr {
  float:left; 
  width:30%; 
  margin-top:20px; 
  margin-left:1.2%; 
  margin-bottom:80px;
}
.list {
  float:left; 
  width:100%; 
  padding:5px; 
  text-align:center; 
  margin-bottom:20px;
}
.listred {
  background-color: #f87552;
}
.listdarkred {
  background-color: darkred;
}
.listred-title {
  /*color:#00417c;*/
  color: #666666;
}  
.listyellow {
  background-color: yellow; 
}
.listyellow-title {
  /*color:#00417c;*/
  color: #666666;
}  
.listgray {
  background-color: darkgray; 
}
.listgray-title {
  color:#444;
}  
.listgreen {
  background-color: lightgreen; 
}
.listgreen-title {
  color: greenyellow;
}  
.listblack {
  background-color: black; 
}
.listwhite-title {
  color: #FFFFFF;
}  
.listblue {
  background-color: blue; 
}
.listcyan-title {
  color: cyan;
}
.listorange-title {
  color: orange;
}
.listlightgreen {
  background-color: lightgreen; 
}
.listdarkgreen-title {
  color: darkgreen;
}
.listyellow {
  background-color: yellow; 
}
.listred-title {
  color: red;
}  
.listel {
  width:100%; 
  height:fit-content; 
  text-align:center;
  padding-top:20px;
  padding-bottom:50px;
}
#magicjar1 {
  float:left;
  margin:6%;
  margin-top:0px;
  margin-bottom:5px;
  width:90%;
  font-size:15px;
  font-family:Arial,Sans,Verdana;
  color:#000000;
  background:#f7ecb5;
}
.magicjar1 {
  float:left;
  width:120px;
  height:120px;
  background-size:120px 120px;
  cursor:pointer;
}
.magicjar1-content {
  width:100%;
  float:left;
  border:3px solid darkgray;
  border-radius:4px;
  color:#000000;
}
.magicjar2 {
  float:left;
  width:120px;
  height:120px;
  background-size:120px 120px;
  cursor:pointer;
}
#magicjar2 {
  float:left;
  margin:6%;
  margin-top:0px;
  margin-bottom:5px;
  width:90%;
  font-size:15px;
  font-family:Arial,Sans,Verdana;
  color:#000000;
  background:#f7ecb5;
}
.magicjar2-content {
  width:100%;
  float:left;
  border:3px solid darkgray;
  border-radius:4px;
  color:#000000;
}
.magicjar3 {
  float:left;
  width:120px;
  height:120px;
  background-size:120px 120px;
  cursor:pointer;
}
#magicjar3 {
  float:left;
  margin:6%;
  margin-top:0px;
  margin-bottom:5px;
  width:90%;
  font-size:15px;
  font-family:Arial,Sans,Verdana;
  color:#000000;
  background:#f7ecb5;
}
.magicjar3-content {
  width:100%;
  float:left;
  border:3px solid darkgray;
  border-radius:4px;
  color:#000000;
}
.magicjar-num {
  float:right;
  margin-left:99.9%;
  margin-right:2px;
  background:yellow;
  color:darkorange;
}
.no-drop {
  cursor: not-allowed;
}  
.no-dropzone {
  cursor: not-allowed;
}
.note2 {
  margin-top:25px;
  margin-left:9px;
  width:98%;
  height:82%;
  color:#FFFFFF;
  background:#28312e;
  border: 1px solid lightgray;
  resize:none;
}
.note-content2 {
  margin-top:40px;
  margin-left:18px;
  text-align:left;
  color:#FFFFFF;
}
#originsDisplay {
  float:left;
  position:fixed;
  top:680px;
  left:50px;
  width:275px;
  height:100px;
  font-family: Monospace, Verdana, Serif;
  font-size: 18px;
  background-color: #020401;
  border: 3px solid lightgray;
  text-align:left;
  color: #FFFFFF;
  white-space:nowrap; 
  font-weight:900;
  padding:10px;
  padding-top:4px;
  z-index:99999;
  display:none;
}
.originLabel {
  color: #7bca2e;
  font-weight:900;
}
#OriUrl {
  height:fit-content;
  float:left;
  margin:6%;
  margin-top:130px;
  margin-bottom:5px;
  width:90%;
  font-size:15px;
  font-family:'Press Start 2P';
  color:#000000;
}
.oriurl-content {
  width:100%;
  float:left;
  border:3px solid darkgray;
  border-radius:4px;
  color:#000000;
}
.oriurl-entry {
  width:100%;
  margin-bottom:0px;
  min-height:80px;
  background:#FFFFFF;
  border:1px solid black;
  padding:30px;
  text-align:left;
}
#pagetitle {
  float:left; 
  width:100%;
  height:70px;
  padding:5px; 
  text-align:center; 
  margin-bottom:20px;
  background-color:#3366ff;
  color:#FFFFFF;  
  opacity:0.8;
  font-family:'Indie Flower';
  font-size:30px;
  font-style:italic;
  font-weight:900;
  position:relative;
  top:-60px;
  /*color:#5e383a;*/
}
#Password {
  font-size:18px;  
  background:transparent; 
  width: 60%; 
  border-radius:3px; 
  font-weight:900;
}
#passworddisplay {
  float:left;
  position:fixed;
  top:680px;
  left:50px;
  width:255px;
  height:120px;
  background:darkgray;
  text-align:left;
  white-space:nowrap; 
  font-family:Arial,Sans,Verdana; 
  color:#000000; 
  font-weight:900;
  z-index:99999;
}
#picavatar {
  position:absolute;
  width:255px;
  height:255px;
 /*border-radius: 90%;*/
  display:none;
}
.prodel {
  text-align:left;
  padding:36px;
  padding-top:7px;
  padding-right:16px;
  color:#444;
  font-weight:900;
}
.prodlist {
  padding-top:6px;
}
.prodname {
  width:45%;
  float:left;
  padding-top:8px;
  border-bottom:1px dotted darkgray;
}
.prodprice {
  width:20%;
  float:left;
  padding-top:8px;
}
.prodaction {
  width:17%;
  float:left;
  cursor:pointer;
  text-align:center;
  margin:auto;
}
.prodactionimg {
  position:relative;
  left:+10px;
  margin-bottom:7px;
  width:42px;
}
#carties {
  display: none;
}
#resizeBanner {
  display:none;
  text-align:center;
  vertical-align:middle;
  margin-top:38%;
  width:100%;
  height:100%;
}
#results {
  display: none;
}
#Salt {
  position:relative; 
  top:+5px; 
  font-size:18px; 
  background:transparent;
  width: 90%; 
  border-radius:3px; 
  font-weight:900;
}
.settingson {
  float:left;
  width:120px;
  height:150px;
  border:0px solid black;
  background:url(/res/settingsoff.png);
  background-size:cover;
  cursor:pointer;
  display:none;
}
.settingsoff {
  float:left;
  width:120px;
  height:150px;
  border:0px solid black;
  background:url(/res/settingson.png);
  background-size:cover;
  cursor:pointer;
}
#title {
  position:relative;
  top:20px;
  left:50px;
  width:100%;
  float:left;
  font-size:25px;
  font-family:'Press Start 2P';
  border:0px solid blue;
}
.titlelane {
  text-align:left;
  margin-bottom:8px;
  font-weight:900;
  text-align:left;
}
.titlelanecyan {
  color:darkcyan;
}
.titlelanered {
  color:darkred;
}
.titlelaneblack {
  color:black;
}
.titlelanered {
  color: red;
}  
.titlelaneyellow {
  color: yellow;
}  
.titlelanegray {
  color: #444;
}  
.titlelanegreen {
  color: greenyellow;
}  
.titlelanewhite {
  color: #FFFFFF;
}  
.titlelaneorange {
  color: orange;
}
.titlelanedarkgreen {
  color: darkgreen;
}
.tools {
  position:fixed;
  top:12px;
  width:120px;
  height:620px;
  display:none;
}