body{
    display: grid;
    height: 100%;
    grid:   "header" 50px
            "primary-navigation" auto
            "main-content" auto
            "content-aside" auto
            "footer" auto / 
            minmax(0, 1fr);
    justify-content: center;
    font-family: Helvetica, Verdana, Arial, sans-serif;
    font-size:16px;
}

.mobile-header{
    display: inline;
}

img#header-image{
    display: none;
}

@media screen and (min-width: 760px) {
    body{
        grid:   "header                 header" 120px
                "primary-navigation     main-content" auto
                "content-aside          content-aside" auto
                "footer                 footer" auto / 
                250px auto;
    }

    img#header-image{
        max-height:120px;
        display: inline;
    }

    .mobile-header{
        display: none;
    }
}

@media screen and (min-width: 1060px) {
    body{
        grid:   "header                 header              header" 160px
                "primary-navigation     main-content        content-aside" auto
                "footer                 footer              footer" auto / 
                250px minmax(560px, 960px) 250px;

        background: url(/images/layout/mainbg.jpg) #F9FFF5 scroll repeat 0 0;
    }

    img#header-image{
        max-height:160px;
        display: inline;
    }
}

header {
    grid-area: header;
    font-size: 32px;
    color: black;
    line-height: 50px;
}

#navigation-hamburger{
    color:black;
    padding-right:15px;
    float:right;
}

#primary-navigation{
    grid-area: primary-navigation;
}

#main-content{
    grid-area: main-content;
    background: white;
    padding: 25px;
    line-height: 150%;
}

#content-aside{
    grid-area: content-aside;
}

footer{
    grid-area: footer;
    padding: 10px;
}

header, footer, #primary-navigation, #content-aside{
    background-color: #e6efde;
}

header, footer, #content-aside{
    background-color: #e6efde;
    text-align: center;
}

header, footer{
    text-align: center;
}

img{
    max-width: 100%;
    height: auto;
}

.paypal{
    padding:10px;
}

.adsense{
    padding-top:30px;
    padding-left: 10px;
    padding-right:10px;
}

a#site-header{
    text-decoration: none;
}

h1{
    font-size: 1.4em;
    color:#748a61;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 40px;
    clear:both;
}

h2{
    font-size: 1.25em;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
    clear:both;
}

h3{
    font-size: 1.125em;
    margin-top: 10px;
    margin-bottom: 10px;
    clear:both;
}

table{
    width: 100%;
    border-collapse: collapse;
}

table th {
    font-size: 1.2em;
    text-align: left;
    padding: 5px;
    background-color: #748a61;
    color: white;
    padding: 10px;
}

table td{
    background-color: #EAF2D3;
    border: 1px solid #98bf21;
    padding: 8px;
}

section{
    margin-top: 40px;
}


@media screen and (max-width: 760px) {
    #primary-navigation.hide-navigation{
        display: none;
    }

    #primary-navigation.show-navigation{
        display: block;
    }
}

@media screen and (min-width: 760px) {
    #primary-navigation{
        display: block;
    }

    #navigation-hamburger{
        display:none;
    }
}

.horizontal-image {
    float: left;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 32px;   
}

.horizontal-image a {
    border-bottom: 2px dotted;
}

.main-image {
    text-align: center;
}

.caption{
    text-align: center;
    font-size: 0.875em;
    font-weight: bold;
    clear: both;
}

.catbox {
	float:left; 
	margin:0; 
	padding-left:3px; 
	margin-top:16px; 
	width:171px; 
	height:237px;
	overflow:hidden;
}

.cathead {
	clear:both;
	float:left;
	width:166px;
	height:30px;
	overflow:hidden;
	text-align:center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #daebca;
	text-align:center;
	margin: 0px;
	background-image: url(/images/layout/cattile.png);
	background-repeat:repeat-y;
}

.cathead p{
	clear:both;
	text-align:center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	text-align:center;
	margin: 0px;
}

.cathead a{
	color:#fff;
	text-decoration:none;
}

.cathead a:visited{
	color:#fff;
}

.cathead a:hover{
	color:#beb;
}
			
.catimage {
	width:167px; 
	height:167px;
	padding-left:-2px;
	padding-top:0px;
	margin-right:10px; 
	overflow:hidden; 
	background-repeat:no-repeat; 
	background-position:5px 5px;
}

.catimage img {
	border:0;
}

img.centre{
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.clearfix{
    clear:both;
}

/**
Left navigation
**/

.nav a, .nav label {
    display: block;
    padding: .85rem;
    color: #fff;
    background-color: #748a61;
    box-shadow: inset 0 -1px #373737;
    -webkit-transition: all .25s ease-in;
    transition: all .25s ease-in;
    text-decoration: none;
}
    
.nav a:focus, .nav a:hover, .nav label:focus, .nav label:hover {
    color: black;
    background: #f4aeba;
}

.nav label { 
    cursor: pointer; 
}

.nav ul {
    list-style: none;
    padding: 0px;
}

.nav ul.group-list, .nav ul.sub-group-list{    
    padding-inline-start: 10px;
}

/**
* Styling first level lists items
*/

.group-list a, .group-list label {
    background: #748a61;
    box-shadow: inset 0 -1px #373737;
}

.group-list a:focus, .group-list a:hover, .group-list label:focus, .group-list label:hover { 
    background: #f4aeba; 
}

/**
* Styling second level list items
*/

.sub-group-list a, .sub-group-list label {
    background: #748a61;
    box-shadow: inset 0 -1px #474747;
}

.sub-group-list a:focus, .sub-group-list a:hover, .sub-group-list label:focus, .sub-group-list label:hover { 
    background: #f4aeba; 
}

/**
* Styling third level list items
*/

.sub-sub-group-list a, .sub-sub-group-list label {
    background: #748a61;
    box-shadow: inset 0 -1px #575757;
}

.sub-sub-group-list a:focus, .sub-sub-group-list a:hover, .sub-sub-group-list label:focus, .sub-sub-group-list label:hover { 
    background: #f4aeba; 
}

/**
* Hide nested lists
*/

.group-list, .sub-group-list, .sub-sub-group-list {
    height: 100%;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height .5s ease-in-out;
    transition: max-height .5s ease-in-out;
}

.nav__list input[type=checkbox]:checked + label + ul { /* reset the height when checkbox is checked */
max-height: 1000px; 
}

label > span {
    float: right;
    -webkit-transition: -webkit-transform .65s ease;
    transition: transform .65s ease;
}

.nav__list input[type=checkbox]:checked + label > span {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}


/* START Content-Item Box */

.itembox{
    margin-top:20px;
}

.itemtop { 
	background-color: #748a61;
}

.itemtop p{
	width:100%;
	text-align:center;
	margin:0; 
	padding:5px;
	font-weight:bold;
	color:#daebca; 
}

.itembody {
	padding:15px;
	padding-top:8px;
	padding-bottom:8px;
	color:#000;
	border-right-width: 2px;
	border-left-width: 2px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #738b61;
	border-left-color: #738b61;
}
				
.itemimage { 
	width:160px;
	height:160px;
	float:left;
 	padding:5px;
	margin-top:10px;
	border:1px solid #738b61;
}

.itemimagewrapper { 
    position:relative;
    width:180px;
}

.itemdesc {
	padding-left:20px;
    padding-bottom:20px;
    display:inline-block;
}

.itembott { 
	height:25px; 
	padding-right:16px;
	padding-top:5px;
	overflow:hidden; 
	background-color: #748a61;
	text-align:right;
	font-size:medium;
	font-weight:bold;
	color:#daebca;
}

.itembott a {
    text-decoration:none; 
    color:#daebca;
}

.itembott a:visited {
    color:#daebca;
}

.itembott a:hover {
    color:#fff;
}
    
/* END Content-Item Box */