/**
 *
 * Change layout to horizontal split
 *
 */

@media screen and ( min-width: 968px ) {

	#new-div-1 {
		width: 100%;
		overflow: auto;
	}
	#new-div-1 #layout-list {
		position: relative;
		display: block;
		max-width: 100%;
		width: 100% !important;
		/*
		height: 360px;
		max-height: 360px;
		*/
		height: 50%;
			/* max-height: 50%; */ /* temp removed to test resizing */
		flex: 0;
		flex-direction: none;
		overflow-y: scroll;
		overflow-x: hidden;
	}
	#new-div-1 #messagelist-header {
		position: sticky;
		top: 0;
		background: #e6efee;
		z-index: 2;
		text-align: center;
		padding: 0 8px;
	}
	#new-div-1 #messagelist-header ul {
		display: inline-block;
	}
	#new-div-1 #messagelist-header li {
		/* to help line up with the refresh button */
		height: 52px;
		/* */
	}
	#new-div-1 #messagelist-header a.toolbar-button.refresh {
		display: inline-block;
		/* to line up with the ul li elements */
		height: 51px;
		overflow: hidden;
		color: #555;
		/* */
	}
	#new-div-1 .pagenav	{
		position: sticky;
		bottom: 0;
		background: #fff;
	}
	#new-div-1 #layout-content {
		/* display: block; */
		display: flex;
		height: 50%;
		height: 48%;
		width:100%;
	}
	#new-div-1 .header {
		background: #e6efee;
		border-top: 2px solid #acc;
	}
	#new-div-1 #layout-content .iframe-wrapper {
		width:100%;
		/* 82% isn't quite accurate but it's near enough for now */
		/* might put some javascript in to calculate things in due course */
		height: 91%;
	}


	#layout-sidebar {
		min-width: 180px;
	}

	/* full page message view */
	#layout-content.selected {
		height: 100% !important;
	}


	/**
	 * More sizing on the message list rows
	 * Put everything on one line
	 */

	.listing td.selection {
		height: 24px;
		line-height:24px;
		/* display: table-cell !important; */
		/* there is a toggle to display this column of tickboxes */
	}
	.messagelist td.subject {
		display: flex;
	}
	.messagelist td.subject span.subject {
		width: 70%;
		order: 2;
	}
	.messagelist td.subject span {
		order: 2;
		height: 24px;
		font-size: 12px;
		XXwidth: 60px;
	}
	.messagelist td.subject span.fromto {
		order: 1;
		height: 24px;
		width: 20%;
	}
	.messagelist td.subject span.date {
		order: 3;
		width: 12%;
	}
	.messagelist td.flags {
		line-height: 24px;
		width: 3.5em;
	}
	.messagelist td.flags>span {
		display: inline-block;
		float: left;
		height: 24px;
	}
	.messagelist td.flags>span.flag {

	}

	.listing tbody td, .listing li {
		line-height: 25px;
		font-size: 12px;
		padding: 0; /* stops line expanding height on hover */
	}
	.folderlist li a:before {
		/* image :before a tag in folderlist */
		font-size: 12px;
	}
	.messagelist td.subject span.msgicon.status.replied:before {
		/* reply flag etc. */
		font-size: 0.7rem;
	}
	tr.message:hover {
	}
	.messagelist td.subject span {
		line-height: 23px;
	}

}

/* login screen background colour */
.task-login #layout-content,
.task-login {
	background: #444;
}
.task-login #logo {
	display: none;
}


/**
 * remove about with icons to save space
 */
@media screen and ( min-width: 968px ) {

	#layout>div>.header {
		line-height: 35px !important;
		height: 35px !important;
		min-height: 35px !important;
		padding: 0 0px;
	}
	.header-title {
		margin-left: 1px !important;
	}

	.header .menu.toolbar a:before {
		display: none !important;
		display: inline !important;
		margin-right: 6px !important;
		font-size: 12px;
	}
	.menu.toolbar li {
		height: 24px !important;
	}
	.menu.toolbar a {
			padding: 4px 6px;
	}
	a.button.icon.refresh:before, button.btn.refresh:before {
		content: unset;
	}
	#new-div-1 #messagelist-header a.toolbar-button.refresh {
		height: 28px !important;
	}
	#layout-menu {
		width: 40px;
	}
	#layout-menu .popover-header img {
		max-width: 32px;
		padding: 4px;
	}
	#layout-menu #taskmenu span.inner {
		display: none;
	}
	#taskmenu a {
		width: 40px;
	}
	
	/* Header of Message */
	#message-header {
		margin-bottom: 4px;
		border-bottom: 1px solid #888;
	}
	#message-header .short-header div.header-content {
		min-height: 2rem;
	}
	#message-header .short-header img.contactphoto {
		width: 1.6rem;
		height: 1.6rem;
	}
	.header-subject {
		float: left;
		margin-right: 14px;
	}
	.frame-content {
		padding: 4px 12px;
	}
	.frame-content h2,
	#message-header .subject {
		font-weight: normal;
		font-size: 1.3rem;
		float: left;
		margin-right: 14px;
	}
	#message-header .short-header div.header-subject {
		margin-right: 24px;
		line-height: 1.6;
	}

}

/* move menu to the top */

@media screen and ( min-width: 968px ) {

	#new-top-div {
		width: 100%;
		height: 50px;
	}
	.popover-header {
		float: left;
		padding: 0.3rem 0.75rem;
		margin-right: 14px;
	}
	#taskmenu {
		float: left;
	}
	#taskmenu a {
		display: inline-block;
		float: left;
		color: #000;
		background: #fff;
		margin: 0 4px;
		height: 50px;
		width: 60px;
	}
	.menu.toolbar a:before {
		height: 1.5rem !important;
		line-height: 24px;
	}
	#taskmenu .special-buttons {
		position: relative;
	}
	.file-upload.droptarget:after {
		margin: 1rem auto 0 auto;
	}

}


/* image bg test */

/************************************************
*
*
@media screen and ( min-width: 968px ) {

	body:before {
	}
	body {
		background-color: unset;
		background: url(green1.jpg);
		background-positon: fixed;
		background-size: cover;
	}
	
	
	html.iframe body {
		background: transparent;
	}
	
	
	#layout-sidebar,
	#layout-list,
	#layout-content {
		background: transparent;
	}
	#layout-sidebar {
		min-width: 180px;
	}
	.searchbar {
		background-color: transparent;
	}
	#new-div-1 .pagenav {
		background: rgba( 255,255,255,0.9 );
	}

	body, a {
		color: white;
mix-blend-mode: difference;

	}
	.listing tbody td, .listing li a,
	.listing tbody td a {
		color: unset;
mix-blend-mode: difference;
	}

}

*
*
***************************************************/

/**
 * More colours (dark background) and smaller buttons
 *
 */

@media screen and ( min-width: 968px ) {

	a {
		color: #b98805;
	}

	#new-top-div {
		height: 32px;
		background: #444;
	}
	#taskmenu a {
		width: 90px;
		height: 32px;
		background: transparent;
		color: #fff;
		padding: 4px;
	}
	.menu.toolbar a:before {
		float: left !important;
		margin-right: 4px !important;
		font-size: 16px;
	}
	.popover {
		box-shadow: 0 0 0 #000;
	}
	.popover-header {
		height: 32px;
		background: #444;
		border: none;
	}
	.popover-body {
		background: #3c3c3c;
	}
	.popover-body ul li a {
		color: #fff;
	}
	#new-div-1 .header {
		border: 0;
	}
	#layout-sidebar {
		background-color: #fdfdfd;
		color: #fff;
		border: 0;
		border-right: 1px solid #b9b397;
	}
	ul.listing li ul {
		border-top: 1px #000;
	}
	#layout>div>.header a.button {
		color: #ccc;
	}
	#layout-sidebar li {
		border: 0;
	}
	#layout-sidebar a {
		color: #292929;
		line-height: 21px;
	}
	#layout-sidebar a:hover {
		background-color: #b9b5a2;
	}
	ul.treelist li.selected>div>a, ul.treelist li.selected>a {
		background: #a09d93;
	}
	#layout>div>.header {
		background: #000;
		border: 0;
		color: #ccc;
	}
	#directorylist-header {
		color: #eee;
	}
	#layout>div>.header a.button {
		margin-top: 8px;
	}
	.form-control {
		color: #aaa;
		font-weight: normal !important;
	}
	table.listing tr:nth-child(even) {
		background: #9cdcc7;
		background: #bdd6d4;  /* light cyan / grey  */
		background: #efeadf;  /* light brown / gold */
	}
	table.listing tr:hover {
		background-color: #c4ccca;
		background: #a0d4d4;
		background: #e0d7bd;
	}
	table.listing tr.selected td {
		background: #a0d4d4;
		background-color: #c4ccca;
	}
	#new-div-1 #messagelist-header {
		background: #c5c2b0;
	}
	.menu.toolbar li {
		border: 0;
	}
	.menu.toolbar a {
		color: #2d2d2d;
		padding: 2px 6px;
	}
	.menu.toolbar a:hover {
		background: #666;
	}
	#messagemenulink .active {
		// does not work
		background-color: #666;
	}
	#new-div-1 #messagelist-header a.toolbar-button.refresh {
		color: #292929;
	}
	#layout>div>.footer.small {
		background-color: #000;
		border: 0;
	}
	#new-div-1 .header {
		background: #c5c2b0;
	}
	#new-div-1 .pagenav {
		background: #928f76;;
		height: 24px;
	}
	#new-div-1 .pagenav a {
		color: #fff;
	}
	ul.listing {
		/* height: 28px; */
		padding: 1px 0 0 0;
	}
	.messagelist td.subject span.fromto {
		color: #222;
	}
	.messagelist td.subject {
		color: #222;
	}
	.attachment-name, .attachment-size {
		color: #eee !important;
	}
	.select-menu .listing li a {
		padding: 6px;
	}
	.select-menu .listing li a:hover {
		background: #444;
	}
	ul.treelist li div.treetoggle:before {
		color: #777;
	}
	.menu.pagenav .pagenav-text {
		color: #fff;
	}
	.attachment-name, .attachment-size {
		color: #444 !important;
	}

	/* attachments list */
	.attachmentslist {
		background-color: #ece8da;
	}

	/* alert of blocked images etc. */
	.ui.alert.boxwarning {
		background-color: #eaeaea;
		height: 32px;
		padding: 0 14px;
	}
	/* buttons */
	.btn-primary {
		background-color: #c7c0ab;
		background: #c7c0ab;
		border-color: #c7c0ab;
		color: #000;
		height: 24px;
		padding: 0 8px;
		line-height: 22px;
	}
	.ui.alert.boxwarning i.icon {
		font-size: 1.1em !important;
	}

	/* folder icon colour */
	.folderlist li a:before {
		font-weight: 600;
		color: #847a66;
	}
	.folderlist li.sent a:before {
		font-weight: 600;
		color: #847a66;
		font-size: 12px;
	}

	/* folder icon colour */
	.folderlist li a:before {
		font-weight: 600;
		color: #847a66;
	}
	.folderlist li.sent a:before {
		font-weight: 600;
		color: #847a66;
		font-size: 12px;
	}

	/* unread message count */
	.folderlist li.mailbox .unreadcount {
		margin: 0 8px;
		background: #7b7b7b;
		border-radius: 0.3em;
	}



	/* merge header bar and search bar and set search background color */
	#new-div-1 #messagelist-header {
		width: 70%;
		float: left;
	}
	.searchbar {
		position: sticky;
		top: 0;
		float: left;
		width: 30%;
		height: 35px;
		min-height: 35px;
		line-height: 35px;
		background-color: #c5c2b0;
	}
	.searchbar input {
		color: #222;
		background-color: #fafafa;
		height: 24px;
		margin-top: 6px;
		margin-left: 8px;
	}
	/* end merge search bar */

	/* message size - from v1.5 */
	/* it apeears on hover so this option makes it visible anyway */
	.messagelist span.size, .messagelist tr:hover span.date {
		display: inline-block;
	}
	/* ALSO NEEDS - set it to display none then it only shows on hover but does not make the subject jump to right */
	/* .messagelist td.subject span.date, .messagelist td.subject span.size { */
	.messagelist td.subject span.size {
		display: none;
	}
	/* end message size */

	#compose-options {
		color: #222;
		font-size: 11px;
	}


	/* extra bits to cope with browser dark mode */

	/** this was the css approach **********************************************
	*	now use js to remove dark-mode class from html
	*
	
    html.dark-mode #layout-content, html.dark-mode #layout-list, html.dark-mode #layout-sidebar, html.dark-mode #layout>div>.footer, html.dark-mode #layout>div>.header, html.dark-mode .menu.pagenav>
        background: #fff;
    }
    .messagelist td.subject span {
        color: #222;
    }
    .header-title {
        background: #222;
    }
    .menu span.inner {
        color: #222;
    }
    #message-header {
        color: #222;
    }
    html.dark-mode img.contactphoto {
        background: #aaa !important;
    }
    .listing li, html.dark-mode .listing li ul, html.dark-mode .listing tbody td {
        border-color: transparent;
    }
    .listing.focus tbody tr.focused>td:first-child, html:not(.touch) .listing.focus:not(.withselection) tbody tr.focused>td.selection+td {
        background: #a9a491;
    }


	html.dark-mode .listing li.selected, html.dark-mode .listing li.selected>a, html.dark-mode .listing li.selected>div>a, html.dark-mode .listing tr.selected td {
		background: #a9a491;
	}

	html.dark-mode .attachmentslist {
		background: #c9c9ba;
		color: #666;
	}
	.column-resizer {
		background: #cdc8ba;
	}

	
	
    html.dark-mode > body {
        background-color: #fff;
    }
    html.dark-mode .message-htmlpart blockquote, html.dark-mode .message-part blockquote {
        backgrorund: #fff;
        color: #222;
    }

	*** end commented out dark mode css *************************************/

}


/* message details */
#message-header .short-header .message-partheaders {
	float: right;
}