/*
 * Smallgroup Stylesheet
 * smallgroup.mghome.ch
 * 20.12.2015, Matthias Glatt
 */ 


/* Allgemeines */
body {
    font: normal 120% Arial,Helvetica,Verdana,sans-serif;
}
h1 {
    font-weight: bold;
    font-size: 140%;
    color: #5CAD5C;
}


#loginform input {
    max-width: 300px;
    margin: 0 auto;
}


/* Inhalts-Bereich */
/* Links oben auf der Seite */
ul.toplinks {
    margin: 0.5em 0 1em;
    padding: 0;
}
ul.toplinks li {
    display: inline;
}
ul.toplinks li span {
    margin: 0 0.4em;
}


.togglepast {
    cursor: pointer;
}
.togglepast a,
.togglepast a:link,
.togglepast a:visited,
.toplinks li a,
.toplinks li a:link,
.toplinks li a:visited {
    color: #0066DD;
    font-size: 95%;
    text-decoration: none;
}
.togglepast a:hover,
.toplinks li a:hover {
    text-decoration: underline;
}
.col-md-12 {
	padding: 0;
}



/* Datenliste (Tabelle) */
.tableheader div,
.tabledaterow div,
div.datecolumn {
	border: 1px solid #FFF;
	padding: 0.3em;   
} 
.tableheader div {
    background-color: #3385E4;
    color: #fff;
}
.tabledaterow div {    
    background-color: #DAF3F3;
}
div.datecolumn {   
    position: relative; 
    background-color: #B2D1F9;
}


/* Datum bei kleinem Bildschirm */
@media screen and (max-width: 575px) {
    div.datecolumn {
        min-height: 130px;
    }
    div.pastdate,
    div.upcomingdate { 
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }
    /* Datum senkrecht darstellen*/
    .sgdate {
        display: inline-block;
        position: absolute;        
        top: 50%;
        left: 50%;            
        transform:  translateX(-30%) translateY(-30%) rotate(-90deg);
    }
}

/* Daten, Zeit */
div.upcomingdate .sgdate {
	color: #000;
	text-decoration: none;
    font-weight: bold;    
}

div.upcomingdate div.datecolumn, 
div.upcomingdate div.thisisthecurrentuser {
    cursor: pointer;
}

/* Status der Benutzer, Icons usw. */
div.memberstate {
    position: relative;
    min-height: 64px;
    overflow-x: hidden;
}
span.memberstate-name {
    display:block; 
    position:absolute; 
    left:0.3em; 
    top:0.3em;
}

.tabledaterow div.state-host {
    background-color: #B2D1F9;
}
.tabledaterow div.state-attends {
    background-color: #D1F3D1;
}
.tabledaterow div.state-absent,
.tabledaterow div.state-canceled {
    background-color: #FFCCCA;
}
.tabledaterow div.state-undefined {
    background-color: #DAF3F3;
}
.sgdate, 
.icon-presence {
    display: block;
    height: 64px;
    width: 100%;
}
div.state-host .icon-presence {
    background: #B2D1F9 url('images/host.png') no-repeat center top;
}
div.state-attends .icon-presence {
    background: #D1F3D1 url('images/attends.png') no-repeat center top;
}
div.state-absent .icon-presence {
    background: #FFCCCA url('images/absent.png') no-repeat center top;
}
div.state-undefined .icon-presence {
    background: #DAF3F3 url('images/undefined.png') no-repeat center top;
}

/* Vergangene Termine  */
.togglepast div {
	text-align: center;
}
.pastdate-hide {
	display: none;
}
.togglepast div,
div.pastdate [class*="state-"],
div.pastdate div .icon-presence {
    background-color: #eaeaea;
    color: #464646;	    
}


/* Benutzer-Namen und Mail im Tabellen-Header */
.currentmember {
    font-weight: bold;
}
a.membermail,
a.membermail:link,
a.membermail:visited {
    color: #e8e8ff;
    text-decoration: none;
}
a.membermail:hover {
    color: #fff;
    text-decoration: underline;
}


/* Tool-Links */
.toolicon {
    display: inline-block;
    height: 16px;
    width: 16px;
}
.tool-subscribe {
    background: url('images/attends_16.png') no-repeat 0 0;
}
.tool-unsubscribe {
    background: url('images/absent_16.png') no-repeat 0 0;
}
.tool-host {
    background: url('images/host_16.png') no-repeat 0 0;
}
.tool-nothost {
    background: url('images/nothost_16.png') no-repeat 0 0;
}
.tool-comment {
    background: url('images/comment.png') no-repeat 0 0;
}
.tool-canceldate {
    background: url('images/canceldate.png') no-repeat 0 0;
}
.tool-uncanceldate {
    background: url('images/activatedate.png') no-repeat 0 0;
}

/* Tools ausblenden, die nicht gebraucht werden */
div.state-attends .radio-subscribe,
div.state-attends .radio-nothost,
div.state-attends .radio-uncanceldate {
    display: none;
}
div.state-absent .radio-unsubscribe,
div.state-absent .radio-nothost,
div.state-absent .radio-uncanceldate {
    display: none;
}
div.state-host .radio-host,
div.state-host .radio-subscribe,
div.state-host .radio-uncanceldate {
    display: none;
}
div.state-undefined .radio-nothost,
div.state-undefined .radio-comment,
div.state-undefined .radio-uncanceldate {
    display: none;
}
div.state-canceled .radio-subscribe,
div.state-canceled .radio-unsubscribe,
div.state-canceled .radio-host,
div.state-canceled .radio-nothost,
div.state-canceled .radio-comment,
div.state-canceled .radio-canceldate {
    display: none;
}
div.state-uncanceled .radio-subscribe,
div.state-uncanceled .radio-unsubscribe,
div.state-uncanceled .radio-host,
div.state-uncanceled .radio-nothost,
div.state-uncanceled .radio-comment,
div.state-uncanceled .radio-uncanceldate {
    display: none;
}

/* Kommentare */
p.membercomment {
    font-size: 90%;
}

/* ausgeblendete Felder */
.dateid,
.memberid {
    display: none;
}


/* Footer */
.footer {
    color: #848484;
    background-color: #F0F0F0;
    margin: 1em 0 0;
    padding: 1em 0.5em;
    font-size: 80%;
}