ВСТУП Комп’ютерна графіка — це наука, яка займається вивченням створення, зберігання і обробка моделей та їх зображень за допомогою ЕОМ. Вона охоплює всі види і форми представлення зображень, доступних для сприйняття людиною на екрані монітора, або у вигляді копії на зовнішньому носії (папір, кіноплівка, тканина і інше). Без комп’ютерної графіки неможливо уявити собі не тільки комп’ютерний, але і звичайний матеріальний світ. Візуалізація даних знаходить застосування в самих різних сферах людської діяльності. Для прикладу назвемо медицину (комп'ютерна томографія), наукові дослідження (візуалізація будови речовини, векторних полів і інших даних), моделювання тканин і одягу, дослідно-конструкторські розробки.

Комп’ютерна графіка — це будь-яка графічна інформація, яка була побудована з використанням можливостей ЕОМ. Її використання дозволяє зробити веб-сайти прозорішими, інтуїтивнішими та інформативнішими.

Без комп’ютерної графіки не обходиться жодна сучасна програма. Робота над графікою займає до 90% робочого часу програмістських колективів, що випускають програми масового застосування.

Необхідність широкого використання графічних програмних засобів стала особливо відчутною в зв’язку з розвитком Інтернету і, в першу чергу, завдяки службі World Wide Web, що зв’язала в єдину «павутину» мільйони «домашніх сторінок». Знижується конкурентна спроможність сторінок в яких не використовується комп’ютерна графіка і їм досить складно залучити до себе масову увагу.

Одним із найпоширеніших способів представлення інформації в Інтернеті є веб-сторінки. Призначення веб-сайтів, які є контейнерами для веб-сторінок, різне, кожен з них задовольняє свій сектор потреб користувача. Проте об'єднуючим фактором є засоби, технології, які використовуються в процесі їх створення та відображення. Широкої популярності набуває мультимедійна складова веб-сторінок, що, в свою чергу, спонукає до активного розвитку комп’ютерну графіку.

Отже, згідно з індивідуальним завданням необхідно розробити динамічні зображення та статичні зображення для сайту міста Жмеринки, за допомогою відео редактора AdobeAfterEffectCS6 а також AdobePhotosopCS6. Також потрібно наповнити сайт інформацію згідно обраної теми та виконати його в єдиному стилі.

1. Багатоваріантний аналіз розв’язку основної задачі

Для побудови та редагування статичних зображень можна використати растрові та векторні графічні редактори.

Графічний редактор — спеціалізована прикладна програма (або пакет програм), що дозволяє користувачеві створювати і редагувати зображення на екрані комп’ютера і зберігати їх в багатьох популярних форматах, наприклад JPEG, PNG, GIF, TIFF.

Растрові редактори дозволяють створювати і редагувати на екрані комп’ютера — декілька типів ліній, стирання, копіювання об'єктів, додавання тексту, заповнення фону кольором та інше, а також зберігати в різних растрових форматах.

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

Найвідоміші растрові редактори:

Adobe Photoshop — найпопулярніший комерційний редактор

Adobe Fireworks

Corel Photo-Paint

Corel Painter

GIMP — найпопулярніший вільний редактор

Microsoft Paint

Krita

На відміну від растрових редакторів, у векторних редакторах всі малюнки складаються не з окремих точок, а зі складних векторних об'єктів — кіл, багатокутників, довільних кривих. До того ж у кожного об'єкта є такі властивості, як товщина ліній, розмір, колір, текстура, прозорість.

Векторні редактори позбавлені недоліків, властивих растровим редакторам. Малюнки можна збільшувати чи зменшувати, проте кола залишаться колами і ніколи не стануть ступінчастими. Векторні редактори застосовують насамперед для створення великих малюнків у поліграфії (плакатів і рекламних афіш). Але створити за їх допомогою фотореалістичні зображення майже неможливо — для цього знадобиться додаткова обробка в растрових редакторах. До числа найвідоміших векторних редакторів належать Adobe Illustrator, Corel Xara, CorelDRAW.

На фоні іншого програмного забезпечення для розробки динамічних зображень значно виділяється Adobe After Effects. За допомогою нього можна редагувати відео та динамічні зображення, розробляти композиції, анімації і створювати різні ефекти. Широко застосовується для відео монтажу, при створенні рекламних роликів, музичних кліпів, у виробництві анімації (для телебачення і web), титрів для художніх і телевізійних фільмів, а також для цілого ряду інших завдань, в яких потрібно використовувати цифрові відео ефекти.

Серед систем управління контентом (CMS) можна виділити Joomla! (вимовляється джумла) — написана на мовах PHP і JavaScrit, використовуючи в якості зберігання бази даних СУБД MySQL.

Таким чином, в результаті проведеного аналізу програмного забезпечення в якому будуть розроблятись і редагуватись статичні зображення обрано програму Adobe Photoshop CS6 та, динамічні зображення будуть розроблятись редактором AdobeAfterEffectsCS6 та Easy GIF Animator. Веб-сайт створюватись в CMS Joomla! версії 3.1.

2. Розробка структури сайту Будь-який сайт є сукупністю сторінок, які містять різноманітні тексти, картинки, мультимедійні чи інші об'єкти. Для комфортного перебування відвідувача на сайті і для полегшення пошуку потрібної інформації, сайт повинен мати чітку і продуману структуру.

Структура сайту — це внутрішній устрій сайту, розташування сторінок, розділів, підрозділів, додаткових матеріалів. На логічному рівні структура сайту є сукупністю сторінок, які об'єднані між собою єдиним дизайном, стилем і посиланнями.

Організація даних у вигляді впорядкованої структури повинна повідомляти відвідувача, яку інформацію він може знайти на сайті і де її шукати. Існують такі типи структур:

лінійна структура. В такій структурі сайту сторінки можна переглядати послідовно, одна за одною. З поточної сторінки можна перейти або на наступну, або на попередню. Зазвичай, вона використовується для поділу досить довгої сторінки на кілька коротших, окремих частин. Наприклад, при відображенні тексту книги, можна зробити поділ по главах книги.

ієрархічна структура. Передбачає застосування головної сторінки, на якій розміщено меню з посиланнями на розділи сайту, що розташовані на наступних сторінках. Розділи можуть містити в собі посилання на підрозділи чи іншу детальну інформацію.

мережна структура. Є найбільш поширеною структурою в Інтернеті. За такою організацією можна перейти з однієї сторінки на будь-яку іншу, що є з нею взаємопов'язаною;

комбінована структура. Є поєднанням кількох попередніх структур.

2.1 Структура сайту в Joomla

Система управління контентом — це програмний комплекс, що дозволяє автоматизувати процес управління як сайтом в цілому, так і суттю в рамках сайту: макетами сторінок, шаблонами виведення даних, структурою, інформаційним наповненням, користувачами і правами доступу, а також що по можливості надає додаткові сервіси: списки розсилання, ведення статистики, пошук, засоби взаємодії з користувачами і так далі.

Необхідність систем управління для власників сайтів почала виявлятися в той момент, коли кількість матеріалів на веб-сайтах почала стрімко рости. Це призвело до того, що традиційні «ручні» технології розробки і підтримки сайтів, коли сайт складався із статичних сторінок і набору додаткових спеціалізованих скриптів, почали не встигати за швидко змінними потребами.

Однією з найбільш поширених систем управління контентом є Joomla.

Joomla — система управління вмістом інтернет-сайту з відкритим кодом, з допомогою якої можна легко створювати і редагувати власні сайти. Joomla є безкоштовною і вільно поширюваною системою, в яку будь-який користувач (за наявності спеціальних знань і навиків) може вносити зміни. Дві основні особливості цієї системи — простота адміністрування і гнучкість в створенні шаблонів — привели до того, що ця система почала використовуватися для створення найрізноманітніших сайтів, від корпоративних у внутрішніх мережах до шкільних.

Система управління контентом Joomla має модульну структуру і в своєму базовому варіанті не забезпечує всіх необхідних можливостей, потрібних для реалізації готового проекту. Розширення дозволяють істотно збільшити функціональність створюваного сайту.

Розділи і категорії в ієрархії сайту на Joomla служать для того, щоб згрупувати за змістом ваші матеріали. Організовано це таким чином. Розділ складається з однієї або декількох категорій. Категорії містять в собі матеріали сайту. Кожен матеріал може перебувати тільки в одній певній категорії будь-якого розділу.

Матеріал, що міститься в певної категорії, називається категоризований. Крім категоризованих матеріалів в Joomla можуть міститися некатегоризовані (або статичні) матеріали, які не належать до якої-небудь категорії. Статичні матеріали можна використовувати для створення загальної для сайту інформації, а також для незавершених статей, категорії яких ще не визначені.

Ієрархічна структура сайту на CMS Joomla наведена на наступному рисунку

3. Вибір кольорової гами Підбір кольорової гами сайту має велике значення для подальшого його сприйняття користувачем. З одного боку, колір відноситься до фізичних властивостей реальності, він може бути виміряний за допомогою приладів, і в цій якості колір має об'єктивне значення. З іншого боку, колір — це суб'єктивне психофізіологічне відчуття, що втілюється в певні емоційні стани, різні в різних людей; причому ця його неоднозначність і викликає для образотворчого мистецтва головний інтерес.

Емоційний, або психологічний, вплив кольору не так легко проаналізувати, як фізіологічні процеси, що виникають у результаті сприйняття кольору, а тим часом більшість із нас віддає перевагу певним кольорам і вважає, що колір впливає на настрій. Кольори розділяють на сильні й слабкі, заспокійливі й збудливі, навіть на важкі й легкі.

Одним із зручних інструментів для вибору кольорової гами є коло Іттена. На цьому колі відображені основні кольори (червоний, жовтий, синій), а також проміжні між ними. Сучасні його варіанти плавно відображають переходи між кольорами та використовують замість основних кольори моделі RGB (червоний, зелений, синій), яка використовується при формуванні зображень на екрані монітора (рис.2).

Рис. 2 — Сучасне представлення кола Іттена

Існує декілька методів вибору кольорової схеми на колі Іттена:

монохроматична. В такій кольоровій схемі використовується колір одного тону, але різної насиченості та яскравості;

аналогова. Використовуються два кольори, розміщені поряд один з одним (приблизно до чверті кола);

комплементарна. Створюється за допомогою двох кольорів, розташованих один навпроти одного на колі. У таких випадках найчастіше холодний колір виступає фоновим, а теплий підкреслює акценти;

роздільно-комплементарна. Поєднує особливості аналогової та комплементарної схем;

тріада. Використовується три кольори, рівновіддалені одне від одного на колі;

подвійно-комплементарна. Використовується дві пари комплементарних (протилежних) кольорів.

Для фону сайту було створено картинку зі зображенням собору Олександра Невського на фоні спокійного, ледь хмарного неба який чудово асоціюється з блакитним кольором обрамленням самого сайту. Кольором акцентів та заголовків обрано синій.

Згідно із дослідженнями психологів, синій колір завжди сприймається як холодний, такий, що віддаляється, вологий, легкий, спокійний, свіжий, чистий. Цей колір заспокоює, знижує кров’яний тиск. Він асоціюється з безтурботністю і спокоєм. У природі його відтінки займають діапазон від найсвітлішої небесної лазурі до найглибшої синьої чорноти нічного неба.

Таким чином, враховуючи описані методи та тему сайту, для нього була обрана кольорова гама із блакитно — синього кольорів. Додатково використовується білий колір.

4. Розробка статичних зображень Для розробки статичних зображень можна використати векторну або растрову графіку.

Векторна графіка (також геометричне моделювання або об'єктно-орієнтована графіка) створення зображення з сукупності геометричних примітивів (точок, ліній, кривих, полігонів), тобто об'єктів, які можна описати математичним рівняння. Переваги векторного способу:

Розмір файла, який займає описова частина, не залежить від реальної величини об'єкта, що дозволяє, використовуючи мінімальну кількість інформації, описати достатньо великий об'єкт файлом мінімального розміру.

У зв’язку з тим, що інформація про об'єкт зберігається в описовій формі, можна нескінченно збільшити графічний примітив, наприклад, дугу кола, і вона залишиться гладкою. З іншого боку, якщо крива представлена у вигляді ламаної лінії, збільшення покаже, що крива не є гладкою.

Параметри об'єктів зберігаються і можуть бути легко змінені. Також це означає, що переміщення, масштабування, обертання та інше, не погіршує якості малюнка. Більш того, зазвичай вказують розміри в апаратно-незалежних одиницях які ведуть до найкращої растерізації на растрових приладах.

При збільшенні або зменшенні об'єктів товщина ліній може бути задана постійною величиною, незалежно від реального контуру.

Растрова графіка (англ. Raster graphics) — графіка, представлена у машинній пам’яті у вигляді растру. Обробка растрової графіки здійснюється растровими графічними редакторами.

Растрова графіка застосовується у випадках, коли графічний об'єкт представлено у вигляді комбінації точок (пікселів), яким притаманні свій колір та яскравість і які певним чином розташовані у координатній сітці. Такий підхід є ефективним у разі, коли графічне зображення має багато напівтонів і інформація про колір важливіша за інформацію про форму (фотографії та поліграфічні зображення). Основними перевагами растрової графіки є:

простота автоматизованого вводу (відцифрування) зображень, фотографій, слайдів, рисунків за допомогою сканерів, відеокамер, цифрових фотоапаратів;

фотореалістичність. Можна отримувати різні ефекти, такі як туман, розмитість, тонко регулювати кольори, створювати глибину предметів.

Для розробки статичних зображень було обрано растрову графіку. Всі статичні зображення розроблені в графічному редакторі Adobe Photoshop. Для розробки зображення жмеринського вокзалу було використано фільтр «Масляна фарба», що придав даному зображені ефект намальованої картини (див. рис. 3).

Рис. 3 — Зображення вокзалу міста головної сторінки Для головної сторінки даного веб-сайту було створено зображення головної площі міста з певним фантастичними вставками що придають йому казковості, а також було застосовано фільтр «Масляна фарба», для імітації масляної картини (Рис.4).

Рис. 4 — Створення зображення в Adobe Photoshop CS6

Таким чином, в даному розділі ми розглянули розробку статичних зображень. Встановили, що для тематики сайту підходять растрові зображення.

5. Розробка динамічних елементів сайту

5.1 Створення анімованого логотипу Для створення анімованого логотипу для даного сайту, був обраний потужний відео редактор AdobeAfterEffectCS6, який пропонує нам найрізноманітніші функціональні можливості.

Adobe After Effects — програмне забезпечення компанії Adobe Systems для редагування відео і динамічних зображень, розробки композицій (композітінг), анімації і створення різних ефектів. Широко застосовується в обробці знятого відеоматеріалу (корекція кольору, пост — продакшн), при створенні рекламних роликів, музичних кліпів, у виробництві анімації (для телебачення і веб), титрів для художніх і телевізійних фільмів, а також для цілого ряду інших завдань, в яких потрібно використання цифрових відеоефектів.

Назва походить від ефекту, відомого як «стійкість (інертність) зорового відчуття», цей механізм використовує сенсорну пам’ять сітківки ока, яка дозволяє зберігати зорову інформацію протягом певного проміжку часу [7 ].

Завдяки великій бібліотеці плагінів, розроблених сторонніми компаніями, AfterEffects також використовується в поліграфії та графічному дизайні для редагування статичних графічних зображень (фотографій, зображень, згенерованих на комп’ютері і т. д.).

Спочатку After Effects був створений фірмою Company науки і мистецтва [8], версія 1.0 була випущена в січні 1993 року. Потім, в липні 1993 року, Коза разом з продуктом After Effects була придбана корпорацією Aldus; в свою чергу, в 1994 році ця компанія разом з PageMaker і After Effects була придбана компанією Adobe. Для створення анімації потрібно створити новий проект. А в ньому нову композицію.

Для створення анімації потрібно створити новий проект. А в ньому нову композицію, як показано на рисунку5.

Рис. 5 — Створення нової композиції

Після цього додаємо необхідні елементи в нову композицію. Всі ефекти і трансформації реалізуються за допомогою часових ключів, камер які імітують 3D-простір, а також ефектів в відповідному меню (рисунок 6).

Рис. 6 — Створення анімаційного логотипу Внизу знаходиться панель керування шарами зображень, тексту, відео. Посередині - екран візуалізації, збоку — інспектор файлів. Після завершення редагування анімації її можна зберегти лише в потрібному відеоформаті. Логотип був збережений у форматі.MOV — формат мультимедійного плеєра QuickTime, розроблений компанією Apple в 1991. Потім, за допомогою програми FreeVideotoGIFConverter було конвертовано в GIF-анімацію з кадровою частотою 20 FPS — рисунок 7.

Рис. 7 — Конвертування відео у GIF формат за допомогою FreeVideotoGIFConverter

сайт зображення графічний редактор Фрейми анімаційного логотипу для сайту «Жмеринка — перлина Вінниччини «наведено в додаку В.

5.2 Створення анімації пегаса Для створення анімації пегаса для веб-сторінки «Символіка», було використано програму Easy GIF Animator версії 5.2. Цією потужною програмою можна навіть людям які не розбирається в роботі з графікою, створювати високого рівня анімовані GIF файли.

Easy GIF Animator вміє працювати з усіма типами Gif анімації, при збереженні результату буде використана високий ступінь стиснення зображення, якість залишиться максимально допустимою. Програма має досить непоганий редактор зображень, присутній функціональний майстер, що відповідає за створення банерів різного рівня, є інструменти для полегшення роботи. Easy GIF Animator має досить простий користувальницький інтерфейс який показано на рисунку 8.

Рис. 8 — Користувацький інтерфейс програми Для створення анімації було використано 16 фреймів для повної і плавної імітації взльоту пегасу, який уособлює Жмеринку, як символ розвитку та нестримного руху вперед. Фрейми анімації наведенні в додатку В.

6. Оцінка обсягів зображень Швидкість завантаження сайту відіграє значну роль для користувача. На неї впливає таблиця стилів (CSS), використання скриптів, об'єм контенту та багато іншого. Але головним фактором, після швидкості та якості інтернет-з'єднання, є медіа-контент, зокрема, статичні та динамічні зображення. Щоб проаналізувати, яким буде час завантаження сторінки, необхідно проаналізувати обсяг файлів усіх графічних зображень. Враховуючи те, що для статичних зображень необхідно зберігати високу деталізацію, значно оптимізувати розмір їх файлів неможливо.

Дані, отримані в ході аналізу розміру файлів зображень, наведено в таблиці 6.1.

Таблиця 6.1 — Аналіз обсягу зображень

Загальний обсяг графічної інформації на сторінках подано в таблиці 6.2. Оскільки багато об'єктів (фонове зображення, лого сайту, фавікон) є спільними для всіх сторінок (всього 30 827 КБ), обсяг завантаження буде меншим за загальний обсяг зображень на ній, тому що їх частина знаходитиметься в кеші.

Таблиця 6.2 — Оцінка обсягу зображень на сторінках

7. Тестування роботи сайту Важливим етапом розробки веб-сайту є перевірка його працездатності сайту у вигляді спеціального тестування. Воно включає в себе такі етапи:

перегляд сайту на різних моніторах. Перегляд сайту на моніторах різних розмірів і при різному дозволі дозволяє оцінити вигляд дизайну сайту на комп’ютерах потенційних відвідувачів: чи з’являється горизонтальна смуга прокручування на маленьких екранах, чи не зміщуються елементи при різному розширенні;

перегляд сайту в різних браузерах. Дозволяє перевірити кросбраузерність сайту;

перевірка часу завантаження сайту. Як швидко завантажуються сторінки сайту на мінімальній і на максимальній швидкості підключення;

перевірка працездатності гіперпосилань. Перевірка на наявність недійсних або неправильних посилань;

перевірка коректного відображення кольорів. Дозволяє довідатися, як будуть відображені кольори сайту на моніторах потенційних відвідувачів;

перевірка відображення шрифтів, анімації й графічних зображень. Дозволяє знайти й усунути можливі проблеми із правильним відображенням зображень, анімаційних роликів і шрифтів на сайті;

перевірка властивостей кожної сторінки сайту: заголовків, ключових слів, описи або інших мета-тегів;

перевірка правопису. Вичитка контенту, перевірка тексту на наявність помилок.

У ході тестування було отримано такі результати:

при використанні моніторів із розширеннями 1024*768, 1366*768, 1920*1080 сайт працював як належне: горизонтальна смуга прокрутки не з’являлась, всі елементи вміщувались на екран. Це пов’язано із адаптованістю сайту до 1024 пікселів в ширину;

сайт працює коректно в останніх стабільних версіях усіх популярних браузерів: InternetExplorer 11.0, GoogleChrome 34.0.1847.131 m, MozillaFirefox 15.0.1, Opera 15.0.1147.153;

серед гіперпосилань немає неактивних або неправильних. Переходи на сторінки сайту здійснюються швидко та коректно;

після перевірки сайту на дисплеях із різними налаштуваннями кольорової гами виявилось, що кольори приблизно співпадають і відповідають задуму автора;

статичні та динамічні зображення відображаються коректно. Фонове зображення адаптується під розміри дисплея. Шрифт Times New Roman, яким виконано веб-сайт, входить до стандартних шрифтів операційних систем WindowsVista/7/8, тому в браузерах цих ОС він відображається коректно;

усі заголовки сторінок відображаються правильно. Фавікон і логотип сайту відображається на всіх сторінках;

в контенті не знайдено грубих синтаксичних та орфографічних помилок. Текст легко читати та сприймати.

Таким чином, у ході тестування було доведено, що веб-сайт працює безпомилково в останніх версіях популярних веб-браузерів на моніторах із розширенням 1024*768 і вище. Статичні та динамічні зображення відображаються коректно, що допомагає користувачеві краще сприймати контент.

Висновки У ході виконання курсової роботи було виконано розроблення статичних зображень в середовищі AdobePhotoshopCS6, а також розробка динамічних зображень у програмі AdobeAfterEffectsCS6 та Easy GIF Animator для веб-сайту «Жмеринка — перлина Вінниччини».

Було вибрано кольорову гаму за допомогою кола Ітена.

Було проведено багатоваріантний аналіз розв’язку задачі, розроблено структуру сайту.

Після завершення розробки було проведено комплексне тестування сайту. Виявилось, що веб-сайт працює коректно в останніх версіях веб-браузерів InternetExplorer, GoogleChrome, MozillaFirefox, Opera моніторах із різними розширеннями, а зображення відображаються правильно.

Перелік посилань

1. Глушаков С. В. Компьютерная графика. / Глушаков С. В. // Харьковский ин-т информационных технологий. — 3. изд., доп. и перераб. — Х.: Фолио. — 2006. — 390 с. — ISBN 966−03−1787−5.

2. Берри Норт «Joomla! Практическое руководство».: пер. з англ. -СПб: Символ-Плюс, 2008. — 448с., іл.

3. Дэн Рамел «Самоучитель Joomla!».: пер. з англ. — СПб.:БХВ-Петегбург, 2008. — 448с., іл.

4. Д. Н. Колисниченко «Движок для вашего сайта. CMSJoomla!Slaed. Php-Nuke. «- СПб.: БХВ-Петербург, 2008. — 368с., іл.

5. Сергеев А. Основы компьютерной графики. Adobe Photoshop и CorelDRAW — два в одном. Самоучитель / А. Сергеев, С. Кущенко — «Диалектика», 2006. — С. 544. — ISBN 5−8459−1094−3.

6. Линда Вайнман Практикум по Adobe After Effects 6. Видеомонтаж, спецэффекты, создание видеокомпозиций. — М.: «Вильямс», 2004. — С. 648. — ISBN 0−321−22 854−5

7. Adobe Systems, Incorporated. FAQ: Adobe After Effects CS5.

8. Електронний ресурс — «Вікіпедія» — вільна енциклопедія — www.wikipedia.org.

9. Романюк О. Н. Веб-дизайн і комп’ютерна графіка: навч. посіб. для студ. напр. підгот. «Прогр. інженерія» всіх спец. /

10. Аронов Д. Искусство цвета [Текст]: пер. с нем. / И. Иттен. — 2000. — 96 с. — ISBN 5−94 056−001−6.

Додаток, А Лістинг головної сторінки

body{

background-color: #ffffff;

background-image: url (/templates/tx_zenith/images/backgrounds/nevvs.jpg);background-repeat: repeat;

}

.header.title{

color: #005eff

}

#main #component.title,

#main #component.title a{

color: #005eff

}

#header{

background-color: #198dc2;

color: #0;

}

#header a{

color: #198dc2;

}

#header a: hover{

color: #198dc2;

}

#top{

background-color: #198dc2;

color: #0;

}

#top a{

color: #198dc2;

}

#top a: hover{

color: #198dc2;

}

#feature{

background-color: #dddddd;

color: #0;

}

#feature a{

color: #198dc2;

}

#feature a: hover{

color: #ffffff;

}

#main{

background-color: #ffffff;

color: #0;

}

#main a{

color: #23dee8;

}

#main a: hover{

color: #ffffff;

}

#bottom{

background-color: #ff00ff;

color: #ffffff;

}

#bottom a{

color: #26301a;

}

#bottom a: hover{

color: #ffffff;

}

#footer{

background-color: #198dc2;

color: #0;

}

#footer a{

color: #30a8f4;

}

#footer a: hover{

color: #30a8f4;

}

body{font-family: Georgia," Times New Roman", Times, serif;}h1,h3{font-family: 'Contrail One';}.title{font-family:Georgia," Times New Roman", Times, serif;}

jQuery.noConflict ();

jQuery (document).ready (function ($){

jQuery ('#roof.column').equalHeight ('.block');jQuery ('#header.column').equalHeight ('.block');jQuery ('#top.column').equalHeight ('.block');jQuery ('#utility.column').equalHeight ('.block');jQuery ('#feature.column').equalHeight ('.block');jQuery ('#main-top.column').equalHeight ('.block');jQuery ('#content-top.column').equalHeight ('.block');jQuery ('#content-bottom.column').equalHeight ('.block');jQuery ('#main-bottom.column').equalHeight ('.block');jQuery ('#bottom.column').equalHeight ('.block');jQuery ('#footer.column').equalHeight ('.block');jQuery ('#mainbody, #sidebar-a, #sidebar-b').equalHeight ();

var _options = {

_hideDelay:350,

_easing:'easeInOutElastic',

_isFancy:false

};

jQuery ('#megamenu').XpertMenu (_options);

});