/*
raysnav_2018.css
Used in: W:\rj-files\20-Web\hostgator\.OfficeBackside\infrastructure\site_header_menu_bar.php
formaly: new_menu_bar.php

width: max-width: better for small screens.
*/

body {font-family: Roboto, Verdana, Arial, sans-serif; font-size: 16px; font-weight: 500; color: #555; margin: 0; padding: 0; }

#page { margin: 0 auto; position: relative; } /*xxmax-width: 1200px;*/

a.btn1 {text-decoration: none; text-align: center;
    display: block; xxwidth: 330px; height: 25px; text-align: center;
    font-size: 1em; font-weight: bold; color: #fff;
    margin: 1em 0em 0em 0em; padding: .4em 0em 1.6em 0em;
    border: 1px solid #fff; border-radius: 15px;
    background-color: #663300; transition : background-color .5s;
}
a.btn1:hover { background-color: rgba(0,0,0,.8); }

a.btn2 {text-decoration: none;
    display: block; width: 210px; height: 25px; text-align: center;
    font-size: .9em; font-weight: bold; color: #fff;
    margin: 10px 0 0 40px; padding: 3px 15px;
    border: 1px solid #fff;
    background-color: rgba(200,200,0,.4); transition: background-color .5s
}
a.btn2:hover { background-color: rgba(0,0,0,.8); }

 header { height: 430px; background: url(https://www.rayjardine.com/images/of-menu-bar/2015-09-06-17-50-54-1200a.jpg) no-repeat center bottom; position: relative; }
/* header { height: 430px; background: url(adventures/2015-09_GDRx2-FW/2015-09-06-17-50-54-1200bb.jpg) no-repeat center bottom; position: relative; } */


header a.logo {
    z-index: 1;
    position: absolute;
    display: block; width: 80px; height: 80px;
    top: 5px; left: 10px;
    /* border: 1px solid #fff; */
    background: url(images/R-W_logo-04.svg) no-repeat 0 0; background-size: contain;
    /* background-color: rgba(0,0,0,.65); */
    }

header div.hero {
/* Used in only one place: site_header_menu_bar.php */
/* <header> <div class="hero"> */
	position: absolute;
	width: 415px; height: 100px;
	top: 120px; left: 3%;
	padding: 10px;
	background-color: rgba(100,10,0,.3);
}
header div.hero h1 { font-size: 2.8em; text-align: center; line-height: 1em; margin: 0 0 20px 0; color: #fff; }
header div.hero h2 { font-size: 1.2em; text-align: center; line-height: 1em; margin: 0 0 20px 0; color: #fff; }

section { padding: 0 30px; }
section::after { content: ''; display: block; clear: both; }


section.main {  margin-top: 20px; margin-bottom: 30px; padding: 0; }
section.main aside { width: 30%; float: left; text-align: center; }
section.main .content { margin: 15px; background: no-repeat center top; background-size: 75px 75px; padding-top: 85px;}

section.main aside h3 a { color: #000; text-decoration: none; }
section.main aside h3 a:hover { text-decoration: underline; }

section.main aside .content.Quilt_Kit { background-image: url(../images/icon_star.svg); }
section.main aside .content.Backpack_Kit { background-image: url(../images/icon_marker.svg); }
section.main aside .content.Tarp_Kit { background-image: url(../images/icon_gear.svg); }

section.atmosphere { background-color: #cc6633; padding-top: 30px; padding-bottom: 30px; color: #fff; }
section.atmosphere article { padding: 0 20px 0 515px; background: url(../images/photo_lounge.jpg) no-repeat 0 5px; min-height: 220px; }


div.RightSideProducts {
	position: fixed;
	top: 50px; right: 20px; 
	width: auto; height: auto;
	border-radius: 10px;
	background-color: rgba(10,10,0,.4);

   /*position:absolute;*/
   /*overflow:scroll;*/
   /*overflow-y: auto;*/
}

div.RightSideProducts p {font-size:.8em; width:275px; margin: 5px 0 0px 0;}
div.RightSideProducts ul {list-style: none; margin: 10px 10px 10px -30px; }
div.RightSideProducts ul li a {
	text-decoration: none;
	background: transparent;
	xxcolor:white;
}
div.RightSideProducts ul li a:link {color: white; } 
div.RightSideProducts ul li a:visited {color: blue; xxtext-decoration: none;}
div.RightSideProducts ul li a:hover {color: yellow; background-color: green;} /*#ffd34c*/
xxdiv.RightSideProducts ul li a:active { background-color: green; }
div.RightSideProducts ul li div.logo  {
	color: blue;
	display: block; width: 80px; height: 80px;
	margin: 0 0 -30px 0;
	background: url(/images/R-W_logo-04.svg) no-repeat 0 0; background-size: contain;
}



div.RightSideMenu {
	position: sticky;
	top: 30px; xxright: 20px; xxleft: 730px;
	width: 350px; /*auto*/
	height: 700px; overflow-y: auto; /* Set a height and add overflow property for vertical scroll (menu) */
	margin: 0px 0 0px 10px;
	border-radius: 10px;
	background-color: rgba(10,10,0,.4);
}
div.RightSideMenu p {font-size:.8em; width:275px; margin: 5px 0 0px 0;}
div.RightSideMenu ul {list-style: none; margin: 10px 10px 10px -30px; }
div.RightSideMenu ul li a {
	text-decoration: none;
	background: transparent;
	xxcolor:white;
}
div.RightSideMenu ul li a:link {color: white; } 
div.RightSideMenu ul li a:visited {color: blue; xxtext-decoration: none;}
div.RightSideMenu ul li a:hover {color: yellow; background-color: green;} /*#ffd34c*/
xxdiv.RightSideMenu ul li a:active { background-color: green; }
div.RightSideMenu ul li div.logo  {
	color: blue;
	display: block; width: 80px; height: 80px;
	margin: 0 0 -30px 0;
	background: url(/images/R-W_logo-04.svg) no-repeat 0 0; background-size: contain;
}



nav.topMenu {
	position: relative; /*absolute*/
	/* top: 10px; left: 10px; right: 10px; */
	padding: 12px 0 0 0;
	/* width: 100%; */
	background-color: rgba(10,10,0,.65);
}
nav.topMenu::after { content:''; display: block; clear: both; }

nav.topMenu ul { list-style: none; margin: 0; padding: 0; }
nav.topMenu ul li:hover { background-color: #2b0306; }
nav.topMenu ul li:hover > ul { display: block; }

nav.topMenu ul li a {
	font-size: 1em; 
	display: inline-block;
	color: #fff;
	padding: 5px 10px;
	text-decoration: none;
	width: 200px;
	position: relative;
}

nav.topMenu ul li a:link { color: #fff; }
nav.topMenu ul li a:visited { color: #fff; }
nav.topMenu ul li a:hover { background-color: #6d0911; }
/**/
nav.topMenu ul ul { position: absolute; top: 100%; background-color: #2b0306; display: none; }
nav.topMenu ul ul li { position: relative; }
nav.topMenu ul ul ul { left: 100%; top: 0; }

nav.topMenu > ul { padding-left: 100px; }
nav.topMenu > ul > li { float: left; }
nav.topMenu > ul > li > a { width: auto; padding: 10px 20px 15px 20px; }

nav.topMenu a[aria-haspopup="true"]::after {
    content: '';
    display: block; width: 0; height: 0;
    position: absolute;
    top: 16px; right: 15px;
    border-top: 4px solid transparent;
    border-bottom: solid transparent;
    border-left: 4px solid #fff;
}
nav.topMenu > ul > li > a[aria-haspopup ="true"]::after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #fff;
    left: 20px; right: auto;
    bottom: 6px; top: auto;
}



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

 header { height: 416px; background: url(https://www.rayjardine.com/images/of-menu-bar/2015-09-06-17-50-54-800bb.jpg) no-repeat center bottom; position: relative; }

    header a.logo {
        /* background: url(adventures/2015-09_GDRx2-FW/2015-09-06-17-50-54-1200a.jpg) no-repeat 0 0; background-size: contain; */
        /* background: url(images/R-W_Logo-02.svg) no-repeat 0 0; background-size: contain; */
    }

    header div.hero {
    width: auto; height: 80px;
    top: 155px; left: 3%;
    left: 3%;
    }
    header div.hero h1 { font-size: 2.4em; margin-bottom: 20px; }
    header div.hero h2 { font-size: 1.02em; margin-bottom: 20px; }

    a.btn1 { font-size: 1em; margin: 0em 0em 0em 0em; padding: .3em 0em 1.5em 0em; }
    a.btn2 { font-size: 1em; margin: 10px 0 0 50px; padding: 2px 10px; }

    section.atmosphere article { padding-left: 400px; background-size: 375px auto; }



nav.topMenu {
	padding: 18px 0px 0 0;
}


nav.topMenu ul li a {
	font-size: .9em;
	xxmargin: 0;
	xxpadding: 0px 0px;
	width: auto;

}


nav.topMenu > ul > li > a { padding: 10px 0px 15px 20px; }


 /*   nav { padding: 25px 0 0 0; } */
 /*   nav > ul { padding-left: 0; } */
 
 	div.RightSideMenu {
		display: none;
	}

}

/* ###########################################################################################*/
@media screen and (max-width: 600px ) {

 header { height: 334px; background: url(https://www.rayjardine.com/images/of-menu-bar/2015-09-06-17-50-54-600bb.jpg) no-repeat center bottom; position: relative; }


    header a.logo {
       /* width: 125px; */
    }

    header div.hero {
        width: auto: 300px; height: 65px;
        top: 120px; left: 3%;
        padding: 5px;
    }

    header div.hero h1 { font-size: 2.0em; margin-bottom: 1em;}
    header div.hero h2 { font-size: .9em; margin-bottom: 0; }

    a.btn1 { font-size: .9em; margin: 10px 0 0 0;  padding: .3em 0em .2em 0em; }
    a.btn2 { font-size: 1em; margin: -5px 0 0 50px; padding: 2px 10px; }

    section.atmosphere article { padding-left: 325px; background-size: 300px auto; }
    section.how-to blockquote p.quote { font-size: 1.1em; line-height: 1.2em; }
    section.how-to blockquote p.credit { font-size: .85em; }


	div.RightSideProducts {
		display: none;
	}


    nav.topMenu {
        /* position: static; width: auto; */
        padding: 30px 0; 
        background-color: #4b0a0c;
        height: 0; overflow: hidden
    }
    
    nav.topMenu ul,
    nav.topMenu ul ul,
    nav.topMenu ul ul ul { display: block; position: static; }
    nav.topMenu > ul { padding: 0;}
    nav.topMenu > ul > li { float: none; margin-top: 25px; }
    nav.topMenu ul li:hover { background: none; }
    nav.topMenu ul li a {
        width: auto;
        display: block;
        margin: 8px 10px;
        padding: 6px 15px 6px 2px;
        border-bottom:  1px solid rgba(255,255,255,.25);
    }
    nav.topMenu ul li a:hover { background-color: rgba(255,255,255,.2); }
    nav.topMenu ul ul { background: none; }
    nav.topMenu ul ul li a { margin-left: 30px; }
    nav.topMenu ul ul ul li a { margin-left: 60px; }
    nav.topMenu a[aria-haspopup="true"]::after { display: none; }

	
	xxnav.topMenu a {display: none;} /* hide all menu items at top of page*/
	
	nav.topMenu a.icon { /* hamburger icon before clicking */
   	display: block;
   	position: absolute;
   	xxfloat: right;
   	xxmargin-top: -15px;
		right: 15px; top: 15px;
	}

	nav.topMenu div.threeBars { /* temp */
		display: block;
      position: relative;
		width: 30px; height: 5px; /*each bar*/
      margin: 5px 0; /*the top and bottom margin creates space between each bar. */
		background-color: red; /*red background-color*/
}     


	/* The "responsive" class is added to the topMenu with JavaScript when the user clicks on the icon. displays the links vertically instead of horizontally */
	nav.topMenu.responsive {  /* whole thing */
		position: relative;
      height: auto;
		padding-top: 30px; 
		background-color: #4b0a0c;
    }
	
	nav.topMenu.responsive a.icon { /* hamburger icon after clicking */
   	position: absolute;
		top: 10px;
		right: 15px;
	}
  
   /* menu items that clicking the icon shows */
	nav.topMenu.responsive ul,
	nav.topMenu.responsive ul ul,
	nav.topMenu.responsive ul ul ul { display: block; position: static; }
	nav.topMenu.responsive > ul { padding: 0;}
	nav.topMenu.responsive > ul > li { float: none; margin-top: 25px; }
	nav.topMenu.responsive ul li:hover { background: none; }
	nav.topMenu.responsive ul li a {
		position: relative;
		display: block;
		width: auto;
		padding: 0px 5px 0px 0px;
		border-bottom: 1px solid rgba(255,255,255,.25);
	}
    nav.topMenu.responsive ul li a:hover { background-color: rgba(255,255,255,.2); }
    nav.topMenu.responsive ul ul { background: none; }
    nav.topMenu.responsive ul ul li a { margin-left: 30px; }
    nav.topMenu.responsive ul ul ul li a { margin-left: 60px; }
    nav.topMenu.responsive a[aria-haspopup="true"]::after { display: none; }
  
}

/* ###########################################################################################*/
@media screen and (max-width: 450px ) { /* my LG-G4 somwhere 358-360px */

  header { height: 231px; background: url("https://www.rayjardine.com/images/of-menu-bar/2015-09-06-17-50-54-450b.jpg") left top; }

  header div.hero {
	width: auto; height: 50px;
	top: 70px; left: 3%;
	padding: 5px;
  }
  header div.hero h1 { font-size: 1.6em; line-height: 1em; margin: 0 0 0 0; }
  header div.hero h2 { font-size: .9em; line-height: 1em; margin: 0 0 0 0; }

  a.btn1 { font-size: .9em; 1.5em; margin: 0em 0em 0em 0em; padding:.3em 1em 1.5em 1em;}
  a.btn2 { font-size: 1em; xxline-height: 1.4em; margin: -7px 0px 0px 0px;  padding: 0em 0em 1em 0em;}

}