/*CSS Document for HatchMedia*/

/*-----------------------------Master-----------------------------*/
body {
	background-repeat: repeat;
	background-position: left top;
	margin: 0px;
	background-image: url(../imagery/htmlversion_bckgrnd2.jpg);
	scrollbar-face-color:#333333;
	scrollbar-base-color:#666666;
	scrollbar-arrow-color:#FF9933;
	scrollbar-track-color:#FFFFFF;
	scrollbar-shadow-color:#666666;
	scrollbar-highlight-color:#cccccc;
	scrollbar-3dlight-color:#FFFFFF;
	scrollbar-darkshadow-Color:#999999;
}

/*-----------------------------Main body-----------------------------*/
#container {
	text-align: center;
}

#bodysection {
	background-image: url(../imagery/middlesection2.jpg);
	background-repeat: no-repeat;
	background-position: top;
	height: 517px;
}

#rightobjects {
	float: right;
	width: 231px;
	text-align: left;
}

#leftobjects #menu {
	height: 54px;
	background-image: url(../imagery/menu_bkgrnd.jpg);
	background-repeat: no-repeat;
	text-align: left;
}

#rightobjects #projects {
	height: 306px;
}

#leftobjects #services {
	height: 252px;
	margin-left: 27px;
}

#leftobjects #services #upperboxes {
	width: 100%;
}

#leftobjects #services #lowerbox {
	float: left;
}

#upperboxes #webbox {
	float: left;
	width: 244px;
	background-image: url(../imagery/web_box.jpg);
	height: 129px;
}

#upperboxes a {
    position: absolute;
    top: 0;
    left: 0;
}

#upperboxes #webbox a {
    width: 244px;
    height: 129px;
}

#upperboxes #webbox #webboxtext {
	text-align: right;
	margin-top: 65px;
	margin-right: 25px;
}
#upperboxes #designbox #designboxtext {
	margin-right: 25px;
	margin-top: 65px;
	text-align: right;
}
#upperboxes #seobox #seoboxtext {
	text-align: right;
	margin-top: 65px;
	margin-right: 25px;
}

#upperboxes #designbox {
	width: 247px;
	float: left;
	background-image: url(../imagery/design_box.jpg);
	height: 129px;
}

#upperboxes #designbox a {
    width: 247px;
    height: 129px;
}

#upperboxes #seobox {
	float: left;
	width: 246px;
	background-image: url(../imagery/seo_box.jpg);
	height: 129px;
	position: relative;
}

#upperboxes #seobox a {
    width: 246px;
    height: 129px;
}

#upperboxes a h1  {
    display: none;
}

#leftobjects #aboutheader {
	height: 46px;
	margin-left: 37px;
}

#leftobjects #aboutus {
	background-repeat: no-repeat;
	background-position: top;
	height: 165px;
	background-image: url(../imagery/whoisbox.jpg);
	padding-left: 47px;
	padding-top: 14px;
	padding-right: 45px;
	line-height: 13.5pt;
}

#footer {
	background-image: url(../imagery/footer_2.jpg);
	height: 154px;
	width: 1024px;
}

#bodycontainer {
	width: 1024px;
	margin-right: auto;
	margin-left: auto;
	font-family: Tahoma, Verdana;
}

#headerimg {
	background-image: url(../imagery/header_1.jpg);
	background-repeat: no-repeat;
	background-position: top;
	height: 179px;
	width: 1024px;
	margin: 0px;
}

#leftobjects {
	float: left;
	width: 793px;
	text-align: left;
}

#menu #home {
	float: left;
	width: 60px;
	margin-left: 54px;
}

#menu #work {
	width: 92px;
	float: left;
}

#menu #career {
	width: 75px;
	float: left;
}

#menu #contact {
	float: left;
	width: 80px;
}

#menu #why {
	float: left;
	width: 133px;
}


#menu #service {
	float: left;
	width: 81px;
}
#menu #newsbutton {
	float: left;
	width: 61px;
}


#projects #pheader {
	height: 44px;
	padding-top: 10px;
}

#projects #pcontent {
	height: 252px;
}

#pcontent #project1 img {
	height: 79px;
}

#pcontent #project2 img {
	height: 79px;
}

#pcontent #project3 img {
	height: 79px;
}

#rightobjects #news {
	height: 232px;
}

#news #ncontent {
	height: 142px;
	background-repeat: no-repeat;
	clear: both;
	background-image: url(../imagery/news_background.gif);
	padding-top: 15px;
	padding-left: 7px;
}

#news #nheader {
	height: 46px;
}

#contactinfo #contactadd {
	background-image: url(../imagery/contact_bottom.gif);
	height: 77px;
	text-align: center;
}

#contactinfo #contactform {
	background-image: url(../imagery/contactpage_02.gif);
	height: 366px;
	padding-left: 80px;
	padding-top: 20px;
}

#contactform #confmessage {
	width: 650px;
	height: 200px;
	padding-top: 50px;
}

#careerform {
	background-image: url(../imagery/careers_backmain.gif);
	height: 443px;
	padding-left: 80px;
	padding-top: 20px;
}
#ourworkform {
	background-image: url(../imagery/careers_backmain.gif);
	height: 443px;
	padding-top: 20px;
	padding-left: 53px;
}


#servicecontainer #serviceup #webup {
	background-image: url(../imagery/web_1.jpg);
	width: 244px;
	height: 92px;
	float: left;
}
#servicecontainer #serviceup #designup {
	background-image: url(../imagery/design_1.jpg);
	height: 92px;
	width: 247px;
	float: left;
}
#servicecontainer #serviceup #seoup {
	background-image: url(../imagery/seo_1.jpg);
	height: 92px;
	width: 246px;
	float: left;
}

#servicecontainer a {
    font-size: 0.8em;
}

#servicecontainer #servicemid #webmid {
	background-image: url(../imagery/web_2.jpg);
	height: 331px;
	width: 244px;
	float: left;
}

#servicecontainer #servicemid #designmid {
	background-image: url(../imagery/design_2.jpg);
	height: 331px;
	width: 247px;
	float: left;
}

#servicecontainer #servicemid #seomid {
	background-image: url(../imagery/seo_2.jpg);
	float: left;
	height: 331px;
	width: 246px;
}
#servicecontainer #servicemid {
	clear: both;
}
#servicecontainer #servicebottom {
	clear: both;
}
#servicecontainer #servicebottom #webbottom {
	background-image: url(../imagery/web_3.jpg);
	float: left;
	height: 40px;
	width: 244px;
}
#servicecontainer #servicebottom #designbottom {
	background-image: url(../imagery/design_3.jpg);
	float: left;
	height: 40px;
	width: 247px;
}
#servicecontainer #servicebottom #seobottom {
	background-image: url(../imagery/seo_3.jpg);
	float: left;
	height: 40px;
	width: 246px;
}
#servicecontainer {
	margin-left: 27px;
}

#servicemid .weblit {
	padding-right: 25px;
	padding-left: 25px;
}

#sitefooter {
	background-image: url(../imagery/footer_2.jpg);
	height: 154px;
	
}
#sitemap {
    font-family: Tahoma, Verdana;
	text-align: center;
	font-size: 9px;
	font-style: normal;
	font-weight: lighter;
}
#sitemap .a:link {
	color: #bbbbbb;
}



/*-----------------------------Scroll area and bullet captions-----------------------------*/

#scroll1 {
	height: 380px;
	width: 646px;
	overflow: auto;
	padding: 8px;
}

#scroll1 .careerbox {
	height: 134px;
	padding-top: 20px;
}

#scroll1 .careerboxtp {
	height: 134px;
}

#scroll1 .careerback {
	background-image: url(../imagery/career_background.gif);
	height: 119px;
	float: left;
	padding-top: 15px;
	padding-right: 20px;
	padding-left: 100px;
	width: 459px;
}

#scroll1 .careerbutton {
	text-align: right;
	width: 33px;
	padding-top: 7px;
	float: left;
}

#scroll2 {
	padding: 8px;
	height: 110px;
	width: 150px;
	overflow: auto;
	text-align: left;
}

#scroll3 {
	padding-right: 8px;
	height: 413px;
	width: 680px;
	overflow: auto;
	text-align: left;
}
#scroll3 .worktxthead {
	height: 20px;
}

#scroll3 .col1image {
	float: left;
	height: 89px;
	width: 163px;
}
#scroll3 .image {
	margin-left: 12px;
	float: left;
	width: 163px;
	height: 89px;
}
#scroll3 .divider {
	background-image: url(../imagery/divline.jpg);
	background-repeat: repeat-x;
	background-position: bottom;
	height: 13px;
	margin: 15px 0 20px 0;
	clear: both;
}


li {
	list-style-position: outside;
	margin-left: -20px;
	list-style-image: url(../imagery/bullet_arrow.gif);
}

/*-----------------------------Text styles-----------------------------*/

.bodytextsmall {

	font-size: 9pt;
	color: #FFFFFF;
	font-family: Tahoma, Verdana;
}

a:link {
	color: #66CCFF;
}

a:hover {
	color: #66CCFF;
}	

a:visited {
	color: #66CCFF;
}

.powerword {
	font-size: 16pt;
	font-weight: bold;
	color: #FFFFFF;
}

.menu_up {
	font-size: 10pt;
	color: #FFFFFF;
	text-transform: uppercase;
	font-weight: bold;
}

.subheading {
	font-size: 10pt;
	color: #FF9934;
}

.heading {
	font-family: Tahoma, Verdana;
	font-size: 12pt;
	color: #FFFFFF;
}

.bodytext {
	font-size: 10pt;
	color: #FFFFFF;
	font-family: Tahoma, Verdana;
}

.boxtitle {
	font-size: 13pt;
	color: #FF9933;
}

.copyright {
	font-size: 7pt;
	color: #FFFFFF;
}

.highlight {
	font-size: 10pt;
	color: #FF9933;
	font-weight: bold;
}

.dropcaps {
	font-size: 15pt;
	color: #FF9933;
	font-weight: bold;
}

.textfield {
	font-size: 10pt;
	color: #333333;
	font-family: Tahoma, Verdana;
}

.errormess {
	font-size: 8pt;
	color: #FF9933;
	font-weight: bold;
	font-family: Tahoma, Verdana;
}

.speaker {
	font-size: 8pt;
	color: #66CCFF;
	font-weight: bold;
}
#aboutus h1, #aboutus h2 {
	font-size: 13px;
	color: #FF9933;
	margin: 0px;
	display: inline;
}