@charset "utf-8";
/* CSS Document for awavypool.com */

/* cellpadding attribute of <table> is not supported in HTML5. Use CSS instead. */

/* styles will be inherited from parent tag when not specified (not ALL elements*/

/* order for defining top right bottom left = t r b l */

/* # This meta is for the sticky element to work. Used in header and footer (see container_top/_bottom div's).
	# Source: https://www.w3schools.com/howto/howto_css_sticky_element.asp
	<meta name="viewport" content="width=device-width, initial-scale=1">
*/

* {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: normal;
}

html {
	color: #009;
/*	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;*/
}
body {
	background-color:#FFFFCC;
	border: none;
	color: #009;
/*	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;*/
	margin: 0; /* 	margin: none; */
	padding: 0; /* padding: none; */
}

h1 {font-size:2em;}
h2 {font-size:1.5em;}
h3 {font-size:1.17em;}

.hidden {
	display:none;
}

.container_nav_flex {
	display:flex;
/*	vertical-align:bottom;
	width:100%;
/*	overflow:hidden;*/
	border: none;
	border-collapse:collapse;
	font-size:24px;
	font-weight: bold;
	margin: 0;
	padding:0;
/*	height: 30px;*/
	min-height: 30px;
	width:100%;
}

#container_nav {
/*	border: none;*/
	border:inherit;
/*	border-collapse:collapse;*/
	border-collapse:inherit;
/*	font-size:24px;
	font-weight: bold;*/
/*	margin: 0;*/
	margin:inherit;
	padding: 6px 20px 2px 20px;
	text-align:center;
/*	height: 30px;
	min-height: 30px;*/
	min-height:inherit;
/*	width:68%;*/
	/*clear:left;*/
	/*float:left;*/
	flex:1;
} 

#container_tel {
/*	border: none;*/
	border:inherit;
/*	border-collapse:collapse;*/
	border-collapse:inherit;
	font-size:1.335em;
	font-weight: bold;
/*	margin: 0;*/
	margin:inherit;
	padding: 6px 20px 2px 20px;
	text-align:right;
/*	text-shadow:-2px 2px #09F; /* blue (light) */
	text-shadow:-2px 2px #F00; /* red */
/*	text-shadow:-2px 2px red; /* red */
/*	text-shadow:-2px 2px #FFF; /* white */
/*	text-shadow:2px 2px #FFF; /* white */		
/*	height: 30px;
	min-height: 30px;*/
	min-height:inherit;
/*	clear:left;
	width:28%;
	float:left;*/
	flex:1;
}

.col_bg_blue {background-color:#09F;}
.col_bg_white {background-color:#FFF;}

.content {
	background-color: #FFF; /* remove if style not required */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px; /* 14px */
	font-weight: normal;
	padding: 20px 15px 10px 15px;
	height: 100%;
/*	width: 100%;*/
}

.textwrap {
	float: right;
	margin: 10px;
}

.container_body_service {
/*	background: #09F;*/
/*	font-size:18px;
	font-weight: bold;*/
	padding: 10px 15px 10px 5px; 
	width: 280px;
/*	height: 150px; */
/*	list-style-position: inside;
	list-style-image: url('/images/bullet.gif');
/*	opacity: 0.75;*/
}

.service_bdy {
	font-size:1.15em;
	font-weight: normal;
	margin:15px 15px 0px; /* t rl b */
	padding: 10px 15px;
	text-indent: 30px;
	width: 65%;
	clear: both;
/*	border-collapse:collapse;*/
}

.service_bdy_two {
	border-collapse:collapse;
/*	margin: 15px;
	padding: 15px;*/
}

.service_ftr {
	font-size: 18px;
	font-weight: bold;
	margin: 15px 15px 0; /* t rl b */
	padding: 20px;
	clear: both;
}

.service_hdr {
	color: #FFF;
	font-size: 27px;
	font-weight: bold;
	margin: 0 15px;
	padding: 10px;
	text-align: center;
}

.service_spc {
	color: #FFF;
	font-size: 18px;
	font-weight: bold;
	margin: 15px;
	padding: 10px;
	text-align: center;
	width: 75%;
}

.float_r {
	float: right;
	clear: both;
}

/***************************
****                                   ****
****    CONTAINER  STYLES    ****
****                                   ****
/**************************/
.container_bdr {
	border: 2px solid #09F;
	border-radius: 50px 15px;
	margin: 5px;
}

.container_body {
	background: #FFF;
	border: 2px solid #09F;
	border-collapse: collapse;
	color: #009;
/*	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;*/
	margin: 3px;
	padding: 0;
	width:100%;
	min-width: 600px;
}

.container_body_content {
	background-image: url('/images/img_pool_01.jpg');
	background-position: center top;
	background-repeat: no-repeat; /*may not be required where background-size = cover */
	background-size: cover;
	/*opacity: 1;*/
	padding: 15px;
	/*height: 210px; /* must be set when using a background image */
	/*width: 280px;*/
}

.container_bottom {
	border: 2px solid #09F;
	border-collapse: collapse;
	color: #000;
/*	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;*/
	/*margin-top:5px;*/
	margin: 3px;
	padding: 0; /* none */
	width:100%;
	min-width: 600px;
	position: -webkit-sticky;
	position: sticky;
	bottom: 0;
}

/* .container_top is used to control one element down from the wrapper: */
.container_top {
	background-image: url('/images/header_background.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0.85;
	border: 2px solid #09F;
	border-collapse: collapse;
	color: #009;
/*	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;*/
	margin: 3px;
	padding: 0;
	width:100%;
	min-width: 600px;
	position: -webkit-sticky;
	position: sticky;
	top: 0
}
/****    END CONTAINER STYLES    ****/

/**********************
****                          ****
****    FORM STYLES    ****
****                          ****
/**********************/

/* font-family all inherited using 16px=1em scale */
.container_form {
	background-color:#CCC;
	margin:20px auto;
	padding:5px 20px 10px;
	width:50%;
}

form {
	color: #009;
	font-weight:normal;
	margin:10px auto;
	padding-top:2px;
	text-decoration: none;
}

form ::placeholder{color:#666;font-size:0.8em;font-weight:normal;}

form fieldset{border-color:#09F;	margin-bottom:10px; width:80%;}

form legend{
	color:#09F;
	font-size:1.5em;
/*	font-weight:bold;*/
	text-align:left;
}

form input, textarea{
	color:#666;
	font-size:1.125em;
	font-weight:normal;
	margin:5px 0px;
	padding:5px;
	width:26em;
}

/* # Make sure there are no white spaces in the <textarea></textarea> tags 
	# or things like the cursor not starting top left 
	# or placeholder text not displaying may occur. */

form textarea{
	display:inline-block;
	resize:none;
	height:9em;
	
/*	text-wrap:normal;
	word-break:normal;
	word-wrap:normal;*/
}

form input[type="email"]:focus, form input[type="tel"]:focus, input[type="text"]:focus, textarea[type="text"]:focus {
  border: 2px solid #009;
  box-shadow: 0px 0px 3px 3px #09F; /* horizontal offset, vertical offset, blur, ??, color */
}

input[type="submit"]{
	background:#09F;
	border:1px solid #09F;
	border-radius:25px;
	color:#FFF;
	cursor: pointer;
	font-size:1.17em;
	font-weight:bold;
	margin:auto;/* doesn't have an effect when width set */
	padding:5px;
	width:200px;
}

#chars{font-size:1em;}
counter{color:#09F; font-size:1; font-weight:normal; padding-left:4px;}
/****    END FORM STYLES    ****/

/**************************
****                                 ****
****    HYPERLINK STYLES    ****
****                                 ****
/**************************/
.nav {
	background-color: transparent;
	color: #009;
/*	font-family: Verdana, Helvetica, sans-serif;*/
	font-size:1.5em;
	font-weight:bold;
	padding-top:2px;
	text-decoration: none;
}

a.nav:link {
/*	background-color: transparent;*/
	border: none;
/*	color: #009;
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 24px;
	padding-top: 2px;
	text-decoration: none;*/
}
a.nav:hover {
/*	background-color: transparent;*/
	border: none;
	color: #09F;
/*	font-family: Verdana, Helvetica, sans-serif;
	font-size: 24px;
	padding-top: 2px;
	text-decoration: none;*/

}
/****    END HYPERLINK STYLES    ****/

/********************
****                      ****
****    ID STYLES    ****
****                      ****
/*******************/
#date {
	background-color: #FFF;
	border: none;
	border-collapse:collapse;
	float: right;
	font-size:1.25em;
	margin: auto;
	opacity: 0.75;
	padding: 5px;
	text-align: center;
	text-wrap:none;
}

#footer {
	background-color: #09F;
	border: none;
	border-collapse: collapse;
	color:#FFF;
	font-size:1.17em;
	font-weight: bold;
	margin: 0;
	padding-top: 2px;
	text-align: center;
	vertical-align:text-top;
	height: 30px;
	min-height: 30px;
	width: 100%;
}

#header {
	border: none;
	border-collapse:collapse;
	margin: 0;
	padding: 0;
	height: 100px;
	min-height: 100px;
	width: 100%;
	min-width: 600px;
}

#img_01 {
	background-image: url('/images/img_pool_04.jpg');
	background-position: center top;
	background-repeat: no-repeat;
/*	background-size: cover;*/
	opacity: 1;
	height: 210px; /* must be set when using a background image */
	width: 298px;
}

#img_02 {
	background-image: url('/images/img_pool_08.jpg');
	background-position: center bottom;
	background-repeat: no-repeat;
/*	background-size: cover;*/
	opacity: 1;
	height: 210px; /* must be set when using a background image */
	width: 298px;
}

#img_03 {
	background-image: url('/images/img_pool_05.jpg');
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: cover;
/*	opacity: 1;*/
	height: 375px; /* must be set when using a background image */
	/*width: 100%;*/
}

#strap {
	border: none;
	border-collapse:collapse;
	font-family: "Comic Sans MS", cursive;
/*	font-size:36px; see .h1 */
	font-weight: bold;
	margin: 5px;
	padding: 0;
	text-align: center;
	width: 100%;
}

/* #wrapper is used to control the overall holding php page: */
#wrapper {
	border: none;
	border-collapse: collapse;
	color: #009;
/*	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;*/
	margin: auto;
/*	margin: 0;/*/
	padding: 0;
/*	width: 100%;*/
	min-width: 600px;
	max-width: 1140px;
}
/****    END ID STYLES    ****/

/**********************
****                         ****
****    LIST STYLES    ****
****                         ****
/**********************/
ul {
	font-size:18px;
	font-weight: bold;
	list-style-position: inside;
	list-style-image: url('/images/bullet.gif');
}

li {
	font-size:18px;
	font-weight:normal;
}
/****    END LIST SYTLES    ****/


/*******************************/
/*  redifine below for website as needed  */
/*******************************/

/* maybe keep higher tags a t top of script? */

.bdrTableInner{ /* no width setting for inner table*/
	border:1px solid #CC3333;
	border-collapse:collapse; /* to collapse borders into one border */
	margin:auto;
    padding:2px;
}
.bdrTable:tr:nth-child(even) {
  background-color:#CCCCCC;
}

.floatLtxtHighlight { /* used to float div left and highlight text within table*/
	color: #F00;
	float: left;
	font-weight: bold;
	height: 100%;
	/* margin: 3px; /* t r b l */
	padding: 2px; /* t r b l */
}

.floatLwBgc { /* used to float div left with background color*/
	background: #CCC;
	float: left;
	margin: 3px; /* t r b l */
	padding: 3px; /* t r b l */
}

/* begin accordion css */
/* used for .hidden toggle of tables ONLY using thead/tbody */
/* if tbody declard hidden then no tables called by include .. php will display*/
.clickable{
	cursor:pointer;
}

.tdAccordion{
	width:65px;
	max-width:65px;
}
/* works with : or ::.
The double colon replaced the single-colon notation for pseudo-elements in CSS3.
This was an attempt from W3C to distinguish between pseudo-classes and pseudo-elements.
The single-colon syntax was used for both pseudo-classes and pseudo-elements in CSS2 and CSS1.
For backward compatibility, the single-colon syntax is acceptable for CSS2 and CSS1 pseudo-elements.*/
.tdAccordion::before{
	content: "\00b1";
	font-weight:bold;
	/*heigh and width contrls not working from css
	height:100px;
	width:100px;*/
	/* vertical-align:text-bottom; The bottom of the element is aligned with the bottom of the parent element's font*/
	/* vertical-align:text-top; The top of the element is aligned with the top of the parent element's font*/
	vertical-align:text-bottom;
}
/* end accordion css */

.divAccordion {
	background-color:#FFF;
	/*border:1px;
	border-color:#CC3333;*/
	margin:auto;
	/*	margin-left:0;
	margin-right:0;*/
	margin-bottom:5px;
	margin-top:5px;
	outline:1px solid;
	outline-color:#CC3333;
	padding:none;
	width:600px;
}

.divMargin {
	/*margin:5px 0 5px 0; /*t r b l */
	padding:1px 0 4px 0; /*t r b l */
}

div.panel {
    /*padding: 2px 0 2px 0; /*t r b l */
		padding:none;
    display: none;
    background-color: #FFF;
		margin: auto;
		/*margin-bottom: 5px;*/
		margin-top:4px;
		width: 600px;
}
/*
.divCollapsible{
	border:none;
	data-collapsed-icon:"arrow-d";
	data-expanded-icon:"arrow-u";
	margin:auto;
	margin-bottom:5px;
	margin-top:5px;
	padding:none;
	max-width:600px;
}
*/

.contact {
	background-color: #FFF;
	color: #009;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 60px;
	font-weight: normal;
	margin: auto;
	padding: 25px;
	text-align:center;
}

.contact1 {
	background-color: #FFF;
	color: #009;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 48px;
	font-weight: bold;
	margin: auto;
	padding: 25px;
	text-align:center;
}

.contact2 {
	background-color: #FFF;
	color: #009;
	font-family: Helvetica, sans-serif;
	font-size: 48px;
	font-weight: bold;
	margin: auto;
	padding: 25px;
	text-align:center;
}

.contact3 {
	background-color: #FFF;
	color: #009;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: 72px;
	font-weight: normal;
	margin: auto;
	padding: 25px;
	text-align:center;
}

.contact4 {
	background-color: #FFF;
	color: #009;
	font-family: "Courier New", Courier, monospace;
	font-size: 48px;
	font-weight: bold;
	margin: auto;
	padding: 25px;
	text-align:center;
}

.contact5 {
	background-color: #FFF;
	color: #009;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 48px;
	font-weight: bold;
	margin: auto;
	padding: 25px;
	text-align:center;
}

.contact6 {
	background-color: #FFF;
	color: #009;
	font-family: "Book Antiqua", Palatino, serif;
	font-size: 48px;
	font-weight: bold;
	margin: auto;
	padding: 25px;
	text-align:center;
}