/* CW  */

/* basic rules */
html {
  background:#A1B4C9;
  height:auto;
}
body {
  margin:1px auto;
  border:1px solid;  
  font-family: Verdana, sans-serif;
  font-size: 0.9em;
  line-height: 1.5;
}
header {
  width: 100%;
}

/*new flexbox code*/
body {
  display: flex;
  flex-flow: row wrap;
  height: 100%;
}
.header, .footer, .navbar {
  flex: 1 1 100%;
  width: 100%;
}
.sidebar {
  flex: 0 0 205px;
  background-color: lightsteelblue;
  background-image: url(../icon/bg_l.gif);
}
.content {
  min-height: 300px;
  flex: 1 1 360px;
  border:1px solid #99f;
  0padding: 0 10px;
  width: 100%;
  line-height: 1.5;
}

.header, .navbar, .content, .footer, .sidebar {
  box-sizing: border-box;
  0padding: 5px;
  0margin: 1px;
}
.header {
  0height: 65px;
  0background-color: navy;
  font-size: 0.9em;
}
.navbar {
  background-color: #2563FF;
  text-align: center;
}
.navbar a {
  color: #ffffff;
}
.footer {
  background-color: cornflowerblue;
  font-weight: bold;
  font-size: 0.9em;
  color: white;
}
.footer a{
  color: white;
}


.sidebar {
  background-color: lightsteelblue;
  background-image: url(../icon/bg_l.gif);
}

/* narrow page */

#topbar ul {
  display: none;
  background-color: darkslateblue;
  position: absolute;
  top: 100%;
}
#topbar li:hover ul { display: block; }
#topbar, #topbar ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#topbar {
  height: 24px;
  background-color: darkslateblue;
  padding-left: 10px;
  min-width: 470px;
}
#topbar li {
  float: left;
  position: relative;
  height: 100%;
}
#topbar li a {
  display: block;
  padding: 3px;
  width: 110px;
  color: #fff;
  text-decoration: none;
  0text-align: center;
}
#topbar ul li { float: none; }
#topbar li:hover { background-color: royalblue; }
#topbar ul li:hover { background-color: royalblue; }


@media (max-width: 1023px) {
	.header		{ order: 1; display: none;}
	.content	{ flex: 1 1 100%; }
	.sidebar	{ flex: 1 1 200px; display: none;}
}
@media (min-width: 1023px) {
	.header		{ order: 1; }
	.navbar	{ order: 2;  display: none; }
	.sidebar	{ order: 3; }
	.content	{ order: 4; }
	.footer		{ order: 5; }
	#topbar		{display: none;}
}
@media (min-width: 1380px) {
	body		{width: 88%; margin: auto;}
	.navbar	{ order: 2; display: none;}
	#topbar		{display: none;}
}

/* =======  */

.breadcrumb {
	background-color: #E4EAF2;
	text-indent: 5px;
	margin: 0px 0px 2px 0px;
	padding: 2px 0 2px 0;
	font-weight: bold;
}

#header-main {
	background: url(../icon/logo_wiki_bg.gif) repeat-x right;
	padding-bottom: 0;
}
#header-logo,
#header-logo h1,
#header-logo a,
#header-logo a:visited {
	font-size: 24px;
	font-weight: normal;
	color: #444;
	text-decoration: none;
}
#header-logo {
    margin: 0 auto 0;
    float: left;
    text-align: left;
    position: relative;
}

a.edit-section {
    float: right;
    font-size: small;
}

.box1,
.box2 { 
    padding: 4px; /* Поля */
    border: 1px solid navy; /*  Параметры рамки */
	text-align: left;
	}
	
.box1 {
	font-weight: bold;
	color: navy;
	background: lightblue;
	margin:6px 6px 0px 6px;
}
   
.box2 { 
	border-top: 0px;
    background: #e4eaf2;  /* Цвет фона */ 
	margin:0px 6px 0px 6px;
   }

#login-box {
	font-size: 0.9em;
	padding-right: 5px;
}

#login-box li a:hover {
    color: white;
    text-decoration: underline;
	font-size: 0.9em;
}

#search_box {
	margin: 2px auto 0;
	overflow: hidden;
	float: right;
	text-align: left;
	position: relative;
	padding-right: 5px;
}
.search input {
    padding-right: 4px;
}

.files, .comment, .rating, .category {
	font-size: 0.9em;
    background-color: #FFFFFF;
    padding:2px 0 2px 0;
    margin: 0 0 2px 0;
	text-indent: 5px;
    border-bottom: 1px solid #ccc;
    float: left;
    width: 100%;
}
.filesform, .commentform {
    padding:0;
    margin: 00;
}
.commentform form textarea {
    width: 99%;
    height: auto;
    padding: 0;
}
#header-files h1, #header-comments h1, #header-rating h1 {
	    width: 90%;
		font-size: 15px;
}
#header-files, #header-comments, #header-rating {
    background-color: #F0F4F5;
    padding:2px 0 2px 0;
    margin:0;
	text-indent: 5px;
    border-top: 1px dotted #ccc;
    border-bottom: 1px solid #eee;
    float: left;
    width: 100%;
}
label {
	font-size: 0.9em;
	padding-left: 5px;
}

h1 {
  text-indent: 10px;
}

.layout-box {
  line-height: 1.3;
}

p, td, th, li, select, textarea {
    line-height: 1.5em;
}

p, td, th, li, select, textarea {
  font-family: Verdana, Arial, Helvetica, sans-serif;}
  
/*  CompoWiki additions */
 .cmd {
	font-family: "Courier New", Courier, monospace; 
	border: solid #888888 2px; 
	padding: 3px; 
    background: #000; 
	color: #eee; 
} 

/*Formatter Color Box*/
.cb {
    position: relative;
    padding: .5rem .5rem;
	margin: .2rem .5rem;
    border: 1px solid transparent;
    border-radius: .4rem;
}
.cb-notice {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
}
.cb-dab {
    color: #383d41;
    background-color: #e2e3e5;
    border-color: #d6d8db;
}
.cb-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.cb-danger {
    color: #881c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.cb-warning {
    color: #dd2404;
    background-color: #fff3cd;
    border-color: #eeccba;
}
.cb-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}
.cb-light {
    color: #818182;
    background-color: #fffaf0;
    border-color: #f0f0fe;
}
.cb-dark {
    color: #ffffff;
    background-color: #708090;
    border-color: #c6c8ca;
}


/* Important colored text: SYNTAX !!(red)text!! */
.clw-red {color: #CC0000;}
.clw-green {color: #008000;}
.clw-blue {color: #0000CC;}
.clw-yellow {color: #ffff00;}
/* Highlighted text: SYNTAX ??(green)text?? */
.markw-yellow {background: #ffffcc;}
.markw-green {background: #a0ffa4;}
.markw-blue {background: #9ec6ff;}
.markw-red {background: #ffbaba;}
/* Fixed width text: SYNTAX ##monospace## */
code, .mono   {
	font-weight: 300;
	font-size:1em;
	font-family:  Consolas, "Liberation Mono", "Lucida Console", Menlo, Monaco, "DejaVu Sans Mono", "Courier New", "Bitstream Vera Sans Mono", monospace, sans-serif;
}

/*========================================================*/
/* Formatter HTABs */
.htabs {
	display: flex;
	flex-wrap: wrap;
	0background: #E0F0FF;
	0border: 1px solid transparent;
	0border-radius: 12px 12px 0 0;
    border-color: #bbb5eb;

}
.htabs label {
  order: 1;
  display: block;
  flex-grow: 1;
  padding: 0.5rem 0.1rem;
  cursor: pointer;
  background: #90CAF9;
  font-weight: bold;
  transition: background ease 0.2s;
  width:auto;
  flex-grow: 3;
  text-align: center;		  
}
.htabs .htab {
  flex-grow: 1;
  order: 99;
  width: 100%;
  display: none;
  padding: 0.4rem;
}
.htab {
  flex-grow: 1;
  width: 100%;
  display: none;
  background: cornsilk;
  border-left:1px solid;
  border-top: 0px;
  border-right: 1px solid;
  border-bottom: 1px solid;
  border-color: #999;	
  border-radius: 0 0 10px 10px;
}
.htabs input[type="radio"] {
	display: none;
}
.htabs input[type="radio"] + label {
	background: #90CAF9;
	border-left:1px solid ;
	border-top: 1px solid ;
	border-right: 1px solid ;
	border-bottom: 0px solid ;
    border-color: #777;	
	border-radius: 10px 10px 0 0;
}
.htabs input[type="radio"]:checked + label {
	background: cornsilk;
	0border-radius: 10px 10px 0 0;
}
.htabs input[type="radio"]:checked + label + .htab {
	display: block;

}

@media (max-width: 45em) {
  .htabs .htab,
  .htabs label {
    order: initial;
  }
  .htabs label {
    width: 100%;
    margin-right: 0;
    margin-top: 0.2rem;
  }
}

/*========================================================*/
/* accordion */
.accordion_wrap {
	width: 100%;
}
/**/
.accordion_wrap:before {
    content: "";
    display: block;
    clear: both;
}

.accordion {
  margin: 0;
  margin-bottom: 1.5rem;
  padding: 0;
  list-style: none;
    }

.accordion_item {
  border-bottom: 1px solid #5a95fd;
  	width: 100%;
}
.accordion_item:last-of-type {
  border-bottom: none;
}

/**
 * Элемент label который запускает открыть/закрыть.
 */
.accordion_trigger {
  display: block;
  background-color: #007ccf;
  color: #ddd;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  padding: 12px 14px;
  position: relative;
    max-width: 100%;
}
/* переключатель вкладок, положение вниз */
    .accordion_trigger:before {
        content: '\002B';
        0height: 8px;
        width: 1px;
        display: block;

        position: absolute;
        right: 20px;
        0top: 24px;
		0margin-left: 14px;
    }
    /* активный переключатель, положение вверх */
    .accordion_toggle:checked ~ .accordion_trigger:before {
		content: "\2212";
    }
/* меняем цвет фона у активного переключателя */
.accordion_toggle:checked ~ .accordion_trigger {
  background-color: #006bb3;
}
/**
 * эти элементы radio/checkbox всегда должны быть скрыты.
 */
.accordion_toggle {
  position: absolute;
  display: none;
}

/**
 * скрытое содержание аккордеона.
 */
.accordion_target {
  border: 1px solid;
  clip: rect(0 0 0 0);
  max-height: 0;
  margin: 0px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  background-color: #eff;
  color: #444;  
}
/**
* когда переключатель checked на radio/checkbox, показать содержимое аккордеона.
*/
.accordion_toggle:checked ~ .accordion_target {
  position: static;
  overflow: visible;
  max-width: 100%;
  heigh: 100%;
  max-height: 800px;
  margin: auto;
  clip: auto;
  padding: 1.2rem;
 /* задержка появления  функция анимации */
 -webkit-animation:fadeIn ease-in 0.3s; 
 -moz-animation:fadeIn ease-in 0.3s;
 animation:fadeIn ease-in 0.3s;
 transition: max-height 0.3s linear;
}
/* анимация при появлении блоков с содержанием */
@-moz-keyframes fadeIn {
    from { opacity: 0; }
to { opacity: 1 }
}
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
to { opacity: 1 }
}
@keyframes fadeIn {
    from { opacity: 0; }
to { opacity: 1 }
}