/*Update 1.2: Sub-session Uhrzeit Klasse, padding von Logos bei parallelen Sessions hinzugefügt*/
.programm{
    padding: 25px;
    /*max-width: auto; kein gültiger Wert. */
    margin: 0 auto;
    }

/* Gesamte Liste - ungeordneter Listeneintrag <ul>*/
ul {
    padding: 25px;
    max-width: auto;
    margin: 0 auto;
    list-style-type: none;
    position: relative;
    padding: 15px 0px 25px 10px;
    margin: 0;
}

ul:after {
    content: "";
    position: absolute;
    top: 0;
    left: -4.5px;
    bottom: 0;
    border-left: 1px solid #ccc;
    height: 100%;
}

/*Einzelne Listeneinträge <li> - Jede Session ist ein einzelner Listeneintrag*/
li:before {
    content: "";
    display: block;
    width: 11px;
    height: 11px;
    border: 1px solid #4BA763;
    border-radius: 50%;
    position: absolute;
    z-index: 2;
    left: -20px;
    outline: 2px solid white;
    top: 20px;
    background-color: #4BA763;
}

li {
    padding: 15px 0 25px 10px !important;
    position: relative;
    display: block;
	margin-bottom:15px;
}

/*Alternierende Hintergrundfarbe -> Hintergrundfarbe in Excel wird bevorzugt*/
li:nth-child(odd) {
    background-color:#f4f4f4;
}

li:after{
    content: "";
    display: table;
    clear: both;
}

/* Die kommenden 3 Selektoren machen das Sessionformat in kleinen All-Caps, belässt die Uhrzeiten bei normalem Font-Weight und macht die Titel fett 
span {
    font-variant-caps: all-small-caps;
}*/

span.session-time {
    font-variant-caps: normal !important;
}

section {
    font-weight: bold;
}

.session{
    display: table;
    margin-bottom: 18px;}
  
/*Konferenzfokus Icon*/
.session>img{
    vertical-align:middle;
    padding: 0 30px;
    width:40px;}

/*Linie for Session*/
.session-time:before {
        content: "";
        position: absolute;
        left: -20px;
        border-bottom: 1px solid #ccc;
        width: 20px;
        top: 9px;
        z-index: -1;
}

/*Klasse für Uhrzeit*/
.session-time {
	background: #4BA763 !important;
    color: rgb(255, 255, 255);
    padding: 4px 10px;
    letter-spacing: 1px;
    margin-bottom: 18px;
    font-weight: 500;
    position: relative;
    top: 3.5px;
    z-index: 0;
    max-width: 400px;
    line-height: 1.2;
    }

/*Der table-Tag umschließt den Titel und die beteiligten Speaker-Infos aus Foto, Text und Logo*/
table{
    width:100%;
    clear:both;
}
/*Die einzelnen Inhaltselemente zum Speaker (Foto, Text und Logo) werden als Zellen <td> innerhalb von Reihen <tr> in der Tabelle <table> abgelegt. */
td{
	vertical-align:center;
  	padding:5px;
}
/* Die Grafik, die am Anfang der Zeile stehen soll - das Foto des Speakers oder ein Symbol. Bei der mobilen Ansicht werden Speaker-Foto und dessen Logo beide in dieser Klasse zusammengefasst 
und nebeneinander angeführt  */
td.speaker-foto{
    min-width:75px;
  	width:75px;
}

/* Die Zelle für das Logo... */
td.speaker-logo{
	width:112px;
}
/* ...und das eigentliche Logo.  */
td.speaker-logo>img{
    height:75px;
  	width:auto;
}

/* Subsessions und Subsession Uhrzeit */
.sub-session{
    padding: 5px 0 10px 0;
}
div.sub-session { 
    padding:5px 0 15px 0;
}
.sub-session-time:before {
    content: "";
    position: absolute;
 }
.sub-session-time{
    padding: 3px 9px;
     letter-spacing: 1px;
     margin-bottom: 18px;
     position: relative;
     top: 3.5px;
     left:1px;
     z-index: 0;
     max-width: 400px;
     line-height: 1.2;
     outline: 2px solid #4BA763;  
 }

/*Parallele Sessions*/
th{
    vertical-align:top;
    padding:0px 10px 25px 5px;
    line-height:1.2;
}
.parallel-desktop td.speaker-text {
    width:50%;
}
/*Abstand rechts von Logos bei parallelen Sessions*/
img.parallel-logo{
    padding: 0 10px 0 0;
}

/*Rechte Spalte bei parallelen Sessions*/
.spalte2{
  padding: 5px 5px 5px 15px ;
}


/* Nicht sicher, ob wir diese Regeln noch brauchen, oder ob die Klassen nirgendwo mehr angewendet werden. */
p>img {
     width:50px; 
     float:left;padding:0 10px 0 0;}

  
img.logo_below{
     width:100px!important; 
  padding:10px 20px 0 0;}




/*Update 1.2: Sub-session Klasse für Uhrzeit*/

/*Mobile, muss teils auch in CSS Bereich von Squarespace*/
@media only screen and (max-width: 676px){
	.title_div{
 		float:none;
 		width:100%;
    }
	.logo{
		float:none!important;
		width:30%;
		padding: 10px 0 0 0;
	}
    li {
		padding: 15px 0 15px 10px!important; 
    }
    h3{
		font-size:18px!important;
		letter-spacing:0px;
	}
    table tr, table tr td.speaker-logo {
		display: block !important;
		clear: both;
	}
    table tr, table tr td {
		clear: both;
	}
    
	td{
		vertical-align:top;
	}
	.parallel-desktop{
        display:none!important;
    }
	.parallel-mobile{
        display:table!important;
    }
}
  
@media only screen and (min-width: 677px){
  .title_div{
	float:left;
 	width:75%;
    }
	.logo{
	float:right;
	padding:0 10px 0px 0!important;
	}
	.logo>img{
        width:133px;
    }
	.parallel-desktop{
        display:table!important;
    }
	.parallel-mobile{
        display:none!important;
    }
}