/* /////// ------- 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 -------------------------------------------------------------------------------*/ /* _______ FIXES... not kludges _______ */ a:focus { -moz-outline-style: none; }/* fixes image replacement sections displaying a dotted outline on focus*/ .none { display:none;} /* _______MISC_______ */ .clear { clear: both; margin: 0; padding: 0; } .prop { height: 231px; float: left; width: 1px; } .prop_2 { height: 480px; float: left; width: 1px; } .prop_clear { clear: both; height: 1px; overflow: hidden; } .devnotes { color: red; font-size: 14px; font-weight: bold; } /* _______SEMANTICS_______ */ body { font: 12px Verdana, Arial, Helvetica, sans-serif; margin: 0px; padding: 0px; text-align:center; background: #7e95b4 url(../images/layout/background_fill.jpg) repeat-x; } #background { width:100%; float:left; background: url(../images/layout/background.jpg) no-repeat center top;} #outer_wrapper { width:778px; margin: 0px auto; text-align:left;} #footer { background: #7e95b4 url(../images/layout/footer.jpg) no-repeat left top; float: left; /*height: 123px;*/ width: 778px; text-align: right; } /* -------interior pages specific------- */ #wrapper { width:778px; float:left; text-align:left; /*background: url(../images/layout/page_fill.gif) repeat-y;*/ } #header { width:778px; height:381px; float:left; overflow:hidden;} #header div, #header span { margin: 0px; padding:0px;} #header_bar { width: 778px; height:61px; float:left; background: url(../images/layout/header_interior.jpg) no-repeat left top;} #logo, #logo a, #logo a:hover { height:61px; width:778px; display:block; float:left; margin:0px; padding:0px; text-indent:-2000em; overflow:hidden; /*height:105px;*/ text-decoration:none;} #navigation { float: left; width: 778px; } #home_link { text-align: left; height: 40px; width: 150px; text-indent:-2000px; overflow:hidden; float:left; margin-left:20px;} #home_link a, #home_link a:hover { height: 40px; width: 150px; float:left; text-decoration:none; display:block;} #gallery_link, #gallery_link a, #gallery_link a:hover { text-align: left; text-indent:-2000px; overflow:hidden; height: 60px; width: 200px; float:right; text-decoration:none; display:block; margin-bottom:-10px;} #content_wrapper { width:778px; float:left; background: #fff url(../images/layout/content_top.jpg) no-repeat 0px 0px; } #content_inner_wrapper { width:778px; float:left; text-align:left; background: url(../images/layout/content_bottom.jpg) no-repeat left bottom; } #content_pad { margin: 10px 20px 30px 40px;} /* -------index page specific in separate file ------- */ /* _______FOOTER TEXTLINKS LIST_______ */ #textlinks { margin: 55px 0px 0px 0px; padding: 0px 0px 10px 0px; font: normal 10px/normal Arial, Helvetica, sans-serif; display: block; width: 778px; float: left; background:url(../images/layout/footer_divider.jpg) no-repeat left bottom;} #textlinks ul { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style: none; display:inline;} #textlinks li { display:inline; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; /*border-left:1px solid #f6edd2;*/ color:#333333;} #textlinks li.first {border-left:none;} #textlinks li.last {margin-right:5px;} #textlinks li a, #textlinks li a:active, #textlinks li a:link, #textlinks li a:visited {border-top:none; white-space: nowrap; padding: 0px 4px 0px 4px; margin: 0px; text-transform: capitalize; color: #fff; text-decoration: none; font-weight: normal; } #textlinks li a:hover { color: #333333; text-decoration: underline; } /* _______FOOTER COPYRIGHT_______ */ #copyright { color: #fff; font-size: 10px; font-weight: normal; float: left; width: 778px; } #copyright strong { margin: 0px 10px 0px 0px; font-weight: normal; display:block;} /* _______FOOTER CREDITS_______ */ #credits { float: left; width: 778px; text-align: right; } #credits a, #credits a:active, #credits a:link, #credits a:visited { padding-bottom:20px; margin: 0px 10px 0px 0px; color: #ffffff; font-weight: normal; text-decoration: none; font-size: 10px; display: block; } #credits a:hover { color: #000000; text-decoration: underline; } /* _______IMAGE BOXES_______ */ .horizontal_photo_right { text-align:right; width:700px; float:left; background: url(../images/content/horizontal_img_right_gradie.jpg) no-repeat -19px top; } .horizontal_photo_right img {width:364px; height:264px; float:right;} .horizontal_photo_right iframe {width:364px; height:280px; float: right;} .horizontal_photo_right p { margin: 40px 375px 0px 30px; padding:0px; display:block; } /* ____________________________ NOT SURE IF THIS IS IN USE ____________________________ */ /* form containing the survey inputs */ form.cc_survey_frm { } /* survey submit button */ form.cc_survey_frm input.cc_survey_submit { font-weight:bold; } /* table containing the survey inputs */ table.cc_survey_tbl { width:600px; } /* cells of table containing the survey inputs */ table.cc_survey_tbl td { padding:3px; } /* primary tr of table */ table.cc_survey_tbl tr { background-color:#FFFFFF; } /* alt tr of table */ table.cc_survey_tbl tr.alt, table.cc_survey_tbl tr.alt table.cc_mc_tbl tr { background-color:#CCCCCC; } /* div containing a survey question */ div.cc_survey_question { font-weight:bold; } /* div containing a survey answer input(s) */ div.cc_survey_answer { padding-left:20px; } /* table containing multiple choices */ div.cc_survey_answer table.cc_mc_tbl { } /* tr of table containing multiple choices */ div.cc_survey_answer table.cc_mc_tbl tr { background:inherit; } /* td of table containing multiple choices */ div.cc_survey_answer table.cc_mc_tbl td { padding:0px; margin:0px; } /* radio inputs, 1-5 scale */ div.cc_survey_answer input.cc_radio_15 { margin-right:15px; } /* text input for a short numeric answer */ div.cc_survey_answer input.cc_survey_numeric_10 { width:20px; } /* text input, max 100 chars */ div.cc_survey_answer input.cc_survey_text { width:200px; } /* text input, max 12 chars */ div.cc_survey_answer input.cc_survey_numeric { width:50px } /* text input, max 20 chars */ div.cc_survey_answer input.cc_survey_date { width:100px } /* textarea input */ div.cc_survey_answer textarea { font-family:Arial, Helvetica, sans-serif; } /* calendar table class */ .calendar { font-family:Verdana, Arial, Helvetica, sans-serif; background-color:#000000; } .CL { /* list-style, class to override anything in .calendar */ background-color:#FFFFFF; width:500px; border:1px solid black; } .calendar .caption { color: #2A83A5; font-size:14px; font-weight: bold; padding:3px 0px 3px 0px; background-color:#CCFFFF; } .calendar-prev, .calendar-next { color: #2A83A5; font-size:12px; } .calendar td { padding:1px; } .calendar th { color:#1E688D; font-size:12px; font-weight:bold; padding:3px 0px 3px 2px; text-align:left; background-color:#CCFFCC; } .menu-header { font-size: 18px; font-style: normal; color: #900; letter-spacing: 4px; } .menu-subheader { font-size: 12px; letter-spacing: 2px; font-style: normal; font-weight: bold; color: #006; text-align: center; background-position: center; } #background #outer_wrapper #wrapper #content_wrapper #content_inner_wrapper #content_pad .menu-header { text-align: center; } /*------------------------------------------------------------------------------- 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 */ .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 #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;}