/* This css is for any screen under 520px wide */
/* The styles are also applied up to 799px wide, though 520-799 gets some overrides through other css file */

#pageContentWrap { min-width: 200px !important; width: auto !important; background-image: none !important; background-color: #fff;}
.container_16 {  width: auto !important;}

/* make all gridded elements flexible width */
.grid_12, .grid_11, .grid_10, .grid_9, .grid_8, .grid_7, .grid_6, .grid_5, .grid_4  { width: auto !important;}

#main.alpha { margin-left: 0px !important; }
.omega { margin-right: 0 !important;} 


div#masthead { display: none; }


div#collectionBannerOuter { width: auto !important;}
	div.collectionDescription { width: auto;}



	#mastSuperWrap {}


	#dlLogoMobile { clear: both; display: block; float: left; width: 99%; }

	#logoLibraryMobile {  clear: both; display: block !important; 
	text-align: center !important; display: block; background-image: url(../images/banners/dukelib-logo-72.png); height: 72px; width: 177px; 
	 margin-left: auto !important; margin-right: auto !important; float: none;}

		#logoLibraryMobile a { width: 100%; height: 100%; display: block; }
		#logoLibraryMobile a span { display: block; visibility: hidden; color: white; }

		#dividerMobile { display: none;}

		#logoDCMobile { display: none !important; }
		#logoDCMobile a { width: 100%; height: 100%; display: block; }
		#logoDCMobile a span { visibility: hidden;}


		#menuDCMobile { display: block; width: 47px; position: absolute; top: 15px; right: 10px; }
			#menuDCMobile img { -moz-box-shadow: -1px 0 3px #222; -webkit-box-shadow: -1px 0 3px #222; box-shadow: -1px 0 3px #222;}
		div.mobileSubBanner {  font-family: Garamond, serif; font-size: 17px; text-transform: uppercase; display: block !important; background: black; padding: 0; text-align: center; !important;}
		div.mobileSubBanner a { color: #fff; display: block; width: auto !important;  padding: 8px;}
		div.mobileSubBanner a:hover { background: #333; text-decoration: none;}
	

		/* Remove customizations to collection banners at small size (many would otherwise not fit horizontally) */
		
		div#subMastWrap { height: auto !important; }
		div#collectionBannerOuter { height: auto !important; background-image: none !important; }
		div#collectionBanner { height: auto !important; }
		div.collectionIcon60 { display: block !important;}
		div.collectionLogo { display: none !important;}
		div.collectionTitle { display: block !important;}
		div.collectionTitle h1 { display: block !important; visibility: visible !important; }
		div.collectionDescription { position: static !important;}

input#keyword {  display: block; width: auto;}

	div#searchBox label#scopeLabel, img.scopeIcon, select.scopeMe { display: none;}
	
div.advancedLink {  }

#mainContent { width: 98% !important; padding: 3px !important;}

div.shareLinks { display: none;}
div.mobileCollectionContext { display: block; float: right; width: 140px; font-size: 10px;}
#sidebar { clear: both; width: auto !important; margin-left: 10px; padding: 0;}

	div.collectionSummary { float: none !important; width: auto !important;}

div#highlightBox img { max-width: 100% !important;}

ul.columnar { float: none; width: auto;}
#dcFooter {}
	#dcFooter div.contributors { margin-left: 10px; border-right: none;}
	#dcFooter div.grid_3, #dcFooter div.grid_4, #dcFooter div.grid_6 { width: auto !important; clear: both;}
	
#libraryFooter { width: auto !important; display: none;}

/* HOMEPAGE */

#blogposts, .twitterblock { margin-left: 10px;}

.twtr-timeline { height: auto !important;}


/* PORTALS */
div.collectionIcon60 { display: inline !important; float: left; margin-right: 15px !important; }
div.collectionLogo { display: inline; float: left !important;}
div.collectionTitle { clear: none; float: left !important; display: inline !important; width: auto !important; margin: 5px;}
div.collectionTitle h1 { clear: none; font-size: 24px; visibility: hidden; !important;}


div.collectionDescription { width: auto !important; margin: 5px !important;}

ul.facetBrowse li { font-size: 13px;}
ul.collectionLinks { width: auto !important; list-style: square outside; margin: 0 0 0 10px !important; padding: 5px !important; background: none; box-shadow: none; } 
ul.collectionLinks li a { color: #003366; font-weight: bold; }

/* Search Results */
#mainContent.omega { margin-left: 0px; margin-right: 10px !important;}
#narrow { display: none;}
#collectionContext { display: none; }
a#narrowLink { display: block;}
div.viewOptions { display: none;}
ul#resultsGrid li.grid_3 { float: left; width: 48%; margin-left: 0 !important; margin-right: 3px !important;}

/* Aux pages */

div.browsebysubject div.alpha { margin-left: 10px; }
div.ln-letters { margin-bottom: 20px; float:left; }
div.ln-letters a { float: left; font-size: 18px; padding: 4px 8px; }
ul#collectionList { margin-left: 10px; }
/* ------------------------------------------- */
/*             Galleria                   */
/* ------------------------------------------- */

div.galleria-container {  width: auto !important; height: 208px;}

/* These are needed so css top-based px croppings for normal resolution don't apply at small */
div.galleria-image img { top: 0px !important; max-height: 100% !important; width:auto !important;}


div.templateSlideshow div.galleria-container { height: 450px;}

div.overlay { width: 100%; height: 208px; margin: 0;}