/* ---------------------------------------------
				Body TEXT Attributes 
--------------------------------------------- */

body { font-size: 1em; text-indent: 2em; } /* if user uses zoom feature of the browser to change the text size to 18 pixels, the indent would change to 36 pixels to reflect the larger type size: */
body { background-color: #87ceeb;}
h1  {font-family: 'Playfair Display SC', serif; font-style: italic; font-size: 30px;}
h2  {font-family: 'Playfair Display SC', serif; font-style: italic; font-size: 20px;}
p {font-family: 'Merriweather Sans', sans-serif; font-size: 18px;}



body { Overflow-x:scroll;}   /* //add horizontal bar option in html */
body {Overflow-y:scroll;} /* //add vertical bar option in html */

/* ---------------------------------------------------------------------------------------------------------------------
															LOGO
--------------------------------------------------------------------------------------------------------------------- */

.firstchild { top: 0;left: 0;}
.childClass {position: absolute; opacity: 0.6; height: 20px; width: 200px; }


/* ---------------------------------------------------------------------------------------------------------------------
															Top navigation bar
--------------------------------------------------------------------------------------------------------------------- */

#homemenu  {
					/* Top blue box */
	background: #0F4D92;
					/*--SIZE AND SHAPE-*/
	height: 30px;
					/* 	first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner) */
	border-radius: 50px 50px 0px 0px ;
					/* padding for the inner spacing, and margin for the outer one. */
	padding-right: 18px;
	padding-top: 10px;
	padding-bottom: 10px;
					/*- OUTER SPACING-*/
					/* ELIMINATE THE GAP INBETWEEN THE HEADERS */
	margin-top: -1rem;	

/* -------------------------------------------------------------------------------THIS IS FOR THE MOBILE SITE -------*/
				/* make the position fixed so as to hide in the future */
				/* hiddes unused elements	 */
	overflow: hidden;
	position: right;
	left: 0px;
	top: 0px;
	display: flex;
/* 	Makes all the lists elements inside this container flex  */
    flex-wrap: nowrap;
}
					

/*------------------------------------------------------------------------------LIST POSITIONS--TOP MENU-------- */
#homemenu li {
	margin: 0 auto;
	padding: 0;
					/* REMOVE BULLETS */
	list-style: none	
}

#homemenu li {
	float: right;
	display: block;
	position: relative;
	overflow-wrap: break-word;
	text-align: center;
/* 
	margin-right: 60px;
	position: sticky;
 */

}
/* ------------------------------------------------------------------------Link style  */
#homemenu a {
					/* LETTERING SPACING AND COLOR */
	display: block;
	padding: 0 40px;
	color: #57eaea;
					/* LETTER FONTS AND STYLES */
	font-family: 'Playfair Display SC', serif;
	font-style: italic;
	font-size: 25px;
	
	text-decoration: none;
	text-shadow: 23px -7px 4px rgba(0,0,0,0.79);	
	position: center;	

}

#homemenu li a:hover {
	color: #0d2245;
	text-shadow: 1px 1px #FF0000;
	text-shadow: 1px -1px 1px rgba(0,0,0,0.79);
	padding-top: 5px;
}

/* ---------------------------------------------------------------------------------------------------------------------
													Second Top navigation bar
--------------------------------------------------------------------------------------------------------------------- */
#menu {

	background: #0F4D92;
	margin-top: -1.5rem;
	height: 20px;
	padding-left: 0px;
	padding-bottom: 20px;
	padding-right:0px;
	border-radius: 0px 0px 50px 50px;
/* -------------------------------------------------------------------THIS IS FOR THE MOBILE SITE -------*/
	position: left;	
	text-shadow: 23px -7px 4px rgba(0,0,0,0.79);
/* ------------------------------------	Makes all the lists elements inside this container flex  */
	display: flex;
    align-items: stretch;
	
}

#menu li {
	margin: 0 auto; /* auto - the browser calculates the margin */
	padding: auto;
	list-style: none	
}
#menu ul {
/* 	width:100%; */
}
#menu li {
	float: left;
	display: block;
	position: relative;
	text-align: center;
	padding: 2px;
	width: 100%;

}
				
#menu a {
/* -----------------------------------------------------------LETTERING SPACING AND COLOR */
	display: block;
	padding: 0 12 0 0px;
	color: #57eaea;
/* ----------------------------------------------------------LETTER FONTS AND STYLES */
	font-family: 'Playfair Display SC', serif;
	font-style: italic;
	font-size: 25px;
	text-decoration: none;
	}
	
/* #hide menu{transition: max-height .5s ease-out;}*/

/* ------------------------------------PUSHING TEXT UNDERWATER EFFECT */
#menu li a:hover {
	color: #0d2245;
	text-shadow: 1px 1px #FF0000;
	text-shadow: 1px -1px 1px rgba(0,0,0,0.79);
	padding-top: 5px;
}

/* 
.blogpost-main{
	width: 100%;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-top: 0px;
	float: left;   
	position: inline; 
	background-color: #f6f0e3;
	margin: 10px;
 */

/* -------------------------------------------------------------------------------------------------------------------
								Category pages layout and styles Oahu for all islands
--------------------------------------------------------------------------------- ----------------------------------*/

#introduction {
	margin: 0px;
	padding-left: 20px;
}

#introduction h1 {
	text-align: center;
}
#menu_category {
	margin-left: 100px;;
}

/* ------------------------------------CLASSES CAN BE REUSED UNLIKE ID'S */
.blogpost{
	width: 80%;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-top: 0px;
	float: left;   
	position: inline; 
	background-color: #f6f0e3;
	margin: 10px;
	
}
.blogimg {
	float: right;
	margin-top: 20px;
}
.blogpost h2 {
	padding-top: 0px;
	margin: 0px;
}

/* ------------------------------------------------------ CARD PUSH EFFECT------------------ */
.blogpost{
  box-shadow: 0 20px 10px 0 rgba(0,0,0,0.4);
  transition: 1.5s;
}

.blogpost:hover {
  box-shadow: 0 4px 16px 0 rgba(0,0,0,0.1);
  background-color: #f6f0e3;
}

/* ---------------------------------------------------------------------------------------------------------------------
											Category pages ASIDE
--------------------------------------------------------------------------------------------------------------------- */

.aside-ad-one{
  /*text-wrap;*/
  line-height:1;
  padding-top: 0px;
  margin-top: 20px;
 


}

/* -----------------------------------------------------------------------------------------------------
											floating flower Sign-up in css    
---------------------------------------------------------------------------------------------------------------------------- */
#flower {
	background: 
    repeating-conic-gradient(
      #cf7fb7 0 calc(360deg/16), 
      #a00071 0 calc(360deg/8));
      
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: sticky;
  top: 20rem;
  padding: 20px;
  float: right;
  box-shadow: 0 20px 10px 0 rgba(0,0,0,0.8);
  transition: 1.5s;
}
#flower:hover {
  box-shadow: 0 4px 16px 0 rgba(0,0,0,0.1);
  background-color: #f6f0e3;
  }

#signup {
	background: 
	repeating-conic-gradient(); 
	width: 100px;
  	height: 100px;
  	border-radius: 50%;
  	position: sticky;
  	top: 0rem;
  	padding: 20px;
  	float: right;
  		font-size:2rem;
  	box-shadow: 0 20px 10px 0 rgba(0,0,0,0.8);
  	transition: 1.5s;
  	display: flex;
  	align-items:center;
  	justify-content:center;
}

#signup:hover {
  box-shadow: 0 4px 16px 0 rgba(0,0,0,0.1);
  background-color: #f6f0e3;
}


/* ------------------------------------------------------------------------------------------------------------------------------------
				          Paid content pages layout and styles Oahu ext..
------------------------------------------------------------------------------------------------------------------------------------ */



/* -------------------------------------------------------------------------------------------------------
										DROP UP FOOTER WITH INDEX
------------------------------------------------------------------------------------------------------- */

/* -------------------TOPSIDE FOOTER main box */
#footer-cat{
   position:fixed;
   left:0;
   bottom:0;
   height:60px;
   width:100%;
   background:#d77b63;
   z-index:1000;
   padding-left:41px;
   box-shadow: 10px 10px 10px 20px rgba(0,0,0,0.3);
   transition: 1.5s;
   padding-right: 5px;
/*    -------------------------------Makes the index links fill the div rather thatn on list */
   position: inline; 
   display: flex;
   
}

#footer-cat:hover {
   height: 200px;
   box-shadow: 20px 20px 20px 40px rgba(0,0,0,1);
}

/* ----------------------------Nav links style in the footer */
#footer-cat #footer-cat-TOC {
	margin: -1rem;
}

#footer-cat #footer-cat-TOC li {
/* 	-------------------------------------------------makes the list spread out */
	float: left;
    width: 25%;
	list-style: none;
	/* border: 1px solid black;  */

}

#footer-cat footer-cat-TOC  footer-cat-TOC-ul {
	width: 100%;
}

/* --------------------------spacing make the section layout responsive css for the footer */

#footer-content {
	margin: 0px;
	padding: 0px;
	width:10%;
	margin-left: -4rem;

}

#footer-text {
	width:15%;
	padding-right: 40px;
	padding-left: 20px;
}

#footer-nav {
	width:80%;
	margin: -2rem;
	
}

/* -------------------------------------------------------------------------------------------------------
										Layered BOTTOM BACK FOOTER 
------------------------------------------------------------------------------------------------------- */


/* ------------------Main back footer box */
#footer-back{
	display: inline-block;
	position:float;
	left:0;
	padding-left:21px;
	height: 200px;
	width: 75%;
	margin-top: -35px;
	position: inline; 
    display: flex;
    padding-right: 20px;
}
/* ----------------LEFT SIDE with top of page index link and h1 text */
#footer-back-link{
	left: 0;
	top: 0;
	width:10%;
	padding: 0px;
	margin-top: -34px;
	margin-left: -3rem;
}

#footer-back-link h1{
	margin-left: 2rem;
}

/* --------------------------MIDDLE-EMPTY */
#footer-back-content{
	left: 0;
	top: 0;
	width:10%;
/* 	display: inline; */
	padding-left: 3px;
	margin-top: -35px;
}


/* -------------------RIGHT SIDE Back footer navigation box (the div to the right) */
#footer-back-nav{
	padding-left:0px;
	width:80%;
	padding-top: -1rem;
	right: 0;

} 
#footer-bottom-ul {
	position: inline; 
    display: flex;
    list-style: none;
}

/* ---------------------------------------------------------------------------------------------------------------------
										INPUT FORM AREA
--------------------------------------------------------------------------------------------------------------------- */

label {
    display: block;
    font: .9rem;

}



/* ---------------------------------------------------------------------------------------------------------------------
										TABLE AREA
--------------------------------------------------------------------------------------------------------------------- */



caption {
	color: black;

}
thead {
  background-color: #F80F17;
}
#table {
	display: block;
	margin: 2em auto;
	margin-left: 40px;
	width: 100%;
	max-width: 600px;
}

/* "width: 24%;" border="17" cellpadding="1" */
table {
    border-collapse: collapse;
    border-spacing: 0;
    background-color: #4A4A4A;
    color: #E6E6E6;

   
}
table {
	margin-left: auto;
	margin-right: 350px;
}
td,th {
	border-width: 1px;
	border: 2px solid black;
	padding: 2px;
	margin: 5px;
	/* text-align: left; */
	
}

.parent {
  border: 0px solid black;
  margin: 1rem;
  padding: 2rem 2rem;
  text-align: center;

}
.child {
  display: inline-block;
  border: 5px solid black;
  padding: 2rem 2rem;
   margin: 2rem;
  vertical-align: middle;
}

/* ------------------------------EXAMPLE GRID css property */
/* 
.parent{ 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-gap: 20px; 
    border: 1px solid black; 
    width: 50%; 
} 
.child { 
    margin: 10px; 
    border: 1px solid red; 
}
 */

/* ------------------------------EXAMPLE FLOAT css property */

/* 
.parent {
    width: 100%;
}

.child {
    float: left; 
    width: 50%; 
    
}  
 */



/* ------------------------------EXAMPLE Flex css property */
/* 
.parent {
    display: flex;
}

.child {
    flex: 1;
    border: 2px solid yellow;
}  

.child:first-child {
    margin-right: 20px;
} 
 */


/* ------------------------------EXAMPLE inline-block css property */

/* 
.parent {
  border: 1px solid black;
  margin: 1rem;
  padding: 2rem 2rem;
  text-align: center;

}
.child {
  display: inline-block;
  border: 1px solid red;
  padding: 1rem 1rem;
  vertical-align: middle;
}
 */

 
/*      REFERENCES AND RESOURSES FOR THE CODE

-----------NAVIGATION BAR-------------

padding gap issues 
https://ishadeed.com/article/spacing-in-css/#css-grid-gap

NAV LINKS
https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_basic_html

BORDER RADIUS
https://www.w3schools.com/cssref/css3_pr_border-radius.asp

NAVIGATION WITH HOVER
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_topnav

NAV LIST. list-style none - Eliminate bullets lists
https://www.w3schools.com/cssref/pr_list-style.asp



-------POSITIONING-------
auto - the browser calculates the margin
https://www.w3schools.com/css/css_margin.asp

padding INNER SPACING
https://www.w3schools.com/css/css_padding.asp

position :relative - The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of
and sticky The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block
POSITION : RELATIVE STATIC ABSOLUTE STICKY
https://developer.mozilla.org/en-US/docs/Web/CSS/position

FLoat, to move around the next when switching browser sizing, FLEX to flex the elements inside.  Grid 
https://coder-coder.com/display-divs-side-by-side/#flexbox-method



-------TEXT AND FONT--------------
font style
https://www.w3schools.com/cssref/pr_font_font-style.asp

web safe fonts
https://websitesetup.org/web-safe-fonts-html-css/

Line spacing
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

GOOGLE FONTS
https://www.w3schools.com/css/css_font_google.asp

text shadow
https://www.w3schools.com/cssref/css3_pr_text-shadow.asp

opacity: https://www.w3schools.com/cssref/css3_pr_opacity.asp

TEXT BOX MAX AND MIN width: 
https://www.w3schools.com/cssref/pr_dim_max-width.asp

Float Img to the Right around and aside text
https://www.w3schools.com/css/css_float.asp

TEXT LAYOUT
https://www.w3schools.com/css/css_align.asp


;
-----------MISC-------------------
 line-height:
 https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
 
 nav bar styling 
https://www.dottedsquirrel.com/simple-menu-navigation-bar-styling/

CARD BOX SHADOW
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_cards
 
  --------------DISPLAY PROPERTY---------
  https://developer.mozilla.org/en-US/docs/Web/CSS/display
  
  CONTENT
  https://bitsofco.de/how-display-contents-works/
  https://codeburst.io/display-contents-8c9226bd4602
  
   --------------IMG ---------------------
 fit
 https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
 
 drop shadow
 https://css-irl.info/drop-shadow-the-underrated-css-filter/
 
 float to the right of text
 https://www.w3schools.com/css/css_float.asp
 
 Elements next to a floating element will flow around it. To avoid this, use the clear property or 
 https://www.w3schools.com/cssref/pr_class_clear.asp
 
 ----------------object-----------------------
 https://www.w3schools.com/html/html_object.asp
 
 https://www.w3schools.com/tags/att_object_height.asp
 
 
 
  -------------TIME AND DATE--------------
 https://blog.duda.co/8-cool-html-tags-you-didn-t-know-existed


 
  --------------DISPLAY PROPERTY---------
  
  
  --------------DROP LIST-------------------
  
  https://code.tutsplus.com/articles/10-rare-html-tags-you-really-should-know--net-3908


-----------------------GRADIENRTS FOR background: ----------

https://www.geeksforgeeks.org/css-repeating-linear-gradient-function/

https://www.includehelp.com/code-snippets/repeating-linear-gradient-function-with-example-in-css.aspx

https://www.geeksforgeeks.org/css-repeating-linear-gradient-function/


https://css-tricks.com/why-do-we-have-repeating-linear-gradient-anyway/


BACKGROUND color: https://www.freecodecamp.org/news/html-background-color-tutorial-how-to-change-a-div-background-color-explained-with-code-examples/
;

----------------DROP UP FOOTER------------------
ZINDEX
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/


SCROLL to top: 
https://www.w3schools.com/howto/howto_js_scroll_to_top.asp

-------------------CSS SYNTAX-------------------
CSS child of id selector
https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator

CSS and HTML Naming convention
https://en.bem.info/methodology/naming-convention/

nested selectors
https://tutorial.techaltum.com/cssselectors.html
https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator


-----------water push effect------------------

https://www.w3schools.com/howto/howto_css_zoom_hover.asp



------------tables--------------------
https://www.w3schools.com/css/css_table.asp


--------------Page Scroll-----------------
https://www.educba.com/scrollbar-in-html-table/

------------------Conic and linear gradients-------------
https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/repeating-conic-gradient

-----------------FLEXBOX----------------------
https://www.w3schools.com/css/css3_flexbox.asp


 */