/* Copyright (c) 2008, Element Fusion, LLC. All rights reserved. ------------------------------------------------------------- LICENSED FOR USE UNDER A CREATIVE LICENSE AGREEMENT ------------------------------------------------------------- This document, and all creative material associated herein, is protected under copyright law to be used exclusively with the Content Management Systems of Element Fusion, LLC. ------------------------------------------------------------- You can read the full creative license agreement at: http://www.elementfusion.com/license ------------------------------------------------------------- Version 1.0 - June 23, 2008 Version 1.1 - Modified, October 1, 2008 ///////////////////////////////////////////////////////////// STYLE-TEMPLATE.CSS ORDER BREAKDOWN 1. Body / Column Count 2. Skip To 3. Page Container 4. Header 5. Navigation (Top, Side) 6. Sub Navigation 7. Content Container (content types, breadcrumb) 8 Footer/Copyright > For more informaion on CSS, http://accountsupport.elementfusion.com/css-help */ body { font-family: arial, helvetica, sans-serif; color: #333; background-color: #efefef; font-size: 75%; } /* this is for sites that have a designed background to keep it from pushing up under the adminbar */ #body { background: #efefef; } /* put .xxxColumn in the to specify which layout you want */ /* column layouts with top navigation */ /* three column */ .navigationTopStatic .threeColumn #mainColumn, .navigationTopFlyout .threeColumn #mainColumn { float: left; width: 370px; } .navigationTopStatic .threeColumn #contentContainer #subColumn, .navigationTopFlyout .threeColumn #contentContainer #subColumn { float: left; width: 205px; padding: 10px; } .navigationTopStatic .threeColumn #contentContainer #extraColumn, .navigationTopFlyout .threeColumn #contentContainer #extraColumn { float: left; width: 145px; padding: 10px; } /* two column layout */ .navigationTopStatic .twoColumn #mainColumn, .navigationTopFlyout .twoColumn #mainColumn { float: left; width: 530px; } .navigationTopStatic .twoColumn #contentContainer #subColumn, .navigationTopFlyout .twoColumn #contentContainer #subColumn { float: left; width: 205px; padding: 10px; } /* one column layout */ .navigationTopStatic .oneColumn #mainColumn, .navigationTopFlyout .oneColumn #mainColumn { width: 90%; } /* column layouts with side navigation */ /* three column */ .navigationSideStatic .threeColumn #mainColumn, .navigationSideFlyout .threeColumn #mainColumn { float: left; width: 350px; } .navigationSideStatic .threeColumn #navigation, .navigationSideFlyout .threeColumn #navigation { width: 150px; } .navigationSideStatic .threeColumn #contentContainer #subColumn, .navigationSideFlyout .threeColumn #contentContainer #subColumn { float: left; width: 165px; padding: 10px; } /* two column layout */ .navigationSideStatic .twoColumn #mainColumn, .navigationSideFlyout .twoColumn #mainColumn { float: left; width: 550px; } .navigationSideStatic .twoColumn #navigation, .navigationSideFlyout .twoColumn #navigation { width: 150px; } /* one column layout */ .navigationSideStatic .oneColumn #mainColumn, .navigationSideFlyout .oneColumn #mainColumn { width: 90%; } /* skip to content hidden button, for minor accessibility reasons */ #skipTo { display: none; } /* putting everything in a container to keep html code down */ #pageContainer { width: 790px; margin: 0 auto; border-top: 3px solid #939393; min-height: 320px; height: auto !important; height: 320px; } /* HEADER */ #header { background: #dadada; border-top: 1px solid #fff; border-bottom: 1px solid #fff; padding: 10px; } /* supplementary navigation in the header */ #header .headerNav { float: right; } #header .headerNav li { display: inline; padding: 5px; } #header .headerNav li a { color: #666; } /* site logo */ #header h1#logo { font-size: 3em; margin: 0; font-weight: bold; letter-spacing: -1px; } #header h1#logo a { color: #000; text-decoration: none; } /* NAVIGATION SCHEMES */ /* TOP NAVIGATION SCHEMES */ /* main navigation, top with flyout */ .navigationTopFlyout #navigation { background: #a4a4a4; padding: 5px 10px 5px 0; } .navigationTopFlyout .mainNav { clear: both; padding: 5px 0; } .navigationTopFlyout .mainNav li { /* #see style-ie.css as well for changes */ float: left; padding: 0 15px; position: relative; } .navigationTopFlyout .mainNav li a { color: #333; display: block; } /* mouseover navigation. for level 2 flyout navigation */ .navigationTopFlyout .mainNav li:hover ul.level2, .navigationTopFlyout .mainNav li:focus ul.level2, .navigationTopFlyout .mainNav li.sfhover ul.level2 { display: block; } .navigationTopFlyout .mainNav li ul.level2 { display: none; position: absolute; background: #DADADA; width: 120px; color: #fff; padding: 5px 5px; z-index: 3; left: 0; margin: 0 0 0 10px; /* #see style-ie.css as well for changes */ font-size: .9em; border: none; } .navigationTopFlyout .mainNav li ul.level2 li { padding: 0; } .navigationTopFlyout .mainNav li ul.level2 li a { color: #333; padding: 3px 3px; width: 120px; } .navigationTopFlyout .mainNav li ul.level2 li a:hover { color: #666; } /* level 3 flyout navigation */ .navigationTopFlyout .mainNav li ul.level2 li:hover ul.level3, .navigationTopFlyout .mainNav li ul.level2 li:focus ul.level3, .navigationTopFlyout .mainNav li ul.level2 li.sfhover ul.level3 { display: block; } .navigationTopFlyout .mainNav li ul.level2 li ul.level3 { display: none; background: #b5b5b5; position: absolute; margin-left: 125px; left: 0; top: 3px; padding: 2px; } .navigationTopFlyout .mainNav li ul.level2 li ul.level3 a { color: #000; } .navigationTopFlyout .mainNav li ul.level2 li ul.level3 a:hover { color: #999; } /* main navigation, top no flyout */ .navigationTopStatic #navigation { background: #a4a4a4; padding: 5px 10px 5px 0; } .navigationTopStatic .mainNav { clear: both; padding: 5px 0; } .navigationTopStatic .mainNav li { float: left; padding: 0 15px; } .navigationTopStatic .mainNav li a { color: #333; display: block; } .navigationTopStatic .mainNav li a:hover, .navigationTopStatic .mainNav li a:focus { color: #555; } /* hiding subnavs */ .navigationTopStatic .mainNav li ul.level2, .navigationTopStatic .mainNav li ul.level3, .navigationTopStatic .mainNav li ul.level4 { display: none; } /* SIDE NAVIGATION SCHEMES */ /* main, side flyout navigation (change float to RIGHT/LEFT to change #navigation position. if changed to right some settings will need to be modified to get the flyout to work correctly.) NOTE: Width is specified along with BODY/COLUMNS up top. */ .navigationSideFlyout #navigation { float: left; padding: 5px 10px; margin: 10px 15px 10px 10px; font-size: 1.2em; } .navigationSideFlyout .mainNav { padding: 5px 0; margin-bottom: 20px; } .navigationSideFlyout .mainNav li { /* #see style-ie.css as well for changes */ position: relative; border-bottom: 1px solid #999; } .navigationSideFlyout .mainNav li a { color: #333; display: block; padding: 5px; } .navigationSideFlyout .mainNav li a:hover, .navigationSideFlyout .mainNav li a:focus { background: #efefef; } /* mouseover navigation. for level 2 flyout navigation */ .navigationSideFlyout .mainNav li:hover ul.level2, .navigationSideFlyout .mainNav li:focus ul.level2, .navigationSideFlyout .mainNav li.sfhover ul.level2 { display: block; } .navigationSideFlyout .mainNav li ul.level2 { display: none; position: absolute; background: #dddddd; color: #333; padding: 5px 5px; z-index: 3; font-size: .8em; left: 150px; top: 0; } .navigationSideFlyout .mainNav li ul.level2 li { padding: 0; border: none; } .navigationSideFlyout .mainNav li ul.level2 li a { color: #333; padding: 3px 3px; width: 125px; } .navigationSideFlyout .mainNav li ul.level2 li a:hover { color: #666; } /* level 3 flyout navigation */ .navigationSideFlyout .mainNav li ul.level2 li:hover ul.level3, .navigationSideFlyout .mainNav li ul.level2 li.sfhover ul.level3 { display: block; } .navigationSideFlyout .mainNav li ul.level2 li ul.level3 { display: none; background: #cbcbcb; position: absolute; margin-left: 125px; left: 0; top: 3px; padding: 2px; z-index: 5; } .navigationSideFlyout .mainNav li ul.level2 li ul.level3 a { color: #000; } .navigationSideFlyout .mainNav li ul.level2 li ul.level3 a:hover { color: #999; } /* main side navigation, no flyout (change float to RIGHT/LEFT to change #navigation position) NOTE: Width is specified along with BODY/COLUMNS up top.*/ .navigationSideStatic #navigation { float: left; padding: 5px 10px; margin: 10px 15px 10px 10px; font-size: 1.2em; } .navigationSideStatic .mainNav { padding: 5px 0; margin-bottom: 20px; } .navigationSideStatic .mainNav li { border-bottom: 1px solid #999; } .navigationSideStatic .mainNav li a { color: #333; display: block; padding: 5px; } .navigationSideStatic .mainNav li a:hover, .navigationSideStatic .mainNav li a:focus { background: #efefef; } .navigationSideStatic .mainNav li ul.level2 { margin: 0 0 5px 25px; list-style: square; color: #999; } .navigationSideStatic .mainNav li ul.level2 li { font-size: .8em; border-bottom: 1px solid #bdbdbd; } /* hiding additional subnavs */ .navigationSideStatic .mainNav li ul.level3, .navigationSideStatic .mainNav li ul.level4, .navigationSideStatic .mainNav li ul.level5 { display: none; } /* showing 3rd level nav when its parent is selected */ .navigationSideStatic .mainNav li ul.level2 li.selectedPage ul { display: block; margin-left: 15px; } /* SUBNAVIGATION SCHEMES */ /* sub navigation, top, static (no flyout) */ .subNavigationTop #subNavigation { background: #c7c7c7; padding: 5px 10px 5px 0; border: 1px solid #fff; border-width: 1px 0; } .subNavigationTop #subNavigation ul li { display: inline; padding: 0 15px; font-size: .9em; } /* PAGE CONTENT AREA */ #contentContainer { min-height: 320px; height: auto !important; height: 320px; background: #fff; } #contentContainer #mainColumn { padding: 10px 15px; } /* bread crumb trail */ #breadCrumb { font-size: .9em; color: #888; padding: 4px 15px; } /* featured item */ #featuredItem { padding: 5px 0; } .featuredFull { width: 100%; text-align: center; } .featuredHalf { width: 50%; } /* SITE FOOTER/NAVIGATION */ #footer { clear: both; background: #a4a4a4; padding: 8px 10px 8px 0; border-top: 3px solid #DADADA; border-bottom: 3px solid #DADADA; font-size: .9em; } #footer .bottomNav li { display: inline; padding: 0 15px; } #footer .bottomNav li a { color: #f5f1ee; } /* copyright info */ #copyright { text-align: center; font-size: .8em; padding: 5px 0 25px 0; }