/* -----

style.css

FixHdrMenu_Button_Sep_17
ref: sixrevisions.com (partial src code in my folder /src_Websites_17 (something like that)

Styling issues - the Content jumps when menu triggered

Provisional WIP refs
https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp

------------------------------ */


/* basic style, fr HB-HC */
@import url( 'style-b-one-five.css' );


/* -------------------------------------------------- */
/* 170430 new code Fixed Menu within a Fixed Header 
- start with partial src from sixrevisions.com

bNOTE: menu button is separate from #menu-primary
- allows both to be separately positioned
*/

/* I am modifying SixRevisions code to meet my Toggle and IDs Classes)
menu starts display:none */


/* Box-sizing */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* .clearfix */
.clearfix::after {
	content:    ".";
	display:    block;
	height:     0;
	clear:      both;
	visibility: hidden;
}

/* Browser Width Value - Class of span for my JS function */
.browser-width-value {
  position: absolute;
  top:4px;
  right:10px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 1px 4px;
  background: #ffcccc; /* red-vl */
  border: 1px solid #999999;
}

ul {
margin: 0;
}

p {
	margin: 0 0 12px 0;
}

a {
	color: #000000;
	text-decoration: underline;
}

a:hover {
	color: #ff0000; /* red */
}


/* MASTER WIDTH (layout) 

- focus on all of the .wrap elements 
- for #menu-primary, put width-LR on Inner Wrap
(not as restrictive for #menu-primary .wrap-inner, since clear it is for menu

170430
NEWLY learned:
- Padding percentage is based on the CONTAINING DIV WIDTH
- so: when setting pad-LR for these wraps below, the Containing Div is BODY
(and BODY is full browser width, so Pad PERCENTAGE is off

*****
REF: https://www.w3.org/TR/CSS2/box.html#padding-properties
(Padding) percentage is calculated with respect to the width of the generated box's CONTAINING BLOCK, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.
*****

- my Knolls_C2 (and I think Tadlock) uses PIXELS for the pad-LR when Full Width,
and only uses PERCENTAGES when small width MQs (where Body width is always small)

SO:
- Full Size: use Pixels for pad-LR
- MQ smaller widths: use Percentage for pad-LR, knowing this is the BODY width that is the calculation
*/

#header > .wrap,
#menu-primary .menu-wrap-inner,
#main > .wrap,
#footer > .wrap {
  max-width: 900px;
	margin: 0 auto; /* center both wraps */
  padding: 0 50px; /* See Above - use pixels when full width, percentage when MQ smaller widths */
}



/* no styling for #container or #container .wrap */
#container {}


/* Fixed Header, to start - vert padding and BG in 'Theme style' below */
#header {
	position: fixed;	
	top:  0px;
	left: 0 px;
	width: 100%; /* since Fixed, must explicitly state 100% width */
	padding-top: 8px;
	background: #dde1f0; /* pck-ulg */
}


/* give #Branding bottom padding, rather than #Header
- I want Header to allow Menu to open below it, without any addtl bottom padding */
#branding {
	float: left; /* so Button can lie on same line floated */
	padding-bottom: 16px;
}

#site-title {
	/* no need to float left, since I now have #branding doing this */
}

/* -------------------------------------------------- */

/* MENU */

/* button is separately positioned now
- and is a BUTTON element 170430
- prevents content "jumping" when blank A-link used
ref: http://stackoverflow.com/questions/3252730/how-to-prevent-a-click-on-a-link-from-jumping-to-top-of-page-in-jquery
 */
.menu-toggle {
	float: left;
	font-size: 18px;
	margin-left: 24px;

	padding: 3px 8px;
	color: #ffffff;
	background: #252525;
	text-decoration: none;
	border: 1px solid #252525; /* my border - I need to remove default Button bdr anyway */
	border-radius: 4px;
}

/* 170501 don't show a hover state
Hover on the button only 
.menu-toggle:hover {
	color: #252525;
	background: #ffa6a6;
}
*/

/* Menu Icon - Unicode hamburger icon */
.menu-toggle:before { 
	content:'\2630';
	font-size: 80%
}

/* 170501 Show button change .is-active, then return to original state when not active */
.menu-toggle.is-active {
	color: #252525;
	background: #fff0b2; /* yellow lt */
}


/* #menu-primary and button are separately positioned now 
- put bg color in #menu-primary, so shows full-width */
#menu-primary {
	clear: both; /* clear the Floats above it */
	display: block; /* whole width */
	background: #ffa6a6; /* red lt */
}


/* Initially: display:None */
#menu-primary .wrap {
	display: none;
}

/* make VISIBLE when Class added */
#menu-primary .wrap.is-visible {
  display: block;
	/* pad-top/bot only, let the Master Width handle pad-LR */
	padding-top:    32px;
	padding-bottom: 32px;
}

/* I made this Wrap full width, used an inner .menu-wrap-inner for the width restriction
- so I can put bdr-bot/top full width here, which disappears when display:none
 */
#menu-primary .wrap {
	border-top:    4px solid #404040; /* gray75 */
	border-bottom: 4px solid #404040;
}

#menu-primary ul {
	font-size: 18px;
	list-style: disc inside;
}

/* horizontal menu elements */
#menu-primary li {
	/* 
	float: left;
	margin-right: 25px;
	*/
}

/* -------------------------------------------------- */


/* #Main
- because #header is now Fixed, it is out of the flow and so it's height is ignored
- create Padding or Margin in #main to push #main and rest of page downward
*/
#main {
padding-top: 100px;
}

#content {
	margin-bottom: 16px;
}

#sidebar {
	margin-bottom: 16px;
}

#footer {
	margin-bottom: 16px;
}