body { margin: 0; padding: 0; font-family: Guardian-Text-Egyp-Web-Light-Latin; }
#wrapper { max-width: 940px; height: 750px; margin: 0 auto; overflow: hidden; }
#masthead { font-family: GuardianTitlepieceWeb-Regular-Latin; font-size: 50px; text-align: center; padding: 20px 2% 20px; }
#masthead #strap { color: #999; font-family: Guardian-Text-Egyp-Web-Light-Latin; display: inline-block; }
#controls { text-align: center; font-size: 15px; margin: 5px 0; }
#controls #buttons { display: inline-block; }
#controls .scale-control { font-size: 16px; font-family: Guardian-Sans-Web-Light-Latin; }
#controls #scale-by { margin-right: 6px; }
#controls #scale-by-population { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
#controls #scale-equally { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
#chart { display: inline-block; vertical-align: top; width: 61%; padding: 0 1% 32% 2%; }
#chart svg { width: 100%; height: 100%; }
#chart svg circle { cursor: pointer; fill: white; }
#chart svg #central-icon { pointer-events: none; fill: #bbb; }
#chart svg .arc { stroke: white; stroke-width: 1; cursor: pointer; }
#chart svg #highlighter { stroke: black; stroke-width: 3; fill: none; display: none; pointer-events: none; }
#chart svg .label { font-size: 10px; font-family: Guardian-Text-Egyp-Web-Light-Latin; pointer-events: none; }
#chart svg .category-label { font-size: 15px; }
#chart svg .category-label.current { font-family: Guardian-Text-Egyp-Web-Med-Latin; }
#info { display: inline-block; vertical-align: top; width: 32%; padding: 0 2% 100px 0; text-align: right; font-family: Guardian-Text-Egyp-Web-Light-Latin; }
#info a:link, #info a:visited { color: #aaa; }
#info a:hover, #info a:active { color: #333; }
#info #region { font-size: 30px; color: #999; }
#info #country { margin-top: 2px; margin-bottom: 10px; font-size: 30px; font-family: Guardian-Text-Egyp-Web-Med-Latin; }
#info #category { margin-top: 12px; font-size: 18px;  text-transform: uppercase; }
#info #metrics { margin-top: 10px; font-size: 15px; }
#info #metrics .metric { position: relative; display: inline-block; min-height: 30px; margin-top: 10px; left-align: left; padding: 0 35px 0 0; }

#wrapper #info #metrics .metric .metricname { line-height: 1.2em; display: inline-block; vertical-align: top; }
#wrapper #info .response { position: absolute; height: 40px; font-size: 30px; text-align: center; top: 0; right: 0; }
#wrapper #info .tweet-button { display: none; }

#wrapper.is-locked #info #metrics .metric { padding: 0 70px 0 0; }
#wrapper.is-locked #info .response { right: 35px; }
#wrapper.is-locked #info .tweet-button { position: absolute; height: 35px; font-size: 30px; text-align: center; top: 0; right: 0; display: block; }

#info #metrics .metric .response .fa-check { color: #7FB963; }
#info #metrics .metric .response .fa-times { color: #CF2C2D; }
#info #metrics .metric .response .fa-question { color: #BBB; }
#info #metrics .metric .response .fa-not-applicable { color: #aaa; font-size: 15px; font-family: arial; font-weight: bold; }
#info #metrics .metric .response .fa-not-applicable:after { content: "N/A"; }
#info .source { font-size: 12px; line-height: 1.2em; display: none; margin: 20px 0; }
#info .source a:link, #info .source a:visited { color: #777; }
#info .source a:hover, #info .source a:active { color: #333; }
@media only screen and (max-width: 850px) {
    #wrapper { height: 850px; }
}
@media only screen and (max-width: 700px) {
    #wrapper { height: auto; }
	#masthead { font-size: 40px; }
	#info { width: 94%; padding: 0 3% 0; margin-top: -30%; }
	#info #region, #info #country { display: inline-block; margin-left: 8px; }
    #wrapper #info #metrics .metric { width: 28%; margin-left: 10px; }
	#chart { width: 96%; padding: 10px 2% 32%; }
}
@media only screen and (max-width: 500px) {
    #wrapper #info #metrics .metric { width: auto; margin-left: 0; }
}

/* Button styles borrowed from Bootstrap */

.btn {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: #333333;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
    background-repeat: repeat-x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid: DXImageTransform.Microsoft.gradient(enabled = false);
    border: 1px solid #cccccc;
    border-bottom-color: #b3b3b3;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
}

.btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled,
.btn[disabled] {
    color: #333333;
    background-color: #e6e6e6;
}

.btn:active, .btn.active {
    background-color: #cccccc \9;
}

.btn:hover, .btn:focus {
    color: #333333;
    text-decoration: none;
    background-position: 0 -15px;
    -webkit-transition: background-position 0.1s linear;
    -moz-transition: background-position 0.1s linear;
    -o-transition: background-position 0.1s linear;
    transition: background-position 0.1s linear;
}

.btn:focus {
    outline: thin dotted #333;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.btn.active, .btn:active {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
}

.btn.disabled, .btn[disabled] {
    cursor: default;
    background-image: none;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.btn-primary.active, .btn-warning.active, .btn-danger.active, .btn-success.active,
.btn-info.active, .btn-inverse.active {
    color: rgba(255, 255, 255, 0.75);
}