/*
	USERBARMENU LEFT
*/

/*HOW TO CREATE A CSS3 DROPDOWN MENU [TUTORIAL]

"How to create a CSS3 Dropdown Menu [Tutorial]" was specially made for DesignModo by our friend Valeriu Timbuc.

Links: 
http: //vtimbuc.net/
https: //twitter.com/vtimbuc
http: //designmodo.com
http: //vladimirkudinov.com

*/

/* Reset */
.menu,
.menu ul,
.menu li,
.menu a {
	margin: 0; 
	padding: 0; 
	border: none; 
	outline: none;
	z-index: 1001;
}

/* Menu */
.menu {	
	height: 46px;
}

.menu li {
	position: relative; 
	list-style: none; 
	float: left; 
	display: block; 
	height: 46px; 
}

/* Links */

.menu li a {
	display: block; 
	padding: 0 14px; 
	margin: 10px 0; 
	line-height: 28px; 
	text-decoration: none; 

	font-weight: bold; 
	font-size: 10px; 

	color: #f3f3f3; 
	text-shadow: 1px 1px 1px rgba(0,0,0,.6); 

	-webkit-transition: color .2s ease-in-out; 
	-moz-transition: color .2s ease-in-out; 
	-o-transition: color .2s ease-in-out; 
	-ms-transition: color .2s ease-in-out; 
	transition: color .2s ease-in-out; 
}

.menu li:first-child a  { border-left: none; }
.menu li:last-child a 	{ border-right: none; }
.menu li:hover > a   	{ color: #EAE8A5; }

/* Sub Menu */

.menu ul {
	position: absolute; 
	top: 47px; 
	left: 0; 
	filter:alpha(opacity=0); 
	opacity: 0; 
	
	background-color: #000; 

	-webkit-border-radius: 0 0 5px 5px; 
	-moz-border-radius: 0 0 5px 5px; 
	border-radius: 0 0 5px 5px; 

	-webkit-transition: opacity .25s ease .1s; 
	-moz-transition: opacity .25s ease .1s; 
	-o-transition: opacity .25s ease .1s; 
	-ms-transition: opacity .25s ease .1s; 
	transition: opacity .25s ease .1s; 
	z-index: 1001; 
}

.menu li:hover > ul { opacity: 1; filter:alpha(opacity=100); }

.menu ul li {
	height: 0; 
	overflow: hidden; 
	padding: 0; 

	-webkit-transition: height .25s ease .1s; 
	-moz-transition: height .25s ease .1s; 
	-o-transition: height .25s ease .1s; 
	-ms-transition: height .25s ease .1s; 
	transition: height .25s ease .1s; 
}

.menu li:hover > ul li {
	height: 36px; 
	overflow: visible; 
	padding: 0; 
}

.menu ul li a {
	min-width: 125px; 
	padding: 4px 0 4px 10px; 
	margin: 0; 
	border: none; 
	border-bottom: 1px solid #353539; 
	text-transform: uppercase; 
}

.menu ul li:last-child a { border: none; }

/* Menu */
.menu li a img 			{ position: absolute; }
.menu li a span 		{ margin-left: 35px; font-size: 13px; }
.menu li.item-messages  { border-left: 1px solid #444; }
.menu li.item-messages a { font-size: 12px; }
.menu li.mobile  		{ border-left: 1px solid #444; display: none; }
.menu ul li a i { font-size: 10px; margin-right: 5px; position: relative; top: -1px; }
.nav-sea { float: left; } 
.social  { float: right; }

.menu li.item-messages i.icon-envelope 				{ margin-top: 1px; }
.menu ul li a i.icon-logout,.menu ul li a i.icon-cog { top: 0; } 


/*
	USERBARMENU RIGHT
*/

.userbar-arrows {
	display: block; 
	height: 6px; 
	width: 100%; 
	z-index: 5; 
}

.userbar { 
	background-color: #000; 
	clear: both; 
	height: 47px; 
	letter-spacing: 0.13em; 
	margin: 0px; 
	position: relative; 
	width: 100%; 
	z-index: 5;
}

.userbar-menu.right {
	height: 52px; display: inline; float: right; vertical-align: middle; overflow: hidden; 
}

.userbar-menu.left {
	height: 52px; display: inline; float: left; vertical-align: middle; 
}

.userbar-nav {
	overflow: hidden; 
}
.userbar-nav li {
	float: left; 
}
.userbar-nav li a {
	display: block; 
 	color: #ccc; 
	font-weight: normal; 
	margin: 0px; 
	padding: 14px 15px; 
	text-shadow: 1px 1px 0px #000000, 2px 2px 0px #555555; 
	font-size: 13px;
 }
.userbar-nav li a:hover {
	color: #ddd; 
}

/*
	USERBARMENU ICONS
*/

.social {
	margin-top: 7px; 
}

.social a {
	-moz-transition: all .9s ease-in-out; 
	-o-transition: all .9s ease-in-out; 
	-webkit-transition: all .9s ease-in-out; 
	transition: all .9s ease-in-out; 
	background-repeat: no-repeat; 
	display: block; 
	float: right; 
	height: 30px; 
	margin: 0 3px; 
	text-indent: -9999px; 
	width: 30px; 
}

.social a:hover {
	-moz-transform: rotate(720deg); 
 	-webkit-transform: rotate(720deg); 
 	-o-transform: rotate(720deg); 
 	-ms-transform: rotate(720deg); 
 	transform: rotate(720deg); 
 }

a.instagram {
	background: url(../images/social/instagram.png); 
}

a.rss {
	background: url(../images/social/rss-icon.png); 
}

a.youtube {
	background: url(../images/social/youtube-icon.png); 
}

a.dribbble {
	background: url(../images/social/dribbble-icon.png); 
}

a.facebook {
	background: url(../images/social/facebok-icon.png); 
}

a.plus {
	background: url(../images/social/gplus-icon.png); 
}

a.twitter {
	background: url(../images/social/twitter-icon.png); 
}

a.vimeo {
	background: url(../images/social/vimeo-icon.png); 
}

a.deviantart {
	background: url(../images/social/deviantart-icon.png); 
}

a.flickr {
	background: url(../images/social/flickr-icon.png); 
}

a.linked {
	background: url(../images/social/linkedin-icon.png); 
}

a.pinterest {
	background: url(../images/social/pinterest-icon.png); 
}

a.html5 {
	background: url(../images/social/html5-icon.png); 
}

a.linkedin {
	background: url(../images/social/linkedin-icon.png); 
}

a.skype {
	background: url(../images/social/skype-icon.png); 
}

a.vkontakte {
	background: url(../images/social/vk-icon.png); 
}

/* SEARCH */

/* Reset */
.nav-sea,
.nav-sea a,
.nav-sea ul,
.nav-sea li,
.nav-sea div,
.nav-sea form,
.nav-sea input {
	margin: 0; 
	padding: 0; 
	border: none; 
	outline: none; 
}

.nav-sea li { list-style: none; }

/* Menu Container */
.nav-sea {
	display: inline-block; 
	cursor: default; 
	z-index: 500; 
	margin-right: 10px; 
}

/* Menu List */
.nav-sea > li {
	display: block; 
	float: left; 
}

/* Search Form */
.nav-sea > li.nav-sea-search > form {
	position: relative; 
	width: inherit; 
	height: 46px; 
	z-index: 510; 
	border-right: 1px solid #444; 
}

.nav-sea > li.nav-sea-search input[type="text"] {
	opacity: 0;
	display: block; 
	float: left; 
	width: 0; 
	height: 24px; 
	padding: 11px 0; 
	line-height: 24px; 

	font-weight: bold; 
	font-size: 13px; 
	color: #ccc; 
	text-shadow: 0 0 1px rgba(0,0,0,.35); 

	background: #222; 

	-webkit-transition: all .3s ease 1s; 
	-moz-transition: all .3s ease 1s; 
	-o-transition: all .3s ease 1s; 
	-ms-transition: all .3s ease 1s; 
	transition: all .3s ease 1s; 
}

.nav-sea > li.nav-sea-search input[type="text"]:focus { color: #fcfcfc; }

.nav-sea > li.nav-sea-search input[type="text"]:focus,
.nav-sea > li.nav-sea-search:hover input[type="text"] {
	width: 110px; 
	padding: 11px 20px; 
	opacity: 1;
	-webkit-transition: all .3s ease .1s; 
	-moz-transition: all .3s ease .1s; 
	-o-transition: all .3s ease .1s; 
	-ms-transition: all .3s ease .1s; 
	transition: all .3s ease .1s; 
}

.nav-sea > li.nav-sea-search input[type="submit"] {
	display: block; 
	float: left; 
	width: 20px; 
	height: 46px; 
	padding: 0 25px; 
	cursor: pointer; 

	background: url(../images/search-icon.png) no-repeat center center; 

	border-radius: 0 3px 3px 0; 

	-webkit-transition: all .3s ease; 
	-moz-transition: all .3s ease; 
	-o-transition: all .3s ease; 
	-ms-transition: all .3s ease; 
	transition: all .3s ease; 
}

.nav-sea > li.nav-sea-search input[type="submit"]:hover { background-color: #444; }