/******************************************************************************************/ /* PROGRAM */ /*****************************************************************************************/ /*Tabs symposium program*/ @media screen and (max-width: 500px) { .tabs label { width: 100%!important; } } .tabs { max-width: 100%; margin-top: 20px; } .tabs input { display: none; } .tabs label { display: inline-block; padding: 6px 0 6px 0; width: 16%; /* =100/tabs number */ min-height: 5ex; vertical-align: text-top; border: 1px solid #2E5090; text-align: center; } .tabs label:hover { cursor: pointer; } .tabs input:checked + label { background-color: #2E5090; border: 1px solid #2E5090; color: white; } .tabs #tab1:checked ~ .program-content #program-content1, .tabs #tab2:checked ~ .program-content #program-content2, .tabs #tab3:checked ~ .program-content #program-content3, .tabs #tab4:checked ~ .program-content #program-content4, .tabs #tab5:checked ~ .program-content #program-content5, .tabs #tab6:checked ~ .program-content #program-content6{ display: block; } .tabs .program-content > div { display: none; padding-top: 20px; text-align: left; overflow: auto; } /*Grid for each day in program*/ /************************* * GRID SCHEDULE LAYOUT *************************/ @media screen and (min-width:700px) { .schedule { display: grid; grid-gap: 1em; grid-template-rows: [tracks] auto /* [time-0800] auto [time-0810] auto [time-0820] auto */ [time-0830] auto [time-0840] auto [time-0850] auto [time-0900] auto [time-0910] auto [time-0920] auto [time-0930] auto [time-0940] auto [time-0950] auto [time-1000] auto [time-1010] auto [time-1020] auto [time-1030] auto [time-1040] auto [time-1050] auto [time-1100] auto [time-1110] auto [time-1120] auto [time-1130] auto [time-1140] auto [time-1150] auto [time-1200] auto [time-1210] auto [time-1220] auto [time-1230] auto [time-1240] auto [time-1250] auto [time-1300] auto [time-1310] auto [time-1320] auto [time-1330] auto [time-1340] auto [time-1350] auto [time-1400] auto [time-1410] auto [time-1420] auto [time-1430] auto [time-1440] auto [time-1450] auto [time-1500] auto [time-1510] auto [time-1520] auto [time-1530] auto [time-1540] auto [time-1550] auto [time-1600] auto [time-1610] auto [time-1620] auto [time-1630] auto [time-1640] auto [time-1650] auto [time-1700] auto [time-1710] auto [time-1720] auto [time-1730] auto [time-1740] auto [time-1750] auto [time-1800] auto [time-1810] auto [time-1820] auto [time-1830] auto [time-1840] auto [time-1850] auto [time-1900] auto; /* [time-1910] auto [time-1920] auto [time-1930] auto; [time-1940] auto [time-1950] auto [time-2000] auto [time-2010] auto [time-2020] auto [time-2030] auto [time-2040] auto [time-2050] auto [time-2100] auto [time-2110] auto [time-2120] auto [time-2130] auto [time-2140] auto [time-2150] auto; */ grid-template-columns: [times] 3em [track-1-start] 1fr [track-1-end track-2-start] 1fr [track-2-end track-3-start] 1fr /*If all days have two rooms remove and instead keep: [track-2]; no track-3-end */ [track-3-end]; } .schedule2track { /* Use this style for the days with only 2 tracks */ display: grid; grid-gap: 1em; grid-template-rows: [tracks] auto [time-0810] auto [time-0820] auto [time-0830] auto [time-0840] auto [time-0850] auto [time-0900] auto [time-0910] auto [time-0920] auto [time-0930] auto [time-0940] auto [time-0950] auto [time-1000] auto [time-1010] auto [time-1020] auto [time-1030] auto [time-1040] auto [time-1050] auto [time-1100] auto [time-1110] auto [time-1120] auto [time-1130] auto [time-1140] auto [time-1150] auto [time-1200] auto [time-1210] auto [time-1220] auto [time-1230] auto [time-1240] auto [time-1250] auto [time-1300] auto [time-1310] auto [time-1320] auto [time-1330] auto [time-1340] auto [time-1350] auto [time-1400] auto [time-1410] auto [time-1420] auto [time-1430] auto [time-1440] auto [time-1450] auto [time-1500] auto [time-1510] auto [time-1520] auto [time-1530] auto [time-1540] auto [time-1550] auto [time-1600] auto [time-1610] auto [time-1620] auto [time-1630] auto [time-1640] auto [time-1650] auto [time-1700] auto [time-1710] auto [time-1720] auto [time-1730] auto [time-1740] auto [time-1750] auto [time-1800] auto [time-1810] auto [time-1820] auto [time-1830] auto [time-1840] auto [time-1850] auto [time-1900] auto [time-1910] auto [time-1920] auto [time-1930] auto; /* [time-1940] auto [time-1950] auto [time-2000] auto [time-2010] auto [time-2020] auto [time-2030] auto [time-2040] auto [time-2050] auto [time-2100] auto [time-2110] auto [time-2120] auto [time-2130] auto [time-2140] auto [time-2150] auto; */ grid-template-columns: [times] 3em [track-1-start] 1fr [track-1-end track-2-start] 1fr [track-2-end]; } } .track-room{ visibility: hidden; } @media screen and (max-width:700px) { .track-room{ visibility: visible; color: white; } } .time-slot { grid-column: times; } .track-slot { display: none; /* hidden on small screens and browsers without grid support */ } @supports( display:grid ) { @media screen and (min-width:700px) { .track-slot { display: block; padding: 10px 5px 5px; position: sticky; top: 0; /*z-index: 1000;*/ background-color: rgba(255,255,255,.9); } } } /* Small-screen */ .session { margin-bottom: 1em; } @supports( display:grid ) { @media screen and (min-width: 700px) { .session { margin: 0; } } } /************************* * VISUAL STYLES FOR PROGRAM *************************/ .session { padding: .5em; border-radius: 2px; font-size: 1em; } .track-room .session-title, .session-time, .authors, .location, .paper-title { display: block; } .paper-title{ margin-top: 0.4em; font-weight: 500; } .paper-title a{ color: white; font-size: 0.95em; } .authors{ font-style: italic; font-size: 0.8em; } .location{ font-size: 0.8em; } .session-title, .time-slot { margin: 0; font-size: 1em; } .session-title a { color: #000000; /*text-decoration-style: dotted;*/ } .session-title a:hover { font-style: italic; } /*.session-title a:focus { outline: 2px dotted rgba(255,255,255,.8); }*/ .track-slot, .time-slot { font-weight: bold; font-size:1em; } .track-1 { background-color: #02632c; color: #fff; } .track-2 { background-color: #2031b0; color: #fff; } .track-3{ background-color: #ff8000; color: #fff; } .track-both{ background-color: #a31a42; color: #fff; } .track-noncontent{ background-color: #fcf4c7; color: #000; } .track-all { display: flex; justify-content: center; align-items: center; background: #fcf4c7; color: #000; box-shadow: none; } .text { max-width: 750px; font-size: 18px; margin: 0 auto 50px; } .meta { color: #555; font-style: italic; } .meta a { color: #555; }