/* Mobile styles for windows smaller than 767px */
@media only screen  
and (max-device-width : 767px) {
html, body {background: none;}
body {background: transparent url('../assets/mbkgd-page.png') top left repeat-x;}
#viewMobile {display: none;}

/* Homepage Templating - 2012-05-11 */
#tHome #content {display: none;}

#mobile {position: relative; margin: 0 auto; width: 310px;}
#mobile, .mMenu {overflow: visible; position: relative; clear: both; display: block;}

#mobile h1 {margin: 10px 0 auto; text-align: center;}

#mobile form {height: 40px; margin-bottom: 1px; background: #000 url('../assets/mbkgd-search.gif') top left repeat-x; text-align: left;}
#mobile form input {font-size: 16px; border: none;}
#mobile form input {padding: 6px 6px 6px 6px; margin: 3px 0 0 3px ; border: none;}
#mobile form input.mSearchBtn {padding: 6px 0; margin:3px 2px 0 0; border: none; background: none; color: white;}

#mobile form input.mSearchBox {width: 70%;}

.mMenu li {width: 310px; font-size: 16px;}
.mMenu ul, .mMenu li {padding: 0; margin:0; text-align: left;}

.mMenu li {float: left; clear: both; display: block; list-style: none; margin-top: 1px;}

.mMenu li a {display: block;text-transform: uppercase;}
.mMenu li a:link, .mMenu li a:visited {color: white;}
.mMenu li a:hover, .mMenu li a:active {text-decoration: none;}

.mMenu li a {background: #900 url('../assets/mbkgd-nav.gif') top left repeat-x; color: #fff;}
.mMenu li.active a {background: #5d0101 url('../assets/mbkgd-nav-active.gif') top left repeat-x;}
.mMenu li a:hover, .mMenu li a:active {background: #5d0101 url('../assets/mbkgd-nav-active_1.gif') top left repeat-x;}

.mMenu li li a {background: #ededed;} /* changed from "none" for parent page - JM - May 16, 2012 */
.mMenu li li a:link, .mMenu li li a:visited {color: #900; background: #ededed;}
.mMenu li li a:hover, .mMenu li li a:active {color: #900; background: #ddd;}

.mMenu li a {padding: 9px 10px 10px 10px;}
.mMenu li li li a {padding: 9px 10px 10px 20px;}
.mMenu li span {color: #fff;}
.mMenu li li a {text-transform: none; text-transform: none;}
.mMenu li li span {color: #900;} /* added for parent page - JM - May 16, 2012 */

#mFooter .contact {margin: 20px 0 2px 0; font-size: 15px;}
#mFooter .donate, #mFooter .full {width: 154px; float: left; }
#mFooter .donate {clear: left;}
#mFooter .full {clear: right; margin-left: 2px;}

#mobile, #mobile h1 {z-index: 1;}
.mMenu, .mMenu .mDetail, .mMenu .mDetail li, .mMenu .mDetail li a {z-index: 10;}
.mMenu .mDetail li {width: auto; font-size: 13px;}
.mMenu .mDetail li {position: absolute; top: -50px; left: -10px;}
.mMenu .mDetail li a {border-bottom-left-radius: 0; border-top-left-radius: 0;}


#mFooter .donate a {border-radius: 0; border-top-left-radius: 3px; background: #f30 url('../assets/mbkgd-donate.gif') top left repeat-x;}
#mFooter .full a {border-radius: 0; border-top-right-radius: 3px; background: #333 url('../assets/mbkgd-full.gif') top left repeat-x;}
.mMenu #mFooter li.donate a:hover {background: #f30 none top left repeat-x;}
.mMenu #mFooter li.full a:hover {background: #333 none top left repeat-x;}


#mobile form, .mMenu li a {border-radius: 4px;}
.mMenu li.active a {border-bottom-right-radius: 0; border-bottom-left-radius: 0;}
.mMenu li li a {border-radius: 0;}

#mobile form input {border-radius: 3px;}

/* Detail Page Styles */
#header, #menu, #secondaryLeft, #leftDrop, #footer, .copyright, #borderTop, #borderBottom {display: none;}
#container {width: 310px;}

#content {background: none; margin: 0; padding:0; width: 310px; margin: 0 auto;}
#secondaryCenter {margin: 0; padding: 0; width: auto; padding-top: 20px;} 
.socialIconSet {text-align: left !important;}
#articleRelated {overflow: auto;}
#articleRelated .print {float: left; clear: both;}
#articleRelated .email {float: left;}
}

/* Landscape phone and portait tablet widths */
@media only screen  
and (max-device-width : 767px) {
#mobile {position: relative; margin: 0 auto; width: auto; display: block;}
.mMenu li {width: 100%; font-size: 16px;}
#mFooter .donate {width: 50%; float: left;}
#mFooter .full {width: 49%; float: right;}
#container {width: auto; margin: 0 10px;}
#content {background: none; margin: 0; padding:0; width: auto; margin: 0 auto;}
footer{margin-top:20px;}
}

/* Portait phone widths */
@media only screen  
and (max-device-width : 320px) {
#mobile {position: relative; margin: 0 auto; width: 310px; display: block;}
.mMenu li {width: 310px; font-size: 16px;}
#mFooter .donate {width: 154px; float: left;}
#mFooter .full {width: 154px; float: right;}
#container {width: 310px; margin: 0 auto;}
#content {background: none; margin: 0; padding:0; width: 310px; margin: 0 auto;}
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (max-device-width : 320px)
and (min-width : 321px) {
#mobile {position: relative; margin: 0 auto; width: auto; display: block;}
.mMenu li {width: 100%; font-size: 16px;}
#mFooter .donate {width: 50%; float: left;}
#mFooter .full {width: 49%; float: right;}
#container {width: auto; margin: 0 10px;}
#content {background: none; margin: 0; padding:0; width: auto; margin: 0 auto;}
}

@media only screen and ( max-width: 320px ){  /*added by ES, 16may2023*/
	#content{width: 320px;}
}
@media only screen and ( max-width: 280px ){  /*added by ES, 4aug2020*/
	#content{width: 280px;}
}