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

body {
	background-color: #F8F8F8;
	margin: 0;
	padding: 0;
	text-align: center;
}


#content {
	text-align: left;
	width: 960px;
	margin: 0 auto;
}


#wrapper {
	margin: 0 auto;
	text-align: left;
	width: 900px;
}

.yellow {
	background-color: #FFFF00;
	padding: 2px;
}

.yellowtext {
	color: #FFFF00;
}

.small {
	font-size: 11px;
}

.large {
	font-size: 24px;
}

.blue {
	color: #0099cc;
}

.darkgrey {
	color: #404040;
}

.padding {
	margin: 0px 0 0 0;
	padding:0 6px 0 6px;
}


/* type styles */		/* type styles */		/* type styles */		/* type styles */

p {
	font-size: 12px;
	font-weight: normal;
	color: #303030;
	text-align: left;
	font-family: Arial, Helvetica, sans-serifs;
	line-height: 18px;
}


h1 {
	color: #000;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 22px;
	font-style: italic;
	font-weight: normal;
	margin: 40px 0 0px 0;
	text-align: left;
}

h2 {
	font-size: 15px;
	font-weight: normal;
	color: #000000;
	text-align: left;
	font-family: Georgia, "Times New Roman", Times, serif;
}


.h2 {
	font-size: 14px;
	color: #101010;
	text-align: left;
 	text-decoration: none;
	font-family: Georgia, "Times New Roman", Times, serif;
}

a.h2:link {
 	text-decoration: none;
}

a.h2:visited {
	text-decoration: none;
}

a.h2:hover {
	color: #000000;
	text-decoration: none;
}


.h3 {
	background: #FFFF00;
	color: #808080;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 40px;
	font-style: italic;
	font-weight: normal;
	line-height: 50px;
	text-align: left;
}

a.h3:link {
 	text-decoration: none;
}

a.h3:visited {
	text-decoration: none;
}

a.h3:hover {
	color: #000;
	text-decoration: none;
}


.h4 {
	color: #000;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: normal;
	font-size: 18px;
	font-weight: normal;
	line-height: 34px;
	padding: 2px;
	text-align: left;
 	text-decoration: none;
}

a.h4:link {
 	text-decoration: none;
}

a.h4:visited {
	text-decoration: none;
}

a.h4:hover {
	text-decoration: underline;
}



.h5 {
	color: #202020;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;font-size: 13px;
	font-weight: normal;
	line-height: 20px;
	text-align: left;
	text-decoration: none;
}

a.h5:link {
 	text-decoration: none;
}

a.h5:visited {
	text-decoration: none;
}

a.h5:hover {
	text-decoration: none;
	background: #ffff00;
	color: #000000;
}

a.active {
	text-decoration: none;
	background: #ffff00;
	color: #000000;
}




h6{
	font-size: 18px;
	font-weight: normal;
	color: #202020;
	text-align: left;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	line-height: 26px;
	width: 400px;
}




.h6{
	font-size: 20px;
	font-weight: normal;
	color: #202020;
	text-align: left;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
}

a.h6:visited {
	text-decoration: none;
}

a.h6:hover {
	text-decoration: none;
	background: #ffff00;
	color: #000000;
}

a.h6:active {
}





.h7 {
	font-size: 13px;
	font-weight: normal;
	color: #202020;
	text-align: left;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
 	text-decoration: none;
	border-bottom: 1px dotted #202020;
}

a.h7:link {
 	text-decoration: none;
}

a.h7:visited {
	text-decoration: none;
}

a.h7:hover {
	text-decoration: none;
	background: #ffff00;
	color: #000000;
}


.h8 {
	font-size: 25px;
	font-weight: normal;
	color: #333;
	text-align: left;
	font-family: Georgia, "Times New Roman", Times, serif;
}

.h9 {
	font-size: 14px;
	font-weight: normal;
	color: #202020;
	text-align: left;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	background-color: #FFFF00;
}


.h10 {
	font-size: 16px;
	color: #666666;
	font-style: italic;
	text-align: left;
 	text-decoration: none;
	font-family: Georgia, "Times New Roman", Times, serif;
}

.h11 {
	background: #FFFF00;
	color: #606060;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	font-style: italic;
	font-weight: normal;
	text-align: left;
}

.h12 {
	color: #202020;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 17px;
	font-style: italic;
	margin: 0 0 20px 0;
	text-align: left;
}



.smalllink {
	font-size: 13px;
	color: #282828;
	text-align: left;
 	text-decoration: none;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
}

a.smalllink:link {
 	text-decoration: none;
}

a.smalllink:visited {
	text-decoration: none;
}

a.smalllink:hover {
	border-bottom: 1px dotted #282828;
	color: #000000;
	text-decoration: none;
}

.smalllink a.current {
	color: #000000;
	text-decoration: none;
}




.smalltext {
	color: #000;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: bold;
	line-height: 12px;
	margin: 0 0 10px 0;
	text-align: left;
	text-transform: capitalize;
}


.smalltext_black {
	color: #0099FF;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 11px;
	line-height: 12px;
	text-align: left;
}


.hr01 {
	float: left;
	width: 100%;
	margin: -6px 0 10px 0;
	border: none;
	border-bottom: 1px dotted #ffff00;
}


.hr02 {
	float: left;
	width: 100%;
	margin: 3px 0 10px 0;
	border: none;
	border-bottom: 1px solid #ccc;
}


.hr03 {
	float: left;
	width: 100%;
	margin: 60px 0 10px 0;
	border: none;
	border-bottom: 1px solid #ccc;
}

.background {
	background: #FFFF00;
}



/* TOP BAR */		/* TOP BAR */		/* TOP BAR */		/* TOP BAR */		/* TOP BAR */

#top_bar {
	background-color: #181818;
	height: 19px;
	padding: 6px 0px 3px 0px;
	position: fixed;
	top: 0px;
	width: 100%;
	z-index: 2;
}

#top_barcontent {
	height: 19px;
	margin: 0 auto;
	text-align: left;
	width: 900px;
}

.top_barlink {
	float: right;
	font-size: 0.6em;
	color: #888888;
	text-align: right;
	font-family: Arial, Helvetica, sans-serif;
	padding-left: 46px;
}

a.top_barlink:link {
 	text-decoration: none;
}

a.top_barlink:visited {
	text-decoration: none;
}

a.top_barlink:hover {
	color: #FFFF00;
	text-decoration: underline;
}


/* TOP BAR END */		/* TOP BAR END */		/* TOP BAR END */		/* TOP BAR END */


/* HEADER */		/* HEADER */		/* HEADER */		/* HEADER */		/* HEADER */

#header {
	width: 900px;
	height: 190px;
	margin: 0 auto;
	text-align: left;
	padding: 10px 0 0 0;
	border-bottom: 1px solid #ccc;
}


#hdr_row01 {
	width: 900px;
	height: 40px;
}

#hdr_row02 {
	width: 900px;
	height: 65px;
}

#hdr_row03 {
	width: 900px;
	height: 65px;
	padding-top: 0px;
	clear: both;
}



.logo  {
	float: left;
    background: url(images/cip_logo.png) no-repeat;
    display: block;
    width: 271px;
    height: 47px;
    border: none;
}

a.logo:link {
	text-decoration: none;
	border:none;
}

a.logo:visited { 
	text-decoration: none;
	border:none;
}


a.logo:hover {
	text-decoration: none;
	border:none;
}


.intro_para {
    background: url(images/intro_para.png) no-repeat;
    display: block;
    width: 384px;
    height: 60px;
    border: none;
}



/* menu */		/* menu */		/* menu */		/* menu */		/* menu */



/* Firstly this time the #menu div is still our "container" only this time we want it to be 100% wide, so we could leave it as it is because it would default to this. However to properly contain the floated child lists if we also float the #menu div it will stretch to contain its floated children.

We then need to set the required dropdown width but this time it goes directly onto the ul elements themselves, and the need to be floated in order to appear side by side. We also still need to remove all the default padding, margins and bullets from the uls the same as before.*/

#menu {
	float: right;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

#menu_container {
	float: right;
}

#menu ul {
	list-style: none;
	margin: 0;
	padding: 20px 0 0 20px;
	float: left;
}


#menu ul li ul{
	list-style: none;
	padding-top: 2px;
}


/* The first stage now looks like this, showing the three lists in horizontal alignment because they're floated, the background color is only for demo to show the container actually stretching, it can be removed later.

Then we apply the required formatting to the h2 headings and the a anchors, again I'm using the same formatting as the vertical menu */

#menu a {
	display: block;
	font: normal 14px Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	padding: 2px;
	border-bottom: 1px dotted #ffffff;
}

#menu a {
	color: #181818;
	text-decoration: none;
}

#menu a:hover, a.current {
	border-bottom: 1px dotted #282828;
	color: #000000;
	background: #FFFF00;
}

#menu ul li ul li a {
	font-size: 13px;
}



/*The First level Drop Down Menus are already in the correct place, so we don't need to position then, but we need to position the children, nested lists, of these choices absolutely again, so just like the vertical version we need to make the parent li elements into  containing blocks for these absolutely positioned children, which is doing by placing position: relative; onto the parent lis and again because we are not using offset co-ordinates to actually move these li elements we can apply it globally.

Then we need to select all ul elements that have at least TWO parent ul's again in order to move them over into their pop out position. This time we do not need to set the width here as we already set the width on all ul elements to 12em so this will take that width too by order of the cascade. */


#menu li {
	position: relative;
	display: inline;
	list-style-type: none;
	color: #282828;
}

/* However now, which is not apparent yet in these simple demo pages, we have a problem if there is text underneath this navigation bar, which there would most likely be in a real page.

Because we have left the first child list "in the flow" of the document rather than position it for pop-out purposes it is actually pushing any following text down below it. Normally in these drop down scenarios we would want it to drop down over the top of on any existing text.

We can do this by pulling it out of the flow using absolute positioning again, only this time we don't want to give it any offset co-ordinates, because we're actually happy with where it is, and just in case we'll give it a high z-index to ensure it and it's children actually do appear over the top of any positioned text that may follow. */

#menu ul ul {
	position: absolute;
	z-index: 500;
	margin-left: -20px;
}




/* This time we actually do want to hide the second level menu (top choice) as we only want the h2 heading to remain visible offering the top level choices as a dropdown, and then any further choices as popouts, so we need to target all ul's that have at least ONE parent ul which will leaving out the heading list because it doesn't have a parent. */

div#menu ul ul {
	display: none;
	margin-left: -20px;
}




/* Again that was the easy bit, so let's get to revealing them again.

Again the convoluted CSS to keep IE happy, this time when we hover over the first li which is in fact the heading too we want the child lists to appear */

div#menu ul li {
	display: inline;
	list-style-type: none;
	margin-left: -54px;
	color: #282828;
}

div#menu ul li:hover ul
{display: block;}



/*This time if that last sample is viewed in IE it doesn't look so bad except for the unnecessary whitespace between the nav bar and the text, however we know the hovers are not activating so let's call the Magic Ingredient again, the csshover.htc file*/

body {
behavior: url(csshover3.htc);
}


/* HEADER END */		/* HEADER END */		/* HEADER END */		/* HEADER END */		/* HEADER END */		/* HEADER END */



/* ABOUT SECTION */		/* ABOUT SECTION */		/* ABOUT SECTION */		/* ABOUT SECTION */

#about_column {
	float: left;
	width: 900px;
	margin: 0 auto;
	text-align: left;
	padding-bottom: 20px;
	margin: 30px 0 0px 0;
}


#menu_column {
	float: left;
	width: 220px;
	margin-bottom: 25px;
}

#info_column {
   	float: right;
  	width: 660px;
	margin-bottom: 25px;
}


.info_image {
	float: left;
	width: 660px;
	margin: 0px 0 20px 0;
	background: #fff;
	border:none;
}

 .intro_box {
	background: #E8E8E8;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc;
	float: left;
	margin: 0px 0 15px 0;
	padding: 0 5px 0 5px;
	width: 650px;
}

.intro_box p {
	color: #707070;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size:24px;
	font-weight: normal;
	line-height: 30px;
	text-align: left;
}

.info_para {
	float: left;
	width: 560px;
	margin: 0px 0 10px 0;
}

.info_para_c1 {
	float: left;
	width: 200px;
	margin: 0px 0 10px 0;
}

.info_para_c2 {
	float: right;
	width: 300px;
	margin: 0px 0 10px 0;
	text-align: left;
}

.info_paralong {
	float: left;
	width: 660px;
	margin: 0px 0 10px 0;
}

.back_link {
	clear: both;
	float: left;
	width: 100px;
	margin: 0px 0 10px 0;
}

.next_link {
	float: right;
	width: 200px;
	margin: 0px 0 10px 0;
	text-align: right;
}