/* Main site styles
 * author: Radosław Szachtsznajder, rszachtsznajder@gmail.com 
 * */

/* ============================================================= */
/* =================================================== MAIN ==== */
/* ============================================================= */

/* ===================================================== header */

/* ============================= header bottom */

#headerBottom
{
    background-color: #edf0f5;
    padding-top: 1.2em;
}

#headerBgHalf
{
    background: transparent url(/imgs/css/top_bg_half.gif) 50% 0 repeat-y;
}

/* ===================== with login panel */

#headerBottom1
{
    background-color: #dce2ec;
}

#headerBottom1 .content
{
    background: #edf0f5 url(/imgs/css/hb1_left.gif) 0 0 no-repeat;
    position: relative;
}

/* flash player */
#headerBottom1 .content #sgFlash
{
    height: 277px;
    left: 12px;
    position: absolute;
    top: 0;
    width: 381px;
}

#headerBottom1 .content #sgFlash object,
#headerBottom1 .content #sgFlash object embed
{
    height: 277px;
    width: 381px;
}
/* EOF flash player */

#headerBottom1 .content #hb1TL
{
    width: 500px;
    float: right;
    background: transparent url(/imgs/css/hb1_tl.gif) 0 0 no-repeat;
    padding-top: 5px;
}

#headerBottom1 .content #hb1TL #hb1BL
{
    background: transparent url(/imgs/css/hb1_bl.gif) 0 100% no-repeat;
    padding-bottom: 5px;
}

#headerBottom1 .content #hb1TL #hb1BL > div
{
    background: #dce2ec url(/imgs/css/hb1_border.gif) 230px 0 repeat-y;
    min-height: 150px;
}

#headerBottom1 .content .left .siteHead,
#headerBottom1 .content .right .siteHead
{
	margin-bottom: 0.5em;
}

#headerBottom1 .content .left
{
    float: left;
    width: 200px;
    padding: 2px 10px 5px 20px;
    margin: 5px 0;
}

#headerBottom1 .content .left ul li
{
    padding: 0.1em 0 0.6em 20px;
    background: transparent url(/imgs/css/lst_panel.png) 0 0 no-repeat;
}

#headerBottom1 .content .right
{
    float: right;
    width: 240px;
    padding: 2px 10px 5px 20px;
    margin: 5px 0;
}


/* ===================== separator */

#hbSep .content
{
    background-color: #edf0f5; 
}

#hbSep .content #hbSepLB
{
    border-left: 5px solid #dce2ec;
    padding-bottom: 1.5em;
}

/* ===================== with box */

#headerBottom2
{
    background: transparent url(/imgs/css/top_bg_half_fff.gif) 50% 0 repeat-y;
}

#headerBottom2 .content
{
    background: #edf0f5 url(/imgs/css/bg_grad.png) 0 100% repeat-x;
}

#headerBottom2 .content #hb2Left
{
    background: transparent url(/imgs/css/hb2_left.gif) 0 100% no-repeat;
}

#headerBottom2 .content #hb2TL
{
    width: 500px;
    float: right;
    background: transparent url(/imgs/css/hb2_tl.gif) 0 0 no-repeat;
    padding-top: 5px;
}

#headerBottom2 .content #hb2TL #hb2Cont
{
    background-color: #fff;
    padding: 0.5em 20px;
    min-height: 85px;
    font-size: 120%;
}

#headerBottom2 .content #hb2TL #hb2Cont a
{
    text-indent: -4000em;
    background: transparent url(/imgs/css/btn_test_red.png) 0 0 no-repeat;
    width: 179px;
    height: 25px;
    display: block;
    float: right;
    outline: none;
    margin-top: 1em;
}

#headerBottom2 .content #hb2TL #hb2Cont a:hover
{
    background-position: 0 -25px;
}

/* ===================================================== middle */

/* ===================== advantages */

#sgAdvantages
{
    background-color: #fff;
    margin: 2em 0;
    border-top: 1em solid #fff;
}
/*
#sgAdvantages #sgAdvTL
{
    background: transparent url(/imgs/css/advantages_tl.gif) 0 0 no-repeat;
}

#sgAdvantages #sgAdvRT
{
    background: transparent url(/imgs/css/advantages_rt.gif) 100% 0 no-repeat;
}

#sgAdvantages #sgAdvBR
{
    background: transparent url(/imgs/css/advantages_br.gif) 100% 100% no-repeat;
    padding-top: 7px;
}

#sgAdvantages #sgAdvLB
{
    background: transparent url(/imgs/css/advantages_lb.gif) 0 100% no-repeat;
    padding: 3px 20px 10px 20px;
}*/

#sgAdvCol1 {
    float: left;
    width: 410px;
}

#sgAdvCol1 table {
    width: 100%;
    font-size: 110%;
    border-collapse: collapse;
    border-spacing: 0;
}

#sgAdvCol1 table thead th {
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    font-size: 110%;
    border-bottom: 2px solid #b8c4d9;
    padding: 0.7em 5px;
}

#sgAdvCol1 table tbody td {
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid #b8c4d9;
    padding: 0.7em 5px;
}

#sgAdvCol1 table tbody th,
#sgAdvCol1 table tfoot th {
    font-weight: normal;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #b8c4d9;
    padding: 0.7em 5px;
}

#sgAdvCol1 table tfoot td {
    text-align: center;
    font-size: 110%;
    font-weight: bold;
    color: #10387d;
    vertical-align: middle;
    padding: 0.2em 5px;
}

#sgAdvCol1 table tfoot th {
    border-bottom-width: 0;
}

#sgAdvCol2 {
    float: right;
    width: 425px;
}

#screens {
    position: relative;
    background: transparent url(/imgs/css/screens.png) 0 0 no-repeat;
    padding-top: 205px;
    padding-bottom: 120px;
}

#screens #screensMain {
    position: absolute;
    left: 2px;
    top: 7px;
    width: 420px;
    height: 195px;
}

#screens ul {
    position: absolute;
    left: 2px;
    bottom: 0;
}

#screens ul li {
    float: left;
    padding-bottom: 40px;
    margin-right: 10px;
    background: transparent url(/imgs/css/screens_grad.png) 0 100% repeat-x;
}


/*
#sgAdvCol1 {
    float: left;
    width: 370px;
    font-size: 110%;
}

#sgAdvCol1 h4 {
    font-size: 100%;
    margin-top: 1em;
}

#sgAdvCol1 ol {
    margin: 2.5em 0;
    line-height: 1.5em;
}

#sgAdvCol1 ol li {
    margin: 1em 0;
    padding-left: 40px;
    margin: 1em 0;
    line-height: 1.7em;
    background-image: url(/imgs/css/sg_ol_li.png);
    background-repeat: no-repeat;
}

#sgAdvCol2 #sgAdvCol1_1 {
    background-position: 0;
}

#sgAdvCol2 #sgAdvCol1_2 {
    background-position: -600px;
}

#sgAdvCol2 #sgAdvCol1_3 {
    background-position: -1200px;
}

#sgAdvCol2 a {
    font-weight: bold;
    text-decoration: none;
    float: right;
}

#sgAdvCol2 a:hover {
    text-decoration: underline;
}*/


/* ===================== steps */

#fboxSteps {
    margin: 1em 0;
}

#fboxSteps li {
    float: left;
    height: 95px;
    width: 205px;
    background-repeat: no-repeat;
    background-position: 0;
    text-indent: -10000em;
}

#fboxSteps #fboxStep1 {
    width: 195px;
}

#fboxSteps #fboxStep4 {
    width: 264px;
}

/* ===================== packages */

#packageList {
    margin-top: 1em;
}

#packageList h4 {
    background-color: #dce2ec;
    font-size: 110%;
    font-weight: bold;
    color: #000;
    padding: 0.3em 10px;
    margin: 1em 0;
}

#packageList li
{
    float: left;
    width: 196px;
    padding: 0 10px 0 12px;
    background: transparent url(/imgs/css/packages_pipe.png) 0 no-repeat;
}

#packageList li:first-child
{
    background: none;
    padding-left: 8px;
}

#packageList li .left
{
    float: left;
    width: 96px;
}

#packageList li .left a
{
    text-decoration: none;
}

#packageList li .left a strong
{
    text-transform: uppercase;
    padding-bottom: 0.7em;
    font-size: 110%;
    color: #000;
}

#packageList li .left a.color_mini:hover strong
{
    color: #cba967;
}

#packageList li .left a.color_standard:hover strong
{
    color: #6188c8;
}

#packageList li .left a.color_start:hover strong
{
    color: #73a32b;
}

#packageList li .left a.color_business:hover strong
{
    color: #f57223;
}

#packageList li .left a img
{
    margin-top: 1em;
}

#packageList li .right
{
    float: right;
    width: 100px;
}

#packageList li .right .price
{
    font-size: 160%;
    color: #10387d;
}

#packageList li .right .price small
{
    font-size: 50%;
}

#packageList li .right .price span
{
    font-size: 50%;
    display: block;
    color: #84898f;
}

#packageList li .right ul
{
    margin-top: 1em;
}

#packageList li .right ul li
{
    background: transparent url(/imgs/css/arr_navy.gif) 0 0.4em no-repeat;
    float: none;
    width: auto;
    padding: 0 0 5px 7px;
}