/* 
    Document   : styles
    Created on : 19.05.2010, 20:58:45
    Author     : Alex
    Description:
        Purpose of the stylesheet follows.
*/

/* CSS Document */
a, a:hover, a:visited {
    text-decoration:none;
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
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%;
    font-family: inherit;
    vertical-align: baseline;
}

/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight:400; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }


/* Common styles */
body {
    font-family: Arial, sans-serif;
    font-size: 12px;
    background: url(../images/body-bg.png) 0px 28px;
    color: #141414;
}
body.homepage {
    background: #fff;
}
p {
    margin: 10px 0;
}
a, a:link, a:visited, a:active {
    color: #2360ab;
}
a:hover {
    text-decoration: underline;
}
h1 {

}
h2 {
    font-size: 24px;
    font-weight: bold;
    margin: 20px 0;
}
h3 {

}
h4 {

}
h1 a, h1 a:link, h1 a:visited, h1 a:active,
h2 a, h2 a:link, h2 a:visited, h2 a:active,
h3 a, h3 a:link, h3 a:visited, h3 a:active,
h4 a, h4 a:link, h4 a:visited, h4 a:active {
    color: inherit;
}

/* Header */
#header-wrapper {
    float: left;
    width: 100%;
    background: url(../images/header-bg.gif) repeat-x top left;
}
#header {
    width: 925px;
    margin: 0 auto;
    position: relative;
    color: #d9eaff;
    height: 116px;
}
#header ul {
    list-style: none;
}
#logo-container {
    position: absolute;
    top: 32px;
    left: 20px;
}
#call-us {
    position: relative;
    float: right;
    margin: 35px 20px 0 0;
    font-size: 18px;
}
#main-menu {
    position: absolute;
    bottom: 0;
    right: 19px;
}
#main-menu li {
    float: left;
    background: url(../images/main-menu-bg.png) repeat-x top left;
    border-right: 1px solid #265ea4;
    border-left: 1px solid #234e86;
}
#main-menu li.first {
    background: url(../images/main-menu-first-bg.png) no-repeat top left;
    border-left: 0;
}
#main-menu li.last {
    background: url(../images/main-menu-last-bg.png) no-repeat top right;
    border-right: 0;
}
#main-menu li.active {
    background-position: bottom left;
}
#main-menu li.last.active {
    background-position: bottom right;
}
#main-menu li a {
    float: left;
    height: 39px;
    padding: 0 17px;
    color: #d9eaff;
    font-size: 12px;
    line-height: 38px;
    text-shadow: 1px 1px 1px #000;
}
#main-menu li a:hover {
    color: #89bdff;
    text-decoration: none;
}
#main-menu li.active a {
    color: #b9ea94;
}
#language-switch {
    background-color: #245390;
    position: relative;
    margin: 35px 20px 0 0;
    float: right;
    z-index: 3;
}
#language-switch li {
    height: 21px;
    line-height: 20px;
    margin: 0 9px;
    padding-right: 8px;
    display: none;
    position: relative;
    text-align: center;
}
#language-switch li.first {
    display: block;
    padding-right: 0px;
    width: 58px;
}
#language-switch li.first a {
    background: url(../images/language-switch-bg.png) no-repeat right;
    padding-right: 8px;
}
#language-switch:hover li {
    display: block;
}
#language-switch a {
    font-size: 12px;
    color: #d9eaff;
}

/* Banner */
#banner-wrapper {
    float: left;
    width: 100%;
    background: url(../images/banner-bg.gif) repeat-x top left;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
#banner {
    width: 925px;
    margin: 0 auto;
    height: 273px;
    position: relative;
}
#banner-slides-container {
    width: 100%;
    height: 100%;
}
.slide {
    position: absolute;
    width: 100%;
}
.slide img {
    position: absolute;
    top: 0;
    z-index: 2;
}
.slide h3, .slide p {
    position: relative;
    z-index: 3;
}
#banner h3 {
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    width: 450px;
    margin: 22px 0 22px 55px;
}
#banner p {
    font-size: 14px;
    color: #d9eaff;
    text-shadow: 1px 1px 2px #000;
    width: 370px;
    margin: 22px 0 0 55px;
}
#banner h3 strong {
    color: #db0029;
}
#banner-prev {
    display: none;
    width: 57px;
    height: 57px;
    position: absolute;
    z-index: 5;
    top: 102px;
    left: -25px;
    background: url(../images/banner-arrow-left.png) no-repeat;
}
#banner-next {
    display: none;
    width: 57px;
    height: 57px;
    position: absolute;
    z-index: 5;
    top: 102px;
    right: -25px;
    background: url(../images/banner-arrow-right.png) no-repeat;
}

/* Nav icons */
#nav-icons-container-wrapper {
    margin-top: 20px;
    float: left;
    width: 100%;
    height: 135px;
    background-color: #efefef;
    border-bottom: 1px solid #e0e0e0;
    border-top: 1px solid #e0e0e0;
}
#nav-icons-container {
    width: 935px;
    padding-left: 10px;
    margin: 15px auto;
}
#nav-icons-container a {
    margin-right: 10px;
}

/* Content */
#main-part-wrapper {
    float: left;
    width: 100%;
    position: relative;
    background: url(../images/content-wrapper-bg.png) repeat-x top left;
}
.homepage #main-part-wrapper {
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 44px;
}
#main-part {
    width: 925px;
    margin: 20px auto;
    background: url(../images/content-top-bg.png) no-repeat right top;
    padding-top: 26px;
}
.homepage #main-part {
    background: #fff;
    padding-top: 0;
}
#sub-menu-container {
    float: left;
    width: 183px;
    height: 50px;
}
#sub-menu-container h2 {
    font-family: Georgia, serif;
    font-size: 24px;
    color: #0c3569;
}
#submenu {
    list-style: none;
}
#submenu li {
    width: 100%;
    white-space: nowrap;
    position: relative;
    right: 2px;
}
#submenu li a {
    color: #5d5d5d;
    font-size: 14px;
    font-weight: bold;
    padding-left: 23px;
    line-height: 43px;
}
#submenu li a.active {
    display: inline-block;
    background: url(../images/submenu-active-bg.png) no-repeat;
    height: 41px;
    width: 192px;
    color: #000;
    position: relative;
    z-index: 5;
}
#submenu ul {
    list-style: none;
    margin: 5px 0 0 33px;
}
#submenu ul li {

}
#submenu ul li a {
    color: #6b91c1;
    font-weight: normal;
    font-size: 12px;
    padding: 0;
    line-height: 24px;
}
#content-container {
    float: left;
    clear: none;
    width: 742px;
    background: url(../images/content-middle-bg.png) repeat-y;
    padding-bottom: 15px;
    position: relative;
}
#illustration-container {
    bottom: 0;
    left: -207px;
    position: absolute;
}
#content-heading {
    margin: 0 33px;
}
#content-heading h1 {
    font-size: 30px;
    font-weight: bold;
    color: #0c3569;
}
#content-heading h2 {
    color: #252525;
    font-size: 18px;
    background: url(../images/hor-ruler-bg.png) repeat-x bottom left;
    padding-bottom: 10px;
    height: 19px;
    line-height: 20px;
    font-weight: normal;
    margin-bottom: 7px;
}
#content-heading p {
    color: #141414;
    font-size: 14px;
}
#content-heading blockquote {
    background: url(../images/heading-quote-top-bg.png) no-repeat top;
}
#content-heading blockquote p {
    background: url(../images/heading-quote-bottom-bg.png) no-repeat bottom;
    padding: 20px 25px 45px;
    font-style: italic;
    font-size: 18px;
    font-family: Georgia, serif;
}
#content {
    float: left;
    width: 472px;
    margin-left: 33px;
}
#content h3 {
    color: #252525;
    font-weight: bold;
    font-size: 14px;
    margin: 15px 0;
}
#content table {
    width: 100%;
    border-collapse: collapse;
    border: 0;
}
#content th {
    font-weight: bold;
    color: #252525;
    background: #fff;
    height: 25px;
    padding: 10px 10px 10px 15px;
}
#content td {
    border-bottom: 1px solid #fff;
    height: 27px;
    color: #585858;
    padding: 10px 10px 10px 15px;
}
#content ul,
#content ol {
    margin-left: 50px;
}
#content li {
    line-height: 20px;
}
#content-sidebar {
    float: left;
    width: 189px;
    margin-left: 15px;
    color: #6b6b6b;
    font-size: 11px;
}
#content-sidebar h2 {
    color: #3170b5;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: normal;
    background: url(../images/hor-ruler-bg.png) repeat-x bottom left;
    padding-bottom: 9px;
}
#content-sidebar ul,
#content-sidebar ol {
    list-style-position: inside;
    margin-left: 15px;
}
#nav-links-container {
    float: right;
    clear: both;
    width: 742px;
    background: url(../images/content-bottom-bg.png) no-repeat;
    height: 87px;
    font-family: Georgia, serif;
    font-size: 14px;
}
#nav-link-prev {
    float: left;
    background: url(../images/nav-link-prev-left-bg.png) no-repeat left;
    position: relative;
    left: -21px;
    height: 52px;
    padding-left: 29px;
}
#nav-link-prev span {
    background: #245fa9 url(../images/nav-link-prev-right-bg.png) no-repeat bottom right;
    color: #fff;
    float: left;
    height: 44px;
    line-height: 34px;
    padding: 0 25px 0 2px;
    font-style: italic;
}
#nav-link-next {
    float: right;
    background: url(../images/nav-link-next-right-bg.png) no-repeat right;
    position: relative;
    right: -25px;
    height: 52px;
    padding-right: 29px;
}
#nav-link-next span {
    background: #245fa9 url(../images/nav-link-next-left-bg.png) no-repeat bottom left;
    color: #fff;
    float: right;
    height: 44px;
    line-height: 34px;
    padding: 0 3px 0 25px;
    font-style: italic;
}
#body-content {
    float: left;
    width: 483px;
}
#packs-brief-container {
    float: left;
    width: 420px;
    margin: 0 0 0 22px;
}
.pack-brief {
    width: 46%;
    margin: 0 4% 20px 0;
    float: left;
    clear: none;
}
.pack-brief h3 {
    font-weight: bold;
    font-size: 18px;
    color: #5d5d5d;
    height: 60px;
    line-height: 60px;
    background-position: left center;
    background-repeat: no-repeat;
}
.pack-brief h3 span {
    bottom:13px;
    left:10px;
    position:relative;
}
.pack-brief h3 span.caps {
    position: static;
}
#nav-buttons-container {
    position: absolute;
    bottom: -29px;
}

/* Testimonial */
#testimonial-container {
    float: left;
    width: 100%;
    margin: 44px 0 0 0;
    background-color: #efefef;
    border-bottom: 1px solid #e5e5e5;
    border-top: 1px solid #e5e5e5;
}
#testimonial {
    width: 925px;
    margin: 0 auto;
}
#testimonial h2 {
    font-size: 14px;
    color: #010101;
    font-weight: bold;
    float: left;
}
#testimonial blockquote {
    float: left;
    font-style: italic;
    font-size: 12px;
    margin: 12px 0 0 10px;
}
#testimonial span.author {
    float: left;
    font-size: 12px;
    font-weight: bold;
    margin: 22px 0 0 10px;
}
#testimonial span.author span.address {
    font-weight: normal;
}
#testimonial div {
    display: none;
}

/* Footer */
#footer-wrapper {
    float: left;
    width: 100%;
    background: url(../images/footer-bg.png) repeat-x top left;
    margin-top: 20px;
    position: relative;
}
#footer {
    width: 925px;
    margin: 0 auto;
}
#footer .section {
    float: left;
    width: 30%;
    margin-right: 3%;
}
#footer h2 {
    color: #fff;
    font-size: 18px;
}
#footer p {
    color: #d9eaff;
}
#footer i, #footer span {
    color: #759dd0;
}
#footer ul {
    list-style: none;
}
#footer li {
    float: left;
    width: 110px;
}
#footer a {
    color: #d9eaff;
}
#footer blockquote {
    background: url(../images/footer-quote-bg.png) no-repeat top left;
    position: relative;
    left: -13px;
    top: -5px;
    padding: 1px 0 0 13px;
}
#moto {
    position: absolute;
    bottom: 10px;
    right: 50px;
}

/* Assets */
.row {
    float: left;
    width: 100%;
    clear: both;
}
div.button-container {
    width: auto;
    margin: 0 auto;
    background: url(../images/button-container-left-bg.png) no-repeat center left;
    height: 58px;
    margin-right: 10px;
}
div.button-container p {
    margin: 0;
}
div.button-container div {
    background: url(../images/button-container-right-bg.png) no-repeat center right;
    height: 58px;
    padding: 0 7px;
    margin-right: -10px;
}
a.button {
    display: inline-block;
    height: 44px;
    background: url(../images/button-left-bg.png) no-repeat top left;
    margin: 7px 8px 2px 2px;
}
a.button:hover {
    text-decoration: none;
    background-position: bottom left;
}
a.button span {
    display: inline-block;
    height: 44px;
    background: url(../images/button-right-bg.png) no-repeat top right;
    line-height: 44px;
    font-size: 18px;
    color: #252525;
    text-shadow: 1px 1px 2px #fff;
    padding: 0 10px;
    margin-right: -6px;
}
a.button:hover span {
    background-position: bottom right;
}
#content-heading a.button {
    height: 35px;
    background: url(../images/button-heading-left-bg.png) no-repeat top left;
}
#content-heading a.button span {
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    padding: 0 20px;
    background: url(../images/button-heading-right-bg.png) no-repeat top right;
}
#content-heading a.button.green {
    background: url(../images/button-green-left-bg.png) no-repeat top left;
}
#content-heading a.button.green span {
    background: url(../images/button-green-right-bg.png) no-repeat top right;
}
a.more {
    float: left;
    clear: both;
    white-space: nowrap;
}

/* Forms styling */
label {
    float: left;
    width: 81px;
    margin-top: 18px;
    text-align: right;
    margin-right: 10px;
    white-space: nowrap;
}
label span {
    color: #ea2424;
}
input, select, textarea {
    float: left;
    border: 1px solid #bdbdbd;
    width: 140px;
    margin-top: 15px;
    margin-left: 0;
}
input.tip, textarea.tip {
    color: #aaa;
}
input.error, textarea.error, select.error {
    background: #ffdede;
    border-color: #b22424;
}
textarea {
    width: 373px;
    height: 70px;
}
input.submit {
    background: url(../images/submit-button-bg.png) no-repeat;
    cursor: pointer;
    width: 168px;
    height: 35px;
    padding-bottom: 5px;
    float: left;
    border: 0;
    color: #252525;
    font-size: 14px;
    text-shadow: 1px 1px 2px #fff;
}
#footer input.submit {
    background: url(../images/submit-button-footer-bg.png) no-repeat;
    width: 70px;
    height: 20px;
    padding-bottom: 2px;
    margin-left: 10px;
    font-size: 10px;
}
#errors-container {
    color:#b22424;
    float:left;
    padding:25px 0 0 0;
    clear: left;
    margin-left: 92px;
}
#recaptcha-container {
    float: left;
    width: 100%;
    margin-top: 15px;
    margin-left: 93px;
}
#recaptcha_image {
    float: left;
    margin-right: 10px;
}
#recaptcha_reload {
    clear: both;
    float: left;
    margin: 10px 0 0 0;
    text-decoration: underline;
}
#recaptcha_response_field {
    clear: left;
}

#how-it-works {
    position: relative;
    width: 675px;
    height: 475px;
}
#how-it-works .controls {
    z-index: 5;
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
}
#how-it-works .controls a {
    display: inline-block;
    overflow: hidden;
    width: 33px;
    height: 33px;
    font: bold 13.5px/31px "Century Gothic";
    text-shadow: 0px 1px rgba(255, 255, 255, 0.6);
    color: #000;
    background: url(../images/how-it-works-button.png) no-repeat top;
}
#how-it-works .controls a img {
    position: relative;
    top: 5px;
}
#how-it-works .controls a:hover {
    text-decoration: none;
}
#how-it-works .controls a.active {
    background-position: bottom;
}
#how-it-works .slides {
    position: absolute;
    width: 675px;
    height: 475px;
    z-index: 1;
    top: 0;
    left: 0;
}
#how-it-works .slides .slide {
    position: absolute;
    width: 673px;
    height: 473px;
    z-index: 1;
    top: 0;
    left: 0;
    background: rgba(243, 243, 243, 0.9);
    border: 1px solid #e5e5e5;
    border-radius: 8px;
}
#how-it-works .slides .slide.slide-0 {
    background: none;
}
#how-it-works .slides .slide .img {
    position: absolute;
    z-index: 3;
}
#how-it-works .slides .slide-1 .img {
    top: 10px;
    left: 55px;
}
#how-it-works .slides .slide-2 .img {
    top: 80px;
    left: 445px;
}
#how-it-works .slides .slide-3 .img {
    top: 23px;
    left: 400px;
}
#how-it-works .slides .slide-4 .img {
    top: 200px;
    left: 415px;
}
#how-it-works .slides .slide-5 .img {
    top: 220px;
    left: 25px;
}
#how-it-works .slides .slide-6 .img {
    top: 45px;
    left: 15px;
}
#how-it-works .slides .slide .content {
    background: #225da8 url(../images/how-it-works-heading.png) repeat-x top;
    border: 2px solid #225da8;
    border-radius: 10px;
    position: absolute;
    padding: 0 20px 25px 20px;
    z-index: 5;
    max-width: 420px;
}
#how-it-works .slides .slide-1 .content {
    top: 107px;
    left: 247px;
}
#how-it-works .slides .slide-2 .content {
    top: 107px;
    right: 245px;
}
#how-it-works .slides .slide-3 .content {
    top: 240px;
    right: 170px;
}
#how-it-works .slides .slide-4 .content {
    bottom: 125px;
    right: 213px;
}
#how-it-works .slides .slide-5 .content {
    left: 250px;
    bottom: 135px;
}
#how-it-works .slides .slide-6 .content {
    top: 232px;
    left: 160px;
}
#how-it-works .slides .slide .content h2 {
    font: bold 24px Arial;
    color: #fff;
    background: none;
    text-shadow: 1px 2px rgba(0,0,0,0.3);
    margin-top: 10px;
    height: auto;
    padding-bottom: 0;
}
#how-it-works .slides .slide .content p,
#how-it-works .slides .slide .content ul,
#how-it-works .slides .slide .content ol {
    font: normal 14px "Century Gothic";
    color: #fff;
    list-style-position: inside;
    text-shadow: 1px 1px rgba(101,8,26,0.53);
    margin: 10px 0 0 0;
}
#how-it-works .slides .slide .label {
    position: absolute;
    z-index: 6;
}
#how-it-works .slides .slide-1 .label {
    left: 235px;
    top: 95px;
}
#how-it-works .slides .slide-2 .label {
    top: 95px;
    right: 234px;
}
#how-it-works .slides .slide-3 .label {
    right: 157px;
    top: 228px;
}
#how-it-works .slides .slide-4 .label {
    right: 246px;
    top: 332px;
}
#how-it-works .slides .slide-5 .label {
    left: 238px;
    top: 325px;
}
#how-it-works .slides .slide-6 .label {
    top: 221px;
    left: 149px;
}
#content-heading .snippet {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    width: 327px;
    float: left;
    background: #fff;
    text-align: center;
    margin-top: 18px;
    padding-top: 10px;
}