/* Generic Styles */
body {
	margin: 0 8px;
}

.container { margin-top: 0 !important; }
.container a         { color: #8d0003; }
.container a:hover   { color: #333333; }
.container a:visited { color: #8f6b5f; }

hr        { margin: 0 0 10px; }
hr.clear  { color: transparent; background-color: transparent; }

.span-19  { position: relative; }

/* Blueprint overrides */

/* This first bit messes up the grid for anything other than the sizes we're
 * currently using, which are:
 * | span-9     | span-10      | span-5 |
 * | span-13         | span-6  | span-5 |
 * | span-19                   | span-5 |
 */
.column  { margin-right: 15px; } /*  5px wider */
.last    { margin-right: 0; }    /* Same, otherwise column tramples it */
.span-6  { width: 225px; }       /*  5px shorter */
.span-9  { width: 325px; }       /* 25px shorter */
.span-10 { width: 405px; }       /* 15px wider */
.span-13 { width: 505px; }       /*  5px shorter */
.span-19 { width: 745px; }       /*  5px shorter */

/* Blueprint stupidly sets all textareas to 250px high */
textarea { height: auto; }

/* Let footer behave the normal way */
#footer .column { margin-right: 10px; }
#footer .last   { margin-right: 0;    }

/* Wiggle fonts and sizes a bit */
body {
	font-size: 75%;
	font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1 { font-size: 2.3em; line-height: 1.25; margin-bottom: 0.5em; }
h2 { font-size: 1.8em; line-height: 1.25; margin-bottom: 0.5em; }
h3 { font-size: 1.4em; line-height: 1.25; margin-bottom: 0.5em; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 0.5em; }
h5 { font-size: 1.0em; font-weight: bold; margin-bottom: 0.5em; }

h1 a, h1 a:visited { color: #111; }
h1 a:hover { color: #a39c8d; }

li  { list-style-type: square; }
em  { background: none; }
img { margin: 0; }

/* Top navigation and Berkman logo */
#header {
	margin-top: 12px;
	position: relative;
	border-bottom: 9px solid #ddd;
}

#header ul.menu {
	margin: 0;
	padding: 0;
	text-align: right;
	border-bottom: 1px solid #ddd;
}

#header li.leaf {
	list-style: none;
	display: inline;
	background: none;
	font: bold 10px "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	margin: 0;
}

#header li a {
	border-left: 1px solid #ddd;
	padding: 5px 4px 7px 5px;
	margin-right: 4px;
	line-height: 24px;
	color: #8D0003;
	text-decoration: none;
}

#header li a:hover {
	color: #000;
}

#header li a.active {
	padding-bottom: 3px;
	border-bottom: 4px solid #ddd;	
	color: #000;
}

/* Hide redundant border info from IE6 */
html>body #header li.active a {
	padding-bottom: 3px;
	border-bottom: 4px solid #ddd;
}

/* Hide name and replace with a logo image */
#header h1 {
	display: none;
}

#header #logo {
	padding: 0;
	margin-left: 14px;
	width: 600px;
	height: 78px;
	border: 0;
	background: transparent url(../images/logo.png) left center no-repeat;
	/* IE6 does not think the logo is a link */
	cursor: pointer;
}

#header .open {
	bottom: -18px;
	background: transparent url(../images/intro_open_tab.png) left bottom no-repeat;
}


/* Intro animation for new visitors */
#intro {
	height: 108px;
	padding: 0;
	position: relative;
	background-color: #ffffd6;
	border-bottom: 3px solid #ddd;
}

#intro .static, #intro .fade {
	position: absolute;
	height: 108px;
	width: 520px;
	overflow: hidden;
}

#intro .static {
	left: 0;
	background: transparent url(../images/intro_left.png) left center no-repeat;
}

#intro .fade {
	right: 0;
	background: transparent url(../images/intro_right.png) left 0 no-repeat;
}

#intro .fade .link {
	position: absolute;
	width: 500px;
	height: 78px;
	top: 20px;
	right: 21px;
}

#intro .close, #header .open {
	position: absolute;
	left: 20px;
	padding: 0;
	width: 78px;
	height: 12px;
	border: 0;
}

#intro .close {
	bottom: -12px;
	background: transparent url(../images/intro_close_tab.png) left bottom no-repeat;
}


/* Main body styles */
.span-19 {
	margin-top: 10px;
}

/* Tabs for editors mess up display a bit in their default setup */
.span-19 .tabs {
	margin: 0 0 4px 0 !important;
}

/* Warning texts display for deprecated pages and other things */
.span-19 .warning {
	font-size: 11px;
	padding: 4px 10px 4px 32px;
	margin-bottom: 14px;
}

.span-19 .warning-chron {
	background: #ffd url(../images/icons/time.png) 10px 4px no-repeat;
	border: 1px solid #ddd;
}

.span-19 .warning-error {
	background: #fcc url(../images/icons/error.png) 10px 4px no-repeat;
	border: 1px solid #ccc;
}

.container p {
	margin-bottom: 1em;
}

/* Page title div, which may have various things like date, image, etc. */
.container .title {
	border: 0;
	margin-bottom: 4px;	
}

.container .title a {
	text-decoration: none;
	color: #000;
}

.container .title h1 {
	padding: 4px 0;
	margin-top: -4px;
	margin-bottom: 6px;
}

.container .title h2 {
	margin-top: -8px;
	margin-bottom: 14px;
	color: #555;
}

.container .title h3 {
	margin-top: -8px;
	color: #444;
}

.container .title a h1:hover {
	background-color: #efefef;
	padding: 4px 0;
}

.large-event-title, .course-title, .project-title{
	text-align: center;
}

.container .title a h1:after {
	color: #8D0003;
	content: "\0020\00bb"; /* em space >> */
}

.container .title h4 {
	line-height: normal;
	font-size: 1.2em;
	font-weight: bold;
	text-transform: lowercase;
	color: #555;
	padding: 0;
	margin: 0;
	margin-top: -4px;
	margin-bottom: 4px;
}

.container .project-title h4{
	text-align: left;
}

.container .title h4 a {
	color: #8d0003;
}

.container .title h4 a:hover {
	color: #333;
}

.container .box {
	background-color: #fff;
	margin: 0;
	padding: 0;
}

/* Hover buttons */
a.button {
	position: relative;
	float: left;
	border: 1px solid #ddd;
	padding: 3px 5px;
	padding-left: 26px;
	margin-right: 8px;
	font-size: .8em;
	font-weight: bold;
	text-decoration: none;
}

.button:hover {
	border-color: #8d0003;
	background-color: #efefef;
}

.button-email {
	background: url(../images/icons/email.png) 5px 2px no-repeat;
}

.button-homepage {
	background: url(../images/icons/house.png) 5px 2px no-repeat;
}

.button-blog {
	background: url(../images/icons/pencil.png) 5px 2px no-repeat;
}

.button-book {
	background: url(../images/icons/book.png) 5px 2px no-repeat;
}

.button-link {
	background: url(../images/icons/world_link.png) 5px 2px no-repeat;
}

.button-disk {
	background: url(../images/icons/disk.png) 5px 2px no-repeat;
}

/* Where used, description holds both the teaser text and the body text of a page so that they can be swapped by jquery when the "more" link is clicked. */
.container #description {
	margin-top: 12px;
	padding: 0 8px;
	margin-bottom: -15px;
}

.container #description.nopad {
	margin-top: 0;
	padding: 0;
}

.container #description .short {
	font-size: 16px;
}

.container #description .short a.swap {
	color: #8D0003;
	font-weight: bold;
	text-decoration: none;
	line-height: 1.2;
	font-size: 14px;
}

.container #description .long {
	display: none;
}

#node-7736 #description .short {                                                     
    display: none;                                                                   
}                                                                                    

#node-7736 #description .long {                                                      
    display: block;                                                                  
}

/* For teaser lists */
.container .tabs .teaser-view {
	border: 0;
	padding-left: 0 !important;
}

.container .tabs .teaser-view li {
	float: left;
	margin-top: 15px;
}

.container .tabs .teaser-view a {
	font-size: .9em;
	font-weight: bold;
	padding-bottom: 4px;
	background-color: #fff;
	border-bottom: 1px solid #ddd;
	border-color: #ddd;
}

.container .tabs .teaser-view a:hover {
	background-color: #eee;
	color: #000;
}

.container .tabs .teaser-view .active a {
	background-color: #999;
	border-color: #999;
	color: #fff;
}

/* Views in the main content area need a top rule */
.span-19 .view-content {
	border-top: 6px solid #ddd;
}

/* Unless they are in a panel or split view */
.panel-pane .view-content, .span-6 .view-content {
	border-top: 0;
}

/* Pagers should look the same as our tabs */
.pager a {
	font-weight: bold;
	border-color: #ddd !important;
}

.pager a:hover {
	background-color: #eee !important;
	color: #000 !important;
}

.pager .pager-current {
	background-color: #999 !important;
	border-color: #999 !important;
}

p.revision {
	text-align: right;
	margin-top: 4px;
	font-size: .85em;
	eolor: #666;
}

/* For image nodetype */
.image {
	text-align: center;
}

.image img {
	padding: 4px;
	border: 1px solid #ccc;
}

/* For video nodetype */
#video-player {
	margin-bottom: 10px;
}

.video-metadata .authorship {
	text-align: right;
	font-size: 11px;
	color: #333;
	font-style: italic;
}

.video-metadata .authorship a {
	color: #333;
}

/* For video, image, and audio nodetypes */
.downloads {
	margin-bottom: -20px;
}

.downloads h4 {
	margin-left: 20px !important;
}

.downloads ul {
	border-top: 4px solid #ddd;
}

.downloads li {
	display: block;
	list-style: none;
	background: none;
	margin: 1px 0 0;
	padding-left: 0;
	padding-bottom: 1px;
	border-bottom: 1px solid #ddd;
	font-size: 11px;
	color: #777;
}

.downloads a.ipod {
	background: transparent url(../images/icons/ipod.png) 5px center no-repeat;
}

.downloads a.audio {
	background: transparent url(../images/icons/music.png) 5px center no-repeat;
}	

.downloads a.video {
	background: transparent url(../images/icons/film.png) 5px center no-repeat;
}

.downloads li a {
	background: transparent url(../images/icons/page_white_acrobat.png) 5px center no-repeat;
	text-decoration: none;
	display: block;
	padding: 5px 0 5px 28px;
}

.downloads .desc {
	position: absolute;
	right: 18px;
	text-decoration: none;
	padding-right: 6px;
	color: #666;
}

.downloads li a:hover {
	background-color: #efefef;
}

/* Teaser styles */
.node { /* Oh boy, what is this going to break? */
	margin: 0 !important;
	padding: 0 !important;
}

.teaser {
	margin-right: 10px;
}

.teaser .thumbnail, .title .thumbnail {
	float: left;
	display: block;
	margin: -3px 8px 0 0;
	clear: right;
/*	width: 127px; */
}

/* Only standardize width for thumbnails in these views. */
.view-content-view-people .teaser .thumbnail,
.view-content-view-events-current .teaser .thumbnail,
.view-content-view-events-past .teaser .thumbnail ,
.view-content-view-interactive .teaser .thumbnail{
	width: 127px;
}
.teaser .thumbnail img, .title .thumbnail img{
	border: 1px solid #ddd;
	padding: 3px;
	margin: 0px 3px 3px 0px;
}

.title .thumbnail,
.view-content-view-newsroom-delicious .thumbnail{
	margin: 0 8px 0 0;
	width: auto;
}

.view-content-view-newsroom-delicious .feed_item_body{
	margin-left: 36px;
}

.teaser h3 {
	font-weight: bold;
	line-height: 1.4em;
	font-size: 1.3em;
	margin: 0 0 4px 0;
}

.teaser h3 .event-date {
	font-weight: normal;
	color: #555;
	font-size: .75em;
	line-height: normal;
	margin-left: .8em;
}

.teaser-link h3 {
	font-size: 1.2em;
/*	margin-left: 34px; */
}

/* Only align teaser text in these views. */
.view-content-view-people .teaser-content,
.view-content-view-events-current .teaser-content,
.view-content-view-events-past .teaser-content,
.view-content-view-interactive .teaser-content{
	margin-left: 140px;
}

/* Tweak the tab font size for the people view*/
.view-view-people .tabs .teaser-view a{
	font-size: 0.85em;
}

div.date{
	margin: 6px;
	padding: 3px;
	border: 1px  #cccccc; 
	border-style: none none solid solid;
	float: right; 
	width: 6.5em;
	text-align: center;
	color: #8D0003;
	font-size: .75em;
}

div.date .month, div.date .year{
	font-size: 1.2em;
}

div.date .day{
	font-size: 2em;
	font-weight: bold;
}

.teaser-person h4, .teaser-event h4 .teaser-page h4 { /* Job title or subtitle */
	font-size: 1em;
	font-style: italic;
	margin: -3px 0 2px 0;
}

.teaser-video h5, .teaser-audio h5, .teaser-event h5, .teaser-content h5 { /* Interactive tag */
	font-size: .9em;
	font-weight: bold;
	line-height: normal;
	display: inline;
	text-transform: lowercase;
	background-color: #666;
	color: #fff;
	padding: 1px 3px;
	margin: -3px 0 2px 0;
}

.teaser .post-date {
	text-align: right;
	font-size: 11px;
	color: #666;
}

.sticky .teaser .post-date {
	display: none;
}

.teaser h5.blue {
	background-color: #47a8cb;	
}

.teaser h5.green {
	background-color: #68c366;
}

.teaser h5.purple {
	background-color: #8c77b0;
}

.teaser a {
	width: 100%;
	float: left;
	display: block;
	padding: 8px 5px 4px 5px;
	margin: 1px 0;
	text-decoration: none;
	clear: both;
}

.teaser a:hover {
	background-color: #efefef;
}

.teaser a p {
	font-size: 1em;
	text-decoration: none;
	color: #111;
	margin-bottom: 0;
}
.teaser a h3 {
	text-decoration: none;
	color: #111;
}

.teaser a:visited h3 {
	color: #444;
}

/* For video teasers, overlay a play button on the thumbnail. This BREAKS the video listings on ie7, see the ie-specific stylesheet for the fix.*/
.teaser-video, .teaser-audio {
	position: relative;  
}

.teaser-video a p, .teaser-audio a p {
	margin-top: -4px;
	margin-bottom: 4px;
}

.teaser-video .thumbnail .overlay, .teaser-audio .thumbnail .overlay {
	position: absolute;
	z-index: 10;
	top: 10px;
	left: 9px;
	border-style: none;
}

.teaser p:after {
	color: #8D0003;
	font-weight: bold;
	content: "\0020more\00A0>"; /* em space more nbsp > */
}

.more-link {
}

.more-link a {
	display: block;
}

.more-link a:after {
	content: "\00A0>"
}

.teaser-featured, .view-view-newsfeed-front .sticky {
	border-bottom: 4px solid #6ab9d5;
	background-color: #e4f2f7;
	margin-bottom: 6px !important;
}

.span-6 .featured {
	border-top: 0;
	border-bottom: 4px solid #68c366;
	background-color: #d9f0d9;
	margin-bottom: 18px;
}

.view-view-newsfeed-front .sticky .thumbnail {
	border: 0;
	padding: 0;
	margin: -8px 8px -4px -5px;
}

.teaser-featured .node {
	border-bottom: 0 !important;
}

/* This things appear in random places and we don't want them */
a.feed-icon {
	display: none;
}

/* Links (feed items) are a special case */
.teaser-link p:after {
	content: "";
}

.teaser-link h3:after, .teaser-organization h3:after {
	color: #8D0003;
	font-weight: bold;
	content: "\0020\00bb"; /* em space >> */
}

/* Middlebar styles */
.span-6 .block {
	border-top: 6px solid #888;
	padding: 0 10px;
	margin-bottom: 18px;
	color: #444;
	background-color: transparent;
	text-transform: lowercase;
	line-height: 14px;
}

.span-6 .block ul a, .span-6 .block p {
	display: block;
	width: 100%;
	color: #8d0003;
	margin: 0 -10px 0 -7px;
	padding: 2px 10px 2px 7px;
}

.span-6 .block li.sponsor a:hover {
	background-color: transparent !important;
}

.span-6 .block li.feed a {
	background: #fff url(/misc/feed.png) 8px center no-repeat;
	line-height: 1.5;
	padding-left: 28px;
	width: 184px;
}

.span-6 .block li.feed a:hover {
	background-color: #ddd;
}

.span-6 .block a .date {
	color: #fff;
	background-color: #999;
	padding: 1px 3px;
}


/* Sidebar styles */
.span-5 .block {
	border-top: 6px solid #333;
	border-left: 1px solid #333;
	padding: 0 10px;
	margin-bottom: 18px;
	color: #444;
	background-color: transparent;
	text-transform: lowercase;
	line-height: 14px;
}

.span-5 .block {
	/* IE does not take into account borders for background images */
	_background-position: 100% 6px !important;
}

.span-5 .block a, .span-6 .block a {
	text-decoration: none;
	font-weight: bold;
}

.span-5 .block a.child{
	margin-left: 10px;
}

.span-5 .block a .desc, .span-6 .block a .desc {
	color: #555;
	font-weight: normal;
}

.span-5 .block ul a, .span-5 .block p {
	display: block;
	width: 100%;
	color: #444;
	margin: 0 -10px 0 -7px;
	padding: 2px 10px 2px 7px;
}

.span-5 .block a:hover, .span-6 .block a:hover {
	background-color: #efefef;
}

.span-5 .block h3, .span-6 .block h2 {
	font-size: 14px;
	/* 30px + 6px box top border = 36px */
	line-height: 28px;
	font-weight: bold;
	color: #666;
	padding: 0;
	margin: 0;
	margin-bottom: -3px;
}

.span-5 .block ul, .span-6 .block ul, .span-5 .block li, .span-6 .block li {
	display: block;
	list-style: none;
	background-image: none;
	margin-left: 0 !important;
	padding: 0;
	margin: 0;
	font-size: 11px;
	color: #555;
}

.span-5 .block .content, .span-6 .block .content {
	font-size: 11px;
	text-align: left;
}

/* Block colors */
.span-5 .blue {
	border-color: #47a8cb;
}

.span-5 .blue a {
	color: #47a8cb !important;
}

.span-5 .yellow {
	border-color: #ffd55c;
}

.span-5 .yellow a {
	color: #edc556 !important;
}

.span-5 .brown {
	border-color: #7A483E;
}

.span-5 .brown a {
	color: #7A483E !important;
}

.span-5 .green {
	border-color: #68c366;
}

.span-5 .green a {
	color: #68c366 !important;
}

.span-5 .purple, .span-5 #block-views-view_projects_front {
	border-color: #8c77b0;
}

.span-5 .purple a, .span-5 #block-views-view_projects_front a {
	color: #8c77b0 !important;
}

.span-5 .eggplant {
	border-color: #c75d6c;
}

.span-5 .eggplant a {
	color: #c75d6c !important;
}

/* Search box */
.span-5 .block-search {
	background: #ddd url(../images/search_tab.png) left bottom no-repeat;
	height: 24px;
	margin-bottom: 12px;
	padding: 0px 9px 4px 9px;
	border: 0 !important;
}

.span-5 .block-search input {
	width: 149px;
	height: 15px;
	font-size: 11px;
	color: #666;
	background: #fff url(../images/search_glass.png) left center no-repeat;
	padding-left: 17px;
}

.span-5 .block-search #edit-submit {
	display: none;
}

/* For the benefits of admins who don't want to see the formfilter link */
.span-5 .block-search div a.active {
	display: none;
}

/* Quick hack to fix date display for block nodes */
.span-5 .block .view-item .date-display-separator, .span-5 .block .view-item .date-display-end {
	display: inline;
	margin: 0;
	padding: 0;
}

/* Quick hack to add some spacing between block nodes when there is a date */
.span-5 .block .view-data-node-data-field-event-date-field-event-date-value {
	margin-top: -2px;
	margin-bottom: 2px;
}

/* And these are the same, but homepage specific */
.span-6 .block .view-data-node-data-field-produced-by-field-produced-by-nid {
	margin-top: -2px;
}

.span-6 .block .view-data-node-data-field-publication-date-field-publication-date-value {
	margin-bottom: 2px;
}

#block-views-durham_signatures h3{
	font-size: 1.8em;
	margin-bottom: 0px;
}

div.view-durham-signatures div.node{
		margin-left: 20px;
		width: 300px;
		float: left;
		height: 75px;
		border: 0;
}
div.view-durham-signatures div.signature-name{
	font-size: larger;
}

div.view-durham-signatures div.signature-orgname{
	border-bottom: 0;
	width: 250px;
}

.embedded-media-node{
	border-top: 2px solid #dddddd;
	margin-top: 5px;
	padding-top: 10px;
}

/* Page footer */
#footer {
	margin-top: 12px;
	padding-top: 8px;
	text-align: center;
	font-size: .8em;
	color: #444;
	position: relative;
	border-top: 5px solid #ddd;
}