/* CSS document for Schlerly Exchange */

/*
Design and styled by: Mike Johnston
Designer Website:
University Library System | University of Pittsburgh
*/

/*Reset Typography*/
@import url("../css/normalize.css");

/*GLOBAL Typography *********************************************************************************************************************/

body { font: 62.5% "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif; text-align: left; color: #000; }
p, dl, hr, h1, h2, h3, h4, h5, h6, ul, ol, pre, table, address, fieldset, span { font-size: 1.4em; margin: 0 0 10px 0; }
blockquote { font-size: 1.5em; text-align: center; }

/* Links */
a:link { color: #106079; text-decoration: underline; }
a:hover { color: #106079; border-bottom: 1px solid #106079; text-decoration: none; }
a:visited { color: #106079; border-bottom: 1px solid #106079; text-decoration: none; }

/* Headings */
h1 { font-size: 3.0em; margin: 10px 0 10px 0; padding: 0; color: #000; line-height: 30px; }
h2 { font-size: 1.8em; margin: 20px 0 10px 0; padding: 0; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.8em; margin: 20px 0 10px 0; padding: 0; }
h5 { font-size: 1.0em; font-weight: normal; }
h6 { font-size: 1.2em; text-align: center; background: #000; padding: 5px; margin: 0px; }

/* Lists */ 
ul, ol { list-style-type: square; margin: 5px 0 10px 20px; padding: 0; font-weight: bold; }
ol ol, ul ul, ul ol, ol ul { list-style-type: disc; margin: 10px 0 10px 20px; font-size: 1.0em; }
li { margin: 5px 0 5px 30px; font-weight: normal; line-height: 20px;   }

/* Misc typography classes */ 
.caption { margin-top: -1em; font-size: 1.2em; font-weight: bold; }
.strike { text-decoration: line-through; }
.clearfloat { clear: both; height: 0; font-size: 1px; line-height: 0px;}

/* Site Structure ***********************************************************************************************************************/

html { overflow-y: scroll; }

body {
	padding: 0;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	background: #fff;
}

#header {
	height: 115px;
	width: 100%;
	max-width: 1300px;
	padding: 0px;
	margin: 0px auto;
}

		#styleswitch { float: right; }
		#styleswitch button, select {
		    text-transform: none;
		    background: #22b7df;
		    border: none;
		    color: #000;
		    font-weight: bold;
		}


/*Logo**********************************************************/

#selogo {
	height: 96px;
	width: 439px;
	float: left;
	margin: 5px 0px 0px 0px;
	background: url(../img/scholarlyexchange_logo.png) top left;
	background-repeat: no-repeat;
	background-size: contain;

}

	.selogo-go {
			
	-webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 3s; /* Firefox < 16 */
	-ms-animation: fadein 3s; /* Internet Explorer */
	-o-animation: fadein 3s; /* Opera < 12.1 */
	animation: fadein 3s;
	}

#selogo a { 
		background-image: none;
		display:block;
		height:96px;
		width: 100%;
		overflow:hidden;
		text-indent:100%;
		white-space:nowrap;
		}

#selogo a:hover { border-bottom: 0px solid #106079; text-decoration: none; } 

#OAlogo {
	height: 50px;
	width: auto;
	background: url(../img/OAlogo.png) top left;
	background-repeat: no-repeat;
	background-size: contain;
}

/*Logo fade in function**************************************************************************************/
@keyframes fadein {
 from {opacity: 0;}
 to {opacity: 1;}
 }

/* Firefox < 16 */
@-moz-keyframes fadein {
 from {opacity: 0;}
 to {opacity: 1;}
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
 from {opacity: 0;}
 to {opacity: 1;}
}

/* Internet Explorer */
@-ms-keyframes fadein {
 from {opacity: 0;}
 to {opacity: 1;}
}

/* Opera < 12.1 */
@-o-keyframes fadein {
 from {opacity: 0;}
 to {opacity: 1;}
}

/*Logo media queries**********************************************************/

@media screen and (max-width: 1200px) {

#selogo {
	height: 100%;
	width: 100%;
	float: none;
	margin: 0px;
	background: url(../img/scholarlyexchange_logo.png) top center;
	background-repeat: no-repeat;
	background-size: contain;
}
}

/*Navigation ***********************************************************************************************************************************************/

#nav {
	margin: 60px 0 0 0;
	padding: 0;
	width: 60%;
	float: right;
	text-transform: uppercase;

}

.dropin {
	
	-moz-animation-name: dropin;
	-moz-animation-iteration-count: 1;
	-moz-animation-timing-function: ease;
	-moz-animation-duration: 2.0s;
	
	-webkit-animation-name: dropin;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease;
	-webkit-animation-duration: 2.0s;
	
	animation-name: dropin;
	animation-iteration-count: 1;
	animation-timing-function: ease;
	animation-duration: 2.0s;	
	
}

@-moz-keyframes dropin {
 0% { -moz-transform: translateY(-200px); }
 100% { -moz-transform: translateY(0); }
}
@-webkit-keyframes dropin {
 0% { -webkit-transform: translateY(-200px); }
 100% { -webkit-transform: translateY(0); }
}
@keyframes dropin {
 0% { transform: translateY(-200px); }
 100% { transform: translateY(0); }
}

#nav a {
	width: auto;
	color: #000;
	font-weight: normal;
	padding: 0px 1.5%;
	display: inline;
	color: rgba(158,158,158,1.00);
	margin: 0px;
	text-decoration: none;
}

#nav a:hover {
	width: auto;
	padding: 0px 1.5%;
	display: inline;
	border: 0px solid #000;
	color: #000;
	margin: 0px;
	text-decoration: none;
}

#nav ul {
	margin: 0px;
	padding: 11px 0px;
	font-weight: normal;
}

#nav li {
	padding: 0px;
	margin: 0px;
	list-style: none;
	display: inline;
	font-weight: normal;
	font-size: large;
}

/*Navigation media queries***********************************************************************************************************************/

@media screen and (max-width: 1200px) {

#nav {
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0px auto;
	padding: 0px;
	background: #fff;
}

#nav a {
	width: auto;
	color: rgba(158,158,158,1.00);
	font-weight: bold;
	padding: 5px 1.5%;
	display: inline-block;
	margin: 0px;
	text-decoration: none;
	border: 0px solid #000 !important;
}

#nav a:hover {
	width: auto;
	background: rgba(0,0,0,0.30);
	padding: 5px 1.5%;
	display: inline-block;
	border: 0px solid #000;
	color: #000;
	margin: 0px;
	text-decoration: none;
}

#nav ul {
	padding: 0px;
	margin: 0px;
	font-weight: normal;
}

#nav li {
	padding: 0px;
	margin: 0px;
	list-style: none;
	display: inline;
	border: 0px solid #000;
	font-weight: normal;
	overflow: hidden;
	text-align: center;
}

a#home { display: inherit; !important }

}

@media screen and (max-width: 960px) {

#nav a {
	width: auto;
	color: rgba(158,158,158,1.00);
	font-weight: bold;
	font-size: 1.5em;
	padding: 5px 1.5%;
	display: inline-block;
	margin: 0px;
	text-decoration: none;
	border: 0px solid #000 !important;
}

a#home { display: inherit; !important }

}

@media screen and (max-width: 400px) {

#nav {
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: -20px 0px 20px 0px;
	padding: 0px;
	background: #fff;
}

#nav a {
	width: 100%;
	color: rgba(158,158,158,1.00);
	font-weight: bold;
	font-size: 1.5em;
	padding: 10px 0px;
	display: block;
	text-decoration: none;
	line-height: 30px; 
	border-bottom: 1px solid #9E9E9E !important;
}

#nav a:hover {
	width: 100%;
	background: rgba(0,0,0,0.30);
	padding: 10px 0px;
	border: 0px solid #000;
	color: #000;
	text-decoration: none;
	display: block;
}

#nav ul {
	padding: 0px;
	margin: 0px;
	font-weight: normal;
}

#nav li {
	padding: 0px;
	margin: 0px;
	list-style: none;
	display: block;
	border: 0px solid #000;
	font-weight: normal;
	overflow: hidden;
	text-align: center;
}

a#home { display: none; !important }

}

/*Image banner************************************************************************************************************/	

#imgbanner {
	height: 371px;
	width: 100%;
	padding: 3px 0px 0px 0px;
	margin: 0px;
	background: url(../img/laptop-notebook-graphs.jpg) center center;
	background-size: cover;
	background-repeat: no-repeat;
	border-top: #3eaadf solid 7px;
	display: inherit;
	
	-webkit-box-shadow: 0px 2px 10px #000000;
	-moz-box-shadow: 0px 2px 10px #000000;
	box-shadow: 0px 2px 10px #000000;
}

@media screen and (max-width: 400px) {

#imgbanner {
	display:none;
}	

}

/* Image banner rollover and information function****************************************************************************/

#clicklink {
	width: 70%;
	float: left;
	margin: 5% 0 0 10%;
}

#clicklink-wrapper {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

.view {
	overflow: hidden;
	position: relative;
	text-align: center;
	cursor: default;
}

.view .mask, .view .content {
	width: 100%;
	height: 300px;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0
}

.view img {
	display: block;
	position: relative
}

.view h2 {
	/*text-transform: uppercase;*/
	color: #000;
	width: 50%;
	text-align: left;
	position: relative;
	font-size: 2.3em;
	padding: 15px 15px 0px 15px;
	background: #3eaadf;
	margin: 20px 0px 0px 0px;
	font-weight: bold;
}

.view h3 {
	/*text-transform: uppercase;*/
	color: #000;
	width: 50%;
	text-align: left;
	position: relative;
	font-size: 2.3em;
	padding: 2px 15px 15px 15px;
	background: #3eaadf;
	margin: 0px;
	font-weight: lighter;
}

.popbox h6 {
	width: 14%;
	float: left;
	font-size: 1.2em;
	position: relative;
	color: #fff;
	text-align: center;
	background: #000;
	padding: 5px;
	margin: -20px 0px 0px 38%;
}

.view .popupinfo {
	width: 90%;
	float: left;
	font-size: 1.0em;
	position: relative;
	color: #fff;
	padding: 5px;
	text-align: left
}

.popupinfo ul li { margin: 0px 0px 0px 30px; }

.view a.info {
	width: 100%;
	height: 300px;
	float: left;
	margin: -250px 0 0 0;
}

.view a.info:hover {
	width: 100%;
	height: 300px;
	float: left;
	margin: -250px 0 0 0;
}

@media screen and (max-width: 1024px) {

#clicklink {
	width: 100%;
	float: left;
	margin: 5% 0 0 0px;
	display:inherit;
}

.view h2, .view h3, .view h6, .view .popupinfo { width: 100%; }

.view .mask { height: 500px; }

}

@media screen and (max-width: 400px) {

#clicklink {
	display: none;
}


}

/*Box styles************************************************************************************/

.popbox {
	width: 100%;
	height: 300px;
	float: left;
	/*background: url(../images/largebox01.jpg) top center no-repeat;*/
	background-size: cover;
}

@media screen and (max-width: 1024px) {

.popbox {
	height: 500px;
	margin: 0px 0px -500px 0px;
}
}

.popbox img {
	transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear; /* Safari */
	-webkit-transition-property: all; /* Safari */
	-webkit-transition-duration: 0.2s; /* Safari */
	-webkit-transition-timing-function: linear; /* Safari */
	-webkit-transition-delay: 0s; /* Safari */
	width: 99%;
	height: 225px;
}

.popbox .mask {
	opacity: 0;
	/*background: url(../images/largebox02.jpg) top center no-repeat;
	background-size: cover;*/
	transition: all 0.4s ease-in-out;
	-webkit-transition-property: all; /* Safari */
	-webkit-transition-duration: 0.4s; /* Safari */
	-webkit-transition-timing-function: ease-in-out; /* Safari */
	-webkit-transition-delay: 0s; /* Safari */
}

.popbox h2, .popbox h3 {
	transform: translateY(-20px);
	-webkit-transform: translateY(-20px); /* Safari */
	opacity: 1;
	transition: all 0.2s ease-in-out;
	-webkit-transition-property: all; /* Safari */
	-webkit-transition-duration: 0.2s; /* Safari */
	-webkit-transition-timing-function: ease-in-out; /* Safari */
	-webkit-transition-delay: 0s; /* Safari */
}

.popbox .popupinfo {
	background: #000;
	padding: 5px;
	opacity: 0;
	transform: translateY(100px);
	-webkit-transform: translateY(100px); /* Safari */
	transition: all 0.2s linear;
	-webkit-transition-property: all; /* Safari */
	-webkit-transition-duration: 0.2s; /* Safari */
	-webkit-transition-timing-function: linear; /* Safari */
	-webkit-transition-delay: 0s; /* Safari */
}

.popbox a.info {
	opacity: 0;
	transition: all 0.2s ease-in-out;
	-webkit-transition-property: all; /* Safari */
	-webkit-transition-duration: 0.2s; /* Safari */
	-webkit-transition-timing-function: ease-in-out; /* Safari */
	-webkit-transition-delay: 0s; /* Safari */
}

/*Box hover transition code*/

.popbox:hover img { transform: scale(1.1); -webkit-transform: scale(1.1); /* Safari */ }
.popbox:hover .mask { opacity: 1; }
.popbox:hover .popupinfo, .popbox:hover a.info { opacity: 1; transform: translateY(-20px); -webkit-transform:: translateY(-20px); /* Safari */ }
.popbox:hover .popupinfo { transition-delay: 0.1s; -webkit-transition-delay: 0.1s; /* Safari */ }
.popbox:hover a.info { transition-delay: 0.1s; -webkit-transition-delay: 0.1s; /* Safari */ border-bottom: 0px; }


/*Content**************************************************************************************/
#content {
	width: 100%;
	min-height: 400px;
	max-width: 1300px;
	margin: -380px auto 0px auto;
	padding: 30px 40px 0px 40px;
}

#innercontent {
	background: #cbd2da;
	width: 75%;
	height: auto;
	min-height: 400px;
	margin: 0px auto;
	float: left;
	padding: 20px;

}

#inner-right-sidebar {	
	width: 20%;
	height: 100%;
	margin: 30px 0px 0px 0px;
	float: left;
	padding: 0px;
	overflow: hidden;
}

#inner-right-sidebar-content {
	width: 100%;
	-webkit-animation: zonein 2s ease; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: zonein 2s ease; /* Firefox < 16 */
	-ms-animation: zonein 2s ease; /* Internet Explorer */
	-o-animation: zonein 2s ease; /* Opera < 12.1 */
	animation: zonein 2s ease;
}

#OAcallout {
	width 90%;
	margin: 10px auto 0px auto;
	padding: 5px 5px 5px 5px;
	background: #fff;
	min-height: 180px;
	
	-webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 4s; /* Firefox < 16 */
	-ms-animation: fadein 4s; /* Internet Explorer */
	-o-animation: fadein 4s; /* Opera < 12.1 */
	animation: fadein 4s;
}
	#OAcallout h2 { font-size: 1.8em; margin: 0px 0 10px 0; padding: 0; }
	#OAcallout h3 { font-size: 1.6em; margin: -15px 0px 5px 0px; padding: 0px; }

/*sidebar slide in function**************************************************************************************/
@keyframes zonein {
 0%	{transform: translatex(-100%); opacity: 0; }
 100%	{transform: translatex(0); opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes zonein {
 0%	{transform: translatex(-100%); opacity: 0; }
 100%	{transform: translatex(0); opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes zonein {
 0%	{transform: translatex(-100%); opacity: 0; }
 100%	{transform: translatex(0); opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes zonein {
 0%	{transform: translatex(-100%); opacity: 0; }
 100%	{transform: translatex(0); opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes zonein {
 0%	{transform: translatex(-100%); opacity: 0; }
 100%	{transform: translatex(0); opacity: 1; }
}

#inner-right-sidebar a { 
	width: auto; 
	margin: 1px 0px; 
	text-align: left; 
	font-weight: normal; 
	padding: 3px 3px 3px 10px; 
	display: block; 
	color: #fff; 
	background: #000; 
	text-decoration: none; 
	}

#inner-right-sidebar a:hover { 
	width: auto;
	margin: 1px 0px; 
	text-align: left; 
	padding: 3px 3px 3px 10px; 
	display: block; 
	color: #000; 
	background: rgba(221,221,221,1.00); 
	text-decoration: none;
	border-bottom: none;
	}
	
#inner-right-sidebar ul { width: 250px; margin: 0px; padding: 11px 0px; font-weight: normal; }
#inner-right-sidebar li { width: 250px; padding: 0px; margin: 0px; list-style: none; display: inline; font-weight: normal; font-size: large; }

@media screen and (max-width: 1024px) {

#content {
	width: 100%;
	min-height: 400px;
	max-width: 1300px;
	margin: -380px auto 0px auto;
	padding: 30px 40px 0px 40px;
}


#innercontent {
	background: #cbd2da;
	width: 95%;
	height: auto;
	margin: 0px auto;
	float: none;
	padding: 5px;
}

#inner-right-sidebar {	
	width: 100%;
	height: 100%;
	margin: 10px 0px 0px 0px;
	float: none;
	padding: 0px;
	overflow: hidden;
}
#inner-right-sidebar ul { width: 95%; margin: 0 auto; padding: 11px 0px; font-weight: normal; }
#inner-right-sidebar li { width: 95%; padding: 0px; margin: 0px; list-style: none; display: inline; font-weight: normal; font-size: large; text-align: center; }

#OAcallout {
	width 95%;
	margin: 0 auto;
	padding: 5px 30px;
	background: #fff;
	min-height: 100%;
	
	-webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 4s; /* Firefox < 16 */
	-ms-animation: fadein 4s; /* Internet Explorer */
	-o-animation: fadein 4s; /* Opera < 12.1 */
	animation: fadein 4s;
}

}


@media screen and (max-width: 400px) {

#content {
	width: 100%;
	min-height: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 0px;
}

}


/*Footerbar********************************************************************************************************/

#footerbar {
	width: 100%;
	margin: 30px auto 50px auto;
	max-width: 1300px;
}

#cell1 h2, #cell2 h2, #cell3 h2, #cell4 h2 {
	width: 70%;
	font-size: 1.9em;
	margin: -10px 0px 10px -10px;
	padding: 10px;
	background: #3eaadf;
}

.cell1fake, .cell2fake, .cell3fake,  .cell4fake {
	width: 53px;
	font-size: 1.2em;
	position: absolute;
	bottom: 0px;
	right: 0px;
	color: #fff;
	text-align: center;
	background: #000;
	padding: 5px;
	margin: 0px;
	-webkit-transition: width .5s; /* Safari */
	transition: width .5s;
}

#cell1 {
	width: 20%;
	min-height: 250px;
	background: #cbd2da;
	float: left;
	margin: 10px 0px 0px 0px;
	padding: 10px;
	position: relative;
}

#cell2 {
	width: 20%;
	min-height: 250px;
	background: #cbd2da;
	float: left;
	margin: 10px 0px 0px 3.7%;
	padding: 10px;
	position: relative;
}

#cell3 {
	width: 20%;
	min-height: 250px;
	background: #cbd2da;
	float: left;
	margin: 10px 0px 0px 3.7%;
	padding: 10px;
	position: relative;
}

#cell4 {
	width: 20%;
	min-height: 250px;
	background: #cbd2da;
	float: left;
	margin: 10px 0px 0px 3.7%;
	padding: 10px;
	position: relative;
}

.cell1img {
	height: 74px;
	width: 74px;
	background: url(../img/scholarlyexchange_workflow.png) top left no-repeat;
	float: right;
	margin: -20px -25px 0px 0px;
	background-size: contain;
}

.cell2img {
	height: 74px;
	width: 74px;
	background: url(../img/scholarlyexchange_OA.png) top left no-repeat;
	float: right;
	margin: -20px -25px 0px 0px;
	background-size: contain;
}

.cell3img {
	height: 74px;
	width: 74px;
	background: url(../img/scholarlyexchange_save.png) top left no-repeat;
	float: right;
	margin: -20px -25px 0px 0px;
	background-size: contain;;
}

.cell4img {
	height: 74px;
	width: 74px;
	background: url(../img/scholarlyexchange_time.png) top left no-repeat;
	float: right;
	margin: -20px -25px 0px 0px;
	background-size: contain;
}



.cell1link, .cell2link, .cell3link, .cell4link {
	width: 100%;
	height: 250px;
	position: absolute;
	bottom: 0px;
	margin: 0;
	text-decoration: none;
	border-bottom: none;
	z-index: 10;
}

a.cell1link:hover, a.cell2link:hover, a.cell3link:hover, a.cell4link:hover {
	text-decoration: none;
	border-bottom: none;
}

.cell1link:hover + .cell1fake { width: 80px; }
.cell2link:hover + .cell2fake { width: 80px; }
.cell3link:hover + .cell3fake { width: 80px; }
.cell4link:hover + .cell4fake { width: 80px; }

@media screen and (max-width: 1024px) {

#cell1, #cell2, #cell3, #cell4 {
	width: 90%;
	height: 100%;
	min-height: 100%;
	margin: 10px auto;
	float: none;
}

.cell1link, .cell2link, .cell3link, .cell4link {
	width: 90%;
	height: 120px;
	position: absolute;
	bottom: 0px;
	margin: 0;
	text-decoration: none;
	border-bottom: none;
	z-index: 10;
}

}

/*Footer********************************************************************************************************/