/*-------------------------------------+
 | Site: Metropolitan Planning Council |
 | Part: Form styles                   |
 +-------------------------------------*/

/* Basics */
.check { display: none; }
.form { margin: 0; width: 100%; }
.form .c2l, .form .c2r { margin-bottom: 0; }
.form .mute { font-size: 0.9em; }
.form p { margin-bottom: 0.5em; }
.form table td, .form table th { font-size: 1em; }
.form td, .form th { border: 0; padding: 0.5em 0; }
.form th { font-weight: normal; padding-right: 2%; text-align: right; vertical-align: top; width: 22%; }

/* Buttons */
.btn {
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f2f2f2));
    background: -webkit-linear-gradient(top, #ffffff 0%,#f2f2f2 100%);
    background: -o-linear-gradient(top, #ffffff 0%,#f2f2f2 100%);
    background: -ms-linear-gradient(top, #ffffff 0%,#f2f2f2 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#f2f2f2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 );
    color: #3c6cc7;
    border: 1px solid #a7a7a7;
    border-radius: 4px;
    display: inline-block;
    padding: 0.3em 0.8em;
}

.btns { margin: 1.5em 0 1.5em 20%; }

/* Checklists */
.checklist { border: 1px solid #ccc; max-height: 20em; line-height: 1.4;    margin: 0 0 1em 0; overflow: auto; }
.checklist input { margin-bottom: 1px; }
.checklist label { display: block; padding: 0.1em 0 0.1em 25px; height: 1%; text-indent: -25px; }
.checklist li { background: none; display: block; float: none; margin: 0; padding: 0; white-space: normal; width: 100%; }
.checklist li p { margin: 0; padding: 1em 0 0; }
.checklist li ul { margin: 0 0 0 2em; }
.checklist .mute { font-size: 1em; white-space: nowrap; }
.checklist p { font-weight: bold; margin-bottom: 0.25em; }
.checklist .selected { background: #ffa; }
.checklist ul { margin-bottom: 1em; }
.form .checklist { margin-top: 0.5em; position: relative; width: 97%; }
.form .checklist-ajax { height: 20em; }
.form .checklist-ajax-loading { background: url(/images/loading.gif) no-repeat 50% 50%; }

/* Color presets */
.color-presets { margin: 15px 0; }
.color-presets strong { display: block; }
.color-presets ul { display: inline-block; list-style: none; margin: 0; }
.color-presets ul a { border: 1px solid #ddd; display: inline-block; height: 25px; margin-bottom: -9px; width: 25px; }
.color-presets ul a:hover { border-color: #000; }
.color-presets ul li { display: inline-block; margin: 0; }

/* Date/time selector */
table.dateTime { font-size: 1em; margin: 0; width: auto; }
table.dateTime .info { font-size: 0.8em; }
table.dateTime td, table.dateTime th { padding-top: 0; vertical-align: top; }
table.dateTime td { padding-right: 0.5em; }
table.dateTime th { font-size: 0.85em; padding: 0; text-align: left; width: 4em; }

/* Fact sheets */
#FactSheetForm { list-style: none; margin: 0; }
#FactSheetForm .fact-sheet-file, #FactSheetForm .fact-sheet-title { float: left; margin-right: 1em; width: 40%; }
#FactSheetForm .fact-sheet-file input { width: 60%; }
#FactSheetForm .fact-sheet-remove { float: left; font-size: 16px; font-weight: bold; margin-top: 0.2em; }
#FactSheetForm .fact-sheet-remove .remove { background: #f0f0f0; border-radius: 20px; padding: 0.1em 0.4em 0.075em; }
#FactSheetForm .fact-sheet-remove .remove:hover { background: #3c6cc7; color: #fff; text-decoration: none; }
#FactSheetForm .field-help { display: block; margin: 0; }
#FactSheetForm .ItemTemplate { clear: both; }
#FactSheetForm input { width: 95%; }

/* Feature picker */
.feature-picker .feature-item-summary { overflow: hidden; padding-right: 30px; text-overflow: ellipsis; white-space: nowrap; }
.feature-picker .feature-item-summary .featured-image { vertical-align: middle; margin-right: 5px; }
.feature-picker .feature-item-summary .remove { float: right; margin: 0 -30px 0 0; }
.feature-picker .feature-picker-add-form { padding-top: 15px; }
.feature-picker .feature-picker-add-form dd { margin-bottom: 1em; }
.feature-picker .feature-picker-add-form dt { font-weight: bold; margin-bottom: 0.1em; }

    /* Old */
    .feature-picker-select { overflow: hidden; }
    .feature-picker-select .dataTables_info { display: none; }
    .feature-picker-select .dataTables_scrollBody { border: 1px solid #ddd; }
    .feature-picker-show { margin-bottom: 10px; }

/* Fields - fields with text underneath them */
.fields label { display: block; }
.fields p { float: left; margin-right: 1%; }
.fields .txt { width: 90%; }

    /* Location fields */
    .c-city { width: 52%; }
    p.c-state { margin-right: 4%; width: 15%; }
    p.c-zip { margin: 0; width: 20%; }
    
    /* Name fields */
    .c-name-first, .c-name-last, .c-name-middle { margin-right: 0.5em; }
    .c-name-first, .c-name-last { width: 30.5%; }
    .c-name-middle { width: 7%; }
    .c-name-middle input.txt { width: 70%; }

/* Fields */
.field-help { font-size: 12px; margin-left: 0.75em; }

/* Full mode */
.full .btns { margin-left: 21%; }
.full .form th { width: 19%; }

/* Layouts */
.layouts { list-style: none; margin: 0; }
.layouts img { border: 3px solid #fff; display: block; margin-bottom: 5px; }
.layouts li { float: left; margin-right: 15px; }
.layouts li.current img { border-color: #000; }

/* Multiselects */
.multiSelect {
    background: #fff url(/images/shared/dropdown.gif) no-repeat 100% 50%;
    border: solid 1px #bbb;
    display: inline;
    padding: 0.3em 20px 0.3em 4px;
    width: 242px;
}

.multiSelect.active, .multiSelect.focus { border: inset 1px #000; }

.multiSelectOptions {
    background: #fff;
    border: solid 1px #b2b2b2;
    margin-top: -1px;
    max-height: 150px;
    overflow: auto;
    width: 266px;
}

.multiSelectOptions input { margin-right: 0.5em; }
.multiSelectOptions label { padding: 2px 25px; display: block; text-indent: -25px; }
.multiSelectOptions label.checked { background: #e6e6e6; }
.multiSelectOptions label.selectAll { border-bottom: 1px dotted #ccc; font-weight: bold; }
.multiSelectOptions label.hover { background: #00345b; color: #fff; }

/* New forms */
dl.form { margin-bottom: 1.15em; }
dl.form > dt { clear: both; margin: 0; padding: 0.5em 0 0 20%; }
dl.form > dt .label { float: left; margin-left: -25%; text-align: right; width: 20%; }
dl.form > .field { float: none; padding-left: 20%; }

/* Notifications */
div.alert, div.confirm, div.notice { color: #000; margin-bottom: 1em; padding: 0.5em 1em 0.5em 43px; }
div.alert *, div.confirm *, div.notice * { margin: 0; }
div.alert .mute, div.confirm .mute, div.notice .mute { font-size: 1em; }
div.alert h6, div.confirm h6, div.notice h6 { font-size: 1em; font-weight: normal; }
div.alert li, div.confirm li, div.notice li { background: none; padding: 0; }
div.alert ul, div.confirm ul, div.notice ul { list-style: disc outside; margin-left: 2em; }

    /* Alerts */
    .alert { color: #e30013; }
    div.alert { background: #ffd4d4 url(/images/admin/notify-alert.gif) no-repeat 10px 0.5em; border: 3px solid #dd9898; }
    
    /* Confirmations */
    div.confirm { background: #d8ffd4 url(/images/admin/notify-confirm.gif) no-repeat 10px 0.6em; border: 3px solid #9edd98; }
    
    /* Notices */
    div.notice { background: #fff6d3 url(/images/admin/notify-notice.gif) no-repeat 10px 0.5em; border: 3px solid #ffe27e; }

/* Options */
.options-h, .options-v { list-style: none; margin-left: 0; }
td .options-h, td .options-v { margin: 0; }
.options-h input, .options-v input { margin-bottom: -0.05em; vertical-align: middle; }
.options-h img { border-bottom: 3px solid #fff; padding: 5px; vertical-align: middle; }
.options-h li, .options-v li { background: none; clear: both; margin-bottom: 0.3em; padding: 0; }
.options-h li { display: inline; margin-right: 0.7em; white-space: nowrap; }
.options-v li { padding-left: 25px; text-indent: -25px; }
.options-v li p { margin: 0; text-indent: 0; }

/* Placeholder */
input.placeholder, textarea.placeholder { color: #777; font-style: italic; }
input::-moz-placeholder, textarea::-moz-placeholder { color: #999; font-style: italic; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #999; font-style: italic; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #999; font-style: italic; }

/* Search */
.search { background: #fff; border: 1px solid #ccc; display: flex; flex: 1 1 auto; white-space: nowrap; }

.search-button {
    -webkit-appearance: none;
    background: none;
    border: 0;
    color: #555;
    cursor: pointer;
    flex: 0 0 3em;
    font-size: 0.8em;
    padding: 0.9em 0;
}

.search-button:hover { background: rgba(0, 0, 0, 0.3); color: #fff; }
.search-label { display: none; }
.search-text { background: none; border: 0; box-shadow: none; display: block; flex: 1 1 auto; margin: 0; min-width: 0; padding: 0; text-indent: 0.6em; }

    /* Site search */
    #site-search { display: flex; justify-content: flex-end; }
    #site-search .search { width: 15em; }

/* Sign in */
.signin .form .action { display: block; padding: 0.5em 0; width: 100%; }
.signin .form dd.field { float: none; margin-bottom: 0.75em; padding: 0; width: auto; }
.signin .form dt { display: none; }
.signin .form .txt { width: 98%; }

/* Suggestions */
.suggestions { position: relative; }

.suggestions div {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    max-height: 300px;
    overflow: auto;
    width: 75%;
    z-index: 100;
}

.suggestions a:hover, .suggestions .highlighted { background-color: #eee; text-decoration: none; }
.suggestions div p { display: none; margin: 0.3em 0 0.3em 0.5em; font-size: 0.8em; color: #666; }
.suggestions div ul { list-style: none; margin: 0; }
.suggestions div ul a { color: #000; display: block; padding: 0.3em 0.5em; }
.suggestions div ul li { background: none; margin: 0; padding: 0; }

/* Text boxes */
.c2l .txt, .c2r .txt, .c3l .txt, .c3m .txt, .c3r .txt { position: relative; width: 95%; }
.ezpz-hint { color: #818285; }
textarea { vertical-align: top; }
textarea[class *= "txt"] { font-size: 1em; height: 5em; padding: 0.3em 0 0 0.3em; }
textarea.txt { width: 98%; }
.txt { width: 75%; max-width: 600px; }
.txt-med { margin-right: 1em; width: 47%; }
.txt-sm { width: 7em; }
.txt-tiny { width: 3em; }

input[class *= "txt"], textarea[class *= "txt"] {
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px #ddd;
    border-radius: 4px;
    padding: 0.3em;
}

/* TinyMCE */
.mceToolbarContainer { position: static; }
.mceEditorContainer td { padding: 0; }
.mceEditor { width: 98% !important; }
.mceContentBody { background: #fff; font-size: 0.8em; min-height: 0; padding: 0.5em; text-align: left; }
.mceContentBody a { color: #5d859d !important; }