/* ========== http://positioniseverything.net/easyclearing ==================== */
.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix {
	display:inline-block;
}
/* Hide from IE Mac \*/
.clearfix {
	display:block;
}
/* End hide from IE Mac */

/* * * * * * * * * END: http://positioniseverything.net/easyclearing */

body {
	margin:0 0 1em;
	background-color:#0B8DC6;
	background-image:url(images/bg-body.png);
	min-width:730px;
}
img {
	border:none;
}
p, td, th, li {
	color:white;
	margin:1em 0;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:0.9em;
	line-height:1.5;
}
li {
	margin:0;
}
a {
	text-decoration:none;
	white-space:nowrap;
	color:#FFFF33;
}
/* a:link, a:hover, a:visited, a:active {color:#FF9900;} */
a:hover {
	text-decoration:underline;
}
.centered {
	margin-left:auto;
	margin-right:auto;
}
h1 {
	color:white;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:1.3em;
	line-height:1.0;
	margin:1em 0;
	border-bottom:1px solid #A7D2E3;
	padding-top:20px;
	padding-bottom:15px;
	padding-left:10px;
}
h1.first {
	margin-top:0; /*thanks FF *//* padding-top:20px; /* thanks FF */
}
h1.first a {
	background-color:#4193C2;
	border-width:1px;
	border-style:solid;
	border-top-color:#CCCCCC;
	border-left-color:#CCCCCC;
	border-right-color:#444444;
	border-bottom-color:#444444;
	font-size:0.8em;
	line-height:1.3em;
	vertical-align:middle;
	float:right;
	padding:2px 4px;
	margin-left:1em;
	font-weight:normal;
}
h1.first a:hover {
	text-decoration:none;
	background-color:#53B6F0;
}
#header {
	width:100%;
	height:113px;
	background-image:url(images/bg-header.jpg);
	background-repeat:repeat-x;
	border-bottom:1px solid #A7D2E3;/*	min-width:166px; /* this is where the banner logo hits the right edge of the viewport - no point going any smaller with the main div. not emulated in ie6 and not much use in ie7 which clears the float regardless */
/*	min-width:247px; /* er, yeah, let's be sensible... */
/*	min-width:630px; /* previously the min-width was going on to main, but shove it here and you: 1) still show the off-screen header BG when the screen is very narrow; 2) you can add a min-width conditional AS WELL as the max-width for ie56 - nice! 3) avoids having IE7 clear the main content down below the menu when the min-width was encountered - now it just carries on scaling. Groovy! NB: ie6 still has the potential to behave like a pig when a large screen is reduced in width. However, it's fixed with a refresh and hardly worth worrying about. */
}
#header img {
	position:absolute;
}
#header #testimonial {
	width:280px;
	/* max-width:497px; /* TODO ie6 and ie7 horiz scroll bar */
	height: 73px;
	padding-right:10px;
	position:absolute;
	top:20px;
	left: 480px;
	display: block;
	overflow:auto;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:0.7em;
	font-weight:bold;
	line-height:1.3;
	color:#0A4587;
	white-space:normal;
}
#header a:hover {text-decoration:none;}

#testimonialspage p {padding:10px 0; border-bottom:1px solid #84C8FF; margin:0 -10px;}
#testimonialspage em {color:#FFFFA6;}

#container {
	background-image:url(images/bg-menurepeat.png);
	background-repeat:repeat-y;
}
#menu {
	width:253px;
	min-height:548px; /* IE needs conditional. For swirl bg */
	float:left;
	background-image:url(images/bg-menutop.jpg);
	background-repeat:no-repeat;
	text-align:right;
}
img.wrap {
	float:left;
	clear:left;
}
#menu a {
	display:block;
	margin:0.7em 15px 0.7em 10px; /* yay. does not affect proximity to the wrap imgs, only the div edges */
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:0.8em;
	line-height:1.1;
	color:white;
	font-weight:bold;
	white-space:normal;
}
#menu a:hover, #footer a:hover {
	text-decoration:none;
	color:#00FFFF;
}
#menu a.spacer {
	margin-top:2em;
}
#menu a.yellow {
	/* color:#FFFF00; */
}
#menu a.yellow:hover {
	color:#00FFFF;
}
#menu a.xmas {
	color:#FFFF00;
}
#menu a.xmas:hover {
	color:#00FFFF;
}
#footer {
	border-top:1px solid #A7D2E3;
	clear:both;
	padding:0 1em;
}
#footer span {
	white-space:nowrap;
	margin:0 1em;
}
#footer a {
	color:white;
}
#footer img {
	vertical-align:middle;
}
#main { /* needs width boundaries set. Give IE6(5?) a width setting and it solves the little indent next to the floated menu content. */
	margin-left:254px;
	padding:0 15px 45px;
	/* padding:1px 15px 45px; /* TODO: added sep 2008, think this will fix some probs */
	max-width:717px;/*	min-width:800px; /* DEMO ONLY for IE7 main float clearing issue! */
}
#main p, #main table, #main #photogallery {
	margin-left:30px;
	margin-right:15px;
}
img.right {
	float:right;
	margin-left:15px;
	margin-bottom:15px;
	border-top:1px solid #bbb;
	border-left:1px solid #bbb;
	border-right:1px solid #666;
	border-bottom:1px solid #666;
	padding:0px;
}
.clientlogo {
	float:right;
	clear:right;
	margin-bottom:15px;
	margin-right:15px;
}
table {
	border-collapse:collapse;
}
.newstable td, .newstable th {
	padding:0 2em 2em 0;
	vertical-align:top;/*border-top:1px solid grey;*/
}
.newstable th img {
	margin-top:3px;
	padding:1px;
	border:1px solid #ccc;
}
.newstable p {
	margin:0 0 0.7em;
	font-size:0.95em;
	line-height:1.4;
}
p.newsitemheader {
	font-size:1.1em;
	font-weight:bold;
}
#repertoire th {
	font-size:1em;
	text-align:left;
	padding:1em 0;
}
#repertoire th.first {
	padding:0 0 1em;
}
#repertoire td {
	border-top:1px solid #A7D2E3;
	border-bottom:1px solid #A7D2E3;
	padding:0.15em 1em;
}
#audio th {
	font-size:1em;
	text-align:left;
	padding:1em 0;
}
#audio th.first {
	padding:0 0 1em;
}
#audio td {
	vertical-align:middle;
	border-top:1px solid #A7D2E3;
	border-bottom:1px solid #A7D2E3;
	padding:0.15em 1em;
}
#audio img {
	vertical-align:middle;
}
#engagements td, #engagments th {
	padding:0 0 0.5em;
}
#pricing td {
	padding:0 1em 0 0;
}
#contact {
	float:left;
}
#contact th, #contact td {
	vertical-align:top; /* v-align needed during captcha test */
}
#contact th {
	padding-right:1em;
	text-align:right;
}
#contact th, #contact td {
	padding-bottom:1em;
}
#btImg {
	vertical-align:middle;
}
.verifypanel {
	width:230px;
	color:#111;
	border:1px solid #444;
	padding:15px;
	background-color:#ccc;
	background-image:url(images/antispam.png);
	background-repeat:repeat;
}
.verifypanel input {
	padding:0 7px;
	margin-right:10px;
}
#photogallery {
	line-height:0%;
	font-size:0px;
}
#photogallery img {
	margin: 0 5px 10px;
	border:1px solid black;
}