xtala zen

Но не могу найти те классы, которые отвечает за цвета в меню. (обычный, при наводке, активный). Пытался всякие использующие классы тут присваивать новые стили. но без толку. какой серым была, таким и остался.

Судя по всему вам надо сделать шаг назад и попробовать толком освоить CSS и его правила. В частности понять что такое приоритет (или вес) стиля элемента и как он считается, а так же как его поднимать. Неплохо было бы еще изучить средства отладки встроенные в браузер, чтобы понимать какое свойство отвечает за выбранный элемент.
В данном случае страницу надо открыть в браузере ткнуть правой кнопкой мышки --> просмотреть код, на интересующий элемент и понять каким правилом CSS он описывается. Затем создать для этого элемента свое правило с более высоким приоритетом. Самый простой путь присвоить правилу свойство !important, но это плохая практика, которая простительна только новичкам, т.к. при дальнейшей доработке это свойство может смешать все карты.
Подробнее про приоритеты стиля элемента здесь:
htmlbook.ru/samcss/kaskadirovanie

Нарисуйте ее в SVG. SVG это вроде как не картинка а набор правил и векторной математики по которым браузер отрисовывает и рендерит самостоятельно какое либо изображение и оно масштабируемо. Но вообще странное желание. Производительность при такой реализации упадет ниже плинтуса, а Гугл выпишет вам счастливый билет на сотую страницу выдачи, т.к. оптимизация и скорость работы сайта влияют на его ранжирование.

Как вариант старый стиль просто висит в кэше и выдается браузером при обновлении. Можно попробовать полную перезагрузку страницы с дропом кэша по Ctrl+F5.

https://jsfiddle.net/3034a5bw/ все остальное тривиально.

Использовать валидатор w3c, а так же стараться пользоваться правилами css lint. Есть специальные плагины для редакторов которые делают это в автоматическом режиме.

Возможно это не то что надо, но я попробовал преобразовать блоки с помощью свойства display: inline-block; вот что получилось https://jsfiddle.net/cm8ctzL0/3/

Как по мне выравнивание с помощью absolute это костыльное решение, которое посыпется в самый не нужный момент. Учитесь мыслить блоками и представлять как браузер обрабатывает информацию, как идет на страницу так называемый поток элементов. На скриншоте у вас их три. Серый квадрат - lorem - и строка с датой(футер) . Это три блока. У всех трех вы можете задать марджины и паддинги чтобы выровнять содержимое как вам надо. Прилипание содержимого к правому и левому краю осуществляется с помощью свойств float:left; и float:right;. Только не забудьте, что эти свойства применяются к блочным элементам. Поэтому можете обернуть дату и еще, что там у вас в дополнительные маленькие блоки и манипулировать ими по своему усмотрению. Как вариант можно преобразовывать строчные элементы в блочные.

Прерывистые линии задаются свойством border-style: dashed;, но здесь они сложной формы поэтому стоит использовать картинку бэкграундом, а лучше форматом svg, т.к вектор дает хорошую адаптивность.

На самом деле бутстрап не прибит гвоздями к полу. Он легко настраивается под нужные размеры макета.На стадии скачивания можете кастомизировать пакет бутстрап под свои размеры очень легко. Подгонять макет под дефолтные размеры бутстрап не нужно и глупо.

Ставишь CSS линтер и начинаешь злиться от его занудства =) https://github.com/CSSLint/csslint / А он поначалу ой как злить будет. Очень привередливая штука. Двойное упоминание вроде тоже не любит. Так же находит кучу всего что по его мнению считается грязным стилем. Например использование !important . Приучает писать хорошо без говнокода.

Для разных версий браузеров и операционных систем не всегда подходит шрифт ttf формата (если конечно вы только его прописали), бывает так, что шрифт нужно подсовывать браузеру в других форматах например woff или eot. Для IE старых версий вообще использовать фикс. В вашем случае наверное есть смысл скачать веб-пак данного шрифта и загружать его из локальной папки не обращаясь к серверам гугл. Например вот отсюда https://www.fontsquirrel.com/fonts/open-sans , в мануале четко все описано какие свойства прописывать в CSS. Правда все на английском, но он там примитивный.

Проблемы скорее всего не у андроида, а это особенности браузера которым вы пользуетесь. Возможно поможеи якорная ссылка.

А это обязательное условие использовать библиотеку d3 js? Если условие не обязательное, то можно не решать задачу в " лоб", а попытаться найти альтернативное решение. Я так понимаю, задача в том что нужно подсвечивать разнообразные участки изображения по наведению мыши? Можно попробовать выполнить задачу с помощью этого инструмента ru.crazysquirrel.ru/tools/generators/map-area