/*
    Style sheet for MV Martindale
	save as myCSS_lg for screen resolution > 1080px (e.g. laptops)
	save as myCSS_sm for screen resolution <= 1080px (e.g. mobile devices)

	CHANGES REQUIRED:
	root: delete one of the page widths
	images: delete one group of definitions
	
*/

:root { /* oxford blue #002147
		    cream #FFF1BB */
	/* colours */
	--C-blue: #002147 ;
	--C-cream: #FFF1BB ;
	--C-white: #FFFFFF ;

	/* size */
	--S-page-width: 95% ; /* small screen page width */
	--S-font-sm: 0.8em;
	--S-font-reg: 1em;
	--S-font-lg: 1.5em;
	--S-font-xlg: 2em;
}
body 
	{height: 100%;
    font: var(--S-font-reg) Arial, Helvetica, sans-serif;
	margin: 0;
	color: var(--C-blue) ;
	background:var(--C-cream);}

#wrapper {min-height:100%; margin: 0 auto -75px;}
#header 
	{background-color:var(--C-blue);
	min-width:100%;
	height:100px;
	float:left}
#header h1 {
		font: var(--S-font-xlg) Arial, Helvetica, sans-serif;}
#headerContent 
	{width:var(--S-page-width);
	margin:0 auto;
	padding:5px;
	color:var(--C-white);}
#separator {height:100px;}

/* site menu */
#menu { float: right; 
		width: 100%;  /* pushes title below menu */
		}
#menu ul { list-style: none;
    		float: right;
			padding-bottom: 20px; /* space below the menu */
			margin: 5px; /* pushes the menu up */}
#menu ul li {
    display: inline;
    font: var(--S-font-sm) "arial narrow", Arial, Helvetica, sans-serif;
    padding-left: 5px; /* the gap between the items */}
#menu ul li a {
    display: inline;
    text-decoration: none; 
	color: var(--c-white); }
#menu ul li.active a, #menu ul li a:hover {
    color: var(--C-cream) ; }

#content {margin:0 auto;
	width:var(--S-page-width);
	padding:15px; }

#content h1 {
		font: var(--S-font-xlg) Arial, Helvetica, sans-serif;}
#content h2 {
		font: var(--S-font-lg) Arial, Helvetica, sans-serif;}
#content h3 {
		font: var(--S-font-reg) Arial, Helvetica, sans-serif;
		font-weight: bold; }

.collapse { display:none;} /* collapse sections, used on gallery page */
#galleryContent a:link, #galleryContent a:visited, #galleryContent a:hover, #galleryContent a:active {
		font: var(--S-font-lg) Arial, Helvetica, sans-serif;
		text-decoration: none;
		color: var(--C-blue) ; }

#footer {background:var(--C-blue);
	min-width:100%;
	height:75px;
	float:left}
#footerContent {margin: 0 auto; 	
	width:var(--S-page-width);
	text-align: center;
	padding:15px; 
	color:var(--C-white);}
#footerContent a, #footerContent a:hover {
	color:var(--C-cream);
}

p {
    padding: .75em 0;
    line-height: 1.3em; }

/* Images - ALL CENTRED FOR SMALL SCREENS
e.g. <img id="imgc" src="<url>" . . .  */
#imgc, #imgl, #imgr { 
        display: block;
        padding-bottom: 20px;
        margin-left: auto;
        margin-right: auto; }