Chris@2: /**
Chris@2:  * @file
Chris@2:  * Visual styles for Bartik's forms.
Chris@2:  */
Chris@2: 
Chris@2: /* Password field. */
Chris@2: .password-field {
Chris@2:   margin: 0;
Chris@2: }
Chris@2: 
Chris@2: /* Form elements. */
Chris@2: form {
Chris@2:   margin: 0;
Chris@2:   padding: 0;
Chris@2: }
Chris@2: fieldset {
Chris@2:   margin: 1em 0;
Chris@2: }
Chris@2: details,
Chris@2: fieldset,
Chris@2: .filter-wrapper {
Chris@2:   border-radius: 4px;
Chris@2: }
Chris@2: .filter-wrapper {
Chris@2:   border-top-left-radius: 0;
Chris@2:   border-top-right-radius: 0;
Chris@2: }
Chris@2: .filter-help a {
Chris@2:   font-size: 0.857em;
Chris@2: }
Chris@2: .filter-wrapper .form-item label {
Chris@2:   margin-right: 10px; /* LTR */
Chris@2: }
Chris@2: [dir="rtl"] .filter-wrapper .form-item label {
Chris@2:   margin-left: 10px;
Chris@2:   margin-right: 0;
Chris@2: }
Chris@2: summary {
Chris@2:   background: #dbdbdb;
Chris@2:   color: #3b3b3b;
Chris@2:   text-shadow: 0 1px 0 #fff;
Chris@2: }
Chris@2: details summary a {
Chris@2:   color: #3b3b3b;
Chris@2: }
Chris@2: details summary a:hover,
Chris@2: details summary a:active,
Chris@2: details summary a:focus {
Chris@2:   color: #000;
Chris@2: }
Chris@2: details .details-description {
Chris@2:   font-style: italic;
Chris@2: }
Chris@2: label {
Chris@2:   display: table;
Chris@2:   font-weight: bold;
Chris@2: }
Chris@2: label[for] {
Chris@2:   cursor: pointer;
Chris@2: }
Chris@2: input,
Chris@2: textarea,
Chris@2: select {
Chris@2:   font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
Chris@2: }
Chris@2: input {
Chris@2:   margin: 2px 0;
Chris@2:   padding: 4px;
Chris@2:   /* Keep form elements from overflowing their containers. */
Chris@2:   max-width: 100%;
Chris@2:   box-sizing: border-box;
Chris@2: }
Chris@2: input,
Chris@2: textarea {
Chris@2:   font-size: 0.929em;
Chris@2: }
Chris@2: 
Chris@2: /**
Chris@2:  * Make the font slightly bigger in mobile
Chris@2:  * @todo: check the correct font-size
Chris@2:  */
Chris@2: @media screen and (max-width: 60em) { /* 920px */
Chris@2:   input,
Chris@2:   textarea {
Chris@2:     font-size: 16px;
Chris@2:   }
Chris@2: }
Chris@2: textarea {
Chris@2:   line-height: 1.5;
Chris@2: }
Chris@2: textarea.form-textarea,
Chris@2: select.form-select {
Chris@2:   padding: 4px;
Chris@2: }
Chris@2: input.form-text,
Chris@2: input.form-tel,
Chris@2: input.form-email,
Chris@2: input.form-url,
Chris@2: input.form-search,
Chris@2: input.form-file,
Chris@2: input.form-number,
Chris@2: input.form-color,
Chris@2: textarea.form-textarea,
Chris@2: select.form-select {
Chris@2:   border: 1px solid #ccc;
Chris@2:   color: #3b3b3b;
Chris@2: }
Chris@2: input.form-submit:hover,
Chris@2: input.form-submit:focus {
Chris@2:   background: #dedede;
Chris@2: }
Chris@2: .password-suggestions ul li {
Chris@2:   margin-left: 1.2em; /* LTR */
Chris@2: }
Chris@2: [dir="rtl"] .password-suggestions ul li {
Chris@2:   margin-right: 1.2em;
Chris@2:   margin-left: 0;
Chris@2: }
Chris@2: .form-item label {
Chris@2:   font-size: 0.929em;
Chris@2: }
Chris@2: .form-type-radio label,
Chris@2: .form-type-checkbox label {
Chris@2:   margin-left: 4px; /* LTR */
Chris@2: }
Chris@2: [dir="rtl"] .form-type-radio label,
Chris@2: [dir="rtl"] .form-type-checkbox label {
Chris@2:   margin-right: 4px;
Chris@2:   margin-left: 0;
Chris@2: }
Chris@2: .form-type-radio .description,
Chris@2: .form-type-checkbox .description {
Chris@2:   margin-left: 2px; /* LTR */
Chris@2: }
Chris@2: [dir="rtl"] .form-type-radio .description,
Chris@2: [dir="rtl"] .form-type-checkbox .description {
Chris@2:   margin-right: 2px;
Chris@2:   margin-left: 0;
Chris@2: }
Chris@2: .form-actions {
Chris@2:   padding-top: 10px;
Chris@2: }
Chris@2: 
Chris@2: /* Node Form */
Chris@2: #edit-body {
Chris@2:   margin-bottom: 2em;
Chris@2: }
Chris@2: .node-form label,
Chris@2: .node-form .description {
Chris@2:   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
Chris@2: }
Chris@2: .node-form .form-wrapper {
Chris@2:   margin-bottom: 2em;
Chris@2: }
Chris@2: 
Chris@2: /* Contact Form */
Chris@2: .contact-form #edit-name {
Chris@2:   width: 75%;
Chris@2:   border-radius: 4px;
Chris@2: }
Chris@2: .contact-form #edit-mail {
Chris@2:   width: 75%;
Chris@2:   border-radius: 4px;
Chris@2: }
Chris@2: .contact-form #edit-subject {
Chris@2:   width: 75%;
Chris@2:   border-radius: 4px;
Chris@2: }
Chris@2: .contact-form #edit-message {
Chris@2:   width: 76.3%;
Chris@2:   border-top-left-radius: 4px;
Chris@2:   border-top-right-radius: 4px;
Chris@2: }
Chris@2: 
Chris@2: /* Disabled form elements */
Chris@2: .form-disabled input,
Chris@2: .form-disabled select,
Chris@2: .form-disabled textarea {
Chris@2:   background: #ededed;
Chris@2:   border-color: #bbb;
Chris@2:   color: #717171;
Chris@2: }
Chris@2: .form-disabled label {
Chris@2:   color: #717171;
Chris@2: }
Chris@2: 
Chris@2: /* Comment form */
Chris@2: .comment-form label {
Chris@2:   float: left; /* LTR */
Chris@2:   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
Chris@2:   font-size: 0.929em;
Chris@2:   width: 120px;
Chris@2: }
Chris@2: [dir="rtl"] .comment-form label {
Chris@2:   float: right;
Chris@2: }
Chris@2: .comment-form input,
Chris@2: .comment-form .form-select {
Chris@2:   margin: 0;
Chris@2:   border-radius: 4px;
Chris@2: }
Chris@2: .comment-form .form-type-textarea label {
Chris@2:   float: none;
Chris@2: }
Chris@2: .comment-form .form-item,
Chris@2: .comment-form .form-radios,
Chris@2: .comment-form .form-type-checkbox,
Chris@2: .comment-form .form-select {
Chris@2:   margin-bottom: 10px;
Chris@2:   overflow: hidden;
Chris@2: }
Chris@2: .comment-form .form-type-checkbox,
Chris@2: .comment-form .form-radios {
Chris@2:   margin-left: 120px; /* LTR */
Chris@2: }
Chris@2: [dir="rtl"] .comment-form .form-type-checkbox,
Chris@2: [dir="rtl"] .comment-form .form-radios,
Chris@2: [dir="rtl"] .comment-form .form-item .description {
Chris@2:   margin-left: 0;
Chris@2:   margin-right: 120px;
Chris@2: }
Chris@2: .comment-form .form-type-checkbox label,
Chris@2: .comment-form .form-radios label {
Chris@2:   float: none;
Chris@2:   margin-top: 0;
Chris@2: }
Chris@2: .comment-form input.form-file {
Chris@2:   width: auto;
Chris@2: }
Chris@2: .layout-no-sidebars .comment-form .form-text {
Chris@2:   width: 800px;
Chris@2: }
Chris@2: .layout-one-sidebar .comment-form .form-text {
Chris@2:   width: 500px;
Chris@2: }
Chris@2: .layout-two-sidebars .comment-form .form-text {
Chris@2:   width: 320px;
Chris@2: }
Chris@2: .comment-form .form-item .description {
Chris@2:   font-size: 0.786em;
Chris@2:   line-height: 1.2;
Chris@2:   margin-left: 120px; /* LTR */
Chris@2: }
Chris@2: .comment-form .form-textarea {
Chris@2:   border-top-left-radius: 4px;
Chris@2:   border-top-right-radius: 4px;
Chris@2: }
Chris@2: .comment-form details.filter-wrapper .details-wrapper,
Chris@2: .comment-form .text-format-wrapper .form-item {
Chris@2:   margin-top: 0;
Chris@2:   margin-bottom: 0;
Chris@2: }
Chris@2: .filter-wrapper label {
Chris@2:   width: auto;
Chris@2:   float: none;
Chris@2: }
Chris@2: .filter-wrapper .form-select {
Chris@2:   min-width: 120px;
Chris@2: }
Chris@2: .comment-form details.filter-wrapper .tips {
Chris@2:   font-size: 0.786em;
Chris@2: }
Chris@2: #comment-body-add-more-wrapper .form-type-textarea label {
Chris@2:   margin-bottom: 0.4em;
Chris@2: }
Chris@2: #edit-actions input {
Chris@2:   margin-right: 0.6em; /* LTR */
Chris@2: }
Chris@2: [dir="rtl"] #edit-actions input {
Chris@2:   margin-left: 0.6em;
Chris@2:   margin-right: 0;
Chris@2: }
Chris@2: 
Chris@2: /* Form error styles. */
Chris@2: .form-item textarea.error + .cke {
Chris@2:   border: 2px solid red;
Chris@2: }
Chris@2: 
Chris@2: /* Form error message styles. */
Chris@2: .form-item--error-message {
Chris@2:   color: #e32700;
Chris@2: }
Chris@2: 
Chris@2: /**
Chris@2:  * @file
Chris@2:  * Visual styles for a resizable textarea.
Chris@2:  */
Chris@2: 
Chris@2: .form-textarea-wrapper textarea {
Chris@2:   display: block;
Chris@2:   margin: 0;
Chris@2:   width: 100%;
Chris@2:   box-sizing: border-box;
Chris@2: }