/* Screen cascading style sheet for CIfA e-additional functionality module */

/* MEMBER PANEL STYLES */
#block-cifa-cifa-members-menu {float: right}

.cifa-member-button {position: relative; padding: 9px 20px 8px}
.cifa-member-button:focus, .cifa-member-button:hover {background: #560D55}
.cifa-member-button:focus > a, .cifa-member-button:hover > a {color: #FFF}
.cifa-member-button > a {color: #FACF4C}

.cifa-member-panel {position: absolute; top: 100%; background: #FFF; border: 2px solid #C0C0C0; opacity: 0; padding: 10px; transform: translateY(-2em); transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s; visibility: hidden; z-index: -1; min-width: 280px}
.cifa-member-panel ul {padding: 0}
.cifa-member-panel .cifa-member-details {float: left; font-size: 15px}
.cifa-member-panel .cifa-member-details .username {color: #731472; font-size: 28px}
.cifa-member-panel .cifa-member-edit {font-size: 12px; margin-top: 5px}
.cifa-member-panel .cifa-member-menu {float: left; border-top: 2px solid #E4E4E4; margin-top: 10px; width: 100%}
.cifa-member-panel .cifa-member-menu .links {margin-bottom: 0}
.cifa-member-panel .cifa-member-menu .links li {list-style-type: none; margin: 0; padding: 10px 0 0 0}
.cifa-member-panel #user-login-form li {list-style-type: none}
.cifa-member-panel #user-login-form li > a {font-size: 12px}

/* SEARCH PANEL STYLES */
#block-cifa-cifa-search-panel {float: right}

#cifa-search-button {position: relative; background-image: url(/sites/default/modules/cifa/images/search-icon-white.svg); background-position: center center; background-repeat: no-repeat; background-size: 70%; height: 40px; width: 40px}
#cifa-search-button > a {display: block; height: 40px; width: 40px}


/* ----- SCREENS UP TO 600PX ----- */
/* ================================ */

@media only screen and (max-width: 600px) {
	#block-cifa-cifa-members-menu {position: absolute; right: 0}
	.cifa-member-button a {font-size: 22px}
	.logged-in .cifa-member-button {line-height: 0.9; padding: 0; width: 100px}
	.logged-in .cifa-member-button a {font-size: 14px}
	.cifa-member-button .cifa-label {display: none}
	.cifa-member-panel {right: 0}
	
	#block-cifa-cifa-search-panel {position: absolute; top: 5px; right: 100px; border-right: 1px solid #FFF; margin-right: 10px; padding-right: 10px}
	#cifa-search-panel {display: none}
}

/* ----- SCREENS UP TO 1024PX ----- */
/* ================================ */
@media only screen and (max-width: 1024px) {

}


/* ----- SCREENS ABOVE 1024PX ----- */
/* ================================ */

@media only screen and (min-width: 1024px) {
	.cifa-member-button {border-color: #834C82; border-style: solid; border-width: 0 1px; margin-right: 5px}
	.cifa-member-panel {left: 0}
	
	.cifa-member-button:focus .cifa-member-panel, .cifa-member-button:focus-within .cifa-member-panel, .cifa-member-button:hover .cifa-member-panel {opacity: 1; transform: translateY(0%); transition-delay: 0s, 0s, 0.3; visibility: visible; z-index: 1}
	
	#cifa-search-button {background-size: 45%; width: 60px}
	#cifa-search-button:focus #cifa-search-panel, #cifa-search-button:focus-within #cifa-search-panel, #cifa-search-button:hover #cifa-search-panel {opacity: 1; transform: translateY(0%); transition-delay: 0s, 0s, 0.3; visibility: visible; z-index: 1}
	#cifa-search-button > a {width: 60px}
	#cifa-search-panel {position: absolute; top: 100%; background: #FFF; border: 2px solid #C0C0C0; opacity: 0; padding: 10px; transform: translateY(-2em); transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s; visibility: hidden; z-index: -1; min-width: 280px}
}