/*
Theme Name: 	IIHO
Description: 	A basic theme for the IIHO content.
Version: 		1.0
Author: 		Leon Janzen
Author URI: 	https://iiho.ca
*/

:root
{
	/*
	These colour varables are specified as "#,#,#" rather than "rgb(#,#,#)"
	so that they can be included in an rgb() value, or an rgba() value, and
	have opacity added as necessary.
		e.g. "rgba(var(--font-color), .5)"
	*/
	--font-colour-normal:102,102,102; /* dark grey */
	--heading-colour:215,243,10; /* bright green */
	--heading-colour:158, 215, 255; /* light blue */
	--a-link-colour:208,237,120; /*light green - not used; links are the default text colour, until they have :hover or :visited applied. */
	--a-visited-colour:138,216,255; /* light blue */
	--a-visited-colour:255,204,51; /* light orange */
	--a-hover-colour:255,204,51; /*light orange - not used */
	--nav-a-hover-colour:152,196,0; /* medium green */
	--nav-a-hover-colour:158, 215, 255; /* medium blue */
	--breadcrumb-colour:110,110,110; /* medium grey */
	--breadcrumb-a-hover-colour:0,0,0; /* dark grey/black */

	accent-color:rgb(var(--a-visited-colour));
}

/* CKEditor theme customizations */
:root
{
	/* These must be designated as !important to override the built-in styles, which are loaded after these ones. */
	--ck-color-toolbar-background: rgb(215,215,215) !important;
	--ck-color-button-default-background: rgb(255,255,255) !important;
	--ck-color-button-default-disabled-background: rgb(231,231,231) !important;
}
.ck-editor
{
	color:rgb(85,85,85);
}

/* MARK: Defaults */

*
,*:before
,*:after
{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
::selection
,::-moz-selection
{
	background:rgb(var(--nav-a-hover-colour));
	color:rgb(255,255,255);
}
html
{
	font-size: 100%;
	overflow-y: scroll;
}
html
,body
,div
,span
,object
,iframe
,h1
,h2
,h3
,h4
,h5
,h6
,p
,blockquote
,pre
,abbr
,address
,cite
,code
,del
,dfn
,em
,img
,ins
,kbd
,q
,samp
,small
,strong
,sub
,sup
,var
,b
,i
,dl
,dt
,dd
,ol
,ul
,li
,fieldset
,form
,label
,legend
,table
,caption
,tbody
,tfoot
,thead
,tr
,th
,td
,article
,aside
,canvas
,details
,figcaption
,figure
,footer
,header
,hgroup
,menu
,nav
,section
,summary
,time
,mark
,audio
,video
{
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}        
article
,aside
,details
,figcaption
,figure
,footer
,header
,hgroup
,nav
,section
,iframe
{
	display: block;
}
div
,article
,section
,header
,footer
,nav
,fieldset
,li
{
	position:relative; /* For absolutely positioning elements within containers (add more to the list as necesssary) */
}
div
,article
,section
,header
,footer
,nav
,table
,td
,th
,form
,hr
,img
,iframe
,fieldset
{
	border-style:solid;
	border-color:rgb(85,85,85);
}
audio
,canvas
,video
{
	display: inline-block;
	/*
	I think these properties are pretty old and can be removed.
	*display: inline; 
	*zoom: 1; 
	*/
}
code
,kbd
,samp
{ 
	font-family: monospace; 
	_font-family: 'courier new', monospace; 
}
pre
{ 
	font-family: inherit;
	white-space: pre; 
	white-space: pre-wrap; 
	word-wrap: break-word; 
}
.group:after
{
	/* For clearing */
	display:block;
	height:0;
	clear:both;
	content:".";
	visibility:hidden;
}
a
,a:link
{
	text-decoration:none;
	border-style:solid;
	border-width:0 0 1px; /* When no border colour is specified, the border colour seems to inherit from the text colour, which is great. */
}
p
,h1
,h2
,h3
,h4
,h5
,h6
{
	margin-bottom:.6em;
	
	font-weight:normal;
}
h1
{
	font-size:1.4em;
}
h2
{
	font-size:1.2em;
}
h3
{
	font-size:1.0em;
}
h4
{
	font-size:.9em;
}
h5
{
	font-size:.9em;
	font-style:italic;
}
h6
{
	font-size:.75em;
	text-transform:uppercase;
}
small
{
	font-size:85%;
}
sub
,sup
{
	position:relative;
	font-size:75%;

	cursor: pointer;
}
sup
{
	top: -0.5em; 
}
sub
{ 
	bottom: -0.25em; 
}
hr
{
	margin:1em 0;
	border-width:1px 0 0;
}
ul
,ol
,blockquote
{
	margin-left:25px;
}
li
{
	list-style-position:outside;
}
ol li
{
	list-style-type:decimal;
}
ol li li
{
	list-style-type:lower-alpha;
}
ol li li li
{
	list-style-type:decimal;
}
ul li
{
	list-style-type:disc;
}
ul ul li
{
	list-style-type:circle;
}
ul ul ul li
{
	list-style-type:square;
}
ul ul ul ul li
{
	list-style-type:disc;
}
dt
{
	margin-bottom:.2em;
	font-weight: bold;
}
dd
{
	margin-bottom:.6em;
}
label
{
	cursor:pointer;
}
textarea
{
	display:block;
	resize:vertical;
}
.input /* This is a class that can be applied to another element (i.e. div) to make it match other inputs. */
{
	display:inline-block;
	cursor:pointer;
}
input
,textarea
,select
,.input
,button
{
	font-family:inherit;
	font-size:inherit;
	color:rgb(var(--font-colour-normal));

	border-width:0px;

	background-color:rgba(255,255,255,.7);
	box-shadow:0 0 8px rgba(0,0,0,.2);
}
input[type="radio"]
,input[type="checkbox"]
,input[type="range"]
{
	/* Remove the background color and box shadow for radio buttons and checkboxes, set above. */
	background-color:transparent;
	box-shadow:none;
}
input[type="range"]
{
	max-width:100%;
}
button
,input[type="button"]
,input[type="submit"]
,input[type="reset"]
,input[type="file"]
{
	padding:5px 12px 6px;
	margin-right:7px;
	background-image: linear-gradient(to bottom, rgba(255,255,255,.4), rgba(0,0,0,.1));
}
textarea
,select
,.input
,input[type="text"]
,input[type="date"]
,input[type="password"]
,input[type="email"]
,input[type="search"]
,input[type="color"]
,input[type="number"]
,input[type="tel"]
,input[type="url"]
{
	max-width:100%;
	padding:2px 4px;
}
select
{
	padding-right:2px;
	word-wrap: normal;
}
textarea:focus
,select:focus
,.input:focus
,input:focus
,input:active
,button:hover
,input[type="button"]:hover
,input[type="submit"]:hover
,input[type="reset"]:hover
,input[type="file"]:hover
{
	background-color:rgba(255,255,255,1);
	box-shadow:0 0 8px rgba(0,0,0,.4);
}
input[type="radio"]:focus
,input[type="checkbox"]:focus
,input[type="range"]:focus
,input[type="radio"]:active
,input[type="checkbox"]:active
,input[type="range"]:active
{
	/* Remove the background color and box shadow for radio buttons and checkboxes, set above. */
	background-color:transparent;
	box-shadow:none;
}
button:active
,input[type="button"]:active
,input[type="submit"]:active
,input[type="reset"]:active
,input[type="file"]:active
,button:hover:active
,input[type="button"]:hover:active
,input[type="submit"]:hover:active
,input[type="reset"]:hover:active
,input[type="file"]:hover:active
{
	box-shadow:none;
	box-shadow:0 0 3px rgba(0,0,0,.3);
}
textarea[disabled]
,select[disabled]
,.input[disabled]
,input[disabled]
,button[disabled]
,.disabled
{
	opacity:.4;
	filter:alpha(opacity=40);
}
textarea.required
,select.required
,.input.required
,input[type="text"].required
,input[type="date"].required
,input[type="password"].required
,input[type="email"].required
,input[type="search"].required
,input[type="color"].required
,input[type="number"].required
,input[type="tel"].required
,input[type="url"].required
{
	outline:1px solid rgb(var(--a-visited-colour));
	outline-offset:0;
}

table
{
	table-layout:fixed;
	border-collapse:collapse;
	border-width:1px;
	border-spacing: 0;
}
td
,th
{
	border-width:1px;
	vertical-align: top;
}
tr:hover
{
	background-color:rgba(255,255,255,.12);
}
th
,td
{
	padding:5px;
	border-width:1px;
	overflow:hidden;
}
th
{
	text-align:center;
	font-weight:bold;
	background-color:rgb(var(--font-colour-normal));
}
caption
{
	caption-side:top;
	text-align:left;
}

/* MARK: Colours - elements on a light background. */

a
,a:link
,a:visited
{
	color:inherit;
}
a:hover
{
	color:rgb(var(--nav-a-hover-colour)); /*Dark green*/
}
a:visited:hover
{
	color:rgb(13,176,255); /*Dark blue*/
}
h1
,h2
,h3
,h4
,h5
,h6
{
	color:rgb(var(--nav-a-hover-colour));
}
body.paper 
h1
,body.paper 
h2
,body.paper 
h3
,body.paper 
h4
,body.paper 
h5
,body.paper 
h6
{
	color:inherit;
	font-weight: bold;
}
small
,.faded
{
	color:rgb(191,191,191);
}

/* MARK: Colours - elements on a dark background. */

.content
,.feature
,.portfolio-item:nth-child(2n + 1)
{
	color:rgb(255,255,255);
}
.content small
,.content .faded
{
	color:rgb(191,191,191);
}
.content a
,.content a:link
,.content a:visited
,.portfolio-item:nth-child(2n + 1) a
,.portfolio-item:nth-child(2n + 1) a:link
,.portfolio-item:nth-child(2n + 1) a:visited
{
	color:inherit;
}
.content a:hover
,.feature a
,.portfolio-item:nth-child(2n + 1) a:hover
,.message a:hover
{
	color:rgb(var(--heading-colour));
	color:rgb(var(--a-visited-colour));
}
.content a:visited:hover
,.portfolio-item:nth-child(2n + 1) a:visited:hover
,.message a:visited:hover
{
	color:rgb(var(--a-visited-colour)); /*Blue*/
}
.content h1
,.content h2
,.content h3
,.content h4
,.content h5
,.content h6
,.feature h1
,.feature h2
,.feature h3
,.feature h4
,.feature h5
,.feature h6
,.portfolio-item:nth-child(2n + 1) h1
,.portfolio-item:nth-child(2n + 1) h2
,.portfolio-item:nth-child(2n + 1) h3
,.portfolio-item:nth-child(2n + 1) h4
,.portfolio-item:nth-child(2n + 1) h5
,.portfolio-item:nth-child(2n + 1) h6
{
	color:rgb(var(--heading-colour));
}

@media print
{
	a
	,a:link
	,a:visited
	{
		color:rgb(0,0,0);
		text-decoration:none;
	}
	h1
	,h2
	,h3
	,h4
	,h5
	,h6
	{
		color:rgb(0,0,0);
	}
	textarea
	,input[type="text"]
	,input[type="date"]
	,input[type="password"]
	,input[type="email"]
	,input[type="search"]
	,input[type="color"]
	,input[type="number"]
	,input[type="tel"]
	,input[type="url"]
	{
		border:1px solid rgb(204,204,204);
	}
	td
	{
		padding:0 2px 2px 2px;
	}
}

/* MARK: Page transitions */

@view-transition {
	navigation: auto; /* This applies a basic fade transition between pages. */
}

/* MARK: Body */

body
{
	color:rgb(var(--font-colour-normal));
	font-family:"Century Gothic","Roboto",Arial,Helvetica,sans-serif;
	font-size:.9rem;
	background-color:#DDDDDD;
}
body.paper
{
	height: auto;
}
@media print
{
	body
	{
		height: auto;

		color:rgb(0,0,0);
		background-color:transparent;
		
		/*
		I'm not sure if the font should change to a more print-friendly font for printing, or stick with the theme font.
		font-family:Arial, Helvetica, sans-serif;
		*/
		/*
		Make the font a little smaller for printing. The screen size seems a little too large for printing.
		*/
		font-size:.9rem;
	}
}

.container
{
	width:100%;
	max-width:950px;
	margin:3% auto;

	background-color:rgb(255,255,255);
	box-shadow:0 0 20px rgba(0,0,0,.3);
}
body.paper .container
{
	max-width:950px;
	height: auto;
	margin:3% auto;
	padding:3% 8%;
}
@media print
{
	.container
	,body.paper .container
	{
		height: auto;
		margin:0;
		padding:0;
		max-width:none;

		box-shadow:none;
	}
}

/* MARK: Header */

header
{
	padding:3% 3%;

	text-align:center;
	font-size:1.1em;
}
body.paper header
{
	padding-left:0;
	padding-right:0;
}

body.paper header div
{
	float:left;
}
header h1
{
	margin:0;
}
header h1 a
{
	display:block;
	position:relative;

	/* This text is replaced by an image and is only visible in the print stylesheet. */
	font-size:2.5em;
	font-weight:normal;
	text-transform:lowercase;
	color:rgb(var(--font-colour-normal));
}
header h1 a
,header h1 a:link
{
	text-decoration: none;
	border-bottom-width: 0;
}
header h1 a span
{
	display:none; /* Hide the title text. It is replaced with an image. */
}
header h1 a img
{
	display:block;
	position:relative;
	height:auto;
	max-width:300px;
	max-height:45px; /* Fixes display issue in IE8 where the image gets too tall. */
	margin-left:auto;
	margin-right:auto;
	margin-bottom:5px;
}
body.paper
header h1 a img
{
	margin-left:0;
	margin-right:0;
}
@media screen and (min-width:950px)
{
	header
	{
		float:left;
		width:45%;
	}
}
@media print
{
	header
	{
		padding:0 0 3%;
	}
	/*
	header div
	{
		float:left;
	}
	*/
	/*
	header h1 a span
	{
		display:inline;
	}
	*/
	/*
	header h1 a img
	{
		display:none;
	}
	*/
}

/* MARK: Navigation */

nav
{
	border-top:1px solid #DDDDDD;

	font-size:1.1em;
}
nav:after
{
	content:"";
	display:block;
	clear:both;
}
nav #menu
{
	display:none;
	padding-bottom:2%; /* The bottom padding is located within the #menu element so it can be toggled. */
}
nav a#menu-toggle-link
{
	background-image:url("images/arrow-down.png");
	background-repeat:no-repeat;
	background-position:92% 11px;
}
nav a#menu-toggle-link:hover
{
	background-position:92% -39px;
}
nav a#menu-toggle-link.up
{
	color:rgb(204,204,204);
	background-image:url("images/arrow-up.png");
}
nav a#menu-toggle-link.up:hover
{
	color:inherit;
	background-image:url("images/arrow-up.png");
}
nav ul
{
	margin:0;
}
nav li ul
{
	margin-top:1px; /* This should be the same distance as the nav li margin-bottom below. */
	margin-left:8%; /* Set the margin of the second level items to the same as the padding of the first level items, below. */
}
nav li li ul
{
	margin-left:25px; /* Set the margin of the third level items to the same as the padding of the second level items, below. */
}
/* Hide all submenu items. */
nav li ul
{
	display:none;
}
/* Display submenu items for the current page (and ancestors of the current page). */
nav li.current_page_item > ul
,nav li.current_page_ancestor > ul
,nav li.current-menu-item > ul
,nav li.current-menu-ancestor > ul
,nav li.current-post-ancestor > ul
,body.single nav li.blog-ancestor > ul
{
	display:block;
}
nav li
,nav ul li /* This increases the specificity enough to override the properties above. */
,nav ul ul li
,nav ul ul ul li
{
	list-style-type:none;
	margin-bottom:1px; /* This should be the same distance as the nav li ul margin-top above. */
}
nav a
,nav a:link
,nav a:visited
{
	display:block;
	position:relative;
	padding:5px 8% 6px; /* Set the padding of the first level items. */
	min-height:1.4em; /* This keeps all single line boxes the same height, even when the font-weight changes (for nav li.current_page_item > a below), affecting the size of the text, and the size of the box. */

	text-transform:lowercase;
	text-decoration:none;
	border-bottom-width:0;
	color:rgb(var(--font-colour-normal));

	-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;
}
nav li li a
,nav li li a:link
,nav li li a:visited
{
	padding-left:25px; /* Set the padding of the second level items. */
}
nav li.current_page_ancestor > a
,nav li.current_page_ancestor > a:link
,nav li.current-menu-ancestor > a
,nav li.current-menu-ancestor > a:link
,nav li.current-post-ancestor > a
,nav li.current-post-ancestor > a:link
,body.single nav li.blog-ancestor > a
,body.single nav li.blog-ancestor > a:link
{
	color:rgb(var(--nav-a-hover-colour));
	font-weight:bold;
}
nav li.current_page_item > a
,nav li.current_page_item > a:link
,nav li.current-menu-item > a
,nav li.current-menu-item > a:link
{
	background-color:rgb(238,238,238);

	color:rgb(var(--nav-a-hover-colour)) !important; /* Override nav:visited:hover below, that has higher specificy. */
	font-weight:bold;

	cursor: default;
}
nav a:hover
,nav a:visited:hover
{
	color:rgb(0,0,0);
}
nav a:hover
,nav li.current_page_ancestor > a:hover /* This increases the specificity enough to override the nav li.current_page_ancestor > a:link properties above. */
,nav li.current-menu-ancestor > a:hover /* This increases the specificity enough to override the nav li.current_page_ancestor > a:link properties above. */
,nav li.current-post-ancestor > a:hover /* This increases the specificity enough to override the nav li.current_page_ancestor > a:link properties above. */
,body.single nav li.blog-ancestor > a:hover /* This increases the specificity enough to override the nav li.current_page_ancestor > a:link properties above. */
{
	background-color:rgb(238,238,238) !important;
}
@media screen and (min-width:480px)
{
	/* Switch menu to a horizontal layout with pop-up submenu items. */
	nav
	{
		padding:0 0 2%;
		border-top:none;
		text-align:center;
	}
	nav #menu-toggle
	{
		display:none;
	}
	nav #menu
	{
		display:block;
		padding-bottom:0; /* Remove the bottom padding. */
	}
	nav ul
	{
		display:inline-block; /* This allows the menu to be centred. */
	}
	nav li
	{
		float:left;
		text-align:left; /* Remove the centre alignment. */
	}
	nav a
	,nav a:link
	,nav a:visited
	{
		position:relative;
		padding:8px 15px 12px;
	}
	nav li.current_page_item > a
	,nav li.current_page_item > a:link
	,nav li.current-menu-item > a
	,nav li.current-menu-item > a:link
	{
		background-color:rgb(255,255,255) !important; /* Remove background-color for first level items. */
	}

	/* Styles for second level items. */

	nav li ul
	{
		display:block;

		opacity:0; /* Hide until hovered over. */
		visibility:hidden; /* Use visibility to show and hide submenu items so that the opacity property can be changed with a transition. (Transitions do not work if the display property changes.) */
		width:0; /* When using the visibility property to hide submenu items, wide hidden items will still overflow the page and allow unncessary scrolling. Set width to 0, and overflow to hidden, and transition to the actual width on hover. */
		overflow:hidden;

		position:absolute;
		left:0px;
		top:100%;
		margin:0; /* Remove the top margin. */
		z-index:3; /* Set z-index so that it is not covered by subsequent items on the page. ".breadcrumb" is now sticky, and z-index:2, so this must be more than 2. */
		background-color:rgb(255,255,255);
		box-shadow:0px 0px 20px rgba(0,0,0,.2);

		-webkit-transition:visibility 0s ease .3s,width 0s ease .3s,opacity .3s ease;
		-moz-transition:visibility 0s ease .3s,width 0s ease .3s,opacity .3s ease;
		-o-transition:visibility 0s ease .3s,width 0s ease .3s,opacity .3s ease;
		transition:visibility 0s ease .3s,width 0s ease .3s,opacity .3s ease;
	}
	nav li ul.reverse
	{
		left:auto;
		right:0px;
	}
	nav li:hover > ul
	{
		/*
		display:block;
		*/
		opacity:1;
		visibility:visible;
		width:250px; /* Set the width of second level items. If this changes, it must also be changed in the javascript in "\themes\default\core\snippets\nav.js". */
		overflow:visible;

		/* Unlike the transition effect, the transition-delay affects transitions to this style, not transitions away from this style. */
		-webkit-transition-delay:0s;
		-moz-transition-delay:0s;
		-o-transition-delay:0s;
		transition-delay:0s;
	}
	nav li li
	{
		float:none;
	}
	nav li li a
	{
		background-color:rgb(255,255,255);
	}
	nav li li.current_page_item > a
	,nav li li.current_page_item > a:link
	,nav li li.current-menu-item > a
	,nav li li.current-menu-item > a:link
	{
		background-color:rgb(238,238,238); /* Re-add background-color for second level items. */
	}

	/* Styles for third level items. */

	nav li li ul
	{
		left:250px; /* The left position should equal the width of the second level items (above). */
		right:auto;
		margin-left:0; /* Remove the left margin. */
		top:0;
	}
	nav li li ul.reverse
	{
		left:-250px; /* Display on the right of the parent, instead of the left. This is for preventing submenus from being displayed off the side of the page. */
	}
}
@media screen and (min-width:950px)
{
	nav
	{
		float:left;
		padding:4% 1% 2%;
		width:55%;
	}
}
@media print
{
	nav
	{
		display:none;
	}
}

/* MARK: Breadcrumb */

.breadcrumb
{
	display:block;
	position:sticky;
	top:calc(5px + 8px + 1px + (1em * 1.55)); /* Calculated to match the height of ".menu-user": text plus top/bottom margins, plus border. */
	z-index:2;
	padding:4px 8% 7px; /* This padding should approximately match .user-menu */
	border-color:#DDDDDD;
	border-style:solid;
	border-top-width:1px;
	clear:both;
	background:rgb(255,255,255,.8);
	
	color:rgb(var(--breadcrumb-colour));
	font-size:80%;
}
body.paper .breadcrumb
{
	padding-left:0;
	padding-right:0;
}
@media print
{
	.breadcrumb
	{
		display:none;
		padding-left:0;
		padding-right:0;
	}
}
.breadcrumb a:link
,.breadcrumb a:visited
{
	color:rgb(var(--breadcrumb-colour));
}
.breadcrumb a:hover
{
	color:rgb(var(--breadcrumb-a-hover-colour));
}
span.breadcrumb-separator
{
	display:inline-block;
	width:5px;
	height:5px;
	margin:0 2px;
	background-image:url("images/breadcrumb-separator.png");
}
@media screen and (min-width:480px)
{
	.breadcrumb
	{
		padding-left:35px;
		padding-right:15px;
	}
}

/* MARK: Search */

#search-1
{
	position:absolute;
	z-index:1; /* Set z-index so that it is not covered by subsequent items on the page. */
	right:5%;
	top:8px;
}
.search-box
{
	position:absolute;
	background-color:rgb(127,127,127);
	box-shadow:0px 0px 20px rgba(0,0,0,.4);
	padding:10px;
	right:-10px;
	top:2em;
}
.search-form
{
	white-space:nowrap;
}
#search-box-1
{
	display:none;
}
@media screen and (min-width:480px)
{
	#search-1
	{
		top:13px;
	}
}
@media screen and (min-width:950px)
{
	#search-1
	{
		top:17px;
	}
}

/* MARK: Feature */

.feature
{
	clear:both;
	background-color:rgb(var(--font-colour-normal));
	background-image:url("images/feature-background.png");
	background-repeat:repeat;

	color:rgb(255,255,255);
	font-size:1.1em;
	line-height:1.4em;
}
.feature a.feature-previous
,.feature a.feature-previous:link
,.feature a.feature-next
,.feature a.feature-next:link
{
	display:block;
	position:absolute;
	z-index:2;
	top:0;
	padding:0 2%;
	width:4%;
	max-width:14px;
	height:100%;
	overflow:hidden;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
	
	border-width:0;
	background-position:center center;
	background-repeat:no-repeat;
	background-origin:content-box;
	background-size:contain;

	cursor:pointer;
}
.feature-previous
{
	background-image:url("images/feature-previous.png");
	left:0;
}
.feature-next
{
	background-image:url("images/feature-next.png");
	right:0;
}
.feature-previous:hover
{
	background-image:url("images/feature-previous-hover.png");
}
.feature-next:hover
{
	background-image:url("images/feature-next-hover.png");
}
.feature-item
{
	display:none;
	padding:1.5em 8% 0;
	margin:0;
}
.feature-text
{
	padding-bottom:1.5em;
}
img.feature-image
{
	float:right;
	width:40%;
	height:auto;
	margin:0 0 1.5em 1.5em;
}
.feature p
{
	margin-bottom:1em; /* This should be the same as the margin-top of li, below. */
}
.feature li
{
	margin-bottom:.3em;
}
.feature ol
,.feature ul
{
	margin-top:1em; /* This should be the same as the margin-bottom of li, above. */
}

@media screen and (min-width:480px)
{
	.feature-text
	{
		width:50%;
	}
}
@media screen and (min-width:950px)
{
	.feature
	{
		margin-left:-15px;
		margin-right:-15px;
		width:calc(100% + 30px); /* For some reason, possibly a rendering engine bug, Chrome doesn't make this element expand to fit the area when the negative margins expand the space allowed. */
	}
}

/* MARK: Content */

.page-title
{
	clear:both;
	padding:1.4% 8% 1.9%;
	margin:0;
	background-color:rgb(85,85,85);
	background-image:url("images/feature-background.png");
	background-repeat:repeat;

	color:rgb(var(--heading-colour));
	font-size:1.4em;
}
body.paper .page-title
{
	padding-left:0;
	padding-right:0;
	padding-bottom:0;
	background: white;
	
	color:rgb(0,0,0);
}
@media screen and (min-width:950px)
{
	body:not(.paper) .page-title
	{
		margin-left:-15px;
		margin-right:-15px;
		padding-left:-webkit-calc(8% + 15px);
		padding-right:-webkit-calc(8% + 15px);
		padding-left:calc(8% + 15px);
		padding-right:calc(8% + 15px);
	}
}
@media print
{
	.page-title
	{
		padding-left:0;
		padding-right:0;
		padding-bottom:0;
		background: white;

		color:rgb(0,0,0);
	}
}
.content
{
	clear:both;
	padding:1px 8% 4%; /* The 1px padding-top prevents the top margin of .column-main-2 from collapsing with this element, and giving it an unwanted top margin. */
	z-index:0; /* Make sure the content is never on top of the menu or other header items. */

	background-color:#777777;
	background-image:url("images/content-background.svg");
	background-repeat:no-repeat;
	background-position:100% 100px;
	background-size:100%;

	line-height:1.3em;
	word-wrap:break-word;
	overflow-wrap:break-word;
}
body.content-bottom-padding-none .content
{
	padding-bottom: 0;
}
body.paper .content
{
	padding:0 0 2%;
	background: white;
	
	color:rgb(0,0,0);
}
@media print
{
	.content
	{
		padding:0 0 2%;
		background: white;
		
		color:rgb(0,0,0);
	}
	.content h1
	,.content h2
	{
		margin-left:0; /* Remove any outdent. */
	}
	.content a
	,.content a:link
	{
		border-width:0;
	}
}

.content:after
,.column-main:after
{
	/* For clearing */
	content:"";
	display:block;
	height:0;
	clear:both;
}
.column-main-2
{
	margin-top:4%; /* This margin is in a separate element from .column-main since that is a floated element, and if the margin were applied to that element, then the it wouldn't collapse with the margin of the first heading. */
}
.column-secondary
{
	padding-top:6%;
}
.content h1
,.content h2
,.content h3
,.content h4
,.content h5
,.content h6
{
	margin-bottom:.6em;
	margin-top:1.4em;
}
h2 + .content h3
,h3 + .content h4
,h4 + .content h5
,h5 + .content h6
{
	margin-top:.4em;
}
.content h1
{
	text-decoration:line-through; /* Do not use h1 tags on any page. This will make it obvious if one is being used. */
}
.content > div > div > h2
{
	margin-left:-4%; /* Outdent slightly. */
}
.product-info h2
{
	margin-top:0;
	margin-left:0;
}
.content h3
{
	font-style:italic;
}
.content .subtitle
{
	font-size:75%;
}
h1 + .content .subtitle
,h2 + .content .subtitle
,h3 + .content .subtitle
,h4 + .content .subtitle
,h5 + .content .subtitle
,h6 + .content .subtitle
{
	margin-top:-1em;
}
.content a
,.content a:link
{
	text-decoration:none;
	border-style:solid;
	border-width:0 0 1px;
}
.cke a
,.cke a:link
{
	border-width:0;
}
p
,li
,blockquote
{
	margin-bottom:1em; /* This should be the same as the margin-top of li, below. */
}
ol
,ul
{
	margin-top:1em; /* This should be the same as the margin-bottom of li, above. */
}
/*
Reduce the default spacing for the paper and print display.
*/
body.paper
p
,body.paper
li
,body.paper
blockquote
{
	margin-bottom:.5em; /* This should be the same as the margin-top of li, below. */
}
body.paper
ol
,body.paper
ul
{
	margin-top:.5em; /* This should be the same as the margin-bottom of li, above. */
}
@media print
{
	p
	,li
	,blockquote
	{
		margin-bottom:.5em; /* This should be the same as the margin-top of li, below. */
	}
	ol
	,ul
	{
		margin-top:.5em; /* This should be the same as the margin-bottom of li, above. */
	}
}
.compact
{
	margin-bottom:1em; /* Move the usual bottom margin from the li to the list (ul or ol). */
}
.compact li
,.compact
{
	margin-bottom:.3em;
}
.compact ul
,.compact ol
{
	margin-top:.3em;
	margin-bottom:.3em;
}
.content img
,.content video
,div.wp-caption
{
	max-width:100%;
}
.content img
,.content video
{
	height:auto;
	margin-bottom:15px; /* This should be the same as the right margin of img.alignright and the left margin of img.alignleft. */
}
.content img.avatar
{
	float:left;
	margin:0 12px 12px 0;
	width:25%;
	height:auto;
	max-width:96px;
	max-height:96px; /* Fixes display issue in IE8 where the images get too tall. */
	min-width:50px;
}
.content .wp-smiley
{
	margin:0;
}
.content code
{
	color:rgb(255,255,255);
	font-size:.9em;
	background-color:rgb(127,127,127);
	line-height:1em;
	padding:2px 10px 3px 4px;
}
.content pre code
{
	display:block;
	padding:2px 3px;
	margin:1em -3px;
}
.content span.breadcrumb-separator
{
	display:inline-block;
	width:5px;
	height:5px;
	margin:0 2px;
	background-image:url("images/breadcrumb-separator-light.png");
}
div.highlight
{
	margin:.8em -2%;
	padding:.8em 2%;
	max-width:104%;
	
	background-color:rgb(127,127,127);
	box-shadow:0 0 8px rgba(0,0,0,.2);
}
div.highlight h2
{
	margin-left:0; /* Remove outdent. */
}
div.highlight > h2
{
	margin-top:0; /* Remove top margin. */
}
table.highlight
{
	box-shadow:0 0 8px rgba(0,0,0,.2);
	background-color:rgba(0,0,0,.1); /* Make the background match the box shadow. Box shadow opacity is 50% of regular opacity. */
}
table.highlight td
{
	background-color:rgb(127,127,127);
}
table.highlight
,table.highlight tr
,table.highlight th
,table.highlight td
{
	border-color:transparent;
}
table.highlight tr:hover
{
	background-color:transparent; /* Remove background colour. */
}
img.shadow
{
	box-shadow:0 0 20px rgba(0,0,0, .3);
}
.wp-caption
{
	margin:.8em 0;
	padding:10px;
	background-color:rgb(127,127,127);
	box-shadow:0 0 8px rgba(0,0,0,.2);
}
.wp-caption-text
{
	text-align: center;
}
@media screen and (min-width:950px)
{
	.column-main
	{
		padding-top:0; /* Remove the top padding. */
		float:left;
		width:60%;
	}
	.column-main.column-main-wide
	,body.service-admin .column-main
	,body.service-invitations .column-main
	,body.service-recipes .column-main
	,body.service-repository .column-main
	,body.service-documents .column-main
	,body#page-id-store-order-account .column-main
	,body#page-id-store-order-account-create .column-main
	,body#page-id-store-order-address .column-main
	,body#page-id-store-order-shipping .column-main
	,body#page-id-store-order-payment .column-main
	,body#page-id-store-order-review .column-main
	,body#page-id-store-order-complete .column-main
	{
		width:100%;
	}
	.column-main-2
	{
		margin-top:2em; /* This margin is in a separate element from .column-main since that is a floated element, and if the margin were applied to that element, then the it wouldn't collapse with the margin of the first heading. */
	}
	.column-secondary
	{
		padding-top:0; /* Remove the top padding. */
		float:left;
		padding-left:10%;
		width:40%;
	}
	.column-secondary-2
	{
		margin-top:2em; /* This margin is in a separate element from .column-main since that is a floated element, and if the margin were applied to that element, then the it wouldn't collapse with the margin of the first heading. */
	}
	.content .show-in-sidebar
	{
		position:absolute;
		right:-66%;
		max-width:50%;
	}
	/* Increase the negative right and left margins and the padding when the box is in the secondary column on a wide screen. */
	.column-secondary div.highlight
	{
		margin-right:-5%;
		margin-left:-5%;
		padding:.8em 5%;
		max-width:110%;
	}
	.column-secondary h2
	{
		margin-left:0; /* Remove outdent. */
	}
	/* Don't show anything in the sidebar on the search results page. */
	body.search-results .content .show-in-sidebar
	{
		position:relative;
		right:auto;
		max-width:100%;
	}
}

/* MARK: Blog */

ol.post-list
{
	margin-left:0;
}
ol.post-list > li
{
	list-style-type:none;
}
ol.post-list .post-list-content h1
,ol.post-list .post-list-content h2
,ol.post-list .post-list-content h3
,ol.post-list .post-list-content h4
,ol.post-list .post-list-content h5
,ol.post-list .post-list-content h6
{
	margin-left:0;
}
.content time
,.content .comment-link
{
	font-size:.8em;
	color:rgb(204,204,204);
}
.content .comment-link
{
	float:right;
	text-align:right;
}
ul.sidebar-blog
{
	margin-left:0;
}
ul.sidebar-blog > li
{
	list-style-type:none;
}

/* MARK: Blog comments */

#comments article
{
	clear:both;
	margin:10px 0 -5px -5px; /* Negative bottom and left margins should match the border width of #comments li, and comments ul, below. */
	padding:10px;
	background-color:rgb(127,127,127);
}
#comments #respond
{
	clear:both;
	margin:10px 0;
	padding:10px;
	background-color:rgb(127,127,127);
}
#comments h1
,#comments h2
,#comments h3
,#comments h4
,#comments h5
,#comments h6
{
	margin-left:0;
}
/* First level */
#comments ul
,#comments ol
{
	margin-left:0;
}
/* Second level */
#comments li ul
,#comments li ol
{
	margin-left:15px;
	margin-bottom:-5px; /* Negative margin width should match the border width of #comments article, above, and comments li, below. */
}
#comments li
{
	margin-bottom:0;
	list-style-type:none;
	border-width:0 0 5px 5px; /* Border width should match the negative margin width of #comments article, and #comments ul, above. */
	border-style:solid;
	border-color:rgb(127,127,127);
}
#comments h3
,#comments h4
{
	margin-bottom:0;
	padding-bottom:0;
}
#comments article h3
,#comments article h4
,#comments #respond h3
,#comments #respond h4
{
	margin-top:0;
}
#comments span.edit-link
{
	float:right;
}
#comments time
,#comments .comment-notes
,#comments .form-allowed-tags
{
	font-size:.8em;
}
#comments .comment-reply-link-container
{
	display:block;
	clear:left;
}
#comments .comment-form-author input
,#comments .comment-form-email input
,#comments .comment-form-url input
{
	display:block;
}
#comments textarea#comment
{
	width:100%;
}

@media print
{
	#comments #respond
	{
		display:none;
	}
}

/* MARK: Footer */

footer
{
	clear:both;
	padding:1% 8% 0;

	font-size:.8em;
}
body.paper footer
{
	padding-left:0;
	padding-right:0;
	padding-bottom:0;
	
	background-color:transparent;
}
@media print
{
	footer
	{
		padding-left:0;
		padding-right:0;
		padding-bottom:0;

		background-color:transparent;
	}
}
footer:after
{
	content:"";
	display:block;
	clear:both;
}
footer a
,footer a:link
{
	text-decoration:none;
	border-bottom-width:0;
}
.copy
{
	float:left;
	padding-top:1em;
}
a.footer-right
{
	display:block;
	float:right;
	padding:1em 0em 1.5em 0;
	
	color:rgb(var(--font-colour-normal));
	text-decoration:none;
	text-align:right;
}
a.eco
{
	padding-right:3.5em;
	width:10.5em;
	background:url("images/eco.png") top right no-repeat;
	background-size:contain;
}
@media screen and (min-width:480px)
{
	footer
	{
		padding-left:35px;
		padding-right:15px;
	}
}
@media print
{
	.copy
	{
		padding:0;
	}
	a.footer-right
	{
		padding:0;
		width:auto;

		color:rgb(0,0,0);
	}
}

/* MARK: Other */

.clear
{
	clear:both;
}
.alignleft
{
	float:left;
	margin-right:15px;
}
.alignright
{
	float:right;
	margin-left:15px;
}
.aligncenter
{
	clear:both;
	display:block;
	margin-left:auto;
	margin-right:auto;
}
p.alignleft
{
	float:none;
	text-align:left;
}
p.alignright
{
	float:none;
	text-align:right;
}
td.alignleft
,th.alignleft
{
	float:none;
	clear:none;
	display:table-cell;
	text-align:left;
	margin:0;
}
td.alignright
,th.alignright
{
	float:none;
	clear:none;
	display:table-cell;
	text-align:right;
	margin:0;
}
td.aligncenter
,th.aligncenter
{
	clear:none;
	display:table-cell;
	text-align:center;
	margin:0;
}
.not-available
{
	background-image:url("images/close.png");
}
.available
{
	background-image:url("images/ok.png");
}