/*
Template Name: Care For All Ages - Assisted Living CSS
Version: 2.2
Design: Dennis Helwig
*/

/* =BASICS
----------------------------------------------- */		
.container { margin: 0 auto; width: 1000px; }
.clearfix { height: 50px; clear: both; }

body, html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.8 "Lato", sans-serif;
  color: #97131B;
}

#header {
  height:91vh;
}

#header > img {
  width:100%;
  height:91vh;
  position:fixed;
  z-index: 1;
}

#subheader {
  height:170px;
}

#subheader > img {
  width:100%;
  height:170px;
  position:fixed;
  z-index: 1;
}

/* =TEXT DISPLAY SECTIONS
----------------------------------------------- */	
.basepoint {
	position: relative;
	width: 100%;
}

.leadtext {
	color: #777;
	background-color: white;
	text-align: center;
	padding: 50px 80px;
	text-align: justify;
}

.basetext {
	color: #FFFFFF;
	background-color: #007C66;
	padding: 40px 80px;
	text-align: justify;
}

.servicestext {
	background-image: url("../images/servicesback.png");
	background-position: center;
	min-height: 638px;
}

.roomstext {
	background-image: url("../images/roomsback.png");
	background-position: center;
	min-height: 638px;
}

.menutext {
	background-image: url("../images/menuback.png");
	background-position: center;
	min-height: 638px;
}

.ratetext {
	background-image: url("../images/testimonialsback.png");
	background-position: center;
	min-height: 638px;
}

.image-holder-right {
	float: right;
	overflow: hidden;
	margin: 20px;
}

.image-holder-rightshadow {
	float: right;
	border-radius: 30px;
	overflow: hidden;
	box-shadow: 10px 10px 5px #888888;
	margin: 20px;
}

.image-holder-leftshadow {
	float: left;
	border-radius: 30px;
	overflow: hidden;
	box-shadow: 10px 10px 5px #888888;
	margin: 20px;
}

.image-holder-rotaterightshadow {
	float: right;
	transform: rotate(-11deg);
	border-radius: 30px;
	overflow: hidden;
	box-shadow: 10px 10px 5px #888888;
	margin: 20px;
}

.image-holder-rotateleftshadow {
	float: left;
	transform: rotate(11deg);
	border-radius: 30px;
	overflow: hidden;
	box-shadow: 10px 10px 5px #888888;
	margin: 40px;
}

.bgimg1 {
  background-attachment: fixed;
  position: relative;
  background-position: center;
  background-size: cover;
  background-image: url("../images/headerback.png");
  min-height: 100%;
  z-index:2;
}

/* =DISPLAY CAPTION
----------------------------------------------- */		
.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

.headerinfo {
  position: absolute;
  left: 0;
  bottom: 11%;
  width: 100%;
  text-align: center;
  color: #007C66;
  background-color: #000;
}

.caption span.border1 {
  background-color: #007C66;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  font-weight: bold;
  letter-spacing: 10px;
}

.caption span.border2 {
  background-color: transparent;
  color: #9F0100;
  padding: 18px;
  font-size: 25px;
  font-weight: bold;
  letter-spacing: 10px;
}

.caption span.border4 {
  background-color: transparent;
  color: #DDD8FF;
  padding: 18px;
  font-size: 25px;
  font-weight: bold;
  letter-spacing: 10px;
}

/* =STICKY BUTTON
----------------------------------------------- */		
#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #007C66; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
}

#myBtn:hover {
    background-color: black; /* Add a dark-grey background on hover */
}

/* =STICKY NAVIGATION
----------------------------------------------- */		
#content{
  height:80px; z-index: 10; position: relative;
  background-color:#fff;
}
#content > #navbar{
    position:absolute; top:0; width:100%; height:80px; background-color:#000; 
}
#main{
  height:100vhx; background-color:#fff; position:relative; z-index:1; 
  padding-top:30px; text-align:center; font-size:25px;
}

#logo{cursor:pointer; margin-top:15px; margin-left:20px; color:#fff; font-size:35px; float:left;}
#navbar > ul{margin-top:25px; float:right; width:700px; list-style:none;}
#navbar > ul > li{display:inline;}
#navbar > ul > li > a{
  color:#fff; font-size:20px;
  padding:10px 30px;
  text-decoration: none;
}
#navbar > ul > li:hover > a{
  text-decoration:underline;
}


/* =BODY TEXT FORMAT
----------------------------------------------- */		
h2 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 24px "Lato", sans-serif;
  font-weight: bold;
  color: #0272B4;
}

h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 18px "Lato", sans-serif;
  font-weight: semi-bold;
  color: #A9013C;
}

h4 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 14px "Lato", sans-serif;
  font-weight: semi-bold;
  color: #94439F;
}

h5 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 24px "Lato", sans-serif;
  font-weight: bold;
  color: #FFFFFF;
}

/* =MENU TABLES
----------------------------------------------- */
#menu-table {
	table-layout: fixed;
	width: 100%;
	text-align: left;
	border-collapse: collapse;
	margin: 0 0 22px;
}

#menu-table th {
	width: 125px;
	color: #FFFFFF;
	padding: 0px;
	background: #007C66;
	border-top: 4px solid #88C8BB;
	border-bottom: 1px solid #FFF;
	text-align: center;
}

#menu-table td {
	width: 125px;
	padding-right: 10px;
	padding-bottom: 5px;
	background: #FFFFFF;
	border-bottom: 1px solid #FFF;
	border-top: 1px solid transparent;
	vertical-align: top;
}

#menu-table .descrip {
	padding-left: 15px;
}

#menu-table tr:hover th {
	background: #88C8BB;
	color: #007C66;
}

#menu-table tr:hover td {
	background: #88C8BB;
	color: #007C66;
}

/* =CALENDAR TABLES
----------------------------------------------- */
#cal-table {
	table-layout: fixed;
	width: 100%;
	text-align: left;
	border-collapse: collapse;
	margin: 0 0 22px -35px;
}

#cal-table th {
	width: 140px;
	font-size: 20px;
	font-weight: bold;
	color: #FFF;
	padding: 0px;
	background: #007C66;
	border-top: 4px solid #88C8BB;
	border-bottom: 1px solid #FFF;
	text-align: center;
}

#cal-table td {
	width: 140px;
	padding-right: 10px;
	padding-bottom: 5px;
	background: #FFFFFF;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	font-size: 18px;
	border-top: 1px solid transparent;
	vertical-align: top;
}

#cal-table span.group {
	font-weight: bold;
	color: #007C66;
}

#cal-table span.indiv {
	font-weight: bold;
	color: #FB011A;
}

#cal-table span.caldate {
	font-weight: bold;
	color: #000000;
	font-size: 14px;
}

#cal-table .descrip {
	padding-left: 15px;
	font-size: 12px;
}

#cal-table tr:hover th {
	background: #88C8BB;
	color: #339;
}

#cal-table tr:hover td {
	background: #88C8BB;
	color: #339;
}