/* TOWN DESIGN GENERAL STYLE SHEET */


html {
	background-color: #292524;
	height: 100%;
}
body {
	font-family: Helvetica, sans-serif;
	background-color: #292524;
	color: #FFF;
	height: 100%;
	overflow-y: scroll;
}
#wrapper {
	width: 1024px;
	height: 100%;
	margin: 0 auto;
	overflow: visible;
	background: #292524 url(../images/background.jpg) -60px -90px no-repeat;
	display: table;
/*	padding-bottom: 170px;*/
}
a {
	color: #FFF;
	text-decoration: none;
}
a:hover {
	color: #C1D82F;
	text-decoration: underline;
}
em {
	font-style: italic;
}
img {
	border: none;	
}
p, h2, h3, h4, h5, a {
	text-align: left;
	margin: 0 0 8px 0;
}
h2 {
	font-size: 15px;
	font-family: Georgia, serif;
	font-style: italic;
	font-weight: bold;
	color: #C1D82F;
	margin: 15px 0 5px 0;
}
h2:first-child {
	margin-top: 0;
}
p, a { font-size: 12px }

.show-as-image {
	position: absolute;
	left: -9999px;
}


/* side panel */

#side-panel {
	float: left;
}

#side-panel .logo {
	position: relative;
	left: 36px;
	top: 55px;
	display: block;
	margin: 0px;
	padding: 0px;
	width: 123px;
	height: 52px;
	margin-bottom: -52px;
	background: transparent url(../images/logo-masthead.png) no-repeat;
	
}
#side-panel .nav {
	position: relative;
	left: 40px;
	top: 153px;
	height: 200px;
	margin-bottom: -200px;
}
#side-panel .address-block {
	position: relative;
	left: 40px;
	top: 427px;
}
#side-panel .address-block p,
#side-panel .address-block a {
	font-size: 12px;
	line-height: 14px;
	color: #707070;
	margin: 0;
}
#side-panel .address-block .company-name {
	font-family: Georgia, serif;
	font-style: italic;
	font-weight: bold;
	color: #C1D82F;
	margin-bottom: 4px;
}
#side-panel .address-block .address {
	margin-bottom: 4px;
}
#side-panel .address-block p,#side-panel .address-block a {
	font-size: 10px !important;
	line-height: 12px;
}




/* active nav */
#about #nav-about,
#work #nav-work,
#contact #nav-contact {
	color: #C1D82F;
}


/* content */

#page-rules {
	margin: 0 0 0 241px;
	position: absolute;
	border-left: solid 1px #555555;
	border-right: solid 1px #555555;	
	top: 0;
	left: auto;
	width: 602px;
	min-height: 100%;
	height: 100%;
	clear: both;
	display: table;
	z-index: 1;
/*	background-color: #FF0;*/
}
#page-rules.with-center-rule {
	background: transparent url(../images/vertical-column-rule.png) top center repeat-y;
}

/*#content-area {
	margin: 0 0 0 241px;
	position: relative;
	display: table;
	left: 0;
	top: 0;
	width: 602px;
	min-height: 100%;
	height: 100%;
	border-left: solid 1px #555555;
	border-right: solid 1px #555555;
	line-height: 15px;
	overflow: hidden;
}*/
#content {
	width: 602px;
	margin: 0 0 0 241px;
	padding-top: 160px;
	position: relative;
	top: 0;
	left: 0;
	z-index: 10;
}
#content-area.vertical-rule-for-2-columns {
/*	background: transparent url(../images/vertical-column-rule.png) top center repeat-y;*/
}
#content.text {
	padding-top: 156px;
}
#content.text img {
	margin-top: 2px;
	margin-bottom: 6px;
}
#content.text img.border {
	border: 3px solid #FFF;
}
#content.text a {
	text-decoration: underline;
}
.article-end-link {
	margin-top: 23px;
}
.column-set {
	margin: 0 -12px 0 0;
/*	width: 630px;*/
}
.column-of-1 {
	float: left;
	width: 430px;
	margin: 0 12px;
	width: 579px;  /* 603 - margins */
}
.column-of-2-thirds {
/*  this is a single column
    across 3 grid columns     */
	float: left;
	width: 430px;
	margin-left: 12px;
	margin-right: 147px;
}
.column-of-2 {
	float: left;
	margin: 0 12px;
	width: 277px;  /* 301 - margins */
}
.template {
	display: none !important;
}
.invisible{
	display: none;
	visibility: hidden;
}
.client-said {
	margin-top: 20px;
}
span.quotemark {
	font-size: 15px;
	font-family: Georgia, serif;
	font-style: italic;
	font-weight: bold;
	color: #C1D82F;
	margin: 15px 3px 5px 1px;
}

/* work */

#gallery {
	position: relative;
	top: -54px;
	left: 0;
	width: 602px;
	height: 400px;
	margin-left: 0;
	margin-bottom: -40px;
	overflow: hidden;
/*	background-color: #FF0;*/
}
#gallery-shuffler,
#thumbnail-shuffler {
	position: relative;
	top: 0;
	left: 0;
	display: none;
}
.gallery-image,
.thumbnail-page {
	position: relative;
	top: 50px;
	left: 0;
	margin: 0 12px -350px 0;
	width: 100%;
	height: 350px;
}
.gallery-image {
	background: #292524 top left no-repeat;
	border: 3px solid #FFF;
	width: 571px; /*width minus 6px of borders*/
	height: 344px;  /*height minus 6px of borders*/
}
.gallery-image.no-border {
	border: none;
	width: 577px;
	height: 350px;
	background-color: transparent;
}
.gallery-image.supersizeable {
	cursor: pointer;
}
.thumbnail {
	position: relative;
	top: 0;
	left: 0;
	background: #292524 top left no-repeat;
	width: 137px;
	height: 110px;
	margin: 0 10px -110px 0;
}
.thumbnail a {
	display: block;
	padding: 5px;
	border: 3px solid #FFF;
	width: 121px; /* 137px minus 10px padding minus 6px border*/
	height: 94px; /* 110px minus 10px padding minus 6px border*/
}
.thumbnail .title {
	display: none;
	margin-left: 3px;
	margin-right: 15px;
	font-family: Georgia, serif;
	font-style: italic;
	font-weight: bold;
}
.thumbnail a:hover .title {
	display: block;
	color: #292524;
}
.thumbnail a:hover {
	text-decoration: none;
	background: transparent url(../images/thumbnail-rollovers.png) -3px -3px no-repeat;
}
/*all positions are offset by border width (3px)*/
.thumbnail.green a:hover { background-position: -3px -3px }
.thumbnail.pink a:hover { background-position: -140px -3px }
.thumbnail.blue a:hover { background-position: -277px -3px }
.thumbnail.orange a:hover { background-position: -414px -3px }

#gallery-description {
	clear: both;
	padding: 10px 0 0 0;
	line-height: 13px;
	width: 100%;
}
#gallery-description h2 {
	font-family: Helvetica, sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 11px;
}
#gallery-description p {
	font-size: 11px;
}
#gallery-nav {
	margin-right: 12px;
	border-top: 1px solid #555555;
}
body#home #gallery-nav {
	margin-right: 12px;
	border: none;
}
#gallery-nav a {
	position: relative;
	top: 0;
	left: 0;
	padding: 6px;
	font-size: 11px;
	line-height: 15px;
	z-index: 10;
/*	background-color: #DD0 !important;*/
}
#gallery-nav a.left, #gallery-nav a.up {
	float: left;
	text-align: left;
	width: 30px;
	margin-left: -5px;
}
#gallery-nav a.right {
	float: right;
	text-align: right;
	margin-right: -5px;
}
#gallery-nav a.up {
	display: none;
}
#gallery-nav a.magnify {
	float: right;
	display: none;
	width: 14px;
	height: 14px;
	background: transparent url(../images/gallery-magnifier-icon.png) top left no-repeat;
/*	background-color: #FF0;*/
}
#gallery-nav a.left .arrow {
	float: left;
	display: block;
	width: 19px;
	height: 15px;
	margin-right: 10px;
	background: transparent url(../images/arrow-left.png) top left no-repeat;	
}
#gallery-nav a.up .all-projects {
	float: left;
	display: block;
	width: 61px;
	height: 15px;
	margin-right: 10px;
	background: transparent url(../images/arrow-all-projects.png) top left no-repeat;	
}
#gallery-nav a.right .arrow {
	float: right;
	display: block;
	width: 19px;
	height: 15px;
	margin-left: 10px;
	background: transparent url(../images/arrow-right.png) top left no-repeat;
}
#gallery-nav a:hover {
		text-decoration: none;
}
#gallery-nav a.left:hover .arrow,
#gallery-nav a.right:hover .arrow,
#gallery-nav a.magnify:hover,
#gallery-nav a.up:hover .all-projects {
	background-position: bottom left;
}

#gallery-dots {
	display: block;
	margin: 10px auto;
	width: 35px; /*width_of_dot*number_of_dots*2)+width_of_dot*/
	height: 7px;
}
#gallery-dots .dot {
	margin: 0 0 0 7px;
	float: left;
	width: 7px;
	height: 7px;
	background: transparent url(../images/slideshow-dots.png) top left no-repeat;
}
#gallery-dots .dot.active {
	background-position: top right;
}


/* contact us */

#contact #content p,
#contact #content a {
	font-size: 16px;
	line-height: 19px;
	margin-bottom: 0;
	width: 260px;
}


/*test*/
#test #wrapper {
	width: 1024px;
	height: 100%;
/*	margin: 0 auto;*/
	display: table;
	overflow: visible;
	background: #292524 url(../images/background.jpg) -60px -90px no-repeat;
/*	background: #FF0 url('') no-repeat left top;*/
}