/* *********** This pages is stying for just agenda.html ********************/

/* Please refer to navigation.css for the header area, navigation menu, page layout
   and footer styling  ************/

 /* *** This styles the sections for agenda.html *** */



/* ***************** Define the page layout and containers ***************** */

section#pagecontainer {height: 1470px;
  width: 99.97%;
  margin: 0 auto;
  border: 2px solid grey;
}

section.mainimage {
  background-image: url("../images/scrollvertical.JPG");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

section#pagecontainer div.tablearea {
	position: relative;
	height: 1280px;
	width: 70%;
	margin: 0 auto;
	margin-top: 9.5%;
}

/* ***************** Define the hearts in each corner ***************** */

section#pagecontainer div.hearts {position: absolute;
	width: 9%;
	height: 7%;
    background-image: url("../images/twohearts2.PNG");
    background-size: contain;
    background-repeat: no-repeat;
}

section#pagecontainer div#hearttopleft {left: 1%;
	top: 120px;}


section#pagecontainer div#hearttopright {right: 1%;
	top: 120px;}

section#pagecontainer div#heartbottomleft {left: 1%;
	bottom: 2.5%;}


section#pagecontainer div#heartbottomright {right: 1%;
	bottom: 2.5%;}


/* ***************** Define the text ***************** */

section#pagecontainer div.tablearea h5 {color: white;
	font-size: 2.5em;
	text-align: right;
	margin-top: 0%;
	padding-top: 1%;
	padding-right: 1%;
}

section#pagecontainer div.tablearea h6 {color: white;
	font-size: 1.45em;
	font-weight: lighter;
	text-align: left;
    padding-left: 1%;
    font-stretch: extra-expanded;
    text-transform: uppercase;
}

section#pagecontainer div.tablearea p {font-style: italic;
	line-height: 1.4;
	color: lightgrey;
	font-size: 0.95em;}


/* ***************** Define the table ***************** */

section#pagecontainer div.tablearea table {width: 100%;
	line-height: 1.2;
	border-collapse: collapse;	
	color: white;
	margin-top: 7%;
	margin-left: 0.7%;
}

section#pagecontainer div.tablearea table thead, 
section#pagecontainer div.tablearea table tbody tr 
  { border-bottom: 1px groove #C8CBCC; }


section#pagecontainer div.tablearea table thead tr th {padding: 0px 0px 22px 5px;
	text-align: left;
	font-stretch: extra-expanded;
	font-size: 1.3em;
	font-weight: lighter;
	color: white;
}

section#pagecontainer div.tablearea table tbody tr, 
section#pagecontainer div.tablearea table tbody tr td 
    {padding: 10px 15px 10px 5px;}



/* **************************** Media Queries **********************************  
Device sizes - max-width
Mobile - 320px
468px
IPAD / Tablet - 768px 
Desktop - 1024px 
*/



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

body {height: auto;}

section#pagecontainer .mainimage {background-size: 100% auto;}

}


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

section#pagecontainer {min-height: 1670px; height: auto;}

section#pagecontainer .mainimage {background-size: 100% auto;}

section#pagecontainer div.tablearea {
	min-height: 1520px;
	margin-top: 12.5%;}

section#pagecontainer div#heartbottomleft, section#pagecontainer div#heartbottomright {bottom: .7%;}
}


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

section#pagecontainer div#hearttopleft, section#pagecontainer div#hearttopright {top: 122px;}
section#pagecontainer div#heartbottomleft, section#pagecontainer div#heartbottomright {top: 1770px;}

section#pagecontainer {min-height: 1640px; height: auto;} 

section#pagecontainer div.tablearea {min-height: 1550px; 
	height: auto;
	margin-top: 17.5%;}

section#pagecontainer div.tablearea h5 {font-size: 2em;}

section#pagecontainer div.tablearea h6 {font-size: 1.25em;}

section#pagecontainer div.tablearea p {line-height: 1.2;
	font-size: 0.90em;}

}


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

section#pagecontainer div#hearttopleft, section#pagecontainer div#hearttopright {top: 95px;}
section#pagecontainer div#heartbottomleft, section#pagecontainer div#heartbottomright {top: 1710px;}

}

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

section#pagecontainer {min-height: 1710px height: auto;} 

section#pagecontainer div.tablearea {min-height: 1560px; 
	height: auto;
	margin-top: 23%;}

section#pagecontainer div#heartbottomleft, section#pagecontainer div#heartbottomright {top: 1780px;}

}


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

section#pagecontainer {min-height: 1770px; height: auto;} 


}

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

section#pagecontainer {min-height: 1920px; height: auto;} 

section#pagecontainer div#heartbottomleft, section#pagecontainer div#heartbottomright {top: 1930px;}

}

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

section#pagecontainer {min-height: 2025px; height: auto;}

section#pagecontainer div#heartbottomleft, section#pagecontainer div#heartbottomright {top: 2040px;} 

}

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

section#pagecontainer {min-height: 1440px; 
	height: auto;} 

section#pagecontainer div.tablearea {width: 95%;
	min-height: 1350px; 
	height: auto;
    margin-top: 12%;} 

section.mainimage {background: none;
		background-color: #160FF2;}

section#pagecontainer div.tablearea h5 {font-size: 1.6em;}

section#pagecontainer div.tablearea h6 {font-size: 1em;}

section#pagecontainer div.tablearea p {line-height: 1.1;
	font-size: 0.9em;}

section#pagecontainer div.tablearea table tbody tr td {font-size: 0.9em;}

section#pagecontainer div.tablearea table thead tr th {padding: 0px 0px 12px 5px;
	font-size: 1.2em;}


section#pagecontainer div#heartbottomleft, section#pagecontainer div#heartbottomright {display: none}

}


}