:root { --sidebarwidth: 224px; } ::-moz-selection { background: #abffec; color:#2F363B; } ::selection { background: #abffec; color:#2F363B; } @font-face { font-family: "Montserrat"; src: url('Montserrat-Regular.ttf'); } @font-face { font-family: "Open Sans"; src: url('OpenSans-Regular.ttf'); } body { font-family: "Open Sans",sans-serif; background-color:#2F363B; margin: 0 0 0 0; min-height: 100vh; } ul a li { color:#768692; } .imageLeft { height:384px; margin-top:16px; margin-bottom:16px; } .imageGrid { -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; justify-content:center; } .imageGridCell { flex-grow:1; height:256px; width:50%; background-size:contain; background-position:center; background-repeat:no-repeat; } footer { bottom:0px; z-index:1; background-color:#101315; width:100%; position:fixed; } #header { border-bottom-style:solid; border-bottom-color:#2F363B; border-bottom-width:2px; } footer ul { list-style-type:none; padding-left:8px; padding-top:6px; padding-bottom:6px; margin:0px; font-size:12px; color:#465662; } .attribReadout.bulleted { list-style:circle; } footer ul a li { display:inline-block; color: #80909c; margin-right:4px; margin-left:4px; } .smallHR { margin-right:70%; border-color: #2f363b; } .TOCGrid { display:flex; flex-wrap:wrap; justify-content: flex-start; } .griditem.smallerItem { padding-top:16px; padding-bottom:16px; width:15%; flex-grow: 0; } footer ul a li:hover { color: white; } footer ul li { color:#465662; margin-right:4px; display:inline-block; } ul a { text-decoration:none; color: #768692; } #livecode { border-style:none; padding-left:224px; margin-top:0px; width:calc(100% - 224px); height: calc(100vh - 85px); margin:0px; } ul a:active { text-decoration:none; color: #768692; } .fullform { width:100%; } ul a:link { text-decoration:none; color: #768692; } .docuImage { max-width:25%; max-height:256px; margin-bottom:16px; } ul a:visited { text-decoration:none; color: #768692; } .attribReadout { border-left-color:#4cb96f; border-left-style:solid; border-left-width:1px; border-radius:6px; margin-left:10px; padding-left:30px; } .blogImage { max-width:25%; max-height:256px; } .attribReadout p b { padding:8px; border-radius:4px; background-color:#465158; margin-right:8px; box-shadow: 0px 2px 4px 0px #222222; } .attribReadout { line-height:32px; } ul a:hover { text-decoration:none; color: #768692; } a { text-decoration:underline; color: #4cb96f; cursor:pointer; } a:active { text-decoration:underline; color: #4cb96f; } a:link { text-decoration:underline; color: #4cb96f; } a:visited { text-decoration:underline; color: #4cb96f; } a:hover { color: #6cd98f; } a b { text-decoration:underline; color: #4cb96f; cursor:pointer; } a b:active { text-decoration:underline; color: #4cb96f; } #drawerButton { display:none; } a b:link { text-decoration:underline; color: #4cb96f; } a:visited { text-decoration:underline; color: #4cb96f; } a b:hover { color: #6cd98f; } aside#sidebar { width:var(--sidebarwidth); display:block; height:100%; position:absolute; background-color:#101315; left:0px; top:83px; } main.sidebarstyle { margin-left: var(--sidebarwidth); } .screenshotsSection { -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; flex-wrap:wrap; margin-top:8px; } .screenshotCell { height:256px; flex-grow:1; background-position:center; background-size:cover; flex-basis:25%; } #sidebar ul ul a li { list-style-type:none; width: calc(100% - 32px); padding-left:16px; padding-right:16px; padding-top:4px; padding-bottom:4px; background-color:#101315; font-family:'Open Sans'; } #sidebar ul ul a .selected { color: #b8c8d4; background-color:#1F262B; } #sidebar ul ul a li:hover { background-color:#2F363B; } #sidebar ul ul.title { color:#1a1e21; background-color:#768692; cursor:default; font-family: 'Montserrat',sans-serif; width:100%; padding-top:2px; line-height:32px; text-align:center; vertical-align:middle; } #sidebar ul { padding-left:0px; margin-top:0px; } #underlayContainer { color:white; vertical-align: middle; font-size: 12px; margin-top:8px; } .checkboxForm > input[type=checkbox] { visibility: hidden; } .checkboxForm { position: relative; display: inline-block; width: 80px; height: 26px; margin: 0 auto; margin-right:8px; background: #2F363B; border-radius: 4px; -webkit-border-radius: 2px; -moz-border-radius: 2px; cursor: pointer; } .checkboxForm:hover { background: #23292d; } .checkboxForm:after { position: absolute; display: inline; right: 10px; content: 'OFF'; color: white; font: 12px/26px Arial, sans-serif; font-weight: bold; text-transform: capitalize; z-index: 0; } .checkboxForm:before { position: absolute; display: inline; left: 10px; content: 'ON'; color: #4cb96f; font: 12px/26px Arial, sans-serif; font-weight: bold; text-transform: capitalize; z-index: 0; } .checkboxForm label { position: absolute; display: block; top: 3px; left: 3px; width: 34px; height: 20px; background: #4cb96f; cursor: pointer; transition: all 0.5s linear; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; z-index: 1; } .checkboxForm input[type=checkbox]:checked + label { left: 43px; } p { color:white; } nav { background-color: #1a1e21; text-align:left; color: #768692; } main { padding-left:32px; padding-right:32px; padding-bottom:32px; } nav ul { list-style-type: none; padding:0px; margin:0px; z-index:1; } b { color:#4cb96f; } h1 { font-family: 'Montserrat',sans-serif; color:white; } h2 { color: #4cb96f; font-family: 'Montserrat',sans-serif; font-size:18px; } h3 { color: white; font-family: 'Montserrat',sans-serif; font-size:18px; } h1.title { margin-bottom:0px; margin-top:0px; } h2.title { margin-bottom:0px; margin-top:0px; } .pressCard { background-size:contain; background-position:center; background-repeat:no-repeat; border-radius:8px; transition: 250ms transform, 250ms box-shadow; -webkit-transition: 250ms -webkit-transform, 250ms box-shadow; } .pressCard:hover { transform: scale(1.0025, 1.0025); -webkit-transform: scale(1.0025, 1.0025); cursor:pointer; background-color:#4d585f; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5); } .screenshotCard { background-size:cover !important; } .downloadtitle { width:100%; padding-top:8px; padding-bottom:8px; background-color:#69a988; color:WHITE; font-family:"Montserrat",sans-serif;text-align:center; font-size:24px; } .downloadtitle2 { width:100%; padding-top:8px; padding-bottom:8px; background-color:#465158; color:WHITE; font-family:"Montserrat",sans-serif;text-align:center; font-size:24px; } .widgetGeneratorForm { width:calc(100% - 32px); padding:16px; margin-bottom:8px; background-color:#d8eaf5; border-style:none; outline:none; font-family: 'Open Sans'; border-radius:4px; } .widgetGeneratorForm:hover { background-color:#e4f0f7; } .raisedContainer { background-color: #465158; padding: 16px; margin-left: 16px; margin-right: 16px; box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.25); cursor: default; text-rendering: optimizeLegibility; margin-bottom:32px; } } .nojsbanner { color:#3f4451; cursor:default; } .nojsbanner:hover { color:white; } .downloadbanner { background-color:#538e70; padding-left:22%; padding-right:22%; padding-top:8px; box-shadow: inset -4px 13px 20px 0px rgba(0, 0, 0, 0.12); min-height:128px; padding-bottom:8px; text-align:center; } .downloadgrid2 { min-height:128px; text-align:center; } .downloadgriditem { padding:8px; padding-top:64px; padding-bottom:64px; vertical-align:middle; cursor:pointer; text-align:center; font-family: "Montserrat", sans-serif; font-size:18px; color:white; border-radius:4px; flex-grow:1; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } .downloadgriditem:hover { background-color: rgba(0,0,0,0.1); } .downloadgrid { -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; grid-template-columns: calc(50% - 25px) 25px calc(50% - 25px) 25px; grid-template-rows: auto 0px auto 0px auto; } .keyboardkey { border-style: solid; border-width:2px; border-radius:8px; border-color: #4cb96f; padding:16px; display:inline-block; margin-right:16px; color: #4cb96f; font-family: "Montserrat",sans-serif; } nav ul li { display:inline-block; cursor:pointer; padding:32px; font-family: "Montserrat"; padding-left:16px; padding-right:16px; vertical-align:middle; font-size:14px; } nav ul li:hover { background-color: #2F363B; } nav ul li.selected { background-color: rgba(16,19,21,0.69); color:#b8c8d4; } nav ul li.selected:hover { background-color: #2F363B; } header.navigation-header { background-color: #242a2d; background-attachment:fixed; background-position:center; background-size:cover; vertical-align: middle; } header nav { background: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) ), var(--navbarimage); background-attachment:fixed; background-position:center; background-size:cover; } #mainlogo { width:224px; cursor:pointer; height:83px; background-repeat:no-repeat; background-image: url(../images/janusxr-logo.png); background-size:contain; background-position:center; display:inline-block; vertical-align:middle; } #mainlogo:hover { background-color:#3F464B; } #mainlogo li:hover { background-color: transparent; } ul a.downloadLink { color:#4cb96f !important; } ul a.downloadLink:link { color:#4cb96f !important; } ul a.downloadLink:visited { color:#4cb96f !important; } ul a.downloadLink:hover { color:#65d489 !important; } .markupButtonGrid { -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; flex-wrap:wrap; justify-content:left; margin-top:8px; margin-bottom:16px; cursor:pointer; } .hideImage { display:none; } .markupButton { flex-grow:0; padding-left:32px; padding-right:32px; padding-top:16px; padding-bottom:16px; border-style:solid; color:#4cb96f; margin-left:8px; margin-right:8px; border-color: #4cb96f; border-width: 1px; border-radius:4px; margin-top:4px; margin-bottom:4px; } .markupButton:hover { background-color: #4cb96f; color: #2F363B; } .headertext { text-align:left; vertical-align:middle; display:inline; float:left; padding-left:264px; padding-top:42.5px; font-family: 'Open Sans',sans-serif; color:white; } span { color:white; } li { color:white; } .headerbutton { text-align:right; vertical-align:middle; display:inline; float:right; padding-right:16px; padding-top:42.5px; font-family: 'Montserrat',sans-serif; color:white; } .headerbutton:hover { color:#BBBBBB; cursor:pointer; } .readout { border-style:solid; border-color: #4cb96f; border-width: 1px; padding-left:16px; padding-right:16px; color: #4cb96f; padding-bottom:16px; margin-bottom:16px; background-color:#1a1e21; } .dropdowntitle { color:#1a1e21; background-color:#4cb96f; cursor:default; font-family: 'Montserrat',sans-serif; width:100%; padding-top:4px; padding-bottom:4px; } .dropdowntitle:hover { background-color:#4cb96f; } .dropdownbutton { background-color:#1a1e21; background: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) ), var(--navbarimage); background-position:center; background-attachment:fixed; background-size:cover; padding-top:12px; padding-bottom:12px; width:100%; } .dropdownbutton:hover { background: #768692; color: #2F363B; } .dropdown ul { position:absolute; margin-top:32px; margin-left:-16px; padding-right:32px; background-color:#1a1e21; text-align:center; display:none; border-style:solid; border-color:#768692; border-width:1px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.75); } .dropdown:hover ul { display:block; } .dropdown ul a li { display:block; color:#768692; } #redditButton { background-image: url('../images/logos/external/reddit.png'); background-position:center; background-repeat: no-repeat; } #discordButton { background-image: url('../images/logos/external/discord.png'); background-position:center; background-repeat: no-repeat; } #twitterButton { background-image: url('../images/logos/external/twitter.png'); background-position:center; background-repeat: no-repeat; } #facebookButton { background-image: url('../images/logos/external/facebook.png'); background-position:center; background-repeat: no-repeat; } #youtubeButton { background-image: url('../images/logos/external/youtube.png'); background-position:center; background-repeat: no-repeat; } #windowsButton { background-image: url('../images/logos/external/windows.png'); background-position:bottom; background-repeat: no-repeat; } #linuxButton { background-image: url('../images/logos/external/linux.png'); background-position:bottom; background-repeat: no-repeat; } #macButton { background-image: url('../images/logos/external/mac.png'); background-position: bottom; background-repeat: no-repeat; } section.grid-1.docGrid { justify-content:left; } section.grid-1.communityGrid { justify-content:center; } .griditem.gridlink.docButton { flex-grow: 0; } .griditem.gridlink.communityButton { padding-top: 96px; padding-bottom:12px; line-height:2px; margin-left: 8px; margin-right: 8px; flex-grow: 0; background-size:contain; text-align:center; } .griditem.gridlink.osButton { padding-top: 128px; padding-bottom:24px; line-height:2px; background-size:contain; text-align:center; } #spotlogo { width:75%; padding-top:128px; padding-bottom:32px; } .januswebframe { margin-bottom:16px; margin-top:16px; width: 85%; height: 480px; } .floatlist li { background-color:#465158; padding:16px; margin-left:16px; margin-right:16px; box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.25); cursor:default; text-rendering: optimizeLegibility; } .floatlistExample { margin-top:8px; width:100%; background-color:#2f363b; padding-top:64px; padding-bottom:64px; text-align:center; } .mainButton span { color: #4cb96f; border-color:#4cb96f; border-style:solid; border-radius:15px; border-width:1px; padding:16px; width:100%; padding-left:32px; padding-right:32px; display:inline-block; font-family:"Montserrat",sans-serif; box-shadow: 0px 8px 16px 0px rgba(27,27,27,0.75); } .mainButton { text-decoration:none; text-shadow: 2px 2px 1px #1b1b1b; cursor:pointer; } .mainButton:hover { text-shadow: none; } .mainButton:active { text-decoration:none; } .mainButton:hover span{ background-color: #4cb96f; color: #2F363B; box-shadow: none; } .mainButtonContainer { margin-top:32px; margin-bottom:32px; padding-left:40%; padding-right:40%; text-align:center; font-size:18px; } #widgetOutputContainer{ display:none; } .widgetOutput { color:#4cb96f; width:calc(100% - 32px); padding:16px; background-color:#2F363B; font-size:12px; border-style:none; resize:none; overflow:auto; height:128px; } .widgetOutput { outline-style:none; } .cardButton { position:absolute; bottom:16px; right:16px; font-family:'Open Sans'; padding:16px; font-size:16px; padding-left:5%; padding-right:5%; border-style:solid; border-color: #4cb96f; color:#4cb96f !important; border-radius:4px; text-decoration:none; border-width:1px; text-decoration:none; } .markupButtonSelect { background-color: #40565a; } .cardButton:link { text-decoration:none; } .cardButton:hover{ background-color:#4cb96f; color: #2F363B !important; } .cardContainer { -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; flex-wrap:wrap; } .floatlist li h2 { margin-top:0px; } .cardTitle { margin-top:0px; margin-bottom:4px; font-size:24px; } .infoImg { background-position:center; background-size:cover; width: 256px; min-width: 193px; max-width:193px; height:100%; position:absolute; right: 0px; } .infoHeader { display:block; } .cardContainer.infoCardContainer { padding-left:5%; padding-right:5%; background-size:cover; background-attachment: fixed; background-position:center; margin-top: 8px; } .infoText { padding: 8px; padding-top: 4px; padding-right: 201px; } .infoText h1 { color: #e4eff5; } .infoText p { color: #c6d0d8; } .card.infoCard { background-color: #384046; max-height: 193px; min-height: 193px; margin-top:8px; margin-bottom:8px; margin-left: 8px; margin-right: 8px; width: 33%; padding: 0px; height: 128px; } .infoContent { display:flex; height: 100%; } .card { margin:16px; flex-grow:1; width:25%; min-height:128px; background-color: #465158; padding: 16px; position:relative; margin-left: 16px; margin-right: 16px; box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.25); cursor: default; padding-bottom:128px; text-rendering: optimizeLegibility; } } .floatlist h2 { margin-top:0px; } .floatlist { padding-left:0px; list-style-type:none; overflow:hidden; } #spotlightSubtitle { font-size:24px; text-shadow: 2px 2px 1px #1b1b1b; } #spotlightTitle { font-size:42px; text-shadow: 2px 2px 1px #1b1b1b; } .spotlight p { text-shadow: 2px 2px 1px #1b1b1b; } .webspotlight { padding-top:32px; position:relative; } #slideLeft { position:absolute; top: 0px; width: 7%; min-width:64px; height:100%; left: 0px; background-image: url('../images/aL.png'); } .slideButton { vertical-align:middle; background-position:center; background-repeat: no-repeat; background-size:contain; } .slideButton:hover { background-color: rgba(255,255,255,0.05); cursor:pointer; } #slideBG { background-position: center; } #slideRight { position:absolute; top: 0px; width: 7%; min-width:64px; height:100%; right: 0px; background-image: url('../images/aR.png'); } .webSpotlightSubtitle { color:#ff619f; } .spotlightButton span { color: #4cb96f; border-color:#4cb96f; border-style:solid; border-radius:15px; border-width:1px; padding:16px; padding-left:32px; padding-right:32px; display:inline-block; font-family:"Montserrat",sans-serif; box-shadow: 0px 8px 16px 0px rgba(27,27,27,0.75); } .spotlightButton.webSpotlightButton span { color: #ff619f; border-color:#ff619f; } .spotlightButton.webSpotlightButton:hover span { background-color: #ff619f; color: #2F363B; } .spotTitle { text-shadow: 2px 2px 1px #1b1b1b; } .spotlightButton { text-decoration:none; text-shadow: 2px 2px 1px #1b1b1b; } .spotlightButton:hover { text-shadow: none; } .spotlightButton:active { text-decoration:none; } .spotlightButton:hover span{ background-color: #4cb96f; color: #2F363B; box-shadow: none; } .spotlightButtonContainer { margin-top:32px; margin-bottom:32px; padding-right:32px; text-align:right; font-size:18px; } h1.smallmargin { margin-top:8px; margin-bottom:2px; } h2.smallmargin { margin-top:2px; margin-bottom:4px; } .gridContainer { padding:32px; } .grid-1 { -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; flex-wrap:wrap; -webkit-justify-content: space-around; justify-content: space-around; -webkit-flex-flow: row wrap; flex-flow: row wrap; -webkit-align-items: stretch; align-items: stretch; } .griditem { transition: 250ms transform, 250ms box-shadow; box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.25); -webkit-transition: 250ms -webkit-transform, 250ms box-shadow; padding:8px; padding-top:64px; padding-bottom:64px; background-color:#465158; cursor:pointer; text-align:center; font-family: "Montserrat", sans-serif; font-size:18px; color:white; border-radius:4px; flex-grow:1; margin:16px; width:25%; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } .griditem:hover { background-color:#4d5961; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5); transform: scale(1.005, 1.005); -webkit-transform: scale(1.0025, 1.0025); text-rendering: optimizeLegibility; } .nohand { cursor:default; } .nohand:hover { background-color:transparent; } .anchorlink { text-decoration:none; cursor:default; } .anchorlink:link { text-decoration:none; cursor:default; } .anchorlink:active { text-decoration:none; } .anchorlink:hover { text-decoration:none; } .gridlink { text-decoration:none; color:white !important; } .gridlink:link { text-decoration:none; color:white !important; } .gridlink:active { text-decoration:none; } .gridlink:hover { text-decoration:none; } .webContainer { padding-left:5%; padding-right:5%; margin-bottom:32px; } .extraslist { text-decoration:underline; list-style-type:none; } .extraslisttitle { color:#768692; } article.extras { font-size:0.75em; background-color:#101315; padding-bottom:64px; padding-left:16px; padding-right:16px; padding-top:8px; } .teamContainer { -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; flex-wrap:wrap; justify-content: center; text-align:center; } .teamCard { background-color: #465158; width:256px; padding-top:368px; padding-bottom:16px; background-size:cover; transition: transform 0.15s, box-shadow 0.15s; -webkit-transition: -webkit-transform 0.15s, box-shadow 0.15s; box-shadow:0px 8px 8px 0px rgba(0,0,0,0.25); border-radius:4px; max-width:256px; max-height:384px; text-align:center; margin:16px; flex-grow:1; cursor:pointer; } .teamCard:hover { transform: scale(1.015, 1.015); -webkit-transform: scale(1.015, 1.015); box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5); } .pocketCell { border-style:solid; border-color:white; font-family:'Montserrat'; border-radius:4px; border-width:1px; margin-top:16px; margin-left:8px; padding-left:0px; margin-right:8px; position:relative; padding-bottom:48px; } .teamContainer a{ position:relative; text-decoration:none; } .teamContainer a span { bottom:16px; font-family:'Montserrat'; text-shadow:2px 2px 1px #1b1b1b; } @media screen and (max-height: 905px) { .downloadgrid .gridlink { padding-top:32px; padding-bottom:32px; } .downloadgrid2 .griditem.gridlink.osButton { padding-top:48px; padding-bottom:48px; background-image: none !important; } .downloadbanner { min-height:64px; } } @media screen and (max-width: 990px) { footer { position:relative; bottom:0px; } .docuImage { max-width:100%; max-height:auto; } .TOCGrid { display:block; } .griditem.smallerItem { width:100%; } #livecode { border-style:none; padding-left:0px; margin-top:0px; width:100%; height: calc(100vh - 85px); margin:0px; } .grid-1 { display: block; } .downloadgrid { display: block; text-align:center; } .downloadgriditem { margin-top:8px; margin-bottom:8px; display: block; } .downloadbanner { padding-left: 16px; padding-right:16px; } .griditem { margin:0px; margin-bottom:32px; display: block; width:100%; padding:0; padding-top:64px; padding-bottom:64px; } .spotlightButtonContainer { margin-top:32px; margin-bottom:32px; text-align:center; } .spotlightButton span { padding-left:25%; padding-right:25%; } #spotlogo { display:none; } .spotlight { padding-top:48px; } .webspotlight { padding-top:32px; padding-bottom:32px; } nav ul li { width:100%; text-align:center; cursor:pointer !important; padding-left:0px; padding-top:16px; padding-bottom:16px; padding-right:0px; } nav ul a { width:100%; text-align:center; margin:0; } .dropdown div ul { position:relative; } .dropdown ul { margin-top:16px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0); border-width:4px; border-left-style:none; border-right-style:none; border-top-style:none; border-color:#4cb96f; } .dropdown:hover ul { display:none; } #mainlogo { text-align:center; width:100%; } .dropdown div ul { padding-left:0px; padding-right:0px; background-color:#121517; } nav ul li.selected { background-color: inherit; color:inherit; } aside#sidebar { position:relative; width:100%; padding-bottom:128px; } main.sidebarstyle { margin-left: 0px; } .openedmenu { padding-bottom:0px; background-color:rgba(16,19,21,0.69) !important; color: #b8c8d4 !important; } .openedmenu ul { display:block !important; } .dropdownbutton { background-color:#193c35; } .dropdownbutton:hover { background-color:#395c55; } .dropdown ul a li { color: #9cf9ba; background:#193c35; } .openedmenu:hover { padding-bottom:0px; } .imageGrid { display:block; } .imageGridCell { width:auto; } #drawerButton { display:block; cursor:pointer; width:100%; padding-top:16px; border-style:none; color:black; font-family:'Montserrat'; background-color:#4cb96f; padding-bottom:16px; background-size:contain; background-position:center; background-repeat:no-repeat; background-image:url('../images/hamburger.png'); } #drawerButton:hover { background-color: #5dd283; } #drawerButton:focus { outline:none; } .canCollapse { display:none; } .markupButtonGrid { justify-content:center; } .markupButton { flex-grow:1; } } .spotlight { padding-left:20%; padding-right:20%; padding-bottom:32px; background-image:url('../backgrounds/bg.jpg'); background-position:center top; background-size:cover; background-attachment: fixed; } .dropdown { cursor:default; color: #768692; } .noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } /*Medium*/ @media screen and (max-width: 1080px) { .cardContainer.infoCardContainer { display: block; width: 100% ; box-sizing: border-box; } .card.infoCard { width:100%; margin-left:0px; margin-right:0px; box-sizing: border-box; } } /*Extra Extra Small*/ @media screen and (max-width: 545px) { .infoImg { display:none; } .infoContent { display:block; } .infoText { width:100%; padding-right: 8px; box-sizing: border-box; } } /*Extra Small*/ @media screen and (max-width: 630px) { .cardContainer { display:block; } .card { margin:0px; width:calc(100% - 32px); margin-top:16px; margin-bottom:16px; } .pressCard { display:block; } } /*Extra Small*/ @media screen and (max-width: 750px) { .imageLeft { width:100%; height:auto; } }