/*
main.css
author: Robert Aubin (http://robertaubin.com)
*/
/*
red - #982424
dark gray - #cbcbcb
light gray - #f3f3f3
black - #000
white - #fff
*/


/* ================== */
/* = helper classes = */
/* ================== */

.clear {clear:both;}
.borderless {border:none;}

/* ======================= */
/* = Links (inner pages) = */
/* ======================= */
#content-right a {
	color:#CD0000;
	text-decoration:none;
}
#content-right a:hover {
	text-decoration:underline;
}
#content-right a:active {
	/*outline:none;*/
}

/* ======================= */
/* = formatting elements = */
/* ======================= */

hr { color:#eee;width:80%;}
/* ============= */
/* = all pages = */
/* ============= */

body {
	background:#cfcccc url(../layout/page-bg.gif) 0px 0px repeat-x;
	margin: 0px;
	padding: 0px;
}
#wrapper {
	margin:3px auto 0px auto;
	width:960px;
}
#header {
	border-bottom: 1px solid #ccc;
	height:40px;
	letter-spacing: .4em;
	margin:50px auto 3px auto;
	text-indent:-9999px;
	text-transform: uppercase;
	width:960px;
}
#header a {
	background: #fff url(../layout/header-title-sm.gif) no-repeat center center;
	color:#000;
	display:block;
	font: normal normal normal 1.6em/1.6em 'ZapfHumnst BT', Arial, sans-serif;
	height:28px;
	text-decoration:none;
	width:645px;
}
#header a:active, #header a:visited {
	outline:none; /*firefox/similar*/
}
#header span {
	color: #982424;
}
#navwrap {background:#a0a0a0;height:60px;width:100%;}
#nav {height:60px;margin:0px auto;width:960px;}
#nav ul {list-style-type:none;padding:0px;margin:0px auto;width:960px;z-index:1000;}
#nav li {display:inline;}
#nav li a {
	color:#fff;/*#982424;*/
	display:block;
	font: normal normal normal .9em/1.5em helvetica, sans-serif;
	float:left;
	padding:0px 15px;
	text-decoration:none;
	height:60px;line-height:60px;
}
#nav a:hover, #nav a.active {
/*  background-color: #f3f3f3;*/
  background:transparent url(../layout/nav-bg.gif) 0px 0px repeat-x;
  color:#CD0000;
}

/***** Drop down menu styles *****/

#nav #jsddm {
	position:absolute;
	z-index:100;
}
#jsddm li	{
	float: left;
	list-style: none;
	position:relative;
}
#jsddm li ul {
	background: #67645e url(../layout/dd-bg.gif) 0px 0px repeat-x;
	left:0px;
	/*margin-top: 25px;*/
	opacity:0.9;
	filter:alpha(opacity=90);
	padding: 15px 0px;
	position: absolute;
	top:60px;
	visibility: hidden;
	width:270px;
	z-index:20;
}
#jsddm li ul li {
	float: none;
	display: inline;
}
#nav #jsddm li ul li a {
	float:none; /* take the float off of drop down items */
	/*color: #24313C;*/
	margin:0px 5px 0px 5px;
	line-height:40px;
	height:40px;
	width: 252px;
}

#nav #jsddm li ul li a:hover {
  background:none;
/*    background: #e5e5e5;*/
		color:#000;
		/*margin:0px 5px 0px 5px;
				padding:10px 3px 10px 3px;*/
		width: 252px;
}
/** Breadcrumb **/

#breadcrumb {
  font-family:helvetica, arial, sans-serif;
  font-size:12px;
  color:#ddd;
  margin-left:10px;
  line-height:25px;
}
#breadcrumb a, #breadcrumb a:active { color: #999;text-decoration:underline;padding:0px 5px;}
#breadcrumb a:hover { text-decoration:none;}
/* ========== */
/* = footer = */
/* ========== */		
#footer {
	border-top: 1px solid #bbb;
	clear:both;
	height:100px;
	margin:15px 0px;
	position:relative;
}
#footer-text {
	bottom:0px;
	color: #888;
	font: normal normal normal .8em/.8em helvetica, Arial, sans-serif;
	left:0px;
	position:absolute;
}
#footer-text a {
	color:#cbcbcb;
	text-decoration:none;
}
#footer-text a:hover { text-decoration:underline;}
#footer-branding {bottom:0px;position:absolute;right:0px;}
.inner #footer-branding {bottom:-8px;}

#footer-portfolio { border-top:1px solid #bbb;border-bottom:1px solid #bbb;clear:both;height:200px;margin-top:15px;}
#footer-portfolio div {
  float:left;
  margin-right:15px;
  width:160px;
/*  border:1px solid #777;*/
}
#footer-portfolio div.col-1 { width:200px }
#footer-portfolio div.col-2 {width:200px;}
#footer-portfolio h4 {
  color:#777;
  font: bold normal normal 12px/12px Helvetica, sans-serif;
  margin-bottom:0px;
}
#footer-portfolio ul { padding:0px;list-style:none;margin:0px;}
#footer-portfolio a { color:#999;font: normal normal normal 12px/12px Helvetica, Arial, sans-serif;text-decoration:none;}
#footer-portfolio a:hover { color:#555;}
/* ============= */
/* = home page = */
/* ============= */
.home #slideshow {
/*	border:3px solid #000;*/
	height: 370px;
	overflow:hidden; /*slideshow will have more than one image....*/
	width:950px;
}
.home #slideshow img {
	height:370px;
	width:950px;
}
.home #content {
	margin:15px 0px;
}
.home #content .accolade {
	color:#aaa;
	font: normal normal normal .8em/.8em Helvetica, Arial, sans-serif;
	float:right;
}


/* ============== */
/* = inner page = */
/* ============== */
.inner #content, .portfolio #content {
	font-family:'Zapfhumnst BT', Arial, sans-serif;
	margin:15px 0px;
}
.inner #content-left {
	float:left;
}
.inner #content-left img {
	border: 2px solid #000;
}
.inner #content-left p.caption {
	color:#cbcbcb;
	font: normal normal normal .8em/1.1em Arial, sans-serif;
	margin:0px;
	text-align:left;
}
.inner h2 {
	color:#CD0000;
	font: normal normal normal 16px/100% Helvetica, Arial, sans-serif;
}
.inner h3 {
	color:#666;
	font: normal normal normal 14px/100% Helvetica, Arial, sans-serif;
}
.inner #content-right {
  color:#666;
	margin-left:350px;
	width:500px;
}
.inner #content-right p, .inner #content-right ul {
	font: normal normal normal 12px/16px Helvetica, Arial, sans-serif;
	text-align:justify;
}
.inner #content-right ul {
	list-style-type: square;
}

.inner .accolade, .portfolio .accolade {
	color:#982424;
	font: normal normal normal .8em/.8em 'ZapfHumnst BT', Arial, sans-serif;
	float:right;
}

/* ================ */
/* = gallery page = */
/* ================ */

.portfolio #content {
	margin:15px 0px;
}
.portfolio #content-left {
	/* border:1px solid #bebebe;*/
	float:left;
	/*height:550px;*/
	width:750px;
}
.portfolio #portfolio-photo {
/*	border:3px solid #000;*/
	float:left;
	height:500px; /* image height is 332...we leave room for caption */
	overflow:hidden;
	width:600px;
}
.portfolio #portfolio-photo p {
	color:#cbcbcb;
	font: normal normal normal .8em/1.1em Arial, sans-serif;  
	margin:0px;
}                                                         
.portfolio #portfolio-photo img {
	display:block;
	margin-bottom:10px;
}
.portfolio h2 {
	color:#CD0000;
	font: normal normal normal 16px/100% Helvetica, Arial, sans-serif;
}
.portfolio #content-right {
/*	height:400px;*/
  color:#888;
	margin-left:745px;
	padding-bottom:75px;
	position:relative;
	width:205px; 
}
.portfolio.landing #content-left {
  /* section landing page only */
  width:auto;
}
.portfolio.landing #content-right {
  /* section landing page only */
  margin-left:640px;
  width:320px;
}
.portfolio #content-right p {
	font: normal normal normal 12px/16px Helvetica, Arial, sans-serif;   
	text-align:justify;
}
.portfolio #content-right dl {
	font: normal normal normal 12px/16px  Helvetica, Arial, sans-serif;
}
.portfolio #content-right dt {
	font-weight:bold;
	float:left;
	padding-right:6px;
}
.portfolio #content-right dd {
	
}
/* portfolio landing page lists */
.portfolio #content-right ul.section-list {
	list-style-type:none;
	margin:0px;
	padding:0px;
}
.portfolio #content-right ul.section-list li {
	display:inline;
}
.portfolio #content-right ul.section-list li a {
	background-color:#f3f3f3;
	border-bottom:1px solid #fff;
	display:block;
	padding:10px 3px;
	/* adjust text for thumbnail when it goes to 2 lines */
	text-indent: -50px;
	padding-left:55px;
}
.portfolio #content-right ul.section-list li a:hover { 
	background-color:#e5e5e5;
	text-decoration:none;
}
.portfolio #content-right ul.section-list a img {
	border:2px solid #cbcbcb;
	vertical-align:middle;
}
#portfolio-thumbs {
	/*border:1px solid #bebebe;*/
/*	bottom:0px;*/
	float:left;
	height:70px;
	margin-left:15px;
/*	position:absolute; /* to position at the bottom of the right side, even with the feature image */*/
}
.portfolio #portfolio-caption p {
	color:#cbcbcb;
	font: normal normal normal .8em/1.1em Arial, sans-serif;
}
/*** thumbnail links ***/
.portfolio #portfolio-thumbs ul {
	list-style-type:none;
	margin:0px;
	padding:0px;
	width:115px;
}
.portfolio #portfolio-thumbs li {
	display:inline;
	padding-right:5px;
}
#portfolio-thumbs li a img {
	border:2px solid #cbcbcb;
}
#portfolio-thumbs li a:hover img, #portfolio-thumbs li a.activeSlide img {
 	border:2px solid #5b5b5b;
} 
#portfolio-thumbs a:focus {
	outline:none;
}
#content-right .scroll-pane {
  /* For JScrollable panes */
  height:300px;
  overflow:auto;
}
/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */

.jspContainer
{
	overflow: hidden;
	position: relative;
}

.jspPane
{
	position: absolute;
}

.jspVerticalBar
{
	position: absolute;
	top: 0;
	right: 0;
	width: 6px;
	height: 100%;
	background: red;
}

.jspHorizontalBar
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 16px;
	background: red;
}

.jspVerticalBar *,
.jspHorizontalBar *
{
	margin: 0;
	padding: 0;
}

.jspCap
{
	display: none;
}

.jspHorizontalBar .jspCap
{
	float: left;
}

.jspTrack
{
	background: #ddd;
	position: relative;
}

.jspDrag
{
	background: #aaa;
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
	float: left;
	height: 100%;
}

.jspArrow
{
	background: #50506d;
	text-indent: -20000px;
	display: block;
	cursor: pointer;
}

.jspArrow.jspDisabled
{
	cursor: default;
	background: #80808d;
}

.jspVerticalBar .jspArrow
{
	height: 16px;
}

.jspHorizontalBar .jspArrow
{
	width: 16px;
	float: left;
	height: 100%;
}

.jspVerticalBar .jspArrow:focus
{
	outline: none;
}

.jspCorner
{
	background: #eeeef4;
	float: left;
	height: 100%;
}
.scroll-pane p {margin-right:10px;}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
	margin: 0 -3px 0 0;
}