LibGuides Group - L&T

footer.html

<footer class="inner">
	<div id="footerHeader" class="">
		<a href="http://libraries.mit.edu/" id="logoFooter">MIT Libraries</a>
		<div id="footerMainLink" class=""> 
		</div>
		<div id="footerSubLink" class="hidden-phone">
			<a href="http://libraries.mit.edu/faculty">Faculty</a> | 
			<a href="http://libraries.mit.edu/alumni">Alumni</a> | 
			<a href="http://libraries.mit.edu/visitors">Visitors</a> | 
			<a href="http://libraries.mit.edu/disabilities">Persons with disabilities</a>
		</div>
		<div id="socialFooter">
			<span class="hidden-phone">Find us on </span>
			<a href="http://twitter.com/mitlibraries" id="twitter" class="social">Twitter</a>
			<a href="http://libraries.mit.edu/facebook" id="facebook" class="social">Facebook</a>
			<a href="http://libraries.mit.edu/news/rss-feeds/" id="rss" class="social">RSS</a>
			<a href="http://www.flickr.com/photos/mit-libraries/" id="flickr" class="social">Flickr</a>
			<a href="https://foursquare.com/mitlibraries" id="foursquare" class="social">Foursquare</a>
			<a href="http://libguides.mit.edu/content.php?pid=104796&sid=788991" id="google" class="social">Google</a>
		</div>
	</div>
	<div id="footerContent">
		<div class="footerCol span2">
			<h3><a href="http://libraries.mit.edu/search/">Search</a></h3>
			<ul class="hidden-phone">
				<li><a href="http://libraries.mit.edu/bartonplus">BartonPlus</a></li>
				<li><a href="http://libraries.mit.edu/barton">Barton catalog</a></li>
				<li><a href="http://libraries.mit.edu/vera">Vera: Databases & e-journals</a></li>
				<li><a href="http://libraries.mit.edu/worldcat">MIT's WorldCat</a></li>
				<li><a href="http://libraries.mit.edu/barton-reserves">Course reserves</a></li>
				<li><a href="http://libraries.mit.edu/search-web.html">Site search</a></li>
				<li><a href="http://libraries.mit.edu/search/">More search options</a></li>
			</ul>
		</div>

		<div class="footerCol span2">
			<h3><a href="http://libraries.mit.edu/locations">Hours & locations</a></h3>
			<ul class="hidden-phone">
				<li><a href="http://libraries.mit.edu/hours">Hours</a></li>
				<li><a href="http://libraries.mit.edu/locations">List of locations</a></li>
				<li><a href="http://libraries.mit.edu/study">Study spaces</a></li>
				<li><a href="http://libraries.mit.edu/exhibits">Exhibits & galleries</a></li>
				<li><a href="http://libraries.mit.edu/map">Map</a></li>
			</ul>
		</div>

		<div class="footerCol span2">
			<h3><a href="http://libguides.mit.edu/content.php?pid=213241&sid=1774488">Borrow & request</a></h3>
			<ul class="hidden-phone">
				<li><a href="http://libraries.mit.edu/barton-account">Your Account</a></li>
				<li><a href="http://libraries.mit.edu/getit">Get it: options for getting books & articles</a></li>
				<li><a href="http://libraries.mit.edu/circ">Circulation FAQ</a></li>
				<li><a href="http://libraries.mit.edu/reserves">Reserves & TIP FAQ</a></li>
				<li><a href="http://libraries.mit.edu/ordering/non-mit-access/index.html">Visit non-MIT libraries</a></li>
				<li><a href="http://libguides.mit.edu/content.php?pid=213241&sid=1774488">More borrow & request options</a></li>
			</ul>
		</div>

		<div class="footerCol span2">
			<h3><a href="http://libraries.mit.edu/research-support/">Research support</a></h3>
			<ul class="hidden-phone">
				<li><a href="http://libraries.mit.edu/ask">Ask Us!</a></li>
				<li><a href="http://libraries.mit.edu/experts">Librarians & subject experts</a></li>
				<li><a href="http://libraries.mit.edu/research-guides">Research guides</a></li>
				<li><a href="http://libraries.mit.edu/scholarly">Scholarly publishing</a></li>
				<li><a href="http://libraries.mit.edu/about/faqs/remote.html">E-resource troubleshooting</a></li>
				<li><a href="http://libraries.mit.edu/research-support/">More research support options</a></li>
			</ul>
		</div>

		<div class="footerCol span2">
			<h3><a href="http://libraries.mit.edu/productivity-tools/">Productivity tools</a></h3>
			<ul class="hidden-phone">
				<li><a href="http://libraries.mit.edu/references">Citation software</a></li>
				<li><a href="http://libraries.mit.edu/manage-info">Manage your info</a></li>
				<li><a href="http://libraries.mit.edu/betas">Betas & widgets</a></li>
				<li><a href="http://libraries.mit.edu/apps">Apps for academics</a></li>
				<li><a href="http://libraries.mit.edu/libx">LibX</a></li>
				<li><a href="http://libraries.mit.edu/help/rss/barton/">New books RSS feeds</a></li>
				<li><a href="http://libraries.mit.edu/productivity-tools/">More productivity tools</a></li>
			</ul>
		</div>

		<div class="footerCol span2">
			<h3><a href="http://libraries.mit.edu/about/">About us</a></h3>
			<ul class="hidden-phone">
				<li><a href="http://libguides.mit.edu/directory">Staff directory</a></li>
				<li><a href="http://libraries.mit.edu/news">News</a></li>
				<li><a href="http://libraries.mit.edu/calendar">Calendar of events</a></li>
				<li><a href="http://libraries.mit.edu/about/guidelines-about.html">Guidelines for use</a></li>
				<li><a href="http://libraries.mit.edu/site-index.html">Site index</a></li>
				<li><a href="http://libraries.mit.edu/about/">More about us</a></li>
			</ul>
		</div>

		<div class="clear"></div>
	</div>

	<div id="footerFooter" class="">
		<a href="http://www.mit.edu" id="mitLogo">Massachusetts Institute of Technology</a>
	</div>
</footer>

header.html

<div id="logo-container">
	<a class="logo" href="http://libraries.mit.edu"><img src="http://libraries.mit.edu/wp-content/themes/libraries/images/logo.png" alt="MIT Libraries"></a>
</div>
<div id="tools">
	<a id="barton-account" href="http://libraries.mit.edu/barton-account">Your Account</a>
	<div id="suggestionnav">
		<a href="http://libraries.mit.edu/ask-us/" id="askus">ASK US!</a>
		<a href="http://libraries.mit.edu/suggestions" id="tellus">TELL US!</a>
	</div>
</div>
<nav id="customNav"><ul class="navigation"><li><a href="http://libraries.mit.edu/search">Search</a></li><li><a href="http://libraries.mit.edu/locations">Hours & locations</a></li><li><a href="http://libraries.mit.edu/borrow">Borrow & request</a></li><li><a href="http://libraries.mit.edu/research-support">Research support</a></li><li class="about"><a href="http://libraries.mit.edu/productivity-tools">Productivity tools</a></li><li class="about"><a href="http://libraries.mit.edu/about">About us</a></li></ul></nav>

styles.html

<meta name="viewport" content="width=device-width, maximum-scale=1">
<style type="text/css">
div#wrapper * {
	font-family: Arial, Helvetica, sans-serif !important;
}
div#wrapper {
	background: none;
}
div#container {
	margin-top: 1em;
}
div#guide_header_title {
	background: #;
	display: block;
	padding: 0.5em 0 ;
}
div#guide_header_title h1,
div#pagetitle_index {
	color: #333;
}
div#custom_header {
	padding: 10px;
}
div#logo-container {
	width: 50%;
	float: left;
	margin-bottom: 10px;
}
div#logo-container a.logo {
	margin-left: 11px;
}
div#logo-container a.guides {
	margin-left: 10px;
	color: #333;
	font-size: 2em;
}
#logo {
	cursor: pointer;
	width: 150px;
	height: 56px;
	background: transparent url(http://libraries-test.mit.edu/wp-content/themes/libraries/images/logo.png) no-repeat;
	text-indent: -9999px;
}
div#tools {
	display: inline;
	float: right;
}
div#tools a#barton-account {
	margin-right:15px;
	vertical-align: top;
	margin-top: 10px;
	display: inline-block;
	font-weight: bold;
}
/* Suggestion nav */
#suggestionnav {
	display: inline-block;
	width:175px;
	bottom:0;
	right:0;
	padding-top:10px;
	padding-bottom:10px;
	border-left: 1px solid #eceaea;
}
#suggestionnav a#askus {
	float:left;
	display:inline;
	background:url("http://libraries.mit.edu/images/suggestionnav_ask.gif") no-repeat 0 0;
	height:19px;
	width:79px;
	margin-left:15px;
	text-indent:-5000px;
}
#suggestionnav a#askus:hover {
	background-position:0 -19px;
}
#suggestionnav a#tellus {
	float:left;
	display:inline;
	background:url("http://libraries.mit.edu/images/suggestionnav_tell.gif") no-repeat 0 0;
	height:19px;
	width:79px;
	margin-top:-4px;
	margin-left:-6px;
	margin-right:8px;
	text-indent:-5000px;
}
#suggestionnav a#tellus:hover {
	background-position:0 -19px;
}
/* 
  Pull breadcrumb into gray background on bottom of header nav 
  (probably a more elegant way to do this) 
*/
nav#customNav {
  clear: both;
  margin-bottom: 0.5em;
}
nav#customNav ul {
  padding-left: 0;
  margin-bottom: 0;
}
nav#customNav li {
  display: inline;
  list-style-type: none;
  white-space: nowrap;
}
nav#customNav li a {
  color: #004BBD;
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
  padding: 5px 40px 5px 10px;
}
nav#customNav li a:hover,
nav#customNav li a:focus {
  text-decoration: underline;
}
div.topnav {
	clear:both;
	height: 17px;
	background-color: #eceaea;
}

/* Hide "Print Page" icon */
span#guide_tab_title_bar_page_print {
	display: none;
}

/* ################################
###
### Footer
 */

#footer {
 	display: none;
}
#customFooter {
	clear: both;
}
#footerContent a, #footerHeader a {
	color: #3b3a74;
}
#footerContent a:hover, #footerHeader a:hover {
	color: #3b3a74;
}
#footerHeader a {
	color: #c9e3fc;
}
#footerHeader a:hover {
	color: #c9e3fc;
}
#footerContent h3 a {

}
#footerContent h3 a:hover {
	color: #000;
}
#footerHeader {
	position: relative;
	height: 72px;
}
#logoFooter {
	width: 111px;
	height: 47px;
	position: absolute;
	top: 16px;
	left: 18px;
	text-indent: -9999px;
	background: transparent url(http://libraries-test.mit.edu/wp-content/themes/libraries/images/logo-black.png) no-repeat;
}

#footerHeader #footerMainLink {
	position: absolute;
	top: 51px;
	left: 190px;
}
#footerHeader #footerSubLink {
	position: absolute;
	top: 51px;
	right: 20px;
}

#footerContent .span2 {
	margin-left: 20px;
	width: 135px !important;
}
#socialFooter {
	position: absolute;
	top: 20px;
	right: 17px;
	text-align: right;
	line-height: 17px;
}

.social {
	display: inline-block;
	width: 17px;
	height: 17px;
	text-align: left;
	text-indent: -9999px;
	background-image: url(http://libraries-test.mit.edu/wp-content/themes/libraries/images/social-icons.png);
	background-repeat: no-repeat;
	margin-left: 2px;
}

#twitter {
	background-position: -0px 0px;
}

#facebook {
	background-position: -20px 0px;
}

#rss {
	background-position: -40px 0px;
}

#flickr {
	background-position: -60px 0px;
}

#foursquare {
	background-position: -80px 0px;
}

#google {
	background-position: -100px 0px;
}

#mitLogo {
	width: 170px;
	height: 39px;
	position: absolute;
	top: 25px;
	left: 20px;
	text-indent: -9999px;
	background: transparent url(http://libraries-test.mit.edu/wp-content/themes/libraries/images/logo-mit.png) no-repeat;
}
footer {
	margin-top: 25px;
}

#footerHeader {
	position: relative;
	background: #333333;
	font-size: 14px;
	color: #ccc;

}

#footerContent {
	position: relative;
	background: #f2f0f1;
	font-size: 14px;
	color: #ccc;
	padding-top: 20px !important;

}

#footerHeader {
	padding: 10px;
}

#footerContent {
	padding: 0 0 10px 0;
	font-size: 12px;
	line-height: 12px;
}

#footerContent ul li {
	list-style-image: url(http://libraries-test.mit.edu/wp-content/themes/libraries/images/list-arrow.png);
	margin-left: 15px;
	margin-bottom: 0px;
}



#footerContent h3 {
	font-weight: normal;
	margin: 0px 0 2px 0;
	font-size: 14px;
	line-height: 14px;
}

#footerFooter {
	font-size: 12px;
	position: relative;
	background: #f2f0f0;
	height: 93px;
	/* margin-bottom: 50px; */
	border-top: 2px solid #fff;
}

.copyright {
	position: absolute;
	left: 500px;
	top: 25px;
	width: 450px;
}
.footerCol {
	width: 130px !important;
}

.footerCol>h3 {
	color: #333;
}
.footerCol ul {
padding: 0;
}
#footerContent .footerCol ul li {
margin-bottom: 0.5em;
}
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
.clear {
clear: both;
}
/* Springshare footer */
div#customFooter span.footertext {
	display: none;
}
div#customFooter p br {
	/* display: none; */
}

/* Begin responsiveness, sub-1000 pixels
   - Set wrapper and container to fill width
   - Other changes kick in at smaller widths

*/
@media only screen and (max-width: 800px) {
	/* Start shrinking the content column */
	div#wrapper,
	div#container {
		max-width: 100%;
	}
	/* Undo oversize padding on menu to allow it to collapse */
	nav#customNav ul li a {
		padding: 5px 1%;
		font-size: 13px;
	}
	div#content div#contentleft,
	div#content div#contentcenter,
	div#content div#contentright {
		width: 100% !important;
	}

}
/* Small tablet/7-inch styles */
@media only screen and (min-width: 651px) and (max-width: 800px) {
}
/* Phone/4-inch styles */
@media only screen and (max-width: 650px) {
	/* Header items in a row, by force */
	div#logo-container {
		position: relative;
		display: block;
		width: 100%;
		text-align: center;
	}
	div#tools {
		position: relative;
		display: block;
		width: 100%;
		text-align: center;
	}
	nav#customNav {
		position: relative;
		display: block;
	}
	/* Increase vertical padding on menu to allow for thick fingers */
	nav#customNav ul li {
		display: block;
		padding: 0.5em;
	}
	div#content {
		padding: 0;
	}
	#footerHeader {
		height: auto;
	}
	#footerHeader #footerMainLink {
		position: relative;
		margin-top: 4em;
		top: 0;
		left: 0;
	}
	#footerHeader #footerSubLink {
		position: relative;
		top: 0;
		left: 0;
	}
	.hidden-phone {
		display: none;
	}
}
</style>