/* 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;
	}

}
@media only screen and (max-width : 1300px){
  /*The attribute list in the MetadataView gets difficult to read at 1300px */
  .attributeList > .row-fluid > .span2{
    min-width: 130px;
  }
  .attributeList > .row-fluid > .span10{
  	width: 76%;
  	width: calc(100% - 165px);
  }
  .attributeList .tab-pane > .control-group{
    min-width: 400px;
  }
}

@media only screen and (max-width : 1000px){
	/* Editor styles */
	.temporal-coverage .control-label span{
		display: block;
	}
	.temporal-coverage .control-label {
    	height: 4em;
	}
    
    /******************************************
    * Metrics Controller Styling
    ********************************************/
    /* Style for the metric button */
    a.btn.metrics {
        float:none;
        width: 150px;
        margin: 1px;
        padding-right: 0px;
    }
    .btn-group+.btn-group, .btn-toolbar>.btn+.btn,
    .btn-toolbar>.btn+.btn-group, .btn-toolbar>.btn-group+.btn {
        margin-left: 0px;
    }

    .metric-well {
        float:none;
        flex-wrap: wrap;
        width: 100%;
        height: auto;
    }

    /* Style for the toolbars that contains buttons in the well on either side. */
    .metric-toolbar {
        float:none;
        width: 100%;
        justify-content: center;
        align-items: center;
        margin-top: 0px;
    }
    .edit-toolbar {
        float:none;
        border-left: none;
        margin-top: none;
        justify-content: center;
        align-items: center;
    }

    .edit-toolbar >
    #metadata-controls-container >
    .metadata-controls-container {
        margin-left: 0px;
        margin-top: 5px;
        margin-right: 0px;
        height: 38px;
    }

    .edit-toolbar >
    #owner-controls-container >
    .authority-controls {
        width: auto;
        height: 38px;
        margin-top: -1px;
        margin-right: 0px;
        margin-left: 0px;
    }

    .edit-toolbar >
    #owner-controls-container >
    .authority-controls >
    #editMetadata {
        margin-right: none;
    }
}

/* Smartphones (landscape) ----------- */
@media only screen 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 */
}