/** CSS RESET **/
* {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: inherit;
    font-size: inherit;
    vertical-align: baseline;
    box-sizing: border-box !important;
    outline: none;
    outline-width: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ul, ol { list-style-type: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

/********************************************************************************* ШРИФТЫ ***/
// todo Добавить все кирилические шрифты GoogleFonts сюда и закомментировать

//@import url(https://fonts.googleapis.com/css?family=Roboto:400,700italic&subset=latin,cyrillic);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700italic&subset=latin,cyrillic);


// @font-face {
//   font-family: "Century751";
//   src: local("Century751"),
//       url("../fonts/century751-sebd-bt-semi-bold.ttf");
// }
// .Century751 {
//  font-family: "Century751";
//  font-weight: normal;
// }

/*************************************************************************** DEFAULT CSS ***/
h1, h2, h3, h4, h5, h6 { font-size: inherit; }

.hide { display: none; }
.clear { clear: both; }

strong, b { font-weight: bold; }
em { font-style: italic; }

#default-article-style {
    font-size: 14px;
	line-height: 22px;

    p, ul, ol, table, hr {
        margin: 0px 0px 10px 0px;
    }
    ul, ol {
        padding: 0px 0px 0px 30px;
    } 
    ul {
        list-style-type: disc;
    }
    ol {
        list-style-type: number;
    }
    table {
        th, td {
            padding: 5px;
            border: 1px solid #E4E4E4;
        }
    }
    hr {
        height: 1px;
        background: #E4E4E4;
    }
}

/********************************************************************************** BODY ***/

/** Максимальная ширина сайта **/
@site-width: 1100px;

/** Минимальная ширина сайта **/
@min-site-width: 0px;

/** Ширина левой колонки **/
@left-sidebar-width: 0px;

/** Ширина правой колонки **/
@right-sidebar-width: 0px;

/** Ширина области контента - вычисляеться автоматически (не используеться) **/
@content-width: @site-width - @left-sidebar-width - @right-sidebar-width;

/** 
  * Верстка сайта разбита на горизонтальные уровни (например: #header, #main, #footer)
  * Идентификатор (id) уровня может быть любым, его название не влияет на верстку
  * Внутри уровня обязательный вложенный блок .wrapper
  * Стили далее отражают сказанное выше...
**/
body > * > .wrapper {
    width: @site-width;
    max-width: 100%;
    min-width: @min-site-width;
    margin: 0px auto;
    overflow: hidden;
    clear: both;
    
    /** Отступ от границ блоков **/
    > * {
        // padding: 5px;
        // background: #FFF;
    }
    
    /** Временное выделение границ блоков **/
    * {
        //border: 1px solid #666;
    }
}
/** 
 * Уровень #main делиться на колонки: #left-col, #center-col, #right-col
**/
#right-col, #center-col {
    padding: 5px;
    vertical-align: top;
	margin: 0px auto;
}
#left-col {
    float: left;    
}
#right-col {
    float: right;    
}
#center-col {
    // width: @content-width + @left-sidebar-width + @right-sidebar-width;
    max-width: 100%;
    min-width: @min-site-width;

    padding: 5px;
    vertical-align: top;
    overflow: hidden;
    min-height: 500px;
}
/**
  * В зависимости от количества колонок на сайте, 
  * необходимо раскомментировать или закомментировать
  * соответствующий код ниже
  *
/************************************************************** только центральная колонка ***/
// #right-col {
//     display: none;
// }
// #left-col {
//     display: none;
// }
// #center-col {
//   width: @content-width + @right-sidebar-width + @left-sidebar-width; 
// }
/************************************************************* левая и центральная колонки ***/
#left-col {
    width: @left-sidebar-width;
}
#center-col {
  max-width: @content-width + @right-sidebar-width; 
}
#right-col {
    display: none;
}
/************************************************************ правая и центральная колонки ***/
// #right-col {
//     width: @right-sidebar-width;
// }
// #center-col {
//   width: @content-width + @left-sidebar-width; 
// }
// #left-col {
//     display: none;
// }
/***************************************************** правая, левая и центральная колонки ***/
// #right-col {
//     width: @right-sidebar-width;
// }
// #center-col {
//     width: @content-width;
// } 
// #left-col {
//     width: @left-sidebar-width;
// }
/*********************************************************************************************/
/**************************************************************************** for new site ***/
body {
    font-family: Open Sans, Trebuchet MS, Arial, sans-serif;
    font-size: 16px;
    background: #e3f0e9;
    color: #333;
}
/** HEADER **/
#header {
    .wrapper {
        background: #fff;
        .logo {
            float: left;
            width: 85px;
            height: 85px;
            margin: 40px 10px 40px 40px;

            img {
                width: 100%;
                height: 100%;
            }
        }
        .hgroup {
            float: left;
            margin: 33px 10px 20px 15px;
            color: #56b083;

            .site-title {
                font-size: 36px;
            }
            .site-description {
                font-size: 18px;
		max-width: 575px;
            }
        }
        .contacts {
            color: #56b083;
            float: right;
            font-size: 24px;
            margin: 40px 40px 40px 10px;
            text-align: right;
        }

    }    
}
#navigation {
    .wrapper {

        ul.menu {
            overflow: auto;
            background: #56b083;
            padding: 0px 50px;
            border-bottom: 1px solid #41936A;
            border-top: 1px solid #41936A;
                
            > li:first-of-type {
                a {
                    border-left: 1px solid #56B083; // none border
                }
            }
            > li {
                float: left;
                
                a {
                    text-decoration: none;
                    color: #fff;
                    padding: 15px 20px;
                    display: inline-block;
                    border-left: 1px solid #41936A;
                }


                a:hover {
                    background: #78c09c;
                }

                > ul {
                    position: absolute;
                    display: none;
                    background: #56b083;
                    margin: 0px 0px 0px 0px;
                    width: 240px;
                    border-top: 1px solid #41936A;
					z-index: 1000;
					
                    > li {
                        //position: relative;
                        //top: 0px;

                        a {
                            padding: 12px;
                            width: 100%;
                            border-bottom: 1px solid #41936A;
                        }
                        

                        > ul {
                            width: 240px;
                            background: #56b083;
                            position: absolute;
                            left: 240px;
                            //top: 10px;
                            display: none;
                            margin: -40px 0px 0px 0px;    
                            border-top: 1px solid #41936A;

                            > li {
                                // position: absolute;
                            }
                        }
                    }
                }
            }
            li:hover {


                > ul {
                    display: block;
                }
            }
        }
    }
}
#slider {
	#mp-slider {
		max-width: @site-width;
		overflow: hidden;
		max-height: 350px;
		height: 350px;
		
		.slide {
			position: absolute;
			width: inherit;
			height: inherit;
			float: left;
			overflow: hidden;
			
			img {
				max-width: @site-width;
				width: 100%;
			}
		}
        .slide_title {
            display: none;
        }
		
		.prev_slide,
		.next_slide {
			position: relative;
			width: 32px;
			height: 32px;
			cursor: pointer;
			margin: 170px 10px 10px 10px;
			background: url('../img/slider_icons_32x32.png') no-repeat;
		}
		.prev_slide {
			background-position: 0px 0px;
			float: left;
		}
		.next_slide {
			background-position: -32px 0px;
			float: right;
		}

	}
}
#main {

    .wrapper.content {
        background: #FFF;


    }
}
#center-col {

    .breadcrumb {
        font-size: 12px;
        a {
            color: #56b083;
        }
    }

    h1:first-of-type {
        font-size: 30px;
        color: #56b083;
        padding: 10px 0px;
    }
    padding: 20px;
    #default-article-style;

}

/** FOOTER **/
#footer {
   

    .wrapper {
        background: #56B083;
		
		a {
			color: #FFF;
		}
        ul.menu {
            text-align: center;
            margin: 15px;

            li {
                display: inline-block;

                a {
                    color: #FFF;
                    text-decoration: none;
                    padding: 10px;
                    margin: 5px 5px;
                    display: inline-block;
                }
                a:hover {
                    text-decoration: underline;
                }

                ul {
                    display: none;
                }
            }
        }

        .copyright {
            margin: 15px;
            text-align: center;
            color: #FFF;
        }
		
		.counters {
			text-align:center;
			
			> div {
				display: inline-block;
				margin: 15px;
			}
		}
        
		.author {
			text-align: center;
			margin: 15px;
		}
    }
}