/*

 Click Engfneering -- First draft.

 * Keep Separate from companies that actually do the work

 * We want this on the host in the DMZ

 CAUTION: TEST and PROD for this company use the same colour scheme!

*/

* {
	margin: 0;
	padding: 0;
}


body {
	background: #DADADA url(bg_body.png) left top repeat-x;
	margin: 0 auto;
	font-family: Arial, Helvetica, sans-serif;
}


.page-wrapper {
	margin: 0 auto;
	width: 776px;
	position: relative;
	background: transparent url(click_container.gif) left top repeat-y;
	z-index: 1;
	margin-bottom: 50px;
	
}


.intro {
	background: transparent url(bg_intro.png) right top no-repeat;
	position: relative;
	padding: 1px;

}


header {
	display: inline;
	overflow: hidden;
	position: absolute;
	height: 0;
	width: 0;
}

	h1{
		font: bold 154%/25px Arial, Helvetica, sans-serif;
	}
	
	h2{
		font: bold 90%/25px Arial, Helvetica, sans-serif;
	}

	h3{
		font: bold 150%/25px Arial, Helvetica, sans-serif;
	}


.synopsis {
	color: #000;
	font: normal 75%/18px Arial, Helvetica, sans-serif;
	right: 350px;	
	position: absolute;
	top: 85px;
	width: 400px;
}

	.synopsis p:first-child {
		display: inline;
		overflow: hidden;
		position: absolute;
	}
	
	.synopsis a, .synopsis a:link, .synopsis a:visited {
		color: #F29E00;
		font-weight: bold;
	}
	
	.synopsis a:hover, .synopsis a:active, .synopsis a:focus {
		text-decoration: none;
	}


.body1 {
	background: transparent url(bg_body1.png) right top no-repeat;
	color: #fff;
	font: normal 80%/18px Arial, Helvetica, sans-serif;
	padding: 80px 30px 15px 15px;
	margin-left: 210px;
	margin-top: 192px;
	height: 100%;
}

	.body1 h3 {
		background: transparent url(h3long.png) left top no-repeat;
		text-indent: 8%;
		width: 508px;
	}
		
	.body1 abbr {
		border-bottom:1px dotted #F29E00;
		color: #F29E00; 
		font-weight: normal;
		font-size: 115%;
	}
	
	.body1 p {
		padding-left: 30px;
	}

.body2 {
	width: 250px;
	float: left;
}

	.body2 h3 {
		background: transparent url(h3short.png) left top no-repeat;
		text-indent: 17%;
		margin: 0 0 10px 1px;
		width: 260px;
	}

	.body2 p:nth-child(2) {
		background: transparent url(cont_img_01.jpg) 30px 0px no-repeat;
		padding-top: 130px;
	}


.body3 {
	margin-left: 265px;
	margin-top: -23px;
	width: 240px;
}

	.body3 h3 {
		background: transparent url(h3short.png) left top no-repeat;
		text-indent: 17%;
		margin: 23px 0 10px 1px;
		width: 247px;
	}

	.body3 p:nth-child(2) {
		background: transparent url(cont_img_02.jpg) 30px 0px no-repeat;
		padding-top: 130px;
	}

.primary {
	color: #fff;
	margin-left: 210px;
	font: normal 80%/18px Arial, Helvetica, sans-serif;
	padding: 15px 35px 15px 15px;
	position: relative;
	height: 100%;
}

	.primary abbr {
		border-bottom:1px dotted #F29E00;
		color: #F29E00; 
		font-size: 115%;
		font-weight: normal;
	}

	.primary a, .primary a:link, .primary a:visited {
		color: #F29E00; 
		font-weight: bold;
		text-decoration: underline;
	}
	
	.primary a:hover, .primary a:active, .primary a:focus {
		text-decoration: none
	}
	
	.primary p {
		padding-left: 30px;
	
	}

.body_middle h3 {
	background: transparent url(h3long.png) left top no-repeat;
	text-indent: 8%;
	margin: 23px 0 10px 1px;
	width: 508px;
}

.body_bottom {
	margin-bottom: 50px;
}
	
	.body_bottom h3 {
		background: transparent url(h3long.png) left top no-repeat;
		width: 508px;
		text-indent: 8%;
		margin: 23px 0 10px 1px;
		width: 508px;
	}


.body1 h3, .body2 h3, .body3 h3, .body_middle h3, .body_bottom h3 {
	background-position: top;
	height: 40px;
	padding-top: 7px;
	white-space: nowrap;
	height: 37px;
}

.sidebar {
	background: transparent url(bg_linkList.gif) 0px 2px repeat-y;
	color: #fff;
	font-weight: normal;
	padding: 15px 10px 0 0;
	position: absolute;
	top: 193px;
	width: 221px;
}

.sidebar h3 {
	padding-left: 10px;
}

.sidebar a, .sidebar a:link, .sidebar a:visited  {
	color: #000;
	text-decoration: underline;
}

.sidebar a:hover, .sidebar a:active, .sidebar a:focus  {
	text-decoration: none;
}

.sidebar ul li {
	font-size: 70%;
	list-style: square;
	
}

.side-top {
	background: transparent url(bg_lselect.gif) left bottom no-repeat;
	padding-bottom: 25px;
}
	
	.h3side {
		margin: 0 auto;
	}

	.side-top ul li a {
		display: block;
		font: bold 110%/19px Arial, Helvetica, sans-serif;
	}


.side-middle {
	background: transparent url(bg_lselect.gif) left bottom no-repeat;
	padding: 15px 0 40px 0;
}

	.h3side {
		margin: 0 auto;
	}

	.side-middle ul li a.link2 {
		color: #fff;
		display: inline;
		font: normal 90%/19px Arial, Helvetica, sans-serif;
	}


.side-bottom {
	background: transparent url(click_lresources.gif) left bottom no-repeat;
	padding-bottom: 30px;
}

	.h3side {
		margin: 15px auto;
	}


.side-middle ul li a, .side-bottom ul li a {
	font-weight: bold;
}


.side-bottom ul li, .side-middle ul li, .side-top ul li {
	margin: 14px 0 14px 35px;
}

.h3side, .select {
	background: transparent url(h3side.png) left top no-repeat;
	display: block;
	height: 29px;
	text-indent: 12%;
	white-space: nowrap;
        overflow: hidden;
	width: 185px;
}

.resources, .archives, .select {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

footer {
	background: transparent url(bg_footer.gif) left top no-repeat;
	bottom: -27px;
	left: 25px;
	height: 54px;
	line-height: 50px;
	position: absolute;
	width: 312px;
	padding-left: 37px;
}

.primary footer a, .primary footer a:link, .primary footer a:visited {
	color: #000;
	padding: 0 6px;
}

* html footer {
	bottom: -28px;
}