/*
Special thanks to Viktor Persson for the original inspiration.
*/

body {
background: #cdcdcd url(images/bg2.png) repeat-y fixed bottom center;
color: #111;
text-align: center;
font: normal 0.7em sans-serif;
}

DIV {position:relative;z-index:3;}

a {
text-decoration: none;
outline:none;
}

DIV#warn {display:none;}

DIV#logo {
width:673px;
height:155px;
position:relative;
}

DIV#logo img {
border:none;
}

DIV#bgbar{
width:100%;
height:77px;
position:absolute;
top:198px;
left:0;
z-index:1;
margin:0 auto;
background:url(images/bg_bar2.png) top repeat-x;
}

p.slogan{
position:relative;
top:-50px;
right:34px;
z-index:6;
font:italic 600 1.5em sans-serif,helvetica;
color:#2E338F;
text-align:right;
letter-spacing:1px;
font-variant:small-caps;
}

.main {
background: #fff; 
border: 4px double #EEE; 
border-color: #E4E4E4 #CFCFCF #CCC #CFCFCF;
margin: 20px auto 4px auto; 
text-align: left;
width: 700px; 
}

div.spacer{
clear:both;
float:none;
width:100%;
height:20px;
overflow:hidden;
background-color:#fafafa;
}

.container {
margin: 10px;
}

.content {
background: #fafcfa;
border-top: 1px solid #E5E5E5;
clear: both;
}

.content h3,
.content h2,
.content h1 {
margin: 0;
font: bold 1.2em sans-serif,Arial;
color: #002272;
}

.content p {
margin: 3px 0 6px;
color: #111;
}

#tel .content p,
#ab .content p {
text-indent:15px;
margin-bottom:10px;
}

#contact {
width:100%;
height:40px;
position:relative;
left:220px;
z-index:5;
margin-top:-15px;
padding: 0;
clear:both;
list-style: none;
outline:0;
}

#contact li a {
display:block;
width:152px;
height:40px;
float:left;
text-decoration:none;
padding:0;
margin:0;
outline:0;
border:0;
}

#phone a {
background:transparent url('images/phone_sprite.jpg') no-repeat 0 0;
cursor:default;
}

#mail a {
background:transparent url('images/emailus_sprite.jpg') no-repeat 0 0;
margin-top:1px;
}

#quote a {
background:transparent url('images/quote_sprite.jpg') no-repeat 0 0;
margin-top:2px;
}

li#quote a:hover,
li#mail a:hover {
background-position:-1px -40px;
}

DIV.trio {
background:url(images/bg_clouds3.jpg) top no-repeat;
margin:0;
padding:0;
padding-top:12px;
width:100%;
height:400px;
}

DIV.trio img {
position:relative;
bottom:0px;
margin:0 auto;
margin-top:-12px;
display:block;
border:none;
float:left;
}

#header{
background:url(images/header.jpg) top no-repeat;
margin:0;
padding:0;
padding-top:12px;
width:680px;
height:335px;
}

#rightgap{
width:70px;
height:120px;
float:right;
}

#box28 {
margin:0 auto;
width:95%;
height:35px;
}

#top28 {
margin:0 auto;
margin-top:5px;
padding:3px 0;
width:90%;
font:small-caps 800 14px sans-serif;
letter-spacing:0.15em;
color:#042F86;
}

#box28, #top28 {
border-top:1px solid #3C5586;
border-bottom:1px solid #3c5586;
}

div.intro{
width:93%;
margin:0 auto;
margin-top:12px;
text-indent:10px;
}

.item {
overflow:hidden;
background: #fafafa url(images/bgitem.gif) top repeat-x;
padding: 10px;
}

.item p {text-indent:12px;}

h3.header,
h2.header,
h1.header {
padding-left:5px;
padding-bottom:15px;
font: 700 2em sans-serif;
line-height: 1.25em;
font-variant:small-caps;
}

h3.prod_header,
h2.prod_header {
font:600 1.2em sans-serif;
color:#004E72;
border-bottom:1px solid #007EB9;
}

img.prod_img {
display:block;
float:left;
border:none;
}

img.prod_img a {
text-decoration:none;
}

ul.first,
ul.second {
float:left;
}

ul.first li,
ul.second li{
list-style-type:circle;
line-height:1.5em;
}

#ab ul.first {
margin-top:-5px;
}

#ab ul.first li {
line-height:2.2em;
}

ul.first li.more,
ul.second li.more {
list-style-type:none;
padding-top:5px;
}

div.prod_desc {
display:table;
width:315px;
height:130px;
float:left;
margin-left:3px;
margin-right:10px;
margin-bottom:10px;
padding:5px;
overflow:auto;
border:1px solid #D0D0D0;
background-color:#fff;
}

div.prod_desc img {
border:none;
margin-left:5px;
vertical-align:middle;
}

div.wrap {
display:table-cell;
vertical-align:middle;
background-color:#F0F0F0;
}

div.prod_desc div.l {
z-index:5;
overflow:hidden;
float:left;
}

div.prod_desc div.r {
position:relative;
overflow:hidden;
width:190px;
padding:3px 3px;
float:right;
}

.nicepix{
margin:4px 8px;
float:left;
border:4px double #d0d0d0;
}

img.trio{
margin:0 auto;
margin-left:-9px;
margin-top:5px;
}

ul.ul_fs li {
width:375px;
padding-bottom:5px;
}

#eng div.item p{
line-height:1.35em;
margin-bottom:10px;
}

.c_table {
width:100%;
clear:both;
border-collapse: collapse;
border:4px double #d0d0d0;
}
.c_table tr td {
text-align:center;
background-color:#fff;
border:1px solid #d0d0d0;
}

#info legend {
font:700 1.2em sans-serif;
}

form.reqform table.reqset tr td {
text-align:right;

}

form.reqform label {
position:relative;
top:-5px;
}

form.reqform input {
margin:5px 5px;
background-color:#fafafa;
}

table.reqset2 tr td {
padding-bottom:7px;
background-color:#fafafa;
text-align:right;
}

fieldset.ci_2 label {
margin-right:0;
padding-right:0;
font-weight:700;
}

.ci_2 input, .ci_2 textarea {
margin-left:0;
padding-left:0;
border: 1px solid #aaa;
background-color: #FCFCFC;
color:#111;
border:0;
border-bottom:1px solid #808080;
}

.ci_2 textarea {width:505px;}

.ci_2 input:focus, .ci_2 textarea:focus {
border:0;
border-bottom:1px solid #eee;
background-color: #ffffe1;
color:#000;
}

textarea#comm {
border:1px solid #d0d0d0;
margin-top:12px;
}

#button1,#button2 {
background-color: #EDF2FF;
}

#button1:hover,#button2:hover {
background-color: #D0D5E0;
}

div.addressbox {
float:none;
width:500px;
padding:5px;
margin:10px auto;
text-align:center;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
font-size:1.20em;
line-height:1.5em;
}

div.addressbox > div {
width:400px;
padding:10px;
margin:0 auto;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}

.footer {
width:674px;
height:24px;
margin:0 auto;
overflow:hidden;
padding: 3px;
background: #F5F5F5;
color: #555;
}

.w3cbox{
position:absolute;
right:5px;
top:0;
margin:0 auto;
overflow:hidden;
}

.w3cbutton3 {
float:left;
margin: 1em 0;
margin-right:7px;
padding:1px;
width: 9em;
border: 1px solid #ccc;
font:700 .85em helvetica,arial,sans-serif;
}
.w3cbutton3 a {
display: block;
width: 100%;
}
.w3cbutton3 a:link,
.w3cbutton3 a:visited,
.w3cbutton3 a:hover {
background-color: #5C5C5C;
color: #fff;
text-decoration: none;
}
.w3cbutton3 span.w3c {
padding: 0 0.4em;
background-color: #fff;
color: #0c479d;
}

.w3cbutton3 span.c {
margin-left:-0.2em;
padding-right:0.2em;
color:#454545;
}

.w3cbutton3 span.spec {
padding-left:20%;
}

.fadecontentwrapper{
position: relative;
width: 664px;
height: 376px;
padding:0;
background: #fafafa;
overflow: hidden;
}

.fadecontent{ /*style for each fade content DIV within wrapper.*/
width: 663px;
position: absolute;
background: #fafafa;
padding:0;
visibility: hidden;
margin:0 auto;
}

 .fadecontent > div{
margin:0 auto;
text-align:center;
}

.fadecontent img{
border:4px double #d0d0d0;
}

.fadecontenttoggler{ /*style for DIV used to contain toggler links.*/
width:475px;
overflow: hidden;
margin:0 auto;
}

.fadecontenttoggler a{ /*style for every navigational link within toggler */
text-decoration: none;
padding: 0 5px;
float: left;
display: block;
font-weight: bold;
color: #555;
}

#dio .fadecontenttoggler{
width:1430px;
}

#to .fadecontenttoggler {
width:1280px;
}

.fadecontenttoggler a:hover{
background: #fff;
color: blue;
}

.fadecontenttoggler a.toc{ /*style for individual toggler links (page 1, page 2, etc). ".toc" class auto generated! */
margin-right:12px;
}

.fadecontenttoggler a.prev, .fadecontenttoggler a.next{ /*style for "prev" and "next" toggler links. ".prev" and ".next" classes auto generated! */
color: black;
}

.fadecontenttoggler a.prev:hover, .fadecontenttoggler a.next:hover{
color: white;
background: black;
}

.fadecontenttoggler a.selected{ /*style for selected page's toggler link. ".selected" class auto generated! */
background: #3588E7;
color: white;
}

#io-ul {
list-style-type:none;
}

#io-ul li {
margin-bottom:12px;
padding:5px;
}

#io-ul a {
text-decoration:none;
color:#000;
display:block;
}

.io-header{
font:bold 1.3em Verdana,sans-serif;
color:#2A3090;
}

.io-desc{
font:normal 1em Verdana,sans-serif;
}

#io ul.first {
float:right;
width:70%;
}

#io ul.first li {
list-style-type:none;
}

#io ul.first li.more {
margin-bottom:25px;
}

.thecontent TABLE {
width:95%;
margin:0 auto;
background-color:#fafafa;
}

.thecontent TABLE TD {
text-align:center;
}