/* Modifies orginal LP container-body */
.content-container { 
margin: 100px auto 40px auto; /* Set top margin to place content slightly under menu. Bottom margin accounts for offset and sets space between content and footer. */ 
 } 

/* Menu nests over Menu-wrapper so there is the page-colored 20px top border and so Menu can have rounded corners */
#LP-Archive-Menu-wrapper { position: fixed;
	z-index:10; 
    top: 0px;
   	left: 50%; transform: translateX(-50%); /* Center wrapper. */
	width: 100%; max-width: 1000px;
	border-top: 12px solid transparent; /* Set border to page background color which is set in main LP CSS. */
	padding-left: 20px; padding-right: 20px; /* For small screens. */	
}

#LP-Archive-Menu { 
	position: relative;
	z-index:20; 
    padding: 10px 2%;
   	margin: auto; /* Center menu. */
    width: 100%;
    min-height: 60px; height: auto; /* min-height so menu expands if links wrap */
    background-color: #444;
    border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;
    text-align: center; /* Center inline content. Then use display inline-block in button container. */
    box-shadow:         0px 5px 5px rgba(50, 135, 225, 0.75);
    -webkit-box-shadow: 0px 5px 5px rgba(50, 135, 225, 0.75);
	-moz-box-shadow:    0px 5px 5px rgba(50, 135, 225, 0.75);
}

/* MENU CSS */
/* MENU LAYOUT - Remove the margin, padding, border and outline from all the elements of the menu. Then we will add a fixed width and height to the menu, rounded corners and the CSS3 gradients. To align the links horizontally we will float the lists to left. We also need to set the position to relative because we will need that to align the sub menus. */

.menu,
.menu ul,
.menu li,
.menu a {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}

.menu {
	height: 40px; height: auto; /* height-auto needed for menu wrap */
	width: 100%; /* Adjust for overall link text */
	margin: auto; /* Center Menu */
	 margin-bottom: 0px;
	background: #555;
	background: -webkit-linear-gradient(top, #555 0%,#2c2d33 100%);
	background: -moz-linear-gradient(top, #555 0%,#2c2d33 100%);
	background: -o-linear-gradient(top, #555 0%,#2c2d33 100%);
	background: -ms-linear-gradient(top, #555 0%,#2c2d33 100%);
	background: linear-gradient(top, #555 0%,#2c2d33 100%);

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.menu li {
	position: relative;
	list-style: none;
	display: inline-block;
	height: 40px;
	
}

/* MENU LINKS - To style the menu links we will add some basic CSS properties like font, color, padding, etc. Then we will add a dark text shadow and a color transition to create a smooth effect when the color changes on hover state. To create the links separator add a border to the left and right and then we will remove the left border from the first link and the right border from the last link. For the hover state we will only change the text color. */

.menu li a {
	display: block;
	padding: 0 20px; /* Left and right padding adds to size of link block, which is defined by link text */
	margin: 6px 0;
	line-height: 28px;
	text-decoration: none;
	border-left: 1px solid #393942;
	border-right: 1px solid #4f5058;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 13px;
	color: #f3f3f3; /* text color and color transition */
	text-shadow: 1px 1px 1px rgba(0,0,0,.6);

	-webkit-transition: color .6s ease-in-out;
	-moz-transition: color .6s ease-in-out;
	-o-transition: color .6s ease-in-out;
	-ms-transition: color .6s ease-in-out;
	transition: color .6s ease-in-out;
}

.menu li:first-child a { border-left: none; }
.menu li:last-child a { border-right: none; }

.menu li:hover > a { color: #0089ff; /* electric blue */
background: none;
}

/* SUB MENU - Position the sub menu 40px from the top and 0px from the left of the menu item and add bottom rounded corners. We will set the opacity to 0 and on hover state to 1 to create the fade in/out effect. For the slide down/up effect we need to set the list height to 0px when is hidden and to 36px on hover state. */

.menu ul {
	position: absolute;
	top: 40px;
	left: 0px;
	opacity: 0;
	background: #333; /* Sub-menu background color */
    
	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;

	-webkit-transition: opacity .25s ease .1s;
	-moz-transition: opacity .25s ease .1s;
	-o-transition: opacity .25s ease .1s;
	-ms-transition: opacity .25s ease .1s;
	transition: opacity .25s ease .1s;
}

.menu li:hover > ul { opacity: 1; }

.menu ul li {
	display: block; /* For dropdown (removes inherited inline-block) */
	height: 0;
	overflow: hidden;
	padding: 0;
	-webkit-transition: height .25s ease .1s;
	-moz-transition: height .25s ease .1s;
	-o-transition: height .25s ease .1s;
	-ms-transition: height .25s ease .1s;
	transition: height .25s ease .1s;
}
.menu li:hover > ul li {
	height: 36px;
	overflow: visible;
	padding: 0;
}

/* Set  width of the sub menu. Instead of left and right borders, add a bottom one and remove it from the last link. */

.menu ul li a {
	width: 180px; /* Adjust Text box position below if changing this. */
	padding: 4px 0 4px 0px;
	margin: 0;
	border: none;
	border-bottom: 1px solid #454549;
}

.menu ul li:last-child a { border: none; }

/* Use with php in links to leave color on for page selected 
.on { color: #d0a010 !important; /* gold */ }

/* optional - to add an image icon to each sub menu link. Use a custom class in html for each link. Add a background image here. */

/*
.menu a.documents { background: url(../img/docs.png) no-repeat 6px center; }
.menu a.messages { background: url(../img/bubble.png) no-repeat 6px center; }
.menu a.signout { background: url(../img/arrow.png) no-repeat 6px center; }
*/

/* Change link color of current main menu link. Use: <li class="off"> */
ul.menu > li.off a { color:#d0a010;  text-decoration:none; } /* gold */
/* This negates above. */
/* Change link color of current dropdown (LP Archive page). Use: <li class="currentpage"> */
ul.menu li > ul > li.currentpage a { color:#d0a010; text-decoration:none; } /* gold */


/******MEDIA******/
/* ----------------1150----------------*/
		@media screen and (max-width: 1150px) {
		/* Scroll Menu with page */
	#LP-Archive-Menu-wrapper { position: relative;
	}
	/* Raise content */
	.content-container { 
		margin: 20px auto 40px auto;
	}
}
	
/* ----------------900----------------*/
		@media screen and (max-width: 900px) {
	.menu li a {
		padding: 0 10px; /* Left and right padding adds to size of link block, which is defined by link text. Reduce from 20px to 10px. */
	}
}

/* ----------------767---Just below iPad-------------*/
		@media screen and (max-width: 767px) {
	.menu li a {
		font-weight: 400;
		font-size: 12px;
	}
}

/* ----------------736---iPhone-------------*/
/* ----------------640----------------*/
		@media screen and (max-width: 640px) {
	
	/* Hide two menu tabs */
	li.hide { display: none;
	}
	/* Reduce text area width */
	.menu ul li ul li { 
		width: 200px;
	}
}

/* ----------------567----Just below 568 screen------------*/
		@media screen and (max-width: 567px) {
	
	/* Option to Hide menu tabs */
	li.hide { display: none;
	}
	/* Reduce text area width */
	.menu ul li ul li { 
		display: none;
	}
}