/*
 * #1E2188 is used for our "Dark Blue" colour.
 * #E8F8FF is the page wrapper background colour.
 * #E8E8E8 is shading background for testimonials.
 * All other colours used are "named" colours.
 *
 *
 * Note: To ensure the site is responsive, all horizontal measurements should use % values.
 *
 */

body
{
	margin: 10px 0;					/* Leave a 10px margin at the top, remove the rest. */
	padding: 0;						/* Remove all padding. */
	background-color: gainsboro;
}

body, input, textarea				/* We need to do this because some form elements do not inherit font settings */
									/* and some older browsers do not support inherit. */
{
	color: black;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

	/* All paragraph text defaults to 12pt, black and is left aligned. */
p
{
	color: black;
	font-size: 12pt;
	text-align: left;
}

	/* The default settings for all hyperlinks on the site. */
a:link,
a:visited,
a:active
{
	color: #1E2188;
}

a:hover
{
	color: brown;
}

	/* Helper class for underlining text. */
.underline
{
	text-decoration: underline;
}

	/* Helper class for warning text. */
.warning_text
{
	color: red;
	font-weight: bold;		
}

	/* Helper class used when displaying the results of Form Submission. */
.info_sent
{
	color: red;
	font-weight: bold;
	text-align: center;
}

	/* Helper class for displaying large images. */
.large_image
{
	margin: 0;
	width: 1024px;
	height: 768px;
}	

	/* Helper class for paragraphs after right float. */
.float_left
{
	clear: both;
	float: left;	
}

	/* This is required for those browsers which include a border around images as their default (eg. IE8). */
img
{
	border-style:  none;
}

	/* Due to an IE8 bug, we need to assign an id to the noscript element for styling purposes. */
#noscript
{
	color: red;
	font-size: 10pt;
	font-weight: bold;

	position: absolute;				/* We use absolute because IE8 has a "ghost" margin if JS is enabled. */
	margin-top: 5px;
	margin-left: 6%;
	
	padding: 0;
}

	/* Hide the mobile only elements by default so that they do not appear on those browsers which do not support
	 * media queries. */
.mobile_only,
.mobile_menu
{
	display: none;
}	 	

	/* Set the widths of the topmenu, page wrapper and footer section here so that we ensure
	 * they will always match. */
#page_wrapper,
#topmenu_section,
#footer
{
	max-width: 900px;				/* We need to set this so that on wider monitors it does not over-stretch. */
	min-width: 840px;				/* This is the very minimum before the text and images overlap each other. */
	
	margin: 10px auto 0px auto;		/* Centre in the visible area. */
	width: 90%;						/* We use % rather than px for Responsive benefit. */	
}



/*
 * Top navigation menu definitions.
 *
 */

#topmenu_section
{
	font-size: 10pt;				/* Reduce the font for this section. */
	text-align: right;
	padding-right: 20px;
}


#topmenu a,
#topmenu #greeting
{
	border-left-style: solid;
	border-left-width: 1px;
	border-left-color: black;
}

#topmenu a
{
	padding-left: 1em;
	padding-right: 1em;
}

#topmenu #greeting
{
	padding-left: 1em;
	padding-right: 0.5em;
}

#topmenu #logoff
{
	border-left-style: none;
	
	font-weight: bold;
	padding-left: 0;
	padding-right: 0;
}


	/* Remove the border from the first menu item. */
#topmenu a:first-child
{
	border: none;				
}

	/* Ensure that the menu item for the current page appears static. */ 
#topmenu .current_page
{
	color: black;
	font-weight: bold;
	text-decoration: none;
}


	/* This is the base definition for the Page wrapper which is optimized for a desktop browser. 
	 * It will be used by any browser that does not support media queries. eg IE8. */
#page_wrapper
{
	border-radius: 6px;
	background-color: #E8F8FF;
	
	border-style: solid;
	border-color: #1E2188;
	border-width: 1px;

	margin: 20px auto 0px auto;		/* Centre the page wrapper. */
	width: 90%;						/* Use % rather than px for Responsive benefit. */	
		
	overflow: auto;					/* Ensure the page wrapper extends below the content section. */
}

	/*
	 * Adjust the parts of the site for smaller devices, removing elements that are not required.
	 *
	 */
@media screen and (max-device-width: 500px)
{
	#noscript
	{
		margin-left: 35%;
		margin-right: 5%;
		margin-top: 40px;
		text-align: right;
	}
	
	.non_mobile
	{
		display: none;
	}
	
	.mobile_only
	{
		display: inline;
	}
	
	.mobile_menu
	{
		display: block;	
	}
	
	#page_wrapper
	{
		margin-top: 0;
		width: 95%;
		max-width: 95%;
		min-width: 400px;
	}
}


	/*
	 * Header section definitions
	 *
	 */
#header
{
	height: 150px;
	margin: 0 auto 15px auto;		/* This ensures the header section is centered left to right
									 * and includes a 15px bottom margin as per the spec. */
	padding-top: 20px;
	padding-bottom: 20px;
	width: 100%;
	
	text-align: center;
}

	/* Definition of the Contact Details section. */
#contact_details
{
	text-align: right;				/* We want the all contents to be right aligned. */
	margin-right: 5.5%;				/* But include a margin so it is not against the page wrapper. */
}

	/* Set the contact details text properties. */
#contact_details .contact_text_left,
#contact_details .contact_text_right
{
	font-size: 8pt;
	font-weight: bold;
	padding-right: 2.5%;
}

	/* Adjust the Contact Details for smaller devices. */
@media screen and (max-device-width: 500px)
{
	#header
	{
		padding-top: 10px;			/* Reduce the space at the top of the page wrapper. */
		padding-bottom: 5px;		/* Reduce the space between the header and the menu. */
	}
	
	#contact_details
	{
		text-align: justify;
		margin-left: 0;
		margin-right: 0;
	}
	
	#contact_details .contact_text_left
	{
		float: left;
		text-align: left;
		margin-left: 4%;
		padding: 0;
	}

	#contact_details .contact_text_right
	{
		float: right;
		text-align: right; 
		margin-right: 6%;
		padding: 0;
	}
}

.phone_icon
{
	display: inline-block;			/* This stops the element collapsing. */

	background-image: url("../images/phone.png");
	background-image: none, url("../images/phone.svg");
	background-size: 100% 100%; 
	background-repeat: no-repeat;
	
	vertical-align: middle;			/* Ensure the image is aligned correctly with the text. */

	width: 32px;
	height: 32px;
	
		/* These are fixes for IE8 so that it rescales the png image. Note that it does not work with IE7. */
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/phone.png', sizingMethod='scale')";
}

.email_icon
{
	display: inline-block;			/* This stops the element collapsing. */

	background-image: url("../images/email.png");
	background-image: none, url("../images/email.svg");
	background-size: 100% 100%;
	background-repeat: no-repeat;

	vertical-align: middle;			/* Ensure the image is aligned correctly with the text. */
	
	width: 32px;
	height: 32px;

		/* This is a fix for IE8 (it does not work for IE7) - due to a rescaling bug with email.png we use one sized at 32x32. */
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/email_small.png', sizingMethod='scale')";
}


	/*
	 * This defines the section which contains the main navigation menu.
	 *
	 * Note: Because the menu items will be dynamic, we cannot use float and keep the menu items centred as that
	 *		 method requires us to hard code the width of the menu.
	 * 		 Therefore we set the font size to 0 to remove all space between the elements and then reset the font for
	 *		 each menu item.
	 *
	 */
	 
#mainmenu
{
	background-color: #1E2188;		/* Colour of the navigation bar. */
	border-radius: 4px;				/* Subtle rounding of the corners. */	

	font-size: 0pt;					/* CSS Trick: Set the fontsize to 0 to remove the space between the menuitems caused */
									/* by the linebreak in the HTML. */
									
	font-weight: bold;				/* Ensure the menu items are in bold. */

	margin: auto;					/* This ensures that the menu is centred. */
	text-align: center;				/* Ensure that the menu items are centred. */			
	width: 89%;						/* Set the width of the navigation bar. */
}

#mainmenu ul,
#mainmenu ul ul
{
	list-style: none;
	margin: 0 auto;					/* Remove the top margin */
	overflow: hidden;
	padding-left: 0;
}

	/* This ensures that the menu items are displayed horizontally. */
#mainmenu ul li
{
	display: inline-block;
}

#mainmenu ul li a,
#mainmenu ul li ul span
{
	background-color: #1E2188;		/* Set to the colour of the navigation bar. */
	
	border-width: 0;				/* Remove the borders. */
	color: white;
	display: block;
	
	text-decoration: none;

		/* Show just a slither of the navigation bar above and below the menu item. */
	margin-top: 0.2em;
	margin-bottom: 0.2em;
	
		/* The following puts some whitespace around the menu item. */
	padding-top: 0.25em;
	padding-bottom: 0.25em;
	padding-left: 0.75em;
	padding-right: 0.75em;

	font-size: 11pt;				/* Set the font size for the menu item (as per the CSS trick in mainmenu definition). */
}	 

#mainmenu ul a:hover,
#mainmenu ul a:focus,
#mainmenu ul a:active,
#mainmenu .current_page
{
	background-color: dodgerblue;
	color: white;
}


	/*
	 * The Mobile cascading menu definitions.
	 *
	 */ 

#mainmenu ul li:hover ul
{
	left: auto;
	font-size: 11pt;				/* Set the font size for the submenu item (as per the CSS trick in mainmenu definition). */
}

#mainmenu ul li ul
{
	width: 12em;
	position: absolute;
	left: -1000em;
}

#mainmenu ul li ul li
{
	 width: 12em;
}

#mainmenu ul li ul li a,
#mainmenu ul li ul li span
{
	margin: 0;						/* Remvoe the margins are they create empty space between the subitems. */
	text-align: left;
	padding-top: 10px;				/* As these will only appear on the mobile device make them oversized. */
	padding-bottom: 10px;
}

	/* Adjust the mainmenu section for smaller devices. */
@media screen and (max-device-width: 500px)
{
	#mainmenu
	{
		width: 93%;
		height: 40px;				/* Make the menu bar slightly larger to aid touch. */
	}
	
	#mainmenu ul li a
	{
		height: 22px;
		padding-top: 8px;
		font-size: 12pt;		
	}
	
	#mainmenu .menu_heading
	{
		font-size: 12pt;
	}
	
	#mainmenu .indent
	{
		padding-left: 30px;
	}
}


	/*
	 * The Main content section definitions.
	 *
	 */
	 
#content_section
{
	clear: both;
	float: left;
	margin: 0 auto;					/* This ensures the section is centered left to right. */
	min-height: 370px; 				/* This ensures that the footer is towards the bottom of the screen for those
									 * pages where the main content area has minimal text. */
	
	padding-top: 30px;
	padding-bottom: 20px;
	width: 100%;
}

#content_section h1
{
	color: black;
	font-size: 13pt;
	font-weight: bold;
	margin: 0 0 20px 0;
}


	/* This section is where the actual information is displayed. */
#content_no_sidebar,
#content_with_sidebar
{
	background-color: white;
	padding: 10px 10px 0px 10px;

	border-radius: 6px;
	border-width: 1px;
	border-style: solid;
	border-color: lightgrey;
	box-shadow: 2px 2px 2px darkgrey;
	
	min-height: 240px;			/* This prevents the height of content section being less than the sidebar. */
}

#content_no_sidebar
{
	overflow: auto;				/* This forces the section to extend below the content,such as a form - see the Contact Page. */
	
	margin-left: 5.5%;
	margin-right: 5.5%;
}

#content_with_sidebar
{
	float: left;
	margin-left: 5.5%;
	width: 64%;	
}

#content_with_sidebar > p:first-child
{
	margin-top: 0;				/* Remove the top margin of the first paragraph. */
}

#content_no_sidebar h2,
#content_with_sidebar h2
{
	color: dodgerblue;
	padding-top: 5px;
	font-size: 12pt;
	text-decoration: underline;
}

	/* Adjust the content section for smaller devices. */
@media screen and (max-device-width: 500px)
{
	#content_section
	{
		min-height: 0px;			/* Clear the minimum height. */
		margin: 0;					/* Remove the margins. */
		padding-top: 15px;			/* halve the space between the menu and this section. */
	}

	#content_no_sidebar,
	#content_with_sidebar		/* In this scenario, there is no sidebar so make adjustments accordingly. */
	{
		min-height: 0px;
		margin-left: 3.5%;
		margin-right: 4%;
		width: auto;
	}
}

	/*
	 * The following definitions are for the Home Page.
	 *
	 */

#company_logos
{
	margin-bottom: 10px;
}

.logo_left
{
	clear: both;
	float: left;
	text-align: center;

	margin-top: 1px;			/* This fixes an issue with focus rect on FF25. */
	margin-bottom: 10px;

	padding-left: 10%;
	width: 40%;
}

.logo_right
{
	float: right;
	text-align: center;

	margin-top: 1px;			/* This fixes an issue with focus rect on FF25. */
	margin-bottom: 10px;
	
	padding-right: 10%;
	width: 40%;	
}

	/* Make adjustments for smaller devices. */
@media screen and (max-device-width: 500px)
{
	.logo_left,
	.logo_right
	{
		float: none;
		padding: 0;
		margin: 0;
		width: 100%;
	}
}

.amp_logo
{
	display: inline-block;		/* This stops the element collapsing. */

	background-image: url("../images/amp_logo.png");
	background-image: none, url("../images/amp_logo.svg");
	background-size:  100% 100%;
	background-repeat: no-repeat;

	height: 64px;
	width: 145px;
}

.resilium_logo
{
	display: inline-block;		/* This stops the element collapsing. */

	background-image: url("../images/resilium_logo.png");
	background-image: none, url("../images/resilium_logo.svg");
	background-size: 100% 100%;
	background-repeat: no-repeat;	

	height: 64px;
	width: 210px;
}

.hillross_logo
{
	display: inline-block;		/* This stops the element collapsing. */

	background-image: url("../images/hillross_logo.png");
/*	background-image: none, url("../images/hillross_logo.svg");	 Note: No svg image exists yet. */
	background-size: 100% 100%;
	background-repeat: no-repeat;	

	height: 64px;
	width: 200px;
	
	padding: 2px;				/* Slight adjustment for IE8 as it clips the right side of the logo. */
}

.ausure_logo
{
	display: inline-block;		/* This stops the element collapsing. */

	background-image: url("../images/ausure_logo.png");
/*	background-image: none, url("../images/ausure_logo.svg");	Note: No svg image exists yet. */
	background-size: 100% 100%;
	background-repeat: no-repeat;

	height: 64px;
	width: 200px;
	
	padding: 2px;				/* Slight adjustment for IE8 as it clips the right side of the logo. */
}


	/*
	 * The following definitions are for the testimonials Page.
	 *
	 */

.testimonial
{
	background-color: #E8E8E8;
	border-radius: 6px;
	
	font-style: italic;  
	
	line-height: 14pt;			/* This forces the line height so that the last line with the closing quote
								 * is not unevenly spaced. */
	
	margin-left: 5%;
	margin-right: 5%;
	margin-top: 20px;	
	margin-bottom: 20px;
	padding: 5px;
}

.testimonial blockquote
{
	margin: 1.2em 0 1.2em;
	padding: 0 2em 0 2em;
	position: relative;
}

.testimonial blockquote:before
{
	content: "\201C";
	font-size: 2em;
	font-style: normal; 
	font-weight: bold;
	
	position: absolute;
	left: 5px;
	top: 0em;
}

.testimonial blockquote:after
{
	content: "\201D";
	font-size: 2em;
	font-style: normal;	
	font-weight: bold;
	
	position: absolute;
	right: 20px;
	bottom: 0em;
}

.toggle_button
{
	cursor: pointer;
	font-style: normal; 
	text-decoration: underline;
	text-align: right;
	color: #1E2188;
}
	
.hidden_testimony
{
	display: none;
}

.testimony_by
{
	text-align: right;
	margin-right: 5%;
}	

.customer_name
{
	font-size: 11pt;
	font-style: normal;
}

#more_testimonials
{
	margin-left: 38%;
}


	/*
	 * The Following definitions are for the Products: Features Page.
	 *
	 */

#feature_list li
{
	list-style-type: square;
	
	padding-left: 5px;
	padding-right: 5px;	
	padding-bottom: 5px;
}

	/*
	 * The Following definitions are for the Products: Pricing Page.
	 *
	 */

#price_list
{
	margin-left: 2%;
	margin-right: 2%;
}

#price_list .cost
{
	font-weight: bold;			/* Just bold for the moment, but we may want to change the colour. */
}

#price_list .item_price
{
	float: right;
}

@media screen and (max-device-width: 500px)
{
	#price_list .item_price
	{
		float: left;
		margin-bottom: 10px;
	}
}


	/*
	 * The Following definitions are for the Products: Image Gallery Page.
	 *
	 */
	 
#flex_container
{
	margin: 0 auto;
	max-width: 90%;				/* This allows us to control the width of Flexslider. */
}

	/*
	 * The Following definitions are for the Products: Video Page.
	 *
	 */
	 
#video_container
{
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
}
	
#video_container video
{
	width: 100%;				/* This is required for responsiveness. */
}


	/*
	 * The following definitions allow us to style the downloads pages.
	 *
	 */

#subsection
{
	margin: auto auto 20px auto;
	width: 90%;
}

#subsection .first_link,
#subsection .next_link
{
	margin-top: 20px;
	margin-bottom: 0px;
}

#subsection .link_info
{
	margin-top: 5px;
}


	/*
	 * This section contains the Customer Services definitions.
	 *
	 */

#customer_options
{
	margin-top: 30px;
	margin-left: 20%;
}

#customer_options p
{
	font-weight: bold;
}

#customer_options ul
{
	list-style: none;			/* Remove the bullet marks. */
	margin: 0 auto auto 10px;	/* Remove the top margin, set the left margin */
}

#customer_options ul li
{
	margin: 20px auto;
}

	/* Adjust for smaller devices. */
@media screen and (max-device-width: 500px)
{
	#customer_options
	{
		margin-left: 2%;
	}
}


	/*
	 * This section contains the table definitions we use when listing the Licences.
	 *
	 */

#licence_table
{
	font-size: 11pt;
	margin: auto auto 10px auto;
	width: 75%;
}

#licence_table th
{
	padding-bottom: 10px;
	text-decoration: underline;
	vertical-align: top;
	text-align: left;
}

#licence_table .licence_count
{
	text-align: center;
}


	/*
	 * This section contains the definitions when we display an unlock code.
	 *
	 */
#display_code p
{
	text-align: center;
}



	/*
	 * This section contains the table definitions we use when listing Change Requests.
	 *
	 */

#cr_section
{
	max-height: 370px;
	width: 100%;
	overflow: auto;
	margin-bottom: 10px;
}

#cr_table
{
	font-size: 11pt;
	margin: auto auto 10px auto;
	width: 98%;
}

#cr_table tr
{
	vertical-align: middle;
}

#cr_table td
{
	padding-top: 10px;
	padding-bottom: 10px;
}

#cr_table tr:nth-child(even)
{
	background-color: lightgrey;		/* This will not work on IE8 or earlier. */
}

#cr_table th
{
	padding-bottom: 10px;
	text-decoration: underline;
	vertical-align: top;
}

#cr_table .cr_number,
#cr_table .cr_version_released
{
	text-align: center;
	width: 10%;
}

#cr_table .cr_status
{
	text-align: center;
	width: 20%;
}

#cr_table .cr_description
{
	padding-left: 10px;
	padding-right: 10px;
}



	/*
	 * The following definitions are for the Contact Page.
	 *
	 */

#contact_direct
{
	margin: auto;
	width: 90%;
}

#contact_direct .label
{
	clear: both;
	float: left;
	font-weight: bold;
	
	padding-top: 6px;
	width: 40%;
}

#contact_direct .details
{
	float: left;
	padding-top: 6px;
}

#new_paragraph
{
	clear: both;
	float: left;
	
	margin-top: 20px;
	margin-bottom: 20px;
}

	/* Make adjustements for smaller devices. */
@media screen and (max-device-width: 500px)
{
	#contact_direct .label
	{
		width: 35%;	
	}
}


	/* 
	 * The following defitions are to ensure that we standardize the various forms.
	 */


input.userinput_field
{
	height: 22px;
	line-height: 22px;			/* Required to vertically align the text correctly in IE.	*/
}

textarea.userinput_field 
{
	height: 270px;
}

#change_request_form,
#contact_form,
#customer_form,
#login_form,
#trial_download_form,
#unlock_code_form
{
	clear: both;
	margin: auto;
	width: 90%;
}

#change_request_form label,
#contact_form label,
#customer_form label,
#login_form label,
#trial_download_form label,
#unlock_code_form label
{
	clear: both;
	float: left;
	
	font-size: 11pt;
	font-weight: bold;
	
	padding-top: 6px;
	width: 40%;
}

	/* Make some slight adjustments for this form to move the prompts closer to the fields. */
#login_form label
{
	margin-left: 20%;
	width: 20%;
}

#change_request_form .userinput_field,
#change_request_form .userselect_field,
#contact_form .userinput_field,
#customer_form .userinput_field,
#login_form .userinput_field,
#trial_download_form .userinput_field,
#unlock_code_form .userinput_field,
#unlock_code_form .userselect_field
{
	float: left;
	
	background-color: #f6f6f6;
	border: #666666 1px solid;
	padding: 3px;
	
	border-radius: 3px;
	margin-bottom: 10px;
	
	font-size: 11pt;
	width: 58%;
}

	/* Make the selection field slightly wider. */
#change_request_form .userselect_field,
#unlock_code_form .userselect_field
{
	width: 59%;
}

	/* We do not need this field to be so high. */
#unlock_code_form #serialno
{
	height: 100px;
}

	/* We do not need the input field to be as wide as the other forms. */
#login_form .userinput_field
{
	width: 45%;
}

	/* Make adjustements for smaller devices. */
@media screen and (max-device-width: 500px)
{
	#change_request_form label,
	#contact_form label,
	#customer_form label,
	#login_form label,
	#trial_download_form label
	{
		clear: both;	
		width: 100%;
		margin-left: 0;
	}

	#change_request_form .userinput_field,
	#contact_form .userinput_field,
	#customer_form .userinput_field,	
	#login_form .userinput_field,	
	#trial_download_form .userinput_field
	{
		clear: both;
		margin-top: 10px;
		width: 100%;
	}
}

#change_request_form .userinput_field:focus,
#contact_form .userinput_field:focus,
#customer_form .userinput_field:focus,
#login_form .userinput_field:focus,
#trial_download_form .userinput_field:focus
{
	background-color: white;
}



.errorfield
{
	float: left;
	display: none;
	
	color: red;
	font-weight: bold;
	font-size: 10pt;

	margin-left: 40%;	
	margin-top: -8px;			/* We need to do this so that the error message sits just below the input field. */
	margin-bottom: 10px;
}

.submit_button
{
	clear: both;
	float: left;
	background-color: #1E2188;
	border: #1E2188 1px solid;
	border-radius: 3px;	
	color: white;
	
	height: 26px;
	margin-left: 40%;
	margin-bottom: 10px;

	padding-left: 10px;
	padding-right: 10px;
	
	font-weight: bold;
}

.submit_button:hover,
.submit_button:focus
{
	background-color: dodgerblue;
	border-color: dodgerblue;
}

	/* Make adjustements for smaller devices. */
@media screen and (max-device-width: 500px)
{
	.errorfield
	{
		margin-left: auto;	
	}
	
	.submit_button
	{
		margin-left: 42%;		/* This approximately centres the submit button. */
	}
}


	/*
	 * Sidebar section definitions.
	 *
	 */
	 
#sidebar
{
	float: right;
	margin-right: 5.5%;
	
	background-color: whitesmoke;

	padding: 10px 10px 10px 10px;
	width: 18%;

	border-radius: 6px;
	border-width: 1px;
	border-style: solid;
	border-color: lightgrey;
}

#sidebar p,
#sidebar a,
#sidebar .current_page
{
	font-size: 11pt;
}

#sidebar h2
{
	font-size: 11pt;
	font-weight: bold;
}

#sidebar > h2:first-child
{
	margin-top: 0;			/* Remove the top margin of the heading in the sidebar. */	
}

#sidebar ul
{
	list-style: none;			/* Remove the bullet marks. */
	padding-left: 0.5em;
	text-align: left;
}

#sidebar ul li
{
	padding-bottom: 10px;
}

#sidebar .submenu
{
	margin-top: 10px;
	margin-left: 0.5em;
}


#sidebar .current_page
{
	font-weight: bold;
}

 
	/*
	 * Footer section definitions.
	 *
	 */

#footer
{
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 10pt;
	
	text-align: center;
}

#footermenu
{
	margin-top: 5px;
	margin-bottom: 5px;
	width: 100%;
}

#footermenu a,
#footermenu .non_mobile,
#footermenu .customer_only
{
	border-left-style: solid;
	border-left-width: 1px;
	border-left-color: black;
}

#footermenu a
{
	display: inline-block;
	padding-left: 1em;
	padding-right: 1em;

	text-decoration: none;
}

#footermenu a:first-child
{
	border: none;				
}

#footermenu a:hover
#footermenu a:focus,
#footermenu a:active
{
	text-decoration: underline;	
}

#footermenu .current_page
{
	color: black;
	font-weight: bold;
	text-decoration: none;
}

	/* Adjsut the footer for smaller devices. */
@media screen and (max-device-width: 500px)
{
	#footer
	{
		width: 95%;
		max-width: 95%;
		min-width: 400px;
	}
}