/* GLOBAL TAG STYLES */ body { color: #333; font-family: Arial,Helvetica,"Lucida Grande", "Lucida Sans Regular", sans-serif; background-color: #413D36; font-size: 100%;} a { color: #2169A5; text-decoration: none;} a:hover { color: #2169A5; text-decoration: underline;} :-moz-any-link:focus { outline: none; } a, a:active { outline:none; } h1 { font-size: 1.5em; } h2 { font-size: 1.3em; } h3 { font-size: 1.2em; } h4 { font-size: 1.1em; font-weight: bold; } h5 { font-size: .75em; font-weight: bold; } h1, h2, h3, h4, h5 { color: #555; margin-bottom: 6px; font-weight: bold; } p { margin-bottom: 4px; } label { cursor: pointer; font-size: .75em; font-weight: bold; } select, fieldset, textarea { border: 1px solid #aaa; } fieldset { border:0px; margin-top: 7px;} legend { margin:0; border: 0; padding: 3px 3px 7px 3px; font-size: 1em; font-weight: normal;} input { padding: 2px 4px; } textarea { width: 464px; height: 150px; padding: 2px 4px; font-family: Arial,Helvetica;} strong { font-weight: bold;} table th { font-size: 12px; font-weight: bold; text-transform: uppercase; padding-bottom: 9px; } table td {vertical-align: top;} blockquote { margin: 6px 0px 6px 12px ; } fieldset label { font-family: Arial; display: block; color: #555; margin-bottom: 2px; font-size: 14px; } fieldset { position: relative; width: 324px; display: block; margin-bottom: 6px; } fieldset input, fieldset select, textarea { border: 1px solid #999;margin-bottom: 7px; } fieldset select { font-size: .9em; color: #333; } fieldset textarea { font-size: .9em; } fieldset input[type="text"] { padding: 4px; } fieldset input[type="password"] { padding: 4px; } dt { font-weight: bold; margin-top: 20px;} dl { margin-bottom: 20px;} /* COLORS */ .blue-base { background-color: #85A0BA !important; } .blue-compliment { background-color: #B5CDD8 !important; } .blue-highlight { background-color: #E4EBF2 !important; } .blue-darkhighlight { background-color: #748BA1 !important; } .blue-linkcolor { background-color: #2169A5 !important; } .blue-light { background-color: #78B9D8 !important; } .blue-light:hover { background-color: #2169A5 !important; } .red-dark { background-color: #943D47 !important; } .red-dark:hover { background-color: #BF8C92 !important; } .red-light { background-color: #BF8C92 !important; } .red-light:hover { background-color: #943D47 !important; } .green-dark { background-color: #899C91 !important; } .green-light { background-color: #c6d3cb !important; } .brown-dark { background-color: #6E5A38 !important; } .brown-light { background-color: #BAA685 !important; } .brown-pale { background-color: #918A88 !important; } .highlight-color { background-color: #E4EBF2 !important; } /* ROOT CONTAINERS */ #container { width: 960px; margin: 0 auto; padding: 18px 12px 36px 12px; background-color: white; } #content { min-height: 350px; height:auto !important;height:350px; } /* STRUCTURE STYLES */ .onecolumn { width: 150px; } .twocolumn { width: 312px; } .threecolumn { width: 474px; } .fourcolumn { width: 636px; } .sixcolumn { width: 960px; } .left { float: left; } .right { float: right; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearboth, .clear { clear:both;} /* GLOBAL ELEMENTS */ .navigation-box { position:relative; width: 212px; font: 1.3em "Arial"; margin-bottom: 36px; } .navigation-box h5 { border: #85a1ba 1px solid; z-index: 100; position:absolute; top:0px; left:0; width: 186px; text-transform: uppercase; font-size: 12px; height: 13px; background-color: #fff; margin: 0 6px; padding: 6px 0px 6px 12px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } .navigation-box ul { position:relative; top:18px; border: #85a1ba 1px solid; padding-top: 12px; } .navigation-box ul li a { display: block; padding: 6px 0px 6px 12px; } .navigation-box ul li a:hover { text-decoration:none; } .navigation-box ul li a img { margin-right: 12px; } .infobox { border: #85a1ba 1px solid; margin: 0 12px 12px; padding: 12px; } .infobox h4 { border-bottom: 1px dotted #85a1ba; padding-bottom: 3px; } .infobox h4 a:hover { text-decoration: none; } .infobox h4 img { margin-right: 6px; margin-bottom: -2px; } .infobox p { font-size:.85em; line-height: 1.2em; margin-bottom: 6px; } .pagination { margin: 6px 0px; text-align: center;} .bottom-list-ornament { padding: 0 0 12px 0; margin: 0 0 18px 0; border-bottom: 1px solid #dedede; } .icon { margin-right: 4px; margin-bottom:-2px; } .mini-icon { background-color: #DDD;} .small { font-size: .75em;} p.center { text-align: center; } #hide-flash-message { font-size: 11px; } /* BUTTONS */ a.button { font-size: 14px; font-weight: bold; line-height: 36px; text-align: center; background-color: #78B9D8; border: 1px #777 solid; color: white; padding: 6px 12px 6px 12px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } a.button:hover { text-decoration: none; background-color: #2169A5; color: white; } input.button { font-size: 14px; text-transform: uppercase; font-weight: bold; text-align: center; background-color: #78B9D8; border: 1px #777 solid; color: white; padding: 4px 12px 4px 12px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } input.button:hover { text-decoration: none; background-color: #2169A5; color: white; cursor: pointer} input.blur { color: #aaa; } .buttons { margin: 6px 0; padding: 6px 0; } .buttons button,.buttons input,.buttons a { text-align: center; font: .9em "Arial"; background-color: #78B9D8; cursor: pointer; border: 1px #777 solid; margin-right: 24px; padding: 3px 6px; color: white; text-transform: uppercase; -moz-border-radius: 3px; -webkit-border-radius: 3px;} .buttons button:hover,.buttons input:hover,.buttons a:hover { text-decoration: none; background-color: #2169A5; color: white; } .buttons a.cancel { color: black; font-size: .7em; text-transform: uppercase; background-color: #ddd; border-color: #999; } .buttons a.cancel:hover { background-color: #bbb;} .buttons form, .buttons form div { display:inline; } .small .button, .button-small, .button-tiny { text-align: center; font: 13px "Arial"; background-color: #78B9D8; cursor: pointer; border: 1px #777 solid; padding: 3px 6px; color: white; -moz-border-radius: 3px; -webkit-border-radius: 3px;} a.button-small:hover, a.button-tiny:hover { text-decoration: none; background-color: #2169A5; color: white; } .button-tiny { font: 10px !important; font-weight: bold; } /* GLOBAL NAVIGATION */ #globalnav { position:relative; z-index:960; width: 716px; margin: 0 auto; padding: 15px 12px 15px 256px; height: 30px; background: url(/images/bkgd_gradient_sky.jpg); } /* GROUP MENU */ #header-group-menu, #header-search-box, #header-content-menu { float: left; margin-right: 18px; z-index: 1; position:relative;} #group-menu-container, #add-content-menu-container, #search-box-container { position:relative; color: #333; } .menu-container { position: absolute; top: -16px; left:-25px; z-index:999; display: none; } .menu-shadow { width: 371px; padding-top: 16px; padding-left: 25px; background: transparent url(/images/groupmenu_shadow_top_long.png) no-repeat scroll 0 0; } .menu-shadow-bottom { width: 371px; height: 25px; background: transparent url(/images/groupmenu_shadow_bottom.png) no-repeat scroll 0 0; } .menu-header { display: block; width: 164px; height: 30px; cursor: pointer; z-index:1100; } .menu { width: 321px; background: #fff; padding: 6px 0 6px 0; z-index:1000; cursor: pointer; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px;} .menu a { color: #333; display: block; background-color: white; padding: 6px 16px; z-index:500; font: .9em "Arial" } .menu a.hover, #groups-view-all.hover, #groups-create-new.hover { background-color: #E4EBF2; text-decoration: none; } #groups-view-all { border-top: 1px dotted #999; } #groups-create-new { color: #2169A5; text-align: center; border-top: 1px solid #bbb; } #groups-private-stuff-menuitem { border-bottom: 1px dotted #999; } #header-content-menu #add-content-menu-container { z-index: 999; } #header-search-box #search-box-container { z-index: 100;} #header-group-menu .menu-container{ z-index: 5 } /* GLOBAL SEARCH BOX */ #search-box-container { width: 320px; } .search-box-container-noscope { height: 30px; background: transparent url(/images/buttons/btn_search.gif) no-repeat scroll 0 0;} .search-box-container-withscope { height: 47px; margin-top: -9px; background: transparent url(/images/buttons/btn_search_scope.gif) no-repeat scroll 0 0; } #search-box-container img { width:0px; height:0px;} #search-box-container #search-box-inputs { position: relative; } #search-box-container #search-box-inputs #global-search-input { position: absolute; border:0px; padding-top:2px; height: 20px; width: 175px; top:3px; left: 100px; font: .9em "Arial"; } #search-box-container #search-box-inputs #global-search-submit { float: right; margin-top: 3px; margin-right: 3px; padding:0px;} #search-box-container #search-scope-selection { color: white; font-weight: bold; } /* ACCOUNT INFO (top bar) */ #accountinfo { position: relative; width: 960px; margin: 0 auto; padding: 0px 12px; height: 24px; background-color: #43596E; color: white; z-index: 999;} #accountinfo #logo-container { position: absolute; top:0; left: 12px;} #accountinfo a { color: white; } #accountinfo ul { width: 946px; margin: 0 auto; height: 18px; padding: 4px 6px 0px 6px; } #accountinfo ul li { float: right; margin-left: 14px; font-size: 13px; } /* LOCAL NAVIGATION */ #localnav { color: white; width: 960px; margin: 0 auto; padding: 9px 12px; height: 42px; background-color: #748BA1;} .user-header, .account-header { background-color: #748BA1 !important; } .group-header { background: #2677AC !important; } #localnav a { color: white; } #localnav h1 { color: white; font: 1.25em "Arial"; line-height:.9em; font-weight: normal; display: inline; margin: 0px 12px 0px 0px; } #localnav h2 { color: white; font: 1em "Arial"; margin: 4px 0px 0px 0px; } #localnav ul { margin-top: 9px; } #localnav ul li { display: inline; } #localnav ul li a { padding: 3px 10px 8px 10px;} #localnav ul li a:hover { background-color: white; color: #2677AC; text-decoration: none; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; } #localnav ul li a.nav-current { background-color: white; color: #2677AC; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; } li#nav-invitations { margin-left: 32px; font-weight: bold;} /* BREADCRUMB */ #breadcrumb p { position: relative; font: 1.2em "Arial"; font-weight: bold; margin-bottom: 12px; padding-bottom: 3px; border-bottom: 1px dotted #aaa; } #breadcrumb-right { font-size: .75em; position: absolute; right:12px; top: 3px; } /* ACCOUNT EDIT PAGE */ #edit-account p { margin-bottom: 12px;} #edit-account p input, #edit-account p select { font-size: 1.2em; } #edit-account div input, #edit-account div select { font-size: 1.2em; } /* HOME PAGE */ #home-content div { position:relative; } #home-content div h2 { border: #85a1ba 1px solid; z-index: 100; position:absolute; top:0px; left:0; width: 448px; text-transform: uppercase; font-size: 12px; height: 13px; background-color: #b5cdd8; margin: 0 6px; padding: 6px 0px 6px 12px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } #home-content div ul { position:relative; top:18px; padding: 12px 0px; border: #85a1ba 1px solid; } #home-content div ul li { padding: 12px 8px; background: url(/images/dotted_darker_3.gif) repeat-x bottom center } #home-content div ul li h5 { font: 1.3em "Times"; margin:0; } #home-content div ul li .group-rollup { font-size: .8em; } #home-groups-list #feed .group-profile-image { float: left; margin-right: 6px; } #home-groups-list #feed .group-profile-image img { height: 40px; width: 40px; } #home-groups-list #feed .group-profile-image a:after { content: url(/images/rounded_photo_corner_overlay_40.png); margin-left: -40px; } #home-getting-started { font-size: 1.2em; } #home-private-stuff, #home-groups-list, #home-group-all { margin-bottom: 36px; } #home-private-stuff div ul li { } /* EVENTS BROWSER */ #event-browser-explorer { position:relative; margin-bottom: 24px;} #event-browser-explorer h2 { border: #85a1ba 1px solid; z-index: 100; position:absolute; top:0px; left:0; width: 448px; text-transform: uppercase; font-size: 12px; height: 13px; background-color: #b5cdd8; margin: 0 6px; padding: 6px 0px 6px 12px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } #event-browser-explorer-body { position:relative; top:18px; padding-top: 12px; border: #85a1ba 1px solid; } #event-browser-explorer-header { position:relative; padding: 6px 0px 9px 6px; border-bottom: #85a1ba 1px solid;} #event-browser-explorer-header span { margin-right: 12px; text-transform: uppercase; font: .8em "Arial";} #event-browser-explorer-header a { padding: 3px; } #event-browser-explorer-header a:hover { background-color: #B5CDD8; color: white; text-decoration: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; } #event-browser-explorer h4 { background-color: #efefef; padding: 6px 12px; font-size: .9em; border-bottom: #85a1ba 1px solid; margin-bottom:0px;} #event-browser-explorer .sort-options { padding:4px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } #event-browser-events li { padding: 4px 8px; background: url(/images/dotted_darker_3.gif) repeat-x bottom center } #event-browser-events .event-title { font: 1.4em "Times"; } #event-browser-events .event-body { margin: 6px 0px 0px 12px } #event-browser-events .event-time { font: 1em "Times"; } #event-browser-events .event-photo { float: right; margin: 2px 18px 6px 0; } #event-browser-events .event-photo img { height: 75px; width: 75px; } #event-browser-events .event-photo a:after { content: url(/images/rounded_photo_corner_overlay.png); margin-left: -75px; } #event-browser-events .event-counts { font-size: .8em; font-weight: bold; margin: 12px 0px 12px 12px;} #event-browser-noevents { text-align: center; margin: 24px 12px; font: 1.8em "Times"; color: #777; } #event-browser-content #map { width: 100%; height: 400px;} #event-browser-navigation div { margin-bottom: 24px; } #event-browser-navigation div h5 { font-size: .9em; margin-bottom: 3px;} #event-browser-navigation div p { line-height: 1.5em; } #event-browser-navigation #scope-filter p a { padding:0 4px; background-color: #efefef; margin-right: 3px; line-height: 1.5em; -moz-border-radius: 3px; -webkit-border-radius: 3px; } #event-browser-navigation #scope-filter p a:hover { background-color: #B5CDD8; text-decoration: none; color: white; } #event-browser-navigation #events-browser-group-exclusion p { font-size: 1em } #event-browser-navigation #events-browser-group-exclusion #excluded-groups { font-size: 1em; font-weight: bold;} #event-browser-navigation #events-browser-group-exclusion #groups-form { display: none; } #event-browser-navigation #events-browser-group-exclusion #groups-form input { vertical-align: -2px; } #event-browser-navigation #search-filter #event_browser_search { width: 300px; font-size: 16px; color: #333; border: 1px solid #748bA1; -moz-border-radius: 3px; -webkit-border-radius: 3px; } #event-browser-navigation input.button { font-size: 12px; vertical-align: top; margin-left: 4px; text-transform: uppercase; } #event-browser-navigation #date-filter #start_time, #event-browser-navigation #date-filter #end_time { width: 125px; font-size: 16px; color: #333; border: 1px solid #748bA1; -moz-border-radius: 3px; -webkit-border-radius: 3px; } /* EVENT SHOW */ #images-location .images-widget {} #view-all-photos { text-align: center; margin-bottom: 30px; font-weight: bold; margin-top: -10px } /* EVENT IMAGES */ #event-images-upload-choices .new-event-image-choice { width: 230px; height: 50px; border: 1px solid #ccc; float: left; margin-right: 20px; padding: 5px 10px; margin: 5px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } #event-images-upload-choices .new-event-image-choice img { border: 0; float: left; } #event-images-upload-choices a.new-event-image-choice:hover { text-decoration: none; background-color: #e4ebf2; } #event-images-upload-choices .new-event-image-choice-desc { font-size: .82em; font-weight: bold; padding-top: 10px; float: right; width: 140px} #event-images-upload-choices #monitor-logo { margin-top: 5px; } #event-images-upload-choices #flickr-logo { margin-top: 15px; } #event-images-upload-choices #picasa-logo { margin-top: 10px; } /* MAP VIEW */ .mapitem-event .thumbnail { margin: 0 6px 6px 0; float: left; } .mapitem-event .thumbnail img { height: 50px; width: 50px; } .mapitem-event .information .title { font-size: .9em; margin-bottom: 6px; line-height: 1.1em; font-weight: bold;} .mapitem-event .information .user { font-size: .7em; } .mapitem-event .information .eventtime { font-size: .8em; } /* FILE UPLOAD */ #file-upload #btnCancel { vertical-align: top; margin-left: 12px; margin-top: 2px;} #file-upload #upload_queue { display: none;} #file-upload #upload_queue, #uploaded_photos { margin: 20px 0px;} #file-upload #upload_queue .fileupload_progress_box { margin-bottom: 10px; } #file-upload #uploaded_photos img{ margin: 0px 6px 6px 0px; } #file-upload #uploadinfo h4 { margin-bottom: 4px; } #file-upload #uploadinfo p { width:480px; font-size: .9em; margin-bottom: 15px; } #error-photos { font-size: .8em; display:none; margin-top: 25px;} #error-photos h4 { color: #aa0000; } #upload_queue_completed_message { margin-top: 24px; display:none; border-top: 1px dotted #aaa; padding-top: 12px; } #upload_queue_completed_message p { font-size: .9em; margin-bottom: 12px; } /* FLASH TIMELINE CONTENT */ #flashcontent { min-height: 370px; height:auto !important;height:370px; z-index: -999; background-color: #efefef;} /* DECORATION STYLES */ .dotted-line-bottom { background: url(/images/dotted_darker_3.gif) repeat-x bottom center } #favorite { background-color:white; margin-bottom:0px; padding-bottom: 12px; font-size: .9em; font-weight: bold; } /* INPUT HINTS */ .hinted_input { position: relative; margin-bottom: 7px; } .hint { width: 300px; position: absolute; display: none;} .hint p { border: 3px solid #78B9D8; padding: 5px; width: 272px; float: right; min-height: 25px; height:auto !important;height:25px; font-size: 14px; font-family: "Arial"; margin:0px; background-color: #78B9D8; color: #fff; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-bottomright: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; } .hint .hint-arrow { width: 12px; margin-top: 1px; } /* GROUP OPEN INVITATIONS */ #group-open-invitations { border: #85a1ba 1px solid; margin: 24px 12px 24px 0px; padding: 12px; } #group-open-invitations h4 { border-bottom: 1px dotted #85a1ba; padding-bottom: 3px; } #group-open-invitations h5 { font-size: 1em;} #group-open-invitations p { font-size: .8em;} #group-open-invitations ul li { float: left; margin-top: 12px; border:1px solid #ccc; padding: 6px; width: 200px; margin-right: 12px; } /* FAVORITES */ #favestarimg { margin-bottom: -2px; margin-right: 3px;} /* TAG CLOUD */ .tagcloud p a { white-space:nowrap; background-color: #eee; margin: 0px 6px 6px 0px; padding: 1px 8px; -webkit-border-radius: 8px; -moz-border-radius: 10px; line-height: 1.5} .tagcloud p a:hover { background-color: #ddd; text-decoration: none; } .tagcloud .tagsize1 { font-size: 0.8em; } .tagcloud .tagsize2 { font-size: 0.9em; } .tagcloud .tagsize3 { font-size: 1.0em; } .tagcloud .tagsize4 { font-size: 1.2em; } .highlighted_tag { background-color: #748BA1 !important; color: white !important; } /* IN-PLACE EDITOR */ .inplace_form { font-family: Arial } .inplace_form .inplace_input_field { margin: 6px 6px 6px 0px; border: 1px solid #777; width: 288px; font-size: 14px; } .inplace_form .inplace_textarea { margin-top: 6px; width: 288px; height: 100px; } .inplace_form .inplace_edit_submit { background-color: #ddd; border: 1px solid; text-transform: uppercase; margin-bottom: 6px;} .inplace_form .inplace_edit_cancel { font-size: 12px; } /* ERROR AND FLASH MESSAGES */ #flash-messages { font: 1em "Arial"; margin: 0 20% 12px; text-align: center; font-weight: bold; } #flash-messages p { padding: 12px; -moz-border-radius: 6px; -webkit-border-radius: 5px; } #flash-messages #flash-error { border: 1px solid #BB0000; color: black; background: #efefef; } #flash-messages #flash-message { border: 1px solid #007700; color: black; background: #efefef;} /* NOTIFICATIONS */ #notifications fieldset { width: 100%; margin-bottom: 12px; } #notifications fieldset h5 { font-size: 1em; color: #943d47 } #notifications fieldset p, #notifications fieldset ul { margin-left: 12px; } #notifications fieldset label { display: inline; } #notifications fieldset input[type="checkbox"], #notifications fieldset input[type="radio"] { vertical-align: middle; } /* CROP PHOTO */ #crop-photo p { margin-bottom: 12px; } /* FOOTER */ #footer { text-align: center; color: white; font: 1.1em "Arial"; width: 960px; margin: 0 auto; padding: 60px 12px 24px 12px; min-height: 130px; height:auto !important;height:130px; letter-spacing: .07em; background: url(/images/bkgd_blue_pattern_1.gif); border-top: 12px solid #78b9d8; } #footer a { color: white; } #footer ul li { display: inline; margin: 0px 12px; } #footer #badges { margin-top: 24px; } #footer #timelines-link { margin-top: 40px; font-size: 14px; } #footer #timelines-link a { text-decoration: underline;} /* COPYRIGHT */ #copyright { font-size: .75em; margin-top: 20px; margin-bottom: 36px; text-align: center; color:white; font-variant:normal; font-weight: normal;} #copyright a { color: #aaa; } #copyright ul { margin-bottom: 12px; } #copyright ul li { display: inline; margin: 0px 6px; } /* ERROR STYLES */ .fieldWithErrors { padding: 2px; background-color: #c00; display: table; } .fieldWithErrors label { color: white; } #errorExplanation { width: 400px; border: 2px solid #555; padding: 7px; padding-bottom: 12px; margin-bottom: 20px; background-color: #f0f0f0; } #errorExplanation h2 { font-size: .9em; text-align: left; font-weight: bold; padding: 5px 5px 5px 15px; margin: -7px; background-color: #c00; color: #fff; } #errorExplanation p { color: #333; margin-top: 12px; margin-bottom: 0; padding: 5px; } #errorExplanation ul li { font-size: .9em; margin: 6px 0px 6px 24px; list-style: square; } /* Maintenance MEssage */ #maintenance_message { background: #000; color: white; text-align: center; height: 20px; line-height: 18px; font-size: 14px;} #maintenance_message a { color: white; text-decoration: underline;}