/* global elements */
* { box-sizing: border-box; -moz-box-sizing: border-box;}
html { position: relative; }
body { 
    padding-top: 50px; 
    height: 100%;
    position: relative;
}

section { position: relative;  width: 100%; padding:0px;}
h1 {font-size: 2.4em; color: black; font-weight: 900;}
h2,h3 {line-height: 1.5em; font-size: 1em; font-weight: 800;}
p {margin-bottom: 0px;}
a {color: #000000; }
a:hover {color: #222222; text-decoration: none;}
.invert , .invert a{color:#fff; background: #262626;}
.red { text-stroke: 1px solid #f56055; font-weight: 800; padding: 4px;}
.yellow{background: #F0C514; font-weight: 800;}
.green{background: #2FB232; font-weight: 800;}
.bold {font-weight: 800;}


.yellow-text, .red-text , .green-text {
font-size: 1.7em;
line-height: 2.1em;
font-weight: 800;
color: #262626;
border-radius: 100%;
float: left;
display: block;
width: 70px;
height: 70px;
text-align: center;
vertical-align: top;
margin-right: 1%;
}


.red-text{background: #f56055;}
.green-text{background:#2FB232;}
.yellow-text{background: #F0C514;}


/* global nav */
.navbar {
    -webkit-box-shadow: 0 3px 6px 0px rgba(0,0,0,0.5); 
    -moz-box-shadow: 0 3px 6px 0px rgba(0,0,0,0.5); 
    box-shadow: 0 3px 6px 0px rgba(0,0,0,0.5);
}

a.navbar-brand { 
    display: inline-block; 
    text-align: right; 
    padding: 0; 
    font-size: 1.4em;
}

a.navbar-brand div.logo { 
    background-image: url('../img/logo.png'); 
    height: 51px; 
    width: 150px; 
    margin: 0; 
    padding: 0; 
    float: left; 
    background-repeat: no-repeat;
}

a.navbar-brand p {
    text-align: left; 
    float: left; 
    padding: 14px 8px 0px 8px; 
    font-size: 1em;
}

p.navbar-brand a {
    color: #fff;
}

.navbar-nav>li {font-size: .9em; font-weight: 200; vertical-align: bottom;}
.social-menu>li>a {font-size: .9em; padding: 11px 0;}
.social-menu>li>a:hover {background-color: #000;}
.dropdown-menu>li>a {float: left; display: inline; }
.chosen-container-single .chosen-single {background: none; margin-top: 5px; border-radius: 0px; border: none; font-size: 1.4em; box-shadow: none; color:#DFD9D9; }
.rule {height: 10px; width: 100%;}
.navbar-inverse .navbar-brand , .navbar-inverse .navbar-nav>li>a {color: #DFD9D9; font-size: 1.4em; font-weight: 200;}
.chosen-container-active.chosen-with-drop .chosen-single{color: #000;}

/* pages */
body.page-index .navbar-brand {background-color: #000; color: #fff; font-weight: 800;}
body.page-compare li.compare , body.page-compare li.compare a {background-color: #000; color: #fff; font-weight: 800;}
body.page-overview li.overview , body.page-overview li.overview a {background-color: #000; color: #fff; font-weight: 800;}
body.single-state li.overview {background-color: #000; color: #fff; font-weight: 800;}

ul.social {float: right; margin-top: 20px; margin-right: -33px; padding-right:0px; z-index: 2;}
ul.social li {display: inline; float: right;}
li.facebook {background-image:url('../img/facebook-64.png'); height: 32px; width: 32px; background-size: cover; list-style: none;}
li.twitter {background-image:url('../img/twitter-64.png'); height: 32px; width: 32px; background-size: cover; list-style: none;}
li.gplus {background-image:url('../img/google-plus-64.png'); height: 32px; width: 32px; background-size: cover; list-style: none;}

.social li{ display:inline;}  

.fb-like{
    padding-right:12px;
}

body.page-index .fb-like{
    position:relative;
    top:-13px;
}

body.page-overview ul.social {position: absolute; left:52%; padding-top:10px;}
body.page-compare ul.social {position: absolute; left:47%; margin-top: -40px;}
body.state ul.social {position: absolute; left:51%; margin-top: 30px;}

/* index.html */
body.page-index h1 {font-weight: 800; text-indent: -3px; font-size: 3em;}
body.page-index h2 { margin-left: 0px;}
body.page-index h2.subhed { font-weight: 200; font-size: 1.6em;letter-spacing: .02em; }
.intro {font-weight: 200; font-size: 1.2em; line-height: 2.3em; letter-spacing: .02em;}
body.page-index .strong {font-weight: 800; font-size: 1em; line-height: 1.4em;}
.intro-text {max-width: 98%;}
.static-text {font-size: 2em;}
.update-text { font-size: 1.2em; line-height: 3.8em; font-weight: 800; letter-spacing: .01em;}
.update { font-size: 1.6em; line-height: 3.4em; font-weight: 100; letter-spacing: .01em;}
.latest-story {border: 1px solid #262626; color: #000; float: left; font-size: .8em; text-align: left; display: inline-block;  margin-right: -50px; width: initial;}
.latest-byline , article.latest-post > p > a{text-align: left; padding-bottom: 10px;}
.intro-pointer {border: 1px solid #262626; color: #000; float: right; font-size: .8em; text-align: left; display: inline-block;  margin-right: -50px; width: initial;}
.more-pointer {padding: 10px 5px 5px 5px; vertical-align: middle; font-weight: 500; letter-spacing: .05em; float: left; margin-top: 5px; font-size: .7em;}
.more-pointer a:hover {text-decoration: none;}
.more-pointer a,.more-pointer p { padding: 0px 11px; font-size: 1.2em; }
.explore-pointer {vertical-align: middle; font-weight: 500; letter-spacing: .05em; float: right; margin: 5px 0px 0px 10px; text-align: right; margin-top: -112px; font-size: .8em;}
.bignumber:hover {opacity: .7}
.index-art { padding-left:30px; margin-top: -30px; height: 392px; font-size: 4em; background-repeat: no-repeat; float: right;}
body.page-index article.pointer { line-height: 2.9em;}

/* overview.html */
/* SEE overview.css */

/* compare.html */
/* SEE compare-states.css */

/* single_state.html */
body.state h2 {font-size: 1.8em; padding: 2px 8px; font-weight: 100; letter-spacing: .01em;}
body.state span.state-headline { margin-left: 10px; font-weight: 400;}
body.state p.copy {font-size: 1.1em; line-height: 2em; padding-bottom: 5px;}
body.state a.navbar-brand p {font-size: 1em; line-height: 1em;}
body.state p.rating {color:#229955; font-weight: 700; text-align: right;}
body.state down-arrow p{font-size: 1em;}

/* subsections */
.story-stream {font-size: 1em;}
.explainers {text-align: left;}
.explainers h2 {padding: 3px; font-size: 2em; font-weight: 800;}
.explainer{height:100%; width: 33%; float: left; display: inline; padding: 5px;}
.explainer-illo {height:150px; width:100%; padding: 2px;}
.affix { top: 39px; margin-left: 225px; width: 435px; margin-bottom: 80px; background: white;}
.issue-explainers{float: right; padding:0px 12px 0px 10px}
.issue-explainers h3, .heading h3 , h3.recent-group-head { padding: 12px;}
.slide-container {position: absolute;}
.explain_box_head {font-weight: 800; font-size: 1.8em;}
.explain_box_excerpt{font-weight: 200; font-size: 1.1em; line-height: 1.5em; border-bottom:2px solid #111111; margin-bottom: 20px;padding-bottom: 20px;}
.explain-group-head, .recent-group-head, .method-head {font-weight: 100; font-size: 1.5em; letter-spacing: .05em;}
.explainer-promo:hover{opacity: .5;}
.firstcharacter { float: left; color: #000; font-size: 6em; line-height: 60px; padding-top: 4px; padding-right: 12px; font-weight: 100;}
.method-subhed { margin: 20px 0px; font-weight: 100; font-size: 2em; border-top: 2px solid #3d3d3d; padding-top: 10px;}
.explainer-content {margin-top:20px;font-weight: 200;}
.explainer-content p {font-size: 1.2em; line-height: 1.5em; text-indent: 20px; margin-bottom: .8em;}
.credits {margin-top: 20px; font-weight: 100; line-height: 2em; font-size: 1.2em; color: #fff; background-color: #222222; padding: 10px; letter-spacing: .08em;}
.credits > .strong {font-weight: 800;}
.escape {font-size: 1.2em; line-height: 1.5em;text-indent: 0px;}
h3.recent-head{ font-size: 1.4em; max-width: 80%;}
.byline {padding-bottom: 8px;}
.description {font-weight: 800;max-width: 90%;}
.explainer-content a {text-decoration: underline; font-weight: 800;}

/* left right arrows */
.right-arrow a , .left-arrow a , .bottom-arrow a  {color:#000;}
.right-arrow{ font-size: 3em; position: fixed; top:50%; right:-50px; height:100px; width:100px; padding: 24px 5px 15px 8px; background-color: rgba(0,0,0,0.2); border-radius: 50px;z-index: 3; opacity: .7;}
.left-arrow{ font-size: 3em; position: fixed; top:50%; left:-50px; height:100px; width:100px; padding: 24px 5px 15px 50px; background-color: rgba(0,0,0,0.2); border-radius: 50px;z-index: 3; opacity: .7;text-align: left;}
.right-arrow p , .left-arrow p {font-size: .8em; display: inline; vertical-align:top; margin-left: 5px;}
.left-arrow p {margin-left: -150px;}
.right-arrow:hover  {transition: all 0.5s ease; font-size: 2em; padding: 32px 5px 15px 17px; padding-right: 150px; opacity: 1; box-shadow: 0 3px 6px 0px rgba(0,0,0,0.5); background-color: rgba(0,0,0,.7);}
.left-arrow:hover {transition: all 0.5s ease; font-size: 2em; padding: 32px 5px 15px 17px; padding-left: 150px; opacity: 1; box-shadow: 0 3px 6px 0px rgba(0,0,0,0.5); text-align: center; background-color: rgba(0,0,0,.9);}
.left-arrow:hover > a span.glyphicon-chevron-left {margin-left: -72px;}
.left-arrow:hover p.backtext {padding-left: 64px;}
.right-arrow:hover a, .left-arrow:hover a {color:#fff;}


/* bottom arrow now */
.bottom-arrow{font-size: 2em; position: fixed; left: 46%; bottom:0px; height:50px; width:100px; padding: 0px 5px 0px 33px; background-color: rgba(0,0,0,.8);  border-radius: 50px 50px 0px 0px; z-index: 3; margin-bottom: 0px; color:#fff; padding-top: 2px; }
.bottom-arrow:hover {transition: all 0.5s ease; padding-bottom: 100px; box-shadow: 0 3px 6px 0px rgba(0,0,0,0.5); background-color: rgba(0,0,0,1);}
.bottom-arrow a {color:#fff;}
.bottom-arrow:hover a {color:#fff;}
.down-arrow {transition: all 0.5s ease;}
.up-arrow {transition: all 0.5s ease; position: fixed; opacity: 0;}
.down-arrow p, .up-arrow p { font-size: .5em; margin-top: -20px; text-align: center; padding: 18px 0px 0px 0px; margin-left: -3px; }


/* footer */
footer {
    background-color: #202020;
    color: white;
    margin-top: 5em;
    padding-bottom: 1em;
    width: 100%; 
    position: absolute;
}

footer .funding {
    background-image: url('../img/cpb_logo_webcolor.jpg');
    background-repeat: no-repeat;
    padding-left: 80px;
    min-height: 70px;
    margin-left: 30px;
    padding-top: 1em;
}


footer a {
    color: white;
    font-weight: bold;
}

/* media queries for responsive */


@media only screen and (max-width: 750px) { 
    body { font-size:1.2em;}  
    .container {margin:0 1% 0 1%;}
    .navbar-inverse .navbar-nav>li>a { font-size:150%;} 
    a.navbar-brand  {font-size:220%;} 
    .bottom-arrow , .left-arrow , .right-arrow {display: none;}
    .explainer {width: 100%;}
    .explore-pointer {margin-top: 0px;}
    .col-md-12 {padding: 0px;}
    .update-text {font-size: 1.0em; width: 100%;}
    a.navbar-brand div.logo{width: 105px; height: 51px; background-image: url('../img/logo-small.png');}
    a.navbar-brand p {padding: 15px 8px 0px 8px;}
    h1 {font-size: 2em;}
    .green-text, .yellow-text , .red-text { height: 50px; width: 50px;}
	.affix {width: 75%;margin-bottom: 80px;}
	ul.social{float: left; margin-bottom: 0px; width: 100%;}
	.update {line-height: 2em;}
	body.page-overview p.subhead {display: block;}
	.static-explain-group-head {padding: 12px; color:#fff; background: #262626; font-weight: 100; font-size: 1.5em; letter-spacing: .05em;}
	.static-issue-explainers, .static-explain_box_excerpt {font-size: .9em; text-indent: 2px;}
}



@media (min-width: 950px){
    .container { width: 900px; }	
}


@media only screen and (max-width: 968px){
  	.affix {margin-left: 188px; width: 340px; font-size: .9em; margin-bottom: 80px;}   
}


@media only screen and (max-width: 980px){
    section { height: 100%; }
    body { font-size:1.2em;} 
    img { height: 60%;}
    .update-text {font-size: 1.3em;}
    .green-text, .yellow-text , .red-text { height: 60px; width: 60px;}   
}


/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

section {min-height: 768px;}
body.page-index h1 {font-size: 5em;}
body.page-index h2 {margin-bottom: 2em;}
.update-text { line-height: 5em; width:50%;}
.index-art { margin-top: 20px; margin-left: -10px; float: right; height: 330px;}
.green-text, .yellow-text , .red-text { margin-top: 10px;}
ul.social{position: absolute; margin-bottom: 0px; width: 400px; float: right; right:13px;} 
body.page-index article.pointer {font-size: 2em; line-height: 2.3em;}

body.page-overview .row {margin-bottom: 2em;}
body.page-overview .headlines {margin-bottom: 1em;}

body.page-compare .row {margin-bottom: 3em;}
body.page-compare .bucketgroup {padding-left: 4em;}

body.state #voter-id,body.state #absentee-voting,body.state #felons, body.state #early-voting {margin-bottom: 3em;}
body.state .stateface {margin-bottom: 1em;}
body.state .social {padding-top: 2em;}

.affix { position: static; margin-left: 0px;}  
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
.affix { position: static; margin-left: 0px;}  
}


/*** ratings ***/
.rating-1 { background-color: #41B725;} /* light green */
.rating-2 { background-color: #75da62;}
.rating-3 { background-color: #F0C514;}
.rating-4 { background-color: #fa7d73;}
.rating-5 { background-color: #E1473B;} /* light pink */

/*** state chooser ***/
ul.state-list {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    -ms-column-count: 3;
    -o-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 10%;
    -moz-column-gap: 10%;
    -ms-column-gap: 10%;
    -o-column-gap: 10%;
    column-gap: 10%;
    columns: 3;
}