/* -----

style_woodA.css

Version: 0.0.2

- redirect to BillSeymour.com, started 151018

- ref: http://www.heliomedia.com/tutorials/building-a-basic-html5-template-using-php-includes/

141018
 URL path to current directory (so I don't need to state it explicitly)
'http://' . $_SERVER['HTTP_HOST'].dirname($_SERVER['PHP_SELF']) . '/';
------------------------------ */


/* Box-Sizing:Border-Box - now my basic style
- Width now includes contained element Width, Pad-LR, and Border-LR
- ref: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
*/
html {
  box-sizing: border-box;
}

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


/* fr Stargazer, Chun, etc */
.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;
  border: 1px solid #999999;
}

p { margin-bottom: 12px; }

/* basic link */
a {
  color: #000000;
  text-decoration: underline;
}

a:hover {
  color: #ffffff;
  background:   #252525;
  text-decoration: none;
}

/* #container */
#container {
  padding-top: 52px; /* using padding rather than margin */
}

/* BG tiled image */
body {
  word-wrap: break-word; 

  background-color: #f5f1ed; /* wgray4 */
  background-image: url('images/Leather_Transp_v09b_033_c1_126x.png');
}

#main {}

/* -----
Master Width set here
- using border-box:box-sizing
----- */
#main > .wrap,
#footer > .wrap {
  max-width: 900px;
  margin: 0 auto;
  padding-left:  5%;
  padding-right: 5%;
}

/*
.Breadcrumb-Here - 141014
- a 'Landing Breadcrumb'
- shift it depending where Helicoptor Man is
*/
.breadcrumb-here {
  font-family: "Times New Roman", Times, serif;
  font-size: 17px;
  line-height: 1.05;
  color: #252525;      /* 1411015 gray85, prev gray80, gray55, earlier gray50 */
  margin-left: 60px;   /* position re Helicoptor Man */
  margin-bottom: 12px; /* prev 20, smaller than my default 24px */
}

.breadcrumb-here p {
  margin-bottom: 8px;
}

.breadcrumb-here span {
  font-size: 20px;
  padding: 2px 4px;
  border: 1px solid #a6a4a1; /* wgray35 */
  border-radius: 6px;
}


#content {
  position: relative; /* for Absolute positioned img within */
  
  font-family: 'Roboto Slab', Georgia, "Times New Roman", Times, serif;
  margin: 0 auto;
  padding: 32px 0; /* LR handled in Wrap */

  background-color: #faf7f2; /* wgray2, lighter than BG color  */
  background-image: url('images/Leather_Transp_v09b_033_c1_126x.png');
  
  border: 1px solid #b3b0ad; /* wgray30 */
  border-radius: 6px;
}

.content-inner {}

/* Absolute Positioning, at full width */
.helicoptor-man {
  position: absolute;
  top:  -80px;
  left: -25px; 
  max-width: 135px; /* smaller width than full width img */
}

.hello-banner,
.please-visit {
  font-size: 28px;
  line-height: 1.25;
  text-align: center;
  margin-bottom: 2px;  
}

.please-visit {
  margin-bottom: 12px;
}

.redirect-banner {
  text-align: center;
  margin-bottom: 16px;
}

.left-img-hand,
.left-img-hand-2,
.right-img-hand {
  max-width: 105px;
}

/* 160410 NEW
Left-Hand-2 second image
- initially hide, show at smaller widths
*/
.left-img-hand-2 {
  display: none;
}


/* 160411b
initially inline-block, since LR hand images 
.please-visit {
  display: inline-block;

  font-size: 28px;
  line-height: 1.25;
  vertical-align: top;
  
  margin-top: 0px;
  margin-bottom: 0;
  padding: 5px 10px;
}
*/

/* 160411b Now INLINE-BLOCK (change in MQ to BLOCK) */
.redirect-link {
  display: inline-block;
  vertical-align: top; /* 160411b so Redirect-Link aligns to top of LR-hand images */
  /*
  text-align: center;
  margin-bottom: 36px;
  */
}

  /* 141014
  - display:inline-block
  - this causes surrounding H-tag (or Div) to have height equal to this a-tag
  */
  .redirect-link a {
    
    display: inline-block;
    
    font-size: 34px;
    line-height: 1;

    color: #000000;
    text-decoration: underline;
  
    padding: 8px;
    border-radius: 6px;
  }

  .redirect-link a:hover {
    color: #ffffff;
    background:   #252525;
    text-decoration: none;
  }

.bottom-img-div {
  text-align: center;
}

.bottom-img {
  max-width:150px;
}


/* 141015 - some footer styling, prob without stickyfooter */

#footer {
  clear: both;  
  font-size: 19px;  
  margin-top: 24px;  
  color: #404040; /* gray75 */
}

#footer a {
  color: #252525;
}

#footer a:hover {
  color: #ffffff; /* restate color, since I changed it in #footer-a */
}

.copyright { float: left; }
.credit { float: right; }



/* === MQ (All MQ are here) === */

@media only screen and (max-width: 725px) {

  #content {
    padding: 24px 0; /* smaller*/
  }


  /* Helicoptor Man - smaller, shifted position */
  .helicoptor-man {
    max-width: 110px;
    top: -90px;
    left: -15px;
  }
  
  /* 160410 Hide LR hand, show L-2 hand, and modify Please-visit */
  
  .please-visit {
    margin-bottom: 16px; /* larger */
  }

  .left-img-hand,
  .left-img-hand-2,
  .right-img-hand {
    max-width: 75px;
  }
  
  /* Hide LR hand, show L-2 hand 160410 */
  .left-img-hand,
  .right-img-hand {
    display: none;
  }

  .left-img-hand-2 {
    display: block;
    margin: 0 auto 8px; /* prev 12px, center and some mar-bottom */
  }
  
  .redirect-banner {
    margin-bottom: 0;
  }  
  
  .redirect-link {
    font-size: 36px;
    margin-bottom: 16px; /* prev 24px */
  }
  
  .bottom-img {
    max-width: 135px;
  }
  
} /* end MQ */



@media only screen and (max-width: 575px) {

  #main > .wrap {
    padding-left:  1.75%; /* narrower L-R */
    padding-right: 1.75%;
  }

  .redirect-link {
    font-size: 30px;
  }

  .redirect-link a {
    padding-left:  2.5%;
    padding-right: 2.5%;
  }
  
  .bottom-img {
    max-width: 110px;
  }
  
  /* Footer copyright-credit
  center text, un-float, clear both
  */
  .copyright,
  .credit {
    clear: both;
    float: none;
    text-align: center;
  } 
  
} /* end MQ */


@media only screen and (max-width: 425px) {

  .content-inner {
  padding-left:  5px;
  padding-right: 5px;
  } 
 
  .hello-banner {
    font-size: 23px;
  }
  
  .please-visit {
    font-size: 23px;
  }

  .redirect-link a {
    font-size: 28px;
  }
  
} /* end MQ */

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