Commit bfe24fee authored by Dorian Goepp's avatar Dorian Goepp
Browse files

Merge branch 'master' into dgoepp/config-modules

parents fa5c4795 3d084e6f
......@@ -45,7 +45,17 @@ html,body
::-webkit-scrollbar-corner { background-color: #fff;}
::-webkit-resizer { background-color: #999;}
#outer
#level-1
{
display: flex;
flex-direction: row;
flex-grow: 1;
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-flex-grow:1;
}
#level-2
{
display:flex;
flex-direction: column;
......@@ -224,13 +234,13 @@ html,body
/* margin-top: 3px; */
width:10px;
height:10px;
background: transparent url("images/baseline-close-24px.svg") no-repeat center;
background: transparent url("images/icons/close.svg") no-repeat center;
}
/* .flexlayout__tab_button:hover .flexlayout__tab_button_trailing,
.flexlayout__tab_button--selected .flexlayout__tab_button_trailing{
background: transparent url("images/baseline-close-24px.svg") no-repeat center;
background: transparent url("images/icons/close.svg") no-repeat center;
} */
.flexlayout__tab_button_overflow {
......@@ -287,6 +297,7 @@ html,body
top:0;
bottom:0;
right:0;
filter: invert(14%) sepia(1%) saturate(2442%) hue-rotate(316deg) brightness(98%) contrast(77%);
}
.flexlayout__tab_toolbar_button-min {
......@@ -294,19 +305,23 @@ html,body
height:20px;
border:none;
outline-width: 0;
background: transparent url("images/baseline-fullscreen-24px.svg") no-repeat center;
background: transparent url("images/icons/fullscreen.svg") no-repeat center;
}
.flexlayout__tab_toolbar_button-min:hover {
filter: invert(67%) sepia(71%) saturate(551%) hue-rotate(1deg) brightness(200%) contrast(86%);
}
.flexlayout__tab_toolbar_button-max {
width:20px;
height:20px;
border:none;
outline-width: 0;
background: transparent url("images/baseline-fullscreen_exit-24px.svg") no-repeat center;
background: transparent url("images/icons/fullscreen_exit.svg") no-repeat center;
}
.flexlayout__popup_menu {
.flexlayout__tab_toolbar_button-max:hover {
filter: invert(67%) sepia(71%) saturate(551%) hue-rotate(1deg) brightness(200%) contrast(86%);
}
.flexlayout__popup_menu_item {
......@@ -423,7 +438,7 @@ html,body
.flexlayout__border_button:hover .flexlayout__border_button_trailing,
.flexlayout__border_button--selected .flexlayout__border_button_trailing{
background: transparent url("images/baseline-close-24px.svg") no-repeat center;
background: transparent url("images/icons/close.svg") no-repeat center;
}
.flexlayout__border_toolbar_left {
......
......@@ -139,7 +139,7 @@
.flexlayout__tab_button:hover .flexlayout__tab_button_trailing,
.flexlayout__tab_button--selected .flexlayout__tab_button_trailing{
background: transparent url("images/baseline-close-24px.svg") no-repeat center;
background: transparent url("images/icons/close.svg") no-repeat center;
}
.flexlayout__tab_button_overflow {
......@@ -151,7 +151,7 @@
border:none;
font-size: 10px;
font-family: Arial, sans-serif;
background: transparent url("images/baseline-more_horiz-24px.svg") no-repeat left;
background: transparent url("images/icons/more_horiz.svg") no-repeat left;
}
.flexlayout__tabset_header
......@@ -206,7 +206,7 @@
height:20px;
border:none;
outline-width: 0;
background: transparent url("images/baseline-fullscreen-24px.svg") no-repeat center;
background: transparent url("images/icons/fullscreen.svg") no-repeat center;
}
.flexlayout__tab_toolbar_button-max {
......@@ -214,7 +214,7 @@
height:20px;
border:none;
outline-width: 0;
background: transparent url("images/baseline-fullscreen_exit-24px.svg") no-repeat center;
background: transparent url("images/icons/fullscreen_exit.svg") no-repeat center;
}
.flexlayout__popup_menu {
......@@ -335,7 +335,7 @@
.flexlayout__border_button:hover .flexlayout__border_button_trailing,
.flexlayout__border_button--selected .flexlayout__border_button_trailing{
background: transparent url("images/baseline-close-24px.svg") no-repeat center;
background: transparent url("images/icons/close.svg") no-repeat center;
}
.flexlayout__border_toolbar_left {
......
......@@ -138,16 +138,16 @@ class Board extends React.Component {
// is the active (selected) tab configurable?
if ('configSchema' in component) {
renderValues.buttons.push(
<img src="images/baseline-settings-20px.svg"
alt="settings-test"
key="settings-test"
<img src="images/icons/settings.svg"
alt="settings"
key="settings"
onClick={modeToggle("settings").bind(this)}/>
);
}
// does the active (selected) tab have a readme?
if ('readme' in component) {
renderValues.buttons.push(
<img src="images/readme-grey.svg"
<img src="images/icons/info-grey-outline.svg"
alt="readme"
key="readme"
onClick={modeToggle("readme").bind(this)}/>
......
......@@ -34,4 +34,7 @@ i.glyphicon { display: none; }
.btn-add::after { content: 'Add'; }
.array-item-move-up::after { content: 'Move Up'; }
.array-item-move-down::after { content: 'Move Down'; }
.array-item-remove::after { content: 'Remove'; }
\ No newline at end of file
.array-item-remove::after { content: 'Remove'; }
.tabset-button:hover {
filter: invert(67%) sepia(71%) saturate(551%) hue-rotate(1deg) brightness(200%) contrast(86%);
}
......@@ -3,17 +3,10 @@
height: 110px;
}
#header .logo {
margin-left: 25px;
padding-top: 5px;
height: 90px;
float: left;
}
/* Name of this piece of software */
#header .title {
width: 10%;
width: 10vw;
font-size: 35px;
font-weight: bold;
letter-spacing: 0.3px;
......@@ -21,20 +14,20 @@
color: #edc61b;
line-height: 100px;
float: left;
margin-left: 25px;
margin-left: 1vw;
}
/* Name of the algorithm being run */
#header .algo-name {
width: 26%;
width: 26vw;
color: #383838;
font-size: 25px;
font-weight: bold;
text-align: center;
letter-spacing: 0.3px;
padding-top: 25px;
padding-right: 9%;
padding-right: 8vw;
float:left;
}
......@@ -50,7 +43,7 @@
#header .sleep {
vertical-align: center;
width: 20.5% ;
width: 20.5vw ;
float:left;
padding-top: 20px;
line-height: 30px;
......@@ -58,41 +51,15 @@
font-weight: bold;
color: #383838;
}
/* About us button */
.lavizu_btn {
font-family: sans-serif;
width:auto;
display: inline-block;
background: #edc71b;
color:#fff;
font-size: 25px;
padding:10px 20px 10px 20px;
border-radius: 10px;
border:none;
border-bottom:5px solid #ba9d1a;
transition: all 0.2s;
margin-left: 5%;
text-decoration: none;
margin-top: 30px;
}
.lavizu_btn:hover {
border-bottom:7px solid #ba9d1a;
transform: translateY(-2px);
cursor: pointer;
}
.lavizu_btn:active {
transition: all 0s;
border-bottom:2px solid #ba9d1a;
transform: translateY(2px);
}
/* Buttons to control the algorithm's lifecycle : play/pause, restart, next step, etc. */
#header .controls {
padding-right:4%;
padding-left:4%;
padding-right:7vw;
padding-left:4vw;
padding-top: 20px;
float: left;
filter: invert(26%) sepia(0%) saturate(0%) hue-rotate(98deg) brightness(99%) contrast(91%);
}
#header .controls img {
......
......@@ -17,8 +17,6 @@ export function Header(props) {
})
return (
<div id="header">
<img src={window.location.origin + "/images/logoBehaviors.png"} alt="logo of the Behaviors.ai project"
className="logo"/>
<div className="title">
Lavizu
</div>
......@@ -32,7 +30,6 @@ export function Header(props) {
<div className="block sleep">
<SleepDuration ros={props.ros}/>
</div>
<a className="lavizu_btn" href="more.html">?</a>
</div>);
}
......
/*! react-sidenav v0.4.5 | (c) 2018 Trend Micro Inc. | MIT | https://github.com/trendmicro-frontend/react-sidenav */
/* Menu level 1 title */
.menu-title-level1 {
width: 100%;
height: 24px;
font-family: Lato;
font-size: 19px;
font-weight: 900;
font-style: bold;
font-stretch: normal;
line-height: normal;
letter-spacing: 0.2px;
color: #484848;
background-color:#d8d8d8;
padding-left: 20px;
margin: 1.2vh 0px 0.5vh 0px;
border-radius: 4px;
}
/* Menu level 2 title */
.menu-title-level2 {
width: 100%;
height: 27px;
font-family: Lato;
font-size: 18px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 0.2px;
color: #484848;
padding-left: 20px;
margin: 1.5vh 0px 0.5vh 0px;
}
/*Menu icons*/
.menu-button {
height: 25px;
margin: 0.9vh 0px 0px 7px;
filter: invert(14%) sepia(1%) saturate(2442%) hue-rotate(316deg) brightness(98%) contrast(77%);
}
.sidenav---navitem---9uL5T:hover .menu-button {
filter: invert(67%) sepia(71%) saturate(551%) hue-rotate(1deg) brightness(111%) contrast(86%);
}
.sidenav---selected---1EK3y .menu-button {
filter: invert(67%) sepia(71%) saturate(551%) hue-rotate(1deg) brightness(111%) contrast(86%);
}
/* Behaviors logo */
.logo {
margin: 5px 5px 1vh 5px;
height: 100px;
}
/* Footer with About us and lock button */
.footer {
position: fixed;
bottom:1vh;
display:inline-block;
}
.footer:hover {
filter: invert(67%) sepia(71%) saturate(551%) hue-rotate(1deg) brightness(111%) contrast(86%);
}
.lock-button {
margin-left:70px;
}
.about-button {
margin-left:30px;
}
/* Side navigation menu */
.sidenav---sidenav---_2tBP {
z-index: 1006;
min-width: 115px;
height: 100%;
background: #edecec;
-webkit-transition: min-width 0.15s;
-moz-transition: min-width 0.15s;
-o-transition: min-width 0.15s;
-ms-transition: min-width 0.15s;
transition: min-width 0.15s;
border-right: solid #f5f5f6 4px;
}
.sidenav---sidenav---_2tBP.sidenav---collapsed---LQDEv .sidenav---sidenav-nav---3tvij .sidenav---sidenav-navitem---uwIJ- .sidenav---sidenav-subnav---1EN61 {
display: none;
}
.sidenav---sidenav---_2tBP.sidenav---collapsed---LQDEv .sidenav---sidenav-nav---3tvij .sidenav---sidenav-navitem---uwIJ-:hover > .sidenav---sidenav-subnav---1EN61 {
display: block;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL {
min-width: 220px;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- .sidenav---navicon---3gCRo + .sidenav---navtext---1AE_f {
display: inline-block;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---expandable---3_dr7 > .sidenav---navitem---9uL5T {
cursor: pointer;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 {
position: static;
border: none;
float: left;
clear: both;
width: 100%;
background: transparent;
overflow: hidden;
-webkit-box-shadow: none;
box-shadow: none;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 {
display: block;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 {
display: none;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47 {
position: relative;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47::before {
content: " ";
width: 100%;
height: 28px;
position: absolute;
top: 0;
z-index: -1;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47:first-child {
display: none;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47:hover::before {
background: #fff;
opacity: 0.15;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
filter: alpha(opacity=15);
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47::before {
content: " ";
width: 100%;
height: 28px;
position: absolute;
top: 0;
z-index: -1;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47.sidenav---selected---1EK3y > .sidenav---navitem---9uL5T {
color: #fff;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47.sidenav---selected---1EK3y > .sidenav---navitem---9uL5T::before {
content: " ";
width: 2px;
height: 20px;
left: 10px;
top: 4px;
position: absolute;
border-left: 2px #fff solid;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47:hover > .sidenav---navitem---9uL5T {
background: transparent;
color: #fff;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-subnav---1EN61 > .sidenav---sidenav-subnavitem---1cD47 > .sidenav---navitem---9uL5T {
color: #f9dcdd;
padding: 0 0 0 30px;
}
.sidenav---sidenav-toggle---1KRjR {
display: block;
position: relative;
float: left;
width: 64px;
height: 64px;
padding: 0;
margin: 0;
background-color: transparent;
background-image: none;
border: 0;
border-radius: 0;
cursor: pointer;
}
.sidenav---sidenav-toggle---1KRjR:focus {
outline: none;
}
.sidenav---sidenav-toggle---1KRjR .sidenav---icon-bar---u1f02 {
display:block;
width: 20px;
height: 2px;
margin: 0 auto;
background-color: #484848;
border-radius: 1px;
-webkit-transition: all 0.15s;
-moz-transition: all 0.15s;
-o-transition: all 0.15s;
-ms-transition: all 0.15s;
transition: all 0.15s;
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
}
.sidenav---sidenav-toggle---1KRjR .sidenav---icon-bar---u1f02 + .sidenav---icon-bar---u1f02 {
margin-top: 4px;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-toggle---1KRjR .sidenav---icon-bar---u1f02 {
width: 25px;
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-toggle---1KRjR .sidenav---icon-bar---u1f02:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-toggle---1KRjR .sidenav---icon-bar---u1f02:nth-child(2) {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .sidenav---sidenav-toggle---1KRjR .sidenav---icon-bar---u1f02:nth-child(3) {
margin-top: -8px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sidenav---sidenav-nav---3tvij {
float: left;
padding: 0;
margin: 0;
clear: both;
list-style: none;
width: 100%;
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- {
clear: both;
position: relative;
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---highlighted---oUx9u > .sidenav---navitem---9uL5T {
cursor: default;
background-color: #383838;
border-right: 10px solid #edc61b;
border-radius: 4px;
color: #edc61b;
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-:hover > .sidenav---navitem---9uL5T::after {
background: #fff;
opacity: 0.15;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
filter: alpha(opacity=15);
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---highlighted---oUx9u > .sidenav---navitem---9uL5T::after,
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-:hover.sidenav---highlighted---oUx9u > .sidenav---navitem---9uL5T::after {
background: #000;
opacity: 0.2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---highlighted---oUx9u.sidenav---expanded---1KdUL > .sidenav---navitem---9uL5T::after,
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-:hover.sidenav---highlighted---oUx9u.sidenav---expanded---1KdUL > .sidenav---navitem---9uL5T::after {
background: #000;
opacity: 0.25;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
filter: alpha(opacity=25);
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---highlighted---oUx9u.sidenav---selected---1EK3y.sidenav---expanded---1KdUL > .sidenav---navitem---9uL5T::after,
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-:hover.sidenav---highlighted---oUx9u.sidenav---selected---1EK3y.sidenav---expanded---1KdUL > .sidenav---navitem---9uL5T::after {
background: #000;
opacity: 0.2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-:hover > .sidenav---navitem---9uL5T .sidenav---navicon---3gCRo,
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---highlighted---oUx9u > .sidenav---navitem---9uL5T .sidenav---navicon---3gCRo {
opacity: 1;
-ms-filter: none;
filter: none;
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-:hover > .sidenav---navitem---9uL5T .sidenav---navicon---3gCRo,
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-:hover > .sidenav---navitem---9uL5T .sidenav---navtext---1AE_f,
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---highlighted---oUx9u > .sidenav---navitem---9uL5T .sidenav---navicon---3gCRo,
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---highlighted---oUx9u > .sidenav---navitem---9uL5T .sidenav---navtext---1AE_f {
color: #edc61b;
font-weight: bold;
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-:hover > .sidenav---navitem---9uL5T .sidenav---navicon---3gCRo > *,
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-:hover > .sidenav---navitem---9uL5T .sidenav---navtext---1AE_f > *,
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---highlighted---oUx9u > .sidenav---navitem---9uL5T .sidenav---navicon---3gCRo > *,
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ-.sidenav---highlighted---oUx9u > .sidenav---navitem---9uL5T .sidenav---navtext---1AE_f > * {
color: #fff;
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- > .sidenav---navitem---9uL5T {
position: relative;
display: block;
line-height: 50px;
height: 50px;
white-space: nowrap;
text-decoration: none;
color: #484848;
font-size: 14px;
cursor: pointer;
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- > .sidenav---navitem---9uL5T:focus {
outline: 0;
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- > .sidenav---navitem---9uL5T::after {
content: '';
position: absolute;
width: 100%;
top: 0;
bottom: 0;
left: 0;
background: #fff;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
z-index: -1;
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- > .sidenav---navitem---9uL5T .sidenav---navicon---3gCRo,
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- > .sidenav---navitem---9uL5T .sidenav---navtext---1AE_f {
color: #383838;
padding-left: 40px;
height: 50px;
line-height: 50px;
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- > .sidenav---navitem---9uL5T .sidenav---navicon---3gCRo > *,
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- > .sidenav---navitem---9uL5T .sidenav---navtext---1AE_f > * {
color: #f9dcdd;
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- > .sidenav---navitem---9uL5T .sidenav---navicon---3gCRo {
display: block;
float: left;
width: 64px;
height: 50px;
margin-right: -6px;
vertical-align: top;
background-repeat: no-repeat;
background-position: center center;
background-color: transparent;
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
line-height: 50px;
text-align: center;
}
.sidenav---sidenav-nav---3tvij > .sidenav---sidenav-navitem---uwIJ- > .sidenav---navitem---9uL5T .sidenav---navicon---3gCRo + .sidenav---navtext---1AE_f {
display: none;
}
.sidenav---sidenav-subnav---1EN61 {
/* min-width: 200px;
position: absolute; */
list-style: none;