CSS Help, moving borders & removing background color? Options

[romyc]

Hi ! I'm editing a website for a friend, and I just wanted to ask for help with two things. The site is http://blog.suziechaney.com
My problem is, I would like for when you hover over the nav links, the grey border doesn't move, and the bottom gold border on the links sits on top of the grey border.
Also, I can't seem to find where in the code I take out the black background on the widget titles ?

Here is the css

CODE

/* -----------------------------------------
    Table of Contents
--------------------------------------------

.. 01. General
.. 02. Main Navigation
.. 03. Header
.. 04. Modules
.. 05. Footer
.. 06. Comments
.. 07. Widgets Styling
.. 08. WordPress defaults
.. 09. Mobile Menu
.. 10. External Plugins
.. 11. Global Mediaqueries

*/
/* -----------------------------------------
    01. General
----------------------------------------- */
/* Basic Typography
=================================== */
body {
  line-height: 1.625;
  font-size: 13px;
  font-weight: normal;
  background: #fff;
  color: #626262;
  line-height:250%;
  font-family: "Lato", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Playfair Display", serif;
  font-weight: 300;
  line-height: normal;
  margin: 0 0 15px 0;
  -ms-word-wrap: break-word;
  word-wrap: break-word;
}

h1 {
  font-size: 26px;
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 22px;
}

h4 {
  font-size: 20px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

p {
  margin: 0 0 20px 0;
}

img {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

a {
  outline: none;
  color: #cc9966;
  text-decoration: none;
}
a:hover, a:focus {
  color: #626262;
  outline: none;
  text-decoration: none;
}
a:active {
  outline: none;
}

.group:before, .group:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.group:after {
  clear: both;
}

/* General Element Styling
=================================== */
/* Reset figure margin from normalize.css */
figure {
  margin: 0;
}

/* Lists */
ul, ol {
  padding-left: 20px;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

dl {
  margin: 0 0 20px;
}

dt {
  font-weight: bold;
}

dd {
  margin: 0 0 15px;
}

/* Blockquotes */
blockquote {
  margin: 20px 0;
  padding-left: 20px;
  font-family: "Lora", serif;
  font-size: 18px;
  font-style: italic;
  font-weight: normal;
}
blockquote cite {
  display: block;
  font-weight: bold;
  font-style: italic;
  margin: 10px 0 0;
  color: rgba(51, 51, 51, 0.8);
  font-size: 14px;
}

/* Tables */
table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.entry-content table,
.comment-content table {
  border-width: 1px 0 0 1px;
  margin-bottom: 24px;
}
.entry-content th:first-child,
.entry-content td:first-child,
.comment-content th:first-child,
.comment-content td:first-child {
  padding-left: 0;
}
.entry-content th,
.entry-content td,
.comment-content th,
.comment-content td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.entry-content caption,
.entry-content th,
.entry-content td,
.comment-content caption,
.comment-content th,
.comment-content td {
  font-weight: normal;
  text-align: left;
  padding: 5px;
  vertical-align: middle;
}
.entry-content th,
.comment-content th {
  border-width: 0 1px 1px 0;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 85%;
}
.entry-content td,
.comment-content td {
  border-width: 0 1px 1px 0;
}

/* Code */
code, kbd, tt, var, samp, pre {
  font-family: monospace, serif;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  font-style: normal;
}

pre {
  padding: 15px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Various */
address {
  margin: 0 0 15px;
}

.sr-only,
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Embeds and iframes
=================================== */
embed,
iframe,
object,
video,
audio {
  margin-bottom: 15px;
  max-width: 100%;
}

p > embed,
p > iframe,
p > object,
p > audio,
span > embed,
span > iframe,
span > object,
span > audio {
  margin-bottom: 0;
}

#map,
.map * {
  max-width: none !important;
}

/* General Form Styling
=================================== */
label {
  display: block;
  margin: 0 0 2px;
  font-weight: normal;
}

input,
textarea {
  transition: all 0.18s;
  display: inline-block;
  font-size: inherit;
  letter-spacing: 2px;
  width: 100%;
  max-width: 100%;
  height: 36px;
  padding: 8px 12px 6px 15px;
  line-height: normal;
  background-color: #ebebeb;
  background-image: none;
  border: none;
}
input:focus, input:hover,
textarea:focus,
textarea:hover {
  outline: none;
  background-color: #eee;
}
@media (max-width: 767px) {
  input,
  textarea {
    width: 100%;
  }
}

input[type="search"] {
  /* Restoring box-sizing */
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

textarea {
  height: auto;
}

select {
  max-width: 100%;
}

input[type="checkbox"],
input[type="radio"] {
  margin: 4px 0 0;
  margin-top: 1px \9;
  line-height: normal;
  width: auto;
  height: auto;
}

fieldset {
  margin: 0 0 15px;
  padding: 0;
  border: none;
  min-width: 0;
}

/* Placeholder text color */
::-webkit-input-placeholder {
  color: rgba(51, 51, 51, 0.3);
  font-weight: normal;
  font-size: 11px;
  opacity: 1;
  text-transform: uppercase;
}

:-moz-placeholder {
  color: rgba(51, 51, 51, 0.3);
  font-weight: normal;
  font-size: 11px;
  opacity: 1;
  text-transform: uppercase;
}

::-moz-placeholder {
  color: rgba(51, 51, 51, 0.3);
  font-weight: normal;
  font-size: 11px;
  opacity: 1;
  text-transform: uppercase;
}

:-ms-input-placeholder {
  color: rgba(51, 51, 51, 0.3);
  font-weight: normal;
  font-size: 11px;
  opacity: 1;
  text-transform: uppercase;
}

/* Buttons
=================================== */
.btn, .comment-reply-link,
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  display: inline-block;
  font-weight: normal;
  margin: 0;
  line-height: normal;
  border: none;
  box-shadow: none;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.18s background-color ease, color 0.18s ease, 0.18s border-color ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: auto;
  height: auto;
  background-image: none;
  padding: 12px 25px 11px;
  font-size: 11px;
  letter-spacing: 2px;
  background: #b49543;
  color: #FFF;
}
.btn:active, .comment-reply-link:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  outline: none;
}
.btn:hover, .comment-reply-link:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  background: #161616;
  color: #FFF;
  text-decoration: none;
}
.btn:focus, .comment-reply-link:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
button:focus {
  outline: none;
}

/* Magnific Popup Overrides
=================================== */
.mfp-bg {
  background-color: #FFF;
}

.mfp-preloader {
  color: #FFF;
}
.mfp-preloader a, .mfp-preloader a:hover {
  color: #161616;
}

.mfp-container:not(.mfp-s-error) .mfp-preloader {
  width: 40px;
  height: 40px;
  background-color: #FFF;
  border-radius: 100%;
  -webkit-animation: scaleout 1.0s infinite ease-in-out;
  animation: scaleout 1.0s infinite ease-in-out;
  background-color: #161616;
  text-indent: -999em;
  margin: 0 auto;
}

button.mfp-close,
button.mfp-arrow {
  border: none;
  opacity: 1;
}
button.mfp-close:hover,
button.mfp-arrow:hover {
  background: none;
  border: none;
}

.mfp-close-btn-in .mfp-close {
  color: #FFF;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #161616;
}

.mfp-arrow {
  line-height: 0.3;
}
.mfp-arrow:before, .mfp-arrow:after {
  border: none;
}
.mfp-arrow:after {
  font-family: FontAwesome;
  font-size: 70px;
  color: #161616;
}

.mfp-arrow-right:after,
.mfp-arrow-right .mpf-a {
  content: "\f105";
}

.mfp-arrow-left:after,
.mfp-arrow-left .mpf-a {
  content: "\f104";
}

/* Text Helpers
=================================== */
.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-justified {
  text-align: justify;
}

.text-uc {
  text-transform: uppercase;
}

.img-round {
  border-radius: 50%;
}

/* -----------------------------------------
    02. Main Navigation
----------------------------------------- */
.nav {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform:uppercase;
}

.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.navigation:before, .navigation:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.navigation:after {
  clear: both;
}
.navigation li {
  position: relative;
  z-index: 1000;
}
.navigation > li {
  float: left;
}
.navigation ul {
  position: absolute;
  z-index: 300;
  top: -999em;
}
.navigation li:hover > ul,
.navigation .sfHover > ul {
  top: 34px;
}
.navigation li li:hover > ul,
.navigation li .sfHover > ul {
  top: -2px;
  left: 100%;
}
.navigation li li li:hover > ul,
.navigation li li .sfHover > ul {
  top: 0;
  left: 100%;
}
.navigation a, .navigation .navigation a:visited {
  display: block;
  white-space: nowrap;
}
.navigation a {
  color:#626262;
}
.navigation a:hover,
.navigation .sfHover > a {
border-bottom: 3px solid #cc9966;
padding-bottom: 10px;
}
.navigation > li > a {
  /* First Level Menu Link Styles */
  margin-right: 30px;
}
.navigation > li ul a {
  background: #fff;
  padding: 8px;
  margin-bottom: 1px;
  letter-spacing: 1px;
  font-size: 10px;
  /* All Other Menu Level Link Styles */
}
.navigation > li ul a:hover,
.navigation > li ul .sfHover > a {
  background: #ebebeb;
  color: #161616;
  /* All Other Level Menu Link Hover Styles */
}
.navigation > li > a:hover,
.navigation > li.sfHover > a,
.navigation > li.sfHover > a:active {
  color: #b49543;
  /* WordPress First Level Current/Ancestor Hover Page Styles */
}
.navigation ul {
  min-width: 200px;
  background: #ebebeb;
  padding: 2px;
  /* All Lower Level Menu Container Styles */
}
.navigation a.sf-with-ul {
  padding-right: 10px;
  position: relative;
  /* Styling for navigation arrows  ---------- */
}
.navigation.sf-arrows .sf-with-ul:after {
  content: '\f078';
  font-family: FontAwesome;
  position: absolute;
  top: 41%;
  right: -2px;
  margin-top: -6px;
  font-size: 8px;
  font-weight: normal;
}
.navigation.sf-arrows ul .sf-with-ul:after {
  right: 8px;
  top: 51%;
  content: "\f054";
  /* Styling for right facing arrows  ---------- */
}

.mobile-nav-trigger {
  font-size: 16px;
  line-height: 1;
  display: none;
}
.mobile-nav-trigger:active, .mobile-nav-trigger:focus {
  color: #333;
}

/* -----------------------------------------
    03. Header
----------------------------------------- */
.site-bar {
  border-bottom: solid 1px #ebebeb;
  padding: 10px 0;
  z-index: 10000000;
}
.site-bar .nav {
  float: left;
  width: 65%;
  padding-top: 3px;
}

.site-logo {
  padding: 50px;
  text-align: center;
  width:100%;
}
.site-logo a {
  display: block;
  text-align:center;
}
.site-logo p {
  font-size: 10px;
  color: #7e7e7e;
  letter-spacing: 3px;
  margin-bottom: 0;
}

/* -----------------------------------------
    04. Modules
----------------------------------------- */
/* Content Area
=================================== */
#site-content #content {
  padding-top: 30px;
}

/* Slick Slider
=================================== */
.slick-slider {
  position: relative;
  max-height: 550px;
  overflow: hidden;
}
.slick-slider.home-slider {
  margin-bottom: 30px;
}
.slick-slider button {
  position: absolute;
  top: 50%;
  z-index: 100;
  display: block;
  height: 50px;
  width: 50px;
  line-height: 0;
  font-size: 0;
  cursor: pointer;
  background: #fff;
  color: #b49543;
  margin-top: -25px;
  padding: 0;
  border-radius: 0;
  outline: none;
  font-family: 'FontAwesome';
}
.slick-slider button:hover, .slick-slider button:focus {
  background: #fff;
}
.slick-slider button.slick-prev {
  left: 0;
}
.slick-slider button.slick-prev:before {
  content: "\f053";
  font-size: 11px;
  position: absolute;
  top: 26px;
  left: 22px;
}
.slick-slider button.slick-next {
  right: 0;
}
.slick-slider button.slick-next:before {
  content: "\f054";
  font-size: 11px;
  position: absolute;
  top: 26px;
  left: 22px;
}

.slide {
  position: relative;
  outline: 0;
}
.slide .slide-content {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 570px;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 50px;
  text-align: center;
}
.slide .slide-content .entry-title {
  padding: 0;
}
.slide .slide-content .read-more {
  margin-top: 20px;
}

/* Section titles
=================================== */
#site-section {
  text-align: center;
  padding: 30px 0;
}
#site-section h2 {
  margin-bottom: 0;
  letter-spacing: 10px;
}

/* Social Icons
=================================== */
.socials {
  list-style: none;
  margin: 0;
  padding: 0;
  float: right;
}
.socials li {
  float: left;
}
.socials li a {
  display: block;
  font-size: 13px;
  padding: 2px 5px;
  margin-left: 15px;
}

/* Site Tools
=================================== */
.site-tools {
  float: right;
  width: 35%;
}
.site-tools form {
  width: 300px;
  float: right;
}
.site-tools input[type="search"] {
  border: none;
  background: #ffffff;
  border-radius: 50px;
  height: 25px;
  text-transform: uppercase;
  color: #fff;
  font-size: 11px;
}
.site-tools ::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-weight: normal;
  opacity: 1;
}
.site-tools :-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-weight: normal;
  opacity: 1;
}
.site-tools ::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-weight: normal;
  opacity: 1;
}
.site-tools :-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-weight: normal;
  opacity: 1;
}

/* Entry Styles
=================================== */
.entry {
  margin: 0 0 30px;
  position: relative;
}
.entry figure:not(.gallery-item) {
  margin-bottom: 20px;
  position: relative;
}
.entry .fluid-width-video-wrapper {
  margin-bottom: 20px;
}

.entry-title {
  text-align: center;
  position: relative;
  margin: 0 0 10px 0;
  padding: 0 60px;
}
.entry-title a:hover {
  color: #b49543;
}

.entry-meta {
  font-size: 10px;
  letter-spacing: 2px;
  text-align: center;
  color: #545454;
  margin-bottom: 10px;
}
.entry-meta p {
  margin: 0;
}
.entry-meta a {
  color: #b49543;
}
.entry-meta a:hover {
  color: #161616;
}

.entry-categories {
  display: inline-block;
}

.entry-category,
.entry-categories a {
  display: inline-block;
  color: #161616;
  font-weight: bold;
  margin-right: 10px;
}
.entry-category:last-child,
.entry-categories a:last-child {
  margin-right: 0;
}

.entry-date {
  letter-spacing: 2px;
}

.entry-comments-no {
  margin-left: 10px;
}

.entry-featured {
  margin: 20px 0 20px 0;
  position: relative;
  text-align: center;
}
.entry-featured iframe {
  margin-bottom: 0;
}

.entry-featured-actions {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  z-index: 100;
  top: 15px;
  left: 15px;
  display: inline-block;
}
.entry-featured-actions li {
  float: left;
  border-radius: 30px;
}
.entry-featured-actions li.action-pin {
  background: #BB1928;
  margin-right: 5px;
}
.entry-featured-actions li.action-pin a:before {
  content: "\f0d2";
}
.entry-featured-actions li.action-buy {
  background: #fff;
}
.entry-featured-actions li.action-buy a {
  color: #161616;
}
.entry-featured-actions li.action-buy a:before {
  content: "\f07a";
}
.entry-featured-actions li a {
  display: block;
  padding: 5px 12px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  border-bottom: none;
}
.entry-featured-actions li a:before {
  font-family: FontAwesome;
  margin: 0 3px 0 0;
  position: relative;
  top: 0;
  font-size: 11px;
}

.entry-content:before, .entry-content:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.entry-content:after {
  clear: both;
}
.entry-content .opening {
  font-family: "Lato", sans-serif;
}
.entry-content a {
  border-bottom: solid 2px #111;
}
.entry-content .entry-counter-list {
  list-style: none;
  margin: 20px 0 25px 0;
  padding: 0;
  counter-reset: product-list;
}
.entry-content .entry-counter-list li {
  position: relative;
  border: solid 1px #ebebeb;
  margin: 0 0 -1px 0;
  padding: 8px 0 8px 30px;
}
.entry-content .entry-counter-list li:before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: "Lato", sans-serif;
  font-size: 14px;
  font-weight: bold;
  display: inline-block;
  padding: 7px 5px 5px 5px;
  text-align: center;
  width: 30px;
  height: 30px;
  content: counter(product-list);
  counter-increment: product-list;
}

.entry-utils .read-more {
  float: right;
}
.entry-utils .socials {
  position: relative;
  background: #fff;
  z-index: 4;
  padding: 3px 3px 2px 0;
  margin-top: 2px;
  float: left;
}
.entry-utils .socials a {
  padding: 5px;
  margin: 0 5px 0 0;
}
.entry-utils .socials a:hover {
  color: #b49543;
}
.entry-utils:before {
  content: '';
  position: relative;
  top: 21px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #ebebeb;
  z-index: 2;
}

.read-more {
  position: relative;
  display: inline-block;
  padding: 10px 15px 9px;
  background: #fff;
  color: #b49543;
  border: solid 2px #ebebeb;
  font-family: "Lato", sans-serif;
  font-size: 11px;
  font-weight: bold;
  z-index: 3;
}
.read-more:hover {
  border-color: #b49543;
  color: #161616;
}

.single .entry-utils,
.page .entry-utils {
  text-align: center;
  margin-bottom: 25px;
}
.single .entry-utils .socials,
.page .entry-utils .socials {
  float: none;
  display: inline-block;
  padding-left: 10px;
}
.single .entry-content,
.page .entry-content {
  margin-bottom: 10px;
}

.entry-list {
  position: relative;
}
.entry-list .entry-title {
  text-align: left;
  padding: 0;
  font-size: 23px;
}
.entry-list .entry-title:after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 15px;
}
.entry-list .entry-featured {
  position: absolute;
  top: 5px;
  left: 0;
  width: 250px;
  margin: 0;
}
.entry-list .entry-meta {
  text-align: left;
}
.entry-list .entry-meta p {
  margin-bottom: 0;
}
.entry-list .entry-title, .entry-list .entry-meta, .entry-list .entry-content {
  margin-left: 275px;
}

.entry-grid .entry-title {
  font-size: 19px;
  padding: 0;
}

.entry-author {
  margin-bottom: 30px;
  position: relative;
}
.entry-author figure.author-avatar {
  position: absolute;
  top: 5px;
  left: 0;
}
.entry-author figure.author-avatar img {
  display: inline-block;
}
.entry-author .author-details {
  margin-left: 115px;
}
.entry-author .socials {
  float: none;
  display: inline-block;
}
.entry-author .socials a {
  font-size: 18px;
  margin: 0 7px;
  padding: 0;
}

.entry-related .entry {
  margin-bottom: 0;
}
.entry-related .entry-title, .entry-related .entry-meta {
  text-align: left;
  padding: 0;
}
.entry-related .entry-title {
  font-size: 13px;
  margin: 0;
}
.entry-related .entry-title:after {
  content: '';
  position: absolute;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
  background: transparent;
}
.entry-related .entry-meta {
  margin-bottom: 10px;
}
.entry-related .entry-featured {
  margin: 0 0 15px 0;
}

.entry-tags {
  margin-bottom: 30px;
}
.entry-tags a {
  display: inline-block;
  background: #ebebeb;
  color: #444;
  font-size: 10px;
  letter-spacing: 2px;
  padding: 2px 5px;
  margin-right: 3px;
}

.entry-sig {
  font-size: 10px;
  letter-spacing: 3px;
  color: #7e7e7e;
}
.entry-sig img {
  display: block;
  margin-top: 10px;
}

.entry-look {
  position: relative;
}
.entry-look .entry-overlay {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: -moz-linear-gradient(top, transparent 0%, transparent 65%, rgba(0, 0, 0, 0.33) 99%, rgba(0, 0, 0, 0.33) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(65%, transparent), color-stop(99%, rgba(0, 0, 0, 0.33)), color-stop(100%, rgba(0, 0, 0, 0.33)));
  background: -webkit-linear-gradient(top, transparent 0%, transparent 65%, rgba(0, 0, 0, 0.33) 99%, rgba(0, 0, 0, 0.33) 100%);
  background: -o-linear-gradient(top, transparent 0%, transparent 65%, rgba(0, 0, 0, 0.33) 99%, rgba(0, 0, 0, 0.33) 100%);
  background: -ms-linear-gradient(top, transparent 0%, transparent 65%, rgba(0, 0, 0, 0.33) 99%, rgba(0, 0, 0, 0.33) 100%);
  background: linear-gradient(to bottom, transparent 0%, transparent 65%, rgba(0, 0, 0, 0.33) 99%, rgba(0, 0, 0, 0.33) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#54000000',GradientType=0 );
}
.entry-look .entry-featured {
  margin: 0;
}
.entry-look .entry-wrap {
  position: absolute;
  bottom: 30px;
  left: 30px;
}
.entry-look .entry-wrap .entry-title, .entry-look .entry-wrap .entry-meta {
  text-align: left;
  color: #fff;
}
.entry-look .entry-wrap .entry-title {
  padding: 0 30px 0 0;
  margin: 0;
  font-size: 15px;
}
.entry-look .entry-wrap .entry-title:after {
  background: transparent;
}

/* Pagination
=================================== */
#paging {
  font-family: "Lato", sans-serif;
  font-size: 11px;
  margin: 0 0 30px 0;
  border: solid 1px #ebebeb;
}
#paging ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#paging ul li {
  display: inline-block;
}
#paging a,
#paging > span,
#paging li span {
  border-right: solid 1px #ebebeb;
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  padding: 14px 18px;
  line-height: normal;
}
#paging a:hover, #paging .current {
  background: #161616;
  color: #fff;
}
#paging .paging-standard {
  text-align: center;
  width: 50%;
  text-align: center;
}
#paging .paging-older {
  float: left;
  width: 50%;
}
#paging .paging-newer {
  float: right;
  border-right: 0;
}

/* -----------------------------------------
    05. Footer
----------------------------------------- */
#main-wrap {
  position: relative;
  z-index: 1;
  background: #fff;
}

#footer {
  border-top: solid 1px #ebebeb;
  padding: 0;
  text-align: center;
}
#footer .widget:last-child {
  margin: 0;
}
#footer .site-bar {
  border-top: 0;
}
#footer .site-logo .tagline a {
  display: inline;
}

/* -----------------------------------------
   06. Comments
----------------------------------------- */
#comments {
  margin: 30px 0 0;
}

#comment-list {
  margin: 0;
  list-style: none;
  padding: 0;
}
#comment-list ol {
  list-style: none;
}
@media (max-width: 767px) {
  #comment-list ol {
    margin: 0;
    padding: 0;
  }
}
#comment-list .comment-body {
  position: relative;
}
#comment-list > .comment:first-child > .comment-body {
  border-top: none;
}
#comment-list .pingback,
#comment-list .trackback {
  padding: 5px 0;
  border-bottom: 1px solid #ececec;
}
#comment-list .comment-content ol {
  list-style: decimal;
}
#comment-list .comment-content > ul,
#comment-list .comment-content > ol {
  margin: 20px 0;
}

.post-comments {
  margin: 0 0 30px;
}

.comment-author .avatar {
  width: 64px;
  height: 64px;
  float: left;
  margin: 0 15px 15px 0;
  overflow: visible;
}
@media (max-width: 767px) {
  .comment-author .avatar {
    display: none;
  }
}

.comment-content {
  overflow: hidden;
  zoom: 1;
  font-size: 13px;
}

.comment-metadata {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 11px;
  margin: 0 0 5px;
}
.comment-metadata a {
  color: #bcbcbc;
}

.comment-reply-link {
  border-radius: 0;
  font-size: 10px;
  text-transform: uppercase;
  padding: 4px 10px;
  height: auto;
  width: auto;
  position: absolute;
  top: 0;
  right: 0;
}
@media (max-width: 767px) {
  .comment-reply-link {
    margin: 0;
  }
}

.comment-author .fn {
  font-size: 13px;
}

.comment-author .says {
  font-style: italic;
  color: #bcbcbc;
}

.bypostauthor > article .fn:before {
  font-family: FontAwesome;
  content: "\f005";
  margin: 0 5px 0 -2px;
  position: relative;
  top: -1px;
  font-size: 11px;
}

#cancel-comment-reply-link {
  font-size: 11px;
  font-weight: normal;
  margin-top: 18px;
}

.form-allowed-tags,
.comment-notes {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(51, 51, 51, 0.8);
}

.comment-respond p {
  margin-bottom: 10px;
}
.comment-respond .form-submit {
  margin-bottom: 0;
}
.comment-respond input[type="text"], .comment-respond input[type="email"], .comment-respond input[type="url"] {
  width: 50%;
}

.comments-pagination {
  padding: 10px 0;
  border-top: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
  margin: 15px 0;
}
.comments-pagination a, .comments-pagination span {
  display: inline-block;
  margin-right: 5px;
}

#comment-list + .comments-pagination {
  margin-bottom: 0;
}

/* -----------------------------------------
    07. Widgets Styling
----------------------------------------- */
.sidebar {
  height: 100%;
}
.sidebar.sidebar-left {
  border-right: solid 1px #ebebeb;
}
.sidebar.sidebar-left .widget {
  padding: 30px 30px 30px 0;
}
.sidebar.sidebar-left .widget.widget-attention {
  padding: 30px 25px 25px;
}
.sidebar.sidebar-right {
  border-left: solid 1px #ebebeb;
}
.sidebar.sidebar-right .widget {
  padding: 30px 0 30px 30px;
}
.sidebar.sidebar-right .widget.widget-attention {
  padding: 30px 25px 25px;
}
.sidebar .widget:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

.widget {
  font-size: 13px;
  border-bottom: solid 1px #ebebeb;
  margin: 0;
}
.widget p {
  margin: 0 0 15px 0;
}
.widget.widget-attention {
  background: #fff;
  color: #fff;
}
.widget.widget-attention .widget-title {
  background-color: #FFF;
  color: #fff;
}

.sidebar .widget:last-child,
.widget p:last-child {
  /* Nullify bottom margin for last elements in widgets and sidebars */
  margin-bottom: 0;
}

.widget-title {
  font-family: "Lato", sans-serif;
  font-weight: bold;
  text-align: center;
  letter-spacing: 1px;
  background: #161616;
  color: #fff;
  font-size: 11px;
  padding: 13px 0;
  position: relative;
  margin-bottom: 20px;
}
.widget-title label {
  text-transform: none;
  display: block;
  font-size: inherit;
  margin: 0;
  line-height: inherit;
  font-weight: inherit;
}
.widget-title a {
  color: #FFF;
}

/* WIDGET: #List Widgets
========================================= */
.widget select {
  width: 100%;
  padding: 5px 10px;
  border-radius: 0;
  border: 1px solid #ececec;
}

.widget_meta ul,
.widget_pages ul,
.widget_categories ul,
.widget_archive ul,
.widget_nav_menu ul,
.widget_recent_entries ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.widget_meta ul ul,
.widget_pages ul ul,
.widget_categories ul ul,
.widget_archive ul ul,
.widget_nav_menu ul ul,
.widget_recent_entries ul ul {
  margin-left: 15px;
}
.widget_meta ul li,
.widget_pages ul li,
.widget_categories ul li,
.widget_archive ul li,
.widget_nav_menu ul li,
.widget_recent_entries ul li {
  line-height: normal;
  display: block;
  position: relative;
}
.widget_meta ul li a,
.widget_pages ul li a,
.widget_categories ul li a,
.widget_archive ul li a,
.widget_nav_menu ul li a,
.widget_recent_entries ul li a {
  display: block;
  padding: 11px 0;
  border-bottom: 1px solid #ececec;
}
.widget_meta ul li .count,
.widget_meta ul li .ci-count,
.widget_pages ul li .count,
.widget_pages ul li .ci-count,
.widget_categories ul li .count,
.widget_categories ul li .ci-count,
.widget_archive ul li .count,
.widget_archive ul li .ci-count,
.widget_nav_menu ul li .count,
.widget_nav_menu ul li .ci-count,
.widget_recent_entries ul li .count,
.widget_recent_entries ul li .ci-count {
  position: absolute;
  right: 0;
  top: 8px;
  font-size: 12px;
  font-weight: bold;
  font-style: italic;
  transition: all 0.18s ease;
  padding: 4px 3px;
}

.widget_recent_comments ul,
.widget_rss ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.widget_recent_comments ul li,
.widget_rss ul li {
  display: block;
  padding: 11px 0;
  border-bottom: 1px solid #ececec;
}

.widget_pages select,
.widget_categories select,
.widget_archive select {
  display: block;
  width: 100%;
  padding: 6px 15px;
  border-radius: 0;
  font-size: 14px;
  height: 40px;
  font-weight: normal;
  border: 1px solid #ececec;
  background: #FFF;
}

/* WIDGET: #RSS
========================================= */
.widget_rss li a {
  display: block;
  margin-bottom: 5px;
}
.widget_rss .rss-date {
  display: block;
  text-transform: uppercase;
  margin-bottom: 5px;
  font-size: 12px;
}
.widget_rss cite {
  display: block;
  margin-top: 5px;
}

/* WIDGET: #Search
========================================= */
.searchform > div {
  position: relative;
}
.searchform .searchsubmit {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}

/* WIDGET: #Flickr
========================================= */
.flickr_badge_image {
  float: left;
  width: 33.3333333333%;
}
.flickr_badge_image img {
  width: 100%;
}
.flickr_badge_image a {
  display: block;
  line-height: 0;
}

/* WIDGET: #About
========================================= */
.widget_about {
  text-align: center;
}
.widget_about .widget_about_sig img {
  margin: 5px auto 0;
  display: block;
}

/* WIDGET: #Text Widget
========================================= */
.widget_text p:last-child {
  margin-bottom: 0;
}

/* WIDGET: #Twitter
========================================= */
.widget_ci_twitter_widget ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.widget_ci_twitter_widget ul li {
  margin-bottom: 12px;
}
.widget_ci_twitter_widget ul li:first-child {
  padding-top: 0;
}
.widget_ci_twitter_widget .twitter-time {
  display: block;
  font-size: 0.85em;
}

/* WIDGET: #Calendar
================================================== */
#wp-calendar {
  width: 100%;
}
#wp-calendar a {
  font-weight: bold;
  font-style: italic;
}
#wp-calendar caption {
  text-align: left;
  margin-top: 10px;
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.03);
  padding: 9px;
}
#wp-calendar thead {
  font-size: 10px;
}
#wp-calendar thead th {
  background: rgba(0, 0, 0, 0.1);
  font-weight: bold;
  padding: 8px;
}
#wp-calendar tbody td {
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-align: center;
  padding: 3px;
}
#wp-calendar tbody td:hover {
  background: rgba(0, 0, 0, 0.1);
}
#wp-calendar tbody .pad {
  background: none;
}
#wp-calendar tfoot #next {
  font-size: 10px;
  text-transform: uppercase;
  text-align: right;
}
#wp-calendar tfoot #prev {
  font-size: 10px;
  text-transform: uppercase;
  padding-top: 10px;
}

/* WIDGET: #Newsletter
================================================== */
.widget_ci_newsletter input[type="email"] {
  text-align: center;
}
.widget_ci_newsletter input[type="submit"] {
  width: 100%;
}

/* WIDGET: #Socials
================================================== */
.widget .socials {
  float: none;
  text-align: center;
}
.widget .socials li {
  float: none;
  display: inline-block;
}
.widget .socials li a {
  margin: 0 7px;
  padding: 0;
  font-size: 18px;
}

/* WIDGET: #Instagram
================================================== */
.ci-instagram-lite {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ci-instagram-lite li {
  float: left;
  width: 33.3333333333%;
}

.ci-instagram-lite-full .ci-instagram-lite {
  padding-bottom: 30px;
}

/* WIDGET: #Latest Posts
================================================== */
.widget_posts_list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.widget_posts_list .entry {
  margin-bottom: 25px;
}
.widget_posts_list li:last-child .entry {
  margin-bottom: 0;
}
.widget_posts_list .entry-meta {
  margin: 0 0 10px 0;
  text-align: left;
}
.widget_posts_list .entry-featured {
  margin-bottom: 15px;
  margin-top: 10px;
}
.widget_posts_list .entry-title {
  font-size: 13px;
  text-align: left;
  margin: 0;
  padding: 0;
}
.widget_posts_list.widget_posts_list_alt li {
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 10px;
  min-height: 65px;
  border-bottom: solid 1px #ececec;
}
.widget_posts_list.widget_posts_list_alt li:last-child {
  margin-bottom: 0;
}
.widget_posts_list.widget_posts_list_alt .entry {
  margin: 0;
}
.widget_posts_list.widget_posts_list_alt .entry-title {
  font-size: 13px;
}
.widget_posts_list.widget_posts_list_alt .entry-title, .widget_posts_list.widget_posts_list_alt .entry-meta {
  margin-left: 95px;
}
.widget_posts_list.widget_posts_list_alt .entry-meta {
  line-height: 1;
  margin-bottom: 5px;
}
.widget_posts_list.widget_posts_list_alt .entry-featured {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  padding: 0;
  margin: 0;
}

/* -----------------------------------------
    08. WordPress Defaults
----------------------------------------- */
/* WordPress Galleries
=================================== */
.gallery {
  margin-left: -5px;
  margin-right: -5px;
  margin-bottom: 15px;
}
.gallery:before, .gallery:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.gallery:after {
  clear: both;
}

.gallery-item {
  margin-bottom: 10px;
}
.gallery-item img {
  width: 100%;
}

.gallery-columns-1 .gallery-item {
  position: relative;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
  float: left;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px;
  width: 50%;
}
@media (min-width: 768px) {
  .gallery-columns-1 .gallery-item {
    float: left;
    width: 100%;
  }
}

.gallery-columns-2 .gallery-item {
  position: relative;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
  float: left;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px;
  width: 50%;
}
@media (min-width: 768px) {
  .gallery-columns-2 .gallery-item {
    float: left;
    width: 50%;
  }
}

.gallery-columns-3 .gallery-item {
  position: relative;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
  float: left;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px;
  width: 50%;
}
@media (min-width: 768px) {
  .gallery-columns-3 .gallery-item {
    float: left;
    width: 33.33333%;
  }
}

.gallery-columns-4 .gallery-item {
  position: relative;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
  float: left;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px;
  width: 50%;
}
@media (min-width: 768px) {
  .gallery-columns-4 .gallery-item {
    float: left;
    width: 25%;
  }
}

.gallery-columns-5 .gallery-item {
  position: relative;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
  float: left;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px;
  width: 50%;
}
@media (min-width: 768px) {
  .gallery-columns-5 .gallery-item {
    float: left;
    width: 20%;
  }
}

.gallery-columns-6 .gallery-item {
  position: relative;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
  float: left;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px;
  width: 50%;
}
@media (min-width: 768px) {
  .gallery-columns-6 .gallery-item {
    float: left;
    width: 16.66667%;
  }
}

.gallery-columns-7 .gallery-item {
  position: relative;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
  float: left;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px;
  width: 50%;
}
@media (min-width: 768px) {
  .gallery-columns-7 .gallery-item {
    float: left;
    width: 14.28571%;
  }
}

.gallery-columns-8 .gallery-item {
  position: relative;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
  float: left;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px;
  width: 50%;
}
@media (min-width: 768px) {
  .gallery-columns-8 .gallery-item {
    float: left;
    width: 12.5%;
  }
}

.gallery-columns-9 .gallery-item {
  position: relative;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
  float: left;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px;
  width: 50%;
}
@media (min-width: 768px) {
  .gallery-columns-9 .gallery-item {
    float: left;
    width: 11.11111%;
  }
}

.gallery-caption {
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  margin: 0 0 0 5px;
  max-height: 50%;
  opacity: 0;
  padding: 6px 8px;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: left;
  width: calc(100% - 10px);
  transition: opacity 0.18s ease;
}

.gallery-caption:before {
  content: "";
  height: 100%;
  min-height: 49px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.gallery-item:hover .gallery-caption {
  opacity: 1;
}

.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
  display: none;
}

/* WordPress Classes
=================================== */
/* Alignment */
.alignnone {
  margin: 5px 0 20px 0;
}
p .alignnone {
  margin-bottom: 0;
}

.aligncenter {
  display: block;
  margin: 7px auto 7px auto;
}

.alignright {
  float: right;
  margin: 7px 0 7px 24px;
}

.alignleft {
  float: left;
  margin: 7px 24px 7px 0;
}

/* Captions */
.wp-caption {
  max-width: 100%;
  margin-bottom: 15px;
}

.wp-caption img {
  border: 0 none;
  height: auto;
  margin: 0;
  padding: 0;
  width: auto;
}

.wp-caption .wp-caption-text {
  font-size: 12px;
  line-height: 17px;
  margin: 3px 0 5px;
  padding: 5px 0 0 0;
  text-align: left;
  font-style: italic;
}

.sticky {
  /* Provide sticky styles */
}

/* -----------------------------------------
    10. External Plugins
----------------------------------------- */
/* Jetpack Sharing */
.sharedaddy {
  margin-top: 30px;
}

/* WP Instagram */
.null-instagram-feed p {
  padding-top: 10px;
}

.widget .instagram-pics {
  list-style: none;
  margin: 0;
  padding: 0;
}
.widget .instagram-pics:before, .widget .instagram-pics:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.widget .instagram-pics:after {
  clear: both;

[pandy]

You add 10px bottom padding on hover. Don't do that.

But the bottom border you add to A on hover also makes the gray border shift. So you need to add an equaly sized border to A when it isn't hovered. You can make it transparent or the same color as the background. With that border in place it's enough to change the color of it on hover.

[romyc]

You add 10px bottom padding on hover. Don't do that.

But the bottom border you add to A on hover also makes the gray border shift. So you need to add an equaly sized border to A when it isn't hovered. You can make it transparent or the same color as the background. With that border in place it's enough to change the color of it on hover.

Like this ?

.navigation a {
color:#626262;
border-bottom: 3px solid #ffffff;
}
.navigation a:hover,
.navigation .sfHover > a {
border-bottom: 3px solid #cc9966;
}

I did that and the border still moves :/

[romyc]

You add 10px bottom padding on hover. Don't do that.

But the bottom border you add to A on hover also makes the gray border shift. So you need to add an equaly sized border to A when it isn't hovered. You can make it transparent or the same color as the background. With that border in place it's enough to change the color of it on hover.

Like this ?

.navigation a {
color:#626262;
border-bottom: 3px solid #ffffff;
}
.navigation a:hover,
.navigation .sfHover > a {
border-bottom: 3px solid #cc9966;
}

I did that and the border still moves :/

I no I just needed to refresh, thank you !!!

[pandy]

Glad it worked.