:root
{
	--font-colour-normal-inverted:255,255,255; /* off-white */
	--heading-colour:215,243,10; /* bright green */
	--messages-text-colour:204,204,204; /* off-white */
	--highlight-background-colour:102,102,102; /* medium grey */
	--positive-colour:141,163,48; /* green */
	--negative-colour:192,88,67; /* red */
	--warning-colour:220,155,88; /* orange */
	--border-colour:85,85,85; /* dark grey */
	--border-colour-inverted:160,160,160; /* light grey */
	--pagination-list-a-current-colour:0,0,0;
	--pagination-list-a-current-background-colour:var(--heading-colour);
	--messages-colour:255,255,255;
}
body
{
	counter-reset:reference;
}
/* Set the page printing size defaults. */
@page
{
	size:letter;
}

/* User menu */

.menu-user
{
	display:block;
	position:sticky;
	top:0px;
	padding:5px 8% 8px; /* This padding should approximately match .breadcrumb. */
	border-bottom:1px solid rgb(221,221,221);
	border-bottom:1px solid rgb(var(--border-colour));
	margin-bottom:-8px; /* Overlapp the rest of the header slightly. */
	z-index: 1;

	background-color:rgb(var(--highlight-background-colour));
	box-shadow:0px 0px 20px rgba(0,0,0,.2);
	color:rgb(var(--font-colour-normal-inverted));
}
.menu-user::after
{
	content:"";
	display:block;
	clear:both;
}
.menu-user li
,.menu-user p
,body.paper .menu-user li /* Increase specificity enough to override the rules from "body.paper p" and "body.paper li" (in theme.css). */
,body.paper .menu-user p /* Increase specificity enough to override the rules from "body.paper p" and "body.paper li" (in theme.css). */
{
	margin:0;
}
.menu-user a
,.menu-user a:link
.menu-user a:visited:hover
{
	color:rgb(var(--heading-colour)); /*Green*/
}
.menu-user a:visited
{
	color:rgb(var(--a-visited-colour)); /*Blue*/
}

@media screen and (min-width:480px)
{
	.menu-user
	{
		padding-left:35px;
		padding-right:15px;
	}
}
@media print
{
	.menu-user
	{
		display:none;
	}
}

/* Popup dialogue boxes */

.popup
{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	
	z-index:5;
}
.popup-overlay
{
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	
	background-color:rgb(0,0,0);
	filter:alpha(opacity=30); /* IE */
	-moz-opacity:.3; /* Mozilla/Netscape */
	opacity:.3; /* Opera + W3C standard  */
}
.popup-dialogue-positioner
{
	position:absolute;
	top:25%;
	width:100%;
}
.popup-dialogue-positioner.fixed
{
	position:fixed;
	top:10%;
}
.popup-dialogue
{
	width:450px;
	max-width:90%;
	margin:0 auto 15px;
	padding:20px 25px 40px;
	
	background-color:rgb(255,255,255);
	box-shadow:0 0 20px rgba(0,0,0,.3);
	overflow-wrap: break-word;
}
.popup-dialogue.wide
{
	width:600px;
}

.popup-dialogue h1
,.popup-dialogue h2
,.popup-dialogue h3
,.popup-dialogue h4
,.popup-dialogue h5
,.popup-dialogue h6
{
	margin-bottom:.6em;

	color:rgb(var(--highlight-background-colour));
	font-weight:bold;
}
.popup-dialogue p
{
	margin-bottom:1em;
}

/* Forms */

.button-container
{
	margin-top:1em;
}
.field
{
	display:block;
	margin-bottom:5px;
	clear:both;
}
.field .label
{
	display:block;
	position:relative;
	margin-bottom:5px;
}
.field-space
{
	margin-bottom:5px;
}
/* If the field content contains a floated item that is cleared (like list items), this prevents clear from pushing it below the label contents. */
.field-float
{
	float:left;
	width:100%;	
}

.tiny
{
	width: 35px;
}
.smallest
{
	width: 70px;
}
.smaller
{
	width: 100px;
}
.small
{
	width: 200px;
}	
.medium.small
{
	width: 300px;
}
.medium
{
	width: 400px;
}
.large
{
	width: 600px;
}
.filefield
{
	margin-right: 40px;
}
.radio-field
{
	margin-left:25px;
}
.radio-field input[type='radio']
,.radio-field input[type='checkbox']
{
	position:absolute;
	left:-25px;
}
/* Use this class to cancel the effects of the radio-field class inside subelements of the radio-field class. */
.radio-field-cancel input[type='radio']
,.radio-field-cancel input[type='checkbox']
{
	position:static;
	left:auto
}
@media screen and (min-width:480px)
{
	.field
	{
		padding-left:200px;
	}
	.field::after
	{
		content:"";
		display:block;
		clear:both;
	}
	.field .label
	{
		float:left;
		width:180px; /* total width should match .field padding-left */
		left:-200px; /* match .field padding-left */
		margin-right:-200px; /* match .field padding-left */
		/* margin-left:-200px; match .field padding-left */ /* just using this, and not the two above, doesn't work in IE6 */
		padding:0px 20px 0px 0px;
	}
	.field.narrow
	{
		padding-left:110px;
	}
	.field.narrow .label
	{
		width:100px;
		padding-right:10px;
		left:-110px;
	}
	.field.full
	{
		padding-left:0;
	}
	.field.full .label
	{
		float:none;
		width:auto;
		left:0;
		margin-right:0;
		padding:0;
	}
}
@media screen and (max-width:800px)
{
	/* At screen widths of less than 800px, display any fields within a column as narrow fields. */
	.column .field
	{
		padding-left:110px;
	}
	.column .field .label
	{
		width:100px;
		padding-right:10px;
		left:-110px;
	}
}

/* ProgressBar */

.progress
{
	display:inline-block;
	width:150px;
	height:15px;
	margin:-5px 7px 0 0;
	padding:0;
	vertical-align: middle;
	
	border-width:0;
	background-image: url("images/content/progress/background.png");
	background-repeat: no-repeat;
	background-size: cover;
}
.progress-content
{
	display:block;
	width:100%;
	height:15px;
	margin:0;
	padding:0;
	
	border:1px solid rgb(85,85,85);
	background-image: url("images/content/progress/bar.png");
	background-repeat: no-repeat;
	background-size: cover;
}

/* Progress bar behind text */
.progress-text
{
	display:inline-block;
	padding:0px 20px 1px 3px;
	border:1px solid rgb(var(--border-colour-inverted));

	background-image: linear-gradient(to right, rgba(var(--border-colour-inverted),.2),rgba(var(--border-colour-inverted),.5));
	background-repeat: no-repeat;
}

/* Messages */
	
#messages
{
	position:absolute;
	width:100%;
	margin:0;
	padding:0;
	top:14%; /* If this value is changed, the calculated position in Core.js must be updated too. */
	left:0;
	z-index:3;

	color:rgb(var(--messages-colour));
}
#messages
,#messages a
,#messages a:link
{
	color:rgb(var(--messages-colour));
}
#messages a:hover
{
	color:rgb(var(--messages-colour),.6);
}
#messages.fixed
{
	position:fixed;
	top:5%;
}
#messages p
{
	margin:0px;
}
#messages p span
{
	color:rgb(var(--messages-text-colour));
}
#messages ul
,#messages ol
,#messages li
{
	margin-top:.3em;
	margin-bottom:.3em;
}
@media print
{
	#messages {
		display:none !important; /* When messages are displayed, this element get an inline style of display:block. This is important to override that. */
	}
}

div.alert-ok
,div.alert-wrong
,div.alert-tip
{
	width:75%;
	max-width:700px;
	margin:0 auto 15px;
}
.alert-ok
,.alert-wrong
,.alert-tip
{
	display:block;
	padding:10px 18px 10px 45px;
	background-position:10px -40px;
	background-repeat:no-repeat;
	box-shadow:0px 0px 40px rgba(0,0,0,.6);

	word-wrap:break-word;
	overflow-wrap:break-word;
}
.alert-ok
{
	background-color:rgb(var(--positive-colour));
	background-image:url("images/content/ok.png");
}
	
.alert-wrong
{
	background-color:rgb(var(--negative-colour));
	background-image:url("images/content/close.png");
}

.alert-tip
{
	background-color:rgb(var(--warning-colour));
	background-image:url("images/content/alert.png");
}

.alert-close
{
	display:block;
	float:right;
	margin-left:15px;
	z-index:1;
	/* text-shadow: 0 0 14px rgb(0,0,0); */
}

.field-alert-ok
,.field-alert-wrong
,.field-alert-tip
{
	display:inline-block;
	background-position:0px 0px;
	background-repeat:no-repeat;	
	border-width:0px;
	border-style:solid;
	padding-left:24px;
	min-height:20px;
	min-width:20px;
}
.field-alert-ok
{
	background-image:url("images/content/ok.png");
	border-color:rgb(var(--positive-colour));
}
	
.field-alert-wrong
{
	background-image:url("images/content/close.png");
	border-color:rgb(var(--negative-colour));
}

.field-alert-tip
{
	background-image:url("images/content/alert.png");
	border-color:rgb(var(--warning-colour));
}

/* Pagination */

.pagination
{
	margin:5px 0px;
	padding:5px 5px 0;
	background-color:rgb(var(--highlight-background-colour));
	border-width:1px;
}
.pagination-count
{
	float:left;
	padding:4px 20px 5px 0px; /* padding-top should add the padding-top of .pagination-list li a and the padding-top of .pagination list. */
}
.pagination-size
{
	float:left;
	padding:0 20px 5px 0;
}
.pagination-list
{
	float:right;
	padding:3px 0 5px 0;
	margin-top:-1px;
}
.pagination-list ul
{
	display:inline;
	margin:0;
}
.pagination-list .break
{
	display:inline-block;
	padding:2px 0px 3px 0px;
	margin:0px 2px 0px 0px;
	width:1.8em;
	height:1em;
	
	background-image:url("images/content/break.png");
	background-repeat:no-repeat;
	background-position:center -1px;
}
.pagination-list li
{
	display:inline-block;
	margin:0px;
	padding:0px;
	list-style:none;
}
.pagination-list li a
,.pagination-list li a:link
{
	display:inline-block;
	text-decoration:none;
	padding:2px 0px 3px 0px;
	margin:0px 2px 0px 0px;
	width:1.8em;
	border:none;
	
	text-align:center;

	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	-webkit-transition:color .3s ease, background-color .3s ease;
	-moz-transition:color .3s ease, background-color .3s ease;
	-o-transition:color .3s ease, background-color .3s ease;
	transition:color .3s ease, background-color .3s ease;
}
.pagination-list li a:hover
,.pagination-list li a:visited:hover
,.pagination-list li a:link:hover
,.pagination-list li.current a
{
	color:rgb(var(--pagination-list-a-current-colour));
	background-color:rgb(var(--pagination-list-a-current-background-colour));
}
.pagination-list li.current a
{
	cursor:default;
}
.pagination-size
{
	float:left;
}

.list-options
{
	margin: 5px 0 5px;
}
.list-options::after
{
	content:"";
	display:block;
	clear:both;
}
.list-sorting
,.list-filter
{
	display:inline-block;
	padding-right:20px;
}
.list-sorting ol.list-sorting-single li
{
	/* When sort multiple is disabled, display the currently selected sort column as a bullet. */
	list-style-type:disc;
}
.list-sorting ul li
,.list-filter ul li
{
	list-style-type: none;
}
.list-sorting-options
,.list-sorting-options.input /* Increase the specificity enough to override the ".input" style in theme.css. */
,.list-filter-options
{
	position:absolute;
	display:none;
	top:100%;
	left:-1px; /* Match the with of the border of .list-sorting-box. */
	border-width:1px;
	padding:.5em 10px 0 5px;
	z-index:2;
	max-width: none !important;
	
	background-color:rgb(255,255,255);
	white-space: nowrap;
	cursor:default;
}
.list-sorting-options ol
,.list-sorting-options ul
{
	margin-top:0;
	margin-bottom:0;
}
.list-filter-options ol
,.list-filter-options ul
{
	margin-top:0;
	margin-bottom:0;
	margin-left:0;
}
.list-sorting-options li
,.list-filter-options li
{
	margin:0 0 .5em;
}
.list-sorting-options a
,.list-sorting-options a:link
/* Increase the specificity enough to override the ".input" style in theme.css. */
,.list-sorting-options.input a
,.list-sorting-options.input a:link
{
	display: block;
	border-bottom-width:0;
	text-decoration: none;
}

.sortable
,a.sortable:visited
,a.sortable:hover
{
	color:inherit;
	text-decoration:none;
}
.sortable.south span::after
,.sortable.north span::after
{
	content:"";
	display:inline-block;
	position:relative;
	height: 14px;
	width:16px;
	right:0px;
	top:0px;
	margin-left:2px;

	/*
	padding-right:18px;
	*/
	
	background-image:url("images/content/sortable.png");
	background-position:right top;
	background-repeat:no-repeat;
	filter:invert(1); /* Turn the white image to black.*/
	cursor:pointer;
}
.sortable.south span::after
{
	background-position:right -150px;
}
.sortable.north span::after
{
	background-position:right -50px;
}

.list-include-deleted-option
{
	display:inline-block;
}

table.list
{
	width:100%;
}
th.inactive
{
	background-color:rgb(119,119,119);
}
tr.totals td
{
	border-width:0px;
}
.list-search
{
	float:left;
}
.list-actions
{
	float:right;
}
.list-actions input[type="button"]
,.list-actions input[type="submit"]
,.list-actions input[type="reset"]
{
	margin-right:0;
}
.list-item
{
	box-shadow: 0 0 10px rgba(0,0,0,.2);
}
.list-item
,a.list-item
,a.list-item:link
,a.list-item:visited
,a.list-item:hover
,a.list-item:visited:hover
/* Repeat the selectors above with increased specificity to override the ".content a:link" styles in theme.css. */
,.content .list-item
,.content a.list-item
,.content a.list-item:link
,.content a.list-item:visited
,.content a.list-item:hover
,.content a.list-item:visited:hover
{
	display:block;
	padding:10px 10px 5px;
	margin:8px 0;
	clear:both;
	
	border-width:1px;
	border-style:solid;
	border-color:rgb(85,85,85);
	border-color:rgb(var(--border-colour));
}
.list-item::after
{
	content:"";
	display:block;
	clear:both;
}
.list-item:hover
{
	background-color:rgba(255,255,255,.12);
}
.list-item.inactive:hover
{
	background-color:inherit;
}
@media print
{
	.list-item
	{
		box-shadow: none;
	}
	.list-item.print-friendly
	,a.list-item.print-friendly
	,a.list-item.print-friendly:link
	,a.list-item.print-friendly:visited
	,a.list-item.print-friendly:hover
	,a.list-item.print-friendly:visited:hover
	{
		padding-right:0;
		padding-bottom:0;
		padding-left:0;

		/* Lighten the top border so it's not so strong (using the same colour as .faded font-color) */
		border-top-color: rgb(191,191,191);
		/* Remove the padding and border everywhere except the top. */
		border-right-width: 0;
		border-bottom-width: 0;
		border-left-width: 0;
	}
	.list-item.print-friendly .list-item-image
	{
		/*
		Reduce the size of the list-item images for printing.
		*/
		width:30px;
		max-width: 30px;
	
		/*
		border-width:1px;
		border-style:solid;
		border-color:rgb(85,85,85);
		*/
	
	}
	.list-item.print-friendly .list-item-content
	,.list-item-static.print-friendly .list-item-content
	{
		margin-left:40px; /* This should match the full width of .list-item-image (30px) plus the margin (10px). */
	}
}


.list-item-static /* This is like .list-item, but doesn't change on hover. */
{
	display:block;
	padding:10px 2% 5px;
	margin:12px -2%;
	max-width: 104%;
	clear:both;
	
	background-color: rgb(127,127,127);
	border-width: 0;
	box-shadow: 0 0 8px rgba(0,0,0, 0.2);	display:block;
}
a.list-item-static
,a.list-item-static:link
{
	border-width: 0;
}
.list-item-static::after
{
	content:"";
	display:block;
	clear:both;
}
body.paper .list-item-static
{
	margin-left:0;
	margin-right:0;
	padding-left:0;
	padding-right:0;
	max-width:100%;

	background-color:transparent;
	box-shadow:none;
	border-top-width:1px;
}
.list-item-static.list-item-selected
{
	border-width:0px !important;
}

.list-item-large
{
	position:relative;
	display:inline-block;
	padding:0;
	margin:8px 5px 8px 0; /* Because the display is inline-block, the whitespace between the elements is rendered as an additional space between the boxes, about 3px. */
	width:46%;
	width:calc(50% - 8px); /* The total width should be 50% including the margin (5px) and the space between inline-block elements (2-3px). */
	max-width:150px;
	vertical-align: top;
	overflow:hidden;
	
	border-width:0;
	background-color:rgba(255,255,255,.12);
	box-shadow: 0 0 8px rgba(0,0,0, 0.2);
}
a.list-item-large
,a.list-item-large:link
,a.list-item-large:visited
,a.list-item-large:hover
,a.list-item-large:visited:hover
,.content a.list-item-large
,.content a.list-item-large:link
,.content a.list-item-large:visited
,.content a.list-item-large:hover
,.content a.list-item-large:visited:hover
{
	border-width:0;
}
.list-item-large::after
{
	content:"";
	display:block;
	clear:both;
}
.list-item-large.inactive:hover
{
	background-color:inherit;
}
.list-item-large .list-item-image
{
	display:block;
	width:100%;
	max-width:100%;
	margin:0;
}
.list-item-large .list-item-image img
{
	width:100%;
	max-width:100%;
	margin:0;
}
.list-item-large .list-item-content
{
	display:block;
	position:absolute;
	bottom:0;
	width:100%;
	padding:40px 8px 0;
	margin:0;
	
	text-align:right;
	background-image:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.4) 60%,rgba(0,0,0,.5));
}
.list-item-selected
{
	border:1px solid rgb(var(--positive-colour)) !important;
	background-color:rgb(var(--positive-colour)) !important;
	background-color:rgba(var(--positive-colour),.4) !important;
}
.list-item-actions
{
	float:right;
	margin:0 0 5px 10px;
	z-index: 1;
}
.list-item-image
{
	display:block;
	float:left;
	width:50px;
	max-width: 50px;
	margin:0 10px 10px 0;
}
.list-item-image img
{
	display:block;
	margin:0;
}
.list-item-image a
,.list-item-image a:link
{
	border-bottom-width:0;
}
.list-item-content
{
	display:block;
	margin-left:60px; /* This should match the full width of .list-item-image. */
}
.list-item-content.list-item-content-no-image
{
	display:block;
	margin-left:5px;
}
.list-item-content p
{
	margin-bottom:.5em; /* Reduce the bottom margin within a .list-item. */
}
.list-item-indent
{
	margin-left:25px;
}
@media screen and (min-width:950px)
{
	.list-item-large
	{
		width:29%;
		width:calc(33% - 8px);  /* The total width should be 33% including the margin (5px) and the space between inline-block elements (2-3px). */
	}
	.list-item-indent
	{
		margin-left:40px;
	}
}
@media print
{
	.pagination
	{
		display:none;
	}
	.list-actions
	{
		display:none;
	}
	.list-sorting
	{
		display:none;
	}
	.list-include-deleted-option
	{
		display:none;
	}
	.list-export
	{
		display: none;
	}
	.list-item-static
	{
		margin-left:0;
		margin-right:0;
		padding-left:0;
		padding-right:0;
		max-width:100%;

		background-color:transparent;
		box-shadow:none;
		border-top-width:1px;
	}
	a.list-item-static
	,a.list-item-static:link
	{
		border-top-width:1px;
	}
}

/* Hierarchical lists */

/*
.h-list
{
}
*/
.h-list li
{
	list-style:none;
}
.h-list li.expanded
{
	list-style-image:url("images/content/h-list-expanded.png");
}
.h-list li.collapsed
{
	list-style-image:url("images/content/h-list-collapsed.png");
}
.h-list li label
{
	/* Display as inline-block at 100% width instead of a regular block so that it doesn't affect the clickability of the bullet area.' */
	display:inline-block;
	width:100%;
	
	padding:4px 6px 2px;
}
.h-list li label:hover
{
	background-color:rgba(255,255,255,.12);
}
.h-list li.h-item-ancestor > label
{
	outline:1px solid rgb(var(--positive-colour));
	/*
	background-color:rgba(0,0,0,.1);
	*/
}
.h-list li.h-item-selected > label
{
	outline:1px solid rgb(var(--positive-colour));
	background-color:rgb(var(--positive-colour));
	background-color:rgba(var(--positive-colour),.4);
}

/* Content */

.image-main
{
	 float:left;
	 margin:0 10px 10px 0;
}
 .image-main a
,.image-main a:link
{
	border-bottom-width:0;
}

/*
This is a class that allows the footer of a form, typically containing only the "Save" button, to have fixed positioning 
on the bottom of the screen, useful for long forms, like pages in the recipe service where you need to select from a long list
of recipes to be included in a category (/admin/?page-id=recipe-category-recipe-select&category-id=#).
*/
.form-footer
{
	position: sticky;
	bottom:0;
	/*
	This element needs a lot of padding to look nice when it is stuck to the bottom of the page (3%), 
	but I'm undoing that padding in the margin (-3%), so that the padding is not noticable when it
	is *not* stuck to the bottom of the page.
	I'll also do a little on the sides, since some elements in the form, like <code>, have negative left and right margins (3px) and
	extend past the sides of the form, so this element should cover those elements completely.
	*/
	margin-bottom:-3%;
	padding-bottom:3%;
	margin-left:-3px;
	padding-left:3px;
	margin-right:-3px;
	padding-right:3px;

	background-color: #777777;
	box-shadow:0 -20px 20px -20px rgba(0,0,0,.3);
	z-index: 1; /* There are some elements on some forms with z-index:1, so this ensures that this is layered above those elements. */
}
@media print
{
	.form-footer
	{
		position: relative;
		box-shadow: none;
	}
}

/* Footer */

.page-stats
{
	float:left;
	padding-top:1.1em;
	padding-left:1em;
}
@media print
{
	.page-stats
	{
		display:none;
	}
}

/* Email messages */

div.email-view-message
{
	border-width:1px;
	padding:10px;
	margin-bottom:5px;
}

/* Recipe front end */

.recipe-slideshow /* Currently this just displays a single image. Eventually it should display a slideshow of multiple images. */
{
	margin:0 auto 15px;
	max-width: 500px;
	
	box-shadow:0 0 8px rgba(0,0,0, 0.3);
}
.recipe-slideshow img
{
	display:block;
	width:100%;
	padding:0;
	margin:0;
	border-width:0;
}

/* Store admin */

.store-option-group
,.store-sku
,.email-template-recipient
,.store-shipping-weight
,.store-shipping-size
,.store-shipping-location
,.store-tax-location
{
	margin-bottom:10px;
	padding:10px;
	background-color:rgb(var(--highlight-background-colour));
	box-shadow:0 0 8px rgba(0,0,0,.2);
}
.store-option-group::after
,.store-sku::after
,.email-template-recipient::after
,.store-shipping-weight::after
,.store-shipping-size::after
,.store-shipping-location::after
,.store-tax-location::after
{
	content:"";
	display:block;
	clear:both;
}
.store-option-group-sortable-placeholder
,.store-option-sortable-placeholder
,.store-sku-sortable-placeholder
,.store-shipping-location-sortable-placeholder
{
	margin-bottom:10px;
	height:30px;
	background-color:rgb(var(--positive-colour));
	background-color:rgba(var(--positive-colour), 0.4);
}
.store-option
{
	margin-bottom:10px;
	padding:10px;
	background-color:rgb(119,119,119); /* Add a solid background colour so that it looks better while it is being dragged. */
	box-shadow:0 0 8px rgba(0,0,0,.4);
}
.store-option::after
{
	content:"";
	display:block;
	clear:both;
}
/*
.store-option-combination
{
}
*/
.store-sku-target
{
	position: absolute;
	margin:0;
	z-index:0;
}
.store-combination-skus
,#store-combination-skus-unattached
{
	margin-bottom:10px; /* Make this the same as .store-sku-sortable-placeholder. */
	min-height:30px; /* Make this the same as .store-sku-sortable-placeholder height. */
}
div.warning /* Based on div.highlight */
{
	margin:.8em -2%;
	padding:.8em 2%;
	max-width:104%;
	
	background-color:rgb(var(--negative-colour));
	box-shadow:0 0 8px rgba(0,0,0,.2);
}
.store-shipping-weight
,.store-shipping-size
{
	-webkit-transition:background-color 1s ease;
	-moz-transition:background-color 1s ease;
	-o-transition:background-color 1s ease;
	transition:background-color 1s ease;
	
	-webkit-transition-delay:.5s;
	-moz-transition-delay:.5s;
	-o-transition-delay:.5s;
	transition-delay:.5s;
}
.store-shipping-weight-move
,.store-shipping-size-move
{
	background-color:rgb(var(--negative-colour)) !important;
	
	-webkit-transition-duration:0s;
	-moz-transition-duration:0s;
	-o-transition-duration:0s;
	transition-duration:0s;
	
	-webkit-transition-delay:0s;
	-moz-transition-delay:0s;
	-o-transition-delay:0s;
	transition-delay:0s;
}
.store-shipping-weight-range-label
,.store-shipping-size-range-label
{
	display:inline-block;
	min-width:8em;
}
@media print
{
	div.warning
	{
		margin-left:0;
		margin-right:0;
		max-width:100%;
	}
}

/* Store front end */

/*
.list-item-product-price
{
}
.list-item-product-original-price
{
}
*/
.list-item-product-price-discount-percent
{
	position:absolute;
	top:8px;
	right:-45px;
	padding:2px 50px;
	
	background-color:black;
	transform: rotate(27deg);
}
.list-item-product-price-discount-percent::after
{
	content:"% off"
}
.product-slideshow /* Currently this just displays a single image. Eventually it should display a slideshow of multiple images. */
{
	margin-bottom:15px;
	
	box-shadow:0 0 8px rgba(0,0,0, 0.3);
}
.product-slideshow img
{
	display:block;
	width:100%;
	padding:0;
	margin:0;
	border-width:0;
}
.product-option-group-colours
{
	margin:0;
}
.product-option-group-colours li
{
	display:inline-block;
	margin:0;
	
	list-style: none;
}
.product-option-colour
{
	display:inline-block;
	margin:0 8px 8px 0;
	width:40px;
	height:40px;
	overflow:hidden;
	
	box-shadow:0 0 8px rgba(0,0,0, 0.3);
	cursor:pointer;
}
.product-option-colour.selected
{
	outline:2px solid rgb(0,0,0);
}
.product-option-colour-text
{
	display:block;
	padding:10px 0;
	margin:0 -20px;
	color:rgba(255,255,255,1);
	text-shadow:0 0 3px rgba(0,0,0,1);
	opacity: .6;
	
	font-size:.8em;
	white-space: nowrap;
	text-align: center;
	
	-webkit-transform: rotate(-35deg);
	transform: rotate(-35deg);
}
.product-option-group-radio
{
	margin-bottom:5px;
}
/*
.product-option-group-select
{
}
*/

.sku-price-original
{
	display:block;
	margin-bottom:.5em;
	
	font-size: 1.3em;
	text-decoration:line-through;
	opacity:.5;
}
.sku-discount-percent
{
	display:block;
	margin-bottom:.5em;
	
	font-size: 1.3em;
}
.sku-discount-percent::after
{
	content:"% off";
}
.sku-price
{
	display:block;
	clear:left;
	
	font-size: 1.3em;
}
.sku-price-unavailable
{
	display:block;
}
.sku-quantity-in-stock
,.sku-quantity-out-of-stock
,.sku-quantity-limited
{
	display:inline;
}
.sku-quantity
{
	width:3em;
}
/*
input.sku-add
{
}
input.order-checkout
{
}
*/

ol.order-progress
{
	margin:0;
	counter-reset: progress;
}
ol.order-progress li
{
	display:inline-block;
	vertical-align: top;
	width:16%; /* Approximately 1/6 of the total width, as there are currently 6 steps in the order progress. */
	min-width:6em;
	
	text-align: center;
}
ol.order-progress li a
,ol.order-progress li span
{
	display:inline-block;
	width:100%;
	
	color:rgb(85,85,85);
	font-weight: bold;
	font-size:1.2em;
	text-decoration: none;
}
ol.order-progress li a:before
,ol.order-progress li span:before
{
	content:counter(progress);
	counter-increment: progress;
	display:block;
	padding-top:9px;
	width:45px;
	height:45px;
	position:relative;
	text-align: center;
	top:3px;
	margin:0 auto 6px;
	
	font-size:1.4em;
	line-height: .8;
	font-weight: bold;
	border-width:3px;
	border-style: solid;
	border-radius: 50%;
}
ol.order-progress li:last-child a:before
,ol.order-progress li:last-child span:before
{
	content:"\2713";
}
ol.order-progress li a:link
{
	color:rgb(85,85,85);
	border-bottom: none;
}
ol.order-progress li a:hover
,ol.order-progress li a:visited:hover
{
	color:inherit;
}
ol.order-progress li.order-progress-current a
,ol.order-progress li.order-progress-current span
{
	color:rgb(var(--heading-colour));
}

a.credit-card-type
{
	display:inline-block;
	margin:0 8px 0 0;
}
a.credit-card-type:link
{
	border-bottom-width: 0;
}
a.credit-card-type.selected
{
	outline:2px solid rgb(var(--heading-colour));
	outline-offset: 2px;
}
a.credit-card-type img
{
	display:block;
	margin:0;
	
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	filter: grayscale(100%);
}
a.credit-card-type.selected img
{
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	filter: grayscale(0%);
}
@media (min-width:580px)
{
	.product-slideshow
	{
		float:left;
		width:50%;
	}
	.product-info
	{
		float:left;
		width:50%; /* Make sure this is displayed beside the .product-slideshow */
		
		padding:0 0 0 15px;
	}
}

/* Rating system (stars) */

.rating
{
	display:inline-block;
	position:relative;
	width:100px;
	height:20px;
}
.rating-percentage
{
	display:block;
	position:absolute;
	width:100%;
	height:20px;
	
	background-image: url("images/star.png");
	background-repeat: repeat-x;
	background-size:20px auto;
	background-position: left -50px;
}
.rating::after
{
	content:"";
	display:block;
	position:absolute;
	width:100%;
	height:20px;
	
	background-image: url("images/star.png");
	background-repeat: repeat-x;
	background-size:20px auto;
}
.rating.rating-small
{
	width:75px;
}
.rating.rating-small .rating-percentage
{
	background-size:15px auto;
	background-position: left -37.5px;
}
.rating.rating-small::after
{
	background-size:15px auto;
}

.rating-set
{
	display:inline-block;
	position:relative;
	width:100px;
	height:20px;
	z-index: 0;
}
.rating-set .rating-percentage
{
	z-index: -1;
}
.rating-set:hover .rating-percentage
{
	visibility:hidden;
}
.rating-set .rating-star
{
	display:block;
	height:20px;
	padding-left:20px;
	
	background-image: url("images/star.png");
	background-repeat: no-repeat;
	background-size:20px auto;
	cursor:pointer;
}
.rating-set .rating-star:hover
{
	background-image: url("images/star.png"), url("images/star.png");
	background-repeat: no-repeat, no-repeat;
	background-size:20px auto, 20px auto;
	background-position: left top, left -50px;
}
.rating-none
{
	display:inline-block;
	position: relative;
	width:20px;
	height:20px;
	
	background-image: url("images/not-rated.png");
	background-repeat: no-repeat;
	background-size:20px auto;
	cursor:pointer;
}
.rating-none:hover
,.rating-none.rating-selected
{
	background-image: url("images/not-rated.png"), url("images/not-rated.png");
	background-repeat: no-repeat, no-repeat;
	background-size:20px auto, 20px auto;
	background-position: left top, left -50px;
}

/* Repository */
p.positive
,p.negative
,p.warning
,li.positive
,li.negative
,li.warning
,span.positive
,span.negative
,span.warning
{
	padding:3px 5px 5px;
}
span.positive
,span.negative
,span.warning
{
	display:inline-block;
}
.positive
{
	border:1px solid rgb(var(--positive-colour)) !important;
	background-color:rgb(var(--positive-colour)) !important;
	background-color:rgba(var(--positive-colour),.4) !important;
}
.negative
{
	border:1px solid rgb(var(--negative-colour)) !important;
	background-color:rgb(var(--negative-colour)) !important;
	background-color:rgba(var(--negative-colour),.4) !important;
}
.warning
{
	border:1px solid rgb(var(--warning-colour)) !important;
	background-color:rgb(var(--warning-colour)) !important;
	background-color:rgba(var(--warning-colour),.4) !important;
}

/* Document Sharing */
.document-image a
,.document-image a:link
{
	border-bottom-width:0 !important;
}
@media (min-width:580px)
{
	.document-item
	{
		display:flex;
		flex-direction: row;
		flex-wrap: nowrap;
		gap:15px 15px;
	}
	.document-image
	{
		flex:0 0 auto;
		width:150px;
	}
	.document-info
	{
		flex:1 1 auto;
	}
}


/* Other */

.clear
{
	display:block;
	clear: both;
}
.space
{
	display:block;
	margin-bottom:.6em;
}
.space-top
{
	margin-top:.6em;
}
p.space
{
	padding:0px;
	margin:0px;
	height:.6em;
	overflow:hidden;
}
p.small-space
{
	margin-bottom:.6em;
}
.center
,.centre
{
	text-align:center;
}
.right
{
	text-align:right;
}
.indent
{
	margin-left:30px;
}
.toggle-trigger
{
	cursor:pointer;
}
.toggle::after
{
	content:"";
	display:inline-block;
	position:relative;
	height: 14px;
	width:16px;
	right:0px;
	top:0px;
	margin-left:2px;

	background-image:url("images/content/toggle.png");
	background-position:right top;
	background-repeat:no-repeat;
	filter:invert(1); /* Turn the white image to black.*/
}

.toggle.south::after
,.toggle.show::after
{
	background-position:right -150px;
}
.toggle.north::after
,.toggle.hide::after
{
	background-position:right -50px;
}

div.uploaderContainer
{
	position:absolute;
	width:100px;
	height:50px;
}

a.shopping-cart:link
,a.shopping-cart:visited
{
	display:inline-block;
	padding-left:25px;
	height:20px;
	vertical-align: baseline;
	background-repeat: no-repeat;
	background-position: left 0px;
	background-image:url("images/content/shopping-cart.png");
	border-bottom:none;
	text-decoration: underline;
}

a.help:link, a.help:visited
,a.search:link, a.search:visited
,a.close:link, a.close:visited
,a.stats:link, a.stats:visited
,a.time:link, a.time:visited
,a.stopwatch:link, a.stopwatch:visited
,a.popup-close:link, a.poppup-close:visited
,[type=submit].search
,input[type=button].search
,input[type=reset].close
,input[type=button].close
,.list-item-action
,.drag-drop-handle
,.yes
{
	display:inline-block;
	width:20px;
	height:20px;
	overflow:hidden;
	margin:-5px 3px;
	padding:0;
	vertical-align:baseline;
	font-size: 1.3em;

	background-color:transparent;
	border:none !important;
	text-indent:100%;
	white-space:nowrap;
	background-repeat:no-repeat;
	background-position:0px 0px;
	outline:none;
	box-shadow:none;
}
a.help:hover
,a.search:hover
,a.close:hover
,a.stats:hover
,a.time:hover
,a.popup-close:hover
,[type=submit].search:hover
,input[type=button].search:hover
,input[type=reset].close:hover
,input[type=button].close:hover
,.list-item-action:hover
,.drag-drop-handle:hover
,.yes:hover
{
	background-color:transparent;
	background-position:0px -50px;
}
a.help:link, a.help:visited
{
	background-image:url("images/content/help.png");
}
.label a.help
{
	float:right;
	margin-top:0; /* Remove the negative top margin. */
}
.field.full .label a.help
{
	float:none; /* There should be no float in a full width label. */
}
a.search:link, a.search:visited
,[type=submit].search
,input[type=button].search
{
	background-image:url("images/content/search.png");
}
a.close:link, a.close:visited
,a.popup-close:link, a.popup-close:visited
,input[type=reset].close
,input[type=button].close
{
	background-image:url("images/content/close.png");
}
a.close:link, a.close:visited
,input[type=button].restore
{
	display:block;
	position:absolute;
	margin:0;
	top:7px;
	right:8px;
	z-index: 1;
}
a.stopwatch:link, a.stopwatch:visited
{
	font-family:"Material Symbols Outlined";
	text-indent:0;
}
.list-item-action.delete
{
	font-family:"Material Symbols Outlined";
	text-indent:0;
}
.list-item-action.restore
{
	font-family:"Material Symbols Outlined";
	text-indent:0;
}
.list-item-action.edit
{
	font-family:"Material Symbols Outlined";
	text-indent:0;
}
a.stats:link, a.stats:visited
{
	background-image:url("images/content/stats.png");
}
a.time:link, a.time:visited
{
	background-image:url("images/content/time.png");
}
.drag-drop-handle
{
	margin-left:0;
	margin-right:6px;
	cursor:move;
	background-image:url("images/content/drag-drop-handle.png");
}
.yes
{
	background-image:url("images/content/ok.png");
}
.middle
{
	vertical-align:middle;
}
.tool-tip
{
	position:relative;
	display:inline-block;
	text-decoration:underline dotted 1px;

	cursor: pointer;
}
.tool-tip .tool-tip-content
{
	visibility:hidden;
	opacity:0;
	position:absolute;
	bottom:100%;
	right:-20px;
	z-index:1;
	min-width:10em;
	max-width:100%;
	padding:6px 11px 8px;
	
	background-color:rgba(255,255,255,1);
	box-shadow:0px 0px 20px rgba(0,0,0,.4);
	border:0px solid rgb(0,0,0);
	border-radius:5px;
	font-size:95%;

	transition:opacity .4s,visibility .4s;

	cursor: default;
}
.tool-tip .tool-tip-content::after
{
	content:"";
	width: 10px;
	height: 10px;
	position: absolute;
	top: calc(100% - 5px);
	right:20px;
	transform: rotate(45deg);

	background-color: inherit;
	border-style: solid;
	border-color: inherit;
	border-top-width:0;
	border-left-width:0;
	border-right-width:inherit;
	border-bottom-width:inherit;
}
.tool-tip:hover .tool-tip-content
{
	visibility:visible;
	opacity:1;
}
/*
This is used for numbered footnote references on a page, to automatically number them, so that if their order is changed on the page, the order of the reference numbers will update automatically.
*/
.reference-auto-number::before
{
	counter-increment:reference;
	content:counter(reference);
}
.themes-sortable
{
	border-width:1px;
	padding:5px;
	margin:0 5px 5px 0;
	min-height:1em;
}
.theme-container
{
	cursor:default;
}
.theme-drag
{
	background-color:black;
}
div.column
{
	padding-bottom:20px;
	margin-bottom:20px;
	
	border-bottom-width:1px;
}
.no-break
{
	white-space: nowrap;
}

@media (min-width:580px), print and (min-width:500px) /* The pixel width of a printed page in Chrome in portrait is 555px. */
{
	div.column
	{
		width:50%;
		float:left;
		padding-bottom:inherit;
		margin-bottom:inherit;
		
		border-bottom-width:0px;
	}
	div.column:nth-child(2n+1)
	{
		padding-right:20px;
		
		border-right-width: 1px;
	}
	div.column:nth-child(2n+0)
	{
		margin-left:-1px;
		width:calc(50% + 1px);
		padding-left:20px;
		
		border-left-width: 1px;
	}
}
@media screen
{
	.no-screen
	{
		display:none !important;
	}
}
@media print
{
	.no-print
	{
		display:none !important;
	}
}
.keep-together
{
	break-inside: avoid-page;
}