/* ----------------------------------------------------------------------------- Prospero by Shakespeare Themes ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- TABLE OF CONTENT 1.) General 2.) Typography 3.) Shortcodes & Components 4.) Header 5.) Core 6.) Sidebar 7.) Subscribe Section 8.) Twitter Feed 9.) Bottom Panel 10.) Footer 11.) Responsive ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- 1.) GENERAL ----------------------------------------------------------------------------- */ body, #wrapper { color: #79848A; background-color: #121315; } #wrapper { background-color: #FFF; } body.boxed #wrapper { -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.5); -moz-box-shadow: 0 0 20px rgba(0,0,0,0.5); box-shadow: 0 0 20px rgba(0,0,0,0.5); } a { color: #068EF4; } /* ----------------------------------------------------------------------------- 2.) TYPOGRAPHY ----------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- HEADINGS ------------------------------------------------------------------------- */ h1, h2, h3, h4 { color: #58666E; } /* ------------------------------------------------------------------------- LISTS ------------------------------------------------------------------------- */ ul.alternating .even { color: #99A4AA; } /* ----------------------------------------------------------------------------- 3.) SHORTCODES & COMPONENTS ----------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- ACCORDION ------------------------------------------------------------------------- */ .accordion-item { -webkit-box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15); -moz-box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15); box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15); } .accordion .accordion-item.opened { border-color: #E8EFEF; background: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .accordion .opened .accordion-toggle { color: #58666E; } .accordion .accordion-toggle { color: #FFF; } .accordion .accordion-content { color: #99A4AA; } /* ------------------------------------------------------------------------- ALERT MESSAGES ------------------------------------------------------------------------- */ .alert-message { border: 0; text-shadow: 0 1px 1px rgba(255,255,255,0.6); -webkit-box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.15); -moz-box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.15); box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.15); } .alert-message.warning { color: #f45f51; background-color: #ffeae8; } .alert-message.success { color: #2aa779; background-color: #daf5e5; } .alert-message.info { color: #265e88; background-color: #e1edf9; } .alert-message.notification { color: #c88435; background-color: #fff4cf; } /* ------------------------------------------------------------------------- AUDIO PLAYER ------------------------------------------------------------------------- */ .st-audio-player, .st-audio-player .mejs-container { background-color: #25262C; } .st-audio-player .ico { color: #FFF; background-color: #F45F51; text-shadow: 0 1px 1px rgba(0,0,0,0.2); } /* ------------------------------------------------------------------------- BLOG ARTICLES ------------------------------------------------------------------------- */ /* HORIZONTAL LAYOUT */ .blog-articles.horizontal .article-date { color: #99A4AA; } .blog-articles.horizontal .article-title, .blog-articles.horizontal .article-title a { color: #F45F51; } .blog-articles.horizontal .article-title { border-color: #E8EFEF; } .blog-articles.horizontal .article-categories { border-color: #E8EFEF; } /* article image */ .blog-articles .article-image .ico { color: #FFF; background-color: #F45F51; text-shadow: 0 1px 1px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.4); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.4); box-shadow: inset 0 0 3px rgba(0,0,0,0.4); } /* article audio */ .blog-articles .audio-player, .blog-articles .audio-player .mejs-container { background-color: #121315; } .blog-articles .audio-player .ico { color: #FFF; background-color: #F45F51; } /* article quote */ .blog-articles .article-quote { color: #58666E; border-color: #E8EFEF; } .blog-articles .article-quote .source { color: #99A4AA; } .blog-articles .article-quote .ico { color: #FFF; background-color: #F45F51; text-shadow: 0 1px 1px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.4); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.4); box-shadow: inset 0 0 3px rgba(0,0,0,0.4); } /* article link */ .blog-articles .article-link a { color: #FFF; } .blog-articles .article-link { background-color: #25262C; } .blog-articles .article-link .ico { color: #FFF; background-color: #F45F51; text-shadow: 0 1px 1px rgba(0,0,0,0.2); } /* article excerpt */ .blog-articles .article-excerpt { color: #99A4AA; } /* VERTICAL LAYOUT */ .blog-articles.vertical article { border-color: #E8EFEF; } .blog-articles.vertical .article-date { color: #99A4AA; } .blog-articles.vertical .article-title, .blog-articles.vertical .article-title a { color: #F45F51; } /* ------------------------------------------------------------------------- BUTTON ------------------------------------------------------------------------- */ .button { color: #FFF; /*-webkit-box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15); -moz-box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15); box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15);*/ } .button:active { -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2); -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2); } .button.style1 { color: #FFF; background-color: #068ef4; } .button.style2 { color: #FFF; background-color: #F45F51; } /* ------------------------------------------------------------------------- CODE ------------------------------------------------------------------------- */ .st-code { background-color: #E8EFEF; } /* ------------------------------------------------------------------------- CONTENT BOX ------------------------------------------------------------------------- */ .content-box { color: #FFF; background-color: #A9B4BA; /*-webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,0.1); -moz-box-shadow: inset 0 -3px 0 rgba(0,0,0,0.1); box-shadow: inset 0 -3px 0 rgba(0,0,0,0.1);*/ } .content-box * { color: #FFF; text-shadow: 0 1px 1px rgba(0,0,0,0.15); } /* ------------------------------------------------------------------------- CTA MESSAGE FULL ------------------------------------------------------------------------- */ .cta-message-full, .cta-message-full * { color: #FFF; text-shadow: 0 1px 1px rgba(0,0,0,0.2); } /* ------------------------------------------------------------------------- DIVIDER ------------------------------------------------------------------------- */ .h-divider { border-color: #E8EFEF; } /* ------------------------------------------------------------------------- FADED ------------------------------------------------------------------------- */ .faded { color: #99A4AA; } /* ------------------------------------------------------------------------- FORMS ------------------------------------------------------------------------- */ #respond label, .wpcf7-form label, .default-form label { color: #99A4AA; } #respond input, #respond textarea, .wpcf7-form input, .wpcf7-form textarea, .default-form input, .default-form textarea { color: #7B8495; background-color: #E8EFEF; -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.05), inset 0 2px 0 rgba(0,0,0,0.03); -moz-box-shadow: inset 0 0 2px rgba(0,0,0,0.05), inset 0 2px 0 rgba(0,0,0,0.03); box-shadow: inset 0 0 2px rgba(0,0,0,0.05), inset 0 2px 0 rgba(0,0,0,0.03); } #respond input.placeholder, #respond textarea.placeholder, .wpcf7-form input.placeholder, .wpcf7-form textarea.placeholder, .default-form input.placeholder, .default-form textarea.placeholder { color: #7b8495; text-shadow: 0 1px 1px rgba(255,255,255,0.4); } .wpcf7-not-valid-tip { color: #99A4AA; } #respond .error-ico, .wpcf7-form .error-ico, .default-form .error-ico { color: #F45F51; } /* submit */ .wpcf7-form input.button { /*-webkit-box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15); -moz-box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15); box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15);*/ } .wpcf7-form input.button:active { -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15); -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15); } /* ------------------------------------------------------------------------- PAGINATION ------------------------------------------------------------------------- */ .pagination li a { color: #FFF; background-color: #A9B4BA; -webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15); -moz-box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15); box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15); } .pagination li a:active { -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2); -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2); box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2); } .pagination li.active span, .pagination .current { color: #FFF; background-color: #F45F51; -webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15); -moz-box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15); box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15); } /* ------------------------------------------------------------------------- PORTFOLIO PROJECTS ------------------------------------------------------------------------- */ .portfolio-projects .category-list li a { color: #79848A; } .portfolio-projects .category-list li:hover { background-color: #5f6f7e; text-shadow: 0 1px 1px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.4); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.4); box-shadow: inset 0 0 3px rgba(0,0,0,0.4); } .portfolio-projects .category-list li:hover a { color: #FFF; } .portfolio-projects .category-list li.active { background-color: #F45F51; text-shadow: 0 1px 1px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.4); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.4); box-shadow: inset 0 0 3px rgba(0,0,0,0.4); } .portfolio-projects .category-list li.active a { color: #FFF; } /* image */ .portfolio-projects .lightbox-ico { color: #FFF; background-color: #88979e; -webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08); -moz-box-shadow: inset 0 -3px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08); box-shadow: inset 0 -3px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08); } .portfolio-projects .lightbox-ico:hover { background-color: #F45F51; } .portfolio-projects .lightbox-ico:active { -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08); -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08); box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08); } /* info */ .portfolio-projects .project-info { color: #FFF; background-color: #88979e; -webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08); -moz-box-shadow: inset 0 -3px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08); box-shadow: inset 0 -3px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08); } .portfolio-projects .project-info a { color: #FFF; } /* ------------------------------------------------------------------------- PRICING TABLE ------------------------------------------------------------------------- */ .pricing-table .column.popular { -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); box-shadow: 0 0 10px rgba(0,0,0,0.2); } .pricing-table .column .title { background-color: #25262C; border-bottom: 4px solid #121315; } .pricing-table .column .title .label span { color: #EFEFEF; background-color: #F45F51; text-shadow: 0 1px 1px rgba(0,0,0,0.15); -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3), inset 0 0 1px rgba(255,255,255,0.3); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3), inset 0 0 1px rgba(255,255,255,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.3), inset 0 0 1px rgba(255,255,255,0.3); } .pricing-table .column .title h3 { color: #FFF; text-shadow: 0 1px 1px rgba(0,0,0,0.3); } .pricing-table .column .price { color: #FFF; background-color: #A9B4BA; text-shadow: 0 1px 1px rgba(0,0,0,0.3); } .pricing-table .column .price span { color: #4E4E4E; text-shadow: 0 1px 1px rgba(255,255,255,0.4); } .pricing-table .column .att { background-color: #F5F5F5; border-color: #E6E6E6; text-shadow: 0 1px 1px rgba(255,255,255,0.4); } .pricing-table .column .submit a { color: #FFF; background-color: #F45F51; text-shadow: 0 1px 1px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.08); -moz-box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.08); box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.08); } /* ------------------------------------------------------------------------- PROGRESS BAR ------------------------------------------------------------------------- */ .progressbar { color: #FFF; background-color: #E8EFEF; -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.05), inset 0 4px 4px rgba(0,0,0,0.04); -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.05), inset 0 4px 4px rgba(0,0,0,0.04); box-shadow: 0 1px 0 rgba(255,255,255,0.05), inset 0 4px 4px rgba(0,0,0,0.04); } .progressbar-inner { background-color: #36a8ff; } /* ------------------------------------------------------------------------- QUOTE ------------------------------------------------------------------------- */ .st-quote .ico { color: #FFF; } .st-quote blockquote { color: #FFF; -webkit-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.05), 0 2px 0 rgba(0,0,0,0.1); -moz-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.05), 0 2px 0 rgba(0,0,0,0.1); box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.05), 0 2px 0 rgba(0,0,0,0.1); } .st-quote .source { color: #99A4AA; } /* ------------------------------------------------------------------------- SEARCH FORM ------------------------------------------------------------------------- */ .search-form form > div { background-color: #121315; -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.08), inset 0 1px 0 rgba(0,0,0,0.2); -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.08), inset 0 1px 0 rgba(0,0,0,0.2); box-shadow: 0 1px 0 rgba(255,255,255,0.08), inset 0 1px 0 rgba(0,0,0,0.2); } .search-form form input { color: #9DB1BA; } .search-form button i { color: #9DB1BA; } /* ------------------------------------------------------------------------- SECTION ------------------------------------------------------------------------- */ section .section-title { color: #FFF; background-color: #1c1d1f; text-shadow: 0 1px 1px rgba(0,0,0,0.15); /*border-bottom-color: #757c37;*/ -webkit-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.2), 0 2px 0 rgba(0,0,0,0.07); -moz-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.2), 0 2px 0 rgba(0,0,0,0.07); box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.2), 0 2px 0 rgba(0,0,0,0.07); } section .section-title h2 { color: #FFF; text-align:center; } section .section-title h2 span { color: #889aa3; /*text-shadow: 0 1px 1px rgba(255,255,255,0.3);*/ } /* ------------------------------------------------------------------------- SHAKESPEARE SLIDER ------------------------------------------------------------------------- */ .shakespeare-slider { background-color: #2f3639; } /* ITEMS */ .shakespeare-slider .carousel-inner .item { color: #FFF; } .shakespeare-slider .various-content h1, .shakespeare-slider .various-content h2, .shakespeare-slider .various-content h3, .shakespeare-slider .various-content h4, .shakespeare-slider .various-content h5, .shakespeare-slider .various-content h6 { color: #FFF; /*text-shadow: 0 1px 1px rgba(0,0,0,0.3); */ } /* CONTROLS */ .shakespeare-slider .nav button, .shakespeare-slider button.pause { color: #FFF; background-color: #F45F51; -webkit-box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.25); -moz-box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.25); box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.25); } .shakespeare-slider .nav button:active, .shakespeare-slider button.pause:active { -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.25); -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.25); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.25); } .shakespeare-slider button.pause { color: #FFF; background-color: #F45F51; } .shakespeare-slider button.pause.paused { background-color: #068EF4; } /* INDICATOR */ .shakespeare-slider .indicator .progressbar { background-color: #FFF; } /* ------------------------------------------------------------------------- TABS ------------------------------------------------------------------------- */ .tabs .tab { color: #58666E; background-color: #E8EFEF; border-color: #E8EFEF; } .tab-content .item { color: #99A4AA; border-color: #E8EFEF; } .tabs .tab.active { border-bottom-color: #FFF; } /* ------------------------------------------------------------------------- TEAM SECTION ------------------------------------------------------------------------- */ section.team .section-header-inner * { color: #FFF; text-shadow: 0 1px 1px rgba(0,0,0,0.3); } section.team .member-list { -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } section.team .team-member { background-color: #E8EFEF; -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.08); -moz-box-shadow: 0 2px 0 rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.08); box-shadow: 0 2px 0 rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.08); } section.team .team-member .thumb img { box-shadow: 0px 0px 0px 7px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 0px 7px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 0px 7px rgba(0,0,0,0.2); } section.team .team-member h3 { text-shadow: 0 1px 1px rgba(255,255,255,0.4); } section.team .team-member .description { color: #99A4AA; text-shadow: 0 1px 1px rgba(255,255,255,0.4); } /* ----------------------------------------------------------------------------- 4.) HEADER ----------------------------------------------------------------------------- */ header { background-color: #2b2b2a; border-bottom-color: #1C1D1F; } /* ------------------------------------------------------------------------- LANGBAR ------------------------------------------------------------------------- */ #langbar { color: #FFF; background-color: #121315; -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,0.08); -moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,0.08); box-shadow: inset 0 -1px 0 rgba(255,255,255,0.08); } #langbar a { color: #a3a3a3; } /* ------------------------------------------------------------------------- MAIN NAV ------------------------------------------------------------------------- */ header .nav-toggle { color: #FFF; background-color: #F45F51; -webkit-box-shadow: inset 0 -4px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.25); -moz-box-shadow: inset 0 -4px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.25); box-shadow: inset 0 -4px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.25); } header .nav-toggle:active { -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.25); -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.25); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.25); } nav.main > ul > li > a { color: #BCC4CF; } nav.main > ul > li > a:hover, nav.main > ul > li.active > a { color: #FFF; } nav.main .indicator { background-color: #F45F51; } /* lvl 2 */ nav.main > ul > li > ul { background-color: #eb5c4e; -webkit-box-shadow: inset 0 -4px 0 rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 0 1px rgba(255,255,255,0.2), 0 0 6px rgba(0,0,0,0.08); -moz-box-shadow: inset 0 -4px 0 rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 0 1px rgba(255,255,255,0.2), 0 0 6px rgba(0,0,0,0.08); box-shadow: inset 0 -4px 0 rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 0 1px rgba(255,255,255,0.2), 0 0 6px rgba(0,0,0,0.08); } nav.main > ul > li > ul li { border-color: rgba(255,255,255,0.08); } nav.main > ul > li > ul a { color: #FFF; text-shadow: 0 1px 1px rgba(0,0,0,0.1); } nav.main > ul > li > ul a:hover { background-color: rgba(0,0,0,0.1); text-shadow: none; -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3); -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.15); } /* lvl 3 */ nav.main > ul ul ul { background-color: #e1584b; -webkit-box-shadow: inset 0 -4px 0 rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 0 1px rgba(255,255,255,0.2), -3px 3px 3px rgba(0,0,0,0.08); -moz-box-shadow: inset 0 -4px 0 rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 0 1px rgba(255,255,255,0.2), -3px 3px 3px rgba(0,0,0,0.08); box-shadow: inset 0 -4px 0 rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 0 1px rgba(255,255,255,0.2), -3px 3px 3px rgba(0,0,0,0.08); } nav.main > ul ul ul li { border-color: rgba(255,255,255,0.08); } nav.main > ul ul ul a { color: #FFF; } nav.main > ul ul ul a:hover { background-color: rgba(0,0,0,0.1); -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3); -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.15); } /* ----------------------------------------------------------------------------- 5.) CORE ----------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- PAGE TITLE ------------------------------------------------------------------------- */ .page-title { color: #FFF; background-color: #1c1d1f; text-shadow: 0 1px 1px rgba(0,0,0,0.15); /*border-bottom-color: #c34c41;*/ -webkit-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.2), 0 2px 0 rgba(0,0,0,0.07); -moz-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.2), 0 2px 0 rgba(0,0,0,0.07); box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.2), 0 2px 0 rgba(0,0,0,0.07); } .page-title h1, .page-title h2 { color: #FFF; } .page-title h1 span, .page-title h2 span { color: #fff; text-shadow: 0 1px 1px rgba(255,255,255,0.3); } /* ------------------------------------------------------------------------- BLOG PAGE ------------------------------------------------------------------------- */ .sticky { background-color: #E8EFEF; } .blog-page .sticky .article-title { border-color: #D8DFDF; } .blog-page .sticky .article-info { border-color: #D8DFDF; } /* ARTICLE TITLE */ .blog-page .article-title, .blog-page .article-title a { color: #F45F51; } .blog-page .article-title { border-color: #E8EFEF; } /* ARTICLE INFO */ .blog-page .article-info { border-color: #E8EFEF } .blog-page .article-info li { color: #99A4AA; } /* ARTICLE IMAGE */ article.image .article-image .ico { color: #FFF; background-color: #F45F51; text-shadow: 0 1px 1px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.4); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.4); box-shadow: inset 0 0 3px rgba(0,0,0,0.4); } /* ARTICLE AUDIO */ article.audio .audio-player, article.audio .audio-player .mejs-container { background-color: #121315; } article.audio .audio-player .ico { color: #FFF; background-color: #F45F51; text-shadow: 0 1px 1px rgba(0,0,0,0.2); } /* ARTICLE QUOTE */ article.quote .article-quote { color: #58666E; border-color: #E8EFEF; } article.quote .article-quote .source { color: #99A4AA; } article.quote .article-quote .ico { color: #FFF; background-color: #F45F51; text-shadow: 0 1px 1px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.4); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.4); box-shadow: inset 0 0 3px rgba(0,0,0,0.4); } /* ARTICLE LINK */ article.link .article-link a { color: #FFF; } article.link .article-link { background-color: #25262C; } article.link .article-link .ico { color: #FFF; background-color: #F45F51; text-shadow: 0 1px 1px rgba(0,0,0,0.2); } /* ARTICLE EXCERPT */ .blog-page .article-excerpt { color: #99A4AA; } /* PAGINATION */ .blog-page .pagination { border-color: #E8EFEF; } /* ------------------------------------------------------------------------- ARTICLE COMMENTS ------------------------------------------------------------------------- */ /* COMMENT LIST */ .bypostauthor { background-color: #292e34; -webkit-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.05), 0 2px 0 rgba(0,0,0,0.1); -moz-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.05), 0 2px 0 rgba(0,0,0,0.1); box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.05), 0 2px 0 rgba(0,0,0,0.1); } .article-comments .comment-header { background-color: #E8EFEF; -webkit-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.05), 0 2px 0 rgba(0,0,0,0.1); -moz-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.05), 0 2px 0 rgba(0,0,0,0.1); box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.05), 0 2px 0 rgba(0,0,0,0.1); } .article-comments .bypostauthor .comment-header { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .article-comments .comment-author { color: #667279; } .article-comments .comment-author a { color: #ff004e; } .article-comments .comment-meta a { color: #99a4aa; } .article-comments .comment-tools a { color: #068EF4; } .article-comments .comment-content { color: #8c949f; } /* COMMENT FORM */ #respond { background-color: #FAFAFA; border: 1px dashed #E8EFEF; -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } #reply-title a { color: #EA0A40; } #respond input#submit { color: #FFF; background-color: #F45F51; -webkit-box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.25); -moz-box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.25); box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.25); } #respond input#submit:active { -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.25); -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.25); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.25); } /* ------------------------------------------------------------------------- PROJECT DETAIL ------------------------------------------------------------------------- */ /* project media */ .project-detail .project-images-nav button { color: #FFF; background-color: #25262C; } /* project data */ .project-detail .project-parameters { padding: 0; color: #99A4AA; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .project-detail .project-parameters li { border-color: #E8EFEF; } .project-detail .project-parameters h3 { color: #58666E; } .project-detail .project-description { color: #99A4AA; } /* project nav */ .project-nav { background-color: #FAFAFA; border-top: 1px dashed #E8EFEF; } .project-nav a { color: #FFF; background-color: #A9B4BA; -webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15); -moz-box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15); box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15); } .project-nav a:hover { background-color: #F45F51; } .project-nav a:active { -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2); -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2); box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2); } /* ------------------------------------------------------------------------- SEARCH RESULTS ------------------------------------------------------------------------- */ .search-results article h2 a { color: #F45F51; } .search-results article .article-excerpt { color: #99A4AA; } .search-results .search-form form > div { color: #7B8495; background-color: #E8EFEF; -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.05), inset 0 2px 0 rgba(0,0,0,0.03); -moz-box-shadow: inset 0 0 2px rgba(0,0,0,0.05), inset 0 2px 0 rgba(0,0,0,0.03); box-shadow: inset 0 0 2px rgba(0,0,0,0.05), inset 0 2px 0 rgba(0,0,0,0.03); } /* ----------------------------------------------------------------------------- 6.) SIDEBAR ----------------------------------------------------------------------------- */ #sidebar { background-color: #25262C; -webkit-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.05), 0 2px 0 rgba(0,0,0,0.1); -moz-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.05), 0 2px 0 rgba(0,0,0,0.1); box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.05), 0 2px 0 rgba(0,0,0,0.1); } /* ------------------------------------------------------------------------- WIDGETS ------------------------------------------------------------------------- */ #sidebar .widget h3, #sidebar .widget h3 a { color: #ebeff2; } #sidebar .widget .widget-content { font-size: 0.9em; } #sidebar .widget .widget-content > ul > li, #sidebar .widget .widget-content > div > ul > li { border-color: #2D3238; } #sidebar .widget .widget-content a { color: #9DB1BA; } /* links type 2 */ #sidebar .widget.widget_recent_comments li a, #sidebar .widget.widget_recent_entries li a, #sidebar .widget.widget_rss li a, #sidebar .widget.widget_tag_cloud a { color: #36A8FF; } /* count */ #sidebar .widget.widget_archive .widget-content > ul > li, #sidebar .widget.widget_categories .widget-content > ul > li, #sidebar .widget.widget_links li { color: #EEE; } /* selectbox */ #sidebar .widget .selectbox button { color: #FFF; } #sidebar .widget .selectbox { background-color: #068EF4; } #sidebar .widget .selectbox li a { color: #FFF; } #sidebar .widget .selectbox li a span { color: #EEE; } /* ----------------------------------------------------------------------------- 7.) SUBSCRIBE SECTION ----------------------------------------------------------------------------- */ #subscribe { background-color: #FAFAFA; border-top: 1px dashed #E8EFEF; } /* ----------------------------------------------------------------------------- 8.) TWITTER FEED ----------------------------------------------------------------------------- */ #twitter-feed { color: #ecf1f4; background-color: #444f60; border-color: #333b48; -webkit-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.05), 0 2px 0 rgba(0,0,0,0.1); -moz-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.05), 0 2px 0 rgba(0,0,0,0.1); box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.05), 0 2px 0 rgba(0,0,0,0.1); } #twitter-feed .tweets a { color: #FFF; } #twitter-feed .ico { color: #FFF; } #twitter-feed .tweets .date a { color: #FFF; } /* ----------------------------------------------------------------------------- 9.) BOTTOM PANEL ----------------------------------------------------------------------------- */ #bottom-panel { color: #afbbc1; background: #25262C; border-color: #1b1c20; -webkit-box-shadow: inset 0 5px 10px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 5px 10px rgba(0,0,0,0.3); box-shadow: inset 0 5px 10px rgba(0,0,0,0.3); } /* ------------------------------------------------------------------------- WIDGETS ------------------------------------------------------------------------- */ #bottom-panel .widget h3, #bottom-panel .widget h3 a { color: #FFF; border-color: #595e61; text-shadow: 0 1px 1px rgba(0,0,0,0.4); } #bottom-panel .widget h3 span.decor { background: #ff004e; } #bottom-panel .widget .widget-content > ul > li, #bottom-panel .widget .widget-content > div > ul > li { border-color: #363B3E; } #bottom-panel .widget .widget-content a { color: #9DB1BA; } /* links type 2 */ #bottom-panel .widget.widget_recent_comments li a, #bottom-panel .widget.widget_recent_entries li a, #bottom-panel .widget.widget_rss li a, #bottom-panel .widget.widget_tag_cloud a { color: #FFF; } /* count */ #bottom-panel .widget.widget_archive .widget-content > ul > li, #bottom-panel .widget.widget_categories .widget-content > ul > li, #bottom-panel .widget.widget_links li { color: #FF004E; } /* selectbox */ #bottom-panel .widget .selectbox button { color: #FFF; } #bottom-panel .widget .selectbox { background: #121315; } #bottom-panel .widget .selectbox li a { color: #FFF; } #bottom-panel .widget .selectbox li a span { color: #ff004e; } /* SEARCH WIDGET */ #bottom-panel .widget.widget_search input#s { color: #99a4aa; } #bottom-panel .widget.widget_search form > div { background-color: #121315; -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.08), inset 0 1px 0 rgba(0,0,0,0.2); -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.08), inset 0 1px 0 rgba(0,0,0,0.2); box-shadow: 0 1px 0 rgba(255,255,255,0.08), inset 0 1px 0 rgba(0,0,0,0.2); } #bottom-panel .widget.widget_search button i { color: #99a4aa; } /* TAGS WIDGET */ #bottom-panel .widget.widget_tag_cloud a { color: #FFF; background-color: #F45F51; border-color: #444a4d; -webkit-box-shadow: inset 0 -4px 0 rgba(0,0,0,0.3), inset 0 0 1px rgba(255,255,255,0.1); -moz-box-shadow: inset 0 -4px 0 rgba(0,0,0,0.3), inset 0 0 1px rgba(255,255,255,0.1); box-shadow: inset 0 -4px 0 rgba(0,0,0,0.3), inset 0 0 1px rgba(255,255,255,0.1); } #bottom-panel .widget.widget_tag_cloud a:active { border-color: #444a4d; -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3), inset 0 0 1px rgba(255,255,255,0.1); -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3), inset 0 0 1px rgba(255,255,255,0.1); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3), inset 0 0 1px rgba(255,255,255,0.1); } /* ----------------------------------------------------------------------------- 10.) FOOTER ----------------------------------------------------------------------------- */ footer { color: #8c949f; background-color: #121315; -webkit-box-shadow: inset 0 5px 10px rgba(0,0,0,0.2); -moz-box-shadow: inset 0 5px 10px rgba(0,0,0,0.2); box-shadow: inset 0 5px 10px rgba(0,0,0,0.2); } footer a { color: #FFF; } footer .social a { color: #FFF; background-color: #F45F51; -webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08); -moz-box-shadow: inset 0 -3px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08); box-shadow: inset 0 -3px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08); } footer .social a:active { -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08); -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08); box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08); } /* ----------------------------------------------------------------------------- 11.) RESPONSIVE ----------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- TABLET LANDSCAPE ------------------------------------------------------------------------- */ @media (max-width: 979px) { .pricing-table .column.popular { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } nav.main > ul > li { border-color: #121315; } } /* ------------------------------------------------------------------------- TABLET PORTRAIT ------------------------------------------------------------------------- */ @media (max-width: 767px) { body.boxed { background-image: none; } }