h1 {
    margin: 10px auto;
    text-align: center;
}
h3, .header h2 {
    font-family:"FranklinITCProBold","Arial",sans-serif;
    font-weight: normal;
    font-size:20px;
    margin-bottom: 5px;
}
p.intro, p.body.intro { 
    width: 90%;
    margin: 5px auto;
    text-align: center;
}

p.franklin-bold { 
    font-family:"FranklinITCProBold","Arial",sans-serif;
    font-weight: normal;
    font-size: 12px;
}

p.franklin { 
    font-size: 15px;
    margin-bottom: 5px;
    font-family: "FranklinITCStdLight", "Franklin Gothic", "ITC Franklin Gothic", 'Arial', sans-serif;
}

.header { 
    margin-bottom: 15px;
}

.photo-holder img {width:100%}

/* set up the photo frames*/
.frame {border:1px solid #D1D3D4; padding:0; margin:0; width:60px; height:80px; /*border:2px solid #D1D3D4; opacity:0.5;*/ position: absolute; z-index:10; cursor: hand; cursor: pointer; }}
.frame:hover  {border:2px solid #D1D3D4; opacity:1;}
.category {width:60px; height: 10px; }

.frame.hover {border:2px solid #D1D3D4; opacity:1;} 

/*list of guests*/
.guest {font-size:12px; /*line-height: 1.5em;*/ padding:3px 0; cursor: hand; cursor: pointer;}
.guest.hover {font-weight: bold;}
span.marker {float:left; margin: 2px 4px 0 0; width: 9px; height: 9px;  -moz-border-radius: 35px; border-radius: 35px; -webkit-border-radius: 35px;}


/*bio caption*/
.caption {background-color:rgba(0,0,0,.65); width:97%; height:50px; position: absolute; bottom:35px; padding:1.5%;}
.caption p {color:#fff; opacity:1; font-size:14px;}
.caption p.name { 
    font-family: "FranklinITCStdLight", "Franklin Gothic", "ITC Franklin Gothic", 'Arial', sans-serif; font-size: 16px; margin: 5px 0 3px 0;} 
.caption p.description  { 
    font-family: "FranklinITCStdLight", "Franklin Gothic", "ITC Franklin Gothic", 'Arial', sans-serif; font-size: 13px; margin: 0px;}
.caption p span.name {
    font-family:"FranklinITCProBold","Arial",sans-serif;
    font-weight: normal;
}
span.notPictured {
    font-size:12px; 
    padding: 3px 4px;
    color: #000;
    /*-moz-border-radius: 5px;*/
    border-radius: 5px;
    margin-left: 5px; 
    display:inline;
}

.frame.opaque {opacity:1;}
.frame.transparent {opacity:0;}

#key-wrapper { 
    position: relative;
    height: 80px;
    margin-top: 10px;
    z-index:3000;
}

#key { 
    z-index: 1000;
    background: white;
    border-top: 1px solid #ccc;
    padding-top: 10px;
}

.list-col { 
    margin: 0 15px 0 25px;
}




/* fixed header styles */
.wp-graphics-fixed-wrapper {position: relative;} /* likely needs height set in your project styles */
.wp-graphics-fixed {position: absolute;top:0; z-index:2000;}
.wp-graphics-fixed.fixed {position:fixed;}
.wp-graphics-fixed.bottom {position:absolute;}

#filter-wrapper li a { padding:7px 8px; cursor:pointer; text-decoration: none; display:block; }
.filter-wrapper { z-index: 1000;
position: relative;
width: 986px; height:80px;  margin: 0 auto; text-align:center;}

#matrix-legend { margin-left: 20px; } 
#matrix-legend li { font-size: 12px; line-height: 15px; padding:3px 0; color: #666; float: left; margin-right: 20px; }
ul.legend {width: 160px;
float: left;
text-align: left;} 

.border-topper { height: 0px; border-top: 1px solid #D9D8D8; top: 0px; position: relative; }

.header {text-align: center; margin: 40px 0;}
/*.header h2 {font-size}*/

/* positioning for photo frames */
/*2014*/
.EdLee {top:5%; left:85%;}
.MaryBarra {top:24%; left:90%;}
.NickChute {top:24%; left:53%;}
.JohnSoranno {top:18%; left:64%;}
.MistyDeMars {top:46%; left:58%;}
.SabrinaSimoneJenkins {top:47%; left:9%;}
.JeffBauman {top:24%; left:28%;}
.CarlosArredondo {top: 24%; left: 17%;}
.AntoinetteTuff {top:3%; left: 13%;}
.MichelleHoward {top:10%; left:94%;}
.GaryBird {top: 2%; left:72%;}
.CraigRemsburg {top: 45%; left:23%;}
.CoryRemsburg {top:43%; left:33%;}
.AmandaShelley {top:25%; left:41%;}
.AlianaArzola-Piñero {top:60%; left: 93%;}
.EstivenRodriguez {top:24%; left:77%;}
.KathyHollowell-Makle {top:47%; left:83%;}
/*2013*/
.DesilineVictor {left: 675px;}
.TraceyHepner {left: 370px; top: 10px;}
.AlanAleman {top: 210px; left: 560px;}
.AmandaEMcMillan {top: 110px; left: 330px;}
.BobakFerdowsi {top: 200px; left: 660px;}
.MenchudeLunaSanchez {top: 250px; left: 330px;}
.HaileThomas {top: 30px; left: 440px;}
.SheenaAdams {top: 230px; left: 10px;}
.CarlosEvans {top: 80px; left: 635px;}
.BrianMurphy {top: 100px; left: 380px;}
.KaitlinRoig {top: 200px; left: 490px;}
.NathanielAPendletonSr {top: 210px; left: 60px;}
.CleopatraCowley-Pendleton {top: 230px; left: 170px;}
.DebCarey {top: 110px; left: 155px;}
.LeeMaxwell {left: 530px;}
.TimCook {top: 100px; left: 250px;}
.JohnKitzhaber {top: 105px; left: 85px;}
.MarieLopezRogers {top: 110px; left: 465px;}
/*2012*/
.JuanJoseRedín {top: 50px; left: 340px;}
.LaurenePowellJobs {top:40px; left: 535px;}
.WilliamMcRaven {top:150px; left:105px;}
.MarkKelly {top: 185px; left: 450px;}
.BruceCochrane {top: 10px; left: 115px;}
.JackieBray {top: 190px; left: 215px; }
.DebbieBosanek {top: 45px; left: 436px;}
.AliciaBoler-Davis {top: 40px; left: 630px;}
.AshleighBerg {top: 190px; left: 660px;}
/*2011*/
.PeterRhee {top: 150px; left: 190px;}
.KathyProctor {top: 175px;}
.NicoleMohabir {top: 170px; left: 100px;}
.BriannaMast {top: 260px; left: 460px;}
.BrianMast {top: 230px; left: 660px;}
.DallasGreen {top: 300px; left: 160px;}
.RoxannaGreen {top: 250px; left: 240px;}
.JohnGreen {top: 240px; left: 60px;}
.JulieFisher {top: 145px; left: 380px;}
.BrandonFisher {top: 130px; left: 280px;}
.ZacharyDavis {left: 220px;}
.KendraBaker {left: 320px; top: 20px;}
.UrsulaMBurns {top: 110px; left: 620px;}
.RobertAllen {left: 410px;}
.GaryAllen {top: 90px; left: 490px;}
/*2010*/
.TrevorYager {top: 80px; left: 275px;}
.MarkTodd {top: 240px; left: 120px;}
.AndrewRubin {top: 90px; left: 330px;}
.DeborahPowell {top: 120px; left: 650px;}
.KimberlyMunley {top: 300px; left: 170px;}
.ChrisLardner {top: 140px; left: 220px;}
.RebeccaKnerr {top: 270px; left: 420px;}
.JanellKellett {top: 260px; left: 35px;}
.RaymondJoseph {top: 120px; left: 440px;}
.PingFu {top: 15px; left: 580px;}
.JuliaFrost {left: 610px; top: 270px;}
.JeffreyBrown {top: 100px; left: 555px;}
/*2009*/
.TedStrickland {top: 110px; left: 350px;}
.AbbeyMeacham {left: 400px; top: 10px;}
.AlfonsoELenhardt {left: 570px;}
.LillyLedbetter {top: 125px; left: 170px;}
.GenevaLawson {top: 210px; left: 25px;}
.BlakeJones {top: 75px; left: 100px;}
.ValerieBJarrett {top: 110px; left: 265px;}
.JimDouglas {top: 100px; left: 450px;}
.EarlDevaney {top: 110px; left: 530px;}
.RichardGDeCoatsworth {top: 200px; left: 490px;}
.DinaLeach {top: 235px; left: 210px;}
.TySheomaBethea {top: 260px; left: 300px;;}
.LeonardAbessJr {top: 210px; left: 100px;}


/* people who appear in every photo */
/*.wp-column.twelve.padding-bottom.end.2012 > */

.frame.MichelleObama.y2014 {top: 41%; left: 45%;}
.frame.JillBiden.y2014 {top: 46%; left: 70%;}
.frame.MichelleObama.y2013 {top: 200px; left: 250px;}
.frame.JillBiden.y2013 {top: 220px; left: 410px;}
.frame.MichelleObama.y2012 {top:150px; left: 350px;}
.frame.JillBiden.y2012 {top:185px; left: 560px;}
.frame.MichelleObama.y2011 {top:225px; left: 375px;}
.frame.JillBiden.y2011 {top:240px; left: 565px;}
.frame.MichelleObama.y2010 {top:230px; left: 300px;}
.frame.JillBiden.y2010 {top: 260px; left: 530px;}
.frame.MichelleObama.y2009 {top:210px; left: 385px;}
.frame.JillBiden.y2009 {top:235px; left: 580px;}


/* colors for photo frames */

.PoliticalFigure {background-color: #dc463f; color: #dc463f; /* darker red */}
.Staff {background-color: #ffc1be; color: #ffc1be; /* lighter red */}

.Guns {background-color: #3178b5; color: #3178b5; /* darker blue */}
.MilitaryPolice {background-color: #badefc; color: #badefc; /* lighter blue */}

.BailoutStimulus {background-color: #5A7227; color: #5A7227; /*dark green*/}
.Jobs {background-color: #a7cf60; color: #a7cf60; /*light green*/}


.Education {background-color: #f0805e; color: #f0805e;/* orange*/}
.Health {background-color: #3993a2; color: #3993a2; /* teal */}
.SocialIssues {background-color: #ffdd81; color: #ffdd81; /*yellow*/}

p span.highlight { 
    background-color: white;
    font-family:"FranklinITCProBold","Arial",sans-serif;
    font-weight: normal;
}

.photo-caption { 
    float: right;
    font-size: 11px;
}

.filter-menu {
    display: none;
}


/* iframe */

.iframe {width:610px !important;}
.iframe .iframe-hide {display: none;}
.iframe .header {display: none;}
.iframe #key-wrapper {display: none;}
.iframe h1 {font-size: 28px;}
.iframe p.body.intro {width: 100%;}
.iframe p.intro {width: 100%;}
.iframe .end {width: 610px;}
.iframe #iframe-guest {padding-top:15px; width: 90%;-webkit-column-count:4;-moz-column-count:4;column-count:4;}
.iframe .guest_list li {line-height:1.2em;}
.iframe .filter-menu {display: block; clear: both; margin-left: 180px;}
.iframe .filter-menu li {text-align: center;}

.next a {padding-right: 19px;}
.next i {border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;border-left-color: #666;border-width: 4px;top: 50%;right: 6px;margin-top: -4px;}
.next a:hover i {border-left-color: #222;}

/* mobile */

.mobile-intro: {width: 100%;}
.mobile-legend li {list-style-type: none; font-size: 13px; line-height: 1.4em; padding-bottom: 10px;}
.mobile-photo-holder {width: 100%; margin: 0 auto; text-align: center;}
#mobile-header {margin: 20px 0;}
.mobile-menu {margin-top: 25px;}
.mobile-name {font-weight: bold;}