/* ==========================================================================
   Project: 	Campus Map
   Date:		01/15/15 - File created
   Created by:	Third Wave Digital (www.thirdwavedigital.com)
   ========================================================================= */
   
/* ==========================================================================
   Typography
   ========================================================================== */

body, input, textarea {-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;-ms-font-smoothing:antialiased;-o-font-smoothing:antialiased;font-smoothing:antialiased;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}

	
/* ==========================================================================
   Headings
   ========================================================================== */

h1,h2,h3 {font-family: 'Crimson Text', serif;}
h1 {margin: 0px; padding: 0px; color: #003049; font-size: 30px; line-height: 32px; }
h2 {}
h3 {}

/* ==========================================================================
   Basic Elements
   ========================================================================== */
   
html, body { height: 100%; }
body {background: #fff;font-family: 'Source Sans Pro', sans-serif;color: #464c51;font-weight: 400; overflow:hidden;} 
a:focus, a:active, a:visited, object, player, embed, video, img, input,div, button { outline: none; outline: 0; text-decoration:none; }  
a img { border: none; }
a:hover { text-decoration: none;}

/* ==========================================================================
   Main Layout
   ========================================================================== */

.container-full{ margin:0px auto 0px auto; width:100%; position: relative;}
	.container-full:before, .container-full:after{ display:table;  content:""}
	.container-full:after{ clear:both}
	.container-full:before, .container-full:after{ display:table;  content:""}
	.container-full:after{ clear:both}
	
.container{  position: relative;}
	
/* ==========================================================================
   Header
   ========================================================================== */
   
.header-wrapper {z-index: 4; height: 90px; position: absolute; top: 0px; left: 0px; background: url(../img/bkground-header-wrapper.png) top left no-repeat #003049; border-bottom: 4px solid #fff;}
	header .logo {position: absolute; top: 2px; height: 80px; width: auto;z-index: 2}
	
	/* Main menu */
	.mainmenu { list-style: none; margin: 0px; padding: 0px; width: 100%;right: 0px; position: absolute; top:26px; z-index: 1; font-weight:600;text-transform: uppercase; text-align:right}
	.mainmenu li { position:relative;display:inline-block;}
	.mainmenu li:last-child {margin: 0px;}
	.mainmenu a {color: #fff; padding: 0px 5px 0px 0px;-webkit-transition: color 150ms ease-out; transition: color 150ms ease-out;}
	.mainmenu .grey {color: #b1b1b4;}
	.mainmenu a:hover {color: #59a6c7;}
	.mainmenu li.active a {color: #59a6c7;}
	.mainmenu .search {margin: 0px; padding: 0px;position: relative;}
	.mainmenu .search input {border: none; background: #e2e2e2;z-index: 1;font-size: 17px; padding: 5px 25px 5px 5px;color: #003049;}
	.mainmenu .search button {background: none; border: none; position: absolute; top: 50%; margin-top: -9px; right: 0px; z-index: 2;width: 18px; height: 18px;}
	.mainmenu .search button i {color: #003049;font-size: 16px;position: absolute; top: 0px; left: 0px;}
	.mainmenu .search button:hover i {color: #59a6c7}
	
	/* Main menu - dropdowns */
	.mainmenu ul {min-width: 205px; background: #003049; background:rgba(0, 48, 73, 0.9); text-transform: none; font-weight:400; padding:0px; position: absolute; left: 0px; top: -999px; font-size: 16px; line-height: 18px;text-align:left;filter:alpha(opacity=0); opacity:0; -webkit-transition: opacity 150ms ease-out; transition: opacity 150ms ease-out;}
	.mainmenu li.active ul {top: 56px;filter:alpha(opacity=100); opacity:1;  }
	.mainmenu ul a, .mainmenu li.active ul a {color: #fff; padding: 5px 10px 7px 10px;font-weight: 400;display:block;-webkit-transition: all 150ms ease-out; transition: all 150ms ease-out;}
	.mainmenu li:hover li a {color: #fff;}
	.mainmenu ul li {margin: 0px 0px 0px 0px;padding: 0px; display:block; white-space: nowrap}
	.mainmenu ul li:last-child {margin: 0px}
	.mainmenu li:hover li a:hover {color:#7ad3f7;background:#003049}
	
	/* Main menu - dropdowns - locations */
	.mainmenu ul.locations {max-height: 300px; overflow-y:auto; }
		
	/* Main menu - dropdowns - layers */
	.mainmenu .layers img {position: absolute; top: 50%; margin-top: -13px; left: 8px;height: 25px; width: auto; filter:alpha(opacity=50); opacity:.5;}
	.mainmenu .layers label {font-weight: normal; color: #fff;padding: 5px 10px 7px 40px;display:block; margin: 0px;}
	.mainmenu .layers li:hover label, .mainmenu .layers li.active label {color:#7ad3f7;background:#003049}
	.mainmenu .layers li:hover img, .mainmenu .layers li.active img {filter:alpha(opacity=100); opacity:1}
	.mainmenu .layers label input {margin: 0px 5px 0px 0px;}
		
	/* Main menu - dropdowns - directions */
	.mainmenu .directions {padding: 10px 10px 0px 10px;width: 215px}
	.mainmenu .directions label {color: #fff;font-weight: normal}
	.mainmenu .directions .form-group {margin-bottom: 10px;}
	.mainmenu .directions .btn-group .btn:hover {background: #d3e3ec}
	.mainmenu .directions .btn-group .active, .mainmenu .directions .btn-group .active:hover { background: #59a6c7; border-color:#59a6c7; color: #fff; }
	.mainmenu .directions .alert {display: none; border-radius: 0px; padding: 5px; font-size: 14px;}
	.mainmenu .directions .btn-directions {background:#59a6c7; }
	.mainmenu .directions .btn-directions:hover {background: #3a97bf;}
	
	/* Main menu - dropdowns - search */
	.mainmenu .search .fa-times-circle {display:none}
	.mainmenu .search-results {z-index: 4; }
	.mainmenu .search-results .alert {font-size: 14px;  padding: 5px; border-radius: 0px; margin: 5px;}
	
	/* Webkit's scrollbar */
	.mainmenu ::-webkit-scrollbar {-webkit-appearance: none;width:7px;}
	.mainmenu ::-webkit-scrollbar-track-piece {margin: 10px 0px 10px 0px;}
	.mainmenu ::-webkit-scrollbar-thumb {border-radius: 4px;background-color: rgba(255,255,255,.3);}
	
/* ==========================================================================
   Content
   ========================================================================== */

.content-wrapper {}
	
	/* Topics window */   
	.topics-window {z-index: 3;display:none;position: absolute; background: #fff;padding: 30px;box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); }
		.topics-window.transparent {filter:alpha(opacity=50); opacity:.5;}
		.topics-window button {border: none; width: 27px; height: 27px;font-size: 20px;position: absolute; top: -7px; right: -7px;background: #fff; padding: 0px; border-radius: 50%;  color: #59a6c7;}
		.topics-window button:hover {color: #003049;}
		.topics-window h1 {padding: 0px 0px 20px 0px; border-bottom: 1px solid #dedede; }
		.topics-window p {font-family: 'Crimson Text', serif; font-weight: 400; margin: 10px 0px 20px 0px; padding: 0px; color: #464c51; font-size: 14px; text-transform: uppercase;}
		.topics-window ul {font-family: 'Source Sans Pro', sans-serif; margin: 0px; padding: 0px;list-style:none;font-size: 16px;}
		.topics-window ul li { }
		.topics-window ul a {display:block; padding: 2px 0px 2px 4px; color: #003049;  background: #e7e7e7; margin: 0px 0px 2px 0px;}
		.topics-window ul a:hover {background: #adadaf; color: #fff;}
		   
	/* Info window */
	.info-window {z-index: 3;position: absolute;display:none; background: #fff; }
		.info-window.transparent {filter:alpha(opacity=50); opacity:.5;}
		.info-window button {border: none; width: 27px; height: 27px;font-size: 20px;position: absolute; top: -7px; right: -7px;background: #fff; padding: 0px; border-radius: 50%;  color: #59a6c7;}
		.info-window button:hover {color: #003049;}
		.info-window h1 {padding: 0px 0px 20px 0px; border-bottom: 1px solid #dedede; }
		.info-window p {margin: 20px 0px 20px 0px; }
		.info-window .locations p {font-weight: 600; margin: 0px 0px 10px 0px; padding: 0px; color: #59a6c7; font-size: 14px; text-transform: uppercase;}
		.info-window .locations ul {font-family: 'Source Sans Pro', sans-serif; margin: 0px; padding: 0px;list-style:none;font-size: 16px;}
		.info-window .locations ul li {padding: 2px 0px 2px 4px; color: #003049;  background: #e7e7e7; margin: 0px 0px 2px 0px;}
		
		/* Thumbs */
		.info-window .thumbs {}
		.info-window .thumbs .overlay {filter:alpha(opacity=0); opacity:0;width: 100px; height: 67px; text-align: center; position: absolute; top: 0px; left: 0px; background:rgba(0, 0, 0, 0.25); -webkit-transition: opacity 250ms ease-out; transition: opacity 250ms ease-out;}
		.info-window .thumbs .overlay i {color: #fff; font-size: 20px; width: 20px; height: 20px; position: absolute; top: 50%; left: 50%; margin-top: -10px; margin-left: -10px;-webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; filter:alpha(opacity=0); opacity:0; -webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);-ms-transform:rotateX(0deg);-o-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-ms-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;}
		.info-window .thumbs a {display:block}

		/* Webkit's scrollbar */
		.info-window ::-webkit-scrollbar {-webkit-appearance: none;width:7px;}
		.info-window ::-webkit-scrollbar-track-piece {margin: 10px 0px 10px 0px;}
		.info-window ::-webkit-scrollbar-thumb {border-radius: 4px;background-color: rgba(0,0,0,.3);}
	
	/* In this location window */
	.inthislocation-window { position: absolute; z-index: 3;display:none;}
		.inthislocation-window .content {padding:15px;width: 160px;background: #fff; background:rgba(255, 255, 255, 0.95); color: #003049; font-size: 14px;}
		.inthislocation-window p {font-weight: 600; margin: 0px 0px 10px 0px; padding: 0px; color: #59a6c7; font-size: 14px; text-transform: uppercase;}
		.inthislocation-window ul {list-style:none;margin: 0px; padding: 0px; line-height: 14px; }
		.inthislocation-window li {margin: 0px 0px 6px 0px;}
		.inthislocation-window li:last-child { margin: 0px}
		
	/* Photo window */
	.photo-window {display:none; position:absolute;z-index: 3; background: #fff;-webkit-transform: translateZ(0); -webkit-backface-visibility: hidden;-webkit-perspective: 1000; }
		.photo-window.transparent {filter:alpha(opacity=50); opacity:.5;}
		.photo-window:hover {cursor:move}
		.photo-window .carousel-control { font-size: 40px; color: #fff; position: absolute; width: 40px; height: 40px; top: 50%; margin-top: -20px; background-image: none;z-index:3;filter:alpha(opacity=100); opacity:1;text-shadow: none}
		.photo-window .carousel-control:hover {color:#003049;}
		.photo-window .carousel-control.left {left: 5px;z-index:3}
		.photo-window .carousel-control.right {right: 5px;z-index:3}
		.photo-window .border {outline: 5px solid #fff; border: 5px solid #ffcf55;position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index:2;pointer-events:none}
		.photo-window ul { list-style: none; margin: 0px; padding: 0px;z-index:1;}
		.photo-window ul img {width: 100%; height: auto;}
		.photo-window .btn-resize {position: absolute; bottom: 10px; left: 10px;font-size: 16px; margin: 0px; width: 26px; height: 26px; color: #fff;background: #59a6c7; border-radius: 13px; padding: 5px 0px 0px 6px;  z-index:3; border: none; }
		.photo-window .btn-resize:hover {background:#003049;}
		.photo-window .btn-close {border: none; width: 27px; height: 27px;font-size: 20px;position: absolute; top: -16px; right: -16px;background: #fff; padding: 0px; color: #59a6c7; border-radius: 50%;z-index:3; }
		.photo-window .btn-close:hover {color:#003049}
		.photo-window .photo-info {background: #003049; border: none; color: #fff; text-shadow: none; text-align:center; font-size: 14px; font-family:'Source Sans Pro'; position: absolute; bottom: -20px; padding: 2px 0px 0px 0px; left: 50%; width: 80px; height: 25px;margin-left: -40px;z-index:2;filter:alpha(opacity=100); opacity:1}
		.photo-window.transparent  {  filter:alpha(opacity=50); opacity:.5;}
		.photo-window .ui-icon {background-image: url("");}

/* ==========================================================================
   Preloader
   ========================================================================== */
   
.preloader {z-index: 99; position: fixed; top: 0px; left: 0px; background: #f1f1f1; color: #003049; width: 100%; height: 100%;display:table;}
.preloader p {display:table-cell; vertical-align: middle; text-align:center; margin: 0px; padding: 0px; font-size: 16px; color: #003049; }

/* ==========================================================================
   Map
   ========================================================================== */
   
#map {width: 100%; position: absolute;top: 90px; left: 0px; bottom: 0px; right: 0px;z-index: 1;}

.zoom-controls {z-index: 2; position: absolute; top: 105px; left:15px;width: 34px; height: 80px;background: #fff; background:rgba(255, 255, 255, 0.8);}
.zoom-controls button {margin: 0px; padding: 0px; border: none; background: none; left: 5px; color: #59a6c7;font-size: 28px; position: absolute;-webkit-transition: color 150ms ease-out; transition: color 150ms ease-out;}
.zoom-controls button:hover {color: #003049;}
.zoom-controls #zoomin {top: 0px;}
.zoom-controls #zoomout {bottom: 0px;}

/* ==========================================================================
   Text Directions
   ========================================================================== */

.direction-controls {position: absolute; right: 15px;z-index: 3; top: 105px; padding: 5px;background: #fff; background:rgba(255, 255, 255, 0.8); }

.text-directions .modal-title {margin-bottom: 10px;}	
	
/* ==========================================================================
   Media Queries
   ========================================================================== */
   
/* max-width */
@media only screen and (max-width: 767px) {
	/* Offcanvas menu */
	.mainmenu {text-align:left; -webkit-overflow-scrolling: touch; width: 90%;position: fixed;top: 0px; right: -90%; height: 100%;overflow-y:auto; z-index: 4;padding: 10px;background: #003049;  border-left: 4px solid #fff;}
	.mainmenu a:hover {color: #fff; }
	.mainmenu ul { position: relative; top: auto; left: auto; right: auto; display:none; margin: 10px 0px 0px 0px; }
	.mainmenu ul li { white-space: pre-wrap}
	.mainmenu li {display:block; margin: 7px 0px 7px 0px; padding-bottom: 7px;border-bottom: 1px solid #004467;}
	.mainmenu li:last-child { border: none; }
	.mainmenu li a {display:block;}
	.mainmenu li.active a {color: #7ad3f7;}
	.mainmenu li.active ul {top: auto; display:block}
	.mainmenu li:hover li a:hover {background:none;color: #fff;}
	.mainmenu .locations {max-height: none;}	
	.mainmenu .layers li:hover label, .mainmenu .layers li.active label {color:#fff;background:#003049}
	.mainmenu .layers li:hover img, .mainmenu .layers li.active img { filter:alpha(opacity=50); opacity:.5}
	.mainmenu .directions  {width: 100%;}
	.mainmenu .directions li {white-space: nowrap}
	.mainmenu .fa-angle-down, .mainmenu .fa-angle-up { position: absolute; right; 0px; top: 0px; width: 10px; height: 10px; right: 0px;}
	.mainmenu .search input { width: 100%;}
	.btn-open-offcanvas {position: absolute; top:19px; margin: 0px; right:14px; color: #fff; font-size: 30px; background: none; border: none; padding: 0px;}
	.btn-open-offcanvas:hover {cursor:pointer; color: #fff}
	.btn-close-offcanvas {color: #ffcf55; background:none;  border: none; text-transform: uppercase; }
	/* Offcanvas open */
	.offcanvas-open .mainmenu {right: 0px;}
	.offcanvas-open .btn-open-offcanvas {display:none}	
	/* Webkit's scrollbar */
	.mainmenu::-webkit-scrollbar {-webkit-appearance: none;width:7px;}
	.mainmenu::-webkit-scrollbar-track-piece {margin: 10px 0px 10px 0px;}
	.mainmenu::-webkit-scrollbar-thumb {border-radius: 4px;background-color: rgba(0,0,0,.3);}
}

/* min-width */
@media only screen and (min-width: 0px) {
	/* Header */
	header .logo {left: 15px;}
	/* Windows */
	.info-window, .topics-window {left: 15px; top: 105px; }
	.info-window {padding: 15px;}
	.info-window .content {overflow-y: auto; height: 100%; padding-right: 10px;}
	.info-window .thumbs ul {margin: 20px 0px 20px 0px; padding: 0px; width: 100%;text-align:center;}
	.info-window .thumbs li {margin: 0px 10px 10px 0px;display:inline-block;}
	.photo-window {top: 150px;}
}

@media only screen and (min-width: 768px) {
	/* Header */
	header .logo {left: 0px;}
	/* Main menu */
	.mainmenu li {margin: 0px 10px 0px 0px;font-size: 16px;}
	.mainmenu .search, .mainmenu .search input { width: 100px;}
	.mainmenu .search-results {left:auto;right: 0px;}
	/* Windows */
	.info-window, .topics-window {left: 70px;top:120px;}
	.topics-window {width: 400px;}
	.info-window.has-photos {left:200px}
	.lt-ie10 .info-window.has-photos {left: 170px;}
	.info-window {width: 500px; max-height: 340px; padding: 20px;}
	.info-window .content {overflow-y: auto; height: auto; max-height: 260px; }
	.info-window .thumbs {text-align:left; position: absolute; top:0px; left: -130px; background: #fff; overflow-y: scroll; overflow-x:hidden; width: 130px; height: 240px;}
	.lt-ie10 .info-window .thumbs {width: 153px; left: -136px;}
	.info-window .thumbs ul {margin: 0px; padding: 0px; list-style:none; text-align:left; width: auto;}
	.info-window .thumbs li {position: relative; display:block; margin: 10px 0px 10px 10px}
	.info-window .thumbs a:hover .overlay {filter:alpha(opacity=100); opacity:1;}
	.info-window .thumbs a:hover .overlay i {filter:alpha(opacity=100); opacity:1;-webkit-transform:rotateX(360deg);-moz-transform:rotateX(360deg);-ms-transform:rotateX(360deg);-o-transform:rotateX(360deg);transform:rotateX(360deg);}
	.photo-window {top: 140px;}
}

@media only screen and (min-width: 992px) {
	/* Main menu */
	.mainmenu li {margin: 0px 20px 0px 0px; font-size: 18px;}
	.mainmenu .search, .mainmenu .search input { width: 160px;}
	
}
	
@media only screen and (min-width: 1200px) { 
	/* Main menu */
	.mainmenu li {margin: 0px 50px 0px 0px; }
	.mainmenu .search, .mainmenu .search input { width: 235px;}
	.mainmenu .search-results {left:0px; right: auto}
}
		
/* ==========================================================================
   Browser upgrade message
   ========================================================================== */	
   
#upgrade .alert {margin: 20px;}
.lt-ie9 .map {display:none;}
