Grigruss

Самое оптимальное решение по подключению шрифтов я видел только здесь. Залезьте в код, посмотрите. Там один из CSS-файлов полностью посвящён описанию, какие шрифты, в каком формате и откуда брать.

В некоторых случаях вёрстка поплывёт. Лучше всё таки отталкиваться от фиксированных величин, а не от относительных.

Я бы сделал примерно так.
CSS

div.left-baloon{
    background:url('file-with-left-riece-of-baloon.png')no-repeat center;
    min-width:20px;
    min-height:200px;
    float:left;
}
div.right-baloon{
    background:#00f; /* код цвета найти не проблема */
    min-height:200px;
}
p.sale{
    opacity:0.3;
    font-size:72pt;
    font-famili:Arial;
}

HTML

<div><div class="left-baloon"/><div class="right-baloon"><p class="sale">SALE</p></div></div>

Сижу на Debian8. Нашел все с чем работаю в .deb проблем не ощущаю... От Adobe давно отказался, как и от многих других подобного масштаба фич... есть нормально рабочее, при определённой пряморукости пользователя, и бесплатное open-source.
На крайний случай стоит VirtualBox с Win7, но не запускал уже полгода, ибо нафиг не надо...

Все хвалят TinyMCE. Я пользуюсь блокнотом.

Не знаю... но можно ограничить max-height:150px;

Масло масляное... width - ширина, max-width - максимально возможная ширина. Не понятно чего хотите...
Если картинка должна быть по размеру блока, достаточно width:100%.
Если речь о размере картинки без учета блока - здесь написано.
Если хотите ограничить определённым размером картинку внутри блока, тогда значение max-width не должно быть в процентах. Указывайте в px, в em, cm, mm или чем то еще более конкретном.

Ваш код - бред, на мой взгляд... в диве четыре спана, и вы присваиваете каждому спану minute + ':' + second, затем пытаетесь поднять все спаны на 20 пикселей вверх, и в конце, зачем то, задаете анимацию движения всех этих спанов на 20 пикселей вниз, то есть в исходную позицию... Что вы хотите сделать? Пока не пойму, не смогу помочь...

htmlhook.ru/svg-image-sprite.html - !!!
nano.sapegin.ru/all/vyorstka-vektornogo-logotipa-s...
noteskeeper.ru/1061

Проблема в том, что у вас футер появляется после блока, который должен быть поверх остальных. Параметр z-index является относительным и принимается относительно текущего положения.
Самое простое - использовать JS. Можно с jQuery...

$(document).ready(function(){
    $('.wrapper-main').css('z-index',999);
});

$(windows).scrollTop($('#content-project_1').offest().top);

...не?

То есть window.onload - нельзя).

Вот именно его и нужно. Только код "лоадер для лоадера" воткнуть в самое начало "лоадера"... естественно грамотно его написав. Других путей даже представить не могу...
Можно конечно заморочиться и пойти дальше. Загружать пустую страницу, а потом Ajax-ом грузить DOM...

Для получения хорошего и быстрого результата - нельзя лениться. Хотите качество - только хардкор, только блокнот. Ну или IDE вроде NetBeans или подобных.
Визуальные редакторы втыкают 70% абсолютно никому ненужного кода, что сильно утежеляет сайт.

.resize onresize
при повороте меняется размер окна браузера и тень съезжает.

https://jsfiddle.net/grigruss/m8azm01e/