/* RESET */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
/* I've commented this out because of something strange with table borders */
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* GENERIC */

html,
body {
   height:100%;
}

body {
	background-color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
}


/* Headings */

.heading, h1, h5 {
	background-color:#181818;
	color:#FFFFFF;
	background-image: url(../images/heading-bg.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	padding:7px 10px 17px 10px;
	text-transform:uppercase;
	font-weight:normal;
	font-family:'Arial Narrow', Arial, Helvetica, sans-serif;
	font-size:14px;
	letter-spacing:1px;
	margin-top:12px;
}

h1 {
	background-color:#ff3333;
}

h2 {
	font-size: 16px;
	font-weight: normal;
	color: #ff3333;
}


p {padding-bottom:3px;}


/* Links */

a:link,
a:visited{
	color: #ff3333;
	text-decoration: none;
}
a:hover,
a:active,
a:focus{
	color: #ff3333;
	text-decoration:underline;
}
a[rel="external"] {
	padding: 0 0 0 10px; 
	background-image:url(../images/icons/rel-external.png);
	background-position:left center;
	background-repeat:no-repeat;
	color:#0178aa;
}

a.more {
	font-weight:bold;
	background-image: url(../images/icons/arrow-bullet.png);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left:8px;
}

a.azexis {
	background-image: url(../images/icons/azexis.png);
	background-position:right center;
	padding: 3px 25px 3px 5px;
	color:#5e5e5e;
	height:20px;
	background-repeat: no-repeat;
}

/* Lists: menu-tabs */

ul.menu-tabs{
	position:absolute;
	left:0px;
	bottom:0px;
	display:block;
	background-image: url(../images/nav-bg.png);
	background-repeat: repeat-x;
	background-position: left bottom;
	width:930px;
}
*html ul.menu-tabs{position:relative; margin-top:-37px;} /* ie6 */

ul.menu-tabs li {
	float:left;
	list-style:none;
	background-image: url(../images/tabs.png);
	background-repeat: no-repeat;
	height:30px;
	padding:2px 0px 5px 0px;
}
ul.menu-tabs li a:link,
ul.menu-tabs li a:visited{
	display:block;
	color:#d1d1d1;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #272727;
	line-height:27px;
	padding:3px 14px 0px 15px;
	text-transform:uppercase;
	font-size:11px;
}

ul.menu-tabs li.active {
	background-position: 0px -37px;
	height:37px;
	padding:0px;
}
ul.menu-tabs li.active a:link,
ul.menu-tabs li.active a:visited{
	color:#000000;
	border-right-color: #FFFFFF;
	line-height:37px;
	padding:0px 37px 0px 38px;
	font-size:12px;
}
ul.menu-tabs li.active a:hover {
	text-decoration:none;
}

.hr {
	height:1px;
	background-color:#f7f7f7;
	margin:15px 1px;
}

.hr hr {
	display:none;
}


/* LAYOUT */

#Page {
	width: 930px;
	margin:0 auto;
	min-height:100%;
	position:relative;
}
*html #Page {height:100%;} /* ie6 */

#Header {
	padding-top:17px;
	position:relative;
}

#Logo {
	float:left;
}

ul.contactList {
	padding-top:15px;
}

ul.contactList li {
	list-style:none;
	float:right;
	text-transform:uppercase;
	color:#757575;
	background-image: url(../images/icons/email.png);
	background-repeat: no-repeat;
	padding:20px 8px 0px 10px;
	background-position: 10px 0px;
}
ul.contactList li a {color:#757575;}
ul.contactList li.phone {background-image: url(../images/icons/phone.png);}

ul.flags {
	position:absolute;
	right:4px;
	bottom:0px;
	height:23px;
}

ul.flags li {
	float:left;
	list-style:none;
	padding:0px 3px 0px 2px;
	height:23px;
}
ul.flags li a img {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}
ul.flags li.active {
	background-image: url(../images/icons/flag-arrow.png);
	background-repeat: no-repeat;
	background-position: center bottom;
}
ul.flags li.active a img,
ul.flags li a:hover img {
	filter:alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity: 1;
	opacity: 1;
}

.banner {
	clear:both;
	background-image: url(../images/banner-bg.jpg);
	position:relative;
	background-color:#d52b2b;
	color:#FFFFFF;
}
.banner img {
	display:block;
	margin-left:143px;
}


.body {
	padding-bottom:50px;   /* Height of the footer */
}

.narrowColumn {
	float:left;
	width:232px;
}

.wideColumn {
	float:left;
	width:446px;
	padding:0px 10px;
}

.halfColumn {
	width:50%;
	float:left;
}

.wideColumn .inner {
	padding:9px 12px;
}
.wideColumn .inner p {
	padding-bottom:6px;
}
.wideColumn .inner ul {
	margin-left:15px;
	margin-bottom:3px;
}
.wideColumn .inner ul li {
	margin-bottom:3px;
}

.leftNav {
	background-image: url(../images/leftNav-bg.jpg);
	background-repeat: repeat-x;
	background-position: left bottom;
}
.leftNav li {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #d8d8d8;
	margin-bottom:1px;
	padding-bottom:1px;
	list-style:none;
	width:232px; /* for ie7 */
}
.leftNav a {
	display:block;
	color:#333333;
	padding:5px 25px;
}
.leftNav a:hover {
	text-decoration:none;
	background-color:#f0f0f0;
}

.leftNav li.active a {
	color:#ff3333;
	background-image: url(../images/icons/arrow-bullet.png);
	background-repeat: no-repeat;
	background-position: 16px center;
}


.leftNav .heading {background-color:#7c7c7c;}

.alpha .heading {background-color:#0098d8;}
.alpha .inner {
	background-image: url(../images/alpha.png);
	background-repeat: no-repeat;
	padding-left:98px;
	background-position: 8px 8px;
}

.getInTouch .heading {background-color:#ff3333;}
.getInTouch .inner { padding-left:25px;}
.getInTouch a {color:#333333;}

.narrowColumn .course {
	padding:10px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #d9d9d9;
}

.narrowColumn .course a[rel="external"] {
	background-image:url(../images/icons/rel-external-red.png);
	color:#ff3333;
}

#Footer {
	background-color:#181818;
	background-image: url(../images/footer-bg.png);
	background-repeat: no-repeat;
	position:absolute;
	bottom:0;
	width:880px;
	height:35px;
	padding:15px 25px 0px 25px;
	color:#5e5e5e;
	line-height:20px;
}


/*

	Clear Fix: clear-after
	---------
	This is really handy!!!
	instead of doing this:
		<div class="float-left"></div>
		<div class="clear"></div>
	do this:
		<div class="float-left clear-after"></div>
*/
	.clear-after:after,
	.clearfix:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
    }
	.clear-after,
	.clearfix{
		display:block;
		zoom:1;
		position:relative;
	}

.clear {clear:both;}
.left {float:left;}
.right {float:right;}

.stdPad {padding:10px;}

.red {color:#FF3333}

.blue {color:#0098D8;}

/* Form */

.contactForm fieldset {
	margin-bottom:15px;
}

.contactForm fieldset.name,
.contactForm fieldset.phone{
	float:left;
	margin-right:20px;
}

.contactForm label {
	display:block;
	padding-bottom:3px;
}

.contactForm input[type=text] {
	padding:2px;
	width:192px;
}

.contactForm select {
	padding:2px;
	width:200px;
}

.contactForm textarea {
	padding:2px;
	width:412px;
	height:100px;
}

.contactForm .button {
	margin-top:10px;
	float:right;
}

.thanks {
	font-weight:bold;
	padding-top:20px;
}