/* /////// ------- 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: #000; 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;} #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:400px; 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:400px; height:50px; float:right;text-decoration:none; display:block; text-indent:-2000em; overflow:hidden;} #search { width:292px; height:40px; float:right; /*background:url(../images/layout/navigation.gif) no-repeat right top;*/ color:#fff;} #navigation { width:982px; float:left; height:40px; background:url(../images/layout/navigation.gif) no-repeat 0px 0px;} #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_outer_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: 40px 40px 40px 40px;} /* 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 -------------------------------------------------------------------------------*/ #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:130px;} /* 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 */ /* 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;} /* BASKETS PAGE */ #baskets_details_wrapper { margin-left:20px;} #baskets_details_wrapper strong { color:#a40600;} #baskets_details_maker {} #baskets_details_collection {} #baskets_details_motif {} #baskets_details_type {} #baskets_details_history {} #baskets_details_discription {} #baskets_details_discription .inner { border: 1px solid #e0e0e0; background:#f0f0f0; padding:10px; margin:10px;} #baskets_baskets_images_wrapper { padding-top:5px; margin-top:5px; border-top: 1px dashed #e0e0e0} #baskets_baskets_images_wrapper a img { border:1px solid #000; padding:1px; margin:2px; float:left;} #baskets_baskets_images_wrapper a:hover img { border:1px solid #a40600; background:#000; padding:1px; margin:2px; float:left;} /* BASKET WEAVER PAGE */ #baskets_weaver_details_wrapper {} #baskets_weaver_details_wrapper strong { color:#a40600; } #baskets_weaver_details_first_name, #baskets_weaver_details_last_name, #baskets_weaver_details_nation, #baskets_weaver_details_lifespan { padding-left:20px;} #baskets_weaver_details_first_name {} #baskets_weaver_details_last_name {} #baskets_weaver_details_nation {} #baskets_weaver_details_bio {} #baskets_weaver_details_bio .inner { border: 1px solid #e0e0e0; background:#f0f0f0; padding:10px; margin:10px;} #baskets_weaver_details_signatures {} #baskets_weaver_details_signatures .inner { border: 1px solid #e0e0e0; background:#f0f0f0; padding:10px; margin:10px;} #baskets_weaver_images_wrapper { padding-top:10px; margin-top:10px; border-top: 1px dashed #e0e0e0; float:left; width:990px;} #baskets_weaver_images_wrapper div { display:inline; width:auto; height:auto;} #baskets_weaver_images_wrapper img { border:1px solid #000; padding:1px; margin:2px; float:left;} #baskets_weaver_images_wrapper a img { border:1px solid #000; padding:1px; margin:2px; float:left;} #baskets_weaver_images_wrapper a:hover img { border:1px solid #a40600; background:#000; padding:1px; margin:2px; float:left;} .baskets-weaver-basket-images-wrapper { padding-bottom:5px; margin-bottom:5px; border-bottom: 1px dashed #e0e0e0; float:left; clear:both; width:902px;} .baskets-weaver-basket-images-wrapper div { display:inline; width:auto; height:auto;} .baskets-weaver-basket-images-wrapper a img { border:1px solid #000; padding:1px; margin:2px; float:left;} .baskets-weaver-basket-images-wrapper a:hover img { border:1px solid #a40600; background:#000; padding:1px; margin:2px; float:left;} /* --- basket weaver teaser --- */ .teaser_baskets_weaver_wrapper { width:902px; float:left; padding-bottom:5px; margin-bottom:5px; border-bottom: 1px dashed #e0e0e0;} .teaser_baskets_weaver_details_image { width:180px; height:135px; float:left;} .teaser_baskets_weaver_details_image a img { border:1px solid #000; padding:1px; margin:2px; float:left;} .teaser_baskets_weaver_details_image a:hover img { border:1px solid #a40600; background:#000; padding:1px; margin:2px; float:left;} .teaser_baskets_weaver_details_name { width:722px; float:left;} .teaser_baskets_weaver_details_name strong { color:#a40600;} .teaser_baskets_weaver_details_description { width:702px; float:left; padding:10px;} .teaser_baskets_weaver_details_description a {} /* NATIONS PAGE */ .teaser_baskets_nation_wrapper { width:902px; float:left; padding-bottom:5px; margin-bottom:5px; border-bottom: 1px dashed #e0e0e0; margin-top:20px;} .teaser_baskets_nation_name strong { color:#a40600; } .teaser_baskets_nation_name { padding-left:10px; font: bold 14px/normal Verdana, Geneva, sans-serif;} .teaser_baskets_nation_details .inner { border: 1px solid #e0e0e0; background:#f0f0f0; padding:10px; margin: 10px 20px 10px 20px;} #baskets_nation_details { border: 1px solid #e0e0e0; background:#f0f0f0; padding:10px; margin: 10px 20px 30px 20px;} /* MOTIF PAGE */ .view-motif-makers { border: 1px solid #CCC; padding: 0px 0px 0px 0px; margin: 10px 20px 20px 20px; float:left; } #motif_left_wrapper .view-motif-makers h3 { background:#a40600; border-bottom:none; font:bold 14px/normal Verdana, Geneva, sans-serif; margin: 0px 0px 0px 0px; padding:3px; color:#fff; clear:both;} #motif_left_wrapper .view-motif-makers .views-row { width: 80px; height:80px; float:left; text-align:center;} #motif_left_wrapper .view-motif-makers .views-row a img { margin: 5px auto; padding:1px; background:#fff; border: 1px solid #000;} #motif_left_wrapper .view-motif-makers .views-row a:hover img { background:#000; border: 1px solid #F00;} #motif_left_wrapper_intro { margin: 0px 20px} #motif_left_wrapper { float:left; width:450px;} #motif_right_wrapper { float:right; width:430px; border-left: 1px dashed #999; margin-left:10px; padding-left:10px;} #motif_details_wrapper { margin:10px; color:#A40600;} #motif_details_wrapper p {} #motif_baskets_images_wrapper { padding-top:10px; margin-top:10px; border-top: 1px dashed #999;} #motif_baskets_images_wrapper a img { border:1px solid #000; padding:1px; margin:5px; float:left;} #motif_baskets_images_wrapper a:hover img { border:1px solid #a40600; background:#000; padding:1px; margin:2px; float:left;}