pen/assets/css/pen-search-bar.css

#pen_search {
	background: #8f8f8f;
	background: -ms-linear-gradient(325deg, #8f8f8f 0%, #5f5f5f 100%);
	background: linear-gradient(125deg, #8f8f8f 0%, #5f5f5f 100%);
	position: relative;
	z-index: 2;
}
body.pen_drop_shadow #pen_search {
	box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
body.pen_width_boxed #pen_search {
	padding-left: 2em;
	padding-right: 2em;
}
body.pen_round_corners.pen_width_boxed #pen_header #pen_search {
	border-radius: 0 0 5px 5px;
}
#pen_search:before {
	background: rgba(0,0,0,0.25);
	bottom: 0;
	content: "";
	height: 1px;
	left: 0;
	position: absolute;
	width: 100%;
}
#pen_search .widget {
	color: #eee;
}
body.pen_drop_shadow #pen_search .widget {
	text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
#pen_search .widget a {
	color: #80ddff;
}
#pen_search .widget a:focus,
#pen_search .widget a:hover,
#pen_search .widget a:active {
	color: #cdf1ff;
}
#pen_search .search-form {
	line-height: 1;
	position: relative;
	width: 100%;
}
#pen_search .search-form .search-field {
	background: rgba(255,255,255,0.9);
	border: 1px solid rgba(0,0,0,0.3);
	font-size: 2em;
	line-height: 1;
	margin-left: -1px !important;
	padding: 0.5em 20% 0.5em 1em;
	transition: box-shadow .2s;
	width: 100%;
}
body.pen_drop_shadow #pen_search .search-form .search-field {
	box-shadow: 1px 1px 1px rgba(255,255,255,0.05) inset, 0 0 7px rgba(0,0,0,0.2), 2px 2px 4px rgba(0,0,0,0.3), 5px 5px 10px rgba(0,0,0,0.2) inset;
}
#pen_header.pen_header_sticked #pen_search .search-form .search-field {
	font-size: 1.5em;
}
body.pen_header_sticky #pen_search .search-form .search-field,
body.pen_header_sticky #pen_search .search-form .search-submit {
	transition: font-size .3s;
}
body.pen_round_corners #pen_search .search-form .search-field {
	border-radius: 100px;
}
#pen_search .search-form .search-field:focus,
#pen_search .search-form .search-field:active,
#pen_search .search-form .search-submit:focus {
	outline: none !important;
	text-decoration: none;
}
#pen_search .search-form .search-submit {
	background: #00a9ff;
	background: -ms-linear-gradient(to bottom, #00a9ff 0%,#093a89 100%);
	background: linear-gradient(to bottom, #00a9ff 0%,#093a89 100%);
	border: 0 none;
	color: #fff;
	font-size: 1.5em;
	font-weight: normal;
	height: 100%;
	margin: 0 -1px 0 0 !important;
	min-height: 100%;
	min-width: 150px;
	padding: 0.5em 0;
	position: absolute;
	right: 0;
	text-align: center;
	text-transform: uppercase;
	top: 0;
	width: 18%;
	z-index: 1000;
}
body.pen_drop_shadow #pen_search .search-form .search-submit {
	box-shadow: 1px 1px 0 rgba(255,255,255,0.25) inset;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
#pen_header.pen_header_sticked #pen_search .search-form .search-submit {
	font-size: 1em;
}
body.pen_round_corners #pen_search .search-form .search-submit {
	border-radius: 100px;
}
#pen_search .search-form .search-submit:active {
	background: #093a89;
}
#pen_search_top {
	margin: 0 0 1.5em;
}
#pen_search_bottom {
	margin: 1.5em 0 0;
}
@media only screen and (max-width:728px) {
	#pen_search .search-form .search-field {
		font-size: 1em;
		padding-right: 35%;
	}
	#pen_search .search-form .search-submit {
		font-size: 1em;
		width: 33%;
	}
}