/*
  -----------------------------------
  Styles for the header text
  -----------------------------------
 */

html {
    margin-left: 0px;
}
* {
    margin:0;
    padding:0;
}
.noscreen{
color:#000000;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:1.5em;
font-weight:600;
line-height:1em;
text-align:center;
}
#ban{
display:none;
}
a img{
border:none;
}
div#dsheader h1, div#collheader h1 {
    display: none;
}
div#dsheader {
    width: 100%;
    background-color: #3f6f9f;
    height: 28px;
    margin: 0 0 0 0;
    text-align: center;
    border-bottom: 1px solid #2F5E8C;
}
div#dsheader div#innerbox {
    width: 800px;
    margin: 0 auto 0 auto;
    text-align: left;
}
div#dsheader div#innerbox a img {
    float: left;
    margin-top: 8px;
    margin-right: 5px;
}
div#dsheader div#innerbox a.homelink {
    display: block;
    float: left;
    text-decoration: none;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 10px;
    padding: 13px 7px 0 0;
    background-image: url(images/homearrow.jpg);
    background-position: right 15px;
    background-repeat: no-repeat;
    line-height: 135%;
}
div#collheader {
    margin: 0 auto 0 auto;
    text-align: left;
    width: 100%;
		padding-bottom:10px;
}
#breadcrumbs {
    font-size: 12px !important;
    list-style-type: none !important;
    background-color: #927e63;
    margin-top: -15px !important;
    padding-left: 74px !important;
    padding-top: 4px;
    padding-bottom: 4px;
    color: white;
}
#breadcrumbs li {
    display: inline;
}
#breadcrumbs li a {
    color: white;
    text-decoration: underline;
}
div#brptagline {
    text-align: right;
    font-family: arial, sans-serif;
    font-size: 90%;
    text-transform: uppercase;
    color: #ffffff;
    padding-top: 8px;
}
a.homelink {
    background-image:url(images/homearrow.jpg);
    background-position:right 15px;
    background-repeat:no-repeat;
    color:#FFFFFF;
    display:block;
    float:left;
    font-size:10px;
    padding-top:11px;
    padding-right:7px;
    text-decoration:none;
    text-transform:uppercase;
    font-family: arial, sans-serif;
}
/* links to external (ie not brp) pages */
a.external {
    background: url(images/external.png) center right no-repeat;
    padding-right: 13px;
}
a {
    color: #3f6f9f;
}
div#pagewrap div#pagecontent {
    text-align: left;
}
h2 {
    font-size: 18px;
    font-weight: bold;
    color: #3f6f9f;
    margin-bottom: 20px;
}
p {
    font-size: 12px;
    line-height: 15px;
    margin-bottom: 10px;
}
/*
  ---------------------------------
  Styles for the body text
  -------------------------------
 */
#content {
    background-color: #fff;
    width: 100%;
    margin: 0 auto;
}
/* use <div id="title"> to separate the title information at the top of a flatpage */
#title {
    /*margin-top: 40px; for print*/
    margin-bottom: 10px; /*for print*/
}
#title>h1 {
    color: #41382C;
    font-family: Georgia, serif;
    font-size: 1.5em;
    line-height: 1.4em;
    width: 700px;
}
#title>h2 {
    color: #41382c;
    font-family: Georgia, serif;
    font-size: 0.875em;
    font-style: italic;
    line-height: 2em;
    width: 700px;
}
body {
	margin:0; /*for print*/
	padding:0; /*for print*/
	line-height: 1.4em;  /*for print*/
	word-spacing:1px;  /*for print*/
	letter-spacing:0.2px; /*for print*/
    background-color: #F8E9D0;
    background-image: url(images/brp_gradient.jpg);
    background-position:center top;
    background-repeat:repeat-y;
    font-family: Georgia, serif;
    font-size: .93em;
    line-height: 1.25em;
    color: #41382C;
    text-align: center;
}
#dsheader, #navcontainer, #collfooter, #copyright, #breadcrumbs_wrapper, #search, .sf-menu {display:none;} /*for print*/
p {
    top: 4.5em;
    font-size: 0.813em;
    line-height: 1.727em;
    color: #41382C;
    margin-bottom: 10px;
}
p.close {
    top: 4.5em;
    font-size: 0.813em;
    line-height: 1.727em;
    min-width: 450px;
    max-width: 650px;
    color: #27221a;
    margin-bottom: 0px;
}
h1,h2 {
    color: #41382C;
    font-family: Georgia, serif;
    text-align: left;
}
h3 {
    color: #41382C;
    font-family: Georgia, serif;
    font-size: 1.05em;
    line-height: 1.4em;
    width: 100%;
    margin: 40px 2px 10px 0;
}
h4 {
    color: #41382c;
    font-family: Georgia, serif;
    font-size: 0.938em;
    line-height: 1.8em;
    width: 100%;
    margin: 20px 2px 0px 0;
}
h5 {
    color: #41382c;
    font-family: Georgia, serif;
    font-size: 0.875em;
    font-style: italic;
    line-height: 2em;
    width: 100%;
}
h6 {
    color: #41382c;
    font-family: Georgia, serif;
    font-size: 0.875em;
    font-weight: bold;
    line-height: 2em;
    width: 100%;

}
#pagewrap>ol, #pagewrap>ul {
    font-size: 12px;
    line-height: 15px;
    margin-top: 0px;
    margin-bottom: 0px;
    list-style-image:none;
    list-style-position: inside;
    list-style-type: square;
    padding-left: 74px;
}
hr {
    display: block;
    position: relative;
    padding: 0;
    margin: 30px auto auto;
    width: 70%;
    clear: both;
    border: none;
    border-top: 1px dotted #3F6F9F;
    font-size: 1px;
    line-height: 0;
    overflow: visible;
}
/* use .audience to create a callout box for addressing what your audience needs to know about a page */
.audience {
    width: 550px;
    margin: 5px auto 30px auto;
    font-family: Georgia, serif;
    font-size: 11px;
    line-height: 13px;
    color: #27221a;
    background-color: #f5f7f8;
    padding:5px;
    border: 1px solid #3F6F9F;
}
.audience ul {
    padding: 5px;
}
.audience li {
    margin-bottom: 5px;
}
div#pagecontent, div#pagewrap {
    text-align: left;
}
div#pagewrap {
    /*margin: 15px auto 0px; for print*/
    /*width: 800px; for print*/
    z-index: 999;
    position: relative;
}
div#resource {
    font-family: Georgia, serif;
    font-size: 10px;
    line-height: 13px;
    color: #27221a;
    background-color: #f5f7f8;
    margin: 5px 10px 10px 10px;
    padding:5px;
    border: 1px solid #3F6F9F;
    float: left;
}
div#footnotes {
    font-family: Arial, sans-serif;
    font-size: 0.688em;
    line-height: 1.2em;
    color: #41382c;
    border-top-style: 1px dotted #94836a;
    padding-left: 74px;
    min-width: 450px;
    max-width: 650px;
}
/* ----------------------- */
/* Styles for Item Pages */
/* ----------------------- */
#viewer_bar {
    padding-left: 20px;
}
#cdla_imageviewer_window {
    margin: 0 auto !important;
    border: 1px solid #a77036;
    background-color: #fbf7f2;
}
div#itemwrapper {
    width: 100%;
    background-color: #F8E9D0;
    border: 1px solid #dfe8ef;
    padding-top: 15px;
    padding-bottom: 5px;
    text-align: center;
}
div#itemwrapper p.title {
    margin-top: 10px;
    margin-bottom: 0;
    color: #3f6f9f;
    font-weight: bold;
    font-size: 13px;
}
div#imagecanvas {
    width: 730px;
    height: 512px;
    margin: 0px 15px;
}
h3.itempage {
    font-weight: bold;
    font-size: 14px;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #41382C;
}
table.itemdesc {
    margin-left:auto;
    margin-right:auto;
    border-collapse: collapse;
    width: 80%;
    table-layout: fixed;
    font-size: 12px;
    border-top: 1px solid #3f6f9f;
    margin-bottom: 15px;
}
table.itemdesc tr {
    width: 100%;
}
table.itemdesc td.label {
    width: 150px;
    font-weight: bold;
    vertical-align: top;
}
table.itemdesc td {
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #3f6f9f;
    padding-left: 5px;
    padding-right: 5px;
    line-height: 14px;
}
table.itemdesc table.sub td.label {
    width: auto;
    font-weight: bold;
    border-bottom: 1px solid #41382C;
    vertical-align: bottom;
}
table.itemdesc table.sub td {
    border-bottom: none;
}
h4.itempage {
    text-align: center;
}
h4.itempage a {
    color: #3f6f9f;
    border-bottom: 1px solid #dfe8ef;
    text-align: center;
    font-size: 12px;
}
img.item-img {
    max-height: 500px;
    max-width: 500px;
}
span.taglist {
    font-size: 11px;
    padding-left: 15px;
}
/*
  ---------------------------------
  Navigation Menu
  -------------------------------
 */
#navcontainer {
display:none;
}
/* topmenu */
#topmenu {
/* undo the 74px left content shift */
    padding-left: 0;
    margin: 0 auto;
    text-align: center;
    background-color: #41382c;
    padding: 5px 0;
}
#topmenu li {
    display: inline;
    font-size: 15px;
}
#topmenu li a {
    color: #fbf7f2;
    text-decoration: none;
    padding: 2px 20px 4px 20px;
}
#topmenu li a:hover, #topmenu li.selected a {
    color: #7f592b;
    background-color: #F8E9D0;
}
#topmenu li.selected a {
    padding-bottom: 6px;
}
/* submenu */
#submenu {
    background-color: #F8E9D0;
    padding: 5px 0 5px 70px;
}
#submenu li {
    display: inline;
    font-size: 15px;
    border-right: 1px solid #41382c;
}
#submenu li.last {
    border-right: none;
}
#submenu li a {
    color: #7f592b;
    background-color: #F8E9D0;
    padding: 2px 20px 4px 20px;
}
/* slideout CONTENTS menu */
#slideout_menu {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    top:300px;
/* set initial Height from top */
    position:fixed;
    overflow:visible;
    z-index:100;
    left:0;
}
#slideout_menu div {
    border-bottom: 8px solid #41382c;
    position:absolute;
    color:black;
    background-color:transparent;
}
#slideout_menu table {
    font-size:90%;
    border-collapse:collapse;
    background-color:#f6e2c1;
    width:16.667em;
}
#slideout_menu td {
/* Characteristics for cells in the menu table - do not specify width here */
    border-bottom:1px solid #41382c;
    height:1.389em;
    padding:0.1em 0 0.1em 1em;
    margin:0;
    text-align:left;
}
#slideout_menu td:hover {
    background-color: #fcf7ee;
}
#slideout_menu #slideout_menubar {
/* Characteristics for initially visible 'draw' bar (the vertical cell) */
    width:1.389em;
    background-color:#41382c;
    color:white;
    font-weight:bold;
    text-align:center;
    border-width:0;
    cursor:default;
    padding: 0;
}
#slideout_menu .heading {
/* Characteristics for heading cells in the menu table */
    height:1.736em;
    color:white;
    font-weight:bold;
    text-indent:1ex;
    background-color:#41382c;
/* Background Color for menu headings */
    width:14.583em;
/* This will be the menu body width.  This (plus #slideout_menubar width for left and right menus) and 4 times the border width should also be the menu table's approximate width */
    vertical-align:middle;
    text-align:left;
    border-left-color:#41382c;
    border-left-style:solid;
}
#slideout_menu .heading:hover {
    background-color: #41382c;
}
#slideout_menu #slideout_menulastrow {
    height:1.389em;
    background-color:#F8E9D0;
    border-width:0;
    margin:0 0 2px 2px;
}
#slideout_menu a {
    width:100%;
    height:100%;
    display:block;
    padding-top:0.208em;
}
/*
  --------------------------------
  Columnar styles
  ---------------------------------
 */
.outerstyle {
    width: 750px;
    float: left;
    top: 0em;
    position: relative;
    margin: 1em 0em 5em 5em;
}
.leftcol {
    float: left;
    width: 350px;
    position: relative;
    margin: 1em;
    margin-top: 0em;
}
.rightcol {
    float: right;
    width: 350px;
    position: relative;
    margin: 1em;
    margin-top: 0em;
}
/*
  --------------------------------
  Styles for the links
  --------------------------------
 */
a:link, a:visited {
/* Applies to all links, visited or unvisited */
    text-decoration: none;
    color: #3f6f9f;
}
a:hover {
/* Applies to links under the pointer */
    text-decoration: none;
    background-color: none;
    color: #3f6f9f;
}
a:active {
/* Applies to activated links */
    text-decoration: none;
    color: #3f6f9f;
}
/*
  --------------------------------
  Styles for the footer/bottom bar
  --------------------------------
 */
#skin {
    margin: 0 auto 0 auto;
    background-color: #FFF;
}
/*
  sticky footer
  see http://www.cssstickyfooter.com/using-sticky-footer-code.html
 */
html, body, #skin {
    height: 100%;
		width:100%;
}
body > #skin {
    height: auto;
    min-height: 100%;
}
#pagewrap {
    /*padding-bottom: 150px; for print*/
}
/* must be same height as the footer */
#collfooter {
	page-break-before: always; /*for print*/
    /*height: 110px; for print*/
    /*margin:-110px auto 0px auto;*/
    background-color: #FFFFFF;
    /*width:800px;*/
    /*padding-bottom: 40px;*/
    /*padding-top: 100px;*/
    text-align:center;
    /*position: relative;*/
    clear:both;
}
div#collfooter img {
	background-color: #FFFFFF;
    /*margin-bottom: 25px;*/
}
div#collfooter ul {
	background-color: #FFFFFF;
    /*height: 23px;*/
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}
/*
  ---------------------------------
  tables
  -------------------------------
*/
#sections {
    font-family:Georgia, serif;
    width:90%;
    border-collapse:collapse;
    margin: auto;
}
#sections caption {
    margin-top: 30px;
    margin-bottom: 10px;
    font-weight: bold;
}
#sections td, #sections th {
    font-size:.75em;
    border:1px solid #000;
    padding:3px 7px 2px 7px;
}
#sections th {
    font-size:1.1em;
    text-align:left;
    padding-top:5px;
    padding-bottom:4px;
    background-color:#41382C;
    color:#ffffff;
}
#sections tr.alt td {
    color:#000000;
    background-color:#F8E9D0;
}
/*
  ---------------------------------
  images
  -------------------------------
 */
.sideimage {
    padding: 10px;
    background-color: #F8E9D0;
    width: 310px;
    /*margin: 10px; for print*/
}
.sideimage img {
   border:none;
}
.sideimage p {
    color: #41382C;
    font-size: 9px;
    font-style: italic;
    line-height: 12px;
    margin-top: 5px;
    margin-bottom: 0px;
    padding-left: 0px;
    min-width: 0;
}
.left {
    float: left;
    margin-left: 0px; /*for print was -40*/
    margin-right: 20px;
}
.right {
    float: right;
    margin-left: 20px;
    margin-right: 0px;  /*for print was -40*/
}
.vertical {
    width: 230px;
}

/* simile timeline code from gtts */
div#tl_legend {
    font-size: 13px;
    float: left;
    border: 1px solid #3f6f9f;
    background-color: #f5f7f8;
    margin: 10px 0 10px 189px;
    padding: 5px 20px 5px 20px;
}
div#tl_legend div.title {
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 5px;
}
div#tl_legend div.label {
    float: left;
}
div#tl_legend div.key {
    float: left;
    width: 50px;
    height: 7px;
    margin-left: 1px;
    margin-right: 20px;
    margin-top: 4px;
}
div#tl_legend div#black {
    background-color: #406F9d;
}
div#tl_legend div#white {
    background-color: #58A0DC;
}
div#tl_legend div#segregated {
    background-image: url('../images/blue_stripes.png');
    margin-right: 0px;
}
div#tl_period_legend {
    font-size: 13px;
    float: left;
    border: 1px solid #3f6f9f;
    background-color: #f5f7f8;
    margin: 10px 0 10px 150px;
    padding: 5px 20px 5px 20px;
}
div#tl_period_legend div.title {
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 5px;
}
div#tl_period_legend div.label {
    float: left;
}
div#tl_period_legend div.key {
    float: left;
    width: 22px;
    height: 28px;
    margin-left: 4px;
    margin-right: 20px;
    margin-top: 1px;
}
div#tl_period_legend div#early {
    background-color: #f8e8ac;
}
div#tl_period_legend div#storefront {
    background-color: #efb893;
}
div#tl_period_legend div#transition {
    background-color: #76B0C0;
}

/*Geobrowse Styles*/
/**************
 * map styles *
 **************/

#map-container {
    width: 75%;
    margin-left: 15px;
    float: left;
    font-size: 12px;
}

#map {
    height: 400px;
    border: 1px solid gray;
}

#topbar {
    padding-right: 5px;
    padding-left: 5px;
    background-color: #ddd;
    border: 1px solid gray;
    border-bottom: 0;
    position: relative;
    height: 20px;
}

#maplink {
    float: right;
    color: #036;
    text-decoration: none;
    padding-top: 2px;
}

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

#maplink img {
    vertical-align: middle;
}

#linkbox {
    z-index: 5000;
    background-color: #fff;
    width: 40%;
    padding: 0.5em 1em;
    text-align: left;
    height: 75px;
    position: absolute;
    right: -1px;
    top: 20px;
    border: 1px solid gray;
    background-color: #eee;
    display: none;
    border-bottom-left-radius: 8px;
    -moz-border-radius-bottomleft: 8px;
}

#linkbox a {
    float: right;
    text-decoration: none;
}

#linkbox input {
    width: 100%;
}

.olControlLoadingPanel {
    background-image:url(http://imageserv.lib.unc.edu/geobrowse/ajax-loader.gif);
    margin-left: 35%;
    margin-top: 225px;
    position: relative;
    width: 220px;
    height: 19px;
    background-position:center;
    background-repeat:no-repeat;
}

.olControlLayerSwitcher .layersDiv {
    background-color: #364c83 !important;
}


/************************
 * facet sidebar styles *
 ************************/
#facets a {
    color: #40758F;
    text-decoration: none;
}

#facets img {
    border: none;
}

#facets {
    width: 20%;
    font-size: 11px;
    float: left;
}

#activeFacets, #inactiveFacets {
}

#facets h4 {
    margin-top: 5px;
    margin-bottom: 2px;
    font-size: 16px;
    font-weight: normal;
}

#facets ul {
    list-style: none;
}

#facets li {
    background-image: url(http://imageserv.lib.unc.edu/geobrowse/bullet.gif);
    background-repeat: no-repeat;
    background-position: 5px 6px;
    padding: 0;
    margin: 0;
    padding-left: 15px;
    line-height: 15px;
}

#morelink {
    margin-left: 20%;
}

/********************
 * image bar styles *
 ********************/
#items {
    height: 75px;
    display: block;
    filter:alpha(opacity=95);
    opacity: 0.95;
    background-color: #222;
    text-align: center;
    z-index: 1;
    margin-top: 1em;
    position: relative;
}

#items ul {
    list-style: none;
    padding: 0;
}

#items ul li {
    display: inline;
    margin: 0 3px;
    padding: 0;
}

#items img {
max-width:95px;
}

#nextPageButton {
    position: absolute;
    top: 0;
    right: 0;
	display:none !important;
}

#prevPageButton {
    position: absolute;
    top: 0;
    left: 0;
	display:none !important;
}

/******************************
 * large image display styles *
 ******************************/
#wrapper {
  position: fixed;
  top: 0px;
  left: 0px;
  min-width: 100%;
  min-height: 100%;
  background: #000;
  display: none;
  z-index: 19999;
}

#viewer {
    visibility: hidden;
    z-index: 20000;
    background: #FFF;
    position: absolute;
    top: 0;
    left: 0;
}

#v-image {
    float: left;
    padding: 5px;
}

#v-links {
    float: right;
}

.v-button {
  border: 1px solid gray;
  border-right: none;
  margin-top: 5px;
  padding: 2px;
}

#v-desc {
  clear: both;
  padding: 5px;
}