@charset "utf-8";
/* CSS Document */

/* my custom CSS file */

/* Font family */
p.serif {
	font-family: "Times New Roman", Times, serif;
}

p.sansserif {
	font-family: Arial, Helvetica, sans-serif;
}



/*  */
p.center {
	text-align: center;
}



/*  */
p.right {
	text-align: right;
}

p.left {
	text-align: left;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-style: normal;
	font-weight: normal;
} 

p.big {
	font-size: 24px;	
}

/* Menu colour */
div.menuColour {
	width: 100%;
	background-color: blue;
}


/* Float image to the write of the page so that text gets around it */
img.floatRight {
	float: right;
	margin: 0 0 10px 10px;
}



/* Clear the floating to the write */
div.clear {
	clear: right;
}


/* Pad the photo and format it (put a shadow around it */
div.polaroid {
	width: 100%;
	background-color: white;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* Pad the photo and format it (put a shadow around it */
div.photo {
	width: 35%;
	background-color: white;
	float: left;
}

/*  */
img {width: 100%}


/* Center photo description below the photo */
div.photoDesc {
	text-align: center;
	padding: 10px 10px;
}


/* Pad main conent so the writing doesn't start at the edge of the page */
div.mainContent {
	text-align: left;
	padding: 10px 20px 10px 20px;  /* | Top | Right | Bottom  | Left | */
	margin-right: 0px;
}


/* Display menu <a> links inside a green coloured button */
.button {
	background-color: #4CAF50;
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
}

ul.noBullet {
/*	list-style: none; */
	list-style-type: none;
	margin: 0;
	padding: 10px;
}

ul#inline li {
	display:inline;
}

/* Push the content to the left of the photo 20 pixels to the left (pad 20 px to the right of the text) */
li.floatRight {
	float: right;
	margin: 0px 20px 0px 0px; /* | Top | Right | Bottom  | Left | */
}

li.clear {
	clear: right;
}


/* put links inline */
.pagination {
	display: inline-block;
}

.pagination a {
	color: black;
	float: left;
	padding: 8px 16px;
	text-decoration: none;
}

p.bgBlue {
	color: white;
	background-color: blue;
	font-family: sans-serif;
	font-size: large;
}

.centerBlueBox {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
	color: white;
	background-color: blue;
	font-family: sans-serif;
	font-size: large;
}


div.floatRight {
	float: right;
	margin: 0px 0px 0px 20px; /* | Top | Right | Bottom  | Left | */
}

div.floatLeft {
	float: left;
	margin: 0px 0px 0px 20px; /* | Top | Right | Bottom  | Left | */
}

div.clear {
	clear: right;
}

/* Navigation with dropdown submenu */

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #387639;
}

li {
	float: left;
}

li.normal {
	list-style-type: none;
	display: block;
	color: black;
	background-color: white;
	text-decoration: none;
}

li a, .dropbtn {
	display: inline-block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
	background-color: darkred;
}

li.dropdown {
	display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
	display: block;
}

ul.topnav2 li.right {float: right;}

/* Menu navigation end */


/* Footer body */
section.footer {
	width: auto;
	margin: auto;
	color: white;
	background-color: gray;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	text-align: left;

}

/* Center the footer text */
div.footerDesc {
	color: white;
	text-align: left;
	padding: 10px 20px 10px 20px;  /* | Top | Right | Bottom  | Left | */
}

a.footerDescLink {
	color: white;       /* Make links in the footer of white colour */
	padding: 0px 10px;  /* Put spaces between links in the footer */
}

/* Monile flexibility */
body {margin: 0;}

ul.topnav {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #3A66C3;  /* Sea Blue */
}

ul.topnav li {float: left;}

ul.topnav li a {
	display: block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}

ul.topnav li a:hover:not(.active) {background-color: #146414;} /* Dark green */

ul.topnav li a.active {background-color: #8B0D18;} /* Burgundy */

ul.topnav li.right {float: right;}

@media screen and (max-width: 600px){
	ul.topnav li.right, 
	ul.topnav li {float: none;}
}