/* Site Layout Styles * Updated: 3 Mar 09 @ 9.00am * Author: Matthew Holmes * ---------------------------------------------*/ /* -- TOC --------------------------------------- 1. Colors 2. Reset 3. Fix Floats 4. Links 5. Typography 6. Structure */ /* -- COLORS ---------------------------------------*/ /* green = #006347 */ /* blue = #001e44 */ /* grey = #666666 */ /* black = #000 */ /* -- RESET ---------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font-family: inherit; list-style: none; } table { border-collapse: collapse; border-spacing: 0; } /* -- FIX FLOATS ---------------------------------------*/ .clearfix:after { display: block; clear: both; height: 0; content: "."; visibility: hidden; } * html .clearfix { height: 1%; } *+ html .clearfix { height: 1%; } /* -- LINKS ---------------------------------------*/ a { color: #006347; text-decoration: underline; } a:hover { text-decoration: none; } /* -- TYPOGRAPHY ---------------------------------------*/ h2 { margin: 0 0 1.5em; font-size: 1.1em; } p { margin: 0 0 1em; } /* -- STRUCTURE ---------------------------------------*/ body { background-repeat: no-repeat; background-position: top center; color: #666666; font: 62.5%/1.6 "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; } /* - container */ #container { position: relative; z-index: 99; width: 1010px; margin: 0 auto; } /* -- login */ p#login { text-align: right; margin: 0; padding: 12px 32px 0; } p#login img { width: 44px; height: 22px; vertical-align: middle; padding: 0 0 0 5px; } /* -- header */ #header { height: 134px; margin: 12px 0 0; background: url(../images/header-bg.png) no-repeat; } /* --- logo */ #header h1 { float: left; width: 200px; padding: 18px 0 0 32px; } #header h1 span { position: absolute; left: -999em; } /* extra links */ #header p#extras { display: none; } /* --- search */ #header form { float: right; width: 257px; height: 34px; margin: 32px 0 0; padding: 0 33px 0 0; background: url(../images/search.gif) no-repeat; } #header form input { float: left; width: 204px; margin: 0; padding: 12px 5px 0; border: 0; background: none; color: #006347; font-style: italic; font-weight: bold; } #header form button { float: left; width: 43px; height: 34px; margin: 0; border: 0; background: none; cursor: pointer; text-indent: -999em; } /* --- navigation */ #header ul { position: relative; float: right; width: 729px; height: 40px; z-index: 99; margin: 28px 0 0; padding: 0 5px 0 0; } #header li { position: relative; float: left; height: 40px; margin: 0; padding: 0; } #header li a { float: left; display: block; height: 40px; background-image: url(../images/bg-nav2.gif); text-indent: -999em; } /* ---- navigation off state */ #header li a.about { width: 90px; background-position: 0 0; } #header li a.membership { width: 112px; background-position: -90px 0; } #header li a.publications { width: 119px; background-position: -202px 0; } #header li a.pd { width: 214px; background-position: -321px 0; } #header li a.careers { width: 87px; background-position: -535px 0; } #header li a.events { width: 102px; background-position: -622px 0; } /* ---- navigation over state */ #header li a.about:hover { width: 90px; background-position: 0 -40px; } #header li a.membership:hover { width: 112px; background-position: -90px -40px; } #header li a.publications:hover { width: 119px; background-position: -202px -40px; } #header li a.pd:hover { width: 214px; background-position: -321px -40px; } #header li a.careers:hover { width: 87px; background-position: -535px -40px; } #header li a.events:hover { width: 102px; background-position: -622px -40px; } /* ---- navigation on state */ #header li a.about-on { width: 90px; background-position: 0 -40px; } #header li a.membership-on { width: 112px; background-position: -90px -40px; } #header li a.publications-on { width: 119px; background-position: -202px -40px; } #header li a.pd-on { width: 214px; background-position: -321px -40px; } #header li a.careers-on { width: 87px; background-position: -535px -40px; } #header li a.events-on { width: 102px; background-position: -622px -40px; } /* ---- navigation hover state */ #header li:hover a.about, #header li.hover a.about { background-position: 0 -40px; } #header li:hover a.membership, #header li.hover a.membership { background-position: -90px -40px; } #header li:hover a.publications, #header li.hover a.publications { background-position: -202px -40px; } #header li:hover a.pd, #header li.hover a.pd { background-position: -321px -40px; } #header li:hover a.careers, #header li.hover a.careers { background-position: -535px -40px; } #header li:hover a.events, #header li.hover a.events { background-position: -622px -40px; } /* ---- navigation dropdown */ #header ul ul { position: absolute; left: -999em; width: 214px; height: auto; margin: 0; padding: 0 0 5px; background: url(../images/nav-bg2.png) bottom no-repeat; } #header ul li:hover ul, #header ul li.hover ul { top: 40px; left: 0; z-index: 99; } #header ul li:hover li ul, #header ul li.hover li ul { top: -999em; } #header ul li li:hover ul, #header ul li li.hover ul { top: 0; left: 214px; } #header ul li li:hover li ul, #header ul li li.hover li ul { top: 0; left: -999em; border: 1px solid #000; } #header ul li li { width: 214px; height: auto; margin: 0; border-bottom: 1px solid #56b094; background: #18a284; } #header ul li li a { float: none; height: auto; padding: 4px 15px; color: #fff; font-size: 1.1em; background: #18a284; text-decoration: none; text-indent: 0; } #header ul li li:hover a, #header ul li li.hover a { color: #000; } #header ul li li:hover li a, #header ul li li.hover li a { color: #fff; } #header ul li li li:hover a, #header ul li li li.hover a { color: #000; } /* -- banner */ #banner { height: 200px; background: url(../images/banner-bg.png) no-repeat; } /* -- content */ #content { min-height: 300px; height: auto !important; height: 300px; background: url(../images/content-bg.png) no-repeat; font-size: 1.1em; } /* --- columns, welcome - membership - events */ #content .col { float: left; width: 266px; padding: 35px 35px 10px; } /* ---- column headers */ h2#welcome { position: relative; width: 158px; height: 17px; } h2#welcome span { position: absolute; width: 100%; height: 100%; background: #fff url(../images/title-welcome.gif) no-repeat; } h2#membership { position: relative; width: 166px; height: 17px; } h2#membership span { position: absolute; width: 100%; height: 100%; background: #fff url(../images/title-membership.gif) no-repeat; } h2#industry { position: relative; width: 100%; height: 17px; padding: 1.5em 0 0; border-top: 1px solid #e7e7e7; } h2#industry a { position: relative; top: -1px; z-index: 99; padding: 0 0 0 61px; } h2#industry span { position: absolute; z-index: 2; width: 100%; height: 100%; background: #fff url(../images/title-industry-news.gif) no-repeat; } h2#events { position: relative; width: 100%; height: 17px; } h2#events a { position: relative; top: -1px; z-index: 99; padding: 0 0 0 50px; color: #001e44; font-size: 10px; font-weight: normal; text-transform: lowercase; } h2#events span { position: absolute; z-index: 2; width: 100%; height: 100%; background: #fff url(../images/title-events.gif) no-repeat; } h2#news { position: relative; width: 100%; height: 17px; padding: 1.5em 0 0; border-top: 1px solid #e7e7e7; } h2#news a { position: relative; top: -1px; z-index: 99; padding: 0 0 0 40px; } h2#news a.more { top: -3px; padding: 0 0 0 10px; color: #001e44; font-size: 10px; font-weight: normal; text-transform: lowercase; } h2#news span { position: absolute; z-index: 2; width: 100%; height: 100%; background: #fff url(../images/title-news.gif) no-repeat; } p#forum { border-top: 1px solid #e7e7e7; padding: 15px 0 0; } p#wiki { border-top: 1px solid #e7e7e7; padding: 15px 0 0; } /* ---- general */ #content .col li { padding: 0 0 1em 2em; background: url(../images/item-icon.gif) 0 4px no-repeat; } p.more { text-align: right; } p.more a { color: #001e44; text-transform: lowercase; } #random_banner { position: absolute; top: 0; width: 100%; margin: 160px 0 0; z-index: 1; } #random_banner div { width: 1376px; height: 280px; margin: 0 auto; } #tooltip { position: absolute; z-index: 3000; background: #fff; padding: 5px; background: #fefffe url(../images/hud-bg.gif) bottom repeat-x; border: 1px solid #cac8c8; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } #tooltip h3, #tooltip div { margin: 0; } #tooltip.pretty { color: #a7a3a3; text-transform: lowercase; } /* --- hud */ div#eianz_hud { position: fixed; width: 98.7%; height: 50px; padding: 0; left: 8px; bottom: -2px; background: #fefffe url(../images/hud-bg.gif) bottom repeat-x; border: 1px solid #cac8c8; border-bottom: 0; z-index: 7000; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } div#eianz_hud ul li { float: left; color: #666666; padding: 15px 20px 2px 17px; margin: 0; height: 41px; background: url(../images/hud-divider.gif) right top repeat-y; font-size: 1.2em; } div#eianz_hud ul li.right { float: right; padding: 15px 12px 2px 15px; background-position: left top; } div#eianz_hud a { font-weight: bold; } /* ---- welcome blurb */ p.blurb { color: #006347; font-size: 1.2em; } /* -- footer */ #footer { width: 940px; padding: 25px 35px; background: url(../images/footer-bg.png) no-repeat; } #footer p { float: right; } #footer p.copyright { float: left; padding-top: 5px; } /* -- THICKBOX STYLES ---- do not touch */ #TB_overlay { position: fixed; z-index: 100; top: 0px; left: 0px; height: 100%; width: 100%; } .TB_overlayMacFFBGHack { background: url(../images/macFFBgHack.png) repeat; } .TB_overlayBG { background-color: #000; filter:alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; } #TB_window { position: fixed; background: #ffffff; z-index: 102; color:#000000; display: none; text-align: left; top: 50%; left: 50%; } #TB_window img#TB_Image { display: block; margin: 15px 0 0 15px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-top: 1px solid #666666; border-left: 1px solid #666666; } #TB_caption { height: 25px; padding: 7px 30px 10px 25px; float: left; } #TB_closeWindow { height: 25px; padding: 11px 25px 10px 0; float: right; } #TB_closeAjaxWindow { padding: 7px 10px 5px 0; margin-bottom: 1px; text-align: right; float: right; } #TB_ajaxWindowTitle { float: left; padding: 7px 0 5px 10px; margin-bottom: 1px; } #TB_title { background-color: #e8e8e8; height: 27px; } #TB_ajaxContent { clear: both; background: #ffffff; padding: 0; overflow: auto; text-align: left; line-height: 1.4em; } #TB_ajaxContent.TB_modal { padding: 0; } #TB_ajaxContent p { padding: 5px 0px; } #TB_load { position: fixed; display: none; height: 13px; width: 208px; z-index: 103; top: 50%; left: 50%; margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */ } #TB_HideSelect { z-index: 99; position: fixed; top: 0; left: 0; background-color: #fff; border: none; filter:alpha(opacity=0); -moz-opacity: 0; opacity: 0; height: 100%; width: 100%; } #TB_iframeContent { clear: both; border: none; margin-bottom: -1px; margin-top: 1px; _margin-bottom: 1px; } #TB_window div { position: relative; width: 500px; height: 250px; background: url(../images/login-bg.gif) no-repeat; } #TB_window div form { padding: 119px 0 0 125px; width: 296px; height: 97px; background: url(../images/login-form.gif) 125px 119px no-repeat; } #TB_window div form li { height: 35px; padding: 0; margin: 0; } #TB_window div form label { float: left; width: 82px; height: 35px; margin: 0; padding: 0; text-indent: -999em; } #TB_window div form input { float: left; width: 204px; margin: 0; padding: 5px 5px 0; border: 0; background: none; } #TB_window div form button { float: left; width: 44px; height: 22px; margin: 0 0 0 82px; padding: 0; border: 0; background: none; cursor: pointer; text-indent: -999em; } #TB_window div p { position: absolute; bottom: 36px; left: 267px; margin: 0; padding: 0; } /*#TB_window div form label { float: left; width: 82px; height: 27px; padding: 0; text-indent: -999em; } #TB_window div form input { float: left; width: 204px; margin: 0; padding: 8px 5px; border: 0; background: none; }*/