/* ---------------------
Title: Kuberre Systems - main screen stylesheet
Filename: screen.css
Author: One Pica Inc, Boston MA
Table of Contents:
Searchstring (Section Name) Description
=General (General Styles): Set font sizes, Page backgrounds, link behaviors, etc
=Master (Master #container Styles): Placing, sizing, styling the main container
=Branding (Branding Styles): Logos, taglines, branding info
=Nav (Navigation Styles): The navigation bar; internal and external
=Forms (Form Styles) Set appearance of forms, inputs, buttons, etc
=Multicol (Multi-Column Styles): The cases where the content needs to be in multiple columns
=Content (Content Styles): The main content of the page
...Further style sections go here...
=Footer (Credit/Footer Styles): The footer
=Uni (Universal Styles): Classes and elements that apply throughout ('clear', 'blue', etc)
Common Color Table:
Main Logo/PgBorder Blue #2D4963;
HeaderImage BG/NavMainBorder #1F82AF;
Dark BG Color #2C3640;
Bluegrey Main Content BG #424A53;
Footer/Main Nav BG Grey #777;
Page Top Border blue #347194;
CTA Box Border #1F272E;
Thanks To:
CSS structure/commenting: http://www.huddletogether.com/2006/02/16/practical-web-development-tips/
Markup structure: http://www.stuffandnonsense.co.uk/archives/whats_in_a_name_pt2.html
Stylesheet searchstring flags: http://www.stopdesign.com/log/2005/05/03/css-tip-flags.html
---------------------- */
/* =General
----------------------
General Styles applied to 'normalize' things
Notes:
'Em' styling generally following (http://www.clagnut.com/blog/348/) from this point 10px=1em, 11px=1.1em, etc
100.01% font size from (http://www.communitymx.com/content/article.cfm?page=5&cid=FAF76)
Beginning "global reset" styles, to clear troublesome browser defaults,
are based on (http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/)
Note that most form elements are omitted; style those separately, further down.
---------------------- */
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,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
line-height: 1;
font-family: inherit;
text-align: left;
vertical-align: baseline;
}
a img, :link img, :visited img {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol, ul {
list-style: none;
}
/* Begin Actual Site Styles */
html {
font-size: 100.01%; /* Ensures font consistency across browsers */
height: 100%;
}
body {
font-size: 10px; /* Sets base font-size for browsers that resize text correctly */
line-height: 1.4; /* Sets base leading for lines of text */
background: #fff url(../images/bg/body_bg_curve.gif) 50% -2px no-repeat;
font-family: Arial, sans-serif;
height: 100%;
}
p {margin-bottom: 1em; line-height: 1.4}
div {line-height: 1.4}
input, select, th, td {font-size: 1em}
h1 {font-size: 2em} /* 24px */
h2 {font-size: 1.5em} /* 18px */
h3 {font-size: 1.25em} /* 15px */
h4 {font-size: 1em} /* 12px */
h5 {font-size: 1em} /* 12px */
h6 {font-size: 1em} /* 12px */
strong {font-weight: bold}
em {font-style: italic}
sup {font-size: 50%; vertical-align: super;}
/* Basic link styles */
a, a:link {
color: #FFEE99;
text-decoration: none;
}
a:visited {
color: #E8D266;
}
a:hover, a:active {
color: #FFDD33;
text-decoration: underline;
}
a:focus {
outline: none; /* Removes dotted outline in Firefox */
}
/* =Master
----------------------
Master Container
Notes:
margin: 0px auto; centers the container horizontally except in IE5, which is fixed in the body tag
---------------------- */
#container {
position: relative;
margin: 0px auto;
padding: 0 0 10px 0;
width: 740px;
font-size: 1.2em; /* 12px (based on value from body) */
text-align: left; /* Normalize alignment; unfix all browsers from fix in IE stylesheet */
}
/* Skip link: This is the very first link anywhere on the page; by tabbing to it or hitting accesskey 2, a user can skip the header/navigation of a page and go directly to the page content. It is normally 'hidden' by being positioned far, far off the page; bringing it into focus with Tab makes it visible. */
#skiplink a {
position: absolute;
top: -1000px;
left: -2000px;
}
#skiplink a:focus, #skiplink a:active {
position: absolute;
margin: 0;
top: 0;
left: 0;
display: block;
padding: 0;
background: #000;
color: #fff;
font-weight: bold;
}
#skiplink a:hover {
}
/* =Branding
----------------------
Branding styles: Usually the logo and tagline
Notes:
Image replacement: Usually Phark Method (http://www.mezzoblue.com/tests/revised-image-replacement/)
---------------------- */
#branding {
padding: 30px 0 17px;
}
#branding-logo {
cursor: pointer;
width: 180px;
height: 43px; /* Set dimensions once here, and use 100% for all dimensions in both rules below */
}
#branding-logo h1 {
text-indent: -5000px;
overflow: hidden;
background: transparent url(../images/branding/kuberre_logo_web.gif) 0 0 no-repeat;
width: 100%;
height: 100%;
line-height: 1;
padding: 0;
margin: 0;
}
#branding-logo h1 a {
display: block;
width: 100%;
height: 100%;
}
#branding-tagline {
width: ;
height: ; /* See branding-logo above */
}
#branding-tagline h2 {
/* Uncomment this for Image Replacement -
the following rules set Image Replacement and neutralize h2's default behavior
text-indent: -5000px;
overflow: hidden;
background: ;
width: 100%;
height: 100%; */
line-height: 1;
padding: 0;
margin: 0.5em 0; /* Change this */
}
#branding-info {
}
/* =Nav
----------------------
Navigation styles
Notes:
Navigation belongs in an UL tag with as the markup scheme.
Keep each of the below #elements as divs, and put the UL inside them
If there's a Left-Hand navigation, use #nav-section, give it a width & float it left
---------------------- */
#nav {
}
#nav-main {
border: solid 1px #1F82AF;
border-top: none 0px;
background: #fff;
padding: 0 1px 1px;
position: absolute;
right: 0;
top: 0;
width: 27em;
}
#nav-main ul {
background: #777;
padding: 0 0 0 0.3em;
margin: 0;
}
#nav-main li {
float: left;
display: inline;
width: auto;
padding: 0;
margin: 0;
background: transparent url(../images/bg/nav-main_bg_divider.gif) right top no-repeat;
}
#nav-main .last {
background: none;
}
#nav-main a {
display: block;
padding: 0.7em 12px 0.75em;
color: #fff;
margin: 0 1px 0 0;
font-size: 0.92em;
font-weight: bold;
text-decoration: none;
}
#nav-main a:link, #nav-main a:visited {
}
#nav-main a:hover, #nav-main a:active {
background: transparent url(../images/nav/nav_main_bg_over.gif) left bottom repeat-x;
}
#nav-main a.current:link, #nav-main a.current:visited, #nav-main a.current:hover, #nav-main a.current:active {
background: transparent url(../images/nav/nav_main_bg_curr.gif) left bottom repeat-x;
}
#nav-solutions {
border: solid 1px #2D4963;
border-top: solid 1px #347194;
background: #fff;
padding: 1px 0 0 0;
}
#nav-solutions ul {
padding: 0 0 1px 0;
background: #2D4963 url(../images/bg/nav-solutions_bg_grad.gif) 0 0 repeat-x;
border-left: solid 1px #DDDEDF;
border-right: solid 1px #DDDEDF;
border-bottom: solid 1px #bbb;
}
#nav-solutions li {
position: relative;
float: left;
display: inline;
padding: 0 3px 0 0;
margin: 0;
background: transparent url(../images/bg/nav-solutions_bg_divider.gif) right top no-repeat;
}
#nav-solutions li.last {
padding: 0;
background: transparent;
}
#nav-di {
width: 157px;
}
#nav-hpc {
width: 222px;
}
#nav-pma {
width: 218px;
}
#nav-c {
width: 129px;
}
#nav-solutions a {
display: block;
color: #FFFBE5;
text-decoration: none;
font-size: 0.92em;
font-weight: bold;
line-height: 1.1;
padding: 0.8em 0 0;
height: 1.9em;
text-align: center;
}
#nav-di a {
background: #A67442 url(../images/nav/nav_di_bg_init.gif) left bottom repeat-x;
padding: 0.25em 0 0.55em;
}
#nav-hpc a {
background: #BF9760 url(../images/nav/nav_hpc_bg_init.gif) left bottom repeat-x;
}
#nav-pma a {
background: #A66C42 url(../images/nav/nav_pma_bg_init.gif) left bottom repeat-x;
padding: 0.25em 0 0.55em;
}
#nav-c a {
background: #BFA673 url(../images/nav/nav_c_bg_init.gif) left bottom repeat-x;
}
#nav-solutions a:hover, #nav-solutions a:active {
color: #fff;
}
#nav-di a:hover, #nav-di a:active {
background: #C28242 url(../images/nav/nav_di_bg_over.gif) left bottom repeat-x;
}
#nav-hpc a:hover, #nav-hpc a:active {
background: #D7A35E url(../images/nav/nav_hpc_bg_over.gif) left bottom repeat-x;
}
#nav-pma a:hover, #nav-pma a:active {
background: #C17742 url(../images/nav/nav_pma_bg_over.gif) left bottom repeat-x;
}
#nav-c a:hover, #nav-c a:active {
background: #D3B472 url(../images/nav/nav_c_bg_over.gif) left bottom repeat-x;
}
#nav #nav-solutions a.current:link, #nav #nav-solutions a.current:visited, #nav #nav-solutions a.current:hover, #nav #nav-solutions a.current:active {
background: #375B7E url(../images/nav/nav_solu_bg_curr.gif) left bottom repeat-x;
}
/* Popup Divs */
.spop {
position: absolute;
z-index: 50;
top: 2.4em;
left: -1px;
display: block;
padding: 0.2em 0 0 0;
}
li.last .spop {
left: -131px;
}
.spop-inner {
background: #2D4963 url(../images/bg/cta-box_bg_top.gif) 0 0 repeat-x;
border: solid 1px #bbb;
color: #d9d9d9;
width: 260px;
}
.spop-inner p {
padding: 0.6em 14px 0.8em;
margin: 0;
}
#nav #nav-solutions .spop-inner a {
display: block;
padding: 0.5em 14px 0.5em 25px;
border-top: solid 1px #617588;
height: auto;
margin: 0;
text-align: left;
font-style: italic;
font-weight: bold;
font-size: 1.33em;
line-height: 1;
}
#nav #nav-solutions .spop-inner a:link, #nav #nav-solutions .spop-inner a:visited {
color: #FFEE99;
}
#nav #nav-solutions .spop-inner a:hover, #nav #nav-solutions .spop-inner a:active {
color: #FFDD33;
}
#nav #nav-solutions #spop-di a {
background: #7C3200 url(../images/nav/nav_learnmore_di_bg.gif) 14px 50% no-repeat;
}
#nav #nav-solutions #spop-hpc a {
background: #A16615 url(../images/nav/nav_learnmore_hpc_bg.gif) 14px 50% no-repeat;
}
#nav #nav-solutions #spop-pma a {
background: #7C2600 url(../images/nav/nav_learnmore_pma_bg.gif) 14px 50% no-repeat;
}
#nav #nav-solutions #spop-c a {
background: #A17C31 url(../images/nav/nav_learnmore_c_bg.gif) 14px 50% no-repeat;
}
#nav-section {
}
#nav-external {
}
#nav li.clear {
clear: left;
display: block;
float: none;
background: none;
}
/* =Forms
----------------------
Form styles
Notes:
A should always enclose every label-input (or label-select) pair.
Widths are in % to start, so that they scale, but they are the attributes most likely to change.
Remember -- the IE stylesheet has different percentage widths to start.
---------------------- */
form {
display: block;
margin: 0;
padding: 0;
width: 100%;
}
fieldset {
border: 0px solid;
padding: 0;
margin: 0 0 1.4em 0;
}
form p {
display: block;
clear: both;
margin: 0 0 0.4em 0;
padding: 0;
}
form label {
display: inline;
float: left;
width: 35%;
padding: 0 5% 0 0;
margin: 0;
}
form input, form select, form textarea {
margin: 0;
padding: 0;
width: 59.2%; /* CLOSE to full width; use pixels for the real thing */
font-size: 1em;
border: solid 1px #999;
border-bottom-color: #ccc;
background-color: #fff;
font-family: Arial, sans-serif;
}
form input {height: 1.3em}
form select {width: 59.5%; height: 1.5em} /* Selects are not the same as inputs */
form textarea {height: 6em}
/* Radio buttons */
form input.radio, form input.radiobtn {
text-align: left;
width: 1.3em;
margin: 0.3em 0.2em 0 0;
padding: 0;
border: none;
background: none;
}
form .radiotext {
margin: 0 1em 0 0;
}
/* Check boxes */
form input.ckbx, form input.checkbox {
text-align: left;
width: 1.2em;
margin: 0.3em 0.2em 0 0;
padding: 0;
border: none;
background: none;
}
form p.indent { /* For buttons or text that need to align with inputs/selects */
margin-left: 40%;
}
form p.xspa { /* "extra space after" */
margin-bottom: 2.0em;
}
form .req, form .required {
color: red;
}
form input:focus {
/* however we want the focused field to look */
}
form input.submit, button { /* There are lots of default values to fix */
border: 3px double #999;
border-top-color: #ccc;
border-left-color: #ccc;
padding: 1px 2px;
background: #f6f6f6;
color: #555;
font-size: 0.9em;
font-weight: bold;
height: auto;
width: auto;
cursor: pointer;
font-family: inherit;
}
form input.submit:hover, button:hover { /* IE6 can't see these, too bad */
color: #fff;
background-color: #ff0000;
}
form input.submit:active, button:active { /* Button 'feedback' behavior */
border: 3px double #ccc;
border-top-color: #999;
border-left-color: #999;
}
/* =Multicol
----------------------
Multi-Column Content styles
Notes:
These columns should be used for text within #content.
Values are in percentages to start off -- remember that the IE stylesheet has different values.
If you need "pixel-perfect", you'll have to stop using percentages and use actual pixels
---------------------- */
.twoColumnLayout {
width: 47%;
float: left;
clear: none;
}
.twoColumnLeft {
margin-right: 5%;
}
.threeColumnLayout {
width: 30%;
float: left;
clear: none;
}
.threeColumnLeft {
margin-right: 4%;
}
.threeColumnMiddle {
margin-right: 4%;
}
.threeColumnRight {
margin-right: 0;
}
/* =Headings
---------------------- */
h3 {
}
h4 {
font-weight: bold;
font-size: 1.1em;
color: #FFEE99;
margin: 0 0 0.3em 0;
line-height: 1.4;
}
h5 {
font-weight: bold;
font-size: 1.0em;
color: #f3f3f3;
margin: 0 0 0.5em 0;
line-height: 1.4;
}
h6 {
font-weight: bold;
font-size: 1.0em;
color: #d9d9d9;
margin: 0;
line-height: 1.4;
}
/* =Content
----------------------
Main Content styles
Notes:
Font-size is inherited, so some math will be necessary to size child elements up or down correctly
---------------------- */
#content {
font-size: 1em; /* Inherits 12px from #container */
color: #d9d9d9;
border-left: solid 1px #2D4963;
border-right: solid 1px #2D4963;
padding: 0 0 0 0;
background: #2C3640 url(../images/bg/content_bg_full.gif) 0 0 repeat-y;
}
#pghdr {
height: 91px;
}
#about #pghdr {
background: #1F82AF url(../images/headers/hdrimg_about.jpg) 0 0 no-repeat;
}
#management #pghdr {
background: #1F82AF url(../images/headers/hdrimg_management.jpg) 0 0 no-repeat;
}
#advisors #pghdr {
background: #1F82AF url(../images/headers/hdrimg_advisors.jpg) 0 0 no-repeat;
}
#careers #pghdr {
background: #1F82AF url(../images/headers/hdrimg_careers.jpg) 0 0 no-repeat;
}
#contact #pghdr {
background: #1F82AF url(../images/headers/hdrimg_contact.jpg) 0 0 no-repeat;
}
#terms #pghdr {
background: #1F82AF url(../images/headers/hdrimg_terms.jpg) 0 0 no-repeat;
}
#privacy #pghdr {
background: #1F82AF url(../images/headers/hdrimg_privacy.jpg) 0 0 no-repeat;
}
#accessibility #pghdr {
background: #1F82AF url(../images/headers/hdrimg_accessibility.jpg) 0 0 no-repeat;
}
#dataintegrity #pghdr {
background: #1F82AF url(../images/headers/hdrimg_dataintegrity.jpg) 0 0 no-repeat;
height: 130px;
}
#highperfcomp #pghdr {
background: #1F82AF url(../images/headers/hdrimg_highperfcomp.jpg) 0 0 no-repeat;
height: 130px;
}
#perfattribution #pghdr {
background: #1F82AF url(../images/headers/hdrimg_perfattribution.jpg) 0 0 no-repeat;
height: 130px;
}
#consulting #pghdr {
background: #1F82AF url(../images/headers/hdrimg_consulting.jpg) 0 0 no-repeat;
height: 130px;
}
#pghdr h2 {
font-size: 3.6em;
color: #fff;
font-weight: bold;
font-style: italic;
padding: 32px 20px 0px 20px;
}
#pghdr h3 {
color: #FFEE99;
font-size: 1.2em;
font-style: italic;
padding: 28px 0 0 58px;
line-height: 1.2;
}
#pghdr h2, #pghdr h3 {
overflow: hidden;
text-indent: -5000px;
}
#home #pghdr {
height: 180px;
background: #1F82AF url(../images/headers/hdrimg_home.jpg) 0 0 no-repeat;
}
#home #pghdr h2 {
font-size: 5.6em;
padding: 55px 20px 0px 20px;
}
#home #pghdr h3 {
color: #FFEE99;
width: 300px;
padding: 3px 0 0 58px;
}
#content-main {
width: 429px;
float: left;
display: inline;
padding: 18px 20px 2.5em 25px;
}
/* Paragraph and text styles */
.intro {
font-size: 1.167em;
font-weight: bold;
color: #f3f3f3;
}
.cta-link {
font-weight: bold;
display: block;
padding: 0.7em 0 0 10px;
background: transparent url(../images/icons/arrow_bluegrey.gif) 0 0.9em no-repeat;
}
#content-main ul {
margin: 0 0 1em 0;
padding: 0;
list-style: none outside;
}
#content-main li {
padding: 0 0 0 11px;
margin: 0 0 0.5em 0;
background: transparent url(../images/icons/li_bullet1.gif) 0 0.5em no-repeat;
line-height: 1.4;
}
#content-main ol {
list-style: decimal outside;
margin: 0 0 1em 0;
padding: 0;
}
#content-main ol li {
background: none;
padding: 0;
margin-left: 1.5em;
}
#content-secondary {
width: 239px;
float: left;
display: inline;
padding: 9px 0 10px 10px;
}
.cta-box {
background: #2D4963;
border: solid 1px #1F272E;
margin: 0 0 1em 0;
}
.cta-box h4 {
background: #2D4963;
border-bottom: solid 1px #4B5A69;
padding: 0.4em 20px 0.2em;
margin: 0;
font-size: 1.33em;
color: #FFF2B2;
font-weight: bold;
font-style: italic;
line-height: 1.3;
}
#dataintegrity .cta-box h4 {
background: #6B1E06 url(../images/bg/cta-title_bg_di.gif) 0 0 repeat-x;
}
#highperfcomp .cta-box h4 {
background: #925407 url(../images/bg/cta-title_bg_hpc.gif) 0 0 repeat-x;
}
#perfattribution .cta-box h4 {
background: #6B1206 url(../images/bg/cta-title_bg_pma.gif) 0 0 repeat-x;
}
#consulting .cta-box h4 {
background: #926C1F url(../images/bg/cta-title_bg_c.gif) 0 0 repeat-x;
}
.cta-body {
padding: 0.7em 20px 0.3em;
background: transparent url(../images/bg/cta-box_bg_top.gif) 0 0 repeat-x;
}
.cta-body a, .cta-body a:link, .cta-body a:visited {
color: #d9d9d9;
}
.cta-body a:hover, .cta-body a:active {
color: #FFDD33;
}
.cta-box ul {
list-style: none outside;
margin: 0;
padding: 0 0 0.6em 0;
}
.cta-box li {
padding: 0 0 0 11px;
margin: 0 0 0.5em 0;
background: transparent url(../images/icons/li_bullet1.gif) 0 0.5em no-repeat;
line-height: 1.4;
}
.cta-box li.arrowlink, .cta-box ul.arrowlink li {
background: transparent url(../images/icons/arrow_dkblue.gif) 0 0.45em no-repeat;
}
.cta-box .cta-link {
padding-top: 0em;
background-position: 0 0.2em;
}
.cta-box a.cta-link, .cta-box a.cta-link:link {
color: #FFEE99;
}
.cta-box a.cta-link:visited {
color: #E8D266;
}
.cta-box a.cta-link:hover, .cta-box a.cta-link:active {
color: #FFDD33;
}
.testimonial {
margin: 0 0 1em 0;
padding: 1em 3px 0 20px;
}
.quote {
color: #ADC1CA;
font-size: 1.33em;
padding: 0 0 0.5em 0;
}
.attribution {
font-size: 0.92em;
padding: 0 0 0.55em 0;
}
.moreinfo {
font-size: 0.92em;
padding: 0.35em 0 0.3em 0;
font-weight: bold;
border-top: solid 1px #616870;
}
.contact-box {
border: solid 1px #1F272E;
margin: 1.3em 0 1em 0;
font-size: 0.92em;
background: #2D4963 url(../images/bg/cta-box_bg_top.gif) 0 0 repeat-x;
background: #263C52;
}
#home .contact-box {
margin-top: 0;
}
.contact-box h5 {
background: #2D4963;
border-bottom: solid 1px #4B5A69;
padding: 0.6em 20px 0.3em;
margin: 0;
/* font-size: 1.33em; */
color: #d9d9d9;
color: #FFF2B2;
font-weight: bold;
line-height: 1.3;
}
.contact-box p {
padding: 8px 20px 13px;
margin: 0;
}
/* =Footer
----------------------
Credit/footer styles: Usually the copyright/company info
Notes:
---------------------- */
#siteinfo {
border: solid 1px #2D4963;
border-top: none;
background: #777 url(../images/bg/footer_bg_top.gif) 0 0 no-repeat;
padding: 0;
color: #d9d9d9;
font-size: 0.92em;
padding: 1px 0 0;
}
#siteinfo a {
color: #fff;
}
#siteinfo span {
display: inline;
width: 45%;
padding: 0.8em 0 0.9em;
}
#siteinfo #siteinfo-legal { /* Usually the copyright notice */
float: left;
padding-left: 20px;
border-left: solid 5px #929292;
}
#siteinfo #siteinfo-links { /* Usually Terms, Privacy and Accessibility */
float: right;
text-align: right;
padding-right: 20px;
border-right: solid 5px #929292;
}
/* =Uni
----------------------
Universal styles: Styles that apply to elements found throughout the site
Notes:
The best example of this is the "clear" div
---------------------- */
.clear {clear: left}
.clear-right {clear: right}
.clear-both {clear: both}
.bold {font-weight: bold}
.em {font-style: italic}