/*navigation bar*/

#topnav {
	display: block;
	position: relative;
	width: 100%;
}

#topnav .logotipo {
	margin-top:0 !important;
	margin-left:7px
}

#topnav #navbtn {
	display: none;
	float: right;
	margin-right:15px;
	margin-top:10px;
	width: 30px;
	height: 35px;
	background: url('../images/menu.png') center no-repeat;
	text-indent: -99999px;
	overflow: hidden;
}

/* responsive styles */
@media screen and (max-width: 800px) {

	#topnav { 
		height: auto;
	}
	
	#topnav nav { 
		display: none; 
		position: static;
		width: 100%;
		top: auto;
		right: auto;
		border-top:1px #DFDFDF solid;
	}
	
	#topnav nav ul li {
		float: none; margin: 0;
		border-bottom:1px #DFDFDF solid;
		width: 100%;
	}
	
	#topnav nav ul li a {
		display: block;
		line-height: 1em;
		border: 0;
		padding: 6px 9px;
		color: #1986cd;
		background:white;
	}
	  
	#topnav nav ul li.add,  #topnav nav ul li.sign {
		font-family: 'Open Sans', Verdana, sans-serif;
		font-weight: 700;
	}
	
	#topnav nav ul li.add a.profile span, #topnav nav ul li.add a.profile span:hover {
		color: #6c0403 !important;
	}
	
	#topnav nav ul li.add a.profile {
		background:url(../images/arrow-doble.jpg) no-repeat 280px 6px;
	}
	
	#topnav nav ul li.add a.profile:hover {
		color: #1986cd !important;
	}
	   
	#topnav nav ul li.sign a {
		display:inline-block !important
	}
	  
	#topnav nav ul li a span.browse, #topnav nav ul li a span.research, #topnav nav ul li a span.find,
	#topnav nav ul li a span.qa {
		background:url(../images/icons.png) no-repeat;
	}
	
	#topnav nav ul li a span.browse {
		background-position: left -22px;
		width:17px;
		height:20px;
		display:inline-block;
		margin-bottom: -4px;
	}
	
	#topnav nav ul li a:hover span.browse {
		background-position:top left;
	}
	  
	#topnav nav ul li a span.research {
		background-position: -33px -22px;
		width:14px;
		height:20px;
		display:inline-block;
		margin-bottom: -4px;
	}
	
	#topnav nav ul li a:hover span.research,#headMenu ul li.active a span.research {
		background-position: -33px top;
	}
	
	#topnav nav ul li a span.find {
		background-position: -67px -22px;
		width:19px;
		height:20px;
		display:inline-block;
		margin-bottom: -4px;
	}
	
	#topnav nav ul li a:hover span.find,#headMenu ul li.active a span.find {
		background-position:-67px top;
	}
	
	#topnav nav ul li a span.qa {
		background-position:-107px -22px;
		width:20px;
		height:20px;
		display:inline-block;
		margin-bottom: -4px;
	}
	
	#topnav nav ul li a:hover span.qa,#headMenu ul li.active a span.qa {
		background-position:-107px top;
	}

	#topnav nav ul li.form {
		padding-top:7px; 
		height: 35px;
		border-bottom:none;
	} 
		  
	#topnav nav ul li a:hover {
		color:#fff;
		background:#1986cd ;
	}
	  
	#topnav #navbtn {
		display: block;
	}
}

@media (min-width: 240px) and (max-width: 320px){
	#topnav .logotipo img {
		width:60% !important;
		margin-top:0 !important;
		margin-left:7px
	}
	
	#topnav nav ul li.form input {
		width: 95px !important;
	}
	
	#topnav nav ul li.add a.profile span {
		display:block;
	}
	
	#topnav nav ul li.add a.profile {
		background:url(../images/arrow-doble.jpg) no-repeat 162px 14px !important;
	}
}