/* ----------------------------------------------------- */
/*                   PAWPRINT SITE CSS                   */
/* ----------------------------------------------------- */

/* this is so andre can continue styling pages */
@import "andre-wip.css";

/* this is so shawn can continue styling the pop-ups */
@import "shawn-wip.css";

/* ------------- */
/*   RESET CSS   */
/* ------------- */





html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ------------- */
/*  CUSTOM FONT  */
/* ------------- */

@font-face {
  font-family: 'slim_tonyregular';
  src: url('fenotype_-_slimtony-webfont.eot');
  src: url('fenotype_-_slimtony-webfont.eot?#iefix') format('embedded-opentype'), url('fenotype_-_slimtony-webfont.woff') format('woff'), url('fenotype_-_slimtony-webfont.ttf') format('truetype'), url('fenotype_-_slimtony-webfont.svg#slim_tonyregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'open_sansbold';
  src: url('opensans-bold-webfont.eot');
  src: url('opensans-bold-webfont.eot?#iefix') format('embedded-opentype'), url('opensans-bold-webfont.woff') format('woff'), url('opensans-bold-webfont.ttf') format('truetype'), url('opensans-bold-webfont.svg#open_sansbold') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'open_sansregular';
  src: url('opensans-regular-webfont.eot');
  src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), url('opensans-regular-webfont.woff') format('woff'), url('opensans-regular-webfont.ttf') format('truetype'), url('opensans-regular-webfont.svg#open_sansregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* ------------- */
/*      PAGE     */
/* ------------- */

body {
  font-family: 'open_sansregular', Tahoma, Geneva, sans-serif;
  font-size: 12px;
  background-image: url(background.jpg);
  background-color: #E7E6E2;
  padding: 0;
  margin: 0;
}

.cb {
  clear: both;
}


/* ------------- */
/*    HEADER     */
/* ------------- */

#header {
  padding-top: 20px;
  min-height: 110px;
}

.logo {
  background-image: url(logo.png);
  background-repeat: no-repeat;
  background-position: left top;
  height: 102px;
  width: 292px;
  display: block;
}

#social-media {
  display: block;
  position: absolute;
  top: 40px;
  right: 0px;
  margin: 0px;
  padding: 0px;
}

#social-media li {
  float: left;
  list-style-type: none;
  text-indent: -10000px;
  margin-right: 10px;
}

#social-media li a {
  background-image: url(social-media.png);
  background-repeat: no-repeat;
  background-position: left top;
  display: block;
  height: 42px;
  width: 42px;
  opacity: 0.65;
  -moz-opacity: 0.65;
  filter: alpha(opacity=65);
  transition: opacity .25s ease-out;
  -moz-transition: opacity .25s ease-out;
  -webkit-transition: opacity .25s ease-out;
  -o-transition: opacity .25s ease-out;
}

#social-media li a:hover {
  opacity: 1.00;
  -moz-opacity: 1.00;
  filter: alpha(opacity=100);
}

#social-media li.twitter a {
  background-position: -49px;
}

#social-media li.pinterest a {
  background-position: -99px;
}

#social-media li.googleplus a {
  background-position: -148px;
}

#social-media li.emailus a {
  background-position: -197px;
}

#social-media li.emailus {
  margin-right: 0px;
}

.container, #top-navs {
  width: 980px;
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

#navs {
  background-image: url(menu-background.jpg);
  background-repeat: repeat-x;
  background-color: #90C025;
  text-align: center;
  height: 39px;
  border-bottom: 4px solid #FFF;
}

#top-navs li {
  list-style-type: none;
  display: inline-block;
}

#top-navs li a {
  margin: 0px 38px 0px 8px;
  padding: 13px 0px 5px 0px;
  color: #FFF;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
  display: block;
  text-shadow: none;
  -webkit-transition: 500ms linear 0s;
  -moz-transition: 500ms linear 0s;
  -o-transition: 500ms linear 0s;
  transition: 500ms linear 0s;
}

#top-navs li a:hover {
  text-shadow: 0px 0px 16px #597C00;
}

#top-navs li a.active {
  border-bottom: 5px solid #FFF;
}


/* ------------- */
/*   SLIDESHOW   */
/* ------------- */

#slideshow {
  height: 370px;
  width: 100%;
  background-color: transparent;
  border-bottom: 4px solid #BDD030;
  margin-bottom: 30px;
  padding-bottom: 3px;
}

#slideshow .container {
  height: 370px;
}

#slideshow div.slide {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 370px;
}

#slideshow .slide .button {
  background: url(slideshow-button.png) no-repeat;
  text-indent: -10000px;
  display: block;
  height: 156px;
  width: 435px;
  position: absolute;
  left: -55px;
  bottom: -10px;
}

#slideshow .slide .buttonbaby {  /* temp addition */
  background: url(slideshow-button-2.png) no-repeat;
  text-indent: -10000px;
  display: block;
  height: 106px;
  width: 435px;
  position: absolute;
  left: -55px;
  bottom: 150px;
}

#slideshow .slide h1 {
  font-family: 'slim_tonyregular';
  font-size: 38px;
  color: #5B3513;
  padding-top: 30px;
  padding-bottom: 10px;
  text-shadow: 1px 1px 10px #FFF;
}

#slideshow .slide h2 {
  font-size: 21px;
}

#slideshow .slide ul {
  padding-top: 16px;
  width: 375px;
  font-size: 15px;
  line-height: 18px;
}

#slideshow .slide li {
  padding-bottom: 15px;
  padding-top: 5px;
  display: block;
  padding-left: 41px;
  background: rgba(0, 0, 0, 0) url(slideshow-bullets.png) no-repeat left 5px;
}

#slideshow .slide li:nth-child(2) {
  background-position: 0px -83px;
}

#slideshow .slide li:nth-child(3) {
  background-position: 0px -162px;
}

#slideshow .slide p {
  font-size: 16px;
  line-height: 19px;
  padding-top: 20px;
}

#slideshow div.slide.slide-1 {
  background-image: url(slide-1-background.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

#slideshow .slide.slide-1 .container {
  background: url(slideshow-cards-christmas.png) no-repeat right center;
}

#slideshow .slide-1 li {
  padding-top: 0px;
  background: rgba(0, 0, 0, 0) url(slideshow-bullets.png) no-repeat left top;
}

#slideshow .slide-1 li:nth-child(3) {
  background-position: 0px -167px;
}

#slideshow div.slide.slide-2 {
  background-image: url(slide-2-background.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

#slideshow .slide.slide-2 .container {
  background: url(slideshow-cards-postcards.png) no-repeat right center;
}

#slideshow div.slide.slide-3 {
  background-image: url(slide-3-background.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

#slideshow .slide.slide-3 .container {
  background: url(slideshow-cards-wedding.png) no-repeat right center;
}

#slideshow div.slide.slide-4 {
  background-image: url(slide-4-background.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

#slideshow .slide.slide-4 .container {
  background: url(slideshow-cards-baby.png) no-repeat right center;
}

#slideshow .slide-4 ul {
  font-size: 14px;
  line-height: 16px;
  padding-top: 10px;
}

#slideshow div.slide.slide-5 {
  background-image: url(slide-5-background.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

#slideshow .slide.slide-5 .container {
  background: url(slideshow-cards-bereavement.png) no-repeat right center;
}

#slideshow .slide-5 h1 {
  font-size: 30px;
}

.fotorama__stage, .fotorama__stage__shaft, .fotorama__wrap {
  width: 100% !important;
  height: 370px !important;
}

.fotorama__nav.fotorama__nav--dots {
  width: 100% !important;
}

.fotorama__nav-wrap {
  top: -30px;
  position: relative;
}

.fotorama__arr--prev {
  width: 36px;
  height: 35px;
  background: url(slideshow-back.png) no-repeat center center;
  left: 50px;
}

.fotorama__arr--next {
  width: 36px;
  height: 35px;
  background: url(slideshow-forward.png) no-repeat center center;
  right: 50px;
}


/* ------------- */
/*     BODY      */
/* ------------- */

#content {
  min-height: 300px;
}

#content .item {
  width: 100%;
  position: relative;
  padding-top: 20px;
  padding-bottom: 20px;
}

#content hr {
  background-image: url(hr.png);
  background-repeat: no-repeat;
  background-position: center center;
  display: block;
  height: 6px;
  width: 100%;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  padding: 0;
  margin: 0;
}

.item a {
  color: #7f9c00;
  text-decoration: none;
  border-bottom-width: 2px;
  border-bottom-style: dotted;
  border-bottom-color: #7f9c00;
  font-family: 'open_sansbold';
  font-size: 18px;
  -webkit-transition: 500ms linear 0s;
  -moz-transition: 500ms linear 0s;
  -o-transition: 500ms linear 0s;
  transition: 500ms linear 0s;
  transition: border-bottom-color 1s ease; 
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.71);
}

.item a:hover {
  color: #5B8610;
  border-bottom-style: solid;
  border-bottom-color: #5B8610;
}

.item p {
  font-size: 14px;
  line-height: 17px;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.71);
}

.item p span {
  font-size: 18px;
  font-family: 'open_sansbold';
}

#baby {
  height: 255px;
  background: url(cards-baby.jpg) no-repeat center bottom;
}

#baby .title {
  background-image: url(title-baby.png);
  background-repeat: no-repeat;
  height: 124px;
  width: 165px;
  display: block;
  position: absolute;
  top: 23px;
  left: 0px;
}

#baby p {
  position: absolute;
  height: 104px;
  width: 173px;
  left: 189px;
  top: 42px;
  padding: 0;
  margin: 0;
}

#baby a {
  position: absolute;
  bottom: 20px;
}

#christmas {
  height: 246px;
  background: url(cards-christmas.jpg) no-repeat center bottom;
}

#christmas .title {
  background-image: url(title-christmas.png);
  background-repeat: no-repeat;
  height: 131px;
  width: 232px;
  display: block;
  position: absolute;
  top: 20px;
  left: 161px;
}

#christmas p {
  position: absolute;
  left: 0px;
  top: 20px;
  width: 172px;
}

#christmas a {
  position: absolute;
  bottom: 20px;
}

#wedding {
  height: 225px;
  background: url(cards-wedding.jpg) no-repeat center bottom;
}

#wedding .title {
  background-image: url(title-wedding.png);
  background-repeat: no-repeat;
  height: 93px;
  width: 220px;
  display: block;
  position: absolute;
  left: 231px;
  top: 26px;
}

#wedding p {
  position: absolute;
  top: 20px;
  left: 0px;
  width: 180px;
}

#wedding a {
  position: absolute;
  bottom: 20px;
}

#bereavement {
  height: 240px;
  background: url(cards-bereavement.jpg) no-repeat center bottom;
}

#bereavement .title {
  background-image: url(title-bereavement.png);
  background-repeat: no-repeat;
  height: 112px;
  width: 225px;
  display: block;
  position: absolute;
  left: 182px;
  top: 20px;
}

#bereavement p {
  position: absolute;
  top: 70px;
  left: 0px;
  width: 226px;
}

#bereavement a {
  position: absolute;
  bottom: 20px;
}

#business-cards {
  height: 255px;
  background: url(cards-business.jpg) no-repeat center bottom;
}

#business-cards .title {
  background-image: url(title-business-cards.png);
  background-repeat: no-repeat;
  height: 108px;
  width: 162px;
  display: block;
}

#business-cards p {
  position: absolute;
  top: 60px;
  left: 300px;
  width: 200px;
}

#business-cards a {
  position: absolute;
  bottom: 20px;
  left: 300px;
}

#postcards {
  height: 255px;
  background: url(cards-postcards.jpg) no-repeat center bottom;
}

#postcards .title {
  background-image: url(title-postcards.png);
  background-repeat: no-repeat;
  height: 115px;
  width: 280px;
  display: block;
}

#postcards p {
  padding-top: 20px;
  width: 400px;
}

#postcards a {
  position: absolute;
  bottom: 20px;
}

#thankyou {
  height: 255px;
  background: url(cards-thankyou.jpg) no-repeat center bottom;
}

#thankyou .title {
  background-image: url(title-thankyou.png);
  background-repeat: no-repeat;
  height: 133px;
  width: 194px;
  display: block;
  position: absolute;
  top: 20px;
  left: 220px;
}

#thankyou p {
  position: absolute;
  top: 40px;
  left: 0px;
  width: 170px;
}

#thankyou a {
  position: absolute;
  bottom: 20px;
}

#personalised {
  height: 255px;
  background: url(cards-personalised.jpg) no-repeat center bottom;
}

#personalised .title {
  background-image: url(title-personalised.png);
  background-repeat: no-repeat;
  height: 124px;
  width: 276px;
  display: block;
}

#personalised p {
  position: absolute;
  top: 178px;
  left: 0px;
  width: 450px;
}

#personalised a {
  position: absolute;
  bottom: 20px;
}

#talk {
  height: 255px;
  display: none;
}

#talk .title {
  background-image: url(title-talktous.png);
  background-repeat: no-repeat;
  height: 54px;
  width: 208px;
  display: block;
}

#talk p {
  position: absolute;
  top: 162px;
  left: 0px;
  width: 450px;
}

#talk a {
  display: block;
}

/* ------------- */
/*     FOOTER    */
/* ------------- */

#footer {
  background-image: url(footer-background.jpg);
  background-repeat: repeat-x;
  background-color: #2B2B2B;
  color: #E2E2E2;
  text-decoration: none;
  line-height: 17px;
  margin-top: 50px;
}

#footer a {
  color: #E2E2E2;
  text-decoration: none;
}

#footer a:hover {
  color: #FFFFFF;
  text-decoration: none;
}

#footer ul {
  float: left;
  max-width: 190px;
  list-style-type: none;
  margin-left: 0;
  margin-right: 50px;
  margin-top: 30px;
  margin-bottom: 0px;
  padding: 0;
}

#footer-col-1 li:first-child {
  font-family: 'open_sansbold';
}

#footer-col-1 li:nth-child(3) {
  font-family: 'open_sansbold';
  margin-top: 15px;
  margin-bottom: 70px;
}

#footer-col-2 li, #footer-col-3 li {
  font-family: 'open_sansbold';
  text-transform: uppercase;
  line-height: 22px;
}

#footer-col-4 li a {
  background-image: url(footer-logo-silver.png);
  background-repeat: no-repeat;
  height: 98px;
  width: 140px;
  display: block;
  text-indent: -10000px;
}

ul#footer-col-5 {
  margin-right: 0px;
  float: right;
}

#footer-col-5 li {
  text-transform: uppercase;
}

#footer-col-5 li:first-child {
  font-family: 'open_sansbold';
}