/* /////// ------- LAYOUT.CSS ------- \\\\\\\ */ /* Layout.css is intended for structural css only. All the heavy lifting is done here. */ /* Author(original): Chad Fontaine @ Chameleon Creative Author URI: http://www.chameleoncreative.com/ Version: 2.0 Last Revision: Dec 17 2009 Revised Made By: Chad Fontaine Project: Project Name Description: Base install layout.css */ /*-------------------------------------------------------- TABLE OF CONTENTS 1. -- RESETS (zeros out and levels the playing field for, hopefully, consistant diplay across browsers) 2. -- VARIOUS 3. -- FIXES (possibly categorized as kludges ...no hacks) 4. -- SEMANTICS (refers to the aspects of meaning that are expressed in a language, code, or other form of representation of information) 4.1 GENERALIZED GROUPING 4.2 COLUMNS 4.3 FOOTER 4.4 CREDITS 5. -- DRUPAL (Styling the various drupal specific tags and selectors) 5.1 LOGIN FORM 5.2 SITE ADMIN MENU 5.3 PAGE EDIT TABS 5.4 BLOCKS PAGE 5.5 SEARCH BOX 5.6 GALLERY 5.7 SLIDESHOW 5.8 CALLENDAR 5.9 SHOPPING CART (styling of the base ubercart install - Chad 240310) ---------------------------------------------------------*/ /*------------------------------------------------------------------------------- 1. RESETS -------------------------------------------------------------------------------*/ body { line-height: 1; color: black; background: white; } table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /*------------------------------------------------------------------------------- 2. VARIOUS -------------------------------------------------------------------------------*/ .clear { clear: both; margin: 0; padding: 0; } #prop { height: 312px; float: left; width: 1px; } .prop_clear { clear: both; height: 1px; overflow: hidden; } .devnotes { color: red; font-size: 14px; font-weight: bold; } /* developer notes */ /*------------------------------------------------------------------------------- 3. FIXES -------------------------------------------------------------------------------*/ :focus { outline: 0; } /* remember to define focus styles! */ /*------------------------------------------------------------------------------- 4. SEMANTICS -------------------------------------------------------------------------------*/ body { background: #777777 url(../images/layout/background_fill.jpg) repeat-x left top; ; text-align: center; margin: 0px; padding: 0px; font: 12px Verdana, Arial, Helvetica, sans-serif; } #background { width:100%; float:left; background:url(../images/layout/ds.png) repeat-x 0px 0px;} #container { width: 982px; margin: 0px auto; text-align:left; } /* full width background */ * { margin: 0; padding: 0; } body { /*overflow: hidden;*/} #background_image { width: 100%; position: fixed; top: 0px; left: 0px; z-index: 500; } #background { position: relative; top: 0px; left: 0px; z-index: 1000; } #outer_wrapper {} #wrapper {} #inner_wrapper {} #header { height:50px;} #search { width:292px; height:40px; float:right; background:url(../images/layout/navigation.gif) no-repeat right top;} #navigation { width:690px; float:left; height:40px; background:url(../images/layout/navigation.gif) no-repeat 0px 0px;} #logo { width:180px; height:50px; float:left; text-decoration:none; display:block; text-indent:-2000em; overflow:hidden; background:url(../images/layout/logo.png) no-repeat left bottom; } #logo, #logo a, #logo a:hover { width:180px; height:50px; float:left; text-decoration:none; display:block; text-indent:-2000em; overflow:hidden; } #museum_link { width:292px; height:50px; float:right; text-decoration:none; display:block; text-indent:-2000em; overflow:hidden; background: url(../images/layout/museum_link.png) no-repeat right bottom;} #museum_link, #museum_link a, #museum_link a:hover { width:292px; height:50px; float:right;text-decoration:none; display:block; text-indent:-2000em; overflow:hidden;} /* LINK TO OTHER ARCHIVES */ #museum_archive_link { text-align:right; width:270px; height:50px; float:right; text-decoration:none; display:block; background: url(../images/layout/museum_archive_link.png) no-repeat right bottom; display:none;} #museum_archive_link_pad { padding: 30px 28px 0px 0px;} #museum_archive_link a { font: bold 12px/normal Verdana, Geneva, sans-serif; text-decoration:none; color:#fff; text-transform: capitalize;} #museum_archive_link a:hover { text-decoration:none; color: #C00} #submit_story, #submit_story a, #submit_story a:hover { width:315px; height:45px; float:left; text-decoration:none; display:block; text-indent:-2000em; overflow:hidden;} #submit_story a, #submit_story a:hover { background:url(../images/layout/icon-submit-story.jpg) no-repeat 0px 0px;} #submit_story a:hover { background:url(../images/layout/icon-submit-story.jpg) no-repeat 0px -45px;} #submit_story { clear:both; width:333px; float:left; margin: 0px 0px 5px 0px; } #submit_story a, #submit_story a:hover { width:315px; margin-left:9px;} #content_wrapper { background:url(../images/layout/page_fill.gif) repeat-y 0px 0px;} #content_inner_wrapper { background:url(../images/layout/page_bottom_right.gif) no-repeat right bottom;} #footer_contact {color: #CCC; font: normal 12px/normal Verdana, Geneva, sans-serif; padding: 0px 0px 10px 10px;} #footer_contact h2 {color:#fff; font: bold 14px/normal Verdana, Geneva, sans-serif; margin: 0px 0px 5px -10px; padding: 0px 0px 0px 0px; border-bottom:1px solid #333;} #footer_contact strong {} #footer_image_copyright {} #footer_image_copyright a { color:#F00; text-decoration:none; text-transform:uppercase;} #footer_image_copyright a:hover { color:#fff; text-decoration:underline;} /* 4.1 GENERALIZED GROUPING -------------------------------------------------------------------------------*/ #inner_wrapper, #wrapper, #outer_wrapper, #header, #content_wrapper, #content_inner_wrapper, #footer { width:982px; float:left; } /* 4.2 COLUMNS -------------------------------------------------------------------------------*/ #column_one { width:242px; float:left; overflow:hidden; display:none;} #column_one_pad { margin: 10px 30px 20px 40px; } #column_two { width:982px; float:left; overflow:hidden; } /* was 740px with two columns */ #column_two_pad { margin: 0px 0px 40px 0px;} /* 4.3 FOOTER -------------------------------------------------------------------------------*/ #footer_wrapper { width:100%; /*height:180px;*/ float: left; background: #333333 url(../images/layout/footer_fill.gif) repeat-x 0px 0px; z-index: 1000; border-bottom: 5px solid #a40600; margin: 0px} #footer_background { margin:0px auto; padding:0px; width:982px; text-align:left; } #footer { /*height: 125px;*/ background: url(../images/layout/footer.jpg) no-repeat 0px 0px;} #footer_wrapper, #footer {min-height:300px;} #footer_three_boxes { width: 982px; height:255px; float:left; margin:30px 0px 0px 0px;} /* 4.4 CREDITS -------------------------------------------------------------------------------*/ #credits_wrapper { width:100%; float: left; background: #000 ; z-index: 1000;} #credits_background { margin:0px auto; padding:0px; width:982px; text-align:left; } #credits { width: 982px; float: left; text-align: right; background:url(../images/layout/chameleon_creative.gif) no-repeat 952px 2px;} #credits a, #credits a:active, #credits a:link, #credits a:visited { margin: 0px 42px 20px 0px; color: #fff; font-weight: normal; text-decoration: none; font-size: 10px; display: block; } #credits a strong, #credits a:active strong, #credits a:link strong, #credits a:visited strong { color: #fff; font-weight: normal; } #credits a:hover { color: #fff; text-decoration: underline; } #copyright { width: 982px; float: right; text-align: right; color: #fff; margin: 0px 0px 0px 0px; } #copyright strong { font-size: 10px; font-weight: normal; margin: 5px 5px 0px 0px; display:block; } /*------------------------------------------------------------------------------- 5. DRUPAL -------------------------------------------------------------------------------*/ /* 5.1 LOGIN FORM -------------------------------------------------------------------------------*/ form#user-login-form { color: #fff; margin: 10px 0px; padding:0px 0px; text-align:left; } form#user-login-form a { color: #b9b9be; text-decoration:none; } form#user-login-form a:hover { color:#000; text-decoration:underline; } form#user-login-form input { background:#101921; border:1px solid #000; color:#fff } /* 5.2 SITE ADMIN MENU -------------------------------------------------------------------------------*/ #column_one ul.menu { margin:5px 0px; padding: 10px 0px 10px 5px; background:#000; } #column_one ul.menu a, #column_one ul.menu a:active, #column_one ul.menu a:link { color:#fff; text-decoration:none; } #column_one ul.menu a:visited { color: #CCC; text-decoration:underline; } #column_one ul.menu a:hover { color:#2c7d9f; text-decoration:underline; } /* 5.3 PAGE EDIT TABS -------------------------------------------------------------------------------*/ #tabs-wrapper a { background:#170901; color:#fff; } #tabs-wrapper a:hover { background:#faf2d8; color: #170901; } #tabs-wrapper a.active { background:#faf2d8; color:#0a1c50; } /* 5.4 BLOCKS PAGE -------------------------------------------------------------------------------*/ table #blocks td.block { color:#000; } div.block-region { background:red; color:white; }/* block regions shown on layout */ td.region { background:#07396b; color:#fff; padding-left:5px; }/* block region titles */ table#blocks td a { color:#C00; } /* configure / delete link */ table#blocks td a:hover { color:#000; } td.block { color:#000; }/* block title */ table#blocks select { width:200px; margin-left:10px; }/* select boxes */ table#blocks td em { color: #F60; padding-left:20px; } table#blocks thead { background:#000; margin-top:10px; } table#blocks thead th { color:#fff; font-weight:bold; font-size:14px; padding:3px; } /* 5.5 SEARCH BOX -------------------------------------------------------------------------------*/ /* SIDEBAR SEARCH */ #search #search-block-form { margin:5px 0px 0px 10px;} /* seach wrapper */ #search #search-block-form h2 { display:none;} /* seach block label */ #search #search-block-form form.search-block-form {} /* form warpper */ #search .form-item label { display:none;} /* search this site text */ #search #search-block-form input.form-text { background:#fff; border:1px solid #fff; color:#000; font:bold 12px/normal Verdana, Geneva, sans-serif; width:200px;} /* search form text */ #search #search-block-form input.form-submit { background:#a40600; border:1px solid #3a3a3a; color:#fff; font:normal 12px/normal Verdana, Geneva, sans-serif; text-transform:uppercase;} /* submit button */ /* 5.6 GALLERY -------------------------------------------------------------------------------*/ /*.content { margin:10px 0px 20px 0px;} div.gallery_thumbnail { width:135px; float:left; text-align:center; font:normal 11px/normal Verdana, Geneva, sans-serif; color:#a7460a; margin-top:5px;} div.content div.gallery_thumbnail a img { border:3px solid #e6e0b9; padding:1px;} div.content div.gallery_thumbnail a:hover img { border:3px solid #beb473; padding:1px; opacity:.75; filter: alpha(opacity=75); -moz-opacity: 0.75;} div.photo_gallery_thumbnail {width:135px; float:left; text-align:center; font:normal 11px/normal Verdana, Geneva, sans-serif; color:#a7460a; margin-top:5px;} div.photo_gallery_thumbnail a img { border:3px solid #e6e0b9; padding:1px;} div.photo_gallery_thumbnail a:hover img { border:3px solid #beb473; padding:1px; opacity:.75; filter: alpha(opacity=75); -moz-opacity: 0.75;}*/ /* ------- node-photo.tpl.php ------- */ #photos_wrapper { width: 982px; float:left; /*background:white;*/ margin-bottom:20px;} #photo_breadcrumbs { width:982px; float:left;} #photo_breadcrumbs_pad { font:normal 11px/11px Verdana, Geneva, sans-serif; color:#000;} #photo_breadcrumbs_pad a { font:bold 11px/11px Verdana, Geneva, sans-serif; color:#990000;} #photo_column_one { width:632px; float:left;} #photo_column_one_pad {} #photo_column_two { width:350px; float:left;} #photo_column_two_pad { margin: 5px 10px 20px 5px} #photo_large { text-align:center} #photo_large img { border:1px solid #000; margin: 5px auto 0px auto;} #photo_column_one h2 { font:bold 14px/14px Verdana, Geneva, sans-serif; color:#990000; margin:5px 0px 5px 25px; padding:0px;} #photo_description {font:normal 12px/16px Verdana, Geneva, sans-serif; color:#000; margin:0px 30px 20px 35px; padding:0px;} .photo_sidebar_block_wrapper { border:1px solid #999; background:#fff; margin: 0px 0px 5px 0px;} .photo_sidebar_block_wrapper h2 { background:#999; font: bold 14px/14px Verdana, Geneva, sans-serif; color:#fff; margin:0px 0px 0px 0px; padding: 3px 0px 5px 5px;} .photo_sidebar_block_content { margin: 15px;} #photo_sidebar_order_footer { padding: 5px 10px 5px 10px; font-weight:bold; color:#fff; background: #999;} #photo_order {} #photo_order label { padding: 0px 0px 5px 0px;} #photo_details {} #photo_details ul { list-style:none; margin:0px; padding:0px;} #photo_details li { font: normal 12px/14px Verdana, Geneva, sans-serif; color:#000; margin: 0px 0px 5px 0px;} #photo_details li a { color:#990000; text-decoration:underline;} #photo_details li a:hover { color:#666; text-decoration:none;} #photo_cart {} #photo_cart.photo_sidebar_block_wrapper { border:1px solid #000; background:#fff; margin: 10px 0px 15px 0px;} #photo_cart.photo_sidebar_block_wrapper h2 { background:#000; font: bold 14px/14px Verdana, Geneva, sans-serif; color:#fff; margin:0px 0px 0px 0px; padding: 3px 0px 5px 5px;} #photo_cart.photo_sidebar_block_content { margin: 15px;} #photo_sidebar_order_form {} #photo_sidebar_order_form hr { height:1px; background-color:#999; border:none; border-bottom:1px solid #CCC; margin: 3px 0px; line-height:1px; font-size:1px; widht:95% } #photo_sidebar_order_form #submit { background:#568800; border:1px solid #2b4500; color:#fff; font:normal 12px/normal Verdana, Geneva, sans-serif; text-transform:uppercase; margin: 0px 0px 0px 18px; padding: 0px 10px 0px 10px; text-decoration:none; } #photo_sidebar_order_form #price_list { color:#000; background:#568800; border:1px solid #2b4500; font:normal 12px/normal Verdana, Geneva, sans-serif; text-transform:uppercase; margin: 0px 0px 0px 18px; padding: 1px 10px 1px 10px; text-decoration:none; } label#quantity { margin: 0px 0px 0px 18px;} /*.photo_sidebar_photo_cart_remove_button_wrapper { width:60px; float:left; background:#a40600; border:1px solid #3a3a3a; color:#fff; font:normal 12px/normal Verdana, Geneva, sans-serif; text-transform:uppercase; margin: 0px 0px 3px 0px; padding: 0px 10px 0px 10px; background:url(/sites/default/files/remove_button.gif) no-repeat 0px 0px; }*/ .photo_sidebar_photo_cart_remove_button_wrapper { width:60px; float:left; background:url(/sites/default/files/remove_button_full.gif) no-repeat 0px 0px; } .photo_sidebar_photo_cart_remove_button { width:60px; opacity:.0; filter: alpha(opacity=0); -moz-opacity: 0.0; } #photo_sidebar_photo_cart_checkout_link { border-top: 1px solid #999; margin: 5px 0px 0px 0px; padding:5px 0px 0px 0px;} #photo_sidebar_photo_cart_checkout_link a {} #photo_sidebar_photo_cart_checkout_link a, #photo_sidebar_photo_cart_checkout_link a:hover { width:120px; height:30px; float:right; text-decoration:none; display:block; text-indent:-2000em; overflow:hidden; background:url(../images/layout/icon-checkout.jpg) no-repeat 0px 0px; } #photo_tags { font: normal 14px/20px Verdana, Geneva, sans-serif; color:#666666;} #photo_tags a { font: normal 14px/20px Verdana, Geneva, sans-serif; color:#a40600;} .view-gallery { width:196px; float:left; text-align:center;} .view-gallery a { text-decoration:none; font: bold 12px/normal Arial, Helvetica, sans-serif; color:#a40600;} .view-gallery a:hover { color:#000;} .view-gallery img { margin: 0px auto; padding:0px;} .view-gallery a img { border:1px solid #fff; padding:1px; background:#fff;} .view-gallery a:hover img { border:1px solid #a40600; padding:1px; background:#fff;} .photos_gallery_thumbnail { margin-bottom:20px;} .photos_teaser_thumbnail {width:196px; float:left; text-align:center;} .photos_teaser_thumbnail img { margin: 0px auto; padding:0px;} .photos_teaser_thumbnail a img { border:1px solid #fff; padding:1px; background:#fff;} .photos_teaser_thumbnail a:hover img { border:1px solid #a40600; padding:1px; background:#fff;} /* ORDER FORM -------------------------------------------------------------------------------*/ form#crm-photo-cart-checkout-form { margin: 10px 40px 20px 40px;} form#crm-photo-cart-checkout-form legend { font: bold 12px/normal Verdana, Geneva, sans-serif; color:#600;} div#photo_sidebar_photo_cart_checkout_contact_info {} div#photo_sidebar_photo_cart_checkout_contact_info .form-item label { display:block; width:250px; float:left; text-align:right; margin: 0px 10px 0px 0px;} div#photo_sidebar_photo_cart_checkout_order { margin: 30px 0px;} div#photo_sidebar_photo_cart_checkout_order table, div#photo_sidebar_photo_cart_checkout_order table tr, div#photo_sidebar_photo_cart_checkout_order table td { border:0px;} div#photo_sidebar_photo_cart_checkout_order table td { padding:3px;} div#photo_sidebar_photo_cart_checkout_order table { border: 1px solid #000; margin: 10px 0px 10px 30px;} tr.photo_sidebar_photo_cart_checkout_table_row_odd { background:#CCC} tr.photo_sidebar_photo_cart_checkout_table_row_even { background:#fff} tr.photo_sidebar_photo_cart_checkout_table_header { background:#000; color:#fff; font-weight:bold;} #photo_sidebar_photo_cart_checkout_research { width:430px; float:left;} #photo_sidebar_photo_cart_checkout_non_research {width:430px; float:right;} form#crm-photo-cart-checkout-form #photo_sidebar_photo_cart_checkout_research legend { color:#090} form#crm-photo-cart-checkout-form #photo_sidebar_photo_cart_checkout_non_research legend { color:#F00;} #edit-agree-wrapper { background: #ECECEC; border: 1px solid #600; font: normal 14px/normal Verdana, Geneva, sans-serif; padding: 20px 100px; } #edit-agree-wrapper { text-align:center; } #edit-submit .form-item { background:#568800; border:1px solid #2b4500; color:#fff; font:bold 14px/normal Verdana, Geneva, sans-serif; text-transform:uppercase; margin: 0px 0px 0px 400px; padding: 3px 20px 3px 20px;} /* INDEX GALLERIES GROUPS -------------------------------------------------------------------------------*/ #index_galleries_group { width:982px; float:left;} #index_galleries_group_wrapper { margin: 0px 0px 0px 18px;} #index_galleries_group .index_gallery_wrapper { width:190px; float:left; background:url(../images/layout/indes_thumbs_divider.jpg) no-repeat right top; margin: 15px 0px 0px 0px;} #index_galleries_group .index_gallery_wrapper h2 a { font:bold 16px/normal Verdana, Geneva, sans-serif; color:#990000; margin:0px 0px 0px 5px; padding:0px; text-decoration:none;} #index_galleries_group .index_gallery_wrapper h2 a:hover { color:#000; text-decoration:underline;} #index_galleries_group .index_gallery_image {} #index_galleries_group .index_gallery_image img { margin: 0px 0px 0px 5px;} #index_galleries_group .index_gallery_image a img { border:1px solid #fff; padding: 1px; background:#fff;} #index_galleries_group .index_gallery_image a:hover img { border:1px solid #990000;} #index_galleries_group .index_gallery_description { font:normal 12px/normal Verdana, Geneva, sans-serif; color:#666666; margin:5px 15px 0px 10px;} #index_galleries_group .index_gallery_more {} #index_galleries_group .index_gallery_more a {font:bold 10px/normal Verdana, Geneva, sans-serif; color:#990000; margin:0px 0px 0px 10px; padding:0px; text-decoration:none;} #index_galleries_group .index_gallery_more a:hover { color:#000; text-decoration:underline;} /* FOOTERS -------------------------------------------------------------------------------*/ #footer_left_wrapper { width:337px; float:left;} #footer_center_wrapper { width:308px; float:left; } #footer_right_wrapper { width:337px; float:left;} #footer_left_wrapper .footer_box_pad { margin:20px;} #footer_left_wrapper h2 { color:#999; font: bold 16px/normal Verdana, Geneva, sans-serif;} #footer_left_wrapper ul { margin: 0px 0px 0px 20px; list-style:circle; color:#a40600;} #footer_left_wrapper li {} #footer_left_wrapper li a { color:#fff; text-decoration:none;} #footer_left_wrapper li a:hover { text-decoration:underline;} #footer_center_wrapper .footer_box_pad { margin:20px;} #footer_center_wrapper .views-cloud-size-7 a { color:#fff;} #footer_center_wrapper .views-cloud-size-6 a { color:#e8e8e8;} #footer_center_wrapper .views-cloud-size-5 a { color:#cbcbcb;} #footer_center_wrapper .views-cloud-size-4 a { color:#acacac;} #footer_center_wrapper .views-cloud-size-3 a { color:#8c8c8c;} #footer_center_wrapper .views-cloud-size-2 a { color:#717171;} #footer_center_wrapper .views-cloud-size-1 a { color:#5d5d5d;} #footer_center_wrapper a { text-decoration:none; } #footer_center_wrapper a:hover { text-decoration:underline;} #footer_right_wrapper .footer_box_pad { margin:20px;} /* GALLERY NAVIGATION -------------------------------------------------------------------------------*/ #photo_navigation { text-align:center; color:#900; font-weight: bold; margin: 0px 30px 20px 30px; border-bottom:1px solid #CCC; padding: 0px 0px 10px 0px; } #photo_navigation a { width:120px; height:20px; display: inline-block; color:#000; font-weight:normal; text-decoration:none; margin: 0px 0px 2px 0px; } #photo_navigation a:hover { background: #900; color:#fff; } /*span.photo_navigation_number_active { width:20px; height:20px; display:inline-block; background: #060; color:#fff;}*/ /*#photo_navigation span#photo_navigation_total a { width:120px; height:30px; display:inline-block; color:#fff; font-weight:bold; font-size:20px; }*/ /*#photo_navigation span#photo_navigation_total a:hover { width:120px; height:30px; display:inline-block; color:#fff; font-weight:bold; font-size:20px; }*/ #photo_navigation span#photo_navigation_prev a, #photo_navigation span#photo_navigation_next a, #photo_navigation span#photo_navigation_total a { width:150px; height:25px; display:inline-block; background: #fff; margin: 0px 5px 2px 0px; color:#060; text-decoration:none; font-weight:bold; font-size:30px;} #photo_navigation span#photo_navigation_prev a:hover, #photo_navigation span#photo_navigation_next a:hover, #photo_navigation span#photo_navigation_total a:hover { background:#fff; color:#900; text-decoration:none } .submitted { margin-left:10px;} #webform-client-form-673 { margin: 0px 100px;} /* #photo_navigation { text-align:center; color:#900; font-weight: bold; margin: 0px 30px 20px 30px; border-bottom:1px solid #CCC; padding: 0px 0px 10px 0px;} #photo_navigation a { width:20px; height:20px; display: inline-block; background: #333; color:#fff; font-weight:normal; text-decoration:none; margin: 0px 0px 2px 0px; } #photo_navigation a:hover { background: #900; color:#fff; } #photo_navigation span#photo_navigation_prev a, #photo_navigation span#photo_navigation_next a { width:55px; height:20px; display:inline-block; background: #060; margin: 0px 5px 2px 0px; color:#fff; text-decoration:none; font-weight:bold;} #photo_navigation span#photo_navigation_prev a:hover, #photo_navigation span#photo_navigation_next a:hover { background:#fff; color:#060; text-decoration:underline } */ /* GALLERY EXTRAS -------------------------------------------------------------------------------*/ div.admin-search { margin-left:20px; }