/* Reset */
HTML, BODY, DIV, SPAN, APPLET, OBJECT, IFRAME,
H1, H2, H3, H4, H5, H6, P, BLOCKQUOTE, PRE,
A, ABBR, ACRONYM, ADDRESS, BIG, CITE, CODE,
DEL, DFN, EM, IMG, INS, KBD, Q, S, SAMP,
SMALL, STRIKE, STRONG, SUB, SUP, TT, VAR,
B, U, I, CENTER,
DL, DT, DD, OL, UL, LI,
FIELDSET, FORM, LABEL, LEGEND,
TABLE, CAPTION, TBODY, TFOOT, THEAD, TR, TH, TD,
ARTICLE, ASIDE, CANVAS, DETAILS, EMBED, 
FIGURE, FIGCAPTION, FOOTER, HEADER, HGROUP, 
MENU, NAV, OUTPUT, RUBY, SECTION, SUMMARY,
TIME, MARK, AUDIO, VIDEO {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
	}
ARTICLE, ASIDE, DETAILS, FIGCAPTION, FIGURE,
FOOTER, HEADER, HGROUP, MENU, NAV, SECTION {
	display:block;
	}
BODY {
	line-height:1;
	}
OL ,ul {
	list-style:none;
	}
BLOCKQUOTE, Q {
	quotes:none;
	}
BLOCKQUOTE:before, BLOCKQUOTE:after,
Q:before, Q:after {
	content:'';
	content:none;
	}
TABLE {
	border-collapse:collapse;
	border-spacing:0;
	}

/* Global
---------------------------------------- */
body {
	background:#fff;
	color:#333;
	font: 0.8em sans-serif,Verdana,"Trebuchet MS";
	line-height: 1.5em;
}
a:link{
color:#373;
/*text-decoration: none;*/
/*border-bottom: 1px dotted;*/
}
a:visited{
color:#595;
/*text-decoration: none;*/
/*border-bottom: 1px dotted;*/
}
a:hover{
color:#6a6;
/*border-bottom-style: solid;*/
}


/*width - это ТОЛЬКО ширина контента, а не общая ширина!!! в ie надо указать DOCTYPE чтобы было так...
по-этому width,боковые border,padding для основных блоков разметки надо делать в одних единицах,
либо НЕ НАДО указывать ширину - тогда блоковый элемент займет всю ширину!!!*/
#page{width:860px;margin:0 auto}
#header{height:80px}
#content{float:left;width:550px}
#sidebar{float:right;clear:right;width:260px}
#footer{clear:both;}
/*#page,#header,.menu,#content,#sidebar,#footer{overflow:hidden;}иначе не видны тени...*/
/*margins*/
#header{margin-top:1em}
#header,.menu,#sidebar,#content{margin-bottom:1.5em}

/*#content{padding-left:1em} - отступ не нужен, если нет видимой границы...*/
/*ОБЩИЙ боковой отступ делать осторожно, т.к.он в em,
по-этому ширину контент+сайдбар делаем с запасом 40=900-580-280,
у сайдбара отступа нет - можно делать панели на всю ширину*/

p,li{padding-bottom:0.9em}
h1,h2,h3{padding-bottom:0.2em}
/*#sidebar p{padding: 0 1em 0.9em 1em;} - отступ не нужен, если нет видимой границы...*/

/*colors*/
.panel, #header, #footer{
color:#373;
padding: 0.9em 1em 0.9em 1em;
margin-bottom: 0.9em;
background:#f0fff0; border:1px solid #afa;
/*background:-webkit-gradient(linear, left top, left bottom, from(#efe), to(#fff)); 
background:-moz-linear-gradient(top, #efe, #fff);*/
}
#header{
background:#f0fff0 url(images/zastavka.png) no-repeat center left;
}

/*fonts*/
#header{text-align:right}
#footer{text-align:center}
#content,#sidebar{text-align:justify}
h1{
font-size:1.4em;
font-weight:bold;
color:#373;
}
h2{
font-size:1.3em;
font-weight:bold;
color:#373;
}
h3{
font-size:1.1em;
font-weight:bold;
color:#373;
}
small{font-size:0.8em}


/*ul.menu действует только на ul этого класса, .menu xx - действует на все, что наследуется внутри...*/
.menu {
height:2em;
line-height:2em;
vertical-align:middle;/*работает только на строку или ячейку, по-этому нужен line-height*/
font-size:1.2em;
/*font-weight:bold;kz слишком...*/
color:#efe;
background:#484;
}
ul.menu{
list-style-type:none;
}
.menu li {
float:left;
}
.menu a {
float:left;
padding:0 0.7em;
text-decoration:none;
color:#efe;
background:#484;
}
.menu a:hover{
/*text-decoration:underline;kz либо это,либо цвет*/
background:#373;
}
.menu a.active{
background:#262;
}

/*border*/
.panel, #header, #footer{
border:1px solid #beb;
}
.panel,
.menu,.menu a,
#header,#footer{
-webkit-border-radius:4px;
-moz-border-radius:4px;
}
.panel,
.menu,
#header,#footer{
-webkit-box-shadow: 1px 1px 3px rgba(0,80,0,0.4);
-moz-box-shadow:1px 1px 3px rgba(0,80,0,0.4);
box-shadow:1px 1px 3px rgba(0,80,0,0.4);
}




/*.icon-record,.icon-transcribe,.icon-find-chords,.icon-style{
float:left;clear:left;margin-right:5px;width:24px;height:24px;
}
*/
.icon-record,.icon-transcribe,.icon-find-chords,.icon-style,.icon-main{
padding-left:32px;
min-height:24px;
}
.icon-record {
background:url(images/kzrecord.png) 0 0px no-repeat;
}
.icon-transcribe {
background:url(images/kztranscribe.png) 0 2px no-repeat;
}
.icon-find-chords {
background:url(images/kzfindchords.png) 0 2px no-repeat;
}
.icon-style {
background:url(images/kzstyle.png) 0 0px no-repeat;
}
.icon-main {
background:url(images/kzmainicon24.png) 0 0px no-repeat;
}
.circle  li{
background:url(images/kzcircle.png) 0 3px no-repeat;
padding-left: 24px;
min-height:12px;
}


i,em{font-style:italic}
b,strong{font-weight:bold}
hr{display:none;}/*чтобы были видны разделители без css*/


/*#content,.menu,#sidebar{border:1px solid red}*/
/*#header{padding:0.9em 1em 0.9em 1em}*/

.center{display:block;text-align:center; margin:0 auto}