/* File: css-webcommon.css        */
/* Common CSS for Juniper Cottage */
/* Author: MMcD 2016              */

/* Fallback for old browsers (ref: W3Schools) */
header, section, footer, aside, nav, main, article, figure { display: block ; }

/* General  */
body
{
   border: 0 none ; margin: 0 ; padding: 0 ;
   color: black ; background: #EEEEEE url('/img/webback-juniper.jpg') ;
   font-family: Arial, Helvetica, sans-serif ; font-size: small ; font-weight: normal ; font-style: normal ;
}

div { margin: 0 ; }
hr { clear: both ; width: 100% ; height: 1px ; border: 0 ;
     text-align: center ; color: black ; background-color: black ; margin: 10px 0 3px 0 ; }
p { margin: 3px ; padding: 0.4em 0.5em ; color: black ; }

img { border: 0px none ; }

/* Headings */
h1 { font-size: x-large ; font-weight: bold ; margin: 3px ; padding: 0.4em 0.4em 0.2em 0.4em ; }
h2 { font-size: large ; font-weight: bold ; margin: 3px ; padding: 0.5em 0.5em 0.2em 0.5em ; }
h3 { font-size: medium ; font-weight: normal ; margin: 3px ; padding: 0.5em 0.5em 0.2em 0.5em ; }

/* Lists */
ul
{
   margin: 0.4em 0em ;
   list-style-type: disc ;
   font-family: 'trebuchet ms', arial, sans-serif ; font-size: medium ; font-weight: bold ;
}
li { margin: 0.1em 0em ; }

/* Normal web page style */
.nicewebpage
{
   margin: 0 ; padding: 0 ;
   text-align: left ;
   font-family: 'trebuchet ms', arial, sans-serif ;
   font-size: medium ; font-weight: bold ;
   color: black ;
   min-height: 28em ;
}

/* Highlighting/hiding */
.selected { background-color: #40E0D0 ; }
.highlight { background-color: yellow ; }
.inhibit { display: none ; }
.reveal { display: block ; }
.hideitem { visibility: hidden ; }

/* Banner at top of all pages */
#pageBanner
{
   clear: both ;
   margin: 0 ; padding: 0 ; border: 0 ;
   width: 100% ; height: 1.6em ;
   font-family: 'comic sans ms', 'trebuchet ms', arial, sans-serif ; font-size: xx-large ; font-weight: normal ;
   color: black ;
}
#idBanTitle
{
   float: left ;
   margin: 0 ; padding: 0px 20px ;
   font-family: 'comic sans ms', 'trebuchet ms', arial, sans-serif ; font-size: xx-large ; font-weight: normal ;
   color: black ; text-decoration: none ;
}
#idBriefWide
{
   display: block ;
   margin: auto ; padding: 0.6em 0 0 0 ;
   font-family: 'comic sans ms', 'trebuchet ms', arial, sans-serif ; font-size: large ; font-weight: normal ;
   text-align: center ;
}
#idBriefWrap
{
   display: none ;
   margin: auto ; padding: 0 ;
   font-family: 'comic sans ms', 'trebuchet ms', arial, sans-serif ; font-size: large ; font-weight: normal ;
   text-align: center ;
}
#idBanMenu { display: none ; }
#idHeadLine { height: 2px ; margin: 1px 0px ; }

/* Main navigation menu below banner on all pages */
#pageNavMenu
{
   clear: both ;
   margin: 0.1em ; padding: 0 ;
}
#pageNavMenu ul
{
   float: left ; width: 100% ;
   list-style: none ;
   font-family: Arial, Helvetica, sans-serif ; font-size: small ; font-weight: bold ;
   margin: 0 0 1em 0 ; padding: 0 ;
}
#pageNavMenu li
{
   display: inline ;
   margin: 0 ; padding: 0 ;
}
#pageNavMenu a
{
   float: left ; width: 10em ;
   margin: 0.1em ; padding: 0.25em 0em ;
   text-align: center ; text-decoration: none ;
   color: white ; background-color: #295CCC ;
   border: 2px outset gray ;
}
#pageNavMenu a:hover { background-color: #D87339 ; border-style: outset ; }
#pageNavMenu a:active { position: relative ; left: 1px ; top: 1px ; border-style: inset ; }

/* Adjust button widths to fit device screen size */
@media screen and (max-width: 870px) { #pageNavMenu a { width: 8em ; } }
@media screen and (max-width: 710px) { #pageNavMenu a { width: 6.3em ; } #idBriefWide { display: none ; } #idBriefWrap { display: block ; } }
@media screen and (max-width: 570px) { #pageNavMenu a { width: 5.8em ; } }
@media screen and (max-width: 530px) { #pageNavMenu a { width: 5.3em ; } }

/* Photos positioning */
.bigPhotoRight
{
   clear: right ; float: right ;
   margin: 8px 8px 8px 15px ; border: 0 ; padding: 0 ;
}
.bigPhotoRight img { box-shadow: 0px 0px 10px 3px gray ; border-radius: 8px ; }

/* Big hyperlink button */
.bigButton
{
   float: left ;
   margin: 0.3em 0.5em 1em 1.2em ; padding: 0 ;
   font-family: Arial, Helvetica, sans-serif; font-size: medium ; font-weight: bold ;
}
.bigButton a
{
   display: block ;
   padding: 0.4em 1em ;
   text-align: center ;
   text-decoration: none ;
   color: black ; background-color: #b0d8b0 ;
   border: 2px outset silver ;
   border-radius: 10px ;
}
.bigButton a:hover
{
   color: black ; background-color: #90d890 ;
   border: 2px outset silver ;
}
.bigButton a:active
{
   position: relative ; left: 1px ; top: 1px ;
   color: black ; background-color: #90d890 ;
   border: 2px inset silver ;
}

.bulletList
{
   clear: left ; float: left ;
   margin: 0 0.5em 0.5em 0 ; padding: 0 ;
   font-family: 'comic sans ms', 'trebuchet ms', arial, sans-serif ; font-size: medium ; font-weight: normal ;
}

/* List of ticked items */
.tickedList
{
   clear: left ; float: left ;
   margin: 0.4em 1em 0.4em 1em ; padding: 0em 15px 0.5em 15px ;
   font-family: 'comic sans ms', 'trebuchet ms', arial, sans-serif ; font-size: medium ; font-weight: normal ;
   display: inline ;
   list-style-type: none ;
}
.tickedList li
{
   margin: 0.2em 0px 0.2em 10px ; padding: 0.2em 10px 0.2em 40px ;
   background-image: url('/img/symbol-tick.png') ; background-repeat: no-repeat ; background-position: left center ;
}

/* Hyperlink buttons */
.hyperList
{
   clear: right ; float: right ;
   margin: 6px 8px ; padding: 0 ;
   font-family: 'ms sans serif', sans-serif ; font-size: small ; font-weight: bold ;
}
.hyperList ul
{
   margin: 0 ; padding: 0 ;
   font-family: 'ms sans serif', sans-serif ; font-size: small ; font-weight: bold ;
}
.hyperList li
{
   float: left ;
   list-style: none ;
   margin: 0em 0.3em 1em 0.3em ; padding: 0 ;
}
.hyperList a
{
   display: block ; border: 0px none ;
   padding: 0.5em 0.7em ;
   text-align: center ;
   text-decoration: none ;
   color: black ; background-color: #e8d088 ;
   border: 2px outset silver ;
}
.hyperList a:hover
{
   color: black ; background-color: #ffc040 ;
   border: 2px outset silver ;
}
.hyperList a:active
{
   position: relative ; left: 1px ; top: 1px ;
   color: black ; background-color: #ffc040 ;
   border: 2px inset silver ;
}

/* Footer nav list at bottom of all pages */
#pageFootNav
{
   clear: both ; width: 100% ; margin: 3px 0 ; padding: 0.2em 0 ;
   font-family: Arial, Helvetica, sans-serif ; font-size: small ; font-weight: bold ;
   color: black ;
   text-align: center ;
}
#pageFootNav P { padding: 0.2em 0.2em 0.2em 0 ; }
#pageFootNav a
{
   color: #303030 ;
   text-align: center ; text-decoration: underline ;
}
#pageFootNav a:hover { color: fuchsia ; }

/* Copyright text at bottom right of all pages */
#pageCopyright
{
   font-family: Arial, Helvetica, sans-serif ; font-size: x-small ; font-weight: normal ;
   color: #303030 ;
   float: right ; padding-right: 0.7em ;
   text-align: right;
}
#pageCopyright p { padding: 0.2em ; margin: 0 0.3em 0.2em 0.3em ; }

/* Force positioning to a new line (i.e. cancelling any in-line positioning) */
.forceNewLine { clear: left ; }

/* Larger padding gap before a new section */
.gapNewSection { clear: left ; margin-top: 1.5em ; }