/* /////// ------- LAYOUT.CSS ------- \\\\\\\ */ /* Author: Chad Fontaine @ Chameleon Creative Author URI: http://www.chameleoncreative.com/ Version: 4.0 Last Revision: May 2012 Revision By: Chad Fontaine Project: ------------- Description: Drupal 7 - Structural css only. All the heavy lifting is done here. */ /*-------------------------------------------------------- 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 NEWSLETTER SIGNUP 5.8 NEWS LISTINGS 5.9 EVENTS LISTINGS 6.0 PHOTO GALLERIES 6. -- PHOTO GALLERIES 7. -- SHOP 8. -- FTD ADDITIONS ---------------------------------------------------------*/ /*############################################################################################################################################################################################################## # # 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; } .none {} #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: #d3b78b 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/background_interior.jpg) no-repeat center top; } #container { width: 1002px; margin: 0px auto; text-align:left; } #outer_wrapper { width:1002px; float:left;} #wrapper { width:1002px; float:left; background:url(../images/layout/content_top_interior.jpg) no-repeat left top;} #inner_wrapper { width:1002px; float:left;} #header { width:1002px; height:142px; float:left;} #contact { height:26px; width:128px; float:right; padding-top:5px;} #contact a { color:#fff; font:bold 12px/normal Arial, Helvetica, sans-serif; margin:0px 0px 0px 0px; padding: 8px 15px 4px 15px; text-transform:uppercase; text-decoration:none; display:inline-block;} #contact a:hover { color:#000;} /* CSS3 */ #contact a { text-shadow: 0px 0px 3px #400404; /*filter: dropshadow(color=#400404, offx=0, offy=0);*/ background: #a90000; /* Old browsers */ background: -moz-linear-gradient(top, #a90000 0%, #f80000 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90000), color-stop(100%,#f80000)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #a90000 0%,#f80000 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #a90000 0%,#f80000 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #a90000 0%,#f80000 100%); /* IE10+ */ background: linear-gradient(to bottom, #a90000 0%,#f80000 100%); /* W3C */ /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90000', endColorstr='#f80000',GradientType=0 );*/ /* IE6-9 */ -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; } #gallery { width:168px; height:26px; float:right; margin-top:5px; margin-right:10px;} #gallery a { color:#fff; font:bold 12px/normal Arial, Helvetica, sans-serif; margin:0px 0px 0px 0px; padding: 8px 35px 4px 10px; text-transform:uppercase; text-decoration:none; display:inline-block; } #gallery a:hover { color: #F00; } #gallery a { background: url(../images/layout/gallery.gif) no-repeat right 2px; } /* CSS3 */ #gallery { text-shadow: 0px 0px 3px #3c1300; /*filter: dropshadow(color=#3c1300, offx=0, offy=0);*/ background: #3c1300; /* Old browsers */ background: -moz-linear-gradient(top, #3c1300 0%, #50220c 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3c1300), color-stop(100%,#50220c)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #3c1300 0%,#50220c 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #3c1300 0%,#50220c 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #3c1300 0%,#50220c 100%); /* IE10+ */ background: linear-gradient(to bottom, #3c1300 0%,#50220c 100%); /* W3C */ /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3c1300', endColorstr='#50220c',GradientType=0 );*/ /* IE6-9 */ -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; } #social_media { height:31px; width:33px; float:right; background:url(../images/layout/facebook.gif) no-repeat center center;} #secondary_navigation { height:31px; width:663px; float:right;} #logo, #logo a, #logo a:hover { width:362px; height:111px; float:left; text-decoration:none; display:block; text-indent:-2000em; overflow:hidden; } #navigation { width:640px; height:111px; float:left; } #outro { width:1002px; float:left; text-align:right;} #outro h3 { margin: 40px 125px 0px 0px; color:#e1dace; font:normal 10px/12px Verdana, Geneva, sans-serif; letter-spacing:1px;} #column_two_inner { background:#d3b78b; min-height:600px;} #column_two_inner h1 { padding: 2px 0px 2px 10px; color:#d3b78b; font:normal 24px/normal Verdana, Geneva, sans-serif; margin:0px; text-transform:uppercase;} /* CSS3 */ #column_two_inner { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } #column_two_inner h1 { -webkit-border-top-left-radius: 9px; -webkit-border-top-right-radius: 9px; -moz-border-radius-topleft: 9px; -moz-border-radius-topright: 9px; border-top-left-radius: 9px; border-top-right-radius: 9px; background: #71290c; /* Old browsers */ background: -moz-linear-gradient(left, #71290c 0%, #d3b78b 85%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#71290c), color-stop(85%,#d3b78b)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #71290c 0%,#d3b78b 85%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #71290c 0%,#d3b78b 85%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #71290c 0%,#d3b78b 85%); /* IE10+ */ background: linear-gradient(to right, #71290c 0%,#d3b78b 85%); /* W3C */ /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#71290c', endColorstr='#d3b78b',GradientType=1 );*/ /* IE6-9 */ } /* 4.1 GENERALIZED GROUPING --------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #something, #anotherthinglikethefirstthing { display:block;} /* 4.2 COLUMNS --------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #column_one { width:260px; float:left; overflow:hidden; } #column_one_pad { margin: 150px 30px 20px 40px; } #column_two { width:/*742*/702px; float:left; overflow:hidden; margin: 30px 30px 30px 10px; } #column_two_pad { margin: 30px 30px 30px 30px; } /* 4.3 FOOTER --------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #footer_background, #footer_wrapper, #footer_inner_wrapper, #footer { height:186px;} #footer_wrapper { width:100%; float: left; background: url(../images/layout/footer_fill.jpg) repeat-x 0px 0px; } #footer_inner_wrapper { width:100%; float: left; background: url(../images/layout/footer.jpg) no-repeat center top; } #footer_background { margin:0px auto; padding:0px; width:1002px; text-align:left;} #footer { width:1002px; float:left; background: url(../images/layout/footer.jpg) no-repeat center top; } /* 4.4 CREDITS --------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #credits { width: 1002px; float: left; text-align: right; background:url(../images/layout/chameleon_creative.gif) no-repeat 725px 43px;} #credits a, #credits a:active, #credits a:link, #credits a:visited { margin: 45px 280px 10px 0px; color: #98521c; text-decoration: none; display: block; } #credits a strong, #credits a:active strong, #credits a:link strong, #credits a:visited strong { color: #98521c; } #credits a, #credits a:active, #credits a:link, #credits a:visited, #credits a strong, #credits a:active strong, #credits a:link strong, #credits a:visited strong { font: normal 10px/10px Arial, Helvetica, sans-serif; } #credits a:hover, #credits a:hover strong { color: #fff; text-decoration: underline; } /* 4.5 COPYRIGHT --------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #copyright { width: 1002px; float: left; text-align: right; color: #34180a; margin: 0px 0px 0px 0px; } #copyright strong { margin: 0px 8px 10px 0px; display:block; font: normal 10px/10px Arial, Helvetica, sans-serif;} /*############################################################################################################################################################################################################### # # 5. DRUPAL # ################################################################################################################################################################################################################*/ /* 5.0 SLEEPER SEMANTIC --------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #drupal_sleeper_wrapper { display:compact;} /* IF YOU HAVE FOUND THIS AND ARE PLANNING ON SCAMMING PRE-BAKED CODE... GET A BOOK... GO TO SCHOOL... LEARN CSS ON YOUR OWN ...THIEF!!! /* 5.1 LOGIN FORM --------------------------------------------------------------------------------------------------------------------------------------------------------------*/ form#user-login-form { color: #000; margin: 10px 0px; padding:0px 0px; text-align:left; } form#user-login-form a { color: #000; text-decoration:none; } form#user-login-form a:hover { color:#000; text-decoration:underline; } form#user-login-form input { background:#773214; border:1px solid #000; color:#fff } /* 5.2 SITE ADMIN MENU - IN SIDEBAR --------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #column_one ul li {padding: 4px 0 4px 0;} #column_one ul.menu { margin:5px 0px; padding: 10px 0px 10px 20px; background-color: transparent; list-style: none;} #column_one ul.menu a, #column_one ul.menu a:active, #column_one ul.menu a:link { color:#773214; text-decoration:none; font-size: 13px; } #column_one ul.menu a:visited { color: #773214; text-decoration:underline; } #column_one ul.menu a:hover { color:#ffffff; 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.6 GALLERY --------------------------------------------------------------------------------------------------------------------------------------------------------------*/ 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;} /* 5.8 NEWS LISTINGS --------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* ALL NEWS PAGE */ #column_two .news_title { color:#135358; font:bold 14px/normal Verdana, Geneva, sans-serif; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border-bottom: 1px dashed #93ab9e;} #column_two .date-display-single { color: #666666; font: italic 11px/normal Verdana, Geneva, sans-serif; padding:0px 0px 0px 15px; } #column_two .news_body { color: #333; font:normal 12px/normal Verdana, Geneva, sans-serif; padding:5px 0px 0px 15px; display:inline-block;} #column_two .news_more { text-align:left; display:inline-block; margin-bottom:20PX;} #column_two .news_more a { color:#e8c801; font:bold 10px/normal Verdana, Geneva, sans-serif; text-decoration:none; margin:0px 0px 10px 15px; background:#0e4741; border:1px solid #07322d; display:block; text-transform:uppercase; padding-left:10px; padding-right:10px;} #column_two .news_more a:hover { color:#0e4741; background:#fff; border:1px solid #c6d3cb; text-decoration:none;} /* SINGLE NEWS PAGE */ #column_two .node .submitted {color:#135358; font:bold 12px/normal Verdana, Geneva, sans-serif; border-bottom: 1px dashed #93ab9e;} #column_two .node .date-display-single { color: #666666; font: italic 11px/normal Verdana, Geneva, sans-serif; padding:0px 0px 0px 0px; } /* 5.9 EVENTS LISTINGS --------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* ALL EVENTS PAGE */ #column_two .events_listing_title { color:#135358; font:bold 14px/normal Verdana, Geneva, sans-serif; border-bottom: 1px dashed #93ab9e;} #column_two .events_listing_date .date-display-single { color: #666666; font: italic 11px/normal Verdana, Geneva, sans-serif; padding:0px 0px 0px 0px;} #column_two .events_listing_body { color: #333; font:normal 12px/normal Verdana, Geneva, sans-serif; padding:5px 0px 20px 15px; display:inline-block;} /* 6.0 Photo Galleries --------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .field-name-field-gallery-photo .colorbox {float: left; padding: 5px 0px 5px 0px; text-align: center;} #column_one .field-name-field-gallery-photo .colorbox img , #column_two .field-name-field-gallery-photo .colorbox img {border:1px solid #955d3a; padding:2px; background-color:#f0d8b2;margin: 0 5px 0 5px;} .view-Galleries a img {float: left; padding: 5px 12px 5px 12px;} /* .mceContentBody a:link, a:link { float:left; margin: 5px 12px 5px 12px; } */ .views-row-odd , .views-row-even {width: 130px; float: left; margin: 5px 12px 5px 12px; } .tabs {margin: 0 0 30px 0;} .view-Galleries .views-field-title {width:100px; float: right;} /* 7.0 SHOP -------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* 8.0 FTD ADDITIONS -------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .view-id-store td.col-1 {padding: 20px 20px 20px 80px; float: left;} .view-id-store td.col-2 {padding: 20px 0px 20px 40px; float: right; } #column_two h1 { /*color:#6c0000;*/ color: white; font: bold 18px/14px Verdana, Arial, Helvetica, sans-serif; margin: 10px 0px 0px 0px; padding: 0px 0px 0px 5px; line-height:120%;} #column_two h2 { color: #446c03;font: bold 16px/14px Verdana, Arial, Helvetica, sans-serif; margin: 10px 0px 10px 0px; padding: 0px 0px 0px 0px; line-height:120%;} #media_icon, #media_icon a, #media_icon a:hover { display: inline; float: left; height: 110px; width: 155px; } #media_icon { overflow: hidden; text-indent: -2000px; margin: 0 0 20px 10px; } #media_icon a { background: url("/sites/default/files/icons/photo-gallery_icon_final.png") no-repeat scroll 0 0 transparent; margin: 0 0 10px 10px; text-decoration: none; } #media_icon a:hover { background: url("/sites/default/files/icons/photo-gallery_icon_final.png") no-repeat scroll 0 -110px transparent; text-decoration: none; } .region-sidebar .block-uc_cart {margin: 10px 0 10px 10px;} .region-sidebar .block-menu .title {margin: 10px 0 10px 20px;} .cart-block-summary-links td {width: 190px; float: left;} #column_one .cart-block-summary-links ul {width: 190px; float: left; margin: 0; padding: 0;} .cart-block-summary-links ul.links li {float:left;} /* .cart-block-summary-total label {display: none;} */ .cart-block-summary-total {float: left;} td.cart-block-summary-items {width: 75px; float: left; padding: 0 0 0 10px;} #cart-form-pane td , #cart-form-pane thead td , #cart-form-pane , #cart-form-pane th , .cart-review td {background-color: #d3b78b; border: none;} #cart-form-pane th , .cart-review th {display: none;} #cart-form-pane , .cart-review td{background-color: #d3b78b;} /* Added by CC DF Feb 2013 */ .field-name-field-video-link .field-label {display: none;} .view-videos .views-field-title {text-align:center; text-decoration:none; font-size:14px;} #block-weather-system_1 {background-color:#773214; padding: 10px; color: #ffffff; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; } #block-weather-system_1 h2 {color: #ffffff;text-align:center;font-size:15px;} #block-weather-system_1 p {text-align:center;} #block-weather-system_1 .weather-locale {text-align:center; font-size:14px; text-decoration:underline;} /* 5.2 ABOUT US MENU - IN SIDEBAR --------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #block-menu-menu-about-us .title h2 {font-size: 24px;} #block-menu-menu-about-us ul li {padding: 4px 0 4px 0;} #block-menu-menu-about-us ul.menu { margin:5px 0px; padding: 10px 0px 10px 20px; background-color: transparent; list-style: none;} #block-menu-menu-about-us ul.menu a, #block-menu-menu-about-us ul.menu a:active, #block-menu-menu-about-us ul.menu a:link { color:#773214; text-decoration:none; font-size: 22px; } #block-menu-menu-about-us ul.menu a:visited { color: #773214; text-decoration:underline; } #block-menu-menu-about-us ul.menu a:hover { color:#ffffff; text-decoration:underline; } /* ------- COLORS FOR DEVELOPMENT ONLY ------- body { background-color: #000000;} #inner_wrapper { background-color: #666666;} #header { background-color: #eaeaea;} #navigation { background-color: #dadada;} #logo { background-color: #b3b3b3;} #column_one { background-color: #cbcbcb;} #column_two { background-color: #eaeaea;} #column_three { background-color: #cbcbcb;} #footer { background-color: #dadada;} */