/* CSS by the herd for the herd */
@import url("typography.css");

/*normalization - margin, padding*/
html, body, div, ol, ul, li, h1, h2, h3, h4, h5, p, a, form, fieldset, input
{
margin:0;
padding:0;
}

/*normalization - list styles*/
ol, ul
{
list-style:none;
}

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

html
{
text-align:center;
}
body
{
padding:50px 0 0 0;
font:12px "Lucida Sans Unicode", "Trebuchet MS", Arial, sans-serif;
background:#000 url(../art/frame-content.jpg) top center no-repeat;
color:#d6c6a7;
}
#index
{
background:#000 url(../art/frame.jpg) top center no-repeat;
}
#wrap
{
margin:0 auto;
width:760px;
position:relative;
}
#preload
{
display:none;
}
#header
{
width:604px;
height:167px;
margin:0 auto;
text-align:center;
background:url(../art/header-content.jpg) no-repeat;
}
#header.index
{
height:277px;
background:url(../art/header.jpg) no-repeat;
}
#header h1
{
position:absolute;
width:336px;
height:45px;
top:105px;
left:210px;
}
#header h1 a
{
display:block;
width:336px;
height:45px;
background:url(../art/stampede-logo.jpg);
}
#header h1 a:hover
{
background:url(../art/stampede-logo-hover.jpg);
}
#header h1 a span
{
display:none;
}
#nav
{
width:601px;
height:35px;
margin:0 auto;
background:url(../art/nav.jpg) no-repeat;
position: relative;
}
#nav.index
{
margin-top:50px;
background:url(../art/nav-index.jpg) no-repeat;
}
#nav li
{
top:0;
height:35px;
list-style:none;
position:absolute;
display:block;
}
#nav a
{
height: 35px;
display: block;
}
#nav1 {left: 10px; width: 75px;}
#nav2 {left: 85px; width: 100px;}
#nav3 {left: 185px; width: 90px;}
#nav4 {left: 275px; width: 65px;}
#nav5 {left: 340px; width: 90px;}
#nav6 {left: 430px; width: 65px;}
#nav7 {left: 495px; width: 85px;}
#nav1 a:hover {background: url(../art/nav.jpg) -10px -35px no-repeat;}
#nav2 a:hover {background: url(../art/nav.jpg) -85px -35px no-repeat;}
#nav3 a:hover {background: url(../art/nav.jpg) -185px -35px no-repeat;}
#nav4 a:hover {background: url(../art/nav.jpg) -275px -35px no-repeat;}
#nav5 a:hover {background: url(../art/nav.jpg) -340px -35px no-repeat;}
#nav6 a:hover {background: url(../art/nav.jpg) -430px -35px no-repeat;}
#nav7 a:hover {background: url(../art/nav.jpg) -495px -35px no-repeat;}

#nav.index #nav1 a:hover {background: url(../art/nav-index.jpg) -10px -35px no-repeat;}
#nav.index #nav2 a:hover {background: url(../art/nav-index.jpg) -85px -35px no-repeat;}
#nav.index #nav3 a:hover {background: url(../art/nav-index.jpg) -185px -35px no-repeat;}
#nav.index #nav4 a:hover {background: url(../art/nav-index.jpg) -275px -35px no-repeat;}
#nav.index #nav5 a:hover {background: url(../art/nav-index.jpg) -340px -35px no-repeat;}
#nav.index #nav6 a:hover {background: url(../art/nav-index.jpg) -430px -35px no-repeat;}
#nav.index #nav7 a:hover {background: url(../art/nav-index.jpg) -495px -35px no-repeat;}
#nav a span
{
display:none;
}
#left
{
width:534px;
float:left;
display:inline;
text-align:left;
background:url(../art/left-bg.jpg) repeat-y;
margin:60px 0 0 0;
}
#wrap div.nobg
{
background:none;
}
#left div
{
margin:20px 20px 30px 0;
}
#wrap div.l-index
{
background:none;
margin:70px 0 0 0;
}
#wrap div.l-index ol
{
margin:0 0 15px 0;
}
#wrap div.l-index ol li
{
clear:both;
height:164px;
background:url(../art/highlight-bg.jpg) 130px 10px no-repeat;
margin:0 0 13px;
}
#wrap div.l-index ol li img
{
float:left;
width:93px;
height:127px;
padding:16px 18px 20px 21px;
background:url(../art/pic-frame.jpg) no-repeat;
}
#left ol.content-hlight
{
margin:30px 0 0 0;
}
#left ol.content-hlight li
{
clear:both;
margin:0 0 20px 0;
background:url(../art/left-bg.jpg) repeat-y;
padding:0 0 10px 0;
}
#left ol.content-hlight img
{
float:left;
width:93px;
height:127px;
padding:16px 18px 20px 21px;
background:url(../art/pic-frame.jpg) no-repeat;
}
#left ol.content-hlight li h2
{
margin:20px 0 13px 5px;
width:355px;
height:13px;
float:left;
}
#left ol.content-hlight li p
{
margin:0 0 10px 20px;
float:left;
width:340px;
}
#left ul.color
{
margin:0 0 10px 0;
}
#left ul.color li
{
height:6px;
width:6px;
float:right;
display:block;
margin:0 5px 0 0;
background:none;
}
#left ul.color li img
{
border:none;
}
#banner-xhtml
{
height:146px;
display:block;
background:url(../art/v3.jpg) no-repeat !important;
padding:0;
}
#banner-newpf
{
height:151px;
display:block;
background:url(../images/banner-may-aug07.jpg) 10px 0 no-repeat !important;
padding:0;
}
#banner-newpf h2
{
margin:0;
padding:0;
}
#banner-hire h2
{
margin:0;
padding:0;
}
#banner-html h2
{
margin:20px 0 0 0;
padding:0;
}
#banner-xhtml h2 a
{
height:146px;
display:block;
}
#banner-newpf h2 a
{
height:151px;
display:block;
}
#banner-newpf h2 a:hover
{
background:url(../images/banner-may-aug07.jpg) 10px -151px no-repeat !important;
}
#banner-hire h2
{
height:146px;
display:block;
background:url(../art/v3.jpg) no-repeat;
width:517px;
}
#banner-xhtml h2 a span, #banner-newpf h2 a span, #banner-hire h2 a span
{
display:none;
}
#left ul.linethumb
{
height:70px;
display:block;
margin:0 0 35px 20px;
}
#left ul.linethumb li
{
height:70px;
width:85px;
display:inline;
margin:0 15px 0 0;
}
#left ul.linethumb li a img
{
border:4px solid #201c19;
}
#left ul.linethumb li a:hover img
{
border:4px solid #3F2F23;
}
#left ul.linethumb li a, #left ul.linethumb li a:hover
{
background:none;
}
#right
{
width:212px;
height:523px;
float:right;
display:inline;
margin:60px 0 0 0;
position:relative;
}
#wrap div.r-text /*for thumbnails*/
{
height:700px;
background:url(../art/right-bg-say.jpg) 0 120px no-repeat;
}
#wrap div.r-index
{
margin:80px 0 0 0;
}
#wrap div.r-works /*for portfolio*/
{
height:auto;
	background:#000000 url(../art/bg-port.jpg) top left no-repeat;
text-align:center;
}
#wrap .r-index.r-thumb
{
	height:auto;
}
#right ol
{
margin:30px 15px 0 15px;
height:75px;
}
#wrap div.r-text ol
{
height:auto;
margin:20px 28px 10px 22px;
}
#wrap div.r-thumb ol img
{
height:76px;
height:67px;
float:left;
margin:0 8px 0 0;
}
#right #morework
{
position:absolute;
width:95px;
height:10px;
top:490px;
right:30px;
}
#right #morework a
{
width:95px;
height:10px;
display:block;
background:url(../art/more-work.jpg);
}
#right #morework a:hover
{
background:url(../art/more-work.jpg) 0 -10px;
}
#right #morework a span
{
display:none;
}
#wrap div.r-works ol
{
width:150px;
height:26px;
margin:0 auto 10px auto;
}
#wrap div.r-works ol span
{
display:none;
}
#work0, #work1, #work2, #work3, #work4, #work5, #work6, #work7
{
width:150px;
height:26px;
position: relative;
}
#work1
{
margin:0 auto 40px auto !important;
}
#work0		{background:url(../art/work-row0.gif) top left;}
#work1		{background:url(../art/work-row1.gif) top left;}
#work2		{background:url(../art/work-row2.gif) top left;}
#work3		{background:url(../art/work-row3.gif) top left;}
#work4		{background:url(../art/work-row4.gif) top left;}
#work5		{background:url(../art/work-row5.gif) top left;}
#work6		{background:url(../art/work-row6.gif) top left;}
#work7		{background:url(../art/work-row7.gif) top left;}
#work0 li, #work1 li, #work2 li, #work3 li, #work4 li, #work5 li, #work6 li, #work7 li
{
top:0;
height:26px;
list-style:none;
position:absolute;
display:block;
}
#work0 a, #work1 a, #work2 a, #work3 a, #work4 a, #work5 a, #work6 a, #work7 a
{
height: 26px;
display: block;
}
#work0a, #work1a, #work2a, #work3a, #work4a, #work5a, #work6a, #work7a {left:0; 	 width:31px;}
#work0b, #work1b, #work2b, #work3b, #work4b, #work5b, #work6b, #work7b {left:31px;  width:31px;}
#work0c, #work1c, #work2c, #work3c, #work4c, #work5c, #work6c, #work7c {left:62px;  width:31px;}
#work0d, #work1d, #work2d, #work3d, #work4d, #work5d, #work6d, #work7d {left:93px;  width:31px;}
#work0e, #work1e, #work2e, #work3e, #work4e, #work5e, #work6e, #work7e {left:124px; width:31px;}
#work0a a:hover, #work0a a.selected {background: url(../art/work-row0.gif) 0px -26px no-repeat;}
#work0b a:hover, #work0b a.selected {background: url(../art/work-row0.gif) -31px -26px no-repeat;}
#work0c a:hover, #work0c a.selected {background: url(../art/work-row0.gif) -62px -26px no-repeat;}
#work0d a:hover, #work0d a.selected {background: url(../art/work-row0.gif) -93px -26px no-repeat;}
#work0e a:hover, #work0e a.selected {background: url(../art/work-row0.gif) -124px -26px no-repeat;}
#work1a a:hover, #work1a a.selected {background: url(../art/work-row1.gif) 0px -26px no-repeat;}
#work1b a:hover, #work1b a.selected {background: url(../art/work-row1.gif) -31px -26px no-repeat;}
#work1c a:hover, #work1c a.selected {background: url(../art/work-row1.gif) -62px -26px no-repeat;}
#work1d a:hover, #work1d a.selected {background: url(../art/work-row1.gif) -93px -26px no-repeat;}
#work1e a:hover, #work1e a.selected {background: url(../art/work-row1.gif) -124px -26px no-repeat;}
#work2a a:hover, #work2a a.selected {background: url(../art/work-row2.gif) 0px -26px no-repeat;}
#work2b a:hover, #work2b a.selected {background: url(../art/work-row2.gif) -31px -26px no-repeat;}
#work2c a:hover, #work2c a.selected {background: url(../art/work-row2.gif) -62px -26px no-repeat;}
#work2d a:hover, #work2d a.selected {background: url(../art/work-row2.gif) -93px -26px no-repeat;}
#work2e a:hover, #work2e a.selected {background: url(../art/work-row2.gif) -124px -26px no-repeat;}
#work3a a:hover, #work3a a.selected {background: url(../art/work-row3.gif) 0px -26px no-repeat;}
#work3b a:hover, #work3b a.selected {background: url(../art/work-row3.gif) -31px -26px no-repeat;}
#work3c a:hover, #work3c a.selected {background: url(../art/work-row3.gif) -62px -26px no-repeat;}
#work3d a:hover, #work3d a.selected {background: url(../art/work-row3.gif) -93px -26px no-repeat;}
#work3e a:hover, #work3e a.selected {background: url(../art/work-row3.gif) -124px -26px no-repeat;}
#work4a a:hover, #work4a a.selected {background: url(../art/work-row4.gif) 0px -26px no-repeat;}
#work4b a:hover, #work4b a.selected {background: url(../art/work-row4.gif) -31px -26px no-repeat;}
#work4c a:hover, #work4c a.selected {background: url(../art/work-row4.gif) -62px -26px no-repeat;}
#work4d a:hover, #work4d a.selected {background: url(../art/work-row4.gif) -93px -26px no-repeat;}
#work4e a:hover, #work4e a.selected {background: url(../art/work-row4.gif) -124px -26px no-repeat;}
#work5a a:hover, #work5a a.selected {background: url(../art/work-row5.gif) 0px -26px no-repeat;}
#work5b a:hover, #work5b a.selected {background: url(../art/work-row5.gif) -31px -26px no-repeat;}
#work5c a:hover, #work5c a.selected {background: url(../art/work-row5.gif) -62px -26px no-repeat;}
#work5d a:hover, #work5d a.selected {background: url(../art/work-row5.gif) -93px -26px no-repeat;}
#work5e a:hover, #work5e a.selected {background: url(../art/work-row5.gif) -124px -26px no-repeat;}
#work6a a:hover, #work6a a.selected {background: url(../art/work-row6.gif) 0px -26px no-repeat;}
#work6b a:hover, #work6b a.selected {background: url(../art/work-row6.gif) -31px -26px no-repeat;}
#work6c a:hover, #work6c a.selected {background: url(../art/work-row6.gif) -62px -26px no-repeat;}
#work6d a:hover, #work6d a.selected {background: url(../art/work-row6.gif) -93px -26px no-repeat;}
#work6e a:hover, #work6e a.selected {background: url(../art/work-row6.gif) -124px -26px no-repeat;}
#work7a a:hover, #work7a a.selected {background: url(../art/work-row7.gif) 0px -26px no-repeat;}
#work7b a:hover, #work7b a.selected {background: url(../art/work-row7.gif) -31px -26px no-repeat;}
#work7c a:hover, #work7c a.selected {background: url(../art/work-row7.gif) -62px -26px no-repeat;}
#work7d a:hover, #work7d a.selected {background: url(../art/work-row7.gif) -93px -26px no-repeat;}
#work7e a:hover, #work7e a.selected {background: url(../art/work-row7.gif) -124px -26px no-repeat;}

#footer
{
height:134px;
text-align:center;
width:100%;
background:url(../art/footer.jpg) bottom center no-repeat;
margin:20px 0 0 0;
position:relative;
}
#index #left div p
{
	margin:0 0 7px 0;
	float:right;
	width:333px;
}
#index #left .image
{
	float:left;
	margin-right:23px;
	width:auto;
	text-decoration:none;
}
#index #left .image img
{
	border:none;
}
#left .author
{
	color:#9c7b5b;
	margin-bottom:5px;
	font-size:9px;
}
#index #left div
{
	display:block;
	float:left;
	width:517px;
	margin:20px 20px 20px 0;
}
#index #left .main-ttl
{
	margin-bottom:10px;
	margin-top:5px;
}
#left .all, #right .all
{
	background:#110D0A;
	color:#6F563E;
	margin:-10px 0 0;
	padding:2px 5px 4px 5px;
	text-decoration:none;
	float:left;
}
#right .all
{
	margin:30px 0 0 20px;
}
#left .all:hover, #right .all:hover
{
	background:#820200;
	color:#D6C6A7;
}
#index #left ol
{
	margin-top:60px;
	display:inline-block;
}
#right .r_project
{
	height:auto;
	margin:15px 20px 0 20px;
	width:165px;
}
#right .r_project li
{
	display:block;
	margin-bottom:25px;
}
#right .r_project a
{
	display:block;
	text-align:left;
	text-decoration:none;
	font:10px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	color:#d6c6a7;
}
#right .r_project span
{
	background:url(../art/dot.gif) left bottom repeat-x;
	font:10px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	color:#a78461;
	margin-right:5px;
	padding-bottom:2px;
}
#right .r_project a:hover span
{
	color:red;
}
#wrap #right .r_project img
{
	margin:0 0 3px 0;
	border:none;
}
#wrap #new-thumb
{
	display:inline-block;
	margin-bottom:20px;
	padding-left:31px;
	width:181px;
}
#wrap #new-thumb ol
{
	float:left;
	height:225px;
	width:70px;
}
#wrap #new-thumb li
{
	display:inline;
	margin:0 0 8px 0;
	float:left;
}
#new-thumb a
{
	width:70px;
	height:50px;
	display:inline-block;
	float:left;
}
#wrap #new-thumb #row1
{
	background:url(../art/big1.jpg) left top no-repeat;
	margin:0 10px 0 0;
	display:block;
}
#wrap #new-thumb #row2
{
	background:url(../art/big2.jpg) left top no-repeat;
	display:block;
}
#big1 a:hover, #big1 .selected { background:url(../art/big1.jpg) -70px 0 no-repeat;}
#big2 a:hover, #big2 .selected { background:url(../art/big1.jpg) -70px -58px no-repeat;}
#big3 a:hover, #big3 .selected { background:url(../art/big1.jpg) -70px -116px no-repeat;}
#big4 a:hover, #big4 .selected { background:url(../art/big1.jpg) -70px -174px no-repeat;}
#big5 a:hover, #big5 .selected { background:url(../art/big2.jpg) -70px -0px no-repeat;}
#big6 a:hover, #big6 .selected { background:url(../art/big2.jpg) -70px -58px no-repeat;}
#big7 a:hover, #big7 .selected { background:url(../art/big2.jpg) -70px -116px no-repeat;}
#big8 a:hover, #big8 .selected { background:url(../art/big2.jpg) -70px -174px no-repeat;}
#left .bl
{
	margin-left:20px;
	border-top:1px solid #28231d;
}
#left div.portfolio .bl img
{
	float:right;
	margin-top:45px;
	border:none;
}
#left .portfolio .bl h1
{
	color:#3F2E23;
	font-size:11px;
	margin:23px 0 15px 0;
	font-weight:bold;
}
#left .portfolio .bl h2
{
	margin:0 0 10px 0;
	color:#ffffff;
}
#left .portfolio .bl p
{
	padding:0;
	margin-left:0;
	line-height:16px;
}