@charset "UTF-8";
/* CSS Document */

pre { font-size: 18px; }

/****************************
** MAIN CONTAINERS FOR SITE *
*****************************/
html {
	height: 100%;
	font-family:  Helvetica, Arial, sans-serif
	}

body {
	width: 99.5%;
	height: 100%;
	background-color: #E7EDF7;
	background-image: url(../images/BG-line1.gif);
	background-repeat: repeat-y;
	font-family:  Helvetica, Arial, sans-serif;
	font-size: 62.5%;
	color: #000000;
	padding: 0;
	margin: 0;
	}

#header {
	width: 100%;
	height: 118px;
	margin: 0;	
	padding: 0;
	background-image: url(../images/BG-line2.gif);
	background-position: left;
	background-repeat: repeat-y;
	background-color: #006dbb;
}

#footer {
	width: 890px;
	margin: 10px 0 30px 0;
	padding: 0;
}

#logo { margin: 0 10px 0 60px; }
#phone { margin-left: 545px; }

.white-spacer { 
	width: 100%;
	height: 8px;
	border: 0;
	background-color: #FFFFFF;
	margin: 0;
	padding: 0;
	
}

#top-navigation {
	width: 100%;
	margin: 0px 0px 0px 0px;
	padding: 0;
	background-color: #0078BF;
}

#top-navigation ul {
	list-style-type: none;
	margin: 0px 0px 0px 60px;
	padding: 0px;
}
#top-navigation ul li {
	float: left;	
	text-align: center;	
	margin: 0px 5px;
	padding: 0px;
}
#top-navigation ul li a {
	display: block;
	margin: 5px 0px 0px 0px;
	padding: 0px 15px 18px 15px;
	color: #FFFFFF;	
	font-size: 13px;
	text-decoration: none;
	background-color: #409bce;
	height:20px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#top-navigation ul li a:hover { background-color: #93c2e1; }
#top-navigation ul li a.current { background-color: #FFFFFF; color: #000000; }

#email {
	float: left;
	font-size: 14px;
	text-decoration: none;
	color: #FFFFFF;
	margin: 15px 0 0 115px;
}
#email:hover {
	text-decoration: underline;
}
.text-right { text-align: right; }
#container {
	width: 980px;
}

#left-section, #wide-page { 
	width: 633px; 
	margin: 0 0 0 60px;
	padding: 0;
	float: left;
}
#wide-page { width: 795px; }

#content, #content-full-width, .content {
	/*width: 680px;*/
	width: 880px;
	height: auto;
	min-height:430px;	
	margin: 0;
	padding: 20px;
	background-color: #FFFFFF;
}
#content-full-width {
	width: 880px;	
}
.content { padding: 10px; }

.white-text { color: #FFFFFF; }
.grey-bg, .blue-bg { 
	background-color: #666666; 
	margin: 0;
	padding: 20px;
}
.blue-bg { background-color: #00A3E0; }

#right-section {
	width: 190px;
	float: right;
	margin: 0 0 0 15px;
}
#right-section img { margin-top: 11px;}

#banners {
	float: left;	
	margin: 15px 0 0 0px;
	padding-left:0px;
}
#banners a {
	float: left;
	display:block;
	margin-left:-15px;
	padding-left:0px;
}

a.banner-button {
	display: block;
	background-color: #99F;
	width: 184px;
	margin: 10px 0 0 0;
	padding: 20px 0;
	text-align: center;
	font-size: 2em;
	font-variant: small-caps;
	text-decoration: none;
}
a:hover.banner-button { background-color: #99C; text-decoration: none; }



/******************
** GENERIC STYLES *
*******************/
.pad-lower { margin-bottom: 5px; }
.pad-left { margin-left: 15px; }
.clear-both { clear: both; }
a img { border: 0; }
.float-left { float: left }
.space { display: block; padding-top: 15px; }
.large-text { font-size: 1.8em;}
p { font-size: 1.1em; }
.space-home-images { margin-left: 13px; }
.grey-space { margin-top: 20px; color: #333333; }

.float-right { float: right; }

a.course-promotion {
	background-color: #039;
	color: #FFF;
	display: block;
	padding: 5px;
	text-align: center;
	margin: 20px 0 0 0;
	text-decoration: none;
}
a:hover.course-promotion { text-decoration: none; background-color: #06F; }
a.course-promotion h2 {
	font-size: 1.4em;	
	text-decoration: none;	
}
a.course-promotion p {
	font-size: 1.2em;	
	text-decoration: none;	
}



h1 {
	font-size: 2em;
	font-weight: normal;
	letter-spacing: 0.01em;
	line-height: 1.4em;
}

#content ul { list-style-image: url(../images/bullet-pad.gif); }
#content ul li {
	font-size: 1.5em;
 	line-height: 1.6em;	
}

.resolution {
	text-decoration: none;
	color: #999999;
	text-align: right;
	display: block;
	margin-top: 0;
	font-size: 1em;
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: 0.1em;
}


a {
	color: #3366FF;
	text-decoration: none;
}
a:hover { 	text-decoration: underline; }

blockquote {
	float: left;
	margin: 0;
	font-size: 1.3em;
	letter-spacing: 0.01em;
	line-height: 1.4em;
}

.contact-us-right {
	float: left;
	font-size: 1.6em;
	color: #3366FF;
	margin: 50px 0 0 150px;
	
}
.contact-us-right strong { color: #000000; }




/********************
** Table formatiing *
*********************/
table {
	font-size: 1.1em;
	letter-spacing: 0.01em;
	line-height: 1.5em;
}
thead { text-align: left; }
tr { margin-bottom: 10px; }
td { vertical-align: top; }

table.alt { color: #FFF; }






/************************************************
** Form styling and definition lists for layout *
*************************************************/
dl { font-size: 1.3em; color: #FFFFFF; }
dt {
	width: 100px;
	float: left;
	clear: left;
	line-height: 1.5em;
	text-align: right;
	margin: 0 5px 0 0;	
}
dd {
	float: left;
	margin: 0;
	padding: 0;	
}
.width100 { 
	width: 100px; 
	line-height: 1.5em; 
	text-align: right; 
	padding: 0 5px 0 0; 
}

input { width: 150px; }

.enews-submit { 
	float: right; 	
	color: #FFFFFF;
	padding: 5px;
}
.blue-bg .enews-submit { background-color: #5B61DD }
.grey-bg .enews-submit { background-color: #333333; }


/* SIMPLE FORMAT FORM */
form.simple { 
	font-size: 1em;
	width: 500px;
	margin: 10px; 
}
form.simple fieldset { width: 100%; padding: 10px 0; }
form.simple fieldset legend { font-weight: bold; font-size: 1.2em; }
form.simple label { 
	width: 40%; 
	float: left; 
	clear: left;
	display: block;
	font-weight: bold;
	text-align: right;
	padding: 0 20px 0 0;
	margin: 3px;
}
form.simple input { float: left; width: auto; padding:0; margin:1px 10px 0 0;}
form.simple fieldset br { clear: both; }

p.message {
	color: #990000;
	padding: 5px;
	border: 1px solid #990000;
	width: auto;
}




/*************************************************************************
** Order online - specific layouts for displaing products and ordering page *
**************************************************************************/
.order-page ul {
	width: 100%;
	list-style-type: none;
	margin: 0; padding: 0;
}


.order-page ul li {
	float: left;
	height: 30px;
	background-color: #4089e1;
	color: white;
	padding: 3px;

	font-size: 1.2em;
	line-height: 1.2em;
}


.order-page ol {
    margin: 0px;
    padding: 0px;    
    margin-left: 0px;
    margin-top: 5px;
	margin-right:6px;
	width: 90px;
	float: left;
	list-style-type: none;
	font-size: 1.1em;
	line-height: 1.3em;
}

.order-page ol li {
	font-size: 1.1em;
	line-height: 1.2em;
	width: 80px;
	margin: 0px 0px 8px 0px;
}

.order-page ol.wider {
    margin-left: 10px;
    margin-top: 10px;
	width: 150px;
    margin-left: 5px;
}


.order-page h2 {
	width: 100%;
	margin: 10px 0 0 5px;
	padding: 0 0 5px 0;
	border-bottom: 2px solid #999999;
	font-size: 1.4em;
}

.order-page h3 {
	font-size: 1.5em;
	margin: 7px 0;
}


#order-header {
	clear: both;
}

#order-header h1 {
	float: left;
	margin: 0;
	padding: 0;
}

#order-header a {
	float: left;
	margin: 7px 0 0 20px;
	font-size: 1.2em;
}

#product-search {
	float: right;
	border: 2px solid #0078BF;
	padding: 5px;
	font-size: 1.4em;
	font-weight: bold;	
}

#product-search .button, input.button {
	background-color: #0078BF;
	width: auto;
	color: #FFFFFF;
	font-weight: bold;
	margin: 0 5px;
}
.right { text-align: right }


/*********************
** Product info layout *
**********************/
.product-info {
	width: 550px;
	float: right;
}

.product-info img { float: right; padding: 5px 0 10px 10px; }

.product-info p { 
	font-size: 1.2em; 
	color: #000000; 
	line-height: 1.3em;
}

.product-info ul {
	list-style-image: url(../images/bullet-pad.gif);
	list-style-position:inside;
	width: auto;
	height: auto;
	float: none;
	margin: 0;
	padding: 0;	
}
.product-info ul li {
	float: none;
	width: auto;
	height: auto;
	background-color: #FFFFFF;
	color: #000000;
}

p.prod-code {
	color: #666666; 
	float: left;
}
p.prod-price {
	float: left;
	margin-left: 20px;
}
p.prod-add {
	float: left;
	margin-left: 20px;
	font-weight: bold;
}
p.small-text {
	font-size: 1em;
	float: left;
	clear: both;
	margin: 0;
	padding: 0;
}

.with-lines {
	width: 100%;
	float: left;
	background-image: url(../images/order-page-lines.png);
	background-repeat: repeat-y;
}

ul.sections li {
	width: 85px;
	height: 50px;	
    margin-right: 5px;
    
    cursor: pointer;
}
ul.sections li.no-margin { margin: 0px 3px 0px 0px; }

ul.sections li:hover
{
    background: #5B9AE6;
}


ul.sections li.current
{
    background: #1C60B3;
}

ul.sections li a {
	display: block;
	color: #FFFFFF;
	text-align: center;
    
    text-decoration: none;
}
ul.sections li a:hover,  ul.sections li a.current {
	text-decoration: none;
}

ol li a:hover, ol li a.current {
	color: #333333;
	text-decoration: none;
}


/***** COURSE LISTING *****/
#courses {
	width: 100%;
}


/*********** CUSTOM PROCEDURE PACKS ***************/
table.procedure-pack {
	width: 100%;	
	border: 1px solid #CCC;
	padding: 10px;
}

table.procedure-pack thead tr th {
	border-bottom: 1px solid #CCC;	
}






/***************** BASKET STYLING **********************/
table.basket {
	width: 792px;	
	background-image:url(../images/gm-line.png);
	border-collapse: collapse;
	background-repeat: repeat-y;
	/*border-top: 1px solid #666;
	border-bottom: 1px solid #666;	*/
}
table.basket.totals {
	background-image: none;	
	border-top: none;
	border-bottom: none;
	font-size: 1.4em;
	font-weight: bold;
	margin-top: 30px;
}
.with-borders { border: 1px solid #333; }
table.basket tbody tr td, table.basket thead tr th {
	width: 132px;
	padding: 3px;
	
}
table.basket tbody tr td input {
	width: 70px;
	border: 1px solid #039;
}
table.basket.totals tbody tr td input {
	width: auto;
	margin: 0;
}

.special-message {
	background-color: #333;
	height: 20px;
	padding: 0;
	margin: 0;
	color: #FFF;
}

form.inline {
	display: inline;	
}

/******************** REGISTRATION SECTION ***********************/
div#existing-customer {
	float: left;
	width: 48%;
	border-right: 2px solid #999999;
	padding-right: 10px;
}

div#new-customer {
	float: left;
	width: 48%;
	padding-left: 10px;
}

div#existing-customer h2, div#new-customer h2 {
	border-bottom: none;
}
div#existing-customer p, 
div#new-customer p {
	margin-left: 5px;
}


form.login-form { 
	font-size: 1em;
	width: 90%;
	margin: 10px; 
}

form.login-form fieldset {
	margin-bottom: 20px;
}

form.login-form.indent { margin-left: 30px; }

form.login-form label { 
	width: 40%; 
	float: left; 
	clear: left;
	display: block;
	font-weight: bold;
	text-align: right;
	padding: 0 20px 0 0;
	margin: 3px;
}
form.login-form input { float: left; padding:0; margin:1px 10px 0 0;}
form.login-form form br { clear: both; }

form.login-form .button {
	margin-top: 10px;
}

span.stage {
	display: block;
	margin: -10px 0 20px 0;
	padding: 0;
	color: #666666;
	font-size: 1.3em;
}

div.addressDisplay {
	font-size: 1.2em;
	width: 33%;
	float: left;
}
div.addressDisplay h4 {
	font-size: 1.2em;
	margin: 10px 0 5px 0;
	padding: 0;
}
div.addressDisplay blockquote {
	font-size: 1em;
	margin: 0;
	padding: 0;
}

div#tandcs {
	width: 770px;
	height: 200px;
	overflow:scroll;
	border: 2px solid #999999;
	font-family: "Courier New", Courier, monospace;
	font-size: 1em;
}
div#tandcs p {
	float: none;
}
div#tandcs blockquote {
	float: none;
	clear: both;
	width: 98%;
	font-size: 1.1em;
}

.bordered {
	border: 1px solid #999999;
	margin-right: 40px;
	padding: 10px;
}

ul#account-links { 
	float: right; 
	width: auto;
	height: auto;
	background-color: #FFF;
}
ul#account-links li {
	float: right;
	width: auto;
	height: auto;
	background-color: #FFF;
}
ul#account-links li a {
	color: #FFFFFF;
	padding: 5px 10px;
	background-color: #0078bf;
	width: auto;
	height: auto;
	text-decoration: none;
	border: 1px solid #000;
}
ul#account-links li a:hover {
	background-color: #55a8ff;
}