html {
    background-color: #869960;
}
.container {
    background-color: white;
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-top: 100px;
    padding-bottom: 75px;
    background: url("../images/dancers.jpg") left bottom repeat-x, #fff url("../images/dancers.jpg") left top repeat-x;
  
}

header {

    padding-top: 20px;
    color: #617140;
    background-image: url("../images/Dancing2.jpg");
    background-position: right -50px;
    background-repeat: no-repeat;
    background-size: 47%;
    margin-bottom: 10px;

}

header h1 {
    font-family: cursive;
    font-size: 200%;
    font-weight: bold;
    font-style:italic ;
    margin: 0;
}

header p {
    margin: 0;
}

/*  Site Navigation */

.site-nav {
    margin-top: 20px;
}

.site-nav ul {
    margin: 0;
    padding: 0;
}

.site-nav li {
    list-style: none;
    float: left;
    margin-right: 5px;

}

.site-nav a {
    display: block;
    padding: 10px 20px;
    border:2px solid #e5e9dc;
    color: #869960;
    text-decoration: none;
    border-bottom: none;
    background-color: #fff;
}

.site-nav a:hover {
    background-color: #e5e9dc;
}

body {
    font-family: Tahoma, sans-serif;
    font-size: 87%;
}

.main-area img {
    max-width: 100%;
    height: auto;
    padding-bottom: 40px;
    padding-top: 20px;
   }

/* Banner Overlay */

.image-banner {
    /* you can use top,bottom, left and right to position elements in Position Relative 
      You can use the property z-index to establish stacking order i.e. z-index: 11 (highest number on top) */

    position: relative;
}

.image-banner img {
    display: block;
}
    /* grey text box bottom left of image UNUSED */
.banner-desc {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    background-color: rgba(0, 0, 0, .4);
    padding: 2px 2px;
}

.content-area {
    border-top: 3px solid #e5e9dc;
    border-bottom: 3px solid #e5e9dc;
}

.main-area {
    width: 66%;
    float: left;
    padding-right: 40px;
    box-sizing: border-box;
}

.sidebar {
    width: 34%;
    float: right;
    /* three ways to do padding */
    padding: 20px 40px;
    padding: 20px 40px 20px 40px;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 20px;
    padding-bottom: 20px;
        /* 2 lines below are code for older browsers first and a Gradiant background on newr browsers*/
    background-color: #e5e9dc;
    background-image: linear-gradient(to bottom,#e5e9dc,#fff );
    box-sizing: border-box;
    font-size: 114%;

}

footer {
    text-align: center;
    font-size: 85%;
    color: #999;
    padding-top: 20px;
    padding-bottom: 20px;
}
    
.fix {
    clear: both;
}

.group:before,
.group:after {
	content: "";
	display: table;
}

.group:after {
	clear: both;
}

.group {
	zoom: 1;
}

/* Table elements */

.col-date,
.col-caller,
.col-cuer {
    width: 20%;
}

.col-title {
    width: 40%;
}

table {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
}

table th {

    text-align: left;
    background-color: #869960;
    color: #fff;
    text-shadow: 1px 1px 0 rgba0, 0, 0, .4;
}

table th,
table td {
    border: 1px solid #869960;
    padding: 10px;
    vertical-align: top;
    font-size: 85%;
}

h3 {
   text-align: center; 
}
     

table tbody tr:nth-child(odd) {
    background-color: #e5e9dc;
}

table.grocery-list tr :nth-child(2),
table.grocery-list tr :nth-child(3) {
    text-align: center;
}

/* Form Styles */

.hidden-label {
    position: absolute;
    height: 0;
    width: 0;
    overflow: hidden;
    visibility: hidden;
    }

/*form {

        below are 2 ways to add image backgrounds can be all 1 line minus the 'size' attribute 
       background: #e5e9dc url(../images/bigslice.gif) center center no-repeat ;
       background-image: url(../images/bigslice.gif);
       background-size: 300px auto;
       background-position: center center;
   padding: 30px 40px;
}
*/
input,
select   {
    font-family:  Tahoma, sans-serif;
    font-size: 100%;
}

input[type="email"],
input[type="name"],
select   {
    width: 100%;
    display: block;
    box-sizing: border-box;
    padding: o 10px;
    height: 40px;
    margin-bottom: 15px;
    border: 1px solid #cdcdcd;
    outline: none;
  }

  input[type="email"]:focus,
  input[type="name"]:focus {
	border: 1px solid #869960;
	box-shadow: inset 2px 2px 2px rgba(0, 0, 0, .13);
}

input[type="submit"] {
    width: 100%;
    display: block;
    box-sizing: border-box;
    background-color: #869960;
    color: #fff;
    padding: 10px 0;
    border: 1px solid #798a56;
    border-radius: 3px;
    margin-bottom: 10px;
    outline: none;
}
  
input[type="submit"]:hover,
input[type="submit"]:focus {
    border: 1px solid #535E3B;
	background-color: #798A56;
}

.checkbox-text {
    font-size: 85%;
    color: #777;
}

/* button */

.button
{
    color: blue;
    text-decoration: none;
    display: block;
    width: 200px;
    height: 22px;
    padding-top:8px;
    text-align:center;
    background-image: url('../images/btnOn.gif');
}
.button:link
{
    COLOR: blue;
    TEXT-DECORATION: none
}
.button:hover
{
    background-image:url('../images/btnOff.gif');
    font-weight: bold;
    COLOR: blue;

    text-decoration: none;
}
.button:focus
{
    COLOR: blue;
    TEXT-DECORATION: underline
}
/* UI-Menu items*/

.ui-menu ul {
    margin: 0;
    padding: 0;
}

.ui-menu li {
    float: left;
    list-style: none;
    margin-right: 20px;
}

.ui-menu a {
    display: block;
    width: 50px;
    height: 50px;
    background-image: url(../images/sprites.png);
    /* hides the text*/
    text-indent: -9999px;  
    background-repeat: no-repeat;
}

.ui-profile a {background-position: 0 -50px;}
.ui-profile a:hover {background-position: -50px -50px;}

.ui-settings a {background-position: 0 -100px;}
.ui-settings a:hover {background-position: -50px -100px;}

.ui-home a:hover {
    background-position: -50px 0;  
}

html.cssanimations .box-a {
	opacity: 0;
}

.box-a {
	animation: fadeBounce 1s forwards;
	-webkit-animation: fadeBounce 1s forwards;
	background-color: #e7eff5;
	padding: 20px 20px 0 20px;
	border: 2px solid #d3dee7;
	margin-bottom: 30px;
	box-shadow: 0px 5px 5px -2px rgba(0, 0, 0, .10);
	border-radius: 10px;
}

.boxes :nth-child(2) .box-a {
	animation-delay: .5s;
	-webkit-animation-delay: .5s;
}

.boxes :nth-child(3) .box-a {
	animation-delay: 1s;
	-webkit-animation-delay: 1s;
}

.boxes :nth-child(4) .box-a {
	animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;
}

.box-b {
	text-align: center;
	background-color: #CCC;
	width: 200px;
	height: 200px;
	line-height: 200px;
	margin-bottom: 40px;
	border-radius: 50%;
	transition: all 1s ease-out;
}

.box-b:hover {
	transform: rotate(360deg);
}

/* Slideshow Styles */
.cycle-slideshow {
	margin-bottom: 30px;
}

.slide {
	width: 100%;
    position:relative
}

.slide img {
	display: block;
}

.slide-text h3 {
	margin: 0;
}

/* Prev and Next Buttons */
.cycle-prev, .cycle-next {
	position: absolute;
	top: 30%;
	background-color: rgba(0, 0, 0, .35);
	color: #FFF;
	padding: 1px 10px;
	display: block;
	cursor: pointer;
	font-size: 130%;
	z-index: 1000;
	opacity: 0;
	transition: opacity .5s;
}

.cycle-next {
	right: 0;
}

.cycle-slideshow:hover .cycle-prev,
.cycle-slideshow:hover .cycle-next {
	opacity: 1;
}

.cycle-pager {
	position: absolute;
	top: 20px;
	z-index: 1003;
	width: 100%;
	text-align: center;
}

.cycle-pager span {
	text-indent: -9999px;
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #FFF;
	margin: 0 4px;
	cursor: pointer;
}

.cycle-pager .cycle-pager-active {
	background-color: #000;
}


.btn-a:hover {
	background-color: #FFF;
	color: #365267;
}




/* Banner Overlay */
.image-banner {
	position: relative;
	margin-bottom: 40px;
	overflow: hidden;
}

.image-banner img {
	display: block;
	transition: all 2s;
}

.image-banner:hover img {
	transform: scale(1.5);
}

.banner-description {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #FFF;
	background-color: rgba(0, 0, 0, .65);
	padding: 15px 25px;
	opacity: 0;
	transition-property: all;
	transition-duration: 1s;
	transform: translateY(100%);
}

.image-banner:hover .banner-description {
	opacity: 1;
	transform: translateY(0);
}