/* -----

style_a1.css

re-A1-Woodcut-wpC
v0.0

- started 141012 fr b-Html5-Template. my newly created Php basic template (non-WP)
- ref: http://www.heliomedia.com/tutorials/building-a-basic-html5-template-using-php-includes/

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

/* fr Stargazer, Chun, etc */
.clearfix::after {
	content:    ".";
	display:    block;
	height:     0;
	clear:      both;
	visibility: hidden;
}

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

a:hover {
  color: #ffffff;
  background:   #252525; /* bNote: I have both BG and Bdr in a-link */
  text-decoration: none;
}

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

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

/* no header, so #Main for Margin-Top */
#main {
  margin-top: 90px; /* 141014 prev 100px */
}


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


#content {
  position: relative; /* for the Absolute positioned img within */
  margin: 0 auto;
}

/* 141014
- the Box now handled by .content-inner
- font-family Roboto Slab for all .content-inner (unless otherwise specified)
*/
.content-inner {
  font-family: 'Roboto Slab', Georgia, "Times New Roman", Times, serif;
  padding: 28px 100px;
  border: 1px solid #b3b0ad; /* wgray30 */
}


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

.hello-banner {
  font-size: 32px;
  line-height: 1.25;
  text-align: center;
  
  margin-bottom: 16px;
}

.visit-banner {
  text-align: center;
  margin-bottom: 28px;
}

.left-img-hand {
  max-width: 120px;
}

.right-img-hand {
  max-width: 120px;
}

.please-visit {
  display: inline-block; /* since P-tag, I want inline effect */

  font-size: 32px;
  line-height: 1.25;
  vertical-align: top;
  
  margin-top: 0px;
  margin-bottom: 0;
  padding: 5px 10px; /* 141014 at full-width, I don't want much Pad-Top/Bot */
  /* background: #d9d9d9; */
}

.redirect-link {
  font-size: 38px;
  line-height: 1.25;
  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;

  color: #000000;
  text-decoration: underline;
  
  padding: 10px;
  
  background: #d6d3d0;       /* wgray16, prev gray15 */
  border: 1px solid #c7c4c1; /* wgray22 */
}

.redirect-link a:hover {
  color: #ffffff;
  background:   #252525; /* bNote: I have both BG and Bdr in a-link */
  border-color: #252525;
  text-decoration: none;
}

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

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

/*
.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; /* 1411015 bigger, prev 16px, 15px, 14px */
  
  line-height: 1.25; /* 141014 tighten this up for my two-line Breadcrumb message */
  
  margin-left: 60px;   /* position re Helicoptor Man */
  margin-bottom: 12px; /* prev 20, smaller than my default 24px */
  
  color: #252525; /* 1411015 gray85, prev gray80, gray55, earlier gray50 */
}


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

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

#footer a {
  color: #404040; /* gray75 */
}

#footer a:hover {
  color: #ffffff; /* need to 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: 900px) {

  .content-inner {
    padding-left:  20px;
    padding-right: 20px;
  }

} /* end MQ */


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

  /* Helicoptor Man - smaller, shifted position */
  .helicoptor-man {
    max-width: 110px;
    top: -90px;
    left: -15px;
  }

  .left-img-hand {
    max-width: 75px;
  }

  .right-img-hand {
    max-width: 75px;
  }

  .redirect-link {
    font-size: 36px;
  }
  
  .bottom-img {
    max-width: 135px;
  }
  
} /* end MQ */



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

  #main > .wrap {
    padding-left:  7px; /* I want some minimal outside Pad-LR */
    padding-right: 7px;
  }
  
  .content-inner {
    padding-left:5px;
    padding-right:5px;
  }
  
  /* display:block forces next element onto new line */
  
  .left-img-hand {
    display: block;
    clear: both;
    margin: 0 auto;
    
    max-width: 60px;
  }
  
  /* now that hands are above and below, I need more Pad-Top/Bot */
  .please-visit {
    display: block;
    
    margin: 0 auto;
    padding-top:    10px;
    padding-bottom: 10px;
    
    
    text-align: center;
  }

  .right-img-hand {
    display: block;
    clear: both;
    margin: 0 auto;
  
    max-width: 60px;
  }

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

  .redirect-link a {
    padding-left:  3px;
    padding-right: 3px;
  }
  
  .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;
  } 

  .breadcrumb-here {
    font-size: 16px;
  } 
  
  .hello-banner {
    font-size: 22px;
  }
  
  .please-visit {
    font-size: 22px;
  }
  
  /* hide Rt-Side-Hand */
  .right-img-hand {
    display: none;
  }

  .redirect-link {
    font-size: 22px;
  }
  
  #footer {
    font-size: 16px;
  }
  
} /* end MQ */

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