﻿

* {margin: 0; padding: 0}
body {background: #dedede; font-family: 'Times New Roman', serif; font-size: 14px; color: #000}
img {display: block}
a img {border: 0}
ul, ol {list-style-type: none}
h1, h2, h3, h4, h5, h6 {font-weight: normal}
.clear {clear: both}
.left {float: left}
.right {float: right}
.center {margin: 0 auto; display: block}
.hide {display: none}
:focus {outline: 0}

/* GLOBAL */
/**********************************************************************************************************************************************/
h3 {font-size: 18px; font-style: italic; line-height: 22px}
p {margin: 1.2em 0 0 0; line-height: 19px}
a {text-decoration: none; color: #7B2220}
em {font-style: italic}
a:hover {color: #7b2220}
#wrap-site-top {width: 1020px; margin: 0 auto; background: #fff url(images/masthead_bg.jpg) repeat-x left top} /* top gradient */
#wrap-site-bottom {width: 1020px; background: transparent url(images/bg-footer.gif) repeat-x left bottom; overflow: hidden} /* bottom gradient */
#wrap-site-center {width: 960px; padding: 0 30px; min-height: 850px} /* center the site */
#wrap-site-content-left {width: 214px; margin: 20px 10px 0 0; overflow: hidden; float: left}
#wrap-site-content-right {width: 736px; margin: 20px 0 0 0; overflow: hidden; float: right; min-height: 650px}

/* HEADER */
/**********************************************************************************************************************************************/
#header {overflow: hidden; position: relative}
#header h1 a {height: 116px; width: 960px; background: #fff url(images/masthead.jpg) no-repeat left top; overflow: hidden; text-indent: -999em; display: block}

/* SIDE NAVIGATION */
/**********************************************************************************************************************************************/
#nav {height: 412px; width: 214px; padding: 1px 0 20px 0; background: #f2eae9; overflow: hidden; line-height: 1.35;}
#nav ul {margin: 15px 0 5px 0}
#nav ul li.title {width: 214px}
#nav ul li.title a {width: 194px; padding: 2px 0 2px 20px; font-weight: bold; color: #721510; display: block}
#nav ul li {width: 214px; font-size: 13px}
#nav ul li a {width: 164px; padding: 2px 20px 2px 30px; display: block}
#nav ul li a:hover,
#nav ul li a.active {background: #d9d2d1}
#nav a {color: #4d4d4d}
/* 1ST LEV ACTIVE */
body.about #nav ul li#about a,
body.restoration #nav ul li#restorationfund a,
body.history #nav ul li#historyhome a {background: #7b2220; color: #f2eae9}
/* 2ND LEV ACTIVE */
body.diplomacy-in-action #nav ul li#dia a,
body.inside-the-home #nav ul li#inside a,
body.the-gardens #nav ul li#gardens a,
body.board-of-trustees #nav ul li#board a,
body.the-endowment #nav ul li#endowment a,
body.major-gifts-redecorations #nav ul li#gifts a,
body.events-gallery #nav ul li#gallery a,
body.fine-arts-support #nav ul li#arts a,
body.how-to-give #nav ul li#give a,
body.contact-the-fund #nav ul li#contact a,
body.the-blairs #nav ul li#theblairs a,
body.becoming-the-presidents-guest-house #nav ul li#becoming a,
body.historical-events #nav ul li#events a,
body.blair-house-guest-book #nav ul li#guestbook a,
body.buy-the-book #nav ul li#buybook a {background: #d9d2d1; color: #7b2220}

/* HOMEPAGE */
/**********************************************************************************************************************************************/
#home-main-banner {width: 960px; height: 407px; overflow: hidden; margin-top: 20px; float: left; position: relative}
#home-main-banners {width: 960px; height: 407px; overflow: hidden; position: absolute}
.home-main-banner-inner {width: 960px; height: 407px; overflow: hidden; position: relative}
.home-main-banner-left {width: 636px; height: 407px; float: left; overflow: hidden; position: relative}
.home-main-banner-right {width: 324px; height: 407px; float: right; position: relative; background: #000 url(images/home_banner_bg.jpg) no-repeat left top}
.home-main-banner-right p {margin: 35px 40px 0 40px; width: 245px; color: #fff; font-size: 17px; line-height: 24px}
#home-main-banner-nav {position: absolute; z-index: 20; bottom: 20px; left: 671px; overflow: hidden}
#home-main-banner-nav li {margin: 0 4px; float: left}
#home-main-banner-nav li a {height: 14px; width: 14px; background: #777775; display: block; text-indent: -9999px}
#home-main-banner-nav li.activeSlide a {background: #fff}
.home-box {width: 311px; height: 346px; margin: 20px 0 0 0; display: block; float: left; color: #fff; text-decoration: none; text-transform: uppercase; font-size: 14px; line-height: 43px; text-align: center}
.home-box:hover {color: #a8a8a8}
a#about {background: #000 url(images/home_nav_about.jpg) no-repeat left top; margin-right: 14px}
a#restoration {background: #000 url(images/home_nav_restoration.jpg) no-repeat left top; margin-right: 13px}
a#history {background: #000 url(images/home_nav_history.jpg) no-repeat left top}

/* H2 HEADERS */
/**********************************************************************************************************************************************/
h2#about-heading {height: 407px; width: 736px; background: #fff url(images/about_header.jpg) no-repeat left top; overflow: hidden; text-indent: -999em; display: block}
h2#restoration-heading {height: 407px; width: 736px; background: #fff url(images/restoration_header.jpg) no-repeat left top; overflow: hidden; text-indent: -999em; display: block}
h2#history-heading {height: 407px; width: 736px; background: #fff url(images/history_header.jpg) no-repeat left top; overflow: hidden; text-indent: -999em; display: block}

.text-wrap {width: 736px; overflow: hidden}
.left-col {margin: 20px 0 0 0; width: 484px}
.right-col {margin: 20px 0 0 40px}
.single-col {margin: 20px 0 0 0; width: 696px}

.left-col a, .single-col a {text-decoration: underline;}

.red {color: #7B2220; font-weight: bold;}

/* ABOUT */
/**********************************************************************************************************************************************/
.ith-rooms {height: 407px; width: 736px; background: #f2eae9; position: relative}
.ith-rooms-img {height: 351px; width: 504px}
.ith-rooms-nav {width: 257px; position: absolute; bottom: 0; right: 0}
.ith-rooms-nav ul {height: 351px; overflow: auto}
.ith-rooms-nav ul li {width: 232px; padding: 0 0 0 25px; font-size: 10px; line-height: 49px; text-transform: uppercase; text-align: center}
.ith-rooms-nav ul li a {height: 51px; width: 232px; display: block; color: #4d4d4d}
.ith-rooms-nav ul li+li a {height: 49px; border-top: 1px solid #d9d2d1; color: #4d4d4d}
.ith-rooms-nav ul li:hover {background: transparent url(images/right-nav-arrow.png) no-repeat left center}
/* ABOUT SIDE NAVIGATION */
body.lincoln-room .ith-rooms-nav ul li#rooms-lincoln,
body.blair-drawing-rooms .ith-rooms-nav ul li#rooms-drawing,
body.library .ith-rooms-nav ul li#rooms-libray,
body.lee-dining-room .ith-rooms-nav ul li#rooms-lee,
body.truman-study .ith-rooms-nav ul li#rooms-truman,
body.jackson-place-conference-room .ith-rooms-nav ul li#rooms-conference,
body.jackson-place-sitting-room .ith-rooms-nav ul li#rooms-sitting {background: transparent url(images/right-nav-arrow.png) no-repeat left center}
body.lincoln-room .ith-rooms-nav ul li#rooms-lincoln a,
body.blair-drawing-rooms .ith-rooms-nav ul li#rooms-drawing a,
body.library .ith-rooms-nav ul li#rooms-libray a,
body.lee-dining-room .ith-rooms-nav ul li#rooms-lee a,
body.truman-study .ith-rooms-nav ul li#rooms-truman a,
body.jackson-place-conference-room .ith-rooms-nav ul li#rooms-conference a,
body.jackson-place-sitting-room .ith-rooms-nav ul li#rooms-sitting a {color: #7b2220}

.ith-navbutton {width: 190px; font-size: 10px; text-align: center}
.nav-instruct {margin: 0; padding: 10px 10px 8px 10px; line-height: 14px; text-transform: uppercase; background: #fff url(images/border-nav-instruct.gif) no-repeat left top; border-bottom: 2px solid #bab5b5}
.view-detail {margin-top: 2em; line-height: 48px; text-transform: uppercase; background: /*#e4eae7*/ #f2eae9 url(images/bg-view-details.png) no-repeat 0 0}
.make-gift {margin: 0; line-height: 48px; text-transform: uppercase; background: #ede1e0 url(images/bg-view-details.png) no-repeat 0 0}
.buy-book {margin-top: 2em; line-height: 48px; text-transform: uppercase; background: #ede1e0 url(images/bg-view-details.png) no-repeat 0 0}
.view-detail a,
.make-gift a,
.buy-book a {width: 190px; height: 48px; display: block}
/*.end-gallery {margin: 0; line-height: 14px; text-transform: uppercase; background: #ede1e0 url(images/bg-view-details.png) no-repeat 0 0} CMO */
.end-gallery { margin:0 0 2px; text-transform: uppercase; background: #EDE1E0 url(images/bg-view-details.png) no-repeat 0 0; height: 48px;}
/*.end-gallery a {padding: 10px 0; display: block}*/
.end-gallery a { padding: 10px 0; display: block; line-height: 14px;}
.end {font-size: 11px; line-height: 16px; text-align: left; font-style: italic; }

/*ul.bullets {margin: 1.2em 0 0 0; overflow: hidden}*/
ul.bullets {
	margin: 6px 0 0 0; overflow: hidden
}
ul.bullets li, ul.bullets2 li {width: 90%;
	margin: 0 0 4px 0;
	padding: 0 0 0 12px;
	background: transparent url(images/list-dot.gif) no-repeat top left;}

ul.bullets2 {
margin: 12px 0 0 0;
overflow: hidden;
}

/* RESTORATION */
/**********************************************************************************************************************************************/
.restoration-mgr {height: 407px; width: 736px; background: #f2eae9; position: relative}
.restoration-mgr-img {height: 351px; width: 504px}
.restoration-mgr-nav {width: 257px; position: absolute; bottom: 0; right: 0}
.restoration-mgr-nav ul {height: 351px; overflow: auto}
.restoration-mgr-nav ul li {width: 212px; height: 51px; padding: 0 0 0 25px; font-size: 10px; line-height: 1.25em; text-transform: uppercase; text-align: center; background: transparent url(images/right-nav.gif) no-repeat left top}
.restoration-mgr-nav ul li a, .restoration-mgr-nav ul li.title>h4 {height: 51px; width: 202px; display: block; text-align: center; padding: 0 5px 0 5px; padding-top: 20px; color: #4d4d4d}
.restoration-mgr-nav ul li:hover {background: transparent url(images/right-nav-arrow.png) no-repeat left center}
.restoration-mgr-nav ul li.title { background: #7B2220; margin-left: 25px; margin-right: 0; width: 187px; padding: 0 13px 0 12px; }
.restoration-mgr-nav ul li.title:hover { background: #7B2220; }
.restoration-mgr-nav ul li.title>h4 { font-size: 13px; margin: 0; width: 180px; font-weight: bold; color: #fff; }
.restoration-mgr-nav ul li.twoline a {padding-top: 13px}
.restoration-mgr-navbutton {width: 190px; font-size: 10px; text-align: center}

/* RESTORATION SIDE NAVIGATION */
body.garden .restoration-mgr-nav ul li#garden,
body.historic-american-prints-collection .restoration-mgr-nav ul li#historic-american-prints-collection,
body.first-ladys-bathroom .restoration-mgr-nav ul li#first-ladys-bathroom,
body.principal-suite-master-bathroom .restoration-mgr-nav ul li#principal-suite-master-bathroom,
body.foreign-ministers-bathroom .restoration-mgr-nav ul li#foreign-ministers-bathroom,
body.embassy-kitchen .restoration-mgr-nav ul li#embassy-kitchen,
body.tiffany-china-silver .restoration-mgr-nav ul li#tiffany-china-silver,
body.anna-weatherly-china .restoration-mgr-nav ul li#anna-weatherly-china,
body.butlers-pantry .restoration-mgr-nav ul li#butlers-pantry,
body.principal-suite-master-bedroom .restoration-mgr-nav ul li#principal-suite-master-bedroom,
body.drawing-rooms .restoration-mgr-nav ul li#drawing-rooms,
body.foreign-ministers-bedroom .restoration-mgr-nav ul li#foreign-ministers-bedroom,
body.foreign-ministers-sitting-room .restoration-mgr-nav ul li#foreign-ministers-sitting-room,
body.lee-dining-room .restoration-mgr-nav ul li#lee-dining-room ,
body.guest-bedrooms .restoration-mgr-nav ul li#guest-bedrooms  {background: transparent url(images/right-nav-arrow.png) no-repeat left center}
body.garden .restoration-mgr-nav ul li#garden a,
body.historic-american-prints-collection .restoration-mgr-nav ul li#historic-american-prints-collection a,
body.first-ladys-bathroom .restoration-mgr-nav ul li#first-ladys-bathroom a,
body.principal-suite-master-bathroom .restoration-mgr-nav ul li#principal-suite-master-bathroom a,
body.foreign-ministers-bathroom .restoration-mgr-nav ul li#foreign-ministers-bathroom a,
body.embassy-kitchen .restoration-mgr-nav ul li#embassy-kitchen a,
body.tiffany-china-silver .restoration-mgr-nav ul li#tiffany-china-silver a,
body.anna-weatherly-china .restoration-mgr-nav ul li#anna-weatherly-china a,
body.butlers-pantry .restoration-mgr-nav ul li#butlers-pantry a,
body.principal-suite-master-bedroom .restoration-mgr-nav ul li#principal-suite-master-bedroom a,
body.drawing-rooms .restoration-mgr-nav ul li#drawing-rooms a,
body.foreign-ministers-bedroom .restoration-mgr-nav ul li#foreign-ministers-bedroom a,
body.foreign-ministers-sitting-room .restoration-mgr-nav ul li#foreign-ministers-sitting-room a,
body.lee-dining-room .restoration-mgr-nav ul li#lee-dining-room a,
body.guest-bedrooms .restoration-mgr-nav ul li#guest-bedrooms a {color: #7b2220}

/* INTERACTIVE CALLOUT PAGES */
/**********************************************************************************************************************************************/
#detail {
	background-color: #000;
	border: 1px solid #efefef;
	position: relative;
	z-index: 1;
	display: none;
	font-size: .85em;
}
#detail h4 {
	font-weight: bold;
	font-size: 1.2em;
	margin: 0;
	padding: 0;
}
#detail p {
	margin: 0;
	padding-top: 0;
	padding-bottom: 1em;
}
.detail_close {
	background: transparent url('images/details-close.png') no-repeat 0 0;
	width: 16px;
	height: 16px;
	position: absolute;
	right: 0px;
	top: -25px;
	z-index: 3;
}
ul.callouts {
	position: absolute;
	z-index: 2;
	top: 0px;
	left: 0px;
}
ul.callouts li {
	background: transparent url('images/callout.png') no-repeat 0 0;
	width: 40px;
	height: 39px;
	padding: 0;
	margin: 0;
	position: absolute;
}
ul.callouts li>div {
	position: absolute;
	width: auto;
	top: 20px;
	left: 20px;
	display:none;
	overflow: hidden;
	color: #fff;
}
ul.callouts li>div.pic {
	width: 450px;
}
ul.callouts li>div.wide {
	width: 570px;
}
ul.callouts li>div.right {
	left: auto;
	right: 10px;
}
ul.callouts li>div.bottom {
	top: auto;
	bottom: 20px;
}
ul.callouts li>div>img {
	float: left;
	width: 200px;
}
ul.callouts li>div>div {
	background: transparent url('images/callout-bg.png') repeat 0 0;
	float: left;
	padding: 10px;
	width: 215px;
	overflow: hidden;
}
ul.callouts li>div.wide>div {
	width: 335px;
}
ul.callouts li:hover>div, ul.callouts li.hover, ul.callouts li>div.hover {
	position: absolute;
	display:block;
	z-index: 10;
}
/* IE8, IE9 */
ul.callouts li:hover {
	position: absolute/;
	display:block/;
	z-index: 10/;
	position: absolute\9;
	display:block\9;
	z-index: 10\9;
}

.photo-gallery { z-index: 2; display: none; width: 970px; }


/* RESTORATION */
/**********************************************************************************************************************************************/
ul.donors {margin: 1.2em 0 0 0; overflow: hidden}
/*ul.donors li {width: 230px; margin: 0 0 4px 0; padding: 0 0 0 12px; background: transparent url(images/list-dot.gif) no-repeat left center; float: left} CMO */
ul.donors li {width: 230px; margin: 0 0 5px 0; padding: 0 0 0 12px; background: transparent url(images/list-dot.gif) no-repeat top left; float: left}

ul.support {margin: 1.2em 0 0 0; overflow: hidden}
ul.support li {width: 460px; margin: 0 0 4px 0; padding: 0 0 0 12px; background: transparent url(images/list-dot.gif) no-repeat left top}
ul.support {margin: 1.2em 0 0 0; overflow: hidden}
ul.support li ul {width: 460px; margin: 0 0 4px 0; padding: 0 0 0 12px; background: none}
ul.support li ul li {background: none}

ul.board-first {width: 240px; margin: .5em 30px 6em 0; float: left; overflow: hidden}
div.board, ul.board {width: 200px; margin: .5em 0 1em 0; float: left; overflow: hidden}
ul.board li, ul.board-first li {margin: 0 0 4px 0; padding: 0 0 0 12px; background: transparent url(images/list-dot.gif) no-repeat left top}
div.board { margin-bottom: .25em; }

/* HISTORY */
/**********************************************************************************************************************************************/
.history-events {height: 407px; width: 736px; background: #f2eae9; position: relative}
.history-events-img {height: 351px; width: 504px}
.history-events-nav {width: 257px; position: absolute; bottom: 0; right: 0}
.history-events-nav ul {height: 351px; overflow: auto}
.history-events-nav ul li {width: 232px; padding: 0 0 0 25px; font-size: 10px; line-height: 49px; text-transform: uppercase; text-align: center}
.history-events-nav ul li a {height: 51px; width: 232px; display: block; color: #4d4d4d}
.history-events-nav ul li+li a {height: 49px; border-top: 1px solid #d9d2d1}
.history-events-nav ul li:hover {background: transparent url(images/right-nav-arrow.png) no-repeat left center}

div.guestbook, ul.guestbook {width: 300px; margin: 1.2em 2em 1em 0; float: left; overflow: hidden}
ul.guestbook li {/*margin: 0 0 4px 0; CMO */ margin: 0 0 15px 0; padding: 0 0 0 12px; background: transparent url(images/list-dot.gif) no-repeat left top}
div.guestbook { margin-bottom: .25em; }

/* EVENTS SIDE NAVIGATION */
body.jackson-and-the-kitchen-cabinet .history-events-nav ul li#events-jackson,
body.globe-and-congressional-globe .history-events-nav ul li#events-globe,
body.webster-ashburton-treaty .history-events-nav ul li#events-webster,
body.secession-and-general-lee .history-events-nav ul li#events-lee,
body.general-tecmuseh-sherman .history-events-nav ul li#events-tecmuseh,
body.world-war-II .history-events-nav ul li#events-wwii,
body.truman-at-blair-house .history-events-nav ul li#events-truman {background: transparent url(images/right-nav-arrow.png) no-repeat left center}

body.jackson-and-the-kitchen-cabinet .history-events-nav ul li#events-jackson a,
body.globe-and-congressional-globe .history-events-nav ul li#events-globe a,
body.webster-ashburton-treaty .history-events-nav ul li#events-webster a,
body.secession-and-general-lee .history-events-nav ul li#events-lee a,
body.general-tecmuseh-sherman .history-events-nav ul li#events-tecmuseh a,
body.world-war-II .history-events-nav ul li#events-wwii a,
body.truman-at-blair-house .history-events-nav ul li#events-truman a {color: #7b2220}

/* FOOTER */
/**********************************************************************************************************************************************/
#footer {padding: 50px 0 25px 0; clear: both; text-transform: uppercase; font-size: 11px; overflow: hidden}
#footer p {margin: 0; padding: 0; line-height: normal}
#footer ul {overflow: hidden}
#footer ul li {margin: 0 10px 0 0; float: left}
#footer ul li+li {padding: 0 0 0 10px; background: transparent url(images/footer-divider.gif) no-repeat left center}
#footer ul li+li+li {margin: 0}
#footer a {color: #4d4d4d}	

/* SITEMAP */
/**********************************************************************************************************************************************/
ul.site-map, ul.site-map li { list-style:square; margin: 2px 15px;}

.left-col h3, .single-col h3 {
	font-size: 18px;
	font-style: italic;
}

.left-col p, .single-col p {
margin: 1.2em 0 0 0;
line-height: 19px;
}

#buy-heading {height: 407px; width: 736px; background: #fff url(images/buy_header.jpg) no-repeat left top; overflow: hidden; text-indent: -999em; display: block}

.no-em {
	font-style:normal;
}

#buy-heading2 {height: 407px; width: 736px; background: #fff url(images/buy_ornament.jpg) no-repeat left top; overflow: hidden; text-indent: -999em; display: block}

.no-em {
	font-style:normal;
}

#buy-heading3 {height: 407px; width: 736px; background: #fff url(images/buy_book.jpg) no-repeat left top; overflow: hidden; text-indent: -999em; display: block}

.no-em {
	font-style:normal;
}

#buy-heading4 {height: 407px; width: 736px; background: #fff url(images/buy_ornament2.jpg) no-repeat left top; overflow: hidden; text-indent: -999em; display: block}

.no-em {
	font-style:normal;
}