@charset "UTF-8";
/* COMMON STYLES AND X-LARGE SCREEN SIZE FROM 961 PX WIDE AND UP */

body {
	margin: 0;
	padding: 0;
	text-align: center;
	}
a {
	font-size: 1.2em;
	text-decoration: underline;	
}
a:hover {
	text-decoration: none;	
}
/* MAIN SITE CONTAINER */
#site-container {
	width: 80%;
	height: 100%;
	padding-bottom: 0px;
	max-width: 1590px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
	min-width: 300px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
	position: relative;
	}
/* BANNER CONTAINER */
#header-container {
	position: relative;
	top: 0px;
	/* Also key to below */
	height: 0px;
	width: 100%;
	/* 25% padding bottom is the key to having the child div#banner-image scale vertically as the width scales
	The width of this div is 100% of the site container, then there's 25% of that width used as padding bottom
	but the div has no height. The 25% gives the image the 4:1 proportion. Different percentage for different proportion.*/
	padding-bottom: 25%;
	margin: auto;
	z-index: 10;
	/* border: 2px solid #000; BORDERS IN PIXELS THROW THE WIDTH PERCENTAGES OFF */
	text-align: left;
	max-width: 1590px;
    }
.banner-image {
	display: block;
	position: absolute;
	/*Instead of top position use bottom. Since the image is the same size as the div
	it doesn't matter. But at the 640px breakpoint the image will stick to the bottom*/
	bottom: 0%;
	left: 0px;
	height: 100%;
	width: 100%;
	background: transparent 100% 100%  bottom right no-repeat;
    background-size: cover;
    background-repeat: no-repeat;	
}
#top-banner {
	z-index: 10;
	background-image: url(../images/slideshow/banner-02.jpg) no-repeat right top;
	}
#bottom-banner {z-index: 6;}

#logo-holder {
	position: absolute;
	height: 80%;
	top: 10%;
	left: 2%;
	z-index: 100; /* keep logo above banner images	*/
/*	background-color: yellow;	*/
}

/* SHOW DESKTOP NAV ON DESKTOP VERSIONS */
#primary-nav {
	width: 100%;
	height: 53px;
	position: absolute;
	text-align: center;
	margin: auto;
	padding: 0px;
	z-index: 200;
	/*background-color: red;*/
	}
li#mobile-menu {
	display: none;	/* Hide OPEN MENU li element */ 
}
#primary-nav ul {
	width: 100%;
	padding: 0px;
	text-align: center;
}

#news-menu, #services-menu { /* Set drop down menus to start rolled up */
	display: none;
	}
/* First and last link in nav bar slighty bigger to equal 100% */
li.main-link:first-of-type, li.main-link:last-of-type {
	width: 15%;
}
li.main-link {
	float: left;
	z-index: 12;
	width: 14%; /*If additional main links are required, this percentage needs to go down. 14% works with 7 main links*/
	text-align: center;
	}
li.main-link a {
	text-align: center;
	height: 100%;
	width: 100%;
	display: block;
	padding: 14px 0px;
	}
ul.secondary {
}
li.secondary-link {
	display: inline-block;
	width: 100%; /* Important so each secondary link is on it's own line */ 
	z-index: 12;
}

.mobile-quick-link p {
	padding: 20px 10px;
}
/* CONTAINER FOR COLOR DROP DOWN INFO BOXES AND BLOCK QUICK LINK BUTTONS */
#quicklink-container {
	position: absolute;
	width: 100%;
	height: 10px; /* Enter a value so it doesn't default to full depth and block links high up in the content area */
	left: 0px;
	top: -1px;
	background-color: transparent;
	z-index: 100;
}
/* COLOR BLOCK HOLDER FOR COLOR BLOCK BUTTONS */
div#block-holder {
	display: block;
	float: right;
	width: 22%;
	text-align: left;
	z-index: 300;
    }
/* QUICK LINK BUTTONS */
.quick-link {padding: 20px;}
#colorblock-1, #colorblock-2, #colorblock-3, #colorblock-4 {

}
#colorblock-1 p, #colorblock-2 p, #colorblock-3 p, #colorblock-4 p {margin: 0px;}
/* DROPDOWN BOXES OF INFORMATION WHEN QUICK LINK BUTTONS ARE CLICKED */
#colorblock-1-info, #colorblock-2-info, #colorblock-3-info, #colorblock-4-info {
	position: absolute;
	text-align: center;
	top: 0px;
	left: 0px;
	width: 78%;
	display: none;
	padding: 10px 0px;
	/*Keep minimum height full height of parent div
	height: 100%;*/
	z-index: 200;
}
/* LOCATION AND HOURS BOX */
#hours-holder {
	font-size: 20px;
	height: 200px;
	padding-top: 100px;
	padding-bottom: 40px;
	width: 50%;
	float: left;	/*background-color: yellow;*/
}
#close-hours {
}
#location-holder {
	width: 50%;
	float: right;
	display: block;
/*	background-color: red;*/
}
iframe#map {
	width: 80%;
	height: 400px;
	margin: 0px;
	padding: 0px;
	border: solid 1px black;
	frameborder: 1px;
	scrolling: no;
	marginheight: 0px;
	marginwidth: 0px;
}
small a {
	font-size: 20px;
}
/* SPREAD THE WORD BOX */
p.reviews {
	font-size: 20px;	
}
/* MAIN CONTAINER HOLDER FOR ALL CONTENT */
div#primary-container {
	padding: 0px;
	overflow: auto;
	position: relative;
	margin-top: 50px;
	width: 100%;
}

/* CONTAINER FOR MAIN CONTENT (text, etc.)*/
div#main-content {
	position: relative;
	width: 74%;
	padding: 0px 2% 24px 2%;
	text-align: left;
/*	PREVENTS PAGE FROM BEING TOO SHORT THEREFORE STOPPING SCROLL BARS FROM APPEARING 
IF MAIN PAGE IS SHORTER THAN BOOK APPOINTMENT FORM */
	min-height: 1036px;
	float: left;
/*	background-color: yellow;*/
    }
/* EXTEND NOTICES TO THE EDGE OF THE MAIN CONTENT DIV WITH NO MARGINS. BOTTOM MARGIN IS 0 SO ADDITIONAL NOTICES
CAN BE ADDED WITHOUT A GAP BETWEEN PINK BOX NOTICES. ADD .last-notice CLASS TO LAST NOTICE INSTANCE */
#main-content p.notice {
	margin: -2px -3% 20px -3%;
	padding: 21px 21px 21px 21px;	
}
#main-content p.alt-notice {
	margin: -2px -3% 20px -3%;
	padding: 21px 21px 21px 21px;	
}

/* SIDEBAR LINK LOGOS UNDER NOTICES WHEN VIEWING SMALL SCREEN */
.sidebar-mobile-holder {
	display: none;
}
/* RIGHT COL FOR ADS TRIVIA OR OTHER */
#right-col {
	/*	background-color: #e3f1ff;*/
	display: block;
	text-align: left;
	z-index: 300;
    }
.sidebar-blue, .sidebar-pink {
	padding: 5%;
	margin-bottom: 20px;	
}
/* BLUE BUTTONS INSIDE OF COLORED INFO BOXES */
.icon {
	padding-top: 20px;	
}
button.close-window, #yelp-reviews, #google-reviews {
	padding: 18px;
	width: 30%;
	display: block;
	margin: 0px auto 20px auto;
}
#facebook-holder {
	padding: 18px 18px;
	width: 30%;
	display: block;
	margin: 20px auto;
/*	background-color: red;*/
}
/*button.close-window, #review-button {
	bottom: 20px;
}
*/
/* FOOTER */

footer {
	/*background-color: red;*/
	padding: 0px;
	text-align: center;
	width: 100%;
	overflow: auto;
	}
#left-footer {
	padding-bottom: 50px;
	margin: 30px 0px 0px 30px;
	float: left;
	text-align: left;		
}
#center-footer {
	display: inline-block;
	margin: 30px auto 0px auto;
	text-align: center;
}
#right-footer {
	padding-bottom: 50px;
	margin: 30px 30px 0px 0px;
	float: right;
	text-align: right;		
}
#term-privacy {
	padding: 20px;
	font-size: 12px;	
}
.bar {
	margin: 30px;
}

/* LARGE SCREEN SIZE FROM 641 UP TO 960 PX WIDE */
@media all and (min-width: 960px) {
/* BRINGS BACK THE MAIN NAV CONTAINER SINCE THE MENU BUTTON TOGGLE PRESS ADDS INLINE STYLE OF DISPLAY HIDDEN */
#primary-nav {
	display: block !important;
	}
li.main-link, li.main-link:first-of-type, li.main-link:last-of-type {
	display: block !important; /* hide all menus except home */ 
	}
}
/* Just to move right col content down */
@media all and (max-width: 1108px) and (min-width: 641px) {
	/* MAIN SITE CONTAINER */
#right-col {
	}
}
/* LARGE SCREEN SIZE FROM 641 UP TO 960 PX WIDE */
@media all and (max-width: 960px) and (min-width: 641px) {
#site-container {
	padding-top: 0px;
	padding-bottom: 0px;
	width: 100%; /* 6% GREATER THAN XLARGE */
	min-width: 300px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
	}
#banner {
	top: 0px;  /* 30 LESS THAN XLARGE */
	/* border: 2px solid #000; BORDERS IN PIXELS THROW THE WIDTH PERCENTAGES OFF */
	height: 0px;
	max-width: 960px;
    }
.main-link {
	width: 14%;
	}
/* BRING BACK DESKTOP NAV ON DESKTOP VERSIONS. ONLY FOR GROWING SCREEN */
#primary-nav {
	display: block !important;
	width: 100%; /**/
	position: absolute;
	height: 40px;
	text-align: center;
	margin: auto;
	padding: 0px;
	z-index: 200;
	}

/* BRING BACK RIGHT COL CONTENT ON DESKTOP VERSIONS. 4 BLOCK LINKS FROM CENTER BLOCK CONTAINER. ONLY FOR GROWING SCREEN */
div#block-holder {
	display: block;
	float: right;
    }

li.main-link, li.main-link:first-of-type, li.main-link:last-of-type {
	display: block !important; /* hide all menus except home */ 
	}
/* MAKE BLUE BUTTONS INSIDE OF COLORED INFO BOXES WIDER */
button.close-window, #yelp-reviews, #google-reviews {
	width: 40%;
}
}	
	
	
/*------------- THIS IS THE BREAK POINT THAT MOVES THE NAVIGATION AND COLORED BLOCKS TO NEW LOCATIONS -----------------*/	
/* MEDIUM SCREEN SIZE FROM 481 UP TO 640 PX WIDE */
@media all and (max-width: 640px) {
#site-container {
	padding-top: 0px; /* REMOVE TOP PADDING FOR SMALLER SCREEN */
	padding-bottom: 0px;
	width: 100%;
	/*max-width: 960px; a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
	/*min-width: 482px; a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
	}
/*currently commented out in html*/
div#tower-sidebar {
	display: none;
}
#banner {
	top: 0px;
	height: 0px;   /* GO FROM 200PX HIEGHT TO 100PX FOR SMALLER SCREEN */
	max-width: 640px;
    }
/* BANNER CONTAINER */
#header-container {
	/* 50% padding bottom is the key to having the child div#banner-image scale vertically as the width scales
	The width of this div is 100% of the site container, then there's 50% of that width used as padding bottom
	but the div has no height. The 50% gives the image the 4:1 proportion. Different percentage for different proportion.*/
	padding-bottom: 55%;
    }
/* put these selectors on the 2 slideshow divs? */
.banner-image {
	height: 100%;
	bottom: 0%;
	/*background: #fff url(../images/sm-banner-01.jpg) no-repeat right top    !important;*/
	background-size: cover !important;
}	
#logo-holder {
	left: 5%;	
}
#primary-nav {
	width: 100%; /*84 + 8 padding + 8 padding = 100% for width of nav container*/
	position: absolute;
	height: 40px;
	text-align: left;
	margin: auto;
	padding: 0px;
	z-index: 200;
	}
#primary-nav ul {
	width: 100%;
/*    display: block;*/
    list-style-type: none;
    padding: 0px; 
}
#news-menu, #services-menu { /* Set drop down menu containers on secondary menus to start rolled up */
	display: none;
	}
/* First and last link in nav bar to remove slight extra that equaled 100% */
/*li.main-link:first-of-type, li.main-link:last-of-type {
	width: auto;
}*/
li#mobile-menu {
	display: block;	/* show OPEN MENU menu */ 
	float: none;
	padding: 0px;
	width: 100%;
	z-index: 12;
}
li#mobile-menu {
	text-align: center;
	height: 100%;
	width: 100%;
	display: block;
	padding: 14px 0px;
	}
/* Make all nav links 100% width */
li.main-link, li.main-link:first-of-type, li.main-link:last-of-type {
	display: none; /* hide all menus except home */ 
	float: none;
	padding: 0px;
	width: 100%;
	z-index: 12;
	}
ul.secondary {
	margin-top: 0px;
	}
li.secondary-link {
	width: 100%; /* Important so each secondary link is on it's own line */ 
	z-index: 12;
	background-color: #66a4e2;
	padding: 0px;
	}
li.secondary-link:last-of-type {
	padding-bottom: 0px;
	}
/* pad out all links evenly so vertical roll down menu is even */ 
li.main-link a, li.secondary-link a {
	display: block;
	padding: 14px 0px;	
	}
/* COLOR BLOCK HOLDER FOR COLOR BLOCK BUTTONS */
div#block-holder {
	display: block;
	float: none;
	width: 100%;
	z-index: 300;
    }
#colorblock-1-info, #colorblock-2-info, #colorblock-3-info, #colorblock-4-info {
	width: 100%;
	}
/* with appointment block in block cluster
#colorblock-1-info, #colorblock-2-info {
	top: 60px;
	}
#colorblock-3-info, #colorblock-4-info {
	top: 122px;
	}
	*/
/* with appointment block removed from block cluster */
#colorblock-1-info {
	top: 60px;
	}
#colorblock-2-info {
	top: 120px;
	}
/* Removed May 2024 #colorblock-4-info {} */
#colorblock-4-info {
	top: 182px;
	}
	
.quick-link {
	height: 62px; /* set a locked height for mobile display buttons */
	display: block;
	padding: 0px;
	margin: 0px;
	border: 0px;
	text-align: center;
/*	width: 50%;  50% with appointment block in block cluster */
	width: 100%;
	}
.quick-link p {
	padding: 20px 0px;
	}
#colorblock-1, #colorblock-3 {
	float: left;
	}
#colorblock-2, #colorblock-4 {
	float: right;
	}
/* LOCATION AND HOURS BOX */
#location-holder {
	width: 100%;
	float: none;
/*	background-color: red;*/
}
#hours-holder {
	font-size: 20px;
	height: 120px;
	padding: 0px 0px 50px 0px;
	float: none;
	width: 100%;
/*	background-color: yellow;*/
}
#close-hours {
	margin-top: 24px;
}
/* MAKE BLUE BUTTONS INSIDE OF COLORED INFO BOXES WIDER */
button.close-window, #yelp-reviews, #google-reviews {
	width: 50%;
}
/* MAKE LEFT CONTENT COLUMN FULL WIDTH SINCE LEFT COLUMN IS HIDDEN */
div#main-content {
	width: 94%;
	padding: 3%;
	text-align: left;
/*Make more space at the top to allow for quick link buttons*/
	margin-top: 164px;
    }
/* HIDE right-col AND SHOW sidebar-mobile (below) */
#right-col {
	display: none !important;
	}
/* SIDEBAR LINK LOGOS UNDER NOTICES WHEN VIEWING SMALL SCREEN */
.sidebar-mobile-holder {
	display: block;
	width: 100%;
	text-align: center;
}
.sidebar-mobile {
	display: block;
	/* For when there's two sidebar mobile items float: left;*/
	width: 66%;
	text-align: center;
	/* For when there's two sidebar mobile items margin: 0px 2%; */
	/* For when there's only one sidebar mobile item */
	margin: auto;
}
.sidebar-mobile a img{
	width: 80%;
}

footer {
	}
#left-footer {	
	}
#center-footer {
	width: 100%;
	}
#right-footer, #center-footer, #left-footer {
	position: relative;
	margin: auto;
	padding: 30px 0px;
	float: none;
	text-align: center;	
	border-top: 2px solid #0e7ecc;
	}
}

	
/* SMALL SCREEN SIZE UP TO 480 PX WIDE */
@media all and (max-width: 480px) and (min-width: 100px) {
#site-container {
	padding-top: 0px; /* REMOVE TOP PADDING FOR SMALLER SCREEN */
	padding-bottom: 0px;
	width: 100%;
	}
#banner {
	top: 0px;
	height: 0px;   /* GO FROM 200PX HIEGHT TO 100PX FOR SMALLER SCREEN */
	max-width: 480px;
    }


/* MAKE LEFT CONTENT COLUMN FULL WIDTH SINCE LEFT COLUMN IS HIDDEN */
div#main-content {
	float: left;
	width: 94%;
	padding: 3%;
	text-align: left;
    }
}
/* MAKE BOOK APPOINTMENT TEXT CENTER VERTICALLY WHEN TEXT REFLOWS TO 2 LINES */
@media all and (max-width: 380px) {
	div#colorblock-3.quick-link p {
	padding: 10px 0px;	
	}
}