/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 2.8.2r1
*/
/**
* YUI Fonts
* @module fonts
* @namespace yui-
* @requires
*/
/**
* Percents could work for IE, but for backCompat purposes, we are using keywords.
* x-small is for IE6/7 quirks mode.
*/
body {
font:13px/1.231 arial,helvetica,clean,sans-serif;
/* for IE6/7 */
*font-size:small;
/* for IE Quirks Mode */
*font:x-small;
}
/**
* Nudge down to get to 13px equivalent for these form elements
*/
select,
input,
button,
textarea,
button {
font:99% arial,helvetica,clean,sans-serif;
}
/**
* To help tables remember to inherit
*/
table {
font-size:inherit;
font:100%;
}
/**
* Bump up IE to get to 13px equivalent for these fixed-width elements
*/
pre,
code,
kbd,
samp,
tt {
font-family:monospace;
*font-size:108%;
line-height:100%;
}/*
COLORS
This colors all come from the Miller Center Style Guide, 06/13/2011 revision.
#345482 dusky, purpley blue
#00335d dark blue
#628ab4 light blue
#c96f27 orange
#edf2f7 ice white (blueish)
#fff white
#e5d3af beige
#460669 dark purple
#97469c light purple
#677a21 dark green
#a1a825 light green
Serif Font Stack
"Minion Pro", "Hoefler Text", "Baskerville old face", Garamond, "Times New Roman", serif;
Sans Serif Font Stack
Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
8px border radius
PIE.HTC
The purpose of including this as a behavior for some CSS rules is to allow IE 7–8 to render
shadows, gradients, RGBA, and rounded corners. Note that this file has to be on the same domain as
the HTML page (as opposed to the CSS), meaning that it cannot be at staticmc.org, but instead must
live at millercenter.org. Read more at .
*/
/* Links */
a {
color: #174a7c;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Small caps */
span.sc {
font-size: 90%;
text-transform: uppercase;
}
html, body {
height: 100%;
}
body {
color: #333;
font-family: "Minion Pro", "Hoefler Text", "Baskerville old face", Garamond, "Times New Roman", serif;
font-size: 16px;
line-height: 25px;
}
body p {
margin-bottom: 0;
}
body div#staffbio p {
margin-bottom: 25px;
}
sup {
height: 0;
line-height: 1;
vertical-align: baseline;
position: relative;
bottom: 1ex;
font-size: .8em;
}
/* Body header sizes */
article {
min-height: 300px;
}
article h1, article h2, article h3, article h4, article h5, article h6 {
color: #000;
font-family: "Minion Pro", "Hoefler Text", "Baskerville old face", Garamond, "Times New Roman", serif;
padding: 0;
}
article h1 {
font-size: 18px;
margin: 1px 0 6px 0;
text-rendering: optimizelegibility;
}
article h2 {
font-size: 16px;
margin-top: 26px;
margin-bottom: 9px;
}
article h1 + h2 {
margin-top: 0;
}
article h3 {
font-size: 16px;
margin-top: 6px;
margin-bottom: 3px;
}
article h4 {
font-size: 16px;
margin-top: 6px;
margin-bottom: 3px;
color: #333;
}
article ul, article ol {
padding-left: 15px;
margin: 25px 0;
}
.tempScrollContent {
margin-top:0px;
}
article ul {
list-style-type: disc;
}
article ol {
list-style-type: decimal;
padding-left: 25px;
}
article li {
line-height: 25px;
}
article ul ul {
margin-top: 0;
}
/* We need this container DIV in order to constrain the width of and center all elements. */
#container {
width: 974px;
min-height: 500px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
header {
position: relative;
height: 200px;
background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/template/headers/1.jpg');
background-repeat: no-repeat;
}
/* Our logo guidelines require at least 7 pixels of margin. */
header > h1 {
position: absolute;
top: 7px;
left: 7px;
width: 125px;
height: 137px;
background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/template/logo-white.png');
background-repeat: no-repeat;
}
header > h1 a {
display: block;
width: 125px;
height: 137px;
text-indent: -9999px;
}
header h1#homepage-h1 {height: 137px; width: 125px;}
header h1#homepage-h1 a#home-page-h1-a {height: 137px; width: 125px;}
header:hover .fade {
transition-property: opacity;
transition-duration: .5;
-webkit-transition-property: opacity;
-webkit-transition-duration: .5s;
-moz-transition-property: opacity;
-moz-transition-duration: .5s;
opacity: 1;
}
.fade {
opacity: .7; /*This began on .4, was upped to .7 on 4/12/2012 */
-webkit-transition-property: opacity;
-webkit-transition-duration: .5s;
-moz-transition-property: opacity;
-moz-transition-duration: .5s;
transition-property: opacity;
transition-duration: .5;
}
#search {
position: absolute;
right: 5px;
bottom: 25px;
}
#social {
position: absolute;
left: 5px;
bottom: 20px;
}
#social ul {
list-style: none;
margin: 0;
padding: 0;
}
#social li {
float: left;
margin: 0;
padding: 0;
margin-right: 5px;
}
#social li:last-child {
width: 44px !important;
}
#social a {
display: inline-block;
width: 16px;
height: 16px;
background-repeat: no-repeat;
}
#facebook {
background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/template/sprites.png');
background-position: -62px 0;
}
#twitter {
background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/template/sprites.png');
background-position: -14px 0;
}
#flickr {
background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/template/sprites.png');
background-position: -46px 0;
}
#youtube {
background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/template/sprites.png');
background-position: -30px 0;
}
#social span {
display: none;
}
#photo-description {
position: absolute;
right: 5px;
top: 5px;
width: 15px;
height: 15px;
background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/template/sprites.png');
background-position: 0 0;
background-repeat: no-repeat;
}
header nav#nav-full {
position: absolute;
width: 99.5%; /* This is to get the curve to appear on the right side of the nav bar */
bottom: 0;
font-family: "Verdana", "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
font-size: 14px;
background-color: #345482;
color: #edf2f7;
padding-left: 5px;
/*-webkit-border-radius: 0 0 8px 8px;
-moz-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;*/
behavior: url('http://d1ztsg4rmigwf6.cloudfront.net/javascript/PIE.htc');
}
header nav ul {
list-style: none;
display: inline;
}
header nav li {
float: left;
padding: 5px;
}
article {
position: relative;
clear: both;
margin-top: 16px;
width: 100%;
float: left;
}
article p + p,
article figure + p {
margin-top: 1em;
}
article a.more, article a.return {
text-transform: uppercase;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* The sidebar. */
aside {
width: 30%;
min-width: 250px;
float: right;
margin: 25px 0 25px 15px;
background-color: #edf2f7;
padding: 15px 20px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
font-size: 14px;
line-height: 25px;
/*min-height: 375px;*/
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
aside h1 {
font-size: 18px;
}
aside h1:not(:first-child)
{
margin-top: 25px;
}
aside h2 {
font-size: 16px;
margin-bottom: 0;
}
aside h3 {
font-size: 14px;
margin-bottom: 0;
}
/* Display sidebar paragraphs as indented. */
aside p+p {
margin-top: 0;
}
/*We'll want some (probably short ones) to be centered*/
aside.center {
text-align:center;
}
footer {
clear: both;
margin-top: 25px;
font-size: 13px;
line-height: 18px;
clear: both;
padding: 10px 20px;
text-align: center;
background-color: #345482;
color: #fff;
/*-webkit-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;*/
behavior: url('http://d1ztsg4rmigwf6.cloudfront.net/javascript/PIE.htc');
}
footer abbr[title] {
border: none;
cursor: text;
}
footer .social-glyphs img {margin-right: 15px;}
/* Images with captions. */
#innercontent figure {
margin: 25px;
}
#innercontent figure figcaption {
line-height: 25px;
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
font-size: 14px;
margin: 12px 0 13px 0;
}
/* Tip pop-ups */
.tip-wrap {
z-index:3;
}
.tip {
/* We specify the background twice for browsers that don't understand RGBA. */
background: rgb(237,242,247);
background: rgba(237,242,247,0.8);
color: #000;
width: 200px;
height: auto;
padding: 10px;
font-size: 14px;
text-align: center;
line-height: 16px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
behavior: url('http://d1ztsg4rmigwf6.cloudfront.net/javascript/PIE.htc');
margin-top: 3px;
}
.tip-top {
display: none;
}
#innercontent h1 + h2 {margin-left: 25px;} /*indent h1 + h2 */
/* Clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
/*
SPECIFIC STYLING PORTED OVER FROM THE OLD CSS
Realistically, this should all be broken out into another file that consists of microformatting.
*/
blockquote {
margin: 0 1em;
padding-left: .5em;
border-left: 4px solid #eee;
}
#innercontent p.col_person_cap {
font-size: 15px;
margin-top: -5px;
margin-bottom: 4px;
}
#innercontent span.list {
margin-top: 10px;
margin-bottom: 10px;
}
#innercontent span.list p.hidden
{
margin-top: 10px;
margin-bottom: 10px;
}
#innercontent .leftCell h5 {
text-align: center;
margin: 0;
}
#innercontent p.annotation {
text-indent: 25px;
margin-top: -10px;
margin-bottom: 4px;
}
#innercontent .leftimage {
float: left;
padding: 3px;
margin-left: 8px;
margin-right: 8px;
}
#innercontent .rightimage {
float: right;
padding: 3px;
margin-left: 8px;
margin-right: 8px;
}
#innercontent .leftquotation {
float: left;
margin-left: 8px;
margin-right: 8px;
}
#innercontent .rightquotation {
float: right;
margin-left: 8px;
margin-right: 8px;
}
#innercontent .centerquotation {
float: right;
margin-left: 228px;
margin-right: 8px;
}
#innercontent .captionedimage {
padding: 3px;
font-size: .9em;
color: #222;
text-align: center;
margin: 8px;
}
#innercontent .captionedimage img {
margin-bottom: 3px;
}
#innercontent .rightcaptionedimage {
float: right;
padding: 3px;
font-size: .9em;
color: #222;
text-align: center;
margin: 8px;
}
#innercontent .rightcaptionedimage img {
margin-bottom: 3px;
}
#innercontent .leftcaptionedimage {
float: left;
padding: 3px;
font-size: .9em;
color: #222;
text-align: center;
margin: 8px;
}
#innercontent .leftcaptionedimage img {
margin-bottom: 3px;
}
#innercontent .leftcaptionedimagefixed {
float: left;
padding: 3px;
font-size: .9em;
color: #222;
text-align: center;
margin: 8px;
width: 150px;
}
#innercontent .leftcaptionedimagefixed img {
margin-bottom: 3px;
}
#innercontent .coloredBox {
background-color: #70a0a0;
border: thin solid #255050;
}
#innercontent .contentdivider {
height: 1px;
width: 96%;
background-color: #ccc;
}
/* A class to indent the paragraphs within a container. */
.indent p {
text-indent: 25px;
}
.indent p + p {
margin-top: 0;
}
/*A class to indent a container */
.block-indent {
margin-left: 25px;}
#innercontent .person {
clear: both;
border-bottom: 1px solid black;
}
/* A pullquote, with optional attribution. */
dl.pullquote {
/*width: 95%;*/
border-top: 5px solid #edf2f7;
border-bottom: 5px solid #edf2f7;
/*margin: 10px;*/
font-size: 1.15em;
padding: 5%;
color: #666;
}
dl.pullquote.right {
float: right;
}
dl.pullquote.left {
float: left;
}
dl.pullquote dt {
font-style: italic;
}
dl.pullquote dd {
text-align: right;
margin-top: 10px;
}
/* The Facebook "recommend" button. */
div#facebook-recommend {
float: right;
}
/* Section menus, for the sidebar of sections deep enough that they require their own menu. These
should always be nav elements of the class "section menu," but the first few that were created
were mistakenly done as ULs. */
nav.section-menu > ul {
list-style-type: none;
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
font-size: 16px;
width: 225px;
border: 1px solid #00335d;
padding: 0;
margin: 24px 0 25px 23px;
line-height: 24px;
color: #00335d;
border-radius: 8px;
background-color: #edf2f7;
float: right;
}
/* The A tags are displayed as blocks to make the entire LI clickable. We provide the same style
to span tags, to allow non-clickable menu items, such as section headers. */
nav.section-menu > ul a, nav.section-menu > ul span {
text-decoration: none;
color: #00335d;
display: block;
padding: 0 5px 0 0;
}
/* We only style hovers for the A tags, and not the LIs, because we want linked items
to be the basic design units of this. */
nav.section-menu > ul a:hover {
background-color: #628ab4;
color: #edf2f7;
}
nav.section-menu > ul li {
border-bottom: 1px solid #00335d;
}
nav.section-menu > ul li ul li{
border-bottom: 1px solid #fff;
}
/* When a menu item has child elements, put a border above those child elements (that
is, a bottom border on the parent menu item). */
nav.section-menu > ul > li > a + ul, nav.section-menu > ul > li > span + ul {
border-top: 1px solid #fff;
}
/* Same as above, for children of child elements. (3rd tier) */
nav.section-menu > ul > li > a + ul > li > a + ul,
nav.section-menu > ul > li > a + ul > li> span + ul,
nav.section-menu > ul > li > span + ul > li > span + ul,
nav.section-menu > ul > li > span + ul > li > a + ul {
border-top: 1px solid #fff;
}
nav.section-menu > ul li:last-child {
border-bottom: 0;
}
nav.section-menu > ul > li > a, nav.section-menu > ul > li > span {
padding-left: 12px;
}
/* Every child UL should be just as wide as the parent -- we left pad the A tags in the LIs,
rather than indent ULs or LIs. */
nav.section-menu > ul ul {
width: 225px;
list-style-type: none;
padding: 0;
margin: 0;
}
/* Indent all child UL links by 20 pixels. */
nav.section-menu > ul ul a, nav.section-menu > ul ul span {
padding-left: 30px; font-size: 14px;
}
/* Indent all children of child UL links by 20 more pixels. (3rd tier) */
nav.section-menu > ul ul ul a, nav.section-menu > ul ul ul span {
padding-left: 50px; font-size: 14px;
}
/* Hide the fact that the menu item of the current page has a link, while simultaneously
calling attention to it by making it black.*/
nav.section-menu > ul li.current > a {
text-decoration: none;
color: #000;
cursor: default;
}
/* Create an optional title for the section menu */
nav.section-menu > ul li.title{
font-weight:bold;
background-color: #fff;
border-radius: 8px;
}
/*The "mini-menu" is usually used for in-page links--anchors leading to further down in the page.*/
ul.mini-menu{
text-align:center;
list-style-type:none;
font-weight:600;
width: 700px;
}
/* Slideshow ("News" on home page, functions as "headlines" or "teasers" on others) */
#navigation-slideshow {
width: 100%;
min-width:250px;
max-width: 456px;
height: 450px;
margin: -20px auto 0 auto;
overflow: hidden;
position: relative;
}
#navigation-slideshow figure img {max-width: 100%; height: auto;}
/* Small slideshow: containter-small and slideshow-small constrain the sizing in order to be used as a decorative element (no captions). As of this writing, it is in use on the Fellowship pages. */
#slideshowcontainer.container-small {
width: 275px;
height: 200px;
float: right;
margin: 10;
}
#navigation-slideshow.slideshow-small {
width: 275px;
height: 200px;
}
/*Items below are shared between both regular and "small" slideshows */
#navigation-slideshow figure {
position: absolute;
left: 0;
right: 0;
top: 16px;
margin:0;
}
#navigation-slideshow figure figcaption {
margin: 0;
clear: left;
}
#navigation-slideshow .selector {
position: absolute;
top: -4px;
right: 2px;
z-index: 2;
color: #000;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
cursor: default;
height: 24px;
}
#navigation-slideshow .selector li {
display: inline-block;
margin: 0;
}
#navigation-slideshow .selector li + li {
margin-left: 5px;
}
#navigation-slideshow .selector a {
display: block;
width: 10px;
height: 10px;
/* We specify the background twice for browsers that don't understand RGBA. */
background: rgb(255,255,255);
background: rgba(255,255,255,0.5);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
behavior: url('http://d1ztsg4rmigwf6.cloudfront.net/javascript/PIE.htc');
}
#navigation-slideshow .selector a:hover, #navigation-slideshow .selector a.current {
background: #c96f27;
}
.page-top-nav {
line-height:10px;
margin-left:25px;
text-transform: uppercase;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
position: relative;
top:-10px;}
a.when {
font-size: 10px;
line-height: 15px;
text-transform: uppercase;
color: #000;
font-family: Verdana, Geneva, sans-serif;
}
a.watchlive {
color: #ff0000 !important;
}
/* Transcripts */
dl.transcript {
margin-top: 25px;
}
dl.transcript dt + dd {
margin-bottom: 25px;
}
dl.transcript dt {
float: left;
font-weight: bold;
text-align: right;
width: 5em;
}
dl.transcript dd {
hyphens: auto;
margin-left: 5.5em;
text-align: justified;
-webkit-hyphens: auto;
width: 500px;
}
/* Show pilcrows to act as permalinks. */
dl.transcript dd .permalink {
display: none;
}
/* But only display them when the DD is hovered over. */
dl.transcript dd:hover .permalink {
font-family: Arial, Helvetica;
}
dl.transcript dd:hover .permalink:hover {
text-decoration: none;
}
dl.transcript q:before {
content: "“";
}
dl.transcript q:after {
content: "”";
}
/* Nested quotes. */
dl.transcript q q:before {
content: "‘";
}
dl.transcript q q:after {
content: "’";
}
/* Quotes nested more deeply still. Yes, we need these.. */
dl.transcript q q q:before {
content: "“";
}
dl.transcript q q q:after {
content: "”";
}
/* Scripps home page */
#scripps-photos img {float:right; padding: 12px 5px 13px 5px;}
#scripps-photos {width: 370px; float:right; margin: 12px 5px 13px 5px;}
/*Signature element on key-events pages */
div.signature {background-repeat:no-repeat; position: absolute; top: 10px; right: -300px;height: 75px; width: 100%;}
div#wilson.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-wilson.png');}
div#washington.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-washington.png');}
div#vanburen.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-vanburen.png');}
div#tyler.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-tyler.png');}
div#truman.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-truman.png');}
div#taylor.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-taylor.png');}
div#taft.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-taft.png');}
div#roosevelt.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-roosevelt.png');}
div#reagan.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-reagan.png');}
div#polk.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-polk.png');}
div#pierce.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-pierce.png');}
div#obama.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-obama.png');}
div#nixon.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-nixon.png');}
div#monroe.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-monroe.png');}
div#mckinley.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-mckinley.png');}
div#madison.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-madison.png');}
div#lincoln.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-lincoln.png');}
div#lbjohnson.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-lbjohnson.png');}
div#kennedy.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-kennedy.png');}
div#jqadams.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-jqadams.png');}
div#hoover.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-hoover.png');}
div#hayes.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-hayes.png');}
div#harrison.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-harrison.png');}
div#harding.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-harding.png');}
div#gwbush.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-gwbush.png');}
div#grant.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-grant.png');}
div#ford.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-ford.png');}
div#fillmore.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-fillmore.png');}
div#fdroosevelt.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-fdroosevelt.png');}
div#eisenhower.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-eisenhower.png');}
div#coolidge.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-coolidge.png');}
div#clinton.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-clinton.png');}
div#cleveland.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-cleveland.png');}
div#carter.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-carter.png');}
div#bharrison.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-bharrison.png');}
div#arthur.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-arthur.png');}
div#johnson.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-johnson.png');}
div#jefferson.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-jefferson.png');}
div#jackson.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-jackson.png');}
div#garfield.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-garfield.png');}
div#bush.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-bush.png');}
div#buchanan.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-buchanan.png');}
div#adams.signature {background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/academic/americanpresident/template/sig-adams.png');}
/*On Governing Council list page, styling the contact info visible only to logged-in members. */
aside.gc-fb-contact {min-height: 25px; margin-top: 0; width: 400px; text-align: left; padding-left: 25px;}
aside.gc-fb-contact .note {color: #666; font-size: 12px; line-height: 16px;}
.top-link {display: inline; position: relative; top: -25px; left: 920px;}
/*Staff page styling--trying to find a better way to designate child categories. */
.department {}
.subdepartment {margin-top: 25px;}
/*MEDIA QUERIES for alternate header */
@media (max-width: 820px) and (min-width: 321px),
(max-width: 320px),
(-webkit-min-device-pixel-ratio: 1.1) and (max-width: 1100px) {
header {height: 30px; background-image: none !important; background: #edf2f7; margin-bottom: 20px;}
#search {display:none;}
#photo-description {display:none;}
header > h1 {
background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/template/logo.svg');
height: 50px;
width: 50px;}
header > h1,
header > h1 a {
width: 50px;
height: 50px;
}
/*The home page logo remains bigger, even after mobile kicks in.*/
header h1#homepage-h1,
header h1#homepage-h1 a#home-page-h1-a {
width: 75px;
height: 75px;
}
}
/* About page , general styles for mobile */
aside.farrightcontainer {min-height: 200px; width: 190px;}
figure.rightcontainer {width: 275px; padding: 0; float:right;}
nav#about-nav ul {float:right; clear:right;}
@media (max-width: 820px) and (min-width: 321px),
(max-width: 320px),
(-webkit-min-device-pixel-ratio: 1.1) and (max-width: 1100px) {
aside.farrightcontainer, figure.rightcontainer {/*width: 90%; clear:both;*/ width: auto; clear: none;}
nav#about-nav ul {float:none; /*clear:both;*/}
}
/* On any small screen, we want to go ahead and make the aside full width. */
@media (max-width: 600px) {
aside {width: 90%;}
}
/* Mega Menus */
/* This container is necessary as an intermediary between nav and #menu. Nav must be positioned
absolutely, while #menu needs to be within a relatively positioned container in order to
position it absolutely. We use this container to make that possible.*/
#menu-container {
position: relative;
}
#menu {
display: table;
margin: 0 auto;
}
#menu > li {
height: 14px;
line-height: 14px;
/*text-transform: uppercase;*/
padding-left: 10px;
padding-right: 10px;
}
/*Below is a test that was run from 2/25/14-3/5/14, 5/26/15-7/8/15. Analytics show significant uptick in attn--something that would surely wear off. Save this for special campaign? - Amber. Reactivated for 10/2014 fundraising push, deactivated 1/8/2015. */
/*#menu > li.mega-contribute {background-color: #e7880c;}*/ /*Mega*/
/*#menu-small > li.mega-contribute {background: #e7880c;}*/ /*Mini*/
#menu > li + li {
margin-left: 1em;
}
#menu > li > a {
text-decoration: none;
color: #fff;
}
#menu > li:hover {
text-decoration: none;
background-color: #edf2f7;
color: #345482;
}
#menu > li:hover > a {
color: #345482;
}
/*Styling specific to the FY menu item */
ul#menu li.fy2017 {
font-family: Arial;
background-color: #0c2b48;
letter-spacing: 1px;
border-right: 2px solid #ff7d34;
border-left: 2px solid #ff7d34;}
#menu > li.fy2017:hover {
background-color: #fff;
color: #345482;
border-right: 2px solid #0c2b48;
border-left: 2px solid #0c2b48;
}
li a#mega-link-fy2017 .three {color: #ccc;}
li a#mega-link-fy2017 span {text-transform:uppercase; }
#menu div {
display: none;
}
#menu .hovering div {
display: block;
}
.mega-menu {
position: absolute;
top: 24px;
left: 4px;
min-height: 200px;
max-height: 400px;
width: 945px;
z-index: 100;
height: auto;
float: left;
padding: 5px;
overflow: hidden;
background: #edf2f7;
color: #000;
opacity: .95;
text-transform: none;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
line-height: 16px;
/*border-right: 1px solid #345482;
border-bottom: 1px solid #345482;
border-left: 1px solid #345482;
-webkit-border-radius: 0 0 8px 8px;
-moz-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;*/
-webkit-box-shadow: 0 3px 5px #999;
-moz-box-shadow: 0 3px 5px #999;
box-shadow: 0 3px 5px #999;
}
/* Our menu column definitions. */
.mega-menu .column {
float: left;
padding: 0 5px;
font-family: inherit;
min-height: 100%;
}
/* Each is a multiple of 135, minus 10 pixels for padding and 1 pixel for the border. */
.mega-menu .column.one {
width: 124px;
}
.mega-menu .column.two {
width: 259px;
}
.mega-menu .column.three {
width: 394px;
}
.mega-menu .column.four {
width: 529px;
}
.mega-menu .column.five {
width: 664px;
}
.mega-menu .column.six {
width: 799px;
}
.mega-menu .column.seven {
width: 934px;
}
.mega-menu .column + .column {
border-left: 1px solid #ccc;
}
.mega-menu h1 {
/* Determine how line-height affects one-line H1s */
font-size: 13px;
line-height: 14px;
margin-bottom: 2px;
}
.mega-menu h1:not(:first-child) {
clear: left;
padding-top: 8px;
}
.mega-menu h2 {
letter-spacing: 0;
padding-top: 7px;
clear: left;
text-transform: none;
font-size: 11px;
}
.mega-menu h1 a, .mega-menu h2 a {
color: #000;
}
.mega-menu h1 a:hover, .mega-menu h2 a:hover {
color: #345482;
}
.mega-menu ul li {
padding: 0;
}
.mega-menu li + li {
clear: left;
margin-top: 4px;
}
.mega-menu div.more {
float: right;
}
/* The compact form of unordered lists. */
.mega-menu .compact li {
display: inline;
margin: 0;
padding: 0;
clear: none;
float: none;
}
.mega-menu .compact li + li:before {
content: " • ";
}
.mega-menu .social-glyphs {text-align: center; margin-top: 15px;}
.mega-menu .social-glyphs img{margin-right: 15px;}
/* About Menu */
.mega-menu.about #building-front {
margin: 0 auto 8px auto;
}
.mega-menu.about img.video {
float: right;
margin: 5px;
}
.mega-menu.about .directions {
width: 127px;
height: 60px;
background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/template/menu/map-icon.png');
background-repeat: no-repeat;
}
.mega-menu.about .directions a {
display: block;
width: 155px;
height: 60px;
text-indent: -9999px;
}
.mega-menu.about #national-meeting-place {
display: block;
width: 124px;
height: 94px;
background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/template/menu/national-meeting-place.jpg');
background-repeat: no-repeat;
padding: 17px 0 0 42px;
}
.mega-menu.about #national-meeting-place img.play {
display: none;
}
.mega-menu.about #national-meeting-place:hover img.play {
display: block;
width: 40px;
height: 40px;
}
.about .social-glyphs {margin-top: 25px;}
/* Events Menu */
.mega-menu.events img {
float: left;
margin: 0 5px 5px 0;
}
.mega-menu.events ul.recent li + li, .mega-menu.events ul.upcoming li + li {
margin-top: 8px;
}
.mega-menu.events .when {
text-transform: uppercase;
color: #000;
font-size: 10px;
font-family: Verdana, Geneva, sans-serif;
}
.mega-menu.events li {width: 100%;}
/* Presidents Menu */
.mega-menu.presidents .list-all ul {
float: left;
width: 114px;
padding: 8px 8px 8px 0;
}
.mega-menu.presidents .list-all li {
clear: left;
}
.mega-menu.presidents .list-all ul + ul {
border-left: 1px solid #ccc;
padding: 8px;
}
.mega-menu #welcome-video {
display: block;
/*width: 124px;*/
height: 75px;
background-image: url('http://d1f0ngef7bih17.cloudfront.net/images/template/menu/living-presidents-2014.jpg');
background-repeat: no-repeat;
padding: 27px 0 0 105px;
}
.mega-menu.presidents #welcome-video img.play {
display: block;
width: 40px;
height: 40px;
}
/* Contribute Menu */
.mega-menu.contribute #give-now {
margin: 10px auto 0 auto;
}
li.mega-contribute li {padding-left: 20px; }
li.mega-contribute li#give-online {/*font-weight: bold;*/ border-bottom: 2px solid #df921f; }
li.mega-contribute li#give-online a {}
li.mega-contribute ul#give li#give-online {display: block; width: 100%;}
li.mega-contribute ul#give li#give-online:hover a {text-decoration: none; color: #fff;}
li.mega-contribute ul#give li#give-online:hover {background-color: #df921f;}
/* Programs + Reports */
.programs img {float:left; margin-right: 5px; margin-top: 5px;}
/*Custom styles for hcards*/
.vcard .org, .vcard .role {display:none;}
/* I have no idea of what this is. It came with the MM code. */
#mm-feature {
width:760px !important;
}
/* Mega Menus End */
/*======================================= Nav-small, added 4/2015 ==========================================*/
/*Positions the overall small menu*/
header nav#nav-small {
position: absolute;
top: -500px;
z-index: 3; /*Pulls menu to front when unfolded*/
opacity: .8;
-webkit-transition: .5s; /*Specifies how we want to transition from off screen to on screen.*/
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
/*Show the menu once it's targeted.*/
header nav#nav-small:target {
z-index: 3; /*Pulls menu to front when unfolded*/
position:absolute;
top: 0px;
opacity: 1;
}
/* No links will be non-white, and they're all blocks. */
nav#nav-small a {color: #fff; display: block;}
/*Each li is one menu item.*/
ul#menu-small li {
font-size: 1.2em;
font-family: Verdana, Geneva, sans-serif;
font-weight: bold;
display: block;
width: 100%;
text-align: center;
line-height: 2em;
height: 2em;
border-bottom: 2px solid #4b6b9a;
background: -webkit-linear-gradient(#345482, #45638d); /* For Safari 5.1 to 6.0 */
background: -moz-linear-gradient(#345482, #45638d); /* For Firefox 3.6 to 15 */
background: linear-gradient(#345482, #45638d); /* Standard syntax (must be last) */
}
a#mega-link-search {
background-image: url("http://d1f0ngef7bih17.cloudfront.net/images/template/menu/icon-search.svg");
background-size: auto 80%;
background-repeat: no-repeat;
background-position: 32% 50%;
}
/*Close menu links*/
li#close-nav-top a {text-align: left; opacity: .5;}
span#close-top {text-transform: lowercase; font-size: 40px; }
/*Hover styles*/
ul#menu-small li:hover, ul#menu-small li:active {
background: #edf2f7;}
ul#menu-small li:hover a, ul#menu-small li:active a {color: #345482; text-decoration: none;}
#jump-animated a:hover {text-decoration: none;}
/*This is the broadest container that holds the "Menu" button*/
#jump-static
{
background: #345482;
display: block;
padding: 0;
height: 5px;
width: 100%;
border-bottom: 1px solid #edf2f7;
position: absolute;
top: 0;
z-index: 2; /*This goes under the menu content*/
}
#jump-animated{
z-index: -1; /*This goes under the menu content but OVER the static jump button*/
}
/*This is the container holding the actual word "Menu" and the hamburger */
#jump-static a, #jump-animated a {
display: block;
width: 30%;
min-width: 8em;
background-color: #345482;
padding-bottom: 5px;
padding-top: 10px;
float:right;
}
/*Child of the "a" container */
#jump-static #jump-links, #jump-animated #jump-links {margin-left: 25%;}
/*"Menu" label*/
#jump-static #menu-label, #jump-animated #menu-label {
font-size: 1.2em;
color: #fff;
font-family: Verdana, Geneva, sans-serif;
text-transform: uppercase;
}
/*Size & place the hamburger */
#icon-bars {float:left; margin-right: 5%;}
#icon-bars img {height: 1.2em; width: 1.2em; margin-top: .2em;}
body #container {width: auto; max-width: 974px;} /*Will want to move this rule elsewhere (or remove) when launching*/
/*--------This is the beginning of media queries for the responsive menu.--------*/
/*Show normal menu at 821 and above*/
@media (min-width: 1101px),
(max-width: 1100px) and (min-width: 821px) and (-webkit-max-device-pixel-ratio: 1){
#jump-static, #jump-animated {display:none;}
}
/* ----------------------------Only current break----------------------------*/
@media (max-width: 820px) and (min-width: 321px),
(max-width: 320px),
(-webkit-min-device-pixel-ratio: 1.1) and (max-width: 1100px) {
nav#nav-full {display:none;}
}
/*--------Color coding ---------*/
/* YELLOW - 1101+ */
@media (min-width: 1101px) {
/*#test-page-content p {background-color: #FF6;} */
}
/* ORANGE - 981-1100px */
@media (max-width: 1100px) and (min-width: 981px) and (max-resolution: 1dppx){
/*#test-page-content p {background-color: #F90;} */
}
/* RED - 767-980px */
@media (max-width: 980px) and (min-width: 821px) {
/*#test-page-content p {background-color: #f00;} */
}
/* GREEN - 321-766px */
@media (max-width: 820px) and (min-width: 321px) {
/*#test-page-content p {background-color: #0f0;} */
}
/* BLUE iPhone - all sizes, ratio of 2 */
@media (-webkit-min-device-pixel-ratio: 2) and (max-width: 1600px) {
/*#test-page-content p {background-color: #00f;} */
}