@charset "utf-8";

/************************************************************************************
RESET
*************************************************************************************/

* :focus {outline: 0;}
* {margin: 0; padding: 0;}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table { border-collapse: collapse; border-spacing: 0;}

/************************************************************************************
BASIC
*************************************************************************************/

body { 

 margin: 0px;
 	background: #6B2B5C\9;
 background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#301E56), color-stop(100%,#7B2E5D));
 background: -webkit-linear-gradient(45deg, #301E56 0%,#7B2E5D 100%);
 background: -moz-linear-gradient(45deg, #301E56 0%, #7B2E5D 100%);
 background: -ms-linear-gradient(45deg, #301E56 0%,#7B2E5D 100%);
 background: -o-linear-gradient(45deg, #301E56 0%,#7B2E5D 100%);
 background: linear-gradient(45deg, #301E56 0%,#7B2E5D 100%) fixed 0% 0% transparent ;
 background-attachment: fixed;
}
#wrapper { width: 100%; }
/************************************************************************************
HEADER
*************************************************************************************/
header { padding: 10px; }
header #heading-wrapper { 
 	background: #FFFFFF\9;
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#C8C0C7));
 background: -webkit-linear-gradient(top, #FFFFFF, #C8C0C7);
 background: -moz-linear-gradient(top, #FFFFFF, #C8C0C7); 
 background: -ms-linear-gradient(top, #FFFFFF, #C8C0C7); 
 background: -o-linear-gradient(top, #FFFFFF, #C8C0C7);
 background: linear-gradient(top, #FFFFFF 0%,#C8C0C7 100%) 0% 0% transparent ;
 padding: 24px 24px 20px 24px;
 -moz-border-radius:10px; -webkit-border-radius:10px; -o-border-radius:10px; -ms-border-radius:10px; -khtml-border-radius:10px; border-radius:10px; 
 min-width: 134px; 
}
header #heading-wrapper h1 a { display: block; width: 134px; height: 46px; background: url(../images/Cherto_logo.png) 0 0 no-repeat; text-indent: 100%; overflow: hidden; white-space: nowrap; }

header nav {   }

#menu-icon { display: none; }

.uti #nav, .symptoms #nav, .usage #nav, .contacts #nav {display: none; }
.uti #menu-icon,
.symptoms #menu-icon,
.usage #menu-icon,
.contacts #menu-icon { 
 display: block;
 padding: 14px 24px;
 margin: 5px 0 -2px 0;
 font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #252525; text-decoration: none; font-size: 14px;
 background: #FFFFFF\9;
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#C8C0C7));
 background: -webkit-linear-gradient(top, #FFFFFF, #C8C0C7);
 background: -moz-linear-gradient(top, #FFFFFF, #C8C0C7); 
 background: -ms-linear-gradient(top, #FFFFFF, #C8C0C7); 
 background: -o-linear-gradient(top, #FFFFFF, #C8C0C7);
 background: linear-gradient(top, #FFFFFF 0%,#C8C0C7 100%) 0% 0% transparent ;
 -moz-border-radius:10px; -webkit-border-radius:10px; -o-border-radius:10px; -ms-border-radius:10px; -khtml-border-radius:10px; border-radius:10px; 
 cursor: pointer;
 min-width: 134px;
}
.uti #menu-icon.active,
.symptoms #menu-icon.active,
.usage #menu-icon.active,
.contacts #menu-icon.active {
 background: #AE96AB url(../images/bg_menu-icon.png) 93% 50% no-repeat;
}

#nav { padding: 7px 0 0 0; }
#nav li {
 display: inline-block;
 	display: block\9; float: left\9; 
 zoom:1;
 min-width: 182px;
 width: 100%;
 margin: 0px 0px 5px 0px;
}
#nav a {
 display: block;
 padding: 14px 24px;
 margin: 0px;
 font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #252525; text-decoration: none; font-size: 14px;
 background: #FFFFFF\9;
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#C8C0C7));
 background: -webkit-linear-gradient(top, #FFFFFF, #C8C0C7);
 background: -moz-linear-gradient(top, #FFFFFF, #C8C0C7); 
 background: -ms-linear-gradient(top, #FFFFFF, #C8C0C7); 
 background: -o-linear-gradient(top, #FFFFFF, #C8C0C7);
 background: linear-gradient(top, #FFFFFF 0%,#C8C0C7 100%) 0% 0% transparent ;
 -moz-border-radius:10px; -webkit-border-radius:10px; -o-border-radius:10px; -ms-border-radius:10px; -khtml-border-radius:10px; border-radius:10px;
}

#language, #language-en {
 display: block; width: 100%; height: 30px; overflow: hidden;
 background: #251D32\9;
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#251D32), to(#110910));
 background: -webkit-linear-gradient(top, #251D32, #110910);
 background: -moz-linear-gradient(top, #251D32, #110910); 
 background: -ms-linear-gradient(top, #251D32, #110910); 
 background: -o-linear-gradient(top, #251D32, #110910);
 background: linear-gradient(top, #251D32 0%,#110910 100%) 0% 0% transparent;
 
}
#language a, #language-en a {
 display: block;
 float: right;
 height: 30px;
 font-family: Verdana, Arial, Helvetica, sans-serif; color: #E8D0DF; font-size: 12px; font-weight: bold; text-decoration: none; line-height: 30px;
 background: url(../images/lang_ico_EN.png) 0 50% no-repeat;
 padding: 0 15px 0 20px;
}
#language-en a { background: url(../images/lang_ico_BG.png) 0 50% no-repeat; }


#content nav {display: none; }

#alt-content {text-align: center;}
#alt-content img {width: 100%; max-width: 355px; }
#alt-content h1 { font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; margin: 7px 10% 15px 10%; font-size: 20px; line-height: 24px; }
#alt-content p {font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 13px; margin: 10px 10%;}
#alt-content ul {font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 13px; margin: 10px 10%;}
#alt-content ul li {margin: 10px; list-style: disc;}
#alt-content #more-content { font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 14px; line-height: 18px; margin: 10px 10%; display: none; text-align: left; }
#alt-content #more-content p { margin: 16px 0;  }
#alt-content #more-content ol { margin: 16px 0;} 
#more-content ul li { list-style-type: disc; margin: 0 0 0 28px;}
#more-content ol li { list-style-type: decimal; margin: 0 0 0 28px; }
#more-content h2 { margin: 16px 0; font-size: 18px; line-height: 22px; }

.cont1 h1, .cont2 h1, .cont3 h1, .cont4 h1 { font-family: Verdana, Arial, Helvetica, sans-serif; color: #fff; margin: 8px 10px 20px 10px; text-align: center; font-size: 20px; word-wrap: break-word; }
.cont4 h1 a { color: #fff; text-decoration: none; }
.uti #scroll-pane,
.symptoms #scroll-pane,
.usage #scroll-pane,
.contacts #scroll-pane { 
 background: #fff; 
 padding: 15px; 
 font-family: Verdana, Arial, Helvetica, sans-serif; 
 color: #252525; 
 font-size: 13px; 
 line-height: 16px; 
 margin: 0 10px;
 -moz-border-radius:10px; -webkit-border-radius:10px; -o-border-radius:10px; -ms-border-radius:10px; -khtml-border-radius:10px; border-radius:10px;
}

#scroll-pane ul, #scroll-pane ol { margin: 10px 0;} 
#scroll-pane ul li { list-style-type: disc; margin: 0 0 3px 26px;}
#scroll-pane ol li { list-style-type: decimal; margin: 0 0 3px 26px; } 

.uti #scroll-pane section h2, .usage #scroll-pane section h2 { font-weight: bold; font-size: 18px; margin: 10px 0; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 22px; color: #5C275A; }
.uti #scroll-pane section p, .usage #scroll-pane section p { margin: 10px 0;}
.uti #scroll-pane section, .usage #scroll-pane section { border-bottom: #1A7ED2 1px dotted; padding: 0 0 10px 0; }
.uti #scroll-pane section:last-child, .usage #scroll-pane section:last-child { border-bottom: none; }
.uti #scroll-pane strong, .usage #scroll-pane strong { font-weight: bold; }

.usage #scroll-pane em { font-style: italic; font-size: 10px; line-height: 10px;}
.usage #scroll-pane .p-2 em { font-style: italic; display: block; margin-top: 10px; font-size: inherit; line-height: inherit;}

.usage #scroll-pane .p-1 { float: left; display: block; border-bottom: #5F2B55 1px dotted; padding-bottom: 14px; word-wrap: break-word; }
.usage #scroll-pane .p-1 img { float: right; width: 100%; max-width: 174px; margin: -20px 0 0 5px; }
.usage #scroll-pane .p-1:before { content: "1"; display: block; width: 20px; height: 20px; background: #5F2B55; color:#C4B4C1; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-align: center; line-height: 20px; margin: 0 0 5px 0; -moz-border-radius:10px; -webkit-border-radius:10px; -o-border-radius:10px; -ms-border-radius:10px; -khtml-border-radius:10px; border-radius:10px; }

.usage #scroll-pane .p-2 { float: left; display: block; border-bottom: #5F2B55 1px dotted; padding-bottom: 14px; word-wrap: break-word; }
.usage #scroll-pane .p-2 img { width: 100%; max-width: 299px; margin: 5px 0 20px 0; }
.usage #scroll-pane .p-2:before { content: "2"; display: block; width: 20px; height: 20px; background: #5F2B55; color:#C4B4C1; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-align: center; line-height: 20px; margin: 0 0 5px 0; -moz-border-radius:10px; -webkit-border-radius:10px; -o-border-radius:10px; -ms-border-radius:10px; -khtml-border-radius:10px; border-radius:10px; }
.usage #scroll-pane .p-2 .alt {display: none;}

.usage #scroll-pane .p-3 { float: left; display: block; border-bottom: #5F2B55 1px dotted; padding-bottom: 14px; word-wrap: break-word; }
.usage #scroll-pane .p-3 img { float: right; width: 100%; max-width: 192px; margin: -18px 0 10px 0; }
.usage #scroll-pane .p-3:before { content: "3"; display: block; width: 20px; height: 20px; background: #5F2B55; color:#C4B4C1; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-align: center; line-height: 20px; margin: 0 0 5px 0; -moz-border-radius:10px; -webkit-border-radius:10px; -o-border-radius:10px; -ms-border-radius:10px; -khtml-border-radius:10px; border-radius:10px; }

.usage #scroll-pane .p-4 { float: left; display: block; word-wrap: break-word; }
.usage #scroll-pane .p-4 img {  width: 100%; max-width: 281px; margin: -18px 0 3px 0; }
.usage #scroll-pane .p-4:before { content: "4"; display: block; width: 20px; height: 20px; background: #5F2B55; color:#C4B4C1; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-align: center; line-height: 20px; margin: 0 0 5px 0; -moz-border-radius:10px; -webkit-border-radius:10px; -o-border-radius:10px; -ms-border-radius:10px; -khtml-border-radius:10px; border-radius:10px; }

.usage #scroll-pane .note { display: block; background: #E5D5E5; padding: 7px 7px 7px 10px; color: #351241; -moz-border-radius:10px; -webkit-border-radius:10px; -o-border-radius:10px; -ms-border-radius:10px; -khtml-border-radius:10px; border-radius:10px;}
.usage #scroll-pane ul {clear: both; }

.symptoms #scroll-pane strong { font-weight: bold; color: #5C275A; }
.symptoms #scroll-pane ul li  { margin: 0 0 0 26px; }

.contacts #scroll-pane section h2 {margin: 7px 0; }
.contacts #scroll-pane section h2 a { color: #502855; font-size: 26px; text-decoration: none; line-height: 28px; }
.contacts #scroll-pane section p { margin: 16px 0;}

.contacts #contact-form {border-top: #1A7ED2 1px dotted; padding: 10px 0 0 0; }

.contacts #contact-form h2 { font-weight: bold; font-size: 16px; margin: 10px 0; }
.contacts #contact-form label {display: none; }
.contacts #contact-form input { 
 display: block;
 width: 90%;
 max-width: 300px;
 padding: 0px 10px;
 margin: 10px 0;
 height: 30px;
 font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #252525; text-decoration: none; font-size: 12px; line-height: 30px;
 background: #FFFFFF\9;
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DFDFDF), to(#FFFFFF));
 background: -webkit-linear-gradient(top, #DFDFDF, #FFFFFF);
 background: -moz-linear-gradient(top, #DFDFDF, #FFFFFF); 
 background: -ms-linear-gradient(top, #DFDFDF, #FFFFFF); 
 background: -o-linear-gradient(top, #DFDFDF, #FFFFFF);
 background: linear-gradient(top, #DFDFDF 0%,#FFFFFF 100%) 0% 0% transparent;
 border: #585858 1px solid;
 -moz-border-radius:6px; -webkit-border-radius:6px; -o-border-radius:6px; -ms-border-radius:6px; -khtml-border-radius:6px; border-radius:6px;
}

.contacts #contact-form textarea { 
 display: block;
 width: 90%;
 max-width: 300px;
 padding: 10px;
 margin: 10px 0;
 height: 90px;
 font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #252525; text-decoration: none; font-size: 12px; ;
 background: #FFFFFF\9;
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DFDFDF), to(#FFFFFF));
 background: -webkit-linear-gradient(top, #DFDFDF, #FFFFFF);
 background: -moz-linear-gradient(top, #DFDFDF, #FFFFFF); 
 background: -ms-linear-gradient(top, #DFDFDF, #FFFFFF); 
 background: -o-linear-gradient(top, #DFDFDF, #FFFFFF);
 background: linear-gradient(top, #DFDFDF 0%,#FFFFFF 100%) 0% 0% transparent;
 border: #585858 1px solid;
 -moz-border-radius:6px; -webkit-border-radius:6px; -o-border-radius:6px; -ms-border-radius:6px; -khtml-border-radius:6px; border-radius:6px;
 resize: none;
}

.contacts #contact-form input[type=submit] { 
 display: block;
 width: 90%;
 max-width: 200px;
 margin: 10px 0;
 height: 30px;
 font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #FFFFFF; text-decoration: none; font-size: 14px; line-height: 30px;
 background: #2983D0\9;
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2B99F2), to(#276BAC));
 background: -webkit-linear-gradient(top, #2B99F2, #276BAC);
 background: -moz-linear-gradient(top, #2B99F2, #276BAC); 
 background: -ms-linear-gradient(top, #2B99F2, #276BAC); 
 background: -o-linear-gradient(top, #2B99F2, #276BAC);
 background: linear-gradient(top, #2B99F2 0%,#276BAC 100%) 0% 0% transparent;
 border: none;
 -moz-border-radius:6px; -webkit-border-radius:6px; -o-border-radius:6px; -ms-border-radius:6px; -khtml-border-radius:6px; border-radius:6px;
 cursor: pointer;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1) inset, 0px 1px 5px rgba(0, 0, 0, 0.25);
}

.contacts #contact-form input:-moz-placeholder{color:#6B6B6B}
.contacts #contact-form input:-ms-input-placeholder{color:#6B6B6B}
.contacts #contact-form textarea:-moz-placeholder{color:#6B6B6B}
.contacts #contact-form textarea:-ms-input-placeholder{color:#6B6B6B}

.contacts #contact-form .tiny-mssg { font-style: italic; font-size: 11px; }
.contacts #sending { border-top: #1A7ED2 1px dotted; padding: 10px 0 0 0; }
.contacts #sending h3 { color: #1A7ED2; font-size: 20px; font-weight: bold; margin: 10px 0; }
.contacts #sending .back a {display: block; background: url(../images/arrow_back.png) 0 50% no-repeat; padding: 7px 0 7px 45px; margin: 5px 0; color: #1A7ED2; font-weight: bold; text-decoration: none; }
.contacts #sending .mssg-ok { font-weight: bold; margin: 13px 0; }

#mfooter { 
 font-family: Verdana, Arial, Helvetica, sans-serif; 
 font-size: 13px;
 font-weight: bold;
 text-align: center;
 color: #252525;
 line-height: 16px; 
 background: #fff; 
 padding: 20px 0 30px 0;
 width: 100%;
}
#mfooter p { margin: 0 10%; }
.uti #mfooter, .symptoms #mfooter, .usage #mfooter, .contacts #mfooter { background: none; color: #fff; }

#nfooter { display: none; }

@media screen and (min-width: 410px) and (max-width: 746px) {
.uti #menu-icon, .symptoms #menu-icon, .symptoms-en #menu-icon, .usage #menu-icon, .contacts #menu-icon { display: none; }
.uti #nav, .symptoms #nav, .usage #nav, .contacts #nav {display: block !important;}
#nav li {
 width: 50%;
 margin: 0px -5px 5px 0px;
}
#nav li a {
 padding: 14px 19px 14px 24px;
 margin: 0 5px 0 0;
}
#nav li+li a {margin: 0;}
#nav li+li+li a {margin: 0 5px 0 0;}
#nav li+li+li+li a {margin: 0;}

#alt-content h1 { margin: 12px 10%; font-size: 26px; line-height: 30px; }

.cont1 h1, .cont2 h1, .cont3 h1, .cont4 h1 { text-align: left; font-size: 22px; margin: 8px 15px 20px 15px;}

.contacts #scroll-pane section h2 a { color: #1A7ED2; font-family: Arial, Helvetica, sans-serif; font-size: 32px;  }

.usage #scroll-pane .p-1 { width: 100% }
.usage #scroll-pane .p-1:before { content: "1"; float: left; margin: 0 10px 0 0; }
.usage #scroll-pane .p-1 img { float: left; margin: 0 15px 0 5px; }

.usage #scroll-pane .p-2 img { display: none;}
.usage #scroll-pane .p-2:before { content: "2"; float: left; margin: 0 10px 0 0; }
.usage #scroll-pane .p-2 .alt { display: block; float: left; margin: 0 15px 15px 0;}

.usage #scroll-pane .p-3 img { float: left; margin: 0 10px 10px 0; }
.usage #scroll-pane .p-3:before { content: "3"; float: left; margin: 0 10px 0 0; }

.usage #scroll-pane .p-4 { float: left; display: block; word-wrap: break-word; }
.usage #scroll-pane .p-4 img { float: left; margin: 0 15px 3px 0; }
.usage #scroll-pane .p-4:before { content: "4"; float: left; margin: 0 10px 0 0; }



}

@media screen and (min-width: 747px) and (max-width: 949px) {
.uti #menu-icon, .symptoms #menu-icon, .symptoms-en #menu-icon, .usage #menu-icon, .contacts #menu-icon { display: none; }
.uti #nav, .symptoms #nav, .usage #nav, .contacts #nav {display: block !important;}
#nav li {
 width: 25%;
 margin: 0px -7px 7px 0px;
}
#nav li a {
 padding: 14px 19px 14px 24px;
 margin: 0 9px 0 0;
}
#nav li+li+li+li a {margin-right: -9px;}

#alt-content h1 { margin: 12px 20%; font-size: 26px; line-height: 30px; }
#alt-content p { margin: 3px 10%;}
#alt-content ul { margin: 3px 10% 12px 10%;}
#alt-content ul li {margin: 3px;}

.cont1 h1, .cont2 h1, .cont3 h1, .cont4 h1 { text-align: left; font-size: 24px; margin: 5px 15px 20px 15px;}

.symptoms #scroll-pane strong { font-size: 16px; }

.contacts #scroll-pane section h2 a { color: #1A7ED2; font-family: Arial, Helvetica, sans-serif; font-size: 38px;  }


.usage #scroll-pane .p-1 { width: 100% }
.usage #scroll-pane .p-1:before { content: "1"; float: left; margin: 0 10px 0 0; width: 28px; height: 28px; line-height: 28px; margin: 0 0 5px 0; -moz-border-radius:14px; -webkit-border-radius:14px; -o-border-radius:14px; -ms-border-radius:14px; -khtml-border-radius:14px; border-radius:14px; font-size: 18px;}
.usage #scroll-pane .p-1 img { float: left; margin: 0 15px 0 5px; }

.usage #scroll-pane .p-2 img { display: none;}
.usage #scroll-pane .p-2:before { content: "2"; float: left; margin: 0 10px 0 0; width: 28px; height: 28px; line-height: 28px; margin: 0 0 5px 0; -moz-border-radius:14px; -webkit-border-radius:14px; -o-border-radius:14px; -ms-border-radius:14px; -khtml-border-radius:14px; border-radius:14px; font-size: 18px;}
.usage #scroll-pane .p-2 .alt { display: block; float: left; margin: 0 15px 15px 0;}

.usage #scroll-pane .p-3 img { float: left; margin: 0 10px 10px 0; }
.usage #scroll-pane .p-3:before { content: "3"; float: left; margin: 0 10px 0 0; width: 28px; height: 28px; line-height: 28px; margin: 0 0 5px 0; -moz-border-radius:14px; -webkit-border-radius:14px; -o-border-radius:14px; -ms-border-radius:14px; -khtml-border-radius:14px; border-radius:14px; font-size: 18px; }

.usage #scroll-pane .p-4 { float: left; display: block; word-wrap: break-word; }
.usage #scroll-pane .p-4 img { float: left; margin: 0 15px 3px 0; }
.usage #scroll-pane .p-4:before { content: "4"; float: left; margin: 0 10px 0 0;  width: 28px; height: 28px; line-height: 28px; margin: 0 0 5px 0; -moz-border-radius:14px; -webkit-border-radius:14px; -o-border-radius:14px; -ms-border-radius:14px; -khtml-border-radius:14px; border-radius:14px; font-size: 18px; }



}

@media screen and (min-width: 950px) {
body { 
 position: absolute;
 top: 50%;
 margin-top: -275px;/* half of #wrapper height*/
 left: 0;
 width: 100%;
 background: #FFFFFF;
}
#wrapper { 
 width: 100%;
 margin-left: auto;
 margin-right: auto;
 height: 550px;
}
#wrapper.home {background: url(../images/bg_home.jpg) 50% 50% no-repeat;}
#wrapper.uti, #wrapper.symptoms, #wrapper.usage, #wrapper.contacts {background: url(../images/bg_main.jpg) 50% 50% no-repeat;}

#sub-wrapper { display: block; height: 550px; width: 100%; }
#sub-wrapper.uti { background: url(../images/bg_newspaper.png) 50% 0 no-repeat;}
#sub-wrapper.symptoms { background: url(../images/bg_monitor.png) 50% 43px no-repeat; }
#sub-wrapper.symptoms-en { background: url(../images/bg_monitor_en.png) 50% 43px no-repeat; }
#sub-wrapper.usage { background: url(../images/bg_packshot.png) 50% 100px no-repeat; }
#sub-wrapper.usage-en { background: url(../images/bg_packshot_en.png) 50% 100px no-repeat; }
#sub-wrapper.contacts { background: url(../images/bg_phone.png) 50% 125px no-repeat; }

header { width: 950px; height: 85px; overflow: hidden; background: url(../images/bg_header.png) 50% 0 no-repeat; margin: 0 auto; padding: 0; }
header #heading-wrapper {  background: none; padding: 15px 0 0 40px; float: left; }

header nav { float: right;  }

#menu-icon { display: none; }
.uti #menu-icon, .symptoms #menu-icon, .symptoms-en #menu-icon, .usage #menu-icon, .contacts #menu-icon { display: none; }
.uti #nav, .symptoms #nav, .usage #nav, .contacts #nav {display: block !important;}

#nav { padding: 23px 12px 0 0; }
#nav li {
 display: inline-block;
 	display: block\9; float: left\9; 
 zoom:1;
 width: auto;
 min-width: auto;
 
}
#nav a {
 display: block;
 padding: 8px 36px;
 margin: 0px;
 background: url(../images/menu_divider.png) 100% 50% no-repeat ;
 -moz-border-radius:0px; -webkit-border-radius:0px; -o-border-radius:0px; -ms-border-radius:0px; -khtml-border-radius:0px; border-radius:0px;
}


#nav a:hover, #nav a:focus { color: #1A7ED2; }
#nav li+li+li+li a {margin-right: 0; background: none;}

.uti #nav li a {color: #1A7ED2; }
.uti #nav li+li a {color: #252525; }

.symptoms #nav li+li a, .symptoms-en #nav li+li a {color: #1A7ED2; }
.symptoms #nav li+li+li a, .symptoms-en #nav li+li+li a {color: #252525; }

.usage #nav li+li+li a {color: #1A7ED2; }
.usage #nav li+li+li+li a {color: #252525; }

.contacts #nav li+li+li+li a {color: #1A7ED2; }


#language, #language-en {
 width: 33px; height: 100%; ;
 position: fixed; right: 0px; top: 0px;
 background: none;
 
}
#language a, #language-en a {
 height: 90px;
 width: 33px;
 text-indent: 100%;
 background: url(../images/bg_lang.png) -66px 0 no-repeat;
 position: fixed;
 top: 40%;
 right: 0px;
 padding: 0px;
 float: none;
}
#language-en a { height: 109px; background-position: 0px 0px; }
#language a:hover, #language a:focus {background-position: -99px 0;}
#language-en a:hover, #language-en a:focus { background-position: -33px 0px; }



#content { height: 370px; margin: 0px auto; overflow: hidden; width: 950px; font-family: Verdana, Arial, Helvetica, sans-serif;  }
#content nav {display: block; position: absolute; }
#content nav li a { display: block; overflow: hidden; text-indent: 100%; position: relative; width: 134px; height: 80px; left: 568px; top: 287px; background: none; font-size: 0px; }
#content nav li+li a {width: 200px; height: 159px; left: 192px; top: 119px;}
#content nav li+li+li a {width: 62px; height: 69px; left: 600px; top: -152px;}
#content nav li+li+li+li a {width: 136px; height: 92px; left: 690px; top: -125px;}

#content nav li a:hover, #content nav li a:focus { background: url(../images/bg_hover_items.png) 0px 0px no-repeat; }
#content nav li+li a:hover, #content nav li+li a:focus { background-position: 0px -80px; }
#content nav li+li+li a:hover, #content nav li+li+li a:focus { background-position: 0px -238px; }
#content nav li+li+li+li a:hover, #content nav li+li+li+li a:focus { background-position: 0px -307px; }

#scroll-pane ul li { list-style-type: disc; margin: 0 45px 3px 45px;}
#scroll-pane ol li { list-style-type: decimal; margin: 0 45px 3px 45px; } 

#content .cont1 { display: block; width: 678px; height: 349px; padding: 25px 0 0 35px; overflow: hidden; background: url(../images/bg_content_1.png) 0 0 no-repeat; margin: 13px 0 0 7px; }
#content .cont1 h1 { font-size:24px; color: #1A7ED2; margin: 0 0 20px 0; text-align: left; }
.cont1 section h2 { font-size: 16px; font-weight: bold; margin: 16px 0; }
.cont1 section p { font-size: 12px; line-height: 16px; margin: 16px 0;}

.symptoms #scroll-pane strong { font-weight: bold; color: #252525; font-size: 13px; line-height: 16px; }
.symptoms #scroll-pane ul { list-style-image: url(../images/bg_li.png);}
.symptoms #scroll-pane ul li  { margin: 1px 45px; }

#content .cont2 { display: block; width: 480px; height: 260px; overflow: hidden; margin: 55px 0 0 240px; }
#content .cont2 h1 { display: none; }

#content .cont3 { disaply: block; width: 532px; height: 324px; padding: 25px 0 0 35px; overflow: hidden; background: url(../images/bg_content_3.png) 0 0 no-repeat; margin: 13px 0 0 7px; }
#content .cont3 h1 { display: none; }

#content .cont4 { disaply: block; width: 547px; height: 339px; padding: 10px 0 0 20px; overflow: hidden; background: url(../images/bg_content_3.png) 0 0 no-repeat; margin: 13px 0 0 7px; }
#content .cont4 h1 a { font-size: 22px; color: #1A7ED2; margin: 0 0 0 -20px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;  }

.contacts #scroll-pane section h2 a { color: #252525; font-family: Arial, Helvetica, sans-serif; font-size: 38px; float: left; margin: 5px 10px 0 0;  }


.uti #scroll-pane,
.symptoms #scroll-pane,
.usage #scroll-pane,
.contacts #scroll-pane { 
 background: none; 
 padding: 0 10px 0 0; 
 font-family: Verdana, Arial, Helvetica, sans-serif; 
 color: #252525; 
 font-size: 13px; 
 line-height: 16px; 
 margin: 0;
 -moz-border-radius:0px; -webkit-border-radius:0px; -o-border-radius:0px; -ms-border-radius:0px; -khtml-border-radius:0px; border-radius:0px;
}

.uti #scroll-pane section { border: 0px none; }
.uti #scroll-pane section h2 {  color: #252525; font-size: 16px; }
.usage #scroll-pane section { padding-bottom: 15px; border: 0px none; background: url(../images/bg_curve.png) 0 100% no-repeat;}
.usage #scroll-pane section h2 {   font-size: 23px; font-weight: normal; margin: 15px 0;}

.usage #scroll-pane em { font-size: 11px; line-height: 16px; display: block; margin: 20px 0;}
.usage #scroll-pane ul { clear: both; }

.usage #scroll-pane .p-1 { width: 100%; border-bottom: #714469 3px dotted; padding-bottom: 7px; }
.usage #scroll-pane .p-1:before { content: "1"; float: left; margin: 0 10px 0 0; width: 30px; height: 30px; line-height: 30px; -moz-border-radius:14px; -webkit-border-radius:14px; -o-border-radius:15px; -ms-border-radius:15px; -khtml-border-radius:15px; border-radius:15px; font-size: 20px; font-family: Arial, Helvetica, sans-serif;}
.usage #scroll-pane .p-1 img { float: right; margin: -45px 15px 0 5px; }

.usage #scroll-pane .p-2 { width: 100%; border-bottom: #714469 3px dotted; padding-bottom: 7px; clear: both; }
.usage #scroll-pane .p-2 img { display: none;}
.usage #scroll-pane .p-2:before { content: "2"; float: left; margin: 0 10px 0 0; width: 30px; height: 30px; line-height: 30px; -moz-border-radius:14px; -webkit-border-radius:14px; -o-border-radius:15px; -ms-border-radius:15px; -khtml-border-radius:15px; border-radius:15px; font-size: 20px; font-family: Arial, Helvetica, sans-serif;}
.usage #scroll-pane .p-2 .alt { display: block; float: right; margin: 0 0 15px 0;}
.usage #scroll-pane .p-2 em { display: block; margin-top: 65px;}

.usage #scroll-pane .p-3 { width: 100%; border-bottom: #714469 3px dotted; padding-bottom: 7px; clear: both; }
.usage #scroll-pane .p-3 img { margin: -10px 0 5px 0; }
.usage #scroll-pane .p-3:before { content: "3"; float: left; margin: 0 10px 0 0; width: 30px; height: 30px; line-height: 30px; -moz-border-radius:14px; -webkit-border-radius:14px; -o-border-radius:15px; -ms-border-radius:15px; -khtml-border-radius:15px; border-radius:15px; font-size: 20px; font-family: Arial, Helvetica, sans-serif;}

.usage #scroll-pane .p-4 {clear: both; }
.usage #scroll-pane .p-4 img {  float: right; margin: 0 5px 0 0; }
.usage #scroll-pane .p-4:before { content: "4"; float: left; margin: 0 10px 0 0; width: 30px; height: 30px; line-height: 30px; -moz-border-radius:14px; -webkit-border-radius:14px; -o-border-radius:15px; -ms-border-radius:15px; -khtml-border-radius:15px; border-radius:15px; font-size: 20px; font-family: Arial, Helvetica, sans-serif;}

.usage #scroll-pane .note { display: block; background-color: none; background: url(../images/bg_note.png) 0 5px no-repeat; padding: 0 0 0 40px; color: #252525; -moz-border-radius:0px; -webkit-border-radius:0px; -o-border-radius:0px; -ms-border-radius:0px; -khtml-border-radius:0px; border-radius:0px; font-style: italic; clear: both;}









.contacts #scroll-pane section p { margin: 5px 0;}
.contacts #scroll-pane section { margin: 0 0 13px 0; }
.contacts #contact-form {border-top: #1A7ED2 3px dotted; padding: 1px 0 0 0; }

.contacts #contact-form h2 { font-weight: bold; font-size: 16px; margin: 10px 0; }
.contacts #contact-form label {display: block; float: left; width: 200px; margin-bottom: 5px; }
.contacts #contact-form label[for=message] { clear: left; margin-top: 5px; }
.contacts #contact-form input { 
 float: left;
 width: 220px;
}
.contacts #contact-form input[type=text] { margin: 25px 20px 0 -200px; }
.contacts #contact-form input[type=email] { margin: 25px 20px 0 -200px; }

.contacts #contact-form textarea { 
 width: 440px;
 max-width: 500px;
 height: 60px;
 float: left;
 margin: 4px 0;
}

.contacts #contact-form input[type=submit] { 
 display: block;
 width: 30px;
 height: 80px;
 margin: 5px 0 0 12px;
 font-size: 0px;
 background: #2983D0\9;
 background: url(../images/bg_submit.png) 50% 50% no-repeat, -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2B99F2), to(#276BAC));
 background: url(../images/bg_submit.png) 50% 50% no-repeat, -webkit-linear-gradient(top, #2B99F2, #276BAC);
 background: url(../images/bg_submit.png) 50% 50% no-repeat, -moz-linear-gradient(top, #2B99F2, #276BAC); 
 background: url(../images/bg_submit.png) 50% 50% no-repeat, -ms-linear-gradient(top, #2B99F2, #276BAC); 
 background: url(../images/bg_submit.png) 50% 50% no-repeat, -o-linear-gradient(top, #2B99F2, #276BAC);
 background: url(../images/bg_submit.png) 50% 50% no-repeat, linear-gradient(top, #2B99F2 0%,#276BAC 100%) 0% 0% transparent;

}

.contacts #contact-form input:-moz-placeholder{color:#DFDFDF;}
.contacts #contact-form input:-ms-input-placeholder{color:#DFDFDF;}
.contacts #contact-form textarea:-moz-placeholder{color:#DFDFDF;}
.contacts #contact-form textarea:-ms-input-placeholder{color:#DFDFDF;}

.contacts #contact-form .tiny-mssg { font-style: italic; font-size: 11px; }
.contacts #sending { border-top: #1A7ED2 3px dotted; padding: 1px 0 0 0; margin-top: 10px; }
.contacts #sending .mssg-error { display: block; width: 230px; height: 145px; background: url(../images/bg_mssg-error.png) 280px 20px no-repeat; margin: 0 0 0 0; padding: 50px 250px 0 10px;  }
.contacts #sending h3 { color: #1A7ED2; font-size: 20px; font-weight: normal; display: block; float: left; width: 200px; height: 21px; margin: 50px 0 10px 10px; }
.contacts #sending .back a {display: block; background: url(../images/arrow_back.png) 0 50% no-repeat; padding: 7px 0 7px 45px; margin: -55px 0 0 10px; color: #1A7ED2; font-weight: bold; text-decoration: none; }
.contacts #sending .mssg-ok { disaply: block; width: 280px; height: 115px; background: url(../images/bg_mssg-ok.png) 265px 20px no-repeat; margin: 0; padding: 80px 200px 0 20px; font-size: 16px; line-height: 22px }













#alt-content { display: none; }
#mfooter { display: none; }
#nfooter { display: block; width: 950px; height: 95px; overflow: hidden; background: url(../images/bg_footer.png) 50% 0 no-repeat; margin: 0 auto; padding: 0; position: relative; bottom: 0px; }
	#nfooter .fb {float: left; margin: 20px 20px 0 37px; }
	#nfooter .fb a {display: block; width: 61px; height: 61px; overflow: hidden; text-indent: 100%; background: url(../images/bg_hover_items.png) 0px -399px no-repeat; }
	#nfooter .fb a:hover, #nfooter .fb a:focus { background-position: -62px -399px; }
	#nfooter p {float: left; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; margin: 43px 0 0 0; color: #282828; }
	#nfooter .usage {float: right; margin: 20px 20px 0 0; }

 
/************************************************************************************
SCROLLER - jscrollpane.kelvinluck.com
*************************************************************************************/

#scroll-pane { width: 600px; height: 247px; overflow: auto; padding-right: 10px;  }

.symptoms #scroll-pane { width: 470px; height: 260px; overflow: auto; padding-right: 10px;  }
.usage #scroll-pane { width: 490px; height: 290px; overflow: auto; padding-right: 10px; }
.contacts #scroll-pane { width: 524px; height: 290px; overflow: auto; padding-right: 0px; margin-top: -15px; }

.jspContainer { overflow: hidden; position: relative; }
.jspPane { position: absolute; }
.jspVerticalBar { position: absolute; top: 0; right: 0; width: 16px; height: 100%; background: red; }
.jspHorizontalBar { position: absolute; bottom: 0; left: 0; width: 100%; height: 16px; background: red; }
.jspVerticalBar *, .jspHorizontalBar * { margin: 0; padding: 0; }
.jspCap { display: none; }
.jspHorizontalBar .jspCap { float: left; }
.jspTrack { background: #dde; position: relative; }
.jspDrag { background: #bbd; position: relative; top: 0; left: 0; cursor: pointer; }
.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag { float: left; height: 100%; }
.jspArrow { background: #50506d; text-indent: 100%; display: block; cursor: pointer; }
.jspArrow.jspDisabled { 
 cursor: default; 
 background: #387AB4 url(../images/jsp_arrows.png) 0px 0px no-repeat;
 background: url(../images/jsp_arrows.png) 0px 0px no-repeat, -webkit-gradient(linear, left top, 0% 100%, from(#E8F4FE), to(#387AB4));
 background: url(../images/jsp_arrows.png) 0px 0px no-repeat, -webkit-linear-gradient(left, #E8F4FE, #387AB4);
 background: url(../images/jsp_arrows.png) 0px 0px no-repeat, -moz-linear-gradient(left, #E8F4FE, #387AB4); 
 background: url(../images/jsp_arrows.png) 0px 0px no-repeat, -ms-linear-gradient(left, #E8F4FE, #387AB4); 
 background: url(../images/jsp_arrows.png) 0px 0px no-repeat, -o-linear-gradient(left, #E8F4FE, #387AB4);
 background: url(../images/jsp_arrows.png) 0px 0px no-repeat, linear-gradient(left, #E8F4FE 0%,#387AB4 100%) 0% 0% transparent ; 
}
.jspVerticalBar .jspArrow { height: 20px; }
.jspHorizontalBar .jspArrow { width: 20px; float: left; height: 100%; }
.jspVerticalBar .jspArrow:focus { outline: none; }
.jspCorner { background: #eeeef4; float: left; height: 100%; }
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner { margin: 0 -3px 0 0; }


.jspTrack { 
 background: #fff; 
 -moz-border-radius:10px; -webkit-border-radius:10px; -o-border-radius:10px; -ms-border-radius:10px; -khtml-border-radius:10px; border-radius:10px;
 -webkit-box-shadow: inset 5px 3px 3px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 5px 3px 3px 2px rgba(0, 0, 0, 0.2);
         box-shadow: inset 5px 3px 3px 2px rgba(0, 0, 0, 0.2);


}
 
.jspHorizontalBar,
.jspVerticalBar {background: none;}
/*

.jspHorizontalBar,
.jspVerticalBar { 
 background: #fff; 
 -moz-border-radius:10px; -webkit-border-radius:10px; -o-border-radius:10px; -ms-border-radius:10px; -khtml-border-radius:10px; border-radius:10px;
 -webkit-box-shadow: inset 5px 3px 3px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 5px 3px 3px 2px rgba(0, 0, 0, 0.2);
         box-shadow: inset 5px 3px 3px 2px rgba(0, 0, 0, 0.2);


}

.jspTrack {background: none;}
*/


.jspDrag { 
 background:  #387AB4;
 background: -webkit-gradient(linear, left top, 0% 100%, from(#E8F4FE), to(#387AB4));
 background: -webkit-linear-gradient(left, #E8F4FE, #387AB4);
 background: -moz-linear-gradient(left, #E8F4FE, #387AB4); 
 background: -ms-linear-gradient(left, #E8F4FE, #387AB4); 
 background: -o-linear-gradient(left, #E8F4FE, #387AB4);
 background: linear-gradient(left, #E8F4FE 0%,#387AB4 100%) 0% 0% transparent ; 
 -moz-border-radius:10px; -webkit-border-radius:10px; -o-border-radius:10px; -ms-border-radius:10px; -khtml-border-radius:10px; border-radius:10px;
 -webkit-box-shadow: inset 1px -1px 2px 1px #265D91;
    -moz-box-shadow: inset 1px -1px 2px 1px #265D91;
         box-shadow: inset 1px -1px 2px 1px #265D91; 
}

.jspTrack .jspActive,
.jspTrack .jspHover,
.jspDrag:hover { 
 background:  #387AB4;
 background: -webkit-gradient(linear, left top, 0% 100%, from(#fff), to(#387AB4));
 background: -webkit-linear-gradient(left, #fff, #387AB4);
 background: -moz-linear-gradient(left, #fff, #387AB4); 
 background: -ms-linear-gradient(left, #fff, #387AB4); 
 background: -o-linear-gradient(left, #fff, #387AB4);
 background: linear-gradient(left, #fff 0%,#387AB4 100%) 0% 0% transparent ; 
}

.jspArrow {
 background: #387AB4 url(../images/jsp_arrows.png) 0px 0px no-repeat;
 background: url(../images/jsp_arrows.png) 0px 0px no-repeat, -webkit-gradient(linear, left top, 0% 100%, from(#E8F4FE), to(#387AB4));
 background: url(../images/jsp_arrows.png) 0px 0px no-repeat, -webkit-linear-gradient(left, #E8F4FE, #387AB4);
 background: url(../images/jsp_arrows.png) 0px 0px no-repeat, -moz-linear-gradient(left, #E8F4FE, #387AB4); 
 background: url(../images/jsp_arrows.png) 0px 0px no-repeat, -ms-linear-gradient(left, #E8F4FE, #387AB4); 
 background: url(../images/jsp_arrows.png) 0px 0px no-repeat, -o-linear-gradient(left, #E8F4FE, #387AB4);
 background: url(../images/jsp_arrows.png) 0px 0px no-repeat, linear-gradient(left, #E8F4FE 0%,#387AB4 100%) 0% 0% transparent ; 
 -moz-border-radius:10px; -webkit-border-radius:10px; -o-border-radius:10px; -ms-border-radius:10px; -khtml-border-radius:10px; border-radius:10px;
 -webkit-box-shadow: inset 1px -1px 2px 1px #265D91;
    -moz-box-shadow: inset 1px -1px 2px 1px #265D91;
         box-shadow: inset 1px -1px 2px 1px #265D91;
 
}

.jspVerticalBar>.jspActive,
.jspArrow:hover { 
 background: url(../images/jsp_arrows.png) 0px 0px no-repeat, -webkit-gradient(linear, left top, 0% 100%, from(#fff), to(#387AB4));
 background: url(../images/jsp_arrows.png) 0px 0px no-repeat, -webkit-linear-gradient(left, #fff, #387AB4);
 background: url(../images/jsp_arrows.png) 0px 0px no-repeat, -moz-linear-gradient(left, #fff, #387AB4); 
 background: url(../images/jsp_arrows.png) 0px 0px no-repeat, -ms-linear-gradient(left, #fff, #387AB4); 
 background: url(../images/jsp_arrows.png) 0px 0px no-repeat, -o-linear-gradient(left, #fff, #387AB4);
 background: url(../images/jsp_arrows.png) 0px 0px no-repeat, linear-gradient(left, #fff 0%,#387AB4 100%) 0% 0% transparent ; 
}

.jspVerticalBar>.jspDisabled,
.jspVerticalBar>.jspDisabled:hover,
.jspHorizontalBar>.jspDisabled,
.jspHorizontalBar>.jspDisabled:hover {  }

.jspVerticalBar .jspArrow { height: 15px; }
.jspHorizontalBar .jspArrow { width: 15px; }
.jspArrowUp { background-position: 0 0;  }
.jspArrowDown { background-position: -16px 0 !important;  }
.jspArrowLeft { background-position: -96px 0 !important; }
.jspArrowRight { background-position: -32px 0 !important; }

}