// Based of Pure forms style
// https://github.com/yahoo/pure/blob/master/src/forms/css/forms.css

form input[type="text"],
form input[type="password"],
form input[type="email"],
form input[type="url"],
form input[type="date"],
form input[type="month"],
form input[type="time"],
form input[type="datetime"],
form input[type="datetime-local"],
form input[type="week"],
form input[type="number"],
form input[type="search"],
form input[type="tel"],
form input[type="color"],
form select,
form textarea {
	display: inline-block;
	min-height: 40px;
    width: 100%;
    font-size: 16px;
    line-height: 36px;
	padding: 6px 12px;
	vertical-align: middle;
	background-color: transparent;
	color: $color-2;
	border: 1px solid $color-10;
	@include border-radius( 5px );
    @include transition( all .3s ease );
}
form textarea {
	@include border-radius( 5px );
	padding:10px 12px;
}
.on-dark-bg, #footer-widgets{
	input::placeholder {
	  color:rgba(255, 255, 255, 0.5);
	}
	form input[type="text"],
	form input[type="password"],
	form input[type="email"],
	form input[type="url"],
	form input[type="date"],
	form input[type="month"],
	form input[type="time"],
	form input[type="datetime"],
	form input[type="datetime-local"],
	form input[type="week"],
	form input[type="number"],
	form input[type="search"],
	form input[type="tel"],
	form input[type="color"],
	form textarea {
		color: rgba(255, 255, 255, 0.6);
		border-color: rgba(255, 255, 255, 0.2);
		background-color:transparent;
	}
}
.on-dark-bg, #footer-widgets{
	select {
		border-color: rgba(255, 255, 255, 0.2);
		background-color:transparent;
		color: rgba(255,255,255,0.6);
	}
	select option {
		color:#333;
	}
}
form input[type="number"] {
	max-width: 50px;
    padding: 0 0 0 8px;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea {
    -webkit-appearance: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
	display: none;
}

form textarea {
	min-height: 50px;
    line-height: 1.1;
    resize: vertical;
}

input[type="checkbox"] {
	display: inline-block;
	background-color: #fff;
	border: 1px solid $color-13;
	line-height: 0;
	width: 16px;
	min-width: 16px;
	height: 16px;
	margin: -3px 10px 0 0 !important;
	outline: 0;
	text-align: center;
	vertical-align: middle;
	clear: none;
	cursor: pointer;
	-webkit-appearance: none;
	@include box-shadow( inset 0 1px 2px rgba(0,0,0,.1) );
	@include transition( .05s border-color ease-in-out );
}
.on-dark-bg {
	input[type="checkbox"] {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.2);
}

}
input[type=radio]:checked:before,
input[type=checkbox]:checked:before {
	float: left;
	display: inline-block;
	vertical-align: middle;
	width: 16px;
	font: 400 14px/1 dpr-icomoon;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

input[type=checkbox]:checked:before {
	content: '\f00c';
	margin-bottom: -1px;
	color: $color-5;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
form input:not([type]) {
	display: inline-block;
	padding: 5px 10px;
	border: 1px solid #ccc;
	@include border-radius( 30px );
	@include box-shadow( inset 0 1px 3px #ddd );
}


/* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */
/* May be able to remove this tweak as color inputs become more standardized across browsers. */
form input[type="color"] {
	padding: 5px 10px;
}


form input[type="text"]:focus,
form input[type="password"]:focus,
form input[type="email"]:focus,
form input[type="url"]:focus,
form input[type="date"]:focus,
form input[type="month"]:focus,
form input[type="time"]:focus,
form input[type="datetime"]:focus,
form input[type="datetime-local"]:focus,
form input[type="week"]:focus,
form input[type="number"]:focus,
form input[type="search"]:focus,
form input[type="tel"]:focus,
form input[type="color"]:focus,
form select:focus,
form textarea:focus {
	border-color: $color-13;
	outline: 0;
}
.on-dark-bg {
	form input[type="text"]:focus,
	form input[type="password"]:focus,
	form input[type="email"]:focus,
	form input[type="url"]:focus,
	form input[type="date"]:focus,
	form input[type="month"]:focus,
	form input[type="time"]:focus,
	form input[type="datetime"]:focus,
	form input[type="datetime-local"]:focus,
	form input[type="week"]:focus,
	form input[type="number"]:focus,
	form input[type="search"]:focus,
	form input[type="tel"]:focus,
	form input[type="color"]:focus,
	form select:focus,
	form textarea:focus {
		border-color: rgba(255, 255, 255, 0.5);
	}
}
/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
form input:not([type]):focus {
	border-color: $color-13;
	outline: 0;
}

form input[type="file"]:focus,
form input[type="radio"]:focus,
form input[type="checkbox"]:focus {
	outline: 0;
}

form input[type="checkbox"],
form input[type="radio"] {
	display: inline-block;
	margin: .5em 0;
}

form input[type="text"][disabled],
form input[type="password"][disabled],
form input[type="email"][disabled],
form input[type="url"][disabled],
form input[type="date"][disabled],
form input[type="month"][disabled],
form input[type="time"][disabled],
form input[type="datetime"][disabled],
form input[type="datetime-local"][disabled],
form input[type="week"][disabled],
form input[type="number"][disabled],
form input[type="search"][disabled],
form input[type="tel"][disabled],
form input[type="color"][disabled],
form select[disabled],
form textarea[disabled] {
	cursor: not-allowed;
	color: #cad2d3;
	background-color: #eaeded;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
form input:not([type])[disabled] {
	cursor: not-allowed;
	color: #cad2d3;
	background-color: #eaeded;
}
form input[readonly],
form select[readonly],
form textarea[readonly] {
	color: #777; /* menu text color */
	border-color: #ccc;
	background-color: #eee; /* menu hover bg color */
}

form input:focus:invalid,
form textarea:focus:invalid,
form select:focus:invalid {
	color: #b94a48;
	border-color: #e9322d;
}
form input[type="file"]:focus:invalid:focus,
form input[type="radio"]:focus:invalid:focus,
form input[type="checkbox"]:focus:invalid:focus {
	outline-color: #e9322d;
}
select {
	width: 100%;
	/* Normalizes the height; padding is not sufficient. */
	height: 2.25em;
	min-height: auto;
	border: 1px solid #ddd;
	background-color: white;
	cursor: pointer;
	padding: 0 15px;
	margin: 0;
}
form select[multiple] {
	height: auto;
}
form label {
	display: block;
    margin-bottom: 3px;
}
form fieldset {
	margin: 0;
	padding: .35em 0 .75em;
	border: 0;
}
form legend {
	display: block;
	width: 100%;
	margin-bottom: .3em;
	padding: .3em 0;
	color: #333;
	border-bottom: 1px solid #e5e5e5;
}

/*csslint outline-none:false*/

input[type="button"],
input[type="reset"],
input[type="submit"],
.button {
	display: inline-block;
    font-family: inherit;
    background-color: $color-5;
    color: $color-1;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
    padding: 16px 30px;
    border: 0;
    cursor: pointer;
    text-align: center;
    letter-spacing: 0.1em;
    line-height: 1;
    @include transition( all .3s ease );
	@include border-radius( 30px );
}

input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
.button:hover {
	background-color: $color-3;
	border-color: $color-3;
	color: $color-1;
}

input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:focus,
.button:focus {
	outline: 0;
}

.pure-button[disabled],
.pure-button-disabled,
.pure-button-disabled:hover,
.pure-button-disabled:focus,
.pure-button-disabled:active {
	cursor: not-allowed;
	@include opacity( .40 );
	border: none;
	background-image: none;
	@include box-shadow( none );

	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
	filter: alpha(opacity=40);
}

.pure-checkbox *,
.pure-radiobutton * {
  box-sizing: border-box;
}
.pure-checkbox *:before,
.pure-radiobutton *:before,
.pure-checkbox *:after,
.pure-radiobutton *:after {
  box-sizing: border-box;
}
.pure-checkbox input[type="checkbox"],
.pure-radiobutton input[type="checkbox"],
.pure-checkbox input[type="radio"],
.pure-radiobutton input[type="radio"] {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.pure-checkbox input[type="checkbox"]:focus + label:before,
.pure-radiobutton input[type="checkbox"]:focus + label:before,
.pure-checkbox input[type="radio"]:focus + label:before,
.pure-radiobutton input[type="radio"]:focus + label:before,
.pure-checkbox input[type="checkbox"]:hover + label:before,
.pure-radiobutton input[type="checkbox"]:hover + label:before,
.pure-checkbox input[type="radio"]:hover + label:before,
.pure-radiobutton input[type="radio"]:hover + label:before {
  border-color: #999999;
  background-color: #f2f2f2;
}
.pure-checkbox input[type="checkbox"]:active + label:before,
.pure-radiobutton input[type="checkbox"]:active + label:before,
.pure-checkbox input[type="radio"]:active + label:before,
.pure-radiobutton input[type="radio"]:active + label:before {
  transition-duration: 0s;
}
.pure-checkbox input[type="checkbox"] + label,
.pure-radiobutton input[type="checkbox"] + label,
.pure-checkbox input[type="radio"] + label,
.pure-radiobutton input[type="radio"] + label {
  position: relative;
  padding: 5px 5px 5px 2em;
  vertical-align: middle;
  user-select: none;
  cursor: pointer;
}
.pure-checkbox input[type="checkbox"] + label:before,
.pure-radiobutton input[type="checkbox"] + label:before,
.pure-checkbox input[type="radio"] + label:before,
.pure-radiobutton input[type="radio"] + label:before {
  box-sizing: content-box;
  content: '';
  color: gray;
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  margin-top: -9px;
  border: 2px solid #999999;
  text-align: center;
  transition: all 0.4s ease;
}
.pure-checkbox input[type="checkbox"] + label:after,
.pure-radiobutton input[type="checkbox"] + label:after,
.pure-checkbox input[type="radio"] + label:after,
.pure-radiobutton input[type="radio"] + label:after {
  box-sizing: content-box;
  content: '';
  background-color: #999999;
  position: absolute;
  top: 50%;
  left: 4px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  transform: scale(0);
  transform-origin: 50%;
  transition: transform 200ms ease-out;
}
.pure-checkbox input[type="checkbox"]:disabled + label:before,
.pure-radiobutton input[type="checkbox"]:disabled + label:before,
.pure-checkbox input[type="radio"]:disabled + label:before,
.pure-radiobutton input[type="radio"]:disabled + label:before {
  border-color: #cccccc;
}
.pure-checkbox input[type="checkbox"]:disabled:focus + label:before,
.pure-radiobutton input[type="checkbox"]:disabled:focus + label:before,
.pure-checkbox input[type="radio"]:disabled:focus + label:before,
.pure-radiobutton input[type="radio"]:disabled:focus + label:before,
.pure-checkbox input[type="checkbox"]:disabled:hover + label:before,
.pure-radiobutton input[type="checkbox"]:disabled:hover + label:before,
.pure-checkbox input[type="radio"]:disabled:hover + label:before,
.pure-radiobutton input[type="radio"]:disabled:hover + label:before {
  background-color: inherit;
}
.pure-checkbox input[type="checkbox"]:disabled:checked + label:before,
.pure-radiobutton input[type="checkbox"]:disabled:checked + label:before,
.pure-checkbox input[type="radio"]:disabled:checked + label:before,
.pure-radiobutton input[type="radio"]:disabled:checked + label:before {
  background-color: #cccccc;
}
.pure-checkbox input[type="checkbox"] + label:after,
.pure-radiobutton input[type="checkbox"] + label:after {
  background-color: transparent;
  top: 50%;
  left: 4px;
  width: 8px;
  height: 3px;
  margin-top: -4px;
  border-style: solid;
  border-color: #ffffff;
  border-width: 0 0 3px 3px;
  border-image: none;
  transform: rotate(-45deg) scale(0);
}
.pure-checkbox input[type="checkbox"]:checked + label:after,
.pure-radiobutton input[type="checkbox"]:checked + label:after {
  content: '';
  transform: rotate(-45deg) scale(1);
  transition: transform 200ms ease-out;
}
.pure-checkbox input[type="radio"]:checked + label:before,
.pure-radiobutton input[type="radio"]:checked + label:before {
  animation: borderscale 300ms ease-in;
  background-color: white;
}
.pure-checkbox input[type="radio"]:checked + label:after,
.pure-radiobutton input[type="radio"]:checked + label:after {
  transform: scale(1);
}
.pure-checkbox input[type="radio"] + label:before,
.pure-radiobutton input[type="radio"] + label:before,
.pure-checkbox input[type="radio"] + label:after,
.pure-radiobutton input[type="radio"] + label:after {
  border-radius: 50%;
}
.pure-checkbox input[type="checkbox"]:checked + label:before,
.pure-radiobutton input[type="checkbox"]:checked + label:before {
  animation: borderscale 200ms ease-in;
  background: #999999;
}
.pure-checkbox input[type="checkbox"]:checked + label:after,
.pure-radiobutton input[type="checkbox"]:checked + label:after {
  transform: rotate(-45deg) scale(1);
}
.pure-checkbox.pure-checkbox-inline,
.pure-radiobutton.pure-checkbox-inline,
.pure-checkbox.pure-radiobutton-inline,
.pure-radiobutton.pure-radiobutton-inline {
  display: inline-block;
}
.pure-checkbox-toggle input[type="checkbox"] {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.pure-checkbox-toggle input[type="checkbox"] + label {
  position: relative;
  padding: 5px 5px 5px 40px;
  vertical-align: middle;
  user-select: none;
  cursor: pointer;
  display: block;
}
.pure-checkbox-toggle input[type="checkbox"] + label:before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  left: 0;
  content: '';
  color: #999999;
  width: 35px;
  height: 20px;
  border-radius: 50px;
  text-align: center;
  transition: all 0.4s;
  background-color: #c9c9ce;
}
.pure-checkbox-toggle input[type="checkbox"] + label:after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  left: 0;
  content: '';
  background-color: #ffffff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #c9c9ce;
  transition: all 0.2s;
  box-sizing: border-box;
}
.pure-checkbox-toggle input[type="checkbox"]:checked + label:before {
  box-shadow: inset 0 0 0 10px #999999;
}
.pure-checkbox-toggle input[type="checkbox"]:checked + label:after {
  left: 15px;
  border-color: #999999;
  background-color: #ffffff;
}
.pure-checkbox-toggle input[type="checkbox"]:disabled + label {
  cursor: default;
}
.pure-checkbox-toggle input[type="checkbox"]:disabled + label:before {
  box-shadow: inset 0 0 0 10px #e5e5e9;
}
.pure-checkbox-toggle input[type="checkbox"]:disabled + label:after {
  border-color: #e5e5e9;
}
.pure-checkbox-toggle input[type="checkbox"]:disabled:checked + label:before {
  box-shadow: inset 0 0 0 10px #999999;
}
.pure-checkbox-toggle input[type="checkbox"]:disabled:checked + label:after {
  border-color: #999999;
}
.pure-checkbox-toggle--right input[type="checkbox"] + label {
  padding: 5px 40px 5px 5px;
}
.pure-checkbox-toggle--right input[type="checkbox"] + label:before {
  left: auto;
  right: 0;
}
.pure-checkbox-toggle--right input[type="checkbox"] + label:after {
  left: auto;
  right: 15px;
}
.pure-checkbox-toggle--right input[type="checkbox"]:checked + label:after {
  left: auto;
  right: 0;
}


/* Firefox: Get rid of the inner focus border */
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
	padding: 0;
	border: 0;
}

.pure-button-primary,
.pure-button-selected,
a.pure-button-primary,
a.pure-button-selected {
	color: #fff;
	background-color: rgb(0, 120, 231);
}

.post-password-form {
	label {
		display:inline-block;
		width:auto;
	}
	input[name="post_password"]  {
		width:250px !important;
		display:inline-block;
		margin:0 8px;
	}
	input[name="Submit"]  {
		display:inline-block;
	}
}