/*
** shared, generic classes
*/

.clear {
	clear: both;
}

.clear-right {
	clear: right;
}

.clear-left {
	clear: left;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.hidden {
	display: none;
}

.bold {
	font-weight: bold;	
}

.italic {
	font-style: italic;	
}

.reset {
	margin: 0;
	border: 0;
	padding: 0;
}

/* dwyer image replacement, http://www.mezzoblue.com/tests/revised-image-replacement/ */

.replace span { 
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/ */
/* blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; } 
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/*
** common link types/styles
*/

a.replace {
	display: inline-block;
	background-repeat: no-repeat;
}

a.sprite {
	background-repeat: no-repeat;
}

a.sprite:link, a.sprite:visited, input.sprite { background-position: left top; }
a.sprite:hover, a.sprite:active, input.sprite:hover, input.sprite:active { background-position: left bottom; }

/*
** KlavikaWebBasicBold 
** KlavikaWebBasicBoldItalic 
** KlavikaWebBasicBoldItalicSub 
** KlavikaWebBasicBoldSub 
** KlavikaWebBasicRegular 
** KlavikaWebBasicRegularItalic 
** KlavikaWebBasicRegularItalicSub 
** KlavikaWebBasicRegularSub 
**
** url('webfont.ttf')  format('truetype'),
** url('webfont.svg#svgFontName') format('svg'),
*/

@font-face {
	font-family: 'Klavika';
	src:	url('../_fonts/KlavikaWebBasicRegular.eot?#iefix') format('embedded-opentype'), 
			url('../_fonts/KlavikaWebBasicRegular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Klavika';
	src:	url('../_fonts/KlavikaWebBasicBold.eot?#iefix') format('embedded-opentype'), 
			url('../_fonts/KlavikaWebBasicBold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Klavika';
	src:	url('../_fonts/KlavikaWebBasicRegularItalic.eot?#iefix') format('embedded-opentype'), 
			url('../_fonts/KlavikaWebBasicRegularItalic.woff') format('woff');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Klavika';
	src:	url('../_fonts/KlavikaWebBasicBoldItalic.eot?#iefix') format('embedded-opentype'), 
			url('../_fonts/KlavikaWebBasicBoldItalic.woff') format('woff');
	font-weight: bold;
	font-style: italic;
}

/*
**
*/

a.view-all {
	display: block;
	margin-top: 20px;
	text-transform: uppercase;
}

a.more {
	display: block;
	margin-top: 6px;
	text-transform: uppercase;
}

a.inline-more {
	display: inline;
	margin-left: 6px;
	text-transform: uppercase;
	/* we want essentially 1em (10px) here,
	  but being inside <p>, we have to "undo" the 1.3em of <p> */
	font-size: 0.77em;
}

a.show-hide {
	display: block;
	clear: both;
	margin-top: 20px;
	text-transform: uppercase;
}

/* custom more/less text */
a.show-hide.hiding .text-more { display: inline; }
a.show-hide.hiding .text-less { display: none; }
a.show-hide.showing .text-more { display: none; }
a.show-hide.showing .text-less { display: inline; }

/* okay, I copied this from the "more" arrow at top of google.com. it's brilliant! */
a.show-hide .arrow {
	margin-left: 6px;

	border-left: 4px dashed transparent;
	border-right: 4px dashed transparent;
	position: relative;
}

a.show-hide .arrow-down {
	border-top: 5px solid;
	top: 9px;
}

a.show-hide .arrow-up {
	border-bottom: 5px solid;
	bottom: 9px;
}

.show-hide-content {
	display: none;
	margin-top: 20px;
}

/*
** favoriting icon
*/

a.btn-favorite {
	display: block;
	float: right;
	margin-top: 20px;
	width: 14px;
	height: 12px;
}

a.btn-favorite-signin {
	background-image: url(../_images/favorites_icon.png);
}

a.btn-favorite-add {
	background-image: url(../_images/favorites_icon.png);
}

a.btn-favorite-del {
	background-image: url(../_images/favorites_icon.png);
	background-position: center bottom !important;
}

a.btn-favorite-active {

}

/*
**
*/

section.indented {
}

section.indented > .inner {
	padding: 0 50px 30px 110px;
}

/* like .indented, but for left padding only */
section.indented > .inner-left {
	padding: 0 0 30px 110px;
}

/* override bottom padding if .inner doesn't enclose whole section */
section.indented .inner-partial{
	padding-bottom: 0;
}

/* TODO: use a different class ("content-section" or something instead of "indented") to associate w/this h1? */
section.indented > h1 {
	font-size: 19px;
	line-height: 1;
	margin: 0 0 20px 0;
	border-bottom: 10px solid #e0e0e0;
	padding: 0 0 3px 0;
	text-transform: uppercase;
	color: #000000;
}

section.indented .inner p,
section.indented .inner-left p {
	margin-top: 0.77em;
	margin-bottom: 0; /* avoid additional space at bottom of section */
}


/*
** 3-line page title group (large red main title, 2 small subtitle lines)
*/

hgroup.page-titles h1 {
	margin-bottom: 0;
	font-size: 2.4em;
	font-weight: bold;
	color: #C03527;
	line-height: 1.2;
	margin-bottom: 10px;
}

hgroup.page-titles h2 {
	margin-bottom: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	font-weight: bold;
	text-transform: uppercase;
	/* letter-spacing: 1px;  (looks pretty close to kerning on treatment) */
}

hgroup.page-titles h2.sub1 {
	color: #000000;
}

hgroup.page-titles h2.sub2 {
	color: #707070;
}

.spacer {
	margin: 0 2px;
	color: #858585;	
}


/* 
** related items (not in grid layout)
*/

.rel-item {
	margin-top: 20px;
}

h2.rel-item-title {
	margin-bottom: 10px;
	font-size: 1.4em;
	line-height: 1;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #000000;
}

h2.rel-item a {

}

/*
** profile items (on profile detail page)
*/

div.profile-item {
	margin-bottom: 30px;	
}

h2.profile-item-title {
	margin-bottom: 5px;
	margin-top: 20px;
	font-size: 1.3em;
	line-height: 1;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #000000;
}

div.profile-item p {

}

/*
** section containing a grid layout
*/

section.grid {

}

/* note rows also have clearfix */
section.grid .row {
	margin: 20px 0;
}

section.grid .row.first {

}

section.grid .row.last {
	margin-bottom: 0; /* section has bottom padding already */
}

section.grid img {
	display: block;
}

section.grid .thumb-image {
	float: left;
	width: 194px;
}

section.grid .row .middle {
	margin-left: 44px;
	margin-right: 44px;
}

section.grid-images-bordered .row .middle {
	margin-left: 35px;
	margin-right: 35px;
}

.thumb-image a.thumb-image-link,
.thumb-image a.thumb-image-link img {
	display: block;
	/* width: 194px; */
	/* height: 194px; */
}

.thumb-image a.thumb-exhibition-link,
.thumb-image a.thumb-exhibition-link img {
	display: block;
	width: 107px;
	height: 107px;
}

/*
**
*/

img.bordered,
.thumb-image-bordered img {
	border: 1px solid #C1C1C1;	
	background-color: #FFFFFF;
	padding: 5px;
}

.image-subtext {
	margin: 4px 0 15px 0;
}

.image-subtext span {
	display: block;
	color: #666666;
}

.image-subtext span.image-caption {
	margin-top: 4px;
	font-size: 1.2em;
	font-style: italic;
	color: #000000;	
}

.image-subtext span.image-credit {
	font-size: 1.1em;
}

/* WYSIWYG images? */

img[align=left] {
	padding: 0 20px 20px 0 !important;
}

img[align=right] {
	padding: 0 0 20px 20px !important;
}

/* widths scheme:
** img = 188, 5px padding, 1px border = 200px total per bordered image.
** (3 x 200 = 600) + (2 x 35 margin) = 670.
*/
section.grid .thumb-image-bordered {
	float: left;
	width: 200px;
}

a.thumb-image-link:link, a.thumb-image-link:visited,
a.thumb-image-link:hover, a.thumb-image-link:active {
	text-decoration: none;
}

.thumb-image-bordered a.thumb-image-link {
	display: block;
	width: 200px;
	height: 200px;
}

.thumb-image-bordered a.thumb-image-link img {
	display: block;
	width: 188px;
	height: 188px;
}

.thumb-image-bordered a.thumb-image-link-labeled span.label-overlay {
	display: block;
	position: absolute;
	left: 0;
	bottom: 12px;
	width: 180px;
	padding: 10px;
	background-color: #000000;
	color: #FFFFFF;
	font-size: 1.0em;
	font-weight: bold;
	text-transform: uppercase;
}

.thumb-image-bordered a.thumb-image-link-labeled:hover span.label-overlay {
	background-color: #C03527;
}


.thumb-image-captioned p.caption {
	margin-top: 6px;
	font-size: 1.1em;
	font-style: italic;
}


/*
** grid of collection objects
*/

.thumb-collection-object {

}

.thumb-collection-object .meta {
	margin-top: 6px;
	line-height:1.5;
}

.thumb-collection-object h2.artist-name,
.thumb-collection-object h2.artist-lifespan,
.thumb-collection-object h2.artist-nationality,
.thumb-collection-object h3.object-title {
	margin: 0;
	font-size: 1.2em;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}

.thumb-collection-object h2.artist-name {
	text-transform: uppercase;
	color: #000000;
}

.thumb-collection-object h2.artist-lifespan,
.thumb-collection-object h2.artist-nationality {
	color: #000000;	
}

.thumb-collection-object h3.object-title {
	color: #404040;
	line-height:1.2;
}


.thumb-collection-object .year {
	display: block;
	font-size: 1.2em;
}


/*
** common date styling
*/

.date {
	display: block;
	font-size: 1.0em;
	font-weight: bold;
	text-transform: uppercase;
	color: #404040;
}

/* keep in case we need to split date styling again */
.date-major {

}

.date-minor {

}

/*
**
*/

.thumb-date-box {
}

.thumb-date-box a.image-link,
.thumb-date-box img {
	display: block;
	float: left;
	width: 107px;
	height: 107px;
	margin-top: 2px; /* line up with date */
}

.thumb-date-box a.image-link img {
	float: none;
}

.thumb-date-box .date {
	margin: 0 0 0 122px;
}

.thumb-date-box .gallery {
	display: block;
	margin-left: 122px;
	font-size: 1.2em;
}

.thumb-date-box h2 {
	margin: 5px 0 5px 122px;
	border: 0;
	padding: 0;
	line-height: 1;
}

.thumb-date-box h2 a {
	color: #c03527;
}

.thumb-date-box h2 a:hover {
	color: #000000;	
}

.thumb-date-box .location {
	display: block;
	margin-left: 122px;
	font-size: 1.2em;
}

.thumb-date-box p {
	margin: 12px 0 0 122px;
	padding: 0;
	font-size: 1.2em;
}

/*
**
*/

.date-box {
}

.date-box .date {
	margin: 0 0 0 0;
}

.date-box h2 {
	margin: 5px 0 10px 0;
	border: 0;
	padding: 0;
	font-size: 1.4em;
	line-height: 1;
	color: #c03527;
}

.date-box h2 a {
	color: #c03527;
}

.date-box h2 a:hover {
	color: #000000;
}

.date-box p {
	margin: 10px 0 0 0;
	padding: 0;
}

/*
** thinner comment box
*/

.dialogue-box {
	padding: 13px 0 0 0;
	background: transparent url(../_images/dialogue_box_top.png) left top no-repeat;
}

.dialogue-box .inner {
	padding: 10px 15px 13px 15px;
	background: #e2e3e4;
}

.dialogue-box p {
	margin: 0 0 10px 0;
}

.dialogue-box .author {
	font-style: italic;
}


/*
** wider comment box
*/

.discussion-box {
	width: 620px;
	background: transparent url(../_images/discussion_box_top.png) no-repeat left top;
	padding-top: 17px;
	margin-bottom: 10px;
}

.discussion-box .inner {
	padding: 4px 15px 14px 15px;
	background-color: #e2e3e4;
}

.discussion-box p {
	margin: 0 0 8px 0 !important; /* I don't like this, but do want to keep it generic */
}

.discussion-box .author {
	font-style: italic;
}

/*
** comment form
*/

a#leave-comment-link {
	display: block;
	margin: 10px 0;
	text-align: right;
	margin-top:20px;
	clear:both;
	text-align:right;
}

div#add-comment {
	margin: 20px 0;
}

div#add-comment label {
	display: block;
	margin-top: 10px;
	margin-bottom: 6px;
	font-size: 1.2em;
	font-weight: bold;
}

div#add-comment textarea#comment-body {
	display: block;
}

div#add-comment input#comment-submit {
	display: block;
	margin-top: 6px;
	width: 156px;
	height: 20px;
	border: 0 none;
	padding: 0;
	background-image: url(../_images/submit_comment_btn.png);
	cursor: pointer;
}


/*
form#add-comment {
	margin: 20px 0;
}

form#add-comment label {
	display: block;
	margin-top: 10px;
	margin-bottom: 6px;
	font-size: 1.2em;
	font-weight: bold;
}

form#add-comment textarea#comment-body {
	display: block;
}

form#add-comment input#comment-submit {
	display: block;
	margin-top: 6px;
	width: 156px;
	height: 20px;
	border: 0 none;
	padding: 0;
	background-image: url(../_images/submit_comment_btn.png);
	cursor: pointer;
}
*/

/*
** Content containing text and images/media
*/

.content-text-images {

}

/* TODO: determine how images will be inserted in relation to paragraphs? 
   especially that images in middle of text will need top margin
*/

.content-text-images img {
	margin-top: 4px;
	margin-bottom: 10px;
}

.content-text-images img.f-left {
	float: left;
	margin-right: 20px;
}

.content-text-images img.f-right {
	float: right;
	margin-left: 20px;
}


/*
** Media embeds
*/

.video {
	margin: 20px 0;
}

.video .video-embed {
	/* placeholder */
	width: 460px;
	height: 360px;
	background-color: gray;
}

.audio {
	margin: 20px 0;
}

.audio .audio-embed {
	/* placeholder */
	width: 460px;
	height: 75px;
	background-color: gray;
}

/*
** Order form
*/

.required-asterisk {
	color: #C03527;	
}


/*
** Visiting the Museum
*/

.directions-map,
.hours-grid,
.admissions-grid {
	color: #000000;
	font-size: 1.2em;
	width: 300px;	
	float: left;
	display: block;
}

.hours-row,
.admissions-row {
	border-bottom: 1px solid #D1D3D4;	
	padding: 2px 15px;
	position: relative;
	display: block;
}

.hours-row .hours-day,
.admissions-row .admissions-type {
	float: left;
	font-weight: bold;
}

.hours-row .hours-time,
.admissions-row .admissions-price {
	float: right;
}

.directions-info,
.hours-info,
.admissions-info {
	margin-left: 320px;	
}

section.indented .directions-info p {

}

.parking-header {
	color: #000000;
	font-weight: bold;	
}


/*
** Kids Classes
*/

.class-info-block {
	margin-top: 30px;	
}

section.indented p.class-details {
	margin-top: 5px;	
	margin-bottom: 0;
}

section.indented p.class-description {
	padding-top: 10px;
	margin-top: 10px;
	border-top: 1px solid #CCCCCC;
}

/*
** Blog section
*/

.blog-col {
	width: 625px;	
	float: left;
	margin-bottom: 10px;
}

.blog-col hgroup.page-titles {
	margin-bottom: 10px;
	border-bottom: none;	
}

.blog-post {
	padding-bottom: 20px;
	border-bottom: 1px solid #CCCCCC;
	margin-left: 110px;	
	margin-bottom: 20px;
}

.blog-post-full {
	border-bottom: none;	
}

.blog-post.last {
	border-bottom: none;	
}

.post-body {
	position: relative;	
}

.post-image-block {
	float: left;
	margin: 0 20px 20px 0;	
}

.post-image-block p.caption {
	font-size: 1.1em;
	font-style: italic;
	margin: 0;	
}
.post-image-block p.credit {
	font-size: 1.1em;
	margin: 0;	
}

.post-meta p {
	color: #000000;
	margin: 5px 0;	
}

.blog-nav-col {
	width: 135px;
	float: right;
	margin-left: 20px;	
}

.blog-nav-col li.active {
	font-weight: bold;
	font-size: .85em;
}


/*
** Blog section - expanding categories, etc
*/

.blog-nav-col a.more {
	display: block;
	text-transform: uppercase;
}

.blog-nav-col .arrow {
	margin-left: 6px;

	border-left: 4px dashed transparent;
	border-right: 4px dashed transparent;
	position: relative;
}

.blog-nav-col .arrow-down {
	border-top: 5px solid;
	top: 8px;
}

.blog-nav-col .arrow-up {
	border-bottom: 5px solid;
	bottom: 10px;
}

.blog-nav-col a.more-hide {
    display:none;
}

.blog-nav-col a.more-hide {
    display:none;
}

.blog-nav-col li.more-hidden {
    display:none;
}

/* --------------------------------------------------------------------------------------------------- */

/*
a.view-all {
	display: block;
	margin-top: 20px;
	text-transform: uppercase;
}

a.more {
	display: block;
	margin-top: 6px;
	text-transform: uppercase;
}

a.inline-more {
	display: inline;
	margin-left: 6px;
	text-transform: uppercase;
	font-size: 0.77em;
}

a.show-hide {
	display: block;
	clear: both;
	margin-top: 20px;
	text-transform: uppercase;
}


a.show-hide.hiding .text-more { display: inline; }
a.show-hide.hiding .text-less { display: none; }
a.show-hide.showing .text-more { display: none; }
a.show-hide.showing .text-less { display: inline; }


a.show-hide .arrow {
	margin-left: 6px;

	border-left: 4px dashed transparent;
	border-right: 4px dashed transparent;
	position: relative;
}

a.show-hide .arrow-down {
	border-top: 5px solid;
	top: 9px;
}

a.show-hide .arrow-up {
	border-bottom: 5px solid;
	bottom: 9px;
}

.show-hide-content {
	display: none;
	margin-top: 20px;
}
*/

/* --------------------------------------------------------------------------------------------------- */




/* Back to Top link */

.top-link {
	float: right;
	margin-top: 4px;
	line-height: 19px;
	text-transform: uppercase;	
}

.viewall {
	display: inline-block;
	margin: 1em 0;
	padding: 0;
	font-size: 1.3em;
	line-height: 1.3em;
	text-transform: uppercase;	
}