#navigation {margin-bottom: 10px;}

#content.with-banner {   
border-top: 4px double #E8E4E3;   
padding-top: 2em;   
}

/* 
Change the color at the top of Mystile theme.
*/
#top {
background: #d2d2d2;
margin: 0 -1.618em;
padding: 1.618em;
}


/* 
It's Disabled;however, Closes the gap between the Mystile main navigation bar and the horizontal divider.


@media only screen and (min-width: 768px) {
    #header {
        padding-bottom: 0px!important;
    }
}
#header #navigation,
#header hgroup {
    margin-bottom:0px;
}

*/

/* 
Header Banner 
*/


#header,
.homepage-banner {margin-bottom:0px!important;}

#navigation {
  clear: both;
  margin-bottom: 0px !important;
  display: none;
}

#header {
        float: none;
        border-bottom: none !important;
}

/*
The below code adds black double dotted line
*/ 

#header #navigation {
      width: 100%;
      border-top: 1px dashed #000000;
      border-bottom: 1px dashed #000000;
}

/* 
The below CSS code adds a shadow inset to your product thumbnail images. This is disable.


.attachment-shop_catalog {
 box-shadow: inset -3px -3px 5px rgba(0, 0, 0, 0.5) !important;
 border: 0 !important;
}
*/

/* 
The below CSS code centers Mystile widget titles and changes the color of the text.
*/

.widget h3 {
   color: #000000;
   text-align: center;
}



/* 
Style Sheet code for Image Caption Easy Plugin for WordPress
Copy and Paste this code into your WordPress theme style sheet file (style.css) then upload to its location.
You can edit any of these to suit your needs.
*/
.imagecaptioneasy {
  padding: 5px;
  font-family: arial,helvetica,sans-serif;
  font-size: 10px;
  line-height: 1.15em;
  text-align: center;
  border: 1px solid #808080;
  background: #EAEAEA;
  color: #333;
}
.imagecaptioneasy img { border: 0px solid #fff; margin-bottom:5px; }
.imagecaptioneasy span { text-align: center; }
.imagecaptioneasy_top_left { margin: 0 11px 11px 0; float: left; }
.imagecaptioneasy_top_right { margin: 0 0 11px 11px; float: right; }
.imagecaptioneasy_top_nowrap { margin: 0 0 11px 0; float: none; }
.imagecaptioneasy_left { margin: 11px 11px 11px 0; float: left; }
.imagecaptioneasy_right { margin: 11px 0 11px 11px; float: right; }
.imagecaptioneasy_nowrap { margin: 11px 0 11px 0; float: none; }

/* 
The below code centered the logo and the navigational bar.
*/

#header hgroup, #header #logo {
float: none;
}
#logo img {
margin: 0 auto;
display: block;
}

@media only screen and (min-width: 768px) {
#header #navigation {
float: left;
width: 100%;
position: relative;
}

#header #navigation ul.nav {
clear: left;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}

#navigation ul.nav li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}
#navigation ul.nav li li {
right: auto;
text-align: center;
}
}



/* 
The below code centered the navigational bar.


#navigation ul.nav li li {
right: auto;
text-align: center;
}
*/


#footer {
        background: transparent !important;
}

.footer-wrap {
        background: transparent !important;
        border-radius: 30px! important;
}

#top {
        background: transparent !important;
        border-radius: 30px;