/*
	Responsive Web Site Rules
*/



/** LESS THAN 1440  ***********************************/

/* /xmas */
@media all and (max-width: 1440px) {
	.js .jtOverlay 			{ margin-left: -320px; }
	
}


@media all and (max-width: 1000px) {
	
	/* homecarousel */
	 #genericCarousel .carousel-menu li { margin-bottom: 3px}
	 #genericCarousel .carousel-body	{ height:auto}

	/* Promo Banner */
	.promoBanner,
	.promoBanner.width50,
	.promoBanner.width30 { padding: 5px 50% 10px 10px;}
    
    /* xmas decorations *************************************/
	.personal.xmas .idHeader .mistletoe	{ left:260px; background-position: 0 -25px}
	/* position overlay */
	.js .personal .jtOverlay 		{ margin-left: -30px; }
	/* /xmas */

}
/* @end */



/** LESS THAN 800 = HEADING TOWARDS LANDSCAPE MODE  ***********************************/
@media all and (max-width: 800px) 	{
	
	/* layout */
	.generalContentWithRight .idGeneralContent,
	.generalContentWithRight .idContentRight,
	.generalContentLeftNav .idGeneralContent, 
	.generalContentLeftNav .idPageContentNav 	{ float:none; width: auto; }
	/* for left and right nav content */
	.generalContent .idContentRight             { clear:both; float:none; width: 100%;}
	.generalContent .idGeneralContent           { width: 80%} 
	
	/* header/footer */
	.idFooter .footerMenu					{ margin: 20px 20px 10px 20px; width: 170px}
	.idFooter .footerMenu:nth-of-type(4)	{ clear:left}
	
	/* top nav */
	.idHeader 								{ margin-bottom: 15px}
	.idContextNav							{ clear: both; padding:0 0 20px 0; top: 10px; margin:0 0 5px 0}
	.idContextNav div.sublevel				{ width: 97.7%}
	.idContextNav .fixedMenu				{ margin-right: 0; }
	.idContextNav .fixedMenu div.sublevel	{ right:0; }
	
	/* action boxes */
	.actionBox					{ float:left; width: 31%; margin:0 3% 15px 0; padding:0; background-position: -999em 0; border:none; min-height:0}
	.actionBox.fullWidth		{ padding:0; min-height:0}
	.actionBox:nth-child(3)		{ margin-right:0; }
	.actionBox:nth-child(3n+1)	{ clear:left; }
	
	/* info boxes */
	.infoBox 				{ background:none!important;}
	.infoBox .inner			{ padding: 10px; min-height:0 ;}
	.infoBox .inner h2		{ margin-right: 0; }
	/* setup for 2 infoBoxes in rowBox */
	.rowBox.twoCol .infoBox:nth-child(2n)	{ float:right}
	.rowBox.twoCol .infoBox .inner			{ padding-right:0}
	
    /* global landing page */
	.globalLanding .mapImage,
    .globalLanding .mapImage img,
    .globalLanding ul.services, 
    .globalLanding ul.genericlanding-options       { float:none; width: auto; margin:0;}

    /* xmas decorations *************************************/
	.personal.xmas .idHeader .mistletoe	{ left:130px;}
	/* position overlay */
	.js .personal .jtOverlay		{ margin-left: 0; }
	/* /xmas */

}
/* @end */



/** LESS THAN 675 = SMARTPHONE - HEADING TOWARDS PORTRAIT  ***********************************/
@media all and (max-width: 675px) {
	
	/* layout */
	.generalContentWithRight .idGeneralContent,
	.generalContentWithRight .idContentRight,
	.generalContentLeftNav .idGeneralContent, 
	.generalContentLeftNav .idPageContentNav 	{ float:none; width: auto; }
	/* for left and right nav content */
	.generalContent .idPageContentNav,
	.generalContent .idContentRight             { clear:both; float:none; width: 100%; }
	.generalContent .idGeneralContent           { float:none; width: 100%}
	
	/* remove the shadows completely */
	.idPage, .idContent, 
	.business .idPage, .business .idContent, 
	.wholesale .idPage, .wholesale .idContent { background-image: none; background-color: #fff; padding: 0 3px; }
	
	/* footer */
	.idFooter .footerMenu		{ float:none; width: auto}
	
	/* header and nav */
	.idLoginTopUp 							{ margin-bottom: 8px; font-size:0.92em; min-width: 0}
	.idLoginTopUp, .idLoginTopUpInner 		{ background-color: #fff; border: none;  padding:0}
	.idLoginTopUp h2, .idLoginTopUp p 		{ display: none; }
	.idLoginTopUp .buttonFullWidth 			{ float: right;  text-align:right; clear: none; padding: 0; margin: 0 0 3px 0; border:none; width:auto}
	.idLoginTopUp .buttonFullWidth:hover 	{ text-decoration: underline;  }
	.idLoginTopUp li 						{ clear: both; border:none}
	.idSearch, .idSocial					{ margin-bottom:0}	
	.idContextNav li 						{ font-size: 11px; }

	
	/* homecarousel */
	 #genericCarousel .carousel-menu li 		{ margin-bottom: 2px}
	 #genericCarousel .carousel-menu li a		{ padding: 3px 5px 2px 5px; height: 27px; }
	 #genericCarousel .carousel-menu li a b		{ display:none}
	
	/* handsets */
	.handsetList li					{ width:29.9%; margin: 0 1.5% 15px 1.5%; }
	.handsetList li:nth-child(4n+1) { clear:none; } 
	.handsetList li:nth-child(3n+1) { clear:both; } 
	.handsetList li.last-child		{ margin-left: 1.5%}
	/* handsets in carousel */
	.jcarousel-skin-tango ul.handsetList li.last-child		{ margin-left: 10px;}
	.jcarousel-skin-tango ul.handsetList li:nth-child(3n+1)	{ clear:none; } 
	
	/* Handset detail page */
    .idHandsetDetail .leftColumn,
	.idHandsetDetail .rightColumn	{ float:none; width: 100%; }
	.productShot					{ width:250px; height:345px; float:right; margin-top: -10px}		
	.socialHelp						{ float:left; clear:none; margin-top: 10px; width: 40%; font-size:0.92em; }
	.reserveRight 					{ text-align:left}

	/* directory form */
	.directory  .dir-block.colRight,
	.directory  .dir-block.colLeft		{ float:left; width: 96%; } 
	
	/* action boxes */
	.actionBox					{ float:left; width: 47%; margin-right: 2%; }
	.actionBox:nth-child(2n)	{ float:right}
	.actionBox:nth-child(2n+1)	{ clear:left}
	.actionBox:nth-child(3n+1)	{ clear:none; }
	
	/* promo boxes */
	.promoBox li,
	.promoBox li.firstItem			{ clear:none; float:left; width: 49%; margin: 0 0 10px 0}
	.promoBox li:nth-child(2n+1) 	{ clear:both; margin-right: 2%} 
	.promoBox .inner				{ padding-right: 90px}
	
	.formPretty				{ margin:0 4px 2.5em 4px; }
	
	/* xmas decorations *************************************/
	/* old xmas backdrop*/
        .personal.xmas .idHeader .mistletoe	{ left:130px; background-position: 0 -25px}
    
	/* /xmas */


}
/* @end */



/** LESS THAN 525 = PORTRAIT MODE  ***********************************/
@media all and (max-width: 525px)  	{
	
	/*
	.generalContentWithRight .idGeneralContent,
	.generalContentWithRight .idContentRight,
	.generalContentLeftNav .idGeneralContent, 
	.generalContentLeftNav .idPageContentNav 	{ background-color:fuchsia; }	
	*/
		
	.content	{ padding:0; }

	/* handsets */
	.handsetList li					{ width:46%; margin: 0 1.5% 15px 1.9%; }
	.handsetList li:nth-child(4n+1),
	.handsetList li:nth-child(3n+1) { clear:none; } 
	.handsetList li:nth-child(2n+1) { clear:both; } 
	.handsetList li.last-child		{ margin-left: 1.5%}
	/* handsets in carousel */
	.jcarousel-skin-tango ul.handsetList li					{ width: 19%; margin:  0 5px; }
	.jcarousel-skin-tango ul.handsetList li.last-child		{ margin-left: 5px;}
	.jcarousel-skin-tango ul.handsetList li:nth-child(2n+1)	{ clear:none; } 
	
	/* Promo Banner */
	.promoBanner,
	.promoBanner.width50,
	.promoBanner.width30 { padding-right: 80px; background-position: -70px 0 }
		
	/* pagination: remove text prev/next */
	.idResultsPager .page dt	{ display:none}
	.idResultsPager li a b		{ display:none; }
	
	/* Handset detail page */
	.productShot					{ float:right}		
	.socialHelp						{ clear:right;  width: auto; }
	
	/* top nav */
	.idContextNav li 				{ border-right: 2px solid #fff; }
	.idContextNav .fixedMenuItem	{ border-left: 2px solid #fff;}
	
	a.button.reserveRight { float: left; width: 96%; }
	
	/* filter bar */	
	.filter label.legend	{ display:none}
	
	/* homecarousel */
	 #genericCarousel .carousel-menu	{ display:none;}
	 #genericCarousel .carousel-body 	{ float:none; width: 100%; }

	/* info boxes */
	.infoBox .inner h2,
	.actionBox h2		{ font-size: 1.5em; }
	
	.promoBox li,
	.promoBox li.firstItem		{ width: 100%; float:none; margin:0 0 10px 0}

	/* global landing */
	.idGlobalHeader { padding-bottom: 0px; }
	.idGlobalHeader .idHeaderStatement { border-top: solid 1px #CCC; margin: 15px 0 0 0; padding: 10px 0; width: 100%; float: left; clear: both;  }
	.idGlobalHeader .idHeaderStatement h1 { margin-top: 15px;}
	.idGlobalFooter .footerMenu li li, .idGlobalFooter .footerMenu ul { float: left; clear: left; border: solid 0px #000; }
	
	.jcarousel-skin-tango .jcarousel-container-horizontal 	{ width: 77.5%; padding: 0 12% 0 10.5%; }
	.jcarousel-skin-tango .jcarousel-item	{ margin: 0 5px}
	
	/* NEW JT GLOBAL TEMPLATES jan 2012 */
	.idGlobalNav .sites label	{ display:none}
	.idGlobalNav .sites .field	{ min-width:0}
	/* global promoBox */
	.jtGlobalPromoBox li		{ margin:0 0 2.5% 0; float:none; width: 365px; overflow:hidden}
	img.pullLeft,	
	img.pullRight				{ float: none; margin: 0; }
	/* top nav */
	.jtGlobalHeader ul.nav li a	{ width: auto; padding-left: 10px; padding-right:10px;}
	
	/* xmas decorations *************************************/
	.personal.xmas .idHeader .mistletoe	{ display:none}
	/* /xmas */

    /*reCAPTCHA responsive*/
    #rc-imageselect, .g-recaptcha 
    { 
        transform:scale(0.77)!important; 
        -webkit-transform:scale(0.77)!important;
        transform-origin:0 0!important;
        -webkit-transform-origin:0 0!important;
    }


/* ************************ Takeover campaign, March 2013 */
@media screen and (min-width: 980px) {
	/* new background img, remove side shadows */
	body.personal.takeover				{ background:url(../images/campaign/takeover.jpg) no-repeat 50% 0;}
	body.personal.takeover .idPage		{ background:transparent; padding: 0 22px;} 
	body.personal.takeover .idContent	{ background-image:none; padding: 0 15px;}
}
/* and IE7,8  - using "\9" hack*/
body.personal.takeover				{ background:url(../images/campaign/takeover.jpg) no-repeat 50% 0\9;}
body.personal.takeover .idPage		{ background:transparent\9; padding: 0 22px\9;} 
body.personal.takeover .idContent	{ background-image:none\9; padding: 0 15px\9;}