/* HPE Website Styles */
/* default elements */
* {margin: 0; padding: 0;}

body {
	position: relative;
	background: #cccccc;
	color: #000;
	font: normal 70% sans-serif;
}

a {color: #630;}
a:hover {color: #930;}

big {font-size: 1.1em;}

h1,h2,h3 {color: #633;}

h1 {font: normal 1.8em sans-serif;}
h1 a {text-decoration: none;}
h1 a:hover {text-decoration: underline;}

h2 {font: normal 1.6em sans-serif;}
h3 {font: bold 1.2em sans-serif;}

blockquote {
	background: url('img/quote.gif') no-repeat;
	display: block;
	font: normal 1.1em Georgia,serif;
	padding-left: 26px
}

form,table {margin-bottom: 1.2em;}
img {border: none;}
label {display: block;}
li {line-height: 1.5em;}
small,.small {font: normal 0.9em sans-serif;}
ul {padding: 0 2em 1.2em;}







/* structure */

#wrapper {
	width:95%;
	margin: 0 auto;
}

#contentwrapper {
	background: transparent;
}

#container {
	position: relative;
	background: #b6b6b6;
	border: 1px solid black;
}

/* header */

.headcols {
	font-size: 1.3em;
	line-height: 1.3em;
}

.headcols .left {width: 625px; position: absolute; z-index: 1; color: white;}
.headcols .right {text-align: right; width: 100%;}
.headcols img {position: relative; border: 1px solid black;}
.headcols #altnav a {border: black 1px solid; margin: 2px; text-decoration: none; padding: 2px; line-height: 2em; color: black; background: transparent url(img/altnavbg.png) repeat top left;}

.headtop {
	background: url(img/headerbg.jpg) repeat left top;
	height: 77px;
}


.headbottom {
	background: url(img/glossbg.jpg) repeat-x left top;
	border-top: 1px solid black;
	height: 143px;
}

.headbottom #offsetdown {position: relative; top: 38px; margin-right: 28px;}
.headbottom a {color: black; text-decoration: none;}














/* content */

.centered {text-align: center;}

.cols {
	font-size: 1.3em;
	line-height: 1.3em;
	margin-bottom: 30px;
}

.cols #mainleft {width: 65%; padding: 1px; position: relative;}
.cols .right {text-align: right; width: 31%; padding: 1px; position: relative;}
.colinleft {width: 200px; padding: 1px; position: relative; float: left;}
.colinright {position: relative; width: 80%; padding: 1px; position: relative; margin-left: 210px; margin-right: -210px;}

.threecols {
	font-size: 1.3em;
	line-height: 1.3em;
	margin-bottom: 30px;
}

.threecols .right {text-align: right; width: 29%; padding: 1px; position: relative;}
.twoleft {float: left; width: 100%; padding: 1px; position: relative;}
.twoleft #mainleft {width: 17%; background: #CCC; padding: 1px; position: relative; margin-top: 12px; margin-left: 2%; border: 1px solid #444;}
.twoleft #mainleftheader {width: 90%;  height: 150px; background: #000 url(img/layout-photos/whyhpeleft.jpg) no-repeat top left; padding: 0; position: relative; margin-top: 12px; margin-left: 12px; margin-bottom: 12px; border: 1px solid #444;}
.twoleft #maincenter {width: 80%; padding: 1px; position: relative;}
#mainlefttext {margin: 20px 0 8px 12px;}
#mainlefttext li {margin-left: 8px;}

.twoleft #safetyleft {width: 90%;  height: 150px; background: #000 url(img/layout-photos/safetyleft.jpg) no-repeat top left; padding: 0; position: relative; margin-top: 12px; margin-left: 12px; margin-bottom: 12px; border: 1px solid #444;}
.twoleft #whyhpeleft {width: 90%;  height: 150px; background: #000 url(img/layout-photos/whyhpeleft.jpg) no-repeat top center; padding: 0; position: relative; margin-top: 12px; margin-left: 12px; margin-bottom: 12px; border: 1px solid #444;}
.twoleft #smfableft {width: 90%;  height: 150px; background: transparent url(img/layout-photos/smfableft.jpg) no-repeat top center; padding: 0; position: relative; margin-top: 12px; margin-left: 12px; margin-bottom: 12px; border: 1px solid #444;}
.twoleft #sminstallleft {width: 90%;  height: 150px; background: transparent url(img/layout-photos/sminstallleft.jpg) no-repeat top center; padding: 0; position: relative; margin-top: 12px; margin-left: 12px; margin-bottom: 12px; border: 1px solid #444;}
.twoleft #pnpfableft {width: 90%;  height: 150px; background: black url(img/layout-photos/pnpfableft.jpg) no-repeat top center; padding: 0; position: relative; margin-top: 12px; margin-left: 12px; margin-bottom: 12px; border: 1px solid #444;}
.twoleft #cadleft {width: 90%;  height: 150px; background: #000 url(img/layout-photos/cadleft.jpg) no-repeat top left; padding: 0; position: relative; margin-top: 12px; margin-left: 12px; margin-bottom: 12px; border: 1px solid #444;}
.twoleft #serviceleft {width: 90%;  height: 150px; background: #000 url(img/layout-photos/serviceleft.jpg) no-repeat top left; padding: 0; position: relative; margin-top: 12px; margin-left: 12px; margin-bottom: 12px; border: 1px solid #444;}
.twoleft #projectsleft {width: 90%;  height: 150px; background: #000 url(img/layout-photos/projectsleft.jpg) no-repeat top left; padding: 0; position: relative; margin-top: 12px; margin-left: 12px; margin-bottom: 12px; border: 1px solid #444;}
.twoleft #tsleft {width: 90%;  height: 150px; background: #000 url(img/layout-photos/tsleft.jpg) no-repeat top left; padding: 0; position: relative; margin-top: 12px; margin-left: 12px; margin-bottom: 12px; border: 1px solid #444;}
.twoleft #hrleft {width: 90%;  height: 150px; background: #000 url(img/layout-photos/hrleft.jpg) no-repeat top center; padding: 0; position: relative; margin-top: 12px; margin-left: 12px; margin-bottom: 12px; border: 1px solid #444;}


.content
	{
	background: transparent;
}

.cheatsep {
	position: relative;
	background: url(img/contentsep.gif) repeat-x left top;
	height: 29px;
	width: 100%;
	border: solid black 1px;
	margin: 4px 0 8px 0;
}

.contsep {
	position: relative;
	background: url(img/contentsep.gif) repeat-x left top;
	height: 29px;
	width: 100%;
}




	/* main page styles */

.mainhpe {
	background: #CCC;
	width: auto;
	font-size: 1em;
	line-height: 1em;
	margin: 15px 78px 0 15px;
	border: solid black 1px;
	padding: 6px;
}

.mainhpe .content {text-align: left; position: relative; font-size: 1.1em; line-height: 1em; width: auto;}

.mainhpe h2 {position: relative; top: -4px; font-weight: bold; text-align: left; font-size: 2em; float: left; margin-right: 24px;}


.mainhpearticle {
	margin: 15px 80px 15px 15px;
}

.mainservices {
	margin: 25px 80px 15px 15px;
	color: #000;
}

.mainservices strong {font-size: 1.4em; font-weight: bold; color: #633;}

.mainservices img {position: relative; border: 1px solid black; float: right;}

.mainservices .left #strive {margin-right: 15px;}

.mainservices .bullet {position: relative; border: 1px solid black; background: #CCC; margin: 0 4px 4px 0; width: 30%; padding: 4px;}

.mapwrap {margin-top: 10px;}

.pikespeak {width: auto;  height: 70px; background: transparent url(img/pikespeak.jpg) no-repeat center center; position: relative; margin: -14px -2px 8px 0; border: 1px solid black;}


















/* rounded corners */

.tancontainer {
	position: relative;
	top: 8px;
	width: 95%;
	margin: auto;
	background: url(img/tan-round/tan_midleft_mid.jpg) transparent repeat-y left top;
}

.tancontainer .left {position: relative; text-align: left; left: 21px; width: 90%;}
.tancontainer h2 {font-weight: bold; position: relative; width: auto; text-align: left; z-index: 1;}
.tancontainer #imgleft img{float: left; border: 1px solid #000; margin-right: 10px;}
.tancontainer #imgleftbordless img{float: left; border: none; margin-right: 10px;}
.tancontainer #imgright {float: right; margin: 15px 0 10px 15px;}
#imgright img { border: 1px solid #000; clear: right;}
.tancontainer .left p {margin-bottom: 1.2em;}
.tancontainer #cont {background: url(img/tan-round/tan_mid_right.jpg) transparent repeat-y right top; position: relative; display: block; height: 100%; min-height: 400px;}

.tantop {
	background: url(img/tan-round/tan_topleft_top.jpg) transparent no-repeat left top;
	width: 100%;
	height: 21px;
}

.tantop span {
	display: block;
	position: relative;
	background: url(img/tan-round/tan_topright.jpg) transparent no-repeat right top;
	height: 21px;
}

.tanbottom {
	background: url(img/tan-round/tan_bottomleft_bottom.jpg) transparent repeat-x left bottom;
	width: 100%;
	height: 21px;
}

.tanbottom span {
	background: url(img/tan-round/tan_bottom_right.jpg) transparent no-repeat right bottom;
	display: block;
	position: relative;
	height: 21px;
}

.tantab {
	position: relative;
	background: url(img/tan-tab/tantab-left.jpg) repeat-x left top;
	height: 33px;
	width: 98%;
	margin-top: 8px;
}

.tantab span {
	position: relative;
	display: block;
	background: url(img/tan-tab/tantab-right.jpg) no-repeat right top;
	height: 33px;
}

.tantab h1 {color: #330000; font: 1.4em sans-serif; position: relative; float: left; top: 6px; left: 10px; background: url(img/hbg1.jpg) transparent repeat-x left top; border: 1px solid black; padding: 0 8px 0 8px; max-height: 22px; z-index: 1; font-weight: bold;}






.graybox {
	position: relative;
	background: url(img/gray-box/graybox-left.jpg) repeat left top;
	width: 98%;
}
.graybox p + p {
	margin-top: 1em;
}

.graybox #cont {
	text-align: left; 
	background: url(img/gray-box/graybox-right.jpg) transparent repeat-y right top; 
	position: relative; 
	display: block; 
	height: 100%; 
	min-height: 225px;
}

.graybox .left {position: relative; text-align: left; width: 90%; top: 12px; left: 30px; margin-bottom: 20px;}
.graybox #cont a {font-size: 1em;}
.graybox #imgleft img{float: left; border: 1px solid #000; margin: 15px 15px 15px 0;}
.graybox #imgright img{float: right; border: 1px solid #000; margin-left: 10px;}

.grayboxbottom {
	position: relative;
	background: url(img/gray-box/graybox-bottom-left.jpg) repeat-x left bottom;
	height: 25px;
}

.grayboxbottom span {
	position: relative;
	display: block;
	background: url(img/gray-box/graybox-bottom-right.jpg) no-repeat right bottom;
	height: 25px;
}

.grayboxbottom span a {font-style: italic; position: relative; left: 30px;}















/* footer */

.footer {
	margin-top: -24px;
	font-size: 1em;
	line-height: 1em;
}

.footer .left {
	position: relative; 
	display: block; 
	background: url(img/footer/footerleft-mid.png)  no-repeat right top; 
	float: left; 
	width: 50%; 
	height: 141px;
	margin-right:-64px;
}

.footer .right {
	position: relative;
	display: block;
	background: url(img/footer/footerright-mid.png) no-repeat left top;
	float: right;
	width: 50%; 
	height: 141px;
}

.footer .left span {
	position: relative;
	display: block;
	background: url(img/footer/footerleft.png) no-repeat left top;
	height:141px;
}

.footer .right span {
	position: relative;
	display: block;
	background: url(img/footer/footerright.png) no-repeat right top;
	height:141px;
}

.footer #mid {
	margin-right:-66px;
	position: relative;
	display: block;
	background: url(img/footer/footermid.png) no-repeat center top;
	float: left;
	width: 128px;
	height: 141px;
	z-index: 1;
}

.footer .centered {position: relative; top: 2em; font-size: 1.2em; margin-bottom: 2em; line-height: 1.4em;}







/* search */

.searchform {
	position: relative;
	background: transparent url(img/searchformbg.png) no-repeat center top;
	width: 200px;
	height: 71px;
	margin: 0 24px auto auto;
	top: 40px;
	text-align: center;
	z-index: 400;
}
#searchinput {
	margin-top: 25px;
	color: black;
	font-size: 1.2em;
	background: white;
	width: 110px;
	border: solid 1px black;
}

#searchbutton {
	margin: 25px 0 0;
	color: black;
	font-size: 1em;
	background: white url(img/searchbg.png) repeat-x left top;
	width: 60px;
	border: 1px solid black;
	margin: 0;
	padding: 0;
	cursor: pointer; /* hand-shaped cursor */
	cursor: hand; /* for IE 5.x */
}




/* contact form*/
.inputs {position: relative; margin: 0 0 0 18%; width: 80%; top: -1.2em;}
.inputs #msg {display: block; height: 400px;}
.sub {position: relative; left: 150px;}


/* java -currently not used*/
.menutitles {
	color: white;
	font-size: 1.2em;
	background: gray;
	padding: 2px;
	width: 110px;
	height: 16px;
	text-align: center;
}

.menuitems {
	color: red;
	font-size: 1.2em;
	background: gray;
	padding: 2px;
	width: 110px;
	text-align: center;
	display: none;
}












/* misc */
.left {float: left;}
.right {float: right;}
.clear,.clearer {clear: both;} 
.clearer {font-size: 0;}
#google {position: relative; float: left; width: 60%; height: 400px; padding: 0; border: 1px solid black; z-index: 1; margin-right: 12px; margin-bottom: 10px;}
#cont hr {position: relative; width: 98%; margin-top: 20px; clear: both; z-index: 1;}
#offsetright {position: relative; left: 12px;}
#timetut img {border: 1px solid black; margin: 12px 0 12px 0;}
.artic img { text-align: center; border: 1px solid black;}
.artic strong { text-align: center;}
.mainplugs {width: 92%; background: #CCC; padding: 1px; position: relative; margin-top: 12px; margin-right: 3%; margin-left: 2%; border: 1px solid #444; text-align: left;}
.mainplugs #plugbody {position: relative; margin-left: 2%;}
.mainplugs img {margin: 1%;}
.articboxgray {display: block; background: #CCC; margin: 5px; border: solid 1px black; padding: 5px;}
.articboxgray li {position: relative; left: 15px; margin-right: 10px;}
#articcolfifth {display: block; min-width: 18%; width: 19%; text-align: center;}
.projboxgray {display: block; background: #CCC; margin: 5px; border: solid 1px black; padding: 5px;}
.projboxgray img {border: 1px solid black;}
.projboxgray #thirdleft {width: 20%; float: left;}
.projboxgray #thirdmid {position: relative; text-align: left; top: 14px; width: 38%; float: left; margin-bottom: 14px;}
.projboxgray #thirdright {position: relative; text-align: left; top: 14px; width: 38%; float: right; margin-bottom: 14px;}
.imgright {float: right; border: 1px solid black;}
.imgleft {float: left; border: 1px solid black;  margin-right: 6px;}
.collage {position: relative; border: 1px solid black; float: right; background: transparent url(/img/layout-photos/frontpageproj.jpg) no-repeat left center; width: 65%;max-width: 399px; height: 150px;}
.smallertext {font-size: 75%;}
.nobord img {border: none;}