/*
 * Responsive Design styles to get Hymnary
 *  to display well on mobile devices.
 */

/*
 * iPad, tablets (in portrait orientation)
 */
@media (min-width: 481px) and (max-width: 768px) {
	#wrapper #container #center {
		float: none;
		width: auto;
	}

	body {
		min-width: 0 !important;
		width: 100%;
	}

	#wrapper {
		min-width: 0;
	}

	#sidebar-first, #sidebar-first-hymn, #sidebar-second {
		display: none !important;
	}
	#center#center, #squeeze#squeeze {
		margin: 0;
	}

	/* The shopping cart display is more important: will be displayed above other content */
	#block-hymnary_ecommerce-BLOCK_MOBILE_CART {
		display: block;
	}

	body.sidebars #center {
		margin: 0;
	}

	body.sidebars #squeeze, #before {
		margin: 0;
	}

	#header-bar {
		padding-left: 50px;
	}
}

/*
 * Small mobile
 */
@media (max-width: 480px) {
	div.app-contents-spacer
	{
		padding: 0px;
	}
	body {
		min-width: 0 !important;
	}
	
	#center {
		position: relative;
	}

	#wrapper {
		min-width: 0;
		overflow: hidden;
	}

	#sidebar-first, #sidebar-first-hymn, #sidebar-second {
		display: none !important;
	}
	#center#center, #squeeze#squeeze {
		margin: 0;
	}

	#wrapper #container #center #squeeze {
		padding: .5em;
	}

	body.sidebars #center {
		margin: 0;
	}

	body.sidebars #squeeze, #before {
		margin: 0;
	}

	#wrapper #container #header {
		height: 60px;
	}

	#wrapper #container #header #logo-floater {
		margin-left: 25px;
	}

	#mobile-user-links {
		background: #49121f;
		display: block;
	}
	#mobile-user-links > div.item-list > ul.links.secondary-links {
		border-bottom: 2px solid #cec48d;
		width: 100%;
	}
	/* Ensure no margin tops push the links down */
	#mobile-user-links > div.item-list ul.links.secondary-links {
		margin: 0;
	}
	#mobile-user-links > div.item-list ul.links.secondary-links a {
		margin: 0.5em 1em 0.5em 0;
	}
	#mobile-user-links > div.item-list > ul.links.secondary-links > li.first {
		float: left;
	}
	#mobile-user-links > div.item-list > ul.links.secondary-links > li.last {
		float: right;
	}
	#mobile-user-links > div.item-list > ul.links.secondary-links > li div.secondary-links-separator {
		display: none;
	}
	#wrapper #container #header #non-mobile-user-links {
		display: none;
	}

	#logo-floater a {
		left: 45px;
		width: 80%;
		width: calc( 100% - 45px );
	}

	#logo-floater img {
		width: 302px;
	}

	#logo_h_background {
		width: 60px;
		height: 60px;
		left: 70px;
	}

	#header #social-blocks {
		display: none;
	}

	#header-bar {
		height: auto;
		padding-left: 50px;
	}

	.search-submit {
		border: 2px solid #670C24;
		background: none;
		background-color: #9802E;
	}

	#header .block {
		display: none;
	}

	#header .links {
		margin: 0;
	}
	#header .links a {
		margin: .5em .25em;
	}
	#header .secondary-links-separator {
		margin: .25em 0;
	}

	#wrapper #container #squeeze #footer {
		margin: -.5em;
		margin-top: .5em;
	}
	#wrapper #container #footer .region-footer {
		font-size: 80%;
	}

	#footer #footer-logos {
		display: none;
	}

	/* The shopping cart display is more important: will be displayed above other content */
	#block-hymnary_ecommerce-BLOCK_MOBILE_CART {
		display: block;
	}

}

/* Very small mobile */
@media all and ( max-width: 320px )
{
	#logo-floater
	{
		display: none;
	}
	#logo_h_background #compactLogo
	{
		/* As long as #logo_h_background has square dimensions, this will be positioned correctly.*/
		display: block;
		height: inherit;
		margin-left: -35%;
	}
	#logo_h_background
	{
		position: initial;
		margin-left: auto;
		margin-right: auto;
	}
	#logo_h_background a
	{
		display: inline;
		position: absolute;
		height: inherit;
		width: inherit;
	}
	#wrapper #container #header {
		height: 60px;
	}
	#header .links,
	#mobile-user-links
	{
		display: none;
	}
}

@media all and (max-width: 215px )
{
	#logo_h_background
	{
		margin-left: 70px;
	}
}

@media (max-width: 929px) {
	div#sidr {
		overflow: scroll;
	}
}