@charset "utf-8";


html, body {
  color: black;
  background-color: #ddd;
  font: small  Arial,Verdana, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}

.c_pu
{
	background:URL('/static/images/logo-pu2.png') left center repeat-x ;	
}
.c_pu2
{
	background:URL('/static/images/logo-pu3.png') left center repeat-x;	
}
.c_pr
{
	background:URL('/static/images/logo-pr.png') left center repeat-x ;	
}
.c_pr2
{
	background:URL('/static/images/logo-pr2.png') left center repeat-x;	
}

p.red {
  color: red;
}
.invisible { display: none; }
.w50 {width:6em; }
.wb50 {width:6em; font-weight:bold;}
img {border:none;}

table {
border:none; border-style:none; border-spacing:0px;
  margin: 0;
  padding: 0;
}

td, th {padding:0px;border:none;
/*  margin: 0px 5px 0px 5px ;*/
padding: 3px;
}
tr th {text-align:left;background-color:#f0f0f0;color:#333;}
tr.odd td {background-color:#edf3fe;}
tr.even td {background-color:#fff;}



.row_border, .row_border tr 
{

}

tr.row_border td
{
/*
background-color: rgb(255, 253, 224);
border-bottom-color: rgb(247, 148, 29);
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: rgb(247, 148, 29);
border-left-style: solid;
border-left-width: 0px;
border-right-color: rgb(247, 148, 29);
border-right-style: solid;
border-right-width: 0px;
border-top-color: rgb(247, 148, 29);
border-top-style: solid;
border-top-width: 1px;
*/

border-left-style: none; 
border-right-style: none; 
border-left-width: 0px; 
border-right-width: 0px; 
border-top-width: 1px; 
border-bottom-color: #C33; 
border-top-color: #C33; 
border-bottom-width: 1px; 
border-bottom-style: solid;
border-top-style: solid;
border-collapse: collapse;
}

/*{background-color:#FFA; border:0px 0px 2px 5px; border-color:#960; border-style:solid;}
*/

tr.red td {background-color:#ffa0a0;}
tr.redred td {background-color:#f00;}

tr.oddb td, td.oddb {background-color:#edf3fe;}
tr.evenb td, td.evenb {background-color:#fff;}

tr.oddg td {background-color:#e0ffe0;}
tr.eveng td {background-color:#f0fff0;}

tr.oddy td {background-color:#ffd;}
tr.eveny td {background-color:#ffe;}

tr.oddr td {background-color:#fcb;}
tr.evenr td {background-color:#fdc;}


tr.oddgrey td {background-color:#aaa;}
tr.evengrey td {background-color:#bbb;}



tr.oddgr td, tr.oddgr {background-color:#eee;
			color:#800;
}
tr.evengr td, tr.evengr {background-color:#fff;
			color:#800;
}

tr.oddgr_v td, tr.oddgr_v {background-color:#eee;
			color:#088;
}
tr.evengr_v td, tr.evengr_v {background-color:#fff;
			color:#088;
}

table.t_disc {
	border:0px; border-style:none;
}

table.t_report, table.t_report td , tr.t_report, table.t_report th{
	border:1px; border-style:solid; border-color:#309; border-spacing:0px;
}

table.t_xls,  tr.t_xls{
	border:1px; border-style:solid; border-color:#aaa; border-spacing:0px;
}

table.t_xls td, table.t_xls th {
	border-left:0px; border-right:1px; border-bottom:1px; border-top:0px; border-style:solid; border-color:#aaa; border-spacing:0px;
}

.r_nc, tr.r_nc, td.r_nc {
	border:1px; border-style:solid; border-color:#309; background-color:#FFC;
	} 
.r_call, tr.r_call, td.r_call {
	border:1px; border-style:solid; border-color:#309; background-color:#FCF;
	} 

.r_cp, tr.r_cp, td.r_cp {
	border:1px; border-style:solid; border-color:#309; background-color:#CFF;
	} 

.r_dog, tr.r_dog, td.r_dog {
	border:1px; border-style:solid; border-color:#309; background-color:#CFC;
	} 
.r_all_cl, tr.r_all_cl, td.r_all_cl {
	border:1px; border-style:solid; border-color:#309; background-color:#FDD;
	} 

#header {
  height: 	88px;
  width: auto;
  background: #25B2DE URL('../images/header_inner-b-2014.png') no-repeat;
/*  border-left: 1px solid #aaa;
  border-right: 1px solid #aaa;
  border: 2px solid #000000;
 */

  margin: 0px 5px 0px 5px ;
}

a.link, a {
  color: #369;
}


a.active
{
  color: #333;
}

div.act_m  a, div.act_m  a.link, div.act_m a.active{
  color: #393;
	
}



#main_content {
  color: black;
  font-size: 100%;
  background-color: white;
  width: auto;
  margin: 0px 5px 0px 5px ;

/*  
	padding: 1%;
margin: 0 auto 0 auto;
	padding: 1%;
  border-left: 1px solid #aaa;
  border-right: 1px solid #aaa;
  margin: 0.0em 0.5em 0.0em 0.5em ;
*/
}

#sidebar {
  border: 1px solid #aaa;
  background-color: #eee;
  margin: 0.5em;
  float: right;
  width: 200px;
  font-size: 88%;
  padding: 1em;

}

#sidebar h2 {
  margin-top: 0;
}

#sidebar ul {
  margin-left: 1.5em;
  padding-left: 0;
}

textarea, select, input {
	font-family: Arial, Helvetica, sans-serif;
  	font-size: 100%;
}
	
h1,h2,h3,h4,h5,h6,#getting_started_steps {
	font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

h2 {
  font-size: 140%;
}

#getting_started_steps a {
  text-decoration: none;
}

#getting_started_steps a:hover {
  text-decoration: underline;
}

#getting_started_steps li {
  font-size: 100%;
  margin-bottom: 0.5em;
}

#getting_started_steps h2 {
  font-size: 120%;
}

#getting_started_steps p {
  font: 100%  Arial,Verdana, Helvetica, sans-serif;

}

#footer {
  border-bottom: 1px solid #888;
/*  
  border: 1px solid #f00;
  border-top: 0px none;
 */
 color: #999;
  background-color: white;
  padding: 0.05em;
  font-size: 80%;
  text-align: center;
  width: auto;
  margin: 0px 5px 0px 5px ;
}

.code {
  font-family: monospace;
}

span.code {
  font-weight: bold;
  background: #eee;
}

#status_block {
  margin: 0 auto 0.5em auto;
  padding: 15px 10px 15px 55px;
  background: #cec URL('../images/ok.png') left center no-repeat;
  border: 1px solid #9c9;
  width: 80%;
  font-size: 120%;
  font-weight: bolder;
}

.notice {
  margin: 0.5em auto 0.5em auto;
  padding: 15px 10px 15px 55px;
  width: 80%;
  background: #eef URL('../images/info.png') left center no-repeat;
  border: 1px solid #cce;
}

.fielderror {
    color: red;
    font-weight: bold;
}
/*
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; /* рекомендуется использовать нулевое значение поля и отступа элемента body, чтобы учесть различные настройки по умолчанию для браузеров. * /
	padding: 0;
	text-align: center; /* выравнивает контейнер по центру в браузерах Internet Explorer 5*. Затем для текста задается по умолчанию выравнивание по левому краю в селекторе #container. * /
	color: #000000;
}
*/
.twoColHybLt #container { 
	width: auto;  /* будет создан контейнер размером 100% от ширины окна браузера. */
	background: #FFFFFF;
	margin: 0 auto; /* автоматические поля (совместно с шириной) выравнивают страницу по центру. */
	border: 1px solid #777;
	text-align: left; /* переопределяет свойство text-align: выравнивание элемента body по центру. */
} 

/* Советы по элементу sidebar1:
1. Поскольку значения устанавливаются в относительных единицах, не рекомендуется использовать отступ для боковой панели. Он будет добавлен к общей ширине для совместимых со стандартами браузеров, создавая таким образом неизвестную действительную ширину. 
2. Поскольку значение боковой панели задается в эмах, ее ширина будет изменяться в зависимости от размеров шрифта, заданных по умолчанию.
3. Пространство между краем блока div и элементами внутри него можно создать путем добавления правого и левого полей к этим элементам, как показано в правиле ".twoColHybLt #sidebar1 p".
*/
.twoColHybLt #sidebar1 {
	position: fixed;
/*	
	z-index:10;
*/
	left: 6px; 
	width: 10em; /* поскольку этот элемент является обтекаемым, необходимо задать ширину. */
	height: 50em;
	background: #EBEBEB; /* цвет фона будет отображаться только на отрезке содержимого в колонке, но не дальше. */
	padding: 7px 5px  ; /* верхний и нижний отступы создают визуальное пространство в этом элементе div.  */
}

.twoColHybLt #sidebar2 {
	float:left;	
	width: 10.1em; /* поскольку этот элемент является обтекаемым, необходимо задать ширину. */
	min-height: 50.2em;
	height:30.5em;

/*	background: #FFEBEB; /*  цвет фона будет отображаться только на отрезке содержимого в колонке, но не дальше. */
	padding: 7px 7px ; /* верхний и нижний отступы создают визуальное пространство в этом элементе div.  */
}

.twoColHybLt #sidebar1 h3, .twoColHybLt #sidebar1 p {
	margin-left: 10px; /* левое и правое поля нужно задать для каждого элемента, который будет помещен в боковые колонки. */
	margin-right: 10px;
}

/* Советы по элементу mainContent:
1. Пространство между элементами mainContent и sidebar1 создается путем добавления левого поля к элементу mainContent div. Пространство этой колонки сохранится, несмотря на объем содержимого элемента sidebar1 div. Это левое поле можно удалить, чтобы текст элемента #mainContent div заполнял пространство #sidebar1, если содержимое элемента #sidebar1 закончится.
2. Помните о возможном выпадении потока (выпадение из боковой панели необтекаемой области mainContent) при помещении в блок mainContent div элемента, который шире этой панели. При использовании гибридного макета (общая ширина в процентах и боковая панель в эмах), возможно, не получится точно вычислить доступную ширину. Если размер шрифта, установленный пользователем, превышает средний размер, элемент sidebar div получится шире, но для элемента mainContent div останется меньше места. Учитывайте это ограничение особенно в том случае, если клиент добавляет содержимое с помощью продукта Contribute.
3. В условном комментарии к Internet Explorer ниже свойство zoom используется для присвоения элементу mainContent значения "hasLayout". Это может предотвратить несколько специфичных для Internet Explorer ошибок.
*/
.twoColHybLt #mainContent { 
	margin:  0 0 0 12em; /* размер правого поля можно задать в процентах или пикселах. Данное значение создает пространство с правой стороны страницы. */
} 

/* Прочие классы для повторного использования */
.fltrt { /* этот класс можно использовать для обтекания элемента справа на странице. Обтекаемый элемент должен предшествовать элементу, рядом с которым он должен размещаться на странице. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* этот класс можно использовать для обтекания элемента слева на странице. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* этот класс нужно применять к элементу div или break; он должен быть последним элементом перед концом контейнера, который должен полностью вмещать поток. */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

/*добавка*/
.datatable {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
}
.datatable2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
.navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
}
.navigation_sm {
font-size: 0.9em;
}
.navigation_sm a:link, .navigation_sm a:visited {
padding: 1px 4px 1px 4px;
color: #FFFFFF;
background-color: #1010B5;
text-decoration: none;
font-weight:bold;
border: 1px solid #151571;
}

.navigation_sm a:hover {
color: #FFFFFF;
background-color: #151571;
}

.navigation_sm a:active {
color: #FFFFFF;
background-color: #10F510;
}

.navigation select {width:110px; height:18px; border:1px solid #525252; color:#7f7f7f; font-size:11px; vertical-align:middle; margin-top:0px;}

.navigation input  {width:10.5em; height:16px; border:1px solid #525252; color:#007f00; font-size:11px; vertical-align:middle; margin-top:0px;}

.navigation ul {
list-style: none;	
margin: 0;
padding: 0;
padding-top: 0px;
width: 300px;
min-width: 300px;
}

.navigation li {
display: inline;
width : 100px;
min-width:100px;
}
.navigation a:link, .navigation a:visited {
padding: 2px 5px 1px 5px;
color: #FFFFFF;
background-color: #1010B5;
text-decoration: none;
border: 1px solid #151571;
width: 100px;
min-width: 100px;
}

.simple a:link, .simple a:visited {
padding: 2px 5px 1px 5px;
color: black;
background-color: none;
text-decoration: none;
border: none;
width: 100px;
min-width: 100px;
}

.navigation_r a:link, .navigation_r a:visited {
padding: 2px 5px 1px 5px;
color: #FFFFFF;
background-color: #B51010;
text-decoration: none;
border: 1px solid #711515;
width: 100px;
min-width: 100px;
}

.navigation_r a:link.aactive, .navigation_r a:visited.aactive {
padding: 2px 5px 1px 5px;
color: #FFFFFF;
background-color:#FF0000;
text-decoration: none;
border: 1px solid #711515;
width: 100px;
min-width: 100px;
}

/* 07/08/13*/

.navigation_g a:link, .navigation_g a:visited {
padding: 2px 5px 1px 5px;
color: #FFFFFF;
background-color: #10B510;
text-decoration: none;
border: 1px solid #157115;
width: 100px;
min-width: 100px;
}

.navigation_g a:link.aactive, .navigation_g a:visited.aactive {
padding: 2px 5px 1px 5px;
color: #FFFFFF;
background-color:#00FF00;
text-decoration: none;
border: 1px solid #157115;
width: 100px;
min-width: 100px;
}

.navigation_y a:link, .navigation_y a:visited {
padding: 2px 5px 1px 5px;
color: #FFFFFF;
background-color: #B5B510;
text-decoration: none;
border: 1px solid #717115;
width: 100px;
min-width: 100px;
}

.navigation_y a:link.aactive, .navigation_y a:visited.aactive {
padding: 2px 5px 1px 5px;
color: #FFFFFF;
background-color:#FFFF00;
text-decoration: none;
border: 1px solid #717115;
width: 100px;
min-width: 100px;
}

/* 07/08/13*/



a:link.aactive , a:visited.aactive  {
padding: 2px 5px 1px 5px;
color: #FFFFFF;
background-color: #00C0C0;
font-weight:bold;
text-decoration: none;
border: 1px solid #151571;
width: 100px;
min-width: 100px;
}

.navigation a:ractive, .navigation.ractive, .ractive, .ractive a:link, .ractive a:visited{
	background-color: #1010FF;
}

.navigation a:hover {
color: #FFFFFF;
background-color: #151571;
}

.navigation a:active {
color: #FFFFFF;
background-color: #10F510;
}

#msg_state {
position: fixed;
top :0; 
left: 0; 
display: none;
color: #0000A0;
background-color: #FFFFA0;
font-weight: bold;
border: 1px solid #FFFFA0;
z-index:1000;
}


#pageLogin
        {
            font-size: 10px;
            font-family: verdana;
            text-align: right;
			float:right;
			color:#FFF;
/*			font-color:#FFF;
*/			margin-right: 1em;
						
        }
#pageLogin span, #pageLogin  a.link, #pageLogin a, #pageLogin a.active
        {
			color:#FFF;
/*			font-color:#FFF;
*/						
        }

.tdra{            
text-align: right;
}




td.tablesel:hover {
background-color: #30FCFF;
color: #000000;
}

/*td.tablesel {
background-color: #0f0;
color: #000000;
}
*/
td.act_m{
  color: #FEE;
  background-color: navy;
  font-weight:bold;	
}

#overlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
     background-color: #C00;
     background:#0C0;
}
You can style the inner <div> however you like. As I said above, I usually center it horizontally to give it more of a dialog box look and feel.

#overlay div {
     width:300px;
     margin: 100px auto;
     background-color: #C00;
     background:#0C0;
     border:1px solid #000;
     padding:15px;
     text-align:center;
     background-color: #C00;
     background:#0C0;
     display:inline;
}



a.inf:hover{z-index:25; background-color:#ff0}

a.inf span{display: none}

a.inf:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:1em; left:1em; width:15em;
    border:1px solid #0cf;
    background-color:#cff; 
    color:#000;
    text-align: center}

span.info{
    position:relative; /*this is the key*/
    z-index:24; 
/*    background-color:#ccc;*/
    color:#000;
    text-decoration:none}

strong.info{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:1em; left:1em;
    width:auto;
    border:1px solid #0cf;
    background-color:#cff; 
    color:#000;
    text-align: left;
    box-shadow: 0 0 10px rgba(0,0,127,0.9);
}

div.info{ /*the span will display just on :hover state*/
    width:auto;
    border:0px solid #0cf;
    background-color:#dff; 
    color:#000;
    text-align: left;
    box-shadow: 0 0 10px rgba(0,0,127,0.9);
}



div#block_edit_req, div#div_repl_text {
    box-shadow: 0 0 10px rgba(0,0,0,0.9);
}



tr.r_prof_pr td{background-color:#cff;}

tr.pr_odd td {background-color:#9ff;}
tr.pr_even td {background-color:#eff;}

tr.compl_odd td {background-color:#fdf;}
tr.compl_even td {background-color:#fef;}

tr.pu_odd td {background-color:#d8c6ff;}
tr.pu_even td {background-color:#eae1ff;}