/* /////// ------- LAYOUT.CSS ------- \\\\\\\ */ /* Layout.css is intended for structural css only. All the heavy lifting is done here. */ /* Author(original): Chameleon Creative - Chad Fontaine Author URI: http://www.chameleoncreative.com/ Version: 0.1 Last Revision: Date Revised Made By: Name Project: Project Name Description: Description */ /*-------------------------------------------------------- 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 4.5 FAT FOOTER 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 ---------------------------------------------------------*/ /*------------------------------------------------------------------------------- 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 { text-align: center; margin: 0px; padding: 0px; font: 12px Verdana, Arial, Helvetica, sans-serif; background: #023945 url(../images/layout/background_fill.jpg) repeat-x;} #background { width:100%; float:left; } #container { width: 1002px; margin: 0px auto; text-align:left; } #outer_wrapper { background: url(../images/layout/page_fill.gif) repeat-y 63px 0px; } #wrapper { background: url(../images/layout/page_left.jpg) no-repeat left top; } #inner_wrapper { background: url(../images/layout/page_right.jpg) no-repeat right top; } #logo, #logo a, #logo a:hover { width:450px; height:116px; float:left; text-decoration:none; display:block; text-indent:-2000em; overflow:hidden; } #secondary_navigation { width:552px; height:50px; float:left; } #navigation { height:23px; } #index_header { display:none; } #content_wrapper { } /* 4.1 GENERALIZED GROUPING -------------------------------------------------------------------------------*/ #inner_wrapper, #wrapper, #outer_wrapper, #navigation, #content_wrapper, #footer, #columns_topper { width:1002px; float:left; } /* 4.2 COLUMNS -------------------------------------------------------------------------------*/ #column_one { width:692px; float:left; overflow:hidden; } #column_one_pad { margin: 15px 40px 20px 100px; } #column_two { width:310px; float:left; overflow:hidden; } #column_two_pad { margin: 20px 10px 20px 10px; } /* 4.3 FOOTER -------------------------------------------------------------------------------*/ #footer_wrapper { width:100%; height:210px; float: left; background: url(../images/layout/footer_fill.jpg) repeat-x 0px 0px; } #footer_background { margin:0px auto; padding:0px; width:1002px; text-align:left; } #footer { height: 200px; background: url(../images/layout/footer.jpg) no-repeat 0px 0px; } /* 4.4 CREDITS -------------------------------------------------------------------------------*/ #copyright { width: 1002px; float: left; text-align: right; color: #fff; margin: 72px 0px 0px 0px; } #copyright strong { font-size: 10px; font-weight: normal; margin: 0px 12px 0px 0px; } #credits { width: 1002px; float: left; text-align: right; } #credits a, #credits a:active, #credits a:link, #credits a:visited { margin: 0px 12px 0px 0px; color: #9c9c5e; font-weight: normal; text-decoration: none; font-size: 10px; display: block; } #credits a:hover { color: #fff; text-decoration: underline; } /* 4.5 FAT FOOTER -------------------------------------------------------------------------------*/ #footer_info{ margin:0; padding:0 0 0px 0px; font-size:10px; text-align:left; /*background: black; opacity:.75; filter: alpha(opacity=75); -moz-opacity: 0.75;*/} #footer_info_1 a, #footer_info_2 a, #footer_info_3 a { color:#9d9a92; text-decoration:none; /*border-bottom: 1px dotted #fff;*/} #footer_info a:hover { color:#fffdca; text-decoration:underline; } #footer_info #footer_info_1 { width: 180px; float: left; padding: 0px 15px 0px 90px; margin:0px; /*background:green; opacity:.75; filter: alpha(opacity=75); -moz-opacity: 0.75;*/} #footer_info #footer_info_2 { width: 250px; float: left; padding: 0px; margin:0px; /*background: purple; opacity:.75; filter: alpha(opacity=75); -moz-opacity: 0.75;*/} #footer_info #footer_info_3{ width: 455px; float: right; padding: 40px 0px 0px 0px; /*background:blue; opacity:.75; filter: alpha(opacity=75); -moz-opacity: 0.75; */} #footer_info #footer_info_1 h2, #footer_info #footer_info_2 h2, #footer_info #footer_info_3 h2 { padding: 0px 0px 3px 0px; margin: 20px 0px 10px 0px; font: bold 14px/14px Verdana, Geneva, sans-serif; color: #fff; border-bottom: 1px dotted #0d5767;} #footer_info #footer_info_1 ul, #footer_info #footer_info_2 ul, #footer_info #footer_info_3 ul { padding:0; margin: 0 0 0 10px; list-style: none; } #footer_info #footer_info_1 ul li, #footer_info #footer_info_3 ul li { background: url(../images/icons/news-icon.gif) 0 5px no-repeat; padding: 0 0 3px 17px; } #footer_info #footer_info_1 ul.menu, #footer_info #footer_info_2 ul.menu li { list-style:none;} #footer_info #footer_info_1 ul.menu ul.menu { display:none;} #footer_info #footer_info_1 ul li a, #footer_info #footer_info_1 ul li a:hover { display: block; text-transform:capitalize; /*margin-bottom:2px; padding-bottom:2px;*/ } #footer_info #footer_info_2 ul li { background: url(../images/icons/bubble.gif) 0 4px no-repeat; padding: 0 0 2px 17px; } #footer_info #footer_info_2 ul li a { display: block;} #footer_info #footer_info_2 strong { color:#FFFFCC;} #footer_info #footer_info_2 div { margin: 0px 0px 0px 15px; color:#CCC; font-size: 11px;} #footer_info #footer_info_3 h3 { font-size: 12px; margin:0px 0px 0px 0px; padding:0px; color:#fff; font-weight:normal;} #footer_info #footer_info_3 a { font-size:10px; color: #960;} #footer_info #footer_info_3 a:hover { color: #fff;} #footer_info #footer_info_3 p { margin: 0px 0px 0px 10px; color:#CCC;} #footer_info #footer_info_1 ul.menu, #footer_info #footer_info_1 li.expanded, #footer_info #footer_info_1 li.leaf { list-style-image:none; list-style-position:outside; list-style-type:none; list-style:none;} #footer_info_3 #copyright { width: 450px; float: right; text-align: right; color: #fff; margin: 40px 0px 0px 0px; } #footer_info_3 #copyright strong { font-size: 10px; font-weight: normal; margin: 0px 12px 0px 0px; } #footer_info_3 #credits { width: 450px; float: right; text-align: right; } #footer_info_3 #credits a, #footer_info_3 #credits a:active, #footer_info_3 #credits a:link, #footer_info_3 #credits a:visited { margin: 0px 12px 0px 0px; color: #9c9c5e; font-weight: normal; text-decoration: none; font-size: 10px; display: block; } #footer_info_3 #credits a:hover { color: #fff; 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_two ul.menu { margin:5px 0px; padding: 10px 0px 10px 20px; background:#00262e; font-size:12px;} #column_two ul.menu a, #column_two ul.menu a:active, #column_two ul.menu a:link { color:#fff; text-decoration:none; } #column_two ul.menu a:visited { color: #CCC; text-decoration:underline; } #column_two ul.menu a:hover { color: #74742f; text-decoration:underline; } /* 5.3 PAGE EDIT TABS -------------------------------------------------------------------------------*/ #tabs-wrapper a { background:#74742f; color:#000; } #tabs-wrapper a:hover { background:#000; color: #fff; } #tabs-wrapper a.active { background:#fff; color:#000; } /* 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 input { font: normal 11px/normal Verdana, Geneva, sans-serif; color:#fff; } #search_textbox { height:15px; width:102px; border:1px solid #2b2b2b; background:#454545; text-align:right; } #search_submit { height:18px; border:1px solid #3a0000; background:#690000; } /* 5.6 GALLERY -------------------------------------------------------------------------------*/ div.content span a:hover img { opacity:.75; filter: alpha(opacity=75); -moz-opacity: 0.75; } div.gallery_thumbs { width:125px; height:170px; float:left; text-align:center; font:normal 11px/normal Arial, Helvetica, sans-serif; color:#666; margin-top:10px;} div.gallery_thumbs a img { margin:0px 5px; border: 1px solid #666;} div.gallery_thumbs a:hover img { opacity:.75; filter: alpha(opacity=75); -moz-opacity: 0.75; border:1px solid #000;} div.photo_gallery_thumbnail { width:125px; height:180px; float:left; text-align:center; font:normal 11px/normal Arial, Helvetica, sans-serif; color:#666; margin-top:10px;} div.photo_gallery_thumbnail a img { margin:0px 5px; border: 1px solid #666;} div.photo_gallery_thumbnail a:hover img { opacity:.75; filter: alpha(opacity=75); -moz-opacity: 0.75; border:1px solid #000;} div.emvideo-lightbox2 { width:120px; height:80px; float:left; text-align:center; font:normal 11px/normal Arial, Helvetica, sans-serif; color:#666; margin:10px 10px 0px 0px;} div.emvideo-lightbox2 a img { margin:0px 5px; border: 1px solid #666;} div.emvideo-lightbox2 a:hover img { opacity:.75; filter: alpha(opacity=75); -moz-opacity: 0.75; border:1px solid #000;} /* 5.7 SLIDESHOW -------------------------------------------------------------------------------*/ div.view-Slideshow ul, div.view-Slideshow li { margin:0px; padding:0px; list-style:none; } /* 5.8 CALLENDAR -------------------------------------------------------------------------------*/ #calendar-data { text-align:left; } /* calendar calendar table styles */ .calendar-calendar tr.odd, .calendar-calendar tr.even { background-color:#fff; } .calendar-calendar table { border-collapse: collapse; border-spacing: 0; margin:0 auto; padding:0; width: 99%; /* Setting at 100% causes problem in Internet Explorer. */ } .calendar-calendar .month-view table { border:none; padding:0; margin:0; width:100%; } /* IE needs a little help to get the side by side tables to the right size */ .calendar-calendar .year-view td { width:32%; padding:1px; border:none; } .calendar-calendar .year-view td table td { width:13%; padding:0; } .calendar-calendar tr { padding: 0; margin: 0; background-color: white; } .calendar-calendar th { color: #fff; background-color: #ccc; text-align: center; margin:0; } .calendar-calendar th a { font-weight: bold; color: #fff; background-color: #ccc; } .calendar-calendar td { width: 12%; /* 14% is about 1/7 of total table width */ min-width: 12%; border: 1px solid #ccc; color: #777; text-align: right; vertical-align: top; margin: 0; padding:0; } /* simplify the mini calendar by removing borders */ .calendar-calendar .mini { border:none; } /* format for the week number in the first cell */ .calendar-calendar td.week { width:1%; min-width:1%; } .calendar-calendar .week { clear:both; font-style: normal; color: #555; font-size: 0.8em; } .calendar-calendar .week a { font-weight:normal; } /* IE6 does not support min-height, using Min-Height fast hack from http://www.dustindiaz.com/min-height-fast-hack */ .calendar-calendar .inner { min-height:5em; height:auto !important; height:5em; padding:0; margin:0; } .calendar-calendar .inner div { padding:0; margin:0; } /* Make sure paragraphs buried in calendar cells use padding, not margins, for separation so the background color doesn't come through. */ .calendar-calendar .inner p { padding:0 0 .8em 0; margin:0; } .calendar-calendar td a { font-weight: bold; text-decoration: none; } .calendar-calendar td a:hover { text-decoration: underline; } .calendar-calendar td.year, .calendar-calendar td.month { text-align: center; } /* format days of the week header cells */ .calendar-calendar th.days { color: #ccc; background-color: #224; text-align: center; padding:1px; margin:0; } /* floating day number div */ .calendar-calendar div.day { float: right; text-align: center; padding: 0.125em 0.25em 0 0.25em; margin: 0; background-color: #f3f3f3; border: 1px solid gray; border-width: 0 0 1px 1px; clear:both; width:1.5em; } /* individual node container */ .calendar-calendar div.calendar { background-color: #fff; border: solid 1px #ddd; text-align: left; margin:0 .25em .25em 0; width: 96%; float:right; /* needed to keep IE from hiding the floating day number */ clear:both; } /* No floating of day view content because there is no floating day number */ .calendar-calendar .day-view div.calendar { float:none; width:98%; margin:1% 1% 0 1%; } .calendar-calendar div.title { font-size:.8em; text-align:center; } .calendar-calendar div.title a { color: #000; } .calendar-calendar div.title a:hover { color: #c00; } .calendar-calendar .content { clear:both; padding: 3px; padding-left: 5px; } .calendar div.form-item { white-space: normal; } table td.mini, table th.mini, table.mini td.week { padding:0 1px 0 0; margin:0; } table td.mini a { font-weight:normal; } .calendar-calendar .mini-day-off { padding:0px; } .calendar-calendar .mini-day-on { padding:0px; } table .mini-day-on a { text-decoration:underline; } .calendar-calendar .mini .title { font-size:.8em; } .mini .calendar-calendar .week { font-size:.7em; } .mini-row { width:100%; border:none; } .mini { width:32%; vertical-align:top; } /* formatting for the legend stripe and block */ .calendar-calendar .stripe { height: 5px; width: auto; font-size:1px !important; line-height:1px !important; } .calendar-calendar .day-view .stripe { width:100%; } table.calendar-legend { background-color:#ccc; width:100%; margin:0; padding:0; } table.calendar-legend tr.odd .stripe, table.calendar-legend tr.even .stripe { height:12px !important; font-size:9px !important; line-height:10px !important; } .calendar-legend td { text-align:left; } .calendar-empty { font-size:1px; line-height:1px; } /* formatting for the full day view */ .calendar-calendar td.calendar-agenda-hour { font-family:serif; text-align:right; border:none; border-top:1px #333 dotted; padding-top:.25em; width:1%; } .calendar-calendar td.calendar-agenda-no-hours { min-width:1%; } .calendar-calendar td.calendar-agenda-hour .calendar-hour { font-size:1.2em; font-weight:bold; } .calendar-calendar td.calendar-agenda-hour .calendar-ampm { font-size:1em; } .calendar-calendar td.calendar-agenda-items { border:1px #333 dotted; text-align:left; } .calendar-calendar td.calendar-agenda-items div.calendar { width:auto; padding:.25em; margin:0; } .calendar-calendar div.calendar div.inner .calendar-agenda-empty { width:100%; text-align:center; vertical-align:middle; padding:1em 0; background-color:#fff; } /* the popup date selector for jumping to a new date */ .calendar-date-select form { text-align:right; float:right; width:25%; } .calendar-date-select div, .calendar-date-select input, .calendar-date-select label { text-align:right; padding:0; margin:0; float:right; clear:both; } .calendar-date-select .description { float:right; } .calendar-label { font-weight:bold; display:block; clear:both; } .calendar-calendar div.date-nav { background-color:#ccc; color:#777; padding:0.2em; width:auto; border:1px solid #ccc; } .calendar-calendar div.date-nav a, .calendar-calendar div.date-nav h3 { color:#777; } .calendar-calendar th.days { background-color:#eee; color:#777; font-weight:bold; border:1px solid #ccc; } .calendar-calendar td.empty { background:#ccc; border-color:#ccc; } .calendar-calendar table.mini td.empty { background:#fff; border-color:#fff; } .calendar-calendar td div.day { border:1px solid #ccc; border-top:none; border-right:none; margin-bottom:2px; } .calendar-calendar td .inner div, .calendar-calendar td .inner div a { background:#eee; } /* Set small font size for all items in calendar div, themes can override this. */ /* Use x-small instead of em to avoid multiplying effect in nested items. */ .calendar-calendar div.calendar { border:none; font-size:x-small; } .calendar-calendar td .inner div.calendar div, .calendar-calendar td .inner div.calendar div a { border:none; background:#ffc; padding:0 2px; } .calendar-calendar td .inner div.calendar div.calendar-more, .calendar-calendar td .inner div.calendar div.calendar-more a { color:#444; background:#fff; text-align:right; } .calendar-calendar td .inner .view-field, .calendar-calendar td .inner .view-field a { color:#444; font-weight:normal; } .calendar-calendar td span.date-display-single, .calendar-calendar td span.date-display-start, .calendar-calendar td span.date-display-end, .calendar-calendar td span.date-display-separator { font-weight:bold; } .calendar-calendar td .inner div.day a { color:#4b85ac; } .calendar-calendar tr td.today, .calendar-calendar tr.odd td.today, .calendar-calendar tr.even td.today { background-color:#C3D6E4; } .calendar-calendar td .inner div.calendar div div.view-data-node-data-field-date-field-date-value { border-bottom:1px solid #ccc; } /* The following are not used by default but are available for themes */ .calendar-calendar td.past { } .calendar-calendar td.future { } .calendar-calendar td.has-events { } .calendar-calendar td.has-no-events { } /* 5.9 OTHER STUFF -------------------------------------------------------------------------------*/ .news_title { font-weight:bold; margin: 10px 0px 0px 0px; } .news_date { font-style:italic; } .news_body { margin: 5px 0px 2px 0px; } .news_more a:active, .news_more a:link, .news_more a:visited, .news_more a { color:#128D9D; } .sidebar_text h5 { color:#fff; } .audio_file { border: 2px solid #01313b; padding: 3px 0px 0px 3px; } /* 5.10 INDEX NEWS SCROLLER -------------------------------------------------------------------------------*/ #column_two .view-news-updates { background:#01313b; /*border:1px solid #074654; margin: 10px 0px 10px 0px;*/} #column_two .view-news-updates ul, .view-news-updates li, .item-list ul li { list-style:none;} #column_two .news_title { font: bold 12px/normal Verdana, Geneva, sans-serif; color:#8b8b5a;} #column_two .view-news-updates a:hover { color:#fff;} #column_two .date-display-single { color:#999;} #column_two .news_body { margin: 0px 0px 3px 5px;} /* 5.11 RIGHT SIDEBAR NAVIGATION -------------------------------------------------------------------------------*/ #column_two .menu-name-primary-links { padding: 10px 0px 0px 0px;} #column_two .menu-name-primary-links ul.menu { margin:0px 40px 5px 0px; padding: 10px 0px 10px 0px; background: #006b75; border-bottom: 12px solid #797945;} #column_two .menu-name-primary-links ul.menu a, #column_two .menu-name-primary-links ul.menu a:active, #column_two .menu-name-primary-links ul.menu a:link { font:normal 12px/normal Verdana, Geneva, sans-serif; color:#fff; text-decoration:none; } #column_two .menu-name-primary-links ul.menu a:visited { color: #fff; text-decoration:none; } #column_two .menu-name-primary-links ul.menu a:hover { color: #fff; text-decoration:underline;} #column_two .menu-name-primary-links ul.menu li.active-trail a { font-weight:bold; text-decoration:underline;} #column_two .menu-name-primary-links ul.menu li.active-trail { color:#fff; list-style:square;} /* 5.12 Jquery Pager -------------------------------------------------------------------------------*/ #pager ul.pages { display:block; border:none; text-transform:uppercase; font-size:10px; margin:10px 0 50px; padding:0; } #pager ul.pages li { list-style:none; float:left; border:1px solid #ccc; text-decoration:none; margin:0 5px 0 0; padding:5px; } #pager ul.pages li:hover { border:1px solid #003f7e; } #pager ul.pages li.pgEmpty { border:1px solid #eee; color:#eee; } #pager ul.pages li.pgCurrent { border:1px solid #003f7e; color:#000; font-weight:700; background-color:#eee; } /*---------MINOR EDITS BY SEAN---------*/ #secondary_navigation ul.menu li.list3 a { color:#006B75; }