html {font-size: 100%;}

body {
    font-family: trebuchet ms, tahoma, arial, lucida, sans-serif;
    font-size: 0.7em;
    padding: 0px;
    margin: 0px 0px 0px 0px;
    background: #EEEEEE;
    text-align: center;
}


table {font-size: 1em;}

form {margin: 0px;}

input, textarea {
    font-family: verdana, tahoma, arial, lucida, sans-serif;
}

a {
    text-decoration: underline;
    color: #ED1B2D;
}

a:hover {text-decoration: none;}

a img {border: 0px;}

ul {text-align: left;}

ul li a{text-decoration: none;}

ul li a:hover{text-decoration: underline;}

fieldset {border: 0px; clear: left; float: left;}

script {background-color: transparent;}

h1 {
    margin: 0px; 
    padding: 0px;
    float: right;
}

h1 a {
    background-color: transparent; 
    display: block; 
    position: absolute;
    width: 417px;
    left: 20px;
    top: 23px;
    color: #111111;
    font-size: 18px;
    text-decoration: none;
    text-align: center;
}

h1 span {
    width: 417px;
    height: 52px;
    background: url('/images/logo-sapeli.jpg') left top no-repeat;
    cursor: pointer; 
    display: block; 
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0px;
}

#master {
    width: 970px;
    margin: 0px auto 0px auto;
    background: #FFFFFF;
    position: relative;
    text-align: left;
}

#header {
    width: 970px;
    height: 140px;
    position: relative;
    margin: 0px auto 0px auto;
    background: #FFFFFF url('/images/header-bg.png') left bottom no-repeat;
}

#header object {
    float: right;
    width: 533px;
    height: 140px;
    background: url('/images/header-flash-bg.jpg') left top no-repeat;
}

#mainMenu {
    list-style-type: none;
    margin: 0px auto 0px auto;
    padding: 0px 0px 0px 20px;
    width: 950px;
    _width: 970px;
    height: 35px;
    background: #ED1B2D;
}

#mainMenu li {float: left;}

#mainMenu li a {
    float: left;
    font-weight: bold;
    font-size: 1.2em;
    color: #FFFFFF;
    line-height: 35px;
    padding: 0px 10px;
}

#mainMenu li a:hover, #mainMenu li a.active {
    background: #000000;
    text-decoration: none;
}

#home {
    width: 930px;
    margin: 0px 20px;
    padding: 20px 0px 40px 0px;
}

#home p.welcome {
    font-weight: normal;
    margin: 0px;
    font-size: 1.1em;
    text-align: justify;
    line-height: 1.2em;
}

.news {
    width: 200px;
    height: 200px;
    background: #EBEBEB;
    position: relative;
    margin-top: 40px;
    float: left;
}

.news.center {
    margin-left: 10px;
    margin-right: 10px;
    display: inline;
}

.virtual {
    background: #EBEBEB;
    margin-left: 10px;
    margin-top: 40px;
    width: 284px;
    height: 200px;
    position: relative;
    z-index: 0;
    display: inline;
    float: right;
}

.virtual object {
    position: relative;
    z-index: -1;
}

.news h2, .virtual h2 {
    font-size: 1.1em;
    font-weight: bold;
    color: #FFFFFF;
    background: #ED1B2D;
    display: inline;
    padding: 2px 8px;
    margin: 0px;
    position: absolute;
    top: -22px;
    left: 0px;
}

.news img {
    margin: 12px 0px 0px 14px;
    float: left;
}

.news.noMargin img {margin: 0px;}

.news h3 {
    clear: left;
    margin: 0px 0px 0px 14px;
    padding-top: 4px;
    font-size: 1.25em;
}

.news p {
    margin: 4px 14px 0px 14px;
    font-size: 1.1em;
    line-height: 1.2em;
    text-align: justify;
}

.news a.moreInfo {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    padding: 2px 10px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    background: #000000;
}

.news a.moreInfo span {
    width: 6px;
    height: 20px;
    display: block;
    position: absolute;
    right: -6px;
    top: 1px;
    background: url('/images/more-info-arrow.gif') right top no-repeat;
}

.virtual a.moreInfo {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    padding: 2px 10px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    background: #000000;
}

.virtual a.moreInfo span {
    width: 6px;
    height: 20px;
    display: block;
    float: right;
    background: url('/images/more-info-arrow.gif') right top no-repeat;
    position: absolute;
    right: -6px;
    top: 1px;
}

.refH2 {
    font-size: 1.1em;
    font-weight: bold;
    color: #FFFFFF;
    margin: 0px;
    border-bottom: 5px solid #EBEBEB;
}

.refH2 span {
    background: #ED1B2D;
    padding: 2px 8px;
    position: relative;
    top: -2px;
}

.ref {
    width: 300px;
    height: 100px;
    float: left;
    margin-top: 20px;
    display: inline;
    margin-left: 10px;
    position: relative;
}

.ref.right {
    float: right;
    margin-left: 0px;
}

.ref img {
    float: left;
    margin-right: 12px;
}

.ref span {
    display: block;
    width: 10px;
    height: 10px;
    font-size: 5px;
    position: absolute;
    top: 90px;
    left: 90px;
    background: #ED1B2D url('/images/ico-plus.png') left top no-repeat;
}

.ref h3 {
    color: #ED1B2D;
    font-size: 1.25em;
    margin: 0px 0px 4px 0px;
}

.ref p {
    color: #000000;
    font-size: 0.9em;
    margin: 0px;
    line-height: 1.2em;
}

#hRight {
    margin-top: 20px;
    padding-bottom: 40px;
    width: 300px;
    float: left;
}

#hRight h2 {
    font-size: 1.1em;
    font-weight: bold;
    color: #FFFFFF;
    background: #ED1B2D;
    display: inline;
    padding: 2px 8px;
    margin: 0px;
    position: relative;
    top: -2px;
}

#hRight object {border: 0px solid red; margin-bottom: 15px;}

#hRight .blackBox {
    width: 300px;
    padding: 7px 0px;
    margin-bottom: 10px;
    background: #000000;
    color: #FFFFFF;
}
#hRight .blackBox p { margin: 0px 10px;}
#hRight .blackBox p b { font-size: 1.2em;}
#hRight .blackBox p a  { color: #FFFFFF;}

#main {
    width: 970px;
    margin: 0px auto 0px auto;
    background: #FFFFFF url('/images/main-bg.png') left top repeat-y;
}

ul#sideMenu {
    width: 200px;
    float: left;
    margin: 0px 0px 0px 10px;
    padding: 20px 0px 0px 0px;
    list-style-type: none;
}

ul#sideMenu li {display: inline;}

ul#sideMenu li a {
    font-weight: bold;
    font-size: 1.2em;
    color: #000000;
    padding: 0px 0px 0px 15px;
    margin: 4px 0px;
    display: block;
    background: url('/images/menu1-it.png') left 3px no-repeat;
}

ul#sideMenu li a.active {
    color: #666666;
    background: url('/images/menu1-it-a.png') left 3px no-repeat;
}

ul#sideMenu li ul {
    background: #F2F2F2;
    margin: 0px 0px 10px 0px;
    padding: 4px 0px;
    float: none;
}

ul#sideMenu li ul li a {
    padding-left: 36px;
    margin: 0px;
    background: url('/images/menu2-it.png') 26px 3px no-repeat;
}

ul#sideMenu li ul li a.active {
    color: #666666;
    background: url('/images/menu2-it-a.png') 26px 3px no-repeat;
}

ul#sideMenu li ul li ul {
    margin: 4px 0px 4px 0px; 
    float: none;
    padding: 0px;
}

ul#sideMenu li ul li ul li {
    padding: 0px;
}

ul#sideMenu li ul li ul li a {
    font-size: 1.1em;
    padding-left: 58px;
    background: url('/images/menu3-it.png') 46px 6px no-repeat;
}

ul#sideMenu li ul li ul li a.active {
    color: #666666;
    background: url('/images/menu3-it-a.png') 46px 6px no-repeat;
}

ul#sideMenu li ul li ul li ul {margin: 4px 0px 6px 0px;}

ul#sideMenu li ul li ul li ul li a {
    font-size: 1.1em;
    padding: 0px 0px 0px 78px;
    line-height: 1.2em;
    background: url('/images/menu3-it.png') 66px 4px no-repeat;
}

ul#sideMenu li ul li ul li ul li a.active {
    color: #666666;
    background: url('/images/menu3-it-a.png') 66px 4px no-repeat;
}

#mainR {
    width: 700px;
    float: right;
    margin-top: 20px;
    margin-right: 25px;
    padding-bottom: 40px;
    text-align: left;
}

#mainR p#path {
    font-size: 1em;
    font-weight: bold;
    padding-left: 12px;
    margin: 0px 0px 12px 0px;
    background: url('/images/red-square.png') 0px 4px no-repeat;
}

#mainR h2 {
    color: #ED1B2D;
    font-size: 1.55em;
    margin: 0px 0px 10px 0px;
}

#mainR h3 {
    font-size: 1.3em;
    margin-bottom: 0px;
}

#mainR p {
    font-size: 1.1em;
    line-height: 1.3em;
    margin-top: 5px;
}

#mainR table.top td {vertical-align: top;}


#preFooter {
    width: 970px;
    height: 18px;
    clear: both;
    margin: 0px auto 0px auto;
    background: url('/images/pre-footer-bg.png') left top no-repeat;
}

#footer {
    width: 970px;
    height: 35px;
    margin: 0px auto 0px auto;
    background: #ED1B2D;
}

#footer p {
    color: #FFFFFF;
    line-height: 35px;
    padding-left: 25px;
    margin: 0px;
    width: 550px;
    float: left;
}
#footer p a {color: #FFFFFF;}

#footer ul {
    float: right;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    width: 300px; 
    margin-right: 15px;
}

#footer ul li {float: right;}

#footer ul li a {
    display: block;
    color: #FFFFFF;
    font-size: 1.2em;
    line-height: 35px;
    font-weight: bold;
    padding: 0px 10px;
}

#footer ul li a:hover {
    background: #000000;
    text-decoration: none;
}

.ceniky table td {
    background: #E3E3E3;
    padding: 8px;
    text-align: center;
}

.ceniky table td img {
    
}

.ceniky table tr.svetla td {
    background: #FFFFFF;
}

p.lines {clear: left; float: none; margin: 20px 0px 0px 0px; line-height: 40px;}
p.lines img {float: left; margin-left: 5px;}

p.cont {
    float: left;
    margin-right: 40px;
}

.form input.bgred, .form textarea.bgred {background: #FDE1E3;}
.form label.red {color: #ED1B2D;}

.form td img {float: left;}

.products {
    width: 160px;
    height: 230px;
    margin-right: 20px;
    float: left;
    font-size: 18px;
    text-align: center;
    font-weight: bold;
} 

.refs {
    width: 160px;
    height: 230px;
    margin-right: 20px;
    float: left;
    font-size: 1em;
    text-align: center;
}

.actions {
    width: 180px;
    height: 230px;
    margin-right: 20px;
    float: left;
    font-size: 1em;
}

.list {
    list-style-type: none;
    margin: 10px 0px;
    padding: 0px; 
}

.list li {
    padding-left: 15px;
    margin-bottom: 4px;
    background: url('/images/red-square.png') 0px 6px no-repeat;   
}

#popupAkce {
    width: 440px;
    height: 630px;
    display: block;
    position: absolute; 
    top: -70px;
    left: -200px;
    z-index: 6001;
    background: #000000;
    text-align: center;
    border: 1px solid #FFFFFF;
}

#popupAkce img.act {
    margin: 10px 20px;
}

#popupAkce img.btnClose {
    float: right;
    margin: 5px 15px 0px 0px;
}

#popupAkce a { color: #FFFFFF; text-align: center; font-size: 14px; }


#outerMsgErr {float: left; width: 720px; height: 60px; background: #F7FBFF; border: 2px solid #CC3300; margin-bottom: 10px;}
#outerMsgOk {float: left; width: 720px; height: 60px;  background: #F7FBFF; border: 2px solid #009900; margin-bottom: 10px;}
#innerMsgErr {margin: 0px 5px 5px 5px; width: 600px; display: table; height: 60px; #position: relative; overflow: hidden; background: url('/images/message-no.png') left top no-repeat; color: #CC3300; line-height: 15px;}
#innerMsgOk {margin: 0px 5px 5px 5px; width: 600px; display: table; height: 60px; #position: relative; overflow: hidden; background: url('/images/message-yes.png') left top no-repeat; color: #009900; line-height: 15px;}
#middleMsg {#position: absolute; #top: 50%; left: 0px; display: table-cell; vertical-align: middle; text-align: left;}
#inMsg {width: 350px; margin-left: 120px; #position: relative; #top: -50%; font-weight: bold; font-size: 12px;}


.cleaner {clear: both;}
span.cleaner {display: block;}
.cleaner40 {clear: both; height: 40px;}

#praktik {margin-bottom: 100px;}
#natur {margin-bottom: 150px;}