/* CSS Document - National Building Museum */

body {
    width: 100%;
	padding:0px 0px 40px 0px;
	margin:0px;
	background-image:url(/assets/images/homepage/2011/bkgr-header.gif);
	background-position:left -40px;
	background-repeat:repeat-x;
	font-family:Arial, Helvetica, sans-serif;
	color:#000000;
	font-size: 12px;
	text-align : center;
}

p, li, ol, ul, table, tr, th, td, .Explicit {
	font-family:Arial, Helvetica, sans-serif;
}

/*---------- TYPOGRAPHY ----------*/


/*---------- IMPORTANT!!! No default bottom/top margin, except on <p> tags */

/* Because regular users will be adding much content, all margins removed above and below <h>* tags...
   To add space below a heading, user will instead need to enter hard returns and breaks to achieve 
   desired appearance...*/


h1, h2, h3, h4 {
	margin-top:0px;
	margin-bottom:0px;
}

p {
	margin-top:0px;
}

h1 {
	font-size:26px;
	line-height:29px;
	font-family:Arial, Helvetica, sans-serif;
	color:black;
	font-weight:bold;	
	text-align: left;
}

h2 {
	font-size:16px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	line-height:19px;
	color:#494949;
	text-align: left;
}

h2 a:link {	
	color:#494949;
	text-decoration:underline;
}

h2 a:hover { color:black; }

h3 {
	font-size:14px;
	line-height:17px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#494949;
	text-align: left;
}

h3 a:link {	
	color:#494949;
	text-decoration:underline;
}

h3 a:hover { color:black; }

h4 {
	font-size:12px;
	line-height:16px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-style:normal;
	color:#494949;
	text-align: left;
}

h4 a:link {	
	color:#494949;
	text-decoration:underline;
}

h4 a:hover { color:black; }

p {
	font-size:12px;
	line-height:16px;
	text-align: left;
}

p.small {
	font-size:11px;
	line-height:14px;
	text-align: left;
}

/* removed any margin settings on links...they are inline by default and should appear after a <br /> tag
   inside main <p> text....alternately nest in <p></p> tags...all <p> has margin settings above */ 

a, a:link {
	color:#007698;
	text-decoration:underline;
}
a:hover { color:black; }
	
td {
	font-size:12px;
	line-height:16px;
}

#mainbody {
	padding:0px 0px 0px 10px;
}

#mainbody p {
	font-size:12px;
	line-height:16px;
}

#mainbody ul {
	list-style-type:none;
	margin-left:30px;
	margin-right:30px;
	padding-left:0px;
}

#mainbody li {
	list-style-type:disc;
	padding-bottom:10px;
}

#mainbody ol {
	margin-left:48px;
	margin-right:30px;
	padding-left:0px;
}

#mainbody .sponsor {
	font-size:11px;
	line-height:14px;
	margin:10px 30px 0 30px;
}

#mainbody .footer {
	text-align:center;
	font-weight:bold;
	margin-top:10px;
}

/*---------- MISC. ----------*/

a img,:link img,:visited img { border:none }

/* (float items left) */
.left {
	float:left;
	margin:0px 10px 5px 0px;
}

/* (float items right) */
.right {
	float:right;
	margin:0px 0px 5px 10px;
}

.rule {
	border-bottom:1px solid #e3decb;
	margin:10px 0px 10px 0px;
	padding:0px;
	clear: both;
}

/* (images with captions, large and small, vert and horiz.) */


.caption {
	font-size:9px;
	font-style:none;
	margin:0px;
	padding:5px 0px 0px 0px;
	line-height:11px;
	width:120px;
}

.credit {
	font-size:9px;
	font-style:none;
	margin:0px;
	padding:5px 0px 0px 0px;
	line-height:11px;
	width:120px;
}

.imgVertRt {
	float:right;
	margin:0px 0px 15px 20px;
}

.imgVertRt .caption {
	font-size:9px;
	font-style:none;
	margin:0px;
	padding:5px 0px 0px 0px;
	line-height:11px;
	width:120px;
}

.imgVertRt .credit {
	font-size:9px;
	font-style:none;
	margin:0px;
	padding:5px 0px 0px 0px;
	line-height:11px;
	width:120px;
}

.imgVertLt {
	float:left;
	margin:0px 20px 15px 0px;
	display: inline-block
}

.imgVertLt .caption {
	font-size:9px;
	font-style:none;
	margin:0px;
	padding:5px 0px 0px 0px;
	line-height:11px;
	width:120px;
}

.imgVertLt .credit {
	font-size:9px;
	font-style:none;
	margin:0px;
	padding:5px 0px 0px 0px;
	line-height:11px;
	width:120px;
}

.imgHorRt {
	width:252px;
	float:right;
	margin:0px 0px 15px 20px;
	display: inline-block
}

.imgHorRt .caption {
	font-size:9px;
	font-style:none;
	margin:0px;
	padding:5px 0px 0px 0px;
	line-height:11px;
	width:252px;
}

.imgHorRt .credit {
	font-size:9px;
	font-style:none;
	margin:0px;
	padding:5px 0px 0px 0px;
	line-height:11px;
	width:252px;
}

.imgHorLt {
	width:252px;
	float:left;
	margin:0px 20px 15px 0px;
	display: inline-block
}
.imgHorLt .caption {
	font-size:9px;
	font-style:none;
	margin:0px;
	padding:5px 0px 0px 0px;
	line-height:11px;
	width:252px;
}

.imgHorLt .credit {
	font-size:9px;
	font-style:none;
	margin:0px;
	padding:5px 0px 0px 0px;
	line-height:11px;
	width:252px;
}


/* header elements */

img.logo {
	position:absolute;
	left:0px;
	top:38px;	
	z-index:20;
}

#header {
	position:relative;
	width:900px;
	height:181px;
	margin:0px auto 0px auto;
	background-color:transparent;
	z-index:20;
	border: 0 none;
	font-weight: inherit;
	padding: 0;
	vertical-align: baseline;
}

#utility-nav {
	height:32px;
	position:absolute;
	top:8px;
	left:0px;
	width:900px;
	border: 0 none;
	font-weight: inherit;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

#ut-search {
	float:right;
	width:290px;
	border: 0 none;
	font-weight: inherit;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

#ut-search img, #ut-home img {
	float:left;
	margin-right:10px;
	margin-top: 0px;	
}

#ut-home {
	float:left;
	width:150px;	
}

#utility-nav a:link, #utility-nav a:visited, #utility-nav p {
	color:#000000;
	font-size:12px;
	line-height:22px;
	text-decoration:none;	
}

#utility-nav form {
	height:20px;
	float:left;
	margin-right:10px;	
	margin-top:-2px;
}

#utility-nav form .submit {
	float:left;
	margin-top:1px;
}

#utility-nav form .field {
	width:164px;
	height:21px;
	background-image:url(/assets/images/homepage/2011/search-bkgr.gif);
	background-position:left top;
	background-repeat:no-repeat;
	padding:0px 5px 0px 5px;
	color:#000000;
	font-size:12px;
	line-height:19px;
	font-family:Arial, Helvetica, sans-serif;
	border:0;
	border:none;
}

#primary-nav {
	list-style-type:none;
	padding:0px;
	margin:0px;
	position:absolute;
	left:0px;
	top:130px;
}

#primary-nav li {
	padding:0px;
	margin:0px;
	margin-right:4px;
	float:left;
}

#primary-nav li a:link, #primary-nav li a:visited {
	text-indent:-9999px;
	font-size:1px;
	color:#333333;
	width:109px;
	height:44px;
	display:block;
}

/* plan your visit link */
#primary-nav li.pn-visit a {
	background-image:url(/assets/images/homepage/2011/nav-sprites/nav-visit.gif);	
	background-position:0px -2px;
	background-repeat:no-repeat;
}

#primary-nav li.pn-visit a:hover {
	background-position:-109px -2px;
}

#primary-nav li.pn-visit a:active {
	background-position:-218px -2px;
}

/* exhibitions/collections link */
#primary-nav li.pn-exhibit a {
	background-image:url(/assets/images/homepage/2011/nav-sprites/nav-exhibitions.gif);	
	background-position:0px -2px;
	background-repeat:no-repeat;
}

#primary-nav li.pn-exhibit a:hover {
	background-position:-109px -2px;
}

#primary-nav li.pn-exhibit a:active {
	background-position:-218px -2px;
}

/* adult programs link */
#primary-nav li.pn-programs a {
	background-image:url(/assets/images/homepage/2011/nav-sprites/nav-programs.gif);	
	background-position:0px -2px;
	background-repeat:no-repeat;
}

#primary-nav li.pn-programs a:hover {
	background-position:-109px -2px;
}

#primary-nav li.pn-programs a:active {
	background-position:-218px -2px;
}

/* families/teens link */
#primary-nav li.pn-families a {
	background-image:url(/assets/images/homepage/2011/nav-sprites/nav-families.gif);	
	background-position:0px -2px;
	background-repeat:no-repeat;
}

#primary-nav li.pn-families a:hover {
	background-position:-109px -2px;
}

#primary-nav li.pn-families a:active {
	background-position:-218px -2px;
}

/* schools/educators link */
#primary-nav li.pn-schools a {
	background-image:url(/assets/images/homepage/2011/nav-sprites/nav-schools.gif);	
	background-position:0px -2px;
	background-repeat:no-repeat;
}

#primary-nav li.pn-schools a:hover {
	background-position:-109px -2px;
}

#primary-nav li.pn-schools a:active {
	background-position:-218px -2px;
}

/* join/donate link */
#primary-nav li.pn-join a {
	background-image:url(/assets/images/homepage/2011/nav-sprites/nav-join.gif);	
	background-position:0px -2px;
	background-repeat:no-repeat;
}

#primary-nav li.pn-join a:hover {
	background-position:-109px -2px;
}

#primary-nav li.pn-join a:active {
	background-position:-218px -2px;
}

/* shop link */
#primary-nav li.pn-shop a {
	background-image:url(/assets/images/homepage/2011/nav-sprites/nav-shop.gif);	
	background-position:0px -2px;
	background-repeat:no-repeat;
}

#primary-nav li.pn-shop a:hover {
	background-position:-109px -2px;
}

#primary-nav li.pn-shop a:active {
	background-position:-218px -2px;
}

/* about us */

#primary-nav li.pn-about {
	margin-right:0px;	
}

#primary-nav li.pn-about a {
	background-image:url(/assets/images/homepage/2011/nav-sprites/nav-about.gif);	
	background-position:0px -2px;
	background-repeat:no-repeat;
}

#primary-nav li.pn-about a:hover {
	background-position:-109px -2px;
}

#primary-nav li.pn-about a:active {
	background-position:-218px -2px;
}

/* content area */

#content {
	overflow:hidden;
	width:900px;
	margin:0px auto 0px auto;
	text-align : left;
}

/*---------- MAIN WRAPPER STYLES ----------*/

textarea, input, select, option {
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:black;
}

#loginBox td {
color:#000000;
font-size:8pt;
}

#loginBox td a {
color:#000000;
text-decoration:none;
}

#loginBox td a:hover {
text-decoration:underline;
}

#mainNavContainer {
background:url(/assets/images/wrpr/shadownavbtm.gif) left bottom repeat-x; 
padding-bottom:4px;
}

#mainNav {
background:url(/assets/images/wrpr/navbg.gif) repeat-x;
}

#searchBox {
padding:2px 0px 0px 0px;
}

#searchBox input.textboxes {
font-size:10px;
padding-left:3px;
}

#breadCrumb {
font-size:10px;
padding-left:227px;
width:460px;
}

#leftNav {
margin:0 0 20px 0;
padding:0;
list-style:none;
}

#leftNav li {
border-bottom:1px solid #e2dfce;
font-size:11px;
}

#leftNav li.sectionHeader {
padding:10px;
color:#107195;
font-weight: bold;
}

#leftNav a {
display:block;
color:#000000;
text-decoration:none;
padding:7px;
font-size:11px;
font-weight:normal;
}

#contentDiv {
	padding:0px 0px 20px 0px;
	width:680px;
}

/* Convio Section nav styles*/

.navigationMenu {
margin:0;
margin-bottom:20px;
padding:0;
list-style:none;
}

.navigationItem {
border-bottom:1px solid #e2dfce;
font-size:14px;
}

.navigationItemLabel {
padding:7px;
color:#107195;
font-weight: bold;
}

.navigatonItem a {
display:block;
color:#000000;
text-decoration:none;
padding:7px;
font-size:11px;
}

.navigationSubMenu {
TEXT-INDENT: 15px;
}



/*------- Content Right Feature Box -------*/


.featBox {
	width:204px;
	float:right;
	margin:0px 0px 20px 25px;
	border:1px solid #e2dfce;
}

.featBoxExh {
	width:204px;
	float:right;
	margin:0px 0px 20px 25px;
	border:0px;
}

.featBoxExhInside {
	width:204px;
	margin:0px 0px 10px 0px;
	border:1px solid #e2dfce;
}

.featBoxHead {
	background-color:#f0eee5;
}

.indent {
	padding:0px 0px 0px 7px;
}



/*------ Content Banner Area ------*/

.contentBanner {
	padding:0px 0px 20px 0px;
}

.contentVertBanner {
	padding:0px 15px 0px 0px;
	float:left;
	width:235px;
}


/*------ Content Landing pages ------*/
 
/*-- (HORIZONTAL) --*/ 
 
/*--parent landing page container cells--*/
.landing td {
 padding:15px 0px 20px 0px;
 border-bottom:1px solid #e2dfce;
}
 
.landing td.last {
 border-bottom:none;
 padding-bottom:0px;
}
 
/*--second row table--*/
.landing .level2 {
 background-image:url(/assets/images/display-template-images/landing_linebkgr2.gif);
 background-position:386px top;
 background-repeat:repeat-y;
}
 
/*--second row table--*/
.landing .level3 {
 background-image:url(/assets/images/display-template-images/landing_linebkgr3.gif);
 background-position:left top;
 background-repeat:repeat-y;
}
 
/*--cancel out styles set on parent table td's--*/
.landing .level2 td, .landing .level3 td {
 border-bottom:none;
 padding:0px;
}

/*-- (VERTICAL) --*/ 

.landingV {
	padding: 10px 0px 0px 0px;
}

.landingV .top {
 background-image:url(/assets/images/display-template-images/landing_linebkgr2.gif );
 background-position:275px top;
 background-repeat:repeat-y;
}

.landingV td.lineBkgr {
 background-image:url(/assets/images/display-template-images/landing_linebkgr4.gif);
 background-position:left center;
 background-repeat:repeat-x;
 background-color:#FFFFFF;
}

.landingV .bot {
 background-image:url(/assets/images/display-template-images/landing_linebkgr3.gif );
 background-position:left top;
 background-repeat:repeat-y;
}

/*------ Content mini-calendar ------*/

.calendar table {padding: 0; margin:0; margin-bottom:20px;}
.calendar td.monthTitle {text-align:left; width:auto; font: 11pt/11pt Arial; font-weight:bold; background: #bfbeba; color: #000000; vertical-align:center; padding: 5px; height:20px; border-left:1px solid white; border-right:1px solid white; border-bottom:3px solid white;}
.calendar td.monthTitle a:link, .calendar td.monthTitle a:visited {color: #007698;}
.calendar th {width:15px; font: 7pt/7pt Arial; font-weight:bold; background: #bfbeba; color: #000000; margin: 3px; padding: 2px 5px; border-bottom:1px solid white;}
.calendar th.leftCal {border-left:1px solid white;}
.calendar th.rightCal {border-right:1px solid white;}
.calendar td {font: 8pt/8pt Arial; background: #d7d6d4; color: #000000;  padding: 6px 6px 6px 5px; margin:0; text-align:center; vertical-align:center; border:1px solid #fff;}
.calendar td.notInMonth {background: #d7d6d4;}
.calendar td a, .calendar td a:hover, .calendar td a:visited {display:block; color:#007698; text-decoration:none;}

/* (school calendar styles) */

.schoolcalendar {
	font-size:12px;
	background-color:#FFFFFF;
	margin-left:auto;
	margin-right:auto;
	width:670px;
	border: none;
}

.schoolcalendar td {
	border: 1px solid #E2DFCE;
	padding: 0;
	vertical-align:top;
	border-collapse:collapse;
}

#mainbody table.schoolcalendar ul {
	margin:0px 10px 15px 10px;	
	padding:0;
	list-style-type:none;
}

#mainbody table.schoolcalendar li {
	margin: 0px;
	padding: 2px 0px 0px 0px;
}

#mainbody .schoolcalendar .monthname {
	padding: 20px 0 5px 0;
	font-size:16px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	line-height:19px;
	color:#107195;
	border:none;
}

.schoolcalendar .weekday {
	padding: 2px 0 2px 0;
	font-size:12px;
	line-height:16px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-style:normal;
	color:black;
	text-align:center;
	vertical-align:middle;
}

.schoolcalendar .full, a.full {
	/* background-color:#CCCCCC; */
	text-decoration:line-through;
}

#mainbody .schoolcalendar p.date {
	margin: 0;
	padding: 5px;
	
	font-size:18px;
	color:#D6D3C3;
	text-align:right;
	display:block;
}

.schoolcalendar .empty {
	background-color:white ;
	border:1px solid #E2DFCE;
}

.schoolcalendar .holiday .content{
	text-align:center;
	
}

.schoolcalendar .content {
	padding: 5px;
	font-size:11px;
}

#mainbody .schoolcalendar p.time {
	margin:0;
	font-size:10px;
	font-size:11px;
	line-height:16px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-style:normal;
	color:black;
}

.schoolnav {
	float:right;
	border: 1px solid #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	padding: 5px;
	margin-left: 10px;
}

.schoolnav a {
	
	display:block;
	text-decoration:none;
	color:#0099FF;
	padding:5px 3px 5px 3px;
}

.schoolnav a:hover {
	background-color:#0099FF;
	color:#000000;
}


/* footer */

#footer {
	margin-top:10px;
}

/* footer, top portion */

#footer-top {
	width:900px;
	margin:0px auto 5px auto;
	overflow:hidden;
}

.foot-col {
	width:219px;
	margin-right:8px;
	float:left;
}

.foot-col-last {
	width:210px;
	margin-right:0px;
	float:left;	
}

.foot-col-last img {
	float:left;
	margin:0px 10px 10px 0px;	
	max-width:32px;
	height:32px;
	/* let's help older IEs out when re-rendering images */
	*height:auto;
	-ms-interpolation-mode: bicubic;
}

.foot-col-last img.itunes {
	margin-top:-2px;
	margin-left:-1px;
	max-width:35px;
	height:35px;
	*height:auto;
}

/* CSS-generated circles for metro lines, will show as squares on some browsers */

.red-line {
	width:12px;
	height:12px;
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	background:#ed1d23;
	float:left;
	margin-right:5px;
}

.green-line {
	width:12px;
	height:12px;
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	background:#0b9444;
	float:left;
	margin-right:5px;
}

.yellow-line {
	width:12px;
	height:12px;
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	background:#ffde16;
	float:left;
	margin-right:5px;
}


/* footer, bottom portion */

#footer-bot {
	border-top:1px solid #c1131e;
	padding:20px 0px 20px 0px;
}

#footer-bot-content {
	width:900px;
	margin:0px auto 0px auto;
	overflow:hidden;
}

#footer-bot ul {
	list-style-type:none;
	margin:0px;
	padding:0px;
}

#footer-bot li {
	float:left;
	padding:0px;
	margin:0px 57px 0px 0px;
}

#footer-bot li.last {
	margin:0px;
}

#footer-bot li a {
	display:block;
	color:#c1131e;
	font-size:14px;
}

#footer-bot li a:hover {
	
}


/*-- Misc styles ---*/

/* force scrollbar on all pages to prevent page "jump" on short content */
html { overflow-y: scroll; }

/* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome) 
Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {
  html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
}

/* print styles */

@media print {
	img.logo {position:static; margin-bottom:30px;}
	#header-wrapper, #sidebar, #nav, #slideshow, .divider, #footer img, a.button:link {display:none;}
	#header-wrapper, #header, #content-wrapper, #content, #body, #footer-wrapper, #footer {width:auto !important; height:auto !important; min-height:0; position:static; margin:0px; padding:0px; border:none; float:none !important;}
	#header-wrapper {height:0px;}
	body, p, a {color:black; background-image:none; background-color:white;}
	a, a:visited {text-decoration:underline;}
	#footer {background-image:none; text-align:left; margin:0px; padding:0px; padding-top:15px; margin-top:50px; border-top:1px solid #d4d4d4; height:auto;}
	#footer p, #footer a:link, #footer a:visited, #footer p.links {padding:0px; font-family:Arial, Helvetica, sans-serif; color:#666; font-size:10px; margin:0px;}
	  /* CSS2 selector to add visible href after links */
	  #main a:link:after,
	  #main a:visited:after
	  {
		content: " (" attr(href) ") ";
	  }
}