/* General */

html, body {
	height: 101%;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Optima", "Lucida Grande", "Bitstream Vera Sans", "Verdana";
    font-size: 11pt;
    color: #333;
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.99, rgb(230,230,230)),                
        color-stop(0.8, rgb(255,255,255))

    );
    background-color: white;
    background-repeat: no-repeat;
    background-image: -moz-linear-gradient(
        center bottom,
        rgb(255,255,255) 80%,
        rgb(230,230,230) 99%
    );
}

h1 {
    margin-top: 0px;
    font-size: 16pt;
    color: #000;
}
  
a  {
	  color: #03c;
    text-decoration: none;
    background-color: transparent;    
    background-image: none;
    -webkit-transition:background-image 0.25s ease-out;
    -moz-transition:background-image 0.25s ease-out;
    -o-transition:background-image 0.25s ease-out;  
}

a:not([class*=github]):hover {
	z-index: 2;
  padding: 1px 3px;
  margin: 0 -3px 0 -3px;  
	border: 1px solid rgba(0.3,0.3,0.3,0.5);
  color: white;
  text-decoration: none;
  
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	

	background-image: -webkit-gradient(linear, 
	                             left top, 
	                             left bottom, 
	                             from(#0800E4), 
	                             to(#03c));
	background-image: -moz-linear-gradient(
      center bottom,
      #0800E4 80%,
      #03c 99%
  );

  -webkit-transition:background-image 0.25s ease-in;
  -moz-transition:background-image 0.25s ease-in;
  -o-transition:background-image 0.25s ease-in;  
  transition:background-image 0.25s ease-in;
	-webkit-box-shadow: rgba(0,0,0,1.0) 0px 0px 2px, rgba(255,255,255,0.15) 0px 1px 1px inset;
	-moz-box-shadow: rgba(0,0,0,1.0) 0px 0px 2px, rgba(255,255,255,0.15) 0px 1px 1px inset;
	-o-box-shadow: rgba(0,0,0,1.0) 0px 0px 2px, rgba(255,255,255,0.15) 0px 1px 1px inset;
	box-shadow: rgba(0,0,0,1.0) 0px 0px 2px, rgba(255,255,255,0.15) 0px    1px 1px inset;  
}

dl dt {
	font-weight: bold;
  float: left;
  text-align: center;
}

dl dd {
  padding-left: 14px;
	font-weight: normal;
	margin-left: 7pt;
	margin-bottom: 4pt;
	margin-top: 1pt;	
}

dl.pgp dd, dl.smime dd {
  clear: left;

}

/* Layout */

#ribbon {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 128px;
    height: 128px;    
    background-image: url(/images/ribbon.png);
    background-repeat: no-repeat;
}

.wrap {

  width: 800px;
  margin: 2.4em auto 0 auto;
}

.wrap .sidebar {
  float: right;
  width: 130px;

}


.wrap .content {
  width: 650px; 
  float: left;

}

footer {
  clear: both;
  text-align: center;
  font-size: 9pt;
  padding-top: 1.5em;
  padding-bottom: 1.0em;  
  color: #888;
}

/* header */

header h1, header h2 {
  margin: 0;
}

header h2 {
  color: #888;
  margin-bottom: .5em;
  font-weight: normal;
  font-size: 14pt;
}

header h1 a {
    color: #333;
}

/* content */

section.content strong {
  font-weight: bold;
}

section.content {
  line-height: 135%;
  min-height: 340px;
}

section.content img {
  margin-right: 1em;
}

.publications dt.title {
  margin-top: 1em;
  padding-top: 1em;
  border-top: 1px solid #ccc;
}

section.content img#photo {
   margin-right: 1em; 
   margin-bottom: 1em;
   border-radius: .5em;
   width: 161px;
}

/* Projects */

ul.projects {
  list-style: none inside;
  padding-left: 0;
}

.projects li {
  border: 1px solid #ccc;
  border-radius: 8px;  
  background-color: #E6E6E6;
  font-weight: bold;
  font-size: 12pt;
  float: left;
  width: 40%;
  padding: 6px;
  text-align: center;
}


.projects li {
  height: 210px;
  float: left;
  margin-right: 2em;  
  margin-bottom: 2em;    
}

.projects li h3 {
  margin-bottom: 2px;
  margin-top: 4px;  
}

.projects li img {
  width: 230px;
  margin-top: 1em;
  border: 1px solid transparent;  
}

.projects li img:hover {
  border: 1px solid #ccc;
}

.projects li a:hover {
  background-color: transparent;
}