/*
 * Last updated 11/11/14 16:11 CP
 */

/* RESPONSIVE
------------------------------------------------------- */

/* Desktop and tablet landscape will get the normal layout */

/* Mobile navigation */
#mobile-sitenav {
	cursor: pointer;
	display: none;
	margin: 0 -2.105%;
	padding: 10px 0 10px 40px;
	text-decoration: none;
	background: url("http://www.vanderbilt.edu/asset/i/menu-bl.png") no-repeat 10px center;
}

/*
 * 990px and smaller because the normal layout is 950px
 * and we want to have some space on the left and right
 */
@media only screen and (max-width: 990px) {
	/* Basics */
	img,
	img[style],
	a img,
	a img[style] {
		height: auto !important;
		max-width: 100% !important;
	}
	/* Brand bar */
	.vuinsider {
		margin: 0 2% !important;
		width: 96% !important;
	}
	.vuinsider .vulogomini {
		width: 277px; /* Width of VU logo */
		padding-right: 20px;
	}
	#header .container .vulogo {
		width: 40%;
	}
		#header .container .vulogo h1 {
			margin: 0;
		}
		#header .container .vulogo h1 a {
			background: url("http://www.vanderbilt.edu/asset/i/vanderbilt-university-bb.png") no-repeat scroll 0 center rgba(0, 0, 0, 0);
		}
	#header .container #tools {
		width: 60%;
	}
		#header .container #tools ul {
			float: right;
			padding: 3px 10px;
		}
			#header .container #tools ul ul {
				display: none;
			}
		#header .container #tools #searchme {
			float: right;
			padding: 3px 10px;
		}
	/* Banner */
	.graphicheader {
		height: auto !important;
	}
	.graphicheader .container {
		width: 100%;
		margin: 0;
		line-height: 0;
	}
	.graphicheader .container h1 {
		line-height: 1.5em;
	}
	/* Navigation */
	.sitenav-container {
		max-height: 48px;
		overflow: hidden;
		/* Avoid wrapping in the nav bar */ 
	}
	/* Content */
	.container {
		width: 96%;
		margin: 0 2%;
	}
	.container #seccontent {
		margin-right: 4%;
		width: 64%;
	}
	.container #seccontent .secmain {
		width: 100%;
	}
	.container #seccontent .secmain .leftcol {
		margin: 0 6% 0 0;
		width: 28%;
	}
	.container #seccontent .secmain .leftcol #flickr {
		display: none;
	}
	.container #seccontent .secmain .rightcol {
		margin: 0;
		width: 66%;
	}
	.container #seccontent .secmain .linksboxhalf,
	.container #seccontent .secmain .linksbox {
		background: #ECECEC;
		border: 0;
		margin: 0;
		padding: 15px 5%;
		width: 90%;
	}
	.container #seccontent .secmain .linksboxhalf.last,
	.container #seccontent .secmain .linksbox.last {
		margin: 20px 0 0 0;
	}
	.container #seccontent .secmain .newsbox {
		border: 0;
		padding: 15px 5%;
	}
	.container #seccontent .secmain .newsbox h4,
	.container #seccontent .secmain .newsbox ul {
		padding: 0;
	}
	.container #seccontent .secmain .newsbox ul li a {
		padding: 0 0 15px 0;
	}
	.container #secnav {
		width: 32%;
		/* Find out how to host this in the right place */
		background-image: inherit;
		padding-top: 0;
	}
		.container #secnav .home {
			background-position: right 4px;
		}
			.container #secnav .home a:link,
			.container #secnav .home a:visited {
				padding: 8px 25px 16px 5%;
			}
		.container #secnav .rssnews {
			margin-top: 0;
			padding-top: 0;
		}
		.container #secnav form {
			margin: 15px 5% 5px;
			width: 90%;
		}
			.container #secnav form input {
				line-height: 24px;
				margin: 0;
				padding: 0 5%;
				width: 70%;
			}
			.container #secnav form .btn {
				line-height: 24px;
				padding: 0;
				width: 15%;
				/* Should have an extra 5% to spare */
			}
		.container #secnav h4,
		.container #secnav h3 {
			padding: 15px 5%;
			margin: 0;
		}
		.container #secnav ul {
			padding: 0 5%;
			margin: 0 0 15px 0;
		}
			#secnav ul li a:link,
			#secnav ul li a:visited {
				padding: 10px 5px 10px 10px;
			}
	/* Homepage Content */
	.container #slides {
		background: none;
		margin: 0 -2.105%;
	}
		.container #slides .vslides,
		.container #slides .vslides .main_story,
		.container #slides .vslides .main_story .transition {
			width: 100%; background-position: center;  
		}
/* This will keep the negative margins on the HP slider from causing trouble on iPhones and other devices */
		#vanderbilt #content {
			overflow: hidden;
		}

	.container #highlights .news {
		border-radius: 0;
		moz-border-radius: 0;
		webkit-border-radius: 0;
		border-width: 5px 0 1px 0;
		margin: 0 6% 0 0;
		width: 68%;
	}
		.container #highlights .news ul {
			padding: 3% 5%;
			width: 90%;
		}
		.container #highlights .news p.more a:link,
		.container #highlights .news p.more a:visited {
			height: 18px;
			line-height: 18px;
		}
	.container #highlights .spotlight {
		width: 26%;
	}
		.container #highlights .spotlight a img {
			background: none;
		}
	/* AddThis */
	.container #seccontent .secmain .addthis_toolbox {
		padding: 10px 10px 10px 0;
	}
	.container #secnav .addthis_toolbox {
		padding: 10px 5%;
	}
	/* Secondary Navigation */
	#navsec {
		padding: 5px 0;
	}
	#navsec ul li a {
		margin: 5px 0;
	}
	/* Footer */
	#footer #homeflickr {
		display: none;
	}
	#footer .footgroup {
		width: 100%;
	}
	#footer .footgroup #yourvu {
		margin: 0 4% 10px 0;
		padding: 15px 5%;
		width: 54%;
	}
	#footer .footgroup #yourvu ul {
		width: 50%;
	}
	#footer .footgroup #social {
		margin: 0 0 10px 0;
		padding: 0;
		width: 32%;
	}
	#footer .footgroup #popular {
		display: none;
	}

	/* NIVO */
	.nivoSlider { width: 100%;  !important; overflow: hidden; }
	.nivoSlider img { width: 100% !important; overflow: hidden;  }

}

/* Tablet portrait and smaller */
@media only screen and (max-width: 768px) {
	/* Brand bar */
	.vuinsider #toolsvu {
		display: none;
	}
	.vuinsider .vulogomini {
		width: 100%;
		padding-right: 0;
	}
	#header .container .vulogo {
		width: 100%;
	}
		#header .container .vulogo h1 a {
			background-position: center center;
			width: 100%;
			margin: 4px 0;
		}
	#header .container #tools {
		display: none;
	}
	/* Display search outside of header */
	#responsive-search {
		display: block !important;
		float: left;
		margin: 0 0 15px;
		width: 100%;
	}	
	#responsive-search form {
		margin: 0 auto;
		max-width: 400px;
	}
	#responsive-search form input {
		padding: 10px 20px;
		background: #EEE;
		border: 1px solid #AAA;
		font-size: 1.2em;
		line-height: 18px;
	}
	#responsive-search form input[type=text] {
		height: 18px;
		padding: 10px 5%;
		width: 70%;
		float: left;
	}
	#responsive-search form input[type=submit] {
		height: 40px;
		width: 16%; /* 4% to spare for borders */
		margin: 0;
		float: right;
		cursor: pointer;
	}
	/* Mobile navigation */
	/* See below for specific mobile navigation CSS */
	#mobile-sitenav {
		display: block;
	}
	.sitenav-container {
		display: none;
	}
	/* HOMEPAGE SLIDER */
	.container > #slides > .vslides > .main_story,
	.container > #slides > .vslides > .main_story > .transition[style] {
		background-image: none !important;
		background-color: #000;
	}
	.vslides .headview {
		width: 100%;
	}
		.vslides .headview .headline {
			width: 100%;
		}
		.vslides .headview .headline[style] {
			left: 0 !important;
		}
			.vslides .headview .headline .headin {
				width: auto;
				padding: 15px 150px 15px 15px;
			}
	/* Banner */
	.graphicheader img {
		display: none;
	}
	.graphicheader { background-image: none !important;; background-color: #000 !important;; } 
	.graphicheader h1.noshow {
		display: block !important;
		color: #fff !important;;
		font-size: 2.75em;
		line-height: 1.15em;
		padding: 0.25em 0;
		margin: 0 2%;
		width: 96%;
	}
	/* Content */
	.container #seccontent .crumbs {
		display: none;
	}
	.container #seccontent .secmain .leftcol,
	.container #seccontent .secmain .rightcol {
		margin: 0;
		width: 100%;
	}
	/* AddThis */
	.addthis_toolbox a {
		margin: 2px 0;
	}
	/* GSA Search */
	.main-results-without-dn {
		width: 100%;
	}
	#clustering {
		display: none;
	}
	/* Footer */
	#footer .footgroup #yourvu ul {
		width: 100%;
	}

}

/* Mobile landscape and smaller */
@media only screen and (max-width: 480px) {
	/* Brand bar */
	.vuinsider .vulogomini h1 a {
		width: 100%;
		background-position: center 0;
	}
	/* Content */
	.container #seccontent {
		margin-right: 0;
		width: 100%;
	}
	.container #secnav {
		width: 100%;
		margin: 0;
	}
	/* Homepage Content */
	.container #highlights .news {
		margin: 0;
		width: 100%;
	}
	.container #highlights .news li {
		font-size: 1.2em; 
	}
	.container #highlights .spotlight {
		width: 100%;
		margin: 54px 0 0 0;
	}
		.container #highlights .spotlight a {
			width: 47%;
		}
			.container #highlights .spotlight a:first-child {
				margin: 0 3% 0 0;
				float: left;
			}
			.container #highlights .spotlight a:last-child {
				margin: 0 0 0 3%;
				float: right;
			}
				.container #highlights .spotlight a img {
					padding: 0;
				}
	/* Secondary Navigation */
	#navsec ul li {
		float: none;
	}
	#navsec ul li a {
		border-right: none;
	}
	/* Footer */
	#footer .footgroup #yourvu {
		margin: 0;
		width: 90%;
	}
	#footer .footgroup #social {
		margin: 20px 0;
		width: 100%;
	}
	/* Search */
	ul##bottompagination {
		width: 250px;
	}
	/* NIVO */
	.nivo-caption { left: 0; bottom: 0px; height: auto; width:70%; font-sze: 1.2em;  }

}

/* Mobile portrait and smaller */
@media only screen and (max-width: 320px) {
}

/**********
 * NAV
 **********/

/* Tablet portrait and smaller */
@media only screen and (max-width: 768px) {
	#nav {
		padding: 0;
		border: 0 none;
		background: #D8AB4C !important;
		font-size: 1.35em;
	}
	a#mobile-sitenav { color: #222; } 
	.sitenav-container {
		margin: 0 -2.105% !important;
		width: auto !important;
		max-height: none;
		overflow: visible;
	}
	.sitenav-container div {
		display: none;
	}
	.sitenav-container li {
		background: none !important;
		border-bottom: 0 none !important;
		border-right: 0 none !important;
		float: none !important;
		margin-left: 0 !important;
		text-align: left !important;
	}
		.sitenav-container li:hover {
			background: none !important;
			margin-top: 0 !important;
			padding: 0 !important;
		}
	#sitenav a:link, #sitenav a:visited {
		background: #D8AB4C !important;
		color: #000;
	}
	.sitenav-container li a,
	.sitenav-container li a:link,
	.sitenav-container li a:visited,
	.sitenav-container li a.accordion.link {
		line-height: 18px !important;
		cursor: pointer !important;
		display: block !important;
		padding: 10px 10px 10px 34px !important;
		text-decoration: none !important;
		z-index: 100 !important;
		width: auto !important;
		color: #FFF !important;
	}
	#sitenav li a:hover,
	.sitenav-container li a:hover {
		color: #FFF !important;
		background-color: #333 !important;
	}
	.sitenav-container li.open-accordion-link-item > a {
		background-color: #333 !important;
		color: #e9cc8d !important;
		font-weight: bold; 
	}
	.sitenav-container li a.closed-accordion-link {
		background-image: url("http://www.vanderbilt.edu/asset/i/accordion-closed-bl.png") !important;
	}
	.sitenav-container li a.closed-accordion-link:hover {
		background-image: url("http://www.vanderbilt.edu/asset/i/accordion-closed.png") !important;
	}

	.sitenav-container li a.open-accordion-link{
		background-image: url("http://www.vanderbilt.edu/asset/i/accordion-open.png") !important;
	}
	/*
	.sitenav-container li a.open-accordion-link:hover {
		background-image: url("http://www.vanderbilt.edu/asset/i/accordion-open.png") !important;
	}
	*/
	.sitenav-container li a.closed-accordion-link,
	.sitenav-container li a.closed-accordion-link:hover,
	.sitenav-container li a.open-accordion-link,
	.sitenav-container li a.open-accordion-link:hover {
		background-repeat: no-repeat !important;
	}
	/* Top level menu */
	.sitenav-container > li > a,
	.sitenav-container > li > a:link,
	.sitenav-container > li > a:visited,
	.sitenav-container > li > a.accordion.link {
		padding-left: 34px !important;
	}
	.sitenav-container > li > a.closed-accordion-link,
	.sitenav-container > li > a.closed-accordion-link:hover,
	.sitenav-container > li > a.open-accordion-link,
	.sitenav-container > li > a.open-accordion-link:hover {
		background-position: 10px center !important;
	}
	/* Second level menu */
	.sitenav-container > li > ul > li > a,
	.sitenav-container > li > ul > li > a:link,
	.sitenav-container > li > ul > li > a:visited,
	.sitenav-container > li > ul > li > a.accordion.link {
		padding-left: 58px !important;
	}
	.sitenav-container > li > ul > li > a.closed-accordion-link,
	.sitenav-container > li > ul > li > a.closed-accordion-link:hover,
	.sitenav-container > li > ul > li > a.open-accordion-link,
	.sitenav-container > li > ul > li > a.open-accordion-link:hover {
		background-position: 34px center !important;
	}
	/* Third level menu */
	.sitenav-container > li > ul > li > ul > li > a,
	.sitenav-container > li > ul > li > ul > li > a:link,
	.sitenav-container > li > ul > li > ul > li > a:visited,
	.sitenav-container > li > ul > li > ul > li > a.accordion.link {
		padding-left: 82px !important;
	}
	.sitenav-container > li > ul > li > ul > li > a.closed-accordion-link,
	.sitenav-container > li > ul > li > ul > li > a.closed-accordion-link:hover,
	.sitenav-container > li > ul > li > ul > li > a.open-accordion-link,
	.sitenav-container > li > ul > li > ul > li > a.open-accordion-link:hover {
		background-position: 58px center !important;
	}
	/* Fourth level (and beyond) menu */
	.sitenav-container > li > ul > li > ul > li > ul li > a,
	.sitenav-container > li > ul > li > ul > li > ul li > a:link,
	.sitenav-container > li > ul > li > ul > li > ul li > a:visited,
	.sitenav-container > li > ul > li > ul > li > ul li > a.accordion.link {
		padding-left: 106px !important;
	}
	.sitenav-container > li > ul > li > ul > li > ul li > a.closed-accordion-link,
	.sitenav-container > li > ul > li > ul > li > ul li > a.closed-accordion-link:hover,
	.sitenav-container > li > ul > li > ul > li > ul li > a.open-accordion-link,
	.sitenav-container > li > ul > li > ul > li > ul li > a.open-accordion-link:hover {
		background-position: 82px center !important;
	}
	/* Miscellaneous overrides */
	.sitenav-container li:hover ul,
	.sitenav-container li.sfhover ul,
	.sitenav-container li li:hover ul,
	.sitenav-container li li.sfhover ul,
	.sitenav-container li li li:hover ul,
	.sitenav-container li li li.sfthover ul {
		left: -999em !important;
	}
	.sitenav-container li ul,
	.sitenav-container li ul.accordion-open,
	.sitenav-container li ul.accordion-closed,
	.sitenav-container li ul ul.accordion-open,
	.sitenav-container li ul ul.accordion-closed {
		border: none !important;
		left: 0 !important;
		margin: 0 !important;
		position: relative !important;
		width: auto !important;
		padding: 0 !important;
	}
	.sitenav-container li ul li {
		border-bottom: 0 !important;
	}
	.sitenav-container li:hover ul ul,
	.sitenav-container li.sfhover ul ul,
	.sitenav-container li:hover ul ul ul,
	.sitenav-container li.sfhover ul ul ul {
		left: 0 !important;
	}
	/* Mobile tools menu */
	#mobile-tools-menu {
		background-color: #e9cc8d !important;
	}
	#mobile-tools-menu a {
		color: #000 !important;
	}
	#mobile-tools-menu a:hover,
	#mobile-tools-menu a:focus {
		color: #FFF !important;
	}
	#mobile-tools-menu a.open-accordion-link {
		color: #e9cc8d !important;
	}
}