@charset "utf-8";

/**
 * Defines the style for the display case container
 * 
 * all display case styles start with div.displayCase to allow reuse of class names
 * for similar structures without style overlap (ie. timeline, slideshow, etc...)
 * 
 * It is important to note that absolutely positioned elements are positioned
 * in relation to their nearest parent with 'position: relative'
 * This allows the previewContent to be properly placed on the right side of the
 * display case without dropping down the page with the thumbnail being hovered over.
 */
div.displayCase
{
	overflow: hidden;
	position: relative;
}

/**
 * Defines the styles for the list of thumbnails in the displayCase
 */
div.displayCase ul.thumbs
{
	background-color: #DDDDDD;
	border: 1px solid #888888;
	height: 530px;
	list-style: none;
	margin: 0;
	overflow: auto;
	padding: 5px;
	width: 397px;
	z-index: 50;
	/* Remove comment to add a slight softened corner effect in Webkit and Moz browsers
	-moz-border-radius: 3px 0 0 3px;
	-webkit-border-top-left-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	*/
}

/**
 * Defines the style for a single column layout of the thumbnails
 */
div.displayCase ul.thumbs.mono
{
	width: 200px;
}

/**
 * Defines the styles for the items of the thumbnail list
 * 
 * the direct descendant selector (>) is used to prevent any list items in the previewContent
 * from being styled similarly to the thumbnail
 * 
 * uses a CSS3 transition for webkit browsers (Safari, Chrome)
 * add -moz transitions when available
 */
div.displayCase ul.thumbs > li
{
	background-color: #DDDDDD;
	float: left;
	margin: 2px 5px 5px 5px;
	padding: 2px 5px 5px 5px;
	/* Remove comment to add a slight softened corner effect in Webkit and Moz browsers
	-moz-border-radius: 3px;
	-webkit-border-radius: 0px;
	-webkit-transition-property: background-color;
	-webkit-transition-duration: 500ms;
	-webkit-transition-timing-function: ease-in-out;
	*/
}

/**
 * fixes an error in the Internet Exploder browser that prevented the thumbnails from
 * being displayed properly when the list is scrolled
 */
div.displayCase ul.thumbs a
{
	position: static;
}

/**
 * Highlights the background of the thumbnail currently being hovered over
 */
div.displayCase ul.thumbs > li:hover
{
	background-color: #C8C8C8;
}

/**
 * Sets the size of thumbnails in a two-column layout
 */
div.displayCase ul.thumbs.di > li
{
	height: 165px;
	width: 168px;
}

/**
 * Sets the size of thumbnails in a three-column layout
 */
div.displayCase ul.thumbs.tri > li
{
	height: 185px;
	width: 170px;
}

/**
 * Keeps the cursor at the default arrow instead of the pointer for links that don't lead anywhere
 */
div.displayCase ul.thumbs > li > a[href="#"], div.displayCase ul.thumbs > li > a[href=""]
{
	cursor: default;
}

/**
 * Automatically sizes the thumbnail image to the width of the thumbnail
 */
div.displayCase ul.thumbs > li > a > img
{
	position: static;
	width: 170px;
	height: 113px;
}

/**
 * Centers the thumbnails' subtext
 */
div.displayCase ul.thumbs > li > h5
{
	text-align: center;
}
div.displayCase ul.thumbs > li > h6
{
	text-align: center;
	font-weight: normal;
}

/**
 * defines the style for the previewContent in the displayCase
 */
div.displayCase div.previewContent
{
	height: 492px;
	margin: 0 2000px 0 0;
	overflow: auto;
	padding: 24px;
	position: absolute;
	right: 0;
	top: 0;
	width: 395px;
	z-index: 100;
}

/**
 * adjusts the width of previewContent for a mono layout
 */
div.displayCase ul.thumbs.mono div.previewContent
{
	width: 610px;
}

/**
 * right margin set to zero to pull the previewContent into the visible area of the page
 */
div.displayCase ul.thumbs > li:hover > div.previewContent, div.displayCase ul.thumbs > li.hover > div.previewContent
{
	margin-right: 0;
}

/**
 * Centeres and sizes the preview image
 */
div.displayCase div.previewContent > img
{
	border: 1px solid #000;
	display: block;
	margin: 0 auto;
	width: 100%;
}

/**
 * defines style for $previewHeader
 */
div.displayCase div.previewContent > h4
{
	font-size: 16px;
	margin: 15px 0 0;
	text-align: center;
}

/**
 * defines style for $previewParagraph
 */
div.displayCase div.previewContent > p
{
	
	margin: 15px 0 0;
}

/**
 * aligns the preview list
 */
div.displayCase div.previewContent > ul
{
	margin: 15px 0 0;
}

/**
 * Defines the style for the preview's datestamp
 */
div.displayCase p.timestamp
{
	font-style: italic;
	font-size: 12px;
	line-height: 13px;
	margin: 7px 0 0;
}

/**
 * Defines the style for the preview area of the display case
 * 
 * Note: the preview area has no actual content. It is just a styled placeholder
 */
div.displayCase div.preview
{
	background-color: #CAD7F4;
	border: 1px solid #6F84BA;
	height: 530px;
	margin: 0;
	padding: 5px;
	position: absolute;
	right: 0;
	top: 0;
	width: 433px;
	z-index: 90;
	/* Remove comment to add a slight softened corner effect in Webkit and Moz browsers
	-moz-border-radius: 0 3px 3px 0;
	-webkit-border-top-right-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	*/
}

/**
 * Widens the preview area in a mono-column layout
 */
div.displayCase ul.thumbs.mono + div.preview
{
	width: 630px;
}

/* BEGIN Display Case Navigation Styles 2 */

ul.nav
{
	clear: both;
	display: block;
	height: 33px;
	list-style: none;
	margin: 0 auto;
	position: relative;
	width: 535px;
}

ul.nav li
{
	display: block;
	float: left;
	margin: 0 10px 0 0;
	padding: 0;
}

ul.nav li a
{
	background-color: #6F84BA;
	color: #FFFFFF;
	display: block;
	font-size: 12px;
	line-height: 12px;
	margin: 0;
	padding: 10px 5px 11px;
	text-align: center;
	text-decoration: none;
	width: 87px;
}

li.first a, li.previous a
{
	background-image:  url(/media/backgrounds/display_case/left_arrow.png);
	background-repeat: no-repeat;
}

li.next a, li.last a
{
	background-image:  url(/media/backgrounds/display_case/right_arrow.png);
	background-repeat: no-repeat;
}

li.case a
{
	background-image:  url(/media/backgrounds/display_case/dash.png);
	background-repeat: no-repeat;
}

ul.nav li a:link, ul.nav li a:visited
{
	background-color: #6F84BA;
	color: #FFFFFF;
}
ul.nav li a:hover, ul.nav li a:focus
{
	background-color: #CAD7F4;
	color: #000000;
}
ul.nav li a:active
{
	background-color: #B4C4EA;
	color: #000000;
}

ul.nav li.last
{
	margin: 0;
}

ul.nav li.disabled a
{
	background-color: #CCCCCC;
	color: #888888;
}

/* BEGIN Display Case Navigation Styles 1 */

/**
 * Defines the style for the list of navigation buttons
 *
ul.nav
{
	border-bottom: 2px dashed #000000;
	clear: both;
	height: 20px;
	list-style: none;
	margin: 0;
	padding: 0 0 10px 0;
	position: relative;
}

/**
 * Adjusts the style for the lower navigation list
 *
div.post + div.post > ul.nav
{
	border-bottom: none;
	border-top: 2px dashed #000000;
	padding: 10px 0 0 0;
}

/**
 * Defines the style for navigation items
 *
ul.nav li
{
	
	display: block;
	position: absolute;
}

/**
 * Defines the style for disabled navigation items
 *
ul.nav li.disabled
{
	
}

/**
 * Defines the style for disabled navigation links
 *
ul.nav li.disabled a
{
	background-color: #CCCCCC;
	border: 1px solid #707070;
	color: #606060;
}

/**
 * Defines the style for navigation links
 *
ul.nav a
{
	background-color: #CAD7F4;
	border: 1px solid #6F84BA;
	display: block;
	font-size: 12px;
	line-height: 12px;
	padding: 4px 6px;
	text-align: center;
	text-decoration: none;
}

/**
 * Defines the style for the item with the link to the first issue
 *
ul.nav li.first
{
	left: 0;
}

/**
 * Defines the style for the link to the first issue
 *
ul.nav li.first a
{
	width: 70px;
	-moz-border-radius: 10px 0 0 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 0;
	-webkit-border-bottom-right-radius: 0;
	-webkit-border-bottom-left-radius: 10px;
}

/**
 * Defines the style for the item with the link to the previous issue
 *
ul.nav li.previous
{
	left: 100px;
}

/**
 * Defines the style for the link to the previous issue
 *
ul.nav li.previous a
{
	width: 100px;
}

/**
 * Defines the style for the item with the link to the Display Case
 *
ul.nav li.case
{
	left: 50%;
	margin-left: -80px;
}

/**
 * Defines the style for the link to the Display Case
 *
ul.nav li.case a
{
	width: 140px;
}

/**
 * Defines the style for the item with the link to the next issue
 *
ul.nav li.next
{
	right: 100px;
}

/**
 * Defines the style for the link to the next issue
 *
ul.nav li.next a
{
	width: 100px;
}

/**
 * Defines the style for the item with the link to the most recent issue
 *
ul.nav li.last
{
	right: 0;
}

/**
 * Defines the style for the link to the most recent issue
 *
ul.nav li.last a
{
	width: 70px;
	-moz-border-radius: 0 10px 10px 0;
	-webkit-border-top-left-radius: 0;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 0;
}
/* END Display Case Navigation Styles */