﻿:root {
	--sitefont: GraphikRegular,sans-serif;
	--font2: GraphikSemibold, sans-serif;
	--color1: #005288;
	--color2: #5e9732;
	--radius: 5px;
}

#menu_container,
ul.horizontal.site-menu {
	background-color: var(--color1) !important;
	border-top: none;
	border-bottom: none;
}

	#menu_container nav,
	#menu_container nav .nav-container {
		left: initial;
	}

	#menu_container nav {
		max-width: 70%;
		margin-top: 0px;
		float: right;
	}

#menu_container {
	border-top: none;
	border-bottom: none;
}

#nav_header_container {
	border-bottom: none;
	padding-bottom: 0px;
	background-color: var(--color1);
	margin-top: 100px;
}

#nav_logo {
	float: left;
	background-image: url(https://s3.amazonaws.com/ClubExpressClubFiles/965649/graphics/toplogo_719975385.png);
	width: 200px;
	height: 200px;
	background-size: cover;
	cursor: pointer;
	margin-left: 5rem;
	margin-bottom: 5px;
	position: absolute;
	left: 0px;
	top: -90px;
	z-index: 100;
}

ul.horizontal.site-menu li span a,
ul.horizontal.site-menu li span span {
	color: #FFF !important;
	font-family: var(--font2) !important;
	font-size: 20px !important;
	font-weight: normal !important;
	line-height: 45px !important;
}

ul.horizontal.site-menu li:hover {
	background-color: var(--color2) !important;
}

ul.horizontal.site-menu {
	width: auto !important;
	float: right;
}

	ul.horizontal.site-menu li.sub-parent:hover ul {
		top: 50px !important;
		left: initial !Important;
		right: 0px !Important;
	}

	ul.horizontal.site-menu ul.sub-menu li span a {
		font-family: var(--sitefont) !important;
		font-size: 18px !Important;
		text-align: left !important;
		font-weight: normal !important;
	}

	ul.horizontal.site-menu ul.sub-menu li {
		background-color: var(--color1) !important;
		border-bottom: none !important;
	}

		ul.horizontal.site-menu ul.sub-menu li:hover {
			background-color: var(--color2) !important;
		}

	ul.horizontal.site-menu ul.sub-menu {
		border-top: none !important;
	}

#nav_header_container header {
	display: none;
}

.static-bar {
	position: absolute;
	z-index: 1;
	top: 30px;
	background-color: #FFF;
}

.horizontal.control-panel-link,
#full_name,
#favorites_hover {
	color: #000;
	font-family: var(--sitefont);
}

#panel_links a:hover {
	background-color: var(--color2) !important;
}

.admin-table th,
.manager-table th {
	background-color: var(--color1) !important;
}

.below-content {
	border-top: 1px solid #cdcdcd;
}

footer {
	background-color: #FFF;
}

.footer-container, .footer-container a, .footer-container span {
	font-family: var(--sitefont);
	color: #000;
	font-size: 16px;
	line-height: 2;
}

#panel_links a {
	font-size: 18px !important;
	font-family: var(--font2) !important;
	font-weight: normal !important;
}

a.ce-button,
#mobile_content_column a.ce-button,
.inner-column a.ce-button {
	font-family: var(--font2);
	font-weight: normal;
	padding: 8px 15px;
	background-color: transparent;
	color: #FFF;
	border-radius: var(--radius);
	background-image: none !important;
	background-color: var(--color2);
	border: 2px solid var(--color1) !important;
	text-transform: none;
	font-size: 16px;
	transition: all .5s ease;
	white-space: normal;
	text-shadow: none !important;
}

	a.ce-button:hover,
	#mobile_content_column a.ce-button:hover,
	.inner-column a.ce-button:hover {
		border: 2px solid var(--color1) !important;
		background-color: var(--color1) !important;
		color: #FFF;
		text-shadow: none !important;
	}

.admin-page-wrapper a.ce-button,
.popup-wrapper a.ce-button {
	font-size: 13px !important;
	text-shadow: none !important;
}


.login-buttons a {
	color: #FFF !important;
	background-color: var(--color2) !important;
	border-radius: var(--radius);
	border: 2px solid var(--color1) !important;
}

.login-buttons span {
	padding-right: 0px;
	background-image: none !important;
}

.login-buttons a:hover {
	background-color: var(--color1) !important;
	color: #FFF;
	border: 2px solid var(--color1) !important;
}

#nav_header_container.cloned {
	box-shadow: 0px 0px 4px rgba(0,0,0,.35);
}

	#nav_header_container.cloned #nav_logo {
		height: 100px;
		width: 100px;
		top: 0px;
	}

	#nav_header_container.cloned #menu_container {
		padding-top: 25px;
		padding-bottom: 25px;
	}

#hbuttons {
	float: right;
	margin-top: -10px;
}

	#hbuttons a {
		vertical-align: middle;
		display: inline-block;
	}

		#hbuttons a.ce-button {
			font-size: 18px !Important;
			margin-left: 10px;
		}

		#hbuttons a.soc-link {
			margin-left: 5px;
		}

.static-bar #non_member_panel .login-link {
	display: none;
}

@media (min-width : 768px) and (max-width : 1390px) {
	/* Styles */
	#nav_logo {
		margin-left: 20px;
	}
}

.menu-toggle {
	background-color: var(--color1);
}

.mobile-site-menu li {
	background-color: var(--color1) !important;
}

.mobile-site-menu ul.sub-menu li {
	background-color: #f3f3f3 !important;
}

.breakout {
	background-color: var(--color1);
	padding: 30px;
	text-align: center;
	font-family: var(--font2);
	color: #FFF;
	font-size: 20px;
	margin-bottom:.5rem;
}

	.breakout h1,
	.breakout h2,
	.breakout h3 {
		width: 100% !important;
		max-width: initial !important;
		padding-right: 0px !important;
		text-align: center;
		color: #FFF;
	}

	.breakout hr {
		display: block;
		width: 150px;
		height: 3px;
		border: none;
		background-color: #FFF;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.breakout a.ce-button,
	.inner-column .breakout a.ce-button {
		background-color: var(--color2) !important;
		border: 2px solid var(--color2) !important;
		font-size: 20px !Important;
		font-weight: normal !important;
	}

		.breakout a.ce-button:hover,
		.inner-column .breakout a.ce-button:hover {
			background-color: transparent !important;
		}

@media (max-width : 768px) {
	/* Styles */
	#nav_header_container #nav_logo {
		display: none;
	}

	#nav_header_container header {
		display: block;
	}

	#menu_container nav {
		max-width: initial;
		float: none;
	}

	#nav_header_container.cloned #menu_container {
		padding-top: 0px;
		padding-bottom: 0px;
	}
}

/** Home Page Overrides **/
.home-page .trirow .title {
	background-position: 95% 20px;
}

@media (min-width : 320px) and (max-width :767px) {
	/* Styles */
	.home-page #home_hero {
		height: 250px;
	}

	.home-page .homeop {
		font-size: 16px;
		left: initial;
		width: 100%;
		box-sizing: border-box;
		margin-left: 0px;
		margin-top: -80px;
	}

		.home-page .homeop h1 {
			font-size: 24px;
		}

	.home-page #homemap {
		height: auto;
		padding-top: 30px;
		padding-bottom: 30px;
	}

	.home-page .mapover {
		position: relative;
		width: 100%;
		left: initial;
		margin-left: initial;
		font-size: 16px;
		margin-top: initial;
	}

		.home-page .mapover h1 {
			font-size: 24px;
		}

	.home-page .trirow .title {
		background-position: 95% 20px;
	}

	#mobile_content_column .home-page a.ce-button {
		width: auto !Important;
		display: inline-block !important;
	}
}

#content_column {
	padding-top: 10px;
}

.crumb-trail-container {
	text-align: right;
}

h1 {
	text-align: center;
}

.column.quarter h1,
.column.threequarter h1,
.column.half h1 {
	text-align: left;
}
/** Various Site Template Modifications **/
.contact-detail-box {
	background-color: transparent;
	border: none;
	font-size: 20px;
	padding: 0px;
	border-radius: 0px;
	border-bottom: 1px solid #cdcdcd;
	padding-bottom: 10px;
}

	.contact-detail-box .user-form .form-row label {
		font-size: 20px;
		font-family: var(--font2);
		font-weight: normal;
	}

	.contact-detail-box .top-label .form-row input,
	.contact-detail-box .top-label .form-row input,
	.contact-detail-box .top-label .form-row .textarea-wrapper,
	.contact-detail-box .top-label .form-row select,
	.contact-detail-box .top-label .form-row .comments-wrapper {
		margin-left: 0px;
	}

#add_me_container .form-row label {
	width: 100%;
	padding: 0px;
	font-size: 18px;
	font-family: var(--font2);
	font-weight: normal;
	text-align: left;
}

#add_me_container .form-row input,
#add_me_container .form-row select {
	clear: left;
	margin: 0px;
	font-size: 18px;
}

div.instruction-text {
	margin-left: 0px;
	font-size: 13px;
}

#donation_entry .form-row label,
#donation_entry .form-row .field-label {
	font-size: 18px;
}

#cal_nav_panel a.ce-button.list-button {
	width: auto !Important;
}

.manager-search-wrapper a.ce-button {
	background-image: none !important;
	color: #FFF !important;
}

.manager-search-wrapper .search-panel .search-button-panel-up {
	position: relative;
	text-align: right;
}

#layout_wrapper .nonmember-contactbox .form-row label {
	width: 140px;
}

#member_type {
	font-size: 18px;
	font-weight: bold;
}

	#member_type .form-row .field-label {
		width: 200px;
		font-size: 18px;
	}

	#member_type .form-row input,
	#member_type .form-row select,
	#member_type .form-row label {
		font-size: 18px;
	}

#member_contact .form-row label {
	width: 150px;
}

#member_contact .form-row input,
#member_contact .form-row select,
#member_contact .form-row label {
	font-size: 18px;
}

.agreement-panel {
	font-size: 20px;
}

	.agreement-panel .agree-panel {
		font-size: 18px;
	}

.wizard-total {
	font-family: var(--font2);
}

.main-error-message,
.main-error-message a {
	font-size: 18px;
}

#password_hints,
#l3,
#password1_confirm,
#username_wrapper label,
#username_wrapper input,
#l2,
#password1 {
	font-size: 18px;
}

#layout_wrapper #l2,
#layout_wrapper #l3,
#layout_wrapper #l1 {
	width: 160px;
}

#member_signup_by_member_instruction_div {
	font-size: 18px;
}

#member_services,
.member-services-table td {
	font-size: 18px;
}

	#member_services .wizard-total {
		float: none;
	}

#member_joining_agreement,
#member_joining_agreement span {
	font-size: 18px !important;
	line-height: 1.5;
}

#member_summary,
#member_summary .form-row .field-label {
	font-size: 18px;
}

	#member_summary .form-row .field-label {
		width: 160px;
	}
/** Events **/
td.calendar-grid-day,
td.calendar-grid-day a,
.calendar-grid-title tr td,
.calendar-grid-title a {
	font-size: 18px !important;
}

th.calendar-grid-day-header {
	font-size: 18px;
}

.event-detail-box .field-label {
	font-size: 18px;
	width: 100px;
}

.events-buttons .vcalbutton,
.events-buttons .vcalbutton:hover {
	padding-left: 10px !important;
	text-align: center;
	background-image: none !Important;
	width: 125px;
}

.registrants-fees,
.registrants-fees .form-row label,
.registrant-fee,
.event-detail-box .field-label.registration-title,
#bottom_event_detail {
	font-size: 18px;
}

#event_detail_wrapper .event-detail-box,
#event_detail_right .events-button-holder,
.bottom-event-detail-box {
	border: none;
	background-color: #FFF;
}

.event-detail-box .field-label {
	width: auto;
}
.breakout.breakout-green {
	background-color: var(--color2);
}

.hr-break {
	padding-bottom: 30px;
	position: relative;
}

	.hr-break:after {
		position: absolute;
		bottom: 10px;
		height: 3px;
		background-color: #FFF;
		width: 150px;
		left: 50%;
		margin-left: -75px;
		content: '';
	}
.img-right {
	float:right;
}

.content-wrapper {
	margin-left: .5rem;
	margin-right: .5rem;
	max-width: 48rem;
	padding: .25rem;
	border: .125rem solid #aaa;
	border-radius: 6px;
}
.img {
	max-height: 16rem;
	padding: .25rem;
	border: .125rem solid #000;
}
@media (min-width: 40em) {
	.content-wrapper {
		margin-left: auto;
		margin-right: auto;
		padding: 1rem;
	}
	.img-right {
		margin-left: 1rem;
	}
}