/*This is the core style sheet for healthandhomefairs.com*/

body {
background-color: #FFFFFF;
color: #666666;
margin-left: auto;
margin-right: auto;
font-family: "Questrial", sans-serif;
width: 100%;
}

#header {
background-image: url('logo.png');
background-repeat: no-repeat;
background-color: #FFFFFF;
margin: 1em 0 0em 2em; 
height: 10em;
}

#nav {
float: left;
color: #5EA4AE;
background-color: #FFFFFF;
border-bottom: solid  #007DB4 6px;
width: 100%;
}

#navlist {
    position: absolute;
    right: 2.5em;
    top: 2.8em; 
    z-index: 1;
}

#navlist li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: right;
    top: 0;
}

#navlist li, #navlist a {
    height: 70px;
    display: block;
}

#about {
    left: 0px;
    width: 79px;
    background: url('nav3.png') 0 0;
}

#events {
    left: 79px;
    width: 79px;
    background: url('nav3.png') -79px 0;
}

#contact {
    left: 158px;
    width: 79px;
    background: url('nav3.png') -161px 0;
}

#about a:hover, 
#about a.current {
    background: url('nav3.png') 0 -70px;
}

#events a:hover, #events a.current {
    background: url('nav3.png') -79px -70px;
}

#contact a:hover, #contact a.current {
    background: url('nav3.png') -161px -70px;
}

#container {
width: 100%;
}

#main-text {
float: left;
background-color: #FFFFFF;
border: none;
width: 100%;
font-size: 1.5em;
padding-bottom: 3em;
}

#example li {
float: left;
margin: 0 1.1em 1.1em 0;
padding: 0 0 1em 0;
list-style: none;
font-size: .8em;
text-align: center;
color: #FFFFFF; 
line-height: 1.3em;
}

#example li, #example a {
display: block;
background-color: #5EA4AE;
padding: .15em .15em .8em .15em; 
}

#example img {
border: .1em solid #999; 
opacity: .9; 
filter: alpha(opacity=80);
}

#example img:hover {
border: .1em solid #ccc; 
opacity: 1; 
filter: alpha(opacity=100);
}

.quote {
width: 256px; 
float: left;
margin: 0 1.1em 1.1em 0;
padding: 0 .65em .65em 0;
list-style: none;
font-size: .55em;
text-align: center;
color: #FFFFFF; 
line-height: 1.3em;
display: block;
background-color: #5EA4AE;
}

.quote a:link, .quote a:visited, .quote a:hover, .quote a:active {
color: #ffffff;
text-decoration: underline;
}


h1 {
font-size: 1.2em;
text-align: left;
color: #007DB4;
font-style: none;
padding: 1.3em 0em 0 1.3em;
}

h2 {
font-size: .8em;
line-height: .9em;
color: #007DB4;
text-decoration: none;
font-style: none;
padding: .75em 1em 0 2em;
}

h3 {
font-size: .7em;
text-decoration: none;
padding: 0 1em 0 2.5em;
color: #837D90;
}

.section {
clear: both;
padding: 3em 1em 0 2em;
}

p {
font-size: .7em;
text-align: left;
line-height: 1.3em;
font-style: none;
padding: 0em 2em 0 2.3em;
}

ul {
font-size: .7em;
text-align: left;
line-height: 1.3em;
font-style: none;
padding: 0em 1em 0 4em;
}


.sup{
position: relative;
bottom: 0.5em;
font-size: 0.8em;
}

a:link {
color: #db7975;
text-decoration: underline;
}

a:visited {
color: #5EA4AE;
text-decoration: underline;
}

a:hover {
color: #d96676;
text-decoration: underline;
}

a:active {
color: #000000;
}


form {
font-size: .7em;
text-align: left;
line-height: 1.4em;
color: #666666;
}

input {
font-size: .7em;
text-align: left;
line-height: 1.3em;
color: #666666;
background-color: #FFFFFF;
}


#footer {
width: 100%;
position: fixed;
z-index: 9999;
bottom:0px;
padding: 0px;
margin: 0;
list-style-type: none;
background-color: #4F5152;
border-top: solid  #999999 2px;
color: #999999;
text-align: right;
font-size: 1em;
text-decoration: bold;
}

#footer ul, #footer li {
display: inline;
text-decoration: none;
text-align: center;
font-weight: bold;
font-size: 1em;
line-height: 2em;
}

#footer li a {
width: 2em;
padding: .5em .7em 1em .7em;
text-decoration: none;
text-align: center;
color: #999999;
}

#footer li a:hover {
width: 2em;
padding: .5em .7em 1em .7em;
text-decoration: none;
text-align: center;
color: #ffffff;
}

#footer li a.active {
width: 2em;
padding: .5em .7em 1em .7em;
text-decoration: none;
text-align: center;
color: #ffffff;
}

/* Flexslider */

.flexslider {
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
  width: 50%;
  clear: both;
  float: left;
}

.flexslider .slides {
  list-style: none;
  margin: 0;
  padding: 0;
}

.flex-direction-nav a {
  line-height: 1;
  color: white;
  font-size: 0;
}

.flex-control-nav {
  bottom: 0;
  background-color: #5EA4AE;
  padding-top: 10px;
  padding-bottom: 2px;
}

@media only screen and (max-width: 650px) {

#header {
background-image: url('logo_small.png');
background-repeat: no-repeat;
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
width: 100%;
}

#footer {
width: 100%;
position: fixed;
z-index: 9999;
bottom: 0px;
padding: 0px;
margin: 0;
list-style-type: none;
background-color: #4F5152;
border-top: solid  #999999 2px;
color: #999999;
text-align: right;
text-decoration: bold;
}

#footer li, #footer ul {
display: inline;
text-decoration: none;
text-align: center;
line-height: 2em;
font-weight: bold;
}

#footer li a {
width: 2em;
padding: .5em .7em 1em .7em;
text-decoration: none;
text-align: center;
color: #999999;
}

#footer li a:hover {
width: 2em;
padding: .5em .7em 1em .7em;
text-decoration: none;
text-align: center;
color: #ffffff;
}

#footer li a.active {
width: 2em;
padding: .5em .7em 1em .7em;
text-decoration: none;
text-align: center;
color: #ffffff;
}

}




@media only screen and (max-width: 470px) {

#nav {
float: left;
color: #5EA4AE;
background-color: #FFFFFF;
border: 0;
margin: 0;
width: 100%;
}

#navlist {
    position: relative;
    float: left;
    right: -1em;
    top: -1em; 
    z-index: 1;
    margin: 0;
    padding: 0em;
}

#navlist li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: right;
}

#navlist li, #navlist a {
    display: block;
    height: 75px;

}

#about {
    background: url('about_inactive.png');
    border-image-repeat: stretch stretch;
    border-image-slice: 100%;
    background-size: cover;
    width: 95px;
    background-position: center center;
}

#events {
    background: url('events_inactive.png');
    border-image-repeat: stretch, stretch;
    border-image-slice: 100%;
    background-size: cover;
    width: 95px;
    background-position: center center;
}

#contact {
    background: url('contact_inactive.png');
    border-image-repeat: stretch, stretch;
    border-image-slice: 100%;
    background-size: cover;
    width: 95px;
    background-position: center center;
}

#about a:hover, 
#about a.current {
    background: url('about.png');
    border-image-repeat: stretch, stretch;
    border-image-slice: 100%;
    background-size: cover;
    background-position: center center;
}

#events a:hover, #events a.current {
    background: url('events.png');
    border-image-repeat: stretch, stretch;
    border-image-slice: 100%;
    background-size: cover;
    background-position: center center;
}

#contact a:hover, #contact a.current {
    background: url('contact.png');
    border-image-repeat: stretch, stretch;
    border-image-slice: 100%;
    background-size: cover;
    background-position: center center;
}


#example img {
border: .1em solid #999; 
opacity: 1; 
filter: alpha(opacity=100);
}


h1 {
font-size: 1.2em;
text-align: left;
font-style: none;
padding: .2em 0em 0 .5em;
}

h2 {
font-size: .8em;
line-height: 1em;
text-decoration: none;
font-style: none;
padding: .5em 1em 0 .8em;
}

h3 {
font-size: .7em;
text-decoration: none;
padding: 0 1em 0 .6em;
}

.section {
clear: both;
padding: 3em 0em 0 .8em;
}

p {
font-size: .7em;
text-align: left;
line-height: 1.3em;
font-style: none;
padding: 0em 2em 0 .9em;
}

#example ul {
padding: 0em 1em 0 1em;
}

}