/*Google Web Font - Let's use it :)*/
@import url(http://fonts.googleapis.com/css?family=Tenor+Sans|Open+Sans+Condensed:700&subset=latin,cyrillic);

ul.menu,
ul.menu li.visible,
.slide-menu {
        position: relative; <!-->left;-->
        display: <!--inline-->block;	
        list-style: none;
	text-align: center;
	padding: 0;
	margin: 0;
<!--float: left;-->
}
.menu li a {
	display: block;
	text-decoration: none;
}
ul.menu li.visible {
	background: #6495ED; /*фон меню*/
	border: 3px solid #DC143C;
	
	overflow: hidden;
	height: 120px;
	width: 200px;
}
ul.menu li.visible:hover {
	-webkit-box-shadow: 0 0 10px #000;
	-moz-box-shadow: 0 0 10px #000;
	box-shadow: 0 0 10px #000;
	z-index: 1;
}
ul.menu li.visible > a {
	color: #3D3D5C;
	font: normal normal 22px/120px 'Tenor Sans', Verdana, sans-serif;
	white-space: nowrap;
}

/*
Стили для всех блоков по умолчанию
For all blocks style default
----------------------------------------------*/
.slide-menu {
	position: absolute;
	bottom: 110%;
	left: 110%
	overflow: hidden;
	background: #36FF00<!--3D3D4C-->;
	color: <!--#fff;-->#FF4500;
	height: 100%;
	width: 100%;
}
ul.menu li.visible:hover .slide-menu {
	bottom: 0%;
	left: 0%;
}
.slide-menu li {
	position: relative;
	right: 110%;
	opacity: 0;
}
ul.menu li.visible:hover .slide-menu li {
	right: 0;
	opacity: 1;
}

.slide-menu li a {
	font: normal normal 18px 'Open Sans Condensed', Tahoma, sans-serif;
	color: #36FF00<!--fff-->;
	opacity: .8;
	padding: 1px 5px;
	margin: 2px 14px 2px 2px;
	height: 100%;
	*height: auto; /*IE7*/
}
.slide-menu li a:hover {
	background: #E6E6E6;
	border-left: 5px solid #666;
	color: #000;
	-webkit-box-shadow: 0 0 10px 1px #E0E0FF;
	-moz-box-shadow: 0 0 10px 1px #E0E0FF;
	box-shadow: 0 0 10px 1px #E0E0FF;
	opacity: 1;
}
/*CSS3 CSS3 анимации для всех необходимых элементов
CSS3 animation for all required elements
-----------------------------------*/
.slide-menu {
	-webkit-transition: bottom .5s ease-out, left .5s ease-out;
	-moz-transition: bottom .5s ease-out, left .5s ease-out;
	-o-transition: bottom .5s ease-out, left .5s ease-out;
	transition: bottom .5s ease-out, left .5s ease-out;
}
.slide-menu li {
	-webkit-transition: right .8s ease, opacity 1s ease;
	-moz-transition: right .8s ease, opacity 1s ease;
	-o-transition: right .8s ease, opacity 1s ease;
	transition: right .8s ease, opacity 1s ease;
}
.slide-menu li a {
	-webkit-transition: border .5s ease;
	-moz-transition: border .5s ease;
	-o-transition: border .5s ease;
	transition: border .5s ease;
}

/*
Прибавим шарма. Фоны слайдер блоков
Let's make a unique style for each slide block :)
----------------------------*/
.home,
.about,
.dev,
.contact {
	text-align: left;
}
.home:before,
.about:before,
.dev:before,
.contact:before,
.social:before {
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 50%;
	-webkit-transform:scale(1) rotate(-20deg);
	-moz-transform:scale(1) rotate(-20deg);
	-ms-transform:scale(1) rotate(-20deg);
	-o-transform:scale(1) rotate(-20deg);
	transform:scale(1) rotate(-20deg);
	opacity: .4;
}

.solo:before {
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 50%;
	-webkit-transform:scale(1) rotate(-20deg);
	-moz-transform:scale(1) rotate(-20deg);
	-ms-transform:scale(1) rotate(-20deg);
	-o-transform:scale(1) rotate(-20deg);
	transform:scale(1) rotate(-20deg);
	opacity: .4;
}

.home:before {
	background: url(img/slide-backgr/home.png) no-repeat;
}
.about:before {
	background: url(img/slide-backgr/home.png) no-repeat;
}
.dev:before {
	background: url(img/slide-backgr/home.png) no-repeat;
}
.contact:before {
	background: url(img/slide-backgr/home.png) no-repeat;
}
.social:before {
	background: url(img/slide-backgr/open_mail.png) no-repeat;
}

.solo:before {
	background: url(img/slide-backgr/about.png) no-repeat;
}

.home {
	background: #cfc;
	background-image: linear-gradient(to right, #7A2952 0%,transparent 80%);
	background-image: -webkit-linear-gradient(left, #7A2952 0%,transparent 80%);
	background-image: -moz-linear-gradient(left, #7A2952 0%,transparent 80%);
}
.dev {
	background: #666699
	background-image: linear-gradient(to right, #29527A 0%,transparent 30%);
	background-image: -webkit-linear-gradient(left, #29527A 0%,transparent 30%);
	background-image: -moz-linear-gradient(left, #29527A 0%,transparent 30%);
}
.about {
	background: #669999;
	background-image: linear-gradient(to right, #005C5C 0%,transparent 50%);
	background-image: -webkit-linear-gradient(left, #005C5C 0%,transparent 50%);
	background-image: -moz-linear-gradient(left, #005C5C 0%,transparent 50%);
}
.contact {
	background: #666699;
	background-image: linear-gradient(to right, #6B6BB2 0%,transparent 100%);
	background-image: -webkit-linear-gradient(left, #6B6BB2 0%,transparent 100%);
	background-image: -moz-linear-gradient(left, #6B6BB2 0%,transparent 100%);
}

.home li a:hover:after,
.about li a:hover:after,
.dev li a:hover:after,
.contact li a:hover:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	border-width: 13px 2px 13px 12px;
	border-style:  solid;
	border-radius: 0 12px 12px 0;
	border-color: transparent transparent transparent #E6E6E6;;
}
/*
Стили для блока ссылок в соцальных сетях
Style for block with links in social networks
--------------------------------------------*/
.social li a:hover {
	color: #B87094;
}

.social li {
	display: inline-block;
	text-align: center;
	float:left;
padding: 0;
	height: 33%;
	width: 11%;
}

.social li a,
.social li a:hover {
	box-shadow: none;
	border: 0;
	color: #336699;
	text-shadow: 1px 1px 1px #000;
	margin: 0;
}

.solo {
	background: #fcc;
}

.solo li {
	display: inline-block;
	text-align: center;
	float:left;
	padding: 0;
	height: 50%;
	width: 50%;
}
.solo li a,
.solo li a:hover {
	box-shadow: none;
	border: 0;
	color: #336699;
	text-shadow: 1px 1px 1px #000;
	margin: 0;
}

.solo li a:hover {
	color: #336699;
}

.solo li .facebook {
	font: normal 500 20px/3 Georgia, serif;
}

.solo li .twitter {
	font: normal 500 20px/3 Georgia, serif;
}

.solo li .google {
	font: normal 500 20px/3 Georgia, serif;
}

.solo li .rss {
	font: normal 500 20px/3 Georgia, serif;
}

.solo li .facebook:hover {
	background: #003399 url(img/social-backgr/Harrison.jpg) 0 0 no-repeat;
}

.solo li .twitter:hover {
	background: #FF9933 url(img/social-backgr/Lennon.jpg) 100% 100% no-repeat;
}
.solo li .google:hover {
	background: #A30000 url(img/social-backgr/McCartney.jpg) 0 0 no-repeat;
}

.solo li .rss:hover {
	background: #FF99aa url(img/social-backgr/Ringo.jpg) 100% 100% no-repeat;
}