/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 480px) {
	
	/************** Metadata View ****************/
	.form-horizontal .control-label{
		float: none;
		text-align: left;
		width: 100%;
		font-weight: bold; /*Because labels/titles become less apparent when in the mobile design*/
	}
	.form-horizontal .controls{
		margin-left: 0px;
	}
	.form-horizontal .controls-well .table td{
		display: block;
		padding: 4px;
	}
	.attributeList .span2{
		width: 40%;
		overflow: hidden;
	}
	.attributeList .tab-content{
		width: 55%;
		overflow: visible;
	}
	.entitydetails{
	    width: 100%;
	    margin: 0px;
	    box-sizing: border-box;
	}
	.entitydetails > h4 > .title{
		width: 83%;
	}
	.entitydetails > h4 > i{
		width: 10%;
	}
	.entitydetails > h4 > .btn{
		float: none;
	}
	.control-group ~ .thumbnail{
		width: 100%;
		box-sizing: border-box;
    	margin-left: 0px;
	}
	.breadcrumb{
		margin-top: 20px;
		margin-left: 10px;
		width: 95%;
		width: calc(100% - 50px);
	}
	
	/************** Navbar ****************/
	#Navbar{
		width: 100%;
		position: relative;
		margin: 0px;
	}
	.navbar,
	.navbar-inner{
		padding: 0px;
		margin: 0px;
	}
	.nav{
		width: 100%;
	}
	.navbar .home > a:after{
		content: " Home";
	}
	.navbar li{
		width: 100%;
		text-align: center;
		border-bottom: 1px solid #FFF;
	}
	#Header{
		position: relative;
	}
	.nav .right .dropdown-menu{
		left: 30%;
		width: 50%;
	}
	
	/*************** General Structure ***********/
	.row-fluid .span6.pagination-left {
  		width: 100%;
	}
	#Content{
		width: 100%;
	}
	
	/************** Search page ****************/
	#sidebar{
		width: 90%;
	}
	#results-container{
		width: 90%;
		margin-left: 10px;
	}
	.filter-contain > .filter-input-contain{
		width: 100%;
	}
	.filter-contain > label{
		font-size: 1.1em;
	}
	
	/***** Stats ********/
	.profile .format-charts .chart{
		width: 100%;
		float: none;
	}
	.profile .format-charts-container{
		height: auto;
	}
	#metadata-chart, #data-chart{
		width: 100%;
		float: none;
	}
	/********* Login popup **********/
	.fancybox-inline .span7 .well{
		max-width: 83%;
	}
	.fancybox-inline > .row-fluid > .span7{
		float: none;
		width: 44%;
		padding-left: 0px;
		margin-left: 0px;
	}
	.fancybox-inline h2{
		display: inline;
	}
	
}
 
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) and (max-width : 700px){
	/*************** General Structure ***********/
	.row-fluid .span6.pagination-left {
  		width: 100%;
	}
}
 
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* STYLES GO HERE */
}
 
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* STYLES GO HERE */
}
 
/* iPads (landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
 
/* iPads (portrait) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
/* STYLES GO HERE */
}
 
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* STYLES GO HERE */
}
 
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* STYLES GO HERE */
}
 
/* iPhone 5 (portrait & landscape)----------- */
@media only screen
and (min-width : 320px)
and (max-width : 568px) {
/* STYLES GO HERE */
}
 
/* iPhone 5 (landscape)----------- */
@media only screen
and (min-width : 320px)
and (max-width : 568px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
 
/* iPhone 5 (portrait)----------- */
@media only screen
and (min-width : 320px)
and (max-width : 568px)
and (orientation : portrait) {
/* STYLES GO HERE */
}