/* this file adds css that will change the default way things are displayed on unusually small (mobile) screens, or super-large screens */



/* by default HIDE the .dcresonly classes, they will only be shown in responsive narrow width */
.dcresonly {
	display: none;
}


	
/* Medium narrow, less than 1024px */
@media (max-width: 1024px) {

	/* this stuff kills centering of large gallery image */

	/* ignite gallery make sure it fits */
	div.main_images_wrapper {
		max-width: 500px !important;
	}
	.main_large_image img {
		max-width: 400px !important;
	}

	/* addon menu css customizing -- this is not currently used */
	#horizmenu-surround .menutop
	{
		padding: 0;
		margin: 0;
	}


	/* used on front page for big news */
	.dc_siteheadline {
		font-size: 26px;
		line-height: 26px;
	}

}





/* Narrow, smaller than 768px width
this is the main responsive css stuff
banner and top area at certain size gets displayed differently
with less margins,padding, and smaller fonts
*/

@media (max-width: 768px) {

	#dcjtopbannerouter {
		background: none;
		height: auto;
	}
	
	.dctopbannerarea {
		padding-left: 0px;
		padding-right: 0px;
		padding-top: 0px;
	}

	.page-header h2	{
		font-size: 23px;
		padding-top: 2px;
		padding-bottom: 2px;
	}

	.navigation {
    margin: 0;
	}
	




	/* NEW 11/12/17 css to make sidebar show properly docked to TOP when in responsive mode */
	 .dcmain {
		display: block;
	}
	.dcside, .dcsideinside {
		width: auto;
	}
	
	/* 11/12/17 disabling this; it was part of the css code to handle hiding/movingtotop the sidebar, but it seems to not be neeed-- it's possible they are important for pages without main/sidebar classes */
	/*
	.dccontainer , .dcoutercontainer {
		display: block;
	}
	*/





	/* hide our internal ads if not in modal view */
	:not(.modal) .dcside .dcboxitems_outer {
		display: none;
	}

	:not(.modal) .dcboxmode_ad {
		display: none;
	}


	/* explcitly hide non-responsive elements */
	.dcnonres {
		display:none;
	}

	/* this hides dcside completely UNLESS the div also has the class "dcstayres" */
	.dcside:not(.dcstayres) {
		display: none;
	}

	/* show this class ONLY in responsive mode (see above where its disabled by default) */
	.dcresonly {
		display: block;
	}

	/* show even when we would normally hide */
	.dcstayres {
		display: block;
	}




		/* ignite gallery make sure it fits */
	div.main_images_wrapper {
		max-width: 400px !important;
	}
	.main_large_image img {
		max-width: 300px !important;
	}



	/* make search bar tighter */
	.dc_float_right_search_outer {
		margin-right: 0;
	}
  .dc_float_right_search {
	 	text-align: right;
		position: relative;
		display: block;
		margin-right: 1px;
	}
	/* this makes the search field take up entire width (minus buttton) */
	.dc_float_right_search_outer .finder {
	display: flex;
	}
	.dc_float_right_search_outer input.search-query {
	display: flex;
	flex-grow: 1;
	}

	/* tighten up navigation (breadcrumb area) */
	.navigation {
		padding-right: 4px;
	}


	/* make some input button images smaller */
	input[type="image"].dcresimage {
		max-width:200px;
		}

	/* for dynamic menulist pages */
	.dcmenulist_image img {
		width: 80px;
		margin: 6px;
	}

	.dcresimage img {
		max-width:200px;		
	}

	/* weblinks box, like on Friends of DC page */
	.dcbox_largeimage img.dcboximg {
  	width: 90px;
	}

	.dcsideblock ul {
		margin-bottom: 0px;
	}


	/* sidebar is usually hidden, but if not and its shown at top, hide the cute sidebar image */
	.dcsideimage, .dcsideimageb {
		visibility: hidden;
		height:0; overflow:visible;
		margin-bottom: 0px;
	}


	/* used on front page for big news */
	.dc_siteheadline {
		font-size: 22px;
		line-height: 22px;
	}

}



/* Super narrow, less than 1024px */
@media (max-width: 500px) {
	/* ignite gallery make sure it fits */
	div.main_images_wrapper {
		max-width: 300px !important;
	}
	.main_large_image img {
		max-width: 200px !important;
	}


	/* used on front page for big news */
	.dc_siteheadline {
		font-size: 14px;
		line-height: 14px;
	}

}











/* when page is VERY TALL */
@media (min-height: 1200px) {
	/* adds a little padding at top since we have room */
	.dctopbannerarea {
		padding-top: 20px;
	}
}	







/* when page is VERY WIDE */
@media (min-width: 1200px) {
	.container-fluid
	{
		min-width: 1100px;
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	
	.dctopbannerarea {
		min-width: 1100px;
		width: 90%;
		margin: auto;
	}
	
	.page-header h2	{
		padding-top: 7px;
		padding-bottom: 10px;
		font-size: 28px;
	}

}