/*
-- Billing Specialists (Edinburgh) Ltd. Style Sheet.
-- =================================================
--
-- Last amended 18th October 2023.
-- 
-- Notes:
-- ------
--
-- 1. On the url("<path">) clase is essential to give the full path i.e. start with "/".
--
*/

/* === Body === */

body
{
    background: black;
    color: white;
    font-family: verdana, times, serif;
    font-size: 12pt;
    margin: 10px;
    padding: 0 0 0 193px;
    text-align: justify;
}

/* === Main Heading - Division name "title" === */

.title
{
	margin: 10px 0 10pt -193px;
	border-top: 3px solid #996633;
	border-bottom: 3px solid #996633;
}

.title table
{
	width: 100%;
    margin: 0;
	border-bottom-style: none;
}

.title table td
{
	padding: 0;
	vertical-align: middle;
}

.title table td.left
{
    color: blue;
	text-align: left;
}

.title table td.centre
{
	text-align: center;
}

.title table td.right
{
    color: blue;
	text-align: right;
}

/* === Navigation Links === */

.navbar
{
	position: absolute;
	width: 160px;
	left: 10px;
	margin: 10px 0 0 0;
	font-family: "Arial", sans-serif;
	font-weight: bold;
	text-align: left;
}

.navbar ul
{
	margin: 0;
	padding: 0;
	list-style: none;
}

.navbar ul li
{
	margin: 0;
	padding: 16px 0 0 0;
	background: url("/images/navigation-vertical.gif") no-repeat;
	font-size: 11pt;
}

.navbar ul li.home
{
	margin: 0;
	padding: 0;
	background: none;
	font-size: 11pt;
}

.navbar ul ul li
{
	margin: 0;
	padding: 1pt 0 1pt 17px;
	font-size: 9pt;
	background: url("/images/navigation-entry.gif") center left repeat-y;
}

.navbar ul ul li.child
{
	margin: 0;
	padding: 0pt 0 0pt 30px;
	font-size: 9pt;
	background: url("/images/navigation-child.gif") center left repeat-y;
}

.navbar ul ul li.end
{
	margin: 0;
	padding: 1pt 0 1pt 17px;
	font-size: 9pt;
	background: url("/images/navigation-final.gif") center left repeat-y;
}

.navbar ul *
{
	text-decoration: none;
}

.navbar ul a:link /* Bright Green - This occurs before 'hover' and 'visited' as 'link' is overridden */
{
	color: #00CC00;

}

.navbar ul a:visited /* Dimmed Green - This occurs before 'hover' as 'visited' is overridden */
{
	color: #009900;
}

.navbar ul a:hover  /* Bright-Orange This occurs after 'visited' as 'hover' needs to override it */
{
	color: #FF4400;
	text-decoration: underline;
}

.navbar p.url {
	font-size: 9pt;
}

.navbar p.strapline {
	font-size: 9pt;
    color: blue;
}

/* === General Styles === */

h1
{
	display: block;
	margin: 16pt 0 10pt 0;
	border-bottom: 2px solid #339900;
	clear: both;
	font-size: 16pt;
	font-weight: normal;
	text-transform: uppercase;
	text-align: left;
}

.navbar + h1
{
	margin-top: 10pt;
}

h2
{
	margin: 10pt 0 10pt 0;
	font-size: 14pt;
	font-weight: bold;
	font-style: italic;
	text-align: left;
}

h3
{
	margin: 10pt 0 10pt 0;
	font-size: 12pt;
	font-weight: bold;
	text-align: left;
}

a
{
	text-decoration: underline;
}

a:link
{
	color: #008800;

}

a:visited
{
	color: #009900;
}

a:active
{
	color: #FF0000;
}

p
{
	margin: 10pt 0;
}

ul
{
	margin: 10pt 0 10pt 24pt;
}

img
{
	border: none;
}

p img
{
	vertical-align: middle;
	margin-right: 5pt;
}

hr
{
	padding: 0;
	color: #339900;
	background-color: #339900;
	border: 0;
	width: 100%;
	height: 2px;
	margin: 10pt 0;
	clear: both;
}

/* === Text Box - Taken from http://www.youtube.com/watch?v=vb4kOXKY3i8 === */

.boxholder {
  float: right;
  height: auto;
  width: 300px;
  margin-left: 15px;
  font-size: 12px;
}

.boxholder p {
  border-left: 2px solid #333;
  border-right: 2px solid #333;
  padding: 10px 15px;
  margin: 0;
  -moz-border-radius-topleft: 12px;
  -moz-border-radius-topright: 12px;
}

.boxtop{
  width: 296px;
  height: 30px;
  border: 2px solid #333;
  background: #CCC;
}

.boxtop h3 {
  background-color: red;
  margin: 0;
  line-height: 30px;
  padding: 0px 15px;
  font-family: Tahoma, Geneva, sans-serif; 
  font-size: 15px;
}

.boxbottom{
  width: 296px;
  height: 10px;
  border-top-width: 2px;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-left-width: 2px;
  border-top-style: none;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #333;
  border-right-color: #333;
  border-bottom-color: #333;
  border-left-color: #333;
  -moz-border-radius-bottomleft: 12px;
  -moz-border-radius-bottomright: 12px;
}


/* === FOR FUTURE USE === */


/* Balloon */

td#balloonTop, td#balloonShape {
    background-repeat: no-repeat;
    background-position: center center;
    height: 80px;
    width: 400px;
    line-height: 90px;
    display: block;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}

td#balloonTop {
    background-image: url(/images/balloon-top.jpg);
}

td#balloonShape {
    background-image: url(/images/balloon-shape.jpg);
}

/* Tables */

table
{
	margin: 10pt auto 10pt auto;
	border-spacing: 0;
	border-bottom: 1px solid black;
}
table th, table td
{
	padding: 1pt 5pt;
	text-align: left;
	vertical-align: top;
}

table tr.soft th, table tr.soft td, table tr th.soft, table tr td.soft
{
	border-top: 2px solid #DDCC88;
}
table tr.hard th, table tr.hard td, table tr th.hard, table tr td.hard
{
	border-bottom: 1px solid black;
}
table.plain
{
	margin: 10pt auto 10pt 0;
	border-bottom-style: none;
}
table.plain th, table.plain td
{
	padding: 1pt 10pt 1pt 0;
	text-align: left;
	vertical-align: top;
}

/* Timetables */
table.timetable
{
	background: #DDCC88;
	margin: 10pt 0 10pt 0;
	border-spacing: 0;
	font-family: "Verdana", "Arial", sans-serif;
	font-size: 9pt;
	border-bottom-style: none;
	clear: left;
}
table.timetable td
{
	border-top: 2pt solid #FFFF99;
	vertical-align: middle;	
}
table.timetable tr:first-child td
{
	border-top-style: none;
}
table.timetable td.name
{
	text-align: left;
	font-weight: bold;
}
table.timetable td.kind
{
	text-align: left;
	font-weight: normal;
	font-style: italic;
}
table.timetable td.time
{
	text-align: center;
	font-weight: normal;
}
table.timetable td.special
{
	background: #99FFFF;
}
table.timetable td.group
{
	border-left: 2pt solid #FFFF99;
}
table.timetable tr.comment
{
	background: #FFFF99;
	font-weight: normal;
	font-style: italic;
}
table.timetable tr.comment td.date
{
	font-weight: bold;
}



/* Photos */
table.photo
{
	margin: 0 -2px 10pt -2px;
	border-spacing: 2px;
	border-bottom-style: none;
}
table.photo.left
{
	margin-right: 10pt;
	float: left;
	clear: left;
}
table.photo.center
{
	margin: 10pt auto;
	clear: both;
}
table.photo.right
{
	margin-left: 10pt;
	float: right;
	clear: right;
}
table.photo td
{
	padding: 0;
	border: 1px solid black;
	text-align: center;
	vertical-align: top;
}
table.photo td.noborder
{
	border-style: none;
}
table.photo td div
{
	padding: 2pt 5pt;
	text-align: left;
	font-size: 10pt;
}
div.photo
{
	margin: 0 10pt 10pt 0;
	padding: 0;
	float: left;
	clear: left;
}
div.photo img
{
	margin: 0;
	border: 1px solid black;
}



/* Shopping basket */
table.basket.summary
{
	margin: 10pt auto 10pt auto;
	float: none;
	border-bottom-style: none;
}
table.basket.summary td.total
{
	padding: 1pt 0 0 0;
	vertical-align: top;
	text-align: right;
}
table.basket.summary td.total span
{
	padding: 1pt 5pt;
	font-weight: bold;
	font-size: 12pt;
	border-bottom: 1px solid black;
}
table.basket.summary td.place
{
	padding: 10pt 5pt 1pt 5pt;
	text-align: center;
	vertical-align: top;
}
table.basket.summary td.place span
{
	vertical-align: top;
	line-height: 24pt;
	font-weight: bold;
	padding-right: 5pt;
}
table.basket
{
	margin: 0 0 10pt 10pt;
	float: right;
	clear: right;
}
table.basket td.left, table.basket td.left *, table.basket th.left, table.basket th.left *
{
	vertical-align: middle;
	text-align: left;
}
table.basket td.right, table.basket td.right *, table.basket th.right, table.basket th.right *
{
	vertical-align: middle;
	text-align: right;
}
table.basket td.center, table.basket td.center *, table.basket th.center, table.basket th.center *
{
	vertical-align: middle;
	text-align: center;
}
table.basket th.text, table.basket td.text
{
	vertical-align: top;
	text-align: left;
}
table.basket th.number
{
	vertical-align: top;
	text-align: right;
}
table.basket td.number
{
	vertical-align: bottom;
	text-align: right;
}
table.basket div
{
	padding-left: 1.5em;
	font-size: 10pt;
}
table.basket .problem
{
	color: red;
}
table.basket span.problem
{
	font-size: 14pt;
}
table.basket td.problem
{
	font-size: 10pt;
	vertical-align: top;
	text-align: left;
}

/* Footer */

.footer
{
	position: absolute;
	width: 160px;
	left: 10px;
	bottom: 0;
	font-family: "Arial", sans-serif;
	font-size: 10pt;
	text-align: left;
	background-color: #FFCC66;
	padding-top: 5pt;
	padding-bottom: 10px;
}
body > .footer /* Hack to keep IE happy */
{
    position: fixed;
}
.footer ul
{
	margin: 0;
	padding: 0 0 0 20pt;
}

.legal /* Company legal statement in the footer */
{
	margin: 10pt 0 0 0;
	padding: 1pt 0 0 0;
	border-top: 2px solid #339900;
	clear: both;
	text-align: right;
	font-size: 8pt;
}

.update /* Page update date in the footer */
{
	margin: 10pt 0 0 0;
	padding: 1pt 0 0 0;
	border-top: 2px solid #339900;
	clear: both;
	text-align: right;
	font-size: 10pt;
}

/* General styles (using in <SPAN CLASS="xxxx">...</SPAN>) */

.attribution
{
	clear: both;
	text-align: center;
	font-family: "Arial", sans-serif;
	font-size: 10pt;
	font-style: italic;
	font-weight: bold;
}

.role, .task, .tool {
  font-style: italic;
}

.problem
{
	color: red;
}

/* Make it printer-friendly */
@media print
{
	body
	{
		background: white none;
		padding-left: 0;
	}
	.title
	{
		background: white none;
		margin-left: 0;
	}
	.navbar
	{
		display: none;
	}
	table.timetable tr td
	{
		border-top: 2px solid white;
	}
	.footer
	{
		display: none;
	}
	h1, h2
	{
		page-break-inside: avoid;
		page-break-after: avoid;
	}
	a:link, a:visited
	{
		color: black;
		text-decoration: none;
	}
	table
	{
		page-break-inside: avoid;
	}
}
line;
}