@charset "UTF-8";
/* WaterMarks Gallery  - Page styling module */
/* Author: Barrie Sutherland (c) August 2020 */	
/* Version 1.0 1/2/2015 
/* Version 2.0 12/7/2020
/* Revisions:
/* 	11/02/2017 add forms styles*/
/*	12/07/2020 reorganise the format, revise link settings and navigation colours
/*	27/11/2022 revise page, header and content containers heirachy

/* Colour codes: https://www.w3schools.com/colors/colors_names.asp */
/*  Useful notes:
/*	Body settings exclude the Homepage(Index) It has its own CSS settings */
/*  Padding is the space between an element content and border  */
/*  Margin is the space outside the element border */
/*  Text-decoration: none; is often used to remove underlines from links  */
/*body {background-image: url(""); background-repeat: no-repeat; background-attachment: fixed; background-size: auto; background-color:#000000; */
/*		padding: 0px; margin: 0px; font-family: verdana, calibri, palatino, sans-serif; font-size: 12px; color:#FFFFFF;} */

/*body, html  {background-image: url(""); background-position: center; background-repeat: no-repeat; background-size: cover; background-color: #000000; height: 100%; padding: 0px; margin: 0px; font-family: verdana, calibri, palatino, sans-serif; font-size: 12px; color:#FFFFFF;} */
body {background-image: url(""); background-position: center; background-repeat: no-repeat; background-attachment: fixed; background-size: auto; background-color:#000000; 
	padding: 0px; margin: 0px; font-family: verdana, calibri, palatino, sans-serif; font-size: 12px; color:#FFFFFF;} 

/*  Header, footer & page navigations 	*/
.header				{background-color: #646464; z-index: 20; position: absolute; top: 0; right: 0; left: 0; overflow: hidden; padding-bottom: 5px; border-bottom: 1px solid white;}
.text-header 		{font-size: 20px; padding-top: 0px; padding-bottom: 0px; color:#FFFFFF;}
img.hdr-logo 		{width: 150px; height: auto; padding: 0px;	border-top: 0px solid white; border-bottom: 0px solid white; border-left: 0px solid white;}	
img.hdr-image 		{width: 98%; height: auto; padding: 5px; margin-left: 20px; border-top: 1px solid white; border-right: 1px solid white; border-bottom: 1px solid white; border-left: 1px solid white;}	
div.footer			{background-color: #646464; z-index: 25; position: fixed; bottom: 0; right: 0; left: 0; border-top: 1px solid white; text-align: center;}

/*	Device responsive settings */
.row::after {content: ""; clear: both; display: table;} /*Note: row widths should always add to 100%  */
[class*="col-"] {float: none; padding: 15px;}  /*should be float: left; but creates a layout issue to be resolved?? */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

/*	Link settings	When setting the style for several link states, there are some order rules:
    a:hover MUST come after a:link and a:visited
    a:active MUST come after a:hover */
a.link 					{color: #99FFFF; /* aqua */font-size: 14px; text-decoration: none; font-weight: normal;}
a:visited 				{color: #99FFFF; /* aqua */}
a:hover   				{color: #FF9999; /* peach */}
a:active 				{color: #99FFFF; /* aqua */} 
a.hdr-menu 				{color: #99FFFF; font-size: 14px; text-decoration: none; margin: 0px 7px;}
a.ftr-menu 				{color: #99FFFF; font-size: 12px; text-decoration: none; margin: 0px 7px;}	
a.sub-menu 				{color: #99FFFF; font-size: 12px; text-decoration: none; margin: 0px 7px;}	
.other-links 			{color: #99FFFF; font-size: 14px; text-decoration: none;}			
.externals	 			{position: fixed; top: 60px; right: 40px; margin: 10px; padding: 10px;}

/*  Text Alignments */
.right-align 			{position: absolute; right: 0px;}
.left-align 			{position: absolute; left: 0px;}
.center-align			{margin: auto;}
text-align:center
td.top					{vertical-align: top;}
td.middle				{vertical-align: middle;}
td.bottom				{vertical-align: bottom;}

/*	Blocks */	/*indents = new versions*/
div.left-align 			{margin: 10px auto 10px 0;}	
div.center-align 		{margin: 5px auto;}	
div.right-align 		{margin: 10px 0 10px auto;}

div.page-container-scroll 	{width: 100%; z-index: 20; padding: 0px; margin-top: 0px; height: 1500px; position: absolute;}
div.page-container-noscroll {width: 100%; z-index: 20; padding: 0px; margin-top: 0px; height: 500px;}
div.content-container 		{background-color: darkSlateGrey; width: 85%; margin-top: 100px; padding: 20px; border: 1px solid white;}
/*div.content-container 	{background-color: #000000; width: 70%; margin: 10px; padding: 20px; border: 1px solid white;} old version 20/8/22*/
div.gallery-container	{background-color: darkSlateGrey; width: 80%; margin: 15px; padding: 15px; border: 0px solid white; font-size: x-small;}
div.search-container 	{background-color: #FFFFFF; width: auto; font-size: 10px; color: #000000; border: 1px #000000;}
div.print-container 	{background-color: darkSlateGrey; width: auto; font-size: 10px; color: #000000; border: 1px #000000; height: 1500px;}
div.print-container-noscroll 	{background-color: #FFFFFF; width: auto; font-size: 10px; color: #000000; border: 1px #000000;}
div.slideshow	 		{background-color: #000000; position: fixed; bottom: 35px; right: 30px; border: 1px #000000; margin: 10px; padding: 10px;}
div.locnmap				{background-color: #646464; position: fixed; top: 80px; left: 30px; margin: 10px; padding: 10px;}
div.notification		{background-color: #646464; position: fixed; top: 100px; left: 30px; margin: 10px auto 10px, 0;}
div.login				{position: fixed; top: 200px; left: 30px; margin: 10px; padding: 10px;}

/*	Tables	*/
table.print-container	{background-color: #404040;border: 0px solid white; margin: 15px; padding: 10px;}	
table.container 		{border: 1px solid white; margin: 15px; padding: 10px;}
table.galleries			{background-color: darkSlateGrey; font-size: x-small;  border-collapse: separate; border-spacing: 10px; margin: 0px; padding: 0px;}
table.DBmanage			{border: 1px solid white; padding: 15px;}
table.image-nos  		{margin: 10px; padding: 10px; color: #ffffff; width: 80px;}
td.image 				{border: 1px solid white; padding: 5px;}
td.gallery				{margin: 5px; padding: 5px; width: auto;}
td.slideshow 			{margin: 10px; padding: 10px;}

/*	Text */	
.text-center			{text-align: center;}
.text-justify			{text-align: justify;}
.text-italic 			{font-family: palatino; font-style: italic; font-size: 16px;} 
.text-medium 			{font-size: 14px; padding-top: 0px; padding-bottom: 0px;}		
.text-small  			{font-size: 12px; padding-top: 0px; padding-bottom: 0px;}	
.text-xsmall 			{font-size: 10px; padding-top: 0px; padding-bottom: 0px;}	
.title-text  			{font-size: 11px; padding-top: 0px; padding-bottom: 0px;}						
.text-light  			{font-size: 12px; color:#666666;}
.copyright-text 		{font-size: 10px; color:#FFFF00; padding-top: 0px; padding-bottom: 0px;}
.alert-msg 	 			{font-size: 12px; color: #FFFF33; font-weight: normal;} 
.error-msg	 			{font-size: 12px; color: #FF0000; font-weight: bold; }	
.notify-msg  			{font-size: 12px; color: #FFCC33; font-weight: normal;}	
.notify1-msg 			{font-size: 12px; color: #66FFFF; font-weight: normal;}	
.notify2-msg 			{font-size: 12px; color: #000000; font-weight: normal;}	
.success-msg 			{font-size: 12px; color: #FF99FF; font-weight: normal;}	
.success1-msg 			{font-size: 12px; color: #990000; font-weight: normal;}	

/* Forms	*/
.forms-label 			{font-size: 12px; padding-bottom: 15px;} /* sets text to middle */
.forms-text 			{background-color: #CCFFFF; font-size: 15px; margin: 5px; padding: 3px; border: 1px #000000;}
.forms-buttons 			{background-color: #FFFFCC; font-size: 12px; margin: 5px; padding: 5px; border: 2px, #000000;}
input.imageNo 			{background-color: #CCFFFF; margin: 5px; padding: 5px; border: 0px;}
	
/* Heading elements	*/
H1 						{color: #ffffff; margin: 0; padding-top: 0px; padding-bottom: 0px; font-style: normal; font-weight: normal; font-size: 18px; line-height: normal;}	
H2 						{color: #ffffff; margin: 0; padding-top: 5px; padding-bottom: 5px; font-style: normal; font-weight: bold; font-size: 14px;  line-height: normal;}	
H3 						{color: #ffffff; margin: 0; padding-top: 0px; padding-bottom: 0px; font-style: normal; font-weight: bold; font-size: 12px;  line-height: normal;}
H3.underline			{color: #ffffff; margin: 0; padding-top: 0px; padding-bottom: 0px; text-decoration: underline; font-style: normal; font-weight: bold; font-size: 12px;  line-height: normal;}
H4 						{color: #ffff99; margin: 0; padding-top: 0px; padding-bottom: 0px; font-style: normal; font-weight: bold; font-size: 10px; line-height: normal;}	
H1, H2, H3, H4 			{clear: both;}			

/*	Image settings	*/
img.slideshow-landscape	{width: 300px; height: auto; margin: 10px 15px 10px 10px; padding: 5px; border: 1px solid white;}
img.slideshow-portrait	{width: auto; height: 300px; margin: 10px 15px 10px 10px; padding: 5px; border: 1px solid white;}
img.slideshow-02 		{width: 250px; height: auto; padding: 5px; border: 1px solid white;}	
.gallery-x 				{width: 150px; height: auto; padding: 5px; border: 1px solid white;}
.gallery-y 				{width: auto; height: 150px; padding: 5px; border: 1px solid white;}
img.gallery-x 			{width: 150px; height: auto; padding: 5px; border: 1px solid white;}
img.gallery-y 			{width: auto; height: 150px; padding: 5px; border: 1px solid white;}
img.micro-x 			{width: 100px; height: auto; padding: 3px; border: 1px solid white; margin-top: 10px}
img.micro-y 			{width: auto; height: 100px; padding: 3px; border: 1px solid white; margin-top: 10px}
img.bar-line 			{width: 1200px;}	/* underline highlight line  */ 
img.go-back				{width: 20px;}
img.product-x 			{width: 300px; height: auto; padding: 5px; border: 1px solid white;}
img.product-y 			{width: auto; height: 200px; padding: 5px; border: 1px solid white;}	
img.menubar 			{width: 100%; height: 1px;}			
img.logo-micro 			{width: auto; height: 25px; padding: 0px,0px,10px,0px; border: 0px;}

/* Zoom image settings */
img.zoom-x 				{width: 400px; height: auto; padding: 5px; border: 1px solid white;}	
img.zoom-y 				{width: auto; height: 400px; padding: 5px; border: 1px solid white;}	
.thumbnail img			{margin: 0 5px 5px 0; /*	border: 1px solid black; */}
.thumbnail:hover		{background-color: transparent;}
.thumbnail:hover img	{/*	border: 1px solid white; */}
/* Enlarged image. Positioning is 'fixed' to retain enlarged image in screen viewport while gallery scrolls */
.thumbnail span			{position: fixed; padding: 5px; left: -800px; /* screen viewport */ visibility: invisible; text-decoration: none;}

/* Enlarged image (landscape) - set image width or height*/
.thumbnail span img.zoom-x{border: 1px solid white; width: 500px; height: auto; padding: 10px;}
/* Enlarged image (portrait)- set image width or height*/
.thumbnail span img.zoom-y{border: 1px solid white; width: auto; height: 375px; padding: 10px;}
/* Enlarged image - position where enlarged image should offset horizontally, left screen viewport - best for portable devices*/
.thumbnail:hover span	{visibility: visible; background-color: #000000; font-size: small; color: #99ff99; top: 50px; left: 750px; z-index: 25;} 

/* Lease calculation */
.lease-box				{background-color: #FFFFCC; width: 400px; font-size: 12px; color: #000000; border: 20px #FFFFCC; padding: 20px;}
.lease-inner 			{border: 0px; padding-top: 10px; margin: 10px;}
.lease-element 			{border-spacing: 10px; border: 0px solid grey; padding-left: 30px; padding-top: 10px; margin-left: 10px; width: 450px;}

/* Popup settings  */
.popup	 				{background-color: #646464; z-index: 0; position: fixed; bottom: 30px; left: 30px; border: 1px solid white; margin: 10px; padding: 10px; display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none;  -ms-user-select: none; user-select: none;}
/*.popup				{background-color: #646464; z-index: 0; position: fixed; bottom: 45px; left: 1%; border: 1px solid white; margin: 10px; padding: 10px; display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none;  -ms-user-select: none; user-select: none;} */
.popup-notify			{font-size: 12px; color: #99FFFF; padding-top: 0px; padding-bottom: 0px;}
.popup .popuptext 		{visibility: hidden; width: 275px; background-color: #555; color: #FFFFFF; text-align: left; border-radius: 6px; padding: 8px 10px; position: absolute; bottom: 125%; left: 50%; margin-left: -80px;}
/* Popup arrow */
.popup .popuptext::after {content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent;}
/* Toggle this class - hide and show the popup */
.popup .show 			{visibility: visible; -webkit-animation: fadeIn 1s; animation: fadeIn 1s;}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}
@keyframes fadeIn 		{from {opacity: 0;} to {opacity:1 ;}}