/* Created by Pirkka Rannikko @ www.pirkkarannikko.com 0. Skinning 1. General styles 2. Page layout 3. 4. X. Dynamic styles for JavaScript */ /* 0. Skinning ----------------------------------------------------------------------------------------------------- */ /* 1. General styles ----------------------------------------------------------------------------------------------------- */ /* Reset & basic settings */ * {margin: 0px; padding: 0px;} html {background: #fff; color: #000;} body {font: 62.5%/1.0 Arial, Helvetica, sans-serif;} /* 10px = 1.0em */ abbr, fieldset, img {border: none;} button {cursor: pointer; overflow: visible;} /* "overflow: visible" fixes button paddings in IE */ fieldset, img {display: block;} /* "display: block" on images might cause problems in Safari */ table {border-collapse: collapse; border-spacing: 0px;} th, td {text-align: left; vertical-align: top;} .accessibility {display: block; font-size: 0px; height: 0px; line-height: 0px; overflow: hidden; text-indent: -9000px;} /* "font-size: 0px" makes the element unfocusable */ .hidden {display: none; visibility: hidden;} q:before, q:after { content: "";} /* Links */ a:link {color: #196ff0; text-decoration: underline;} a:visited {color: #000; text-decoration: underline;} a:hover {text-decoration: none;} a:focus {text-decoration: none;} a:active {color: #196ff0; text-decoration: none;} /* Fonts */ h1 {color: #444; font-size:2.4em;} h2 {color: #444; font-size:2.4em;} h3 {color: #444; font-size:1.8em; font-weight: normal;} h4 {font-size:1.4em;} h5 {font-size:1.4em;} h6 {font-size:1.4em;} p, th, td, li {font-size:1.4em; font-weight: normal;} /* 2. Page layout ----------------------------------------------------------------------------------------------------- */ /* Sticky footer model */ html {height: 100%;} body {height: 100%; text-align: center;} #page {background: url(../images/content-bg.gif) 30px 0px repeat-y; margin: 0px auto 0px auto; min-height: 100%; padding: 0px 30px 0px 30px; position: relative; text-align: left; width: 930px;} #functions {background: #fff; padding: 5px 0px 5px 0px; text-align: right; width: 930px;} #functions li {display: inline; font-size: 1.4em; line-height: 1.0;} #functions li strong {font-weight: normal;} #functions li a:visited {color: #196ff0;} #functions #fi {border-right: #000 solid 1px; padding: 0px 5px 0px 0px;} #functions #en {padding: 0px 0px 0px 2px;} #branding {background: #fff; height: 134px; width: 930px;} #branding h1 {background: url(../images/bf-engineering-logo.gif) 0 0 no-repeat; height: 134px; width: 490px;} #branding h1 a {display: block; font-size: 0px; height: 134px; text-indent: -9000px; width: 490px;} #navigation {background: url(../images/navigation-bg.gif) 0px 33px no-repeat; height: 47px; margin: -33px 0px 0px 0px;} #navigation ul {background: url(../images/navigation-ul-bg.gif) left top no-repeat; height: 47px; list-style-type: none; margin: 0px 0px 0px 465px; overflow: hidden; padding: 0px 10px 0px 10px; width: 465px;} #navigation li {display: block; float: left; height: 47px;} #navigation li a {background: url(../images/navigation-ul-a-left-bg.gif) left top no-repeat; color: #fff; display: block; height: 47px; padding: 0px 0px 0px 10px; position: relative; z-index: 1; text-decoration: none;} #navigation li strong {background: url(../images/navigation-ul-strong-left-bg.gif) left top no-repeat; display: block; font-weight: normal; height: 47px; margin: 0px -1px 0px -1px; padding: 0px 0px 0px 10px; position: relative; z-index: 9;} #navigation li span {background: url(../images/navigation-ul-a-right-bg.gif) right top no-repeat; display: block; font-size: 1.0em; height: 12px; padding: 13px 10px 22px 0px;} #navigation li a:hover, #navigation li a:focus {background: url(../images/navigation-ul-strong-left-bg.gif) left top no-repeat !important; color: #000; margin: 0px -1px 0px -1px; position: relative; z-index: 10;} #navigation li a:hover span, #navigation li a:focus span {background: url(../images/navigation-ul-strong-right-bg.gif) right top no-repeat !important; color: #000; cursor: pointer; padding: 13px 11px 22px 1px;} #navigation li strong span {background: url(../images/navigation-ul-strong-right-bg.gif) right top no-repeat; display: block; font-weight: normal; height: 47px; padding: 13px 11px 22px 1px;} #navigation li.first a {background: url(../images/navigation-ul-a-first-last-bg.gif) left top no-repeat;} #navigation li.last a span {background: url(../images/navigation-ul-a-first-last-bg.gif) right top no-repeat;} #content {background: url(../images/content-bg.gif) 0 0 repeat-y; float: left; min-height: 100%; padding: 20px 25px 310px 25px; width: 880px;} #content h2 span {display: block; font-size: 0.75em; font-weight: normal; padding: 10px 0px 0px 0px; font-style: italic;} #content h3, #content h4, #content h5, #content h6 {padding: 20px 0px 0px 0px;} #content h3 a {text-decoration: none;} #content h3 a:visited {color: #444;} #content h3 a:hover, #content h3 a:focus {text-decoration: underline;} #content p {line-height: 1.5; padding: 20px 0px 0px 0px;} #content p.source {padding: 5px 0px 0px 0px;} #content p span a {display: block; padding: 20px 0px 0px 0px;} #content h2 + p {color: #444; font-size: 1.8em;} #content h2 + p strong {font-weight: normal} #content h3 + p {padding: 10px 0px 0px 0px;} #content ul {list-style-type: disc; padding: 20px 0px 0px 20px;} #content ul ul {list-style-type: circle; padding: 0px 0px 0px 20px;} #content h3 + ul {padding: 10px 0px 0px 20px;} #content ol {padding: 20px 0px 0px 25px;} #content ol ol {padding: 0px 0px 0px 25px;} #content h3 + ol {padding: 10px 0px 0px 20px;} #content li {line-height: 1.5; padding: 0px 0px 10px 0px;} #content li li {font-size: 0.85em;} #content .clear {clear: both; padding: 0px;} #content img {background: url(../images/image-407x305-bg.gif) left top no-repeat; height: 305px; padding: 4px; width: 407px;} #content img.left {float: left; margin: 20px 25px 20px 0px;} #content img.right {float: right; margin: 20px 0px 20px 25px;} #content a:hover img, #content a:focus img {background: url(../images/image-407x305-bg-over.gif) left top no-repeat;} #content img.tall {background: url(../images/image-305x407-bg.gif) left top no-repeat; height: 407px; padding: 4px 4px 4px 5px; width: 305px;} #content a:hover img.tall, #content a:focus img.tall {background: url(../images/image-305x407-bg-over.gif) left top no-repeat;} /* Frontpage */ #teasers-wrapper {background: url(../images/teasers-wrapper-bg.gif) left bottom no-repeat; margin: 20px 0px 20px 0px; padding: 20px 0px 10px 0px; float: left; width: 880px;} #teasers {background: url(../images/teasers-bg.gif) left top repeat-y; float: left; width: 880px;} #teasers div {float: left; padding: 0px 0px 10px 0px; width: 440px;} #teasers .first {background: url(../images/teasers-first-bg.gif) left top no-repeat;} #teasers .last {background: url(../images/teasers-last-bg.gif) left top no-repeat;} #teasers div h3 {font-size: 1.8em; font-weight: normal; padding: 9px 20px 13px 20px; width: 367px;} #teasers .first h3 {background: #80b4f1 url(../images/teasers-first-heading-bg.gif) left bottom repeat-x; margin: 4px 29px 0px 4px;} #teasers .last h3 {background: #d9c590 url(../images/teasers-last-heading-bg.gif) left bottom repeat-x; margin: 4px 4px 0px 29px;} #teasers div h3 a {color: #fff; text-decoration: none;} #teasers div h3 a:hover, #teasers div h3 a:focus {text-decoration: underline;} #teasers div h3 a:visited {color: #fff;} #teasers div p {float: left; padding: 0px 20px 0px 20px; width: 367px;} #teasers .first p {margin: 15px 29px 0px 4px;} #teasers .last p {margin: 15px 4px 0px 29px;} #teasers div p a {display: block; float: right; padding: 20px 0px 0px 0px; text-align: right;} /*Summaries*/ #summary {background: url(../images/summary-top-bg.gif) left top no-repeat; float: left; margin: 20px 25px 20px 0px; padding: 4px 0px 0px 0px; width: 415px;} #summary div {background: url(../images/summary-bg.gif) left top repeat-y; float: left; width: 415px;} #summary h3 {color: #fff; float: left; font-size: 1.8em; font-weight: normal; margin: 0px 4px 0px 4px; padding: 9px 20px 13px 20px; width: 367px;} #summary.company h3 {background: #80b4f1 url(../images/teasers-first-heading-bg.gif) left bottom repeat-x;} #summary.services h3 {background: #d9c590 url(../images/teasers-last-heading-bg.gif) left bottom repeat-x;} #content #summary ul {background: url(../images/summary-bottom-bg.gif) left bottom no-repeat; float: left; padding: 10px 20px 20px 40px; width: 355px;} #summary li {clear: left; line-height: 1.5;} #content #summary ul ul {background-image: none; padding: 0px 0px 0px 20px; width: 335px;} #summary li li {font-size: 0.85em;} #site-info {background: #eee; float: left; height: 284px; margin: -284px 0px 0px 0px; position: relative; min-width: 990px; width: 100%;} #info-links {background: #4da510 url(../images/site-info-bg.gif) left bottom repeat-x; font-size: 1.2em; height: 35px; padding: 7px 0px 0px 0px;} #info-links li {color: #fff; display: inline; font-size: 1.2em; padding: 0px 80px 0px 80px;} #info-links a {color: #fff;} #site-info h2 {font-size: 1.8em; font-weight: normal; margin: 12px auto 3px auto; padding: 0px 0px 0px 25px; text-align: left; width: 905px;} #site-info h2 a {text-decoration: none;} #site-info h2 a:visited {color: #196ff0;} #site-info h2 a:hover, #site-info h2 a:focus {text-decoration: underline;} #portfolio-links {clear: both; margin: 0px auto 0px auto; width: 930px;} #portfolio-links ul {float: left; overflow: hidden; height: 176px; width: 930px;} #portfolio-links li {float: left; list-style-type: none; padding: 0px 25px 0px 25px; width: 260px;} #portfolio-links li a, #portfolio-links li strong {background: url(../images/image-250x166-bg.gif) 0 0 no-repeat; display: block; padding: 5px; width: 250px;} #portfolio-links li a:hover, #portfolio-links li a:focus, #portfolio-links li strong {background: url(../images/image-250x166-bg-over.gif) 0 0 no-repeat;} /* X. Dynamic styles for JavaScript ----------------------------------------------------------------------------------------------------- */ #site-info h2.active {margin: 12px auto -30px auto;} #links-control {margin: 0px auto 0px auto; width: 990px;} #links-control button {border: none; display: block; height: 33px; top: 104px; overflow: hidden; position: relative; text-indent: -9000px; width: 31px;} .prev {background: url(../images/btn-prev.gif) 0 0 no-repeat; float: left;} .prev:hover, .prev:focus {background: url(../images/btn-prev.gif) 0px -33px no-repeat;} .next {background: url(../images/btn-next.gif) 0 0 no-repeat; float: right;} .next:hover, .next:focus {background: url(../images/btn-next.gif) 0px -33px no-repeat;}