/* Author: Jonas Remmert
 * Written for: ScIP - GEFR
 */

.page_news 
{
	width: 100%;
	height: calc(100% - var(--heading_top_height));
	position: fixed;
	background-color: #ebebeb;
	top: var(--heading_top_height);
	display: none;
	left: 100%;
	z-index: 2;
	color: #333;
	overflow: auto;
	transition-duration: var(--pageFadeInTime);
    box-shadow: var(--boxshadow_forFadedPages);
}

/* Überschrift: */
.page_news .heading 
{
	margin: 25px 10px 10px 10px;
	text-align: center;
}
/* -ENDE- Überschrift */

/* Nachrichtenübersicht: */
.page_news .messagesOverview 
{
	margin: 15px 10px 10px 10px;
	user-select: text;
}

/* Container für: Keine Nachrichten vorhanden: */
.page_news .noMessagesInfo
{
    display: none;
    width: 100%;
    text-align: center;
    margin-top: 70px;
}
    .page_news .noMessagesInfo div
    {
        width: 85%;
        padding: 50px;
        font-style: italic;
        border: 2px dashed #4bad33;
        display: block;
        margin: auto;
    }
        .page_news .noMessagesInfo div p
        {
            line-height: 165%;
        }
        .page_news .noMessagesInfo div img
        {
            width: 60px;
            margin-top: 25px;
        }

/* -ENDE- Nachrichtenübersicht */


/* Nachrichten: */

.page_news .messagesOverview .message 
{
	font-size: 95%;
	border: 1px solid darkgrey;
	border-radius: 10px;
	padding: 1.5em 10px 10px 10px;
	box-shadow: 0px 0px 10px 0px lightslategrey;
	margin-bottom: 20px;
	cursor: pointer;
	max-height: 8em;
	/* Zeigt dann im Endeffekt 3 Zeilen des Nachrichteninhaltes an. */
	overflow: hidden;
	background-color: bisque;
}

/* User Select für Text aktivieren */
.page_news .messagesOverview .message span
{
	user-select: text;
	cursor: auto;
}

/* Titel: */
.page_news .messagesOverview .message h4 
{
	margin-bottom: 5px;
	position: relative;
}

.page_news .messagesOverview .message h4 .title 
{
	max-width: 65%;
	width: 100%;
	max-height: 2.5em;
	height: 100%;
	display: block;
	overflow: auto;
	position: relative;
	top: -1em;
}

.page_news .messagesOverview .message h4 .timestamp::before, .page_news .viewMessage .headline .timestamp::before
{
	background-image: url(../images/general/timestamp32px.png);
	background-size: 1.2em;
	background-repeat: no-repeat;
	width: 32px;
	height: 32px;
	content: "";
	position: absolute;
	left: -1.5em;	
}

.page_news .messagesOverview .message h4 .timestamp 
{
	font-size: 70%;
	color: darkslategrey;
	white-space: nowrap;
	position: absolute;
	top: 0.3em;
	right: 0;
}

.page_news .messagesOverview .message h4 .author::before, .page_news .viewMessage .headline .author::before
{
	background-image: url(../images/general/person32px.png);
	background-size: 1.1em;
	background-repeat: no-repeat;
	width: 32px;
	height: 32px;
	content: "";
	position: absolute;
	left: -1.5em;
}

.page_news .messagesOverview .message h4 .author
{
	position: absolute;
	right: 0;
	top: -1.3em;
	font-weight: normal;
	font-size: 80%;
}
/* -ENDE- Titel */

/* +++ [Benachrichtigungen einsehen]: +++ */
.page_news .viewMessage 
{
	position: fixed;
	top: var(--heading_top_height);
	display: none;
	width: 80%;
	height: calc(100% - var(--heading_top_height));
	background-color: #ebebeb;
	overflow: auto;
	transition-duration: var(--pageFadeInTime);
	box-shadow: 0 0 12px 4px dimgrey
}

/* --> Überschrift */
.page_news .viewMessage .headline .title
{
	margin: 15px 40px 5px 40px;
	text-align: center;
}

.page_news .viewMessage .headline .author 
{
	top: auto;
}

.page_news .viewMessage .headline .timestamp
{
	top: auto;
}

/* --> Inhalt */
.page_news .viewMessage .content 
{
	margin: 15px 10px 10px 10px;
}
/* --- -[ENDE]- Benachrichtigungen einsehen --- */

/* -ENDE- Nachrichten */