so I have been starting out with React and built a website, with bootstrap too, now there is this contact form that I want to make work, therefor I am using express and nodejs to do so.
The website was working, I created a separate folder "server" which stores the server.js file and the package.json
However, after I installed and created this file, I ran it and the css stopped working. I did not change anything in my app.js or css file
import React, { Component } from 'react'
import Navigation from './components/navigation';
import Header from './components/header';
import Features from './components/features';
import About from './components/about';
import Services from './components/services';
import Gallery from './components/gallery';
import Contact from './components/contact';
import JsonData from './data/data.json';
export class App extends Component {
state = {
landingPageData: {},
}
getlandingPageData() {
this.setState({landingPageData : JsonData})
}
componentDidMount() {
this.getlandingPageData();
}
render() {
return (
<div>
<Navigation />
<Header data={this.state.landingPageData.Header} />
<Features data={this.state.landingPageData.Features} />
<About data={this.state.landingPageData.About} />
<Services data={this.state.landingPageData.Services} />
<Gallery />
<Contact data={this.state.landingPageData.Contact} />
</div>
)
}
}
export default App;
Here is my css:
body, html {
font-family: 'Open Sans', sans-serif;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
color: #252525;
font-weight: 400;
width: 100% !important;
height: 100% !important;
}
h2, h3, h4 {
font-family: 'Raleway', sans-serif;
}
h2 {
text-transform: uppercase;
margin: 0 0 20px 0;
font-weight: 800;
font-size: 36px;
color: #fff;
}
h3 {
font-size: 20px;
font-weight: 600;
color: #ddd;
}
h4 {
font-size: 18px;
color: #fff;
font-weight: 600;
}
h5 {
text-transform: uppercase;
font-weight: 700;
line-height: 20px;
}
p {
font-size: 15px;
color: #fff;
}
p.intro {
margin: 12px 0 0;
line-height: 24px;
}
a {
color: #ff0000;
font-weight: 400;
}
a:hover, a:focus {
text-decoration: none;
color: #ff0000;
}
ul, ol {
list-style: none;
}
ul, ol {
padding: 0;
}
hr {
height: 2px;
width: 70px;
text-align: center;
position: relative;
background: #ff0000;
margin-bottom: 20px;
border: 0;
}
/* Navigation */
#menu {
transition: all 0.8s;
}
#menu.navbar-default {
background-color: #252525;
border-color: rgba(231, 231, 231, 0);
box-shadow: 0 0 10px rgba(0,0,0,0.15)
}
#menu a.navbar-brand h2{
font-family: 'Raleway', sans-serif;
font-size: 30px;
font-weight: 700;
margin-top: 1vh;
color: #fff;
text-transform: uppercase;
}
#menu.navbar-default .navbar-nav > li > a {
font-family: 'Lato', sans-serif;
text-transform: uppercase;
color: #e3e3e3;
font-size: 15px;
font-weight: 400;
padding: 20px 2px;
border-radius: 0;
margin: 9px 20px 0 20px;
}
#menu.navbar-default .navbar-nav > li > a:after {
display: block;
position: absolute;
left: 0;
bottom: -1px;
width: 0;
height: 2px;
background: linear-gradient(to right, #ff0000 0%, #ff0000 100%);
content: "";
transition: width 0.2s;
}
#menu.navbar-default .navbar-nav > li > a:hover:after {
width: 100%;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background-color: transparent;
}
.navbar-default .navbar-nav > .active > a:after, .navbar-default .navbar-nav > .active > a:hover:after, .navbar-default .navbar-nav > .active > a:focus:after {
display: block !important;
position: absolute !important;
left: 0 !important;
bottom: -1px !important;
width: 100% !important;
height: 2px !important;
background: linear-gradient(to right, #ff0000 0%, #ff0000 100%) !important;
content: "" !important;
transition: width 0.2s !important;
}
.navbar-toggle {
border-radius: 0;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #252525;
border-color: #ff0000;
}
.navbar-default .navbar-toggle:hover>.icon-bar {
background-color: #ff0000;
}
.section-title {
margin-bottom: 70px;
}
.section-title h2 {
position: relative;
margin-top: 10px;
margin-bottom: 15px;
padding-bottom: 15px;
}
.section-title h2::after {
position: absolute;
content: "";
background: linear-gradient(to right, #ff4e4e 0%, #ff0000 100%);
height: 4px;
width: 60px;
bottom: 0;
margin-left: -30px;
left: 50%;
}
.section-title p {
font-size: 18px;
}
.btn-custom {
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
color: #fff;
background-color: #ff0000;
background-image: linear-gradient(to right, #ff4e4e 0%, #ff0000 100%);
padding: 14px 34px;
letter-spacing: 1px;
margin: 0;
font-size: 15px;
font-weight: 500;
border-radius: 25px;
transition: all 0.5s linear;
border: 0;
}
.btn-custom:hover, .btn-custom:focus, .btn-custom.focus, .btn-custom:active, .btn-custom.active {
color: #fff;
background-image: none;
background-color: #ff0000;
}
.btn:active, .btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
a:focus, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
outline: none;
outline-offset: none;
}
/* Header Section */
.intro {
display: table;
width: 100%;
padding: 0;
background: url(../img/intro-bg.jpg) center center no-repeat;
background-color: #e5e5e5;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.intro .overlay {
background: rgba(0,0,0,0.2);
}
.intro h1 {
font-family: 'Raleway', sans-serif;
color: #fff;
font-size: 82px;
font-weight: 700;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 10px;
}
.intro h1 span {
font-weight: 800;
color: #ff0000;
}
.intro p {
color: #fff;
font-size: 22px;
font-weight: 300;
line-height: 30px;
margin: 0 auto;
margin-bottom: 60px;
}
header .intro-text {
padding-top: 350px;
padding-bottom: 200px;
text-align: center;
}
/* Features Section */
#features {
padding: 100px 0;
background: #252525;
}
#features i.fa {
font-size: 38px;
margin-bottom: 20px;
transition: all 0.5s;
color: #fff;
width: 100px;
height: 100px;
padding: 30px 0;
border-radius: 50%;
background: linear-gradient(to right, #6372ff 0%, #5ca9fb 100%);
box-shadow: 10px 10px 10px rgba(0,0,0,.05);
}
/* About Section */
#about {
padding: 100px 0;
background-color: #252525;
}
#about h3 {
font-size: 22px;
margin: 0 0 20px 0;
}
#about h2 {
position: relative;
margin-bottom: 15px;
padding-bottom: 15px;
}
#about h2::after {
position: absolute;
content: "";
background: linear-gradient(to right, #ff4e4e 0%, #ff0000 100%);
height: 4px;
width: 60px;
bottom: 0;
left: 0;
}
#about .about-text li {
margin-bottom: 6px;
margin-left: 6px;
list-style: none;
padding: 0;
color: #fff;
}
#about .about-text li:before {
content: '\f00c';
font-family: 'FontAwesome';
color: #ff0000;
font-size: 11px;
font-weight: 300;
padding-right: 8px;
}
#about img {
width: 520px;
margin-top: 10px;
background: #fff;
border-right: 0;
box-shadow: 0 0 50px rgba(0,0,0,0.06);
}
#about p {
line-height: 24px;
margin: 30px 0;
}
/* Services Section */
#services {
padding: 100px 0;
background: linear-gradient(to right, #252525 0%, #252525 100%);
color: #252525;
}
#services .service-desc {
margin: 10px 10px 20px;
}
#services h2 {
color: #fff;
}
#services .section-title h2::after {
position: absolute;
content: "";
background: #ff0000;
height: 4px;
width: 60px;
bottom: 0;
margin-left: -30px;
left: 50%;
}
#services i.fa {
font-size: 42px;
width: 120px;
height: 120px;
padding: 40px 0;
background: linear-gradient(to right, #6372ff 0%, #5ca9fb 100%);
border-radius: 50%;
color: #fff;
box-shadow: 10px 10px 10px rgba(0,0,0,.05);
}
#services h3 {
font-weight: 500;
padding: 5px 0;
color: #fff;
}
#services p {
color: rgba(255,255,255,.75);
}
#services .service-desc {
margin-bottom: 40px;
}
/* Portfolio Section */
#portfolio {
padding: 100px 0;
background-color: #252525;
}
.portfolio-item {
margin: 1px -15px 0 -14px;
padding: 0;
}
.portfolio-item .hover-bg {
overflow: hidden;
position: relative;
margin: 0;
}
.hover-bg .hover-text {
position: absolute;
text-align: center;
margin: 0 auto;
color: #fff;
background: linear-gradient(to right, #ff4e4e 0%, #ff0000 100%);
padding: 30% 0 0 0;
height: 100%;
width: 100%;
opacity: 0;
transition: all 0.5s;
}
.hover-bg .hover-text>h4 {
opacity: 0;
color: #fff;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: all 0.3s;
font-size: 18px;
letter-spacing: 1px;
font-weight: 500;
text-transform: uppercase;
}
.hover-bg:hover .hover-text>h4 {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.hover-bg:hover .hover-text {
opacity: 1;
}
/* Testimonials Section */
#testimonials {
padding: 100px 0;
background: #f6f6f6;
}
#testimonials i {
color: #e6e6e6;
font-size: 32px;
margin-bottom: 20px;
}
.testimonial {
position: relative;
padding: 20px;
}
.testimonial-image {
float: left;
margin-right: 15px;
}
.testimonial-image, .testimonial-image img {
display: block;
width: 64px;
height: 64px;
border-radius: 50%;
}
.testimonial-content {
position: relative;
overflow: hidden;
}
.testimonial-content p {
margin-bottom: 0;
font-size: 14px;
font-style: italic;
}
.testimonial-meta {
margin-top: 10px;
font-size: 15px;
font-weight: 600;
color: #666;
}
/* Team Section */
#team {
padding: 100px 0;
}
#team h4 {
margin: 5px 0;
}
#team .team-img {
width: 240px;
}
#team .thumbnail {
background: transparent;
border: 0;
}
#team .thumbnail .caption {
padding: 10px 0 0 0;
color: #888;
}
/* Contact Section */
#contact {
padding: 100px 0 60px 0;
background: linear-gradient(to right, #ff4e4e 0%, #ff4e4e 100%);
color: rgba(255,255,255,.75);
}
#contact .section-title {
margin-bottom: 40px;
}
#contact .section-title p {
font-size: 16px;
}
#contact h2 {
color: #fff;
margin-top: 10px;
margin-bottom: 15px;
padding-bottom: 15px;
}
#contact .section-title h2::after {
position: absolute;
content: "";
background: #fff;
height: 4px;
width: 60px;
bottom: 0;
left: 30px;
}
#contact h3 {
color: #fff;
margin-top: 80px;
margin-bottom: 25px;
padding-bottom: 20px;
font-weight: 400;
}
#contact form {
padding-top: 20px;
}
#contact .text-danger {
color: #cc0033;
text-align: left;
}
#contact .btn-custom {
margin: 30px 0;
background: transparent;
border: 2px solid #fff;
}
#contact .btn-custom:hover {
color: #1f386e;
background: #fff;
}
label {
font-size: 12px;
font-weight: 400;
font-family: 'Open Sans', sans-serif;
float: left;
}
#contact .form-control {
display: block;
width: 100%;
padding: 6px 12px;
font-size: 16px;
line-height: 1.42857143;
color: #444;
background-color: #fff;
background-image: none;
border: 1px solid #ddd;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
#contact .form-control:focus {
border-color: #999;
outline: 0;
-webkit-box-shadow: transparent;
box-shadow: transparent;
}
.form-control::-webkit-input-placeholder {
color: #777;
}
.form-control:-moz-placeholder {
color: #777;
}
.form-control::-moz-placeholder {
color: #777;
}
.form-control:-ms-input-placeholder {
color: #777;
}
#contact .contact-item {
margin: 20px 0;
}
#contact .contact-item span {
color: rgba(255,255,255,1);
margin-bottom: 10px;
display: block;
}
#contact .contact-item i.fa {
margin-right: 10px;
}
#contact .social {
border-top: 1px solid rgba(255,255,255,0.15);
padding-top: 50px;
margin-top: 50px;
text-align: center;
}
#contact .social ul li {
display: inline-block;
margin: 0 20px;
}
#contact .social i.fa {
font-size: 22px;
width: 48px;
height: 48px;
padding: 12px 0;
border: 2px solid #fff;
color: #fff;
border-radius: 50%;
transition: all 0.3s;
}
#contact .social i.fa:hover {
color: #608dfd;
background: #fff;
}
/* Footer Section*/
#footer {
background: #ff4e4e;
padding: 30px 0;
}
#footer p {
color: #fff;
font-size: 14px;
}
#footer a {
color: #d3d3d3;
}
#footer a:hover {
border-bottom: 2px solid #608dfd;
}
#media (max-width: 768px) {
#about img {
margin: 50px 0;
}
#menu a.navbar-brand h2{
font-family: 'Raleway', sans-serif;
font-size: 30px;
font-weight: 700;
margin-bottom: 2vh;
color: #ffffff;
text-transform: uppercase;
}
}
#media (max-width: 960px) {
#menu a.navbar-brand h2{
font-family: 'Raleway', sans-serif;
font-size: 30px;
font-weight: 700;
color: #ffffff;
margin-top: -1vh;
text-transform: uppercase;
}
#menu.navbar-default .navbar-nav > li > a {
font-family: 'Lato', sans-serif;
text-transform: uppercase;
color: #e3e3e3;
font-size: 12px;
font-weight: 400;
margin-bottom: 20px;
padding: 20px 2px;
border-radius: 0;
margin: 9px 20px 0 20px;
}
}
#media (max-width: 1200px) {
#menu a.navbar-brand h2{
font-family: 'Raleway', sans-serif;
font-size: 30px;
margin-top: 1vh;
font-weight: 700;
color: #ffffff;
text-transform: uppercase;
}
#menu.navbar-default .navbar-nav > li > a {
font-family: 'Lato', sans-serif;
text-transform: uppercase;
color: #e3e3e3;
font-size: 12px;
font-weight: 400;
margin-bottom: 20px;
padding: 20px 2px;
border-radius: 0;
margin: 9px 20px 0 20px;
}
}
Btw, app.js is inside the src folder and the style.css is inside the public folder.
Thank you in advance for any help.
I would like to create a checkbox that looks like flipswitch.
I used this CSS classes. and I used this design elements. But I could not succeded. There is something that i missed. I do not know how to manage that?
Codes in XPages:
<div class="onoffswitch">
<xp:checkBox text="Label" id="onoffswitch"
defaultChecked="true">
<span class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span>
</xp:checkBox>
</div>
CSS Class: Resources\Style Sheets
.onoffswitch {
position: relative; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #34A7C1; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 18px; margin: 6px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 56px;
border: 2px solid #999999; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
I find that when you need to put markup inside a control it mostly won't work because the XPages rendering will change or ignore it. To get around this I use plain markup with a hidden control located outside of the markup. I manage the state of the hidden control with JQuery.
Here is a working example for your FlipSwitch:
<xp:checkBox text="Label" id="checkBox1"></xp:checkBox>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch"
onclick="x$('#{id:checkBox1}').prop('checked', !(x$('#{id:checkBox1}').prop('checked')) )" />
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
The x$() function is a handly utility from Mark Roden:
function x$(idTag, param){ //Updated 18 Feb 2012
idTag=idTag.replace(/:/gi, "\\:")+(param ? param : "");
return($("#"+idTag));
}
How to adjust the width of bg color of main navigation or the whole main navigation? I try to put width:40% but the main nav and footer expanding to the right. Here's the site
I want to make the nav like this
CSS:
.main-navigation {
clear: both;
display: block;
font-weight: 300;
font-family: 'Arial', 'sans-serif';
font-size: 9px;
position: relative;
border-bottom: 3px solid #787878;
background: #787878;
margin: 0 auto;
text-align: center;
float:right;
}
.main-navigation .ak-container{
padding:0 !important;
}
.main-navigation ul {
list-style: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.main-navigation li {
display: inline-block;
position: relative;
line-height:48px;
font-size:18px;
text-transform: initial;
color:#ababab;
text-align: center;
white-space: nowrap;
padding-right:0px;
float:right;
}
.main-navigation.menu-right{
text-align: right;
}
.main-navigation.menu-center{
text-align: center;
}
.main-navigation.menu-right li{
margin-left: 25px;
margin-right:0;
}
.main-navigation.menu-center li{
margin-left: 12px;
margin-right:12px;
}
.main-navigation a {
display: block;
text-decoration: none;
color: #000;
padding: 0 18px;
}
.main-navigation ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
position: absolute;
z-index: 99999;
background: #FFF;
top: 100%;
border-bottom: 3px solid #4a4a4a;
border-top: 3px solid #4a4a4a;
transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
.main-navigation ul li.more-menu-item > ul{
right:0;
left:auto;
}
.main-navigation ul ul ul {
left: 100%;
top: 0;
border-top:none;
}
.main-navigation ul ul a {
min-width: 150px;
padding: 0;
}
.main-navigation ul ul li {
font-size: 16px;
line-height: 18px;
border-bottom: 1px solid #DDD;
margin: 0 !important;
padding:10px 15px;
display: block;
text-align: left;
text-transform: none;
}
.main-navigation ul ul li:last-child{
border-bottom: none;
}
.main-navigation li:hover > a {
background: #585858;
}
.main-navigation ul ul li:hover > a ,
.main-navigation ul ul li.current-menu-item > a {
color: #585858;
}
.main-navigation ul ul a{
color: #666;
background: none !important;
}
.main-navigation ul ul a:hover {
}
.main-navigation ul li:hover > ul {
display: block;
}
.main-navigation .current-menu-parent > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_parent > a {
background: #686868;
}
This float needs to be removed in order to center.
.main-navigation li{
float: right;
}
and then you could use something kind of like:
<div style="border-left:1px solid #000;height:"100%"></div>
inside you #menu-beta_menu div to get those vertical bars happening.
Late Update
The link in the OP is now broken, so I thought I would just add some code to achieve the desired outcome that does not rely on the original HTML & CSS
nav {
position: relative;
float: right;
display: block;
height: 100%;
font-size: 10px;
background-color: #999;
padding: 10px;
}
nav a {
position: relative;
display: inline-block;
height: 100%;
padding: 0 15px;
color: #333;
border-right: 1px solid #333;
text-decoration: none;
}
nav a:last-child {
border-right: none;
}
<nav>
<a href="index.html">
<p>HOME</p>
</a><!--
--><a href="tours-and-hikes.html">
<p>TOURS & HIKES</p>
</a><!--
--><a href="about.html">
<p>ABOUT</p>
</a><!--
--><a href="gallery.html">
<p>GALLERY</p>
</a><!--
--><a href="faq.html">
<p>FAQ's</p>
</a><!--
--><a href="contact.html">
<p>CONTACT</p>
</a>
</nav>
Please observe this stylesheet: http://jsfiddle.net/VjhJ4/12/
If you hover your mouse over the anchored menu, you will see that there is a grey/white-ish shadow to the text. Where can I change that shadow color? I have searched the stylesheet everywhere without any succeed, but surely it must be hiding there somewhere.
I will paste the stylesheet here as well (although I advice checking the fiddle):
/*------------------------------------------------*/
/*-----------------[RESET]------------------------*/
/*------------------------------------------------*/
.dd12:hover{
background:#f00 !important;
}
.dd13:hover{
background:green !important;
}
.dd14:hover{
background:blue!important;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none; }
/* remember to define focus styles! */
:focus { outline: 0; }
/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }
/*------------------------------------------------*/
/*-----------------[BASIC STYLES]-----------------*/
/*------------------------------------------------*/
body { line-height: 20px; font-family:'Droid Sans',Arial,Verdana,sans-serif; font-size: 12px; color: #48423f; background: url(images/header-bg.png); text-shadow: 1px 1px 0 #fff; }
a { text-decoration: none; color: #00b7f3; }
a:hover { text-decoration: underline; }
.clear { clear: both; }
.ui-tabs-hide { display: none; }
br.clear { margin: 0px; padding: 0px; }
h1, h2, h3, h4, h5, h6 { padding-bottom: 5px; color: #48423F; letter-spacing: -1px; line-height: 1em; font-weight: normal; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #48423F; }
h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }
p { padding-bottom: 10px; line-height: 24px; }
strong { font-weight: bold; color: #1c1c1c; }
cite, em, i { font-style: italic; }
pre, code { font-family: Courier New, monospace; margin-bottom: 10px; }
ins { text-decoration: none; }
sup, sub { height: 0; line-height: 1; position: relative; vertical-align: baseline; }
sup { bottom: 0.8em; }
sub { top: 0.3em; }
dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold; }
dd { margin-left: 1.5em;}
blockquote { margin: 1.5em; padding: 1em; color: #666666; background: #e6e6e6; font-style: italic; border: 1px solid #dcdcdc; }
blockquote p { padding-bottom: 0px; }
input[type=text],input.text, input.title, textarea, select { background-color:#fff; border:1px solid #bbb; padding: 2px; color: #4e4e4e; }
input[type=text]:focus, input.text:focus, input.title:focus, textarea:focus, select:focus { border-color:#2D3940; color: #3e3e3e; }
input[type=text], input.text, input.title, textarea, select { margin:0.5em 0; }
textarea { padding: 4px; }
img#about-image { float: left; margin: 3px 8px 8px 0px; }
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
/*------------------------------------------------*/
/*---------------[MAIN LAYOUT INFO]---------------*/
/*------------------------------------------------*/
#top-header { border-bottom: 2px solid #ffffff; position: relative; background: url(images/header-bg.png); }
#top-header .container { min-height: 46px; }
#top-shadow { background: url(images/top-shadow.png) repeat-x; width: 100%; position: absolute; top: 0px; left: 0px; height: 7px; }
#bottom-shadow { background: url(images/bottom-shadow.png) repeat-x; width: 100%; position: absolute; bottom: 0px; left: 0px; height: 4px; }
.container { text-align: left; margin: 0 auto; width: 960px; position: relative; }
#content { margin-bottom: 39px; }
ul#top-menu { float: left; padding-left: 36px; }
#search-form { float: right; background: url(images/search-bg.png) no-repeat; width: 167px; height: 27px; padding-right: 48px; margin-top: 11px; }
#search-form #searchinput { background: none; border: none; float: left; margin: 5px 7px 0 5px; width: 116px; padding-left: 9px; font-size: 11px; color: #6f6967; }
#search-form #searchsubmit { margin-top: 7px; margin-right: 7px; }
#content-area { background: #fafcfc url(images/content-area-bg.png); border-bottom: 1px solid #ffffff; }
#top-stitch { background: url(images/top-stich.png) repeat-x bottom left; height: 7px; }
#content-area .container { padding-top: 51px; }
#logo-area { text-align: center; position: relative; padding-bottom: 37px; }
p#slogan { font-size: 15px; font-family: 'Kreon', Arial, sans-serif; color: #9aa4a4; text-transform: uppercase; text-shadow: 1px 1px 1px #ffffff; }
#content { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #e2e5e5; }
#content-shadow { background: url(images/content-main-shadow.png) repeat-y; }
#content-top-shadow { background: url(images/content-top-shadow.png) repeat-x 0 1px; }
#content-bottom-shadow { background: url(images/content-bottom-shadow.png) repeat-x bottom left; }
#inner-border { border: 1px solid #ffffff; background: #fff url(images/content-bg.png); /*height: 100%;*/ }
#inner-border, #content-shadow, #content-top-shadow, #content-bottom-shadow { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
#second-menu { background: url(images/menu-bottom-bg.png) repeat-x bottom left; }
ul#secondary-menu { padding-left: 29px; margin-top:-1px; }
#controllers { margin-bottom: 27px; margin-left: 23px; position: relative; }
#controllers #active_item { background: url(images/featured-arrow.png) no-repeat; position: absolute; top: -30px; left: 36px; width: 20px; height: 10px; z-index: 100; }
.controller { display:block; float:left; position:relative; margin-right: 21px; }
.controller a { display: block; }
.controller a.active { -moz-box-shadow: 0 0 6px 2px rgba(0,0,0,0.4); -webkit-box-shadow: 0 0 6px 2px rgba(0,0,0,0.4); box-shadow: 0 0 6px 2px rgba(0,0,0,0.4); }
.controller span.overlay { background:url(images/controller-overlay.png) no-repeat; display:block; height:54px; left:0px; position:absolute; top:0px; width:95px; }
.recent-from { float: left; width: 317px; }
.recent-middle { width: 318px !important; }
.recent-last { width: 321px !important; }
.recent-last .recent-content { background: none !important; }
.main-title { background:url(images/title-bg.png) repeat-x; height: 42px; line-height: 42px; font-size: 13px !important; text-transform: uppercase; color: #48423f; text-shadow: 1px 1px 1px #ffffff; font-weight: bold; text-align: center; padding-bottom: 0; font-family: 'Droid Sans',Arial,Verdana,sans-serif !important; }
#comment-wrap .main-title { margin: 0 -37px 12px -39px; }
.recent-content { background:url(images/recent-content-bg.png) repeat-y top right;margin-top: -1px; padding: 29px 32px 38px 35px; }
.last { background: none; }
.block-post { margin-bottom: 7px; }
.block-post .thumb { display:block; float:left; position:relative; margin-right: 17px; }
.block-post .thumb span.overlay { background:url(images/post-overlay.png) no-repeat; display:block; height:41px; left:0px; position:absolute; top:0px; width:41px; }
.block-post h3.title { font-family: 'Kreon', Arial, sans-serif; font-size: 16px; text-shadow: 1px 1px 1px #ffffff; }
.block-post h3.title a { text-decoration: none; color: #48423f; }
.block-post p.meta-info { color: #b8c2c2; text-shadow: 1px 1px 1px #ffffff; margin-top: -4px; }
.block-post p.meta-info a { text-decoration: none; color: #8c9c9c; }
.block-post p.meta-info a:hover { color: #444c4c; }
a.more { background:url(images/more.png) no-repeat right bottom; color:#8c9c9c; display:block; text-shadow: 1px 1px 1px #ffffff; padding-right:6px; text-decoration:none; height: 35px; line-height: 35px; margin-left: 16%; margin-right: 16%; text-align: center;}
a.more:hover { color:#111111; }
a.more span { background:url(images/more.png) no-repeat; display:block; height: 35px; padding-left: 6px; }
.post a.more { float: right; margin-left: 0; margin-right: 0; }
.post a.more span { padding-left: 12px; padding-right: 4px; }
#left-area { float: left; width: 634px; }
#sidebar { float: left; width: 322px; }
#entries { background:url(images/recent-content-bg.png) repeat-y 633px 0px; padding: 31px 38px 27px; }
.entry { margin-bottom: 10px; }
.entry .thumb, .photostream .thumb { display:block; float:left; position:relative; margin-right: 14px; margin-top: 5px; }
.photostream .thumb { margin-right: 9px; margin-bottom: 9px; }
.entry .thumb span.overlay, .photostream .thumb span.overlay { background:url(images/entry-overlay.png) no-repeat; display:block; height:68px; left:0px; position:absolute; top:0px; width:68px; }
.photostream .thumb span.overlay { background:url(images/entry-overlay.png) no-repeat !important; height:68px !important; width:68px !important; }
.latest .thumb span.overlay, body.single .thumb span.overlay, body.page .thumb span.overlay { background:url(images/single-overlay.png) no-repeat !important; width: 201px; height: 201px; }
.entry h3.title, h1.title { font-family: 'Kreon', Arial, sans-serif; font-size: 20px; text-shadow: 1px 1px 1px #ffffff; }
h1.title { color: #48423f; font-size: 30px; }
.entry h3.title a { text-decoration: none; color: #48423f; }
.entry p.meta-info { color: #b8c2c2; text-shadow: 1px 1px 1px #ffffff; margin-top: -2px; margin-bottom: -8px; }
.entry p.meta-info a { text-decoration: none; color: #8c9c9c; }
.entry p.meta-info a:hover { color: #444c4c; }
.entry div.post-meta { background: url(images/meta-separator.png) repeat-x; margin: 8px 0 14px; }
.entry div.post-meta p.meta-info { background: url(images/meta-separator.png) repeat-x bottom left; margin-bottom: 10px; padding: 6px 0 8px; }
.latest .thumb { display:block; float:left; position:relative; margin-right: 28px; }
.latest .thumb span.overlay { background:url(images/entry-latest-overlay.png) no-repeat !important; display:block; height:131px; left:0px; position:absolute; top:0px; width:131px; }
.latest h3.title { font-family: 'Kreon', Arial, sans-serif; font-size: 24px; text-shadow: 1px 1px 1px #ffffff; }
.latest h3.title a { text-decoration: none; color: #48423f; }
.latest p.meta-info { color: #b8c2c2; text-shadow: 1px 1px 1px #ffffff; margin-top: -2px; margin-bottom: -8px; }
.latest p.meta-info a { text-decoration: none; color: #8c9c9c; }
.latest p.meta-info a:hover { color: #444c4c; }
a.read-more { float: right; color:#b8c2c2; text-shadow: 1px 1px 1px #ffffff; text-decoration:none; }
a.read-more:hover { color:#111111; }
.blog-entry { position: relative; width: 248px; padding-left: 32px; }
a.comments { background:url(images/comments-cloud.png) no-repeat; position: absolute; top: 0px; left: 0px; width: 37px; height: 33px; font-weight: bold; color:#48423f; text-decoration: none; padding: 4px 0; text-align: center; }
.blog-entry h4.title { padding-left: 25px; padding-right: 33px; font-family: 'Kreon', Arial, sans-serif; font-size: 16px; color:#48423f; text-shadow: 1px 1px 1px #ffffff; }
.blog-entry p.meta-info { padding-left: 25px; padding-right: 33px; color:#b8c2c2; text-shadow: 1px 1px 1px #ffffff; margin-top: -2px; }
.blog-entry p.meta-info a { text-decoration: none; color: #8c9c9c; }
.blog-entry p.meta-info a:hover { color: #444c4c; }
#ad-720 { text-align: center; padding-bottom: 32px; }
#bottom-stitch { background: url(images/top-stich.png) repeat-x bottom left; height: 7px; margin-bottom: 4px; }
#breadcrumbs { background: url("images/title-bg.png") repeat-x; height: 42px; line-height: 42px; padding-left: 38px; }
#breadcrumbs a { color: #b9c5c5; }
#breadcrumbs, #breadcrumbs a:hover { color: #929e9e; text-decoration: none; }
#main-content { position: relative; }
#index-top-shadow { background: url("images/content-top-shadow.png") repeat-x scroll 0 1px; position: absolute; top: 0; left: 0; height: 6px; width: 100%; border-top: 1px solid #dee0e0; }
.post ul, .comment-content ul { list-style-type: disc; padding: 10px 0px 10px 20px; }
.post ol, .comment-content ol { list-style-type: decimal; list-style-position: inside; padding: 10px 0px 10px 2px; }
.post ul li ul, .post ul li ol, .comment-content ul li ul, .comment-content ul li ol { padding: 2px 0px 2px 20px; }
.post ol li ul, .post ol li ol, .comment-content ol li ul, .comment-content ol li ol { padding: 2px 0px 2px 35px; }
.fullwidth #left-area { width: 100%; }
.fullwidth #entries { background: none; }
body.page h1.title { margin-bottom: 8px; }
.ad-468 { text-align: center; margin-bottom: 30px; }
.ad-bottom { margin-top: 35px; margin-bottom: 6px; }
/*------------------------------------------------*/
/*---------------[DROPDOWN MENU]------------------*/
/*------------------------------------------------*/
ul#top-menu li { padding-right: 2px; background: url(images/menu-bg.png) repeat-y top right; }
ul#top-menu a { font-size: 11px; color: #ffffff; text-decoration: none; text-transform: uppercase; font-weight: bold; text-shadow: 1px 1px 1px rgba(0,0,0,0.7); padding: 16px 12px 10px; }
ul#top-menu a:hover { color: #ebbe5e;}
ul#top-menu > li.current_page_item > a { color: #ebbe5e !important; }
ul#top-menu li ul, #mobile_menu { width: 170px !important; padding: 0; background: #161616 url(images/header-bg.png); top: 45px !important; -moz-box-shadow:3px 3px 7px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.1); box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.1); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border-top-left-radius: 0px;-moz-border-radius-topleft: 0px; border-top-right-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; z-index: 9999px; display: none; }
ul#top-menu ul li, #mobile_menu li a { margin: 0 !important; padding: 10px 7px 10px 25px !important; background: url(images/top-menu-separator.png) repeat-x; }
ul#top-menu ul li.first-item { background: none; }
ul#top-menu ul li a, #mobile_menu a { padding: 0 !important; width: 138px; }
ul#top-menu li:hover ul ul, ul#top-menu li.sfHover ul ul { top: -1px !important; left: 171px !important; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
ul#top-menu li.menu-gradient { background: url("images/top-shadow.png") repeat-x; position: absolute; top: 0; left: 0; width: 202px; height: 7px !important; }
ul#secondary-menu li { padding-right: 2px; background: url(images/secondary-menu-bg.png) repeat-y top right; }
ul#secondary-menu a { font-size: 13px; color: #48423f; text-decoration: none; text-transform: uppercase; font-weight: bold; padding: 22px 16px; }
ul#secondary-menu a:hover { color: #000000;}
ul#secondary-menu > li.current_page_item > a { color: #919e9e !important; }
ul#secondary-menu li ul, #category_mobile_menu { width: 360px !important; padding: 7px 0 10px; background: #fff url(images/content-bg.png); top: 55px !important; -moz-box-shadow:3px 3px 7px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.1); box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.1); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border-top-left-radius: 0px;-moz-border-radius-topleft: 0px; border-top-right-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; z-index: 9999px; display: none; }
ul#secondary-menu ul li, #category_mobile_menu li a { margin: 0 !important; padding: 8px 0 8px 30px !important; width: 150px; float: left; }
ul#secondary-menu ul li a, #category_mobile_menu a { padding: 0 !important; }
ul#secondary-menu li:hover ul ul, ul#secondary-menu li.sfHover ul ul { top: -8px !important; left: 180px !important; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
ul#secondary-menu ul li.even-item { background: none; }
Can you find it?
it's here - first rule in [BASIC STYLES]
body {
line-height: 20px;
font-family:'Droid Sans',Arial,Verdana,sans-serif;
font-size: 12px;
color: #48423f;
background: url(images/header-bg.png);
text-shadow: 1px 1px 0 #fff; /* remove this */
}