/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ body */ /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ body {font-family : 'Trebuchet MS';font-weight : normal;font-style : normal;font-size : 0.9em;color : #000077;background-image : url("algemeen/achtergrond.jpg");background-position : right top;background-repeat : no-repeat;background-color : #d9d9d9; background-size : cover;} /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- font */ /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @font-face {font-family: 'ar_bonnieregular';src: url('ar-bonnie-font-webfont.woff2') format('woff2'), url('ar-bonnie-font-webfont.woff') format('woff');font-weight: normal;font-style: normal;} ff-arbonnie {font-family: 'ar_bonnieregular';} ff-trebuchet {font-family: 'Trebuchet MS';} /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------- font-size */ /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ fs01em { font-size : 0.01em;} fs02em { font-size : 0.2em;} fs03em { font-size : 0.3em;} fs04em { font-size : 0.4em;} fs05em { font-size : 0.5em;} fs06em { font-size : 0.6em;} fs07em { font-size : 0.7em;} fs08em { font-size : 0.8em;} /* ---------------------------------------------------------------------------------------------------------------------------------------------------- */ fs08emr { font-size : 0.8em;color : rgb(255, 0, 0);} /* rood */ fs09em { font-size : 0.9em;} fs10em { font-size : 1.0em;} fs11em { font-size : 1.1em;} fs12em { font-size : 1.2em;} fs13em { font-size : 1.3em;} fs14em { font-size : 1.4em;} fs15em { font-size : 1.5em;} fs16em { font-size : 23px;} /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------------------------------------------------------------------- toetsen */ /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .containertoetsen { width : 370px;margin : auto;} .toetsen {text-align : left;margin : auto; display: grid;grid-template-columns: 350px auto 90px;} .grid-toetsen {text-align : left;padding: 0px;} /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------ container */ /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .container175 {width : 175px;margin : auto;} .container350 {width : 100%; margin : 0 auto 0;max-width : 350px;min-width : 328px;padding : 0.1em;text-align : center;} .container420 {width : 100%; margin : 0 auto 0;max-width : 420px;min-width : 348px;padding : 0.1em;text-align : center;} .container450 {width : 100%; margin : 0 auto 0;max-width : 450px;min-width : 348px; padding : 0.1em;text-align : center;} .container450-left { width : 100%;margin : 0 auto 0;max-width : 440px;min-width : 328px; padding : 0.1em;text-align : left;} .container520 {width : 100%;margin : 0 auto 0;max-width : 520px;min-width : 348px;padding : 0.1em;text-align : center;} .container800 {width : 100%;margin : 0 auto 0;max-width : 800px;min-width : 348px;padding : 0.1em;text-align : center;} .container8 {width : 100%;margin : 0 auto 0;max-width : 800px;min-width : 348px;padding : 0.1em;text-align : left;} .container-cal {width : 100%;margin : 0 auto 0;max-width : 520px;min-width : 348px;padding : 0.1em;text-align : center;} /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------- grid-container */ /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .grid-container-aide {display: grid;grid-template-columns: 350px auto;} .grid-container2 {display: grid;grid-template-columns: 50% 50%;padding: 0px;} .grid-container3 {display: grid;grid-template-columns: 33.3% 33.4% 33.3%;padding: 0px;} .grid-container3b {display: grid;grid-template-columns: auto 221px auto;padding: 0px;} .grid-container4m { display: grid;grid-template-columns: 25% 25% 25% 25%;color : red;} .grid-container5 {display: grid;grid-template-columns: 20% 20% 20% 20% 20%; padding: 0px;} .grid-container7 {display: grid;grid-template-columns: 100%;text-align: center;} .grid-container10 {display: grid;grid-template-columns: 30px 23px 53px 23px 53px 30px 24px 30px 28px 30px; width : 100%;max-width : 385px;min-width : 315px;margin : 0.5em auto 0;padding : 0.5em;text-align : center;} .grid-container12 {display: grid;grid-template-columns: 32% 34% 34%;} .grid-container22 {display: grid;grid-template-columns: 16.6% 33.4% 33.4% 16.6%;padding: 0px;} .grid-container111 {display: grid;grid-template-columns: 80px 81px auto;} .grid-container52 {display: grid;grid-template-columns: 52px auto;} .grid-container52m {display: grid;grid-template-columns: 40% 60%;} .grid-container-cal {display: grid;grid-template-columns: 52px auto 255px;} /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------- grid-blog */ /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .grid-blog {display: grid;grid-template-columns: 20% 20% 20% 20% 20% 20%;padding: 0px;} /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------- blog-item */ /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .blog-item {padding: 0px;text-align: left;} /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------- grid-item */ /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .grid-item {background: rgba(255, 165, 0, 0.2);border: 1px solid #505050;padding: 3px;text-align: left;} .grid-itemr {background: rgba(255, 165, 0, 0.2);border: 1px solid #505050;padding: 3px;text-align: right;} .grid-item0 {border: 0px solid #505050; padding: 3px;text-align: center;} .grid-item5 {border: 0px solid #505050; padding: 3px;text-align: center;} .grid-item7 {text-align: center;color: darkblue;} .grid-item-0-1 {background: rgba(255, 165, 0, 0.2);border: 1px solid rgb(255, 165, 0);padding: 3px;text-align: right;} .grid-item-0-2 {background: rgba(255, 165, 0, 0.2);border: 1px solid rgb(255, 165, 0);padding: 3px;text-align: left;} .grid-item-0-2s {background: rgba(255, 165, 0, 0.2);border: 1px solid rgb(255, 165, 0);padding: 3px;text-align: left;text-decoration: line-through;} .grid-item-0-4 {background: rgba(255, 165, 0, 0.4);border: 1px solid #505050;padding: 3px;text-align: left;} .grid-item-site {background: rgba(255, 165, 0, 0.2);width : 189px;padding: 3px;border: 1px solid #505050;text-align: left;font-weight : bold;} .grid-item-sitenaam {font-family: 'ar_bonnieregular';font-size :2.97em;border: 0px solid #505050;padding: 3px;text-align: center;} .grid-item-sitenom {font-family: 'ar_bonnieregular';font-size :1.97em;border: 0px solid #505050;padding: 3px;text-align: center;} .grid-item-sm1 {font-family: 'ar_bonnieregular';font-size :1.7em;padding: 0px;} .grid-item-sm2 {padding: 0px;text-align: left;} .grid-item-sm3 {font-family: 'ar_bonnieregular';font-size :1.4em;padding: 0px;} .grid-item-cal {background: rgba(255, 165, 0, 0.2);border: 1px solid rgb(255, 165, 0);padding: 3px;text-align: left;} /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------- gallery-container */ /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .gallery-container { display: flex; /* Zet de foto's naast elkaar */ overflow-x: auto; /* Zorgt voor een horizontale scrollbalk als er te veel foto's zijn */ overflow-y: hidden; /* Voorkomt verticaal scrollen */ white-space: nowrap; /* Zorgt dat foto's gegarandeerd op één lijn blijven */ gap: 15px; /* De ruimte tussen de foto's */ padding: 10px; /* Ruimte rondom de binnenkant van de galerij */ scroll-snap-type: x mandatory; /* Optioneel: laat foto's 'vastklikken' tijdens het scrollen */ -webkit-overflow-scrolling: touch;} /* Zorgt voor soepel scrollen op smartphones */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------- */ .gallery-container { scrollbar-width: thin; /* opties voor scrollbar-width: auto | thin | none */ scrollbar-color: red transparent;} /* kleur van de duim kleur van het spoor/track */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------- */ .gallery-container::-webkit-scrollbar { height: 8px;} /* ---------------------------------------------------------------------------------------------------------------------------------------------------- */ .gallery-container::-webkit-scrollbar-thumb { background: red; /* de duim (het verplaatsbare schuifje) is rood */ border-radius: 6px; /* ronde hoeken */ border: 3px solid #f1f1f1;} /* creëert een padding-effect rondom de thumb */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------- */ .gallery-container::-webkit-scrollbar-thumb:hover { background: blue;} /* de duim wanneer je er met de muis overheen zweeft */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------- */ .gallery-container img { height: 389px; /* geef alle foto's dezelfde hoogte voor een strakke look */ width: auto; /* de breedte schaalt automatisch mee om vervorming te voorkomen */ object-fit: cover; /* zorgt dat de verhoudingen mooi blijven */ border-radius: 8px; /* optioneel: mooie afgeronde hoekjes */ scroll-snap-align: start;} /* werkt samen met scroll-snap-type voor het vastklikken */ /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------label */ /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .label {font-family: 'Trebuchet MS';font-size :1.2em;border: 0px solid #505050;padding: 3px;} /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------------------------------------------------------------------------------------- uitleg slideshow */ /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* slide show fade in fade out */ /* slide show 4 sec per image */ /* slide show bij 13 images totaal 52 sec */ /* slide show img 1 start op 0 sec en wordt doorzichtig na 4 sec */ /* slide show img 2 start op 4 sec en wordt doorzichtig na 8 sec */ /* slide show img 5 start op 16 sec en wordt doorzichtig na 20 sec */ /* slide show img 6 start op 20 sec en wordt doorzichtig na 24 sec etc */ /* @keyframes bij 13 images is elke image 100%/13=7,7% van de totaaltijd zichtbaar */ /* @keyframes fade duurt 2,0% = 1 sec */ /* slide show een fade-out overlapt een fade-in van de volgende image */ /* slide show */ /* slide show img is foto horiz. : vertic. = 15 : 10 */ /* slide show img is max 700 px : 465 px */ /* #slider bakent het gebied voor de slide show af, als een "box" */ /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------slider */ #slider {position: relative;width: 100%; min-height: 330px;height: auto;} /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------slideshow */ .slideshow {width:100%;box-sizing:border-box; position:relative;} .slideshow img {position:absolute;animation:slideshow 52s infinite linear;opacity:0;width: 100%;height: auto;} @keyframes slideshow {0% {opacity: 0.0}2.0% {opacity: 1.0}8.0% {opacity: 1.0}10.0% {opacity: 0.0}100% {opacity: 0.0}} .slideshow img:nth-child(1){animation-delay:0s;} .slideshow img:nth-child(2){animation-delay:4s;} .slideshow img:nth-child(3){animation-delay:8s;} .slideshow img:nth-child(4){animation-delay:12s;} .slideshow img:nth-child(5){animation-delay:16s;} .slideshow img:nth-child(6){animation-delay:20s;} .slideshow img:nth-child(7){animation-delay:24s;} .slideshow img:nth-child(8){animation-delay:28s;} .slideshow img:nth-child(9){animation-delay:32s;} .slideshow img:nth-child(10){animation-delay:36s;} .slideshow img:nth-child(11){animation-delay:40s;} .slideshow img:nth-child(12){animation-delay:44s;} .slideshow img:nth-child(13){animation-delay:48s;} /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- p */ /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ p {text-align : left;} /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ a */ /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ a:link {text-decoration : none;} a:visited {text-decoration : none;} /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- img */ /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ img {margin : 0.5em 0 0.5em 0;display : block;margin-left : auto;margin-right : auto; } /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ul */ /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ ul {list-style-type: none;padding: 0;margin : 0;text-align: left;} li {background:url("algemeen/blaadje.gif") no-repeat left top;background-size: 1.8em;padding-left: 2.5em; padding-top: 8px;} /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------------ inuitklapbaar */ /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .inuitklapbaar {background-color: rgba(255, 165, 0, 0.4);color: rgb(0, 0, 153);cursor: pointer;width: 189px;border: 1px solid #505050;text-align: left;outline: none;padding: 3px;} .inuitklapbaar:after {content: '\002B';color: rgb(0, 0, 153);font-weight: bold;float: right;} /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------- active after*/ /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .active:after {content: '\2212';} /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------- content */ /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .content {padding: 0 0.5em; max-height: 0;overflow: hidden;transition: max-height 0.5s ease-out;} /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------ lb-border */ /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .lb-borderx {border: 2px solid #c6af4b;text-decoration: line-through;} /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ dolor */ /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ c1paars {color : rgb(180, 130, 200); /* paars */ } c2rood {color : rgb(255, 0, 0); /* rood */ } c3oranje {color : rgb(255, 180, 0); /* oranje */ } c4blauwdonker {color : rgb(70, 140, 200); /* blauw donker */ } c5blauwlicht {color : rgb(0, 180, 255); /* blauw licht */ } c6groen { color : rgb(0, 200, 100); /* groen */ } c7geel {color : rgb(255, 255, 0); /* geel */ } c8wit {color : rgb(255, 255, 255); /* wit */ } c9zwart {color : rgb(0, 0, 0); /* zwart */ } /* ---------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------- */ c-T {color : #0084FF ; text-shadow : -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000;} c-H {color : #00C864; text-shadow : -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000;} c-O {color : #FFFF00; text-shadow : -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000;} c-R {color : #F07D14; text-shadow : -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000;} c-7 {color : #FF0000; text-shadow : -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000;} c-0 {color : #468CC8; text-shadow : -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000;} /* ---------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------- */ c1 {color : rgb(180, 130, 200); /* paars */ text-shadow : -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000;} c2 {color : rgb(255, 0, 0); /* rood */ text-shadow : -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000;} c3 {color : rgb(255, 180, 0); /* oranje */ text-shadow : -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000;} c4 {color : rgb(70, 140, 200); /* blauw donker */ text-shadow : -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000;} c5 {color : rgb(0, 180, 255); /* blauw licht */ text-shadow : -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000;} c6 {color : rgb(0, 200, 100); /* groen */ text-shadow : -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000;} c7 {color : rgb(255, 255, 0); /* geel */ text-shadow : -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000;} c8 {color : rgb(255, 255, 255); /* grijs */ text-shadow : -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000;} c9 {color : rgb(128, 0, 0); /* Maroon */ text-shadow : -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000;} c10 {color : rgb(143,188,143); /* DarkSeaGre*/ text-shadow : -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000;} c11 {color : rgb(139,0,0); /* DarkRed */ text-shadow : -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000;} c12 {color : rgb(240,125,20); /* diep oranje*/ text-shadow : -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000;} /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------------------------------------------------------------- kleur codes */ /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* AliceBlue #F0F8FF RGB(240,248,255) HSL(208,100%,97%)*/ /* AntiqueWhite #FAEBD7 RGB(250,235,215) HSL(34,78%,91%)..*/ /* Aqua #00FFFF RGB(0,255,255) ..HSL(180,100%,50%)*/ /* Aquamarine #7FFFD4 RGB(127,255,212) HSL(160,100%,75%)*/ /* Azure #F0FFFF RGB(240,255,255) HSL(180,100%,97%)*/ /* Beige #F5F5DC RGB(245,245,220) HSL(60,56%,91%)..*/ /* Bisque #FFE4C4 RGB(255,225,196) HSL(33,100%,88%).*/ /* Black #000000 RGB(0,0,0) HSL(0,0%,0%) ..*/ /* BlanchedAlmond #FFEBCD RGB(255,235,205) HSL(36,100%,90%).*/ /* Blue #0000FF RGB(0,0,255) .HSL(240,100%,50%)*/ /* BlueViolet #8A2BE2 RGB(138,43,226) .HSL(271,76%,53%).*/ /* Brown #A52A2A RGB(165,42,42) ..HSL(0,59%,41%) */ /* BurlyWood #DEB887 RGB(222,184,135) HSL(34,57%,70%)..*/ /* CadetBlue #5F9EA0 RGB(95,158,160) .HSL(182,25%,50%).*/ /* Chartreuse #7FFF00 RGB(127,255,0) ..HSL(90,100%,50%).*/ /* Chocolate #D2691E RGB(210,105,30) .HSL(25,75%,47%)..*/ /* Coral #FF7F50 RGB(255,127,80) .HSL(16,100%,66%).*/ /* CornflowerBlue #6495ED RGB(100,149,237) HSL(219,79%,66%).*/ /* Cornsilk #FFF8DC RGB(255,248,220) HSL(48,100%,93%).*/ /* Crimson #DC143C RGB(220,20,60) ..HSL(348,83%,47%).*/ /* Cyan #00FFFF RGB(0,255,255) ..HSL(180,100%,50%)*/ /* DarkBlue #00008B RGB(0,0,139) .HSL(240,100%,27%)*/ /* DarkCyan #008B8B RGB(0,139,139) ..HSL(180,100%,27%)*/ /* DarkGoldenRod #B8860B RGB(184,134,11) .HSL(43,89%,38%)..*/ /* DarkGray* #A9A9A9 RGB(169,169,169) HSL(0,0%,66%) .*/ /* DarkGreen #006400 RGB(0,100,0) .HSL(120,100%,20%)*/ /* DarkKhaki #BDB76B RGB(189,183,107) HSL(56,38%,58%)..*/ /* DarkMagenta #8B008B RGB(139,0,139) ..HSL(300,100%,27%)*/ /* DarkOliveGreen #556B2F RGB(85,107,47) ..HSL(82,39%,30%)..*/ /* DarkOrange #FF8C00 RGB(255,140,0) ..HSL(33,100%,50%).*/ /* DarkOrchid #9932CC RGB(153,50,204) .HSL(280,61%,50%).*/ /* DarkRed #8B0000 RGB(139,0,0) .HSL(0,100%,45%)..*/ /* DarkSalmon #E9967A RGB(233,150,122) HSL(15,72%,70%)..*/ /* DarkSeaGreen #8FBC8F RGB(143,188,143) HSL(120,25%,65%).*/ /* DarkSlateBlue #483D8B RGB(72,61,139) ..HSL(248,39%,39%).*/ /* DarkSlateGray* #2F4F4F RGB(47,79,79) HSL(180,25%,25%).*/ /* DarkTurquoise #00CED1 RGB(0,206,209) ..HSL(181,100%,41%)*/ /* DarkViolet #9400D3 RGB(148,0,211) ..HSL(282,100%,41%)*/ /* DeepPink #FF1493 RGB(255,20,147) .HSL(328,100%,54%)*/ /* DeepSkyBlue #00BFFF RGB(0,191,255) ..HSL(195,100%,50%)*/ /* DimGray* #696969 RGB(105,105,105) HSL(0,0%,41%) .*/ /* DodgerBlue #1E90FF RGB(30,144,255) .HSL(210,100%,56%)*/ /* FireBrick #B22222 RGB(178,34,34) ..HSL(0,68%,42%) */ /* FloralWhite #FFFAF0 RGB(255,250,240) HSL(40,100%,97%).*/ /* ForestGreen #228B22 RGB(34,139,34) ..HSL(120,61%,34%).*/ /* Fuchsia #FF00FF RGB(255,0,255) ..HSL(300,100%,50%)*/ /* Gainsboro #DCDCDC RGB(220,220,220) HSL(0,0%,86%) .*/ /* GhostWhite #F8F8FF RGB(248,248,255) HSL(240,100%,99%)*/ /* Gold #FFD700 RGB(255,215,0) ..HSL(51,100%,50%).*/ /* GoldenRod #DAA520 RGB(218,165,32) .HSL(43,74%,49%)..*/ /* Gray* #808080 RGB(128,128,128) HSL(0,0%,50%) .*/ /* Green #008000 RGB(0,128,0) .HSL(120,100%,25%)*/ /* GreenYellow #ADFF2F RGB(173,255,47) .HSL(84,100%,59%).*/ /* HoneyDew #F0FFF0 RGB(240,255,240) HSL(120,100%,97%)*/ /* HotPink #FF69B4 RGB(255,105,180) HSL(330,100%,71%)*/ /* IndianRed #CD5C5C RGB(205,92,92) ..HSL(0,53%,58%) */ /* Indigo #4B0082 RGB(75,0,130) HSL(275,100%,25%)*/ /* Ivory #FFFFF0 RGB(255,255,240) HSL(60,100%,97%).*/ /* Khaki #F0E68C RGB(240,230,140) HSL(54,77%,75%)..*/ /* Lavender #E6E6FA RGB(230,230,250) HSL(240,67%,94%).*/ /* LavenderBlush #FFF0F5 RGB(255,240,245) HSL(340,100%,97%)*/ /* LawnGreen #7CFC00 RGB(124,252,0) ..HSL(90,100%,49%).*/ /* LemonChiffon #FFFACD RGB(255,250,205) HSL(54,100%,90%).*/ /* LightBlue #ADD8E6 RGB(173,216,230) HSL(195,53%,79%).*/ /* LightCoral #F08080 RGB(240,128,128) HSL(0,79%,72%) */ /* LightCyan #E0FFFF RGB(224,255,255) HSL(180,100%,94%)*/ /* LightGoldenRodYellow#FAFAD2 RGB(250,250,210) HSL(60,80%,90%)..*/ /* LightGray* #D3D3D3 RGB(211,211,211) HSL(0,0%,83%) .*/ /* LightGreen #90EE90 RGB(144,238,144) HSL(120,73%,75%).*/ /* LightPink #FFB6C1 RGB(255,182,193) HSL(351,100%,86%)*/ /* LightSalmon #FFA07A RGB(255,160,122) HSL(17,100%,74%).*/ /* LightSeaGreen #20B2AA RGB(32,178,170) .HSL(177,70%,41%).*/ /* LightSkyBlue #87CEFA RGB(135,206,250) HSL(203,92%,75%).*/ /* LightSlateGray* #778899 RGB(119,136,153) HSL(210,14%,53%).*/ /* LightSteelBlue #B0C4DE RGB(176,196,222) HSL(214,41%,78%).*/ /* LightYellow #FFFFE0 RGB(255,255,224) HSL(60,100%,94%).*/ /* Lime #00FF00 RGB(0,255,0) .HSL(120,100%,50%)*/ /* LimeGreen #32CD32 RGB(50,205,50) ..HSL(120,61%,50%).*/ /* Linen #FAF0E6 RGB(250,240,230) HSL(30,67%,94%)..*/ /* Magenta #FF00FF RGB(255,0,255) ..HSL(300,100%,50%)*/ /* Maroon #800000 RGB(128,0,0) .HSL(0,100%,25%)..*/ /* MediumAquaMarine #66CDAA RGB(102,205,170) HSL(160,51%,60%).*/ /* MediumBlue #0000CD RGB(0,0,205) .HSL(240,100%,40%)*/ /* MediumOrchid #BA55D3 RGB(186,85,211) .HSL(288,59%,58%).*/ /* MediumPurple #9370DB RGB(147,112,219) HSL(260,60%,65%).*/ /* MediumSeaGreen #3CB371 RGB(60,179,113) .HSL(147,50%,47%).*/ /* MediumSlateBlue #7B68EE RGB(123,104,238) HSL(249,80%,67%).*/ /* MediumSpringGreen #00FA9A RGB(0,250,154) ..HSL(157,100%,49%)*/ /* MediumTurquoise #48D1CC RGB(72,209,204) .HSL(178,60%,55%).*/ /* MediumVioletRed #C71585 RGB(199,21,133) .HSL(322,81%,43%).*/ /* MidnightBlue #191970 RGB(25,25,112) ..HSL(240,64%,27%).*/ /* MintCream #F5FFFA RGB(245,255,250) HSL(150,100%,98%)*/ /* MistyRose #FFE4E1 RGB(255,228,225) HSL(6,100%,94%)..*/ /* Moccasin #FFE4B5 RGB(255,228,181) HSL(38,100%,85%).*/ /* NavajoWhite #FFDEAD RGB(255,222,173) HSL(36,100%,84%).*/ /* Navy #000080 RGB(0,0,128) .HSL(240,100%,25%)*/ /* OldLace #FDF5E6 RGB(253,245,230) HSL(39,85%,95%)..*/ /* Olive #808000 RGB(128,128,0) ..HSL(60,100%,25%).*/ /* OliveDrab #6B8E23 RGB(107,142,35) .HSL(80,60%,35%)..*/ /* Orange #FFA500 RGB(255,165,0) ..HSL(39,100%,50%).*/ /* OrangeRed #FF4500 RGB(255,69,0) HSL(16,100%,50%).*/ /* PaleGoldenRod #EEE8AA RGB(238,232,170) HSL(55,67%,80%)..*/ /* PaleGreen #98FB98 RGB(152,251,152) HSL(120,93%,79%).*/ /* PaleTurquoise #AFEEEE RGB(175,238,238) HSL(180,65%,81%).*/ /* PaleVioletRed #DB7093 RGB(219,112,147) HSL(340,60%,65%).*/ /* PapayaWhip #FFEFD5 RGB(255,239,213) HSL(37,100%,92%).*/ /* PeachPuff #FFDAB9 RGB(255,218,185) HSL(28,100%,86%).*/ /* Peru #CD853F RGB(205,133,63) .HSL(30,59%,53%)..*/ /* Pink #FFC0CB RGB(255,192,203) HSL(350,100%,88%)*/ /* Plum #DDA0DD RGB(221,160,221) HSL(300,47%,75%).*/ /* PowderBlue #B0E0E6 RGB(176,224,230) HSL(187,52%,80%).*/ /* Purple #800080 RGB(128,0,128) ..HSL(300,100%,25%)*/ /* RebeccaPurple #663399 RGB(102,51,153) .HSL(270,50%,40%).*/ /* Red #FF0000 RGB(255,0,0) .HSL(0,100%,50%)..*/ /* RosyBrown #BC8F8F RGB(188,143,143) HSL(0,25%,65%) */ /* RoyalBlue #4169E1 RGB(65,105,225) .HSL(225,73%,57%).*/ /* SaddleBrown #8B4513 RGB(139,69,19) ..HSL(25,76%,31%)..*/ /* Salmon #FA8072 RGB(250,128,114) HSL(6,93%,71%) */ /* SandyBrown #F4A460 RGB(244,164,96) .HSL(28,87%,67%)..*/ /* SeaGreen #2E8B57 RGB(46,139,87) ..HSL(146,50%,36%).*/ /* SeaShell #FFF5EE RGB(255,245,238) HSL(25,100%,97%).*/ /* Sienna #A0522D RGB(160,82,45) ..HSL(19,56%,40%)..*/ /* Silver #C0C0C0 RGB(192,192,192) HSL(0,0%,75%) .*/ /* SkyBlue #87CEEB RGB(135,206,235) HSL(197,71%,73%).*/ /* SlateBlue #6A5ACD RGB(106,90,205) .HSL(248,53%,58%).*/ /* SlateGray* #708090 RGB(112,128,144) HSL(210,13%,50%).*/ /* Snow #FFFAFA RGB(255,250,250) HSL(0,100%,99%)..*/ /* SpringGreen #00FF7F RGB(0,255,127) ..HSL(150,100%,50%)*/ /* SteelBlue #4682B4 RGB(70,130,180) .HSL(207,44%,49%).*/ /* Tan #D2B48C RGB(210,180,140) HSL(34,44%,69%)..*/ /* Teal #008080 RGB(0,128,128) ..HSL(180,100%,25%)*/ /* Thistle #DFB8DF RGB(216,191,216) HSL(300,24%,80%).*/ /* Tomato #FF6347 RGB(255,99,71) ..HSL(9,100%,64%)..*/ /* Turquoise #40E0D0 RGB(64,224,208) .HSL(174,72%,56%).*/ /* Violet #EE82EE RGB(238,130,238) HSL(300,76%,72%).*/ /* Wheat #F5DEB3 RGB(245,222,179) HSL(39,77%,83%)..*/ /* White #FFFFFF RGB(255,255,255) HSL(0,0%,100%) */ /* WhiteSmoke #F5F5F5 RGB(245,245,245) HSL(0,0%,96%) .*/ /* Yellow #FFFF00 RGB(255,255,0) ..HSL(60,100%,50%).*/ /* YellowGreen #9ACD32 RGB(154,205,50) .HSL(80,61%,50%)..*/ /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */