/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

@font-face {
    font-family: 'ModernPictograms';
    src: url('/_/fonts/modernpics.eot');
    src: url('/_/fonts/modernpics.eot?#iefix') format('embedded-opentype'),
         url('/_/fonts/modernpics.woff') format('woff'),
         url('/_/fonts/modernpics.ttf') format('truetype'),
         url('/_/fonts/modernpics.svg#ModernPictogramsNormal') format('svg');
    font-weight: normal;
    font-style: normal;

}
html,
button,
input,
select,
textarea {
	font-size: 1em;
	line-height: 1.5;
	color: #33373D;
	font-family: Verdana, Geneva, sans-serif;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #990000;
    text-shadow: none;
	color: #FFF;
}

::selection {
	background: #990000;
	text-shadow: none;
	color: #FFF;
}

/* A better looking default horizontal rule*/

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}
a img {border:none}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/* Allow only vertical resizing of textareas. */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body {
	margin:auto;
	background-color:white;
}


/* ==========================================================================
   Typography
   ========================================================================== */
.red {	color: #B9131D; font-weight:bold;}

a:link, a:link:visited {color:#B9131D; }
#border > p >  img {  float:right} /* картинка только первого абзаца будет справа*/
strong {color:#656F8C;}
p a:link, p a:link:visited  {border-bottom:dashed 1px; text-decoration:none; color:#656F8C; font-weight:bold}

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

.logo {
	font-size:1.3em;
	font-weight:bold;
	line-height:1;
	vertical-align:bottom;
}
span.logo b {display:none}

#logoPicture {
	margin:1em 0;	
	width:170px;
	float:left;
}

header form {
	margin:1em 0;	
	float:right;
	margin-right:2em;
	line-height:1;
}
header form input[type="search"] {
	border:solid #CCC thin;
	-webkit-border-radius:5px;
	-mox-border-radius:5px;
	border-radius:5px;
	height:2em;
	font-size:1em;
	padding-left:.5em;
	-moz-box-shadow: 0 0 10px #CCC; 
	-webkit-box-shadow: 0 0 10px #CCC; 
    box-shadow: 0 0 10px #CCC;
	outline:none;
}
header a {text-decoration:none}


.ie .go {height:32px}
input#ok {
	font-family: 'ModernPictograms';
	font-size: 2em;
	line-height:1;
	vertical-align:baseline;
	border: none;
	background: transparent;
	position:relative;
	left:-1.5em;
}

.ie  input#ok {top:.4em;}
header div {clear:both; font-size:.8em}
header div p a:link {text-decoration:underline; font-weight:normal; border:none}

/* ==========================================================================
   Layout
   ========================================================================== */
/*    Sticky footer    */
html, body {height: 100%;background: #F7F5F5 url(/images/paper.jpg) repeat;}
#wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -10em;
	background-color:white;
	/*
	border-width: 0 10px;
	border-style:solid;  
	-moz-border-image: url(/images/ruller1.jpg) 0 7 repeat; 
	-webkit-border-image: url(/images/ruller1.jpg) 0 7 repeat; 
	-o-border-image: url(/images/ruller1.jpg) 0 7 repeat; 
	border-image: url(/images/ruller1.jpg) 0 7 repeat;
	*/
	box-shadow: 0 0 9px 1px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 0 9px 1px rgba(0,0,0,.2);
	width:1024px;
	position:relative;
	top:3em;
	left:0;
	padding:0 .5em;
}
.ie #wrapper {
	border:none;
	border:0;	
}
footer, .push {
	height: 10em;
	clear: both;
}
/*  End of sticky footer    */



/*two columns*/
#mainColumn {
	display:-webkit-box; 
	display:-moz-box;
	display: -ms-box; 
	display: box;
	/* Firefox requires these */
	width: 100%;
	height: 100%;
	padding-bottom:1em;
}
#mainColumn section {
	-webkit-box-flex:1;
	-moz-box-flex:1;
	-ms-box-flex: 1;
	box-flex: 1;
	margin:3px;
	
}
#mainColumn article, #border {
	border: solid #CCC 1px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	padding-bottom:1em;
	}
#border, .subMenu {padding-left:.5em;}
aside {
	-webkit-box-flex:0;
	-moz-box-flex:0;
	-ms-box-flex: 0;
	box-flex: 0;
	width:270px;
	border: solid #CCC 1px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	margin:3px;
}
#mainColumn section#news {margin:0; margin-top:12px;
	width: 100%;	/* Firefox requires these */
	height: 350px;
	display: -webkit-box;
	display: -moz-box;
	display: box;
}
.ie #mainColumn section#news	{height:348px;}/* по 1 px на border*/
#news article {
	height:inherit;
	width:200px;
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	box-flex: 1;
	padding:0;
}
#news article:first-child {margin-right:5px}
#news article a:link, #news article a:visited {color:inherit}
article.last {margin-left:5px}
#news article figure {
	margin:0 auto;
	width:180px;
}
#news h2 {text-align:center}
#news ul {
	font-size:.8em;
	list-style:none;
	padding:1em;
}
/* Aside *//* .rss - для шаблона rss.html*/
aside div, .rss div {
	font-size:.7em;
	padding:.3em .5em;
	text-align:justify;
}
.rss div {font-size:1em}

aside a:link, .rss div  a:link {text-decoration:none; color:inherit}
aside p a:link, aside p a:visited {color:inherit; border:none; font-weight:normal} /*поиск по парам.*/
aside div p:hover, .rss div p:hover {background-color:#F6E6F4; }
aside div figure {margin:1em; float:left; position:relative}
aside div figure a {display:block; width:40px; height:40px;}
aside div figure img.large {display:none; position:absolute;left:-150px; top:0}
aside div figure a.p:hover ~ img.large {width:130px; display:block; z-index:50; border:#ccc solid 1px }
aside footer {background:none; height:auto; margin:0}

.subscribe {
	border:solid #CCC thin;
	-webkit-border-radius:5px;
	-mox-border-radius:5px;
	border-radius:5px;
	height:1.5em;
	font-size:1em;
	padding-left:.5em;
	-moz-box-shadow: 0 0 10px #CCC; 
	-webkit-box-shadow: 0 0 10px #CCC; 
    box-shadow: 0 0 10px #CCC;
	outline:none;
}


/* Footer */
footer {
	background-color: #FFD9AE; /*#FEDADD*/
	color:#63182A;
	margin:1em -8px 0;
}
footer strong {color:#63182A;}
footer figure {width:50%; height:inherit; float:left; margin-top:.5em; line-height:1;}
footer ul {
	float:left;
	width:23%;
	list-style:none;
	font-weight:bold;
	padding: 0 1em 0 0;
	margin-top:.5em;
}
footer ul li {line-height:1; font-weight:normal; font-size:1em;}
footer figure dl {
	float:left;
	height:inherit;
	margin:1em 0;
	width:100%
}

footer dt {font-family:'ModernPictograms'; font-size:2em; width:20%; float:left;clear: left; height:1em; line-height:1}
footer dd {float:left; margin:0;width:80%;height:2em; display:block;  }
footer figure img {margin-right:5px;}
footer a:link, footer a:visited{text-decoration:none; color:#63182A;}
footer a:hover {color:#1C3D49; text-decoration:underline}
/*  Main block  */
img.imgLeft {position:relative;  width:200px; float:left; clear:right; padding:10px}



/* =============================================================================
/* TABLES   */
/*   ========================================================================== */

table {
	font-size: 0.8em;
	empty-cells: show;
	width: 100%;
	border-collapse:separate;
	border-spacing: 2px;
	background: white;
	line-height:1;
}
td {	
	padding:3px;
	text-align:center;
	background: #F4F4F4}


th {background:#E9E9E9; color:#B9131D;line-height:1.5; vertical-align:top}	
table td.left {text-align:left}

/* =============================================================================
/*  HEADINGS   */
/*   ========================================================================== */
h1, h2, h3 {
	margin: 0;
	margin: .5em 1em;
	font-family: Tahoma, Geneva, sans-serif;
}
h1 {
	font-size: 1.5em;
	color: #D03A0B;
	line-height: 1.5em;
	text-transform: uppercase;
	letter-spacing:.1em;
	font-weight:bold;
	text-shadow:1px 1px .2em #CCC;	
}
h2	{clear:both;
	color: #656F8C;
	font-size: 1.2em;/* 22px --> 22 ÷ 16 = 1.375 */
	margin-top:.5em;
	border-bottom:1px solid #656F8C;
}
aside section header h2 {border:none}
h2 a:link, h2 a:visited {color:#656F8C; text-decoration:none}

h3 {color: #B9131D;
	font-size: 	1em;
	line-height: 1; 
	padding:1em 0 0 0;
}

h4 {font-size: 1.125em;
  line-height: 1.333em; }
h5, h6 {   font-size: 1em; /* 16px --> 16 ÷ 16 = 1 */
  line-height: 1.5em; /* 24px --> 24 ÷ 16 = 1.5 */ }


/* ==========================================================================
   Gallery
   ========================================================================== */

html {-webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;} 
100% {zoom:1;}
}
#gallery {margin:0 auto; position:relative; width:600px; height:400px; overflow:hidden; border:10px solid #fff;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.6); 
-moz-box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.6); 
-webkit-box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.6);
}
.no-boxshadow #gallery {
    border-right: #8A8A8A 2px solid;
    border-bottom: #8A8A8A 2px solid;   
}
#gallery a {display:block; width:60px; height:76px;  position:relative; z-index:10; outline:0;}

#gallery img {width:60px; height:auto; position:relative; display:block; border:0; margin:0 10px 0 10px}

#gallery b {display:block; width:500px; height:350px; background:#fff; position:absolute; left:100px; top:0; z-index:10;}
#gallery b:before {content:url("/images/gallery/1-honeywell.jpg"); display:block; width:500px; height:350px; position:absolute; left:0; top:0;}



#gallery a.p1:focus ~ b:before {content:url(/images/gallery/1-honeywell.jpg);}
#gallery a.p2:focus ~ b:before {content:url(/images/gallery/22-heraeus.jpg);}
#gallery a.p3:focus ~ b:before {content:url(/images/gallery/23-heraeus.jpg);}
#gallery a.p4:focus ~ b:before {content:url(/images/gallery/2-sensirion.jpg);}
#gallery a.p5:focus ~ b:before {content:url(/images/gallery/11-sick.jpg);}


#gallery b {
-moz-animation-fill-mode: forwards;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in-out;
-moz-animation-duration: 1s;
}
#gallery b {
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 1s;
}

#gallery a:focus ~ b {-moz-animation-name: d10;-webkit-animation-name: d10;}
/* for Firefox */
@-moz-keyframes d10 {
0% {opacity:0; -moz-transform: scale(50);}
100% {opacity:1; -moz-transform: scale(1);}
}

/* for Safari and Chrome */
@-webkit-keyframes d10 {
0% {opacity:0; -webkit-transform: scale(50);}
100% {opacity:1; -webkit-transform: scale(1);}
}

/* ==========================================================================
  Top menu
   ========================================================================== */
nav {
	background:#B9131D;
	background: linear-gradient(left, #B9131D, #390609);
	background: -moz-linear-gradient(#B9131D, #390609);
	color:white;
	font-weight:bold;
	height:3em; /*48px*/
	width:100%;
	z-index:100;
	position:fixed;
	left:0;
	top:0;
	z-index:100;
}

#topMenu {
	width:1024px;
	margin:0 auto;	
	position:relative; /* для всплывающей формы поиска*/
}
#topMenu p {display:inline; line-height:2; width:15em;float:left; margin:0;margin-top:.5em; } /* телефон*/
#topMenu > a {text-decoration:none; border-bottom:none; color:#FFF;  width:15em; height:2em; cursor:pointer}
ul.menu {list-style: none; float:left; margin:0; padding:0;/* меню продукции.*/
	/*border: 1px solid #CC0E15;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	   -moz-box-shadow: 0 0 10px #CC0E15; 
	-webkit-box-shadow: 0 0 10px #CC0E15; 
    box-shadow: 0 0 10px #CC0E15;*/
	cursor: pointer;
	padding:3px 0}
/* строки датчики, преобразователи*/
ul.menu li {float:left; position:relative;  line-height:1; padding:16px 1em 16px} 
ul.menu li a, nav ul li a:visited {display:block; text-decoration:none;  overflow:hidden; color:white;}
/* выпадающее меню */
ul.menu li div { 
	display: none;  
    -moz-box-shadow: 0px 50px 100px  rgba(204,204,204,.5); 
	-webkit-box-shadow: 0px 50px 100px  rgba(204,204,204,.5); 
    box-shadow: 0px 50px 100px  rgba(204,204,204,.5); 
	z-index:1000;
	padding:1em;
	background:white;
	} 
ul.menu li div  ul {font-weight:bold; float:left;width:50%; background:white; padding:0; margin:0 }
ul.menu li div ul li { line-height:1; font-size:14px;height:2em; font-weight:normal; display:block; float:none; padding:0}/*строки выпадающего меню*/
ul.menu li div ul li:first-child {font-weight:bold; color:#413659}
ul.menu li:hover div {display:block; position:absolute; top:2.6em; left:0; width:500px; border:#CCC solid 1px; border-radius:5px; color:black;  }
ul.menu li:hover div ul li a {/*строки выпадающего меню*/
	display: block;
	color: #666666;
	height:inherit
}
ul.menu li:hover div ul li a:hover {color:#B9131D;}


ul.icons { /* Меню с иконками*/
	float:right; 
	list-style: none;
	font-size:1.5em;
	font-weight:normal;
	height:1.5em;
	margin:12px 2em 0 0;
	position:relative;
}
ul.icons li.pic {line-height:1;top: 0.4em; float:left;}
ul.icons li.pic a {text-decoration:none}
.pic {
	font-family: 'ModernPictograms';
	width:2em;
	margin-right:10px;
	border: 1px solid #CC0E15;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	cursor: pointer;
    -moz-box-shadow: 0 0 10px #CC0E15; 
	-webkit-box-shadow: 0 0 10px #CC0E15; 
    box-shadow: 0 0 10px #CC0E15;
}
.pic a {
	width:inherit;
	display:block;
	padding-left:.6em;
	color:white;
}
#magnify {visibility: hidden; border-color:#E77301	 }
#magnify span {	width:inherit;
	display:block;
	padding-left:.6em;}
#navSearch {
	position:absolute;
	top:0;
	right:0;
	height:48px;
	width:340px;
	display:none;
}
#navSearch input {
	font-size:16px;
	line-height:2;
	border:none;
	border:solid 1px #ccc;
	border-radius:5px;
	padding-left:.5em;
	margin:6px 0;
	
}
#navSearch input[type="submit"] {
	font-family: 'ModernPictograms';
	width:2em;	
	border: 1px solid #CC0E15;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	cursor: pointer;
    -moz-box-shadow: 0 0 10px #CC0E15; 
	-webkit-box-shadow: 0 0 10px #CC0E15; 
    box-shadow: 0 0 10px #CC0E15;
	background-color:transparent;
	color:white;
	font-size:1.5em;
	line-height:1;
}

/* ==========================================================================
  Other
   ========================================================================== */
#param {
	height:8em;
	font-size:.7em;
	border-radius:3px;	
	background-color:#ccc;
}
#mainColumn article.subMenu {
	border:none; 
	overflow:hidden;
	font-size:.9em;
	background:#F8F8F8;
	box-shadow: 0 0 3px 5px #E9E9E9 inset;
	margin-bottom:1em;}
.subMenu h3 {clear:both}
.subMenu div {	height:150px;}
.subMenu figure {
	float:left;
	width:150px;
	height:100px;
	clear:right;
	margin:10px;
}

.subMenu ul {
	float:left;
	width: 300px;
	font-size:.8em;
	margin:0 10px 0;
	height:100%;
}
.subMenu ul li a {color:#B9131D; text-decoration:none;}
.subMenu ul li a:hover {text-decoration:underline;}
.subMenu .but  {
	display:block;
	width:150px;
	height:40px;
	float:right;
	margin:0 1.5em 1em;
	font-size:.8em;
	font-weight:bold;
	text-align:center;
	line-height: 3;
	background:#B9131D;
	background: -webkit-linear-gradient(top,#FEB9AF,#B9131D);
	background: -moz-linear-gradient(top,#FEB9AF,#B9131D);
	background: -o-linear-gradient(top,#FEB9AF,#B9131D);
	background: -ms-linear-gradient(top,#FEB9AF,#B9131D);
	border: 1px solid #B9131D;
	border-radius: 2px;
	box-shadow: 1px 1px 0 #FEB9AF inset 
}
.subMenu .but a {
	text-decoration:none;
	color: #FFF;
	display:block;
	width:150px;
	height:40px;	
}
.button { /*кнопка Купить*/
	font-size:1em;
	font-weight:bold;
	color: #FFF;
	background-color:#B9131D;
	background: -webkit-linear-gradient(top,#FEB9AF,#B9131D);
	background: -moz-linear-gradient(top,#FEB9AF,#B9131D);
	background: -o-linear-gradient(top,#FEB9AF,#B9131D);
	background: -ms-linear-gradient(top,#FEB9AF,#B9131D);
	border: 1px solid #B9131D;
	border-radius: 2px;
	box-shadow: 1px 1px 0 #FEB9AF inset;
	width:170px;
	height:38px;}

td form input {vertical-align:top; padding:0}
	
/* ==========================================================================
   Share42
   ========================================================================== */

#share42 {padding: 6px 6px 0; background: #FFF; border: 1px solid #E9E9E9; border-radius: 4px; position:fixed; left:0}
#share42:hover {background: #F6F6F6; border: 1px solid #D4D4D4; box-shadow: 0 0 5px #DDD;}
#share42 a {opacity: 0.5}
#share42:hover a {opacity: 0.7}
#share42 a:hover {opacity: 1}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow:none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}