/* GENERAL CLEANING STUFF --------------------------------------------------------------------------------------------------*/ * { border: none medium; font-size:1em; list-style:none outside none; margin:0; outline:medium none; padding:0; text-decoration:none; } .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } .clear { clear: both; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } /* GENERAL MARKUP --------------------------------------------------------------------------------------------------*/ body { font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; font-size: 13px; line-height: 1.5; margin: 0; padding: 0; background: #fefcf8; color: #1e1e1e; line-height: 1.675em; } img { border: 0; } pre { background-color: #eee; padding: 10px; font-size: 11px; } a { color: #2c81a9; text-decoration: none; cursor: pointer; } a:visited { color: #2c81a9; } a:hover { color: #2c81a9; } a.danger { color: #a9502c; } h1, h2, h3, h4, h5 { color: #857e63; line-height: 1.4em; } h1 { font-size: 28px; } h2 { font-size: 18px; } h3 { font-size: 14px; } h1, h2, h3 { padding-bottom: 0.8em !important; } .container { width: 940px; margin: 0 auto; position: relative; } #wrapper { position: relative; background: #f9f1da; } #content { margin: 54px auto 60px; text-shadow: 1px 1px 0 #fff; } .text { font-size: 14px; } .text ul > li { list-style: square outside; } .text ol, .text li { list-style: auto; margin-left: 14px; } .text .intro { font-size: 18px; font-weight: lighter; } .text h2 { margin-top: 1.5em; } .text h3 { margin-top: 14px; } #sidebar h2.first { margin-top: 0; } .nested > li { font-weight: bold; } .nested > ol > ul > li { margin-left: 28px; list-style: circle inside; } /* HEAD --------------------------------------------------------------------------------------------------*/ #header { position: relative; height: 103px; /*background: url('/images/ui/shadow-border.png') repeat-x bottom #fefcf8;*/ background: #FEFCF8; -moz-box-shadow: 0 1px 0.2em rgba(133, 126, 99, 0.6); -webkit-box-shadow: 0 1px 1px rgba(133, 126, 99, 0.6); box-shadow: 0 1px 1px rgba(133, 126, 99, 0.6); border-bottom: 1px solid #BFB89B; } #account_control { position: absolute; right: 14px; padding: 8px 0 0 0; } #account_control a { display: inline-block; padding: 0 0 0 14px; } .login { font-weight: bold; } #logo { margin: 34px 0 0 6px; float: left; } /* NAVIGATION --------------------------------------------------------------------------------------------------*/ #nav { margin: 57px 0 0 78px; float: left; width: 736px; } #nav li { float: left; margin-right: 9px; } #nav li a, #nav li span { padding: 5px 10px 3px; display: inline-block; } #nav li a { color: #857e63; font-weight:bold; } #nav li a.active { height: 48px; color: #000; background: url('/images/ui/nav-selected.png') bottom center no-repeat; } #nav li .dropdown { position: relative; } #nav li .dropdown span { display: none; position: absolute; z-index: 1000; top: -9px; left: -4px; padding: 14px 14px 7px; background: #fff; -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.3); -moz-border-radius: 4px; -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.3); -webkit-border-radius: 4px; box-shadow: 0 0 7px rgba(0, 0, 0, 0.3); border-radius: 4px; } #nav li .dropdown:hover span { display: block; } #nav li .dropdown a { padding-left: 0; white-space:nowrap; } /* QUICK SEARCH --------------------------------------------------------------------------------------------------*/ #quick_search { float: right !important; margin-right: 0 !important; padding: 0 !important; } #quick_search input { -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; border: #c8c3b0 1px solid; padding: 3px 10px 2px 32px; width: 160px; background: url('/images/ui/magnifier.png') 8px center no-repeat #fff; } /* FOOT --------------------------------------------------------------------------------------------------*/ #footer { background: url('/images/ui/footer-border.png') top left repeat-x #fefcf8; height: 200px; } #footer_nav { margin-top: 40px; float: right; } #footer_nav li { float: right; margin-left: 22px; font-size: 12px; } /* FORM ELEMENTS --------------------------------------------------------------------------------------------------*/ textarea, input, select { font-family: helvetica, arial, sans-serif; padding: 7px 10px 5px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px #ded9c5 solid; background-color: #fff; } input { height: 20px; } .placeholder { color: #9F9F9F; } input[type=text]:focus, textarea:focus, select:focus { -moz-box-shadow: 0 0 5px #B5DFF1 !important; -webkit-box-shadow: 0 0 5px #B5DFF1 !important; box-shadow: 0 0 5px #B5DFF1 !important; border-color: #39B2E5 !important; } input.submit, input.create, input.update { cursor: pointer; background: url("/images/ui/bg-button-submit.jpg") repeat-x scroll left bottom #F4AE5F; border: 1px solid #C9781A; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; text-shadow: 0 1px 0 #D96714; color: #FFFFFF; font-weight: bold; padding: 7px 6px 7px; height: 32px; font-size: 12px; } input.submit[disabled], input.create[disabled], input.update[disabled] { opacity: 0.5; } input.submit:focus, input.create:focus, input.update:focus { text-shadow: 0 -1px 0 #D96714; } select { padding: 10px 7px 4px; } select option { padding: 2px 7px 1px ; } textarea { height: 120px; padding: 10px 10px 2px; } a.add_fields { color: #3C9F1D; display: inline-block; margin-right: 7px;} #recaptcha_image { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; display: inline-block; background: #fff; padding: 6px; border: 1px solid #DED9C5; } #recaptcha_response_field { width: 290px; } input.hasDatepicker { background: #fff url('/images/ui/icons/16x16_calendar.png') 7px center no-repeat; padding-left: 32px; } /* FORM ELEMENTS --------------------------------------------------------------------------------------------------*/ #feedback { margin-top: 40px; padding-left: 42px; height: 40px; background: url('/images/ui/text-baloon.png') top left no-repeat; float: left; } #feedback textarea { margin-top: 10px; height: 100px; } #feedback input[type='text'], #feedback textarea { width: 400px; } #feedback textarea, #feedback input, #feedback #recaptcha_widget_div { margin-bottom: 0.8em; } #feedback textarea.placeholder { height: 20px; } #feedback .expand_submit { display: none; } /* UI SECTIONS/FRAMES --------------------------------------------------------------------------------------------------*/ .section, .sectionframe { padding-top: 14px; margin-bottom: 21px; } .mapframe { margin-bottom: 21px; } .photoframe, .sectionframe, .mapframe, .activity_list li { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; background: #FEFCF8; -moz-box-shadow: 0 1px 0.2em rgba(133, 126, 99, 0.4); -webkit-box-shadow: 0 1px 0.2em rgba(133, 126, 99, 0.4); box-shadow: 0 1px 0.2em rgba(133, 126, 99, 0.4); border-bottom: 1px solid #BFB89B; } body:first-of-type #header, body:first-of-type .photoframe, body:first-of-type .sectionframe, body:first-of-type .mapframe, body:first-of-type .activity_list li { border: medium none; } .section > p, .sectionframe > p, .section dl, .sectionframe dl, .section h2, .sectionframe h2, .section h3, .sectionframe h3, .section h1, .section > table, .sectionframe h1 { padding: 0 14px 14px; } .section.top { padding-top: 0; } /* #main .sectionframe { background: url('/images/ui/bg_section_620.png') repeat-x bottom #fefcf8; } #main .mapframe { background: url('/images/ui/bg_section_620.png') repeat-x bottom #fefcf8; } */ #main .sectionframe.meta { /*background: url('/images/ui/bg_section_620_meta.png') repeat-x bottom #fefcf8; */ } .sectionframe .title { padding: 14px 14px 0; } .sectionframe .content { padding: 0 14px 14px 14px; } .sectionframe .controls { float: right; } .sectionframe .controls, .sectionframe .meta { margin-top: 10px; font-size: 12px; padding-bottom: 7px; padding-top: 5px; background: #F6F3EA; -moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; } .photoframe div { padding: 6px 6px 7px; overflow: hidden; } p.source { font-size: 12px; color: gray; } .description p { margin-bottom: 0.8em; } /* MAIN --------------------------------------------------------------------------------------------------*/ #main { width: 620px; float: left; } #main .sectionframe .left_part { float:left; width:282px; padding: 0 14px; } #main .sectionframe .right_part { float:right; width:310px; } #main .sectionframe .right_part dl { padding-left: 0; } #main h1 { padding: 14px 14px; margin-bottom: 10px; } #main #map { padding: 5px 7px 7px; height: 190px; width: 606px; } /* #main .activity_list li { background: url('/images/ui/bg_section_620.png') repeat-x bottom #fefcf8; } */ /* SIDEBAR --------------------------------------------------------------------------------------------------*/ #sidebar { width: 300px; float: right; } /* #sidebar .sectionframe, #sidebar .photoframe, #sidebar #headframe { background: url('/images/ui/bg_section_300.png') repeat-x bottom #fefcf8; } */ #sidebar #headframe { position: relative; padding: 14px 0 14px 120px; min-height: 100px; } #sidebar #headframe #head_image { position: absolute; left: 14px; top: 14px; } #sidebar .sectionframe .thumb { background: #F9F1DA; border-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.2); border-style: solid; border-width: 1px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } #sidebar #map { margin: 0 1px; padding: 0 6px 7px; height: 190px; width: 286px; } #sidebar .photos { margin-bottom: 21px; } #sidebar .photos .thumbs img { float:left; } /* IMAGES --------------------------------------------------------------------------------------------------*/ .s60x60 { display: block; width: 52px; height: 52px; padding: 3px 4px 5px; background: url('/images/ui/bg_image_60x60.png') repeat-x bottom #fefcf8; } .s140x96 { display: block; width: 130px; height: 86px; padding: 4px 5px 6px; background: url('/images/ui/bg_image_140x96.png') repeat-x bottom #fefcf8; } /* ACITIVITY VIEW --------------------------------------------------------------------------------------------------*/ .detailed_info dt { font-weight: bold; } .detailed_info dd { margin: 0 0 10px 14px; } .thumbs img { margin-right: 7px; } .edit { padding: 7px 14px 0; display: inline-block; } #periods { max-height: 180px; overflow: auto; } /* FEATURED --------------------------------------------------------------------------------------------------*/ #featured { width: 794px; margin: 0 auto; } #featured h2 { margin-left: 21px; } #featured p { width: 140px; float: left; margin: 0 7px; position: relative; } #featured p span { display: block; margin: 6px 0 0 14px; font-weight: bold; } #featured p span.date { position: absolute; background: #FEFCF8; -moz-border-radius: 3px; top: 60px; -webkit-border-radius: 3px; top: 60px; border-radius: 3px; top: 60px; right: 3px; padding: 4px 4px 2px 6px; color: #333; font-size: 12px; } /* WELCOME CONTROLLER --------------------------------------------------------------------------------------------------*/ #welcome { display: inline-block; margin: 28px 0 24px; } #intro { margin-bottom: 32px; text-align: center;} #intro .large_search { margin: 0 0 40px; float: right; } #intro .notice { float: right; text-align: left; width: 220px; margin: 0; } #welcome_categories, #welcome_periods { margin-top: 50px; width: 460px; font-weight: bold; } #welcome_categories { float: left; text-align: right; } #welcome_periods { float: right; } #welcome_periods p { margin-bottom: 14px; } #welcome_periods #calendar { width: 100px; } /* AB TEST */ #ab #intro .large_search #city_name { width: 400px; } #ab #intro .large_search { margin: 0 0 40px; float: none; } #ab #featured { margin-bottom: 60px; } /* COMMENTS --------------------------------------------------------------------------------------------------*/ #addcomment .thumb { float: left; } #comment { float: right; -moz-border-radius: 6px 6px 0 0; -webkit-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; width: 528px; height: 64px; padding: 6px 6px 9px; background: url('/images/ui/bg_section_540.png') repeat-x bottom #fefcf8; } #comment textarea { width: 506px; height: 47px; } #addcomment .submit { float: right; margin-top: 10px; } #comments .comment { margin-top: 10px; } #comments img { float: left; } #comments p { float: right; width: 540px; padding: 10px 0;} #comments .meta { font-size: 11px; } /* LOADERS --------------------------------------------------------------------------------------------------*/ .loading { background: url('/images/ui/ajax-loader.gif') top center no-repeat; width: 100%; padding-top: 20px; text-align: center; } /* SHORT ACTIVITY LIST --------------------------------------------------------------------------------------------------*/ .short_activity_list li { margin-bottom: 10px; } .short_activity_list img { float: left; margin-top: 12px; } .short_activity_list p { float: right; width: 220px; padding: 10px 0; } .short_activity_list a { font-weight: bold; display: block; } /* ACTIVITY LIST --------------------------------------------------------------------------------------------------*/ .activity_list li { padding: 17px 21px 15px; margin-bottom: 14px; } .activity_list li img { float: right; width: 70px; height: 70px; margin-left: 20px; } .activity_list li .title { font-weight: bold; } .activity_list li .checkbox { float: left; height: 69px; padding: 40px 21px 0 0; display: block; } /* TABLES --------------------------------------------------------------------------------------------------*/ table.overview th, table.overview td { background: #FEFCF8; padding: 7px 14px 5px; text-align: left; } /* LARGE SEARCH --------------------------------------------------------------------------------------------------*/ .large_search fieldset { display: inline; vertical-align: top; margin-right: 14px; border: none; } .large_search > form > label { display: inline-block; font-size: 18px; padding: 17px 14px 4px; } .large_search fieldset input[type='text'] { width: 200px; } .large_search fieldset input { height: 35px; font-size: 18px; font-weight: bold; padding: 9px 14px 4px; } .large_search fieldset input.submit { padding: 16px 14px 32px; width: 100px; } .large_search fieldset span { float:left; margin-left: 14px; padding-top: 8px; } .large_search fieldset span.sub_fields { float:right; padding-top: 4px; } .large_search fieldset span select { padding: 4px 5px 4px; } /* LIST MODERATION --------------------------------------------------------------------------------------------------*/ #mass_update, #mass_update *[disabled] { display: none; } /* SLIDERS --------------------------------------------------------------------------------------------------*/ .slide.fixed { position: fixed; top: 0; } #sidebar .slide.fixed { width: 300px; } /* ACTIVITY SEARCH LIST --------------------------------------------------------------------------------------------------*/ #search_form { margin: 0 0 36px 160px; } #search_form fieldset { float:left; width: 300px; } #search_form fieldset input { width: 280px; } #search_form fieldset.submit, #search_form fieldset.submit input { width: 128px; margin-right: 0; } #search_form fieldset.advanced { width: 148px; margin-bottom: 14px; } #search_form fieldset.advanced label { margin-left: 14px; display: block; } #search_form fieldset.advanced select, #search_form fieldset.advanced input { width: 100%; } #search_form #moderator_search { display: none; } #search_form a.expand { margin: 0 0 7px 12px; padding-left: 18px; display: block; background: url('/images/ui/icons/16x16_arrow_down.png') left center no-repeat; } #search_form a.expand.collapse { background-image: url('/images/ui/icons/16x16_arrow_up.png') } #search_result { float:right; width:780px; } #search_result p { margin:0 14px; } #search_sidebar { float:left; width:140px; text-align: right; padding-top: 14px; } #search_sidebar a { font-weight: bold; } #search_sidebar p { margin-bottom: 32px; } #search_sidebar p.periods { margin-bottom: 14px; } #search_sidebar p.date input { width: 96px; } div.pagination { margin-top: 14px; } div.pagination span, div.pagination a { display: inline-block; padding: 4px 10px 3px; margin-right: 7px; background: #fefcf8; -moz-border-radius: 4px; -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); } div.mass_options { margin: 0 14px; } /* NOTIFICATIONS --------------------------------------------------------------------------------------------------*/ .fieldWithErrors input, .fieldWithErrors textarea, .fieldWithErrors select { border-color: #c93d36; -moz-box-shadow: 0 0 5px #eea29f; -webkit-box-shadow: 0 0 5px #eea29f; box-shadow: 0 0 5px #eea29f; } #errorExplanation h2 { color: #802823; } #errorExplanation ul li { font-size: 12px; list-style: square inside; } p.notice, p.error, p.success, #errorExplanation { margin: 20px 0; padding: 10px 14px 7px; margin-bottom: 21px; -moz-border-radius: 5px; -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); } p.notice { color: #058408; background: #D8EFD1; -moz-box-shadow: 0 1px 0 #BFDFB5; -webkit-box-shadow: 0 1px 0 #BFDFB5; box-shadow: 0 1px 0 #BFDFB5; } p.error, #errorExplanation { -moz-box-shadow: 0 1px 0 #cc9e9c; -webkit-box-shadow: 0 1px 0 #cc9e9c; box-shadow: 0 1px 0 #cc9e9c; background-color: #fbbfbd; color: #802823; text-shadow: 0 1px 0 #fae3e1; } /* * jQuery UI CSS Framework * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about) * Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses. */ /* Layout helpers ----------------------------------*/ .ui-helper-hidden { display: none; } .ui-helper-hidden-accessible { position: absolute; left: -99999999px; } .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; } .ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .ui-helper-clearfix { display: inline-block; } /* required comment for clearfix to work in Opera \*/ * html .ui-helper-clearfix { height:1%; } .ui-helper-clearfix { display:block; } /* end clearfix */ .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); } /* Interaction Cues ----------------------------------*/ .ui-state-disabled { cursor: default !important; } /* Icons ----------------------------------*/ /* states and images */ .ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } /* Misc visuals ----------------------------------*/ /* Overlays */ .ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* * jQuery UI CSS Framework * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about) * Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses. * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=helvetica,arial,sans-serif&fwDefault=normal&fsDefault=1em&cornerRadius=5px&bgColorHeader=F6F3EA&bgTextureHeader=01_flat.png&bgImgOpacityHeader=100&borderColorHeader=DED9C5&fcHeader=1E1E1E&iconColorHeader=857E63&bgColorContent=ffffff&bgTextureContent=01_flat.png&bgImgOpacityContent=100&borderColorContent=ded9c5&fcContent=1E1E1E&iconColorContent=857E63&bgColorDefault=fefcf8&bgTextureDefault=01_flat.png&bgImgOpacityDefault=0&borderColorDefault=DED9C5&fcDefault=555555&iconColorDefault=857E63&bgColorHover=fbdebb&bgTextureHover=01_flat.png&bgImgOpacityHover=20&borderColorHover=f4bd95&fcHover=1E1E1E&iconColorHover=857E63&bgColorActive=F69524&bgTextureActive=01_flat.png&bgImgOpacityActive=100&borderColorActive=D96714&fcActive=1E1E1E&iconColorActive=DED9C5&bgColorHighlight=d5e7f6&bgTextureHighlight=01_flat.png&bgImgOpacityHighlight=0&borderColorHighlight=96ade9&fcHighlight=1E1E1E&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=05_inset_soft.png&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=0&thicknessShadow=0&offsetTopShadow=0&offsetLeftShadow=0&cornerRadiusShadow=0 */ /* Component containers ----------------------------------*/ .ui-widget { font-family: helvetica,arial,sans-serif; font-size: 1em; } .ui-widget .ui-widget { font-size: 1em; } .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: helvetica,arial,sans-serif; font-size: 1em; } .ui-widget-content { border: 1px solid #ded9c5; background: #ffffff url(/images/ui/jquery.ui/ui-bg_flat_100_ffffff_40x100.png) 50% 50% repeat-x; color: #1e1e1e; } .ui-widget-content a { color: #1e1e1e; } .ui-widget-header { border: 1px solid #ded9c5; background: #f6f3ea url(/images/ui/jquery.ui/ui-bg_flat_100_f6f3ea_40x100.png) 50% 50% repeat-x; color: #1e1e1e; font-weight: bold; } .ui-widget-header a { color: #1e1e1e; } /* Interaction states ----------------------------------*/ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #ded9c5; background: #fefcf8 url(/images/ui/jquery.ui/ui-bg_flat_0_fefcf8_40x100.png) 50% 50% repeat-x; font-weight: normal; color: #555555; } .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555; text-decoration: none; } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #f4bd95; background: #fbdebb url(/images/ui/jquery.ui/ui-bg_flat_20_fbdebb_40x100.png) 50% 50% repeat-x; font-weight: normal; color: #1e1e1e; } .ui-state-hover a, .ui-state-hover a:hover { color: #1e1e1e; text-decoration: none; } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #d96714; background: #f69524 url(/images/ui/jquery.ui/ui-bg_flat_100_f69524_40x100.png) 50% 50% repeat-x; font-weight: normal; color: #1e1e1e; } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #1e1e1e; text-decoration: none; } .ui-widget :active { outline: none; } /* Interaction Cues ----------------------------------*/ .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {border: 1px solid #96ade9; background: #d5e7f6 url(/images/ui/jquery.ui/ui-bg_flat_0_d5e7f6_40x100.png) 50% 50% repeat-x; color: #1e1e1e; } .ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #1e1e1e; } .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cd0a0a; background: #fef1ec url(/images/ui/jquery.ui/ui-bg_inset-soft_95_fef1ec_1x100.png) 50% bottom repeat-x; color: #cd0a0a; } .ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #cd0a0a; } .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #cd0a0a; } .ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; } .ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; } .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; } /* Icons ----------------------------------*/ /* states and images */ .ui-icon { width: 16px; height: 16px; background-image: url(/images/ui/jquery.ui/ui-icons_857e63_256x240.png); } .ui-widget-content .ui-icon {background-image: url(/images/ui/jquery.ui/ui-icons_857e63_256x240.png); } .ui-widget-header .ui-icon {background-image: url(/images/ui/jquery.ui/ui-icons_857e63_256x240.png); } .ui-state-default .ui-icon { background-image: url(/images/ui/jquery.ui/ui-icons_857e63_256x240.png); } .ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(/images/ui/jquery.ui/ui-icons_857e63_256x240.png); } .ui-state-active .ui-icon {background-image: url(/images/ui/jquery.ui/ui-icons_ded9c5_256x240.png); } .ui-state-highlight .ui-icon {background-image: url(/images/ui/jquery.ui/ui-icons_2e83ff_256x240.png); } .ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(/images/ui/jquery.ui/ui-icons_cd0a0a_256x240.png); } /* positioning */ .ui-icon-carat-1-n { background-position: 0 0; } .ui-icon-carat-1-ne { background-position: -16px 0; } .ui-icon-carat-1-e { background-position: -32px 0; } .ui-icon-carat-1-se { background-position: -48px 0; } .ui-icon-carat-1-s { background-position: -64px 0; } .ui-icon-carat-1-sw { background-position: -80px 0; } .ui-icon-carat-1-w { background-position: -96px 0; } .ui-icon-carat-1-nw { background-position: -112px 0; } .ui-icon-carat-2-n-s { background-position: -128px 0; } .ui-icon-carat-2-e-w { background-position: -144px 0; } .ui-icon-triangle-1-n { background-position: 0 -16px; } .ui-icon-triangle-1-ne { background-position: -16px -16px; } .ui-icon-triangle-1-e { background-position: -32px -16px; } .ui-icon-triangle-1-se { background-position: -48px -16px; } .ui-icon-triangle-1-s { background-position: -64px -16px; } .ui-icon-triangle-1-sw { background-position: -80px -16px; } .ui-icon-triangle-1-w { background-position: -96px -16px; } .ui-icon-triangle-1-nw { background-position: -112px -16px; } .ui-icon-triangle-2-n-s { background-position: -128px -16px; } .ui-icon-triangle-2-e-w { background-position: -144px -16px; } .ui-icon-arrow-1-n { background-position: 0 -32px; } .ui-icon-arrow-1-ne { background-position: -16px -32px; } .ui-icon-arrow-1-e { background-position: -32px -32px; } .ui-icon-arrow-1-se { background-position: -48px -32px; } .ui-icon-arrow-1-s { background-position: -64px -32px; } .ui-icon-arrow-1-sw { background-position: -80px -32px; } .ui-icon-arrow-1-w { background-position: -96px -32px; } .ui-icon-arrow-1-nw { background-position: -112px -32px; } .ui-icon-arrow-2-n-s { background-position: -128px -32px; } .ui-icon-arrow-2-ne-sw { background-position: -144px -32px; } .ui-icon-arrow-2-e-w { background-position: -160px -32px; } .ui-icon-arrow-2-se-nw { background-position: -176px -32px; } .ui-icon-arrowstop-1-n { background-position: -192px -32px; } .ui-icon-arrowstop-1-e { background-position: -208px -32px; } .ui-icon-arrowstop-1-s { background-position: -224px -32px; } .ui-icon-arrowstop-1-w { background-position: -240px -32px; } .ui-icon-arrowthick-1-n { background-position: 0 -48px; } .ui-icon-arrowthick-1-ne { background-position: -16px -48px; } .ui-icon-arrowthick-1-e { background-position: -32px -48px; } .ui-icon-arrowthick-1-se { background-position: -48px -48px; } .ui-icon-arrowthick-1-s { background-position: -64px -48px; } .ui-icon-arrowthick-1-sw { background-position: -80px -48px; } .ui-icon-arrowthick-1-w { background-position: -96px -48px; } .ui-icon-arrowthick-1-nw { background-position: -112px -48px; } .ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } .ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } .ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } .ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } .ui-icon-arrowthickstop-1-n { background-position: -192px -48px; } .ui-icon-arrowthickstop-1-e { background-position: -208px -48px; } .ui-icon-arrowthickstop-1-s { background-position: -224px -48px; } .ui-icon-arrowthickstop-1-w { background-position: -240px -48px; } .ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } .ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; } .ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; } .ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; } .ui-icon-arrowreturn-1-w { background-position: -64px -64px; } .ui-icon-arrowreturn-1-n { background-position: -80px -64px; } .ui-icon-arrowreturn-1-e { background-position: -96px -64px; } .ui-icon-arrowreturn-1-s { background-position: -112px -64px; } .ui-icon-arrowrefresh-1-w { background-position: -128px -64px; } .ui-icon-arrowrefresh-1-n { background-position: -144px -64px; } .ui-icon-arrowrefresh-1-e { background-position: -160px -64px; } .ui-icon-arrowrefresh-1-s { background-position: -176px -64px; } .ui-icon-arrow-4 { background-position: 0 -80px; } .ui-icon-arrow-4-diag { background-position: -16px -80px; } .ui-icon-extlink { background-position: -32px -80px; } .ui-icon-newwin { background-position: -48px -80px; } .ui-icon-refresh { background-position: -64px -80px; } .ui-icon-shuffle { background-position: -80px -80px; } .ui-icon-transfer-e-w { background-position: -96px -80px; } .ui-icon-transferthick-e-w { background-position: -112px -80px; } .ui-icon-folder-collapsed { background-position: 0 -96px; } .ui-icon-folder-open { background-position: -16px -96px; } .ui-icon-document { background-position: -32px -96px; } .ui-icon-document-b { background-position: -48px -96px; } .ui-icon-note { background-position: -64px -96px; } .ui-icon-mail-closed { background-position: -80px -96px; } .ui-icon-mail-open { background-position: -96px -96px; } .ui-icon-suitcase { background-position: -112px -96px; } .ui-icon-comment { background-position: -128px -96px; } .ui-icon-person { background-position: -144px -96px; } .ui-icon-print { background-position: -160px -96px; } .ui-icon-trash { background-position: -176px -96px; } .ui-icon-locked { background-position: -192px -96px; } .ui-icon-unlocked { background-position: -208px -96px; } .ui-icon-bookmark { background-position: -224px -96px; } .ui-icon-tag { background-position: -240px -96px; } .ui-icon-home { background-position: 0 -112px; } .ui-icon-flag { background-position: -16px -112px; } .ui-icon-calendar { background-position: -32px -112px; } .ui-icon-cart { background-position: -48px -112px; } .ui-icon-pencil { background-position: -64px -112px; } .ui-icon-clock { background-position: -80px -112px; } .ui-icon-disk { background-position: -96px -112px; } .ui-icon-calculator { background-position: -112px -112px; } .ui-icon-zoomin { background-position: -128px -112px; } .ui-icon-zoomout { background-position: -144px -112px; } .ui-icon-search { background-position: -160px -112px; } .ui-icon-wrench { background-position: -176px -112px; } .ui-icon-gear { background-position: -192px -112px; } .ui-icon-heart { background-position: -208px -112px; } .ui-icon-star { background-position: -224px -112px; } .ui-icon-link { background-position: -240px -112px; } .ui-icon-cancel { background-position: 0 -128px; } .ui-icon-plus { background-position: -16px -128px; } .ui-icon-plusthick { background-position: -32px -128px; } .ui-icon-minus { background-position: -48px -128px; } .ui-icon-minusthick { background-position: -64px -128px; } .ui-icon-close { background-position: -80px -128px; } .ui-icon-closethick { background-position: -96px -128px; } .ui-icon-key { background-position: -112px -128px; } .ui-icon-lightbulb { background-position: -128px -128px; } .ui-icon-scissors { background-position: -144px -128px; } .ui-icon-clipboard { background-position: -160px -128px; } .ui-icon-copy { background-position: -176px -128px; } .ui-icon-contact { background-position: -192px -128px; } .ui-icon-image { background-position: -208px -128px; } .ui-icon-video { background-position: -224px -128px; } .ui-icon-script { background-position: -240px -128px; } .ui-icon-alert { background-position: 0 -144px; } .ui-icon-info { background-position: -16px -144px; } .ui-icon-notice { background-position: -32px -144px; } .ui-icon-help { background-position: -48px -144px; } .ui-icon-check { background-position: -64px -144px; } .ui-icon-bullet { background-position: -80px -144px; } .ui-icon-radio-off { background-position: -96px -144px; } .ui-icon-radio-on { background-position: -112px -144px; } .ui-icon-pin-w { background-position: -128px -144px; } .ui-icon-pin-s { background-position: -144px -144px; } .ui-icon-play { background-position: 0 -160px; } .ui-icon-pause { background-position: -16px -160px; } .ui-icon-seek-next { background-position: -32px -160px; } .ui-icon-seek-prev { background-position: -48px -160px; } .ui-icon-seek-end { background-position: -64px -160px; } .ui-icon-seek-start { background-position: -80px -160px; } /* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */ .ui-icon-seek-first { background-position: -80px -160px; } .ui-icon-stop { background-position: -96px -160px; } .ui-icon-eject { background-position: -112px -160px; } .ui-icon-volume-off { background-position: -128px -160px; } .ui-icon-volume-on { background-position: -144px -160px; } .ui-icon-power { background-position: 0 -176px; } .ui-icon-signal-diag { background-position: -16px -176px; } .ui-icon-signal { background-position: -32px -176px; } .ui-icon-battery-0 { background-position: -48px -176px; } .ui-icon-battery-1 { background-position: -64px -176px; } .ui-icon-battery-2 { background-position: -80px -176px; } .ui-icon-battery-3 { background-position: -96px -176px; } .ui-icon-circle-plus { background-position: 0 -192px; } .ui-icon-circle-minus { background-position: -16px -192px; } .ui-icon-circle-close { background-position: -32px -192px; } .ui-icon-circle-triangle-e { background-position: -48px -192px; } .ui-icon-circle-triangle-s { background-position: -64px -192px; } .ui-icon-circle-triangle-w { background-position: -80px -192px; } .ui-icon-circle-triangle-n { background-position: -96px -192px; } .ui-icon-circle-arrow-e { background-position: -112px -192px; } .ui-icon-circle-arrow-s { background-position: -128px -192px; } .ui-icon-circle-arrow-w { background-position: -144px -192px; } .ui-icon-circle-arrow-n { background-position: -160px -192px; } .ui-icon-circle-zoomin { background-position: -176px -192px; } .ui-icon-circle-zoomout { background-position: -192px -192px; } .ui-icon-circle-check { background-position: -208px -192px; } .ui-icon-circlesmall-plus { background-position: 0 -208px; } .ui-icon-circlesmall-minus { background-position: -16px -208px; } .ui-icon-circlesmall-close { background-position: -32px -208px; } .ui-icon-squaresmall-plus { background-position: -48px -208px; } .ui-icon-squaresmall-minus { background-position: -64px -208px; } .ui-icon-squaresmall-close { background-position: -80px -208px; } .ui-icon-grip-dotted-vertical { background-position: 0 -224px; } .ui-icon-grip-dotted-horizontal { background-position: -16px -224px; } .ui-icon-grip-solid-vertical { background-position: -32px -224px; } .ui-icon-grip-solid-horizontal { background-position: -48px -224px; } .ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } .ui-icon-grip-diagonal-se { background-position: -80px -224px; } /* Misc visuals ----------------------------------*/ /* Corner radius */ .ui-corner-tl { -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; } .ui-corner-tr { -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; } .ui-corner-bl { -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px; } .ui-corner-br { -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; } .ui-corner-top { -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; } .ui-corner-bottom { -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; } .ui-corner-right { -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; } .ui-corner-left { -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px; } .ui-corner-all { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } /* Overlays */ .ui-widget-overlay { background: #aaaaaa url(/images/ui/jquery.ui/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); } .ui-widget-shadow { margin: 0 0 0 0; padding: 0; background: #aaaaaa url(/images/ui/jquery.ui/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: 0;filter:Alpha(Opacity=0); -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }/* Datepicker ----------------------------------*/ .ui-datepicker { width: 17em; padding: .2em .2em 0; } .ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; } .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; } .ui-datepicker .ui-datepicker-prev { left:2px; } .ui-datepicker .ui-datepicker-next { right:2px; } .ui-datepicker .ui-datepicker-prev-hover { left:1px; } .ui-datepicker .ui-datepicker-next-hover { right:1px; } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; } .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } .ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; } .ui-datepicker select.ui-datepicker-month-year {width: 100%;} .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 49%;} .ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; } .ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; } .ui-datepicker td { border: 0; padding: 1px; } .ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; } .ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; } .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; } /* with multiple calendars */ .ui-datepicker.ui-datepicker-multi { width:auto; } .ui-datepicker-multi .ui-datepicker-group { float:left; } .ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; } .ui-datepicker-multi-2 .ui-datepicker-group { width:50%; } .ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; } .ui-datepicker-multi-4 .ui-datepicker-group { width:25%; } .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; } .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; } .ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; } .ui-datepicker-row-break { clear:both; width:100%; } /* RTL support */ .ui-datepicker-rtl { direction: rtl; } .ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; } .ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; } .ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; } .ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; } .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; } .ui-datepicker-rtl .ui-datepicker-group { float:right; } .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; } .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; } /* IE6 IFRAME FIX (taken from datepicker 1.5.3 */ .ui-datepicker-cover { display: none; /*sorry for IE5*/ display/**/: block; /*sorry for IE5*/ position: absolute; /*must have*/ z-index: -1; /*must have*/ filter: mask(); /*must have*/ top: -4px; /*must have*/ left: -4px; /*must have*/ width: 200px; /*must have*/ height: 200px; /*must have*/ } /* ------------------------------------------------------------------------------------------------- It's *strongly* suggested that you don't modify this file. Instead, load a new stylesheet after this one in your layouts (eg formtastic_changes.css) and override the styles to suit your needs. This will allow you to update formtastic.css with new releases without clobbering your own changes. This stylesheet forms part of the Formtastic Rails Plugin (c) 2008 Justin French --------------------------------------------------------------------------------------------------*/ /* NORMALIZE AND RESET - obviously inspired by Yahoo's reset.css, but scoped to just form.formtastic --------------------------------------------------------------------------------------------------*/ /*form.formtastic, form.formtastic ul, form.formtastic ol, form.formtastic li, form.formtastic fieldset, form.formtastic legend, form.formtastic input, form.formtastic textarea, form.formtastic select, form.formtastic p { margin:0; padding:0; }*/ form.formtastic fieldset { border:0; } form.formtastic em, form.formtastic strong { font-style:normal; font-weight:normal; } form.formtastic ol, form.formtastic ul { list-style:none; } form.formtastic abbr, form.formtastic acronym { border:0; font-variant:normal; } form.formtastic input, form.formtastic textarea, form.formtastic select { font-family:inherit; font-size:inherit; font-weight:inherit; } form.formtastic input, form.formtastic textarea, form.formtastic select { font-size:100%; } form.formtastic legend { white-space:normal; color:#000; } /* SEMANTIC ERRORS --------------------------------------------------------------------------------------------------*/ form.formtastic ul.errors { color:#cc0000; margin:0.5em 0 1.5em 25%; list-style:square; } form.formtastic ul.errors li { padding:0; border:none; display:list-item; } /* FIELDSETS & LISTS --------------------------------------------------------------------------------------------------*/ form.formtastic fieldset { } form.formtastic fieldset.inputs { } form.formtastic fieldset.buttons { padding-left:25%; } form.formtastic fieldset ol { } form.formtastic fieldset.buttons li { float:left; padding-right:0.5em; } /* clearfixing the fieldsets */ form.formtastic fieldset { display: inline-block; } form.formtastic fieldset:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } html[xmlns] form.formtastic fieldset { display: block; } * html form.formtastic fieldset { height: 1%; } /* INPUT LIs --------------------------------------------------------------------------------------------------*/ form.formtastic fieldset > ol > li { margin-bottom:1.5em; } /* clearfixing the li's */ form.formtastic fieldset > ol > li { display: inline-block; } form.formtastic fieldset > ol > li:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } html[xmlns] form.formtastic fieldset > ol > li { display: block; } * html form.formtastic fieldset > ol > li { height: 1%; } form.formtastic fieldset > ol > li.required { } form.formtastic fieldset > ol > li.optional { } form.formtastic fieldset > ol > li.error { } /* LABELS --------------------------------------------------------------------------------------------------*/ form.formtastic fieldset > ol > li label { display:block; width:25%; float:left; padding-top:.2em; } form.formtastic fieldset > ol > li > li label { line-height:100%; padding-top:0; } form.formtastic fieldset > ol > li > li label input { line-height:100%; vertical-align:middle; margin-top:-0.1em;} /* NESTED FIELDSETS AND LEGENDS (radio, check boxes and date/time inputs use nested fieldsets) --------------------------------------------------------------------------------------------------*/ form.formtastic fieldset > ol > li fieldset { position:relative; } form.formtastic fieldset > ol > li fieldset legend { position:absolute; width:95%; padding-top:0.1em; left: 0px; } form.formtastic fieldset > ol > li fieldset legend span { position:absolute; } form.formtastic fieldset > ol > li fieldset legend.label label { position:absolute; } form.formtastic fieldset > ol > li fieldset ol { float:left; width:74%; margin:0; padding:0 0 0 25%; } form.formtastic fieldset > ol > li fieldset ol li { padding:0; border:0; } /* INLINE HINTS --------------------------------------------------------------------------------------------------*/ form.formtastic fieldset > ol > li p.inline-hints { color:#666; margin:0.5em 0 0 25%; } /* INLINE ERRORS --------------------------------------------------------------------------------------------------*/ form.formtastic fieldset > ol > li p.inline-errors { color:#cc0000; margin:0.5em 0 0 25%; } form.formtastic fieldset > ol > li ul.errors { color:#cc0000; margin:0.5em 0 0 25%; list-style:square; } form.formtastic fieldset > ol > li ul.errors li { padding:0; border:none; display:list-item; } /* STRING & NUMERIC OVERRIDES --------------------------------------------------------------------------------------------------*/ form.formtastic fieldset > ol > li.string input { max-width:74%; } form.formtastic fieldset > ol > li.password input { max-width: 13em; } form.formtastic fieldset > ol > li.numeric input { max-width:74%; } /* TEXTAREA OVERRIDES --------------------------------------------------------------------------------------------------*/ form.formtastic fieldset > ol > li.text textarea { width:74%; } /* HIDDEN OVERRIDES The dual declarations are required because of our clearfix display hack on the LIs, which is more specific than the more general rule below. TODO: Revist the clearing hack and this rule. --------------------------------------------------------------------------------------------------*/ form.formtastic fieldset ol li.hidden, html[xmlns] form.formtastic fieldset ol li.hidden { display:none; } /* BOOLEAN OVERRIDES --------------------------------------------------------------------------------------------------*/ form.formtastic fieldset > ol > li.boolean label { padding-left:25%; width:auto; } form.formtastic fieldset > ol > li.boolean label input { margin:0 0.5em 0 0.2em; } /* RADIO OVERRIDES --------------------------------------------------------------------------------------------------*/ form.formtastic fieldset > ol > li.radio { } form.formtastic fieldset > ol > li.radio fieldset ol { margin-bottom:-0.6em; } form.formtastic fieldset > ol > li.radio fieldset ol li { margin:0.1em 0 0.5em 0; } form.formtastic fieldset > ol > li.radio fieldset ol li label { float:none; width:100%; } form.formtastic fieldset > ol > li.radio fieldset ol li label input { margin-right:0.2em; } /* CHECK BOXES (COLLECTION) OVERRIDES --------------------------------------------------------------------------------------------------*/ form.formtastic fieldset > ol > li.check_boxes { } form.formtastic fieldset > ol > li.check_boxes fieldset ol { margin-bottom:-0.6em; } form.formtastic fieldset > ol > li.check_boxes fieldset ol li { margin:0.1em 0 0.5em 0; } form.formtastic fieldset > ol > li.check_boxes fieldset ol li label { float:none; width:100%; } form.formtastic fieldset > ol > li.check_boxes fieldset ol li label input { margin-right:0.2em; } /* DATE & TIME OVERRIDES --------------------------------------------------------------------------------------------------*/ form.formtastic fieldset > ol > li.date fieldset ol li, form.formtastic fieldset > ol > li.time fieldset ol li, form.formtastic fieldset > ol > li.datetime fieldset ol li { float:left; width:auto; margin:0 .3em 0 0; } form.formtastic fieldset > ol > li.date fieldset ol li label, form.formtastic fieldset > ol > li.time fieldset ol li label, form.formtastic fieldset > ol > li.datetime fieldset ol li label { display:none; } form.formtastic fieldset > ol > li.date fieldset ol li label input, form.formtastic fieldset > ol > li.time fieldset ol li label input, form.formtastic fieldset > ol > li.datetime fieldset ol li label input { display:inline; margin:0; padding:0; } /* ------------------------------------------------------------------------------------------------- Load this stylesheet after formtastic.css in your layouts to override the CSS to suit your needs. This will allow you to update formtastic.css with new releases without clobbering your own changes. For example, to make the inline hint paragraphs a little darker in color than the standard #666: form.formtastic fieldset > ol > li p.inline-hints { color:#333; } HINT: The following style may be *conditionally* included for improved support on older versions of IE(<8) form.formtastic fieldset ol li fieldset legend { margin-left: -6px;} --------------------------------------------------------------------------------------------------*/ /* SPECIFIC SIZES --------------------------------------------------------------------------------------------------*/ #main form.formtastic fieldset > ol > li label { width: 106px; } #main form.formtastic fieldset > ol > li label.inline { width:auto; } #main form.formtastic fieldset.buttons { padding-left:140px; } #main form.formtastic fieldset > ol > li.input_functions { margin-left: 140px; } #main form.formtastic fieldset > ol > li.text textarea { width: 444px; } #main form.formtastic fieldset > ol > li.string input, form.formtastic textarea { max-width: 444px; width:444px; } #main form.formtastic select { width: 466px; } #main form.formtastic fieldset > ol > li p.inline-errors, #main form.formtastic fieldset > ol > li p.inline-hints { padding: 0; margin:0.5em 0 0 140px; } #main form.formtastic fieldset > ol > li p.inline-hints { color: #9F9A8B; } #main form.formtastic fieldset > ol > li ul.errors { margin:0.5em 0 0 140px; } #main form.formtastic fieldset > ol > li.boolean label { padding-left:126px; width:auto; } #main form.formtastic fieldset > ol > li .image_attribute { margin-left:126px; } #main form.formtastic fieldset > ol > li .editor { display: inline-block; } #main form.formtastic fieldset > ol > li.period.last { background: rgba(60, 159, 29, 0.1); padding-top: 7px; padding-bottom: 7px; margin-bottom: 0.8em;} form.formtastic em, form.formtastic strong { font-style:bold; font-weight:bold; } form.formtastic div.help { padding: 0 0 0 140px; } /* LABELS --------------------------------------------------------------------------------------------------*/ form.formtastic fieldset > ol > li label { text-align: right; padding: 7px 20px 0 0; } form.formtastic fieldset > ol > li label.inline { display:inline-block; width:auto; float: none; padding: 7px 4px 0 4px; } /* STRING & NUMERIC OVERRIDES --------------------------------------------------------------------------------------------------*/ form.formtastic fieldset > ol > li.string input { max-width:71%; } form.formtastic fieldset > ol > li.password input { max-width: 13em; } form.formtastic fieldset > ol > li.numeric input { max-width:71%; } /* INPUT LIs --------------------------------------------------------------------------------------------------*/ form.formtastic fieldset.inputs > ol > li { padding-left: 14px; padding-right: 14px; } /* DYNAMICS --------------------------------------------------------------------------------------------------*/ html[xmlns] form.formtastic fieldset > ol > li.more_options { display: none; } form.formtastic .expand_wrapper { margin-bottom: 1.5em; border-bottom: 1px dashed #a39e88; } form.formtastic .expand { color: #3C9F1D; display: inline-block; padding-left: 20px; background: url('/images/ui/icons/expand.png') left 1px no-repeat; } form.formtastic .expand.collapse { background-image: url('/images/ui/icons/collapse.png') } /* TEXTAREA OVERRIDES --------------------------------------------------------------------------------------------------*/ form.formtastic .xsmall { width: 4em !important; } form.formtastic .small { width: 100px !important; } form.formtastic .smaller { width: 70px !important; } form.formtastic .medium { width: 50%; } /* STRING OVERRIDES --------------------------------------------------------------------------------------------------*/ form.formtastic abbr[title=required] { color: red; font-weight: bold; margin-left: 0.2em; } .remove_fields { margin-left: 1em; } form.formtastic fieldset > ol > li.password input { max-width: 71%; } /* BUTTONS OVERRIDES --------------------------------------------------------------------------------------------------*/ form.formtastic input.submit, form.formtastic input.create { width: auto !important; } form.formtastic fieldset.buttons { /*border-top: 1px dashed #a39e88;*/ padding-top: 14px; } form.formtastic a#delete { color: red; float: right; padding-left: 20px; background: url('/images/ui/icons/delete.png') center left no-repeat;} /* IMAGES OVERRIDES --------------------------------------------------------------------------------------------------*/ form.formtastic fieldset > ol > li .image_attribute { display: inline-block; background: #F9F1DA; border-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.2); border-style: solid; border-width: 1px; -moz-border-radius: 4px;} form.formtastic fieldset > ol > li .image_attribute img { padding: 10px 0 10px 10px; } form.formtastic fieldset > ol > li .image_attribute .remove_fields { float: right; display: inline-block; margin: 36px 10px 0 0; } div.color_picker { height: 21px; width: 21px; padding: 0; margin-top: 2px; border: 3px solid #fff; -moz-border-radius: 3px; background: url(/images/ui/color_picker_arrow.png) no-repeat bottom right; display: inline-block; cursor: pointer; } div#color_selector { width: 110px; position: absolute; border: 1px solid #DED9C5; background-color: #FFFFFF; -moz-border-radius: 4px; padding: 7px; } div#color_custom {width: 100%; float:left } div#color_custom label {font-size: 95%; color: #2F2F2F; margin: 5px 2px; width: 25%} div#color_custom input {margin: 5px 2px; padding: 0; font-size: 95%; width: 65%; } div.color_swatch { height: 12px; width: 12px; border: 1px solid #1E1E1E; margin: 2px; float: left; cursor: pointer; line-height: 12px; } /* * FancyBox - jQuery Plugin * Simple and fancy lightbox alternative * * Examples and documentation at: http://fancybox.net * * Copyright (c) 2008 - 2010 Janis Skarnelis * * Version: 1.3.1 (05/03/2010) * Requires: jQuery v1.3+ * * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html */ #fancybox-loading { position: fixed; top: 50%; left: 50%; height: 40px; width: 40px; margin-top: -20px; margin-left: -20px; cursor: pointer; overflow: hidden; z-index: 1104; display: none; } * html #fancybox-loading { /* IE6 */ position: absolute; margin-top: 0; } #fancybox-loading div { position: absolute; top: 0; left: 0; width: 40px; height: 480px; background-image: url('/images/ui/jquery.fancybox/fancybox.png'); } #fancybox-overlay { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: #000; z-index: 1100; display: none; } * html #fancybox-overlay { /* IE6 */ position: absolute; width: 100%; } #fancybox-tmp { padding: 0; margin: 0; border: 0; overflow: auto; display: none; } #fancybox-wrap { position: absolute; top: 0; left: 0; margin: 0; padding: 20px; z-index: 1101; display: none; } #fancybox-outer { position: relative; width: 100%; height: 100%; background: #FFF; } #fancybox-inner { position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; margin: 0; outline: none; overflow: hidden; } #fancybox-hide-sel-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; } #fancybox-close { position: absolute; top: -15px; right: -15px; width: 30px; height: 30px; background-image: url('/images/ui/jquery.fancybox/fancybox.png'); background-position: -40px 0px; cursor: pointer; z-index: 1103; display: none; } #fancybox_error { color: #444; font: normal 12px/20px Arial; padding: 7px; margin: 0; } #fancybox-content { height: auto; width: auto; padding: 0; margin: 0; } #fancybox-img { width: 100%; height: 100%; padding: 0; margin: 0; border: none; outline: none; line-height: 0; vertical-align: top; -ms-interpolation-mode: bicubic; } #fancybox-frame { position: relative; width: 100%; height: 100%; border: none; display: block; } #fancybox-title { position: absolute; bottom: 0; left: 0; font-family: Arial; font-size: 12px; z-index: 1102; } .fancybox-title-inside { padding: 10px 0; text-align: center; color: #333; } .fancybox-title-outside { padding-top: 5px; color: #FFF; text-align: center; font-weight: bold; } .fancybox-title-over { color: #FFF; text-align: left; } #fancybox-title-over { padding: 10px; background-image: url('/images/ui/jquery.fancybox/fancy_title_over.png'); display: block; } #fancybox-title-wrap { display: inline-block; } #fancybox-title-wrap span { height: 32px; float: left; } #fancybox-title-left { padding-left: 15px; background-image: url('/images/ui/jquery.fancybox/fancybox.png'); background-position: -40px -90px; background-repeat: no-repeat; } #fancybox-title-main { font-weight: bold; line-height: 29px; background-image: url('/images/ui/jquery.fancybox/fancybox-x.png'); background-position: 0px -40px; color: #FFF; } #fancybox-title-right { padding-left: 15px; background-image: url('/images/ui/jquery.fancybox/fancybox.png'); background-position: -55px -90px; background-repeat: no-repeat; } #fancybox-left, #fancybox-right { position: absolute; bottom: 0px; height: 100%; width: 35%; cursor: pointer; outline: none; background-image: url('/images/ui/jquery.fancybox/blank.gif'); z-index: 1102; display: none; } #fancybox-left { left: 0px; } #fancybox-right { right: 0px; } #fancybox-left-ico, #fancybox-right-ico { position: absolute; top: 50%; left: -9999px; width: 30px; height: 30px; margin-top: -15px; cursor: pointer; z-index: 1102; display: block; } #fancybox-left-ico { background-image: url('/images/ui/jquery.fancybox/fancybox.png'); background-position: -40px -30px; } #fancybox-right-ico { background-image: url('/images/ui/jquery.fancybox/fancybox.png'); background-position: -40px -60px; } #fancybox-left:hover, #fancybox-right:hover { visibility: visible; /* IE6 */ } #fancybox-left:hover span { left: 20px; } #fancybox-right:hover span { left: auto; right: 20px; } .fancy-bg { position: absolute; padding: 0; margin: 0; border: 0; width: 20px; height: 20px; z-index: 1001; } #fancy-bg-n { top: -20px; left: 0; width: 100%; background-image: url('/images/ui/jquery.fancybox/fancybox-x.png'); } #fancy-bg-ne { top: -20px; right: -20px; background-image: url('/images/ui/jquery.fancybox/fancybox.png'); background-position: -40px -162px; } #fancy-bg-e { top: 0; right: -20px; height: 100%; background-image: url('/images/ui/jquery.fancybox/fancybox-y.png'); background-position: -20px 0px; } #fancy-bg-se { bottom: -20px; right: -20px; background-image: url('/images/ui/jquery.fancybox/fancybox.png'); background-position: -40px -182px; } #fancy-bg-s { bottom: -20px; left: 0; width: 100%; background-image: url('/images/ui/jquery.fancybox/fancybox-x.png'); background-position: 0px -20px; } #fancy-bg-sw { bottom: -20px; left: -20px; background-image: url('/images/ui/jquery.fancybox/fancybox.png'); background-position: -40px -142px; } #fancy-bg-w { top: 0; left: -20px; height: 100%; background-image: url('/images/ui/jquery.fancybox/fancybox-y.png'); } #fancy-bg-nw { top: -20px; left: -20px; background-image: url('/images/ui/jquery.fancybox/fancybox.png'); background-position: -40px -122px; } /* IE */ #fancybox-loading.fancybox-ie div { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/ui/jquery.fancybox/fancy_loading.png', sizingMethod='scale'); } .fancybox-ie #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/ui/jquery.fancybox/fancy_close.png', sizingMethod='scale'); } .fancybox-ie #fancybox-title-over { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/ui/jquery.fancybox/fancy_title_over.png', sizingMethod='scale'); zoom: 1; } .fancybox-ie #fancybox-title-left { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/ui/jquery.fancybox/fancy_title_left.png', sizingMethod='scale'); } .fancybox-ie #fancybox-title-main { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/ui/jquery.fancybox/fancy_title_main.png', sizingMethod='scale'); } .fancybox-ie #fancybox-title-right { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/ui/jquery.fancybox/fancy_title_right.png', sizingMethod='scale'); } .fancybox-ie #fancybox-left-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/ui/jquery.fancybox/fancy_nav_left.png', sizingMethod='scale'); } .fancybox-ie #fancybox-right-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/ui/jquery.fancybox/fancy_nav_right.png', sizingMethod='scale'); } .fancybox-ie .fancy-bg { background: transparent !important; } .fancybox-ie #fancy-bg-n { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/ui/jquery.fancybox/fancy_shadow_n.png', sizingMethod='scale'); } .fancybox-ie #fancy-bg-ne { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/ui/jquery.fancybox/fancy_shadow_ne.png', sizingMethod='scale'); } .fancybox-ie #fancy-bg-e { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/ui/jquery.fancybox/fancy_shadow_e.png', sizingMethod='scale'); } .fancybox-ie #fancy-bg-se { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/ui/jquery.fancybox/fancy_shadow_se.png', sizingMethod='scale'); } .fancybox-ie #fancy-bg-s { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/ui/jquery.fancybox/fancy_shadow_s.png', sizingMethod='scale'); } .fancybox-ie #fancy-bg-sw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/ui/jquery.fancybox/fancy_shadow_sw.png', sizingMethod='scale'); } .fancybox-ie #fancy-bg-w { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/ui/jquery.fancybox/fancy_shadow_w.png', sizingMethod='scale'); } .fancybox-ie #fancy-bg-nw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/ui/jquery.fancybox/fancy_shadow_nw.png', sizingMethod='scale'); } .ac_results { background-color:#FEFCF8; overflow: hidden; z-index: 99999; border:1px solid #CCC; } .ac_results ul { width: 100%; list-style-position: outside; list-style: none; padding: 0; margin: 0; } .ac_results li { margin: 0px; padding:5px 10px; cursor: default; display: block; /* if width will be 100% horizontal scrollbar will apear when scroll mode will be used */ /*width: 100%;*/ /* it is very important, if line-height not setted or setted in relative units scroll will be broken in firefox */ line-height: 16px; overflow: hidden; } .ac_results li .highlight { font-size: 1.2em; } .ac_loading { background: white url('indicator.gif') right center no-repeat; } .ac_odd { } .ac_over { background-color:#FFF3CF; }