/* 
Quick & Dirty concept draft 
- breakpopints need scrutiny/audits, and some more added for phone
- and small views need augmenting with nav controls (via js), breadcrumbs deserve reformatting
- some transitions could improve resizing
- redundancies need reconciling - e.g. first 2 breakpoints
*/
body {min-width: 100%;}
#header .l_shadow  {width:100%;}


/* a few more needed for phones */
@media (max-width:480px){
	/* dumped from next breakpoint - reconcile! */
	body {min-width:100%; max-width:100%;}
	#header  {width:100%; height:auto;}
	#header .l_content, #header .l_shadow  {width:100%;}	
	#header-logo {width:200px;}
	#header-main, #header .l_bottom, #header .l_top ul {display:none;}
	
	#header-main, #header-main .l_top,#header-main .l_bottom  {width:70%;}
	#header-search {display:none;}
		
	/* footer */
	#footer, #footer-columns {height:auto; margin:0;}
	#footer-columns, #pagewrap {width: 100%;padding:0;}
	#pagewrap {padding-bottom: 60px;}/* keep ref in case required to do static*/
	#footer {padding:0;}
	#footer p#copyright {border-top: none;margin:0;padding:10px 0;}
	#footer-columns ul#fc-one, #footer-columns ul {display:none; width:0;}
	#footer #timestamp {display:none;}
	
	/* page */
	#pageheight, #pagewrap {width: 100%; overflow-x: hidden;}
	#columns, #content  {width: 100%;}
	#container {width:100%; float:none;}
	#container.fullwidth, #columns .two-column-right {width:98%; padding: 6px 10px 6px 13px;/*width: calc(100% - 20px);*/}
	#header .l_shadow {width:100%; display:none;}
	body {max-width:100%}

	#content { width:100%; overflow:hidden; float:none;}
	#content > img, #content p > img {
		width: auto; height:auto; max-width: 100% !important;
	}
	/* aside content should be hidden as default - i.e. most right cols, menus collapsed, replaced with button controls */
	#left-column, #right-column { width: 100%; float:none;}
	
	#left-column img, #right-column img {width: auto; height:auto; max-width: 100% !important; text-align:center; margin:auto;}
}
@media (min-width: 480px ) and (max-width:767px ){
	#right-column {width: 20%; }

}
/* anything less than large tablet */
@media (min-width:280px) and (max-width:767px){
	body {min-width:100%; max-width:100%;}
	
	/* header */
	#header  {width:100%; height:auto;}
	#header .l_content {width:100%;}	
	#header-logo {width:200px;}
	#header-main, #header .l_bottom, #header .l_top ul {display:none;}
	
	#header-main, #header-main .l_top,#header-main .l_bottom  {width:70%; }
	#header-search {display:none;}
		
	/* footer */
	#footer, #footer-columns {height:auto; margin:0;}
	#footer-columns, #pagewrap {width: 100%;padding:0;}
	#pagewrap {padding-bottom: 60px;}/* keep ref in case required to do static*/
	#footer {padding:0;}
	#footer p#copyright {border-top: none;margin:0;padding:10px 0;}
	#footer-columns ul#fc-one, #footer-columns ul {display:none; width:0;}
	#footer #timestamp {display:none;}
	
	/* page */
	#pageheight, #pagewrap {width: 100%; overflow-x: hidden;}
	#columns, #content  {width: 100%;}
    /*#columns {margin-bottom: 100px;}*/
	#container {width:100%; float:none;}
	#container.fullwidth, #columns .two-column-right {width:98%; padding: 6px 10px 6px 13px;/*width: calc(100% - 20px);*/}
	#header .l_shadow {width:100%; display:none;}
	body {max-width:100%}
	
	/* AMDISS block widths */
	/* was 591, this one needs another breakpoint - e.g. 100% @ < 420px*/
	#content {margin-left:0; width:80%; overflow:hidden;}
	.two-column #content { width:100%; padding-left: 10px; box-sizing: border-box;}
	#left-column {float:none;overflow:hidden;}

    #right-column {/*width: 20%;*/ overflow:hidden; } /* hidden for oversized images, default for right-column should be hiddne*/
	#left-column img, #right-column img {width: auto; height:auto; max-width: 100% !important;}

/*
content needs assessing
#container.two-column-right #content { float: left; clear: left; width: 640px; margin: 0; padding: 0; }
#container.two-column-right #right-column { float: left; clear: none; width: 300px; margin: 0 0 0 20px; padding: 0; }
*/
}


/* large tablet scale header footer/page */
@media (min-width:768px) and (max-width:1024px){
	#footer-columns {max-width: 100%;width:100%;padding:20px 0 0 0; margin:0 auto; height:auto;}/* 963px */
	#footer-columns ul, #footer-columns  ul#fc-one {box-sizing:border-box; width:23%; margin:0; margin-left:1%; height:auto; padding:3px;}
	#footer-columns li.row-link-first {margin-left:0;}
	#footer-columns li.row-link {margin-left:4px;padding-left:4px;}
	#footer #footer-columns li.uppercase {font-size:10px !important; }
	#footer {height:auto;width:100%;overflow-x: hidden;}
	
	/* header */
	#header, #header .l_content, #header-main .l_bottom {width:100%;}
	#header-main {float:right;width:70%;}

	#header-main .l_top {text-align:right;padding-left: 0;width: auto;}
	#header-logo {width:200px;} /* could do as % */
	
	/* page */
	body {max-width:100%}
	#columns, #content,#pagewrap, #pageheight {width: 100%; overflow-x: hidden;}
    #columns {padding-bottom:10px; margin-bottom:10em}
	/* content */
	#container.fullwidth {width:98%; /*width: calc(100% - 20px);*/}
}