@import url(https://fonts.googleapis.com/css?family=Open+Sans);

@font-face {
   font-family: 'FontAwesome';
   src: url('../fonts/FontAwesome/fontawesome-webfont.eot');
   src: url('../fonts/FontAwesome/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
   url('../fonts/FontAwesome/fontawesome-webfont.woff') format('woff'),
   url('../fonts/FontAwesome/fontawesome-webfont.ttf') format('truetype'),
   url('../fonts/FontAwesome/fontawesome-webfont.svg#FontAwesome') format('svg');
   font-weight: normal;
	font-style: normal;
}

/*
 *				НАВИГАЦИЯ
 */
#nav{
	float:left;
	width:100%;
	list-style:none;
	margin-bottom:0px;
	margin-top:0px;
	padding-left: 40px;
}
#nav li{
	float:left;
	margin-right:10px;
	position:relative;
	display:block;
}
#nav li a{
	display:block;
	color:#fff;
	padding-left: 5px;
	padding-right: 5px;
	text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Тень текста, чтобы приподнять его на немного */
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	font-size: 13px;
}
#nav li a:hover{
	color:#fff;
	background:#6b0c36;
	background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
}

/*--- ВЫПАДАЮЩИЕ ПУНКТЫ ---*/
#nav ul{
	list-style:none;
	position:absolute;
	left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */
	opacity:0; /* Устанавливаем начальное состояние прозрачности */
	-webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */
}
#nav ul li{
	padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
	float:none;
}
#nav ul a{
	white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
	display:block;
}
#nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */
	left:0; /* Приносим его обратно на экран, когда нужно */
	opacity:1; /* Делаем непрозрачным */
}
#nav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
	background:#1863BA;
	background:rgba(20, 89, 160, 0.75); /* Выглядит полупрозрачным */
}
#nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */
	-webkit-transition:-webkit-transform 0.075s linear;
}
#nav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */
	background:#333;
	background:rgba(51,51,51,0.75); /* Будет полупрозрачным */
	-moz-transform:scale(1.05);
	-webkit-transform:scale(1.05);
}

#logout {
	float: right;
	margin-top: -32px;
	display:block;
	color:#fff;
	padding-left: 5px;
	padding-right: 5px;
	font-weight:bold;
}

#adminbar .ab-top-secondary {
    float: right;
}

#adminbar {
	color: #ccc;
	font: 400 13px/32px "Open Sans",sans-serif;
	height: 32px;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	min-width: 600px;
	z-index: 10;
	background: #23282d;
}

#adminbar a {
	font-size: 13px;
}

#admin-add-button::before {
	content: "\f067";
	font-family: FontAwesome;
	padding-right: 5px;
}

#admin-edit-button::before {
	content: "\f040";
	font-family: FontAwesome;
	padding-right: 5px;
}

.comments-icon::before {
	content:  "\f075";
	font-size: 14px;
	font-family: FontAwesome;
	margin-right: 4px;
}