@charset "UTF-8";

html{
	height: 100%;
}

body{
	height: 100%;
	margin: 0px;
	background-color: rgb(230, 230, 230);
}

#Full_Height_Wrapper{
	margin: 0px auto;
	width: 85%;
	max-width: 1000px;
	min-width: 800px;
	min-height: 100%;
	background-color: rgb(255, 255, 255);
	box-shadow: 0px 0px 25px rgb(135, 135, 135);
}

/* If the page width is 800px or less then make Full_Height_Wrapper the full width of the page and also make sure it is
 * a minimum of 640px wide. */
@media all and (max-width: 800px){
	#Full_Height_Wrapper{
		width: 100%;
		min-width: 640px;
	}
}

#Header{
	width: 100%;
	background-color: rgb(30, 60, 200);
	border-bottom: 3px solid rgb(175, 175, 175);
}

#Header_Content_Centering_Wrapper{
	position: relative;
	margin: 0px auto;
	width: 800px;
}

/* If the page width is 800px or less then make Header_Content_Centering_Wrapper the full width of the page and also
 * center its contents. */
@media all and (max-width: 800px){
	#Header_Content_Centering_Wrapper{
		width: 100%;
		text-align: center;
	}
}

#Jeremy_Zerfas_Logo{
	margin: 10px 20px 6px;
	width: 186px;
	height: 80px;
}

/* Navigation menubar */
#Navigation_Menubar{
	position: absolute;
	bottom: 0px;
	margin: 0px 0px 5px 220px;
	height: 43px;
	border-radius: 20px;
	background-color: rgb(220, 220, 220);
	background: linear-gradient(rgb(240, 240, 240), rgb(200, 200, 200));
	box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
}

/* If the page width is 800px or less then make the Navigation_Menubar full width, remove the round edges and drop
 * shadow, and move it under the Jeremy Zerfas logo. */
@media all and (max-width: 800px){
	#Navigation_Menubar{
		position: static;
		margin: 0px;
		width: 100%;
		border-radius: 0px;
		box-shadow: none;
	}
}

/* Navigation menubar entries */
#Navigation_Menubar>ul{
	margin: 0px;
	padding: 5px;
	vertical-align: middle;
	list-style: none;
}

/* Navigation menubar entries - list properties */
#Navigation_Menubar>ul>li{
	display: inline-block;
}

/* Navigation menubar entries - link properties */
#Navigation_Menubar>ul>li>a{
	position: relative;
	padding: 8px 25px;
	height: 17px; /* The height of the block will vary a little between browsers if not explicitly set. */
	display: block;
	color: rgb(0, 0, 0);
	font-family: "Arial", sans-serif;
	font-weight: bold;
	font-size: 16px;
	text-decoration: none;
	text-shadow:0px 1px 2px rgb(150, 150, 150);
}

/* Navigation menubar hovered entries */
#Navigation_Menubar>ul>li>a:hover{
	border-radius: 15px;
	background-color: rgb(190, 190, 190);
	background: linear-gradient(rgb(180, 180, 180), rgb(200, 200, 200));
	color: rgb(0, 0, 0);
	box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.5);
}

#Content{
	padding: 25px;
	/* Can't easilly make Content div the full height of the page so specify backgrounds in the parent div instead. */
	overflow: auto;
}

div.Content_Section{
	overflow: auto;
	margin-bottom: 2em;
}

.Content_Section_Title{
	margin: 0em 0em 0.5em;
	border-bottom: 2px solid rgb(175, 175, 175);
	font-family: "Helvetica", "Arial", sans-serif;
	font-style: italic;
	font-size: x-large;
}

div.Content_Subsection{
	overflow: auto;
	margin-left: 1em;
	margin-bottom: 1em;
}

.Content_Subsection_Title{
	margin: 0em 0em 0.333em;
	border-bottom: 1px solid rgb(175, 175, 175);
	font-family: "Helvetica", "Arial", sans-serif;
	font-size: large;
}

.Center{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.Center_Content_Horizontally{
	text-align: center;
}

.Clear_Floats_On_Both_Sides{
	clear: both;
}

.Constrain_To_Full_Width{
	max-width: 100%;
}

.Drop_Shadow{
	box-shadow:0 0 1em;
}

.Error_Message{
	font-weight: bold;
	color: rgb(255, 0, 0);
}

.Float_Left{
	float: left;
}

.Float_Right{
	float: right;
}

.Margin{
	margin: 1em;
}

.Padded{
	padding: 1em;
}

dl>dt{
	font-weight: bold;
}

dl>dd{
	margin: 0 0 1em 1em;
}

.Padded_List>li{
	margin-bottom: 0.75em;
}

ul.Unbulleted_List{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.Warning_Message{
	font-weight: bold;
	color: rgb(255, 0, 0);
}

div.Captioned_Content>div{
	font-size: smaller;
	text-align: center;
}

#FooterPlaceholder{
	height: 43px;
}

#Footer{
	position: relative;
	bottom: 43px;
	margin: 0px auto -43px;
	width: 85%;
	max-width: 1000px;
	min-width: 800px;
	height: 40px;
	background-color: rgb(30, 60, 200);
	border-top: 3px solid rgb(175, 175, 175);
}

/* If the page width is 800px or less then make Footer the full width of the page and also make sure it is a minimum of
 * 640px wide. */
@media all and (max-width: 800px){
	#Footer{
		width: 100%;
		min-width: 640px;
	}
}

#Copyright{
	padding: 10px;
	color: rgb(255, 255, 255);
	font-size: small;
	text-align: center;
}