/* CSS Document */
body                            {width: 90%; max-width: 1080px; margin: 2em auto; background-image: url("../pictures-genetics/blogo-gen.png"); background-color: rgb(255,242,242); color: rgb(153,0,0); font-family: Tahoma; font-size : 14pt;}
.container                      {display: grid; grid-template-areas: "nav nav" "header header" "div1 div1" "div2 div2" "div3 div3" "div4 div4" "div5 div5" "footer footer"; grid-template-columns: 1fr; gap: 20px; }
nav                             {display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); grid-auto-rows: minmax(55px, auto);  column-gap: 10px; row-gap: 10px;}
nav                             {grid-area: nav; margin-bottom: 30px;}
div.navigate                    {width: 220px; height: 70px; padding: 6px; margin: 3px; background-color: rgb(240,204,204); color: rgb(153,0,0); border-radius: 8px; border: solid rgb(153,0,0) 3px; text-align: center; font-size : 16pt; vertical-align: middle;}
div.navigate a                  {color: rgb(153,0,0); text-decoration: none; font-weight: normal; cursor: pointer;}
div.navigate a:link             {color: rgb(153,0,0); text-decoration: none; }
div.navigate a:hover            {color: rgb(255,0,0); text-decoration: none; }
div.navigate a:visited          {color: rgb(153,0,0); text-decoration: none; }

div.mnavigate                   {width: 220px; height: 25px; padding: 6px; margin: 3px; background-color: rgb(240,194,194); color: rgb(153,0,0); border-radius: 8px; border: solid rgb(153,0,0) 3px; text-align: center; font-size : 16pt;}
div.mnavigate a                 {color: rgb(153,0,0); text-decoration: none; font-weight: normal; cursor: pointer;}
div.mnavigate a:link            {color: rgb(153,0,0); text-decoration: none; }
div.mnavigate a:hover           {color: rgb(255,0,0); text-decoration: none; }
div.mnavigate a:visited         {color: rgb(153,0,0); text-decoration: none; }

header                          {grid-area: header; }
header                          {font-size : 28pt; text-align: center; padding-top: 20px; padding-bottom: 20px; margin-top: 20px; margin-bottom: 20px;}
footer                          {border-top: 3px solid rgb(153,0,0); padding: 20px; margin-top: 20px; margin-bottom: 20px; font-style: italic; vertical-align: middle; width: 95%;}
footer                          {grid-area: footer; }
footer p                        {text-align: center;}

.chromset                       {grid-area: div1; display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); grid-auto-rows: auto;  column-gap: 10px; row-gap: 10px; margin-top: 20px;} //minmax(390px, auto)
.descr                          {grid-area: div2; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-auto-rows: auto;  column-gap: 10px; row-gap: 10px; width: 100%; margin-top: 10px; margin-bottom: 10px; border-bottom: solid rgb(153,0,0) 3px;}
.monogen                        {grid-area: div1; display: grid; grid-template-columns: 1fr 3fr; grid-auto-rows: auto;  column-gap: 10px; row-gap: 10px;}
.chrominfo                      {grid-area: div1; display: grid; grid-template-columns: 1fr 3fr; grid-auto-rows: auto;  column-gap: 10px; row-gap: 10px;}
article                         {grid-area: div3;}
.chromdescr                     {grid-area: div1; display: grid; grid-template-columns: 1fr 5fr; grid-auto-rows: auto;  column-gap: 10px; row-gap: 10px;}
.struct                         {grid-area: div1; display: grid; grid-template-columns: 3fr 1fr; grid-auto-rows: auto;  column-gap: 10px; row-gap: 10px; margin-top: 20px; margin-bottom: 20px;}
.hybrid table                   {text-align: center; white-space: nowrap;}
.hybrid table td                {text-align: center; white-space: nowrap; width: 120px;}
.descrunit                      {vertical-align: middle; margin: 20px; white-space: nowrap; min-width: 220px;}
.legenda                        {grid-area: div2; margin-top: 20px;}
.explanation                    {grid-area: div3;}
span.gen                        {font-style: italic; font-weight: bold;}
span.lokus                      {font-weight: bold;}

a                               {color: rgb(153,0,0); text-decoration: none; vertical-align: middle; cursor: pointer;}
a:link                          {color: rgb(153,0,0); text-decoration: none; }
a:visited                       {color: rgb(153,0,0); text-decoration: none; }
a:hover                         {color: rgb(255,0,0); text-decoration: none; }
footer a                        {color: rgb(153,0,0); text-decoration: none; vertical-align: middle; cursor: pointer; font-weight: bold;}

button                          {width: 100px; height: 30px; border: solid rgb(153,0,0) 2px; border-radius: 5px; color: rgb(255,255,255); background-color: rgb(153,0,0); cursor: pointer; font-size : 14pt; font-weight: bold;}

.dropdown                            {position: relative; display: inline-block;}
.dropdown .dropdown-ref              {width: 220px; height: 70px; padding: 6px; margin: 3px; background-color: rgb(240,194,194); color: rgb(153,0,0); border-radius: 8px; border: solid rgb(153,0,0) 3px; text-align: center; font-size : 16pt;}
.dropdown .dropdown-content          {display: none; position: absolute; left: 20%; top: 20%; padding-left:10px; padding-right:10px; padding-bottom: 5px; padding-top: 5px; background-color: rgb(255,255,255); font-family: Tahoma; text-align: left; color: rgb(153,0,0); border: rgb(153,0,0) solid 4px; border-radius: 8px; z-index: 1;}
.dropdown:hover .dropdown-content    {display: block;}

.home                                {position: relative; width: 100%; margin-top: 20px; text-align: center; }
.home span                           {position: relative; width: 220px; height: 40px; padding: 10px; background-color: rgb(240,194,194); color: rgb(153,0,0); border-radius: 8px; border: solid rgb(153,0,0) 3px; text-align: center; font-size : 16pt;}