/* JBailey styles
    author: Geoff Ebbs - Ebono Institute May 2017 */

/* Second level menu adapted from http://www.cssscript.com/create-a-multi-level-drop-down-menu-with-pure-css/ */


/* margin and border elimination */

* { margin: 0;
    border: 0;
    -webkit-padding-start: 0;
    padding-left: 0;
}


/* Styles for mobile ... */
header {
    position: static;
}
header h1 {
    font-size: 16px;
    }
#content {
    position: static  ;
    width: 100%;
}
nav {
    position: static;
    width: 100%;
    top: 10%;
}

nav li {
    display: block;
    width: 66%;
    margin: 0 auto 0 auto;
} 
.image {
    max-width: 300px;
}
.image img {
    max-width: 300px;
}
#content img {
    max-width: 300px;
}
/* END - mobile */


/* Styles for tablet ... */
@media screen and (min-width: 600px) {
    header {
        position: fixed;
        z-index: 1;
    }
    header h1 {
        font-size: 24px;
    }
    #content {
        position:   absolute;
        width: 100%;
        top: 20%;
        left: 0px;
    }
    .image {
        max-width: 500px;
    }
    .image img {
        max-width: 500px;
    }
    #content img {
        max-width: 500px;
    }
    /* use fixed position to keep nav bar covering whole panel */
    nav {
        position: fixed;
        width: 100%;
        height: 10%;
        top: 10%;
        z-index: 1; /* keep it on top of content */
    }
    nav li {
        display: inline; /* for tablets display at the top of the screen in a line */
        position: relative;
        margin: 5px;
    }
    /* Second level menu drops down */
    li:hover > ul li {
        display: block;
        z-index: 2;
    }
/* position second level menu */
    ul ul {
      left: 50%;
      top: 25px;
    }

    
} /* END - tablet */


/* Styles for large screen ... */
@media screen and (min-width: 1024px) {
    header {
        position: fixed;
    }
    header h1 {
        font-size: 24px;
    }
    nav {
        position: fixed;
        top: 10%;
        width: 20%;
        height: 80%;
    }
    /* display nav menu down the nav bar */
    nav li {
        display: block;
        width: 85%;
        margin: 2px auto 2px auto;
    }   
    nav ul li ul li {
        margin: 0px auto 0px auto;
    }   
    #content {
        position: absolute;
        top: 10%;
        width: 80%;
        height: 80%;
        left: 20%;
    }
    .image {
    max-width: 600px;
    }
    .image img {
        max-width: 600px;
    }
    #content img {
        float: left;
        margin
        max-width: 600px;
    }
} /* END - large screen */
header {
    height:10%;
    top: 0px;
    left: auto;
    background-color: #497a42;
    width : 100%;
}
header h1 {
    color: white;
    text-align: center;
    }
nav {
        background-color: #a28c1d;
    }
nav ul {
        padding-top: 1%; /* Move buttons down without influencing nav size and impact on footer etc */
    }
/* create button style menu options */
nav li {
    }
nav a {
	font-family  : verdana, arial, helvetica, san-serif ;
    color: #f0f0ff;
    font-weight: 800;
    text-decoration: none;
    font-size: 20 pt;
    margin: 0px 10px 0px 10px;
    border-radius: 5px;
    padding: 5px;
    background-color: #938eac;
    background-image: -webkit-linear-gradient(top, #938eac, #b8b2d7);
}
/* Reverse the button while selecting */
nav a:hover {
    background-image: -webkit-linear-gradient(top, #b8b2d7, #938eac);
    color: white;
/*    vertical-align: 10%; */
}
/* separate the second level menu */ 
nav li ul {display: none;}
li:hover > ul {
  display: block;
  position: absolute;
}
/* GO gold on the second level menu */ 
li ul li {
        background-color: #f9d52f;
        background-image: -webkit-linear-gradient(top, #f9d52f, #a28c1d);
        width: 180px;
//        margin: 2px 10px 2px 10px;
}
li ul li:hover {
        background-image: -webkit-linear-gradient(top, #a28c1d, #f9d52f);
}


#content {
/*    background-color: #b8b2d7; */
    background-color: #ffffff;
    padding: 5px;
}
#content p {
    color:#000033;
}
#content img {
    float:left;
    margin: 10px;
}
footer {
    position: fixed;
    bottom: 0px;
    left: 0px;
    background-color: #ad1e23;
    width : 100%;
    height: 10%;
}
footer p {
    color: white;
    text-align: center;
}
footer a {
    color: #ddddff;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
}
footer a:hover {
    color: #bbbbff;
    text-align: center;
    text-decoration: underline;
}

section.hidden img {display:none} // Hide images for use by javascript

input, textarea {
    border: 1px;
    background-color: #f0e8ff;
}
h1   {
	font-family : verdana, arial, helvetica, sans-serif ;
	font-size : 16pt ;	
	font-weight : bold;
	color : #c42a44 ;
	text-align : center;	
}
h2   {
	font-family : verdana, arial, helvetica, sans-serif ;
	font-size : 13pt ;	
	font-weight : bold;
	color : #c42a44 ;
	text-align : left;
    margin: 6px 0 6px 15px;
}
p  {
	font-family  : verdana, arial, helvetica, sans-serif ;
	font-size : 11pt;
	text-indent : 30px;
	margin : 6px 20px 6px 20px; 
}
p.first_par {
	text-indent : 0 ;
}

p.caption {
	font-size : 8pt ;
	text-indent : 0 ;
	font-weight : normal;
	color : #000000 ;
}
p.sell {
	font-size : 11pt ;
	font-weight : bold ;
}
.ebook {
	display : inline;
	text-align : left ;
	color : #000055 ;
	margin : 0 0 0 45 ; 
	text-decoration : none ;
}
.book {
	display : inline;
	text-align : right ;
	color : #000055 ;
	margin : 0 45 0 0 ; 
	text-decoration : none ;
}
.ebook:hover {
	text-decoration : underline ;
	color : #333388 ;
}
.book:hover {
	text-decoration : underline ;
	color : #333388 ;
}
.review, .review2 {
    margin: 0 25px 0 25px;
}
.review2 {
    background-color: #f0e8ff;
}
.review p, .review2 p {
	font-family  : courier-new, courier, fixed-width ;
	font-size : 9pt ;
	text-align : left ;
	font-weight : normal;
	color : #000000 ;
	margin : 0 5px 0 5px ; 
}
p.reviewed {
	font-family  : courier-new, courier, fixed-width ;
	font-size : 9pt ;
	text-align : left ;
	font-weight : bold;
	color : #000000 ;
	margin : 5px 5px 15px 15px ; 
}