html, body { height: 100%; width: 100%; position: relative; }

@media screen and (max-width: 960px){

	/* -- TOOLBAR -- */
	.toolbar a.button span { font-size: 0px; padding: 0px; width: 48px; background-position: center center; }
	.toolbar .dropbutton a.button { border-right: none; padding: 0px; }
	.dropbutton .dropbuttontip { display: inline-block; position: inherit; right: auto; top: auto; border-right: 1px solid #5E9CD7; }

	/* -- TOOLBAR MORE -- */
	html.mobile .toolbar a.button.more span { width: 27px; }

	/* -- LOGIN -- */
	div.login_box { padding-top: 50px; }

	/* -- MAIL RECORDS -- */
	html.mobile table.records-table, html.mobile table.records-table tbody, html.mobile table.records-table tbody tr, html.mobile table.records-table tbody tr td { display: block; }
	html.mobile table.records-table tbody tr { height: 53px; position: relative; overflow: hidden; border-bottom: 1px dotted #EEE; }
	html.mobile table.records-table tbody tr td { padding: 0px; margin: 0px; border: none; font-size: 13px; }
	html.mobile table.records-table tbody tr td.flag { width: 8% !important; height: 53px; float: left; padding: 0px; }
	html.mobile table.records-table tbody tr td.flag span { margin-top: 17px; }
	html.mobile table.records-table tbody tr td.subject { width: 84% !important; height: 24px; float: left; padding-top: 29px; color: #555; font-size: 11px; }
	html.mobile table.records-table tbody tr td.fromto { position: absolute; top: 9px; left: 8%; width: 72%; font-weight: bold; }
	html.mobile table.records-table tbody tr td.date { position: absolute; top: 8px; right: 0px; width: 19%; margin-right: 1%; box-sizing: border-box; text-overflow: inherit; font-size: 10px; color: #999; }
	html.mobile table.records-table tbody tr td.attachment { width: 8% !important; height: 26px; float: left; padding: 27px 0 0 0; text-align: right; }

	#messagecontent .rightcol, #messagepreview .rightcol { float: none; width: auto; border-radius: 0px; margin: 0px; border-bottom: 1px solid #DADFE5; }
	#messagecontent .leftcol, #messagepreview .leftcol { margin: 0px; }

}

/* -- MOBILE -- */
html.mobile .minwidth { max-width: 100% !important; }
html.mobile .mobile_hidden { display: none !important; }

/* -- MOBILE TOOLBAR -- */
html.mobile .toolbar a.button span { font-size: 0px; padding: 0px; width: 48px; background-position: center center; }

/* -- MOBILE MAIL -- */
html.mobile #mailview-top { height: 100% !important; }
html.mobile #mailview-left { display: none; }
html.mobile #mailview-right { left: 0px !important; }
html.mobile #mailviewsplitterv { display: none; }
html.mobile #mailviewsplitter { display: none; }
html.mobile .messagelist tr td.subject span.msgicon, html.mobile .messagelist tr td.subject span.unreadchildren { display: none; }
html.mobile .messagelist tr td.threads { display: none; }

/* -- MOBILE MAIL FOOTER -- */
html.mobile #messageheader #countcontrols, html.mobile #messageheader #formatcontrols { display: none; }
html.mobile #messagelistfooter #countcontrols { right: 0px; }

/* -- MOBILE COMPOSE -- */
html.mobile #composeview-left { display: none; }
html.mobile #composeview-right { left: 0px !important; }
html.mobile #composesplitterv { display: none; }

/* -- MOBILE MESSAGE -- */
html.mobile #messagestack { left: 8px; right: 8px; bottom: 4px; padding: 0px; }
html.mobile #messagestack div { width: 100%; margin: 0px; box-sizing: border-box; }

/* -- SCREEN 640 -- */
@media screen and (max-width: 640px){

	.records-table tr.unread td { background-color: #EEE; }

	.toolbar a.mobile_show { display: inline-block; }

	#mailview-right #messageheader h2.subject { font-size: 16px; }

	/* -- TOOLBAR -- */
	.toolbar a.button span { font-size: 0px; padding: 0px; width: 48px; background-position: center center; }

	/* -- TOOLBAR MORE -- */
	.toolbar a.button.more span { width: 27px; }

	/* -- LOGIN -- */
	div.login_box { padding-top: 35px; }

	/* -- MAIL RECORDS -- */
	table.records-table, table.records-table tbody, table.records-table tbody tr, table.records-table tbody tr td { display: block; }
	table.records-table tbody tr { height: 53px; position: relative; overflow: hidden; border-bottom: 1px dotted #EEE; }
	table.records-table tbody tr td { padding: 0px; margin: 0px; border: none; font-size: 13px; }
	table.records-table tbody tr td.flag { width: 8% !important; height: 53px; float: left; padding: 0px; }
	table.records-table tbody tr td.flag span { margin-top: 17px; }
	table.records-table tbody tr td.subject { width: 84% !important; height: 24px; float: left; padding-top: 29px; color: #555; font-size: 11px; }
	table.records-table tbody tr td.fromto { position: absolute; top: 8px; left: 8%; width: 72%; font-weight: bold; }
	table.records-table tbody tr td.date { position: absolute; top: 8px; right: 0px; width: 19%; margin-right: 1%; box-sizing: border-box; text-overflow: inherit; font-size: 10px; color: #999; }
	table.records-table tbody tr td.attachment { width: 8% !important; height: 26px; float: left; padding: 27px 0 0 0; text-align: right; }

	/* -- WIDTH -- */
	.minwidth { max-width: 100% !important; }

	/* -- MOBILE -- */
	.mobile_hidden { display: none !important; }

	#mailview-top { height: 100% !important; }
	#mailview-left { display: none; }
	#mailview-right { left: 0px !important; }
	#mailviewsplitterv { display: none; }
	#mailviewsplitter { display: none; }
	.messagelist tr td.subject span.msgicon, .messagelist tr td.subject span.unreadchildren { display: none; }
	.messagelist tr td.threads { display: none; }

	#composeview-left { display: none; }
	#composeview-right { left: 0px !important; }
	#composesplitterv { display: none; }

	#messageheader #countcontrols, #messageheader #formatcontrols { display: none; }
	#messagelistfooter #countcontrols { right: 0px; }

	#messagestack { left: 8px; right: 8px; bottom: 4px; padding: 0px; }
	#messagestack div { width: 100%; margin: 0px; box-sizing: border-box; }

}