/* GE16 - Shape of the Dail - Age / Gender / Profession */

.dail_horseshoe { width: 100%; max-width: 750px; height: auto; margin: 0 auto; }

.dail_horseshoe h1{text-align:center;}

.horseshoe-img-container { width: 100%; height: auto; margin: 25px auto; max-width: 750px; position: relative; }
.horseshoe-img-container-row { position: absolute; width: 100%; top: 50%; left: 0; }
.dail_image { width: 100%; height: auto; margin: auto; }
.image-arrow { opacity: 0.6; filter: alpha(opacity=60); }
#prev-image { width: 50%; float: left; text-align: left; }
#next-image { width: 50%;  text-align: right; }
#years-selector { margin: 20px auto; text-align: center; width: 100%; }
.image-type-selector { width: 100%; }
.dail-type-selector .year_button { width: 33%; margin: 0 5px; }
.year_button a { width: 90%; text-align: center; margin: 4px auto; }

.btn-group-vertical { width: 100%; text-align: center; }
.georgia-font { font-family: Georgia, serif; }
.fadeOut { transition: opacity 0.5s; opacity: 0; }
.fadeIn { transition: opacity 0.5s; opacity: 1; }
.mobile-slider { width: 100%; }
.slider-marker { width: 100%; margin-top: 8px; text-align: center; font-size: 0.8em; font-family: "DINWeb-Medium", Arial, Helvetica, sans-serif; }
.slider-marker tr td { width: 33%; }
.slider-marker .left { text-align: left; }
.slider-marker .right { text-align: right; }
.slider-markers { margin: 4px 9px; }
.slider-markers table { width: 100%; height: 6px; }
.slider-markers tr td { width: auto; border-left: 1px solid black; border-right: 0; }
.slider-markers tr td:last-child { border-right: 1px solid black; }
input[type=range] { -webkit-appearance: none; width: 100%; border-radius: 4px; height: 8px; border: 1px solid #bdc3c7; background-color: #fff; }
 input[type='range']::-webkit-slider-thumb {
 -webkit-appearance: none;
 background-color: #ecf0f1;
 border: 1px solid #bdc3c7;
 width: 30px;
 height: 30px;
 border-radius: 15px;
 cursor: pointer;
}
 .firefox input[type=range]::-moz-range-track {
 border-radius: 4px;
 height: 8px;
 border: 1px solid #bdc3c7;
 background-color: #fff;
}
 .firefox input[type=range]::-moz-range-thumb {
 background: #ecf0f1;
 border: 1px solid #bdc3c7;
 width: 30px;
 height: 30px;
 border-radius: 15px;
 cursor: pointer;
}
.percentage-votes-table { width: 100%; height: 32px; margin: 18px auto 12px auto; }
.percentage-votes-table table { width: 100%; }
.percentage-votes-table table tr { height: 32px; }
.percentage-votes-table td { color: white; text-align: center; }
.profession-list { margin-top: 16px; float: left; }
.profession-list table { border-collapse: collapse; }
.no-spacing { border-collapse: collapse; }
.no-spacing li { list-style: none; text-align: start; }
.no-spacing li div { margin-top: 6px; float: left; }
.dail-type-selector { width: 100%; padding: 4px; text-align: center; }
.dail-type-selector a.btn{background:#fff!important; border:1px solid #e7e7e7!important; padding:10px 0!important;font-family: "DINWeb-Bold", Arial, Helvetica, sans-serif;color:#5D5D5D!important;}
.dail-type-selector a.btn.active, .dail-type-selector a.btn:active{background:#e7e7e7!important;box-shadow:none!important;border:1px solid #dedbdb !important;}

strong{font-family: "DINWeb-Bold", Arial, Helvetica, sans-serif;text-transform: uppercase;}
.dail-agp-legend{font-family: "DINWeb-Medium", Arial, Helvetica, sans-serif;font-size: 0.8em;line-height: 1.5em;text-transform:uppercase;}
.profession-identifier{width: 18px;height: 1.25em;float: left;vertical-align: middle;}
.profession-list { height: 1.25em; padding: 10px 15px 0px 0px; }
.dropdown { width: 100%; text-align: center; display: inline-block; }
.dropdown-menu { text-align: center; }
.navbar-toggle { width: 100%; float: none; margin-right: 0; }
.navbar-toggle-text { float: left; margin-left: 10px; }
.collapse { display: none; }
 @media (max-width: 767px) {
.slider-marker { font-size: 1em; }
.image-arrow { width: 32px; height: 32px; }
}
 @media (max-width: 480px) {
.slider-marker { font-size: 1em; font-weight: bold; }
.percentage-votes-spillover { float: left; }
.image-arrow { width: 24px; height: 24px; }
}

.browsehappy { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }