/**
 * WP-Members CSS
 *
 * CSS for the WP-Members plugin using TwentyTen Theme
 * 
 * This file is part of the WP-Members plugin by Chad Butler
 * You can find out more about this plugin at http://rocketgeek.com
 * Copyright (c) 2006-2012 Chad Butler (email : plugins@butlerblog.com)
 * WP-Members(tm) is a trademark of butlerblog.com
 *
 * @package WordPress
 * @subpackage WP-Members
 * @author Chad Butler 
 * @copyright 2006-2012
 */

/*	
This stylesheet is designed to integrate WP-Members with the TwentyTen theme.
There are quite a few examples in here of what you can do with the table-less 
forms.  You can build off of this or start from scratch and setyour own 
custom css for the plugin (set the location in the admin panel).

See http://rocketgeek.com/tips-and-tricks/setting-up-a-custom-wp-members-stylesheet/
for information on how to set up the plugin with a cusotm stylesheet.

For information how to load custom stylesheets with wp_enqueue_style,
see http://rocketgeek.com/tips-and-tricks/load-a-custom-stylesheet/
*/

/* Error and Dialog Messages */

#wpmem_msg, .wpmem_msg {
	width: 100%;
	padding-top: 10px;
	background: #f0f0f0;
}
#wpmem_msg h2, .wpmem_msg h2 { text-align: left; }

/* Sidebar Login Widget */

#wp-members  { margin-bottom: 20px; }
#wp-members label { color: #000; }
#wp-members .div_text { padding-top: 4px; }
#wp-members .username, #wp-members .password {
	border: 1px solid #ccc;
	background-color:#fff;
	width:176px;
	font:10px verdana,sans-serif;
	color: #000;
	padding:3px 5px 3px 5px;
}
#wp-members .button_div { margin-top:3px; }
#wp-members .buttons {
	font-family:Arial,Helvetica,sans-serif;
	background: #e3e3db;
	font-size:10px; 
	color: #000; 
	margin-left: 0px;
	border-width: 2px;
	border-style: solid;
	border-color: #fff #d8d8d0 #d8d8d0 #fff;
	text-decoration: none;
	text-transform:uppercase;
	font-weight:bold;
}
#wp-members .err {
	width:100%;
    padding: 5px;
    border: 1px #000 solid;
    background-color:#E6E6E6;
}

/* Login Form and Registration Form */

#wpmem_reg, #wpmem_login {
	padding-top: 30px;
	margin-right: 10px;
	margin-left: 10px;
	padding-right: 0px;
	padding-left: 0px;
}

#wpmem_reg fieldset, #wpmem_login fieldset {
	padding: 1em;
	margin-top: 20px;
	margin-bottom: 20px;
	border-radius: 10px;         /* CSS3 */
	-moz-border-radius: 10px;    /* Firefox */
	-webkit-border-radius: 10px; /* Safari,Chrome */
	-webkit-background-clip: padding-box;
	border-style: none;
	font-size: 100%;
	clear: both;
	position: relative;
	display: block;
}
	#wpmem_reg legend, #wpmem_login legend {
	padding: 2em 40px 1em;
	margin-left: 0px;
	background-image: url(images/h2_bg_sp.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% auto;
	position: relative;
	width: 100%;
	font-size: 150%;
}
#wpmem_reg legend::before, #wpmem_login legend::before {
  content: '';
  width: 50px;
  height: 70px;
  background-image: url(images/logosilhouette.png);
  background-position: left top;
  background-size: 100%;
  position: absolute;
  left: -1.5vw;
  background-repeat: no-repeat;
  top: 35%;
	z-index: 1;
}
#wpmem_reg legend::after, #wpmem_login legend::after {
  content: '';
  width: 100%;
  height: 20px;
  position: absolute;
  left: 0%;
  bottom: 0%;
  background-image: url(images/h2_bg_tx.png);
  background-position: 38px top;
  background-size: contain;
  background-repeat: no-repeat;
  border-top: thin solid #990000;
  z-index: 0;
}
#wpmem_reg label.text, #wpmem_reg label.checkbox, 
#wpmem_reg label.textarea , #wpmem_reg label.select,
#wpmem_login label {
	margin-top: 3px;
	margin-right: 2px;
	padding-top: 11px;
	padding-left: 6px;
	float: left;
	display: block;
	font-family: "Helvetica Neue",Arial,Helvetica,"Nimbus Sans L",sans-serif;
	font-size: 80%;
	line-height: 1.1;
	color: #666;
}
#wpmem_reg label.text, #wpmem_reg label.checkbox, 
#wpmem_reg label.select, #wpmem_login label {
	height: 20px;
	margin-left: 0px;
}
#wpmem_reg label.textarea {
	height:190px;
}
#wpmem_reg .form, #wpmem_login .form {
	margin: 0;
	padding: 0;
	border-style: none;
}
#wpmem_reg .clear, #wpmem_login .clear {
	clear:both;
}
#wpmem_reg .holder, #wpmem_login .holder {
	background-color:#fff;
}
#wpmem_reg .div_text, #wpmem_reg .div_checkbox, 
#wpmem_reg .div_textarea, #wpmem_reg .div_select,
#wpmem_login .div_text {
	width: 100%;
	float: right;
	margin-top: 3px;
	padding-top: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
}
#wpmem_reg .div_text, #wpmem_reg .div_checkbox, 
#wpmem_reg .div_select, #wpmem_login .div_text {
	margin-right: 10px;
}
#wpmem_reg .div_textarea {
	height:200px;
}
#wpmem_reg .dropdown,
#wpmem_reg .textbox, #wpmem_login .textbox,
#wpmem_reg .username, #wpmem_login .username,
#wpmem_reg .password, #wpmem_login .password {
	position: relative;
  padding: 5px;
  margin: 2px;
  color: #333;
  background-color: #EAEAEA;
  border: 1px solid #CCC;
  border-radius: 10px; /* CSS3 */
  -moz-border-radius: 10px; /* Firefox */
  -webkit-border-radius: 10px; /* Safari,Chrome */
  behavior: url(/js/PIE.htc);
  font-size: 130%;
  width: 100%;
}
#wpmem_reg .dropdown { 
	width:100%;
}
#wpmem_reg .textbox:focus, #wpmem_reg .textbox:hover, #wpmem_login .textbox:focus, #wpmem_login .textbox:hover,
#wpmem_reg .username:focus, #wpmem_reg .username:hover, #wpmem_login .username:focus, #wpmem_login .username:hover,
#wpmem_reg .password:focus, #wpmem_reg .password:hover, #wpmem_login .password:focus, #wpmem_login .password:hover {
	background-color:#F0FFE6;
}

#wpmem_reg .textarea {
	width:100%;
	height:190px;
}

#wpmem_reg .button_div, #wpmem_login .button_div {
	display: flex;
	flex-flow: wrap;
	justify-content: flex-start;
	border: 1px none #ccc;
	text-align: right;
	margin-top: 10px;
	padding: 5px 5px 10px;
	white-space: nowrap;
	margin-right: 20px;
	margin-bottom: 10px;
	width: 100%;
}

#wpmem_reg .buttons, #wpmem_login .buttons {
	position: relative;
	text-align: center;
	font-size: 100%;
	font-weight: bold;
	padding: 1em;
	border: thin solid #900;
	color: #FFF;
	background: #900;
	border-radius: 100px;
	width: 50%;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	transition: 0.3s;
}
#wpmem_reg .req { color: red; }
#wpmem_reg .captcha { margin: 5px 0px; }
#wpmem_reg .noinput{ 
	height: 32px;
	padding-top: 4px;
	padding-left: 6px;
}
#wpmem_reg input[type="checkbox"] { margin-top: 9px; }
#wpmem_login  input[type="checkbox"] {
	width: 20px;
	height: 20px;
	position: relative;
	left: 26%;
	margin-top: 20px;	
}

/* =========================================================
   ログインフォーム button_div レイアウト調整
   ========================================================= */

/* button_div内の要素をきれいに横並びにする */
#wpmem_login .button_div {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	margin-right: 0;
}

/* チェックボックスの位置ズレを解除（元のposition:relative; left:26%を打ち消す） */
#wpmem_login input#rememberme {
	position: static;
	left: auto;
	margin: 0 4px 0 0;
	width: 18px;
	height: 18px;
	order: 1;
}

/* ラベルを横並びに調整 */
#wpmem_login label[for="rememberme"] {
	width: auto;
	float: none;
	padding: 0;
	margin: 0 auto 0 0;
	display: inline-flex;
	align-items: center;
	order: 2;
}

/* ログインボタンは右側に配置 */
#wpmem_login .buttons {
	width: 50%;
	min-width: 140px;
	margin: 0;
	order: 3;
	flex: 0 0 auto;
}

/* スマホ表示：ボタンは100%幅で下段、チェックボックス＋テキストは上段 */
@media screen and (max-width: 767px) {
	#wpmem_reg legend, #wpmem_login legend {
	padding: 2em 0px 0.5em 1.5em;
    margin-left: 0px;
    background-image: url(images/h2_bg_sp.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% auto;
    position: relative;
}
#wpmem_reg legend::before, #wpmem_login legend::before {
  content: '';
    width: 40px;
    height: 60px;
    background-image: url(images/logosilhouette.png);
    background-position: left top;
    background-size: 100%;
    position: absolute;
    left: -2%;
    background-repeat: no-repeat;
    top: 40%;
}
#wpmem_reg legend::after, #wpmem_login legend::after {
  content: '';
    width: 100%;
    height: 1px;
    position: absolute;
    background-color: #b20000;
    left: 0%;
    bottom: 10%;
}
	#wpmem_login .button_div {
		flex-direction: row;
	}
	#wpmem_login input#rememberme,
	#wpmem_login label[for="rememberme"] {
		order: 1;
	}
	#wpmem_login .buttons {
		order: 2;
		flex-basis: 100%;
		width: 100%;
		margin-top: 10px;
	}
}