/*****************************************************************************************
******************************************************************************************
**                                                                                      **
**                        iprotus.com / iprotus.eu / iprotus.ch                         **
**                                   CSS Stylesheet                                     **
**                                                                                      **
**                             Copyright 2011-2018 iProtus                              **
**                               http://www.iprotus.com                                 **
**                                                                                      **
******************************************************************************************
**                                                                                      **
**                              Thanks particularly to:                                 **
**                                                                                      **
**              Shay Howe, http://learn.shayhowe.com/html-css/box-model                 **
**                           for an excellent primer on CSS,                            **
**                                                                                      **
**            Chris Coyier on @media types in CSS3 to make CSS responsive               **
**                    https://css-tricks.com/css-media-queries/                         **
**                                                                                      **
**     Inayaili de Leon for pointing out the finer details of CSS selectors, here:      **
**    http://coding.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/      **
**                                                                                      **
**           Noah Stokes, http://alistapart.com/article/css-positioning-101             **
**        for cutting a few basics out in an informative and entertaining way,          **
**                                                                                      **
**                    and to W3C for their excellent validators:                        **
**                     CSS: http://jigsaw.w3.org/css-validator/                         **
**                         HTML: http://validator.w3.org/                               **
**                                                                                      **
**               Mobile optimization guides: https://varvy.com/mobile/                  **
**               and https://varvy.com/mobile/legible-font-size.html,                   **
**               also https://viljamis.com/2012/scaling-with-em-units/                  **
**                                                                                      **
**      And last but not least, this invaluable info on measuring HTML elements         **
**          http://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx              **
**                                                                                      **
******************************************************************************************
*****************************************************************************************/

/*****************************************************************************************
**                                     CSS reset                                        **
*****************************************************************************************/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form,
label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video				{margin: 0; border: 0; padding: 0; vertical-align: baseline; font: inherit; font-size: 100%;}
article, aside, details, figcaption, figure, footer,
header, hgroup, menu, nav, section						{display: block;}
body													{line-height: 1;}
ol, ul													{list-style: none;}
blockquote, q											{quotes: none;}
blockquote:before, blockquote:after, q:before, q:after	{content: ''; content: none;}
table													{border-collapse: collapse; border-spacing: 0;}

/* Stretch viewport to full width and float transparent scrollbars above the rendered page. */
/*@-webkit-viewport	{width: device-width;}
@-moz-viewport		{width: device-width;}
@-ms-viewport		{width: device-width;}
@viewport			{width: device-width;}
*/

/* Media scaling (inspired from https://viljamis.com/2012/scaling-with-em-units/ */
*									{margin: 0; border: 0; padding: 0;}
html								{min-width: 300px;}
body								{font-size:  80%;}		/* Default */
@media (min-width:  400px)	{body	{font-size:  80%;}}
@media (min-width:  600px)	{body	{font-size:  90%;}}
@media (min-width:  900px)	{body	{font-size:  95%;}}
@media (min-width: 1300px)	{body	{font-size: 100%;}}
@media (min-width: 1800px)	{body	{font-size: 110%;}}
@media (min-width: 2400px)	{body	{font-size: 120%;}}

/* Simple shortcuts to switch on and off elements depending on viewport size. */
.WideOnly									{display: normal;}
@media (max-width: 800px)	{.WideOnly		{display: none;}}
.NarrowOnly									{display: normal;}
@media (min-width: 801px)	{.NarrowOnly	{display: none;}}

/*****************************************************************************************
**                                  General priming.                                    **
** Textalign in DIV and BODY in order to cope with old browsers not centering properly. **
**       See http://www.maxdesign.com.au/presentation/center/ and a thanks to him.      **
**                 Includes (now possibly redundant) old priming styles.                **
**                  Font-preload done in Master file's header section.                  **
*****************************************************************************************/

body {
	color: #AAAAAA;
	background-color: rgb(0,0,102);
	text-align: center;
	font-family: 'Ubuntu', Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	cursor: default;
	line-height: 1.2; /* Do not use a unit here, see https://developer.mozilla.org/en-US/docs/CSS/line-height */
}
div			{text-align: left; font-family: 'Ubuntu', Verdana, Arial, Helvetica, sans-serif;}
table		{text-align: left; font-family: 'Ubuntu', Verdana, Arial, Helvetica, sans-serif;}
td			{text-align: left; font-family: 'Ubuntu', Verdana, Arial, Helvetica, sans-serif;}
textarea	{font-family: 'Ubuntu', Verdana, Arial, Helvetica, sans-serif;}

/*****************************************************************************************
**                               Text and formatting                                    **
*****************************************************************************************/

h1	{font-weight: bold;		font-size: 2em;}
h2	{font-weight: bold;		font-size: 1.7em;}
h3	{font-weight: bold;		font-size: 1.5em;}
h4	{font-weight: bold;		font-size: 1.3em;}
h5	{font-weight: bold;		font-size: 1.2em;}
h6	{font-weight: bold;		font-size: 1.1em;}
p	{font-weight: normal;	font-size: 1.0em;}

/*****************************************************************************************
**                                Tables and lists                                      **
*****************************************************************************************/

table	{margin: 0; padding: 0;}
tr		{margin: 0; padding: 0;}
th		{margin: 0; padding: 0;}
td		{margin: 0; padding: 0;}

/*****************************************************************************************
**                                Links and related                                     **
*****************************************************************************************/

a:link
{
	color: #DDDDDD;
	text-decoration: underline;
	cursor: pointer;
	transition: color 0.3s;
	-webkit-transition: color 0.3s;	/* Safari */
}
a:active	{color: #FFFFFF;}
a:visited	{color: #DDDDDD;}
a:hover		{color: #FFFFFF;}

/*****************************************************************************************
**                                      Misc.                                           **
*****************************************************************************************/

.Hr					{left: 2px; right: 2px; height: 1px; display: block; border-width: 1px 1px 1px 1px; margin: 15px 2px 15px 2px; clear: both; border-color: #777777; background-color: #777777;}
.Bold				{font-weight: bold;}
.Italic				{font-style: italic;}
.Underline			{text-decoration: underline;}
.TableCell			{display: table-cell;}
.TableCellCenter	{text-align: center; vertical-align: middle;}
.TextHCenter		{text-align: center;}
.TextHLeft			{text-align: left;}
.TextHRight			{text-align: right;}
.TextVCenter		{display: table-cell; vertical-align: middle;}
.TextVAlign			{vertical-align: baseline;}
.TextVTopAlign		{vertical-align: top;}
.TextNoWrap			{white-space: nowrap;}
.TextFullWidth		{width: 100%;}
.TextFullHeight		{height: 100%;}
.TextFullSize		{width: 100%; height: 100%;}
.FitHWidth			{left: 0px; right: 0px;}
.FullPageWidth		{clear: both; width: 100%; box-sizing: border-box;}
.FullPageHeight		{height: 100%; box-sizing: border-box;}
.FullPageSize		{clear: both; width: 100%; height: 100%; height: 100vh; box-sizing: border-box;}
.ViewportFit		{position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; box-sizing: border-box;}
.Clear				{clear: both;}
.FloatLeft			{float: left;}
.FloatRight			{float: right;}
.Absolute			{position: absolute;}
.Fixed				{position: fixed;}
.Relative			{position: relative;}
.NoDisplay			{display: none;}
.NoVisibility		{visibility: hidden;}
.HoverPointer		{cursor: pointer;}
.Z5					{z-index: 5;}		/* Body and content */
.Z10				{z-index: 10;}		/* Header and menus */
.Z15				{z-index: 15;}		/* Cookie warning */
.Z20				{z-index: 20;}		/* Dialog boxes */
.Z25				{z-index: 25;}		/* Error messages */
.Z30				{z-index: 30;}		/* Expiry */
.Z35				{z-index: 35;}		/* Debug buttons */
.Z40				{z-index: 40;}		/* Async postback wait overlay */
.RoundLeftBottom10	{border-radius: 0 0 0 0.625em;}
.RoundRightBottom10	{border-radius: 0 0 0.625em 0;}
.RoundBothBottom10	{border-radius: 0 0 0.625em 0.625em;}
.RoundLeftBottom20	{border-radius: 0 0 0 1.25em;}
.RoundRightBottom20	{border-radius: 0 0 1.25em 0;}
.RoundBothBottom20	{border-radius: 0 0 1.25em 1.25em;}

/****************************************************************************************/
/* How to zebra style a table (little gem acquired from https://css-tricks.com/complete-guide-table-element/). */

.ZebraTable > tbody > tr:nth-child(odd) {background: #eee;}

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

.TestTableBorder	{border: 3px solid #00FFFF;}
.TestTableBorder th	{border: 3px solid #FF00FF;}
.TestTableBorder td	{border: 3px solid #FFFF00;}

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

.NoTextSelection	{	/*	See also Slf.Js.EnableUserSelection() function in SlfContentPage.js
							CSS values:  none | text | toggle | element | elements | all | inherit
							Needed too: <element onselectstart="return false;" unselectable="on"></element>
						*/
						-webkit-user-select: none;	/* Chrome all & Safari all */
						-khtml-user-select: none;
						-moz-user-select: none;		/* Firefox all */
						-ms-user-select: none;		/* IE 10+ */
						-o-user-select: none;		/* Opera ... maybe */
						user-select: none;			/* see http://www.w3.org/TR/2000/WD-css3-userint-20000216 */
					}

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

/*	Tweak scrollbars according to color selections, like this (presumably rgba() works too):
	scrollbar-base-color: #A40F0F;
	scrollbar-face-color: #A40F0F;
	scrollbar-shadow-color: #AA7777;
	scrollbar-highlight-color: #A44444;
	scrollbar-3dlight-color: #00FF00;
	scrollbar-darkshadow-color: #00FF00;
	scrollbar-track-color: #00FF00;
	scrollbar-arrow-color: #BBBB00;
*/
/*	See https://css-tricks.com/custom-scrollbars-in-webkit/
	See https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp
	::-webkit-scrollbar              {}			The scrollbar.
	::-webkit-scrollbar-button       {}			The buttons on the scrollbar (arrows pointing upwards and downwards).
	::-webkit-scrollbar-track        {}			The track (progress bar) of the scrollbar.
	::-webkit-scrollbar-track-piece  {}			The track (progress bar) NOT covered by the handle.
	::-webkit-scrollbar-thumb        {}			The draggable scrolling handle.
	::-webkit-scrollbar-corner       {}			The bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet.
	::-webkit-resizer                {}			The draggable resizing handle that appears at the bottom corner of some elements.
*/
::-webkit-scrollbar			{background-color: rgb(255, 255, 255); width: 0.5em; height: 0.5em;}
::-webkit-scrollbar-thumb	{background-color: rgb(3, 25, 38);}

/*****************************************************************************************
**                                                                                      **
** Hack to vertically center elements in a DIV also in IE. According to specs standards **
** a simple style="display: table-cell; vertical-align: middle;" should suffice, but    **
** alas, not with IE, the usual suspect :p                                              **
**                                                                                      **
** A lot of thanks for Bruno Fassino for this, saved me many hours :-)                  **
** See: http://www.brunildo.org/test/img_center.html                                    **
**                                                                                      **
** To use, insert an empty span as first child element of the "vertical-align: middle"  **
** DIV with the contents to be vertically centered. As in:                              **
**                                                                                      **
**   <div style="display: table-cell; vertical-align: middle;">                         **
**     <span class="IeVCenterLayoutHack"></span> Blablabla...                           **
**   </div>                                                                             **
**                                                                                      **
**   --- or ---                                                                         **
**                                                                                      **
**   <div class="TextVCenter">                                                          **
**     <span class="IeVCenterLayoutHack"></span> Blablabla...                           **
**   </div>                                                                             **
**                                                                                      **
** To center one DIV inside another DIV, use this constallation:                        **
**                                                                                      **
**   <table style="width: 100%; height: inherit;"><tr>                                  **
**     <td style="text-align: center; vertical-align: middle;">                         **
**       <div class="your_inner_DIV_class" style="display: inline-block;">              **
**         ... content here...                                                          **
**       </div>                                                                         **
**     </td>                                                                            **
**   </tr></table>                                                                      **
**                                                                                      **
*****************************************************************************************/

.IeVCenterLayoutHack
{
	width: 1px;
	height: 100%;
	display: inline-block;
	vertical-align: middle;
}

/*****************************************************************************************
**                                                                                      **
** Hack to horizontally distribute elements. First, give the elements, for example      **
** DIVs, the styles: "display: inline-block; text-align: justify;". Then add a single   **
** span following the elements: "<span class="EvenSpaceHack"></span>". found here:      **
** http://stackoverflow.com/questions/6865194/fluid-width-with-equally-spaced-divs.     **
**                                                                                      **
*****************************************************************************************/

.EvenSpaceHack
{
	width: 100%;
	display: inline-block;
	font-size: 0;
	line-height: 0
}

/*****************************************************************************************
**                                                                                      **
** Brilliant little gem how to obfuscate an email address verbatim in the markup. From  **
** https://matt.berther.io/2009/01/15/hiding-an-email-address-from-spam-harvesters/.    **
**                                                                                      **
*****************************************************************************************/

.ReverseTextHack
{
  unicode-bidi: bidi-override;
  direction: rtl;
}

/*****************************************************************************************
**                                                                                      **
**                                Hover over popups                                     **
** Inspired from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_tooltip. **
**                                                                                      **
** Usage example:                                                                       **
**   <span class="Tooltip">Hover over me                                                **
**     <span class="TooltipPopup">Tooltip text</span>                                   **
**   </span>                                                                            **
**                                                                                      **
** Make sure to add a class to Tooltip and TooltipPopup to style the final UX as        **
** desired. Follow the link about to examples of how to size and position the popup.    **
**                                                                                      **
*****************************************************************************************/

.Tooltip
{
	position: relative;			/* Needed or the TooltipPopup becomes relative to the viewport. */
}
.Tooltip .TooltipPopup {
	position: absolute;			/* Needed or the TooltipPopup inserts into existing text. */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s;
}
.Tooltip:hover .TooltipPopup {
	opacity: 1;
	visibility: visible;
}

/*****************************************************************************************
**                                                                                      **
**                               Animation keyframes                                    **
**               See https://www.w3schools.com/css/css3_animations.asp                  **
**                                                                                      **
*****************************************************************************************/

@-webkit-keyframes RotatingImageFrames360
{
	100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes RotatingImageFrames360
{
	100% {-moz-transform: rotate(360deg);}
}
@keyframes RotatingImageFrames360
{
	100%
	{
		-moz-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-webkit-keyframes RotatingImageFrames45
{
	100% {-webkit-transform: rotate(45deg);}
}
@-moz-keyframes RotatingImageFrames45
{
	100% {-moz-transform: rotate(45deg);}
}
@keyframes RotatingImageFrames45
{
	100%
	{
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}
}

@-webkit-keyframes FadeOutRedToGone
{
	0%		{opacity: 1; color: rgb(128, 0, 0);}
	50%		{opacity: 1; color: rgb(128, 0, 0);}
	100%	{opacity: 0; color: rgb(128, 0, 0);}
}
@-moz-keyframes FadeOutRedToGone
{
	0%		{opacity: 1; color: rgb(128, 0, 0);}
	50%		{opacity: 1; color: rgb(128, 0, 0);}
	100%	{opacity: 0; color: rgb(128, 0, 0);}
}
@keyframes FadeOutRedToGone
{
	0%		{opacity: 1; color: rgb(128, 0, 0);}
	50%		{opacity: 1; color: rgb(128, 0, 0);}
	100%	{opacity: 0; color: rgb(128, 0, 0);}
}

/*****************************************************************************************
**                                                                                      **
**                                 Debug buttons                                        **
**                                                                                      **
*****************************************************************************************/

/*	Code-behind hide these if the user has no debug role or isn't logged in. */
.DebugButtons
{
	display: block;
	position: fixed;
	z-index: 35;
	height: 30px;
	border: 5px solid rgba(0, 0, 0, 0.0);
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 35;
	opacity: 0.1;
	transition: opacity 0.3s;
	-webkit-transition: opacity 0.3s;	/* Safari */
}
.DebugButtons:hover	{opacity: 1.0;}
.DebugHandle
{
	display: inline-block;
	width: 19px;
	height: 19px;
	margin: 5px;
	padding-top: 1px;
	float: left;
	background-image: url(/Images/Icons/MoveThumbSmall_32x32.png);
	background-size: 19px;
	background-repeat: no-repeat;
	cursor: move;
	opacity: 0.6;
	transition: opacity 0.3s;
	-webkit-transition: opacity 0.3s;	/* Safari */
}
.DebugButton
{
	display: inline-block;
	width: 20px;
	height: 19px;
	margin: 5px;
	padding-top: 1px;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	color: White;
	background-color: Red;
	float: left;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.3s;
	-webkit-transition: opacity 0.3s;	/* Safari */
}
.DebugButton:hover	{opacity: 1.0;}

/*****************************************************************************************
******************************************************************************************
**                                                                                      **
**                                                                                      **
**                               MasterPage related                                     **
**                                                                                      **
**                                                                                      **
******************************************************************************************
*****************************************************************************************/

/* Some of the colors typically used on this website. */
.ColorRed			{color: rgb(128, 0, 0);}
.ColorRed2			{color: rgb(191, 33, 33);}
.ColorBlue			{color: rgb(92, 139, 191);}
.ColorBlue2			{color: rgb(68, 119, 174);}
.ColorGrey			{color: rgb(225, 225, 225);}
.ColorDkGrey		{color: rgb(177, 177, 177);}
.BkColorRed			{background-color: rgb(128, 0, 0);}				/* Referenced verbatim in code (don't change name, instead cheange value). See ...Master.cs::MessageBox_OpenDialogBox() method. */
.BkColorRed2		{background-color: rgb(191, 33, 33);}
.BkColorBlue		{background-color: rgb(92, 139, 191);}			/* Referenced verbatim in code (don't change name, instead cheange value). See ...Master.cs::MessageBox_OpenDialogBox() method. */
.BkColorBlue2		{background-color: rgb(68, 119, 174);}
.BkColorGrey		{background-color: rgb(225, 225, 225);}
.BkColorDkGrey		{background-color: rgb(177, 177, 177);}

/*****************************************************************************************
**                                                                                      **
**                                Header and Menus                                      **
**                                                                                      **
*****************************************************************************************/

.MasterHeader
{
	position: fixed;
	display: block;
	top: 0px;
	left: 0px;
	right: 0px;
	border: 1em solid rgb(3, 25, 38);
	min-width: 300px;
	color: rgb(255, 255, 255);
	background-color: rgb(3, 25, 38);
	box-shadow: 0 0.5em 0.5em rgba(0, 0, 0, 0.3);
	z-index: 10;
}
.MasterHeader > div
{
	margin: 0 0.25em;
}

/*****************************************************************************************
**                                      Logo                                            **
*****************************************************************************************/

.MasterHeaderLogo
{
	width: 8em;
	height: 3em;
	padding-left: 1.5em;
}

/*****************************************************************************************
**                                      Menu                                            **
*****************************************************************************************/

.MasterHeaderMenuButton
{
	font-weight: bold;
	cursor: pointer;
	transition: color 0.3s;
	-webkit-transition: color 0.3s;				/* Safari */
}
.MasterHeaderMenuButton:hover
{
	color: rgb(255, 255, 0);
}

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

.MasterHeaderMenuWide
{
	height: 3em;
	white-space: nowrap;
}
.MasterHeaderMenuWide > table > tbody > tr > td
{
	height: 3em;
	padding: 0 0.5em;
	vertical-align: middle;
}
.MasterHeaderMenuButtonWide
{
	font-size: 1.1em;
	white-space: nowrap;
}

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

.MasterHeaderMenuNarrow
{
	height: 3em;
}
.MasterHeaderMenuNarrowPopupTriggerHidden
{
	padding: 0.1em 0;
}
.MasterHeaderMenuNarrowPopupTriggerHidden img
{
	width: 2.8em;
	height: 2.8em;
	cursor: pointer;
}
.MasterHeaderMenuNarrowPopupTriggerShown
{
	padding: 0.1em 0;
}
.MasterHeaderMenuNarrowPopupTriggerShown img
{
	width: 2.8em;
	height: 2.8em;
	cursor: pointer;
}
.MasterHeaderMenuNarrowPopupPopup
{
	border: 0.1em solid rgb(155, 155, 155);
	border-radius: 0.5em;
	padding: 0.5em 1em;
	background-color: rgb(0, 0, 102);
	box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.3);
}
.MasterHeaderMenuButtonNarrow
{
	padding: 0.75em;
	font-size: 1.2em;
	white-space: nowrap;
}

/*****************************************************************************************
**                                      User                                            **
*****************************************************************************************/

.MasterHeaderUser
{
	height: 3em;
}
.MasterHeaderUserTriggerHidden
{
	padding: 0.5em 0;
}
.MasterHeaderUserTriggerHidden img
{
	width: 2em;
	height: 2em;
	cursor: pointer;
}
.MasterHeaderUserTriggerShown
{
	padding: 0.5em 0;
}
.MasterHeaderUserTriggerShown img
{
	width: 2em;
	height: 2em;
	cursor: pointer;
}
.MasterHeaderUserPopup
{
	border: 0.1em solid rgb(155, 155, 155);
	border-radius: 0.5em;
	padding: 1em;
	background-color: rgb(0, 0, 102);
	box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.3);
	font-size: 1.1em;
	font-weight: bold;
}
.MasterHeaderUserButton
{
	padding: 0.5em;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.3s;
	-webkit-transition: color 0.3s;		/* Safari */
}
.MasterHeaderUserButton:hover
{
	color: rgb(255, 255, 0);
}
.MasterHeaderUserButtonDisabled
{
	padding: 0.5em;
	color: rgb(111, 111, 111);
	white-space: nowrap;
}
.MasterHeaderUserSpacer
{
	margin: 0.5em 0;
	display: block;
	height: 1px;
	background-color: rgb(255, 255, 255);
}

/*****************************************************************************************
**                                    Profiles                                          **
*****************************************************************************************/

.MasterHeaderProfiles
{
	display: inline-block;
	height: 3em;
	vertical-align: middle;
	color: rgba(255, 255, 255, 1.0);
}
.MasterHeaderProfiles table						{height: 100%;}
.MasterHeaderProfiles td						{vertical-align: middle; white-space: nowrap;}

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

.MasterHeaderDropdownCombo						/* HTML table with one row, two cells (first is ItemBox and second is DownArrow) */
{
	cursor: pointer;							/* No matter where you click the combo opens (or closes). Make that intuitively illustrated with the cursor */
	transition: color 0.3s;
	-webkit-transition: color 0.3s;				/* Safari */
}
.MasterHeaderDropdownCombo:hover
{
	color: rgb(255, 255, 0);
}
.MasterHeaderDropdownCombo > tbody > tr > td
{
	height: 2em;
	vertical-align: middle;
}
.MasterHeaderDropdownCombo > tbody > tr > td:first-child
{
	width: 100%;								/* Force the text cell as wide as possible (the down-arrow cell will be squeezed to minimum width) */
}
.MasterHeaderDropdownItemBox					/* HTML div inside the first (ItemBox) cell */
{
	max-width: 10em;
	padding: 0.5em;
	font-size: 1.1em;
	font-weight: bold;
	overflow: hidden;
}
.MasterHeaderDropdownDownArrow					/* HTML div inside the second (DownArrow) cell */
{
	width: 1.25em;
	background-image: url(/Images/Icons/ArrowWhiteDown_11x9.png);
	background-position: center center;
	background-repeat: no-repeat no-repeat;
	background-size: 0.9em 0.75em;				/* More or less same ratio as 11x9px but using ems so it scales */
	transition: background-image 0.3s;
	-webkit-transition: background-image 0.3s;	/* Safari */
}
.MasterHeaderDropdownCombo:hover .MasterHeaderDropdownDownArrow
{
	background-image: url(/Images/Icons/ArrowYellowDown_11x9.png);
}
.MasterHeaderDropdownComboSelected				/* HTML table with one row, two cells (first is ItemBox and second is DownArrow) */
{
	cursor: pointer;							/* No matter where you click the combo opens (or closes). Make that intuitively illustrated with the cursor */
}
.MasterHeaderDropdownComboSelected > tbody > tr > td
{
	height: 2em;
	vertical-align: middle;
	color: rgb(255, 255, 0);
}
.MasterHeaderDropdownComboSelected > tbody > tr > td:first-child
{
	width: 100%;								/* Force the text cell as wide as possible (the down-arrow cell will be squeezed to minimum width) */
}
.MasterHeaderDropdownItemBoxSelected			/* HTML div inside the first (ItemBox) cell */
{
	max-width: 10em;
	padding: 0.5em;
	font-size: 1.1em;
	font-weight: bold;
	overflow: hidden;
}
.MasterHeaderDropdownDownArrowSelected			/* HTML div inside the second (DownArrow) cell */
{
	width: 1.25em;
	background-image: url(/Images/Icons/ArrowYellowUp_11x9.png);
	background-position: center center;
	background-repeat: no-repeat no-repeat;
	background-size: 0.9em 0.75em;				/* More or less same ratio as 11x9px but using ems so it scales */
}

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

.MasterHeaderDropdownListWrapper					/* HTML div surrounding the (scrollable) dropdown list. Only used with dropdowns and dropdown-combos. */
{
	border: 0.1em solid rgb(155, 155, 155);
	border-radius: 0.5em;
	padding: 1em 0.5em 1em 1em;
	background-color: rgb(0, 0, 102);
	box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.3);
}
.MasterHeaderDropdownList							/* HTML div, consisting of a number of immediate inner divs for each list item */
{
	max-height: 12em;
	font-size: 1.1em;
	font-weight: bold;
	overflow: auto;
	overflow-x: hidden;
	overflow-y: auto;
}
.MasterHeaderDropdownList::-webkit-scrollbar		{background-color: rgb(0, 0, 102); width: 0.25em; height: 0.25em;}
.MasterHeaderDropdownList::-webkit-scrollbar-thumb	{background-color: rgb(155, 155, 155);}
.MasterHeaderDropdownItem
{
	max-width: 10em;
	padding: 0.5em;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.3s;
	-webkit-transition: color 0.3s;		/* Safari */
}
.MasterHeaderDropdownItem:hover						{color: rgb(255, 255, 0);}
.MasterHeaderDropdownItemSelected
{
	max-width: 10em;
	padding: 0.5em;
	color: rgb(255, 255, 0);
	white-space: nowrap;
}

/*****************************************************************************************
**                                    Language                                          **
*****************************************************************************************/

.MasterHeaderLanguage
{
	height: 3em;
}
.MasterHeaderLanguageTriggerHidden
{
	padding: 0.5em 0;
}
.MasterHeaderLanguageTriggerHidden img
{
	width: 2em;
	height: 2em;
	cursor: pointer;
}
.MasterHeaderLanguageTriggerShown
{
	padding: 0.5em 0;
}
.MasterHeaderLanguageTriggerShown img
{
	width: 2em;
	height: 2em;
	cursor: pointer;
}
.MasterHeaderLanguagePopup
{
	border: 0.1em solid rgb(155, 155, 155);
	border-radius: 0.5em;
	padding: 1em 0.5em 1em 1em;
	background-color: rgb(0, 0, 102);
	box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.3);
}
.MasterLanguageItem								/* This is the actual container of the vertical list of language items appended with either Normal, Stuck or Disabled. */
{
	max-height: 12em;
	font-size: 1.1em;
	font-weight: bold;
	overflow: auto;
	overflow-x: hidden;
	overflow-y: auto;
}
.MasterLanguageItem::-webkit-scrollbar			{background-color: rgb(0, 0, 102); width: 0.25em; height: 0.25em;}
.MasterLanguageItem::-webkit-scrollbar-thumb	{background-color: rgb(155, 155, 155);}
.MasterLanguageItemNormal
{
	padding: 0.5em;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.3s;
	-webkit-transition: color 0.3s;		/* Safari */
}
.MasterLanguageItemNormal:hover
{
	color: rgb(255, 255, 0);
}
.MasterLanguageItemStuck
{
	padding: 0.5em;
	color: rgb(255, 255, 0);
	white-space: nowrap;
}
.MasterLanguageItemDisabled
{
	padding: 0.5em;
	color: rgb(111, 111, 111);
	white-space: nowrap;
}
.MasterLanguageItemFlag
{
	width: 1.5em;								/* 24px => 24px/16px => 1.5em */
	height: 1.5em;								/* 24px => 24px/16px => 1.5em */
	vertical-align: middle;
}
.MasterLanguageItemText
{
	margin-left: 0.5em;
	white-space: nowrap;
	vertical-align: middle;
}

/*****************************************************************************************
**                                 Cookie warning                                       **
*****************************************************************************************/

.MasterCookieWarningBox
{
	position: fixed;
	left: 2em;
	right: 2em;
	bottom: 2em;
	border-style: solid;
	border-color: rgb(234, 234, 234);
	border-width: 2em;
	border-radius: 0.25em;
	color: rgb(0, 0, 0);
	background-color: rgb(234, 234, 234);
	font-size: 0.9em;
	z-index: 15;
	box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 0, 0.3);
}
.MasterCookieWarningWrapper
{
	display: table;
	border-top: 0.25em solid rgb(177, 66, 66);
	padding: 1em 0 0 0;
}
.MasterCookieWarningMessage
{
	display: table-cell;
	padding-right: 1em;
	vertical-align: middle;
}
.MasterCookieWarningButtons
{
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
@media (max-width: 800px)
{
	.MasterCookieWarningWrapper
	{
		display: block;
		width: 100%;
	}
	.MasterCookieWarningMessage
	{
		display: block;
		padding-right: 0;
		padding-bottom: 1em;
		clear: both;
	}
	.MasterCookieWarningMessage h1
	{
		text-align: center;
	}
	.MasterCookieWarningButtons
	{
		display: block;
		clear: both;
	}
}

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

.MasterCookieWarningMessage h1
{
	margin-bottom: 0.5em;
	font-size: 1.4em;
	font-variant: small-caps;
}
.MasterCookieWarningMessage a:link
{
	color: rgb(199, 55, 55);
	text-decoration: none;
	cursor: pointer;
	transition: color 0.3s;
	-webkit-transition: color 0.3s;	/* Safari */
}
.MasterCookieWarningMessage a:active	{color: rgb(255, 13, 13);}
.MasterCookieWarningMessage a:visited	{color: rgb(177, 66, 66);}
.MasterCookieWarningMessage a:hover		{color: rgb(255, 13, 13);}
.MasterCookieWarningLinkButton
{
	color: rgb(199, 55, 55);
	cursor: pointer;
	transition: color 0.3s;
	-webkit-transition: color 0.3s;	/* Safari */
}
.MasterCookieWarningLinkButton:hover	{color: rgb(255, 13, 13);}

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

.MasterCookieWarningButton
{
	display: inline-block;
	border: 0.15em solid rgb(177, 66, 66);
	border-radius: 0.25em;
	padding: 0.5em 2em;
	font-weight: bold;
	color: rgb(0, 0, 0);
	background-color: rgb(222, 222, 222);
	text-align: center;
	clear: both;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.3s, border-color 0.3s, background-color 0.3s;
	-webkit-transition: color 0.3s, border-color 0.3s, background-color 0.3s;	/* Safari */
}
.MasterCookieWarningButton:hover
{
	color: rgb(0, 0, 0);
	border-color: rgb(255, 13, 13);
	background-color: rgb(255, 255, 255);
}

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

.MasterCookieWarningCheckBox
{
	display: inline-block;
	margin-top: 1em;
	clear: both;
	cursor: pointer;
}
.MasterCookieWarningCheckBox td
{
	vertical-align: middle;
}
.MasterCookieWarningCheckBoxCheck
{
	margin-right: 0.5em;
	border: 0.05em solid rgb(177, 66, 66);
	padding: 0.2em;
	background-color: rgb(222, 222, 222);
	transition: border-color 0.3s, background-color 0.3s;
	-webkit-transition: border-color 0.3s, background-color 0.3s;	/* Safari */
}
.MasterCookieWarningCheckBox:hover .MasterCookieWarningCheckBoxCheck
{
	border-color: rgb(255, 13, 13);
	background-color: rgb(255, 255, 255);
}
.MasterCookieWarningCheckBoxLabel
{
	color: rgb(177, 66, 66);
	transition: color 0.3s;
	-webkit-transition: color 0.3s;	/* Safari */
}
.MasterCookieWarningCheckBox:hover .MasterCookieWarningCheckBoxLabel
{
	color: rgb(255, 13, 13);
}

/*****************************************************************************************
**                                     Expiry                                           **
*****************************************************************************************/

.MasterExpiringBox
{
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-color: rgba(0, 0, 0, 0.4);
}
.MasterExpiringButton
{
	display: inline-block;
	margin: 0 2em;
	border: 0.625em solid rgb(128, 0, 0);		/* 3px => 3px/16px => 0.188em */
	border-radius: 1.25em;						/* 20px => 20px/16px => 1.25em */
	padding: 1.25em;							/* 20px => 20px/16px => 1.25em */
	color: rgb(225, 225, 225);
	background-color: rgba(0, 0, 0, 0.9);
	text-align: center;
	cursor: pointer;
	transition: color 0.3s, background-color 0.3s;
	-webkit-transition: color 0.3s, background-color 0.3s;	/* Safari */
	animation: MasterExpiringButtonPulse 5s ease-in-out infinite;
}
.MasterExpiringButton:hover
{
	color: rgba(255, 255, 255, 1.0);
	background-color: rgba(0, 0, 0, 1.0);
}
.MasterExpiringDigits
{
	display: inline-block;
	padding: 0.625em 0 0.625em 0;
	font-size: 2.0em;
	letter-spacing: 0.25em;
}
/* Thanks to http://callmenick.com/post/simple-css3-transitions-transforms-animations-compilation */
@keyframes MasterExpiringButtonPulse
{
	0%		{border-color: rgba(128, 0, 0, 1.0);}
	50%		{border-color: rgba(255, 0, 0, 1.0);}
	100%	{border-color: rgba(128, 0, 0, 1.0);}
}

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

.MasterExpiredPage
{
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background: url('/Images/Backgrounds/Sunset in La Jolla.jpg') no-repeat 60% 40% scroll;
	background-size: cover;
	overflow: hidden;
	text-align: center;
	opacity: inherit;	/* Fixed positioned elements don't inherit opacity on all browsers (IE!), so explicitely set it */
}
.MasterExpiredPage div
{
	text-align: center;
}
.MasterExpiredButton
{
	display: inline-block;
	margin: 0 auto;
	border: 0.188em solid rgb(128, 0, 0);		/* 3px => 3px/16px => 0.188em */
	border-radius: 1.25em;						/* 20px => 20px/16px => 1.25em */
	padding: 0.5em 2em 0.5em 2em;
	color: rgb(225, 225, 225);
	background-color: rgba(0, 0, 0, 0.5);
	cursor: pointer;
	transition: color 0.3s, border-color 0.3s, background-color 0.3s;
	-webkit-transition: color 0.3s, border-color 0.3s, background-color 0.3s;	/* Safari */
}
.MasterExpiredButton:hover
{
	border-color: rgb(255, 0, 0);
	color: rgb(255, 255, 255);
	background-color: rgba(191, 33, 33, 0.5);
}
.MasterExpiredLogo
{
	position: fixed;
	left: 1.5em;
	top: 1.5em;
	width: 16em;
	height: 6em;
}

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

.MasterAsyncPostbackWaitBox
{
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-color: rgba(0, 0, 0, 0.1);
}
.MasterAsyncPostbackWaitFeedback
{
	display: inline-block;
	margin: 0 2em;
	border: 0.25em solid rgb(128, 0, 0);
	border-radius: 2.5em;
	padding: 0.5em 1em;
	color: rgb(225, 225, 225);
	background-color: rgba(0, 0, 0, 0.9);
	text-align: center;
	cursor: pointer;
	transition: color 0.3s, border-color 0.3s, background-color 0.3s;
	-webkit-transition: color 0.3s, border-color 0.3s, background-color 0.3s;	/* Safari */
}
.MasterAsyncPostbackWaitFeedback:hover
{
	border-color: rgb(255, 0, 0);
	color: rgb(255, 255, 255);
	background-color: rgba(0, 0, 0, 1.0);
}
.MasterAsyncPostbackWaitFeedback img
{
	width: 2em;
	height: 2em;
	animation: RotatingImageFrames45 0.5s infinite linear;
	-webkit-animation: RotatingImageFrames45 0.5s infinite linear;
}
.MasterAsyncPostbackWaitFeedback td			{vertical-align: middle;}
.MasterAsyncPostbackWaitFeedback div		{margin: 0 1em;}
.MasterAsyncPostbackTimeoutFeedback
{
	display: inline-block;
	margin: 0 2em;
	border: 0.25em solid rgb(128, 0, 0);
	border-radius: 2.5em;
	padding: 0.5em 1em;
	color: rgb(225, 225, 225);
	background-color: rgba(0, 0, 0, 0.9);
	text-align: center;
	cursor: pointer;
	transition: color 0.3s, border-color 0.3s, background-color 0.3s;
	-webkit-transition: color 0.3s, border-color 0.3s, background-color 0.3s;	/* Safari */
}
.MasterAsyncPostbackTimeoutFeedback:hover
{
	border-color: rgb(255, 0, 0);
	color: rgb(255, 255, 255);
	background-color: rgba(0, 0, 0, 1.0);
}
.MasterAsyncPostbackTimeoutFeedback img		{width: 2em; height: 2em;}
.MasterAsyncPostbackTimeoutFeedback td		{vertical-align: middle;}
.MasterAsyncPostbackTimeoutFeedback div		{margin: 0 1em;}

/*****************************************************************************************
**                                                                                      **
**                                  Footer related                                      **
**                                                                                      **
*****************************************************************************************/

.MasterFooter
{
	display: block;
	left: 0px;
	right: 0px;
	bottom: 0px;
	border: 1em solid rgb(3, 25, 38);
	min-width: 300px;
	color: rgb(255, 255, 255);
	background-color: rgb(3, 25, 38);
	z-index: 5;
}

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

.MasterFooterWide > table
{
	width: 100%;
}
.MasterFooterWide > table > tbody > tr > td
{
	width: 33.333%;
	padding: 1em;
	text-align: center;
	vertical-align: middle;
}

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

.MasterFooterNarrow > table
{
	width: 100%;
}
.MasterFooterNarrow > table > tbody > tr > td
{
	width: 100%;
	padding: 1em;
	text-align: center;
	vertical-align: middle;
}
.MasterFooterDelimiterNarrow
{
	display: block;
	height: 1px;
	background-color: rgb(255, 255, 255);
}

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

.MasterFooterAddress	/* table element */
{
	margin: 0 auto;
	font-size: 0.8em;
}
.MasterFooterAddress td
{
	padding: 0.5em;
	text-align: left;
	vertical-align: top;
}
.MasterFooterAddress img
{
	display: block;
	width: 2.1em;
	height: 2.1em;
}
.MasterFooterAddress span
{
	display: block;
	clear: both;
}

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

.MasterFooterButton
{
	font-weight: bold;
	cursor: pointer;
	transition: color 0.3s;
	-webkit-transition: color 0.3s;				/* Safari */
}
.MasterFooterButton:hover
{
	color: rgb(255, 255, 0);
}

/*****************************************************************************************
**                                                                                      **
**                                  Dialog template                                     **
**                                                                                      **
*****************************************************************************************/

.MasterDialog
{
	border-style: solid;
	border-color: rgb(234, 234, 234);
	border-width: 2em;
	border-radius: 0.25em;
	color: rgb(0, 0, 0);
	background-color: rgb(234, 234, 234);
	font-size: 0.9em;
	overflow: hidden;
	box-sizing: border-box;
	box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 0, 0.3);
}
.MasterDialog::-webkit-scrollbar
{
	width: 0.5em;
	height: 0.5em;
	background-color: rgb(234, 234, 234);
}
.MasterDialog::-webkit-scrollbar-thumb
{
	background-color: rgb(177, 66, 66);
}
.MasterDialogMaximized
{
	color: rgb(0, 0, 0);
	background-color: rgb(234, 234, 234);
	overflow: hidden;
	box-sizing: border-box;
}

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

.MasterDialogHeader
{
	height: 2em;
	border-bottom: 0.25em solid rgb(177, 66, 66);
	overflow: hidden;
}
.MasterDialogMaximized .MasterDialogHeader
{
	padding: 1em 1em 0.5em 1em;
}
.MasterDialogHeader > table {width: 100%;}
	.MasterDialogHeaderUpdated
	{
		padding: 0 0.5em;
		font-size: 1.5em;
		font-weight: bold;
		background-color: rgb(92, 139, 191);
		text-align: left;
		vertical-align: middle;
	}
	.MasterDialogHeaderUpdatedFade
	{
		opacity: 0;						/* Invisible */
		color: rgb(92, 139, 191);		/* Invisible, i.e. same color as background */
		animation-name: FadeOutRedToGone;
		animation-duration: 4s;
	}
.MasterDialogHeaderTitle
{
	font-size: 1.4em;
	font-weight: bold;
	font-variant: small-caps;
	text-align: left;
	vertical-align: middle;
}
.MasterDialogHeaderX
{
	width: 2.0em;
	height: 2.0em;
	text-align: right;
	vertical-align: middle;
}
.MasterDialogHeaderX img
{
	display: inline-block;
	width: 1.4em;
	height: 1.4em;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.3s;
	-webkit-transition: opacity 0.3s;
}
.MasterDialogHeaderX img:hover
{
	opacity: 1.0;
}
.MasterDialogHeaderXDisabled
{
	width: 2.0em;
	height: 2.0em;
	text-align: right;
	vertical-align: middle;
}
.MasterDialogHeaderXDisabled img
{
	display: inline-block;
	width: 1.4em;
	height: 1.4em;
	opacity: 0.3;
}

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

.MasterDialogContent					{overflow: auto; padding: 1em 0;}
.MasterDialogContent a:link
{
	color: rgb(199, 55, 55);
	text-decoration: none;
	cursor: pointer;
	transition: color 0.3s;
	-webkit-transition: color 0.3s;
}
.MasterDialogContent a:active			{color: rgb(255, 13, 13);}
.MasterDialogContent a:visited			{color: rgb(177, 66, 66);}
.MasterDialogContent a:hover			{color: rgb(255, 13, 13);}

.MasterDialogContentMaximized			{overflow: auto; padding: 1em 0;}
.MasterDialogContentMaximized a:link
{
	color: rgb(199, 55, 55);
	text-decoration: none;
	cursor: pointer;
	transition: color 0.3s;
	-webkit-transition: color 0.3s;
}
.MasterDialogContentMaximized a:active	{color: rgb(255, 13, 13);}
.MasterDialogContentMaximized a:visited	{color: rgb(177, 66, 66);}
.MasterDialogContentMaximized a:hover	{color: rgb(255, 13, 13);}

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

.MasterDialogFooter						{overflow: hidden;}
.MasterDialogFooter table				{width: 100%;}
.MasterDialogFooter td					{text-align: center; white-space: nowrap;}
.MasterDialogFooterMaximized			{overflow: hidden;}
.MasterDialogFooterMaximized table		{width: 100%;}
.MasterDialogFooterMaximized td			{text-align: center;}

/*****************************************************************************************
**                      Misc. Dialog Controls and Formatting                            **
*****************************************************************************************/

.MasterDialogHr
{
	height: 1px;
	width: 100%;
	margin: 1em 0;
	clear: both;
	background-color: rgb(177, 66, 66);
	box-sizing: border-box;
}
.MasterDialogDelimiter
{
	height: 0.5em;
	clear: both;
}

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

.MasterDialogText					{}
.MasterDialogText h1				{font-size: 1.4em;}
.MasterDialogText p					{margin: 0.5em 0;}
.MasterDialogText ul				{margin-top: 0.25em; padding-left: 1.5em; list-style-type: disc; list-style-position: outside;}
.MasterDialogText li				{font-size: 0.8em;}
.MasterDialogTextLink
{
	color: rgb(199, 55, 55);
	cursor: pointer;
	transition: color 0.3s;
	-webkit-transition: color 0.3s;	/* Safari */
}
.MasterDialogTextLink:hover			{color: rgb(177, 66, 66);}
.MasterDialogTextLink h1			{font-size: 1.4em;}
.MasterDialogTextLink p				{margin: 0.5em 0;}
.MasterDialogTextLink ul			{margin-top: 0.25em; padding-left: 1.5em; list-style-type: disc; list-style-position: outside;}
.MasterDialogTextLink li			{font-size: 0.8em;}
.MasterDialogTextLinkDisabled		{color: rgb(177, 177, 177); cursor: default;}
.MasterDialogTextLinkDisabled h1	{font-size: 1.4em;}
.MasterDialogTextLinkDisabled p		{margin: 0.5em 0;}
.MasterDialogTextLinkDisabled ul	{margin-top: 0.25em; padding-left: 1.5em; list-style-type: disc; list-style-position: outside;}
.MasterDialogTextLinkDisabled li	{font-size: 0.8em;}

/*****************************************************************************************
**                                  Dialog Buttons                                      **
*****************************************************************************************/

.MasterDialogButton
{
	display: inline-block;
	border: 0.15em solid rgb(177, 66, 66);
	border-radius: 0.25em;
	padding: 0.5em 2em;
	font-weight: bold;
	color: rgb(0, 0, 0);
	background-color: rgb(222, 222, 222);
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.3s, border-color 0.3s, background-color 0.3s;
	-webkit-transition: color 0.3s, border-color 0.3s, background-color 0.3s;	/* Safari */
}
.MasterDialogButton:hover
{
	color: rgb(0, 0, 0);
	border-color: rgb(255, 13, 13);
	background-color: rgb(255, 255, 255);
}
.MasterDialogButtonStuck
{
	display: inline-block;
	border: 0.15em solid rgb(177, 66, 66);
	border-radius: 0.25em;
	padding: 0.5em 2em;
	font-weight: bold;
	color: rgb(0, 0, 0);
	background-color: rgb(244, 244, 244);
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.3s, border-color 0.3s, background-color 0.3s;
	-webkit-transition: color 0.3s, border-color 0.3s, background-color 0.3s;	/* Safari */
}
.MasterDialogButtonStuck:hover
{
	color: rgb(0, 0, 0);
	border-color: rgb(255, 13, 13);
	background-color: rgb(255, 255, 255);
}
.MasterDialogButtonDisabled
{
	display: inline-block;
	border: 0.15em solid rgb(177, 177, 177);
	border-radius: 0.25em;
	padding: 0.5em 2em;
	font-weight: bold;
	color: rgb(177, 177, 177);
	background-color: rgb(222, 222, 222);
	text-align: center;
	white-space: nowrap;
}

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

.MasterDialogMiniButton
{
	display: inline-block;
	border: 0.1em solid rgb(177, 66, 66);
	border-radius: 0.25em;
	padding: 0.25em 1em;
	font-weight: bold;
	color: rgb(0, 0, 0);
	background-color: rgb(222, 222, 222);
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.3s, border-color 0.3s, background-color 0.3s;
	-webkit-transition: color 0.3s, border-color 0.3s, background-color 0.3s;	/* Safari */
}
.MasterDialogMiniButton:hover
{
	color: rgb(0, 0, 0);
	border-color: rgb(255, 13, 13);
	background-color: rgb(255, 255, 255);
}
.MasterDialogMiniButtonStuck
{
	display: inline-block;
	border: 0.1em solid rgb(177, 66, 66);
	border-radius: 0.25em;
	padding: 0.25em 1em;
	font-weight: bold;
	color: rgb(0, 0, 0);
	background-color: rgb(244, 244, 244);
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.3s, border-color 0.3s, background-color 0.3s;
	-webkit-transition: color 0.3s, border-color 0.3s, background-color 0.3s;	/* Safari */
}
.MasterDialogMiniButtonStuck:hover
{
	color: rgb(0, 0, 0);
	border-color: rgb(255, 13, 13);
	background-color: rgb(255, 255, 255);
}
.MasterDialogMiniButtonDisabled
{
	display: inline-block;
	border: 0.1em solid rgb(177, 177, 177);
	border-radius: 0.25em;
	padding: 0.25em 1em;
	font-weight: bold;
	color: rgb(177, 177, 177);
	background-color: rgb(222, 222, 222);
	text-align: center;
	white-space: nowrap;
}

/*****************************************************************************************
**                         Dialog Labels, Texts and misc.                               **
*****************************************************************************************/

.MasterDialogContent .MasterDialogLabel
{
	display: inline-block;
	padding: 0.5em 1em 0.5em 0;
	float: left;
	text-align: right;
	vertical-align: middle;
	font-size: 1em;
}
.MasterDialogContentMaximized .MasterDialogLabel
{
	display: block;
	padding: 0.5em 1em 0.5em 0;
	clear: both;
	text-align: left;
	font-size: 1em;
}

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

.MasterDialogContent .MasterDialogTextField
{
	display: inline-block;
	min-height: 1.5em;
	padding: 0.5em 1em 0.5em 0;
	background-color: rgb(244, 244, 244);
	text-align: left;
	vertical-align: middle;
	font-size: 1em;
}
.MasterDialogContentMaximized .MasterDialogTextField
{
	display: block;
	min-height: 1.5em;
	padding: 0.5em 1em 0.5em 0;
	background-color: rgb(244, 244, 244);
	clear: both;
	text-align: left;
	font-size: 1em;
}

/*****************************************************************************************
**                                  Dialog TextBox                                      **
*****************************************************************************************/

.MasterDialogTextBox
{
	border: 0.05em solid rgb(177, 66, 66);
	padding: 0.4em;
	background-color: rgb(244, 244, 244);
	vertical-align: middle;
	font-size: 1em;
	transition: border-color 0.3s, background-color 0.3s;
	-webkit-transition: border-color 0.3s, background-color 0.3s;	/* Safari */
}
.MasterDialogTextBox::-webkit-scrollbar
{
	width: 0.5em;
	height: 0.5em;
}
.MasterDialogTextBox:hover
{
	border-color: rgb(255, 13, 13);
	background-color: rgb(255, 255, 255);
}
.MasterDialogContentMaximized .MasterDialogTextBox			{display: block; clear: both;}
.MasterDialogTextBoxLeadText
{
	border: 0.05em solid rgb(177, 66, 66);
	padding: 0.4em;
	color: rgb(177, 177, 177);
	background-color: rgb(244, 244, 244);
	vertical-align: middle;
	font-size: 1em;
	transition: border-color 0.3s, background-color 0.3s;
	-webkit-transition: border-color 0.3s, background-color 0.3s;	/* Safari */
}
.MasterDialogTextBoxLeadText:hover
{
	border-color: rgb(255, 13, 13);
	background-color: rgb(255, 255, 255);
}
.MasterDialogContentMaximized .MasterDialogTextBoxLeadText	{display: block; clear: both;}
.MasterDialogTextBoxDisabled
{
	border: 0.05em solid rgb(177, 177, 177);
	padding: 0.4em;
	color: rgb(177, 177, 177);
	background-color: rgb(244, 244, 244);
	vertical-align: middle;
	font-size: 1em;
}
.MasterDialogContentMaximized .MasterDialogTextBoxDisabled	{display: block; clear: both;}

/*****************************************************************************************
**                                  Dialog Checkbox                                     **
*****************************************************************************************/

.MasterDialogCheckBox				{cursor: pointer; display: block;}		/* table element */
.MasterDialogCheckBox td			{vertical-align: middle;}
.MasterDialogCheckBoxDisabled		{opacity: 0.5;}
.MasterDialogCheckBoxDisabled td	{vertical-align: middle;}
.MasterDialogCheckBoxCheck
{
	margin-right: 0.5em;
	border: 0.05em solid rgb(177, 66, 66);
	padding: 0.2em;
	background-color: rgb(244, 244, 244);
	transition: border-color 0.3s, background-color 0.3s;
	-webkit-transition: border-color 0.3s, background-color 0.3s;	/* Safari */
}
.MasterDialogCheckBoxCheck:hover
{
	border-color: rgb(255, 13, 13);
	background-color: rgb(255, 255, 255);
}
.MasterDialogCheckBoxCheckDisabled
{
	margin-right: 0.5em;
	border: 0.05em solid rgb(177, 66, 66);
	padding: 0.2em;
	cursor: default;
	background-color: rgb(222, 222, 222);
}
.MasterDialogCheckBoxLabel
{
	color: rgb(177, 66, 66);
	transition: color 0.3s;
	-webkit-transition: color 0.3s;	/* Safari */
}
.MasterDialogCheckBoxLabel:hover	{color: rgb(255, 13, 13);}
.MasterDialogCheckBoxLabelDisabled	{color: rgb(177, 177, 177); cursor: default;}
.MasterDialogCheckBox .MasterDialogCheckBoxCheck
{
	margin-right: 0.5em;
	border: 0.05em solid rgb(177, 66, 66);
	padding: 0.2em;
	background-color: rgb(244, 244, 244);
	transition: border-color 0.3s, background-color 0.3s;
	-webkit-transition: border-color 0.3s, background-color 0.3s;	/* Safari */
}
.MasterDialogCheckBox:hover .MasterDialogCheckBoxCheck
{
	border-color: rgb(255, 13, 13);
	background-color: rgb(255, 255, 255);
}
.MasterDialogCheckBoxDisabled .MasterDialogCheckBoxCheck
{
	margin-right: 0.5em;
	border: 0.05em solid rgb(177, 66, 66);
	padding: 0.2em;
	cursor: default;
	background-color: rgb(222, 222, 222);
}
.MasterDialogCheckBox .MasterDialogCheckBoxLabel
{
	color: rgb(177, 66, 66);
	transition: color 0.3s;
	-webkit-transition: color 0.3s;	/* Safari */
}
.MasterDialogCheckBox:hover .MasterDialogCheckBoxLabel		{color: rgb(255, 13, 13);}
.MasterDialogCheckBoxDisabled .MasterDialogCheckBoxLabel	{color: rgb(177, 177, 177); cursor: default;}
.MasterDialogCheckBoxTextStyleSizer
{
	width: 0.75em;
	height: 0.75em;
	min-width: 0.75em;
	min-height: 0.75em;
	max-width: 0.75em;
	max-height: 0.75em;
	overflow: hidden;
	display: inline-block;
}
.MasterDialogCheckBox label
{
	color: rgb(128, 0, 0);
	vertical-align: middle;
	padding-left: 0.5em;
	transition: color 0.3s;
	-webkit-transition: color 0.3s;
}
.MasterDialogCheckBox label:hover					{color: rgb(255, 13, 13); cursor: pointer;}
.MasterDialogCheckBox input[type="checkbox"]		{vertical-align: middle;}
.MasterDialogCheckBox input[type="checkbox"]:hover	{cursor: pointer;}

/*****************************************************************************************
**                                   Dialog Captcha                                     **
*****************************************************************************************/

.MasterDialogCaptcha
{
	border: 0.05em solid rgb(177, 177, 177);
	padding: 0.45em;
	background-color: rgb(234, 234, 234);
}

/*****************************************************************************************
**                                 Dialog Tab Control                                   **
*****************************************************************************************/

.MasterDialogTabControl
{
}
.MasterDialogTabControlTabRow
{
	display: grid;
	grid-template-columns: min-content min-content min-content 1fr;
	grid-template-rows: min-content;
	font-weight: bold;
}
.MasterDialogTabControlTab
{
	margin-top: 0.5em;
	border-style: solid;
	border-width: 0.05em;
	border-color: rgb(177, 177, 177);
	border-radius: 0.5em 0.5em 0 0;
	padding: 0.45em 0.9em;
	color: rgb(177, 66, 66);
	background-color: rgb(225, 225, 225);
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.3s, background-color 0.3s;
	-webkit-transition: color 0.3s, background-color 0.3s;	/* Safari */
}
.MasterDialogTabControlTab:hover
{
	color: rgb(255, 13, 13);
	background-color: rgb(244, 244, 244);
}
.MasterDialogTabControlTabSelected
{
	border-style: solid;
	border-width: 0.05em 0.05em 0 0.05em;
	border-color: rgb(177, 177, 177);
	border-radius: 0.5em 0.5em 0 0;
	padding: 0.7em 0.9em;
	color: rgb(128, 0, 0);
	background-color: rgb(234, 234, 234);
	white-space: nowrap;
}
.MasterDialogTabControlTabDisabled
{
	margin-top: 0.5em;
	border-style: solid;
	border-width: 0.05em;
	border-color: rgb(177, 177, 177);
	border-radius: 0.5em 0.5em 0 0;
	padding: 0.45em 0.9em;
	color: rgb(177, 177, 177);
	background-color: rgb(225, 225, 225);
	white-space: nowrap;
}
.MasterDialogTabControlTabDelimiter
{
	border-style: solid;
	border-width: 0 0 0.05em 0;
	border-color: rgb(177, 177, 177);
}
.MasterDialogTabControlTabPanes
{
	border-style: solid;
	border-width: 0 0.05em 0.05em 0.05em;
	border-color: rgb(177, 177, 177);
	border-radius: 0 0 0.5em 0.5em;
	background-color: rgb(234, 234, 234);
}
.MasterDialogTabControlPane			{overflow: auto; padding: 1em;}
.MasterDialogTabControlPaneHidden	{overflow: auto; display: none;}

/*****************************************************************************************
**                                 Dialog Online Map                                    **
*****************************************************************************************/

.MasterDialogOnlineMap
{
	position: relative;
	border: 0.1em solid rgb(225, 225, 225);
}
.MasterDialogOnlineMapPosition
{
	/* Values match the generated "(c) OpenStreetMaps contributors" element. */
	position: absolute;
	border: 1px solid #999999;
	color: #333333;
	background-color: #EEEEEE;
	padding: 2px;
	top: 3px;
	right: 3px;
	font-size: 10px;
	font-weight: normal;
	filter:  alpha(opacity = 60);
	opacity: 0.6;
}

/*****************************************************************************************
**                                                                                      **
**                                  Message Boxes                                       **
**                                                                                      **
*****************************************************************************************/

.MasterMessage										{min-width: 45em; width: 50%;}
.MasterMessage > div								{display: table; width: 100%;}
.MasterMessageMaximized								{}
.MasterMessage .MasterMessageIcon
{
	display: table-cell;
	width: 4em;
	padding: 1em;
	text-align: center;
	vertical-align: top;
}
.MasterMessageMaximized .MasterMessageIcon
{
	padding: 1em;
	text-align: center;
}
.MasterMessage .MasterMessageText
{
	display: table-cell;
	width: 100%;
	padding: 0 0 0 1em;
	vertical-align: top;
	overflow: auto;
}
.MasterMessageMaximized .MasterMessageText			{padding: 1em;}
.MasterMessageIcon img								{width: 4em; height: 4em;}
.MasterMessageText h1								{font-size: 1.4em; font-variant: small-caps; margin: 0 0 0.5em 0;}
.MasterMessageText h2								{font-size: 0.9em; margin: 0.5em 0 0 0; font-weight: bold; color: #800000;}
.MasterMessageText h3								{font-size: 0.9em; margin: 0.5em 0 0 0; font-weight: bold;}
.MasterMessageText p								{font-size: 0.9em; margin: 0.5em 0 0 0;}
.MasterMessage .MasterMessageBoxButtonRow			{clear: both; text-align: right; padding-top: 1em;}
.MasterMessageMaximized .MasterMessageBoxButtonRow	{clear: both; text-align: center; padding-top: 1em;}

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

.MasterMiniMessage					{}
.MasterMiniMessageContent
{
	position: fixed;
	padding: 1em;
	color: rgb(0, 0, 0);
	background-color: rgb(255, 255, 255);
	font-size: 0.9em;
	z-index: 25;
	box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 0, 0.3);
}
.MasterMiniMessageContent a:link
{
	color: rgb(199, 55, 55);
	text-decoration: none;
	cursor: pointer;
	transition: color 0.3s;
	-webkit-transition: color 0.3s;	/* Safari */
}
.MasterMiniMessageContent a:active	{color: rgb(255, 13, 13);}
.MasterMiniMessageContent a:visited	{color: rgb(177, 66, 66);}
.MasterMiniMessageContent a:hover	{color: rgb(255, 13, 13);}
.MasterMiniMessageContent h1		{font-weight: bold;}
.MasterMiniMessageContent p			{}
.MasterMiniMessageContent ul		{margin-top: 0.25em; padding-left: 1.5em; list-style-type: disc; list-style-position: outside;}
.MasterMiniMessageContent li		{font-size: 0.8em;}

.MasterMiniMessageModalPane			{z-index: 25; opacity: 0.01;}	/* Certain browsers does not render fully transparent elements */
.MasterMiniInfoMessage				{border: 0.25em solid rgb(0, 0, 102);}
.MasterMiniErrorMessage				{border: 0.25em solid rgb(177, 66, 66);}
.MasterBubbleNoCallout				{border-radius: 1.5em;}
.MasterBubbleTopLeftCallout			{border-radius: 0 2em 2em 2em;}
.MasterBubbleTopRightCallout		{border-radius: 2em 0 2em 2em;}
.MasterBubbleBottomLeftCallout		{border-radius: 2em 2em 2em 0;}
.MasterBubbleBottomRightCallout		{border-radius: 2em 2em 0 2em;}

/*****************************************************************************************
**                                                                                      **
**                                 Specific dialogs                                     **
**                                                                                      **
**    Width of Label + Textbox = [defined widths] + 1.5em (label) + 1.5em (textbox)     **
**        Total width (label/text) = width label + width text + 5em (paddings)          **
**    Add 0.1-0.2 to total width to allow browsers slack on accuracy (Chrome fails)     **
**                                                                                      **
**           Content height = total height - 2.5em (header) - 4.5em (footer)            **
**              Total height = content height + 7.0em (header + footer)                 **
**                                                                                      **
*****************************************************************************************/

.MasterLogonForm																		{width: 35.1em;}	/* Label + TextBox + 6 + slack */
.MasterLogonFormMaximized																{}
.MasterLogonFormContent																	{}
.MasterLogonFormContentMaximized														{}
.MasterLogonFormContent .MasterLogonFormLabel											{width: 10em;}
.MasterLogonFormContentMaximized .MasterLogonFormLabel									{}
.MasterLogonFormContent .MasterLogonFormTextBox											{width: 19em;}
.MasterLogonFormContentMaximized .MasterLogonFormTextBox								{width: 94%;}

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

.MasterRememberMeWarning																{width: 27em;}
.MasterRememberMeWarningMaximized														{}
.MasterRememberMeWarningContent															{padding: 1.0em;}
.MasterRememberMeWarningContentMaximized												{padding: 1.0em;}

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

.MasterSignUpForm																		{width: 46.2em;}	/* Label + TextBox + 5 + slack */
.MasterSignUpFormMaximized																{padding: 1em 1em 1em 2em;}
.MasterSignUpFormContent																{}
.MasterSignUpFormContentMaximized														{}
.MasterSignUpFormContent .MasterSignUpFormLabel											{width: 10em;}
.MasterSignUpFormContentMaximized .MasterSignUpFormLabel								{}
.MasterSignUpFormContent .MasterSignUpFormTextBox										{width: 30em;}
.MasterSignUpFormContentMaximized .MasterSignUpFormTextBox								{width: 94%;}
.MasterSignUpFormCaptchaTable td:nth-child(1)											{padding-bottom: 0.5em;}
.MasterSignUpFormCaptchaTable td:nth-child(2)											{padding-bottom: 0.5em; vertical-align: middle; text-align: center;}
.MasterSignUpFormCaptchaTable td:nth-child(2) div										{margin-left: 0.25em; max-width: 5em; white-space: normal;}

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

.MasterSignUpApproval																	{width: 25em;}
.MasterSignUpApprovalMaximized															{}
.MasterSignUpApprovalContent															{}
.MasterSignUpApprovalContentMaximized													{padding: 1.0em;}

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

.MasterRecoverPasswordForm																{width: 46.2em;}	/* Label + TextBox + 5 + slack */
.MasterRecoverPasswordFormMaximized														{}
.MasterRecoverPasswordFormContent														{}
.MasterRecoverPasswordFormContentMaximized												{padding: 1.0em;}
.MasterRecoverPasswordFormContent .MasterRecoverPasswordFormLabel						{width: 10em;}
.MasterRecoverPasswordFormContentMaximized .MasterRecoverPasswordFormLabel				{}
.MasterRecoverPasswordFormContent .MasterRecoverPasswordFormTextBox						{width: 30em;}
.MasterRecoverPasswordFormContentMaximized .MasterRecoverPasswordFormTextBox			{width: 94%;}
.MasterRecoverPasswordFormCaptchaTable td:nth-child(1)									{padding-bottom: 0.5em;}
.MasterRecoverPasswordFormCaptchaTable td:nth-child(2)									{padding-bottom: 0.5em; vertical-align: middle; text-align: center;}
.MasterRecoverPasswordFormCaptchaTable td:nth-child(2) div								{margin-left: 0.25em; max-width: 5em; white-space: normal;}

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

.MasterRecoverPasswordApproval															{width: 46.2em;}	/* Label + TextBox + 5 + slack */
.MasterRecoverPasswordApprovalMaximized													{}
.MasterRecoverPasswordApprovalContent													{}
.MasterRecoverPasswordApprovalContentMaximized											{padding: 1.0em;}
.MasterRecoverPasswordApprovalContent .MasterRecoverPasswordApprovalLabel				{width: 15em;}
.MasterRecoverPasswordApprovalContentMaximized .MasterRecoverPasswordApprovalLabel		{}
.MasterRecoverPasswordApprovalContent .MasterRecoverPasswordApprovalTextBox				{width: 25em;}
.MasterRecoverPasswordApprovalContentMaximized .MasterRecoverPasswordApprovalTextBox	{width: 94%;}

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

.MasterContactForm																		{width: 50.2em;}
.MasterContactFormMaximized																{}
.MasterContactFormContent																{padding: 1.0em 0;}
.MasterContactFormContentMaximized														{padding: 1.0em;}
.MasterContactFormContent .MasterContactFormLabel										{width: 12em;}
.MasterContactFormContentMaximized .MasterContactFormLabel								{}
.MasterContactFormContent .MasterContactFormTextBox										{width: 30em;}
.MasterContactFormContentMaximized .MasterContactFormTextBox							{width: 94%;}
.MasterContactFormCaptchaTable td:nth-child(1)											{padding-bottom: 0.5em;}
.MasterContactFormCaptchaTable td:nth-child(2)											{padding-bottom: 0.5em; vertical-align: middle; text-align: center;}
.MasterContactFormCaptchaTable td:nth-child(2) div										{margin-left: 0.25em; max-width: 5em; white-space: normal;}
.MasterContactFormAddress img															{width: 7em; height: 7em; padding-bottom: 2em;}
.MasterContactFormContent .MasterContactFormAddress										{width: 12em; height: 25em; white-space: nowrap;}
.MasterContactFormContentMaximized .MasterContactFormAddress							{}
.MasterContactFormMap																	{padding: 0 0 0 1em; float: left; display: inline-block;}

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

.MasterLegalForm																		{width: 53em;}
.MasterLegalFormMaximized																{}
.MasterLegalFormContent																	{padding: 1.0em;}
.MasterLegalFormContentMaximized														{padding: 1.0em;}
.MasterLegalFormContent .MasterLegalTextBox												{height: 28em;}
.MasterLegalFormContentMaximized .MasterLegalTextBox									{}

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

.MasterViewStateForm																	{width: 53em; opacity: 1.0;}
.MasterViewStateFormMaximized															{}
.MasterViewStateFormContent																{padding: 1.0em;}
.MasterViewStateFormContentMaximized													{padding: 1.0em;}
.MasterViewStateFormContent .MasterViewStateFormCheckBox								{width: 33%; float: left;}
.MasterViewStateFormContentMaximized .MasterViewStateFormCheckBox						{}
.MasterViewStateFormContent .MasterViewStateTextBox										{width: 46em; height: 25em;}
.MasterViewStateFormContentMaximized .MasterViewStateTextBox							{}
.MasterViewStateTextBox
{
	margin: 1em 0;
	border: 0.5em solid rgba(244, 244, 244, 0.0);	/* Fake padding so that the scrollbar is "padded" inside the box */
	background-color: rgb(244, 244, 244);
	overflow: auto;
}
.MasterViewStateTextBox::-webkit-scrollbar												{width: 0.5em; height: 0.5em;}
.MasterViewStateTextBox > div
{
	clear: both;
	box-sizing: border-box;
	border-width: 0 1.5em 0 0;
	border-style: solid;
	border-color: rgba(225, 225, 225, 0);
	overflow: auto;
}
.MasterViewStateTextBox > div::-webkit-scrollbar										{width: 0.5em; height: 0.5em;}
.MasterViewStateTextBox table
{
	width: 100%;
	border: 2px solid rgb(128, 0, 0);
}
.MasterViewStateTextBox th
{
	border: 1px solid rgb(128, 128, 128);
	padding: 0.2em 0.5em;
	font-weight: bold;
	background-color: rgb(225, 225, 225);
	white-space: nowrap;
}
.MasterViewStateTextBox td
{
	border: 1px solid rgb(128, 128, 128);
	padding: 0.2em 0.5em;
}
.MasterViewStateTextBox .header															{margin: 1em 0;}
.MasterViewStateTextBox .header th:last-child											{width: 100%;}
.MasterViewStateTextBox .controldata													{margin: 1em 0;}
.MasterViewStateTextBox .controldata td:first-child										{white-space: nowrap;}
.MasterViewStateTextBox .controldata th:last-child										{width: 100%;}
.MasterViewStateTextBox .controldata .changed											{font-weight: bold; color: rgb(128, 0, 0);}
.MasterViewStateTextBox .slfstate														{margin: 1em 0;}
.MasterViewStateTextBox .slfstate td:first-child										{text-align: center;}
.MasterViewStateTextBox .browserinfo													{margin: 1em 0;}

/*****************************************************************************************
**                                                                                      **
**                               Master Legal Texts                                     **
**                                                                                      **
*****************************************************************************************/

.MasterLegalTextBox
{
	padding-right: 0.5em;
	font-size: 1em;
	overflow: auto;
}
.MasterLegalTextBox h1
{
	margin-top: 1em;
	margin-bottom: 1em;
	font-size: 1em;
	font-weight: bold;
}
.MasterLegalTextBox h2
{
	display: block;
	margin-bottom: 1em;
	border: 0.25em solid rgb(128, 0, 0);
	border-radius: 0.5em;
	padding: 1em;
	color: rgb(244, 44, 44);
	font-size: 0.8em;
	font-weight: bold;
}
.MasterLegalTextBox p
{
	margin-bottom: 0.5em;
	font-size: 0.8em;
}
.MasterLegalTextBox ul
{
	padding-left: 2em;
	list-style-type: disc;
	list-style-position: outside;
}
.MasterLegalTextBox li
{
	margin-bottom: 0.5em;
	font-size: 0.8em;
}
.MasterLegalTextBox::-webkit-scrollbar
{
	width: 0.5em;
	height: 0.5em;
	background-color: rgb(234, 234, 234);
}
.MasterLegalTextBox::-webkit-scrollbar-thumb
{
	background-color: rgb(177, 66, 66);
}

/*****************************************************************************************
******************************************************************************************
**                                                                                      **
**                                                                                      **
**                               ContentPage related                                    **
**                                                                                      **
**                                                                                      **
******************************************************************************************
*****************************************************************************************/

.MasterContent
{
	color: rgb(0, 0, 0);
	background-color: rgb(255, 255, 255);
	min-height: 100vh;
	z-index: 5;
}
.MasterContent a:link
{
	color: rgb(199, 55, 55);
	text-decoration: none;
	cursor: pointer;
	transition: color 0.3s;
	-webkit-transition: color 0.3s;	/* Safari */
}
.MasterContent a:active		{color: rgb(255, 13, 13);}
.MasterContent a:visited	{color: rgb(177, 66, 66);}
.MasterContent a:hover		{color: rgb(255, 13, 13);}

/*****************************************************************************************
**                                  Header Section                                      **
*****************************************************************************************/

.ContentBodyHeader
{
	height: 100vh;
	overflow: hidden;
	box-sizing: border-box;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	background-size: cover;
}
.ContentBodyHeader table
{
	width: 100%;
	height: inherit;
}
.ContentBodyHeader td
{
	padding: 0.5em;
	font-size: 1.6em;
	font-weight: bold;
	font-style: italic;
}
.ContentBackgroundNwlbg		/* NO water-life-blue-green overlay to background splash screens */
{
	display: inline-block;
	width: 9em;
	height: 5em;
	background-image: url('/Images/Illustrations/No water no life.png');
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
}

/*****************************************************************************************
**                                 Content Section                                      **
*****************************************************************************************/

.ContentBodySection
{
	padding: 3em 3em 0 3em;
}

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

.ContentBodySectionTextWide
{
	width: 60%;
}
.ContentBodySectionImageWide
{
	width: 40%;
	overflow: hidden;
	box-sizing: border-box;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	background-size: cover;
}

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

.ContentBodySectionTextNarrow
{
}
.ContentBodySectionImageNarrow
{
	height: 20em;
	overflow: hidden;
	box-sizing: border-box;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	background-size: cover;
}

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

.ContentBodySectionTextHeader
{
	padding-bottom: 0.5em;
	color: rgb(0, 0, 0);
	font-size: 1.4em;
	font-variant: small-caps;
}
.ContentBodySectionTextBody
{
	padding-top: 0.5em;
}
.ContentBodySectionTextBody p
{
	font-size: 0.9em;
	padding-top: 0.5em;
}
.ContentBodySectionTextBody ul			{margin-top: 0.25em; padding-left: 1.5em; list-style-type: disc; list-style-position: outside;}
.ContentBodySectionTextBody li			{font-size: 0.9em;}
.ContentBodySectionTextBody div			{width: 100%; text-align: center;}				/* For illustrations within the text. Div expected to have three elements: IMG - BR - SPAN. */
.ContentBodySectionTextBody div img		{width: 70%;}
.ContentBodySectionTextBody div span	{font-size: 0.7em; font-style: italic;}

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

.ContentBodySectionDelimiter
{
	height: 0;
}

/*****************************************************************************************
**                                                                                      **
**                               Default (home) page                                    **
**                                                                                      **
*****************************************************************************************/

.ContentDefaultHeaderBackground												{background-image: url(/Images/Backgrounds/UnderwaterWorld.jpg);}
.ContentDefaultHeaderBackgroundEdge											{height: 10%; color: rgb(0, 0, 0); text-align: right; vertical-align: bottom;}
.ContentDefaultHeaderBackgroundCenter										{height: 80%; color: rgb(3, 25, 38); text-align: center; vertical-align: middle;}
.ContentDefaultHeaderBackgroundNwNlNbNg										{display: inline-block; color: rgb(225, 225, 225);}
.ContentDefaultHeaderBackgroundNwNlNbNg a:link								{color: rgb(255, 255, 255); text-decoration: none; cursor: pointer; transition: color 0.3s; -webkit-transition: color 0.3s;}
.ContentDefaultHeaderBackgroundNwNlNbNg a:active							{color: rgb(255, 255, 255); text-decoration: none; cursor: pointer;}
.ContentDefaultHeaderBackgroundNwNlNbNg a:visited							{color: rgb(255, 255, 255); text-decoration: none; cursor: pointer;}
.ContentDefaultHeaderBackgroundNwNlNbNg a:hover								{color: rgb(255, 255, 0);   text-decoration: underline; cursor: pointer;}
.ContentDefaultHeaderBackgroundNwNlNbNg div									{background-repeat: no-repeat; background-size: 100%; border-color: rgba(0, 0, 0, 0); border-style: solid;}

.ContentDefaultHeaderBackgroundNoWater										{width: 12em;   height: 8em; clear: both; float: left;  border-width: 0.5em 0.5em 0.5em 0.5em; background-image: url(/Images/Sides/NoWater.png);	background-position: right bottom;}
@media (max-width: 800px)	{.ContentDefaultHeaderBackgroundNoWater			{width: 12em;   height: 8em; clear: both;               border-width: 0.5em 0.5em 0.5em 0.5em; background-image: url(/Images/Sides/NoWater.png);	background-position: center center;}}
.ContentDefaultHeaderBackgroundNoLife										{width: 12em;   height: 8em; float: right;              border-width: 0.5em 0.5em 0.5em 0;     background-image: url(/Images/Sides/NoLife.png);		background-position: left bottom;}
@media (max-width: 800px)	{.ContentDefaultHeaderBackgroundNoLife			{width: 12em;   height: 8em; clear: both;               border-width: 0 0.5em 0.5em 0.5em;     background-image: url(/Images/Sides/NoLife.png);		background-position: center center;}}
.ContentDefaultHeaderBackgroundNoBlue										{width: 12em;   height: 8em; clear: both; float: left;  border-width: 0 0.5em 0.5em 0.5em;     background-image: url(/Images/Sides/NoBlue.png);		background-position: right top;}
@media (max-width: 800px)	{.ContentDefaultHeaderBackgroundNoBlue			{width: 12em;   height: 8em; clear: both;               border-width: 0 0.5em 0.5em 0.5em;     background-image: url(/Images/Sides/NoBlue.png);		background-position: center center;}}
.ContentDefaultHeaderBackgroundNoGreen										{width: 12em;   height: 8em; float: right;              border-width: 0 0.5em 0.5em 0;         background-image: url(/Images/Sides/NoGreen.png);	background-position: left top;}
@media (max-width: 800px)	{.ContentDefaultHeaderBackgroundNoGreen			{width: 12em;   height: 8em; clear: both;               border-width: 0 0.5em 0.5em 0.5em;     background-image: url(/Images/Sides/NoGreen.png);	background-position: center center;}}
.ContentDefaultHeaderBackgroundQuote										{width: 24.5em; height: 1em; clear: both;               border-width: 0 0.5em;                 background-color: rgba(0, 0, 0, 0.3);}
@media (max-width: 800px)	{.ContentDefaultHeaderBackgroundQuote			{width: 12em;   height: 1em; clear: both;               border-width: 0 0.5em;                 background-color: rgba(0, 0, 0, 0.3);}}

.ContentDefaultHeaderBackgroundNoWater p									{font-size: 0.9em; text-align: right;  padding: 7em 1em 1em 1em;}
@media (max-width: 800px)	{.ContentDefaultHeaderBackgroundNoWater p		{font-size: 0.9em; text-align: left;   padding: 0.5em 1em 7em 1em}}
.ContentDefaultHeaderBackgroundNoLife p										{font-size: 0.9em; text-align: left;   padding: 7em 1em 1em 1em;}
@media (max-width: 800px)	{.ContentDefaultHeaderBackgroundNoLife p		{font-size: 0.9em; text-align: left;   padding: 0.5em 1em 7em 1em}}
.ContentDefaultHeaderBackgroundNoBlue p										{font-size: 0.9em; text-align: right;  padding: 0.5em 1em 7em 1em;}
@media (max-width: 800px)	{.ContentDefaultHeaderBackgroundNoBlue p		{font-size: 0.9em; text-align: left;   padding: 0.5em 1em 7em 1em}}
.ContentDefaultHeaderBackgroundNoGreen p									{font-size: 0.9em; text-align: left;   padding: 0.5em 1em 7em 1em;}
@media (max-width: 800px)	{.ContentDefaultHeaderBackgroundNoGreen p		{font-size: 0.9em; text-align: left;   padding: 0.5em 1em 7em 1em;}}
.ContentDefaultHeaderBackgroundQuote p										{font-size: 0.4em; text-align: right;  padding: 0.5em; white-space: nowrap;}
@media (max-width: 800px)	{.ContentDefaultHeaderBackgroundQuote p			{font-size: 0.4em; text-align: center; padding: 0.5em; white-space: nowrap;}}

.ContentDefaultSectionImage_WhoIsMicrochange								{background-image: url(/Images/Sides/SunsetOverSeaAndRocks.png);}
.ContentDefaultSectionImage_Freshwater										{background-image: url(/Images/Sides/freshwater.jpg);}
.ContentDefaultSectionImage_Adsorption										{background-image: url(/Images/Sides/Adsorption.jpg); background-position: center center;}
.ContentDefaultSectionImage_SeaWater										{background-image: url(/Images/Sides/SalineWater.jpg); background-position: center top;}
.ContentDefaultSectionImage_MechanicalFiltration							{background-image: url(/Images/Sides/MechFiltration.jpg); background-position: center top;}

/*****************************************************************************************
**                                                                                      **
**                                     Sea page                                         **
**                                                                                      **
*****************************************************************************************/

.ContentSeaHeaderBackground													{background-image: url(/Images/Backgrounds/matt-alaniz-G8Fy93Jwfl8-unsplash.jpg);}
.ContentSeaHeaderBackgroundEdge												{height: 10%; color: rgb(255, 255, 255); text-align: right; vertical-align: bottom;}
.ContentSeaHeaderBackgroundCenter											{height: 80%; color: rgb(3, 25, 38); text-align: left; vertical-align: middle;}
.ContentSeaHeaderBackgroundNwlbg											{height: 100%; text-align: left; vertical-align: bottom;}

.ContentSeaSectionImage_SeawaterExtended									{background-image: url(/Images/Sides/WaterCycle.png); background-size: contain;}
.ContentSeaSectionImage_MechanicalFiltrationExtended						{background-image: url(/Images/Sides/Microplastics.png);}

/*****************************************************************************************
**                                                                                      **
**                                     Land page                                        **
**                                                                                      **
*****************************************************************************************/

.ContentLandHeaderBackground												{background-image: url(/Images/Backgrounds/anne-nygard-XTFSj7pFIf8-unsplash.jpg);}
.ContentLandHeaderBackgroundEdge											{height: 10%; color: rgb(0, 0, 0); text-align: right; vertical-align: bottom;}
.ContentLandHeaderBackgroundCenter											{height: 80%; color: rgb(3, 25, 38); text-align: right; vertical-align: middle;}
.ContentLandHeaderBackgroundNwlbg											{height: 100%; text-align: right; vertical-align: top;}

.ContentLandSectionImage_FreshwaterExtended									{background-image: url(/Images/Sides/Eutrophication.png); background-size: contain;}
.ContentLandSectionImage_AdsorptionExtended									{background-image: url(/Images/Sides/AdDeSorption.png); background-size: contain;}

/*****************************************************************************************
**                                                                                      **
**                                    Consult page                                      **
**                                                                                      **
*****************************************************************************************/

.ContentConsultHeaderBackground												{background-image: url(/Images/Backgrounds/rephile-water-cuqp2Jzz_lY-unsplash.jpg);}
.ContentConsultHeaderBackgroundEdge											{height: 10%; color: rgb(255, 255, 255); text-align: right; vertical-align: bottom;}
.ContentConsultHeaderBackgroundCenter										{height: 80%; color: rgb(3, 25, 38); text-align: left; vertical-align: middle;}
.ContentConsultHeaderBackgroundNwlbg										{height: 100%; text-align: left; vertical-align: top;}

.ContentConsultSectionImage_ConsultingServices								{background-image: url(/Images/Sides/Consulting.png);}

/*****************************************************************************************
**                                                                                      **
**                                     About page                                       **
**                                                                                      **
*****************************************************************************************/

.ContentAboutHeaderBackground												{background-image: url(/Images/Backgrounds/mrjn-photography-YpZ2cj4s0oo-unsplash.jpg);}
.ContentAboutHeaderBackgroundEdge											{height: 10%; color: rgb(255, 255, 255); text-align: right; vertical-align: bottom;}
.ContentAboutHeaderBackgroundCenter											{height: 80%; color: rgb(3, 25, 38); text-align: right; vertical-align: middle;}
.ContentAboutHeaderBackgroundNwlbg											{height: 100%; text-align: right; vertical-align: top;}

.ContentAboutSectionImage_AboutMicrochange									{background-image: url(/Images/Sides/MicrochangeLab.png);}

.ContentAboutSectionTeamHeader												{text-align: center;}
.ContentAboutTeamSection													{margin: 0 auto; width: 60%;}
.ContentAboutTeamSection table												{width: 100%;}
.ContentAboutSectionImageWide												{width: 12em; height: 12em;}
.ContentAboutSectionImageNarrow												{width: 12em; height: 12em;}
.ContentAboutSectionImage_TeamSoren											{background-image: url(/Images/People/Soren.png);}
.ContentAboutSectionImage_TeamSarah											{background-image: url(/Images/People/Sarah.png);}
.ContentAboutSectionImage_TeamHenrik										{background-image: url(/Images/People/Henrik.png);}