form.whole_page_form fieldset, form.dialogue_form fieldset, form.side_box_form fieldset {
	border: none;
	padding: 10px;
	margin-top: 2em;
	margin-bottom: 5px;
	clear: right;
}

form.table_form fieldset
{
	padding: 0;
	margin: 0;
	border: none;
}

form.table_form div.form_field input { width: 95% }

form.whole_page_form fieldset legend, form.dialogue_form fieldset legend, form.side_box_form fieldset legend {
	color: #7F8B42;
	font-size: medium;
	font-weight: bold;
	margin-left: -10px;
}

form.form_hidden_fieldset fieldset {
	margin: 0;
	padding: 0;
}

form.form_hidden_fieldset fieldset legend {
	display: none;
}

form.whole_page_form div, form.dialogue_form div, form.side_box_form div {
	clear: left;
	display: block;
	margin: 5px 0 0;
	padding: 1px 3px 0 0;
}

form.whole_page_form div.form_field:after, form.whole_page_form fieldset:after,
form.dialogue_form div.form_field:after, form.dialogue_form fieldset:after,
form.side_box_form div.form_field:after, form.side_box_form fieldset:after {
	content: ".";
	display: block;
	height: 0;
	clear: left;
	visibility: hidden;
}

form.whole_page_form div, form.whole_page_form fieldset, form.dialogue_form div, form.dialogue_form fieldset,
form.side_box_form div, form.side_box_form fieldset {
	display: inline-block;
}

/* Hides from IE-mac \*/
* html form.whole_page_form div, * html form.whole_page_form fieldset, * html form.dialogue_form div, * html form.dialogue_form fieldset,
* html form.side_box_form div, * html form.side_box_form fieldset
{height: 1%;}
form.whole_page_form div, form.whole_page_form fieldset, form.dialogue_form div, form.dialogue_form fieldset,
form.side_box_form div, form.side_box_form fieldset
{display: block;}
/* End hide from IE-mac */


form.whole_page_form div.form_footer, form.whole_page_form div.form_header, form.dialogue_form div.form_footer, form.dialogue_form div.form_header,
form.side_box_form div.form_footer, form.side_box_form div.form_header {
	text-align: center;
	width: auto;
	direction: rtl; /* so that we can put the default button first in the markup, but have it displayed last */
}

form.whole_page_form div.form_footer *, form.whole_page_form div.form_header *,
form.dialogue_form div.form_footer *, form.dialogue_form div.form_header *,
form.side_box_form div.form_footer *, form.side_box_form div.form_header * {
	direction: ltr;
}

form.whole_page_form div.form_header, form.dialogue_form div.form_header, form.side_box_form div.form_header { margin-bottom: 15px }
form.whole_page_form div.form_footer, form.dialogue_form div.form_footer { margin-top: 2em }
form.side_box_form div.form_footer { margin-top: 1em }
form.dialogue_form div.form_footer, form.side_box_form div.form_footer { text-align: center }

form.whole_page_form div.form_header input, form.whole_page_form div.form_footer input,
form.dialogue_form div.form_header input, form.dialogue_form div.form_footer input,
form.side_box_form div.form_header input, form.side_box_form div.form_footer input { margin: 0 3px }

form.table_form div.form_footer, form.table_form div.form_header
{
	margin-top: 7px;
	margin-bottom: 7px;
	text-align: right;
}

form.table_form label, form.table_form div.form_field_checkbox label span { display: none }
form.table_form div.form_field_checkbox label { display: block }

form.centre_buttons div.form_footer, form.centre_buttons div.form_header {
	text-align: center;
	width: auto;
	direction: rtl; /* so that we can put the default button first in the markup, but have it displayed last */
}

form.whole_page_form label, form.dialogue_form label, form.side_box_form label {
	display: block;
	float: left;
	padding: 3px 5px;
	margin: 0;
	color: #F59836;
	font-weight: bold;
}

form.side_box_form label { margin: 0 10px 5px 0 }

form.whole_page_form label, form.whole_page_form .form_field_checkbox label span { width: 140px }
form.dialogue_form label { width: 127px }
form.side_box_form label { width: 70px }
form.whole_page_form .form_field_checkbox label { width: auto }
form.whole_page_form .form_field_checkbox label span { display: inline-block }

form.whole_page_form .form_error label, form.dialogue_form .form_error label, form.side_box_form .form_error label {
	color: red;
}

form.dialogue_form .form_field, form.side_box_form .form_field { font-size: 16px }

form.whole_page_form div.form_field_radio, form.dialogue_form div.form_field_radio, form.side_box_form div.form_field_radio {
	display: inline;
	margin: 0 2px 0 0;
	padding: 0;
	float: left;
	clear: none;
}

form.whole_page_form div.form_field_radio label, form.dialogue_form div.form_field_radio label, form.side_box_form div.form_field_radio label {
	font-size: 12px;
	font-weight: normal;
	color: #000;
	display: inline;
	float: none;
	width: auto;
}

form.whole_page_form div.form_field_radio label input, form.dialogue_form div.form_field_radio label input, form.side_box_form div.form_field_radio label input,
form.whole_page_form div.form_field_checkbox label input, form.dialogue_form div.form_field_checkbox label input, form.side_box_form div.form_field_checkbox label input,
form.whole_page_form div.form_field_radio label > span, form.dialogue_form div.form_field_radio label > span, form.side_box_form div.form_field_radio label > span,
form.whole_page_form div.form_field_checkbox label > span, form.dialogue_form div.form_field_checkbox label > span, form.side_box_form div.form_field_checkbox label > span {
	vertical-align: middle;
	padding: 0;
	margin: 0 0.3em 0 0;
}

form.whole_page_form fieldset div.help {
	float: right;
	font-size: 12px;
	width: 14em;
	max-width: 190px;
	height: auto;
	margin: 0 0 5px 10px;
	padding: 1em;
	border-radius: 5px;
	border: 1px solid #F59836;
	color: #666666;
}

form.whole_page_form fieldset div.help h4 {
	padding: 0 0 0.5em 0;
	color: #7F8B42;
	text-align: left;
	font-size: 12px;
	margin-bottom: 0;
	margin-top: 0;
}

form.whole_page_form fieldset div.help p {
	margin: 6px 0;
	font-size: 12px;
}

form.whole_page_form .form_field p.error, form.dialogue_form .form_field p.error, form.side_box_form .form_field p.error
{
	background: none;
	border: none;
	color: red;
	padding: 0 0 0.5em 0;
	font-size: 13px;
	font-weight: bold;
}

form.whole_page_form .form_field p.error a, form.dialogue_form .form_field p.error a, form.side_box_form .form_field p.error a { color: #f2a85a }

form.whole_page_form div.error, form.dialogue_form div.error, form.side_box_form div.error
{
	padding-top: 3px;
	border: 0;
	background-color: #cc6358;
	background-image: url(/images/error.png);
	background-repeat: no-repeat;
	background-position: right;
	color: #FFFFFF;
	font-weight: bold;
	height: 21px;
}

form.whole_page_form .input_description, form.dialogue_form .input_description, form.side_box_form .input_description {
	color: #000;
	margin-top: 3px;
	font-size: 0.7em;
}

form.whole_page_form .input_description a, form.dialogue_form .input_description a, form.side_box_form .input_description a {
	color: #7F8B42;
	font-weight: normal;
}

form.form_no_introduction .form_introduction, form.form_no_required_introduction .form_required_introduction { display: none }

form.whole_page_form div.form_field, form.dialogue_form div.form_field, form.side_box_form div.form_field {
	background-repeat: no-repeat;
	padding: 3px 0 1px 0;
}

form.whole_page_form div.form_field { background-position: 427px 7px }
form.dialogue_form div.form_field { background-position: right 7px }
form.side_box_form div.form_field { background-position: 210px 7px }

form.whole_page_form div.form_field.form_error, form.dialogue_form div.form_field.form_error, form.side_box_form div.form_field.form_error {
	background-image: url(/images/form_field_error.png);
}

form.whole_page_form div.form_field_required, form.dialogue_form div.form_field_required, form.side_box_form div.form_field_required {
	background-image: url(/images/form_field_required_marker.png);
}

#wrapper.single_column form.whole_page_form div.form_field_required { width: auto }

form.whole_page_form div.form_field_required.form_field_radio_group,
form.dialogue_form div.form_field_required.form_field_radio_group, form.side_box_form div.form_field_required.form_field_radio_group { background: none }

form.dialogue_form .form_introduction, form.side_box_form .form_introduction {
	margin-bottom: 0.8em;
	font-size: 14px;
}

form.dialogue_form .form_required_introduction, form.side_box_form .form_required_introduction { margin-bottom: 1.3em }

form.whole_page_form .form_required_introduction, form.dialogue_form .form_required_introduction, form.side_box_form .form_required_introduction {
	background-image: url(/images/form_field_required_marker.png);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 20px;
	font-size: 0.9em;
}

form.table_form .form_required_introduction { display: none }

form.whole_page_form input[readonly="readonly"].required, form.dialogue_form input[readonly="readonly"].required, form.side_box_form input[readonly="readonly"].required {
	background-color: transparent;
}

form.whole_page_form input.required_nohighlight, form.dialogue_form input.required_nohighlight, form.side_box_form input.required_nohighlight {
	background-color: inherit !important;
}

form.whole_page_form input[type='submit'], form.dialogue_form input[type='submit'], form.centre_buttons input[type='submit'], a.fake_button.fancy_button {
	font-size: 1.7em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	/* Use Arial for all buttons */
	font-family: Arial, 'Open Sans', sans-serif;
}

form.side_box_form input[type='submit'] {
	font-size: 1.4em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	font-weight: normal;
}

form.dialogue_form input[type='submit'] { padding: 0.75em 1em }

form.whole_page_form .summaryTable
{
	width: 350px;
	margin-left: auto;
	margin-right: auto;
	border: solid 2px #7f8b42;
	border-collapse: collapse;
}

form.whole_page_form .summaryTable td
{
	border: solid 1px #9fa487;
	padding: 5px;
}

form.whole_page_form .input_description, form.whole_page_form .form_field p.error { margin-left: 150px }
form.dialogue_form .input_description, form.dialogue_form .form_field p.error { margin-left: 140px }
form.side_box_form .input_description, form.side_box_form .form_field p.error { margin-left: 80px }

form.whole_page_form .form_field_checkbox .input_description {
	margin-left: 175px;
	font-size: 12px;
}

form.whole_page_form .form_field input, form.dialogue_form .form_field input, form.side_box_form .form_field input,
form.whole_page_form .form_field textarea, form.dialogue_form .form_field textarea, form.side_box_form .form_field textarea {
	padding: 2px;
	font-size: 13px;
}

form.whole_page_form .form_field input, form.whole_page_form .form_field textarea { width: 260px }
form.whole_page_form .form_field select { max-width: 260px }
form.whole_page_form .form_field.form_field_radio_group input, form.whole_page_form .form_field.form_field_checkbox input { width: auto }
form.whole_page_form .form_field.form_field_postcode input, form.whole_page_form .form_field.form_field_integer input,
form.whole_page_form .form_field.form_field_narrow input { width: 100px }
form.whole_page_form .form_field.form_field_integer_interval select { max-width: 180px }
form.whole_page_form .form_field.form_field_integer_interval input { width: 80px }

form.whole_page_form div.form_field.form_field_postcode, form.whole_page_form div.form_field.form_field_integer,
form.whole_page_form div.form_field.form_field_narrow {
	background-position: 267px 7px;
}

form.whole_page_form div.form_field.form_field_date { background-position: 333px 7px }

form.side_box_form .form_field input, form.side_box_form .form_field textarea, form.side_box_form .form_field select { max-width: 100px }

/* Firefox seems to override the body's font-family for labels. Don't know why. */
form .form_field_radio_group label { font-family: 'Open Sans', Arial, sans-serif }

form.whole_page_form .form_field_captcha, form.dialogue_form .form_field_captcha, form.side_box_form .form_field_captcha { width: auto }

/* Hidden from IE. Why on earth I'm fixing reCaptcha's CSS I don't know... */
form.whole_page_form .form_field_captcha > div .recaptchatable #recaptcha_response_field,
form.dialogue_form .form_field_captcha > div .recaptchatable #recaptcha_response_field,
form.side_box_form .form_field_captcha > div .recaptchatable #recaptcha_response_field { position: static !important }

form.whole_page_form .form_field_captcha { padding-left: 100px }

/* Prevent our form CSS from messing up reCaptcha */
form.whole_page_form .form_field_captcha div, form.dialogue_form .form_field_captcha div, form.side_box_form .form_field_captcha div {
	margin: 0;
	padding: 0;
	width: auto;
	clear: none;
}

form.whole_page_form .form_field_captcha label, form.dialogue_form .form_field_captcha label, form.side_box_form .form_field_captcha label {
	display: inline;
	float: none;
}

form.whole_page_form textarea, form.dialogue_form textarea, form.side_box_form textarea {
	height: 6em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

#wrapper.single_column form.whole_page_form textarea, #wrapper.single_column form.dialogue_form textarea, #wrapper.single_column form.side_box_form textarea { width: auto }

form.whole_page_form div.form_field_group_dependent, form.dialogue_form div.form_field_group_dependent {
	margin: 0;
	padding: 0;
}

.form_valid
{
	display: none !important;
}

/* Filterer and sorter forms */
form.filterer .form_introduction, form.sorter .form_introduction { display: none }
form.filterer, form.sorter
{
	border: 1px solid #8e9687;
	margin: 3px 0;
}
form.filterer { background-color: #E0EDD6 }
form.sorter { background-color: #edd5e0 }
form.filterer fieldset, form.sorter fieldset { border: none }
form.filterer legend, form.sorter legend
{
	font-size: 1.3em;
	font-weight: bold;
	padding: 0;
	margin: 2px 0;
	color: #000;
}

form.filterer div.form_field, form.sorter div.form_field
{
	float: left;
	padding-left: 5px;
	padding-right: 5px;
}

form.filterer div.form_footer, form.sorter div.form_footer
{
	padding: 2px 8px;
}

form.filterer label, form.sorter label
{
	display: block;
	font-size: smaller;
}

/* Paginator */
div.paginator {
	clear: both;
	margin-top: 20px;
	margin-bottom: 10px;
	padding: 0 10px;
	text-align: center;
	position: relative;
	overflow: hidden;
}

div.paginator .result_count {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	color: #666;
	text-align: center;
	clear: both;
	margin: 0;
	padding: 0;
}

div.paginator ol.result_navigation {
	list-style: none;
	padding: 0;
	padding-bottom: 0.7em;
	margin: 0;
	position: relative;
	left: 50%;
	float: left;
	text-align: center;
}

div.paginator ol.result_navigation li {
	display: block;
	float: left;
	position: relative;
	right: 50%;
}

div.paginator .current_page, div.paginator li a { padding: 0.2em 0.5em }

div.paginator .page_link.current_page {
	background-color: #F59836;
	color: #FFF;
}

div.paginator .current_page { color: #888 }

div.paginator li {
	border: 1px solid #CCC;
	margin: 0 2px;
	padding: 0;
}

div.paginator li a {
	display: block;
	color: #666;
}

div.paginator li a:hover {
	border-color: #7F8B42;
	color: #fff;
	background-color: #7F8B42;
	text-decoration: none;
}

div.paginator li.first_page_link a:before, div.paginator li.first_page_link.current_page:before { content: "\00ab"; padding-right: 0.4em }
div.paginator li.previous_page_link a:before, div.paginator li.previous_page_link.current_page:before { content: "\2039"; padding-right: 0.4em }
div.paginator li.next_page_link a:after, div.paginator li.next_page_link.current_page:after { content: "\203a"; padding-left: 0.4em }
div.paginator li.last_page_link a:after, div.paginator li.last_page_link.current_page:after { content: "\00bb"; padding-left: 0.4em }

form .form_default_value
{
	color: #777;
}

form.side_box_form div.form_field_checkbox.form_field_tooltip_help label,
form.dialogue_form div.form_field_checkbox.form_field_tooltip_help label {
	float: left;
	width: auto;
	margin-right: 0;
}

form.side_box_form div.form_field_checkbox.form_field_tooltip_help label span,
form.dialogue_form div.form_field_checkbox.form_field_tooltip_help label span {
	display: block;
	float: left;
	margin: 0 10px 5px 0;
}

form.side_box_form div.form_field_checkbox.form_field_tooltip_help label span { width: 80px }
form.dialogue_form div.form_field_checkbox.form_field_tooltip_help label span { width: 127px }

form.side_box_form div.form_field_checkbox.form_field_tooltip_help img.help,
form.dialogue_form div.form_field_checkbox.form_field_tooltip_help img.help {
	float: left;
	padding-top: 3px;
	padding-bottom: 3px;
}

form.whole_page_form div.form_field_tooltip_help img.help {
	margin-left: 24px;
	vertical-align: top;
	padding-top: 3px;
	padding-bottom: 3px;
}

/* Vertically align the help image in the middle of checkbox field containers. */
form.whole_page_form div.form_field_checkbox.form_field_tooltip_help { position: relative }
form.whole_page_form div.form_field_checkbox.form_field_tooltip_help img.help {
	padding: 0;
	height: 16px;
	margin-top: -8px;
	position: absolute;
	top: 50%;
	left: 170px;
	margin-left: 0.1em;
}
/* Layout */

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: local('Open Sans'), local('OpenSans'), url(/images/OpenSans.woff) format('woff');
}

body
{
	margin: 0 10px 0 10px;
	font-size: 12px;
	background-color: #F5F5F5 !important;
	font-family: 'Open Sans', Arial, sans-serif;
}

#wrapper {
	width: 984px;
	margin-left: auto;
	margin-right: auto;
	padding: 1em;
	background-color: white;
	border-left: 1px solid #E6E6E6;
	border-right: 1px solid #E6E6E6;
	border-bottom: 1px solid #E6E6E6;
}

#wrapper.thin, #wrapper.thin #main_column_inner { width: auto }
#wrapper.thin #main_column_inner, #wrapper.thin table.big_table, #wrapper.thin table.big_table th { font-size: 12px }

#header
{
	height: 70px;
	margin-bottom: 10px;
	position: relative;
	width: 984px;
}

#header a { font-size: 60px }
#header a img { vertical-align: top }
#header #social_links {
	position: absolute; /* relative to #header */
	top: 0;
	right: 0;
	width: 44px;
}
#header #social_links a {
	display: block;
	font-size: 11px;
	margin-top: 5px;
	margin-left: 8px;
	width: 32px;
}
#header #social_links a:first-child { margin-top: 0 }

#wrapper.mail_wrapper #header { text-align: right }

#menu_wrapper
{
	height: 28px;
	margin: 0;
	margin-bottom: 2em;
	background-image: none;
}

#log_in_menu_entry, #log_out_menu_entry {
	width:100px;
	margin:0 auto;
	position: relative;
}

#main_column
{
	position: relative;
	width: 100%;
	min-height: 77%;
	border-bottom: 1px solid #f3f3f3;
}

#main_column_inner {
	width: 720px;
	padding-left: 10px;
	padding-right: 10px;
	border-right: 1px solid #F3F3F3;
	min-height: 77%;
	font-size: 14px;
	float: left;
}

#wrapper.single_column #main_column
{
	width: auto;
	margin-left: auto;
}

#right_column {
	width: 230px;
	padding-left: 10px;
	float: right;
}

/* Fix for IE6; it seems to add 3px to the width of each column */
* html #main_column { margin-left: 217px }
* html #right_column { margin-left: 17px }

#right_column p { margin-top: 0 }

#footer
{
	clear: both;
	margin-top: 2em;
	height: 15px;
	text-align: center;
	margin-bottom: 0;
	color: white;
	font-size: 10px;
	padding: 5px;
	background-image: none;
}

#footer p, #footer ul
{
	line-height: 15px;
	margin: 0;
	padding: 0;
}

#footer ul#footer_links { float: right; list-style: none }
#footer ul#footer_links li { float: left }
#footer ul#footer_links li:before { content: "|"; padding-left: 3px; padding-right: 3px }
#footer ul#footer_links li:first-child:before { content: ""; padding: 0 }

#footer a { color: white }

.bar_guest, .bar_member {
	background-color: #8b9558;
	background-image: url(/images/background_guests.jpg);
}

.bar_supplier_depot, .bar_tank_depot
{
	background-color: #614ba2;
	background-image: url(/images/background_supplier_depots.jpg);
}

.bar_supplier, .bar_tank_supplier
{
	background-color: #327b8e;
	background-image: url(/images/background_suppliers.jpg);
}

.bar_admin
{
	background-color: #ba321c;
	background-image: url(/images/background_admins.jpg);
}

.read_more_link, .read_less_link {
	text-align: right;
	clear: right;
}
.read_more_link:after { content: " \2192" }
.read_less_link:before { content: "\2190 " }

.divider
{
	width: 75%;
	text-align: center;
	height: 0.5px;
	margin-top: 12px;
	margin-bottom: 6px;
	border-width: 0.25px;
}

/* Links */

a, a:link
{
	color: #f59836;
	text-decoration: none;
	font-weight: bold;
}

a:visited
{
	color: #7f8b42;
	text-decoration: none
}

a:hover
{
	color: #7f8b42;
	text-decoration: underline
}

a img { border-width: 0 }

.link_white, a.link_white, a.link_white:link, a.link_white:visited { color: #ffd }
a.link_white:hover { color: #f59836 }

/* Styling for the link to the current page */
a.current_page { font-style: italic }

html\:abbr, abbr
{
	border-bottom: 1px dashed #000;
	cursor: help;
}

ul { list-style-type: square }
li a { color: #7f8b42 }

p
{
	text-align: left;
	margin-bottom: 5px;
}

/* Open Sans everywhere except in headings and the menu bar. */
h1, h2, h3, h4, h5, h6, #menu_wrapper, .fake_page_heading { font-family: Arial, sans-serif }

h1
{
	color: #f59836;
	font-size: 30px;
	font-weight: lighter;
	margin: 0;
	padding: 0;
}

h2, .fake_page_heading {
	color: #f59836;
	font-size: 30px;
	font-weight: normal;
	margin-bottom: 5px;
	margin-top: 0;
	padding: 0;
}

#subtitle
{
	color: #9e6223;
	font-size: 22px;
	font-weight: lighter;
	margin-bottom: 5px;
	margin-top: 0;
	padding: 0;
}

h3, .main_page_heading
{
	color: #7f8b42;
	font-size: 17px;
	text-align: left;
	margin-bottom: 5px;
}

h4
{
	color: #f59836;
	font-size: medium;
	margin-bottom: 5px;
}

h5
{
	color: #7f8b42;
	font-size: 12px;
	text-align: left;
	margin-bottom: 5px;
	margin-top:0;
}
#vat_band_fields .clearfix{
	height: 0;
}

.clearfix:after
{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix { display: inline-block }

/* Hides from IE-mac \*/
* html .clearfix
{height: 1%;}
.clearfix
{display: block;}
/* End hide from IE-mac */

img { border-style: none }

img.side_image_left, img.side_image_right, div.side_image_left, div.side_image_right {
	margin-top: 1em;
	text-align: center;
}

img.side_image_left, div.side_image_left {
	float: left;
	margin-right: 1em;
}

img.side_image_right, div.side_image_right {
	float: right;
	margin-left: 1em;
}

div.side_image_left p, div.side_image_right p {
	text-align: center;
	font-style: italic;
	font-size: 0.9em;
}

.summary_amount { margin-left: 200px }

table.summary_table
{
	width: 350px;
	margin: 7px 80px;
	border: solid 2px #778338;
	border-collapse: collapse;
	font-size: 11px;
}

table.summary_table td
{
	border: solid 1px #9fa487;
	padding: 5px;
}

table.details_table, table.big_table
{
	border: solid 2px #778338;
	border-collapse: collapse;
	font-size: 13px;
	width: 100%;
}

table.big_table tr.break_row { border-top: solid 2px #778338 }

/* Prevent the table overflowing the main column; use in combination with .constrained_cell */
table.big_table { table-layout: fixed }

table.big_table.zebra_striped tbody tr:nth-child(even) {
	background-color: #f6f6f6;
}

table.big_table td.constrained_cell, table.big_table th.constrained_cell
{
	word-wrap: break-word;
	overflow: hidden; /* fallback for those browsers which don't support the CSS3 word-wrap property yet */
}

table.big_table td, table.big_table th, table.details_table td, table.details_table th
{
	border: solid 1px #9fa487;
	padding: 5px;
}

table.big_table th, table.details_table th
{
	font-size: 14px;
	text-align: left;
}

table.big_table tr.highlighted, table.details_table tr.highlighted { background-color: #f99 }
table.big_table tr.highlighted a, table.details_table tr.highlighted a { color: #000; text-decoration: underline }
table.big_table tr.highlighted_subtle, table.details_table tr.highlighted_subtle { background-color: #DEDEDE }
table.big_table tr.highlighted_subtle2, table.details_table tr.highlighted_subtle2, table.big_table td.highlighted_subtle2 { background-color: #ff6 }
table.big_table tr.highlighted_error, table.details_table tr.highlighted_error, table.big_table td.highlighted_error { background-color: #f00; color: #fff }
table.big_table tr.lowlighted, table.details_table tr.lowlighted { background-color: #dfdfdf }

noscript { display: block }

.error, .message {
	padding: 0.7em;
	color: #FFFFFF;
	margin-top: 1em;
	margin-bottom: 0.8em;
	font-size: 14px;
	background-repeat: no-repeat;
	background-position: 7px 50%;
	padding-left: 42px;
	border-radius: 0.5em;
}

.error {
	background-color: #AE2A2A;
	background-image: url(/images/error.png);
}

.message {
	background-color: #2aae2a;
	background-image: url(/images/tick.png);
}

.message a, .message a:link, .message a:visited
{
	color: #7f7f7f;
	text-decoration: none;
	font-weight: bold;
}

.message a:hover
{
	color: #7f8b42;
	text-decoration: underline
}

#main_column > .message {
	/* For single-column pages, since the #main_column_inner is missing. */
	margin-left: 10px;
	margin-right: 10px;
}

img.help {
	vertical-align: middle;
	margin-left: 0.1em;
	margin-right: 0.1em;
}

blockquote { overflow: auto }
blockquote p:before { content: open-quote }
blockquote p:after { content: close-quote }
blockquote p { font-weight: bold }
blockquote .citation { font-size: 0.8em }

#quote_button_container { margin-top: 1em }
#quote_button { font-size: 2.2em }

#right_column .side_box h2 {
	color: #7f8b42;
	font-size: 17px;
	font-weight: bold;
	text-align: left;
	margin-bottom: 5px;
	margin-top: 1.5em;
	padding-bottom: 5px;
	border-bottom: 1px solid #7F8B42;
}
#right_column .side_box ul, #right_column .side_box ol { padding-left: 18px }
#right_column .side_box li { margin-bottom: 0.5em }

.side_box #trend_graph {
	width: 230px;
	height: 150px;
}

#lead_times_block {
	border: 3px solid #f59836;
	margin: 1em 0;
	padding: 4px;
}

#lead_times_block h3 { margin-top: 0 }
#lead_times_block dl { padding-left: 1em }
#lead_times_block dt:after { content: ": " }

.small_description {
	font-size: 0.9em;
	color: gray;
}

/* Log in box. */
#log_in_container, #log_out_container {
	font-size: 14px;
	line-height: 23px;
	text-align: right;
}

#log_in_container a#log_in_link, #log_out_container a#log_out_link {
	width: 100px;
	background: #F7B11D;
	margin-top: -5px;
	padding: 4px 6px 6px;
	text-decoration: none;
	font-weight: bold;
	color: #fff;
	border-radius: 4px;
	background: -webkit-gradient(linear, left top, left bottom, from(#FAA51A), to(#F47A20));
	background: -moz-linear-gradient(top, #FAA51A, #F47A20);
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

#log_in_container a#log_in_link:hover, #log_out_container a#log_out_link:hover {
	background: #F59836;
}

a#log_in_link, a#log_out_link {
	position: relative;
	margin-left: 3px;
}

a#log_in_link span {
	background-image: url(/images/toggle_down_light.png);
	background-repeat: no-repeat;
	background-position: 100% 50%;
	padding: 4px 20px 6px 0;
}

#log_in_container a.menu-open {
	background: #F59836 !important;
	color: white !important;
	outline: none;
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

a#log_in_link.menu-open span {
	background-image: url(/images/toggle_up_dark.png);
	color: white;
}

#log_in_box {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	display: none;
	background-color: #F59836;
	position: absolute;
	width: 210px;
	z-index: 100;
	border: 1px transparent;
	text-align: left;
	padding: 12px;
	top: 24.5px;
	right: -15px;
	margin-top: 5px;
	margin-right: 0px;
	color: #FFF;
	font-size: 11px;
}

#log_in_box input[type=text], #log_in_box input[type=password] {
	display: block;
	border-radius: 4px;
	border: 1px solid #ACE;
	font-size: 13px;
	margin: 0 0 5px;
	padding: 5px;
	width: 203px;
}

#log_in_box a { color: #6AC }
#log_in_box label { font-weight: normal }

/* Most of this is just to ensure the checkbox and label are vertically aligned together. */
#log_in_form_persist {
	display: inline-block;
	float: right;
	height: 22px;
	margin: 1px 3px 3px 3px;
	width: 120px;
}

#log_in_form_persist label input, #log_in_form_persist label > span {
	vertical-align: middle;
	padding: 0;
	margin: 0 0.3em 0 0;
}

#log_in_form_submit {
	border-radius: 4px;
	background: none;
	background-color: #8B9558;
	border: 1px solid #9BA563;
	color: #fff;
	text-shadow: 0 -1px 0 #9BA563;
	padding: 4px 10px 5px;
	font-size: 11px;
	margin: 0 5px 0 0;
	font-weight: bold;
	width: auto;
}

#log_in_form_submit:hover {
	background: none !important;
	background-color: #A7B369 !important;
}

#log_in_form_submit:hover, #log_in_form_submit:focus {
	background-position: 0 -5px;
	cursor: pointer;
}

#log_in_box ul#log_in_links {
	display: block;
	margin: 13px 3px 3px 3px;
}

#log_in_box ul#log_in_links li {
	border: none;
	background: none;
	float: none;
	line-height: 1em;
	padding: 2px;
}

#log_in_box ul#log_in_links li:hover a {
	background: none;
	color: #fff;
	text-decoration: none;
}

#log_in_box ul#log_in_links li a {
	display: inline;
	line-height: 1em;
	width: auto;
}

#log_in_box ul#log_in_links li a:hover { text-decoration: underline }

/* Form miscellany. */
.tooltip {
	background-color: #F59836 !important;
	border: 1px solid #fff;
	padding: 10px 15px;
	width: 10em;
	display: none;
	color: #fff;
	text-align: left;
	font-size: 12px;
	z-index:2000;

	/* outline radius for mozilla/firefox only */
	-moz-box-shadow: 0 0 10px #000;
	-webkit-box-shadow: 0 0 10px #000;
}

.ui-accordion-header {
	color: #7f8b42;
	font-size: 1.1em;
}

.ui-dialog
{
	background-color: white;
}

.ui-widget-overlay {
	min-height: 100%;
}

.ui-dialog .ui-dialog-titlebar {
	padding: .4em 1em .4em .5em;
	position: relative;
	background: #8B9558 !important;
	font-size: 1.5em;
}

.fancy_button.orange:hover, input[type='submit']:hover {
	background: #F59836 !important;
	background: -webkit-gradient(linear, left top, left bottom, from(#F88E11), to(#F06015));
	background: -moz-linear-gradient(top, #F88E11, #F06015);
}

.fancy_button:hover, input[type='submit']:hover {
	text-decoration: none;
}

.fancy_button.orange, input[type='submit'] {
	color: #FEF4E9;
	border-color: #DA7C0C;
	background: #F78D1D;
	background: -webkit-gradient(linear, left top, left bottom, from(#FAA51A), to(#F47A20));
	background: -moz-linear-gradient(top, #FAA51A, #F47A20);
	font-family: Arial, 'Open Sans', sans-serif;
}

.fancy_button.orange.secondary_button, input[type='submit'].secondary_button {
	background: #F78D1D;
	background: -webkit-gradient(linear, left top, left bottom, from(#fcc162), to(#F8A366));
	background: -moz-linear-gradient(top, #fcc162, #F8A366);
}

.fancy_button.green {
	background-color: #8B9558;
	border-color: #7F8B42;
	color: #FEF4E9;
}

.fancy_button, input[type='submit'] {
	color:#FFFFFF !important;
	display: inline-block;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	border-width: 1px;
	border-style: solid;
	padding: 1em;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

/* tipsy tooltips. */
.tipsy { padding: 5px; position: absolute; z-index: 100000; }
.tipsy-inner { padding: 1em; background-color: #FFA500; color: white; max-width: 200px; text-align: center;}
.tipsy-inner { border-radius: 5px; font-size: 13px }
.tipsy-arrow { position: absolute; background: url(/images/tipsy.gif) no-repeat top left; width: 9px; height: 5px; }
.tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; }
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; }
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; }
.tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; }
.tipsy-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; }
.tipsy a { color: #7F8B42 }

/* Quote/Order amount. */
.quote_amount {
	text-align: center;
	font-size: 300%;
	color: #f59836;
	margin: 0;
	padding: 0;
}

/* Quote/Order summary table. */
table.quote_table {
	width: 100%;
	margin-top: 2em;
	padding-right: 0.5em;
}

table.quote_table th {
	text-align: center;
	color: #7f8b42;
}

table.quote_table td {
	text-align: center;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

table.quote_table tr.quote_row {
	background-color: #7f8b42;
	color: white;
	font-weight: bold;
}

table.quote_table td.total_cell {
	font-size: 1.2em;
}

table.quote_table tr.note_row {
	font-size: 13px;
	text-align: center;
}

table.quote_table tr.note_row td {
	padding-top: 1.5em;
	padding-bottom: 0.8em;
}

table.quote_table a.fancy_button, table.quote_table input[type="submit"] {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	font-size: 0.8em;
	width: 10em;
}

table.quote_table tr.quote_row a.fancy_button, table.quote_table tr.quote_row input[type="submit"] {
	font-size: 1em;
	width: 8em;
}


/* Summary tables on the account details and order confirmation pages. */
table.big_details_table {
	border-collapse: collapse;
	width: 100%;
	margin-bottom: 2em;
	margin-top: 1em;
}

table.big_details_table th, table.big_details_table td {
	vertical-align: top;
}

table.big_details_table th {
	color: #F59836;
	font-weight: bold;
	padding-bottom: 0.5em;
	padding-right: 1em;
	width: 14em;
	text-align: left;
}

table.big_details_table td p {
	margin-top: 0;
	margin-bottom: 1em;
}

table.big_details_table tr.highlighted_subtle2 th { text-decoration: underline }

/* Edit, Add buttons, etc. on the account details page. */
.big_details_buttons, .big_details_heading_button { float: right }
.big_details_heading_button { margin-top: -2em !important /* bring it back up in line with the heading */ }

.big_details_buttons a.fancy_button, .big_details_heading_button a.fancy_button,
form.whole_page_form .big_details_buttons input[type='submit'], form.whole_page_form .big_details_heading_button input[type='submit'] {
	font-size: 0.9em;
	padding-top: 0.25em;
	padding-bottom: 0.25em;
	display: block;
	width: 8em;
}

.big_details_buttons a.fancy_button, form.whole_page_form .big_details_buttons input[type='submit'] { margin-bottom: 0.5em }

table.whole_page_table {
	border-collapse: collapse;
	width: 100%;
}

table.whole_page_table th, table.whole_page_table td {
	font-size: 14px;
	border: 1px solid #F3F3F3;
}

table.whole_page_table td {
	text-align: center;
	vertical-align: middle;
	height: 4em;
}

table.whole_page_table th {
	color: #F59836;
	font-weight: bold;
}

table.whole_page_table tbody tr:nth-child(even) {
	background-color: #FFFFBF;
}

table.whole_page_table tbody tr.cancelled_order {
	background-color: #E8E8E8;
}

table.side_box_table {
	width: 100%;
	margin-bottom: 1em;
}

table.side_box_table th {
	color: #F59836;
	font-weight: bold;
	font-size: 15px;
	width: 6em;
	text-align: right;
	padding-right: 0.4em;
}

table.side_box_table td {
	font-size: 13px;
	text-align: left;
}

.company_details {
	font-size: 0.85em;
	border-top: 1px solid #F3F3F3;
	margin-top: 2em;
}

.highlighted_email_address {
	font-family: monospace;
	color: #F59836;
}

div#contact_email_address {
	margin-top: 3em;
}

div#contact_email_address h3 {
	text-align: center;
	margin-bottom: 2px;
}

div#contact_email_address p {
	font-size: 1.2em;
	text-align: center;
	margin-top: 3px;
}

.urgency_high { background-color: #ff0000; color: #fff }
.urgency_medium { background-color: #ffa500 }
.urgency_low { background-color: #90ee90 }

.order_details_column {
	width: 44%;
	margin-left: 3%;
	margin-right: 3%;
	float: left;
}

.order_details_column .important_row td { font-weight: bold }

.order_details_column .important { background-color: #ff0000 }  /* TODO */

.ui-dialog span.ui-dialog-sub-title {
	display: block;
	font-size: 13px;
	font-weight: normal;
	margin-top: 5px;
}
.text-left {
	text-align: left;
}
.text-center {
	text-align: center;
}
.text-right {
	text-align: right;
}

/* Hide the title on the main page only. */
#main_column h2 { display: none }
#right_column h2 { display: block }

/* Various emphasis classes. */
#main_carousel .big-heading, #main_carousel .medium-heading {
	color: #F59836;
	font-size: 30px;
	font-weight: lighter;
	padding: 0;
}

#main_carousel .big-heading {
	margin: 0 !important;
}

#main_carousel .medium-heading {
	margin-bottom: 5px;
	margin-top: 0 !important;
}

#main_carousel .small-heading {
	color: #8B9558;
	font-size: 20px;
	margin-top: 0.5em !important;
	margin-bottom: 0.2em !important;
	display: block;
}

#main_carousel a.read_more_link { font-size: 0.85em }

/* Carousel. */
#main_carousel_container {
	width: 880px;
	margin-left: auto;
	margin-right: auto;
	padding: 1em;
}

#main_carousel_container ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
}

#main_carousel_container li {
	width: 880px;
	height: 310px;
	padding: 0;
	margin: 0;
	display: block;
	float: left;
	background-color: white;
}

#main_carousel p {
	margin-top: 1em;
	font-size: 14px;
}

#main_carousel li.image_left > div {
	margin-left: 20px;
	margin-right: 5px;
}

#main_carousel li.image_right > div {
	margin-left: 5px;
	margin-right: 20px;
}

#main_carousel_container li > div, #main_carousel_container li > img { float: left }

#main_carousel_pagination {
	margin-top: 1em;
	text-align: center;
}

#main_carousel_pagination a {
	background: url(/images/miscellaneous_sprite.png) 0 -300px no-repeat transparent;
	width: 15px;
	height: 15px;
	margin: 0 5px 0 0;
	display: inline-block;
}

#main_carousel_pagination a.selected {
	background-position: -25px -300px;
	cursor: default;
}

#main_carousel_pagination a span {
	display: none;
}

#main_carousel_prev, #main_carousel_next {
	background: url(/images/miscellaneous_sprite.png) no-repeat transparent;
	width: 45px;
	height: 50px;
	display: block;
	position: absolute;
	top: 140px;
}

#main_carousel_next {
	right: 0;
	background-position: -50px 0;
}

#main_carousel_prev {
	left: 0;
	background-position: 0 0;
}

#main_carousel_next:hover { background-position: -50px -50px; }
#main_carousel_prev:hover { background-position: 0 -50px; }
#main_carousel_prev span, #main_carousel_next span { display: none }

/* Main 'welcome' columns. */
#main_widgets {
	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
}

#main_widgets > div {
	width: 30%;
	position: relative;
	float: left;
	margin-left: 3%;
	margin-top: 1em;
}

#main_widgets > div:first-child {
	margin-left: 2%;
}

#main_widgets .widget-title {
	margin-top: 0;
}

#main_widgets p {
	font-size: 13px;
}

/* Order management. */
.block_link_list {
	display: table;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
}

.block_link_list li {
	color: #fff;
	display: block;
	float: left;
	font-weight: normal;
	height: 110px;
	width: 110px;
	margin: 1em;
	text-align: center;
	font-size: 1.2em;
}

.block_link_list li a {
	color: #fff;
	font-weight: normal;
}

.block_link_list li span.value {
	font-size: 3em;
	display: block;
	width: 100%;
}

#depot_stats_table {
	width: 85%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#depot_stats_table td, #depot_stats_table th {
	border: 1px solid #000;
	color: #000;
	font-size: 12px;
}

#depot_stats_table tbody tr:nth-child(2n) { background: none }

#depot_stats_table td { line-height: 4em }
#depot_stats_table td a {
	color: #000;
	display: inline-block;
	width: 100%;
	height: 100%;
	font-weight: normal;
}

#depot_stats_table td.urgency_high,
#depot_stats_table td.urgency_medium,
#depot_stats_table td.urgency_low,
#depot_stats_table td.urgency_high a,
#depot_stats_table td.urgency_medium a,
#depot_stats_table td.urgency_low a { color: #fff }



.block_link_list li span.value .unit {
	font-size: 0.3em;
}

#depot_stats_table thead th {
	width: 12.5%;
}

#depot_stats_table tbody th {
	font-weight: normal;
}
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/simple_vertical_centered.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

/* Add a margin - for this demo only - and a relative position with a high z-index to make it appear over any element below */
#menu_wrapper {position:relative; z-index:100;}

/* Get rid of the margin, padding and bullets in the unordered lists */
#menu { padding: 0; margin: 0; list-style-type: none; display: table }
#menu ul {padding:0; margin:0; list-style-type: none; display:block;}

/* Hide the sub levels */
#menu li ul {display:none;}

/* Set up the link size, color and borders */
#menu li a, #menu li a:visited {display:inline-block;  width:141px; color:#fff; height:28px; line-height:27px; text-decoration:none; text-align:center;}
.bar_member #menu li a, .bar_member #menu li a:visited { width: 170px }
.bar_supplier_depot #menu li a, .bar_supplier_depot #menu li a:visited { width: 172px }
.bar_supplier #menu li a, .bar_supplier #menu li a:visited { width: 215px }

/* Set up the sub level borders */
#menu li ul li a, #menu li ul li a:visited {border-width:0 1px 1px 1px;}
#menu li a.enclose, #menu li a.enclose:visited {border-width:1px;}

/* Set up the list items */
#menu li {float:left; background-color: transparent; border: none;}
#menu ul li {background-color: #F59836; border-bottom: 1px solid #7f8b42; border-left: 1px solid #7f8b42; border-right: 1px solid #7f8b42;}
#menu li.tc {display:table-cell;}
#menu li.tc:before { content: "|"; color: white; display: inline }
#menu li.tc:first-child:before, #menu li#log_in_menu_entry:before, #menu li#log_out_menu_entry:before { content: ""; display: none }

/* Different background colours for different groups */
.bar_supplier #menu ul li { background-color: #B87FC1; color: #7F178E }
.bar_admin #menu ul li { background-color: #e5afaf; color: #993333 }

/* For Non-IE browsers and IE7 */
#menu li:hover {position:relative;}
/* Make the hovered list color persist */
#menu li:hover > a {background:white; color:#7f8b42;text-decoration:underline;}

/* Different background colours for different groups */
.bar_supplier #menu li:hover > a { background-color: #7F178E; color: #fff }
.bar_admin #menu li:hover > a { background-color: #993333; color: #fff }
/*#menu ul li:hover { border-color: #fff }*/

#menu > li:hover > a { /*background:#F59836;*/background:transparent;text-decoration:underline; color:#fff;}
#menu li.drop:hover > a {background:transparent;}
/* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */
#menu li:hover > ul {display:block; position:absolute; top:-1px; left:80px; padding:0 30px 30px 30px; background:transparent url(/images/blank.gif); width:130px;}
/* Position the first sub level beneath the top level links */
#menu > li:hover > ul {left:-30px; top:28px;}

/* get rid of the table */
#menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

/* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */
* html #menu li a:hover {position:relative;}
* html #menu ul li a:hover {background:white; color:#7f8b42;}

/* For accessibility of the top level menu when tabbing */
#menu ul li a:active, #menu ul li a:focus {background:white; color:#7f8b42;}
#menu li a:active, #menu li a:focus {background:transparent; color:#eee;}

/* Set up the pointers for the sub level indication */
#menu li.fly, #menu li.drop span {background:url(/images/menu_arrow.png) no-repeat right center; padding-right: 15px }

/* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */

/* change the drop down levels from display:none; to visibility:hidden; */
* html #menu li ul {visibility:hidden; display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent url(/images/blank.gif);}

/* keep the third level+ hidden when you hover on first level link */
#menu li a:hover ul ul{
visibility:hidden;
}
/* keep the fourth level+ hidden when you hover on second level link */
#menu li a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the fifth level hidden when you hover on third level link */
#menu li a:hover ul a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the sixth level hidden when you hover on fourth level link */
#menu li a:hover ul a:hover ul a:hover ul a:hover ul ul {
visibility:hidden;
}

/* make the second level visible when hover on first level link and position it */
#menu li a:hover ul {
visibility:visible; left:-30px; top:19px; lef\t:-31px; to\p:20px;
}

/* make the third level visible when you hover over second level link and position it and all further levels */
#menu li a:hover ul a:hover ul{ 
visibility:visible; top:-11px; left:80px;
}
/* make the fourth level visible when you hover over third level link */
#menu li a:hover ul a:hover ul a:hover ul { 
visibility:visible;
}
/* make the fifth level visible when you hover over fourth level link */
#menu li a:hover ul a:hover ul a:hover ul a:hover ul { 
visibility:visible;
}
/* make the sixth level visible when you hover over fifth level link */
#menu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul { 
visibility:visible;
}
/* If you can see the pattern in the above IE5.5 and IE6 style then you can add as many sub levels as you like */