@media screen {

.hide {
	text-indent: -9999px;
}
/* Use this trick to make elements invisible in CSS-enabled browsers. The element will be visible to users of text browsers, screen readers, etc. The number is randomly chosen as one considered big enough to always keep the object hidden off the screen. */

img {
	border: 0;
	display: block;
}
/* Use this trick to make all images render as block-level elements rather than inline elements. Because block-level elements exist in their own box and are followed by a carriage return. Also declare all image borders as 0 here so we don't have to add the code into all image tags. */
.inline {display: inline;}
/* Use this trick for images that we DO want to display inline */

html{
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-weight: 500;
	background: #fff url(../images/background.gif) top repeat-x;
	text-align: center;
}
/* Restating stuff for html as stated in body: an IE 6.0 fix from xml.com. */
/* Text align left: IE6 Windows bug fix. */

/* Coding short forms: Always clockwise starting at the top: top, right, bottom, left. But, if vertical and horizontal margins are the same, you can group them: top-bottom then left-right. */

body{
	font-size: 80%;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-weight: 500;
	text-align: center;
}
/* Font choices: Tahoma because it was created for online use. Arial for old Windows systems. Helvetica for old Unix systems. Multi-name fonts must be enclosed in quotations. */

p, td, ul, ol, li {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	color: #000;
}
/* Be kind to Netscape 4: Old browsers fail to understand inheritance so we must be more specific for them. */

#wrapper {
	margin:auto;
	width:980px;
	text-align: center;
}
#container{
	border: #666 solid 1px;
	background: #F9FAFE;
	padding: 0;
	text-align: left;
}
#navigation, #navigation_bottom {
	position: relative;
	background: #0A8AB7 url(../images/background_navigation.jpg) top repeat-x;
	text-align: center;
	padding: 1px 0;
}

#slogan {
	position : relative;
	background: #fff url(../images/background_banner.jpg) top center no-repeat;
	height: 170px;
}
#logo {
	position:absolute;
	top:30px;
	left:40px;
	width: 235px;
	height: 95px;
	z-index:0;
	background: #fff url(../images/logo.jpg) top center no-repeat;
}

#middle  {
	position : relative;
	background: #fff url(../images/background_grey.gif) top repeat-x;
	overflow: hidden;
}

#content_full {
	position : relative;
	clear:both;
	width : 95%;
	background: transparent;
	padding: 0 20px 20px 20px;
	vertical-align:text-top;
}

#content_left {
	width: 245px;
	background: transparent url(../images/divider.jpg) top right repeat-y;
	padding: 10px 20px;
	min-height:430px;
	margin-bottom: 10px;
}

#content_right {
	width: 635px;
	float: right;
	vertical-align:text-top;
	background: transparent;
	margin-right: 26px;
	padding-bottom: 20px;
}

#footer {
	position : relative;
	background: transparent;
	text-align: center;
	padding: 5px;
}

h1 {
	text-indent: -9999px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 0;
} /* The Phark trick - Displays a text version of the company name offscreen for text readers. Visual browsers see the logo instead. */

h1 a:link, h1 a:visited	{
	display: block;	
	width: 235px;
	height: 95px;
	background: url(../images/logo.jpg) top center no-repeat;
	}

h2, h3, h4, h5 {
	color: #333;
}

a { text-decoration: underline; }
a:link { color: #026992; }
a:visited { color: #333; }
a:hover { color: #6cf; }
a:active { color: #6cf; }
/* Must use this order LVHA: Link, Visited, Hover, Active. Or some browsers will ignore one or another of them. */

#navigation a, #navigation li { 
	list-style: none;
	display: inline;	
	padding: 0 30px;
	color: #fff;
	text-decoration: none;
	text-transform:uppercase;
}

#navigation_bottom a, #navigation_bottom li { 
	list-style: none;
	display: inline;	
	padding: 0 16px;
	color: #fff;
	text-decoration: none;
}
#navigation a:hover, #navigation_bottom a:hover {
	color: #6ff;
}
#navigation_left a, #navigation_left li, #navigation_left_2 a, #navigation_left_2 li { 
	text-decoration: none;
	font-weight: normal;
	list-style:square;
}
#navigation_left h2, #navigation_left_2 h2 { 
	color: #fff;
	font-size: 115%;
	background:#0a8ab7;
	padding: 3px;
}

#navigation_left p { 
	color: #666;
	padding:5px 0 20px 0;
}

h4.background { 
	color: #fff;
	background:#0a8ab7;
	padding: 3px;
}

ol li, ul li {
	padding-bottom: .75em;
	vertical-align:text-top;
}
ul li, ul.condensed li {
	list-style:square;
}
ol.condensed li, ul.condensed li {
	padding-bottom: 0;
	vertical-align:text-top;
}
#content_right ul.note_condensed li {
	font-size: 90%;
	color:#026992;
	padding-bottom: 0;
	vertical-align:text-top;
	list-style:square;
}
li.indent {
	margin-left: 15px;
}


#content_right p.passagetext {
	font-size: 110%;
}
#content_right p.description {
	font-size: 110%;	
}
#content_right p.about {
	color:#026992;
}
#content_right p.permission {
	font-size: 90%;
	color:#026992;
}
#content_right p.note, #content_right span.note, #content_full span.note, #content_full a.note {
	font-size: 90%;
	color:#026992;
	text-decoration:none;
}

#navigation_left span.note {
	font-size: 90%;
}
#content_right li a.bullet, #content_right li a.bullet:hover, #content_right li a.bullet:visited {
	text-decoration: none;
	color: #000;
}

#slogan p {
	color: #fff;
}
#slogan p.slogan_1 {
	padding: 35px 100px 0 120px;
	font-size: 150%;
	font-weight:bold;
	color: #cff;
	text-align:center;
}
#slogan p.slogan_1 a {
	text-decoration: none;
	color: #cff;
}
#slogan p.slogan_1 a:hover {
	color: #fff;
}
#slogan p.slogan_2 {
	padding: 0 260px 0 290px;
	font-size: 130%;
	font-weight:normal;
	color: #fff;
	text-align:center;
}
#slogan p.slogan_2 a {
	text-decoration: none;
	color: #fff;
	font-weight:normal;
}
#slogan p.slogan_2 a:hover {
	color: #cff;
}

#content_right h2 span.title {
	color:#026992;
	font-size:80%;
}
#content_right h2 span.title a {
	text-decoration: none;
}
#content_right h3.line {
	background: url(../images/divider_horizontal.jpg) top left repeat-x;
	padding-top: 5px;
}
#content_right h3 a {
	text-decoration: none;
	color:#333;
}
#content_right h3 a:hover { color: #6cf; }

#content_right li a.note {
	text-decoration: underline;
}

#testimonial {
	background: #e2fafa;
	padding: 10px;
	text-align:center;
	margin-bottom: 20px;
}
#customers {
	background: #fff;
	padding: 8px;
	text-align:center;
	border: #026992 dotted 1px;	
	margin-bottom: 20px;
}
#testimonial h2, #customers h2 {
	color:#000;
	font-size:90%;
	font-weight:bold;
	text-align:left;
}
#testimonial p, #customers p {
	color:#026992;
	font-size:85%;	
	text-align:left;
}
#testimonial p.signature, #testimonial span.signature {
	font-style:italic;
}
img.logo {
	border: 0;
	display: inline;
	padding: 10px 0;
}
table.logos tr td {
	border: 0;
	vertical-align: middle;
	text-align:center;
}
img.framed {
	border: #999 solid 3px;
	display: inline;
	margin: 3px;
}
p.centred {
	text-align: center;
}
#content_right p.calltoaction, #content_left p.calltoaction {
	text-decoration:none;
	color:#3b5375;
}
div.message {
	float:right;
	clear:both;
	width:245px;	
	margin:10px 0 20px 20px;
	background: #e4e6ea;
	padding: 10px;
}
div.message p {
	color:#060;
}
div.message h3, div.message p {
	text-size: 80%;
	text-align: center;
	color:#090;
}
div.saying {
	float:right;
	width:260px;	
	margin:5px;
	font-size:115%;
	color:#666;
}
div.saying-left {
	float:left;
	width:130px;
}
div.saying-right {
	float:right;
	width:115px;
}
#test_of_day {
	float:right;
	clear:both;
	width:245px;	
	margin:10px 0 20px 20px;
	background: #e4e6ea;
	padding: 10px;
}
#test_of_day h3, #test_of_day p {
	text-size: 80%;
	text-align: center;
	color:#026992;
}
div.note {
	float:right;
	width:245px;	
	margin:10px 0 20px 20px;
	background: #e4e6ea;
	padding: 10px;
}
div.highlighted {
	float:right;
	font-size:100%;
	width:300px;	
	margin-left:5px;
	background: #e4e6ea;
	padding: 10px;
}

span.intro {
	font-weight: bold;
	color:#3b5375;
}

#footer p.slogan {
	color:#069;
}

span.copyright {
	font-size: 85%;	
}
span.copyright a {
	text-decoration: none;
	color:#000;
}
span.copyright a:hover {
	color:#026992;
}




#quickview {
	float:right;
	width:250px;	
	margin-left:10px;
}
#quickview p {
	text-align: center;
}
table tr td.quickview_heading {
	font-weight:normal;
	color:#026992;
	text-align:right;
}
#quickview p.print a {
	text-align: center;
	font-size: 90%;
	color:#999;
	text-decoration:none;
}

table {
	width:100%;
}
table tr td {
	font-size: 90%;
	vertical-align:top;
	padding:4px;
	border: 1px dotted #ccc;
}
table tr.heading td {
	font-weight:bold;
	font-size: 100%;
	color:#026992;
}
table tr td.section {
	font-weight:bold;
	color: #fff;
	font-size: 100%;
	background:#0a8ab7;
}
table tr.heading td a, table tr.heading td a:visited {
	color:#026992;
}
table tr.heading td a:hover {
	color:#6cf;
}
table tr td.title {
	font-size: 100%;
	width: 300px;
}


table.form tr td, table.admin tr td {
	font-size: 100%;
	vertical-align:top;
	padding:4px;
	border: 1px dotted #ccc;
}
table.form tr td.heading, p.heading, table.admin tr td.heading, p.heading {
	color:#026992;
	text-align:left;
}


table.sample {
	width:550px;
}
table.sample tr td {
	font-size: 100%;
	vertical-align:top;
	padding:4px;
	border: 0px;
}
table.sample tr td.survey_number {
	font-weight:bold;
	width: 30px;
}
table.sample tr td.survey_question {
	font-weight:bold;
}
table.sample tr td span.survey_type {
	font-weight: normal;
	color:#026992;
}
table.sample tr td.bordered {
	border: 1px dotted #ccc;
}

.top {
	font-size: 85%;
	text-align:right;
}


hr {
	display: block; 
	clear: all; 
	margin: -0.66em 0; 
	visibility: hidden;
}


}





@media print {

.hide {
	text-indent: -9999px;
}
/* Use this trick to make elements invisible in CSS-enabled browsers. The element will be visible to users of text browsers, screen readers, etc. The number is randomly chosen as one considered big enough to always keep the object hidden off the screen. */

img {
	border: 0;
	display: block;
}
/* Use this trick to make all images render as block-level elements rather than inline elements. Because block-level elements exist in their own box and are followed by a carriage return. Also declare all image borders as 0 here so we don't have to add the code into all image tags. */
.inline {display: inline;}
/* Use this trick for images that we DO want to display inline */

html{
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-weight: 500;
	background: #fff url(../images/background.gif) top repeat-x;
	text-align: center;
}
/* Restating stuff for html as stated in body: an IE 6.0 fix from xml.com. */
/* Text align left: IE6 Windows bug fix. */

/* Coding short forms: Always clockwise starting at the top: top, right, bottom, left. But, if vertical and horizontal margins are the same, you can group them: top-bottom then left-right. */

body{
	font-size: 80%;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-weight: 500;
	text-align: center;
}
/* Font choices: Tahoma because it was created for online use. Arial for old Windows systems. Helvetica for old Unix systems. Multi-name fonts must be enclosed in quotations. */

p, td, ul, ol, li {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	color: #000;
}
/* Be kind to Netscape 4: Old browsers fail to understand inheritance so we must be more specific for them. */

#wrapper {
	margin:auto;
	width:700px;
	text-align: center;
}
#container{
	padding: 0;
	text-align: left;
}
#navigation, #navigation_bottom {
	display: none;
}

#slogan {
	display: none;
}
#logo {
	position:absolute;
	top:30px;
	left:40px;
	width: 235px;
	height: 95px;
	z-index:0;
	background: #fff url(../images/logo.jpg) top center no-repeat;
}

#middle  {
	position : relative;
	background: #fff url(../images/background_grey.gif) top repeat-x;
	overflow: hidden;
}

#content_full {
	position : relative;
	clear:both;
	width : 95%;
	background: transparent;
	padding: 0 20px 20px 20px;
	vertical-align:text-top;
}

#content_left {
	display: none;
}

#content_right {
	width: 635px;
	float: right;
	vertical-align:text-top;
	background: transparent;
	margin-right: 26px;
	padding-bottom: 20px;
}

#footer {
	position : relative;
	background: transparent;
	text-align: center;
	padding: 5px;
}

#credit {
	display: none;
}

h1 {
	text-indent: -9999px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 0;
} /* The Phark trick - Displays a text version of the company name offscreen for text readers. Visual browsers see the logo instead. */

h1 a:link, h1 a:visited	{
	display: block;	
	width: 235px;
	height: 95px;
	background: url(../images/logo.jpg) top center no-repeat;
	}

h2, h3, h4, h5 {
	color: #333;
}

a { text-decoration: underline; }
a:link { color: #026992; }
a:visited { color: #333; }
a:hover { color: #6cf; }
a:active { color: #6cf; }
/* Must use this order LVHA: Link, Visited, Hover, Active. Or some browsers will ignore one or another of them. */

#navigation a, #navigation li { 
	list-style: none;
	display: inline;	
	padding: 0 30px;
	color: #fff;
	text-decoration: none;
	text-transform:uppercase;
}

#navigation_bottom a, #navigation_bottom li { 
	list-style: none;
	display: inline;	
	padding: 0 15px;
	color: #fff;
	text-decoration: none;
}
#navigation a:hover, #navigation_bottom a:hover {
	color: #6ff;
}
#navigation_left a, #navigation_left li, #navigation_left_2 a, #navigation_left_2 li { 
	text-decoration: none;
	font-weight: normal;
	list-style:square;
}
#navigation_left h2, #navigation_left_2 h2 { 
	color: #fff;
	font-size: 115%;
	background:#0a8ab7;
	padding: 3px;
}

#navigation_left p { 
	color: #666;
	padding:5px 0 20px 0;
}

h4.background { 
	color: #fff;
	background:#0a8ab7;
	padding: 3px;
}

ol li, ul li {
	padding-bottom: .75em;
	vertical-align:text-top;
}
ul li, ul.condensed li {
	list-style:square;
}
ol.condensed li, ul.condensed li {
	padding-bottom: 0;
	vertical-align:text-top;
}
#content_right ul.note_condensed li {
	font-size: 90%;
	color:#026992;
	padding-bottom: 0;
	vertical-align:text-top;
	list-style:square;
}
li.indent {
	margin-left: 15px;
}


#content_right p.passagetext {
	font-size: 110%;
}
#content_right p.description {
	font-size: 110%;	
}
#content_right p.about {
	color:#026992;
}
#content_right p.permission {
	font-size: 90%;
	color:#026992;
}
#content_right p.note, #content_right span.note, #content_full span.note, #content_full a.note {
	font-size: 90%;
	color:#026992;
}
#navigation_left span.note {
	font-size: 90%;
}
#content_right li a.bullet, #content_right li a.bullet:hover, #content_right li a.bullet:visited {
	text-decoration: none;
	color: #000;
}

#slogan p {
	color: #fff;
}
#slogan p.slogan_1 {
	padding: 35px 100px 0 120px;
	font-size: 150%;
	font-weight:bold;
	color: #cff;
	text-align:center;
}
#slogan p.slogan_1 a {
	text-decoration: none;
	color: #cff;
}
#slogan p.slogan_1 a:hover {
	color: #fff;
}
#slogan p.slogan_2 {
	padding: 0 260px 0 290px;
	font-size: 130%;
	font-weight:normal;
	color: #fff;
	text-align:center;
}
#slogan p.slogan_2 a {
	text-decoration: none;
	color: #fff;
	font-weight:normal;
}
#slogan p.slogan_2 a:hover {
	color: #cff;
}

#content_right h2 span.title {
	color:#026992;
	font-size:80%;
}
#content_right h2 span.title a {
	text-decoration: none;
}
#content_right h3.line {
	background: url(../images/divider_horizontal.jpg) top left repeat-x;
	padding-top: 5px;
}
#content_right h3 a {
	text-decoration: none;
	color:#333;
}
#content_right h3 a:hover { color: #6cf; }

#content_right li a.note {
	text-decoration: none;
}

#testimonial {
	background: #e2fafa;
	padding: 10px;
	text-align:center;
	margin-bottom: 20px;
}
#customers {
	background: #fff;
	padding: 8px;
	text-align:center;
	border: #026992 dotted 1px;	
	margin-bottom: 20px;
}
#testimonial h2, #customers h2 {
	color:#000;
	font-size:90%;
	font-weight:bold;
	text-align:left;
}
#testimonial p, #customers p {
	color:#026992;
	font-size:85%;	
	text-align:left;
}
#testimonial p.signature, #testimonial span.signature {
	font-style:italic;
}
img.logo {
	border: 0;
	display: inline;
	padding: 10px 0;
}
table.logos tr td {
	border: 0;
	vertical-align: middle;
	text-align:center;
}
img.framed {
	border: #999 solid 3px;
	display: inline;
	margin: 3px;
}
p.centred {
	text-align: center;
}

div.saying {
	float:right;
	width:260px;	
	margin:5px;
	font-size:115%;
	color:#666;
}
div.saying-left {
	float:left;
	width:130px;
}
div.saying-right {
	float:right;
	width:115px;
}

div.note {
	float:right;
	width:245px;	
	margin:10px 0 20px 20px;
	background: #e4e6ea;
	padding: 10px;
}
div.highlighted {
	float:right;
	font-size:100%;
	width:300px;	
	margin-left:5px;
	background: #e4e6ea;
	padding: 10px;
}

span.intro {
	font-weight: bold;
	color:#3B5375;
}


#footer a:hover { 
	color: #069; 
}
#footer p.slogan {
	color:#069;
}
span.copyright {
	font-size: 85%;	
}
span.copyright a {
	text-decoration: none;
}


#quickview {
	float:right;
	width:250px;	
	margin-left:10px;
}
#quickview p {
	text-align: center;
}
table tr td.quickview_heading {
	font-weight:normal;
	color:#026992;
	text-align:right;
}
#quickview p.print a {
	text-align: center;
	font-size: 90%;
	color:#999;
	text-decoration:none;
}

table {
	width:100%;
}
table tr td {
	font-size: 90%;
	vertical-align:top;
	padding:4px;
	border: 1px dotted #ccc;
}
table tr.heading td {
	font-weight:bold;
	font-size: 100%;
	color:#026992;
}
table tr td.section {
	font-weight:bold;
	color: #fff;
	font-size: 100%;
	background:#0a8ab7;
}
table tr.heading td a, table tr.heading td a:visited {
	color:#026992;
}
table tr.heading td a:hover {
	color:#6cf;
}
table tr td.title {
	font-size: 100%;
	width: 300px;
}


table.form tr td, table.admin tr td {
	font-size: 100%;
	vertical-align:top;
	padding:4px;
	border: 1px dotted #ccc;
}
table.form tr td.heading, p.heading, table.admin tr td.heading, p.heading {
	color:#026992;
	text-align:left;
}


table.sample {
	width:550px;
}
table.sample tr td {
	font-size: 100%;
	vertical-align:top;
	padding:4px;
	border: 0px;
}
table.sample tr td.survey_number {
	font-weight:bold;
	width: 30px;
}
table.sample tr td.survey_question {
	font-weight:bold;
}
table.sample tr td span.survey_type {
	font-weight: normal;
	color:#026992;
}
table.sample tr td.bordered {
	border: 1px dotted #ccc;
}

.top {
	font-size: 85%;
	text-align:right;
}


hr {
	display: block; 
	clear: all; 
	margin: -0.66em 0; 
	visibility: hidden;
}


}