﻿
/*
	===================
	zomg media queries!
*/

/* clear grids*/
#VA .home .homeThird,
#VA .home .homePush { width: 100%!important; }

/* er mah gerd, grerds:*/
#bd .vaSidebar,
#bd .vaContent,
#bd .vaContent .sf_colsOut,
#hd .sf_colsOut  { float: none; width: 100%!important; }

.landing-alternate .divSectionNav {  position: static; margin: 0 0 10px; }

.landing-alternate .breakout { width: 100%; float: none; }

#bd > .pgWidth:first-child { position: relative; z-index: 2; }

/* there is a <br/> here, give some extra space */

.skip-to { line-height: 32px; }

/*sidebar floaties get really complicated, just center em*/
	.newsList,
	#bd .vaContent .contentSidebar .boxShadow1 { max-width: 420px; margin-left: auto; margin-right: auto; }
	


@media (min-width: 320px){
	/* every 160 add another footer grids*/
	#VA .footerContent .sf_colsOut { float: left; width: 50%; }
	
	/* extra shop buttons */
	.shopBtnsWrap div { float: left; }
	.shopBtnsWrap div + div { margin-left: 10px; }

}


/* get the 2nd col to float right though to allow grids under it to suck up*/	
@media (min-width:320px) and (max-width: 640px){
	#VA #ft .footerContent .sf_5cols_2_20 { float: right; }
}

/* skip-to*/
@media (min-width: 340px) and (max-width:480px), (min-width:640px){
	.skip-to { text-align: left; }
	.skip-to br { display: none; line-height: 16px; }
}

@media (max-width: 700px) {
	
	#VA .copywrite + .sf_cols .sf_colsOut { width: 49%!important; float: left; } 
}


@media (max-width: 1023px) {
	/*TODO fix up home page flow*/
	.homeContentHolder > .sf_colsOut { width: 100%; float: none;}
}



/*$420*/
@media (min-width: 420px){
	
	#bd .vaContent div > .sf_2cols_2_75 { clear: both; }
	
	/* just ft cols*/
	#VA .footerContent .sf_colsOut { float: left; width: 50%; }
	
	/* moar black sheepness */
	.landing-alternate #bd .vaContent .sf_colsOut { width: 50%!important; float: left; }
	.landing-alternate #bd .vaContent .sf_3cols_3_33 { width: 100%!important; float: none; clear: both; }
	
	/* bring back thirds...'ish */
	#bd .vaContent .sf_3cols_1_33,
	#bd .vaContent .sf_3cols_2_34 { width: 50%!important; float: left; }
	#bd .vaContent .sf_3cols_3_33 { max-width: 420px!important; float: none; margin: 0 auto; } 
	
/* socMedia on landings was positioning wrong */
	/* Landings, library */
	.socMedia { position: absolute; right: 15px; z-index: 20; top: 23px; }
		.store .socMedia { top: 3px; }
	
	.socMedia a {
		-webkit-transition: border-color 0.2s linear, opacity 0.2s linear; 
		   -moz-transition: border-color 0.2s linear, opacity 0.2s linear; 
		    -ms-transition: border-color 0.2s linear, opacity 0.2s linear; 
			 -o-transition: border-color 0.2s linear, opacity 0.2s linear; 
				transition: border-color 0.2s linear, opacity 0.2s linear; 
	}
	
	#VA .landings .socMedia, #VA .pageId-e980bacb-f9c1-4432-a12a-86bad7aff800 .socMedia { top: 285px; right: 10px; }	
	
	
	/* fix the padding of long $breadcrumb 
	need to remove the heading out of flow, make the ul have a defined width and set li's to inline as we cannot force a 
	new line on the li or it's text.
	*/
	/* lolsagna */
	.breadcrumb { position: relative; }
	
	.breadcrumb strong { position: absolute; top: 5px; left: 0; }
	
	.breadcrumb ul { float: none; margin-right: 290px; } /* margin so it cannot sit in the pos-ab space of socials and prints*/
	
	.breadcrumb li { float: none; display: inline; }
		.breadcrumb ul li:first-child { margin-left: 80px; }
	
	
	
	
/* start floating product list guys, 46% as there is a fixed 10px padding*/
	.productsListWrap { margin-left:-10px; }
	.productsListWrap article.item {  float: left; width: 46%; margin-left: 10px; padding-left: 10px; border-left: 1px solid #e6e6e6;  }	
	
	
	
/* lottery*/
	.purchaseMonthWrap .listWrap article { padding-left: 140px; min-height:100px; }
	.purchaseMonthWrap .listWrap .item .imgWrap { position: absolute; top: 10px; left: 10px; } 
	
	
	.donationWrapper fieldset .dynamicBtnHolder { position: absolute; right: 30px; bottom: 0; margin: 0; }
/*donate three boxes*/	
	#VA .linkContentVar3 li { width:45%; float:left; clear:none; margin:0 0 0 20px; padding:0; }
	#VA .linkContentVar3 li + li + li { width: 100%; float: none; } 
	
	
	
/* our stories */
	.caseStudyListWrap article.item,
	.caseStudySmallListWrap article.item { padding-left: 33.40292275574113%; /* 160 / 479*/ }

	.caseStudyListWrap article .imgWrap, 
	.caseStudySmallListWrap article .imgWrap  { 
		height:0;   
		width: 28.81002087682672%; /* 138/ 479 */                                         
		/* padding-bottom: 31.25%;  /* 100h / 320[parent, not sure y] (138w)*/
		padding-bottom: 100px; /* TODO: Make fixed, as CHROME vs FF/IE gave a different % result :( */
		position: absolute; top: 10px; left: 0;
	}	
	
/* blog list, pull text to the side of pos-ab img */	
	.blogList p { min-height: 130px; margin: 0 0 30px 170px; padding-top: 0; }
	.blogList .imgWrap { left: 0; }
	

}
/* 210px intervals */


/* sidebar contents SxS */
@media (min-width: 420px) and (max-width: 768px) {
	.home .homePush .boxShadow1,
	.landing-alternate .breakout .boxShadow1  { float: left; width: 48%; }
	
		/* need to clear teh float*/
		.homePush .dynamicBtnHolder { clear: both; }
	
	
	.home .homePush .boxShadow1 + .boxShadow1,
	.landing-alternate .breakout .boxShadow1 ~ .boxShadow1 { float: right; }
	

	#bd .vaContent .contentSidebar { padding-top: 10px; border-top: 1px dotted #b7b7b7; }
}

@media (min-width: 420px) and (max-width: 640px), (min-width:840px) {
/* restore any 50-50 */
	
	#bd .sf_colsOut .sf_2cols_1_50,
	#bd .sf_colsOut .sf_2cols_2_50 { float: left; width: 50%!important; }
	
	#bd .whyIsThisNotOneControl .info1 { float: left; width: 40%!important; }
	#bd .whyIsThisNotOneControl .info2 { float: right; width: 50%!important; }
		
}

@media (min-width: 440px) and (max-width:480px) {
	
	#hd .phoneNumber { float: left; }
	#hd .sfsearchBox { float: right; clear: none; }
}



/*$480*/
@media (min-width: 480px) {
	#hd .sf_colsOut  { width: 50%!important; float: left; }
	#hd .sf_2cols_2_50 {  float: right; }
	
	#hd .phoneNumber,
	#hd .sfsearchBox { float: right!important; clear:both; }
	
	#hd .phoneNumber { float: left; }
	#hd .sfsearchBox { float: right; }
	#ft:before { display: block; }

	/*todo: remove, keep footer at two columns
	#VA .footerContent .sf_colsOut { width: 33%; }*/
	
/* checkout header wider to fit text */
	.checkout #hd .sf_2cols_1_50 { width: 60%!important; }
	.checkout #hd .sf_2cols_2_50 { width: 40%!important; }
	
	/* logo be janky due to it being pos-ab on all other pages...make it not oO*/
		.checkout #hd .sf_2cols_1_50 { position: static; padding-top: 0;}
		
		.checkout #hd .logo { position: static; }
		
		
	#hd .globalNav li { width: 49.7%; }	
	
	#hd .logo img { display: inline; }
	#hd .skip-to a { float: none; padding:0; }
	
	#hd .dynamicBtnHolder a { line-height: 22px; font-size: 12px; }
	#hd .dynamicBtnHolder .btn { padding-top: 0; padding-bottom: 0;
		-webkit-border-radius: 0 0 5px 5px;	
		   -moz-border-radius: 0 0 5px 5px;
			-ms-border-radius: 0 0 5px 5px;
			 -o-border-radius: 0 0 5px 5px;
				border-radius: 0 0 5px 5px;
	}
	
	.sectionSummary .imgWrap { float: left; margin-right: 15px; }
		/* wasn't capped */
	.home .sectionSummary > .imgWrap { /*width: 117px;*/ height: 114px; }
	
	.sectionSummary .imgWrap + ul { float: left; width: auto; }
	
	
	#bd .homeContentHolder > div { position: relative; z-index: 10;}
	#bd .homeContentHolder .homeThird { width: 50%!important; float: left; }
	
	#ft .footerContent .sf_colsIn { margin: 0; }
	

	/*======================*/
	/* is above the socMedia in the DOM, should be similar setup*/
	.js_PrintWrap { display: block; position: absolute; top: 25px; right: 160px; }

		/*shop needs some help */
		/**body**/.store .js_PrintWrap { top: 5px; }

	





/* bring grey footer strip and its elements back*/ 	
	#VA .footerNav ul li { float: left; width: auto; padding-left: 17px; }
	
/* todo better styling to match pipes and design */
	#VA #ft .footerNav li { background-image: url("../../global/va-icons.png"); }
	#VA #ft .footerNav .rtsUL .rtsLI { background-position: 8px -818px; }
	.footerNav .rtsLI .rtsLink, .footerNav .rtsLI .rtsTxt, .copywrite { color: #e1e1e1; font-size: 11px; /*line-height: 36px;*/ }
	.footerNav .rtsLI .rtsTxt { color:inherit; }
/*set back to normal, removed border */
	#VA .footerNav li a,
	#VA .footerNav li a span { display: block; border-bottom:0!important; }
	
	#VA .footerNav .rtsLI .rtsLink {  margin-top:0; padding:8px 4px; }
	#VA .footerNav .rtsLI .rtsLink:hover, #VA .footerNav .rtsLI .rtsLink:focus { margin-top:4px; padding:4px 4px 8px; outline:0 none!important; 
		-webkit-border-radius: 3px 3px 0 0 ;	
		   -moz-border-radius: 3px 3px 0 0 ;
			-ms-border-radius: 3px 3px 0 0 ;
			 -o-border-radius: 3px 3px 0 0 ;
				border-radius: 3px 3px 0 0 ;
	}	
	
	
/* product item */	
	.storeProductDescription .productInfoWrap { float:left; width: 46%; margin-right: 10px; padding-right: 10px; border-right: 1px solid #ccc;  }
	.storeProductDescription .imgWrap { width: 90%; }
	.storeProductDescription .cartInfoWrap { float: right; width: 231px; }
	
	
/* section nav on landings */
	
	
	.landing-alternate #bd .divHomepageSlider li .slideTxt { position: absolute; left: 0; padding-bottom: 10px; }
	
/*===================================================================================*/	
/* sliders */
    .divHomepageSlider { margin-bottom: 15px; }

    .homepageSliderSlides { padding-bottom: 60px; }
    .lt-ie9 .homepageSliderSlides { padding-bottom: 0; }
	.homepageSliderSlides li { height:426px; }

    
	.homepageSliderSlideIndicator { display:block; }

	#VA .homepageSlideControls { background:none; }
		
	.divHomepageSlider .slideTxt { position:absolute; z-index:5; left: 10px; bottom:0; right: 10px;/* margin-left:15px;*/}
    .lt-ie9 .divHomepageSlider .slideTxt {
        left: 0px; right: 0px;
    }
	.homepageSliderSlideIndicator,  .homepageSlideControls { position:relative; z-index:10; float:left; margin-top:-41px; clear:none; }
	#VA .homepageSliderSlideIndicator { margin-left:255px;/* display: inline-block; position: absolute; left: 25%; right: 25%; text-align: center;*/ }
    #VA .homepageSliderSlideIndicator li { float: none; display: inline-block; }
    .homepageSlideControls--positioner {
        position: relative;
        max-width: 990px;
        margin: 0 auto;
    }
	#VA .homepageSlideControls { margin-right:10px; position: absolute; right: 17px; }
	
	
	.internalSliderSlides li {  }
	.internalSliderSlideIndicator { display: block;   }
	#VA .internalSlideControls { background:none; }
		
	#bd .divInternalSlider .slideTxt { left: 26%; }
	.internalSliderSlideIndicator,  .internalSlideControls { }
	#VA .internalSliderSlideIndicator { }
	#VA .internalSlideControls { }
	/* internals are right aligned, make sure just in case */
	.js .internalSliderSlides img { position: absolute; z-index: -1; top: -13px; right: 0; }	
	
	
	
/* store support info side by side. needed in %, as is tradition*/
	.storeSupportWrap .info1, .storeSupportWrap .info2 { float: left; width: 44.75524475524476%; /* 320 / 715*/  }

	.storeSupportWrap .info1 { width: 39.16083916083916%;  /*280 / 715*/ margin-bottom: 0; }
	.storeSupportWrap .info2 { float: right;  padding-left: 20px; border-left: 1px solid #cfccd3; }

}

.RadComboBox_Sitefinity {
    display: inline-block;
    zoom: 1;
    *display: inline;
}

	
	
/* news landing */
@media (min-width: 480px) and (max-width: 640px), (min-width: 720px) { 	
	.childSummaryBoxWrap ul li { float: left; width: 43%; }	
}


@media (min-width: 500px) {
/*mini cart*/
	.sfcartSummaryWrp.sfcartSummaryExpandableWrp { position: absolute;	}
	
	.sfcartSummaryWrp a.sflnkToggleCart  { float: right; }
}


/* keeps our stories images from breaking out of height */
@media (min-width:520px) and (max-width:1024px) {
	.caseStudyListWrap article.item,
	.caseStudySmallListWrap article.item { min-height: 130px; }
  
}

@media (min-width: 640px) {
	#bd .vaContent .sf_3cols_1_33, 
	#bd .vaContent .sf_3cols_3_33 { width: 33%!important; float: left; margin: 0; }
	
	#bd .vaContent .sf_3cols_2_34 { width: 34%!important; }
	
	/* thanks page is not following the above classes ><, damn nested grids*/
	#bd .vaContent .sf_2cols_1_33 { width: 33%!important; float: left; }
	#bd .vaContent .sf_2cols_2_67 { width: 67%!important; float: right; }
	
	#bd .vaContent .sf_2cols_1_67 { width: 67%!important; float: left; }
	#bd .vaContent .sf_2cols_2_33 { width: 33%!important; float: right; }
	
	
	
	
	/* header aux links */
	#hd .minorNav { display: block; float: right; }
	.lt-ie8 #hd .minorNav { width: 196px; }
	.lt-ie8 #hd .donate { clear: both; float: right; }

	#hd .radioSmall { clear: both; float: right; }
	#hd .donate { float: right; } 
	
	#VA .footerNav { float: left; }
	#VA .copywrite  { float: right; }
	
	#VA .footerNav,
	#VA .copywrite { background: none; border: none; }
			/*
		*cannot do :before, cheat and make the dark grey a border then shift the white text above 
		*
		*/
		.lt-ie8 #ft { border-top: 36px solid #464646; }
		.lt-ie8 #ft .pgWidth { position: relative; }
		.lt-ie8 #ft .footerNav, .lt-ie8 #ft .copywrite { position: absolute; top: -36px; }
		.lt-ie8 #ft .footerNav { left: 0; }
		.lt-ie8 #ft .footerNav ul { margin: 0; }
		.lt-ie8 #ft .copywrite { right: 0; }
	
/* black sheep sidebar*/
	
	#VA .landings .vaContent,
	#VA .landing-alternate .pgWidth { position: relative; }
	#VA .landing-alternate .breakout  { position: absolute; top: 10px; right: 15px; width: 225px; z-index: 3; }
	
/* no float, (225 sidebar + gutter) as a gutter for the fixed breakout always */ 
	.landing-alternate #bd .vaContent { float: none; width: auto!important; padding-right: 250px; }
	
	.landing-alternate #bd .divHomepageSlider li .slideTxt { margin-right: 250px; } 
	
/* get contents rhs back */
/* these should* be me internal setups, sidebar is the nav container*/
	#bd .vaContent .contentInternal { float: left; width: 67%!important; }
	#bd .vaContent .contentSidebar { float: right; width: 33%!important;}

	#bd .vaContent div > .sf_2cols_2_75 { clear: none; }
	
/* main laylout grerds*/
	#bd .vaContent .sf_colsOut {}
	
	#VA .footerContent .sf_colsOut { width: 25%; }
	
/* donate 3 boxes back */
/* needed #bd to bring back the last guy as he was forced 100% from > 420 mq*/
	#VA #bd .linkContentVar3 li { width:30%; float:left;  margin:0 0 0 20px;}
	#VA #bd .linkContentVar3 li:first-child { margin:0; border:none; } 
}

@media (min-width: 720px) {
/* product item page, fix imgWrap and bring back 3 cols of info */	
	.storeProductDescription .productInfoWrap { width: 64%; }
	
	.storeProductDescription .imgWrap { width: 205px; }
	
	.storeProductDescription .productInfoWrap .sfproductDescription { clear: none; }
		

/* shop rotator*/
	.ftProductRotator .slidesWrap li img { position: absolute; top: 0; left: 0; }	
	
	.ftProductRotator .slidesWrap .price { right: 45px; left: auto;}
	
	/* put text over img */
	.ftProductRotator .slidesWrap .slideTxt { position: relative; z-index: 10; width: 35%; padding: 90px 10px 10px 30px; background: none; }	
	
	.ftProductRotator ul .dynamicBtnHolder { position: static; margin-left: 30px; }	
	
}

/*$768*/
@media (min-width: 768px) {
	#VA .copywrite  { background: none; border: none; }
	
	
	
	#VA .homepageSliderSlideIndicator { width: 300px; margin-left: 0; display: inline-block; position: absolute; left: 25%; right: 25%; text-align: center; margin: 0 auto;  bottom: 22px; }
	
	
	/* bring body content and shadow back */
	#bd .homeContentHolder, #bd .bodyShadow {
		-webkit-box-shadow: 0 0 6px 1px rgba(0,0,0,0.35);
		   -moz-box-shadow: 0 0 6px 1px rgba(0,0,0,0.35);
			-ms-box-shadow: 0 0 6px 1px rgba(0,0,0,0.35);
			 -o-box-shadow: 0 0 6px 1px rgba(0,0,0,0.35);
	  			box-shadow: 0 0 6px 1px rgba(0,0,0,0.35);
	}
	
	#bd .bodyShadow, #bd .homeContentHolder { padding: 0 15px; }
/* <ie9 fork */ 	
		.lt-ie9 #bd .homeContentHolder, 
		.lt-ie9 #bd .bodyShadow,
		.lt-ie9 h1,
		.lt-ie9 .fauxH1 { border: 1px solid #ccc; }
	
		.lt-ie9 #bd .homeContentHolder, 
		.lt-ie9 #bd .bodyShadow { border-top: none; border-bottom: none; }
	
		.lt-ie9 h1,
		.lt-ie9 .fauxH1 { border-bottom: none; }
	

	
	.auxNav { width: 223px; }
	
	.dynamicBtnHolder a { display: inline-block; }
		
	#hd .phoneNumber, #hd .sfsearchBox { float: right; clear: both; }
	
		
	
	#hd .globalNav { margin-top: 0; } 
	/*make the globalNav full width now as we have moar space xD */
	#hd .globalNav li { padding-left: 1px; width: 49.7%;
		background: #9b9b9b;
		background: -webkit-linear-gradient(top, #9b9b9b 0%, #727272 100%);
		background:    -moz-linear-gradient(top, #9b9b9b 0%, #727272 100%);
		background:		-ms-linear-gradient(top, #9b9b9b 0%, #727272 100%);
		background:		 -o-linear-gradient(top, #9b9b9b 0%, #727272 100%);
		background:			linear-gradient(top, #9b9b9b 0%, #727272 100%);
		
	}
	
	.js .visible .rmLast .rmRootlink { width: 49.86979166666667%!important; }

		
	/* make it sit outside for the home page */
	.home .dynamicBtnHolder.radio,
	.home .dynamicBtnHolder.lightACandle,
	.home .auxNav { position: absolute; right: 15px; z-index: 20; }
	
	.home #bd .dynamicBtnHolder.radio,
	.home #bd .dynamicBtnHolder.lightACandle { margin: 0; }

    .home #bd .dynamicBtnHolder.radio, 
    .home .auxNav { display: none; }

	
	/* ok now sit next to socMedia */
	.js_PrintWrap { position: absolute; top: 5px; right: 150px;  float: none; margin: 0; }
		/*shop needs some help, keep very specific so we dont need to change */
		#VA /**body**/.store .js_PrintWrap { top: 5px; }
	
	
	.internal .socMedia { top: 3px; right: -2px; }
	
	.home .dynamicBtnHolder.radio,
	.home .dynamicBtnHolder.lightACandle
	 { top: 57px;}
	
	.home .auxNav { top: 118px; }
	
	#bd { 
		background: -webkit-linear-gradient(top, #d9d9d9 0%, #fff 551px); 
		background:    -moz-linear-gradient(top, #d9d9d9 0%, #fff 551px);
		background:		-ms-linear-gradient(top, #d9d9d9 0%, #fff 551px); 
		background:		 -o-linear-gradient(top, #d9d9d9 0%, #fff 551px); 
		background:			linear-gradient(top, #d9d9d9 0%, #fff 551px); 
	}
	
	#bd .homeContentHolder .homeThird { width: 33%!important; }
	#bd .homeContentHolder .homePush { float: right; clear: none;
		width: 223px!important; /* 223 / 960*/
	}
	
	
	.footerNav { float: left; }
	.copywrite { float: right; }
	
	.homeContentHolder .homePush { padding-top: 10px; }
	
	
	
	
/* shop product list, bring back four floats */	
	.productsListWrap article.item { width: 22%; /* 160 / 715(725?) */}
	
	.ftProductRotator .slidesWrap li { height: 306px; }
	
/*$donation*/ 
	.donationWrapper > div { float: left; width: 340px; padding: 10px 30px 10px 0; border-right: 1px solid #d7d7d7; }
	
	.donationWrapper .donationMessage { width: 270px; padding: 10px 0 10px 20px; border-right: none; border-left: 1px solid #fff; }
	

/* blog list page 
	mental note, shouln't get a situaltion where .sf_2cols_1_33 has an inline style of 66%, you're gonna have a bad time
*/
	#bd .sf_cols .rightBorder { width: 67%!important; float: left; }
	
	#bd .sf_cols .rightBorder + .sf_colsOut  { width: 33%!important; float: right; }
	
	#bd .sf_cols .rightBorder > .sf_colsIn:first-child { padding-right: 10px; border-right: 1px solid #ccc; }

}
    

/* home slider*/
@media (min-width:768px) and (max-width:1023px) {
    /*.divHomepageSlider .slideTxt { width:60.60606060606061%; /* 600 / 990  }
    #VA .homepageSlideControls {  margin-right:38.38383838383838%; /* 380/ 990 }*/
}

/* bring back nav so its works on 800x600, low res but desktop */
@media (min-width: 770px) {
	/*restore le top nav */
	.js #hd { padding-top: 0; }
	
	/* Smite thy globalNav breakout */
	#hd .pgWidth { position: relative; }
	#VA #hd .globalNav { position: static; left: 0; top: 102px; width: 100%; }
	#hd .js-globalNavCtrl { display: none; }
}

@media (min-width: 800px) {
	
	#VA .footerContent .sf_colsOut { width: 20%!important;}
	#VA .footerContent .sf_5cols_5_20 { float: right!important; clear: none; margin: 0; }
	
	
	/* bring black sheep 3rd back */
	.landing-alternate #bd .vaContent .sf_colsOut { float: left; clear: none; width: 33%!important; }
}

@media (min-width: 940px) {
	.landing-alternate #bd .divHomepageSlider li .slideTxt { right: 260px; left: auto; width: 275px; margin-right:0; }
}




/* remove the dropdown menu */
@media (max-width: 998px) {
	#hd .globalNav li .rmSlide { display: none!important; }
	.lt-ie8 #bd .divInternalSlider .slideTxt { left: 0; max-width: 320px;  }
	.lt-ie8 .breadcrumb { top: -25px; }
}

/*$1024*/
/* This is actually 1024 with a bit of leeway - needed this because a non-native 1024 resolution was reporting as 999 in ie7! */
@media (min-width: 999px) 
{

	#hd .minorNav { float: left; width: 196px; } /* set width, IE not playing along */
	#hd .dynamicBtnHolder { float: left; clear: none; margin: 0 10px;  }
	#hd .donate { margin: 0; }
	
	#VA #hd .globalNav { position: absolute; }
	#VA.lt-ie8 #hd .globalNav { top:110px; }
	
	/*restore skip-to / logo*/
	#hd .sf_2cols_1_50 { height: auto; padding: 0;   }
	.logo {position: static; float: left; margin: 7px 0 26px 5px; }
	
	
	.divSectionNav { position: relative; margin-top: -55px; z-index: 6; }
	
	/* todo better hook if there is a rotator? 
	.landings .divSectionNav { position: absolute; left: 0; top: 30px; }*/
	
	
	/* adjust slightly as the nav has moved */
	.js_PrintWrap { top: 4px; }
	
	
	a[href^="tel"] { pointer-events:none; }
	
/* todo iPad portrait has gap on RHS, ¿ke */ 
	
	/* h1 was in the wrong semantic order.
	move it out and make sure this space for it to ocupy*/
	body .bodyShadow { margin-top: 44px; }
		.landing-alternate .bodyShadow,
		.store .bodyShadow,
		.checkout .bodyShadow,
		.donate .bodyShadow,
		.header-and-footer .bodyShadow { margin-top: 0; }
		
		/* keep rel but remove the offsets*/
		#VA .landing-alternate h1 {
			position: relative;
			top: auto;
			right: auto;
			left: auto;
		}
			
	
	/*not sure how bad this will be */
	body .vaContent { position: relative; }
	
	/*body*/.store .vaContent { position: static; }
	
	h1,
	.fauxH1 {

		/* can do as ab coz .vaContent is relative*/
		position: absolute;
		top: -64px;
		right: -2.1%;
		left: -36.36%;
		padding-left: 36.36%;

	}
	
	/* shouldn't affect the store pages*/
	/*body*/.store h1,
	.store .fauxH1,
	h1.inContent,
	.sfcheckoutMulitPage h1,
	.header-and-footer h1,
	.donate h1,
	.checkout h1, header h1 {
		position: static;
		padding-left: 0;
	}
	
	
	
	#VA .pgWidth { padding: 0; }
	.internal #bd { padding-top: 13px; }/* needed for the offset from the globalNav*/
	
	#hd .globalNav li { width: auto; }
	.lt-ie8 #hd .globalNav .rmRootGroup > li.rmFirst { width: 44px; } /* ie7 is a derp? */
	
	#hd .globalNav .rmFirst > a { padding-left: 12px; padding-right: 12px; }
/* restore space for the sidebar */
	
	/* 225 | 20 | 715 = 960 */ 
	#bd .vaSidebar { width: 23.4375%!important; float: left; margin-right: 2.083333333333333%;  }
	.landings .divSectionNav { position: absolute; top: 40px; left: 15px; margin-top: 0; margin-bottom: 0; max-width: 225px; }
		
	
	#bd .vaContent { width: 74.47916666666667%!important; float: right; } 

/* shop header */
	/* keep .shopHeader as rel offset, so push him in -ve*/
	.sfcartSummaryWrp.sfcartSummaryExpandableWrp { top: -20px; }
	
/* checkout / cart sidebar fixes */
		.landing-alternate #bd .vaSidebar, 
		.internal.checkout #bd .vaSidebar,
		.internal.donate  #bd .vaSidebar,
		.pageId-a01e143b-8670-4fd1-9eb5-dfba82461db5 #bd .vaSidebar { margin-right: 0 ; margin-left: 2.083333333333333%; }
		
		.internal.checkout #bd .vaContent,
		.internal.donate #bd .vaContent,
		.internal.donate #bd .vaContent,
		.pageId-a01e143b-8670-4fd1-9eb5-dfba82461db5 #bd .vaContent { float: left; }
		
		.internal.checkout #bd .vaSidebar,
		.internal.donate #bd .vaSidebar,
		.internal.donate #bd .vaSidebar,
		.pageId-a01e143b-8670-4fd1-9eb5-dfba82461db5 #bd .vaSidebar { float:right; }
		/* pageId-a01e143b-8670-4fd1-9eb5-dfba82461db5 = shopping cart */
	
	/* skip to visible on tab, also is before the .logo in markup*/
	.skip-to { position: absolute; left: 230px; overflow: hidden; }
	.skip-to a { position: absolute; left: -100%;}
	.skip-to a:focus { position: static; }
	
	#bd .homeContentHolder .homeThird { width: 37%!important; }
	
	.rss { position: absolute; top: 34px; right: 252px; margin: 6px 0; line-height:29px; z-index:10; }
	.rss:not(.newsRss):not(.forumRss) { border-right: 1px solid #d7d7d7; padding-right: 22px; }
	.rss:not(.newsRss):not(.forumRss):after { content: ""; display: block; width: 1px; height: 29px; background: #fff; right: -2px; position: absolute; top: 0; }
	
	/* Accessibility Blog /living-with-low-vision/learning-to-live-independently/using-technology-and-computers/blog---accessibility-and-assistive-technology-blog */
	.rss.newsRss.altPos, #VA .rss.newsRss.altPos:active { top: 50px; }
	
	.rss.newsRss { right: 0; }
	/* this guys is still our uber div wrapper though */
	#VA .rss.forumRss { top: 27px; right: 10px;  padding-right:0;  }
	#VA .rss.forumRss a { padding-left:0; padding-right:0; }
	
	/* remove padding from sides */
	#VA .footerContent { padding: 25px 0 0; }
	/*also need the gutters in */
	#VA .footerContent .sf_colsOut +.sf_colsOut .sf_colsIn	 { margin-left: 10px; }
	
/*========================*/
    /*.divHomepageSlider .slideTxt { width:600px;}*/
    #VA .homepageSlideControls {  margin-right:14px; }
    .homepageSlideControls .homepageSliderControlPlay  a { width: 7px; }
	.homepageSlideControls .homepageSliderControlPause a { width:13px; }
	
/* internal slider */	
	.internalSlideControls .internalSliderControlPlay  a { width: 7px; }
	.internalSlideControls .internalSliderControlPause a { width:13px; }


    #VA .homepageSlideControls { right: 0px; }
	
	
	/* IE fixes for respond.js to take */
	
	.lt-ie8 .skip-to { position: absolute; }
	
	
}

#VA .home #bd .divHomepageSlider {
    margin-bottom: 20px;
}

@media (min-width: 480px) {
	.js .homepageSliderSlides img { position:absolute; left:-25%; max-width: none; }

    #VA .home #bd .divHomepageSlider {
        position: absolute; 
        top: 0px; 
        width: 100%;
        margin-bottom: 0;
    }

    #VA .home #bd { position: relative; }

    #VA .home #bd .pgWidth { padding-top: 501px; position: relative; }

    .homepageSliderSlides .background-image { position: absolute; top: 0px; left: 0px; right: 0px; height: 426px; }
}




@media screen and (max-width: 479px) {
    .homepageSliderSlides .background-image {
        padding-top: 43%;
    }

    .divHomepageSlider .slideTxt a {
        display: inline-block;
        float: none!important;
    }
}

