/* # # # # FONTS # # # # */ @font-face {font-family: "C64-Original"; src: url("../organs/fonts/C64Original.woff");} @font-face {font-family: "C64-Modern"; src: url("../organs/fonts/C64Modern.woff");} @font-face {font-family: "fwdicon"; src: url("../organs/fonts/fwdicon.woff");} /* # # # # SCROLLBAR # # # # */ /* ---- Scrollbar for Chrome and Qortal ---- https://www.youtube.com/watch?v=lvKK2fs6h4I&ab_channel=KevinPowell*/ ::-webkit-scrollbar {width: 30px; background-color:#FFFFFF; /* Track Color*/} ::-webkit-scrollbar-thumb {background-color:#0004ff; /* Thumb/Handle Color 2c2fbc 2d2fa2 0004ff*/ border: 2px solid #c8a667;} ::-webkit-scrollbar-thumb:hover {background: #2c2fbc;} ::-webkit-scrollbar-track {box-shadow: inset 0 0 7px #c8a667; } ::-webkit-scrollbar-button {height: 31px; background-image: linear-gradient(0deg, #ba00ff, #364aff, #25c7ef, #00ff00, #e5ff00, #ff940d, #ff0000); } /* - - - - Scrollbar for Firefox - - - - */ /* @supports (scrollbar-color: red blue) {* {scrollbar-color: #0004ff #FFFFFF;}} */ /* # # # # WEBPAGE # # # # */ html{ min-height:100%; } body { background-color:pink; /*former c8a667 ----- old #b78b32 */ margin: 0px; } main{ /* red, orange, yellow, green, blue, indigo, violet - */ background-image: linear-gradient(-10deg, #ba00ff, #364aff, #25c7ef, #00ff00, #e5ff00, #ff940d, #ff0000); }/* #ff0000, #ff940d, #e5ff00, #00ff00, #25c7ef, #364aff, #ba00ff - #ba00ff, #364aff, #25c7ef, #00ff00, #e5ff00, #ff940d, ff0000 */ /* 18% 18% */ section{ margin-left: 10%; margin-right: 21%; } article{ margin-left: 10%; margin-right: 21%; } h1{ font-size: 30px; /* 32px */ } p{ font-size: 18px; line-height: 1.5; } /* # # # # TOPNAV # # # # */ /* Top Navigation bar colors Jerusalem stone : whiter #c8a667 Golder #b78b32 */ .topnav { position: fixed; top: 0; width: 100%; overflow: hidden; background-color: #c8a667; background-image: repeating-linear-gradient(-90deg, #e4d0ab 0px, #e4d0ab 40px, #e4d0ab 40px, #dfc28d 40px, #dfc28d 80px); /*background-image: repeating-linear-gradient(-90deg, #c8a667 0px, #c8a667 40px, #c8a667 40px, #dfc28d 40px, #dfc28d 80px);*/ /*background-image: repeating-linear-gradient(-90deg, #c8a667 0px, #c8a667 10px, #c8a667 10px, #dfc28d 10px, #dfc28d 20px);*/ /* background-image: linear-gradient(to right, #c8a667, #dfc28d, #c8a667, #dfc28d, #c8a667, #dfc28d, #c8a667); */ /*https://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear_repeating https://www.w3schools.com/css/css3_gradients.asp */ } .topnav a { float: left; color: #754400; text-align: center; padding: 3px 9px; text-decoration: none; font-size: 27px; /*27px*/ } .topnav a:hover { background-color: #b78b32; color: #FFFFFF; } .topnav a.active { background-color: red; color: #FFFFFF; } .topnav-left { float: left; margin: 0; } .topnav-center { float: none; /* not floated */ position: relative; /* dropdown positions relative to this */ display: inline-block; /* keeps the button on the same line */ text-align: center; /* center inside inline-block */ } /* .topnav-center { float: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } */ .topnav-right { float: right; margin: 0; } /* # # # # MENU DROP BUTTON # # # # */ .dropbutton{ background-color: #c8a667; color: #754400; padding: 4px 3px; /*3px 9px */ font-size: 20px; /*27px*/ cursor: pointer; border: none; border-left: 2px solid #754400; border-right: 2px solid #754400; font-family: 'Times New Roman', serif; } .dropbutton:hover, .dropbutton:focus { background-color: #b78b32; color: #FFFFFF; } /* - - - - MENU DROPDOWN - - - - */ .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: fixed; /* Make it stick, even on scroll */ max-height: 85%; /* computer Full height 93% but above on Qortal 90% works on Q but slimming Y down overall tend to make issues */ background-color: #261609; min-width: 240px; overflow: auto; /* Enable scrolling if the sidenav has too much content - another option overflow-y : scroll; */ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); right: 0; z-index: 1; border: 2px solid #754400; } .dropdown a:hover {background-color: #ddd;} .show {display: block;} ul { list-style-type: none; margin: 0; padding: 0; } li {border-right:2px solid #000;} li {border-bottom:2px solid #000;} li {border-left:2px solid #000;} li:first-child {border-top:2px solid #000;} li:last-child {border-bottom:2px solid #000;} .dropdown-content a { float: none; text-align: left; display: block; padding: 4px 13px 4px 13px; color: #000; text-decoration: none; font-size: 20px; } li a:hover:not(.active) { background-color: #313131; color: #ffffff; } li a.active { background-color: #000; } a.red{color:#ff0000;} a.orange{color:#ff940d;} a.yellow{color:#e5ff00;} a.green{color:#00ff00;} a.teal{color:#25c7ef;} a.blue{color:#364aff;} a.violet{color:#ba00ff;} #MenuTopOpenLeft { left: 0; right: auto; } #MenuTopOpenCenter { left: 0; right: auto; } #MenuTopOpenRight { right: 0; left: auto; } /* - - - - IFRAME - - - - */ iframe { width: 77%; height: 87vh; border: 2px solid #754400; padding:0px 0px 0px 0px; overflow: auto; margin-right:19%; }