/* /////// ------- LAYOUT.CSS ------- \\\\\\\ */ /* Author(original): Chad Fontaine @ Chameleon Creative Author URI: http://www.chameleoncreative.com/ Version: 3.0 Last Revision: May 12 2011 Revised Made By: Chad Fontaine Project: ------------- Description: 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 STORE ---------------------------------------------------------*/ /*------------------------------------------------------------------------------- 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: #777777 url(../images/layout/background_fill.jpg) repeat-x left 45px; text-align: center; margin: 0px 0px 0px 0px; padding: 0px; font: 12px Verdana, Arial, Helvetica, sans-serif; } #background { width:100%; float:left; /*background: url(../images/layout/background.jpg) no-repeat center top;*/ } #container { width: 1002px; margin: 45px auto 0px auto; text-align:left;} #outer_wrapper {} #wrapper {} #inner_wrapper { width:1002px;} #navigation { width: 702px; height:91px; float:left;} #logo, #logo a, #logo a:hover { width:300px; height:91px; float:left; text-decoration:none; display:block; text-indent:-2000em; overflow:hidden; } #page_title { height:36px; text-align:right;} /* STICKY FOOTER #sticky_footer_wrapper { position: fixed; bottom: 0px; left:0px; width: 100%; text-align:center;} #sticky_footer_wrapper, #sticky_footer { height:45px; z-index:2000;} #sticky_footer_wrapper { float: left; background: #000 url(../images/layout/sticky_footer_fill.gif) repeat-x left top;} #sticky_footer { width:1002px; margin:0px auto; text-align:left; } */ /* STICKY FOOTER... NOW TURNED INTO A HEADER */ #sticky_footer_wrapper { position: fixed; top: 0px; left:0px; width: 100%; text-align:center;} #sticky_footer_wrapper, #sticky_footer { height:45px; z-index:2000;} #sticky_footer_wrapper { float: left; background: #000; border-bottom: 4px solid #790800;} #sticky_footer { width:1002px; margin:0px auto; text-align:left; } /* SIDEBAR HOURS */ #hours { margin: 0px 0px 0px 40px;} #hours { color:#666666; font: normal 12px/18px Arial, Helvetica, sans-serif;} #hours h2 { color:#790800; font:italic 30px/normal "Times New Roman", Times, serif; padding:0px; margin: 0px 0px 0px 0px;} #hours div { margin: 0px 0px 0px 10px;} #wrapper { background: url(../images/layout/content_fill.jpg) repeat-y left top;} #inner_wrapper { background: url(../images/layout/content_top_interior.jpg) no-repeat left top;} #secondary_navigation { width:501px; float:left;} #sticky_search { width:501px; float:left;} /* 4.1 GENERALIZED GROUPING -------------------------------------------------------------------------------*/ #inner_wrapper, #wrapper, #outer_wrapper, #page_title, #content_inner_wrapper, #content_wrapper, #footer { width:1002px; float:left; margin:0px; padding:0px; } /* 4.2 COLUMNS -------------------------------------------------------------------------------*/ #column_one { width:294px; float:left; overflow:hidden; } #column_one_pad { margin: 20px 30px 20px 40px; } #column_two { width:708px; float:left; overflow:hidden; } #column_two_pad { margin: 10px 40px 40px 30px; } .column { float:left; width:45%} /* 4.3 FOOTER -------------------------------------------------------------------------------*/ #footer_wrapper, #footer { height:100px;} #footer_wrapper { width:100%; float: left;} #footer_background { margin:0px auto; padding:0px; width:1002px; text-align:left; } #footer { background: url(../images/layout/footer.gif) no-repeat 0px 0px; } /* 4.4 CREDITS -------------------------------------------------------------------------------*/ #credits { width: 441px; float: right; text-align: right; background:url(../images/layout/chameleon_creative.gif) no-repeat 403px 2px; margin: 36px 0px 0px 0px;} #credits a, #credits a:active, #credits a:link, #credits a:visited { margin: 0px 45px 3px 0px; color: #fff; text-decoration: none; display: block; } #credits a strong, #credits a:active strong, #credits a:link strong, #credits a:visited strong { color: #0099ae; } #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; } #copyright { width: 561px; float: left; text-align: left; color: #999999; margin: 0px 0px 0px 0px; } #copyright strong { margin: 42px 0px 0px 190px; display:block; font: normal 10px/10px Arial, Helvetica, sans-serif;} /*------------------------------------------------------------------------------- 5. DRUPAL -------------------------------------------------------------------------------*/ /* 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: #b9b9be; text-decoration:none; } form#user-login-form a:hover { color:#000; text-decoration:underline; } form#user-login-form input { background:#999; border:1px solid #000; color:#fff } /* 5.2 SITE ADMIN MENU -------------------------------------------------------------------------------*/ #column_one ul.menu { margin:5px 0px; padding: 10px 0px 10px 20px; background:#4a4a4a; } #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: #000; 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 - BLOCK TEMPLATE SET IN search-block-form.tpl.php */ /* ------------------------------------------------------------ */ #search_block_outerwrapper { width:300px; float:right; margin: 0px 0px 0px 0px;} /* wrappers for backgrounds */ #search_block_wrapper {width:300px; float:left;} #search_block_innerwrapper { width:300px; float:left;} #search_block_outerwrapper input.form-text { vertical-align:top; float:left; display:inline-block; width:220px; height:20px; background:#989898; border:none; margin: 0px; color:#000; font: normal 12px Verdana, Geneva, sans-serif;} /* text field */ #search_block_outerwrapper input.form-submit { vertical-align:top; float:left; display:inline-block; background:#696969; width:66px; height:22px; border: none; color:#fff; font:bold 10px/normal "Times New Roman", Times, serif; text-transform:uppercase; /*padding: 0px 10px 0px 10px*/} /* submit button */ #search_block_outerwrapper input.form-text { -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 5px; -webkit-border-radius: 5px 0px 0px 5px; border-radius: 5px 0px 0px 5px; } #search_block_outerwrapper input.form-submit { -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 0px; -webkit-border-radius: 0px 5px 5px 0px; border-radius: 0px 5px 5px 0px; } /* 5.6 GALLERY -------------------------------------------------------------------------------*/ #column_two div.gallery_thumbnail { width:135px; float:left; text-align:center; font:normal 11px/normal Verdana, Geneva, sans-serif; color:#600; margin-top:5px;} #column_two div.gallery_thumbnail a img { border:3px solid #CCC; padding:1px;} #column_two div.gallery_thumbnail a:hover img { border:3px solid #600; padding:1px; opacity:.75; filter: alpha(opacity=75); -moz-opacity: 0.75;} #column_two div.photo_gallery_thumbnail {width:135px; float:left; text-align:center; font:normal 11px/normal Verdana, Geneva, sans-serif; color:#600; margin-top:5px;} #column_two div.photo_gallery_thumbnail a img { border:3px solid #CCC; padding:1px;} #column_two div.photo_gallery_thumbnail a:hover img { border:3px solid #600; padding:1px; opacity:.75; filter: alpha(opacity=75); -moz-opacity: 0.75;} /* 5.6 STORE -------------------------------------------------------------------------------*/ /* ---------------- TEASER ---------------- */ #column_two div.book-teaser-wrapper { width:630px; margin:0px 0px 0px 0px;} #column_two div.book-teaser-wrapper div.book-teaser-title a { color: #790800; font: italic 25px "Times New Roman",Times,serif; text-decoration:underline;} #column_two div.book-teaser-wrapper div.book-teaser-title a:hover { color: #000; text-decoration:none;} #column_two div.book-teaser-wrapper div.book-teaser-author { font:italic 14px/normal Arial, Helvetica, sans-serif; color: #666666; text-decoration:none;} #column_two div.book-teaser-wrapper div.book-teaser-image { width:120px; float:left; margin:0px 10px 5px 0px; } #column_two div.book-teaser-wrapper div.book-teaser-sell-price { color: #790800; font: normal 14px/normal Arial, Helvetica, sans-serif; } #column_two div.book-teaser-wrapper div.book-teaser-add-to-cart { border-top: 1px solid #CCC; margin:10px 0px 0px 0px; padding: 10px 0px 0px 0px;} #column_two div.book-teaser-wrapper div.book-teaser-title, #column_two div.book-teaser-wrapper div.book-teaser-author, #column_two div.book-teaser-wrapper div.book-teaser-sell-price, #column_two div.book-teaser-wrapper div.book-teaser-add-to-cart { width: 470px; float:right;} #column_two div.book-teaser-wrapper { width:610px; float:left; margin:0px 10px 30px 10px; padding:10px; background:#fff; border:1px solid #ccc;} #column_two div.book-teaser-wrapper { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;} #column_two div.book-teaser-wrapper div.book-teaser-add-to-cart { border-top: none; } /* CSS3 */ /* GREY #column_two #book-wrapper div.book-add-to-cart input, #column_two div.book-teaser-wrapper div.book-teaser-add-to-cart input { -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; box-shadow:inset 0px 1px 0px 0px #ffffff; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) ); background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf'); background-color:#ededed; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:2px solid #dcdcdc; display:inline-block; color:#777777; font-family:arial; font-size:15px; font-weight:bold; padding:2px 24px; text-decoration:none; text-shadow:1px 1px 0px #ffffff; cursor:pointer; } #column_two #book-wrapper div.book-add-to-cart input:hover, #column_two div.book-teaser-wrapper div.book-teaser-add-to-cart input:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) ); background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed'); background-color:#dfdfdf; } */ /* ORANGE #column_two #book-wrapper div.book-add-to-cart input, #column_two div.book-teaser-wrapper div.book-teaser-add-to-cart input { -moz-box-shadow:inset 0px 1px 0px 0px #fce2c1; -webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1; box-shadow:inset 0px 1px 0px 0px #fce2c1; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) ); background:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25'); background-color:#ffc477; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #eeb44f; display:inline-block; color:#ffffff; font-family:arial; font-size:15px; font-weight:bold; padding:2px 10px; text-decoration:none; text-shadow:1px 1px 0px #cc9f52; cursor:pointer; } #column_two #book-wrapper div.book-add-to-cart input:hover, #column_two div.book-teaser-wrapper div.book-teaser-add-to-cart input:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) ); background:-moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477'); background-color:#fb9e25; }*/ #column_two #book-wrapper div.book-add-to-cart input, #column_two div.book-teaser-wrapper div.book-teaser-add-to-cart input { -moz-box-shadow:inset 0px 1px 0px 0px #dcecfb; -webkit-box-shadow:inset 0px 1px 0px 0px #dcecfb; box-shadow:inset 0px 1px 0px 0px #dcecfb; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bddbfa), color-stop(1, #80b5ea) ); background:-moz-linear-gradient( center top, #bddbfa 5%, #80b5ea 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bddbfa', endColorstr='#80b5ea'); background-color:#bddbfa; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #84bbf3; display:inline-block; color:#ffffff; padding:3px 10px; text-decoration:none; text-shadow:1px 1px 0px #528ecc; font: bold 12px/normal Arial, Helvetica, sans-serif; cursor:pointer; } #column_two #book-wrapper div.book-add-to-cart input:hover, #column_two div.book-teaser-wrapper div.book-teaser-add-to-cart input:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #80b5ea), color-stop(1, #bddbfa) ); background:-moz-linear-gradient( center top, #80b5ea 5%, #bddbfa 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80b5ea', endColorstr='#bddbfa'); background-color:#80b5ea; } /* ---------------- FULL ---------------- */ #column_two #book-wrapper {} #column_two #book-wrapper div.book-title { color: #790800; font: italic 25px "Times New Roman",Times,serif; } #column_two #book-wrapper div.book-author {font:italic 14px/normal Arial, Helvetica, sans-serif; color: #666666; text-decoration:none;} #column_two #book-wrapper div.book-image img { border:2px solid #dcdcdc; margin-left:20px;} #column_two #book-wrapper div.book-description { margin-left:20px;} #column_two #book-wrapper div.book-sell-price { color: #790800; font: normal 14px/normal Arial, Helvetica, sans-serif;} #column_two #book-wrapper div.book-add-to-cart { border-top: 1px solid #CCC; margin:10px 0px 0px 0px; padding: 10px 0px 0px 0px;} #column_two #book-wrapper div.book-image { width:250px; /*height:250px;*/ margin:0px 0px 30px 0px; float:right; text-align:right;} #column_two #book-wrapper div.book-image img {width:200px; height: auto;} /* SHOPPING CART */ .cart-block-summary, #cart-block-contents { border: 2px solid #dedede; background: #fff; padding:5px; margin:3px 0px; width:225px; } #cart-block-contents {width:212px;} tr.cart-block-summary-links .links { border-top: 1px solid #dedede;} tr.cart-block-summary-links a { font-weight:bold;} /* CSS3 */ .cart-block-summary, #cart-block-contents { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } /* CHILD NAVIGATION IN SIDEBAR */ #child_navigation h2 { color:#990000; font: bold 26px/normal "Times New Roman", Times, serif; margin: 0px 0px 0px 0px; padding:0px;} #child_navigation { margin: 20px 0px 0px 60px;} #child_navigation_outer_wrapper { float:left; width:294px; background:url(../images/layout/children_menu_fill.jpg) repeat-y right top; margin:21px 0px 30px 0px;} #child_navigation_wrapper { float:left; width:294px; background:url(../images/layout/children_menu_top.jpg) no-repeat right top;} #child_navigation_inner_wrapper { float:left; width:294px; background:url(../images/layout/children_menu_bottom.jpg) no-repeat right bottom;} #child_navigation ul.menu { margin:5px 0px; padding: 0px 0px 0px 20px; background: transparent; color:#a40600; list-style:disc; } #child_navigation ul.menu li { margin: 0px 0px 4px 0px; padding: 0px 0px 4px 0px; } #child_navigation ul.menu a, #child_navigation ul.menu a:active, #child_navigation ul.menu a:link, #child_navigation ul.menu a:visited { color: #000; text-decoration:none; font:normal 16px/normal Verdana, Geneva, sans-serif; border-bottom: 1px solid #a40600; display:block; } #child_navigation ul.menu a:hover, #child_navigation ul.menu a.active { color: #a40600; text-decoration:none; } #child_navigation ul.menu li li { margin: 0px 0px 2px 0px; padding: 0px 0px 2px 0px; } #child_navigation ul.menu ul.menu a, #child_navigation ul.menu ul.menu a:active, #child_navigation ul.menu ul.menu a:link, #child_navigation ul.menu ul.menu a:visited { color: #000; text-decoration:none; font:normal 12px/normal Verdana, Geneva, sans-serif; border-bottom: none;} #child_navigation ul.menu ul.menu a:hover { color: #a40600; text-decoration:underline; } #child_navigation ul.menu ul.menu a.active { color: #a40600; font-weight:bold;} /* WHAT'S ON */ .news_wrapper { margin-bottom:30px; border-bottom: 1px solid #CCC; } .news_title { color:#990100; font: bold 14px/14px Verdana, Geneva, sans-serif; margin: 0px 0px 10px 0px; padding: 0px 0px 0px 0px;} .news_date { color: #666666; font: italic 11px/12px Verdana, Geneva, sans-serif; margin: 0px 0px 5px 0px; padding: 0px 0px 0px 0px;} .news_body { margin: 0px 0px 0px 10px;} .news_more { margin: 0px 0px 10px 0px; padding: 0px 0px 20px 0px; text-align:right;} .news_more a { font: bold 11px/normal Verdana, Geneva, sans-serif; text-decoration:underline; } .date-display-single { color: #666666; font: bold italic 12px/12px Verdana, Geneva, sans-serif; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;} .field-field-event-image { text-align:center;} .field-field-event-image img, .news_image img { margin:0px auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0px 0px 5px 5px #ccc; -moz-box-shadow: 0px 0px 5px 5px #ccc; box-shadow: 0px 0px 5px 5px #ccc; background:#fff; float:left; margin-right:10px; } .field-field-event-image .field-label { display:none;}