@charset "utf-8";

/*
 Hive Solutions Website
 Copyright (C) 2010 Hive Solutions Lda.

 This file is part of Hive Solutions Website.

 Hive Solutions Website is confidential and property of Hive Solutions Lda,
 its usage is constrained by the terms of the Hive Solutions
 Confidential Usage License.

 Hive Solutions Website should not be distributed under any circumstances,
 violation of this may imply legal action.

 If you have any questions regarding the terms of this license please
 refer to <http://www.hive.pt/licenses/>.
*/

/*
 __author__    = Francisco Castro <v-fcastro@hive.pt> & João Magalhães <joamag@hive.pt> & Luís Martinho <lmartinho@hive.pt>
 __version__   = 1.0.0
 __revision__  = $LastChangedRevision$
 __date__      = $LastChangedDate$
 __copyright__ = Copyright (c) 2010 Hive Solutions Lda.
 __license__   = Hive Solutions Confidential Usage License (HSCUL)
*/

@font-face {
    font-family: Rockwell;
    src: local("Rockwell"), url("../fonts/rock.ttf");
}

@font-face {
    font-family: Rockwell;
    font-weight: bold;
    src: local("Rockwell Bold"), local("Rockwell-Bold"),  url("../fonts/rockb.ttf");
}

body {
    margin: 0px 0px 40px 0px;
    padding: 0px;
    background: url(../images/body-background.jpg);
    background-color: #999999;
    font-family: Rockwell, Arial;
}

a, a:active, a:visited {
    text-decoration: none;
    color: #214c8f;
}

a:hover {
    color: #152f59;
}

h1 {
    margin: 0px 0px 6px 0px;
    text-align: center;
    font-size: 24pt;
    color: #214c8f;
    font-weight: normal;
    letter-spacing: 2pt;
}

h2 {
    margin: 0px 0px 0px 0px;
    text-align: center;
    font-size: 18pt;
    color: #214c8f;
    font-weight: normal;
}

h4 {
    margin: 0px 0px 0px 0px;
    text-align: center;
    font-size: 12pt;
    color: #214c8f;
    font-weight: normal;
}

p {
    width: 500px;
    margin: 20px auto 0px auto;
    color: #4e70a5;
    line-height: 1.5em;
}

ul {
    margin: 0px;
    padding: 0px;
}

ul li {
    list-style: none;
}

form {
    width: 530px;
    margin: 0px auto 0px auto;
    padding: 30px 0px 30px 0px;
    font-family: Rockwell, Arial;
}

input {
    height: 40px;
    width: 510px;
    border: none;
    font-family: Rockwell, Arial;
    font-size: 20pt;
    margin-bottom: 20px;
    padding-left: 20px;
    padding-top: 10px;
    vertical-align: center;
    color: #90a5c7;
    background: url(../images/text-field-background.png) center top no-repeat;
}

.firefox input, .opera input {
    height: 50px;
    padding-top: 0px;
}

input.lower {
    color: #b2bac7;
}

input.invalid {
    color: #c42f2f;
}

textarea {
    height: 218px;
    width: 510px;
    border: none;
    padding-left: 20px;
    padding-top: 12px;
    font-family: Rockwell, Arial;
    font-size: 20pt;
    background: url(../images/text-area-background.png) center center no-repeat;
    color: #90a5c7;
    overflow: visible;
}

textarea.lower {
    color: #b2bac7
}

textarea.invalid {
    color: #c42f2f
}

#send-form-button {
    display: block;
    height: 62px;
    width: 230px;
    margin: 30px auto 0px auto;
    padding-top: 18px;
    text-align: center;
    font-size: 26pt;
    color: #ffffff;
    cursor: pointer;
    background: url(../images/button-background.png) center top no-repeat;
}

#send-form-button:hover {
    font-weight: bold;
}

.error-message {
    color: #c42f2f;
}

.error {
    display: none;
    font-weight: bold;
    text-align: center;
}

.error.visible {
    display: block;
}

/* helpers */
.separator {
    height: 3px;
    width: 100%;
    margin: 20px 0px 20px 0px;
    background: url(../images/separator-gray.png) center center no-repeat;
}

/* Header */
#header-wrapper {
    height: 205px;
    width: 100%;
    border-bottom: 4px solid #fff;
    background: url(../images/header-background.jpg) center top repeat-x;
}

#hello-ribbon {
    background: url(../images/hello-ribbon.png) center bottom no-repeat;
    height: 180px;
    width: 180px;
    position: absolute;
}

#menu-content {
    height: 205px;
    width: 100%;
    margin: 0px auto 0px auto;
    background: url(../images/header-menu-background.png) center bottom no-repeat;
}

#navigation-menu {
    height: 160px;
    width: 960px;
    margin: 0px auto 0px auto;
    background: url(../images/hive-logo.png) center top no-repeat;
}

#navigation-menu ul {
    height: 30px;
    width: 600px;
    margin: 0px auto 0px auto;
    padding-top: 145px;
}

#navigation-menu ul li {
    float: left;
    margin: 0px 15px 0px 15px;
    font-size: 18pt;
}

#navigation-menu ul li a:link, #navigation-menu ul li a:active, #navigation-menu ul li a:visited {
    color: #6482b1;
}

#navigation-menu ul li a:hover {
    color: #214c8f;
}

#navigation-menu #active-area a:link, #navigation-menu #active-area a:active, #navigation-menu #active-area a:visited    {
    color: #214c8f;
}

#location-menu {
    top: 10px;
    float: right;
    width: 600px;
    margin-top: 10px;
}

#location-menu ul {
    padding-right: 10px;
}

#location-menu ul li {
    float: right;
    margin-left: 20px;
    font-size: 9pt;
}

#location-menu ul li a:link, #location-menu ul li a:active, #location-menu ul li a:visited
    {
    color: #90a5c7;
}

#location-menu ul li a:hover {
    color: #214c8f;
}

#location-menu #active-location a:link, #location-menu #active-location  a:active, #location-menu #active-location a:visited {
    color: #214c8f;
    cursor: default;
}

/* content */
#content-wrapper {
    width: 100%;
}

#content {
    width: 960px;
    margin: 0px auto 0px auto;
}

#media {
    margin-bottom: 20px;
    text-align: center;
}

#home-diagram {
    border: none;
}

#punch-line {
    height: 58px;
    width: 940px;
    margin-top: 60px;
    padding-top: 30px;
    padding-right: 20px;
    border-bottom: 1px solid #7a94bc;
    text-align: center;
    font-size: 29pt;
    color: #214c8f;
}

#punch-line.price {
    background: url(../images/price-badge.png) left bottom no-repeat;
    text-align: right;
}

#punch-line.pip {
    background: url(../images/pip-badge.png) left bottom no-repeat;
    text-align: right;
}

#punch-line a:link, #punch-line a:active, #punch-line a:visited {
    color: #214c8f;
    font-weight: bold;
}

#punch-line a:hover {
    color: #ffffff;
}

.topic-area {
    width: 640px;
    margin: 50px auto 40px auto;
}

.topic {
    float: left;
    width: 300px;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
}

.topic-image {
    float: left;
    width: 69px;
}

.topic-text {
    float: left;
    width: 226px;
}

.topic img {
    margin-right: 10px;
    border: none;
}

.topic h3 {
    margin: 0px;
    font-weight: normal;
    font-size: 11pt;
    color: #214c8f;
}

.topic p {
    width: 100%;
    margin-left: 5px;
    font-size: 9pt;
    color: #4d4d4d;
    margin-top: 6px;
}

#home-topic-area {
    margin-top: 25px;
}

#home-topic-area .topic {
    float: left;
    width: 320px;
    margin: 0px;
}

#home-topic-area .topic-image {
    float: left;
    height: 80px;
    margin-right: 5px;
}

#home-topic-area .topic img {

}

#home-topic-area .topic h3 {
    margin: 0px;
    font-weight: normal;
    font-size: 11pt;
    color: #214c8f;
}

#home-topic-area .topic p {
    width: 100%;
    margin-top: 5px;
    font-size: 9pt;
    color: #4d4d4d;
}

.two-column-wrapper {
    width: 700px;
    margin: 40px auto 0px auto;
}

.two-column-left {
    float: left;
    width: 400px;
}

.two-column-right {
    float: left;
    width: 300px;
}

#skills-table {
    width: 600px;
    margin: 30px auto 0px auto;
}

#skills-table h4 {
    text-align: left;
    margin-bottom: 6px;
    padding: 0px 0px 8px 10px;
    border-bottom: 1px solid #7a94bc;
}

#skills-table ul {
    width: 100%;
    padding: 0px 0px 50px 30px;
}

#skills-table ul li {
    float: left;
    margin-right: 30px;
    font-size: 11pt;
    color: #666666;
}

/* Products */
#screenshots-button {
    display: block;
    height: 50px;
    width: 280px;
    margin: 50px auto 0px auto;
    padding-top: 12px;
    text-align: center;
    font-size: 18pt;
    color: #214c8f;
    cursor: pointer;
    background: url(../images/button-large-background.png) center top no-repeat;
}

#screenshots-button:hover {
    background: url(../images/button-large-background-hover.png) center top no-repeat;
    color: #ffffff;
}

/* People */
.person {
    width: 740px;
    margin: 50px auto 0px auto;
}

.person-name {
    color: #7a94bc;
    font-size: 18pt;
    font-weight: normal;
    margin: 0;
    text-align:center;
}

.person-position {
    color: #90a5c7;
    font-size: 11pt;
    font-weight: normal;
    margin: 0;
    text-align: center;
    font-style: italic;
    margin-left: 6px;
}

.person-image-left {
    float: left;
    width: 130px;
    height: 160px;
    margin: 24px 40px 10px 0px;
}

.person-image-right {
    float: right;
    width: 130px;
    height: 160px;
    margin: 24px 0px 10px 40px;
}

.person-text {
    float: left;
    width: 570px;
}
.person-text-contents {
    font-size: 11pt;
    width: 570px;
}

/* About */
#brochure-button {
    display: block;
    height: 48px;
    width: 307px;
    margin: 34px auto 0px auto;
    padding-top: 10px;
    padding-left: 30px;
    text-align: center;
    font-size: 18pt;
    color: #214c8f;
    cursor: pointer;
    background: url(../images/button-pdf-background.png) center top no-repeat;
}

#brochure-button:hover {
    background: url(../images/button-pdf-background-hover.png) center top no-repeat;
    color: #ffffff;
}

/* Thank you */
#thank-you-wrapper {
    width: 500px;
    margin: 50px auto 0px auto;
}

#thank-you-media {
    float: left;
    width: 250px;
}

#thank-you-text {
    float: left;
    width: 250px;
    padding-top: 30px;
}

#thank-you-text p {
    width: 100%;
}

/* Contact Info */
#contact-info-wrapper {
    width: 500px;
    margin: 0px auto 0px auto;
}

#contact-info-wrapper .column-left {
    float: left;
    width: 250px;
}

#contact-info-wrapper #find-us-location {
    background: url(../images/icon-location.png) left top no-repeat;
    height: 32px;
    padding-left: 28px;
}

#contact-info-wrapper .column-right {
    float: left;
    width: 250px;
}

#contact-info-wrapper #reach-us-email {
    background: url(../images/icon-email-identification.png) left top no-repeat;
    height: 32px;
    padding-left: 28px;
}

#contact-info-wrapper #reach-us-twitter {
    background: url(../images/icon-twitter.png) left top no-repeat;
    height: 32px;
    padding-left: 28px;
}

#contact-info-wrapper .column-left h4, #contact-info-wrapper .column-right h4 {
    text-align: left;
}

#contact-info-wrapper .column-left p, #contact-info-wrapper .column-right p {
    padding-left: 10px;
    text-align: left;
    color: #000000;
}

#contact-info-wrapper a:link,#contact-info-wrapper a:active, #contact-info-wrapper a:visited {
    color: #000000;
}

#contact-info-wrapper a:hover {
    color: #6482b1;
}

#contact-info-wrapper a {
    cursor: pointer;
}

/* Footer */
#footer-wrapper {
    width: 100%;
}

#footer {
    height: 30px;
    width: 960px;
    margin: 30px auto 0px auto;
    padding-top: 6px;
    border-top: 1px solid #7a94bc;
    font-size: 9pt;
    color: #6482b1;
}

#footer a:link, #footer a:active, #footer a:visited {
    color: #214c8f;
}

#footer a:hover {
    color: #152f59;
}

#footer-text {
    float: left;
}

#footer-text p {
    margin-top: 0px;
}

#colony-badge {
    background: url(../images/colony-badge.png) center top no-repeat;
    float: right;
    height: 30px;
    width: 100px;
}

#copyright {
    float: left;
}

#inspiring {
    float: right;
}

.balloon {
    position: absolute;
    float: left;
    height: 370px;
    width: 510px;
    margin-top: -340px;
    padding-top: 12px;
    background: url(../images/location-baloon.png) center top no-repeat;
    display: none;
}

#map {
    height: 295px;
    width: 485px;
    margin: 0px auto 0px auto;
    background-color: #dddddd;
}

#map-frame {
    height: 295px;
    width: 485px;
}
