/* Creative Counseling of Chicago VERSION 1.0 Made by Static bburwell@thisisstatic.com CONTENTS ---------- 1. RESET 2. BODY 3. TYPE STYLES 4. NAVIGATION 4.1 nav styles 4.2 nav highlighting 5. HEADER 6. LAYOUT 7. CONTENT 8. FOOTER 9. GLOBAL STYLES ------------------- */ /* 1. RESET ===================================================================== =====================================================================*/ * { margin:0 0 0 0; padding:0 0 0 0; } /* 2. BODY ===================================================================== =====================================================================*/ body { font-size:62.5%; color:#646464; background:url(../_images/back_body.gif) repeat-x left top; } #wrapper { width:950px; margin:0 auto; padding:0; } /* 3. TYPE STYLES ===================================================================== =====================================================================*/ body, li h2 { font-family:helvetica, arial, sans-serif; } .sub_nav, .related, .contact { font-family:Times, Times New Roman, serif; } p { font-size:1.4em; line-height:1.6em; padding:0 0 10px 0; } p.small { font-size:1.2em; line-height:1.6em; padding:6px 0 6px 0; } p.intro { font-size:2.1em; line-height:1.3em; color:#0b2944; } p.intro { font-size:1.6em; line-height:1.3em; color:#0b2944; } p.contact { font-size:1.5em; line-height:1.3em; padding-top:6px; } p.request { font-size:1.5em; line-height:1.3em; padding:6px 0 0 0; color:#0b2944; } h1 { font-size:2.2em; font-weight:normal; margin-bottom:10px; color:#0b2944; } #case_studies h1 { margin-bottom:12px; } h2 { font-size:1.0em; line-height:1.3em; color:#0b2944; font-weight:bold; text-transform:uppercase; letter-spacing:2px; margin-bottom:10px; } h3 { font-size:3.0em; font-weight:normal; margin-bottom:4px; color:#0b2944; height:48px; } h4 { font-size:2.2em; font-weight:normal; margin-bottom:10px; color:#0b2944; } h5 { font-size:7.2em; height:20px; } h6 { } a { text-decoration:none; color:#727272; } a:link { text-decoration:none; } a:visited { text-decoration:none; } a:hover { text-decoration:none; color:#0b2944; } ul { list-style:none; } ul li { font-size:1.4em; line-height:1.6em; padding-left:12px; background:url(../_images/icon_dash.gif) no-repeat left 12px; } /* 4. HEADER + NAVIGATION ===================================================================== =====================================================================*/ div#header { width:950px; height:171px; } div#logo a { width:231px; height:150px; margin:6px 0 0 100px; padding-top:6px; float:left; display:block; } div#logo a:hover img { border-top:none; padding-top:2px; } /* MainNav */ ul#main_nav { float:left; width:606px; float:left; } ul#main_nav li { float:left; display:inline; font-size:18px; padding:0; background:none; } ul#main_nav li a { float:left; height:20px; padding:130px 16px 18px 16px; display:block; text-indent:-8000px; text-decoration:none; color:#727272; } ul#main_nav li a:hover { border-bottom:2px solid #0b2944; } ul#main_nav li.home a { width:39px; background:url(../_images/spritemap_mainnav.gif) no-repeat -2px 130px; } ul#main_nav li.products a { width:67px; background:url(../_images/spritemap_mainnav.gif) no-repeat -73px 130px; } ul#main_nav li.about a { width:42px; background:url(../_images/spritemap_mainnav.gif) no-repeat -174px 130px; } ul#main_nav li.case_studies a { width:92px; background:url(../_images/spritemap_mainnav.gif) no-repeat -248px 130px; } ul#main_nav li.contact a { width:78px; background:url(../_images/spritemap_mainnav.gif) no-repeat -370px 130px; } ul#main_nav li.request a { width:95px; background:url(../_images/spritemap_mainnav.gif) no-repeat -482px 130px; } ul#main_nav li.home a:hover { background-position:-1212px 130px; } ul#main_nav li.products a:hover { background-position:-1283px 130px; } ul#main_nav li.about a:hover { background-position:-1384px 130px; } ul#main_nav li.case_studies a:hover { background-position:-1458px 130px; } ul#main_nav li.contact a:hover { background-position:-1580px 130px; } ul#main_nav li.request a:hover { background-position:-1692px 130px; border-bottom:none; } /* SubNav */ ul.sub_nav { padding-top:10px; width:204px; border-top:1px solid #bababa; } ul.sub_nav li { font-size:1.6em; line-height:1.4em; background:none; } ul.sub_nav li a { padding-left:12px; text-decoration:none; color:#646464; font-style:italic; } ul.sub_nav li a:hover { color:#0b2944; } ul.sub_nav2 { padding:6px 0; margin-bottom:4px; } ul.sub_nav2 li { margin:0; line-height:14px; } ul.sub_nav2 li a { padding:0 0 0 23px; text-decoration:none; color:#646464; font-size:12px; line-height:14px; font-style:italic; background:url(../_images/icon_dash2.gif) no-repeat 12px 7px; } ul.sub_nav2 li a:hover { color:#0b2944; } /* Related */ ul.related { width:204px; padding:14px 0 0 12px; border-top:1px solid #bababa; } ul.related li { font-size:1.2em; line-height:1.5em; background:none; } ul.related li h2 { font-size:10px; } ul.related li a { text-decoration:none; color:#646464; font-style:italic; } ul.related li a:hover { color:#0b2944; } /* 6. LAYOUT ===================================================================== =====================================================================*/ div#contentHolder { width:950px; margin:20px 0 50px 10px; } div.content_700 { float:left; width:700px; } div.content_700b { float:left; width:680px; border-top:1px solid #bababa; padding:15px 0 0 20px; margin-top:20px; } div.content_540 { float:left; width:520px; border-top:1px solid #bababa; margin:20px 0 0 0; padding:15px 0 0 20px; } div.content_540b { float:left; width:520px; padding:0 0 0 0; } div.content_380 { float:left; width:320px; margin-left:20px; margin-top:10px; } div.content_380b { float:left; width:380px; margin-left:20px; margin-top:52px; padding:10px 0 0 20px; border-top:1px solid #bababa; } div.content_320 { float:left; width:320px; margin-left:20px; margin-top:10px; } div.content_300 { float:left; width:300px; margin-bottom:15px; } div.content_220 { float:left; width:220px; margin-left:20px; margin-top:10px; } div.content_200 { float:left; width:200px; margin-top:10px; } div.content_140 { float:left; width:140px; margin-left:20px; } div.sidebar { float:left; width:220px; margin:0 14px 0 0; } /* Home */ div#content_left { width:450px; float:left; margin:20px 0 0 0; padding:20px 10px 0 0; } div#content_right { width:220px; float:left; margin:20px 0 0 20px; } /* Products */ div#intro_box { background-color:#f0f6ef; padding:20px 20px 0 20px; margin:52px 0 0 0; border-top:1px solid #bababa; } /* About */ #about div#contentHolder { height:510px; background:url(../_images/back_about.jpg) no-repeat 360px 250px; } #about div#product_wheel { height:400px; width:430px; float:left; } /* Contact */ .google_map { border:1px solid #CCC; } /* 8. FOOTER ===================================================================== =====================================================================*/ div#test { width:400px; height:10px; background-color:#003; display:block; } div#footer_line { border-top:1px solid #bababa; } div#footer { width:950px; margin:10px auto 0 auto; } div#footer p { font-size:1.1em; line-height:2.0em; } div#footer a { margin:0 10px 0 0; } /* 9. GLOBAL STYLES ===================================================================== =====================================================================*/ /* Layout */ .margin-top0 { margin-top:0; } .margin-top10 { margin-top:10px; } .margin-top20 { margin-top:20px; } .margin-top40 { margin-top:40px; } .margin-bottom10 { margin-bottom:10px; } .margin-bottom20 { margin-bottom:15px; } .margin-left10 { margin-left:10px; } .margin-right6 { margin-right:6px; } .padding-left20 { padding-left:20px; } .padding-left40 { padding-left:40px; } .float_left { float:left; } .float_right { float:right; } .float_image { float:left; padding:4px 10px 0 0; } .float_image2 { float:left; padding:2px 6px 0 0; } .clear { clear:both; } .border_top { border-top:1px solid #bababa; padding-top:10px; } .border_bottom { border-bottom:1px solid #bababa; margin-bottom:10px; padding-bottom:4px; } .link_callout { color:#d7581e; font-size:1.2em; padding:0 0 0 8px; background:url(../_images/icon_arrow_orange.png) no-repeat left 4px; } .link_callout:hover { background:url(../_images/icon_arrow_blue.png) no-repeat left 4px; } .link_callout2, .link_callout3 { color:#d7581e; font-size:1.2em; padding:0 0 0 14px; display:block; margin-top:10px; background:url(../_images/icon_enlarge.gif) no-repeat left top; } .link_callout2:hover, .link_callout3:hover { background:url(../_images/icon_enlarge2.gif) no-repeat left top; } .light_grey { color:#c4c4c4; } .orange { color:#d7581e; } a img { border-top:2px solid #fff; } a:hover img { border-top:2px solid #d7581e; } a. img.icon { border-top:none; } a:hover img.icon { border-top:none; }