/* CSS Document for Screens */  
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,700italic,300,700);

/* touch issues WAI-ARIA is supported. Learn mofre at Web Accessibility Initiative - Accessible Rich Internet Applications.  www.w3.org/TR/wai-aria/   */


body { 
    font-family:'Open Sans', san-serif; font-size:16px; font-weight:300;
    background: url(../../images/stone-background.jpg) center bottom; 
	background-repeat:repeat-y;
/*	height: 100vh; */
}

#page { 
    max-width: 1200px;
   height:100%; 
  /*   height: 100vh;*/
    margin: 0 auto; 
    position: relative; 
    background-color: #fff;
}


#home #page { 
    max-width: 1200px;
    height:100%; 
    margin: 0 auto; 
    position: relative; 
    background-color: transparent;
}

/* any item inside of the page element will be positioned in relation to this. the navigation is not in the header so it will be positioned in relation to the page and not to the header*/
/* any thing in an element with a position of relative is positioned in relationship to that element */


/* Text */

h1 {/* margin: 0 0 .5em 0;*/ font-size: 2em; font-weight: 700; } 
h2 {/* margin: 0 0 .5em 0;*/ font-size: 1.7em; font-weight: 700; }
h3 { margin: 0 0 .5em 0; font-size: 1.5em; font-weight: 700; }
h4 {/* margin: 0 0 1.5em 0;*/ font-size: 1em; font-weight: 700; }


.caption { margin: 0 0 .5em 0; font-size: 1.5em; font-weight: 700; }
p { margin: 0 0 .75em 0; }



@media print {
  body * {
    visibility: hidden;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}

.table {
  table-layout: fixed;
  width:100%;
}

@media (max-width: 768px) {
  .table td {font-size: .9em;}
  .table th {font-size: .9em;}
}
.radText {
  color: #336666;
  font-weight: 600;
 
}
.xenText {
  color: #336699;
  font-weight: 600;

}
/*a { color: #fff; text-decoration: none; }*/

a:hover { color: #cc6633; }
/*a:visited { color: #cc6633; }
*/


/* Section - ALL */

/*section { padding: 0 30px; }*/
section::after { content: ''; display: block; clear: both } /* you always need a the content proper in a pseudo element */

/* Section - Main */

/* when you float or position an element, the parent container will not extend to the height or width of the items inside */
/* pseudo element is like a phantom element. it's like an html element but only exists in the style sheet */
/* pseudo class is typically defined with one colon (a:hover) whereas a pseudo element has 2 (section::after) */

section.intro { text-align: center; }
section.intro h1 { margin: 0; color: #336666; } 
section.intro h2 { margin: 0; } 
section.main {   padding: 0; }
section.main aside { width: 20%; float: left; text-align: center; }
section.main .content { margin: 10px; background: no-repeat center top; background-size: 220px 220px; } /* each one will have a different graphic so don't set here */

section.main aside .content.lodging-serv {	
    width: 200px; height: 200px;
    background: url("../../images/service-navs/200/lodging-nav.png") no-repeat;
    display: inline-block;
}
section.main aside .content.lodging-serv:hover {
	background: url("../../images/service-navs/200/lodging-nav-hover.png") no-repeat;
}
  
section.main aside .content.ddc-serv {
    width: 200px; height: 200px;
    background: url("../../images/service-navs/200/ddc-nav.png") no-repeat;
    display: inline-block;
}
section.main aside .content.ddc-serv:hover {
	background: url("../../images/service-navs/200/ddc-nav-hover.png") no-repeat;
}  

section.main aside .content.grooming-serv {
	width: 200px; height: 200px;
    background: url("../../images/service-navs/200/grooming-nav.png") no-repeat;
    display: inline-block;
}
section.main aside .content.grooming-serv:hover {
	background: url("../../images/service-navs/200/grooming-nav-hover.png") no-repeat;
}  

section.main aside .content.training-serv {
    width: 200px; height: 200px;
    background: url("../../images/service-navs/200/training-nav.png") no-repeat;
    display: inline-block;
}
section.main aside .content.training-serv:hover {
	background: url("../../images/service-navs/200/training-nav-hover.png") no-repeat;
}  

section.main aside .content.retail-serv {
    width: 200px;  height: 200px;
    background: url("../../images/service-navs/200/retail-nav.png") no-repeat;
    display: inline-block;
}
section.main aside .content.retail-serv:hover {
	background: url("../../images/service-navs/200/retail-nav-hover.png") no-repeat;
}  

section.main aside .content.whisker-serv {
	width: 200px; height: 200px;
    background: url("../../images/service-navs/200/whisker-ridge-nav.png") no-repeat;
    display: inline-block;
}
section.main aside .content.whisker-serv:hover {
	background: url("../../images/service-navs/200/whisker-ridge-nav-hover.png") no-repeat;
}  
   
section.main aside .content.taxi-serv {
    width: 200px;  height: 200px;
    background: url("../../images/service-navs/200/pet-taxi-nav.png") no-repeat;
    display: inline-block;
}
section.main aside .content.taxi-serv:hover {
	background: url("../../images/service-navs/200/pet-taxi-nav-hover.png") no-repeat;
}  

section.main aside .content.events-serv {
    width: 200px; height: 200px;
    background: url("../../images/service-navs/200/events-nav.png") no-repeat;
    display: inline-block;
}
section.main aside .content.events-serv:hover {
	background: url("../../images/service-navs/200/events-nav-hover.png") no-repeat;
	
}  

section.main aside .content.webcam-serv {
    width: 200px; height: 200px;
    background: url("../../images/service-navs/200/webcam-nav.png") no-repeat;
    display: inline-block;
}
section.main aside .content.webcam-serv:hover {
    background: url("../../images/service-navs/200/webcam-nav-hover.png") no-repeat;
}  

section.main aside .content.tour-serv {
    width: 200px; height: 200px;
    background: url("../../images/service-navs/200/tour-nav.png") no-repeat;
    display: inline-block;
}
section.main aside .content.tour-serv:hover {
	background: url("../../images/service-navs/200/tour-nav-hover.png") no-repeat;
}  


/* Section How To */
section.instructor { background-color: #eee9d9; position:relative; margin:10px; }
section.instructor aside { width: 20%; float: left; margin-right: 10px; }
section.instructor aside .content { padding: 30px 30px 20px 0; }
section.instructor aside .content img { display: block; margin-bottom: 15px; width: 80%; }
section.instructor aside .content h4 { margin-bottom: 0; }
section.instructor aside .content p { margin-bottom: .5em; }
section.instructor aside .content a { display: inline-block; color: #cc6633; font-weight: 700; }

.location-footer {
	background-color: #336666;
	margin-bottom: 0px;
	color:#ffffff;
}

.clear-fix { clear: both; line-height: 1px; }
@charset "UTF-8";

/* Layout (global rules for all sizes) 

body { margin: 0px; padding: 0px; }*/
header a.logo { display: block; position: absolute; background-position: 0px 0px; background-repeat: no-repeat; }

/* Layout x-Large Screens (default for older browsers) */
header { background: url(../../images/header/northwood-walk.jpg) no-repeat right 0px; }
header a.logo { width: 200px; height: 100px; top: 10px; left: 10px; background-image: url(../../images/header/logo_lg.png); }


@media screen and (max-width: 1200px) {
	footer { padding-left: 20px; }
}

#hero { height:120px; position: relative; overflow: hidden; }
#hero .panel { width: 100%; height: 120px; position: absolute; overflow: hidden; background-color:transparent}

#hero .panel #promos { position:absolute; top:10px; right: 10px; 	}

#hero .panel .caption { 
	position: absolute; top:15px; left: 210px; 
	/*width:50%;*/
}
#hero .panel .caption img.email { position: relative; top: 0; left:10px; display: inline-block; margin: 0; white-space: nowrap; padding-right: 10px;}
#hero .panel .caption img.phone { position: relative; top: 0; left:10px; display: inline-block; margin: 0; white-space: nowrap; padding-right: 10px; }
#hero .panel .caption span { display: inline-block; }

a.mobile_menu { display: none; }

/*
.form-control {
  width: auto;
  display: inline-block;
}
*/
#training h1 {
	text-align : center;
}

.calButtons {
	margin: 10px 0; 
}

.tableheadings {
  height: 40px;
  background: #666666;
}
.tableheadings th {
  text-transform: uppercase;
  padding: 10px 6px;
  color: #fff;
  font-weight:700;
 
}

#calendar-header {
  text-align: center;
}

#calendar-header h1 {
	margin: 5px;
	display:inline-block
}
#calendar-headerimg {
	margin-right: 25px;
}

#calendar {
  width: 100%;
  margin-bottom: 10px;
}
/*
#calendar a {
  color: #8e352e;
  text-decoration: none;
}
*/
#calendar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

#calendar li {
  display: block;
  float: left;
  width: 14.342%;
  padding: 5px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  margin-right: -1px;
  margin-bottom: -1px;
}

#calendar ul.weekdays {
  height: 40px;
  background: #666666;
}

#calendar ul.weekdays li {
  text-align: center;
  text-transform: uppercase;
  line-height: 20px;
  border: none !important;
  padding: 10px 6px;
  color: #fff;
  font-weight:500;
  font-size: 13px;
}

#calendar .days li {
  height: 240px;
}

#calendar .days li:hover {
  background: #d3d3d3;
}

#calendar .date {
  text-align: center;
  margin-bottom: 5px;
  padding: 4px;
  background: #666;
  color: #fff;
  width: 30px;
  border-radius: 50%;
  float: right;
}

#calendar .event {
  clear: both;
  display: block;
  font-size: 12px;
  border-radius: 4px;
  padding: 3px;
  margin-top: 3px;
  margin-bottom: 3px;
  line-height: 14px;
  background: rgba(51, 102, 153, 0.9);
  border: 1px solid #336699;
  color: #ffffff;
  text-decoration: none;
}

#calendar .event a, #calendar .revent a {
	color: 000
	text-decoration: none;
}


#calendar .revent {
  clear: both;
  display: block;
  font-size: 12px;
  border-radius: 4px;
  padding: 3px;
  margin-top: 3px;
  margin-bottom: 3px;
  line-height: 14px;
  background: rgba(51, 102, 102, 0.9);
  border: 1px solid #336666;
  color: #ffffff;
  text-decoration: none;
}

#calendar .event-desc {
   color: #ffffff;
   font-weight:700;
  margin: 3px 0;
  text-decoration: none;
}
.event-time {
   color: #ffffff;
   font-style:italic;
   font-size: 11px;  
}

#calendar .other-month {
  background: #f5f5f5;
  color: #666;
}

/* ============================
				Mobile Responsiveness
   ============================*/
@media (max-width: 768px) {
  #calendar .weekdays, #calendar .other-month {
    display: none;
  }

  #calendar li {
    height: auto !important;
    border: 1px solid #ededed;
    width: 100%;
    padding: 10px;
    margin-bottom: -1px;
  }

  #calendar .date {
    float: none;
  }
}


/* ============================
		Promo Banner
   ============================*/
.webpromo {
	background-color: #336666;
	width: 100%;
	padding: 30px 0 10px 0;
}


.slideshow-container {
    max-width: 550px;
    position: relative;
    background-color: transparent;
}

.mySlides {
  display: none;
  height: 100px;
  max-width: 500px;
  padding: 0 10px 10px ;
}

.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -60px;
    padding: 30px 5px;
    color: #fff;
    font-weight: bold;
    font-size: 30px;
    transition: .6s ease;
    border-radius: 0 3px 3px 0
}

.next {
    right:-15px;
    border-radius: 3px 3px 3px 3px
}

.prev {
    left: -15px;
    border-radius: 3px 3px 3px 3px
}

.prev:hover,
.next:hover {
    color: #f2f2f2;
    background-color: rgba(0, 0, 0, 0.8)
}

.text {
    color: #f2f2f2;
    font-size: 15px;
    padding-top: 12px;
  	padding-bottom: 12px;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    background-color: #222428
}

.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0
}

.dot {
    cursor: pointer;
    height: 7px;
    width: 7px;
    margin: 2px;
    background-color: #fff;
    border-radius: 50%;
    display: inline-block;
    transition: background-color .6s ease
}

.dot.active,
.dot:hover {
    background-color: #ff7120;
}

button#pause.control {
	padding: 0;
	line-height: 10px;
	margin-top: -2px;
	overflow:hidden;
	
}
#guides {
	vertical-align:middle;
	text-decoration:none;
	margin-top: -7px;
	margin-right:10px;
}