/* Released: 4th June 2014 - Beverley Hooton @ Focus on Function Web Design */
/* Updated: 15th July 2014 - css to correct 'position:fixed' bug in Safari */
/* Updated: 19th March 2015 - css sub-menu activation simplified [id$="-sub"] - thanks SeanW */
/* Updated: 26th June 2015 - ◄ arrows changed to ► and rotated, for Android */
/* Updated: 17th August 2015 - background added to '#menu li a' to fix intermittent text overlap */
html, body { margin:0; padding:0; height:100%; position:relative; background-image: url('../images/background2013.jpg'); font:16px/1.75 Verdana, Arial, Helvetica, sans-serif }
body { overflow-x:hidden; -webkit-animation:androidbugfix infinite 1s } /* http://timpietrusky.com/advanced-checkbox-hack */
@-webkit-keyframes androidbugfix { from {padding:0} to {padding:0} } /* http://timpietrusky.com/advanced-checkbox-hack */

#header label { padding:0 0.125em; font:2.875em/1.4375em Arial }
#menu label { padding:0 0.25em; font:3.125em/1.375em Arial }
#menu .sub-nav .toggle { padding:0 0.3125em; font:2em/2em Arial; top:0; -webkit-transform:scale(-1,1); -ms-transform:scale(-1,1); transform:scale(-1,1) }
#header label:hover, #menu label:hover { color:#ccc }
#main-nav-check, #menu .sub-nav-check { position:absolute; top:-9999px; left:-9999px }
.toggle { position:absolute; right:0.15em; cursor:pointer; color:#fff }
.container { background:#fff; min-height:100%; padding:0; margin:0; overflow:hidden; }
#menu, #menu .sub-nav { position:absolute; top:9.4em; bottom:0; width:13.75em; background:#222; z-index:9999; left:-13.75em }
.container, #menu, #menu .sub-nav {   
	-webkit-transform:translate(0,0); -ms-transform:translate(0,0); transform:translate(0,0);
	-webkit-transition:-webkit-transform .25s ease; transition:transform .25s ease
	}
#menu ul { background:#222; line-height:2.75em; text-decoration:none; padding:0; list-style:none; margin-top:3.7em; border-top:1px solid #444 }
#menu li { border-bottom:1px solid #444 }
#menu li a { background:#222; display:block; font-size:0.875em; padding-left:1.5em; color:#fff; text-decoration:none }
#menu li a:hover, #menu .toggle-sub:hover { background:#333 }
#menu .sub-nav { margin-top:-1px }
#menu .sub-heading { margin-top:4.0625em; padding-left:1.3125em; color:#999 }
#menu .sub-heading:before { content:""; display:block; height:1px; width:13.75em; margin-left:-1.3125em; background:#444 }
#menu .toggle-sub { font:bold 1em/2.75em Arial; color:#fff; background:#222; float:right; margin-top:-2.75em; width:2.25em; border-left:1px solid #444; cursor:pointer; text-align:center }
.container, #menu, #menu .sub-nav, .close-all { -webkit-transform:translate3d(0,0,0) } /* http://davidwalsh.name/translate3d */

/* #### - corrects 'unfixing' bug in Safari - uncomment if you have position:fixed elements inside .container - #### */
/* @media screen and (-webkit-min-device-pixel-ratio:0) { .container { -webkit-transform:none !important } } */

/* #### - extra css for js enhancement - #### */
#menu .close-all { display:none }
.js #menu .close-all { display:inline }
.js #menu .toggle { top:0; z-index:9999 }
.js #menu .sub-nav .toggle { left:0.9em; width:1em }

/* #### - define ids of animated container, menu and sub-menus here - #### */
#main-nav-check:checked ~ .container,
#main-nav-check:checked ~ #menu,
#menu .sub-nav-check:checked ~ [id$="-sub"] /* matches all elements with id ending "-sub" */ { 
	-webkit-transform:translate(13.75em,0); -ms-transform:translate(13.75em,0); transform:translate(13.75em,0)
	}


@media ( min-width:60em ) { /* #### - switch to fancy desktop fly-out menu at 960px (960/16=60 - 16px being default browser font-size) - #### */

	/* #### - extra css for js enhancement - #### */
	.js #menu .close-all { display:none }

	.container, #menu { -webkit-transform:translate(0,0) !important; -ms-transform:translate(0,0) !important; transform:translate(0,0) !important }
	.wrapper { max-width:78.75em; min-height:100%; margin:auto; -webkit-transform:translate(0,0); -ms-transform:translate(0,0); transform:translate(0,0); }
	.container { background:#222; min-height:100%; padding-left:13.75em; border: 0px solid red; }
	#menu { left:0 }
	#menu label, #header label, #menu .sub-heading { display:none }
	#menu .sub-nav { position:absolute; z-index:-9999; top:auto; margin-top:-2.75em; left:0; bottom:auto; visibility:hidden; opacity:0 }
	#menu ul li a { background:#222 } /* counteracts opacity so children don't ghost through parents */
	#menu ul label { display:inline-block }
	#menu .toggle-sub, #menu .toggle-sub:hover { background:transparent }
	#menu ul { position:relative; margin-left:0 }
	#menu ul li:hover > label { color:#ccc }
	#menu ul li:hover > a { background:#333; -webkit-transition:background-color .25s ease; transition:background-color .25s ease } /* fade effect for modern browsers */
	#menu ul li:hover > ul { position:absolute; left:0; background:#222; border-top:0; visibility:visible; opacity:1; 
		-webkit-transform:translate(13.75em,0); -ms-transform:translate(13.75em,0); transform:translate(13.75em,0);
		-webkit-transition:all .25s ease; transition:all .25s ease
		}
	#menu ul li:hover > ul:before { content:""; display:block; position:absolute; top:-1px; left:0; height:1px; width:13.75em; background:#444 }
	#menu ul ul ul { margin-left:-1px }
	#menu ul ul li { border-left:1px solid #444; border-right:1px solid #444 }
        .hide { display:inline }
        .hide44 { display:inline }
        .hide38 { display:table-cell }
}


.page-content { background:#fff; padding:0 1em 1em; min-height:calc(100vh - 10.5em); }
.page-content:after { display:block; content:''; height:1px } /* fixes bottom padding issue in IE10 */
.breadcrumbs { font-size:.75em; border-bottom:7px solid #eee; margin:0 -1.25em 1.5em; padding:1em 1.25em }
.breadcrumbs span { display:none }
@media(min-width:30em) { .breadcrumbs { line-height:3.75; padding:0 1.25em } }
@media(min-width:60em) { .breadcrumbs { margin:0 0 1.5em; padding:0 } .breadcrumbs span { display:inline-block } .page-content { padding:0 2em 1em } }
a, a:active, a:visited { color:#c30 }
a:visited { color:#c90 }
a:hover, a:focus { color:#666; text-decoration:none }
code { display:block; background:#ebebeb; font-size:0.875em; padding:1em 2em; overflow-x:scroll; white-space:nowrap }

.header-container
{
	float: left;
	width: 100%;
	margin: 0 0 1em;
}
	
#links1 { position:relative; float: left; margin: 0 0 0 2%; }
#links2 { position:relative; float: left; margin: 0 0 0 2%; }
#links3 { position:relative; float: left; margin: 0 0 0 2%; }
	
#header {
	overflow: hidden;
	width: 100%;
        background-image: url('../images/mainmenubkgrd.jpg');
}


/* image */

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

@media ( min-width:60em ) { /* #### - switch to desktop on-canvas menu at 960px (960/16=60 - 16px being default browser font-size) - #### */
        #header { height:9.5em;}
        #header {background-size:100% 9.5em; background-repeat:no-repeat;}

#links1 { height:8em; width: 25%; border: 0px solid red; }
#links2 { height:8em; width: 25%; border: 0px solid red; }
#links3 { height:8em; width: 30%; border: 0px solid green; }

        #links1 img { width: auto; height:7.3em; margin:auto; position:absolute; top:0; left:0; bottom:0; right:0; }
        #links2 img { width: auto; height:6.0em; margin:auto; position:absolute; top:0; left:0; bottom:0; right:0; }
        #links3 img { width: auto; height:6.0em; margin:auto; position:absolute; top:0; left:0; bottom:0; right:0; }
        .show33 { display:none }
}

@media ( max-width:60em ) { /* #### - switch to desktop on-canvas menu at 960px (960/16=60 - 16px being default browser font-size) - #### */
        #header { height:6em;}
        #header {background-size:100% 8em; background-repeat:no-repeat;}
        #menu { top:6em; }
        #menu .sub-nav { top:0em; }
        #links1 { height:6em; width:28%; border: 0px solid red; }
        #links2 { height:6em; width:25%; border: 0px solid red; }
        #links3 { height:6em; width:30%; border: 0px solid red; }
        #links1 img { width:auto; height:4.9em; margin:auto; position:absolute; top:0; left:0; bottom:0; right:0; }
        #links2 img { width:auto; height:3.4em; margin:auto; position:absolute; top:0; left:0; bottom:0; right:0; }
        #links3 img { width:auto; height:3.4em; margin:auto; position:absolute; top:0; left:0; bottom:0; right:0; }
        .page-content { min-height:calc(100vh - 7.3em); }
        .hide { display:none }
        .hide44 { display:inline }
        .hide39 { display:table-cell }
        .hide33 { display:inline }
        .show33 { display:none }
}

@media ( max-width:44em ) { /* #### - for small mobile devices - #### */
        .hide44 { display:none }
        .hide33 { display:inline }
        .show33 { display:none }
}

@media ( max-width:39em ) { /* #### - for small mobile devices - #### */
        .hide39 { display:none }
        .hide33 { display:inline }
        .show33 { display:none }
}

@media ( max-width:33em ) { /* #### - for small mobile devices - #### */
        .hide39 { display:none }
        .hide33 { display:none }
        .show33 { display:inline }
}

@media ( max-width:30em ) { /* #### - for small mobile devices - #### */
        #header { height:5em; border: 0px solid red;}
        #header {background-size:100% 5em; background-repeat:no-repeat;}
        #menu { top:5em; border: 0px solid green; }
        #menu .sub-nav { top:0em;  }
        #links1 { height:4.5em; width:29%; border: 0px solid blue; }
        #links2 { height:5em; width:23%; border: 0px solid blue; }
        #links3 { height:5em; width:28%; border: 0px solid blue; }
        #links1 img { width:auto; height:3.8em; margin:auto; position:absolute; top:0; left:0; bottom:0; right:0; }
        #links2 img { width:auto; height:2.4em; margin:auto; position:absolute; top:0; left:0; bottom:0; right:0; }
        #links3 img { width:auto; height:2.4em; margin:auto; position:absolute; top:0; left:0; bottom:0; right:0; }
        .page-content { min-height:calc(100vh - 6.35em); }
}

@media ( max-width:22em ) { /* #### - for really small mobile devices - #### */
        #header { height:5em; border: 0px solid blue;}
        #header {background-size:100% 4em; background-repeat:no-repeat;}
        #menu { top:5em; border: 0px solid blue; }
        #menu .sub-nav { top:0em;  }
        #links1 { height:3.7em; width:27%; border: 0px solid red; }
        #links2 { height:3.7em; width:26%; border: 0px solid red; }
        #links3 { height:3.7em; width:29%; border: 0px solid red; }
        #links1 img { width:auto; height:2.9em; margin:auto; position:absolute; top:0; left:0; bottom:0; right:0; }
        #links2 img { width:auto; height:2.0em; margin:auto; position:absolute; top:0; left:0; bottom:0; right:0; }
        #links3 img { width:auto; height:2.0em; margin:auto; position:absolute; top:0; left:0; bottom:0; right:0; }
        #header label { padding:0 0.125em; font-size:2em }
        .page-content { min-height:calc(100vh - 6.35em); }
}