/* Theme Name: Hive HR Consulting Version: 0.1 Author: hot glue media Author URI: http://hotgluemedia.com Many thanks to Mr. Elliot Jay Stocks (http://elliotjaystocks.com) for his work on Starkers (http://elliotjaystocks.com/starkers), and Kematzy's Blueprint CSS generator (http://kematzy.com/blueprint-generator/). */ /* ------INDEX----- I. CSS Reset II. General Styles A. Overall Styles B. Headers C. Paragraphs D. Links E. CMS Elements F. Lists G. Images H. Forms III. Grid Styles [not in use] IV. Header Styles V. Menu Styles VI. Content Styles A. General Content B. jQuery Accordian VII. Footer Styles VIII. Imagemap Styles */ /* I. CSS Reset */ a, abbr, acronym, address, applet, b, big, blockquote, body, caption, center, cite, code, dd, del, dfn, dl, div, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var { background: transparent; border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } :focus { outline: 0; } blockquote, q { quotes: none; } body { line-height: 1; } del { text-decoration: line-through; } ins { text-decoration: none; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } /* II. General Styles */ /* A. Overall Styles */ body { font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 62.5%; line-height: 1.2; } #container { margin: 0 auto; height: 100%; width: 950px; } /* B. Headers */ h1, h2, h3, h4, h5 { font-weight: bold; padding-top: 10px; } h1 { font-size: 2.2em; } h2 { font-size: 2.0em; } h3 { font-size: 1.8em; } h4 { font-size: 1.6em; } h5 { font-size: 1.4em; } h6 { font-size: 1.4em; font-weight: normal; } /* C. Paragraphs */ p { font-size: 1.4em; padding: 10px 0; text-align: justify;} /* D. Links */ a:link, a:visited { color: #574e25; text-decoration: none; } a:hover, a:active, a:focus { color: #574e25; text-decoration: underline; } /* E. CMS Elements */ blockquote { background: #fdefc2; color: #574e25; font-style: italic; margin: 0 30px 10px 30px; padding: 0 10px; } cite, cite a, cite p { } strong { font-weight: bold; } em { font-style: italic; } .alignright { float: right; } .alignleft { float: left; } img#wpstats{display:none;} /* F. Lists */ li ul, li ol { padding: 5px; } ul, ol {font-size: 1.4em; margin-left: 10px; padding: 10px 0 10px 15px; } ul { list-style-type: disc; } ol { list-style-type: decimal; } /* G. Images */ img.alignleft { float: left; padding-right: 10px; } img.alignright { float: right; padding-left: 10px; } img.centered, img.aligncenter { display: block; margin-left: auto; margin-right: auto; } /* H1. Forms - HGM */ #hgmform { display: block; float: left; margin-left: 0; width: 300px; } #hgmform input { border: 1px solid #ccc; margin: 10px 10px 0 0; width: 200px; } #hgmform textarea { border: 1px solid #ccc; height: 90px; margin: 10px 10px 0 0; width: 200px; } #hgmform textarea:focus, #hgmform input:focus { border: 1px solid #213f94; } #hgmform input.submit-button { float: right; margin-left: 10px; position: relative; right: 25px; width: 100px; } label { float: left; font-size: 1.4em; margin-right: 25px; padding-top: 5px; position: relative; top: 10px; text-align: left; width: 125px; } /* H1. Forms - cForms */ .cform { margin:10px auto 0 auto; width: 390px; } .cform .cf_hidden { background: none; border: none; display: none; margin: 0; padding: 0; } .cform input.checkbox { float: left; width: auto; } .cform legend { color: #666; margin-left: 10px; padding: 0 2px; } ol.cf-ol { margin: 0; padding: 0; } ol.cf-ol li { background: none; line-height: 1.3em; list-style-type: none; margin: 5px 0; padding: 0; text-align: left; } ol.cf-ol li.textonly { background: #f0f0f0; letter-spacing: 1px; margin: 10px 0; padding: 5px 0; text-align: center; } .cform label { display: inline-block; font-size: 1em; line-height: 1.3; margin: -10px 10px 0 0; text-align: right; vertical-align: top; width: 100px; } .cform label span { display: block; width:100px; /* must be the same as above!*/ } .cform label.rightfix { text-align: left; } .cform label.checkfix { text-align: left; margin-bottom: 15px; width: 300px; } label.cf-before { margin:4px 10px 0 0; } label.cf-after { margin:4px 15px 0pt 6px; text-align:left; width:115px; } label.cf-after span { display: block; width:115px; } label.cf-group-after { margin:3px 4px 0 2px; text-align:left; width:72px; } label.cf-group-after span { display: block; width:72px; } .cform input, .cform textarea, .cform select { padding: 3px; background: #f9f9f9; border: 1px solid #888; vertical-align: top; } .cform input:hover, .cform textarea:hover, .cform select:hover { background: #cedddf; } .cform input:focus, .cform textarea:focus, .cform select:focus { background:#f3f8f8; } .cform textarea, .cform input { width:180px; } .cform select { padding:2px 0; width:188px; /* attempt to have equal length */ } .cform select.cfselectmulti { height:7.5em; } .cform textarea { font-size: 1em; overflow:auto; } ol.cf-ol li.cf-box-title { font-weight:bold; letter-spacing:1px; padding:8px 0 0 100px; /* check with label 'width' incl. */ } .cform input.cf-box-a, .cform input.cf-box-b { background: none; border: none; height: 22px; margin:2px 0 0 0; width:14px; } .cform input.cf-box-a { margin-left:100px; /* check with label 'width' incl. */ } ol.cf-ol li.cf-box-group { margin:10px 0pt 0px; padding-left: 100px; } span.reqtxt, span.emailreqtxt { font-size: 1em; margin: 3px 0 0 3px; vertical-align: top; } p.cf-sb { margin-right: 105px; padding: 0; text-align: left; } .cform input.backbutton, .cform input.resetbutton, .cform input.sendbutton { background: #ccc; border: 1px solid #adadad; border-left-color: #ececec; border-top-color: #ececec; font-size: 0.8em; margin: 10px 0 0 110px; padding: 5px; width: 100px; } .cform input.resetbutton, .cform input.backbutton { padding: 5px 1em; width: auto; } ol.cf-ol li.cf_li_err { background: #ffffdf; border-color:#df7d7d; border-style:solid; border-width:1px 0pt; margin:5px 0; padding:5px 0; } ol.cf-ol li ul.cf_li_text_err { color: #333; height:1%; margin-left: 100px; min-height:1%; padding: 0; } ol.cf-ol ul.cf_li_text_err li { background:#ffdfdf; font-weight:bold; list-style:none; margin:0 0 2px; padding-left:15px; text-indent:0; } ol.cf-ol ul.cf_li_text_err li:before { content:''; } label.secq, label.seccap { margin-bottom: 4px; vertical-align:text-bottom; } input.secinput { vertical-align:text-bottom; } div.cf_info { color: #000; font-size: 1.3em; line-height: 1.3em; margin: 10px auto; padding: 10px 15px; width: 380px; } div.cf_info ol { margin: 0; padding: 5px 15px 0 30px; } div.cf_info ol li { margin: 2px 0; padding: 1px 0; } div.cf_info a { color: #ad2929; text-decoration: underline; } div.success { background: #f7f7f7; color: #444; display: block; } div.success { background: #ffdfdf; border-color: #dfd7d7; border-style: solid; border-width: 1px 0pt; display: block; } div.waiting { background: #f9f9f9; color: #aaa; display: block; } .cform .cf_error { color:#ad2929; border:1px solid #ad2929; } div.mailerr { display:block; } .mailerr, .cform .cf_errortxt { color:#ad2929; } .cform input.cf_upload { background: #f9f9f9; border:1px solid #888888; width:220px; } * html .cform fieldset { position: relative; margin-top:15px; padding-top:25px; } * html .cform legend { position:absolute; top: -10px; left: 10px; margin-left:0; } *+html .cform fieldset { position: relative; margin-top:15px; padding-top:25px; } *+html .cform legend { position:absolute; top: -10px; left: 10px; margin-left:0; } * html ol.cf-ol, * html ol.cf-ol li, * html span.reqtxt, * html span.emailreqtxt { display: inline-block; /*for ie6*/ } *+html .cform label, *+html ol.cf-ol, *+html ol.cf-ol li, *+html span.reqtxt, *+html span.emailreqtxt { display: inline-block; /*for ie7*/ } * html img.captcha { margin-bottom:1px; } *+html img.captcha { margin-bottom:1px; } /* III. Grid Styles [not in use] */ /* IV. Header Styles */ #header { background: transparent url(img/headbkg.png); height: 150px; width: 950px; } #header h1 { margin: 0; padding: 0; } .logo { background: transparent; float: left; height: 150px; width: 264px; } .swooshtop { background: transparent url(img/swooshtop.png) no-repeat; float: left; height: 200px; margin-top: -83px; width: 950px; } /* V. Menu Styles */ #menu { display: inline; float: left; margin: -10px 0 0 370px; } #menu ul { display: inline; height: 150px; float: left; list-style-type: none; margin: 0; padding: 0; width: 540px; } #menu li, #menu li a { display: inline; float: left; height: 150px; margin: -77px 0 0 0; padding: 0; width: 90px; } .menu1 { background: url(img/menu1.png); height: 150px; margin: 0; width: 90px; } .menu2 { background: url(img/menu2.png); height: 150px; margin: 0; width: 90px; } .menu3 { background: url(img/menu3.png); height: 150px; margin: 0; width: 90px; } .menu4 { background: url(img/menu4.png); height: 150px; margin: 0; width: 90px; } .menu5 { background: url(img/menu5.png); height: 150px; margin: 0; width: 90px; } .menu6 { background: url(img/menu6.png); height: 150px; margin: 0; width: 90px; } #menu li:hover a { background-position: 0 -150px; display: inline; margin: -77px 0 0 0; } #menu a:hover { background-position: 0 -150px; display: inline; float: left; height: 150px; margin: -77px 0 0 0; padding: 0; white-space: normal; width: 90px; } #menu li:hover { display: inline; float: left; height: 150px; margin: -77px 0 0 0; padding: 0; width: 90px; } #menu h2 { display: inline; margin: 0; padding: 0; } #menu span { display: none; } /* VI. Content Styles */ /* A. General Content */ .contentbkg { background: url(img/honeycomb.png) repeat-y; height: auto; overflow: hidden; width: 950px; } .contentbodyl { float: left; margin: -100px 0 -2000px 60px; min-height: 200px; padding: 15px 0 2000px 0; width: 395px; } .contentbodyl h1, .contentbodyl h2, .contentbodyl h3, .contentbodyl h4, .contentbodyl h5, .contentbodyl h6 { text-align: right; width: 395px; } .contentbodyr { float: left; margin: -240px 60px -2000px 100px; padding: 15px 0 2060px 0; position: relative; width: 330px; } .contentbodyq { float: left; margin: -100px 0 -2000px 60px; min-height: 200px; padding: 15px 0 2000px 0; width: 825px; } .contentbodyq ol { margin-top: -15px; } .contentbodyq li { padding-top: 10px; } .contentbodyq h1, .contentbodyq h2, .contentbodyq h3, .contentbodyq h4, .contentbodyq h5, .contentbodyq h6 { text-align: right; width: 395px; } /* B. jQuery Accordian */ .accordian { width: 390px; } .accordian h3 { background: transparent url(img/arrow-square.gif) no-repeat right -51px; cursor: pointer; margin: 0; padding: 3px 0; text-align: left; width: 100%; } .accordian h3:hover { background-color: #fef7ed; } .accordian h3.active { background-position: right 5px; } .accordian p { background: #fef7ed; margin: 0; padding: 10px 20px 20px; display: none; } /* VII. Footer Styles */ #footer { clear: both; float: left; height: auto; width: 950px; } .hivethrive { background: transparent url(img/hivethrive.png) no-repeat; height: 162px; width: 950px; } .swooshbott { background: transparent url(img/swooshbott.png) no-repeat; float: right; height: 150px; margin-top: -150px; width: 200px; } .copy { background: #eabe08; font-size: 1.1em; padding-bottom: 15px; text-align: center; } /* VIII. Imagemap Styles */ /* A. Honeycomb Infographic */ #imagemapcontainer { background-image: url(img/services-map.png); height: 296px; width: 325px; position: absolute; top: 25px; } #imagemap a { height: 89px; position: absolute; top: 450px; text-decoration: none; width: 78px; } #imagemap a span { visibility: hidden; } a#orgdev { background-image: url(img/orgdev-off.png); height: 89px; left: 83px; top: -1px; width: 78px; } a#strategic { background-image: url(img/strategic-off.png); height: 89px; left: 164px; top: -1px; width: 78px; } a#legal { background-image: url(img/legal-off.png); height: 89px; left: 42px; top: 69px; width: 78px; } a#performance { background-image: url(img/performance-off.png); height: 89px; left: 123px; top: 69px; width: 78px; } a#staffing { background-image: url(img/staffing-off.png); height: 89px; left: 204px; top: 69px; width: 78px; } a#benefits { background-image: url(img/benefits-off.png); height: 89px; left: 2px; top: 139px; width: 78px; } a#employee { background-image: url(img/employee-off.png); height: 89px; left: 83px; top: 139px; width: 78px; } a#training { background-image: url(img/training-off.png); height: 89px; left: 164px; top: 139px; width: 78px; } a#policies { background-image: url(img/policies-off.png); height: 89px; left: 245px; top: 139px; width: 78px; } a#leadership { background-image: url(img/leader-off.png); height: 89px; left: 42px; top: 209px; width: 78px; } a#recognition { background-image: url(img/recognition-off.png); height: 89px; left: 123px; top: 209px; width: 78px; } a#harassment { background-image: url(img/harassment-off.png); height: 89px; left: 204px; top: 209px; width: 78px; } a#orgdev:hover { background-image: url(img/orgdev-on.png); border: none; } a#strategic:hover { background-image: url(img/strategic-on.png); border: none; } a#legal:hover { background-image: url(img/legal-on.png); border: none; } a#performance:hover { background-image: url(img/performance-on.png); border: none; } a#staffing:hover { background-image: url(img/staffing-on.png); border: none; } a#benefits:hover { background-image: url(img/benefits-on.png); border: none; } a#employee:hover { background-image: url(img/employee-on.png); border: none; } a#training:hover { background-image: url(img/training-on.png); border: none; } a#policies:hover { background-image: url(img/policies-on.png); border: none; } a#leadership:hover { background-image: url(img/leader-on.png); border: none; } a#recognition:hover { background-image: url(img/recognition-on.png); border: none; } a#harassment:hover { background-image: url(img/harassment-on.png); border: none; } /* B. Hive Infographic */ #hivecontainer { background-image: url(img/value-map.png); height: 299px; width: 214px; position: absolute; top: 25px; } #hivemap a { height: 50px; position: absolute; top: 450px; text-decoration: none; width: 325px; } #hivemap a span { visibility: hidden; } #hivemap a span { visibility: hidden; } a#trusted { background-image: url(img/trusted-off.png); height: 51px; left: 47px; top: 97px; width: 129px;} a#clientcenter { background-image: url(img/clientcenter-off.png); height: 46px; left: 23px; top: 149px; width: 176px; } a#practices { background-image: url(img/practices-off.png); height: 51px; left: 12px; top: 195px; width: 200px; } a#valueladen { background-image: url(img/valueladen-off.png); height: 50px; left: 0; top: 250px; width: 214px; } a#trusted:hover { background-image: url(img/trusted-on.png); border: none; } a#clientcenter:hover { background-image: url(img/clientcenter-on.png); border: none; } a#practices:hover { background-image: url(img/practices-on.png); border: none; } a#valueladen:hover { background-image: url(img/valueladen-on.png); border: none; }