/*
 {$BRAND_NAME`}
 Copyright (c) ocProducts, 2004-2016
*/

/*
This is Composr's main CSS file. It defines colours, re-used styles, and core styles for core functionality.

The CSS is written to CSS3/HTML5 standards. Parts that are still considered experimental on some browsers are surrounded using the Tempcode 'BETA_CSS_PROPERTY' symbol, which automatically injects CSS prefixes for all major browsers.

Most sizes are defined in 'em' units. 1em is roughly 10px, depending on font size. If a size is not defined in 'em' then it is probably due to it being dependent on the size of some related image.
'em' units are great because they scale very well. If you reduce the font size, the spacings will reduce as well, in proportion.

{!en_left} and {!en_right} usually resolve to left and right respectively. Right-to-left languages (commonly Arabic and Hebrew) will be the opposite. We only test with Left-to-right, but are likely to accept patches to fix any little glitches that may have developed over time.

When editing theme CSS we recommend you comment out code you're removing and heavily comment your own changes - this will make it much easier for you to upgrade your theme to new versions. Composr minifies outputted CSS, so there is no performance penalty for doing this.
*/

/*
=========================
========Colours==========
=========================
*/

/* Used to initiate equations (although running the Theme Wizard replaces these with what the user chooses - which is how it works) */
{$THEME_WIZARD_COLOR,#426aa9,seed,100% 426aa9}
{$THEME_WIZARD_COLOR,#ffffff,WB,100% FFFFFF}
{$THEME_WIZARD_COLOR,#000000,BW,100% 000000}
/*Theme seed is: 426aa9*/

/* The fundamental website */
{$THEME_WIZARD_COLOR,#e3eaf6,fixed_width_background,11% (seed sat_to 100) + 89% WB}
{$THEME_WIZARD_COLOR,#8ba4ca,fixed_width_border,61% seed + 39% WB}
{$THEME_WIZARD_COLOR,#ffffff,main_background,100% WB}
{$THEME_WIZARD_COLOR,#ebebeb,main_2_background,92% WB + 8% BW}

/* Colours to mirror UI conventions (i.e. non-thematic) */
{$THEME_WIZARD_COLOR,#000000,native_ui_foreground,100% 000000}
{$THEME_WIZARD_COLOR,#ffffff,native_ui_background,100% FFFFFF}
{$THEME_WIZARD_COLOR,#feffcb,native_ui_active_background,100% FEFFCB}
{$THEME_WIZARD_COLOR,#27539B,native_ui_selected_background,100% 27539B}
{$THEME_WIZARD_COLOR,#ffffff,native_ui_selected_foreground,100% FFFFFF}
{$THEME_WIZARD_COLOR,#ffffff,native_ui_button_foreground,100% FFFFFF}
{$THEME_WIZARD_COLOR,#ff0000,native_ui_alertfield_background,100% FF0000}
{$THEME_WIZARD_COLOR,#ffffff,native_ui_alertfield_foreground,100% FFFFFF}
{$THEME_WIZARD_COLOR,#545454,unfilled_input_text,100% 545454}
{$THEME_WIZARD_COLOR,#888888,locked_input_field,100% 888888}
{$THEME_WIZARD_COLOR,#0a1019,comfortable_input_field_text,85% 000000 + 15% seed}
{$THEME_WIZARD_COLOR,#b5b5b5,tab_border,100% b5b5b5}
{$THEME_WIZARD_COLOR,#008000,adwords_style_text,100% 008000} /* Google adwords style */
{$THEME_WIZARD_COLOR,#ffffff,floating_section_background,100% WB}
{$THEME_WIZARD_COLOR,#fffcc4,floating_alert_background,100% fffcc4}

/* Colours to mirror human understandings (i.e. non-thematic) */
{$THEME_WIZARD_COLOR,#ffffc9,yellow_highlight_background,100% #FFFFC9}
{$THEME_WIZARD_COLOR,#cc3333,red_highlight_background,100% CC3333}
{$THEME_WIZARD_COLOR,#e7981e,orange_highlight_text,100% E7981E}
{$THEME_WIZARD_COLOR,#ff8888,light_error_border,100% FF8888}
{$THEME_WIZARD_COLOR,#fff2f2,light_error_background,95% WB + 5% FF0000}
{$THEME_WIZARD_COLOR,#cc0000,red_highlight_text,80% FF0000 + 20% 000000}
{$THEME_WIZARD_COLOR,#007A00,green_highlight_text,100% 007A00}
{$THEME_WIZARD_COLOR,#ede2e4,required_background,60% (area_4_background hue_to 0) + 40% area_background}
{$THEME_WIZARD_COLOR,#ebe6eb,required_2_background,40% (area_4_background hue_to 0) + 60% area_background}
{$THEME_WIZARD_COLOR,#000000,dark_shadow,100% BW}

/* For standard elements */
{$THEME_WIZARD_COLOR,#325180,heading_text,76% seed + 24% BW}
{$THEME_WIZARD_COLOR,#051225,a.hover,30% a.link + 70% BW}
{$THEME_WIZARD_COLOR,#113871,a.visited,67% (seed sat_to 85) + 33% BW}
{$THEME_WIZARD_COLOR,#123d7b,a.link,73% (seed sat_to 85) + 27% BW}
{$THEME_WIZARD_COLOR,#bdcbe1,th_secondary_text,35% seed + 65% WB}
{$THEME_WIZARD_COLOR,#a2b6d5,hr,60% area_background + 40% seed}
{$THEME_WIZARD_COLOR,#325180,divider_line,76% seed + 24% BW}

/* Borders */
{$THEME_WIZARD_COLOR,#6b81a1,standard_border,95% (seed sat_to 33) + 5% BW}
{$THEME_WIZARD_COLOR,#4b5a71,dark_border,70% standard_border + 30% BW}
{$THEME_WIZARD_COLOR,#c1cee3,pale_border,33% seed + 67% WB}
{$THEME_WIZARD_COLOR,#8497b3,point_of_interest_border,50% dark_border + 50% WB}

/* Backgrounds (quiet a variety, as we need to be able to stack them, to have both hover and active effects, to have zebra striping, and various other levels of perceived focus) */
{$THEME_WIZARD_COLOR,#eaeff6,area_background,11% seed + 89% WB}
{$THEME_WIZARD_COLOR,#e3e9f2,area_2_background,15% seed + 85% WB}
{$THEME_WIZARD_COLOR,#eef2f7,area_3_background,60% area_2_background + 40% WB}
{$THEME_WIZARD_COLOR,#d9e1ee,area_4_background,20% seed + 80% WB}
{$THEME_WIZARD_COLOR,#f4f4f4,area_5_background,3% seed + 97% WB}
{$THEME_WIZARD_COLOR,#8daede,area_6_background,65% (seed val_to 80) + 35% WB}
{$THEME_WIZARD_COLOR,#f2f5f9,area_faded_background,80% area_background + 20% WB}
{$THEME_WIZARD_COLOR,#d9e1ee,area_zebra_background,20% seed + 80% WB}
{$THEME_WIZARD_COLOR,#e6d8df,area_hover_background,92% (area_background hue_to 92) + 8% BW}
{$THEME_WIZARD_COLOR,#c2d1e5,area_hover_2_background,20% seed + 80% WB}
{$THEME_WIZARD_COLOR,#d9e1ee,area_current_background,93% (area_background sat_to 15) + 7% BW}
{$THEME_WIZARD_COLOR,#dce2eb,point_of_interest_background,97% area_2_background + 2% BW}
{$THEME_WIZARD_COLOR,#6b81a1,footer_background,95% (seed sat_to 33) + 5% BW}
{$THEME_WIZARD_COLOR,#607490,footer_2_background,85% (seed sat_to 33) + 15% BW}
/* Backgrounds, employing color wheel theory */
{$THEME_WIZARD_COLOR,#d9e1ee,area_highlight_background,20% seed + 80% WB}
{$THEME_WIZARD_COLOR,#d9ecee,area_highlight_left_complement_background,20% (seed hue_add -21) + 80% WB}
{$THEME_WIZARD_COLOR,#dbd9ee,area_highlight_right_complement_background,20% (seed hue_add +21) + 80% WB}
{$THEME_WIZARD_COLOR,#eee6d9,area_highlight_complement_background,20% (seed hue_add 128) + 80% WB}

/* Text */
{$THEME_WIZARD_COLOR,#0d1522,slightly_seeded_text,20% seed + 80% BW}
{$THEME_WIZARD_COLOR,#f9fafc,slightly_seeded_pale_text,3% seed + 97% WB}
{$THEME_WIZARD_COLOR,#3d434c,slightly_seeded_gray_text,20% WB + 65% BW + 15% seed}
{$THEME_WIZARD_COLOR,#325180,area_text,76% seed + 24% BW}
{$THEME_WIZARD_COLOR,#2a3d5a,area_key_text,53% (seed sat_to 53) + 47% BW}
{$THEME_WIZARD_COLOR,#0d2d5d,area_link,55% (seed sat_to 86) + 45% BW}
{$THEME_WIZARD_COLOR,#0a1019,area_2_link,15% seed + 85% BW}
{$THEME_WIZARD_COLOR,#1a2a44,area_2_link_hover,40% seed + 60% BW}
/* Text, employing color wheel theory */
{$THEME_WIZARD_COLOR,#214f55,slightly_seeded_left_complement_text,50% (seed hue_add -21) + 50% BW}
{$THEME_WIZARD_COLOR,#262155,slightly_seeded_right_complement_text,50% (seed hue_add +21) + 50% BW}
{$THEME_WIZARD_COLOR,#554121,slightly_seeded_complement_text,50% (seed hue_add 128) + 50% BW}

/* Special colour for box titles */
{$THEME_WIZARD_COLOR,#ffffff,box_title_text,100% WB}
{$THEME_WIZARD_COLOR,#cccccc,box_title_text_hover,80% WB + 20% BW}
{$THEME_WIZARD_COLOR,#426aa9,box_title_background,100% seed}
{$THEME_WIZARD_COLOR,#7f9ac5,box_title_background_2,68% seed + 32% WB}

/* Special colour for code/quote boxes */
{$THEME_WIZARD_COLOR,#8ea6cb,code_title_background,60% seed + 40% WB}
{$THEME_WIZARD_COLOR,#3f3f3f,code_text,25% code_background + 85% BW}
{$THEME_WIZARD_COLOR,#fafbfd,code_background,25% area_background + 75% WB}
{$THEME_WIZARD_COLOR,#7f9ac5,code_border,68% seed + 32% WB}

/* Drop down menus should look 'above' the site */
{$THEME_WIZARD_COLOR,#c1cee3,dropdown_menu_background,33% seed + 67% WB}
{$THEME_WIZARD_COLOR,#d9e1ee,dropdown_menu_text,20% seed + 80% WB}

/* Global-level messages should stand out compared to other styling */
{$THEME_WIZARD_COLOR,#ebe773,message_border,100% EBE773} /* Intentionally coloured on all themes */
{$THEME_WIZARD_COLOR,#c4cdd9,message_highlighted_part,40% standard_border + 60% WB}

/* Footer */
{$THEME_WIZARD_COLOR,#8ba4ca,footer_tinting,61% seed + 39% WB}
{$THEME_WIZARD_COLOR,#ffffff,footer_text,100% WB}

/* Used for image generation */
{$THEME_WIZARD_COLOR,#e8edf6,washed_out,10% (seed sat_to 85) + 90% WB}
{$THEME_WIZARD_COLOR,#5a85c5,lgrad,67% (seed sat_to 95) + 33% FFFFFF} /* We always want the light source coming from the top */
{$THEME_WIZARD_COLOR,#345495,dgrad,95% (seed sat_to 65) + 5% 000000} /* We always want the light source coming from the top */
{$THEME_WIZARD_COLOR,#5477bd,ltgrad,67% (seed sat_to 135) + 33% FFFFFF}  /* We always want the light source coming from the top */
{$THEME_WIZARD_COLOR,#707c95,dtgrad,95% (seed sat_to 25) + 5% 000000} /* We always want the shadows at the bottom */
{$THEME_WIZARD_COLOR,#e1e2e3,comcode_quote_left,48% comcode_quote_right + 52% WB}
{$THEME_WIZARD_COLOR,#bfc1c4,comcode_quote_right,100% code_title_background}
{$THEME_WIZARD_COLOR,#0e2a63,a.link__dark,63% (seed sat_to 85) + 37% BW}
{$THEME_WIZARD_COLOR,#030a17,a.hover__dark,20% a.link + 80% BW}
{$THEME_WIZARD_COLOR,#707377,special_borderer,76% seed + 24% BW}
{$THEME_WIZARD_COLOR,#0a1e47,special_middle,45% (seed sat_to 85) + 65% BW}
{$THEME_WIZARD_COLOR,#597bbf,cnspostindicator,65% (seed sat_to 100) + 35% WB}
{$THEME_WIZARD_COLOR,#597bf7,cnsredirectindicator,65% (seed sat_to 100) + 35% WB + 000038 - 061600}

/* Range of bright varying colours */
{$THEME_WIZARD_COLOR,#9c029a,gcol_1,100% #9C029A}
{$THEME_WIZARD_COLOR,#d10a00,gcol_2,100% #D10A00}
{$THEME_WIZARD_COLOR,#8b5704,gcol_3,100% #8B5704}
{$THEME_WIZARD_COLOR,#5800fa,gcol_4,100% #5800FA}
{$THEME_WIZARD_COLOR,#0068a8,gcol_5,100% #0068A8}
{$THEME_WIZARD_COLOR,#637029,gcol_6,100% #637029}
{$THEME_WIZARD_COLOR,#1f7c03,gcol_7,100% #1F7C03}
{$THEME_WIZARD_COLOR,#6c6c04,gcol_8,100% #6C6C04}
{$THEME_WIZARD_COLOR,#966038,gcol_9,100% #966038}
{$THEME_WIZARD_COLOR,#96384a,gcol_10,100% #96384A}
{$THEME_WIZARD_COLOR,#963895,gcol_11,100% #963895}
{$THEME_WIZARD_COLOR,#4e3896,gcol_12,100% #4E3896}
{$THEME_WIZARD_COLOR,#386296,gcol_13,100% #386296}
{$THEME_WIZARD_COLOR,#2b7173,gcol_14,100% #2B7173}
{$THEME_WIZARD_COLOR,#2d7b45,gcol_15,100% #2D7B45}

/*
=========================
===Overridden Elements===
=========================
*/

html {
	overflow-y: scroll; /* This makes rendering smoother, no jerk when browser realises a scrollbar is needed, or between pages with/without */
}

html, body {
	border: 0;
	{$BETA_CSS_PROPERTY,text-size-adjust: none;}
}

body, .email_body, textarea, input, td, th {
	/* 'Open Sans' is a Google font, and only will be enabled if uncommented in HTML_HEAD.tpl -- so normally it is Segoe UI (Windows, newer version of Tahoma) or Tahoma that is active (available on Windows and Mac since Leopard) or a similar humanist sans-serif font */
	font-family: 'Open Sans', 'Segoe UI', Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

tt, kbd, samp {
	font-weight: bold;
	font-size: 1.15em;
	word-wrap: break-word;
}

abbr {
	border-bottom: 1px dotted; /* For Safari, which does not have it by default */
	text-decoration: none;
	cursor: help;
}
a abbr {
	cursor: pointer;
}

/* Give all browsers a 'q' tag with smart quotes */
q:before {
	content: "\201c";
}
q:after {
	content: "\201d";
}

/* Reapply default styles non-HTML5-aware browsers */
details, aside, header, footer, nav, article, section, figure, figcaption {
	display: block;
}

textarea, input, code {
	font-size: 1em;
}

/* Our little 'typing' effect, shows a keyboard when focusing input fields */
/*Doesn't look good in IE10 input[type="text"]:focus, input[type="password"]:focus {
	background: url('{$IMG_INLINE;,keyboard}') right center no-repeat {$GET,native_ui_background};
}
input[type="text"][size="6"]:focus, input[type="text"][readonly="true"]:focus {
	background-image: none;
}*/

/* Normally a browser default, but gets inherited on some phones */
input[type="text"], input[type="password"], input[type="color"], input[type="email"], input[type="number"], input[type="range"], input[type="search"], input[type="tel"], input[type="url"], textarea, select {
	background-color: {$GET,native_ui_background};
	color: {$GET,native_ui_foreground};
}
input[type="text"]:disabled, input[type="password"]:disabled, input[type="color"]:disabled, input[type="email"]:disabled, input[type="number"]:disabled, input[type="range"]:disabled, input[type="search"]:disabled, input[type="tel"]:disabled, input[type="url"]:disabled, textarea:disabled, select:disabled {
	color: gray;
}

a, .button_hyperlink {
	color: {$GET,a.link};
}
a:visited {
	color: {$GET,a.visited};
}
a:hover, .button_hyperlink:hover {
	color: {$GET,a.hover};
}

h1, h2, h3, .faux_h2 {
	font-weight: normal;
	color: {$GET,heading_text};
	border-bottom: 1px solid {$GET,pale_border};
}
h1 {
	font-size: 1.6em;
	margin-top: 0.27em; /* Consistency with boxes (so gap between header and content is consistent), but rationalised against higher em font size */
}
h2, .faux_h2 {
	font-size: 1.3em;
}
h3 {
	font-size: 1.1em;
	letter-spacing: -0.75px;
}
h3 a, h3 a:hover {
	text-decoration: none;
}
h4 {
	font-size: 1em;
	color: {$GET,heading_text};
	font-weight: bold;
}
/* An iframe screen */
.opens_below h1 {
	display: none;
}

td, th {
	vertical-align: top;
	padding: 0.25em;
}
th>p:first-child, td>p:first-child, th>h2:first-child, td>h3:first-child {
	margin-top: 0;
}
th>p:last-child, td>p:last-child {
	margin-bottom: 0;
}
th, .fake_th {
	background-color: {$GET,box_title_background};
	color: {$GET,box_title_text};
	font-weight: bold;
	text-align: center;
}
.table_header_sorting {
	float: right;
}
.columned_table[itemprop="significantLinks"] tbody tr th, .columned_table[itemprop="significantLinks"] tbody tr .fake_th { /* itemprop is for precedence */
	background-color: {$GET,box_title_background_2} !important;
	color: {$GET,box_title_text} !important;
	text-align: left;
}
th a, th a:hover, th a:visited, .fake_th a, .fake_th a:hover, .fake_th a:visited {
	color: {$GET,box_title_text};
}
thead>tr>th, .boxless_space .box>table>thead>tr>th, .pte_set_box .box>table>thead>tr>th {
	background-color: {$GET,box_title_background};
	color: {$GET,box_title_text};
	background-repeat: repeat-x;
}
.light_table th, .light_table .fake_th, .light_table thead>tr>th, .light_table .boxless_space .box>table>thead>tr>th, .light_table .pte_set_box .box>table>thead>tr>th {
	background-color: {$GET,area_6_background};
}
.box>table>thead>tr>th {
	background: {$GET,point_of_interest_background};
	color: {$GET,area_key_text};
}
.box thead>tr>th a {
	color: inherit;
}
/* .de_th makes a th look like a td, yet allows us to use correct markup */
td, th.de_th {
	color: {$GET,slightly_seeded_text};
	font-weight: normal;
	text-align: {!en_left};
	font-weight: normal;
	border: 0;
}
table[border="1"] td, table[border="1"] th.de_th { /* To make WYSIWYG easier */
	border: 1px solid;
}
th.de_th {
	background-color: transparent;
	background-image: none;
}
th.de_th a, th.de_th a:hover, th.de_th a:visited {
	color: {$GET,slightly_seeded_text};
}

hr {
	height: 0;
	border: 0;
	border-bottom: 2px dotted {$GET,hr};
	text-align: left; /* Fixes difference with Opera */
}

img {
	border: 0; /* Some (older?) browsers imply a border for linked images */
}

blockquote {
	margin: 1em 0;
}

iframe {
	padding: 0;
	margin: 0;
	border: 0;
}

/*input[type="text"],textarea {  So Comcode can be typed
	unicode-bidi: bidi-override;
	direction: ltr;
}*/
#wysiwyg_editor input[type="text"], #wysiwyg_editor textarea {
	unicode-bidi: normal;
	direction: {!dir};
}


/*{+START,IF,{$MOBILE}}*/
	select {
		max-width: 100px;
		white-space: nowrap !important;
	}

	/* This prevents automatic zooming when selecting inputs */
	input[type="text"], input[type="password"], input[type="color"], input[type="email"], input[type="number"], input[type="range"], input[type="search"], input[type="tel"], input[type="url"], select, textarea {
		font-size: 16px !important;
	}

	/* On mobiles we want maximum fluidity */
	table, table.do_next_section {
		table-layout: auto !important;

		/* Allows wrapping */
		overflow-x: visible !important;
		overflow-y: visible !important;
	}
	.field_name_column, .field_input_column {
		width: auto !important;
	}
	* {
		white-space: normal !important;
		{$BETA_CSS_PROPERTY,word-wrap: break-word !important;}
	}
/*{+END}*/

/* Cool effect to change how text selection looks; not valid CSS, but is safe */
.website_body ::selection {
	background: {$GET,yellow_highlight_background};
}
comcode-{$REPLACE,\,,::selection \,comcode-,{$COMCODE_TAGS;,{$WYSIWYG_COMCODE__XML_BLOCK}}\,{$COMCODE_TAGS;,{$WYSIWYG_COMCODE__XML_INLINE}}}, tempcode ::selection {
	background: {$GET,green_highlight_text};
}

/* Stop Chrome breaking our datalist display with an arrow */
input.input_username::-webkit-calendar-picker-indicator {
  display: none;
}

/*
=========================
======Global Layout======
=========================
*/

/* Consider .website_body as 'body': it is just we cannot put our styles directly on body because sometimes this gets used in things we should not mess with such as the WYSIWYG editors frame (which is #wysiwyg_editor) and e-mails */
body.website_body {
	padding: 0 !important;
	margin: 0;
	color: {$GET,slightly_seeded_text};
	background-color: {$GET,main_background};
}
body.website_body.frame {
	background: transparent; /* Don't assume too much for a frame, it may be nested inside a box for example */
}

/*{+START,IF,{$CONFIG_OPTION,fixed_width}}*/
/*{+START,IF,{$NOT,{$MOBILE}}}*/
	html>body#main_website { /* #main_website targets only the main site screen, avoiding frames etc */
		/* Want to change the tiled background?
			Try this Google search to get image ideas http://www.google.co.uk/search?tbm=isch&q=tile+background
			Find how to edit the referenced "outer_background" theme image by doing an Admin Zone search for "outer_background"
		*/
		background: url('{$IMG_INLINE;,outer_background}');
	}
	#main_website #main_website_inner {
		width: 980px;
		position: relative;
		margin: 15px auto 15px auto;
		border: 1px solid {$GET,fixed_width_border};
		{$BETA_CSS_PROPERTY,box-shadow: 0 0 20px {$GET,standard_border};}
	}

	/* Responsive design for tablets etc */
	@media screen and (max-width:1024px) {
		#main_website #main_website_inner {
			margin: 0 0 0 0.5em;
			border: 0;
			{$BETA_CSS_PROPERTY,box-shadow: none;}
		}

		.global_banner {
			top: 0 !important;
		}
	}
/*{+END}*/
/*{+END}*/

body.website_body, #wysiwyg_editor {
	font-size: 13px; /* Note that the font sizer may override this (FONT_SIZER.tpl) */
}
#wysiwyg_editor {
	margin: 0;
	color: {$GET,slightly_seeded_text};
	background-color: {$GET,main_background};
	{$BETA_CSS_PROPERTY,user-select: text !important;}
}

body#main_website {
	margin: 0;

	/* To stop it scaling down if we are applying "width=device-width" and forcing a page to displaying non-mobile */
	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		min-width: 1000px;
	/*{+END}*/
}

body#main_website #main_website_inner .global_middle_outer {
	min-height: 450px;
}

/* If not #main_website, it'll be one of these (the names correspond to the templates used) */
body#basic_html_wrap {
	margin: 0;
}
body#standalone_html_wrap {
	margin: 0;
}

header {
	background-color: {$GET,main_background};
}

header h1 {
	margin: 0;
	/*{+START,IF,{$MOBILE}}*/
		width: 100%;
		text-align: center;
	/*{+END}*/
	border: 0;
}

.global_banner {
	text-align: center;
	background: url('{$IMG;,banner_frame}') center top no-repeat;
	position: relative;
	/*{+START,IF,{$CONFIG_OPTION,fixed_width}}*/
		top: -16px;
	/*{+END}*/
	padding-top: 6px;
	padding-bottom: 3px;
}

.global_banner + .logo_outer {
	margin-top: 0;
}

.text_banner {
	width: 13.5em;
	font-family: 'Arial', sans-serif;
	background-color: {$GET,native_ui_background};
}
.text_banner a {
	font-size: 1.3em;
	display: block;
}

.text_banner_l_text {
	color: {$GET,adwords_style_text};
	font-size: 0.9em;
}

.logo_outer {
	display: block;
	margin: 0;
	overflow: hidden;
}
.logo_outer a, .logo_outer img {
	display: block;
}
.logo_outer .logo {
	width: 100%;
	height: auto;
	padding: 0; /* Only needed because some external CSS may mess with the common name of ".logo" */
}

.global_navigation {
	border-top: 1px solid {$GET,standard_border};
	border-bottom: 1px solid {$GET,standard_border};
	background-color: {$GET,dgrad};
	{$BETA_CSS_PROPERTY,background-image: linear-gradient(to bottom\, {$GET,lgrad}\, {$GET,dgrad}) !important;}
	color: {$GET,WB};
	/*{+START,IF,{$MOBILE}}*/
		position: relative;
	/*{+END}*/
	min-height: 3.4em;
}

.global_navigation_inner {
	overflow: hidden;
	/*{+START,IF,{$MOBILE}}*/
		margin-left: 8em !important; /* Space for the menu button, which is position:absolute */
	/*{+END}*/
}

.global_navigation .top_buttons, .global_navigation .top_form {
	padding: 0.5em 0;
	margin-right: 1em;
	float: right;
}

.global_navigation .top_buttons {
	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		margin-left: 1.3em;
	/*{+END}*/
	margin-top: 1px; /* To force it align correctly with the form in a different block (which is taller) */
}

.global_navigation .top_form.top_search {
	margin-top: 3px; /* To force it align correctly with the form in a different block (which is taller) */
}
.global_navigation .top_form * {
	vertical-align: middle;
}

.global_navigation .top_login .horizontal_links {
	margin-left: 0.5em;
	width: auto;
	padding-top: 2px; /* To force it align correctly with the form in a different block (which is taller) */
}

.global_navigation .top_login .horizontal_links a {
	color: inherit;
	text-decoration: none;
}
.global_navigation .top_login .horizontal_links a:hover {
	text-decoration: underline;
}

/* This is applied to the screen title, which is specially included on each screen; in the case of Comcode pages it is the first level 1 title. The screen title is by default an h1, but we define the styles separately so we can style this special title independently (there are lots of cool things we could do to it) */
.screen_title {
	margin-top: 0.35em;
	margin-bottom: 0.8em;
	min-width: 300px;
	padding-bottom: 6px; /* For better alignment with breadcrumbs to the right */
}
.screen_title li span {
	display: block;
}

/* .hero_section is specially designed to wrap around a title and some text, to give a 'hero' introduction for the front page of a site (standard marketing technique) */
.hero_section {
	{$BETA_CSS_PROPERTY,background-image: linear-gradient(to bottom right\, {$GET,main_background}\, {$GET,main_2_background});}
	font-size: 1.25em;
	color: {$GET,slightly_seeded_text};
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* Choose better font for larger text */
	padding: 2em 3em;
	margin-bottom: 3em;
	position: relative;
	left: -0.8em; /* So is flush to borders, undoes page padding */
}
#wysiwyg_editor .hero_section {
	left: 0;
}
.hero_section h1 {
	font-size: 2.6em;
	margin-bottom: 0.1em;
	text-decoration: none;
	border-bottom: none;
	color: inherit;
}
.hero_section * {
	margin-top: 0;
}
.hero_section .hero_button a:visited, .hero_section .hero_button a:link, .hero_section .hero_button a:active, .hero_section .hero_button a:hover, .hero_section .hero_button a.user_link:link, .hero_section .hero_button a.user_link:active, .hero_section .hero_button a.user_link:hover {
	text-decoration: none;
	padding: 0.5em !important;
	background-image: none !important; /* Will be overridden below if linear-gradient supported by browser */
	background-position: 0 0 !important;
	margin-bottom: 1em;
	{$BETA_CSS_PROPERTY,background-image: linear-gradient(to bottom\, {$GET,lgrad}\, {$GET,dgrad}) !important;}
	font-size: 0.9em;
}

.global_breadcrumbs {
	padding: 7px 0 7px 0;
	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		/*{+START,IF,{$CONFIG_OPTION,fixed_width}}*/
			text-align: {!en_right}; /* Goes on own line in fixed width mode, due to lack of space */
		/*{+END}*/
		/*{+START,IF,{$NOT,{$CONFIG_OPTION,fixed_width}}}*/
			float: {!en_right}; /* Sits beside title on non-fixed width */
		/*{+END}*/
		margin-left: 0.5em;
	/*{+END}*/
}
.global_breadcrumbs abbr, .global_breadcrumbs a, .global_breadcrumbs span {
	white-space: nowrap !important;
}
/*{+START,IF,{$MOBILE}}*/
	.global_breadcrumbs {
		margin-bottom: 1em;
	}
/*{+END}*/

.non_accessibility_redundancy .breadcrumbs {
	width: 100%;
}

.breadcrumbs {
	font-weight: bold;
}

.breadcrumbs .sep:after, .associated_breadcrumbs .sep:after {
	content: " \00A0\00BB " !important;
	display: inline-block;
	font-size: 0.9em;
	{$BETA_CSS_PROPERTY,opacity: 0.5;}
}
.breadcrumbs .sep:last-child:after, .associated_breadcrumbs .sep:last-child:after {
	content: "" !important;
}

.breadcrumbs_img {
	margin-{!en_right}: 4px;
}

.breadcrumbs_img, .breadcrumbs span .breadcrumbs_img a {
	vertical-align: middle;
}

.title_tagline {
	font-size: 0.95em;
	padding-bottom: 2em;
	color: {$GET,area_key_text};
}
h1 + .title_tagline {
	margin-top: -1.2em;
}

body#main_website #main_website_inner, html>body div.global_middle_faux {
	background-color: {$GET,main_background};

	/* Want to set a tiled background?
		Uncomment the code below
		Try this Google search to get image ideas http://www.google.co.uk/search?tbm=isch&q=tile+background
		Find how to edit the referenced "inner_background" theme image by doing an Admin Zone search for "inner_background"
	*/
	/*background: url('{$IMG_INLINE;,inner_background}');*/
}

.main_website_faux {
	background-color: {$GET,fixed_width_background} !important;
}

.global_middle_outer {
	margin-top: 0.8em;
	overflow: visible !important;
}
/* We normally hide stuff with overflow:hidden, but some share buttons use absolute positioned layers that need to escape our box */
.global_middle_outer:after {
	content: "";
	display: table;
	clear: both;
}
/*{+START,IF,{$NOT,{$CONFIG_OPTION,collapse_user_zones}}}*/
	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		.zone_running_ .global_middle_outer {
			margin-top: 0; /* Splash page style design, tighter spacing */
		}

		.zone_running_ .global_side_panel {
			margin-top: 0.8em;
		}
	/*{+END}*/
/*{+END}*/

.global_middle {
	/*overflow: hidden; Breaks Safari so we'll let the surrounding element contain floats*/

	margin-bottom: 1em;

	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		/* Add some spacing. This will be overwritten to 1.5em in rules below if we have panels */
		padding-{!en_left}: 1em;
		padding-{!en_right}: 1em;
	/*{+END}*/
}

.zone_running_docs .comcode_page {
	line-height: 1.35em;
}
.zone_running_docs .comcode_page img:not([width]):not([height]) {
	max-width: 100%;
	height: auto;
}

/*{+START,IF,{$MOBILE}}*/
	.global_middle, .panel_solo {
		padding-{!en_left}: 2px;
		padding-{!en_right}: 2px;
		{$BETA_CSS_PROPERTY,text-size-adjust: none;}
		width: 100% !important; /* Remove this line for 50:50 display of panels */
		{$BETA_CSS_PROPERTY,box-sizing: border-box;}
	}

	body.overlay {
		width: 100%;
		{$BETA_CSS_PROPERTY,box-sizing: border-box;}
	}

	.overlay h1 {
		display: none;
	}

	.overlay.alert .box_inner div, .overlay.confirm .box_inner div {
		{$BETA_CSS_PROPERTY,user-select: none;} {$,To stop accidental touching when dismissing}
	}
/*{+END}*/

body.popup_spacer {
	padding: 1em !important;
}
body.popup_spacer h2 {
	margin-top: 0;
}

#panel_bottom {
	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		margin: 0 1em;
	/*{+END}*/
	/*{+START,IF,{$MOBILE}}*/
		margin: 0 2px;
	/*{+END}*/
}

#panel_top .cns_member_bar_etc { /* Should not be flush with site borders (but the menu above it will be, so don't do the whole panel */
	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		margin: 0 1em;
	/*{+END}*/
	/*{+START,IF,{$MOBILE}}*/
		margin: 0 2px;
	/*{+END}*/
}

#panel_left {
	float: {!en_left};
	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		margin-{!en_left}: 1em;
	/*{+END}*/
	/*{+START,IF,{$MOBILE}}*/
		padding-{!en_left}: 2px;
		padding-{!en_right}: 1px;
		{$BETA_CSS_PROPERTY,box-sizing: border-box;}
	/*{+END}*/
}

#panel_right {
	float: {$?,{$MOBILE},{!en_left},{!en_right}};
	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		margin-{!en_right}: 1em;
	/*{+END}*/
	/*{+START,IF,{$MOBILE}}*/
		padding-{!en_right}: 2px;
		padding-{!en_left}: 1px;
		{$BETA_CSS_PROPERTY,box-sizing: border-box;}
	/*{+END}*/
}

.global_side_panel {
	{$BETA_CSS_PROPERTY,word-wrap: break-word;}
	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		width: 13em;
	/*{+END}*/
	/*{+START,IF,{$MOBILE}}*/
		width: 50%;
	/*{+END}*/
	color: {$GET,slightly_seeded_gray_text};
}
.global_middle_faux>.global_side_panel {
	width: auto;
}

/*{+START,IF,{$NOT,{$MOBILE}}}*/
	/* Spacing around middle column if it adjoins panels */
	#panel_left ~ .global_middle {
		margin-{!en_left}: 13em;
		padding-{!en_left}: 3.5em;
	}
	#panel_right ~ .global_middle {
		margin-{!en_right}: 13em;
		padding-{!en_right}: 3.5em;
	}
/*{+END}*/

.global_side_panel h2 {
	border-bottom: 1px solid;
	text-transform: lowercase;
	font-weight: normal;
	width: 50%;
	padding-{!en_left}: 10px;
	margin-{!en_left}: 10px;
}

.global_side_panel .hide_if_in_panel {
	display: none;
}
.hide_if_not_in_panel {
	display: none;
}
.global_side_panel .hide_if_not_in_panel {
	display: block;
}

.global_messages {
	margin: 0 1em;
}
.global_middle_faux .global_messages {
	margin: 0; /* Probably inside a frame, hence already indented outside said frame */
}

.global_message {
	min-height: 21px;
	margin-top: 0.75em;
	margin-bottom: 1em;
}

.global_message span, .global_message img {
	vertical-align: middle;
}
.global_message strong {
	text-shadow: 1px 0px 0px {$GET,message_highlighted_part};
	font-weight: normal;
}
.global_message img {
	margin-{!en_right}: 0.5em;
	float: left;
}
.global_message>span, .global_message>p {
	margin-left: 22px;
	padding-left: 0.5em;
	padding-top: 3px;
	display: block;
}
.global_message>p {
	margin-top: 0.6em;
	margin-bottom: 0.6em;
}

footer {
	background-color: {$GET,dgrad};
	margin-top: 2em;
	{$BETA_CSS_PROPERTY,background-image: linear-gradient(to bottom\, {$GET,footer_background}\, {$GET,footer_2_background});}

	color: {$GET,footer_text};
	/*{+START,IF,{$NOT,{$CONFIG_OPTION,fixed_width}}}*/
		{$BETA_CSS_PROPERTY,box-shadow: 0 0 2px 2px {$GET,footer_tinting};}
	/*{+END}*/
	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		padding: 1.5em;
	/*{+END}*/
}

footer .button_hyperlink, footer a, footer a:visited, footer .horizontal_links {
	color: {$GET,footer_text};
}

footer a:hover, footer .button_hyperlink:hover {
	color: {$GET,footer_tinting};
}

/*{+START,IF,{$MOBILE}}*/
	footer .global_footer_left, footer .global_footer_right {
		padding-left: 0.5em;
		padding-right: 0.5em;
	}
/*{+END}*/

footer .global_footer_left {
	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		float: {!en_left};
	/*{+END}*/
}

footer .footer_button_loading {
	{$BETA_CSS_PROPERTY,opacity: 0.4;} display: inline-block;/*Needed for IE8*/
}

footer .global_footer_left .horizontal_buttons {
	width: auto;
	white-space: nowrap;
	margin-top: 0;
	font-size: 0; /* Fixes wrapping problem */
	/*{+START,IF,{$MOBILE}}*/
		float: left;
	/*{+END}*/
}

/*{+START,IF,{$MOBILE}}*/
	footer .global_footer_left .su_form {
		float: right;
	}
/*{+END}*/

footer .global_footer_left .horizontal_buttons>li:first-child {
	padding-left: 0 !important;
}
footer .global_footer_left .horizontal_buttons>li {
	padding-left: 8px !important;
}

footer .su_form *, footer .special_page_type_form * {
	vertical-align: middle;
}

footer .su_form input[type="text"] {
	border: 0;
}

footer .special_page_type_form select, footer .special_page_type_form select option.label {
	color: {$GET,unfilled_input_text};
}

footer .special_page_type_form select option {
	color: {$GET,native_ui_foreground};
}

footer .global_footer_left .horizontal_buttons, footer .su_form, footer .special_page_type_form {
	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		float: left;
		padding-right: 14px;
	/*{+END}*/
}
footer .global_footer_left .horizontal_buttons {
	margin-top: 5px;
}
footer .su_form, footer .special_page_type_form {
	margin-top: 6px;
}

footer .global_footer_left img {
	vertical-align: middle;
}

footer .global_footer_left #special_page_type {
	width: 8em;
}

footer .global_footer_right {
}

footer .invisible_ref_point {
	position: absolute;
	width: 0;
}

footer .global_copyright {
	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		text-align: center;
	/*{+END}*/
	/*{+START,IF,{$MOBILE}}*/
		margin: 0.5em 0;
	/*{+END}*/
}

footer .global_minilinks {
	padding-bottom: 0.3em;
	font-size: 0.9em;
	white-space: nowrap; /* Stops logout link wrapping around in Firefox 3.6 */
	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		text-align: center;
	/*{+END}*/
	margin-right: 3em; /* Make tidy gap away from the font sizer */
}

footer .global_minilinks .footer_links {
	width: auto;
	font-size: 1.1em;
	/*{+START,IF,{$MOBILE}}*/
		margin: 0;
		padding: 0;
		list-style-type: none;
	/*{+END}*/
}

/*{+START,IF,{$MOBILE}}*/
	footer .global_minilinks .footer_links li {
		min-width: 6em;
		margin-right: 1em;
		display: inline-block;
		list-style-type: none;
		padding: 0.25em 0 0.25em 18px;
		background: url('{$IMG_INLINE;,icons/14x14/action_link}') 0 5px no-repeat;
	}
/*{+END}*/

footer .global_minilinks a, footer .global_minilinks .button_hyperlink {
	white-space: nowrap !important; /* So works on mobiles */
	text-decoration: none;
}
footer .global_minilinks a:hover, footer .global_minilinks .button_hyperlink:hover {
	text-decoration: underline;
}

/*
=========================
==With Special Meanings==
=========================
*/

.webstandards_checker_off { /* Membership of this class is used as a tag to turn off the webstandards checker */
	display: inline-block; /* To stop it breaking text-align: center */
	width: 100%;
}

.textarea_scroll { /* Turns off word-wrapping for a textarea: this has to be done using JavaScript so that the invalid 'wrap' property isn't written into the XHTML */
}

.leave_native_tooltip { /* No automatic tooltips on this element */
}

body .accessibility_hidden { /* Contents should be made visible (or interpreted) for accessibly representation but hidden for normal visual display */
	/* Shift it out of the viewport */
	position: absolute;
	top: -256000px;
	left: 0;
	opacity: 0; /* So browser doesn't waste resources rendering (cannot use visibility, Mac Voiceover will not pick up on it) */
	display: block; /* stops browser bugs where it interacts with the layout flow incorrectly */
}
.email_body .accessibility_hidden {
	display: none;
}

.non_accessibility_redundancy { /* Contents should be skipped by screen readers */
	/*{+START,IF,{$MOBILE}}*/
		display: none;
	/*{+END}*/
}

/*
=========================
=====Reusable Styles=====
=========================
*/

/* All floats within this will be contained to it */
.float_surrounder {
	overflow: hidden;
}

/* Commonly used to indicate there is no content to display */
.nothing_here, .more_here {
	font-size: 13px !important; /* px not em due to careful background positioning */
	padding-{!en_left}: 15px !important;
	margin: 1.5em;
	margin-{!en_left}: 10px !important;
	background-image: url('{$IMG_INLINE;,1x/cannot_show}');
	background-position: {!en_left} center;
	background-repeat: no-repeat;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
	.nothing_here, .more_here {
		background-image: url('{$IMG_INLINE;,2x/cannot_show}');
		background-size: 9px 6px;
	}
}

/* Used for styling the 'last edited' information */
.edited {
	font-size: 0.85em;
	padding-{!en_left}: {$?,{$MOBILE},0.7,2}em;
	font-style: italic;
}
div.edited {
	margin: 2em 0;
}

/* Usage guide: Use on the immediate surrounding element, and make sure that there is no loose text inside (put that in a span) */
.vertical_alignment, .vertical_alignment>* {
	vertical-align: middle !important;
}

/* Used to align inline images to the top of the rendering context */
.top_vertical_alignment, .top_vertical_alignment * {
	vertical-align: top;
}

/* Used to align a back to top image beside screen item buttons */
.back_to_top_by_buttons {
	padding-top: 4px;
}

/* Used to align next to a floated button(s) */
.vertical_alignment_buttons {
	line-height: 1.9em;
}


/* Makes an item of media (e.g. an image) get framed nicely. NB: We do not use this for galleries (which are more elaborate), although that has similar styling with .gallery_grid_cell */
.media_box {
	margin: {$?,{$MOBILE},1,1.5}em 0;
	text-align: center;
}
.media_box a {
	outline: 0;
}
.media_box>a>img, .media_box>img {
	border: 1px solid {$GET,standard_border};
	{$BETA_CSS_PROPERTY,box-sizing: border-box;}
	{$BETA_CSS_PROPERTY,box-shadow: 3px 3px 10px {$GET,standard_border};}
}
.media_box>a>img:not([width]):not([height]), .media_box>img:not([width]):not([height]) {
	max-width: 100%;
	height: auto;
}

.scale_down { /* Membership of this class is used as a tag to turn on image scale-to-fit */
	{$BETA_CSS_PROPERTY,box-sizing: border-box;}
}
.scale_down:not([width]):not([height]) {
	max-width: 100%;
	height: auto;
}

/* Used in a few places to make member links stand out */
a.fancy_user_link em {
	text-shadow: 2px 2px 2px {$GET,point_of_interest_border};
	padding: 4px 0;
	letter-spacing: 1px;
}
a.fancy_user_link, a.fancy_user_link:visited, a.fancy_user_link:hover {
	font-size: 1em;
	font-weight: bold;
	border: 1px dashed {$GET,point_of_interest_border};
	border-left: 0;
	border-right: 0;
	display: block;
	background-color: {$GET,point_of_interest_background};
	margin-bottom: 7px;
	text-decoration: none;
	padding: 2px 2px !important;
}
.post_poster a.fancy_user_link, .post_poster a.fancy_user_link:visited, .post_poster a.fancy_user_link:hover {
	display: inline-block;
}
a.fancy_user_link:hover {
	border-color: {$GET,dark_border};
	background-color: {$GET,area_faded_background};
}

/* A button styled to look like a link */
body input.button_hyperlink, body input.button_hyperlink:hover {
	border-style: none !important;
	background-color: transparent !important;
	background-image: none !important;
	/*font-weight: bold !important;*/
	border-radius: 0 !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	cursor: pointer !important;
	text-align: {!en_left} !important;
	vertical-align: baseline !important;
	/*color: inherit !important;*/
	text-decoration: underline;
}

/* Used to make a button look more like an icon - i.e. undoes button-face styling */
.button_icon {
	background: none;
	border: none;
	cursor: pointer;
}

.help_icon {
	cursor: pointer;
	margin-left: 0.5em;
}

/* Makes a link tag (a) look like it's not anything special (we use these tags as tab points sometimes) */
.non_link,
.non_link:visited,
.non_link:hover {
	color: inherit !important;
	text-decoration: none !important;
	cursor: inherit !important;
	font-size: 1em !important;
}

.trinav_wrap {
	overflow: hidden;
	{$BETA_CSS_PROPERTY,background-image: linear-gradient(to bottom\, {$GET,main_2_background}\, {$GET,main_background});}
	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		margin-bottom: 2em;
	/*{+END}*/
	{$BETA_CSS_PROPERTY,border-radius: 20px;}
	color: {$GET,heading_text};
}
.trinav_wrap.nograd {
	background-image: none;
}

/* Used e.g. for "paginating" through the calendar (i.e. infinite pagination left/right) */
.trinav_left, .trinav_mid, .trinav_right {
	margin: 1em 0 2em 0;
}
.trinav_left {
	float: left;
	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		margin-left: 2em;
		margin-right: 1em;
	/*{+END}*/
	/*{+START,IF,{$MOBILE}}*/
		width: 110px;
		margin-left: 0.5em;
	/*{+END}*/
	text-align: left;
}
.trinav_mid { /* Used for putting a button in the middle of the left/right pagination, for example */
	text-align: center;
}
.trinav_mid.text {
	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		padding-top: 6px;
	/*{+END}*/
	/*{+START,IF,{$MOBILE}}*/
		padding-top: 1px;
	/*{+END}*/
}
/*{+START,IF,{$NOT,{$MOBILE}}}*/
	.trinav_mid.text>span:before {
		content: "(";
	}
	.trinav_mid.text>span:after {
		content: ")";
	}
/*{+END}*/
.trinav_right {
	float: right;
	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		margin-left: 1em;
		margin-right: 2em;
	/*{+END}*/
	/*{+START,IF,{$MOBILE}}*/
		width: 110px;
		margin-right: 0.5em;
	/*{+END}*/
	text-align: right;
}

/* An inline avatar */
.embedded_mini_avatar {
	width: 0.9em;
	height: 0.9em;
	vertical-align: bottom;
	cursor: pointer;
	border: 1px solid {$GET,standard_border};
}

/* Error/status messages */
span.red_alert, a.red_alert, strong.red_alert, em.red_alert {
	color: {$GET,red_highlight_text};
	font-weight: bold;
}
div.red_alert, p.red_alert, .inline_wip_message {
	{$BETA_CSS_PROPERTY,border-radius: 5px;}
	padding: 1em 1em 1em 40px;
}
div.red_alert, p.red_alert {
	border: 1px solid {$GET,light_error_border};
	background: url('{$IMG;,icons/24x24/status/notice}') 0.6em 0.75em no-repeat {$GET,light_error_background};
	overflow: hidden;
}
.inline_wip_message {
	border: 1px solid {$GET,dark_border};
	background: url('{$IMG;,icons/24x24/status/notice}') 0.6em 0.75em no-repeat {$GET,area_background};
	color: {$GET,slightly_seeded_text};
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
	div.red_alert, p.red_alert {
		background-image: url('{$IMG;,icons/48x48/status/notice}');
		background-size: 24px 24px;
	}
	.inline_wip_message {
		background-image: url('{$IMG;,icons/48x48/status/notice}');
		background-size: 24px 24px;
	}
}

.field_name {
	font-weight: bold;
}

/* Used when a label is the only thing in front of a textarea/list */
.lonely_label  {
	margin-bottom: 0.2em !important;
	display: block !important;
	font-size: 1.1em !important;
}
.lonely_label+ul, .lonely_label+ol, .lonely_label+p {
	margin-top: 0.2em;
}

/* Used for a little 'X comments' box, but with the comments bit showing as an HTML tooltip */
.comment_count:empty {
	display: none;
}
.comment_count {
	display: inline-block;
	white-space: nowrap;
	border: 1px dotted {$GET,dark_border};
	background-color: {$GET,main_background} !important;
	text-align: center;
	width: 1.1em;
	font-size: 0.9em;
	position: relative;
}
.associated_links_block_group>li .comment_count {
	top: 2px;
}
.comment_count:hover {
	border-right-color: transparent;
}
.comment_count strong {
	background-color: {$GET,main_background} !important;
}
.comment_count span {
	display: none;
	padding-right: 2px;
	background-color: {$GET,main_background} !important;
}
.comment_count:hover span {
	display: inline-block;
	position: absolute;
	padding-left: 0.3em;
	margin-top: -1px; /* Brings it up to the 1px dotted borders level (need to do as out of flow) */

	/* Similar styles to tooltips */
	background-color: {$GET,area_faded_background};
	border: 1px dotted {$GET,dark_border};
	z-index: 1000;

	border-left: 0;
}

th.metadata_title {
	font-weight: bold !important;
}

.help_jumpout {
	padding: 0.5em 0;
	padding-left: 50px;
	background: url('{$IMG;,help_jumpout}') no-repeat left center;
}

.help_jumpout p {
	margin: 0;
}

.being_dragged {
	font-style: italic;
}

.img_thumb { /* Membership of this class is used as a tag to turn on the thumbnail blend effect */
	{$BETA_CSS_PROPERTY,opacity: 0.7;}
}
.img_thumb:not([width]):not([height]) {
	max-width: 100%;
	height: auto;
}
.img_thumb:hover, body.touch_enabled .img_thumb, .img_thumb_opaque .img_thumb {
	{$BETA_CSS_PROPERTY,opacity: 1.0 !important;}
	{$BETA_CSS_PROPERTY,transition: opacity 0.2s linear !important;}
}
.img_thumb_opaque .img_thumb {
	{$BETA_CSS_PROPERTY,transition: none !important;}
}

/*
=========================
=========Boxes===========
=========================
*/

/* Boxes, which most blocks use to wrap their output */

.box {
	border: 1px solid {$GET,standard_border};
	{$BETA_CSS_PROPERTY,border-radius: 5px;}

	margin: 1em 0;

	/* Want to change the tiled background?
		Try this Google search to get image ideas http://www.google.co.uk/search?tbm=isch&q=tile+background
		Find how to edit the referenced "block_background" theme image by doing an Admin Zone search for "block_background"
	*/
	background-image: url('{$IMG_INLINE;,block_background}');
	background-color: {$GET,area_background};
	/* If the browser supports gradients, we'll put a nice box-filling gradient in here instead */
	{$BETA_CSS_PROPERTY,background-image: linear-gradient(to bottom\, {$GET,area_background}\, {$GET,area_4_background});}

	overflow: hidden;
}
td>.box, .right .box:first-child:last-child, .left .box:first-child:last-child {
	margin: 0;
}
/* Accordion boxes don't have margins */
.box___standardbox_accordion {
	margin: 0 !important;
}
/* Don't do margins for boxes at the end of frames */
/*#standalone_html_wrap>div>.box:first-child {	Actually we want this, due to how .fp_col_block has been written
	margin-top: 0;
}*/
#standalone_html_wrap>div>.box:last-child {
	margin-bottom: 0;
}

/* Don't let boxes on side panels get too much styling (focuses the eye away) */
.global_side_panel .box, .box.nested {
	background-color: {$GET,area_5_background};
}
.box.nested {
	border: 1px solid {$GET,pale_border};
}
.global_side_panel .box_inner>h1, .global_side_panel .box_inner>h2, .global_side_panel .box_inner>h3, .global_side_panel .box_inner>h4, .global_side_panel .box_inner>h5, .global_side_panel .box_inner>h6, .global_side_panel .box>.toggleable_tray_title {
	background-image: none;
}

.box>.box_inner, .box>.toggleable_tray {
	margin: 5px; /* not em so that header may be positioned properly */
}
.boxless_space .box>.box_inner, .boxless_space .box>.toggleable_tray {
	margin: 0;
}
.email_body .box .box_inner { /* Outlook.com does not support margins or complex use of the sibling selector */
	margin: 0;
	padding: 5px; /* not em so that header may be positioned properly */
}

.box_inner>h1, .box_inner>h2, .box_inner>h3, .box_inner>h4, .box_inner>h5, .box_inner>h6, .toggleable_tray_title, #standalone_html_wrap .box .box .box_inner>h2, #standalone_html_wrap .box .box .box_inner>h3 {
	{$BETA_CSS_PROPERTY,border-top-left-radius: 3px;}
	{$BETA_CSS_PROPERTY,border-top-right-radius: 3px;}
	background-color: {$GET,box_title_background};
	background-image: url('{$IMG_INLINE;,gradient}');
	background-repeat: repeat-x;
	{$BETA_CSS_PROPERTY,background-image: linear-gradient(to bottom\, {$GET,lgrad}\, {$GET,dgrad});}
	color: {$GET,box_title_text};
	text-align: center;
	font-weight: bold;
	text-decoration: none;
	font-size: 1em;
	border: 0;
	letter-spacing: 0;

	/* .box_inner set us in the wrong position, so fiddle around a bit to move us back to be flush */
	margin: -5px 0 5px -5px;
	padding: 0.4em 0.8em 0.4em 0.3em;
	width: 100%;
}
.box_inner>h2>.right .button_screen {
	vertical-align: top;
}
.box.box_prominent>.box_inner {
	margin: 0;
}
.box.box_prominent>.box_inner>h2 {
	padding: 0.8em;
	margin: 0;
	text-align: left;
	font-size: 1.15em;
	font-weight: normal;
}

.box_inner>h1 a, .box_inner>h2 a, .box_inner>h3 a, .box_inner>h4 a, .box_inner>h5 a, .box_inner>h6 a, .toggleable_tray_title a, .box_inner>h1 a:visited, .box_inner>h2 a:visited, .box_inner>h3 a:visited, .box_inner>h4 a:visited, .box_inner>h5 a:visited, .box_inner>h6 a:visited, .toggleable_tray_title a:visited {
	color: inherit;
	text-decoration: underline;
}
a.toggleable_tray_button { /* Override above for toggleable_tray_button */
	text-decoration: none !important;
}
.box_inner>h1 a:hover, .box_inner>h2 a:hover, .box_inner>h3 a:hover, .box_inner>h4 a:hover, .box_inner>h5 a:hover, .box_inner>h6 a:hover, .toggleable_tray_title a:hover {
	color: {$GET,box_title_text_hover};
}
.boxless_space .box_inner>h1 a:hover, .boxless_space .box_inner>h2 a:hover, .boxless_space .box_inner>h3 a:hover, .boxless_space .box_inner>h4 a:hover, .boxless_space .box_inner>h5 a:hover, .boxless_space .box_inner>h6 a:hover, .boxless_space .toggleable_tray_title a:hover {
	color: inherit;
}

/* If we want a box to stand out less, give it 'pale_box' */
.pale_box.box, .pale_box .box {
	border: 1px solid {$GET,pale_border} !important;
}
.pale_box.box h2, .pale_box .box h2, .pale_box.box h3, .pale_box .box h3 {
	background-color: {$GET,point_of_interest_background} !important;
	background-image: none;
	color: {$GET,area_key_text} !important;
}

/* If you want to mark a region as box-less, wrap a div with class 'boxless_space' around it -- it'll invoke a very different kind of modern styling */
.boxless_space .box {
	background: none;
	border: none !important;
	padding: 0;
	margin: 1em 0; /* Big margin, necessary as the boxes have no border around them */
	{$BETA_CSS_PROPERTY,border-radius: 0;}
}
.frame>.boxless_space .box:first-child {
	margin-top: 0; /* No top margin for boxes in a frame */
}
.boxless_space>.box:last-child {
	margin-bottom: 0; /* No margin on the last box */
}
.boxless_space .fp_col_blocks_wrap .box {
	margin: 0.5em 0; /* Half-sized margins for the fake-columns on front pages, as the overflow blocks margin collapsing */
}
.boxless_space .box>.box_inner {
	margin: 0;
}
.boxless_space .box>.box_inner>h1, .boxless_space .box>.box_inner>h2, .boxless_space .box>.box_inner>h3, .boxless_space .box>.box_inner>h4, .boxless_space .box>.box_inner>h5, .boxless_space .box>.box_inner>h6, .boxless_space .box>.toggleable_tray_title {
	background: url('{$IMG_INLINE;,1x/boxless_title_leadin_rightcomp}') no-repeat !important;
	color: {$GET,slightly_seeded_right_complement_text} !important;
	text-align: {!en_left};
	font-size: 15px;
	margin: 0.5em 0 !important;
	font-family: Arial;
	padding: 1px 0 2px 21px !important;
	width: auto;
	font-weight: bold;
	text-transform: uppercase;
	{$BETA_CSS_PROPERTY,border-radius: 0;}
}
.global_side_panel .boxless_space .box>.box_inner>h1, .global_side_panel .boxless_space .box>.box_inner>h2, .global_side_panel .boxless_space .box>.box_inner>h3, .global_side_panel .boxless_space .box>.box_inner>h4, .global_side_panel .boxless_space .box>.box_inner>h5, .global_side_panel .boxless_space .box>.box_inner>h6,
.boxless_space .box .box>.box_inner>h1, .boxless_space .box .box>.box_inner>h2, .boxless_space .box .box>.box_inner>h3, .boxless_space .box .box>.box_inner>h4, .boxless_space .box .box>.box_inner>h5, .boxless_space .box .box>.box_inner>h6 {
	background: url('{$IMG_INLINE;,1x/boxless_title_leadin_leftcomp}') no-repeat !important;
	color: {$GET,slightly_seeded_left_complement_text} !important;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
	.boxless_space .box>.box_inner>h1, .boxless_space .box>.box_inner>h2, .boxless_space .box>.box_inner>h3, .boxless_space .box>.box_inner>h4, .boxless_space .box>.box_inner>h5, .boxless_space .box>.box_inner>h6, .boxless_space .box>.toggleable_tray_title {
		background-image: url('{$IMG_INLINE;,2x/boxless_title_leadin_rightcomp}');
		background-size: 18px 18px;
	}
	.global_side_panel .boxless_space .box>.box_inner>h1, .global_side_panel .boxless_space .box>.box_inner>h2, .global_side_panel .boxless_space .box>.box_inner>h3, .global_side_panel .boxless_space .box>.box_inner>h4, .global_side_panel .boxless_space .box>.box_inner>h5, .global_side_panel .boxless_space .box>.box_inner>h6,
	.boxless_space .box .box>.box_inner>h1, .boxless_space .box .box>.box_inner>h2, .boxless_space .box .box>.box_inner>h3, .boxless_space .box .box>.box_inner>h4, .boxless_space .box .box>.box_inner>h5, .boxless_space .box .box>.box_inner>h6 {
		background-image: url('{$IMG_INLINE;,2x/boxless_title_leadin_leftcomp}');
		background-size: 18px 18px;
	}
}
.global_side_panel .boxless_space .box>.box_inner>h1, .global_side_panel .boxless_space .box>.box_inner>h2, .global_side_panel .boxless_space .box>.box_inner>h3, .global_side_panel .boxless_space .box>.box_inner>h4, .global_side_panel .boxless_space .box>.box_inner>h5, .global_side_panel .boxless_space .box>.box_inner>h6 {
}
.boxless_space .buttons_group, .boxless_space .associated_links_block_group, .boxless_space .media_box, .boxless_space .proceed_button {
	text-align: left;
	width: auto;
}

/* ... Dividers within boxless area... */
.boxless_space .box_wrapper + .box,
.boxless_space .box_wrapper + .fp_col_blocks_wrap,
.boxless_space .box + .box,
.boxless_space .box + .fp_col_blocks_wrap,
.boxless_space .fp_col_blocks_wrap + .box_wrapper,
.boxless_space .fp_col_blocks_wrap + .box {
	border-top: 2px solid {$GET,standard_border} !important;
	margin-top: 1.5em;
	padding-top: 0.5em;
}
.boxless_space .box .box + .box, .comments_wrapper .boxless_space .box + .box { /* Nested dividers more subtle */
	border-top: 0 !important;
}
.global_side_panel .boxless_space .box .box + .box {
	padding-top: 0;
}
.global_middle .boxless_space .box .box + .box:before {
	content: "";
	width: 60%;
	display: block;
	margin: 0 auto;
	border-top: 2px dotted {$GET,pale_border} !important;
	padding-top: 0.4em;
}
.comments_wrapper .boxless_space .box + .box:before {
	content: "";
	width: 60%;
	display: block;
	margin: 0 auto 2em auto;
	border-top: 2px dotted {$GET,pale_border} !important;
}
.boxless_space .box + .fp_col_blocks_wrap {
	padding-top: 0;
}

/* Boxes under boxes shouldn't have the title style - would be ugly */

.box .box .box_inner>h1, .box .box .box_inner>h2, .box .box .box_inner>h3, .box .box .box_inner>h4, .box .box .box_inner>h5, .box .box .box_inner>h6, .box .box .toggleable_tray_title, #standalone_html_wrap .box .box .box .box_inner>h2, #standalone_html_wrap .box .box .box .box_inner>h3 {
	background: none;
	color: inherit;
	padding-left: 0;
	font-size: 1.1em;
} /* This rule is not applied to boxes under the top level box in the preview (#standalone_html_wrap) as those should show verbatim */
.box .box .box_inner>h1 a, .box .box .box_inner>h2 a, .box .box .box_inner>h3 a, .box .box .box_inner>h4 a, .box .box .box_inner>h5 a, .box .box .box_inner>h6 a, .box .box .toggleable_tray_title a, #standalone_html_wrap .box .box .box .box_inner>h2 a, #standalone_html_wrap .box .box .box .box_inner>h3 a {
	color: {$GET,a.hover};
}

/* Expanding and contracting, mostly for boxes but not necessarily always */

.toggleable_tray_title_heading {
	min-height: 20px;
}

.toggleable_tray_title {
	font-size: 1.1em;
	font-weight: bold;
	vertical-align: middle;
	margin: 0; /* Outside .box_inner so remove the margin added above */
	padding: 0.3em 0; /* Centered so needs no horizontal padding, which would also mess with our 100% width */
}

.toggleable_tray_button {
	{$BETA_CSS_PROPERTY,transition: opacity 0.2s linear !important;}
	outline: 0;
	font-weight: bold;
	text-decoration: none;
	color: inherit !important;
	cursor: pointer;
}

.toggleable_tray_button img {
	float: {!en_right};
	margin: 0 0 0 0.3em !important;
}
.box .toggleable_tray_button img {
	margin-right: 0.5em;
}
.toggleable_tray_title .toggleable_tray_button img {
	margin: -2px 0.4em 0 0.4em !important;
}
.toggleable_tray_button img {
	width: 20px;
}
.box .toggleable_tray_title .toggleable_tray_button img {
	width: 20px;
}
.ttb_left_spaced, .ttb_left_spaced div {
	margin-top: 0.3em;
}
.toggleable_tray_button.ttb_left img {
	float: {!en_left};
	padding-{!en_left}: 0 !important;
}
.toggleable_tray_button.ttb_light {
	font-weight: normal;
}

.toggleable_tray {
	overflow: hidden;
}

/* Used very rarely if our toggleable boxes need some extra space at their top) */
.toggleable_tray_pulldown_spacer {
	padding-top: 1em;
}

/* Used in the Setup Wizard constructed block layouts in the start page */

.fp_col_blocks_wrap {
	overflow: hidden;
}

.fp_col_block {
	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		width: 50%;
	/*{+END}*/
	/*{+START,IF,{$MOBILE}}*/
		margin: 1em 0;
		max-width: 100%;
	/*{+END}*/
	{$BETA_CSS_PROPERTY,box-sizing: border-box;}
}

.fp_col_block .pagination {
	float: none;
}
.fp_col_block form + span {
	margin-left: 0;
}

.fp_col_block .box {
	margin-bottom: 0; /* margin-top from boxes below will work instead. This is needed as the "overflow: hidden" stops margin collapsing between the block contents and outside it */
}

.fp_col_block.left {
	padding-{!en_right}: 0.5em;
}
.fp_col_block.right {
	padding-{!en_left}: 0.5em;
}
.fp_col_block.left:last-child {
	padding-{!en_right}: 0; /* Undo padding if actually there is nothing to the right of this */
}

/* Box/title-attached meta details */

.meta_details {
	font-size: 0.9em;
	color: {$GET,area_key_text};
	border-bottom: 1px dotted {$GET,pale_border};
	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		width: 25em;
	/*{+END}*/
	max-width: 100%;
	padding-{!en_left}: 0.5em;
	padding-bottom: 0.5em;
	margin-bottom: 1em;
}
.boxless_space .meta_details {
	padding-{!en_left}: 0;
	margin-top: -0.5em !important;
}

.compacted_subbox_stream h3+.meta_details, .compacted_subbox_stream .newscat_img+.meta_details {
	border-bottom: 0;
	margin-top: -0.8em;
	margin-bottom: 0.5em;
}
.box_inner>h3+.meta_details {
	margin-top: 0;
}

.meta_details a, .meta_details a:visited {
	text-decoration: none;
	color: {$GET,area_link};
}
.meta_details a:hover {
	color: {$GET,a.hover};
}

.global_side_panel .meta_details {
	border-bottom: 0;
	padding-left: 0;
	padding-top: 0.5em;
}

/* Overlays are also based on boxes */

.box.overlay {
	{$BETA_CSS_PROPERTY,box-shadow: 0px 0px 20px {$GET,dark_shadow};}
}
.box.overlay.lightbox>.box_inner {
	margin: 0;
}
.box.overlay .associated_links_block_group {
	margin: 1em;
}

/* Boxes with arrows on the top */

.box.box_arrow {
	overflow: visible;
	margin-top: 4px; /* 2 +2px gap */
}
.box.box_arrow>span {
	background: url('{$IMG;,1x/box_arrow}') no-repeat;
	margin-top: -7px;
	display: inline-block;
	width: 13px;
	height: 7px;
	margin-left: 20.2em;
	position: absolute;
	right: 13px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
	.box.box_arrow>span {
		background-image: url('{$IMG;,2x/box_arrow}');
		background-size: 13px 7px;
	}
}

/*
=========================
========Spacing==========
=========================
*/

/* These are short hand for defining very common layout patterns. They are quasi-semantic in that they tie into Composr's visual language. */

.not_too_tall {
	max-height: 30em;
	overflow: auto;
}

.horizontal_scrolling {
	overflow: auto;
	padding-right: 1px; /* For non-aligning table borders */
}

.tiny_paragraph {
	margin: 0.3em 0;
}

.whitespace_visible {
	overflow: auto;
	outline: 0;
	white-space: pre-wrap !important;
}
.whitespace_visible.code {
	font-family: 'Courier New', 'Courier', monospace;
}

.standard_indent {
	padding-{!en_left}: 4em;
}

.mini_indent {
	padding-{!en_left}: 2em;
}

hr.spaced_rule {
	margin: 2em 0;
}

/* Used to indicate something showing underneath, in conjunction with an arrow image */
.arrow_ruler {
	text-align: center;
}

.inline_block {
	text-align: {!en_left};
	display: inline-block;
}

.inline_block .wide_table_wrap { /* Fixes Firefox bug */
	overflow-x: visible;
	overflow-y: visible;
}

.inline {
	display: inline;
}
.left {
	float: {!en_left};
}
.left.float_separation {
	margin-{!en_right}: 1em;
}
.right {
	float: {!en_right};
}
.right.float_separation, .inline.spaced {
	margin-{!en_left}: 1em;
}
@media screen and (max-width:800px) {
	.left.responsive {
		float: none;
	}
	.left.responsive.float_separation {
		margin-{!en_right}: 0;
	}
	.right.responsive {
		float: none;
	}
	.right.responsive.float_separation {
		margin-{!en_left}: 0;
	}
	.responsive>.box {
		width: auto !important;
	}
}

.inline_lined_up {
	white-space: nowrap;
}

.inline_lined_up>* {
	white-space: normal;
	display: inline-block;
}

/* Something being shown for previewing, on its own so needs focus */
.lonely_preview {
	text-align: center;
}

/* Used to align stuff horizontally, i.e. force a gap between separate bits */
.horiz_field_sep, ul.horizontal_links.horiz_field_sep {
	padding-{!en_left}: 0.8em;
}
.horiz_field_sep, .horiz_field_sep_rightward {
	display: inline-block !important; /* Side-effect: stops internal wrapping */
}
.horiz_field_sep_rightward {
	padding-{!en_right}: 0.8em; /* Useful so subsequent wrapped text doesn't get indented */
}
ul.horizontal_links.horiz_field_sep {
	display: inline !important;
}

/* Used e.g. on links that should not get split between lines */
.must_show_together {
	white-space: nowrap;
}

/*
=========================
=========Tables==========
=========================
*/

.table_cell_nowrap {
	white-space: nowrap;
	display: inline-block;
}

.autosized_table {
	table-layout: auto !important;
}

table.scrollable_inside {
	table-layout: fixed; /* For permission setting stuff that can scroll off */
}

.wide_table_wrap {
	overflow-x: auto;
	overflow-y: hidden;
	padding-right: 1px;
}

.wide_table {
	width: 100%;
	/*{+START,IF,{$EQ,{$LANG},EN}}*/
		table-layout: fixed;
	/*{+END}*/
}

.spaced_table th, .spaced_table td {
	padding: 0.7em;
}

/*{+START,IF,{$MOBILE}}*/
	.spaced_table td {
		overflow-x: auto;
	}
/*{+END}*/

/* Undo any descendant spacing for nested tables made in WYSIWYG */
.results_table table[cellpadding="0"] td, .results_table table[cellpadding="0"] th {
	padding: 0;
}
.results_table table[border="0"] td, .results_table table[border="0"] th {
	border: 0;
}

.highlighted_table_cell {
	background-color: {$GET,area_current_background};
}

.results_table {
	border-collapse: separate;
}

.results_table_simplified {
	border-collapse: collapse;
}

.results_table, .results_table_simplified {
	border: 0 !important;
	border-spacing: 0;
	margin: 1em 0;
}
.lined_up_boxes .results_table {
	margin-top: 0;
}
.wide_table_wrap>.results_table {
	margin: 0; /* As overflow would cause margin doubling */
}
.wide_table_wrap + .wide_table_wrap>.results_table {
	margin-top: 1em;
}

.results_table_simplified th, .results_table_simplified td {
	border: 1px solid {$GET,standard_border} !important;
}

.results_table>thead:first-child>tr:first-child *:first-child, .results_table>thead:nth-child(2)/*after colspan*/>tr:first-child *:first-child, .results_table>tbody>tr:first-child>*:first-child {
	{$BETA_CSS_PROPERTY,border-top-left-radius: 5px;}
}
.results_table>thead:first-child>tr:first-child *:last-child, .results_table>thead:nth-child(2)/*after colspan*/>tr:first-child *:last-child, .results_table>tbody>tr:first-child>*:last-child {
	{$BETA_CSS_PROPERTY,border-top-right-radius: 5px;}
}
.results_table.columned_table>tbody>tr:first-child>*:first-child {
	{$BETA_CSS_PROPERTY,border-top-left-radius: 0px;}
}
.results_table.columned_table>tbody>tr:first-child>*:last-child {
	{$BETA_CSS_PROPERTY,border-top-right-radius: 0px;}
}
.results_table>tbody:last-child>tr:last-child>*:first-child, .results_table>tbody>tr.last>*:first-child {
	{$BETA_CSS_PROPERTY,border-bottom-left-radius: 5px;}
}
.results_table>tbody:last-child>tr:last-child>*:last-child, .results_table>tbody>tr.last>*:last-child {
	{$BETA_CSS_PROPERTY,border-bottom-right-radius: 5px;}
}

.results_table>*>tr>th {
	text-align: right;
}

.results_table>thead>tr>th {
	text-align: left;
}

.results_table>*>tr>td, .results_table>*>tr>th {
	border-top: 1px solid {$GET,standard_border};
	border-right: 1px solid {$GET,standard_border};
	padding: 0.5em;
}
.results_table>*>tr>td:first-child, .results_table>*>tr>th:first-child {
	border-left: 1px solid {$GET,standard_border};
}
.results_table>tbody>tr:last-child>td, .results_table>tbody>tr.last>td, .results_table>tbody>tr:last-child>th {
	border-bottom: 1px solid {$GET,standard_border};
}
.results_table>tfoot>tr>td, .results_table>tfoot>tr>th {
	border-bottom: 1px solid {$GET,standard_border};
}

table>*>.zebra_0>th, table>*>.zebra_0>td, div.zebra_0, table.zebra>tbody>tr:nth-child(even)>th, table.zebra>tbody>tr:nth-child(even)>td {
	background-color: {$GET,area_zebra_background} !important;
	color: {$GET,slightly_seeded_text};
}
table>*>.zebra_1>th, table>*>.zebra_1>td, div.zebra_1, table.zebra>tbody>tr:nth-child(odd)>th, table.zebra>tbody>tr:nth-child(even)>td {
	background-color: {$GET,area_background} !important;
	color: {$GET,slightly_seeded_text};
}
div.zebra_0, div.zebra_1 {
	border: 1px solid {$GET,standard_border};
	padding: 0.5em;
}
div.zebra_0 p, div.zebra_1 p {
	margin-top: 0;
}
div.zebra_0 p:last-child, div.zebra_1 p:last-child {
	margin-bottom: 0;
}
div.zebra_0+div.zebra_1, div.zebra_1+div.zebra_0 {
	border-top: 0;
}

.table_heading_cell {
	padding: 1em 0.5em !important;
	text-align: {!en_left} !important;
	background-color: {$GET,area_background} !important; /*  !important so precedence over th.dh */
	font-weight: normal;
}
.table_heading_cell h2 {
	margin: 0;
}

.thick_border th, .thick_border td {
	border-top-width: 4px !important;
}

.field_name_column {
	width: 14em;
}

.field_name_column_shorter {
	width: 11em;
}

.field_input_column, .field_value_column {
	width: 100%;
}

.field_sup_column {
	width: 10em;
}

/*
=========================
=====Core Interfaces=====
=========================
*/

.question_ui_buttons {
	text-align: center;
	margin-top: 15px;
}

.tooltip {
	font-size: 1em;
	z-index: 10000;
	{$BETA_CSS_PROPERTY,opacity: 0.9;}
	{$BETA_CSS_PROPERTY,word-wrap: break-word;}
	min-width: 6em;
	{$BETA_CSS_PROPERTY,pointer-events: none;}
}
.tooltip a, .tooltip abbr {
	{$BETA_CSS_PROPERTY,pointer-events: auto;}
}
.tooltip_ownlayout {
	padding: 0.5em;
	border: 1px solid {$GET,point_of_interest_border};
	{$BETA_CSS_PROPERTY,box-shadow: 3px 3px 10px {$GET,point_of_interest_border};}
	{$BETA_CSS_PROPERTY,border-radius: 10px;}
	color: {$GET,area_text} !important;
}
.tooltip_ownlayout, .tooltip_nolayout th.de_th, .tooltip_nolayout td {
	background-color: {$GET,area_faded_background};
	{$BETA_CSS_PROPERTY,background-image: linear-gradient(to bottom\, {$GET,area_faded_background}\, {$GET,area_background});}
}
.tooltip .box {
	margin: 0;
}
.tooltip img {
	max-width: 100%;
	max-height: 200px;
}
.tooltip .shunted_button {
	display: none;
}
.tooltip .whitespace_visible {
	max-height: 5em;
	overflow: auto;
}
.tooltip .associated_link {
	display: none;
}
.tooltip_img {
	position: absolute;
	right: 3px;
	top: 3px;
}
.tooltip h2 {
	margin-top: 0;
}
.tooltip a, .tooltip a:visited, .tooltip a:hover {
	text-decoration: none !important;
	color: inherit !important;
}
.tooltip.have_links a, .tooltip.have_links a:visited, .tooltip.have_links a:hover {
	color: {$GET,a.link} !important;
	text-decoration: underline !important;
}
.tooltip .tooltip_fields {
	font-size: 0.85em;
	display: inline-block;
	border-spacing: 0;
}
.tooltip .tooltip_fields table {
	border-collapse: collapse;
}
.tooltip .tooltip_fields th {
	border-right: 1px solid {$GET,dark_border};
	font-weight: bold !important;
	padding-right: 1em;
	white-space: nowrap;
}
.tooltip .tooltip_fields td {
	padding-left: 1em;
	min-width: 18em;
}
.tooltip_with_img {
	padding-right: 30px;
}
.faded_tooltip_img {
	{$BETA_CSS_PROPERTY,opacity: 0.2;} display: inline-block; /*Needed for IE8*/
}

.diff del {
	color: {$GET,red_highlight_text};
}
.diff ins {
	font-weight: bold;
	text-decoration: none;
}

.results_table_under {
	font-size: 0.85em;
	margin: 1em 0;
}

.results_table_sorter {
	max-width: {$?,{$MOBILE},315,400}px;
	float: {!en_left};
	margin-{!en_right}: 0.75em;
}

.pagination_spacing {
	margin: 1em 0;
}

.compacted_subbox_stream .pagination_spacing {
	margin-left: 1em;
}

.pagination {
	float: {!en_left};
	/*	max-width: 540px; Looks bad on forumview */
}

.pagination * {
	vertical-align: middle;
}
.pagination .inline, .pagination nav {
	display: inline-block;
}

.pagination a,
.pagination span,
.results_launcher a,
.results_launcher span {
	border: 1px solid {$GET,standard_border};
	border-left: 0;
	background-color: {$GET,area_background};
}
.pagination a:first-child,
.pagination span:first-child,
.results_launcher a:first-child,
.results_launcher span:first-child,
.pagination .first-child,
.results_launcher .first-child {
	border-left: 1px solid {$GET,standard_border};
}
.pagination a:hover, .results_launcher a:hover {
	background-color: {$GET,area_hover_2_background} !important;
}

.pagination_load_more {
	border-top: 1px solid {$GET,standard_border};
	text-align: center;
	font-size: 1.6em;
	padding: 0.2em;
	clear: both;
}

.alphabetical_jumper {
	float: none !important;
	margin-left: -2px !important;
	margin-bottom: 10px !important;
	max-width: 100% !important;
	padding: 3px;
}

.alphabetical_jumper.pagination a, .alphabetical_jumper.pagination a:hover, .alphabetical_jumper.pagination span {
	padding: 0.5em 0.65em !important;
}

.results_continue, .results_page_num {
	border-{!en_left}: 0;
}

.results_page_num {
	font-weight: bold;
}

.pagination_pages {
	display: inline;
}

.pagination a,
.pagination a:visited,
.pagination a:hover,
.pagination span,
.results_launcher a,
.results_launcher a:visited,
.results_launcher a:hover,
.results_launcher span {
	display: inline-block;
	text-decoration: none;
	margin-top: 0;
}
.pagination a:hover,
.results_launcher a:hover {
	background-color: {$GET,area_hover_2_background};
}
.pagination a,
.pagination a:visited,
.pagination a:hover,
.pagination span,
.results_launcher a,
.results_launcher a:visited,
.results_launcher a:hover,
.results_launcher span {
	padding: 2px {$?,{$MOBILE},10,6}px !important;
}

.results_launcher {
	font-size: 0.8em;
	display: inline;
	padding-{!en_left}: 2em;
}
.results_launcher a,
.results_launcher a:visited,
.results_launcher a:hover,
.results_launcher span {
	padding: 0 3px;
}

.compacted_subbox_stream.box_inner {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.compacted_subbox_stream>.raw_ajax_grow_spot>h3 {
	margin: 1em 5px;
}
.compacted_subbox_stream .box {
	border-top: 1px dotted {$GET,standard_border} !important;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
	border-radius: 0;
	padding: 0 !important;
	margin: 0.7em 0;
	padding: 0.7em 0;
	background: none;
}
.compacted_subbox_stream .box:first-child, .compacted_subbox_stream h3 + .box {
	border-top: 0 !important;
	margin-top: 0 !important;
	padding-top: 0 !important;
}
.compacted_subbox_stream .box a img {
	max-width: 150px;
}
.compacted_subbox_stream .box+.compacted_subbox_stream .box {
	border-top: 1px solid {$GET,standard_border};
}
.compacted_subbox_stream .box a {
	font-size: 1.1em;
}
.compacted_subbox_stream .box .associated_details {
	margin-bottom: 0;
}
.compacted_subbox_stream.less_compact .box {
	padding-top: 1.5em !important;
	margin: 2em 0;
}
.compacted_subbox_stream.less_compact .box_inner>h3 {
	font-size: 1.3em;
	margin-bottom: 1em;
}

.category_sorter {
}
.category_sorter label {
	font-weight: bold;
}

.index_screen_fancier_screen_pre {
	margin-bottom: 1.5em;
}
.index_screen_fancier_screen_post {
	margin-top: 1.5em;
}

/*{+START,IF,{$NOT,{$MOBILE}}}*/
	.index_screen_fancier_screen_entries {
		margin-{!en_left}: 1em;
	}
/*{+END}*/
.index_screen_fancier_entry {
	margin: 0.5em;
	padding: 0.5em;
}
.index_screen_fancier_entry_link {
	font-weight: bold;
	margin-bottom: 0.3em;
	padding: 0 0 0 18px;
	background: url('{$IMG_INLINE;,icons/14x14/action_link}') 0 3px no-repeat;
	background-size: 14px 14px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
	.index_screen_fancier_entry_link {
		background-image: url('{$IMG_INLINE;,icons/28x28/action_link}');
	}
}
.index_screen_fancier_entry_count {
	font-size: 0.9em;
	font-weight: normal;
}
.index_screen_fancier_entry_description {
	font-size: 0.9em;
	margin-{!en_left}: 18px; /* Due to action_link image */
}

div.wysiwyg_toolbar_color_finder {
	color: {$GET,area_background};
}

.fractional_edit {
	outline: 1px dashed {$GET,point_of_interest_border};
}
.fractional_edit, .fractional_edit_nonover {
	display: inline-block;
}

.site_unloading {
	{$BETA_CSS_PROPERTY,opacity: 0.2;}
}

.ajax_loading_block {
	padding: 2em 6em;
	margin-top: -2em;
	margin-left: -6em;
	background: rgba(255,255,255,0.5);
	{$BETA_CSS_PROPERTY,border-radius: 5px;}
}

div.ajax_loading, p.ajax_loading {
	padding: 2em;
	text-align: center;
}

.ajax_tree_list {
	{$BETA_CSS_PROPERTY,user-select: none;}
}

.ajax_tree_expand_icon {
	width: 11px;
	height: 11px;
}

.ajax_tree_cat_icon {
	width: 14px;
	height: 14px;
	display: none;
}

.ajax_tree_magic_button {
	background-color: {$GET,native_ui_background};
	color: {$GET,native_ui_foreground};
	cursor: pointer;
}

.tree_list__root_tree_list {
	padding-bottom: 0.5em;
}
.tree_list_highlighted *, .tree_list_nonhighlighted * {
	vertical-align: middle;
}
.tree_list_highlighted a, .tree_list_nonhighlighted a {
	background-color: {$GET,native_ui_background};
	color: {$GET,native_ui_foreground};
}
.tree_list_highlighted a {
	font-weight: bold;
}
.tree_list_nonhighlighted a {
}

.software_chat {
	margin: 20px;
	font-size: 0.9em;
	float: right;
	width: 260px;
}
.software_chat_iframe {
	overflow: hidden;
	width: 650px;
	height: 90%;
}

/* Specific field types */

.multilist_mark {
	width: 1em;
	display: inline-block;
}
.multilist_mark.yes {
	color: {$GET,green_highlight_text};
}
.multilist_mark.no {
	color: {$GET,red_highlight_text};
}

/*
=========================
========Feedback=========
=========================
*/

/*{+START,IF,{$NOT,{$MOBILE}}}*/
	.lined_up_boxes .right {
		margin-left: 1em;
	}

	.lined_up_boxes .left {
		margin-right: 1em;
	}
/*{+END}*/

/*{+START,IF,{$MOBILE}}*/
	.lined_up_boxes .right {
		width: 100%;
		float: none;
	}

	.lined_up_boxes .left {
		width: 100%;
		float: none;
	}
/*{+END}*/

.ratings {
	width: {$?,{$MOBILE},100%,10em};
}

.RATING_BOX .rating_inner {
	text-align: center;
}

.RATING_INLINE, .RATING_INLINE div, .RATING_INLINE form {
	display: inline;
}
.RATING_INLINE .rating_outer {
	padding-left: 2em;
}
.RATING_INLINE .rating_outer:first-child {
	padding-left: 0;
}

.RATING_INLINE .ajax_loading {
	padding: 0;
}

.post_action_link .RATING_INLINE {
	padding-left: 2em;
}

.rating_inner img {
	cursor: pointer;
}

.rating_error {
	text-align: center;
}

.rating_stars {
	min-width: 55px;
	display: inline-block;
}

.rating_star, .rating_star_highlight {
	padding-right: 3px;
}
.rating_star {
	{$BETA_CSS_PROPERTY,opacity: 0.2;} display: inline-block;/*Needed for IE8*/
}
.rating_star_highlight {
	{$BETA_CSS_PROPERTY,opacity: 1.0;} display: inline-block;/*Needed for IE8*/
}
.email_body .rating_star {
	display: none;
}

.rating_likers a+a {
	padding-left: 2px;
}

.trackbacks {
	width: {$?,{$MOBILE},100%,14em};
}

.box___trackback label {
	display: block;
}

.comments_sorting_box {
	margin-top: 0.45em;
}

.content_screen_comments .comments_wrapper {
	margin-top: 2em;
}

.post .post_title {
	font-weight: bold;
	padding-left: 0;
	margin-bottom: 0.3em;
}

.post .post_subline {
	margin: 0 0 1em 0;
	font-size: 0.9em;
}

.post .post_poster {
	font-weight: bold;
}

.post .post_time {
	margin-left: 0.5em;
}

.post .post_action_link {
}

.post .post_thread_children {
	margin-top: 1em;
	/*{+START,IF,{$MOBILE}}*/
		margin-left: 7px;
	/*{+END}*/
	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		margin-left: 20px;
	/*{+END}*/
}

.post_buttons {
	text-align: left !important; /* Overrides buttons_group */
}

.post .post_buttons {
	margin-top: 1.3em;
}

div .post_buttons>*, div .buttons_group_faded>* {
	{$BETA_CSS_PROPERTY,opacity: 0.25;} display: inline-block;/*Needed for IE8*/
	{$BETA_CSS_PROPERTY,transition-property: opacity;}
	{$BETA_CSS_PROPERTY,transition-duration: 0.5s;}
	{$BETA_CSS_PROPERTY,transform: scale(1);} /* Needed to stop size jerk during animation, by forcing it as a layer at all times */
}

.post_buttons>*[rel="add reply"], .post_buttons>a[rel="back_to_top"] {
	{$BETA_CSS_PROPERTY,opacity: 1.0 !important;} display: inline-block;/*Needed for IE8*/
}

.post_buttons:hover>*, body.touch_enabled .post_buttons>*, .buttons_group_faded:hover>*, body.touch_enabled .buttons_group_faded>* {
	{$BETA_CSS_PROPERTY,opacity: 1.0 !important;} display: inline-block;/*Needed for IE8*/
}

.post_show_more {
	text-align: center;
	border: 1px solid {$GET,standard_border};
	border-bottom-left-radius: 40px;
	border-bottom-right-radius: 40px;
	padding: 1em;
	font-weight: bold;
	font-size: 0.85em;
}

.post .post_show_more {
	margin-left: 2em;
}

.comment_wrapper {
	margin: 1em 0;
}

.comment_wrapper .highlighted_post {
	background-color: {$GET,point_of_interest_background} !important;
	padding: 1em !important;
	margin-top: 1em;
	border: 1px dotted {$GET,slightly_seeded_complement_text} !important;
}
.comments_wrapper .boxless_space .comment_wrapper .highlighted_post.box {
	border-top: 1px dotted {$GET,slightly_seeded_complement_text} !important; /* Needs to be more explicit as boxless-space rules will remove borders */
}

.reviews_average {
	font-size: 0.8em;
	{$BETA_CSS_PROPERTY,opacity: 0.7;} display: inline-block;/*Needed for IE8*/
}

.comments_field_name_column {
	width: 12em;
}

.comments_field_input_column {
	width: 100%;
}

.comments_posting_form_inner {
	text-align: {!en_left};
	padding: 1em 0 0 0;
	/*{+START,IF,{$MOBILE}}*/
		overflow: hidden;
	/*{+END}*/
}

.comments_posting_form_inner th, .comments_posting_form_inner td.one_line {
	padding: {$?,{$MOBILE},0.5em 0.5em 0.5em 0,0.5em 1.5em 0.5em 0.5em};
}

.comments_posting_form_inner th {
	font-weight: bold !important;
	border-right: 1px solid {$GET,pale_border};
	text-align: right;
	/*{+START,IF,{$MOBILE}}*/
		min-width: 4.5em;
	/*{+END}*/
}
.comments_posting_form_inner th>* {
	text-align: right !important;
}

.comments_posting_form_inner td {
	padding-left: {$?,{$MOBILE},0.5em,1.5em};
	padding-right: {$?,{$MOBILE},0,1em};
}

.comments_posting_form_inner textarea {
	color: {$GET,comfortable_input_field_text};
	width: 100%;
}

.comments_posting_form_inner table {
	border-collapse: collapse;
}

.comments_posting_form_emoticons {
	float: {!en_left};
	width: 140px;
	padding-{!en_right}: 5px;
	text-align: center;
	padding-top: 0.5em;
}

.comments_posting_form_emoticons p {
	margin-bottom: 0;
}

.comments_posting_form_emoticons a {
	text-decoration: none;
}
.comments_posting_form_emoticons a:hover {
	text-decoration: underline;
}

.comments_posting_form_inner .associated_links_block_group {
	font-size: 0.85em;
	font-weight: normal;
}
.comments_posting_form_inner .associated_links_block_group li {
	white-space: normal !important;
}

.comments_posting_form_end {
	overflow: hidden;
	/*{+START,IF,{$MOBILE}}*/
		margin: 0;
		padding: 0;
		text-align: center;
	/*{+END}*/
	/*{+START,IF,{$NOT,{$MOBILE}}}*//*{+START,IF,{$NOT,{!takes_lots_of_space}}}*/
		margin: 0 0 1em 0;
	/*{+END}*//*{+END}*/
}

.comments_posting_form_end .proceed_button input:first-child, .comments_captcha {
	margin-left: 180px !important;
}

.comments_posting_form_end #submit_button {
	/*{+START,IF,{$CONFIG_OPTION,enable_previews}}*/
		float: right;
	/*{+END}*/
	margin-right: 1em !important;
}

.comments_captcha {
	width: 210px;
	font-size: 0.85em;
	text-align: center;
}

.comments_captcha img, .comments_captcha iframe, .comments_captcha input {
	margin: 0 5px 2px 5px;
	vertical-align: middle;
}

/*
=========================
==========Lists==========
=========================
*/

ul.compact_list, .global_side_panel ul, ol.compact_list {
	margin: 0;
	padding: 0;
	text-align: left; /* In case cascading from somewhere */
}
ul.compact_list>li, .global_side_panel ul>li, ol.compact_list>li {
	margin: 0 0 0 17px;
	padding: 0;
}
.compact_list>li>p {
	margin-top: 0;
}

dl.compact_list {
	margin: 0.4em 0;
	overflow: hidden;
}
dl.compact_list>dt {
	display: list-item;
	list-style-type: circle;
	float: left;
	margin: 0 0.5em 0 8px;
	clear: both;
}
.global_side_panel .box dl.compact_list>dt {
	margin-left: 0;
}
dl.compact_list>dt:after {
	content: ":";
}
dl.compact_list>dd {
	margin: 0;
}

ul.spaced_list, .spaced_list ul, ol.spaced_list, .spaced_list ol, .zone_running_docs .comcode_page ul:not([class]), .zone_running_docs .comcode_page ol:not([class]) {
	margin: 0;
	padding: 0 !important;
}
ul.spaced_list, .spaced_list ul, .zone_running_docs .comcode_page ul:not([class]) {
	list-style-type: square;
}
.spaced_list li, .zone_running_docs .comcode_page ul:not([class])>li, .zone_running_docs .comcode_page ol:not([class])>li {
	margin: 0.5em 0 0.5em 30px !important;
	padding: 0;
}

ul.tick_list, ul.tick_list li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

ul.actions_list {
	padding: 0;
	margin: 0;
}
ul.actions_list>li, .attachment ul.actions_list>li /*for higher precedence for attachments within docs zone*/ {
	padding: 2px 0 2px 18px !important;
	margin: 0 !important;
}
ul.actions_list_compact>li, ul.actions_list_super_compact>li {
	padding: 0 0 0 18px;
}
ul.actions_list>li, ul.actions_list_compact>li, ul.actions_list_super_compact>li {
	background: url('{$IMG_INLINE;,icons/14x14/action_link}') left 4px no-repeat;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
	ul.actions_list>li, ul.actions_list_compact>li, ul.actions_list_super_compact>li {
		background-image: url('{$IMG_INLINE;,icons/28x28/action_link}');
		background-size: 14px 14px;
	}
}
ul.actions_list>li, ul.actions_list_compact>li, ul.actions_list_super_compact>li {
	margin: 0;
	list-style-type: none;
	list-style-image: none;
}
ul.actions_list h4 {
	display: inline;
	line-height: 2em;
}

ul.actions_list_compact, ul.actions_list_super_compact {
	padding: 0;
	margin: 0;
}

li.actions_list_strong {
	font-weight: bold;
}

/*
A note about display of metadata...

It may be displayed using:
 - meta_details_list (usually used on full screen views of content)
 - horizontal_meta_details (usually used on blocks where the meta details are important to encourage a click through)
 - a table (usually used where the content defines its own metadata beyond what all Composr content has, such as a length or resolution)
 - a tooltip (good for tucking it away, although it's not touch friendly so should only be used if non-important)
But it should always have role="note" on it (ARIA)
*/

ul.meta_details_list {
	display: block;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

ul.meta_details_list>li {
	padding: 0;
	margin: 0.2em 0;
}

dl.meta_details_list>dt {
	float: {!en_left};
	clear: {!en_left};
	padding-{!en_right}: 0.4em !important;
}
dl.meta_details_list>dt, dl.meta_details_list>dd {
	margin: 0;
	padding: 0.2em 0;
}

.meta_details>ul.meta_details_list>li {
	margin: 0.5em 0;
}
.meta_details>dl.meta_details_list {
	margin-bottom: 0;
	overflow: hidden;
}

/*
=========================
=Associations/Summaries==
=========================
*/

.quick_self_edit_link {
	font-size: 0.8em;
	text-align: center;
	border: 1px solid {$GET,pale_border};
	{$BETA_CSS_PROPERTY,border-radius: 5px;}
	padding: 0.5em;
	{$BETA_CSS_PROPERTY,opacity: 0.4;}
	{$BETA_CSS_PROPERTY,transition: opacity 0.6s linear;}
	margin-top: 3em;
	{$BETA_CSS_PROPERTY,transform: scale(1);} /* Needed to stop size jerk during animation, by forcing it as a layer at all times */
}
.quick_self_edit_link img, .quick_self_edit_link span {
	vertical-align: middle;
}
.quick_self_edit_link:hover {
	{$BETA_CSS_PROPERTY,opacity: 1.0;}
}
#panel_top .quick_self_edit_link {
	display: none;
}

.staff_actions {
	margin-top: 2em;
	font-size: 0.95em;
	{$BETA_CSS_PROPERTY,opacity: 0.4;}
	{$BETA_CSS_PROPERTY,transition: opacity 0.6s linear;}
	background: url('{$IMG_INLINE;,icons/24x24/tabs/settings}') right 4px no-repeat;
	padding-right: 5px;
	background-origin: content-box;
	{$BETA_CSS_PROPERTY,transform: scale(1);} /* Needed to stop size jerk during animation, by forcing it as a layer at all times */
	min-height: 26px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
	.staff_actions {
		background-image: url('{$IMG_INLINE;,icons/48x48/tabs/settings}');
		background-size: 24px 24px;
	}
}
.staff_actions:hover, body.touch_enabled .staff_actions {
	{$BETA_CSS_PROPERTY,opacity: 1.0;}
}
.staff_actions .box_inner {
	padding-right: 25px;
}
.staff_actions .field_name.standard_field_name {
	display: none;
}
.staff_actions ul.horizontal_links {
	width: auto;
	font-size: 1em;
}
.global_middle .staff_actions li {
	white-space: nowrap !important;
}

.associated_details {
	font-weight: normal; /* Undo what may be set on a surrounding element */
}

.associated_minor_button_action, .associated_details {
	font-size: 0.9em;
}

.associated_details_smaller {
	font-size: 0.8em;
}

.global_side_panel .associated_minor_button_action, .global_side_panel .associated_details, .associated_link {
	font-size: 0.95em;
}

.associated_minor_button_overlayed {
	position: absolute;
}

div.associated_details {
	margin: 1em 0;
}

.associated_breadcrumbs {
	font-size: 0.85em;
	color: {$GET,a.link};
}

/*
a.associated_link / form.associated_link / span.associated_link - a single associated link displayed inline, with CSS-generated brackets around
p.associated_link / div.associated_link - a single associated link displayed in a block, with CSS-generated brackets around
ul.associated_links_block_group - a group of associated links displayed in a block, each link on its own line with its own CSS-generated brackets around
ul.horizontal_links / ul.horizontal_links_comma - a group of associated links displayed in a block, the links on the same line with a CSS-generated separation character; often used to represent block actions; often used in conjunction with associated_links_block_group to get the CSS-generated brackets
.horizontal_meta_details / .horizontal_buttons / .horizontal_ticker - Additional horizontal list types for things other than links
.buttons_group - used for a button set, like horizontal_links but for centred buttons

There is 'actions_list' too (defined elsewhere). These are for links that are given more focus as key navigation mechanisms in a task-based UI.
*/

ul.associated_links_block_group.horizontal_links>li:first-child:before, p.associated_link:before, div.associated_link:before {
	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		content: "( " !important;
	/*{+END}*/
	{$BETA_CSS_PROPERTY,opacity: 0.7;}
	font-size: 0.8em;
}
ul.associated_links_block_group.horizontal_links>li:last-child:after, p.associated_link:after, div.associated_link:after {
	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		content: " )" !important;
	/*{+END}*/
	{$BETA_CSS_PROPERTY,opacity: 0.7;}
	font-size: 0.8em;
}
span.associated_link, a.associated_link, form.associated_link {
	white-space: nowrap;
}
ul.associated_links_block_group>li:before, span.associated_link:before, a.associated_link:before, form.associated_link:before {
	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		content: "(" !important;
	/*{+END}*/
	{$BETA_CSS_PROPERTY,opacity: 0.7;}
}
ul.associated_links_block_group>li:first-child:before, span.associated_link:first-child:before, a.associated_link:first-child:before, form.associated_link:first-child:before {
	vertical-align: baseline !important;
}
ul.associated_links_block_group.horizontal_links>li:after { /* Undoes the above rules for if 'horizontal_links' is set (the rule further up will run instead and the middot one below) */
	content: "" !important;
}
ul.associated_links_block_group>li:after, span.associated_link:after, a.associated_link:after, form.associated_link:after {
	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		content: ")" !important;
	/*{+END}*/
	{$BETA_CSS_PROPERTY,opacity: 0.7;}
}

ul.associated_links_block_group.horizontal_links>li:before,
.horizontal_meta_details li:before,
.horizontal_links>li:before,
.horizontal_ticker li:before {
	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		content: "\00b7" !important; /* a &middot; */
	/*{+END}*/
	padding: {$?,{$MOBILE},0 0.2em 0 0.1em,0 0.5em 0 0.1em};
	vertical-align: -20%;
}
.horizontal_meta_details li:before {
	vertical-align: middle;
}
.horizontal_buttons li {
	padding-left: 3px !important;
}
.horizontal_buttons li:first-child {
	/* Undoes the li padding defined above */
	padding-left: 0 !important;
}
.horizontal_links_comma li:before {
	content: ", \A";
}
.horizontal_meta_details li:first-child:before,
.horizontal_links li:first-child:before,
.horizontal_buttons li:first-child:before,
.horizontal_ticker li:first-child:before,
.horizontal_links_comma li:first-child:before {
	/* Undoes the middot/comma separator */
	content: "" !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
ul.associated_link, ul.horizontal_meta_details, ul.horizontal_links, ul.horizontal_links_comma, ul.horizontal_buttons, .horizontal_ticker {
	list-style: none;
	margin: 0;
	padding: 0;
}
.horizontal_buttons {
	list-style: none;
}
ul.horizontal_links_comma {
	vertical-align: baseline !important;
	width: auto !important;
}
ul.associated_link {
	display: block;
}
ul.horizontal_meta_details, ul.horizontal_links, ul.horizontal_links_comma, ul.horizontal_buttons, .horizontal_ticker {
	/* As these go across horizontally, we need to do this to allow centering to work for the group */
	display: inline-block !important;
	width: 100%;
}
ul.associated_link>li, .horizontal_meta_details>li, .horizontal_links>li, ul.horizontal_links_comma>li, .horizontal_buttons>li, .horizontal_ticker>li {
	display: inline;
	margin: 0;
	padding: 0;
}
ul.associated_link>li {
	display: block !important; /* Undoes "display: inline" above */
}
ul.horizontal_links li img {
	max-width: 20px;
}
ul.associated_link li img {
	max-width: 14px;
}
ul.horizontal_links li img, ul.associated_link li img, ul.horizontal_links a, ul.horizontal_links form {
	vertical-align: middle;
	/*{+START,IF,{$MOBILE}}*/
		white-space: nowrap !important;
	/*{+END}*/
}

.associated_links_block_group>li{
	margin: 0.5em 0 !important;
	white-space: nowrap; /* To force breaking between links */
}
.global_side_panel .associated_links_block_group>li {
	white-space: normal;
}
.buttons_group, .associated_links_block_group {
	text-align: center;
	padding: 0;
	margin: 1em 0;
	display: block;
	list-style: none;
}
.horizontal_links, .associated_link {
	font-size: 0.9em;
}
ul.buttons_group, ul.associated_links_block_group {
	margin: 0; /* Margin will go on li elements if its a list */
}
.force_normal_margin {
	margin-top: 1em !important;
}
.force_margin {
	margin-top: 1.5em !important;
}
.global_side_panel .force_margin {
	margin-top: 1em !important;
}

.associated_link.suggested {
	font-weight: bold;
}

.alt_field:before {
	content: "\00bb"; /* raquo */
	padding-left: 1em;
	padding-right: 0.2em;
}
.related_field {
	font-style: italic;
	font-weight: normal;
}
.related_field:before {
	font-style: normal;
	content: "\203a"; /* rsaquo */
	padding-bottom: 5px;
	padding-left: 0.5em;
	padding-right: 0.2em;
}

/*
=========================
=======Misc Forms========
=========================
*/

.field_input_non_filled {
	color: {$GET,unfilled_input_text} !important;
}
.field_input_filled {
	color: {$GET,native_ui_foreground};
}

.locked_input_field {
	color: {$GET,locked_input_field};
}

.native_ui_foreground {
	color: {$GET,native_ui_foreground};
}

.native_ui_selected {
	color: {$GET,native_ui_selected_foreground};
	background-color: {$GET,native_ui_selected_background};
}

.simple_neat_checkbox {
	overflow: hidden;
}
.simple_neat_checkbox input {
	float: {!en_left};
}
.simple_neat_checkbox span {
	float: {!en_right};
	padding-{!en_left}: 2em;
	margin-top: -1.5em;
	width: 100%;
	{$BETA_CSS_PROPERTY,box-sizing: border-box;}
}

.captcha_frame {
	width: 100px;
	height: 42px;
}

.captcha {
	font-size: 0.8em;
	margin-bottom: 3px;
}

.captcha a {
	float: {!en_right};
	margin: 10px 0 0 5px;
}

.quite_wide_field {
	width: 86%;
}

.box___confirm_screen {
	margin-bottom: 2em;
}

.box___confirm_screen img:not([width]):not([height]) {
	max-width: 100%;
	height: auto;
}

/*
=========================
======Common forms=======
=========================
*/

.wide_field {
	width: 100%;
	{$BETA_CSS_PROPERTY,box-sizing: border-box;}
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.fields_set_contents .constrain_field, .fields_set_contents .wide_field {
	max-width: 500px;
}
.fields_set_contents .constrain_field, .fields_set_contents input .wide_field {
	display: inline;
}
.constrain_field + .constrain_field {
	margin: 0.25em 0;
}

/*
=========================
=========Buttons=========
=========================
*/

/* This is used to overlay special out-of-flow edit buttons, for staff only */
input.magic_image_edit_link {
	font-size: 13px;
	border: 1px solid {$GET,light_error_border} !important;
	background-color: {$GET,light_error_background} !important;
	color: {$GET,slightly_seeded_text} !important;
	text-shadow: 0 0 0;
}

.button_screen_item_tall {
	background-image: none !important;
}

.button_micro, .button_screen, .button_screen_item, .hero_section .hero_button a, body .hero_section .hero_button>a.user_link {
	display: inline-block;
	{$BETA_CSS_PROPERTY,box-sizing: border-box;}
	border: 1px solid {$GET,dark_border};
	{$BETA_CSS_PROPERTY,border-radius: 6px;}
	margin: 0.25em;
	{$BETA_CSS_PROPERTY,box-shadow: 0 0 5px {$GET,standard_border};}
	text-shadow: 2px 1px 2px {$GET,dark_shadow};
	background-color: {$GET,dgrad};
	background-repeat: no-repeat;
	background-position: 96% 3px; /*fallback*/
	background-position: right 7px center;
	color: {$GET,box_title_text} !important;
	text-decoration: none !important;
	-webkit-appearance: none;
	vertical-align: middle;
	cursor: pointer;
}
div>.button_micro:first-child, div>.button_screen:first-child, div>.button_screen_item:first-child, .hero_section .hero_button a:first-child {
	margin-left: 2px; /* enough for the shadow */
}

.button_faded {
	opacity: 0.5 !important;
}

.button_screen {
	background-size: 24px 24px;
	padding: 6px 39px 7px 7px;
	border-width: 2px;
	font-size: 13px;
	min-width: 8em;
}
.buttons__previous.button_screen, .buttons__previous_none.button_screen {
	padding: 6px 7px 7px 39px !important;
	background-position: 7px center !important;
}
.button_screen_item {
	padding: 3px 30px 4px 5px;
	background-size: 18px 18px;
	font-size: 13px;
	/*{+START,IF,{$MOBILE}}*/
		margin: 0.25em 0.1em !important;
	/*{+END}*/
}
.button_micro {
	padding: 1px 3px 2px 3px;
	font-size: 12px;
	margin: 1px 0.25em 0 0.25em; /* Push it up a bit due to confined space */
	text-shadow: 1px 1px 1px {$GET,dark_shadow};
	/*{+START,IF,{$MOBILE}}*/
		line-height: 0.9em;
	/*{+END}*/
}
div .button_micro {
	background-image: none !important; /* Too loud for such a small space */
	{$BETA_CSS_PROPERTY,border-radius: 4px;}
}

.button_screen, .button_screen_item, .button_micro, .toggleable_tray_button img {
	{$BETA_CSS_PROPERTY,opacity: 0.85;}
	{$BETA_CSS_PROPERTY,transform: scale(1);} /* Needed to stop size jerk during animation, by forcing it as a layer at all times */
	display: inline-block;
}
.buttons__previous_none, .buttons__next_none {
	{$BETA_CSS_PROPERTY,opacity: 0.85 !important;}
	cursor: not-allowed;
}
.button_micro:hover, .button_screen:hover, .button_screen_item:hover {
	{$BETA_CSS_PROPERTY,opacity: 1.0;}
}
.button_screen:hover, .button_screen_item:hover, .button_micro:hover, .toggleable_tray_button:hover img,
body.touch_enabled .button_screen, body.touch_enabled .button_screen_item, body.touch_enabled .button_micro, body.touch_enabled .toggleable_tray_button img {
	{$BETA_CSS_PROPERTY,opacity: 1.0;} /* Needed for Opera */
}
.button_micro:disabled, .button_screen:disabled, .button_screen_item:disabled {
	{$BETA_CSS_PROPERTY,opacity: 0.4 !important;}
	cursor: default;
}

.proceed_button {
	text-align: center;
}
.proceed_button:last-child {
	margin-bottom: 0;
}
div.proceed_button_left {
	text-align: {!en_left};
}
div.proceed_button_left_2 {
	text-align: {!en_left};
	margin-{!en_left}: -2em;
}

.shunted_button {
	clear: {!en_right};
	text-align: {!en_right};
}

.innocuous_fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 1em 0;
	min-width: 0; /* Works around webkit bug, where it breaks max-width:100% inside because the size calculation has been inverted by the default "min-width: -webkit-min-content;" rule  */
}

.mass_select_marker {
	padding: 0.2em;
	float: {!en_right};
	border: 1px solid {$GET,standard_border};
	margin-{!en_left}: 1em;
	margin-top: 1px; /* To get it past a possible overflow:hidden (may be a browser bug) */
}
.mass_select_marker input {
	width: 25px;
	height: 25px;
	margin: 0;
}

.global_button_ref_point {
	position: absolute;
	min-width: 22em;
	font-size: 13px; /* Puts it back, as was set to zero elsewhere */
	z-index: 2000;
}
.global_button_ref_point .box {
	{$BETA_CSS_PROPERTY,box-shadow: 3px 3px 10px {$GET,standard_border};}
}

.global_button_ref_point .associated_links_block_group, .notification+.notification {
	margin-top: 0.5em;
	border-top: 1px solid {$GET,pale_border};
	padding-top: 0.5em;
}


/*
NB: Form buttons are wrapped in either:
 - .shunted_button
 - .proceed_button
 - .mini_proceed_button
 - .buttons_group (defined elsewhere, in "Associations/Summaries")
*/


.menu___generic_admin__delete, .tabs__member_account__warnings, .buttons_group .buttons__edit, .buttons_group .buttons__edit_tree, .buttons_group .menu___generic_admin__merge, .buttons_group .buttons__move {
	background-color: {$GET,red_highlight_background};
	border-color: {$GET,red_highlight_text};
}

/*
Formulaic bindings between CSS classes and icons, for our nice CSS buttons.
*/
.buttons__menu__pages__help {
	background-image: url('{$IMG,icons/24x24/menu/pages/help}') !important;
}
.buttons__back {
	background-image: url('{$IMG,icons/24x24/buttons/back}') !important;
}
.buttons__gotopage {
	background-image: url('{$IMG,icons/24x24/buttons/gotopage}') !important;
}
.buttons__perpage {
	background-image: url('{$IMG,icons/24x24/buttons/perpage}') !important;
}
.buttons__filter {
	background-image: url('{$IMG,icons/24x24/buttons/filter}') !important;
}
.buttons__sort {
	background-image: url('{$IMG,icons/24x24/buttons/sort}') !important;
}
.buttons__all {
	background-image: url('{$IMG,icons/24x24/buttons/all}') !important;
}
.buttons__all2 {
	background-image: url('{$IMG,icons/24x24/buttons/all2}') !important;
}
.buttons__convert {
	background-image: url('{$IMG,icons/24x24/buttons/convert}') !important;
}
.buttons__thumbnail {
	background-image: url('{$IMG,icons/24x24/buttons/thumbnail}') !important;
}
.buttons__fullsize {
	background-image: url('{$IMG,icons/24x24/buttons/fullsize}') !important;
}
.buttons__calculate {
	background-image: url('{$IMG,icons/24x24/buttons/calculate}') !important;
}
.buttons__choose {
	background-image: url('{$IMG,icons/24x24/buttons/choose}') !important;
}
.buttons__clear {
	background-image: url('{$IMG,icons/24x24/buttons/clear}') !important;
}
.buttons__ignore {
	background-image: url('{$IMG,icons/24x24/buttons/ignore}') !important;
}
.buttons__closed {
	background-image: url('{$IMG,icons/24x24/buttons/closed}') !important;
}
.buttons__enable_notifications {
	background-image: url('{$IMG,icons/24x24/buttons/enable_notifications}') !important;
}
.buttons__disable_notifications {
	background-image: url('{$IMG,icons/24x24/buttons/disable_notifications}') !important;
}
.buttons__edit {
	background-image: url('{$IMG,icons/24x24/buttons/edit}') !important;
}
.buttons__more {
	background-image: url('{$IMG,icons/24x24/buttons/more}') !important;
}
.buttons__move {
	background-image: url('{$IMG,icons/24x24/buttons/move}') !important;
}
.buttons__no {
	background-image: url('{$IMG,icons/24x24/buttons/no}') !important;
}
.buttons__yes {
	background-image: url('{$IMG,icons/24x24/buttons/yes}') !important;
}
.buttons__proceed {
	background-image: url('{$IMG,icons/24x24/buttons/proceed}') !important;
}
.menu__adminzone__tools__cleanup {
	background-image: url('{$IMG,icons/24x24/menu/adminzone/tools/cleanup}') !important;
}
.buttons__copy {
	background-image: url('{$IMG,icons/24x24/buttons/copy}') !important;
}
.buttons__skip {
	background-image: url('{$IMG,icons/24x24/buttons/skip}') !important;
}
.buttons__cancel {
	background-image: url('{$IMG,icons/24x24/buttons/cancel}') !important;
}
.buttons__previous {
	background-image: url('{$IMG,icons/24x24/buttons/previous}') !important;
}
.buttons__previous_none {
	background-image: url('{$IMG,icons/24x24/buttons/previous_none}') !important;
}
.buttons__next {
	background-image: url('{$IMG,icons/24x24/buttons/next}') !important;
}
.buttons__next_none {
	background-image: url('{$IMG,icons/24x24/buttons/next_none}') !important;
}
.buttons__new_comment {
	background-image: url('{$IMG,icons/24x24/buttons/new_comment}') !important;
}
.buttons__new_reply {
	background-image: url('{$IMG,icons/24x24/buttons/new_reply}') !important;
}
.buttons__redirect {
	background-image: url('{$IMG,icons/24x24/buttons/redirect}') !important;
}
.buttons__report {
	background-image: url('{$IMG,icons/24x24/buttons/report}') !important;
}
/*{+START,IF,{$ADDON_INSTALLED,actionlog}}*/
	.buttons__undo {
		background-image: url('{$IMG,icons/24x24/buttons/undo}') !important;
	}
	.buttons__revisions {
		background-image: url('{$IMG,icons/24x24/buttons/revisions}') !important;
	}
/*{+END}*/
.buttons__save {
	background-image: url('{$IMG,icons/24x24/buttons/save}') !important;
}
.buttons__save_and_stay {
	background-image: url('{$IMG,icons/24x24/buttons/save_and_stay}') !important;
}
.buttons__search {
	background-image: url('{$IMG,icons/24x24/buttons/search}') !important;
}
.buttons__send {
	background-image: url('{$IMG,icons/24x24/buttons/send}') !important;
}
.buttons__upload {
	background-image: url('{$IMG,icons/24x24/buttons/upload}') !important;
}
.menu__adminzone__audit__unvalidated {
	background-image: url('{$IMG,icons/24x24/menu/adminzone/audit/unvalidated}') !important;
}
.buttons__vote {
	background-image: url('{$IMG,icons/24x24/buttons/vote}') !important;
}
.feedback__rate {
	background-image: url('{$IMG,icons/24x24/feedback/rate}') !important;
}
.menu___generic_admin__add_one {
	background-image: url('{$IMG,icons/24x24/menu/_generic_admin/add_one}') !important;
}
.menu___generic_admin__add_one_category {
	background-image: url('{$IMG,icons/24x24/menu/_generic_admin/add_one_category}') !important;
}
.menu___generic_admin__add_to_category {
	background-image: url('{$IMG,icons/24x24/menu/_generic_admin/add_to_category}') !important;
}
.menu___generic_admin__delete {
	background-image: url('{$IMG,icons/24x24/menu/_generic_admin/delete}') !important;
}
.menu___generic_admin__edit_one {
	background-image: url('{$IMG,icons/24x24/menu/_generic_admin/edit_one}') !important;
}
.menu___generic_admin__edit_one_category {
	background-image: url('{$IMG,icons/24x24/menu/_generic_admin/edit_one_category}') !important;
}
.menu___generic_admin__edit_this {
	background-image: url('{$IMG,icons/24x24/menu/_generic_admin/edit_this}') !important;
}
.menu___generic_admin__edit_this_category {
	background-image: url('{$IMG,icons/24x24/menu/_generic_admin/edit_this_category}') !important;
}
.menu___generic_admin__export {
	background-image: url('{$IMG,icons/24x24/menu/_generic_admin/export}') !important;
}
.menu___generic_admin__import {
	background-image: url('{$IMG,icons/24x24/menu/_generic_admin/import}') !important;
}
.menu___generic_admin__merge {
	background-image: url('{$IMG,icons/24x24/menu/_generic_admin/merge}') !important;
}
.menu___generic_admin__sync {
	background-image: url('{$IMG,icons/24x24/menu/_generic_admin/sync}') !important;
}
.menu___generic_admin__view_archive {
	background-image: url('{$IMG,icons/24x24/menu/_generic_admin/view_archive}') !important;
}
.menu__site_meta__user_actions__join {
	background-image: url('{$IMG,icons/24x24/menu/site_meta/user_actions/join}') !important;
}
.menu__site_meta__user_actions__login {
	background-image: url('{$IMG,icons/24x24/menu/site_meta/user_actions/login}') !important;
}
.tabs__preview {
	background-image: url('{$IMG,icons/24x24/tabs/preview}') !important;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
	.buttons__menu__pages__help {
		background-image: url('{$IMG,icons/48x48/menu/pages/help}') !important;
	}
	.buttons__back {
		background-image: url('{$IMG,icons/48x48/buttons/back}') !important;
	}
	.buttons__gotopage {
		background-image: url('{$IMG,icons/48x48/buttons/gotopage}') !important;
	}
	.buttons__perpage {
		background-image: url('{$IMG,icons/48x48/buttons/perpage}') !important;
	}
	.buttons__filter {
		background-image: url('{$IMG,icons/48x48/buttons/filter}') !important;
	}
	.buttons__sort {
		background-image: url('{$IMG,icons/48x48/buttons/sort}') !important;
	}
	.buttons__all {
		background-image: url('{$IMG,icons/48x48/buttons/all}') !important;
	}
	.buttons__all2 {
		background-image: url('{$IMG,icons/48x48/buttons/all2}') !important;
	}
	.buttons__convert {
		background-image: url('{$IMG,icons/48x48/buttons/convert}') !important;
	}
	.buttons__thumbnail {
		background-image: url('{$IMG,icons/48x48/buttons/thumbnail}') !important;
	}
	.buttons__fullsize {
		background-image: url('{$IMG,icons/48x48/buttons/fullsize}') !important;
	}
	.buttons__calculate {
		background-image: url('{$IMG,icons/48x48/buttons/calculate}') !important;
	}
	.buttons__choose {
		background-image: url('{$IMG,icons/48x48/buttons/choose}') !important;
	}
	.buttons__clear {
		background-image: url('{$IMG,icons/48x48/buttons/clear}') !important;
	}
	.buttons__ignore {
		background-image: url('{$IMG,icons/48x48/buttons/ignore}') !important;
	}
	.buttons__closed {
		background-image: url('{$IMG,icons/48x48/buttons/closed}') !important;
	}
	.buttons__enable_notifications {
		background-image: url('{$IMG,icons/48x48/buttons/enable_notifications}') !important;
	}
	.buttons__disable_notifications {
		background-image: url('{$IMG,icons/48x48/buttons/disable_notifications}') !important;
	}
	.buttons__edit {
		background-image: url('{$IMG,icons/48x48/buttons/edit}') !important;
	}
	.buttons__more {
		background-image: url('{$IMG,icons/48x48/buttons/more}') !important;
	}
	.buttons__move {
		background-image: url('{$IMG,icons/48x48/buttons/move}') !important;
	}
	.buttons__no {
		background-image: url('{$IMG,icons/48x48/buttons/no}') !important;
	}
	.buttons__yes {
		background-image: url('{$IMG,icons/48x48/buttons/yes}') !important;
	}
	.buttons__proceed {
		background-image: url('{$IMG,icons/48x48/buttons/proceed}') !important;
	}
	.buttons__copy {
		background-image: url('{$IMG,icons/48x48/buttons/copy}') !important;
	}
	.buttons__skip {
		background-image: url('{$IMG,icons/48x48/buttons/skip}') !important;
	}
	.buttons__cancel {
		background-image: url('{$IMG,icons/48x48/buttons/cancel}') !important;
	}
	.buttons__previous {
		background-image: url('{$IMG,icons/48x48/buttons/previous}') !important;
	}
	.buttons__previous_none {
		background-image: url('{$IMG,icons/48x48/buttons/previous_none}') !important;
	}
	.buttons__next {
		background-image: url('{$IMG,icons/48x48/buttons/next}') !important;
	}
	.buttons__next_none {
		background-image: url('{$IMG,icons/48x48/buttons/next_none}') !important;
	}
	.buttons__new_comment {
		background-image: url('{$IMG,icons/48x48/buttons/new_comment}') !important;
	}
	.buttons__new_reply {
		background-image: url('{$IMG,icons/48x48/buttons/new_reply}') !important;
	}
	.buttons__redirect {
		background-image: url('{$IMG,icons/48x48/buttons/redirect}') !important;
	}
	.buttons__report {
		background-image: url('{$IMG,icons/48x48/buttons/report}') !important;
	}
	/*{+START,IF,{$ADDON_INSTALLED,actionlog}}*/
		.buttons__undo {
			background-image: url('{$IMG,icons/48x48/buttons/undo}') !important;
		}
		.buttons__revisions {
			background-image: url('{$IMG,icons/48x48/buttons/revisions}') !important;
		}
	/*{+END}*/
	.buttons__save {
		background-image: url('{$IMG,icons/48x48/buttons/save}') !important;
	}
	.buttons__save_and_stay {
		background-image: url('{$IMG,icons/48x48/buttons/save_and_stay}') !important;
	}
	.buttons__search {
		background-image: url('{$IMG,icons/48x48/buttons/search}') !important;
	}
	.buttons__send {
		background-image: url('{$IMG,icons/48x48/buttons/send}') !important;
	}
	.buttons__upload {
		background-image: url('{$IMG,icons/48x48/buttons/upload}') !important;
	}
	.menu__adminzone__audit__unvalidated {
		background-image: url('{$IMG,icons/48x48/menu/adminzone/audit/unvalidated}') !important;
	}
	.buttons__vote {
		background-image: url('{$IMG,icons/48x48/buttons/vote}') !important;
	}
	.feedback__rate {
		background-image: url('{$IMG,icons/48x48/feedback/rate}') !important;
	}
	.menu___generic_admin__add_one {
		background-image: url('{$IMG,icons/48x48/menu/_generic_admin/add_one}') !important;
	}
	.menu___generic_admin__add_one_category {
		background-image: url('{$IMG,icons/48x48/menu/_generic_admin/add_one_category}') !important;
	}
	.menu___generic_admin__add_to_category {
		background-image: url('{$IMG,icons/48x48/menu/_generic_admin/add_to_category}') !important;
	}
	.menu___generic_admin__delete {
		background-image: url('{$IMG,icons/48x48/menu/_generic_admin/delete}') !important;
	}
	.menu___generic_admin__edit_one {
		background-image: url('{$IMG,icons/48x48/menu/_generic_admin/edit_one}') !important;
	}
	.menu___generic_admin__edit_one_category {
		background-image: url('{$IMG,icons/48x48/menu/_generic_admin/edit_one_category}') !important;
	}
	.menu___generic_admin__edit_this {
		background-image: url('{$IMG,icons/48x48/menu/_generic_admin/edit_this}') !important;
	}
	.menu___generic_admin__edit_this_category {
		background-image: url('{$IMG,icons/48x48/menu/_generic_admin/edit_this_category}') !important;
	}
	.menu___generic_admin__export {
		background-image: url('{$IMG,icons/48x48/menu/_generic_admin/export}') !important;
	}
	.menu___generic_admin__import {
		background-image: url('{$IMG,icons/48x48/menu/_generic_admin/import}') !important;
	}
	.menu___generic_admin__merge {
		background-image: url('{$IMG,icons/48x48/menu/_generic_admin/merge}') !important;
	}
	.menu___generic_admin__sync {
		background-image: url('{$IMG,icons/48x48/menu/_generic_admin/sync}') !important;
	}
	.menu___generic_admin__view_archive {
		background-image: url('{$IMG,icons/48x48/menu/_generic_admin/view_archive}') !important;
	}
	.menu__site_meta__user_actions__join {
		background-image: url('{$IMG,icons/48x48/menu/site_meta/user_actions/join}') !important;
	}
	.menu__site_meta__user_actions__login {
		background-image: url('{$IMG,icons/48x48/menu/site_meta/user_actions/login}') !important;
	}
	.tabs__preview {
		background-image: url('{$IMG,icons/48x48/tabs/preview}') !important;
	}
}

/*
=========================
====Frame Interfaces=====
=========================
*/

.dynamic_iframe {
	width: 100%;
	height: 900px; /* This is dynamically resized; 900px is referenced from global.js so don't change it */
}

.expandable_iframe {
	width: 100%;
	height: 150px; /* Referenced also in global.js */
}

.hidden_save_frame, .hidden_preview_frame {
	width: 100%;
	height: 0;
	float: left; /* Stops it breaking up margin collapsing */
	{$BETA_CSS_PROPERTY,transform: scale(1);} /* Fixes bugginess in Chrome */
}

/*
=========================
===========Tabs==========
=========================
*/

.tab_surround {
	border-left: 1px solid;
	border-right: 1px solid;
	border-bottom: 1px solid;
	border-color: {$GET,tab_border};
	{$BETA_CSS_PROPERTY,border-bottom-left-radius: 10px;}
	{$BETA_CSS_PROPERTY,border-bottom-right-radius: 10px;}
	padding: 0.5em;
	{$BETA_CSS_PROPERTY,background-image: linear-gradient(to bottom\, {$GET,main_2_background}\, {$GET,main_background});}
}

.tab_surround>div>.box:first-child {
	margin-top: 0;
}

/* Tighten up subtab display */
.tab_surround .tab_surround {
	background-image: none;
	background-color: {$GET,main_background};
	overflow: hidden; /* To stop margin collapsing bleeding backgrounds */
}

.tabs {
	border-left: 0;
	border-right: 0;
	border-top: 0;
	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		border-bottom: 1px solid;
		border-color: {$GET,tab_border};
	/*{+END}*/
	height: 25px;
}

/*{+START,IF,{$MOBILE}}*/
	.tabs {
		border-bottom: 1px solid {$GET,tab_border};
		overflow: hidden;
		height: auto;
	}
/*{+END}*/

a.tab, a.tab:visited, a.tab:hover {
	text-decoration: none;
}

.tab {
	float: left;
	padding: 3px 6px 0 6px !important;
	height: 23px;
	text-align: center;
	cursor: pointer;
	line-height: 1em;
	{$BETA_CSS_PROPERTY,opacity: 0.6;}
	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		background-image: url('{$IMG;,tab}') !important;
	/*{+END}*/
	/*{+START,IF,{$MOBILE}}*/
		min-width: 105px; /* Allows 3 per row, neat alignment */
		border-left: 1px solid {$GET,tab_border};
		border-top: 1px solid {$GET,tab_border};
	/*{+END}*/
}

a.tab>img+span {
	padding-top: 0;
}
a.tab>span {
	padding-top: 3px;
}

/*{+START,IF,{$MOBILE}}*/
	.tab_surround .tab {
		min-width: 99px; /* Allows 3 per row, neat alignment (for nested tabs) */
	}
/*{+END}*/

.tab * {
	vertical-align: middle;
	display: inline-block;
}

.tab_active {
	text-shadow: 1px 0 1px {$GET,standard_border};
	{$BETA_CSS_PROPERTY,opacity: 1.0 !important;}
}

.tab:hover, body.touch_enabled .tab {
	{$BETA_CSS_PROPERTY,opacity: 1.0;}
}

.tab strong {
	font-weight: normal;
	font-style: italic;
}

.tab img {
	width: 20px;
}

.tab_first {
}

/*{+START,IF,{$NOT,{$MOBILE}}}*/
	.tab_last {
		border-right: 1px solid;
		border-color: {$GET,tab_border};
	}
/*{+END}*/

/*{+START,IF,{$MOBILE}}*/
	.tab:nth-child(3n+0) {
		border-right: 1px solid {$GET,tab_border};
	}
/*{+END}*/

div[role="tabpanel"] {
	/*{+START,IF,{$MOBILE}}*/
		padding-left: 2px;
		padding-right: 2px;
	/*{+END}*/

	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		padding-left: 1em;
		padding-right: 1em;
	/*{+END}*/
}
div[role="tabpanel"]>div:first-child, div[role="tabpanel"]>style:first-child+div {
	margin-top: 1em;
}
div[role="tabpanel"]>div:last-child {
	margin-bottom: 1em;
}

/* Sub-tabs */

.tabs .tabs {
	margin-top: 0.5em;
}

.tab_surround .tab {
	padding-top: 5px !important;
	height: 21px;
	font-size: 0.9em;
}

.tab_surround .tab img {
	width: 17px;
}

/*
=========================
=====Menus (generic)=====
=========================
*/

ul.nl, .nl ul {
	display: block;
	margin: 0;
	padding-{!en_left}: 0;
}

.nl ul>li, ul.nl>li {
	display: block;
	margin-{!en_left}: 0;
	padding-{!en_left}: 0;
	list-style-type: none;
	list-style-image: none;
}

.has_img>a {
	background: none !important;
	padding-{!en_left}: 0 !important;
	vertical-align: middle;
}

.has_img img {
	vertical-align: middle;
}

/* We hide the inline edit menu links for design reasons, they fade in on top of stuff when hovering the menu */
.edit_menu_link_inline, .edit_page_link_inline {
	{$BETA_CSS_PROPERTY,opacity: 0 !important;} display: inline-block;/*Needed for IE8*/
	{$BETA_CSS_PROPERTY,transition: opacity 0.5s linear;}
	{$BETA_CSS_PROPERTY,transform: scale(1);} /* Needed to stop size jerk during animation, by forcing it as a layer at all times */
}
div:hover>.edit_menu_link_inline, div:hover>.edit_page_link_inline {
	{$BETA_CSS_PROPERTY,opacity: 1.0 !important;} display: inline-block;/*Needed for IE8*/
}
.edit_menu_link_inline {
	position: absolute;
	float: left;
	margin-left: 0.25em;
	color: {$GET,slightly_seeded_pale_text};
}
.edit_page_link_inline {
	position: absolute;
	right: 1px;
	z-index: 10000;
	margin-top: -1em;
}

/*
=========================
=========Comcode=========
=========================
*/

.comcode_snapback {
	text-align: {!en_right};
	font-size: 0.75em;
}

.comcode_overlay_main {
	margin-bottom: 3em;
}

.comcode_overlay_dismiss {
	text-align: center;
	position: absolute;
	bottom: 0;
	width: 90%;
}

.comcode_code_wrap {
	overflow-x: auto;
}

/* .comcode_quote is used where the [quote] tag is parsed. */
/* .comcode_code is used where the [code] tag is parsed. */
.email_body .comcode_quote, .email_body .comcode_code {
	margin: 1em 0;
}
.comcode_quote, .comcode_code {
	margin: 1em;

	/* Takes off default from email clients */
	border: 0 !important;
	padding: 0 !important;

	/* To prevent horizontal overlapping with floats */
	outline: 0;
	overflow: auto;
}
td>.comcode_code_wrap>.comcode_quote, td>.comcode_code_wrap>.comcode_code {
	margin: 0;
}

.comcode_quote>h4, .comcode_code>h4 {
	border: 1px solid {$GET,code_border};
	padding: 4px;
	margin: 0;
	background: {$GET,code_title_background} url('{$IMG;,quote_gradient}') repeat-y;
	color: {$GET,slightly_seeded_text};
}

.comcode_quote_inner, .comcode_code_inner {
	border: 1px solid {$GET,code_border};
	display: block;
	padding: 5px;
	margin-{!en_left}: 8px;
	background-color: {$GET,code_background};
	color: {$GET,code_text};
	overflow: hidden;
}

.comcode_quote_inner_titled {
	border-top: 0;
}

.comcode_code_inner {
	font-family: 'Courier New', 'Courier', monospace;
	font-size: 1.1em;
	border-top: 0;
	white-space: nowrap;
	overflow: auto;
}

/* Allow pre tags to work when mixed in, as people do this when pasting */
pre .comcode_code_wrap {
	white-space: normal;
}
pre .comcode_code_inner {
	white-space: pre;
}

.comcode_code_scroll {
	max-height: 300px;
}

.comcode_highlight {
	font-weight: bold;
	color: {$GET,red_highlight_text};
	background-color: {$GET,yellow_highlight_background};
}

.wiki_link, .comcode_concept {
	color: {$GET,area_key_text};
	font-size: 0.85em;
}

.comcode_concept a {
	background-image: url('{$IMG;,1x/arrow_box}') !important;
}
.comcode_concept a:hover {
	background-image: url('{$IMG;,1x/arrow_box_hover}') !important;
}

.wiki_link a {
	background-image: url('{$IMG;,icons/14x14/wiki_link}') !important;
}
.wiki_link a:hover {
	background-image: url('{$IMG;,icons/14x14/wiki_link_hover}') !important;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
	.comcode_concept a {
		background-image: url('{$IMG;,2x/arrow_box}') !important;
		background-size: 12px 13px;
	}
	.comcode_concept a:hover {
		background-image: url('{$IMG;,2x/arrow_box_hover}') !important;
	}

	.wiki_link a {
		background-image: url('{$IMG;,icons/28x28/wiki_link}') !important;
		background-size: 14px 14px;
	}
	.wiki_link a:hover {
		background-image: url('{$IMG;,icons/28x28/wiki_link_hover}') !important;
	}
}

.comcode_concept a, .wiki_link a {
	padding-{!en_right}: 17px !important;
	background-repeat: no-repeat !important;
	background-position: 100% 30% !important;
}
.comcode_concept a:hover, .wiki_link a:hover {
	padding-{!en_right}: 17px !important;
	background-repeat: no-repeat !important;
	background-position: 100% 30% !important;
}

.comcode_concept_inline, a.comcode_concept_inline, a.comcode_concept_inline:visited, a.comcode_concept_inline:hover {
	border-bottom: 1px dashed {$GET,divider_line};
	display: inline-block;
	margin-bottom: 0.3em; /* To make sure bottom border can't be flush with something */
}

.comcode_concepts {
	font-size: 0.85em;
	width: 80%;
	margin: 0 auto;
}

.comcode_concepts_title {
	background-image: url('{$IMG;,checklist/checklist1}');
	background-repeat: no-repeat;
	background-position: 1px 0;
	vertical-align: top;
	text-indent: 14px;
	margin: 0;
}

.comcode_concepts_content {
	padding-bottom: 0.85em;
}

.comcode_table_of_contents {
	display: inline-block;
	white-space: nowrap;
	font-size: 0.9em;
}

.search_result .comcode_table_of_contents {
	display: none;
}

body div.comcode_table_of_contents>div.box_inner>ol {
	padding: 0 !important;
	margin: 0 !important;
	margin-{!en_left}: 20px !important;
}
body div.comcode_table_of_contents>div.box_inner>ol>li {
	margin: 0.2em 0 !important;
	padding: 0 !important;
}

.comcode_table_of_contents a {
	margin: 0;
}

.comcode_table_of_contents_title {
	text-align: center;
	color: {$GET,area_key_text};
	margin: 0.5em;
	font-weight: bold;
}

.comcode_italic {
	font-style: italic;
}

.comcode_bold {
	font-weight: bold;
}

.comcode_underline {
	text-decoration: underline;
}

.comcode_strike {
	text-decoration: line-through;
}

.comcode_section_controller {
	padding-top: 10px;
	margin-bottom: 20px;
}

.ticker_wrap {
	display: inline-block;
}
.ticker {
	margin: 0 auto;
	height: 1.5em;
	white-space: nowrap;
	overflow: hidden;
	text-align: left;
	display: inline-block;
}
.ticker * {
	text-indent: 0;
}

.shocker {
	text-align: right;
	font-size: 1.2em;
}

.shocker_left {
	float: left;
	font-weight: bold;
}

.shocker_right {
}

.comcode_member_link {
	border: 1px solid {$GET,standard_border};
	{$BETA_CSS_PROPERTY,border-radius: 5px;}
	display: inline-block;
	padding: 0.2em 0.25em;
	vertical-align: middle;
	line-height: 1em;
	margin: 1px; /* Needed to stop border getting cropped off */
}
.comcode_member_link img {
	cursor: inherit;
}
.comcode_member_link .embedded_mini_avatar {
	vertical-align: middle;
}
.comcode_member_link a {
	vertical-align: middle;
	color: {$GET,area_text};
	text-decoration: none;
}

.attachment {
	margin: 1em 0;
	margin-bottom: 1px !important; /* Overrides 0 on .left>figure, .right>figure */
	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		border: 1px solid {$GET,standard_border};
		padding: 0.5em !important;
	/*{+END}*/
	font-size: 0.9em;
	/*display: inline-block; Actually table works better, shows margins even when not floated*/
	display: table;
	border-collapse: separate;
	max-width: 100%;
	background: {$GET,WB};
}
figure {
	margin: 1em 0;
}
.left>figure, .right>figure {
	margin: 0;
}
/* Wordpress compatibility */
.attachment.wp-caption {
	white-space: normal;
}
.alignleft {
	float: left;
	margin-right: 0.5em;
}
.alignright {
	float: right;
	margin-left: 0.5em;
}
.aligncenter {
	display: block;
	margin: 1em auto;
}
.alignnone {
	display: block;
	margin: 1em;
}
/* Make inline images look a little nicer, including with Wordpress imports (but native too) */
.alignleft, .alignright, .aligncenter, .alignnone, .media_set img.attachment_img, a[rel="lightbox"] img.attachment_img, .attachment_img img {
	border: 2px solid {$GET,pale_border};
}
.alignleft img, .alignright img, .aligncenter img, .alignnone img {
	display: block;
}

a[rel="lightbox"] {
	text-decoration: none; /* Stops "_" showing when we use white-space */
}

.attachment img, .attachment_img {
	vertical-align: middle;
}
.attachment img:not([width]):not([height]), .attachment_img:not([width]):not([height]) {
	max-width: 100%;
	height: auto;
}

.attachment figcaption {
	border: 1px solid {$GET,standard_border};
	padding: 0.15em 0.3em;
	font-style: italic;
	margin-bottom: 0.5em;
	display: inline-block;
}

.attachment_details {
	margin-top: 0.2em;
}

.attachment_details .actions_list_strong {
	background-position: left center;
}

.attachment_left {
	float: left;
	margin: 0 1.5em 0.5em 0;
}

.attachment_right {
	float: right;
	margin: 0 0 0.5em 1.5em;
}

.attachment_left .attachment, .attachment_right .attachment {
	width: 200px;
	white-space: normal;
}

.media_set {
	margin: 1em 0;
	border: 1px solid {$GET,standard_border};
	background-color: {$GET,area_background};
	padding-bottom: 0.5em;
	{$BETA_CSS_PROPERTY,border-radius: 5px;}
}

.media_set div {
	display: inline;
}

.media_set * {
	vertical-align: top;
}

.media_set br {
	display: none;
}

.media_set a {
	display: inline-block;
	margin-top: 0.5em;
	margin-left: 0.5em;
	min-width: {$DIV,{$CONFIG_OPTION,thumb_width},2}px;
	min-height: {$DIV,{$CONFIG_OPTION,thumb_width},2}px;
	text-align: center;
}

.media_set img {
	width: {$DIV,{$CONFIG_OPTION,thumb_width},2}px;
	height: auto;
}

/* Wrap video code with <div class="responsive_video">...</div> if you want it responsive; jwplayer is doing this by default using its own JS though */
.responsive_video video {
	max-width: 100%;
	height: auto;
}

/* We normally expect a standard-sized YouTube embed, but for mobile we will lock the size to the browser window */
/*{+START,IF,{$MOBILE}}*/
	.youtube_player {
		overflow: hidden;
		width: 100%;
		position: relative;
		padding-bottom: 56.25%;
		padding-top: 25px;
		height: 0;
	}
	.youtube_player iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
/*{+END}*/

/*
=========================
====Link type display====
===Based on "Elements"===
==== by Ben Henschel ====
=========================
*/

/*{+START,IF,{$CONFIG_OPTION,filetype_icons}}*/
	/* Higher than media links for lower CSS precedence */
	a[target="_blank"].user_link { /* Detected external links have styling */
		background: url('{$IMG;,icons/16x16/filetypes/external_link}') no-repeat right top;
		padding-right: 10px;
	}
	body div a.external_link { /* Explicitly marked external links must show the styling with precedence */
		background: url('{$IMG;,icons/16x16/filetypes/external_link}') no-repeat right top !important;
		padding-right: 10px !important;
	}

	a[href^="mailto:"] {
		background: url('{$IMG;,icons/16x16/filetypes/email_link}') no-repeat right top !important; /* Important because the URL may contain arbitrary stuff, including ".php", due to embedded mail body */
		padding: 0 22px 5px 0 !important;
	}

	a[href$=".pdf"].user_link, a[href$=".ps"].user_link, body div a.pdf_link {
		background: url('{$IMG;,icons/16x16/filetypes/page_pdf}') no-repeat right top;
		padding: 0 22px 5px 0;
	}

	a[href$=".doc"].user_link, a[href$=".docx"].user_link, a[href$=".rtf"].user_link, body div a.doc_link {
		background: url('{$IMG;,icons/16x16/filetypes/page_doc}') no-repeat right top;
		padding: 0 22px 5px 0;
	}

	a[href$=".xls"].user_link, a[href$=".xlsx"].user_link, body div a.xls_link {
		background: url('{$IMG;,icons/16x16/filetypes/page_xls}') no-repeat right top;
		padding: 0 22px 5px 0;
	}

	a[href$=".ppt"].user_link, a[href$=".pptx"].user_link, body div a.ppt_link {
		background: url('{$IMG;,icons/16x16/filetypes/page_ppt}') no-repeat right top;
		padding: 0 22px 5px 0;
	}

	a[href$=".log"].user_link, a[href$=".txt"].user_link, body div a.txt_link {
		background: url('{$IMG;,icons/16x16/filetypes/page_txt}') no-repeat right top;
		padding: 0 22px 5px 0;
	}

	a[href$=".odt"].user_link, body div a.odt_link {
		background: url('{$IMG;,icons/16x16/filetypes/page_odt}') no-repeat right top;
		padding: 0 22px 5px 0;
	}

	a[href$=".odp"].user_link, body div a.odp_link {
		background: url('{$IMG;,icons/16x16/filetypes/page_odt}') no-repeat right top;
		padding: 0 22px 5px 0;
	}

	a[href$=".ods"].user_link, body div a.ods_link {
		background: url('{$IMG;,icons/16x16/filetypes/page_ods}') no-repeat right top;
		padding: 0 22px 5px 0;
	}

	a[href$=".rss"].user_link, body div a.feed_link {
		background: url('{$IMG;,icons/16x16/filetypes/feed}') no-repeat right top;
		padding: 0 22px 5px 0;
	}

	a[href$=".torrent"].user_link, body div a.torrent_link {
		background: url('{$IMG;,icons/16x16/filetypes/page_torrent}') no-repeat right top;
		padding: 0 22px 5px 0;
	}

	a[href$=".zip"].user_link, a[href$=".gz"].user_link, a[href$=".bz2"].user_link, a[href$=".tar"].user_link, a[href$=".rar"].user_link, body div a.archive_link {
		background: url('{$IMG;,icons/16x16/filetypes/page_archive}') no-repeat right top;
		padding: 0 22px 5px 0;
	}

	a[href$=".asf"].user_link, a[href$=".ra"].user_link, a[href$=".wma"].user_link, a[href$=".wav"].user_link, a[href$=".mp3"].user_link, a[href$=".ogg"].user_link, a[href$=".mid"].user_link, a[href$=".mov"].user_link, a[href$=".qt"].user_link, a[href$=".wmv"].user_link, a[href$=".ram"].user_link, a[href$=".rm"].user_link, a[href$=".avi"].user_link, a[href$=".mpg"].user_link, a[href$=".mpe"].user_link, a[href$=".mpeg"].user_link, a[href$=".mp4"].user_link, a[href$=".webm"].user_link, body div a.media_link {
		background: url('{$IMG;,icons/16x16/filetypes/page_media}') no-repeat right top;
		padding: 0 22px 5px 0;
	}

	body a.link_exempt, body .link_exempt_wrap a, body a[href*=".php"]:not(.force_filetype_icon).user_link, a[rel="lightbox"] { /* Turn off the "new window" icon for URLs containing ".php" because usually in Composr these are used for system pages that don't warrant these icons */
		background-image: none !important;
		padding: 0px !important;
	}

	body a.link_exempt2 {
		background-image: none !important;
	}

	@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
		a[target="_blank"].user_link { /* Detected external links have styling */
			background-image: url('{$IMG;,icons/32x32/filetypes/external_link}');
			background-size: 7px 8px;
		}
		body div a.external_link { /* Explicitly marked external links must show the styling with precedence */
			background-image: url('{$IMG;,icons/32x32/filetypes/external_link}');
			background-size: 7px 8px;
		}

		a[href^="mailto:"] {
			background-image: url('{$IMG;,icons/32x32/filetypes/email_link}');
			background-size: 16px 16px;
		}

		a[href$=".pdf"].user_link, a[href$=".ps"].user_link, body div a.pdf_link {
			background-image: url('{$IMG;,icons/32x32/filetypes/page_pdf}');
			background-size: 16px 16px;
		}

		a[href$=".doc"].user_link, a[href$=".docx"].user_link, a[href$=".rtf"].user_link, body div a.doc_link {
			background-image: url('{$IMG;,icons/32x32/filetypes/page_doc}');
			background-size: 16px 16px;
		}

		a[href$=".xls"].user_link, a[href$=".xlsx"].user_link, body div a.xls_link {
			background-image: url('{$IMG;,icons/32x32/filetypes/page_xls}');
			background-size: 16px 16px;
		}

		a[href$=".ppt"].user_link, a[href$=".pptx"].user_link, body div a.ppt_link {
			background-image: url('{$IMG;,icons/32x32/filetypes/page_ppt}');
			background-size: 16px 16px;
		}

		a[href$=".log"].user_link, a[href$=".txt"].user_link, body div a.txt_link {
			background-image: url('{$IMG;,icons/32x32/filetypes/page_txt}');
			background-size: 16px 16px;
		}

		a[href$=".odt"].user_link, body div a.odt_link {
			background-image: url('{$IMG;,icons/32x32/filetypes/page_odt}');
			background-size: 16px 16px;
		}

		a[href$=".odp"].user_link, body div a.odp_link {
			background-image: url('{$IMG;,icons/32x32/filetypes/page_odt}');
			background-size: 16px 16px;
		}

		a[href$=".ods"].user_link, body div a.ods_link {
			background-image: url('{$IMG;,icons/32x32/filetypes/page_ods}');
			background-size: 16px 16px;
		}

		a[href$=".rss"].user_link, body div a.feed_link {
			background-image: url('{$IMG;,icons/32x32/filetypes/feed}');
			background-size: 16px 16px;
		}

		a[href$=".torrent"].user_link, body div a.torrent_link {
			background-image: url('{$IMG;,icons/32x32/filetypes/page_torrent}');
			background-size: 16px 16px;
		}

		a[href$=".zip"].user_link, a[href$=".gz"].user_link, a[href$=".bz2"].user_link, a[href$=".tar"].user_link, a[href$=".rar"].user_link, body div a.archive_link {
			background-image: url('{$IMG;,icons/32x32/filetypes/page_archive}');
			background-size: 16px 16px;
		}

		a[href$=".asf"].user_link, a[href$=".ra"].user_link, a[href$=".wma"].user_link, a[href$=".wav"].user_link, a[href$=".mp3"].user_link, a[href$=".ogg"].user_link, a[href$=".mid"].user_link, a[href$=".mov"].user_link, a[href$=".qt"].user_link, a[href$=".wmv"].user_link, a[href$=".ram"].user_link, a[href$=".rm"].user_link, a[href$=".avi"].user_link, a[href$=".mpg"].user_link, a[href$=".mpe"].user_link, a[href$=".mpeg"].user_link, a[href$=".mp4"].user_link, a[href$=".webm"].user_link, body div a.media_link {
			background-image: url('{$IMG;,icons/32x32/filetypes/page_media}');
			background-size: 16px 16px;
		}
	}
/*{+END}*/

/*{+START,IF,{$ADDON_INSTALLED,recommend}}*/
	.print_icon {
		background: url('{$IMG;,icons/24x24/links/print}') no-repeat left top !important;
		padding: 0 0 5px 32px !important;
		display: inline-block;
	}

	@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
		.print_icon {
			background-image: url('{$IMG;,icons/48x48/links/print}');
			background-size: 24px 24px;
		}
	}
/*{+END}*/

a[title="{!VIRTUAL_ROOT}"]:hover {
	color: {$GET,red_highlight_text};
}

/*
=========================
=========Overlays========
=========================
*/

.overlay [role="toolbar"], .overlay .emoticon_chooser, .overlay .posting_rules, .overlay .required_field_warning {
	display: none;
}

.overlay {
	overflow: visible;
	border: 0;
	{$BETA_CSS_PROPERTY,word-wrap: break-word;}
}

.overlay_close_button {
	position: absolute;
	/*{+START,IF,{$MOBILE}}*/
		top: 0;
		right: 0;
	/*{+END}*/
	/*{+START,IF,{$NOT,{$MOBILE}}}*/
		top: -16px;
		right: -16px;
	/*{+END}*/
	cursor: pointer;
}

.overlay img.lightbox_image {
	display: block;
}

.overlay .previous_button, .overlay .next_button {
	position: absolute;
	cursor: pointer;
	top: 43%; /*fallback, IE8/IE9*/
	top: calc(50% - {$DIV,74,2}px);
	max-width: 20%;
}

.overlay .previous_button, .overlay .next_button {
	{$BETA_CSS_PROPERTY,opacity: 0;}
	{$BETA_CSS_PROPERTY,transition-property: opacity;}
	{$BETA_CSS_PROPERTY,transition-duration: 0.5s;}
}
.overlay .previous_button:hover, .overlay .next_button:hover, .overlay.mousemove .previous_button, .overlay.mousemove .next_button, body.touch_enabled .overlay.mousemove .previous_button, body.touch_enabled .overlay.mousemove .next_button {
	{$BETA_CSS_PROPERTY,opacity: 1.0 !important;}
}

.overlay .previous_button {
	left: 1.5em;
}

.overlay .next_button {
	right: 1.5em;
}

#lightbox_meta {
	margin: 0.5em 0;
}

span:not(:empty)+#lightbox_position_in_set:before, span:not(:empty)+#lightbox_full_link:before {
	margin-left: 0.25em;
	content: "\00b7" !important;
	padding-right: 0.5em;
	vertical-align: middle;
}

/*
=========================
=======Print rules=======
=========================
*/

@media print {
	body {
		background: none;
	}

	#main_website_inner {
		width: auto !important;
		margin: 0 !important;
		background: none !important;
		box-shadow: none !important;
		border:0 !important;
	}

	h1 {
		display: none;
	}

	.wide_table_wrap {
		overflow-y: visible !important;
	}

	.global_middle {
		margin: 0 !important;
		padding: 0 !important;
		background: none !important;
	}

	.non_accessibility_redundancy,
	.menu_type__top,
	.buttons_group,
	.associated_links_block_group,
	.screen_actions_outer,
	.adminzone_search,
	.global_banner,
	header,
	footer,
	.global_side_panel,
	.toggleable_tray_button,
	.post_buttons,
	.quick_self_edit_link, .staff_actions,
	.comments_form,
	.ratings, .trackbacks {
		display: none !important;
	}

	.global_navigation {
		visibility: hidden;
	}
}
