﻿body {
    background: #ededed;
}

h1 {
	font-size: 28px;
	color: 373e4d;
	text-align: left;
	margin: 20px;
}
h2 {
	font-size: 18px;
	font-weight: normal;
	font-style: underline;
	color: 373e4d;
	text-align: left;
	margin: 20px;
}

p{
	margin: 20px;
	text-align: left;
}

.lightbox {
  /** Hide the lightbox */
  display: none;

  /** Apply basic lightbox styling */
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: black;
  background: rgba(0,0,0,0.8);
}

.lightbox img {
  /** Pad the lightbox image */
  max-width: 90%;
  max-height: 80%;
  margin-top: 2%;
}

.lightbox:target {
  /** Show lightbox when it is target */
  display: block;

  /** Remove default browser outline style */
  outline: none;
}

div { 
    background-size: cover; 
    position: relative; 
    font-family: "Roboto"; 
    text-align: center;
	border-radius: 2px; 
}

.header { 
    height: 43px;
    width: 100%; 
    top: 0px;
    left: 0px;
    position: fixed;
    background-color: #3b599a;
    text-align: left;
    z-index: 1;
}

.cover {
	top: 17px;
    height: 315px;
    width: 851px;
    padding: 0;
    margin: 0 auto;
    position: relative;
}
.tab-container {
    height: 43px;
    width: 851px;
	vertical-align: top;
	background-color: #fff;
    margin: 0 auto;
    position: relative;
	border: 1px solid #d3d6db;
}

.main-container {
	width: 851px;
	margin: 0 auto;
	position: relative;
}

.left{
	margin: 10px 0 0 0;
	float:left;
	max-width: 34%;
	background: white;
	border: 1px solid #d3d6db;
}

.center {
	margin: 10px 0 0 0;
	background: #f5f8fd;
	border: 1px solid #d3d6db;
	max-height: 100%;
}
.right {
	margin: 10px 0 0 0;
	float:right;
	max-width: 66%;
	background: white;
	border: 1px solid #d3d6db; 
}
.footer { 
    height: 50px; 
    padding: 50px 0 0 0; 
    width: 100%; 
    margin: auto 0; 
    font-size: 50% 
} 

.title { 
    height: 180px; 
    width: 180px; 
    background-color:#000cab; 
    color:white; 
    padding: 10px; 
} 

.picture1:hover span.text-content { 
    opacity: 1; 
} 

.picture2:hover span.text-content { 
    opacity: 1; 
} 

.text { 
    height: 180px; 
    width: 180px; 
    background-color:#cfc102; 
    color: white; 
    padding: 10px; 
} 

img { 
    max-width: 100%;
    max-heght: 100%;
    background-size:cover;
    vertical-align: left;
	float: left;
    margin: 0;
    padding: 0;
}

#tabs {
	margin: 0;
	padding: 10px
}

#tabs li { 
	display:inline;
	border-right: .1em solid #7f7f7f;
}
#tabs li a {
	font: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-weight: bold;
	text-decoration: none;
	padding: 0.25em 1em;
	color: #3b599a;
}
#index #tabs li#about a,
#mech #tabs li#mechanism a,
#nmr #tabs li#hnmr a,
#experimental #tabs li#experimental a,
#references #tabs li#references a,
#leadingquestion #tabs li#leadingquestion a,
#aboutus #tabs li#aboutus a{
	color: #373e4d;
}

.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}