/* /////// ------- 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 */ #icon-facebook { display:block; float:right; margin: 7px 60px 0px 0px;} /*------------------------------------------------------------------------------- 3. FIXES -------------------------------------------------------------------------------*/ :focus { outline: 0; } /* remember to define focus styles! */ /*------------------------------------------------------------------------------- 4. SEMANTICS -------------------------------------------------------------------------------*/ body { background: #fff; color:#000; text-align: center; margin: 0px; padding: 0px; font: 12px Verdana, Arial, Helvetica, sans-serif; } #background { width:100%; float:left; background: #f2eeeb url(../images/layout/interior_background_fill.jpg) repeat-x;} #background_2 { width:100%; float:left; background: url(../images/layout/interior_background.jpg) no-repeat center top;} #background_3 { width:100%; float:left; background: url(../images/layout/interior_content_top.jpg) no-repeat center 238px;} #container { width: 1002px; margin: 0px auto; text-align:left;} #wrapper {} #wrapper, #header, #banner, #banner_wrapper, #content_wrapper, #copyright, #credits { width:1002px; float:left;} #header, #logo { height:97px; float:left;} #header { background:url(../images/layout/interior_header.png);} #logo, #logo a, #logo a:hover { height:97px; float:left; width:370px; display:block; margin:0px; padding:0px; text-indent:-2000em; overflow:hidden; text-decoration:none;} #navigation { width:632px; height:40px; float:left;} #header_intro { height:57px; width:332px; float:left;} #header_intro p { margin:10px 0px 0px 30px; padding:0px;} #secondary_navigation { height:57px; width:300px; float:left;} #banner, #banner_wrapper, #banner img { height:141px; float:left;} #banner { background:url(../images/layout/interior_banner_left.jpg) no-repeat left bottom;} #banner_wrapper { background:url(../images/layout/interior_banner_right.jpg) no-repeat right bottom;} #banner img { margin-left:52px;} #content_wrapper { background:url(../images/layout/interior_content_top.jpg) no-repeat 0px 0px;} #column_one { width:370px; float:left; } #column_one_pad { margin: 30px 25px 10px 90px;} #column_two { width: 632px; float:left; } #column_two_pad { margin: 30px 110px 10px 30px;} #banner_slideshow { position:absolute; top:97px; width:1002px; height:380px; z-index:1;} #banner_content { position:absolute; top:97px; width:1002px; z-index:99; clear:both;} #banner_content p { color:#fff; line-height:16px; padding:0px; margin: 35px 685px 0px 87px;} #gallery_icon_image { width:236px; float:right; margin: 14px 20px 0px 0px;} #gallery_icon { z-index:1000; position:relative;} /* -------------- footer -------------- */ #footer_wrapper { width:100%; height:120px; float: left; background: url(../images/layout/footer_fill.jpg) repeat-x left top; } #footer_background { width:100%; float: left;} #footer { margin:0px auto; height: 120px; padding:0px; width:1002px; text-align:left; background: url(../images/layout/footer.jpg) no-repeat 198px 0px; } /* -------------- copyright and credits -------------- */ #copyright strong, #credits a, #credits a:active, #credits a:link, #credits a:visited { font: normal 10px/normal Verdana, Arial, Helvetica, sans-serif;} #copyright, #credits{ text-align:left; text-align:right;} #copyright strong { color: #024c65; padding: 85px 80px 0px 0px; display:block; } #credits a, #credits a:active, #credits a:link, #credits a:visited { margin: 0px 80px 0px 0px; color: #024c65; text-decoration: none; display: block; } #credits a:hover { color: #000; text-decoration: underline; } /*------------------------------------------------------------------------------- 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 20px; background:#0e2752; } #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 */ .block-search { margin:0px 0px 10px 0px;} /* seach wrapper */ .block-search h2 { display:none;} /* seach block label */ .block-search form.search-block-form {} /* form warpper */ .block-search .form-item label { display:none;} /* search this site text */ .block-search input.form-text { background:#fff; border:1px solid #f78f1e; color:#000; font:normal 12px/normal Verdana, Geneva, sans-serif; width:150px;} /* search form text */ .block-search input.form-submit { background:#e17500; border:1px solid #f78f1e; 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 #685547; padding:1px; background:#fff;} div.content div.gallery_thumbnail a:hover img { border:3px solid #046686; 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;}