/* CSS Document */

/* Color palette 
	page background beige: #e6e5d7
	brick red: #CC3300
*/

body {
	/* background-color:#e6e5d7;  RGB 230 229 215 */
	margin:0; padding:0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#333333;
	background-image:url(../images/WrinkleWoodPaper1.jpg);
	background-repeat:repeat;
}

#PageWrapper {
	position:relative; top:0; left:0;
	width: 778px;
	padding:0;
	margin-left:auto; margin-right:auto;
	margin-top:0; margin-bottom:0;
	/* background-color:#e1ddcd; */
	/* background-image:url(../images/homelight.jpg); */
	background-position:top left;
	background-repeat:no-repeat;
	background-color:#e6e5d7; /* RGB 230 229 215 */
}

/* For tracing.
   Use "<div id="PageWrapper" class="Trans">"
   and
   #PageWrapper.Trans {
	background-image:url(Original/WhatWeDo.jpg);
}
   on the page under development.
*/
#PageWrapper.Trans {
	background-color:transparent;
}

#RightContent { /* redefined in ootw_ie.css for Internet Explorer */
	float:right; 		/* to push down the bottom navbar */
	margin:0px 0px 0px 0px; 
	padding:0;
	width:510px;
}

#ContentWrapper { /* containing box for absolutely-positioned elements inside */
	position:relative; 
	top:0px; right:0px;
	margin:0px 0px 0px 0px; 
	padding:0;
	width:508px;
	/* for some reason, this border is necessary for Mozilla-based browsers */
	border:1px solid #e6e5d7;
}

#BottomNavBar {
	position:relative; top:0; left:0;
	clear:both;
	margin:0;padding:0;
	width:100%;
	height:16px;
}

#BottomSpacer {
	position:relative; top:0; left:0;
	clear:both;
	height:1em;
	width:100%;
	background-color:#e6e5d7;
}


#UpperRightSpacer { /* include inside Contents div to wrap text around logo, etc. */
	float:right;
	width:160px;
	height:100px; /* adjust depending on object to wrap arround */
}


/* Top Nav Bar. All the links have a background image from the single graphic file
   TopNavBar.gif, which has all the icons in two colors. The icons are shown as
   background images, and positioned as needed.
   "You are here" is shown on each page by changing the offset of the relevant link.
*/

#TopNavBar {
	position:relative; top:0; left:0;
	padding:0; margin: 0;
	width:100%;
	height:36px;
	background-color:#afab89;
}

#TopNavBar a {
	position:absolute; top:0; left:0;
	height:36px;
	background-image:url(../images/TopNavBar.gif);
}

/* this table matches the offsets in TopNavBar.gif */
#TopNavBar a.top1 {	left:0px; width:94px; background-position:0px -0px }
#TopNavBar a.top1:hover { background-position:0px -36px }
#TopNavBar a.top2 {	left:96px; width:96px; background-position:-96px 0px  }
#TopNavBar a.top2:hover { background-position:-96px -36px }
#TopNavBar a.top3 {	left:194px; width:153px; background-position:-194px 0px  }
#TopNavBar a.top3:hover { background-position:-194px -36px }
#TopNavBar a.top4 {	left:349px; width:166px; background-position:-349px 0px  }
#TopNavBar a.top4:hover { background-position:-349px -36px }
#TopNavBar a.top5 {	left:517px; width:96px; background-position:-517px 0px  }
#TopNavBar a.top5:hover { background-position:-517px -36px }
#TopNavBar a.top6 {	left:615px; width:94px; background-position:-615px 0px  }
#TopNavBar a.top6:hover { background-position:-615px -36px }
#TopNavBar a.top7 {	left:711px; width:67px; background-position:-711px 0px  }
#TopNavBar a.top7:hover { background-position:-711px -36px }

/* BottomNavBar uses offset background images for the links, just like TopNavBar */

#BottomNavBar a {
	position:absolute;
	margin:0; padding:0;
	display:block;
	height:16px;
	background-image:url(../images/BottomNavBar.gif);
}

#BottomNavBar div { /* used for non-link sections */
	position:absolute;
	margin:0; padding:0;
	display:block;
	height:16px;
	background-image:url(../images/BottomNavBar.gif);
}

/* this table matches the offsets in TopNavBar.gif */
#BottomNavBar a.bottom1 {	left:0px; width:84px; background-position:0px -0px }
#BottomNavBar a.bottom1:hover { background-position:0px -16px }
#BottomNavBar a.bottom2 {	left:84px; width:63px; background-position:-84px 0px  }
#BottomNavBar a.bottom2:hover { background-position:-84px -16px }
#BottomNavBar a.bottom3 {	left:147px; width:43px; background-position:-147px 0px  }
#BottomNavBar a.bottom3:hover { background-position:-147px -16px }
#BottomNavBar a.bottom4 {	left:190px; width:59px; background-position:-190px 0px  }
#BottomNavBar a.bottom4:hover { background-position:-190px -16px }
#BottomNavBar a.bottom5 {	left:249px; width:61px; background-position:-249px 0px  }
#BottomNavBar a.bottom5:hover { background-position:-249px -16px }
#BottomNavBar a.bottom6 {	left:310px; width:65px; background-position:-310px 0px  }
#BottomNavBar a.bottom6:hover { background-position:-310px -16px }
#BottomNavBar a.bottom7 {	left:375px; width:106px; background-position:-375px 0px  }
#BottomNavBar div.bottom7 {	left:375px; width:106px; background-position:-375px 0px  }
#BottomNavBar a.bottom8 {	left:481px; width:226px; background-position:-481px 0px  }
#BottomNavBar a.bottom8:hover {	background-position:-481px -16px  }
#BottomNavBar a.bottom9 {	left:707px; width:73px; background-position:-707px 0px  }
#BottomNavBar a.bottom9:hover { background-position:-707px -16px }

/* Left Nav Bar */
#LeftNavWrapper {
	float:left;
	width:220px;
	margin:0;
	padding:20px 0 12px 17px;
}

#LeftNavWrapper a.photocredit {
	width:100%;
	text-align:center;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#b12c1b;
	text-decoration:none;
	font-weight:bold;
	display:none;
}

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

.LeftNavWrapperLink { /* for 140x100 pix links */
	float:left;
	height:105px;
	margin:0; padding:0;
	margin-bottom:7px;
	background-image:url(../images/145x105drop.jpg);
	background-position:top left;
	background-repeat:no-repeat;
}

.LeftNavWrapperLink a {
	float:left;
}

.LeftNavWrapperLink img {
	float:left;
	width:140px; height:100px;
	border:1px solid #666666;
}

.LeftNavWrapperLink p { /* sits to the right of the image */
	float:left;
	right:0px;
	margin:8px 0 0 14px;
	padding:0;
	width:auto;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	color:black;
}

/*  Contents contains the main body of the page.
	It floats to push down the navbar.
	Use a vspacer div to position it vertically relative to LogoWrapper.
*/
#Contents {
	margin:0 20px 0 0;
	padding:0;
	overflow:visible;
}

#Contents h1 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:13px;
	color:#b12c1b;
	margin:0 -3em 0 0;
}

#Contents h1.big {
	font-size:15px;
}

#Contents h2 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:13px;
	color:#b12c1b;
	margin:0 -3em 0 0;
}

#Contents span.highlight {
	font-size:13px;
	font-weight:bold;
	color:#b12c1b;
}

#Contents span.bold {
	font-weight:bold;
}

#Contents p {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:13px;
	margin:0 0 1em 0;
}

#Contents ul {
	margin:.5em 0 0 0; padding:0;
}

#Contents ul li {
	list-style:outside url(../images/ArrowRightLight.gif);
	margin:.3em 0 0 1.5em;
	padding-top:0;
}

#Contents ul li a {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:13px;
	color:#b12c1b;
	margin:0 -3em 0 0;
	text-decoration:none;
	font-weight:bold;
}

#Contents ul li a:hover {
	text-decoration:underline;	
}

/* special divs for particular graphics */
/* The page contents are all contained withing the ContentWrapper div. */
#PageHeader {
	position:absolute;
	top:24px; left:1px;
}

#PageSubHeader {
	position:absolute;
	top:54px; left:23px;
	width:280px; height:16px;
}

#WhatsNew {
	position:absolute;
	top:3px; right:15px;
	z-index:999;
}

#WhatsNew a {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bolder;
	font-size:11px;
	color:blue;
	text-decoration:underline;
	margin-left:1em;	
}

#LogoWrapper {
	position:absolute;
	right:-2px; top:0px;
	width:160px;
	height:200px;
	/*
	background-image: url(../images/logo145Wx145H.gif);
	background-repeat:no-repeat;
	background-position:3px 27px;
	*/
}

#LogoWrapper img {
	position:absolute;
	top:28px; right:13px;
}

#RightMask { /* used to mask anything under the logo */
	float:right; /* should be right before the Content div */
	width:160px;
	height:140px;
}

#BuildingRelationships { /* home page */
	position:absolute;
	right:201px; top:13px;
	width:330px;
	height:210px;
	z-index:999;
}

#DontInterrupt { /* Home Page */
	position:absolute;
	top:236px; right:45px;
	width:466px; height:46px;
	margin:0; padding:0;
	z-index:8;
}

#Copyright {
	text-align:center;
	font-size:8pt;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:black;
	padding: .5em 0 1em 0;
}

#Copyright p {
	margin:0; padding:0;
}

.LineOfDots { /* row of dots */
	width:465px;
	margin:0;
	height:10px;
	background-image:url(../images/dot1.gif);
	background-repeat:repeat-x;
}

.clear {
    clear:both;
    height:1px;
    overflow:hidden;
	width:100%;
}

.vspacer {
	float:right;
	width:100%; height:0px; /* adjust as needed */
	padding:0; margin:0;
	clear:none;
	z-index:-999;
}