/*------------------------------------*\
	СБРОС
\*------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
	margin:0;
	padding:0;
}
table{
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img{
	border:0;
}
address,caption,cite,code,dfn,th,var{
	font-style:normal;
	font-weight:normal;
}
caption,th{
	text-align:left;
}
/*h1,h2,h3,h4,h5,h6{
	font-size:100%;
	font-weight:normal;
}*/
q:before,q:after{
	content:'';
}
abbr,acronym{
	border:0;
}





/*------------------------------------*\
	ОСНОВНЫЕ ПРАВИЛА
\*------------------------------------*/
/*html{
	height:101%;
	background:#fff url(/img/css/bg.gif) top left repeat-x;
}*/
/*body{
	font-family:Arial,Verdana,sans-serif;
	font-size:0.75em;
	color:#333;
	width:960px;
	margin:0 auto;
	padding:10px;
}*/





/*------------------------------------*\
	НАВИГАЦИЯ
\*------------------------------------*/
ul, li {
 margin: 0; padding: 0;
    margin-left: 5px;
}



#nav {
    margin-top: 0px;
    height:33px;
 position: relative;
 
   float: right; 
    
  position: relative;
z-index: 223;  
}

#nav li{
	float:left;
	margin-right:10px;
	position:relative;
	display:block;
}
#nav li a{
	display:block;
	padding:5px;
	color:#fff;
	/*background:#333;*/
/*	text-decoration:none;*/
	
	text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Тень текста, чтобы приподнять его на немного */
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	border-radius:0px;
}
#nav li a:hover{
	color:#fff;
	background:#6b0c36;
	background:rgba(107,12,54,0.75); 
	text-decoration:underline;
}

/*--- ВЫПАДАЮЩИЕ ПУНКТЫ ---*/
#nav ul{
	list-style:none;
	position:absolute;
    margin-top: 36px;
	left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */
	opacity:0; /* Устнавливаем начальное состояние прозрачности */
	-webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */
	margin-left: -5px;
	/*background: rgba(12, 83, 38, 0.749);*/
}
#nav ul li{
	padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
	float:none;
	/*background:url(dot.gif);*/
}
#nav ul a{
	white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
	display:block;
}
#nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */
	left:0; /* Приносим его обратно на экран, когда нужно */
	opacity:1; /* Делаем непрозрачным */
}
#nav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
	/*background:#6b0c36;*/
	/*background: rgba(12, 83, 38, 0.549);*/ /* Выглядит полупрозрачным */
    	background: rgba(56, 153, 124, 0.706);
	text-decoration:underline;
    width:98%;
}
#nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */
	text-decoration:none;
	-webkit-transition:-webkit-transform 0.075s linear;
}
#nav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */
	/*background:#333;*/
	background:rgba(51,51,51,0.75); /* Будет полупрозрачным */
  width: 98%;
	text-decoration:underline;
	-moz-transform:scale(1.05);
	-webkit-transform:scale(1.05);
}

#fon li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
	background:#6b0c36;
	background: rgba(12, 83, 38, 0.049); /* Выглядит полупрозрачным */
	text-decoration:underline;
}



/*------------------------------------*\
	ТЕКСТ ДЕМОНСТРАЦИИ
\*------------------------------------*/
/*h1{
	font-family:Calibri, Arial, Verdana, sans-serif;
	font-size:2em;
	width:520px;
}*/






#h_image { 
background-image: url(../images/bridge_wireframe.png);
background-position: 100% 0%;
background-repeat: no-repeat;
    
clear: both;
display: block;
float: none;
height: 470px;
margin-left: 415px;
position: relative;
top: 2px;
width: 629px;
z-index: 999999;
  
}

/*
#black_bg{
 position:absolute;
 width:100%;
 height:100%;
    background-image: url(../images/bridge_wireframe.png);
background-position: 100% 0%;
background-repeat: no-repeat;
    margin-left: 700px;
    margin-top: 0px;
height: 470px;
    width: 629px;
z-index: 111;  
    
}*/
#black_bg{
 position:absolute;
 width:100%;
 height:100%;
    background-image: url(../images/bridge_wireframe.png);
background-position: 100% 0%;
background-repeat: no-repeat;
    margin-left: 495px;
    margin-top: 0px;
height: 470px;
    width: 629px;
z-index: 1;  
    
}





.calc_1 {
	/*border-right: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	padding: 15px 10px 15px 10px;
	background: #fff;*/
	font-size: 12px;
	margin: 0px 0px 0px 10px;
	width: 240px;
	float:left;
}
.calc_1 select,input {
	margin: 0px 0px 5px 0px;
}
.calc_1 button {
	padding: 2px;
}
input.calc {
	padding: 2px;
}

.soc {
 padding: 15px;
position: relative;
z-index: 99999;
    }