﻿body {
    font-size: 16px;
    line-height: 1.4;
    font-family: open_sans, "Open Sans", "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
    padding: 0 1em 1em 1em;
}

strong {
    font-weight: normal;
    text-decoration: none;
}

ol, ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}

del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    color: #0071bc;
    text-decoration: none;
    border-bottom: 1px solid #a3dbff;
}

a:hover {
    color: #134868;
    border-bottom-color: #0071bc;
}

a.nav {
    border: none;
}

.right {
    float: right !important;
}

.left {
    float: left !important;
}

#browser_container {
    float: left;
    width: 100%;
    padding: 0;
}

#menu_container {
    float: left;
    height: 1.75em;
    padding-top: 2em;
    padding-left: 4em;
}

#menu_container ul li {
    display: inline;
    margin-right: .5em;
    width: 10em;
    padding: .5em 1em;

}

#menu_container ul li a {
    font-size: .89em;
}

#menu_container ul li.selected {
    background: white;
}

#browser {
    width: 100%;
    float: left;
    padding-bottom: 6em;
    position: relative;
}

#navigator_container {
    width: 100%;
    float: left;
    overflow: hidden;
}

#scrollbar1 {
    background: #DDE4EA;
}

#navigator_container div.cat-area {
    font-size: .89em;
    font-weight: bold;
    position: relative;
    width: 100%;
    float: left;
    color: white;
}

#navigator_container div.cat-area a {
    color: black;
    border: none;
    padding: .5em 0 .5em 35px;
    width: 100%;
    float: left;
    font-size: 15px;
    box-sizing: border-box;
}

#navigator_container div.cat-area a.area_link {
    margin-top: 1em;
}

#navigator_container div.cat-area a:hover {
    background-color: #f2f2f2;
}

#navigator_container ul li {
    font-weight: normal;
    font-size: .89em;
    width: 100%;
    float: left;
    position: relative;
}

#navigator_container ul li:first-child a {
    border-top: none;
}

#navigator_container ul li:last-child {
    /* padding-bottom: .5em; */
}

#navigator_container ul li a {
    border: none;
    color: black;
    float: left;
    box-sizing: border-box;
    width: 100%;
    padding: 7px calc(65px + .6em * 2) 7px 35px;
    line-height: 20px;
}

#navigator_container ul li a:hover {
    background: #f2f2f2;
}

#navigator_container div.cat-area a.selected,
#navigator_container ul li a.selected {
    background: #009ae8;
    color: white;

}

#navigator_container ul li a.buy_left {
    display: block;
    position: absolute;
    right: 0;
    top: auto;
    bottom: auto;
    left: auto;
    float: none;
    width: 65px;
    text-align: center;
    border-radius: 3px;
    padding: 2px 1.3em;
    font-size: 9px;
    color: #5b7c8d;
    box-sizing: border-box;
    margin: 6px;
    background-color: #d6f0fe;
    line-height: 18px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-family: open_sans_semibold, "Open Sans", "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
    font-weight: 600;
}

#navigator_container ul li a.buy_left:hover {
    background-color: #5b7c8d;
    color: #d6f0fe;
}

#solutions_frame {
    width: 20em;
    height: 90%;
}

.solutions-list {
    width: 18em;
}

#browser_header {
    height: 3em;
    background: white url(../images/gradient_10x48.png) repeat-x;
    float: left;
    width: 100%;
    -webkit-box-shadow: 0 1px 1px #999;
    -moz-box-shadow: 0 1px 1px #999;
    box-shadow: 0 1px 1px #999;
    position: relative;
    z-index: 110;
    border-bottom: 1px solid #999;
}

#browser_footer {
    box-shadow: 0 -2px 2px #999;
    position: relative;
    z-index: 100;
    height: 2em;
    float: left;
    width: 100%;

}

li.disabled a {
    color: gray !important;
}

#view_container {
    float: left;
    min-height: 1000px;
    background: white;
    z-index: 100;
    position: relative;
}

.left_col {
    float: left;
    width: calc(25% - 72px);
    margin-right: 72px;
}

.right_col {
    float: left;
    width: 75%;
    overflow: hidden;
}

.main-container-full {
    width: 100%;
    background: white;
    float: left;
    position: relative;
    z-index: 100;

}

.main-container {
    width: 100%;
    background: white;
    float: left;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    -webkit-box-shadow: 0 0 5px #909090;
    -moz-box-shadow: 0 0 5px #909090;
    box-shadow: 0 0 5px #909090;
    border: 1px solid white;
    position: relative;
    z-index: 100;
    behavior: url(styles/PIE.php);

}

.main-container + .main-container {
    margin-top: 1em;
}

/* ---------------------- Submenu */

.submenu {
    float: left;
    width: 100%;
}

.submenu ul {
    float: left;
    padding-bottom: .5em;
    padding-right: 1em;
    width: 100%;
}

.submenu ul li {
    display: inline;
}

.submenu ul li a {
    font-weight: bold;
    font-size: .89em;
}

.submenu ul li a.selected {
    color: #000;
    border: none;
}

.submenu input.search {
    margin-right: 2em;
    width: 20em;
}

input.search {
    font: .89em "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
    padding: 5px 7px 3px;
    padding-left: 32px;
    line-height: 20px !important;
    /* border-radius: 20px; */
    border: 1px solid silver;
    background: url(../resource/images/search.png) no-repeat 2px 2px;
    color: silver;
    font-weight: bold;
    width: 7em;
    margin-top: 3px;
    behavior: url(styles/PIE.php);
}

input.search-edited {
    color: black;
    font-weight: normal;
    -webkit-box-shadow: 0 0 2px #298edb;
}

hr {
    border: none;
    border-bottom: 1px solid silver;
    width: 100%;
    float: left;
}

.solution-header {
    float: left;
    margin-bottom: 2em;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.solution-bage {
    padding: 1em 0 2em;
    float: left;
    margin-bottom: 2em;
    position: relative;
    background: #fff;
    width: 100%;
}

div.sl-title {
    float: left;
    font-size: 1.25em;
    line-height: 1;
    font-weight: bold;
    min-width: 10em;
    margin-top: 8px;
    margin-bottom: 16px;
    width: calc(100% - 32px - 1em);
}

.solution-bage div {
    float: left;
}

.solution_container {
    width: 100%
}

.solution {
    width: 100%;
    position: relative;
}

.solution-section {
    width: 100%
}

.bl_wrapper {
    width: 90%;
}

.howto .bl_wrapper:last-child {
    border-top: 1px solid silver;
    margin-top: 2em !important;
}

.story .bl_wrapper + .bl_wrapper {
    border-top: 1px dotted silver;
    margin-top: 2em !important;
}

#main {

}

/* ….. Solution menu table */

table.sl-menu {
    border-collapse: separate;
    border-spacing: 1px 0px 0px 0px;
    float: left;
    margin-left: 2em;
}

table.sl-menu td {
    vertical-align: middle;
    height: 2em;
    padding: 1em 0;
}

table.sl-menu td:nth-child(1) {

    width: 48px;
}

table.sl-menu thead tr td {
    border-bottom: 1px gray solid;
}

table.sl-menu tbody tr td {
    border-top: 1px white solid;
}

table.sl-menu a {
    border: none;
}

table.sl-menu div.sl-summary {
    text-shadow: 0 1px 0 white;
    color: #3B3B3B;

}

table.sl-menu {
}

table.sl-menu td img {
    float: left;
    margin-right: 16px;
    margin-top: -4px;
}

table.sl-menu td {
    width: auto;
}

ul.sl-menu-list {
    list-style: none;
    float: left;
    margin-top: 0;
}

ul.sl-menu-list li a {
    padding: .5em 1em;
    display: block;
    float: left;
    border-bottom: 0px;
}

ul.sl-menu-list li {
    margin-bottom: .5em;
    margin-right: .75em;
    display: block;
    float: left;
}

ul.sl-menu-list li.selected {
    background-color: #1C75BC;

}

ul.sl-menu-list li.selected a {
    color: white;
    border: none;

}

.sol_bage_text {
    float: left;
    width: 490px;
    color: #58595b;
    margin-left: 26px;
    font-size: 13px;
    line-height: 1.35em;
    margin-top: 10px;
}

div.sl-summary {
    font-size: .89em;
    line-height: 1.4;
    color: gray;
}

img.cheat {
    margin-top: 3em;
    margin-left: 4%;
}

a.arr-cat {
    left: 6px;
    top: -1.85em;
    border: none !important;
    padding: 0 !important;
    height: 0 !important;
    width: 20px !important;
    position: relative;
    text-indent: 0 !important;
    text-align: center;
}

a.arr-cat:hover {
    background-color: transparent !important;
}

/*
-----------------------------Buttons
*/

a.link-button {
    background: url(../resource/images/sp-grad-transp.png) repeat-x 0 -29px;
    background-size: 5px 175px;
    padding: 8px 1em;
    border-radius: 5px;
    display: block;
    font-weight: normal;
    border-width: 3px;
    border-style: solid;
    box-shadow: inset 0 1px 1px #D7E8F6;
    /*	behavior: url(styles/PIE.php);*/
}

a.add-to-cart {
    background-color: #368DD4;
    text-decoration: none;
    color: white;
    text-shadow: 0 -1px 1px black;
    border-color: #1A5584;
    margin-top: 3em;
    margin-right: 3em;
    float: right;

}

a.add-to-cart:hover {
    box-shadow: inset 0 1px 0px #071d2f;
    padding-top: 9px;
    padding-bottom: 7px;
    color: white;
    background-color: #186eb5;
}

a.add-to-cart img {
    position: relative;
    top: 4px;
    margin-left: .5em;

}

.ext {
    /*margin-right: 6em;
    float: right !important;
    width: 12em; */
    float: right !important;
    margin-right: 3em;
    width: 15em;
}

ul.ext-list {
    font-size: .89em;
    margin-left: 2em;
    margin-top: 4.5em;
}

ul.ext-list li:first-child {
    margin-bottom: 25px;
}

ul.ext-list li + li {
    margin-top: 1em;
    text-indent: .75em;
}

.red {
    background-color: #C4151B !important;
}

.red:hover {
    background-color: #e3000c !important;
}

ul.ext-list dt {
    font-size: .89em;
    margin-top: .5em;
    padding-top: .75em;
    padding-bottom: .75em;
    padding-left: 1em;
    padding-right: 1em;
    /* width: 12em; */
    width: 14em;
    background: #fffdea;
    text-indent: 0;
}

a.but {
    padding: .5em .75em;
    border: none;
    color: white;
    border-radius: 3px;

}

a.but:hover {
    background-color: #555555;
    color: white;
}

a.blu {
    background-color: #1C75BC;
}

.solution-bage span.price {
    background-color: transparent;
    border-left: 2px solid #eaf2fa;
}

a.blu:hover, a.buy_sl_act, a.buy_sl:hover {
    background-color: #214567;
}

a.buy_sl {
    /*font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;*/
    /*font-size: 0.9em;*/
}

a.here {
    border-bottom-style: dashed;
}

.popup-container {

}

.popup-ins {
    position: absolute;
    z-index: 300;
    background: white;
    box-shadow: 0 0 5px #888;
    /*top: 300px;
    left: 400px;*/
    top: 100px;
    left: 320px;
    padding: 1.5em;
    border-radius: .5em;
}

.popup-ins ul li {
    margin-bottom: 1em;
    margin-left: 1em;
}

.popup-ins ul li + li {
    border-top: 1px solid silver;
    padding-top: 1em;
    margin-bottom: 1em;
}

.solution h1 {
    font-size: 1.2em;
    /* line-height: 1em; */
    margin: 2px 0 0;
}

.solution h2 {
    /*font-family: 'DroidSansRegular', 'PT Serif Caption', "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;*/
    font-size: 1.2em;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ Adaptive to Screens Sizes Styles */
@media only screen and (min-width: 1400px) {

}

@media only screen and (min-width: 1100px) and (max-width: 1400px) {

}

@media only screen and (max-width: 960px) {

}

@media only screen and (max-width: 1070px) {
    .solution-bage {

    }

    .solution-menu {

    }

    .solution-menu ul li {

    }

    ul.secondary-menu li {

    }

    .solution-menu ul.secondary-menu, .solution-menu hr {

    }

    .solution-bage ul.secondary-menu {

    }

    .solution-bage hr {

    }

}

@media only screen and (min-width: 1071px) and (max-width: 1281px) {
    .solution-bage {

    }

    .solution-menu {

    }

    .solution p {

    }

}

.index-table {
    width: 100%;
}

.sl-menu_top {
    padding-top: 1em;
    /*height: 49px;*/
    overflow: hidden;
    display: table-cell;
    /* width: 580px !important; */
    width: 100% !important;
}

.sl-menu_top_icon {
    width: 32px;
    padding: .5em;
}

.sl-menu_bott {
    border-top: 1px solid #ffffff;
}

.sl-menu_bott .sl-summary {
    color: #3b3b3b;
    margin-top: 1em;
    margin-bottom: 1em;
}

.sl-menu {
    max-width: calc(100% - 15em - 3em - 2em);
    width: 67.5% !important;
}

.sign-up-button {
    background: url(/resources/images/button_gradient_big.png) repeat-x bottom #C4151B;
    box-shadow: 0 1px 2px #888;
    padding: .5em;
    border-radius: .5em;
    text-align: center;
    width: 10em;
    float: right;
    color: white;
    line-height: 1.4;
}

.filters-wrap {
    background-color: #3a3a3a;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-wrap {
    display: flex;
    align-items: center;
    margin: 30px 0 30px 50px;
    cursor: pointer;
}

.filter-wrap .filter-title {
    font-size: 20px;
    line-height: 2.1;
    color: #70cfff;
    border-bottom: 3px solid transparent;
}

.filter-wrap:first-child {
    margin-left: 0;
}

.filter-wrap.active .filter-title {
    color: #fff;
    border-bottom-color: #fff;
}

.filter-wrap:not(.active) .filter-title:hover {
    border-bottom-color: #70cfff;
}

.filter-wrap .filter-label-count {
    font-size: 15px;
    letter-spacing: 1px;
    text-align: left;
    color: #716e6e;
    margin-left: 10px;
}

@media only screen and (max-width: 960px) {
    .left_col {
        width: 25%;
        margin-right: 0;
    }

    .sl-menu,
    ul.sl-menu-list {
        margin-left: 2em;
    }
}