/* WEB BIRD MEMBERS AREA (Front End Styles)
 * Styles and designs for the front of the website (where the plugin will be used)
 */

/*-------Universal Styles--------*/
.cf:before,
.cf:after {
    content: " "; 
    display: table; 
}
.cf:after {
    clear: both;
}


/*-------Members Dashboard-------*/
.wb_dashboard_submenu {
	display: block;
	margin-bottom: 15px;
}
.wb_dashboard_submenu .menu_wrap{
	padding: 0px;
	margin: 0px;
}
.menu_wrap .menu_item{
	display: inline-block;
}
.menu_wrap .menu_item a{
	display: inline-block;
	padding: 7px 12px;
	background: #eee;
}
.menu_wrap .menu_item.active a{
	background: #ccc;
}


/*-------Members Forms (general styling)-------*/
.wb-form{
	position: relative;
}
.wb-form .form{
	padding: 15px;
	background: #eee;
	margin-bottom: 20px;
	position: relative;
	z-index: 2;
}
.wb-form .wb-field-container{
	margin: 0px 0px 15px 0px;
	position: relative;
}
.wb-form .wb-field-container label{
	float: left;
	width: 40%;
	cursor: pointer;
	padding-left: 35px;
}
.wb-form .wb-field-container .help-icon{
	position: absolute;
  	top: 0px;
  	left: 0px;
 	background: #ccc;
  	width: 25px;
  	height: 25px;
  	line-height: 25px;
 	text-align: center;
  	border-radius: 50%;
  	cursor: pointer;
}
.wb-form .wb-field-container .help-text{
	display: none;
	float: left;
	width: 100%;
	margin: 5px 0px;
}

.wb-form .wb-field-container input[type="text"],
.wb-form .wb-field-container input[type="email"],
.wb-form .wb-field-container input[type="url"],
.wb-form .wb-field-container input[type="tel"],
.wb-form .wb-field-container input[type="password"],
.wb-form .wb-field-container input[type="number"],
.wb-form .wb-field-container select,
.wb-form .wb-field-container textarea{
	float: left;
	width: 60%;
	min-height: 38px;
	border: solid 1px #ccc;
}

.wb-form .wb-field-container input[type="submit"],
.wb-form .wb-field-container input[type="button"]{
	width: 60%;
  	float: right;
  	border: 0px;
  	border-radius: 0px;
  	background: #747474;
  	color: #fff;
  	padding: 10px 15px;
  	min-height: 38px;
}
.wb-form .wb-field-container input[type="submit"]:active,
.wb-form .wb-field-container input[type="button"]:active{
	padding: 10px 15px;
}
/*focusing on a field*/
.wb-form .wb-field-container input[type="text"]:focus,
.wb-form .wb-field-container input[type="email"]:focus,
.wb-form .wb-field-container input[type="url"]:focus,
.wb-form .wb-field-container input[type="tel"]:focus,
.wb-form .wb-field-container input[type="password"]:focus,
.wb-form .wb-field-container input[type="number"]:focus,
.wb-form .wb-field-container select,
.wb-form .wb-field-container textarea{
	border: solid 1px #747474;
}
/*field is currently in error*/
.wb-form .wb-field-container input.error[type="text"],
.wb-form .wb-field-container input.error[type="email"],
.wb-form .wb-field-container input.error[type="url"],
.wb-form .wb-field-container input.error[type="tel"],
.wb-form .wb-field-container input.error[type="password"],
.wb-form .wb-field-container input.error[type="number"],
.wb-form .wb-field-container select.error,
.wb-form .wb-field-container textarea.error{
	border: solid 1px #e74c3c;
}
/*field is current valid (Validation passed)*/
.wb-form .wb-field-container input.valid[type="text"],
.wb-form .wb-field-container input.valid[type="email"],
.wb-form .wb-field-container input.valid[type="url"],
.wb-form .wb-field-container input.valid[type="tel"],
.wb-form .wb-field-container input.valid[type="password"],
.wb-form .wb-field-container input.valid[type="number"],
.wb-form .wb-field-container select.valid,
.wb-form .wb-field-container textarea.valid{
	border: solid 1px #2ecc71;
}


/*error containers for signup / login*/
.wb-form .wb-error-container{
	margin: 0px;
	list-style-type: none;
	background: #fff;
	padding: 0px;
}
.wb-form .wb-error-container li{
	padding: 10px 15px;
}
.wb-form .wb-error-container li:before{
	content: '-';
	margin-right: 5px;
	display: inline-block;
}
.wb-form .wb-error-container li label{
	cursor: pointer;
}

/*loading container for signup / login (used on submit etc)*/
.wb-loading-container{
	z-index: 1;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	padding: 20%;
	text-align: center;
	background: #000;
	background: rgba(0,0,0,0.5);
	opacity: 0;
	-webkit-transition: all 300ms ease-in;
	-moz-transition: all 300ms ease-in;
	-ms-transition: all 300ms ease-in;
	-o-transition: all 300ms ease-in;
	transition: all 300ms ease-in;
}
.wb-loading-container.active{
	opacity: 1;
	z-index: 3;
}
.wb-loading-container .wb-loading-inner{
	background: #fff;
	padding: 15px;
	display: inline-block;
}
.wb-loading-container .wb-loading-inner .icon {
	margin-left: 10px;
}


/*-------Signup Notices-------*/
/*displays to the user a notice after the signup*/
.wb-notice{
	padding: 15px;
	background: none repeat scroll 0% 0% #EEE;
	margin-bottom: 20px;	
}


/*-------Shortcodes-------*/
/*Styling and display for the various shortcodes*/
.web-members-table{
	border: 0px;
}
.web-members-table th,
.web-members-table td{
	padding: 5px 10px;
}

.web-members-table thead tr{
	background: #ccc;	
}
.web-members-table tbody tr{
	background: #eee;
	-webkit-transition: all 300ms ease-in;
	-moz-transition: all 300ms ease-in;
	-o-transition: all 300ms ease-in;
	-ms-transition: all 300ms ease-in;
	transition: all 300ms ease-in;
}
.web-members-table tbody tr:nth-of-type(even){
	background: #E4E4E4;
}
.web-members-table tbody tr:hover,
.web-members-table tbody tr:nth-of-type(odd):hover,
.web-members-table tbody tr:nth-of-type(even):hover{
	background: #fff;
}