/*

Mark Scheel
March, 2010

*/


/* Standard Elements - may be overridden below */

body {
	padding:0px;
	margin:0px;
	text-align:left;
	background: url(images/bg_1x97.gif) repeat-x right top;
	font-family: arial, sans-serif;	
	font-size: 12px;
	line-height: 18px;
	color: #666666;
}
a {
	color: #0068A5;
}
a:hover {
	color: #EC5401;
}
a:visited {
	color: #0068A5;
}


* {padding:0;margin:0;}
html,body{margin:0;padding:0}

ul, li {
	margin: 0px;
	padding: 0px;
	list-style: none;
	font-size: 12px;
	line-height: 16px;
	color: #666666;
	font-family: arial, sans-serif;
}

/* Custom elements in rough order of page appearance */

/* Header */

#topline
{
	background-color: #010101;
	width: 100%;
	height: 3px;
}
#topline2
{
	background-color: #959595;
	width: 100%;
	height: 4px;
	position: relative;
}
#topline3
{
	background-color: #464646;
	width: 100%;
	height: 2px;
	position: relative;
}
/*  This contains the entire page of as much content as exists, it puts the gif in the bottom right and repeats it horizontally (x) 
	Also, repeated in element footer, where height is set to 90
*/
/* puts the footer bar 100% across screen, otherwise would only be 900 px wide from footer definition */
#wrap{
	width:100%;
	background:url(graphics/footerbar_1_90.gif) repeat-x right bottom;
	margin-left:auto;
	margin-right:auto;	
	text-align:left;
	position:relative;
}
/* 900 pixel wide centered area */
#outer{
	width:900px;
	margin-left:auto;
	margin-right:auto;	
	text-align:left;
	position:relative;
/*
	border-style:solid;
	border:thick;
	border-color:blue;
*/
}
/* header elements */
/* hammer logo */
#header {
	height:112px;
	color:#fff;
	z-index: 0;
	padding-bottom: 15px;
}
#header #hammer_logo {
	position: absolute;
	top: -15px;
	left: 5px;
}
#header #hammer_logo a {
	text-decoration: none;
	display: block;	
	width: 200px;
	height: 150px;
	background: url(graphics/dc_logo_200_150.gif) no-repeat left top;
}
#header #hammer_logo a span {
	display: none;
}
#header #textimage_digital_construction {
	position: absolute;
	top: 8px;
	left: 180px;
}
#header #textimage_digital_construction a {	
	text-decoration: none;
	display: block;	
	width: 706px;
	height: 47px;
	background: url(graphics/text_digital_construction_706_47.png) no-repeat left top;	
}
#header #textimage_digital_construction span {
	 display:none;
}
#header #textimage_software_solutions_since_1997 {
	position: absolute;
	top: 100px;
	left: 190px;
}
#header #textimage_software_solutions_since_1997 a {	
	text-decoration: none;
	display: block;	
	width: 303px;
	height: 18px;
	background: url(graphics/text_software_solutions_since_1997_303_18.jpg) no-repeat left top;	
}
#header #textimage_software_solutions_since_1997 span {
	 display:none;
}
#topnav {
	position: absolute;
	top: 65px;
	left: 464px;
}
#topnav li {
	float: left;
	position: relative;
	width: 87px;
}
#topnav li a {
	display: block;
	width: 86px;
	height: 30px;
	background:url(graphics/graytab1.gif) no-repeat 0px 0px;
	line-height: 30px;
	padding-left: 0px;
	color: #000;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
}
#topnav li a strong {
	display: block;
	width: 86px;
	height: 30px;
	background:url(graphics/graytab3.gif) no-repeat 0px 0px;
	line-height: 30px;
	padding-left: 0px;
	color: #000;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
}

#topnav li a:hover {
	background:url(graphics/graytab2.gif) no-repeat 0px -0px;
}
#searchbar {
	position: absolute;
	top: 70px;
	left: 206px;
	width: 160px;
	height: 16px;
	display: block;
}
#searchbar a {
	color: #023B68;
	text-decoration: none;
}
#searchbar input {
	height: 15px;
}
/* bottom header lines should be below hammer logo where they overlap - z-index is -1 */
#btmheaderline{
	z-index: -1;
	position: absolute;
	top: 95px;
	left: 151px;
	width: 749px;
	height: 2px;
	background-color: #010101;
}
#btmheaderline2{
	z-index: -1;
	position: absolute;
	top: 97px;
	left: 151px;
	width: 749px;
	height: 2px;
	background-color: #959595;
}

/* Main content area */
/* left - 556 wide, h1 is blue, h2 is grey, content is grey text */

#left {
	position: relative;
	float:left;
	width:530px;
	margin: 10px;
	padding-left: 30px; /* helps shimmy up left under hammer logo */
}
#left h1 {
	color: black;
	font-size: 18px;
	padding:0px;
	margin: 0px;
	font-family: arial, sans-serif;
	padding-top: 10px;
}
#left h2 {
	color: #636363;
	font-size: 16px;
	padding:0px;
	margin: 0px;
	font-family: arial, sans-serif;
	padding-bottom: 5px;
	padding-top: 20px;
;
}
.content {
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: justify;
}
.content a {
	color: #0068A5;
}
.content a:hover {
	color: #EC5401;
}
.content visited {
	color: #0068A5;
}
#right{
	margin-top: 40px;
	position: relative;
	float:left;
	width:308px;
	z-index: 1000;
	padding-left: 10px;
}
#right_after_top{
	margin-top: 10px;
	position: relative;
	float:left;
	width:308px;
	z-index: 1000;
	padding-left: 10px;
}
#callout {
	position: relative;
	width: 308px;
	background: url(graphics/callout_300x1.gif) repeat-y left top;
	margin-bottom: 18px;
}
#callout p {
	padding-left: 10px;
	padding-right: 10px;
	line-height: 18px;
	margin-top: 10px;
}
#callout-top {
	position: relative;
	background: url(graphics/callouttop_300x30bw.gif) no-repeat left top;
	height: 30px;
	display: block;
	line-height: 30px;
	font-size: 16px;
	color: black;
	font-weight: bold;
	text-align:center;
}
#callout-bottom {
	position: relative;
	background: url(graphics/calloutbottom_300x30.gif) no-repeat left bottom;
	height: 30px;
	display: block;
}
#right-photo img {
	width: 290px;
	border:1px solid #021a40; 
	margin-top:20px;
	padding: 4px;
	background-color:white
}
#right-photo p {
	margin-top:5px;
	margin-right: 15px;
	margin-left: 15px;
	margin-bottom: 15px;
}
#minilogo {
	float:none;
	width: 50px;
	height: 38px;
	position: relative;
	text-align: center;
	margin-top: 30px;
	margin-bottom: 30px;
	margin-right: auto;
	margin-left: auto;
	background: url(graphics/dc_logo_50_38.png) no-repeat;
	display:block;
}
#minilogo span{
	display: none;
}

/* footer area */

#footer {
	position: relative;
	clear:both;	
	height:90px;
	background:url(graphics/footerbar_1_90.gif) repeat-x right bottom;
}
#footerlinks {
	position: relative;
}
#footerlinks p {
	color: #CCCCCC;
	padding-top: 12px;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	text-align: center;
}
#footerlinks p a {
	text-decoration: none;
	color: #CCCCCC;
	padding-left: 5px;
	padding-right: 5px;
	font-family: arial, sans-serif;
}
#footerlinks p a:visited {
	color: #CCCCCC;
	text-decoration: none;
}
#footerlinks p a:hover {
	text-decoration: underline;
	color: #EC5401;
}
#copyright {
	color: #CCCCCC;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	text-align: center;
	margin-top: 11px;
	font-family: arial, sans-serif;
}

/* other */

#double {
	position: relative;
	float:left;
	width:800px;
}

/* Search Area

			<div id="searchbar">
				<form method="get" action="http://www.google.com/search">
					<input type="text"   name="q" size="18" maxlength="255" value="" />
					 <input type="hidden"  name="sitesearch" value="digitalconstruction.com"/>
					<input type="image" value="Search" src="graphics/magnifyingglass.jpg" style="width:15px;" />	
				</form>			
			</div>

*/