summaryrefslogtreecommitdiffhomepage
path: root/common
diff options
context:
space:
mode:
Diffstat (limited to 'common')
-rw-r--r--common/common.js36
-rw-r--r--common/examples.css27
-rw-r--r--common/img/anchor_link.svg5
-rw-r--r--common/main.css736
4 files changed, 686 insertions, 118 deletions
diff --git a/common/common.js b/common/common.js
new file mode 100644
index 0000000..d79f659
--- /dev/null
+++ b/common/common.js
@@ -0,0 +1,36 @@
+/* Cookies */
+// Source: https://www.w3schools.com/js/js_cookies.asp
+function getCookie(cname) {
+ let name = cname + "=";
+ let decodedCookie = decodeURIComponent(document.cookie);
+ let ca = decodedCookie.split(';');
+
+ for(let i = 0; i <ca.length; i++) {
+ let c = ca[i];
+ while (c.charAt(0) == ' ') {
+ c = c.substring(1);
+ }
+ if (c.indexOf(name) == 0) {
+ return c.substring(name.length, c.length);
+ }
+ }
+
+ return "";
+}
+
+/* Analytics */
+if(getCookie("confirmed_analytics") !== "true") {
+ document.body.innerHTML +=
+ "<div id='analytics-banner'>\
+ <p><strong>NOTE: </strong>This website uses Google Analytics to collect visitor statistics.</p>\
+ <button id='analytics-confirm'><strong>I UNDERSTAND</strong></button>\
+ </div>";
+
+ const div_analyticsBanner = document.getElementById("analytics-banner");
+ const btn_analyticsConfirm = document.getElementById("analytics-confirm");
+
+ btn_analyticsConfirm.onclick = function() {
+ div_analyticsBanner.setAttribute("confirmed", "true");
+ document.cookie += "confirmed_analytics=true;";
+ };
+} \ No newline at end of file
diff --git a/common/examples.css b/common/examples.css
index 6bb01d6..4c97c29 100644
--- a/common/examples.css
+++ b/common/examples.css
@@ -4,24 +4,17 @@
#filter_menu { width:820px; height:80px; margin-left:15px; }
-.legendButton { float:left; margin-right:8px; margin-bottom:20px; width:84px; height:78px; text-align:right; line-height:130px; }
-#core { cursor:pointer; background-color:#e1e1e1; color:#5c5a5a; border:5px solid #898888; }
-#shapes { cursor:pointer; background-color:#f0d6d6; color:#c55757; border:5px solid #e66666; }
-#textures { cursor:pointer; background-color:#c8eabf; color:#60815a; border:5px solid #75a06d; }
-#text { cursor:pointer; background-color:#bef0dd; color:#377764; border:5px solid #52b296; }
-#models { cursor:pointer; background-color:#bedce8; color:#417794; border:5px solid #5d9cbd; }
-#shaders { cursor:pointer; background-color:#e2c3f5; color:#a864d2; border:5px solid #a864d2; }
-#audio { cursor:pointer; background-color:#ebddae; color:#8c7539; border:5px solid #d3b157; }
-#physics { cursor:pointer; background-color:#ddffdd; color:#00a820; border:5px solid #00a820; }
+.legendButton { float:left; margin-right:8px; margin-bottom:20px; width:84px; height:78px; text-align:right; line-height:130px; cursor: pointer; transition: 0.125s; }
+#core { background-color:#e1e1e1; color:#5c5a5a; border:5px solid #898888; }
+#shapes { background-color:#f0d6d6; color:#c55757; border:5px solid #e66666; }
+#textures { background-color:#c8eabf; color:#60815a; border:5px solid #75a06d; }
+#text { background-color:#bef0dd; color:#377764; border:5px solid #52b296; }
+#models { background-color:#bedce8; color:#417794; border:5px solid #5d9cbd; }
+#shaders { background-color:#e2c3f5; color:#a864d2; border:5px solid #a864d2; }
+#audio { background-color:#ebddae; color:#8c7539; border:5px solid #d3b157; }
+#physics { background-color:#ddffdd; color:#00a820; border:5px solid #00a820; }
-#core:hover { border-color:black; }
-#shapes:hover { border-color:black; }
-#textures:hover { border-color:black; }
-#text:hover { border-color:black; }
-#models:hover { border-color:black; }
-#shaders:hover { border-color:black; }
-#audio:hover { border-color:black; }
-#physics:hover { border-color:black; }
+.legendButton:hover { border: 5px solid #000 !important; }
.fcore { border: 1px solid #898888; margin-left: 12px; }
.fshapes { border: 1px solid #e66666; margin-left: 12px; }
diff --git a/common/img/anchor_link.svg b/common/img/anchor_link.svg
new file mode 100644
index 0000000..0bf8d19
--- /dev/null
+++ b/common/img/anchor_link.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+ <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+ <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+
+</svg> \ No newline at end of file
diff --git a/common/main.css b/common/main.css
index 7b25fd1..5ee4def 100644
--- a/common/main.css
+++ b/common/main.css
@@ -2,111 +2,645 @@
font-family: 'grixel_acme_7_wide_xtnd';
src: url('font/acme_7_wide_xtnd.eot');
src: url('font/acme_7_wide_xtnd.eot?#iefix') format('embedded-opentype'),
- url('font/acme_7_wide_xtnd.woff') format('woff'),
- url('font/acme_7_wide_xtnd.ttf') format('truetype');
+ url('font/acme_7_wide_xtnd.woff') format('woff'),
+ url('font/acme_7_wide_xtnd.ttf') format('truetype');
font-weight: normal;
font-style: normal;
- font-size-adjust:0.49;
+ font-size-adjust: 0.49;
+}
+
+::-webkit-scrollbar {
+ width: 10px;
+ height: 10px;
}
-::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-button:start:decrement,
-::-webkit-scrollbar-button:end:increment { display: block; height: 10px; }
-::-webkit-scrollbar-button:vertical:increment { background-color: #fff; }
-::-webkit-scrollbar-track-piece { background-color: #bdbdbd; }
-::-webkit-scrollbar-thumb:vertical { height: 50px; background-color: #000000; }
-::-webkit-scrollbar-thumb:horizontal { width: 50px; background-color: #000000; }
-
-* { padding:0px; margin:0px; font-family: grixel_acme_7_wide_xtnd, Courier New, Verdana, Arial; line-height:24px; }
-body { background-color:#f5f5f5; }
-a {text-decoration: none; color:black; }
-p a:hover{text-decoration: none; color:gray; }
-h1 { font-family: Courier New, Verdana, Arial; font-weight: bold; font-size: 18px; line-height:24px; }
-h2 { font-family: Courier New, Verdana, Arial; font-weight: bold; font-size: 18px; line-height:24px; }
-
-.page { width:880px; margin:0 auto; }
-
-.header { width:100%; float:left; position:relative; height:128px; font-size:10pt; margin-top:40px; margin-left:10px; }
-.content { font-size:8pt; width:840px; padding:10px; padding-top:30px; float:left; position:relative; }
-.footer { width:820px; float:left; position:relative; border-top:1px solid black; text-align: right; height:40px; padding-top:10px; }
-.footer p a {color:#aaaaaa; }
-.footer p a:hover {color:#444; }
-.footer p { font-size:6pt; color:#aaaaaa; margin-top:-8px; }
-.simplelink { font-weight: bold; color: #ff6060; }
+::-webkit-scrollbar-button:end:increment {
+ display: block;
+ height: 10px;
+ background-color: #8c8c8c;
+}
+
+::-webkit-scrollbar-track-piece {
+ background-color: #c8c8c8;
+}
+
+::-webkit-scrollbar-thumb:vertical {
+ height: 50px;
+ background-color: #505050;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+ width: 50px;
+ background-color: #505050;
+}
+
+:root {
+ --content-width: 840px;
+}
+
+* {
+ padding: 0px;
+ margin: 0px;
+ font-family: grixel_acme_7_wide_xtnd, Courier New, Verdana, Arial;
+ line-height: 24px;
+}
+
+html {
+ scroll-behavior: smooth;
+}
+
+body {
+ /* background-color: #ddd; */
+ background-color: #f5f5f5;
+}
+
+a {
+ text-decoration: none;
+ color: black;
+}
+
+p a:hover {
+ text-decoration: none;
+ color: gray;
+}
+
+h1 {
+ font-family: Courier New, Verdana, Arial;
+ font-weight: bold;
+ font-size: 18px;
+ line-height: 24px;
+}
+
+h2 {
+ font-family: Courier New, Verdana, Arial;
+ font-weight: bold;
+ font-size: 18px;
+ line-height: 24px;
+}
+
+.page {
+ width: min(var(--content-width), 100vw);
+ min-height: 100vh;
+ margin: 0 auto;
+ padding-top: 128px;
+
+ background-color: #f5f5f5;
+ /* border: 2px solid #c8c8c8; */
+ display: flex;
+ flex-direction: column;
+
+ border-top: none;
+}
+
+.header-container {
+ position: fixed;
+ top: 0px;
+ left: 0px;
+
+ width: max(100%, var(--content-width));
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+
+ background-color: white;
+
+ border-bottom: 2px solid #8c8c8c;
+
+ z-index: 100;
+}
+
+.header {
+ position: relative;
+ width: var(--content-width);
+ height: 128px;
+ font-size: 10pt;
+
+ background-color: #fff;
+
+ overflow-x: auto;
+ overflow-y: hidden;
+}
+
+.content {
+ font-size: 8pt;
+ padding-top: 30px;
+ float: left;
+ position: relative;
+}
+
+.footer {
+ width: 100%;
+ border-top: 1px solid #c8c8c8;
+ text-align: right;
+ height: 40px;
+ padding-top: 10px;
+ background-color: #f5f5f5;
+}
+
+.footer p a {
+ color: #828282;
+ transition: 0.125s;
+}
+
+.footer p a:hover {
+ color: #000;
+}
+
+.footer p {
+ font-size: 6pt;
+ margin-right: 20px;
+ color: #828282;
+}
+
+.simplelink {
+ font-weight: bold;
+ color: #ff6060;
+}
/* font change for better reading... */
-.content p, .content a, .content p strong, .content strong, .content .downloadText { font-family: Courier New, Verdana, Arial!important; font-size: medium; line-height: 200%; }
-.downloadButtonInstaller { font-size: x-small; }
-.list, .list strong { font-family: Courier New, Verdana, Arial!important; font-size: medium; line-height: 200%; }
-
-#logo{width:128px; height:128px; float:left; position:relative; background-image:url(img/raylib_logo.png);}
-.menu{width:auto; height:40px; text-align:right; right:0px; left:15px; bottom:0px; position:relative; float:left; margin-left:0px; margin-top:-3px; border-bottom:1px solid black; overflow:hidden;}
-.menu a{height: 40px; padding:0px 20px; color:black; font-size:12pt; float:left; position:relative; top: 4px; transition:top 0.1s ease-in-out;}
-.menu a:hover{padding:0px 20px; top:0px;}
-#active { height: 40px; padding:0px 20px; color:#707070; font-size:12pt; float:left; position:relative; margin-top: 0px; }
-.menu a:hover, #active { background: rgb(254,255,255); background: linear-gradient(to bottom, rgba(245,245,245,1) 0%,rgba(224,224,224,1) 100%); }
-
-#social { width:440px; height:50px; position:relative; float:right; margin-right:8px; margin-top:20px; margin-bottom:20px; }
-#social a:hover { background-position: 0 -36px; }
-#youtube { width:36px; height:36px; float:left; position:relative; background-image: url(img/icon_youtube.png); cursor: pointer; background-repeat:no-repeat; background-position: 0 0; }
-#handmade { width:36px; height:36px; float:left; position:relative; background-image: url(img/icon_handmade.png); cursor: pointer; background-repeat:no-repeat; background-position: 0 0; }
-#twitch { width:36px; height:36px; float:left; position:relative; background-image: url(img/icon_twitch.png); cursor: pointer; background-repeat:no-repeat; background-position: 0 0; }
-#redbubble { width:36px; height:36px; float:left; position:relative; background-image: url(img/icon_redbubble.png); cursor: pointer; background-repeat:no-repeat; background-position: 0 0; }
-#patreon { width:36px; height:36px; float:left; position:relative; background-image: url(img/icon_patreon.png); cursor: pointer; background-repeat:no-repeat; background-position: 0 0; }
-#itchio { width:36px; height:36px; float:left; position:relative; background-image: url(img/icon_itchio.png); cursor: pointer; background-repeat:no-repeat; background-position: 0 0; }
-#reddit { width:36px; height:36px; float:left; position:relative; background-image: url(img/icon_reddit.png); cursor: pointer; background-repeat:no-repeat; background-position: 0 0; }
-#freenode { width:36px; height:36px; float:left; position:relative; background-image: url(img/icon_freenode_irc.png); cursor: pointer; background-repeat:no-repeat; background-position: 0 0; }
-#gitter { width:36px; height:36px; float:left; position:relative; background-image: url(img/icon_gitter.png); cursor: pointer; background-repeat:no-repeat; background-position: 0 0; }
-#twitter { width:36px; height:36px; float:left; position:relative; background-image: url(img/icon_twitter.png); cursor: pointer; background-repeat:no-repeat; background-position: 0 0; }
-#github { width:36px; height:36px; float:left; position:relative; background-image: url(img/icon_github.png); cursor: pointer; background-repeat:no-repeat; background-position: 0 0; }
-#kofi { width:36px; height:36px; float:left; position:relative; background-image: url(img/icon_kofi.png); cursor: pointer; background-repeat:no-repeat; background-position: 0 0; }
-#discord { width:36px; height:36px; float:left; position:relative; background-image: url(img/icon_discord.png); cursor: pointer; background-repeat:no-repeat; background-position: 0 0; }
-.list { margin-top:10px; margin-left:30px; display: inline-block; }
-
-#licensebox { width:808px; height:400px; border:12px solid; border-color:#d0d0d0; background-color:#e4e4e4; }
-#licensebox p { font-size:12px; margin-top: 15px; margin-left: 10px; }
-.licensepoint { margin-left: 25px!important; }
-
-.downloadText { width:420px; height:40px; float:left; position:relative; margin-left:40px; }
-.downloadButton { width:220px; height:35px; float:left; position: relative; cursor:pointer; font-weight: bold; line-height:35px; text-align: center; border-width:5px!important; }
-.downloadButtonInstaller { width:460px; height:35px; position: relative; margin: auto auto; margin-top:20px!important; cursor:pointer; font-weight: bold; line-height:35px; text-align: center; border-width:5px!important; }
-#btngit { background-color:#e1e1e1; color:#5c5a5a; border:4px solid #898888; }
-#btngit:hover { background-color:#bedce8; color:#417794; border:4px solid #5d9cbd; }
-#btnlib { background-color:#e1e1e1; color:#5c5a5a; border:4px solid #898888; margin-top: 15px; }
-#btnlib:hover { background-color:#f0d6d6; color:#c55757; border:4px solid #e66666; margin-top: 15px; }
-#btnmac { font-weight: normal; cursor:default; background-color:#f0f0f0; color:#5c5a5a; border:4px solid #d3d3d3; }
-#newVersion { background-color:#f0d6d6; color:#e55757; border:1px solid #f66666; margin-top: 15px; margin-left: -5px; width:100%; height:30px; position: relative; margin: auto auto; line-height:30px; text-align: center; }
-#raylib13 { position:relative; background-color:#222222; color:#f5f5f5; width:100vw; left:calc(-52vw + 50%); padding:30px; text-align:center; margin: 10px; }
-
-#basicgrid { width:580px; margin-left:60px; float:left; position:relative; text-align: center; }
-#advgrid { width:560px; margin-left:70px; float:left; position:relative; text-align: center; }
-.exampleBox { cursor:pointer; margin:15px 20px; width:54px; padding-right:2px; height:56px; border:4px solid black; display:inline-block; text-align: right; font-weight: bold; vertical-align: bottom; }
-.exampleBox .in { display: table-cell; vertical-align: bottom; width:52px; height:56px; }
-
-.specialBox { cursor:pointer; vertical-align: bottom; color:#818181; width:56px; height:58px; padding-right:2px; padding-top:4px; padding-left:4px; margin:15px 20px; display:inline-block; border:1px solid #b9b9b9; text-align:right; }
-.specialBox .in { display: table-cell; vertical-align: bottom; width:52px; height:52px; border:1px solid #b9b9b9; margin-top:-5px; }
-.specialBox:hover { color: black; border:1px solid black; }
-.specialBox .in:hover { color: black; border:1px solid black; }
-.boxintext { margin-bottom: 3px; margin-right: 2px; line-height:10px; font-size:6pt; }
-.boxintextex { margin-bottom: 3px; margin-right: -2px; line-height:10px; font-size:6pt; width:54px!important; height:53px!important; font-weight: normal!important; }
-.boxtodo { margin-bottom: 13px; margin-right: 7px; }
-
-.help { font-size:8px; margin-left: 25px; }
-#paypalbox { width:200px; height:50px; border:12px solid; border-color:#d0d0d0; background-color:#e4e4e4; margin:0 auto; }
-#paypalform input { margin-top: 12px; margin-left: 50px; }
-#wiki { color: maroon; }
-
-#itchioframe { display:block; text-align:center; }
-
-.icon { margin-right: 2px; }
-#platforms>a>img { border: 6px solid #888888; transition: all .2s ease; }
-#platforms>a>img:hover { border: 6px solid #111111; }
-
-#bindings>a>img { border: 6px solid #888888; transition: all .2s ease; }
-#bindings>a>img:hover { border: 6px solid #111111; }
-
-#extralibs>a>img { transition: all .2s ease; }
-#extralibs>a>img:hover { filter: contrast(200%); }
-
-#raylibtech>a>img { transition: all .2s ease; }
-#raylibtech>a>img:hover { filter: contrast(180%); }
+.content p,
+.content a,
+.content p strong,
+.content strong,
+.content .downloadText {
+ font-family: Courier New, Verdana, Arial !important;
+ font-size: medium;
+ line-height: 200%;
+}
+
+.downloadButtonInstaller {
+ font-size: x-small;
+}
+
+.anchor-link {
+ margin-right: 8px;
+ width: 16px;
+ height: 16px;
+ background-image: url(img/anchor_link.svg);
+ background-size: 16px 16px;
+ display: inline-block;
+ cursor: pointer;
+ opacity: 0.5;
+ transition: 0.25s;
+ transform: translateY(4px);
+}
+
+.anchor-link:hover {
+ opacity: 1.0;
+}
+
+ul {
+ width: fit-content;
+ padding-left: 48px;
+ list-style-position: inside;
+}
+
+li {
+ font-family: Courier New, Verdana, Arial !important;
+ font-size: medium;
+ line-height: 200%;
+}
+
+#logo {
+ width: 128px;
+ height: 128px;
+ float: left;
+ position: relative;
+ background-image: url(img/raylib_logo.png);
+}
+
+.menu {
+ width: calc(100% - 128px);
+ height: 48px;
+
+ position: absolute;
+ bottom: 0px;
+ right: 0px;
+ overflow-x: auto;
+ overflow-y: hidden;
+
+ display: flex;
+ flex-direction: row;
+ justify-content: right;
+ flex-wrap: nowrap;
+
+ background-color: #fff;
+}
+
+.menu a {
+ height: 48px;
+ padding: 0px 20px;
+ color: #505050;
+ font-size: 12pt;
+ line-height: 40px;
+ float: left;
+ position: relative;
+ transition: 0.125s;
+
+ border-left: 2px solid #0000;
+ border-right: 2px solid #0000;
+}
+
+.menu a:hover {
+ color: #000;
+ padding: 0px 20px;
+}
+
+#active {
+ height: 46px;
+ padding: 0px 20px;
+ color: #000;
+ font-size: 12pt;
+ line-height: 36px;
+ float: left;
+ position: relative;
+
+ border: 2px solid #c8c8c8;
+ border-bottom: none;
+}
+
+.menu a:hover,
+#active {
+ background: #c8c8c888;
+}
+
+#analytics-banner {
+ padding-top: 8px;
+ padding-bottom: 8px;
+ width: 100%;
+
+ position: absolute;
+ float: left;
+ bottom: 0px;
+ left: 0px;
+ position: sticky;
+
+ background-color: #ffcb00;
+ border-top: 2px solid #b38e00;
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+
+ transition: 0.5s;
+}
+
+#analytics-banner[confirmed="true"] {
+ bottom: -64px;
+ opacity: 0;
+}
+
+#analytics-banner p,
+#analytics-banner p *,
+#analytics-banner button * {
+ font-family: Courier New, Verdana, Arial !important;
+ font-size: large;
+}
+
+#analytics-banner button {
+ min-height: 40px;
+ width: fit-content;
+ padding-left: 16px;
+ padding-right: 16px;
+ margin-left: 32px;
+ margin-right: 32px;
+ border: 0px;
+ background-color: #fff5;
+ border: 2px solid #b38e00;
+ transition: 0.125s;
+ word-wrap: unset;
+}
+
+#analytics-banner button:hover {
+ background-color: #fff8;
+ cursor: pointer;
+}
+
+#analytics-banner p {
+ margin-left: 32px;
+}
+
+.architecture-image-container {
+ margin-top: 32px;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+}
+
+.architecture-image-container img {
+ border: 2px solid #c8c8c8;
+ transition: 0.125s;
+}
+
+.architecture-image-container:hover img {
+ border: 2px solid #828282;
+}
+
+#social {
+ width: fit-content;
+ height: fit-content;
+ float: right;
+ margin-right: 0px;
+ margin-top: 8px;
+ display: flex;
+ flex-direction: row;
+}
+
+#social a {
+ margin-left: 4px;
+ width: 36px;
+ height: 36px;
+ background-color: #f5f5f5;
+ background-repeat: none;
+ background-position: 0px 0px;
+ cursor: pointer;
+}
+
+#social a:hover {
+ background-position: 0px -36px;
+}
+
+#youtube { background-image: url(img/icon_youtube.png); }
+#handmade { background-image: url(img/icon_handmade.png); }
+#twitch { background-image: url(img/icon_twitch.png); }
+#redbubble { background-image: url(img/icon_redbubble.png); }
+#patreon { background-image: url(img/icon_patreon.png); }
+#itchio { background-image: url(img/icon_itchio.png); }
+#reddit { background-image: url(img/icon_reddit.png); }
+#freenode { background-image: url(img/icon_freenode_irc.png); }
+#gitter { background-image: url(img/icon_gitter.png); }
+#twitter { background-image: url(img/icon_twitter.png); }
+#github { background-image: url(img/icon_github.png); }
+#kofi { background-image: url(img/icon_kofi.png); }
+#discord { background-image: url(img/icon_discord.png); }
+
+#licensebox {
+ width: 808px;
+ height: 400px;
+ border: 12px solid;
+ border-color: #d0d0d0;
+ background-color: #e4e4e4;
+}
+
+#licensebox p {
+ font-size: 12px;
+ margin-top: 15px;
+ margin-left: 10px;
+}
+
+.licensepoint {
+ margin-left: 25px !important;
+}
+
+.downloadText {
+ width: 420px;
+ height: 40px;
+ float: left;
+ position: relative;
+ margin-left: 40px;
+}
+
+.downloadButton {
+ width: 220px;
+ height: 35px;
+ float: left;
+ position: relative;
+ cursor: pointer;
+ font-weight: bold;
+ line-height: 35px;
+ text-align: center;
+ border-width: 5px !important;
+}
+
+.downloadButtonInstaller {
+ width: 460px;
+ height: 35px;
+ position: relative;
+ margin: auto auto;
+ margin-top: 20px !important;
+ cursor: pointer;
+ font-weight: bold;
+ line-height: 35px;
+ text-align: center;
+ border-width: 5px !important;
+}
+
+#btngit {
+ background-color: #e1e1e1;
+ color: #5c5a5a;
+ border: 4px solid #898888;
+}
+
+#btngit:hover {
+ background-color: #bedce8;
+ color: #417794;
+ border: 4px solid #5d9cbd;
+}
+
+#btnlib {
+ background-color: #e1e1e1;
+ color: #5c5a5a;
+ border: 4px solid #898888;
+ margin-top: 15px;
+}
+
+#btnlib:hover {
+ background-color: #f0d6d6;
+ color: #c55757;
+ border: 4px solid #e66666;
+ margin-top: 15px;
+}
+
+#btnmac {
+ font-weight: normal;
+ cursor: default;
+ background-color: #f0f0f0;
+ color: #5c5a5a;
+ border: 4px solid #d3d3d3;
+}
+
+#newVersion {
+ background-color: #f0d6d6;
+ color: #e55757;
+ border: 1px solid #f66666;
+ margin-top: 15px;
+ margin-left: -5px;
+ width: 100%;
+ height: 30px;
+ position: relative;
+ margin: auto auto;
+ line-height: 30px;
+ text-align: center;
+}
+
+#raylib13 {
+ position: relative;
+ background-color: #222222;
+ color: #f5f5f5;
+ width: 100vw;
+ left: calc(-52vw + 50%);
+ padding: 30px;
+ text-align: center;
+ margin: 10px;
+}
+
+#basicgrid {
+ width: 580px;
+ margin-left: 60px;
+ float: left;
+ position: relative;
+ text-align: center;
+}
+
+#advgrid {
+ width: 560px;
+ margin-left: 70px;
+ float: left;
+ position: relative;
+ text-align: center;
+}
+
+.exampleBox {
+ cursor: pointer;
+ margin: 15px 20px;
+ width: 54px;
+ padding-right: 2px;
+ height: 56px;
+ border: 4px solid black;
+ display: inline-block;
+ text-align: right;
+ font-weight: bold;
+ vertical-align: bottom;
+}
+
+.exampleBox .in {
+ display: table-cell;
+ vertical-align: bottom;
+ width: 52px;
+ height: 56px;
+}
+
+.specialBox {
+ cursor: pointer;
+ vertical-align: bottom;
+ color: #818181;
+ width: 56px;
+ height: 58px;
+ padding-right: 2px;
+ padding-top: 4px;
+ padding-left: 4px;
+ margin: 15px 20px;
+ display: inline-block;
+ border: 1px solid #b9b9b9;
+ text-align: right;
+}
+
+.specialBox .in {
+ display: table-cell;
+ vertical-align: bottom;
+ width: 52px;
+ height: 52px;
+ border: 1px solid #b9b9b9;
+ margin-top: -5px;
+}
+
+.specialBox:hover {
+ color: black;
+ border: 1px solid black;
+}
+
+.specialBox .in:hover {
+ color: black;
+ border: 1px solid black;
+}
+
+.boxintext {
+ margin-bottom: 3px;
+ margin-right: 2px;
+ line-height: 10px;
+ font-size: 6pt;
+}
+
+.boxintextex {
+ margin-bottom: 3px;
+ margin-right: -2px;
+ line-height: 10px;
+ font-size: 6pt;
+ width: 54px !important;
+ height: 53px !important;
+ font-weight: normal !important;
+}
+
+.boxtodo {
+ margin-bottom: 13px;
+ margin-right: 7px;
+}
+
+.help {
+ font-size: 8px;
+ margin-left: 25px;
+}
+
+#paypalbox {
+ width: 200px;
+ height: 50px;
+ border: 12px solid;
+ border-color: #d0d0d0;
+ background-color: #e4e4e4;
+ margin: 0 auto;
+}
+
+#paypalform input {
+ margin-top: 12px;
+ margin-left: 50px;
+}
+
+#wiki {
+ color: maroon;
+}
+
+#itchioframe {
+ display: block;
+ text-align: center;
+ overflow: auto;
+}
+
+.icon {
+ margin-right: 2px;
+}
+
+#platforms>a>img {
+ border: 6px solid #888888;
+ transition: all .2s ease;
+}
+
+#platforms>a>img:hover {
+ border: 6px solid #111111;
+}
+
+#bindings>a>img {
+ border: 6px solid #888888;
+ transition: all .2s ease;
+}
+
+#bindings>a>img:hover {
+ border: 6px solid #111111;
+}
+
+#extralibs>a>img {
+ transition: all .2s ease;
+}
+
+#extralibs>a>img:hover {
+ filter: contrast(200%);
+}
+
+#raylibtech>a>img {
+ transition: all .2s ease;
+}
+
+#raylibtech>a>img:hover {
+ filter: contrast(180%);
+} \ No newline at end of file