/* XGA.css - STYLE-SHEET for INCA-RAFT */

/* HIDE some buttons on actual page */
#reset, .print-vga, .print-svga, .print-1000 {display:none}
@media screen { body { max-width:1024px !important; }}
@media print { body { width:1024px !important; }}
@media print { [class*="main"] { border:1px grey solid !important; }}
@media print { [class*="lift-out"], [class*=ramme], [class*=shadow]  { box-shadow:none !important; }}
@media print { #reset, .ul, .print, .no-print, .farao, .dina, .inca, .topa, .raft, .inca-sol { display:none !important; }}
@media print { .break-xga { break-before:always; page-break-before:always !important; }}
@import url('https://fonts.googleapis.com/css?	family=Cutive+Mono|Graduate|Hepta+Slab|Iceberg|Iceland|Open+Sans+Condensed:300|Orbitron|Rancho|Rationale|Roboto|Roboto+Condensed|Roboto+Slab|Short+Stack|Special+Elite&display=swap');

body { margin:auto; text-align:center; font-family: 'Short Stack',cursive; color:#FED; 
Background-image:URL(img0/colibri-v.gif),URL(img0/colibri-h-move.gif); Background-attachment:fixed; 
background-position: left 3% bottom 10%, right 3% bottom 10%; background-repeat: no-repeat; }

/* the rest of same COLOR-declarations */
.main { max-width:1024px; border-width:12px; border-style:double;border-radius:20px; margin:auto; 
font-size:.8em; background-color:gainsboro; padding:16px; font-family: 'Roboto', sans-serif; color:#001; text-align:justify;}

hr { width:70%; border-width:3px; border-style:double; }

/* HEADERs TEXT declarations */
H1 {text-align:center; font-family: 'Graduate', cursive; font-size:250%; font-weight:normal; margin:.0em;}
H2 {text-align:center; font-family: 'Orbitron', sans-serif; font-size:200%; font-weight:normal; margin:.0em;}
H3 {text-align:center; font-family: 'Hepta Slab', serif; font-size:170%; font-weight:normal; margin:.0em;}
H4 {text-align:center; font-family: 'Iceberg',cursive; font-size:150%; font-weight:normal; margin:.0em;}
H5 {display:inline; font-family: 'Short Stack',cursive; font-size:120%;font-weight:normal;margin:.0em;  }
H6 {display:inline; font-family: 'Rationale', sans-serif; font-size:115%;font-weight:normal; } 
EM {font-family: 'Roboto Slab', serif; font-variant:small-caps; font-style:normal; font-weight:normal;}

/* SPECIAL fremhævet ZONE */
.lift-out { width:80%; border-width:4px; border-style:double; border-radius: 16px; text-align:center; margin:auto; padding:12px; background-color:#FED; box-shadow: 0px 2px 8px 2px #333; font-family:'Cutive Mono', monospace;}

/* Rammer omkring */
.ramme { border-width:4px; border-style:double; border-radius:10px; padding:8px; }
.mark { border-width:1px; border-style:solid; border-radius:10px; margin:6px; padding:1px}
.shadow { border-radius:6px; box-shadow: 0px 2px 8px 2px #333;}

/* STRUCTURAL organization af page */
figcaption {text-align:center; font-family:'Roboto Condensed', Sans-Serif; color: #003; font-style:italic;  font-size:0.9em; }
figure { text-align:center; font-family: 'Roboto', sans-serif; color: #003; font-size:0.9em; padding:10px;}
.center { width:80%; margin:auto; text-align:center; }
.inline {display:inline-block; padding:10px; }
.hidden {display:none;} 

/* clearfix-hack lægger en virtuel ramme uden om indholdet af FLOATEDE elementer - men kan lige så godt lægges ind i en STYLE */
.clearfix {overflow:auto }

.flex-container {display:flex; flex-direction:row; align-items:center; justify-content:center; flex-wrap:wrap; width:100%; margin:auto;}
.flex-container div {padding:8px; }

/* classes for lining of text (og images) inside BLOCKS - blocks som normalt er indlagt i flex-container-blocks */
.text {text-align:justify; vertical-align:middle; font-family: 'Roboto Condensed', sans-serif; color: #003; font-style:italic; font-size:0.9em; padding:10px;}
.textC {text-align:center; vertical-align:middle; font-family: 'Roboto Condensed', sans-serif; color: #003; font-style:italic; font-size:0.9em; padding:10px;}
.textL {text-align:left; vertical-align:middle; font-family: 'Roboto Condensed', sans-serif; color: #003; font-style:italic; font-size:0.9em; padding-left:10px;}
.textR {text-align:right; vertical-align:middle; font-family: 'Roboto Condensed', sans-serif; color: #003; font-style:italic; font-size:0.9em; padding-right:10px;}

/* float of blocks */
.floatR { float:right; margin-left:16px;}
.floatL { float:left; margin-right:16px;}

.post-it { float:left; background-color:#ffb; padding:15px; font-family:  'Rancho', regular; font-size:15px; color: #008; width:120px; transform: rotate(-8deg);box-shadow: 0px 2px 8px 2px #333; margin: 12px 12px 12px -12px; text-align:left; z-index:5;}
.post-it:hover { transform:scale(2,2); transform-origin: 50% 50%; }

.post-itR { float:right; background-color:#ffb; padding:15px; font-family: 'Rancho', regular; font-size:15px; color: #008; width:120px; 
transform: rotate(8deg); box-shadow: 0px 2px 8px 2px #333; margin:12px -12px 12px 12px;text-align:left;z-index:8;}
.post-itR:hover { transform:scale(2,2); transform-origin: 50% 50%; }

.post-itC { background-color:#ffB; padding:15px; font-family: 'Rancho', regular; font-size:15px; color: #008; width:120px; box-shadow: 0px 2px 8px 2px #333; margin:auto; text-align:left; cursor:zoom-in;z-index:8;}
.post-itC:hover { transform:scale(2,2); transform-origin: 50% 50%; }

/* særlige small-BLOCK dimensions */
.raft { float:left; margin-left:0px; margin-top:0px;text-align:center;font-size:.7em;color:#006; width:50px; }
.inca { float:right; margin-right:0px;margin-top:0;text-align:center;font-size:.7em;color:#006; width:40px; }
a.tooltip-raft { background-color:gainsboro }

/* some fixed widgets */
.farao {position:fixed; width:60px; left:4%; top:25%; color:gold; text-align:center; font-size:.7em; z-index:-1;}
.topa {position:fixed; width:60px; left:4%; top:55%; color:gold; text-align:center; font-size:.7em; z-index:-1;}
.inca-sol {position:fixed; width:65px; right:3%; top:10%; color:gold; text-align:center; font-size:.7em;z-index:-1;}
.dina {position:fixed; width:40px; right:4%; top:40%; color:gold; text-align:center; font-size:.7em;z-index:-1;}

span button {font-family: 'Iceland', cursive; font-size:1.0em;}

/* HOVER on first span-hotzone will let something pop-up from a SPAN inside a HOT-ZONE element */
.hot-zone span {display:none;}
.hot-zone:hover span { display:block; margin:auto;} 

/* handling of HYPERLINKS */
button:hover {cursor:pointer;}
A > button {font-family: 'Iceland', cursive; font-size:1.0em;}
A {color:#000; text-decoration:none; }
A:link {color:#000; font-style:normal; text-decoration:none;}
A:visited {color:#009; font-style:normal; text-decoration:none; border:hidden;}
A:hover {font-size:100%; font-style:italic; text-decoration:none;}
A:active {font-size:100%; color:#000; font-style:italic; text-decoration:none; }

[class*="nail"] {width:50px; }
.nail:hover  { transform:scale(3,3); transform-origin: 50% 50%; background-color:gainsboro; }
.nailE:hover { transform:scale(3,3); transform-origin: 90% 50%; background-color:gainsboro; }
.nailW:hover { transform:scale(3,3); transform-origin: 10% 50%; background-color:gainsboro; }
.nail:active  { transform:scale(9,9); transform-origin: 50% 50%; background-color:gainsboro; }
.nailE:active { transform:scale(9,9); transform-origin: 90% 50%; background-color:gainsboro; }
.nailW:active { transform:scale(9,9); transform-origin: 10% 50%; background-color:gainsboro; }

/* IMAGE - red ALT-name if image doesn't appear */
img {max-width:100%; border-radius:6px; color: #F00; text-align:center; font-family: 'Special Elite', monospace; font-weight:bold; }

/* [class*="enlarge"] {cursor:zoom-in; } */
.enlarge:hover  { transform:scale(2,2); background-color:gainsboro; transform-origin: 50% 50%; cursor:zoom-in; z-index:10; }
.enlargeE:hover { transform:scale(2,2); background-color:gainsboro; transform-origin: 90% 50%; cursor:zoom-in; z-index:10; }
.enlargeW:hover { transform:scale(2,2); background-color:gainsboro; transform-origin: 10% 50%; cursor:zoom-in; z-index:10; }
.enlargeN:hover { transform:scale(2,2); background-color:gainsboro; transform-origin: 50% 20%; cursor:zoom-in; }
.enlarge:active { transform:scale(4,4); background-color:gainsboro; transform-origin: 50% 50%; }
.enlargeE:active { transform:scale(4,4); background-color:gainsboro; transform-origin: 90% 50%; }
.enlargeW:active { transform:scale(4,4); background-color:gainsboro; transform-origin: 10% 50%; }
.enlargeN:active { transform:scale(4,4); background-color:gainsboro; transform-origin: 50% 50%; }

/* PRINTER menu */
.print {position:fixed; left:20px; top:10px; max-width:140px; background-color:transparent; z-index:9; }
.print:hover {background-color:#eee; border:1px solid #000; border-radius:4px; cursor:pointer; z-index:9;}
.icon { font-family: 'Roboto', sans-serif; width:60%; margin:auto;color:gold; font-size:.9em; text-align:center; background-color:transparent;}
.icon:hover {color:#404; font-style:italic; background-color:transparent; cursor:pointer; z-index:9;text-align:center; }
.menu {display: none; position: relative; color: #404; font-family:'Roboto', sans-serif; font-size:.8em; z-index:9; }
.menu:hover {background-color:transparent;}
.print:hover .menu { display: block;}

/* Change color of dropdown-links on hover */
.menu div:hover, .menu a:hover  {background-color: #66F; color: #FFF;font-style:italic;}
.ul {display:flex; flex-direction:row; align-items:center; justify-content:center; flex-wrap:wrap; width:100%; margin:auto;border-radius:0px;padding-top:0px;}
.li {font-family: 'Open Sans Condensed',sans-serif; text-align: center; font-size:1.0em; padding: 0px 10px;}
.li a {text-decoration: none;color:#FED}
.li a:hover { font-style:italic;}
.tap {border-radius:12px 12px 0 0; border-bottom:none; background-color:gainsboro;color:#00D; padding:2px;}
.fane {border-radius:12px 12px 0 0; border:2px solid #FED; border-bottom:none;}

/* style for MENU */
ul { max-width:1024px;
    margin:auto;
    list-style-type: none;
    padding:0px 1px;
    overflow: hidden;
    background-color: #EEE;
    border:0px solid #000; 
    position: fixed;
    top:0px; }
li {float: left;}
li a { display: inline;
    font-family: 'Open Sans Condensed', sans-serif;
    text-align: center;
    padding: 0px 10px;
    text-decoration: none; }
li a:hover { background-color: #66F;
    font-style:italic;
    color:#fff;     }

/* skabelsen (erklæringen) af TOOLTIP = en popup af text */
[class*="tooltip"] {display: inline; position: relative;}

/* det udseende der er fælles for alle tooltip */
[class*="tooltip"]:hover:after { 
font-family:'Roboto Condensed', sans-serif;
font-style: normal;
background: rgba(255,215,0,.8);
border-radius: 50%;
width: 120px;
content: attr(ttt); /*ToolTipText */
border: 2px #C00 solid;
text-align:center;
color: #00F;
padding: 20px 10px;
position: absolute;
z-index: 8;
}

/* dette er selve ovale POP-UP-label for tooltip-raft */
.tooltip-raft:hover:after { font-size:.9em; top: 10px; left: -10px; }

/* dette er selve den ovale POP-UP-label for tooltip-inca */
.tooltip-inca:hover:after{ font-size:1.2em; top: -10px; right: 100%; } 


/* dette er selve den ovale POP-UP-label for tooltip-Dina */
.tooltip-Dina:hover:after{ font-size:1.0em; top: 30px; left: -50px; }