@CHARSET "UTF-8";

 @media (min-width: 64.01em) /* 1024 / 16 = 64em  */ {
	body {
		font-size:100%;
	}
	#body_container {
		max-width:100%;
	}
	
	.left-column {
		max-width: 300px;
		display:block;
		padding:0;
	
	}
	
	.middle-column {
		max-width: 75%;
		float:left;
	}

	.right-column {
		max-width: 200px;
		float:right;
		display: block;
	}
	
	#search-form {
		text-align:center;
	}
	
	.search-options-wrapper {
		
	}

}


/**  --------------------------------------------------  TABLET LANDSCAPE  ---------------------------------------- */

@media (min-width: 48.01em) and (max-width:64em) /* 769/16 = 48em, 1024/16 = 64em */ {
	#body_container {
		max-width: 1100px;
	}
	
	.left-column {
		width: 22.727272727272727272727272727273%; /* 250 / 1100 = 0.22727272727272727272727272727273 */
		max-width: 230px;
		display:block;
	}
	
	.middle-column {
		/*width: 61.111111111111111111111111111111%; /* 1100 / 1800 = 0.61111111111111111111111111111111  */
		float:left;
		width:75%;

	}
	
	.right-column {
		/*width: 16.666666666666666666666666666667%; /* 300 / 1800 = 0.16666666666666666666666666666667  */
		float:none;
		display: block;
	}

	body {
		font-size:100%;
	}
	
	

	.page-title h1 {
		font-size:24pt;
	}
	
	#search-form-wrapper {
		width:100%;
	}	

	#search-tabs {
		max-width:950px;
	}
	
	.search-options-inner li {
		width:100%;
		float:left;
	}
	
	
}

/**  ------------------------------------------------ TABLET -------------------------------------- */

@media screen and (max-width: 48em) /* 768/16 = 48em */ { 
	body {
		font-size:90%;
	}
	
	.middle-column {
	 	width:75%;
	}

	.left-column {
		width:25%;
	}

	.page-title h1 {
		font-size:20pt !important;
		width:100%;
		line-height:22pt !important;
		margin-top:15px;
		height:40px;
	}
	
/*	.nav {   
		width:100%;  
	}
	  
	.nav ul {  
		display: block;  
		height: auto;  
	}
	  
   	.nav li {  
		float: left;  
		position: relative;  
	}
	
	.nav li a {  
		border-right: 1px solid #576979;  
	}
	
	.nav a {  
		text-align: left;  
		width: 100%;  
		text-indent: 10px;  
    }
	*/
	#search-form ul {
		width:95%;
		max-width:750px;
	}

	#search-form-wrapper {
	  padding-left:2.5%;
	  max-width:100%
	}
	
	.search-box {
		max-width:610px;
	}
	
}


/* -------------------------------------------------------MOBILE  LANDSCAPE -------------------------------- */

@media (max-width: 47.9em) /* 768/16 = 48em, 600/16 = 37.5em, 480/16 = 30em */ {
	
	#body_container {
		width: 100%;
	}

	.columns {
		float: none;
		height: 100%;
	}
	
	.left-column {
		width: 83.333333333333333333333333333333%; /* 400 / 480 = 0.83333333333333333333333333333333  */
		max-width: none !important;
		right:100%;
		position: fixed;
		float: none;
		z-index: 100;
		margin-top:0;
	}
	
	.middle-column {
		width: 100%;
		left: 0;
		margin:0;
		position: relative;
		float: none;
		height: 480px;
		/*margin-left:10px;*/
	}
	
	.right-column {
		width: 83.333333333333333333333333333333%; /* 400 / 480 = 0.83333333333333333333333333333333  */
		display:none;
	}
	
	
	.small-controls { 
		display:block;
		float:left;
		width:40px;
	 }
	
	
	.page-title {
		display:none;
	}
	
	a#pull {
		content:"";  
		/*background:url(https://content.library.utoronto.ca/common/css/responsive/icons/nav-icon.png) no-repeat 50% 50% whitesmoke;*/
		
		text-align: center;
		line-height: 199%; 
		width: 30px;  
		height: 30px;
		
		display: inline-block;  
		position: absolute;  
		right: 15px;  
		top: 5px; 
		z-index:999;
	}
	
	a#pull img {
		vertical-align: middle;
	}
	
	.utl-logo {
		width:350px;
	}

	#big-logo {
	}
	
	.page-title {
		margin-top:-5px;
		height: 45px;
	}
	
/*	.nav {
		border-bottom: 0;
		height:40px;
		margin-bottom:0;
	}

	.nav ul {
		display: none;
		height: auto;
  		box-shadow:  4px 4px 4px 4px #666;
	}
	
	.nav li {  
		display: block;  
		float: left;  
		width: 50%; 
		border-bottom:1px solid #ccc; 
   	 }*/
	
	h1 {
		font-size: 28px;
		line-height:28px !important;
		top:50%;
	}
	
	h2 {
		font-size:18pt;
	}
	
	
	.facets-open {
		display:block;
		/*margin-left:0;*/
	}
	
	.facets-container {
		height: 100%;
		overflow-y: auto;
	}
	
	.facet-header a {
		color:white;
	}
	
	.results-shifted {
		left:83.333333333333333333333333333333%; /* 400 / 480 = 0.83333333333333333333333333333333  */
	}
	
	#more-facet-vals {
		position: fixed;
		z-index: 100;
		float: none;
		width: 83.333333333333333333333333333333%;
		max-width: none !important;
		max-height: none !important;
		top: auto;
		left: auto;
		right: 200%;
		background-color: white;
		border: 1px solid #CCC;
	}
	
	
	.more-facet-vals-open {
		display:block !important;
		overflow-y: scroll;
	}
	
	.more-facet-vals-facets-shifted {
		left:83.333333333333333333333333333333%;
	}
	
	.more-facet-vals-results-shifted {
		left:166.66666666666666666666666666667%;
	}
	
	#mobile-facet-close {
		display:none;
		position: fixed;
		width: 100%;
		height: 480px;
		z-index: 500;
		margin-left: 83.333333333333333333333333333333%;
		background-color: #000;
		opacity: 0.5;
	}

	.format-cover {
		right:7px;
	}
	
	#mobile-facet-close a {
		font-size: 40px;
		color: #FFF;
		display:block;
		position: absolute;
		top: 0;
		bottom: 0;
		width: 100%;
	}
	
	/** Mobile search box  **/
	
	#search-form {
		margin:0;
	
	}
	
	#search-form ul {
		width:100% !important;
		margin-top:10px;
	}
	
	#search-form li {
		height:40px;
		line-height:25px;
		border:0px solid white;
		width:100% !important;
		float:left;
	}
	
	#search-options-ntk {
		/* padding: 2px 6px !important; */
	}
	
	#search-options-links {
		text-align: left;
		padding: 0 !important;
	}
	
	#search-options-links a {
		margin-left: 0px;
		margin-right: 10px;
	}

	#search-box-button {
		width:90%;
		text-align:left;
	}
	
	.search-box {
		width:82%;
	}
	
	.search-button-mobile {
		display:block;
		height:35px;
		width:125px;
	}
	
	.search-bar-sticky {
		position:fixed;
		top:0;
		width: 100%;
		z-index:500;
	}
	
	.search-options-mobile {
		border:1px solid #ccc;
		padding:2%;
		display:none;
		position:absolute;
		background:white;
		border-radius:4px;
		margin-top:8px;
		width:92%;
		z-index:500;
	}
	
	.search-gear-btn {
		/* margin:=10px 0 0 0 !important;
		float:right; */
		position:relative !important;
	}

	#close-search-button {
		display:block;
	}
	
	.box-shadow {
		-moz-box-shadow:    1px 1px 3px 3px #666;
		-webkit-box-shadow: 5px 5px  5px 5px #666;
		box-shadow:         5px 5px 5px 5px #666;
	}
	
	/*
	.facets-open, .results-shifted {
		-webkit-transition: .25s all ease-in;
		-moz-transition: .25s all ease-in;
		-o-transition: .25s all ease-in;		
		-ms-transition: .25s all ease-in;
		transition: .25s all ease-in;
	}
	*/
	
	.mobile {
	   	display:inline !important;
	}

	.not-mobile {
		display:none;
	}
	
	.record-details .mobile {
		display:none !important;
	}
	
	.record-details .not-mobile {
		display:inline !important;
	}
	
	#search-form li select {
		width: 175px;
	}
	
	.more-title {
		border:1px solid #ccc;
		border-radius:4px;
		height:25px;
		background:whitesmoke;
		padding:4px;
		width:25px;	
		text-align:center;
	}
	
	#footer {
		position:relative;
		padding:0;
		margin:0;
	}

	.footer-titles {
		width:85%; 
		font-size:12pt; 
		float:left; 
		margin-left:10px;
		margin-top:5px;
		margin-bottom: 20px;
	}

	#footer img {
		margin-left:0px;
		margin-top:0px;
	}
		
	.footer-columns {
		width:100%;
		float:none;
	}
	
	.footer-columns li {
		width:100%;
		clear:both;
		border-bottom:1px solid #000 !important;
		margin:0;
		background: #002a5c;
		color:white;
		font-size:90%;	
	}
	
	.footer-columns li a {
		width: 100%;
		height: 100%;
		display:block;
		padding:5px 25px;
	}
	
	.footer-columns li a:hover {
		background: #272727;
	}
		
	
	.item-callnum {
		width: 50%;
		max-width: none;
	}
	
	.item-library {
	}
	
	#feedback-modal, #report-modal {
		width: 400px;
	}

	.item-holding-info div {
		margin-bottom:5px;
	}

}

@media (max-width: 30em) /* 480/16 = 30em */ {
	
	#search-box-button, .search-box  {
		margin-left:0;
		width: 100%;
		padding-left:0;
		padding-right:0;
		margin-right:0;
		
	}

	.search-box {
		width:87%;
	}

	.search-gear-btn {
		float:left;
	}
	
	.g-recaptcha {
		transform: scale(0.77);
		transform-origin: 0 0;
	}
	
	/* .item-holding-info div {
		display:block;
	} */
		
}


/**  --------------------------  MOBILE PORTRAIT  ------------------------------------------ */



@media (max-width: 25em) /* 400/16 = 25em */ {
	/*.utl-logo {
		background:url("https://content.library.utoronto.ca/common/css/responsive/header/utl-logo-mobile-blue.png") #fff 50% 50% no-repeat;
		background-size:70%;
	}

	.utl-logo:hover {             
		background:url("https://content.library.utoronto.ca/common/css/responsive/header/utl-logo-mobile-white.png") #002a5c 50% 50% no-repeat;
		background-size:70%;
	}*/
	
	.search-box {
        width:82%;
        max-width:460px;
    }
    
    #search-box-button {
		width:100%;
		
	}
    
	#search-form li {
	 	width:100%;
		border:0px solid #ccc;
	}
	
	.more-tools {
		display:block;
	}
	
	#search-form li select {
		width: 150px;
	}
	
	/* #email-modal, #permalink-modal, #rights-modal {
		width: 280px;
	} */
	
	.modal {
		width: 280px !important;
	}
	
	#email-modal {
		height: 300px;
	}
	
	#report-modal textarea {
		height: 30px !important;
	}
	
	.utl-footer-col img {
		max-width: 275px;
	}
	
	
}

@media (max-height: 20em) {
	#email-modal, #feedback-modal, #report-modal {
		height: 300px;
	}
	
	#email-modal .modal-body, #feedback-modal .modal-body, #report-modal .modal-body {
		max-height: 215px;
		overflow-y: auto;
	}
}
