/*-- Allow Large Logo (Menu Bar Fix) - (normal logo 122 x 50 - tested OK for 215 x 75) --*/

/* Reduce logo margin to 5px */
#jsn-logo a {margin: 5px 0;}

@media only screen and (min-width: 960px) {
	
	/* Change header inner-wrapper width and thus the available size for the menu and logo */
	#jsn-header-inner {			
		/*width: 960px;*/
	}

	/* Make menu items slimmer */
	div.jsn-modulecontainer ul.menu-mainmenu.menu-richmenu > li > a {
		padding: 10px 10px;
	}

	/* Make logo container smaller */	
	#jsn-logo a {	
		max-width: 165px;
	}
}

@media only screen and (min-width: 1200px) {

	/* restore original menu item padding*/
	div.jsn-modulecontainer ul.menu-mainmenu.menu-richmenu > li > a {
		padding: 10px 20px;
	}

	/* restore original logo size */	
	#jsn-logo a {	
		max-width: none;
	}
}

This code is not tested.

/* Logo Fix allow logo larger than recommended 122 x 50 */
/* template.css 281 */
#jsn-logo a {
	line-height: 100%;
	margin: 25px 0;
	display: block;
}

/* Set Maximum Width - Stops the ever expanding template giving a smaller promo image*/
#jsn-pos-topbar,
#jsn-topheader-inner,
#jsn-header-inner,
#jsn-promo-inner,
#jsn-promo-full-inner,
#jsn-pos-content-top,
#jsn-pos-content-top-over,
#jsn-pos-content-top-below,
#jsn-content_inner,
#jsn-content-bottom-over-inner,
#jsn-content-bottom-inner,
#jsn-content-bottom-below-inner,
#jsn-content-bottom-under-inner,
#jsn-usermodules3-inner,
#jsn-footer-inner {		
	max-width: 1200px;
}

/* Telephone numbers fix */
@media screen and (max-width: 400px){ 
    .small-telephone-numbers{font-size: 18pt !important;} 
}

Template Width (unknown)

This is a Template width set of rules, I am not use how I exactly used it. But it is applied on Hi-Tec

/* Add 100% wide to only the home page */
body.jsn-homepage #jsn-promo-inner,
body.jsn-2st-homepage #jsn-promo-inner,
body.jsn-3st-education #jsn-promo-inner,
body.jsn-6st-religion #jsn-promo-inner {
    width: 100%;
}

/* and this to remove padding/border */	
 body.jsn-homepage #jsn-promo,
 body.jsn-2st-homepage #jsn-promo,
 body.jsn-3st-education #jsn-promo,
 body.jsn-4st-homepage #jsn-promo,
 body.jsn-6st-religion #jsn-promo {
    padding: 0;
}

/* you could just delete the rule out of custom.css */
/* width fix on homepage */
body.jsn-homepage #jsn-promo-inner {width: 100%;} /* pos max-width */

Sets the site at fixed width 960px until screen is 1280px

This might not be needed

/* template.css 197  sets the site at fixed width 960px until screen = 1280+px */
#jsn-pos-topbar,
#jsn-topheader-inner,
#jsn-promo-full-inner,
#jsn-header-inner,
#jsn-promo-inner,
#jsn-pos-content-top,
#jsn-pos-content-top-over,
#jsn-pos-content-top-below,
#jsn-content_inner,
#jsn-content-bottom-over-inner,
#jsn-content-bottom-inner,
#jsn-content-bottom-below-inner,
#jsn-content-bottom-under-inner,
#jsn-usermodules3-inner,
#jsn-footer-inner {
	margin: 0 auto;
	width: 960px;
	position: relative;
}


/* the logo and menu are controlled by the overall fixed width of the template */
@media only screen and (min-width: 1200px) {
	#jsn-pos-topbar,
	#jsn-topheader-inner,
	#jsn-header-inner,
	#jsn-promo-inner,
	#jsn-promo-full-inner,
	#jsn-pos-content-top,
	#jsn-pos-content-top-over,
	#jsn-pos-content-top-below,
	#jsn-content_inner,
	#jsn-content-bottom-over-inner,
	#jsn-content-bottom-inner,
	#jsn-content-bottom-below-inner,
	#jsn-content-bottom-under-inner,
	#jsn-usermodules3-inner,
	#jsn-footer-inner {
		width: 1140px;
	}
}

 @media only screen and (max-width: 960px), (max-device-width: 960px) {	
 	#jsn-pos-topbar,
 	#jsn-topheader-inner,
 	#jsn-header-inner,
 	#jsn-promo-inner,
 	#jsn-promo-full-inner,
 	#jsn-pos-content-top,
 	#jsn-pos-content-top-over,
	#jsn-pos-content-top-below,
 	#jsn-content_inner,
 	#jsn-content-bottom-over-inner,
 	#jsn-content-bottom-inner,
 	#jsn-content-bottom-below-inner,
 	#jsn-content-bottom-under-inner,
 	#jsn-usermodules3-inner,
 	#jsn-footer-inner {
 		width: 100%;
 		min-width: inherit;
 		box-sizing: border-box;
 		-moz-box-sizing: border-box;
 		-webkit-box-sizing: border-box;
 	}
 }
	
	
/* needed to fix logo position after previous rules */
/*@media only screen and (max-width: 960px), (max-device-width: 960px) {
 	#jsn-header-inner {
 		width: 100%;
 	}
}*/


/* the logo and menu are controlled by the overall fixed width of the template */
/*@media only screen and (min-width: 1200px) {
	#jsn-header-inner {
		width: 1140px;
	}
}*/

Notes

• width code - dona forces changes in the width code - change over is at 960px
• 1211  /  from wide to narrow
• 976 / 976 is the firefox change over from desktop to mobile

Single Column in desktop mode - max width 1100px

This turns dona into a single column (or pretends) all with white background and is fixed for mobile aswell

/*--- Single Column in desktop mode - max width 1100px ---*/

/* make all inner blocks have a white background for all viewports */
/*#jsn-pos-topbar,
#jsn-topheader-inner,
#jsn-header-inner,*/
#jsn-promo-inner,
#jsn-promo-full-inner,
#jsn-pos-content-top,
#jsn-pos-content-top-over,
#jsn-pos-content-top-below,
#jsn-content_inner,
#jsn-content-bottom-over-inner,
#jsn-content-bottom-inner,
#jsn-content-bottom-below-inner,
#jsn-content-bottom-under-inner,
#jsn-usermodules3-inner
/*#jsn-footer-inner*/ {
    background: #ffffff; /* make all inner blocks have a white background for all viewports */
}
    
@media only screen and (min-width: 960px) {
	
	/* Set Maximum Width - Stops the ever expanding template so displays smaller promo image */
	#jsn-pos-topbar,
	#jsn-topheader-inner,
	#jsn-header-inner,
	#jsn-promo-inner,
	#jsn-promo-full-inner,
	#jsn-pos-content-top,
	#jsn-pos-content-top-over,
	#jsn-pos-content-top-below,
	#jsn-content_inner,
	#jsn-content-bottom-over-inner,
	#jsn-content-bottom-inner,
	#jsn-content-bottom-below-inner,
	#jsn-content-bottom-under-inner,
	#jsn-usermodules3-inner,
	#jsn-footer-inner {
		width: 100%; /* expands the various regions to match the column size */
		max-width: 1100px; /* this exactly matches the max centre column width - this might not be complete */
	}

	/* Menu Background Fix - set background to be within the new column */
	#jsn-header {
		background-color: transparent;
		border-bottom: none;
	}
	#jsn-header-inner {
		background-color: #1e232d;
	}

	/* Footer Background Fix - set background to be within the new column */
	#jsn-footer {
		padding: 0;
		background: transparent;	
	}
	#jsn-footer-inner {
		background: #171c26;
		padding: 20px;
	}

}

Remove all gaps between modules

/*-- Remove Padding/Margins/Gaps between blocks positions --*/

/* Reduce logo margin to 5px */
#jsn-logo a {margin: 10px 0;}

/* no gap above promo - possibly add to imageshow, it is not in the wiki */
#jsn-promo div.jsn-modulecontainer {
	margin-top: 0px;
}
#jsn-promo {
	padding: 0;
}

/* remove gap between the main content block (inc module positions) - Top and Bottom */
#jsn-content {padding: 0;}

/* content bottom over styling -- remove Padding/Margins/Gaps */
#jsn-content-bottom-over,
#jsn-pos-content-bottom-over.jsn-modulescontainer {
	padding: 0;
}
#jsn-pos-content-bottom-over div.jsn-modulecontainer {
	margin-top: 0;
}

/* jsn-content-bottom-below - remove grey bar placeholder caused by padding*/
#jsn-content-bottom-below,
.jsn-homepage #jsn-content-bottom-below {
	padding: 0;
}