/*****************************************************************************************
BEGIN basic page layout
******************************************************************************************/
	body,
	html {
		margin:0;
		padding:0;
		color:#000;
		background:#eee;
	}
	#wrap {
		width:840px;
		margin:0 auto;
		background:#99c;
	}
	#nav {
		padding:5px 10px;
		background:#c99;
	}
	#nav ul {
		margin:0;
		padding:0;
		list-style:none;
	}
	#nav li {
		display:inline;
		margin:0;
		padding:0;
	}
	#header {
    	padding:5px 10px;
		background:#ddd;
	}
	h1 {
	    margin:0;
    }
	#main {
		float:right;
		width:620px;
		padding:10px; /* 620 + 10 + 10 = 640 */
		background:#9c9;
	}
	h2 {
		margin:0 0 1em;
	}
	#sidebar {
		float:left;
		width:180px;
		padding:10px; /* 180 + 10 + 10 = 200 */
		background:#99c;
	}
	.sidebarRight {
		float:right;
		width:200px;
		margin-left:20px;
	}
	#footer {
		clear:both;
		padding:5px 10px;
		background:#cc9;
	}
	#footer p {
		margin:0;
    }
	* html #footer {
		height:1px;
	}

/*****************************************************************************************
BEGIN ICMD font styling 
******************************************************************************************/
body,
html {
	background:none;
	}
html {
}
body{
	background: #f2f2f2 url(../images/backgroundColumns_tile.gif) 50% 50% repeat-y;
	font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
	font-size: 0.7em;
	line-height:1.4em;
	/* background-position:50% 50%;
	text-align:left;
	height:100%; */
}

/* clear backgrounds */
#wrap, #nav, #header, #main, #sidebar, #footer { background:none; }

/* Add a 1px border fix to #wrap for safari? see http://webweaversworld.blogspot.com/2009/10/quick-fix-for-1px-rounding-error.html for possible solutions
NB Doing this only on the right side may visually be better in safari (apart from creating a possible 'step' lower down the page) but in FF it moves the #wrap div 1px left, creating an overlap! To fix this, add the same border on both sides. Colour taken from background graphic closest to #wrap container's edge (darkest part of shadow)
*/
#wrap{
	border-right:1px solid #bbbbbb;
	border-left:1px solid #bbbbbb;
}




/*****************************************************************************************
main nav menu at top of site 
******************************************************************************************/
#nav {
	background-image:url(../images/top_grad_strip_tile.gif);
	background-repeat:repeat-x;
	height:20px;
	padding-top:10px;
	padding-left:5px;
	font-size:1.2em;
	font-weight:normal;
	color:#FFFFFF;
}
/****** attempting to style links with separators... two approaches, neither quite suitable in all browsers... ******/
/* IE doesn't understand the :before pseudo-class */
	/*
	#nav ul li:before {
		content: "\0020 \0020 \0020 \00BB \0020";
		color: #dda;
	}
	#nav ul li.first:before {
		content: " ";
	}
	*/
/* the following looks great in IE and FF, but Safari doesn't put automatic padding on the left of LIs so adding padding only to right doesn't look good in Safari,
whilst adding padding to left also means IE and FF display double padding on that side. Let's put the separators in the markup instead! */
	/*
	#nav ul li { 
		padding: 0 0 0 5px; 
	}
	#nav ul li {
		border-right:2px solid #dda;
	}
	#nav ul li.last {
		border-right:none;
	}
	*/


/*****************************************************************************************
header
******************************************************************************************/
/* remove padding from header as it contains just the flash masthead object */
#header{
	background-image:url(../images/homepageHeaderStatic.jpg);
	background-repeat:no-repeat;
	height:150px; /* to match header graphic */
	padding:0;
}

/*****************************************************************************************
left sidebar - menu + other content 
******************************************************************************************/
#sidebar{
	width: 180px; /* same as left column */
	padding: 0 0 1em 0;
	margin-bottom:1em;
	font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
	background-color:#bed0e4;
	color:#333;
	font-size: 1em;
	line-height: 1.2em;
}
#wrap>#sidebar{ width: 200px; } /* make firefox display correct width menu, leaving IE to render at above width */
#sidebar a{outline:none;}
#sidebar ul{
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
}
#sidebar li{
	border-bottom: 1px solid #bed0e4;
	margin: 0;
}
#sidebar li a{
	display: block;
	padding: 5px;
	border-left: 10px solid #00406E; /* IC dark blue */
	/*border-right: 10px solid #bed0e4; /* IC light blue */
	background-color: #5f88aa; /* IC mid blue */
	color:#FFFFFF;
	text-decoration: none;
	width:100%;
	}
html>body #sidebar li a{
	width:auto;
}
#sidebar li a:hover{
	border-left: 10px solid #ccac21; /* IC gold */ 
	background-color:#87a6bf; /* IC mid blue highlight */
	color:#fff;
}
#sidebar li a.current {
	border-left-color: #00406E; /* IC dark blue */
	/*border-right-color: #cedceb; /* IC light blue highlight */ 
	background-color:#fff; /* IC mid blue highlight */
	color:#000;
}
/************************* SUBMENUS *************************/
#sidebar ul ul li a{
	border-left: 20px solid #00406E; /* IC dark blue */
	font-size:0.8em;
	line-height:1.2em;
	width:170px;
	}
html>body #sidebar ul ul li a{
	width:auto;
}
#sidebar ul ul li a:hover{
	border-left: 20px solid #ccac21; /* IC gold */
}
/*********************** FORMS ************************/
form.mailList {
	margin: 5px;
	padding: 0px; /* adding any padding here makes the left column 'bulge' slightly into the content area in IE (not FF) */
	font-size: 0.85em;
	line-height: 1.4em;
}
form.mailList input {
	font-size:1em;
	background: #fff url(../images/form_grad_strip_tile.gif) top left repeat-x;
	border-top:1px solid #ccc;
	border-left:1px solid #ccc;
	border-bottom:1px solid #aaa;
	border-right:1px solid #aaa;
	font-family:inherit;
	font-size:inherit;
	padding:2px 0;
}
form.mailList input.noStyle {
	padding:0px;
	border:0px;
	background:none;
	background-image:none;
}
form.mailList input.thinStyle {
	padding:1px; /* apply "class="thinStyle" to SUBMIT buttons to make them the same height as text fields (may depend on font sizes being used?) */
}
#mailListConf {
/* defined so the confirmation message can match the look of the mailing list subscription box */
	margin: 10px;
	padding: 5px;
	font-size: 0.85em;
	line-height: 1.4em;
	border: 1px dashed #87a6bf; /* IC mid blue highlight */
	background-color: #cedceb; /* IC light blue highlight */
	color:#006633;
}

/*****************************************************************************************
main page content 
******************************************************************************************/
.alignRight{float:right;}
.testimonialLogo {margin:0 0 10px 30px;}
/* testimonials div no longer used...... #testimonials p {text-align:justify;} */
.highlight{color:#FF0000; background-color:#FFFF99;}
/************************************ LISTS *****************************/
#main ul {
	list-style-type:square;
	list-style-position:outside;
    font-size:1em;
	line-height:1.4em;
    list-style-type:none;
	padding: 0 0.5em 0.5em 1em;
	margin:0px 0 10px 0;
}
#main li {
    padding-left:15px; /* space between bullet and text */
    background:transparent url(../images/bullet_blue.gif) no-repeat;
    background-position:0 4px;
}
/********************* bigButtons and threeBoxes only used on new homepage (March 2010) *******************************************/
#bigButtons {width:490px; height:150px; margin:20px 0 0 50px;}
#bigButtons ul {margin:auto; padding:0; display:inline; list-style:none;}
#bigButtons ul li {margin:0; padding:0; display:inline; list-style:none; float:left;}
#bigButtons ul li.btnAcceleration {width:165px; height:150px;}
#bigButtons ul li.btnLayout {width:160px; height:150px;}
#bigButtons ul li.btnTraining {width:165px; height:150px;}
#bigButtons ul li a {display:block;}
#bigButtons ul li.btnAcceleration a {background:url(../images/bigButtons/btnAcceleration.jpg) top left no-repeat; width:165px; height:150px;}
#bigButtons ul li.btnLayout a {background:url(../images/bigButtons/btnLayout.jpg) top left no-repeat; width:160px; height:150px;}
#bigButtons ul li.btnTraining a {background:url(../images/bigButtons/btnTraining.jpg) top left no-repeat; width:165px; height:150px;}
#bigButtons ul li.btnAcceleration a:hover {background:url(../images/bigButtons/ro/btnAcceleration.jpg) top left no-repeat; width:165px; height:150px;}
#bigButtons ul li.btnLayout a:hover {background:url(../images/bigButtons/ro/btnLayout.jpg) top left no-repeat; width:160px; height:150px;}
#bigButtons ul li.btnTraining a:hover {background:url(../images/bigButtons/ro/btnTraining.jpg) top left no-repeat; width:165px; height:150px;}
#threeBoxes {width:492px; padding:0; margin:6px 0 0 50px; display:table;} /* display:table makes it wrap around the boxes within the div - otherwise it has zero height. Also, width:490 works in FF and Safari, but 492 needed for IE otherwise final box appears beneath first two!  */
#threeBoxes .boxAcceleration, #threeBoxes .boxLayout, #threeBoxes .boxTraining {float:left; background: #E9F0F4 url(../images/bigButtons/boxBack.jpg) top left no-repeat; width:157px; margin:3px; padding:0; min-height:155px;}
#threeBoxes h1 {margin:0; padding:3px 0 10px 0; font-size:10px; font-weight:bold; line-height:14px; color:#FFFFFF; border:0px; text-align:center;}
#threeBoxes h1 span {font-size:13px; font-weight:normal; text-transform:capitalize;}
#threeBoxes h1 a {color:#FFFFFF; border:0px;}
#threeBoxes h1 a:link,#threeBoxes h1 a:visited {color:#FFFFFF; text-decoration:none; outline:none;}
#threeBoxes h1 a:hover {color:#FFFFFF; text-decoration:underline;}
#threeBoxes h1 a:active {color:#FFFFFF; text-decoration:underline;}
#threeBoxes ul {font-size:0.8em;}

/******************************************* OTHER TEXT STYLES *****************************************/
p{
	font-size:1em;
	line-height:1.6em;
	margin-bottom:20px;
}
#sidebar p{
	/* large bottom margin for paragraphs not needed for paragraphs in left-hand bar! (e.g. mailing list confirmation message) */
	margin-bottom:0px;
}
.small {
	font-size:0.8em;
	color:#666666;
}
h1{
	font-size:1.5em;
	line-height:1.5em;
	margin: 15px 0px 10px 0px;
	font-weight:bold;
	color: #00406E; /* IC dark blue */
	color: #5f88aa; /* IC mid blue */
	border-bottom: 1px dashed #bed0e4; /* IC light blue */
	text-transform:capitalize;
}
h2{
	font-size:1.1em;
	margin: 10px 0px 3px 0px;
	color: #00406E; /* IC dark blue */
	font-weight:bold;
	text-transform:capitalize;
}
h3{
	font-size:1em;
	margin: 10px 0px 3px 0px;
	color: #5f88aa; /* IC mid blue */
	font-weight:bold;
	text-transform:capitalize;
	text-decoration:underline;
}
.blueBoxHeader h3 {text-decoration:none;}
.brownBoxHeader h3 {text-decoration:none;}
h4{
	font-size:0.9em;
	margin: 10px 0px 3px 0px;
	color: #00406E; /* IC dark blue */
	font-weight:bold;
	text-transform:none;
}
strong {
	font-weight:bold;
	text-decoration:none;
}
/************************************************* news items ******************************************/
.news {
	padding: 0px 0px 10px 0px;
	width:400px;
	font-size:1.2em;
	line-height:1.5em;
}
.newsdetail {
	display:block;
	padding:0 0 5px 0;
	font-size:1em;
	line-height:1.4em;
	text-decoration:none;
	color:#000;
	font-weight:normal;
}
#newsPage h3 {
	color: #ccac21;
	font-weight:bold;
	text-decoration:none;
}

/*****************************************************************************************
right sidebar on homepage 
******************************************************************************************/
/************************** BLUE box *************************/
div.blueBox, div.brownBox {
	background: url(../images/blueBox/images/blueBox_tl.gif) top left no-repeat;
	width:100%;
	margin-top:15px;
	font-size: 0.8em;
	line-height: 1.2em;
}
div.blueBox {background: url(../images/blueBox/images/blueBox_tl.gif) top left no-repeat;}
div.brownBox {background: url(../images/brownBox/images/brownBox_tl.gif) top left no-repeat;}
div.blueBoxHeader, div.brownBoxHeader {
	padding:15px;
	margin:0;
}
div.blueBoxHeader {background: url(../images/blueBox/images/blueBox_tr.gif) top right no-repeat;}
div.brownBoxHeader {background: url(../images/brownBox/images/brownBox_tr.gif) top right no-repeat;}
div.blueBoxHeader h3, div.brownBoxHeader h3 {
	margin-top:-9px;
	font-size:1em;
	line-height:1em;
	font-weight:bold;
	text-transform:uppercase;
	color:#fff;
	padding: 0 0 15px 0;
}
div.blueBoxBody, div.brownBoxBody {
	margin:0;
	margin-top:-2em;
	padding:0px 10px 5px 5px;
}
div.blueBoxBody {background: url(../images/blueBox/images/blueBox_mr.gif) top right repeat-y;}
div.brownBoxBody {background: url(../images/brownBox/images/brownBox_mr.gif) top right repeat-y;}
div.blueBoxBody p, div.brownBoxBody p {
	margin-left:5px;
}
div.blueBoxBody ul, div.brownBoxBody ul {
	list-style-type:square;
	list-style-position:outside;
    line-height:1.4;
    list-style-type:none;
	padding: 0.1em 0.5em 0 0;
	margin:0px 0 10px 0;
}
div.blueBoxBody li, div.brownBoxBody li {
    padding-left:15px; /* space between bullet and text */
    background:transparent url(../images/bullet_white.gif) no-repeat;
    background-position:3px 3px;
}
div.blueBoxFooter {
	background: url(../images/blueBox/images/blueBox_bl.gif) bottom left no-repeat;
}
div.brownBoxFooter {
	background: url(../images/brownBox/images/brownBox_bl.gif) bottom left no-repeat;
}
div.blueBoxFooter p, div.brownBoxBody p {
	display:block;
	padding:3px;
	margin:-1.5em 0 0 0;
}
div.blueBoxFooter p {background: url(../images/blueBox/images/blueBox_br.gif) bottom right no-repeat;}
div.brownBoxFooter p {background: url(../images/brownBox/images/brownBox_br.gif) bottom right no-repeat;}
div.blueBoxBody .new, div.brownBoxBody .new {
	font-weight:bold;
	color:#ffffff;
}

/**************************** COURSE MARKERS **************************/
.course { display:block; border: 1px solid #ddd; width:80%; margin: 2px 0 8px 15px;}
.icl01  { background-color:#b5bd18; color:#FFF; }
.cdlt01 { background-color:#8463ad; color:#FFF; }
.anlt01 { background-color:#008c7b; color:#FFF; }
.aalt01 { background-color:#c6ad63; color:#FFF; }
.rflt01 { background-color:#bd2931; color:#FFF; }
.scpr01 { background-color:#ffd618; color:#FFF; }
.betc01 { background-color:#ff9c18; color:#FFF; }
.vdsl01 { background-color:#138ACE; color:#FFF; }
.blvl01 { background-color:#47767C; color:#FFF; }
.esdlt01 { background-color:#79c8ad; color:#FFF; }
.hvlt01 { background-color:#efb08a; color:#FFF; }

/**************************** TABLE STYLES **************************/
table tr.shade{background-color:#E8EEF5;}

.tableSimple {
	border: 1px solid #aaaaaa;
	background: #fff;
	width:100%;
}
.tableSimple th {
	background-color:#04376c;
	padding:0px 0px 0px 5px;
}
.tableSimple td {
	padding: 5px;
	border: 1px solid #aaaaaa;
}
.tableSimple h3 {
	color:#FFFFFF;
}
.tableSimple tr.expiredCourse {
	color:#999999;
	background:#CCCCCC;
}
.cellHeading {
	padding: 2px;
	background-color:#ddd;
	font-weight:bold;
}
.headImage {
	padding-left:20px;
}
.tableGallery {
	border: 1px solid #aaaaaa;
	background: none;
	width:100%;
}
.tableGallery td {
	padding: 5px;
	border-bottom: 1px solid #aaaaaa;
	vertical-align:top;
}
.tableGallery td.alignBottom {
	vertical-align:bottom;
}
.tableGallery td.alignTop {
	vertical-align:top;
}
.tableGallery img{padding:5px; margin:5px; border:1px solid #04376c; background-color:#eeeeee;}
table.tableGallery tr.shade{background-color:#fff;}

/*****************************************************************************************
partners page
******************************************************************************************/
.tablePartners {
	border:0px;
	background:none;
	width:100%;
}
.tablePartners td {
	padding: 10px;
	border: 0px;
	text-align:left;
}

/*****************************************************************************************
site footer 
******************************************************************************************/
#footer{
	background: none;
	font-size:0.85em;
	color: #5f88aa; /* IC mid blue */
	text-align: right;
	padding: 4px 20px 4px 0;
	margin: 0 0 0 200px; /* don't cover left column with footer */
	border-top: 1px dashed #bed0e4; /* IC light blue */
}


/************************* LINKS ************************/
/* Link definitions must come in the order:
	link
	visited
	hover
	active */
#nav a{color:#fff; text-transform:capitalize; font-weight:bold;}
#nav a:link, #nav a:visited {text-decoration:none;}
#nav a:hover{text-decoration:underline;}
#nav a:active{text-decoration:none;}

#main .news a{display:block; padding:5px; text-decoration:none; font-weight:bold; color:#ccac21; border-bottom:1px dotted #ddd;}
#main .news a:link, #news a:visited {text-decoration:none; }
#main .news a:hover{background-color:#edf1f5; color:#00406e; text-decoration:none;}
#main .news a:active{text-decoration:none; }

#main a {outline:none; color:#5f88aa; font-weight:bold;}
#main a:link, #main a:visited {text-decoration:none;}
#main a:hover{text-decoration:underline;}
#main a:active{text-decoration:none;}


/*
.sidebarRight a:link, .sidebarRight a:visited {
	color:#00406E;
	font-weight:normal;
}
.sidebarRight a:hover {
	color:#00406E;
}

div.blueBoxBody a:link, div.blueBoxBody a:visited, div.brownBoxBody a:link, div.brownBoxBody a:visited {
	color:#5f88aa;
	text-decoration:none;
	font-weight:bold;
}
div.blueBoxBody a:hover, div.brownBoxBody a:hover {
	color:#5f88aa;
	text-decoration:underline;
	font-weight:bold;
}
div.blueBoxBody a:active, div.brownBoxBody a:active {
	color:#000;
	text-decoration:none;
	font-weight:bold;
}

*/

#footer a:link, #footer a:visited {
	color:#00406E;
	text-decoration:none;
	font-weight:normal;
}
#footer a:hover{
	color:#00406E;
}
#footer a:active{
	color:#000;
	text-decoration:none;
}