/*
 * GoodBlogs 2.0, Form styles
 * Author: Nathan Dirks, DriftlessDesign.com
 *
 */
 
 /***********************************************************
 
 TABLE of CONTENTS
 
	1. UI MESSAGES
	2. STRUCTURE
	3. LABELS
	4. FIELDS
	5. SUBMIT
	6. NARROW FORM
	7. COMMENTS
	8. FIXES
	9. MEDIA QUERIES

***********************************************************/


/* 1. UI MESSAGES
***********************************************************/

/* UI Messages */

.ui-message div,
span.error {display: none;}

.ui-message .active {display: block;}
span.error.active {display: inline;}

.ui-message .admin-message {display: block;}

.error {font-size: .8em; margin-left: .5em; color: #FF4D4D;} /* general errors next to form fields */ 
.help {font-size: .8em; padding: .5em 0 0; color: #999;} /* help text below form fields */ 
.attention {margin: 0 -2em; padding: 2em; background: #FFB2B2;} /* highlights bg of entire field */

.ui-message .error, /* message box shared styles */
.ui-message .saved,
.ui-message .error-500,
.ui-message .code,
.ui-message .attention,
.ui-message .admin-message {color: #333; border: 1px solid; font-size: 1em; padding: .75em 1.25em 0; margin: 0 0 1.5em; font-weight: 400; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;} /* general messages above forms */ 

.ui-message .error, /* message box colors */
.ui-message .error-500 {background-color: #FFB2B2; border-color: #FF8080;}
.ui-message .saved {background-color: #C2F0C2; border-color: #85E085;}
.ui-message .code {background: #efefef;}
.ui-message .attention {background-color: #FEF6D2;  border-color: #EFE3AE;}
.ui-message .admin-message {background-color: #FFB2B2; border-color: #FF8080;}

.ui-message a {text-decoration: underline;}

.admin-message {color: #333 !important;}
.admin-message ul li {padding-bottom: .75em;}

.admin-message input[type="submit"] {padding: .1em .5em;}

.ui-message .error-500 {white-space: pre-wrap;}
.ui-message .code {font-family: "Courier New", Courier, monospace;}

label + .ui-message,
legend + .ui-message {margin-top: .5em; }
.fields fieldset .ui-message div {margin-bottom: 0 !important;}

.ui-message p {padding-bottom: .75em;}

.character-counter {color: green; white-space: nowrap;} /* character counter for author bio */ 
.counter-error {color: red;}



/* 2. STRUCTURE
***********************************************************/

/* structure */
fieldset.section,
.field-wrapper {margin-bottom: 2em;}

fieldset.section .field-wrapper {margin-bottom: 0;}

.fields,
div.info,
.field-wrapper {padding: 1em 1em 0; padding: 2em 2em 0;}

.content-box {background: #FFFFFF; -moz-box-shadow: 0 0 2px rgba(0,0,0,.125); -webkit-box-shadow: 0 0 2px rgba(0,0,0,.125); box-shadow: 0 0 2px rgba(0,0,0,.125);}

.field-wrapper .fields,
.field-wrapper div.info {background: none; padding: 0;}

.fields li {padding-bottom: 1em; padding-bottom: 1.5em;}
.fields li:last-child {padding-bottom: 2em;}
.fields span.block {padding: 1em 0 0; padding: 1.5em 0 0;}
fieldset.fieldset-classic {border: 1px solid #e5e5e5; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 0 1em 1em;}



/* 3. LABELS
***********************************************************/

.fields label,
.fields span.text label {display: block;}
.fields span.radio label,
.fields span.checkbox label,
.checkbox label {display: inline;}
.fields li > label,
.fields fieldset > legend,
.info .heading,
.fields span.block label,
p.label {font-weight: 400; padding-bottom: .35em;}
.info .heading {display: block; padding-bottom: 1em;}



/* 4. FIELDS
***********************************************************/

/* fixes */
input[type="text"],
input[type="password"],
input[type="submit"],
textarea {-webkit-appearance: none;}

/* general */
#search input,
.fields .text input,
.fields textarea,
.textboxlist-bits {border: none; width: 94%; padding: 1em 3%; -moz-box-shadow: inset 0 0 1px #999; -webkit-box-shadow: inset 0 0 1px #999; box-shadow: inset 0 0 1px #999;}

.fields .fieldset-classic {margin: 1em 0 .5em;}
.fields .fieldset-classic legend {background: #f4f4f4; padding: .25em 1em .25em .5em; border: 1px solid #e1e1e1;}
.fields .fieldset-classic legend input,
.fields .fieldset-classic legend label {width: auto; display: inline; padding: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;}
.fields .fieldset-classic legend input {margin-right: .5em;}

.fields span.block {display: block;}

/* checkbox & radio */
.fields span.radio,
.fields span.checkbox {display: inline-block; padding: .25em .5em .25em 0;}

.fields span.radio input,
.fields span.checkbox input,
.checkbox input {display: inline;}

/* paragraph tags */
.info p,
p.info {padding-bottom: 1em;}
.info p:last-child {padding-bottom: 0;}

/* textbox */
.textboxlist li {padding-bottom: 0 !important;}
.fields .textboxlist input {padding: 0 !important;}

.textboxlist-bits {border: none !important; -moz-border-radius: 0 !important; -webkkit-border-radius: 0 !important; border-radius: 0 !important; margin: 0 !important; overflow: hidden; padding: 1em 3% !important;}

/* select */
select {max-width: 100%;}



/* 5. SUBMIT
***********************************************************/

input[type="submit"] {
	background: #f4f4f4; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y0ZjRmNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #f4f4f4 0%, #e5e5e5 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f4f4f4 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f4f4f4 0%,#e5e5e5 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f4f4f4 0%,#e5e5e5 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #f4f4f4 0%,#e5e5e5 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-8 */
    border: 1px solid #CCCCCC;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    font-weight: 700;
    padding: 1.25em 1.75em;
    text-transform: uppercase;
}



/* 6. NARROW FORM (login, signup, forgot password)
***********************************************************/

/* General */
.narrow-form .radio,
.narrow-form .checkbox {margin-left: 1.5em;}
.narrow-form .radio input,
.narrow-form .checkbox input {margin-left: -1.8em; padding: 0;}

.narrow-form .info {padding-top: 0; padding-bottom: 1em;}
.narrow-form .external-logins {clear: both; margin-top: 1.25em; padding-top: 1em; border-top: 1px dotted #ccc;}

.narrow-form .checkbox {padding-bottom: 1.25em;}
.narrow-form .checkbox label {font-weight: 300;}

.narrow-form .delimiter {margin-bottom: 2em;}

.narrow .radio,
.narrow .checkbox {margin-left: 1.5em;}
.narrow .radio input,
.narrow .checkbox input {margin-left: -1.8em; padding: 0;}

.narrow .info {padding-top: 0; padding-bottom: 1em;}
.narrow .external-logins {clear: both; margin-top: 1.25em; padding-top: 1em; border-top: 1px dotted #ccc;}

.narrow .checkbox {padding-bottom: 1.25em;}
.narrow .checkbox label {font-weight: 300;}

.narrow .delimiter {margin-bottom: 2em;}

/* Login Form */
#login-form .fields {background: none; padding: 0;}

#login-form .submit {float: left; width: 33.333%; margin-right: 3%;}
#login-form .submit input {width: 100%;}
#login-form .checkbox {font-size: .9em;}

#login-form #links {}
.login-link {margin: 0; padding: 0 0 .25em; text-align: right;}

/* Sign Up, open auth */
#signup-form .checkbox {font-size: .9em;}

#external-signup .open-auth {padding: 1em 1em 0;}
#external-signup .open-auth li {padding-bottom: 1em;}

.external-signup {line-height: 1; border: none; width: 100%; font-size: .8em; height: 3.75em; overflow: hidden; text-align: left; position: relative; -webkit-transition: background .5s ease; -moz-transition: background .5s ease; transition: background .5s ease; padding: 0; margin: 0;}
.external-signup:hover {cursor: pointer;}

.external-signup.facebook {background: #5882ea; color: #FFF;}
.external-signup.google {background: #ddd; color: #666;}

.external-signup.facebook:hover {background: #537adc;}
.external-signup.google:hover {background: #ccc;}

.external-signup img {position: absolute; top: 0; left: 0; width: 48px; height: 48px;}
.external-signup span {padding: 1em 1em 0 5em;}


/* Login, open auth */
#external-login {padding: 1em 1em 1em; margin-bottom: 2em; background: #FFF;}

.info .open-auth {margin: 0;}
.external-login {padding: 0 !important; margin: 0 0 1em 0 !important; list-style-type: none; clear: both;}
.external-login.google {margin-bottom: 0 !important;}

.external-login a {line-height: 1; border: none; width: auto; font-size: .8em; height: 2.375em; overflow: hidden; text-align: left; position: relative;  -webkit-transition: background .5s ease; -moz-transition: background .5s ease; transition: background .5s ease; display: block; padding: 1.375em 1em 0 5em; margin: 0; font-weight: 400;}
.external-login.facebook a {background: #5882ea; color: #FFF;}
.external-login.google a {background: #ddd; color: #666;}

.external-login a:hover {cursor: pointer;}
.external-login.facebook:hover a {background: #537adc;}
.external-login.google:hover a {background: #ccc;}

.external-login img {position: absolute; top: 0; left: 0; width: 48px; height: 48px;}



/* 7. COMMENTS FORM
***********************************************************/
#comment-form ul.fields,
.comment-form-ajax ul.fields {padding: 1em 0 0;}
#comment-form textarea,
.comment-form-ajax textarea {min-height: 6em;}

#reply-to-comment textarea {min-height: 8em;}



/* 8. FIXES
***********************************************************/
 
 /* Clear Fixes */
.fields li:after, .field-wrapper:after {content:"."; display:block; visibility:hidden; clear:both; height:0;}

.fields li, .field-wrapper {display: inline-block;}

.fields li, .field-wrapper {display: block;}



/* 9. MEDIA QUERIES
***********************************************************/

/* Tablets & Above */
@media only screen and (min-width: 601px) {

	/* fields */
	.fields .text input,
	.fields textarea {width: 96%; padding: 1em 2%;}

	/* external signup */
	.external-signup {font-size: 1em; height: 3em;}
	.external-signup span {padding-left: 4em;}

	.external-login a {font-size: 1em; height: 2em; padding-left: 4em; padding-top: 1em;}
	
	/* character counter */
	.character-counter {float: right;}

}