/* CSS Document */

    @viewport {
      width: device-width;
    } 

html {height: 100%;}

body  {height: 100%;
background-color:#131111;/* div блока*/
margin:0; padding:0; /*обнуляем поля и отступы, чтобы браузеры вели себя адекватно*/
  font-family: Arial, Sans-Serif;
  font-size: 14px;
  font-color: #ccc;
text-align:center; /*центрируем специально для IE */
  }
 p {font-family: Verdana, Geneva, sans-serif; color: #ccc; font-size: 14px;}
pre {font-family: Verdana, Geneva, sans-serif; color: #ccc; font-size: 12px;}

h1 {text-align:center;  font-weight: lighter;  
font-family: Verdana, Geneva, sans-serif; 
        font-size: 18px; /* Размер шрифта */
color: #ccc; }
h2 {text-align:left;  font-weight: lighter;  
font-family: Verdana, Geneva, sans-serif; 
        font-size: 16px; /* Размер шрифта */
    padding: 5px; /* Добавляем поля */
    margin: 0; /* Убираем отступы у параграфа */
    color: #cc6600; /* Цвет текста */
    border-bottom: 2px solid #333; /* Параметры линии внизу */}

h3 {text-align:left;  font-weight: lighter;  
font-family: Verdana, Geneva, sans-serif; 
        font-size: 14px; /* Размер шрифта */
    padding: 5px; /* Добавляем поля */
    margin: 0; /* Убираем отступы у параграфа */
    color: #cc6600; /* Цвет текста */}
    




   .colortext {color: #cc6600;font-size: 12px;} /* оранжевый цвет выделения */
   .presscolor {color: #cc6600;font-size: 14px;} /* оранжевый цвет выделения press*/
  
#container{
/*фиксированная ширина 1000 пикселей*/
width:1000px;
/*ровняем по центру, по горизонтали*/ 
margin:0 auto;
}

/*Стили для верхнего div блока*/
#header{
background-color:#131111;/*черный фон div блока*/
}


/*меню*/
.con {
	width: 1000px;
	height: 45px;
}


ul#menu {
				margin:0; padding:0;
				height:40px;
				overflow:hidden;
				width:1002px;
			}
				#menu li {
					display:inline;
					float:left;
					list-style-type:none;
					margin-right:0px;
				}
				
				 ul a {
					display:block;
					height:80px;
					top:0px;
					position:relative;
					
				}
				
				 a.index {
					background:url(menu/index.jpg) no-repeat bottom center;
                                        width:136px;
				}
				
				a.group {
					background:url(menu/group.jpg) no-repeat bottom center;
                                        width:92px;
				}

				a.discography {
					background:url(menu/discography.jpg) no-repeat bottom center;
                                        width:164px;
				}

                                a.photo {
					background:url(menu/photo.jpg) no-repeat bottom center;
                                        width:78px;
				}
                                a.video {					background:url(menu/video.jpg) no-repeat bottom center;                                        width:94px;				}
				                a.audio {
					background:url(menu/audio.jpg) no-repeat bottom center;
                                        width:88px;
				}

                                  a.chords {					background:url(menu/chords.jpg) no-repeat bottom center;                                        width:115px;				}                             

                                a.press {
					background:url(menu/press.jpg) no-repeat bottom center;
                                        width:105px;
				}

 
				
				a.contacts {
					background:url(menu/contacts.jpg) no-repeat bottom center;
                                        width:130px;
				}

                                

                                a.communication {
					background:url(menu/communication.jpg) no-repeat bottom center;
                                        width:98px;
				}
		
                                a.shop {
					background:url(menu/shop.jpg) no-repeat bottom center;
                                        width:93px;
				}


/*Стили для контент div блока*/
#content{
background-color:#131111;/* фон div блока*/
width:760px; /*ширина центрального div блока */
float:left; /*располагаем по левому краю, с обтеканием справа*/
}

.block{position: relative;
       border: 2px solid #333;
       border-radius: 5px; 
       background-color: #131111;
       text-align:left;
       overflow: auto;
       padding: 10px;
       margin: 5px;}


p.title {text-align:center;    
font-family: Verdana, Geneva, sans-serif; 
    font-weight:  500; /* Жирное начертание */
    font-size: 16px; /* Размер шрифта */
    padding: 5px; /* Добавляем поля */
    margin: 10px; /* Убираем отступы у параграфа */
    /*background: maroon;*/ /* Цвет фона */
    color: #cc6600; /* Цвет текста */
       }

p.news {text-align: left;
    padding: 10px; /* Добавляем поля */
    margin: 0px; /* Убираем отступы у параграфа */
    /*border: 2px dotted white;*/ /* Параметры линии вверху */
   }


/*.media {position:absolute; top:100px; left:20px; float:left; width: 320px; display:block;}
.news {width: 420px;display:block;text-align:center;}*/

/*обтекание видео текстом*/
.video-wrap {
float: left;
margin: 5px 20px 5px 0;
}


/*Стили для правого div блока */
#right{
background-color:#131111;/*фон div блока*/
margin:0px; /*необходимые обнуления*/
margin-left:761px; /*отступ слева, ширина левого div блока + 1px*/}

/*социальные кнопки*/
#social {text-align:center; height: 40px;  margin: auto;  padding: 5px 5px 5px 10px;}
#social a { float: left; height: 40px;}
#social a:hover {display: block; height: 40px;}
#social .vk {background: url("social/vk_0.png")   no-repeat; display: block; width:37px;}
#social .vk:hover {background: url("social/vk.png")   no-repeat; display: block; width:37px;}
#social .fb {background: url("social/fb_0.png")   no-repeat; display: block; width:37px;}
#social .fb:hover {background: url("social/fb.png")   no-repeat; display: block; width:37px;}
#social .ok {background: url("social/ok_0.png")   no-repeat; display: block; width:37px;}
#social .ok:hover {background: url("social/ok.png")   no-repeat; display: block; width:37px;}
#social .tel {background: url("social/tel_0.png")   no-repeat; display: block; width:37px;}
#social .tel:hover {background: url("social/tel.png")   no-repeat; display: block; width:37px;}
#social .yt {background: url("social/yt_0.png")   no-repeat; display: block; width:37px;}
#social .yt:hover {background: url("social/yt.png")   no-repeat; display: block; width:37px;}
#social .ig {background: url("social/ig_0.png")   no-repeat; display: block; width:37px;}
#social .ig:hover {background: url("social/ig.png")   no-repeat; display: block; width:37px;}


.afisha {background: url("images/afisha.png")   no-repeat; display: block; width:225px; height: 350px;
border: 2px solid #333; border-radius: 5px; padding: 0; margin:5px}
.afisha img {position:relative; top:36px;}

.grafik {background: url("images/gg.png")   no-repeat; display: block; width:225px; height: 350px;
border: 2px solid #333;border-radius: 5px; padding: 0; margin:5px}
.grafik img {position:relative; top:36px;}


#clear{clear:left;/*отменяем обтекание, прижатого к левой стороне блока*/}


/*Стили для нижнего div блока*/
#footer{
/*фиксированная ширина 1000 пикселей*/
width:1000px;height:210px;
/*ровняем по центру, по горизонтали*/ 
margin:0 auto;
text-align:center;
background: url(top/footer.png)no-repeat center ; 
}


/*Стили для нижнего ссылочного div блока*/
#links{text-align:center; /*height:70px;*/
position:relative;
top:50%;}
a.links {color: #cc6600;}
a.links:link {color: #cc6600; text-decoration: none;}
a.links:visited {color: #cc6600; text-decoration: none; }
a.links:hover {color: #ccc; text-decoration: underline;}
a.links:active {color: #ccc; text-decoration: none;} 

a.soc {color: #ccc;}
a.soc:link {color: #ccc; text-decoration: none;}
a.soc:visited {color: #ccc; text-decoration: none; }
a.soc:hover {color: #ccc; text-decoration: underline;}
a.soc:active {color: #ccc; text-decoration: none;} 

a.footer{color: #ccc;}
a.footer :link{color: #ccc; text-decoration: underline;}
a.footer :visited{color: #ccc; text-decoration: none; }
a.footer :hover{color: #cc6600; text-decoration: none;}
a.footer :active{color: #cc6600; text-decoration: none;}

.niz {position:relative;
top:55%; height:10px;
}
p.niz {color: #666;}



img.photo {border: 2px solid #333; }

 
.youtube {
    background: #242424; /* Цвет фона */
    padding: 4px; /* Поля вокруг */
    display: block; /* Блочный элемент */
    width: 340px; /* Ширина */
    height: 270px;
    float: left; /* Блоки выстраиваются по горизонтали */
    margin: 5px ; /* Отступы */
    text-align: center; /* Выравнивание по центру */
border: 2px solid #333;
       border-radius: 5px; 
   }

.photoalbom {
    background: #242424; /* Цвет фона */
    padding: 4px; /* Поля вокруг */
    display: block; /* Блочный элемент */
    width: 231px; /* Ширина */
    height: 230px;
    float: left; /* Блоки выстраиваются по горизонтали */
    margin: 5px ; /* Отступы */
    text-align: center; /* Выравнивание по центру */
border: 2px solid #333;
       border-radius: 5px; 
   }

.linkblock {cursor: pointer;}
.linkblock :hover {background:#343434;} /*меняем цвет при наведении курсора*/


.chord {font-size: 14px;
    border: 2px dotted #333; /* Параметры границы */
    border-radius: 5px; 
    background: #242424; /* Цвет фона */
    padding: 0px 30px 0px 30px; /* Поля вокруг текста */
   }
.chord p{font-family: Verdana, Geneva, sans-serif; color: #ccc; font-size: 12px;}

.chord a {color: #ccc;}
.chord a:link {color: #ccc; text-decoration: underline;}
.chord a:visited {color: #ccc; text-decoration: none; }
.chord a:hover {color: #cc6600; text-decoration: none;}
.chord a:active {color: #cc6600; text-decoration: none;}


a {outline: none; border: none;/* Убираем границу вокруг ссылок для FireFox */
color: #ccc;}
a:link {color: #ccc; text-decoration: underline;}
a:visited {color: #ccc; text-decoration: underline; }
a:hover {color: #cc6600; text-decoration: underline;}
a:active {color: #cc6600; text-decoration: none;} 


.top a { float: left; height: 153px; background: url("top/top.png")   no-repeat; display: block; width:381px;}
.top a:hover {display: block; height: 153px; background: url("top/top.png")   no-repeat; display: block; width:381px;}

hr {color: #000;
}


   .leftimg {
    float:left; /* Выравнивание по левому краю */
    margin: 7px 7px 7px 0; /* Отступы вокруг картинки */
   }
   .rightimg  {
    float: right; /* Выравнивание по правому краю  */ 
    margin: 7px 0 7px 7px; /* Отступы вокруг картинки */   }


/* адаптивность комментариев */
@media only screen and (min-width:769px) {.google-ads-mobile {display:none;}}@media only screen and (max-width: 767px) {.google-ads-st {display:none;}}/* адаптивность комментариев */
 /* tabs */ul#tabs { height: 28px; line-height: 25px; list-style: none; border-bottom: 1px solid #E4E4E4; }
 #tabs li { display: inline; font-size: 1em; outline: 0; border: 0; background: #D8D8D8; color: #555; padding: 7px 10px; margin: 20px 0 0 0; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; vertical-align: middle; cursor:pointer; }
 #tabs li:hover { background: #2e4c79; color: #fff }
 #tabs li.current { background: #2e4c79; color: #fff }
 .box { display: none; }
 .box.visible { display: block; }
/* knopka na verh*/#back-top {position: fixed; bottom: 0px; right: 15px; z-index:999;}
#back-top a {width: 100px; display: block;text-align: left;font: 14px/100% Verdana;text-decoration: none;color: #fff;
 /* background color transition */-webkit-transition: 1s;-moz-transition: 1s;transition: 1s;}#back-top a:hover {color: #fff;}/* arrow icon (span tag) */
#back-top span {width: 100px;height: 30px;display: block;	margin-bottom: 7px;line-height:30px;background: #777 url(up-arrow.png) no-repeat center center;opacity:0.7;-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;-webkit-transition: 1s;-moz-transition: 1s;transition: 1s;}

#back-top a:hover span {background-color: #777;	opacity:1;}
/*дискография*/
.list { color:#ccc; display: block; margin-left: 210px; margin-top: -30px;}/*отодвинули от элемента слева*/.list ul { font-size: 12px; list-style-type: circle; }.list ul li {list-style-type: circle ; padding:5px 5px 5px 5px; font-size: 12px;  }
/*статьи*/.artex { font-family: Verdana, Geneva, sans-serif;  font-size: 14px;  color:#ccc; display: block; }.artex ul ol{font-family: Verdana, Geneva, sans-serif; font-size: 14px; list-style-type: decimal; }.artex ul ol li {list-style-type: decimal; font-family: Verdana, Geneva, sans-serif;  font-size: 14px; padding:5px 5px 5px 5px; }