body {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.pageModules-root {
display: flex;
flex-direction: column;
height: 100vh;
}
/* -------------------------------------------------------------------- */
/* HEADER */
header {
width: 300px;
box-sizing: border-box;
position: fixed !important;
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.04);
border-right: 1px solid rgba(0, 0, 0, 0.1);
}
/* -------------------------------------------- */
/* LOGO */
header .logo {
flex: 0 1 auto;
margin-bottom: 40px;
}
/* -------------------------------------------- */
/* NAV */
header .navigation {
box-sizing: border-box;
overflow: hidden;
overflow-y: auto;
flex: 1 1 auto;
}
header .nav ul {
display: block;
}
header .nav a {
text-overflow: ellipsis;
overflow: hidden;
position: relative;
}
header .nav a:before {
width: 4px;
height: 4px;
background: #9b2621;
position: absolute;
top: 50%;
left: 30px;
transform: translateY(-50%);
content: '';
}
/* -------------------------------------------- */
/* NAV - SCROLLBAR (WEBKIT BROWSER ONLY) */
header nav::-webkit-scrollbar {
width: 6px;
background-color: rgba(255, 255, 255, 0.06);
border-radius: 10px;
}
header nav::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}
header nav::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.6);
}
/* -------------------------------------------------------------------- */
/* USER NAV */
.user-nav {
margin-left: 300px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
position: static;
}
/* -------------------------------------------------------------------- */
/* MAIN */
main {
flex: 1 0 auto;
display: flex;
flex-direction: column;
margin-left: 300px;
}
/* -------------------------------------------------------------------- */
/* SECTIONS */
#signup main section,
#receipt main section,
#approval main section,
#evaluation main section,
#extranet main section,
[id^="extranet-"] main section {
flex: 1 0 auto;
}
/* -------------------------------------------------------------------- */
/* FOOTER */
footer {
position: relative;
flex-shrink: 0;
margin-left: 300px;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 10%, rgba(255,255,255,0.1) 60%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 10%,rgba(255,255,255,0.1) 60%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,0) 10%,rgba(255,255,255,0.1) 60%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#33ffffff',GradientType=0 ); /* IE6-9 */
}
footer:before {
content: ' ';
display: block;
position: absolute;
z-index: 0;
top: 1px;
right: 0;
left: 60px;
bottom: 0;
width: 430px;
opacity: .1;
background-size: 100%;
background-repeat: no-repeat;
background-position: left bottom -190px;
background-image: url(https://themes.cmcdn.dk/DF37E24C-5485-EA11-8436-00155D0B0940/ku-segl@2x.png);
}
footer a {
color: #ffffff;
}
footer a:hover {
color: #ffffff;
}
/* -------------------------------------------------------------------- */
/* SIGN UP */
.cart {
box-shadow: 0 4px 8px -3px rgba(0, 0, 0, 0.2);
}
.cart .eventinfo {
background: #a80a2e;
color: #ffffff;
position: relative;
}
.cart .eventinfo:before {
content: ' ';
display: block;
position: absolute;
z-index: 1;
top: 0;
right: 0px;
bottom: 0px;
width: 100px;
opacity: .25;
background-size: 100%;
background-repeat: no-repeat;
background-position: right -15px bottom -45px;
background-image: url(https://themes.cmcdn.dk/DF37E24C-5485-EA11-8436-00155D0B0940/ku-segl@2x.png);
}
.cart .eventinfo h3 {
color: #ffffff !important;
}
/* -------------------------------------------------------------------- */
/* PROGRESS NAV */
.progressnav {
position: relative;
text-align: center;
margin-bottom: 20px;
}
.progressnav ol {
width: 100%;
height: 8px;
border-radius: 2px;
margin: 0;
padding: 0;
list-style: none;
position: absolute;
z-index: 2;
display: flex;
align-items: stretch;
vertical-align: middle;
font-size: 0;
line-height: 0;
}
.progressnav ol li:last-child {
border-radius: 0 2px 2px 0;
}
.progressnav ol li:hover .label {
top: 15px;
}
.progressnav a {
height: 8px;
display: block;
cursor: default;
}
.progressnav ol li:first-child .step {
background: none;
}
.progressnav ol li:hover .label {
opacity: 1.0;
}
.progressnav-progressbar {
border: 10px;
border-radius: 10px;
}
.progressnav-progress {
height: 8px;
background: #a80a2e;
transition: width 0.2s ease-in-out;
}
/* -------------------------------------------------------------------- */
/* PROGRESS NAV - COMPLETED */
.progressnav ol li.completed:hover {
background: rgba(0, 0, 0, 0.05);
cursor: pointer;
}
.progressnav ol li.completed .label {
cursor: pointer;
color: rgba(0, 0, 0, 0.6);
}
/* -------------------------------------------------------------------- */
/* PROGRESS NAV - ACTIVE */
.progressnav ol li.active a {
cursor: default;
}
.progressnav ol li.active .step {
width: 14px;
height: 14px;
background: #a80a2e;
position: absolute;
left: -7px;
top: -7px;
border-radius: 50%;
border: 4px solid #fff;
}
.progressnav ol li.active .label {
color: #a80a2e;
font-weight: bold;
font-size: 14px;
top: 15px;
}
@media only screen and (max-width: 1440px) {
/* -------------------------------------------------------------------- */
/* HEADER */
header {
width: 220px;
}
/* -------------------------------------------------------------------- */
/* LOGO */
.logo {
margin-bottom: 20px;
}
.logo img {
width: 160px;
}
header .logo + .nav {
margin-top: 20px;
}
header .nav + .logo {
margin-bottom: 20px;
}
/* -------------------------------------------------------------------- */
/* NAV */
header .nav a:before {
left: 20px;
}
/* -------------------------------------------------------------------- */
/* USER NAV */
.user-nav {
margin-left: 220px;
}
/* -------------------------------------------------------------------- */
/* MAIN */
main {
margin-left: 220px;
}
/* -------------------------------------------------------------------- */
/* FOOTER */
footer {
margin-left: 220px;
}
}
@media only screen and (max-width: 1024px) {
/* -------------------------------------------------------------------- */
/* HEADER */
header {
width: 180px;
}
.logo {
margin-bottom: 10px;
}
header .logo + .nav {
margin-top: 10px;
}
header .nav + .logo {
margin-bottom: 10px;
}
/* -------------------------------------------------------------------- */
/* NAV */
header .nav a:before {
left: 0px;
}
/* -------------------------------------------------------------------- */
/* USER NAV */
.user-nav {
margin-left: 180px;
}
/* -------------------------------------------------------------------- */
/* MAIN */
main {
margin-left: 180px;
}
/* -------------------------------------------------------------------- */
/* FOOTER */
footer {
margin-left: 180px;
}
}
@media only screen and (max-width: 768px) {
/* -------------------------------------------------------------------- */
/* HEADER */
header {
width: auto;
position: static!important;
}
/* -------------------------------------------------------------------- */
/* NAV */
header .nav a:before {
left: 20px;
}
/* -------------------------------------------------------------------- */
/* USER NAV */
.user-nav {
margin-left: 0;
}
/* -------------------------------------------------------------------- */
/* MAIN */
main {
margin-left: 0;
}
/* -------------------------------------------------------------------- */
/* FOOTER */
footer {
margin-left: 0;
}
}
@media only screen and (max-width: 480px) {
/* -------------------------------------------------------------------- */
/* FOOTER */
footer:before {
left: -80px;
width: 400px;
}
}