/* @group META */

html, body {
	height: 100%;
	margin: 0 0 1px 0; 	
}

body {
	line-height: 1.5;
	font-size: 13px;
	background:url(../images/bg-wood2.jpg)repeat fixed 0% 0%;
	xfont-family: Helvetica, Arial, Verdana, sans-serif;
	font-family: Georgia, "Times New Roman", serif;   
}


/* @end */

/* @group THUMBTACKS */

#thumbtacks {
background: url(../images/thumbtacks.png) center no-repeat;
width: 1000px;
height: 51px;
position: absolute;
margin: 0 auto;
z-index: 3;
top: -22px;
left: -40px;
}

#tape {
background: url(../images/tape.png) center no-repeat;
width: 1100px;
height: 150px;
position: absolute;
margin: 0 auto;
z-index: 3;
top: -25px;
left: -75px;
xdisplay: none;
}


/* @end */

/* @group PREVIEW CONTENT */

.projectListings {
display: block;
margin-left: -9px;
overflow: auto;
}

a.project {
border: 1px solid #EDEDED;
display: block;
float: left;
background-color: #fff;
margin: 5px 0px 5px 10px;
}

a:hover.project {
background-color: #fef16f;
}

.previewContent {
border: 0px;
font-family: Georgia, 'Times New Roman', Helvetica, Tahoma;
font-size: 13px;
margin: 0px;
padding: 0px;
}

.previewContent .image {
border-bottom: 1px solid #EAEAEA;
height: 171px;
width: 225px;
overflow: hidden;
}

.previewContent .title {
color: #333;
font-size: 18px;
height: 93px;
padding: 5px 7px 0px 12px;
width: 198px;
line-height: 1.25;
}

.previewContent .desc {
color: gray;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 10px;
height: 20px;
overflow: hidden;
padding-left: 12px;
text-transform: uppercase;
width: 198px;
}

/* @end */

/* @group TYPOGRAPHY */

h2 {
xbackground-color: #f8ff73;
font-weight: normal;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 2px;
xfont-style: italic;
xfont-family: "Clarendon LT Std";
xcolor: black;
}

h3 {
xbackground-color: #f8ff73;
font-weight: normal;
xfont-variant: small-caps;
xtext-transform: uppercase;
font-style: italic;
xfont-family: "Clarendon LT Std";
xcolor: black;
}

h3.notes {
display: block;
width: 235px;
xheight: 76px;
height: 100px;
margin: 0;
padding: 0;
background: url(../images/header-notes.png) no-repeat center bottom;
clear: both;
}

/* @end */

/* @group STRUCTURE */

#container {
position: relative;
	width: 958px;
	xpadding: 10px;
	xmargin: 50px auto 0 auto;
xbackground: #fff url(../images/bg-paper.png) repeat;
}

a.portfolio {
display: block;
width: 188px;
height: 188px;
float: left;
background-color: #8eaf2f;
overflow: hidden;
text-indent: -9999px;
}

a.portfolio.glossybox {
background: url(../images/portfolio-tn.png) no-repeat center;
}

a {
color: black;
text-decoration: none;
background-color: #fef16f;
}

#nav {
clear: both;
margin: 0 0 30px 0;
}

#nav a {
display: block;
float: left;
width: 188px;
xheight: 20px;
height: 94px;
color: #fff;
xfont-weight: bold;
xtext-transform: uppercase;
font-size: 14px;
xfont-style: italic;
xletter-spacing: 2px;
text-align: center;
text-decoration: none;
xbackground: url(../images/bg-nav.png) no-repeat center;
vertical-align: middle;
overflow: hidden;
text-indent: -9999px;
}


#nav a.about {
xleft: 10px;
background-color: #ba3e35;
background: url(../images/button-about.png) no-repeat center;
}

#nav a.work {
xleft: 188.2px;
background-color: #bd945c;
background: url(../images/button-work.png) no-repeat center;
}

#nav a.glossymail {
xleft: 376.4px;
background-color: #e69811;
background: url(../images/button-glossymail.png) no-repeat center;
}

#nav a.contact {
xleft: 564.6px;
background-color: #dadada;
background: url(../images/button-contact.png) no-repeat center;
}

#nav a.notebook {
xleft: 752.8px;
background-color: #727849;
background: url(../images/button-notebook.png) no-repeat center;
}

#nav a:hover {
background-position-x: 2px;
background-position-y: 2px;
}

a.headline {
position: relative;
width: 961px;
height: 70px;
display: block;
margin: 0 auto 10px auto;
clear: both;
background: url(../images/headline.png) no-repeat left bottom;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
}

#shadow {
position: relative;
width: 961px;
padding: 5px;
	xmargin: 50px auto 0 auto;
	margin: 0 auto;
	xbackground: url(../images/bg-shadow2.png);
}

/* @end */

/* @group MAIN */

#main {
display: block;
float: left;
width: 941px;
clear: both;
margin: 0 auto;
xbackground-color: #8eaf2f;
}

.description {
display: block;
float: left;
width: 941px;
clear: both;
margin: 0 auto;
xbackground-color: #8eaf2f;
}

#header {
display: block;
width: 941px;
xheight: 60px;
height: 5px;
clear: both;
overflow: hidden;
/*
padding-top: 10px;
padding-bottom: 10px;
*/
margin: 0 auto;
xbackground-color: #8eaf2f;
}

#header.portfolio {
background: url(../images/header-chrome.png) no-repeat center;
}

/* @end */

/* @group COLUMNS */

.column {
position: relative;
	width: 235px;
	height: 235px;
	float: left;
	overflow: hidden;
}

a.column {
position: relative;
display: block;
	width: 235px;
	height: 235px;
	float: left;
	overflow: hidden;
}

.column.span-2 {
	width: 470px;
	height: 470px;
	float: left;
	xbackground-color: #ff6600;
}

.column.span-3 {
width: 705px;
float: left;
xmin-height: 200px;
xbackground-color: #8eaf2f;
background: url(../images/bg-paper.png) repeat;
}

.column.test {
height: 470px;
background: url(../images/test.png) no-repeat center;
}

a.column.span-2 {
display: block;
	xwidth: 487px;
	xheight: 487px;
	width: 470px;
	height: 470px;
	float: left;
	xbackground-color: #ff6600;
}

.column.grapevines {
	background: url(../images/bg_grapevine.png) no-repeat;
}

a.column.league {
	background: url(../images/bg-league.png) no-repeat;
}

.column.glossymail {
	background: url(../images/bg-glossymail.png) no-repeat;
}

.column.contact {
	background: url(../images/bg-contact.png) no-repeat;
}

.column.sunset {
	background: url(../images/bg_sunset.png) no-repeat;
}

.column.simple {
	background: url(../images/bg-simple.png) no-repeat;
}

.column.industry {
	background: url(../images/bg-industry.png) no-repeat;
}

.column.glossybox {
	background: url(../images/article-glossybox.png) no-repeat;
}

.column.bdlaw {
	background: url(../images/article-bdlaw.png) no-repeat;
}

.column.typewriter {
	background: url(../images/bg-typewriter.png) no-repeat center bottom;
}

.column.stamp {
	background: url(../images/bg-elephant.png) no-repeat center bottom;
}

.column.strongman {
	background: url(../images/bg-strongman.png) no-repeat center bottom;
}

.column.paper {
	background: url(../images/bg-paper.png);
}

.column.nav {
	background: url(../images/bg-gradient.gif) repeat-x left bottom;
}

.column.row-2 {
width: 235px;
min-height: 470px;
}


.column.content {
width: 225px;
	padding-left:10px; 
	xcolor: #462112;
}

.column.last {
	clear: right;
	xbackground-color: #1d1d1d;
}

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

.sign {
position: absolute;
z-index: 5;
bottom: -20px;
left: -10px;
	width: 487px;
	height: 487px;
	background: url(../images/bg-league2.png) no-repeat;
	xdisplay: none;
}

.sign-small {
position: absolute;
z-index: 5;
bottom: -20px;
left: -65px;
	width: 325px;
	height: 325px;
	background: url(../images/bg-sign.png) no-repeat;
	xdisplay: none;
}

.scrap {
position: absolute;
z-index: -1;
bottom: -170px;
right: -60px;
display: block;
	width: 487px;
	height: 487px;
	background: url(../images/bg-scrap.png) no-repeat;
}

.polaroid {
position: absolute;
z-index: 2;
bottom: -20px;
right: -60px;
display: block;
	width: 398px;
	height: 462px;
	background: url(../images/bg-polaroid.png) no-repeat;
	display: none;
}

.paperclip {
position: absolute;
z-index: 3;
bottom: -10px;
right: -40px;
display: block;
	width: 125px;
	height: 125px;
	background: url(../images/bg-paperclip.png) no-repeat;
	display: none;
}

.stack {
position: absolute;
z-index: 2;
top: -35px;
right: -15px;
	width: 470px;
	height: 449px;
	background: url(../images/bg-stack.png) no-repeat;
	xdisplay: none;
}

.sticker {
position: absolute;
z-index: -5;
bottom: 185px;
left: -55px;
	width: 263px;
	height: 120px;
	background: url(../images/bg-sticker.png) no-repeat;
	xdisplay: none;
}



/*
<--[if IE]>
  .clearfix {
    zoom: 1;     /* triggers hasLayout 
    display: block;     /* resets display for IE/Win 
    }  /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. 
<![endif]-->
*/

/* @end */


/* @group LINKS */

a.caption {
display: block;
text-align: right;
position: absolute;
right: 0;
bottom: 0;
padding: 3px 40px 3px 5px;
text-decoration: none;
color: #fff;
background: url(../images/bg-caption.png);
xfont-weight: bold;
xfont-variant: small-caps;
font-style: italic;
xfont-size: 14px;
}

a:hover.caption {
xpadding: 10px 40px 3px 20px;
xbackground: url(../images/bg-caption2.png) repeat-x left center;
background-color: #000;
}

.nav a.caption {
padding: 3px 10px 3px 3px;
font-size: 18px;
font-weight: bold;
background: none;
xbackground: url(../images/bg-caption.png);
}

a.slogan {
display: block;
width: 198px;
xheight: 70px;
height: 29px;
position: absolute;
xbottom: 60px;
bottom: 0;
xleft: 10px;
left: 20px;
background: url(../images/signature3.png) no-repeat center center;
text-indent: -9999px;
overflow: hidden;
display: none;
}

a.logotype {
display: block;
width: 204px;
height: 49px;
position: absolute;
bottom: 0;
left: 10px;
text-decoration: none;
background: url(../images/logotype.png) no-repeat center center;
text-indent: -9999px;
overflow: hidden;
display: none;
}

a.now-accepting {
display: block;
width: 150px;
height: 33px;
position: absolute;
bottom: 0;
left: 10px;
text-decoration: none;
xfont-weight: bold;
color: #462112;
xleft: 20px;
padding: 5px 5px 5px 55px;
text-decoration: none;
background: url(../images/bg-now_accepting2.png) no-repeat left center;
xbackground-color: #8eaf2f;
xoverflow: hidden;
}

/* @end */


/* @group FOOTER */

#footer {
width: 941px;
clear: both;
margin: 0 auto;
background-color: #8eaf2f;
}

/* @end */