/* As these pages are placed in the Carnegie Mellon context, I am 
   using guidelines from http://www.cmu.edu/marcom/brand-guidelines/print-web-products/web/index.html
*/

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	text-decoration: none;
	background-color: #ffffff;
	min-height: 300px;
}

h1 {
	font-family: Helvetica, sans-serif;
	font-weight: bold;
	color: #990000;
}

h2 {
	font-family: Helvetica, sans-serif;
	color: #990000;
}

h3 {
	font-family: Helvetica, sans-serif;
	color: #990000;
}

a:link,a:hover {
  text-decoration: underline; 
  color: #990000;
}

a:visited {
  text-decoration: underline; 
  color: #703838;
}

a:active {
  text-decoration: none; 
  color: #990000;
}

.myview {
   box-shadow: 2px 2px 5px rgba(0,0,0,0.75);
}

.mycaption {
	padding:5;
	margin-top: 4px;
	text-align: center;
}

/* Center a block vertically */
.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

/* Remove thin line border/shadow around thumbnail items */
.thumbnail {
    border: 0 none;
    box-shadow: none;
}

.refSource {
  font-style:italic;
}

.refVol {
  font-weight:bold;
}

.projectTitle {
  font-weight:bold;
  color: #990000;
}

.projectAttrib {
  font-style:italic;
  font-size: small;
}

.concl {
  font-style:italic;
  font-size: small;
}

.topgap {
  margin-top: 4px;
}

/* Using Example 2 from: http://www.alessioatzeni.com/blog/css3-hover-effects/ 
   But... I don't understand a.info style and don't have link.png, looking for another way.... 
.view {
   width: 300px;
   height: 200px;
   margin: 10px;
   float: left;
   border: 5px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   box-shadow: 0px 0px 5px #aaa;
   cursor: default;
}

.view .mask, .view .content {
   width: 328px;
   height: 184px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}

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

.view a.info {
   background:url(../img/link.png) center no-repeat;
   display: inline-block;
   text-decoration: none;
   padding:0;
   text-indent:-9999px;
   width:20px;
   height:20px;
}

.second-effect .mask {
   opacity: 0;
   overflow:visible;
   border:0px solid rgba(0,0,0,0.7);
   box-sizing:border-box;
   transition: all 0.4s ease-in-out;
}

.second-effect a.info {
   position:relative;
   top:-10px;
   opacity:0;
   transform:scale(0,0);
   transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
}

.second-effect:hover .mask {
   opacity: 1;
   border:100px solid rgba(0,0,0,0.7);
}

.second-effect:hover a.info {
   opacity:1;
   transform:scale(1,1);
   transition-delay:0.3s;
}
*/