/* -----------------------------------------------------------------------------
BASE - base adjustments to normalizer.css defaults
----------------------------------------------------------------------------- */
html {
  background: #fff;
  color: #222;
  cursor: auto;
  font-family: 'dejavu sans', 'bitstream vera sans', 'helvetica neue', 'helvetica', 'droid sans', 'segoe ui', sans-serif;
}

h1 {
  font-size: 2em;;
  font-weight: lighter;
  color: #000;
  margin: 0 0 .25em 0;
  }
  
h2 {
  font-size: 1.35em;
  margin-bottom: .5em;
  font-weight: normal;
  color: #444;
  margin: 1.5em 0 .25em 0;
  clear: both;
}

h3,h4,h5,h6 {
  font-style: italic;
  font-size: 1.125em;
  font-weight: normal;
  color: #444;
  margin: 1.5em 0 .25em 0;
  clear: both;
}

h2 + h3, h3 + h4 {
  margin-top: 0.5em;
}

p {
  margin: 0 0 0.75em 0;
  line-height: 1.5;
}

blockquote {
  line-height: 1.5;
}

ul, ol, li {
  padding: 0;
  margin: 0;
  list-style-type: none;
  line-height: 1.5;
}

img {
  width: 100%; /* Add !important if needed. */
  height: auto;    /* Add !important if needed. */
  margin-bottom: 0.5em;
}

a {
	color:#00a;
	text-decoration:none;
}

a:visited {
	color:#00a;
	text-decoration:none;
}

a:hover {
	color:#00f;
}

/* pushes the link text down as its clicked to give it a tactile feel */
a:active {
  color: #0ff;
  position: relative;
  top: 1px;
  left: 2px;
}

a:hover {
	color:#00f;
}

a:visited:hover {
	color:#00f;
	text-decoration: none;
}

/* -----------------------------------------------------------------------------
BASIC CLASSES FOR COMMON CASES
----------------------------------------------------------------------------- */
.active { color: #222; }

.item { font-size: 0.875em; margin-bottom: 0; }
.item-description {
  color: #222;
  font-size: 0.75em;
  margin-bottom: 2em;
}

.grid li {
  display: inline-block;
  width: 23%;
  margin: 0 2.5% 0.75em 0;
  vertical-align: top;
}

.grid a:nth-of-type(4n) li {
     margin-right: 0;  
}
.grid img { 
  min-width: 150px;
  max-width: 200px; 
}

.endorsement { margin-top: 1.25em; }

.attribution {
  font-size: 0.875em;
  text-align: right;
  margin-top: 0.5em;
  margin-bottom: 2em;
}

.responsive-wrapper {
  float: left;
  padding: 0 3% 3% 0;
  margin: 0;
}

.caption { font-size: 0.75em; line-height: 1.2em; }
.caption ul { margin-top: 0.5em; }
.caption li { margin-bottom: 0.25em; }
.caption li:first-child { margin-bottom: 0.75em; }

#context-menu, #context-menu-placeholder {
  font-size: 0.875em;
  margin-top: 0;
  margin-bottom: 2em;
  text-align: right;
}
#context-menu a { 
  display: inline-block;
  vertical-align: top;
  padding-right: 3%;
  line-height: 1em;
}

#context-menu li { 
  display: inline-block;
  vertical-align: top;
  line-height: 1em;
}

#context-menu a:first-child { padding-left: 0%;}
#context-menu a:last-child { padding-right: 0%; }

/* -----------------------------------------------------------------------------
OVERALL SITE STRUCTURE
----------------------------------------------------------------------------- */
#site-container { /* contains "page" and separates it from background (viewport) */
  margin-left: 5%;
  margin-right: 5%;
  max-width: 1280px;
}

#site-body { /* contains primary content, related information and local navigation */ 
  width: 100%;  
  clear: both;
	overflow: hidden;
	padding: 5em 0 5em 0;
}

#site-footer {
  width: 100%;
  border-top: 1px solid #ccc;
  padding-top: 1em;
  clear: both;
}

/* Site Header Items
--------------------------------------------------------------------------- */
#banner {
  overflow: hidden;
  width: 100%;
}

#ohp-logo { 
  display: block; /* overrides display none for images site for small screens */
  float: right;
  width: 300px;
}

#site-menu {
  font-size: 0.875em;
  float: left;
  width: 100%;
  vertical-align: text-bottom;
  border-top: 3px double #ccc;
}

#site-menu li {
  display: inline-block;
  padding: 0.75em 1.5%;
 }

/*  Site Footer Items
--------------------------------------------------------------------------- */
#site-footer p {
  text-align: center;
  font-size: 0.875em;
  margin-bottom: 0.25em;
}

#site-footer img { 
  margin-top: 0.75em; 
  width: 67px;
}

/* -----------------------------------------------------------------------------
HOME PAGE
----------------------------------------------------------------------------- */
/* Basic Layout
--------------------------------------------------------------------------- */
#home-main { /* contains primary content */
  display: inline-block;
  vertical-align: top; 
  padding-left: 3%;
  padding-right: 3%;
  width: 60%;
}

#home-left {
  display: inline-block;
  vertical-align: text-top;
  width: 16%;
}

#home-right {
  display: inline-block;
  vertical-align: text-top;
  width: 13%;
  float: right;
  clear: both;
  text-align: right;
}

.announcement-container {
  display: inline-block;
  clear: both;
  margin-top: 1.5em;
  padding-top: 1em;
  border-top: 1px solid #ccc;
}
.announcement-container:first-child {
  margin-top: 0;
  padding-top: 0;
  border: none;
}

.announcement-body {
  display: inline-block;
  clear: both;
  margin-top: 1em;
}
.announcement-body a {
  display: block;
  float: left;
  margin: 0 3% 3% 0;
  width: 30%;
}
.announcement-body img {
  max-width: 200px;
  min-width: 150px;
}
.announcement-body h2 { margin-top: 0.5em; clear: none; }
.announcement-body:first-child { margin-top: 0; }

.publication-date {
  color:#888;
  font-size: 0.875em;
  margin-bottom: 2em;
  margin-left: 0.5em;
}

.read-more { margin-top: 0.5em; }

#home-main #context-menu {
  text-align: left;
}


/* Home Asides
--------------------------------------------------------------------------- */
#home-left h3, #home-right h3 {
  margin-top: 0.25em;
  margin-bottom: 1.5em;
  color:#555;
}

#editorial-board .item-description {
  margin-top: 0.1em;
  margin-left: 0.5em;
  margin-bottom: 1.25em;
  font-style: italic;
}

#editorial-board.grid li {
  width: 22%;
}

#forthcoming-titles img{
  min-width: 100px; 
  max-width: 200px;  
  }

/* -----------------------------------------------------------------------------
BASIC PAGES
----------------------------------------------------------------------------- */
#group-navigation {
  width: 24%;
  float: left;
  margin: 0 5% 0 0;
  padding: 0;
}

#main { /* contains primary content */
  width: 70%;
  float: right;
  margin-top: 0;
  margin-left: auto;
  margin-bottom: 0.75em;
  margin-right: 0;
}

/* Basic Navigation
--------------------------------------------------------------------------- */
.signpost { /* indicates which section of the site the reader is */
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 1em;
    color: #666;
}

#group-menu { border-bottom: 1px solid #ddd; }
#group-menu li { /* group navigation items */
  display: inline-block;
  padding: 0.5em 5% 0.5em 5%;
  background-color: #fafafa;
  border: 1px solid #ddd;
  position: relative;
  top: 2px;
}
#group-menu .active {
  background-color: #fff;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: none;
  border-left: 1px solid #ccc;
}

#local-menu li { /* local navigation items */
  padding: 0.75em 2% 0.75em 2%;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
}
#local-menu li:first-child { border-top: none; }
#local-menu .active { border-left: 2px solid #ccc; color: #000; }
#local-menu .item-description { margin: 0.1em; }
  
/* Basic Main
--------------------------------------------------------------------------- */
/* header */
#main-header { margin: 0 0 3em 0; }

.creators {
  color: #444;
  font-size: 1.125em;
  margin-bottom: 0;
}
.creators i { font-size: .75em; }

.partner-block { width: 100%; padding-bottom: 2em; clear: both;}

.partner-logo {
  float: left;
  clear: both;
  width: 100px;
  height: auto;
  margin-right: 3%;
  padding-bottom: 2em;
}

/* -----------------------------------------------------------------------------
EMBELLISHMENTS: classes that can be used anywhere, purely for looks.
----------------------------------------------------------------------------- */
.shadow { box-shadow: 2px 2px 2px #bbb; }

.intext {
  margin-bottom: 0;
  width: 13px;
  height: 10px;
}

.space-above {
  margin-top: 1.5em;
}

.rule-above {
  margin-top: 3em;
  padding-top: 0.5em;
  border-top: 1px solid #ccc;
  width: 93.5%;
}

.no-bullets {
 margin-top: 1em;
 margin-bottom: 1em;
}

.no-bullets li {
  margin-left: 2em;
  margin-bottom: 0.75em;
}

.bullets {
 margin-top: 1em;
 margin-bottom: 1em;
}

.bullets li {
  list-style-type: disc;
  margin-left: 2em;
  margin-bottom: 0.5em;
}