/*============================================================================ [Screen Stylesheet] ============================================================================== Project: Ann Arbor Ypsilanti Regional Chamber of Commerce Version: 1.0 Last Modified: 05/21/2010 (A2Y logo redesign) Assigned to: Meili Chen Primary use: Page Layouts - one & two (three) colum layouts ==============================================================================*/ /*============================================================================= [Table of Contents] =============================================================================== A. Global Reset B. Global Formatting C. Layout 1. Body 1.1. Skip to content / a#skip 2. Layout wrapper / div#wrapper 2.1. Header / div#header 2.1.1 Logo / h1 2.1.2 Utility navigation / ul#utility 2.1.3 Global navigation / div#globalNav 2.1.3.1 Global nav dropdown menu / ul.dropdown 2.2. Middle section / div#middle 2.2.1 Middle shadow layout top / div#shadowTop 2.2.2 Middle shadow layout middle / div#shadowMiddle 2.2.3 Middle body / div#middleBody 2.2.3.1 Primary column / div#primeCol 2.2.3.1.1 Banner / div#banner 2.2.3.1.2 page title /#pageTitle 2.2.3.1.3 Breadcrumbs 2.2.3.1.4 Main content 2.2.3.1.4.1 Features & Hightlights / div#features 2.2.3.1.4.2 News / div#news 2.2.3.1.4.3 Chamber Blogs / div#blog 2.2.3.1.4.4 Sponsors / div#sponsors 2.2.3.2 Second column / div#secondCol 2.2.3.2.1. search / div#search 2.2.3.2.2 upcoming events / div#events 2.2.3.2.3 View Chamber Event link / div.vidwLink 2.2.3.2.4 sub/local navigation /div#subNav 2.2.3.2.5 View Calendar & Join Meber buttons / div.sidebarButton 2.2.3.3 Third column / div#thirdCol 2.2.3.4 Bottom Banner / div#bottomBanner 2.2.4 Middle shadow layout bottom/ div#shadowBottom 2.3 Footer / div#footer 2.3.1 Footer navigation / ul#footNav 2.3.2 Footer address / div#address ===============================================================================*/ /*============================================================================== [Color codes] ================================================================================ #000 - black (footer address, local nav text) #b3b3ac - grey ( box borders, image borders) #b0b0a9 - grey (global navigation & dropdown menu borders) #afafa7 - grey (features & highlights images' borders) #0f2635 - dark blue (body text) #0066cc - blue (default links ) #85aeaf - blue (blue bar borders) #85adaf - blue (breadcrumbs background) #0072bc - blue (footer nav links) #194044 - dark blue (footer nav link hover) #97c3df - light blue (body background) #ae1313 - red (default link over) #8a1020 - dark red (global navigation on the stage) #630512 - dark red (dropdown menu background hover) #ffd478 - orange (utility on the stage) #fdfefe - light yellow (dropdown menu text) #ffd478 - yellow (dropdown menu text hover) #b3b3ac - green (green bar borders) #c6e5bc - light green (local nav li background) #e2f2dd - light green (local nav li hover & 2nd level background) #e2f2dd - light green (local nav 2nd level hover background) #fff - white: (wrapper background, utility text, global navs text, breadcrumbs text, section bars text, local nav lines) ==================================================================================*/ /*================================================================================= A. GLOBAL RESET ===================================================================================*/ body {font: 62.5%/1.4 arial,verdana,geneva,lucida,sans-serif; background: #fff; color: #000; margin: 0; padding: 0;} p, h1, h2, h3, h4, h5, h6, fieldset, form, label, input, textarea, legend, dl, dt, dd, table, caption, th, td, blockquote, cite { margin: 0; padding: 0; font-size: 1em;} ul, ol, li, ul *, ol * {font-size: 1em;} input, textarea {font-family: arial,verdana,geneva,lucida,sans-serif;} textarea {overflow: auto;} table {border-collapse: collapse; margin-bottom: 2em;} td, th {padding: 0.1em 1em; border: 1px solid #999; } img {border: 0;} acronym, abbr {border-bottom: 1px dotted; cursor: help;} cite {font-style: normal;} :focus {outline: 0;} /*==================================================================================== B. GLOBAL FORMATTING =====================================================================================*/ .clear {clear: both;} .left {float: left; display: inline;} .right {float: right; display: inline;} .alignright {text-align:right;} .center {text-align: center;} .block {display: block;} a {color: #0066cc; text-decoration: none; font-weight: bold;} a:hover {color: #ae1313;} h1 {font-size: 1.3em;} h2 {font-size: 1.2em;} h3 {font-size: 1.1em; } h4 {font-size: 1em;} h5 {font-size: 0.9em;} h6 {font-size: 0.8em;} h1, h2, h3, h4, h5, h6 {margin-bottom: 1em;} .nav, .nav ul {margin: 0; padding: 0; list-style: none;} div.nav ul li:last-child, div.nav ul li.last-child {background: none !important; background-image: none !important;} .lastChild {background-image: none !important;} .greenBar{clear: both; font: 1.3em georgia,"Times New Roman",Times, serif; font-weight: bold; background: #7c96a3 url(/images/background/green_bar_bg.gif) repeat-x 100% 100%; padding: 5px 10px; border: 1px solid #a2c494; margin-bottom: 1em; } .greenBar a {color: #fff; padding-right: 25px; background: url(/images/misc/arrow_white.gif) no-repeat 100% 50%;} .greenBar a:hover {background: url(/images/misc/arrow_yellow.gif) no-repeat 100% 50%;} .blueBar {clear: both; font: 1.3em georgia,"Times New Roman",Times, serif; font-weight: bold; border: 1px solid #85aeaf; margin-bottom: 16px; border-bottom: none; color: #fff; padding: 5px 15px; background: #91cbd1 url(/images/background/title_bar_bg.gif) no-repeat 100% 100%;} .blueBar a {color: #fff; padding-right: 25px; background: url(/images/misc/arrow_white.gif) no-repeat 100% 50%;} .blueBar a:hover {background: url(/images/misc/arrow_red.gif) no-repeat 100% 50%;} /*====================================================================================== C. LAYOUT * =======================================================================================*/ /*-------------------------------------------------------------------------------------------- 1. Body / body ----------------------------------------------------------------------------------------------*/ body {background: #97c3df url(/images/background/body_bg.gif) repeat-x 0 0; } /* 1.1. Skip to content / a#skip */ #skip {position: absolute; top: -1000px;} /*------------------------------------------------------------------------------------------ 2. Layout Wrapper ---------------------------------------------------------------------------------------------*/ #wrapper {color: #0f2635; font-size: 1.2em; margin: 0 auto; width: 964px;} #wrapper p {margin-bottom: 1em!important;} /*......................................................................... 2.1. Header / div#header ...........................................................................*/ #header {width: 100%; background: url(/images/background/header_bg.gif) no-repeat; height: 120px;} /* 2.1.1 logo / h1 */ #header h1 {height: 113px; width: 285px; margin: 0; padding: 0; background: url(/images/background/logo.gif) no-repeat; text-indent: -9000px; float: left;} #header h1 a {display: block; height: 113px; width: 285px; background: url(/images/background/logo.gif) no-repeat;} /*2.1.2 utility / #utility */ #utility {text-align: center; font: 1em arial, verdana, sans-serif; float: right; width: 670px; padding: 0; margin: 25px auto 20px auto; } #utility a {color: #fff; font-weight: bold; padding: 0 20px;} #utility ul li {display: inline; background: url(/images/navs/utility_navs_divider.gif) no-repeat 100% 50%;} #utility .current a, #utility a:hover{color: #ebc351;} #utility ul li.current a {font-weight: bold;} /* 2.1.3. Global navigation / div#globalNav */ #globalNav {font-size: 1.08em; float: right; width: 653px; border: 1px solid #a0b2b9; margin: 17px 5px 10px auto; background: #a90719 url(/images/navs/global_nav_off.gif) repeat-x 100% 0%; display: block;} html >body #globalNav {margin-right: 10px;} #globalNav ul a {display: block;} #globalNav ul li {float: left; /* otherwise there are gaps between each nav item */ padding-right: 1px; /* so that the divider can be displayed */ background: url(/images/navs/global_navs_divider.gif) no-repeat 100% 50%; } #globalNav ul li a{color: #fff; font-weight: bold; text-align: center; padding: 4px 16px; background: #a90719 url(/images/navs/global_nav_off.gif) repeat-x 100% 0; } #globalNav ul li a:hover, #globalNav ul li.current a , #globalNav ul li.current a:hover, #globalNav ul li:hover a {background: #77000e url(/images/navs/global_nav_on.gif) repeat-x 100% 0%; } #globalNav ul li.sfhover a{background: #8a1020 url(/images/navs/global_nav_on.gif) repeat-x 100% 0;} /* 2.1.3.1 Global nav dropdown menu / ul.dropdown */ .dropdown{position: absolute; left: -999em; width: 200px; border: 1px solid #b0b0a9; margin: 0px 0px 0px -1px !important; border-top: none; z-index: 100; overflow: hidden; float: none; filter:alpha(opacity=100); opacity: 1; -moz-opacity:1; } #globalNav ul li ul.dropdown li {float: none; margin: 0!important; display: inline; padding: 0; margin: 0;} #globalNav ul li:hover ul, #globalNav li.sfhover ul { left: auto; } #globalNav ul li ul.dropdown li a {font: normal .9em arial,verdana,sans-serif; color: #fdfefe; text-align: left; background: #77000e; padding: 6px 10px 6px 25px; border-top: 1px solid #b0b0a9; line-height: 120%; } #globalNav ul li ul.dropdown a:hover { color: #efbb2a; background: #630512 url(/images/navs/dropdown_on.gif) no-repeat 10px 10px;} /*............................................................................... 2.2. Middle section / div#middle ................................................................................. */ #middle {overflow: hidden; width: 100%; margin: 0px 0 10px 0; background: transparent; } html>body #middle {margin-top: -7px;} /* 2.2.1 Middle shadow layout top / div#shadowTop */ html>body #shadowTop {background: url(/images/background/shadow_top.png) no-repeat left top; height: 10px;} /* 2.2.2 Middle shadow layout middle/ div#shadowMiddle */ #shadowMiddle {background: transparent; } html>body #shadowMiddle {background: url(/images/background/shadow_middle.png) repeat-y 0 0;} /* 2.2.3 Middle body / div#middleBody */ #middleBody {background: #fff; margin: 0 10px; padding: 15px;} /* 2.2.3.1 Primary column / div#primeCol */ #primeCol {float: right; display: inline; } .oneCol #primeCol {float: none; width: 100%;} .twoCol #primeCol {float: right; width: 636px;} .threeCol #primeCol {float: left; width: 413px; margin-left: 275px;} /* 2.2.3.1.1 Banner / div#banner */ #banner {margin: 0 0 10px; clear: both;} #banner, #banner .cycle {position: relative; width: 636px; height: 347px; overflow: hidden; text-align: right;} #banner .prev {cursor: pointer;position: absolute; top: 96px; left: 566px; z-index: 20;} #banner .pause {cursor: pointer;position: absolute; top: 96px; left: 583px; z-index: 20;} #banner .next {cursor: pointer;position: absolute; top: 96px; left: 600px; z-index: 20;} #banner img {display: block;} #banner .cycle img {width: 636px; height: 258px;} .ads, .pic {margin-bottom: 10px; height: 79px; position: relative; overflow: hidden;} /*#banner .pic {position: relative; width: 100%;}*/ /*don't remove width 100%, - for ie6 bug*/ /*2.2.3.1.2page title /#pageTitle */ #pageTitle {color: #0584bd; font: 1.6em georgia,"Times New Roman",Times, serif; font-weight: bold; margin-bottom: .7em;} /* 2.2.3.1.3. Breadcrumbs */ #breadcrumbs {background: #028bcb url(/images/background/blue_bar_bg.gif) repeat-x 100% 100%; margin-bottom: 20px; padding: 3px 7px; color: #fff; font-size: 1em; border: 1px solid #85adaf;} #breadcrumbs a {color: #fff; font-weight:} /* 2.2.3.1.4. Main content */ #mainContent {padding: 0 0 15px 10px;} #home #mainContent {padding:0;} .oneCol #mainContent {} .twoCol #mainContent {} .threeCol #mainContent {float: right; display: inline;} #mainContent img.left {margin-right: 25px; margin-bottom: 10px;} #mainContent img.right {margin-left: 25px; margin-bottom: 10px;} /* IRM lightbox/popup */ p.popbutton {text-align: center; clear: both;} p.popbutton a {font-size: 1.1em; border: 3px double #fff; margin: 0pt auto; padding: 2px 4px; color: #fff; display: block; background-color: #0096a5; width: 50%; text-decoration: none;} #backgroundPopup{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:100%; width:100%; top:0; left:0; background:#000; border:1px solid #cecece; z-index:1; } p.popbutton1 {text-align: center; clear: both;} p.popbutton1 a {font-size: 1.1em; border: 3px double #fff; margin: 0pt auto; padding: 2px 4px; color: #fff; display: block; background-color: #0096a5; width: 50%; text-decoration: none;} #backgroundPopup1{ } /* 2.2.3.1.4.1 - 2.2.3.1.4.4 features, news, blogs, sponsors section bars */ #features h2, #news h2, #blogs h2, #sponsors h2 {clear: both; font: 1.3em georgia,"Times New Roman",Times, serif; font-weight: bold; border: 1px solid #85aeaf; margin-bottom: 16px; border-bottom: none; color: #fff; padding: 5px 15px; background: #007bc4 url(/images/background/title_bar_bg.gif) no-repeat 100% 100%;} h2 a, #features h2 span, #news h2 span, #blogs h2 span, #sponsors h2 span {color: #fff; padding-right: 25px; background: url(/images/misc/arrow_white.gif) no-repeat 100% 50%;} #features h2 a, #news h2 a, #blogs h2 a, #sponsors h2 a {color: #fff; padding-right: 25px; background: url(/images/misc/arrow_white.gif) no-repeat 100% 50%;} #features h2 a:hover, #news h2 a:hover, #blogs h2 a:hover, #sponsors h2 a:hover {background: url(/images/misc/arrow_red.gif) no-repeat 100% 50%;} /* 2.2.3.1.4.1 Features & Hightlights / div#features */ #features {margin-bottom: 16px;} #features .highlight {float: left; width: 195px; margin-right: 23px;} .oneCol .highlight {width: 30%;} #features img {display: block; margin-bottom: 12px;} #features .last {margin-right: 0;} #features h3 {font: 1.1em georgia,"Times New Roman",Times, serif; font-weight: bold; color: #0066cc; margin-bottom: 1em;} /* 2.2.3.1.4.2 News / div#news */ #news {margin-bottom: 16px;} #news ul {float: left; margin: 0px 25px 0 0; padding: 0; width: 430px;} #news .content {margin: 20px 0;} #news ul li {list-style: none; background: url(/images/misc/arrow_grey.gif) no-repeat 0 4px; padding-left: 18px; /* padding-bottom: 16em;*/ padding-bottom: 10em; margin-left: 0px; line-height: 130%;} #news img { float: left; border: 1px solid #c6c6c0; padding: 2px; margin-right: 10px;} #news .next {float: right; width: 38px; cursor: pointer;} #news .next img { display: inline; margin: 0; padding: 0; border: 0;} #news .cycle {height: 15em; overflow: hidden;} #news .news_more {clear: both;} /* 2.2.3.1.4.3 Chamber Blogs / div#blogs*/ #blogs{margin-bottom: 16px;} #blogs .photo {float: left; margin-right: 12px; display: block; width: 70px; } #blogs .detail {float: left; width: 45%; margin-right: 3%;} #blogs h3 {font: 1em georgia,"Times New Roman",Times, serif; font-weight: bold; color: #0066cc; margin-bottom: 1em;} /* 2.2.3.1.4.4 Sponsors / div#sponsors*/ #sponsors {margin-bottom: 16px;} #sponsors img {margin: 10px; width: auto; text-align: center; vertical-align: top;} /* search results */ #search_results .search_query {background: #dff0da; padding: 3px; text-align: right;} #search_results .search_results {padding-bottom: 13px;} #search_results .search_results a {font-weight: bold;} #search_results .search_lastmod {color: #999;} /* sitemap */ #sitemap ul {padding-left:15px; list-style-type: none; font-weight: bold; padding-bottom: 10px; } #sitemap ul a {font-seize: 1.4em; font-weight: bold; font-size: 13px;} #sitemap ul li ul {border-bottom:1px solid #666666; margin-bottom:10px; padding-left:30px; list-style-type: square; font-weight: 400; padding-bottom: 10px;} #sitemap ul li ul a {font-size: 1em; font-weight: 400;} #sitemap ul li ul li {border:none;} #sitemap ul li ul li ul {border-bottom:none; list-style-type: circle; } #sitemap ul li ul li ul li ul {list-style-type: disc;} /* Form code from old site */ form table td, form table th {border: none;} .msg {color: #CC0000; font-weight: bold;} input.textbox {width:250px;} input.checkbox {width:auto;} input.radio {width:auto;} input.submit {width:auto;} textarea.textarea {width:350px; height:100px;} textarea.textarea_wide {width:450px; height:100px;} select.select {width:auto;} .email_form_confirm td {border-bottom:1px solid #000;} /* 2.2.3.2 Second column / div#secondCol */ #secondCol {float: left; display: inline; width: 258px;} .oneCol #secondCol {display: none;} .twoCol #secondCol {} .threeCol #secondCol {float: left; margin-left: -688px;} /* 2.2.3.2.1. search / div#search */ #search {padding: 2px; border: 1px solid #b3b3ac; margin-bottom: 15px;} #search form{background: #efba29 url(/images/background/orange_box_bg.gif) repeat-x 100% 100%; padding: 10px 15px;} form#search {margin-bottom: 0px !important;} #search h3 {font: 1.35em georgia,"Times New Roman",Times, serif; font-weight: bold; color: #000; margin-bottom: 1em;} #search #query {background: #fff; border: 1px solid #666; padding: 1px 1px 1px 2px; width: 180px; margin: 0px 5px 5px 0px;} #search .goButton {vertical-align: middle;} /* 2.2.3.2.2 upcoming events / div#events */ #events h2 {clear: both; font: 1.3em georgia,"Times New Roman",Times, serif; font-weight: bold; border: 1px solid #b3b3ac; color: #fff; padding: 5px 15px; margin: 0; background: #aedb9f url(/images/background/green_bar_bg.gif) repeat-x 100% 100%;} #events h2 a {color: #fff; background: url(/images/misc/arrow_white.gif) no-repeat 100% 50%; padding-right: 25px;} #events h2 a:hover {background: url(/images/misc/arrow_red.gif) no-repeat 100% 50%;} #events .content { padding: 15px 10px;} #events .list, #events .content ul {margin: 0; padding: 0; line-height: 1.1em;} #events .list li, #events .content li {list-style: none; margin: 0 10px 15px 0; padding: 0 0 5px 0; border-bottom: 1px dotted #303030;} #events img {margin: 3px 0; display: block;} /* 2.2.3.2.3 View Chamber Event link / div.vidwLink */ .viewLink {font-size: 1.2em; background: #aedb9e url(/images/background/green_bar_bg.gif) repeat-x 100% 100%; padding: 5px 10px; border: 1px solid #a2c494; margin-bottom: 1em; } .viewLink a {color: #fff; padding-right: 25px; background: url(/images/misc/arrow_white.gif) no-repeat 100% 50%;} .viewLink a:hover {background: url(/images/misc/arrow_red.gif) no-repeat 100% 50%;} /* 2.2.3.2.4 sub/local navigation /div#subNav */ #subNav {background: #fff; padding: 2px; border: 1px solid #b3b3ac; margin-bottom: 15px;} #subNav h2 {padding: 5px 9px; margin: 0; border-bottom: 1px solid #fff; color: #000; background: url(/images/navs/sub_title_bg.gif) repeat-x 100% 100%;} #subNav h2 a {color: #000; padding-right: 25px; background: url(/images/misc/arrow_white.gif) no-repeat 100% 50%;} #subNav ul {padding-bottom: 27px; background: url(/images/navs/sub_title_bg.gif) repeat-x 100% 100%;} #subNav ul a {border-bottom: 1px solid #fff;} #subNav li a {color: #000; font-weight: normal; display: block; background: #c6e5bc; padding: 4px 5px 4px 25px;} #subNav li a:hover, #subNav .current a {color: #000; font-weight: bold; background: #e2f2dd url(/images/navs/sub_nav_on.gif) no-repeat 7px 50%; } #subNav ul li {display: inline; line-height: 120%;} #subNav ul ul {padding: 0; background: #e2f2dd; border-bottom: none;} #subNav li li a{padding-left: 35px;} #subNav .current li a, #subNav .current .current li a, #subNav .current .current .current li a, #subNav li li a {background: #e2f2dd; font-weight: normal;} #subNav li li li a, #subNav li li li li a{background: #ECF5E9; font-weight: normal;} #subNav .current .current li a {color: #2c4c21; background: #ecf5e9} #subNav .current .current a, #subNav li li a:hover, #subNav .current li a:hover {color: #2c4c21; background: #ecf5e9 url(/images/navs/sub_sub_nav_on.gif) no-repeat 25px 50%; font-weight: bold;} #subNav li li li a {padding-left: 55px;} #subNav .current .current .current li a {color: #2c4c21; background: #ecf5e9} #subNav .current .current .current a, #subNav li li li a:hover, #subNav .current li li a:hover {color: #2c4c21; background: #ecf5e9 url(/images/navs/sub_sub_nav_on.gif) no-repeat 45px 50%; font-weight: bold;} #subNav li li li li a {padding-left: 72px;} #subNav .current .current .current .current a, #subNav .current .current .current li a:hover {font-weight: bold;} /* 2.2.3.2.5 View Calendar & Join Member buttons / div.sidebarButton */ .marketing img {padding: 2px; border: 1px solid #b3b3ac; margin-bottom: 10px;} /* 2.2.3.2.6. Enewsletter / div#newsletter */ #newsletter {padding: 2px; border: 1px solid #b3b3ac; margin-bottom: 15px;} #newsletter form{background: #efba29 url(/images/background/orange_box_bg.gif) repeat-x 100% 100%; padding: 10px 15px;} form#newsletter {margin-bottom: 0px !important;} #newsletter h3 {font: 1.35em georgia,"Times New Roman",Times, serif; font-weight: bold; color: #000; margin-bottom: .7em;} #newsletter #keyword {background: #fff; border: 1px solid #666; padding: 1px 1px 1px 2px; width: 180px; margin: 0px 5px 5px 0px;} #newsletter .goButton {vertical-align:middle;} /* 2.2.3.2.7 Connect with us online div.socialMedia */ .socialMedia {display: block; background: url(/images/misc/social_media_bg.jpg) no-repeat 0 0; margin-bottom: 15px; width: 258px; height: 82px;} .socialMedia .link {overflow: hidden; padding: 38px 5px 10px 100px;} .socialMedia .link img {border: 0; display: inline; margin-right: 10px;} /* 2.2.3.3Third column / div#thirdCol */ #thirdCol {float: right; display: inline; width: 205px;} .oneCol #thirdCol {display: none;} .twoCol #thirdCol {display: none;} .threeCol #thirdCol {float: right; } /* 2.2.3.4 Bottom Banner / div#bottomBanner */ #bottomBanner {text-align: right; margin: 15px 0;} /* 2.2.4 Middle shadow layout bottom/ div#shadowBottom */ #shadowBottom {height: 10px; background: transparent; } html>body #shadowBottom {background: url(/images/background/shadow_bottom.png) no-repeat left bottom; } /*................................................................................ 2.3 Footer / div#footer .................................................................................*/ #footer {margin: 10px 10px 15px 10px;} /* 2.3.1 Footer navigation / ul#footNav */ #footNav ul {font-size: 1em; width: 100%; text-align: center; } #footNav ul li {display: inline; padding: 0 15px; background: url(/images/navs/foot_navs_divider.gif) no-repeat 100% 50%;} #footNav ul li a { color: #0072bc; margin: 0; font-weight: bold; } #footNav ul li a:hover {color:#023d73; } #footNav ul li.current a {font-weight: bold; color:#af0114;} /* 2.3.2 Footer address / div#address */ #footer #address {text-align: center; font-size: 1em; margin: 15px 0; color: #011843;}