/* 
    Document   : form.css
    Created on : Jul 19, 2012, 3:55:17 PM
    Author     : andreas
    Description:
        Purpose of the stylesheet follows.
*/

root { 
    display: block;
}

#Remember {
	width: auto;
	margin-bottom: 10px;
}

form .message {padding:6px 15px; border:1px solid;}
form .good {background-color:#ecf9d0; border-color:#8fbe00;}
form .bad {background-color:#f9d0d0; border-color:#be0000;}

form input.checkbox, form input.radio {margin-top:1px;}
form fieldset {clear: both;}

form .field {
	/*margin: 6px 0 6px 0; clear: left;*/
	
	margin: 6px 0 6px 0;
	clear: left;
	position: relative;
	display: inline-block;
	width: 100%;	
}

form .field.checkbox input.checkbox { margin-top: 3px; }
form .field.optionset {margin-bottom: 10px; }
form .field.optionset label.left { display: block; width: 100%; margin-bottom: 5px; } 
form .field.optionset ul { margin-left: 0px; }
form .field.optionset ul li { list-style: none; display: inline-block; width: 30%; vertical-align: top; }
@media screen and (max-width: 760px) { form .field.optionset ul li { list-style: none; display: inline-block; width: 100%; vertical-align: top; } }
form .field.optionset ul li input { position: relative; float: left; margin-top: 3px; }
form .field.optionset ul li label { display: inline-block; float: left; width: 85%;}
form .field label { color: #000; display: inline-block; width: 30%; margin-right: 5px; }
@media screen and (max-width: 760px) { form .field label { width: 100%; margin-bottom: 5px; } }
form .field label + .middleColumn { display: inline-block; vertical-align: top; width: 65%; }
@media screen and (max-width: 760px) { form .field label + .middleColumn { width: 100%; } }
form .field.optionset .middleColumn { width: 100%; }
form .field label.required { color: #ff0000; }
form .middleColumn label.required { float: none; display: block; width: 100%;}
form .field.requiredField label.left:after { content: '*'; color: #ff0000; padding-left: 5px;}

form .field input.text,
form .field textarea {
    border-radius: 3px;
    border: 1px solid #999;
    padding: 2px;
    resize: none; 
}

form .field.holder-required .message,
form .field.holder-validation .message,
form .field.holder-bad .message { 
    float: left; margin: 5px 0; background-color:#f9d0d0; border-color:#be0000; 
}

form [id^="EditableTextField"] .middleColumn input.text,
form [id^="EditableEmailField"] .middleColumn input.text,
form [id^="EditableUniqueEmailField"] .middleColumn input.text,
form [id^="EditableTextField"] .middleColumn textarea {
    width: 100%;
}

/*form .FormHeading {
    clear: both;
    margin: 10px 0 10px 0;
    font-size: 13px;
    color: #000;
    font-weight: bold;
    font-family: Arial, sans-serif;
}*/

form .Actions {
    text-align: right;
    margin-right: 3%;
}

#MemberLoginForm_LoginForm .Actions {
    text-align: left;
    margin-right: 0;
}

form .Actions input {
    border-radius: 3px;
    border-width: 1px;
    padding: 3px 5px 3px 5px;
}

form .Actions input[name=action_process], 
form .Actions input[name=action_process_update],
form .Actions input[name=action_dologin],
form .Actions input[name=action_FulltextSearch] {
    background: #5bb75b;
    border-color: #51a351;
    color: #fff;
}

#MemberLoginForm_LoginForm #ForgotPassword {
    margin-top: 10px;
}

#MemberLoginForm_LoginForm label.left {
    width: 20%;
}

@media screen and (max-width: 760px) { form .field.optionset .literalFieldArea { width: 100%;} }