/*	Desc: *title* Screen Style Sheet
	Author: *your name*
	Date: *last modified date*
	+ Colours
	- *colour hex* *colour name* (*purpose*)
=== === === === === === === === === === */
/*=STRUCTURE
=== === === === === === === === === === */

body {
border-top: solid 6px #9f543e;
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #666666;
background: url(../images/bg.jpg) repeat
}

html {
background: url(../images/bg.jpg) repeat;
}


/*HEADER ==========================*/
#headerhat{
width:974px;
height:116px;
display: block;
border-bottom: 2px solid #b7b7b7;
background: url(../images/contact.png) no-repeat 0px -1px;
background-position: right;
}

#mainlogo{
margin-top: -1px;
width: 281px;
float:left;
}

.twtr-widget{
top: -30px;
overflow: visible !important;
}


.twtr-ft, .twtr-profile-img-anchor, .twtr-hd h3, .twtr-hd h4 {
display: none !important;
}

#flashel{
width:974px;
height: 253px;
margin-top: 6px;
padding-bottom: 3px;
border-bottom:2px solid #b7b7b7;  
color: #666666;

}

::selection {
	background: #98C3B1; /* Safari */
	}

::-moz-selection {
	background: #98C3B1; /* Firefox */
}






/* NAVIGATION ==================================*/

#pay{
float: left;
width: 60px;
height: 60px;
margin: 0 15px 20px 0;
}

#nav{
width:360px;
float: left;
}

ul#navbut{
margin: 41px 0px 0px 0px;
overflow:hidden;
width: 360px;
padding:0px;

}

#navbut li{
display:block
height:51px;
float:left;
list-style: none;
list-style-type:none;
overflow: hidden; 
}

li#work:hover{
background:url(http://hatchetdesign.com//images/nav-hoverbar_07.png);
}

li#about:hover{
background:url(http://hatchetdesign.com//images/hover_08.png) 4px 0px;
}

li#services:hover{
background:url(http://hatchetdesign.com//images/hover_09.png) -1px 0px;
}

li#blog:hover{
background:url(http://hatchetdesign.com//images/hover_10.png) 1px -1px;
}


/* main column ==================================*/

#bd{
font-size: 1em;
}

#bd h1, #bd h2 {
font-style: italic;
font-weight: normal;
}


/* side column ==================================*/

#side{
padding:25px 25px 25px 25px;
background: url(../images/sidebar-bg2.png) repeat;
}

#sidebottom{
width:300px;
height:30px;
background: url(../images/sidebottom.png) 0 -1px no-repeat;
}

#blogsidebottom{
width:260px;
background: url(http://hatchetdesign.com/images/blog-sidebottom.png) no-repeat bottom;
padding-bottom: 30px;
}

#side h2{
color: #9F543E;
margin: 0 0 6px 0;
}

.caption{
font-size: 12px;
}

#signup{
display:block;
height: 32px;
margin-top: 15px;
}

#texta{
background: url(../images/input-bar.png) no-repeat;
border: none;
font-size: 12px;
padding: 8px;
width:150px;
height:18px;
margin-right: 5px;
}

#esubmit{
padding:3px;
background-color:#98C3B1;
border:1px solid #DDDDDD;
font-family:Arial,Helvetica,Sans-Serif;
font-size:.8em;
font-weight:normal;
color: #fff;

}

#side .buttons{
height: 32px;
width: 69px;
border: none;
}

#worknav{
width:250px;

}

#worknav li {
list-style:none;
font-style: italic;
letter-spacing: 2px;
font-size: 18px;
line-height: 24px;
text-indent: -28px;
}

#worknav a {
text-decoration: none;
color: #9F543E;
}

#worknav a:hover{
color: #B0832E;
}

#backtop{
	float: right;
	font-style: italic;
	font-size: 12px;
	line-height: 24px;
}

#backtop a {
text-decoration: none;
color: #9F543E;
}

#backtop a:hover{
color: #B0832E;
}

#workpage a{
	text-decoration: none;
	color: #9F543E;
}

#workpage a:hover{
text-decoration: underline;
}

/* footer ==================================*/

#hfooter{
background: url(../images/footer.png);
display:block;
height:21px;
width: 974px;
margin-bottom: 20px;

}


/* workpage ==================================*/

#workintro{
width: 600px;
margin-bottom: 50px;
}

.piece{
width:674px;
border-bottom: dashed #B7B7B7 2px;
display: block;
margin-bottom: 40px;
padding-bottom: 15px;
}


.piece h1{
font-size: 24px;
margin: .5em 0;
}


.desc{
width:400px;
}

#hatact{
height:40px;
width:974px;
border-bottom:2px solid #b7b7b7;  
color: #666666;
margin:20px 700px 0 0;
padding-bottom: 20px;
}




/*FORM CODE for CM
<!-- CSS -->

<style type="text/css">
span.label,span.spacer,span.multiple span {width:120px;float:left;} 
span.multiple {float:left;} 
span.button {padding-left:120px;} 
div.clear {clear:both;padding-top:5px;} 
</style> 

<!-- Form -->

<form action="http://hatchetdesign.createsend.com/t/r/s/thulo/" method="post">

<div>
<span class="label"><label for="thulo-thulo">Email Address:</label></span>
<span><input type="text" name="cm-thulo-thulo" id="thulo-thulo" size="25" /></span>
</div>
<div>

</div>
<div>
<span class="button"><input type="submit" value="Subscribe" /></span>
</div>
</form>
*/