/* dd352.us Main Menu Styles    */
/* CSS 3 Compatible             */
/* 27NOV2013                    */
/* Walt Baranger                */
/* 11NOV2018 added flex boxes   */
/* 24AUG2023 modernized         */
/* 06DEC2023 Reorganized CSS	*/

article#bigMenuBackground {
	background-color: #f5f5f5;
	background-image: url("/pix/AdobeStock_331413443-scaled.jpg");
	background-size: cover;
	border-radius: 3%;
	margin: .5% 1% .5% 1%;
	padding: 1%;
	}

nav#menusWorden {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	white-space: nowrap;
	}
	
div.mainMenu {
	background-color: azure;
	border-radius: 15px;
	border: thin solid navy;
	box-shadow: 8px 8px 4px rgba(0, 0, 100, 0.3);
	margin-bottom: 1%;
	margin-top: 1%;
	opacity: 0.4;
	padding: 0;
	width: 45%;
	}
	
div.mainMenu:hover {
	opacity: 1.0;
	}
	
div.mainMenuMask {
	background-color: lightblue;
	border-radius: 15px;
	border: thin solid navy;
	height: 100%;
	margin: 0;
	opacity: .85;
	padding: 0;
	vertical-align: middle;
	width: 100%;
	}
		
div.mainMenu h4 {
	font-family: Stencil, Stencil1, "Stencil BT", Stencil-normal, "copperplate gothic bold", "copperplate gothic bt", "copperplate bold", copperplate, impact, "century schoolbook", palatino, serif;
	font-size: xx-large;
	font-weight: normal;
	letter-spacing: .2em;
	line-height: 50%;
	margin-bottom: 0;
	margin-top: .6em;
	padding-bottom: 0;
	padding-top: 0;
	white-space: nowrap;
	}

	
div.mainMenu h4:before {
    color: steelblue;
    content: "\2693\A0";
	font-size: x-large;
    text-shadow: -1px 0 navy, 0 1px navy, 1px 0 navy, 0 -1px navy; 
	}

div.mainMenu h4:after {
    color: steelblue;
    content: "\A0\2693";
	font-size: x-large;
    text-shadow: -1px 0 navy, 0 1px navy, 1px 0 navy, 0 -1px navy; 
	}
	
div.mainMenu ul {
	}

div.mainMenu li {
	font-family: "open sans",open-sans, arial, tahoma, helvetica, sans-serif;
	font-size: large;
	font-weight: bold;
	list-style: none;
	margin-bottom: .2em;
	margin-top: .2em;
	}
	
div.mainMenu li:before {
	color: steelblue;
	content: "\272f\A0";
	font-size: large;
	}

div.mainMenu a {
	background-color: transparent;
	}

div.mainMenu a:link {
	background-color: transparent;
	}

div.mainMenu a:visited {
	background-color: transparent;
	}

div.mainMenu a:hover {
	background-color: transparent;
	opacity: 1.0;	
	}

div.mainMenu a:active {
	background-color: transparent;
	opacity: 1.0;	
	}
	
div.shipBG {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	}
	
div.shipBG h2#battles {
	width: 100%;
	align-self: flex-start;
	margin: 0;
	padding: 0;
	}

div.shipBG div#calendar {
	align-self: flex-end;
	background-color: rgba(200, 200, 200, 0.7);
	border-radius: 15px;
	margin: 0;
	padding: 0;
	width: 100%;
	}
	
div.shipBG div#calendar h4.anniversary {
	margin: 0;
	padding: 0;
	
	}

div#aboutWorden {
	background-image: url("/backgroundImages/g13539.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	letter-spacing: .1em;
	}

div#memoriesWorden {
	background-image: url("/backgroundImages/g16485.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	letter-spacing: .1em;
	}
	
div#imagesWorden {
	background-image: url("/backgroundImages/g41686.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	letter-spacing: .1em;
	}
	
div#otherWorden {
	background-image: url("/backgroundImages/h86118.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	letter-spacing: .1em;
	}
	
div#storyWorden {
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	vertical-align: middle;
	white-space: normal;
	width: 60%;
	}
	
div#storyWorden p {
	margin-left: 1em;
	margin-right: 1em;
	}
	

/* For Mobile */
@media screen and (max-width: 480px) {
    	
	article#bigMenuBackground {
		background-color: whitesmoke;
		background-image: none;
		background-size: cover;
		border-radius: 0;
		margin: 0;
		max-width: 100%;
		padding: .5%;
		}

	nav#menusWorden {
		display: block;
		margin-top: 0;
		margin-right: auto;
		margin-bottom: 0;
		margin-left: auto;
		padding: 0;
		width: 100%;
		text-align: center;
		}

	nav#menusWorden div.mainMenu {
		background-position: center center;
		background-size: cover;
		border-radius: 0;
		font-size: medium;
		margin-top: .5em;
		margin-right: auto;
		margin-bottom: .5em;
		margin-left: auto;
		opacity: 1.0;
		padding: 0;
		width: 95%;
		}
		
	nav#menusWorden div.mainMenu div.mainMenuMask {
		background-color: #ddd;
		background-size: cover;
		border-radius: 0;
		height: 100%;
		margin-left: auto;
		margin-right: auto;
		opacity: .85;
		padding: 1em 0 0 0;
		width: 100%;
		}

	div.mainMenu h4 {
		font-size: medium;
		}
	
	div.mainMenu ul {
		margin-left: 0;
		padding-left: 0;
		}

	div.mainMenu li {
		font-size: medium;
		margin-left: 1em;
		padding-left: 0;
		}
	
	article#bigMenuBackground div#storyWorden {
		margin-left: auto;
		margin-right: auto;
		padding-right: 0;
		vertical-align: middle;
		white-space: normal;
		width: 95%;
		}
		
	article#bigMenuBackground div#storyWorden div.mainMenuMask p {
		padding-left: .5em;
		padding-right: .5em;
		}
		
	article#bigMenuBackground div.shipBG {
		background-size: cover;
		margin-left: auto;
		margin-right: auto;
		padding: 0;
		width: 95%;
		}
			
	body.home header {
		margin-left: auto;
		margin-right: auto;
		padding-left: 0;
		padding-right: 0;
		width: 100%;
		}

	body.home header h3 {
		font-size: small;
		letter-spacing: 0;
		line-height: 120%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		white-space: normal;
		width: 90%;
		}
	
}