@charset "utf-8";
/* CSS Document */

@media screen and (min-width:772px) and (max-width: 960px) {
#container {width:98%; margin: 0 auto;}	
html {font-size:50.5%;}	
#topinput input {width: 75.3%;}
#nav ul li {padding:0 2%;}
.caption {height:55%; top: 34%;}
.caption h2 {font-size:18px; line-height:22px;}
#footer-left {width:37%;}
#footer-center{width:30%; padding-top:0;}
#footer-center h2, #footer-right h2{line-height:18px; padding-bottom:10px; font-size:16px;}
#footer-right {width:33%;}
#footer-right div {padding-top:0;}
#footer-right h2 {padding-left:5%;}

/* interior */
#banner img {width:100%; height:auto;}
h1{clear:right;}
.two-col div.landing-promo, #main .callout {width:48%; }
.two-col div.landing-promo{margin-right:20px;}
.two-col div.landing-promo:nth-child(2) {margin-right:0px;}
#promos {margin-top:20px;}
#promos div.promo{width:32%; height:auto; float:left;}
#promos div.middle {margin:0 5px;}
#promos img {width:100%; height:auto;}
#promos .button {font-size:12px; line-height: 14px; padding: 4px;}
.map {width: 100%; max-width:610px; }
.map #map {width:100%; height: auto;}
}

@media screen and (min-width:700px) and (max-width:771px) {
html {font-size:40.5%;}
#container {width:98%; margin: 0 auto;}	
/*#header-left {width:36.9%;}*/
#topinput input {width: 68.3%;}
#header-right p {margin-top: 1.5rem;}
#nav ul li {padding:0 2%;}
.caption {height:60%; top: 30%;}
.caption h2 {font-size:18px; line-height:20px;}
#home-left {width:50%;}
#home-left h2 {font-size:16px;}
p.date {font-size:12px;}
#home-left p {font-size:14px;}
.slidenav_nav.next {bottom:16%;}
#banner .slidenav_nav.next{bottom: 26%;} 

#home-center, #home-right {width:40%; float:right; padding:0; margin:10px 0;}
#home-twocol {width:100%;}
#footer-left {width:50%;}
#footer-center, #footer-right{width:45%; float:left; height:auto; padding:0px;}
#footer-center h2, #footer-right h2{line-height:18px; padding-bottom:10px; font-size:16px;}
#footer-right div {padding-top:5px; text-align:left;}
#footer-right h2 {padding-left:0;}	
#footer-right form {margin-left:-5px;}
#footer #footer-right p.copyright{padding-top: 0px; text-align:left}

/* interior */
#sidebar {width:146px;}
#sidebar li {font-size:16px; /*padding: 9px 18px*/}
#sidebar p.promo {font-size:15px; padding-left:15px;}
#sidebar p.promo span{font-size:14px;}
#sidebar p.promo img {vertical-align:middle;}
#sidebar p.button {font-size:14px;}
div#banner {height:auto;}
#banner img {width:100%; height:auto;}
h1 {font-size:26px;}
h2 {font-size:18px; margin-top:10px;}
.two-col div.landing-promo, #main .callout {width:48%;}
.two-col div.landing-promo {margin-right:20px;}
.two-col div.landing-promo:nth-child(2) {margin-right:0px;}
#promos {margin-top:20px;}
#promos div.promo {width:32%; height:auto; float:left;}
#promos div.middle {margin:0 5px;}
#promos img {width:100%; height:auto;}
#promos .button {font-size:12px; line-height: 14px; padding: 4px;}
.map {width: 100%; max-width:610px; }
.map #map {width:100%; height: auto;}
.eventsearch{width: 80%}
.eventsearch form{width: 65%;}
.eventsearch select{width: 100%}
}

@media screen and (min-width:600px) and (max-width:699px) {
html {font-size:40.5%;}
#container {width:98%; margin: 0 auto;}	
/*#header-left {width:36.9%;}*/
#topinput input {width: 68.3%;}
#header-right p {margin-top: 1.5rem;}
#nav ul li {padding:0 2%;}
.caption {padding: 2%; height:62%; top: 24%;}
.caption h2 {font-size:16px; line-height:18px;}
#home-left {width:50%;}
#home-left h2 {font-size:16px;}
p.date {font-size:12px;}
#home-left p {font-size:14px;}
.slidenav_nav.next {bottom:17%;}
#banner .slidenav_nav.next{bottom: 27%;} 

#home-center, #home-right {width:40%; float:right; padding:0; margin:10px 0;}
#home-twocol {width:100%;}
#footer-left {width:50%;}
#footer-center, #footer-right{width:45%; float:left; height:auto; padding:0px;}
#footer-center h2, #footer-right h2{line-height:18px; padding-bottom:10px; font-size:16px;}
#footer-right div {padding-top:5px; text-align:left;}
#footer-right h2 {padding-left:0;}	
#footer-right form {margin-left:-5px;}
#footer #footer-right p.copyright{padding-top: 0px; text-align:left}


/* interior */
#sidebar {width:146px;}
#sidebar li {font-size:16px; /*padding: 9px 18px*/}
#sidebar p.promo {font-size:15px; padding-left:15px;}
#sidebar p.promo span{font-size:14px;}
#sidebar p.promo img {vertical-align:middle;}
#sidebar p.button {font-size:14px;}
div#banner {height:auto;}
#banner img {width:100%; height:auto;}
h1 {font-size:26px; clear:right;}
h2 {font-size:18px; margin-top:10px;}

.two-col div.landing-promo, #main .callout {width:100%;}
.two-col div.landing-promo:nth-child(2) {margin-right:0px;}
#promos {margin-top:20px;}
#promos div.promo {width:100%; height:auto; float:left;}
#promos div.middle {margin:0 5px;}
#promos img {width:auto; height:auto;}
#promos .button {font-size:12px; line-height: 14px; padding: 4px;}
.map {width: 100%; max-width:610px; }
.map #map {width:100%; height: auto;}
.eventsearch{width: 80%}
.eventsearch form{width: 65%;}
.eventsearch select{width: 100%}
}


@media screen and (max-width:599px) {
html {font-size:62.5%;}
#container, #header-left, #header-center, #header-right,#home-left, #home-center, #home-right, #home-twocol, #footer-left, #footer-center, #footer-right, .caption {width:100%;}
#header-right {float:left; text-align:center;}
#header-left img {width:100%; height:auto;}
#header-center {margin:0; padding:10px 25px; font-size:13px; border:none; width:auto;}
#nav ul li {display:block; border-bottom:1px solid #13b8ec; padding-left:5%; width: 95%;}
#nav {height:auto;}
#slides {margin:10px 0;}
#slider li img{margin-bottom:10px;}
.slidenav_nav.prev {
right: 9999px;
}

.slidenav_nav:active {
  opacity: 1.0;
  }

.slidenav_nav.next {
bottom:65%;
right: 10px;
}


.caption {position:static; width:auto; background-image: none; background-color:transparent;padding:10px; height:auto;}
.caption h2 {font: 18px 'Doppio One', sans-serif; color:#1280c4; margin:10px 0; font-weight:normal; line-height:22px;}
.caption p {color:#000;}

#home-left {border-top: 1px solid #d1d2d4; margin-top:0px; padding:10px; width:auto;}
#home-center, #home-right {float:left; padding:0; margin-top:10px;}

#footer {border-top:none; margin:20px; padding-top:0px;}
#footer-center {margin:10px 0;}
#footer-right div {float:left; text-align:left; margin-left:-5px; padding:30px 0 15px 0;}
#footer-right h2 {font-size:22px; padding-left:2%;}
#footer #footer-right p.copyright{padding-top: 0px; text-align:left}
#home-twocol {display:none;}
#home-twocol-mobile {display:block; float:left;margin-top:10px;}
#footer-center {
    height: auto;
    margin-bottom: 0;
}
#charity-logos {
    margin-left: 110px;
    text-align: left;
}
#footer-right div{
    padding-top: 10px;
}

/* interior */
#content {position:relative; width:90%; margin:0 15px;}
#main {padding-left:0px;} 
#sidebar, #banner {display:none;}
#sidebar-mobile {display:block; width:100%;}
#sidebar-mobile ul {background:url(../../../assets/images/sm-stripe.gif) bottom repeat-x; width:100%; background-color:#f3f0f0;}
#sidebar-mobile li a:link,#sidebar-mobile li a:visited{color:#0a4d75; text-decoration:none; border:none; font-weight:normal; padding: 11px 3%; display:block;}
#sidebar-mobile li li a{padding: 5px 3% 5px 5.5% !important;}

#main .feature {width:auto; float:none;margin:0;}
#main .feature img {width:100%; height:auto;}
div#banner {height:auto;}
#banner img {width:100%; height:auto;}
h1 {font-size:26px; clear:right;}
h2 {font-size:18px; margin-top:10px;}
.two-col div.landing-promo {width:100%; float:none;}
.two-col div.landing-promo:nth-child(2) {padding-left:0px; padding-right:0;}
#main .two-col .callout {width: 100%;}
#promos {margin-top:20px;}
#promos div.promo {width:100%; float:none; position:relative;margin-bottom:15px;}
#promos div.middle {margin:0; margin-bottom:15px;}
#promos img {/*border: 1px solid #d1d2d4;*/ width:100%; height:auto;}
#promos .button {font-size:16px; position: absolute; top: 12px; padding: 6px;}
#promos div.middle .button {top: auto; bottom:10px; left: 13px;}
#footer {margin:15px;}
p.intro {font-size:14px; line-height:18px;}
p.intro img, .two-col div img {float:left; width:100%; height:auto;}
.map {display:none;}
.eventsearch{width: 80%}
.eventsearch form{width: 65%;}
.eventsearch select{width: 100%}
}

@media screen and (max-width: 400px){
.eventsearch{width: 100%}
.eventsearch form{width: 65%;}
.eventsearch select{width: 100%}
.slidenav_nav.next {bottom:70%;}
}


@media screen and (max-width: 300px){
.slidenav_nav.next {bottom:75%;}	
}

@media screen and (max-width: 250px){
#controls{width: 100%;}
#control-size, #controls .addthis_toolbox{float:left;}	
}