CSS/HTML Help for Template | Navigation Link Spacing and Shape

  • Hi.
    Here’s a link to my site: seanmoran.co

    and I’m a new wordpress developer (and to programming in general). I’ve got the basics understood and can change obvious features, but that’s about it.

    I’m looking to spread out the spacing between the navigation links. Currently there’s very little room (I believe this is called ‘padding’), but I’m having trouble finding in the code.

    Also I’d like to maybe try and change the shape of the navigation link box (currently white and rectangle)

    Can anyone help me out with the spacing issue and also the shape (color) of the box surrounding the link.

    Here’s my css and header code:

    css: `@charset utf-8;
    /*–
    Theme Name: theme1438
    Theme URI: https://template-help.com/
    Description: A theme for WordPress 3.1+ from Template-Help.com Collection
    Author: Template_Help.com
    Author URL: https://www.Template-Help.com/
    –*/

    /* General
    —————————————- */
    html,
    body {
    min-width:960px;
    }
    body{
    background: #ecede9;
    color: #5c5c5c;
    font: 100%/1.25em Georgia, “Times New Roman”, Times, serif;
    position:relative;
    }

    #main {
    font-size:.75em;
    border-top:5px solid #181614;
    }

    /* List styling */
    dl dt {
    background:url(images/list-arrow.gif) no-repeat 0 3px;
    padding:0 0 3px 32px;
    margin-bottom:.2em;
    font-size:18px;
    line-height:1.2em;
    color:#191919;
    }
    dl dd {
    padding:0 0 0 32px;
    margin:0 0 1.5em 0;
    }

    /* Header
    —————————————- */
    #header {
    height:153px;
    position:relative;
    z-index:99;
    margin-bottom:20px;
    }

    /* Logo */
    .logo {
    position:absolute;
    left:0;
    top:71px;
    }
    .logo h1,
    .logo h2 {
    font-size:3em;
    line-height:1.2em;
    margin-bottom:0;
    }
    .logo h1 a,
    .logo h2 a {
    color:#222;
    text-decoration:none;
    }

    /* Header widget */
    #widget-header {
    position:absolute;
    right:0;
    top:23px;
    z-index:1;
    }
    #widget-header .textwidget {
    font-family: ‘Antic’, sans-serif;
    color:#000;
    font-size:18px;
    line-height:26px;
    background:url(images/icon-phone.gif) no-repeat 0 3px;
    padding:0 0 0 27px;
    letter-spacing:-1px;
    }

    /* Social Networks */
    #widget-header .social-networks {
    list-style-type:none;
    padding:0;
    margin:0;
    border:none;
    }
    #widget-header .social-networks li {
    float:left;
    border:none;
    padding:0;
    margin:0 0 0 5px;
    list-style-type:none;
    height:30px;
    }
    #widget-header .social-networks li a {
    text-decoration:none;
    float:left;
    height:30px;
    display:block;
    }
    #widget-header .social-networks li a:hover {
    color:red;
    }

    /* EasyTooltip */
    .tooltip {
    background: none repeat scroll 0 0 #252525;
    border: 1px solid #000000;
    color: #EEEEEE;
    display: none;
    font-size: 10px;
    line-height:1.2em;
    margin: 25px 0 0;
    padding: 5px;
    z-index:99;
    text-transform:uppercase;
    }

    /* Request a quote */
    .top-box {
    background:#fff;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    }
    .top-box:hover {
    background:#28adb2;
    color:#fff;
    }
    .top-box:hover a {
    color:#000;
    }
    .top-box h3 {
    padding:20px 20px 19px 20px;
    margin:0;
    background:#fff;
    }
    .box-button {
    padding:10px 0 0 0;
    }
    .box-text {
    padding:26px 20px 26px 20px;
    }

    /* Slider
    —————————————- */
    #slider-wrapper {
    height:460px;
    overflow:hidden;
    position:relative;
    margin-bottom:20px;
    }
    #slider {
    position:relative;
    width:940px;
    height:460px;
    background:url(images/loading.gif) no-repeat 50% 50% #fff;
    }
    #slider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
    }
    #slider a {
    border:0;
    display:block;
    }

    /* The Nivo Slider styles */
    .nivoSlider {
    position:relative;
    }
    .nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    }
    /* If an image is wrapped in a link */
    .nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:60;
    display:none;
    }
    /* The slices in the Slider */
    .nivo-slice {
    display:block;
    position:absolute;
    z-index:50;
    height:100%;
    }
    .nivo-box {
    display:block;
    position:absolute;
    z-index:5;
    }
    /* Caption styles */
    .nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    opacity:0.8; /* Overridden by captionOpacity setting */
    width:100%;
    z-index:89;
    }
    .nivo-caption .nivo-caption-inner {
    padding:0;
    margin:0;
    }
    .nivo-caption a {
    display:inline !important;
    }
    .nivo-html-caption {
    display:none;
    }
    /* Direction nav styles (e.g. Next & Prev) */
    .nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:99;
    cursor:pointer;
    }
    .nivo-prevNav {
    left:0px;
    }
    .nivo-nextNav {
    right:0px;
    }
    /* Control nav styles (e.g. 1,2,3…) */
    .nivo-controlNav {
    position:absolute;
    width:940px;
    height:25px;
    left:0;
    bottom:0;
    text-align:right;
    }
    .nivo-controlNav a {
    position:relative;
    z-index:99;
    cursor:pointer;
    display:inline-block !important;
    color:#fff;
    width:26px;
    height:25px;
    line-height:25px;
    background:rgba(0, 0, 0, .4);
    text-align:center;
    margin:0 0 0 1px;
    text-decoration:none;
    font-size:11px;
    }
    .no-rgba .nivo-controlNav a {
    background:#858f8d;
    }
    .nivo-controlNav a:hover,
    .nivo-controlNav a.active {
    background:#fff;
    color:#000;
    }

    .nivo-directionNav {

    }
    .nivo-directionNav a {
    position:absolute;
    display:block;
    width:36px;
    height:35px;
    text-indent:-9999px;
    border:0;
    top:50%;
    background:url(images/direction_nav.png) no-repeat 0 0;
    }
    a.nivo-nextNav {
    right:0;
    background-position:-36px 0;
    }
    a.nivo-nextNav:hover {
    background-position:-36px -35px;
    }
    a.nivo-prevNav {
    left:0;
    background-position:0 0;
    }
    a.nivo-prevNav:hover {
    background-position:0 -35px;
    }

    #slider .nivo-controlNav img {
    display:inline; /* Unhide the thumbnails */
    position:relative;
    margin-right:10px;
    width:120px;
    height:auto;
    }

    /* Navigations
    —————————————- */

    /* Primary navigation */
    nav.primary {
    position:relative;
    z-index:2;
    }

    /* Essential styles for dropdown menu */
    .sf-menu, .sf-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
    }
    .sf-menu {
    line-height: 1.0;
    }
    .sf-menu ul {
    position: absolute;
    top: -999em;
    width: 155px; /* left offset of submenus need to match (see below) */
    border:none;
    }
    .sf-menu ul li {
    width: 100%;
    }
    .sf-menu li:hover {
    visibility: inherit; /* fixes IE7 ‘sticky bug’ */
    }
    .sf-menu li {
    float: left;
    position: relative;
    }
    .sf-menu a {
    display: block;
    position: relative;
    }
    .sf-menu li:hover ul,
    .sf-menu li.sfHover ul {
    left: 0;
    top: 83px; /* match top ul list item height */
    z-index: 99;
    }
    ul.sf-menu li:hover li ul,
    ul.sf-menu li.sfHover li ul {
    top: -999em;
    }
    ul.sf-menu li li:hover ul,
    ul.sf-menu li li.sfHover ul {
    left: 156px; /* match ul width */
    top: 0;
    }
    ul.sf-menu li li:hover li ul,
    ul.sf-menu li li.sfHover li ul {
    top: -999em;
    }
    ul.sf-menu li li li:hover ul,
    ul.sf-menu li li li.sfHover ul {
    left: 156px; /* match ul width */
    top: 0;
    }

    /* Our skin for dropdown menu */
    .sf-menu {
    max-width:779px;
    margin:71px 0 0 161px;
    float: left;
    margin-bottom: 1em;
    border:none;
    }
    .sf-menu a {
    text-decoration:none;
    color: #000;
    font-size:14px;
    line-height:1.2em;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    text-indent:0 !important;
    }
    .sf-menu li {
    border:none;
    text-transform:none;
    }
    .sf-menu > li {
    margin:0 0 0 1px;
    }
    .sf-menu > li:first-child {
    margin-left:0;
    }
    .sf-menu > li > a {
    width:136px;
    padding:45px 0 20px 19px;
    color:#000;
    background:#fff;
    }
    .sf-menu > li > a:hover,
    .sf-menu > li.sfHover > a,
    .sf-menu > li.current-menu-item > a{
    background:#28adb2;
    color:#fff;
    }
    .sf-menu li li {

    }
    .sf-menu li li a {
    padding:9px 10px 9px 21px;
    background:#28adb2;
    color:#000;
    }
    .sf-menu li li a:hover,
    .sf-menu li li.sfHover > a,
    .sf-menu li li.current-menu-item > a{
    background:#000;
    color:#fff;
    }
    .sf-menu li li li {

    }
    .sf-menu li:hover, .sf-menu li.sfHover,
    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active, .sf-menu li.current-menu-item > a {
    outline: 0;
    }

    /*** arrows **/
    .sf-menu a.sf-with-ul {
    min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
    }
    .sf-sub-indicator {
    position: absolute;
    display: block;
    right: 16px;
    top: 52px; /* IE6 only */
    width: 11px;
    height: 6px;
    text-indent: -999em;
    overflow: hidden;
    background:url(images/sf-arrow.gif) no-repeat 0 0;
    }
    /* apply hovers to modern browsers */
    a:focus > .sf-sub-indicator,
    a:hover > .sf-sub-indicator,
    a:active > .sf-sub-indicator,
    li:hover > a > .sf-sub-indicator,
    li.sfHover > a > .sf-sub-indicator {
    background-position: 0 -6px; /* arrow hovers for modern browsers*/
    }

    /* point right for anchors in subs */
    .sf-menu ul .sf-sub-indicator { background-position: -10px 0; }
    .sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }
    /* apply hovers to modern browsers */
    .sf-menu ul a:focus > .sf-sub-indicator,
    .sf-menu ul a:hover > .sf-sub-indicator,
    .sf-menu ul a:active > .sf-sub-indicator,
    .sf-menu ul li:hover > a > .sf-sub-indicator,
    .sf-menu ul li.sfHover > a > .sf-sub-indicator {
    background-position: -10px 0; /* arrow hovers for modern browsers*/
    }

    /*** shadows for all but IE6 ***/
    .sf-shadow ul {
    background: url(images/shadow.png) no-repeat bottom right;
    padding: 0 8px 9px 0;
    -moz-border-radius-bottomleft: 17px;
    -moz-border-radius-topright: 17px;
    -webkit-border-top-right-radius: 17px;
    -webkit-border-bottom-left-radius: 17px;
    }
    .sf-shadow ul.sf-shadow-off {
    background: transparent;
    }

    /* Top search */
    #top-search {
    position:absolute;
    left:0;
    top:15px;
    }
    #top-search .input-search {
    width:160px;
    margin-right:10px;
    }
    #top-search #submit {
    width:50px;
    cursor:pointer;
    padding-left:0;
    padding-right:0;
    }

    /* Content
    —————————————- */
    .primary_content_wrap {
    position:relative;
    z-index:1;
    padding-bottom:20px;
    }

    #content {
    padding:35px 0 0 0;
    }
    #content.left {
    float:right !important;
    }
    #content .indent {
    padding:0 30px 0 0;
    }

    #before_content {
    padding:0 0 50px 0;
    }

    #home_content {
    padding:0 0 25px 0;
    }
    #home_content h1 {
    padding:0 200px 0 0;
    }

    /* Page */
    .page {

    }
    #page-content {

    }
    #page-meta {

    }

    /* Comments
    —————————————- */
    h3#comments {
    padding-top:25px;
    }
    .commentlist {
    list-style-type:none;
    padding:0;
    margin:0;
    border:none;
    }
    li.comment {
    list-style-type:none;
    overflow:hidden;
    border:none;
    color:#5c5c5c;
    }
    li.comment a {
    display:inline;
    }
    li.comment a:hover {
    background:none;
    }
    .odd {

    }
    .even {

    }
    li.comment .comment-body {
    padding:20px 30px 45px 96px;
    position:relative;
    zoom:1;
    background:#fff;
    border:1px solid #eee;
    margin-bottom:20px;
    }
    .author-comment {

    }
    .comment-author {
    padding:0 0 1em 0;
    font-weight:bold;
    color:#28adb2;
    text-transform:uppercase;
    font-size:12px;
    }
    .comment-author cite {
    font-style:normal;
    }
    .comment-text {

    }
    .comment-meta {
    font-size:11px;
    color:#979797;
    position:absolute;
    right:100px;
    bottom:25px;
    font-style:italic;
    }
    .comment-meta a {
    color:#979797;
    text-decoration:none;
    background:none;
    }
    .comment-meta a:hover {
    color:#000;
    text-decoration:underline;
    }
    li.comment .avatar {
    float:none;
    margin:0;
    position:absolute;
    left:21px;
    top:21px;
    vertical-align:top;
    overflow:hidden;
    border:1px solid #d6d6d6;
    }
    li.comment .avatar {
    display:block;
    vertical-align:top;
    overflow:hidden;
    }

    .commentlist ul.children {
    margin:0 0 0 60px;
    border:none;
    }
    .commentlist ul.children li.comment {
    border:none;
    text-transform:none;
    }

    .reply {
    position:absolute;
    right:30px;
    bottom:25px;
    }
    .reply a {
    display:inline-block;
    background:#28adb2;
    padding:5px 13px;
    color:#fff;
    text-decoration:none;
    font-size:12px;
    }
    .reply a:hover {
    background:#000 !important;
    }

    .waiting-for-approval {

    }
    #trackbacks {

    }
    li.trackback {

    }
    p#no-comments {

    }
    #comments-form {

    }

    .allowed_tags {
    background:#eee;
    padding:15px;
    font-size:11px;
    font-family:”Courier New”, Courier, monospace;
    color:#666;
    }
    .allowed_tags strong {
    font-family:Tahoma, Geneva, sans-serif;
    }
    #respond {
    padding:40px 0 0 0;
    }
    .cancel-comment-reply {

    }

    /* Post
    —————————————- */
    .post {

    }
    .postContent {

    }
    .post-excerpt {

    }

    article.post {
    margin-bottom:50px;
    width:100%;
    position:relative;
    clear:both;
    overflow:hidden;
    }

    /* Post header */
    article.post header h1,
    article.post header h2 {
    margin-bottom:.6em;
    font-size:11px;
    text-transform:uppercase;
    font-family:Georgia, “Times New Roman”, Times, serif;
    }
    article.post header h1 a,
    article.post header h2 a{
    color:#000;
    }
    article.post header h1 a:hover,
    article.post header h2 a:hover {
    color:#28adb2;
    }
    article.post.single-post {
    margin-bottom:30px;
    overflow:hidden;
    width:100%;
    }

    /* Featured thumbnail */
    .featured-thumbnail {
    float:left;
    margin:5px 20px 10px 0;
    }
    .featured-thumbnail .img-wrap {
    float:left;
    }
    .featured-thumbnail img {
    float:left;
    }

    /* Large thumbnail */
    .featured-thumbnail.large {
    margin-right:0;
    float:none;
    overflow:hidden;
    margin-bottom:1.5em;
    }
    .featured-thumbnail.large .img-wrap {
    float:none;
    display:block;
    overflow:hidden;
    }

    /* Thumbnail with prettyphoto */
    .featured-thumbnail .image-wrap[rel=”prettyphoto”] {
    background:url(images/magnify.png) no-repeat 50% 50%;
    display:block;
    float:left;
    }
    .featured-thumbnail .image-wrap[rel=”prettyphoto”] img {
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    }
    .featured-thumbnail .image-wrap[rel=”prettyphoto”]:hover img {
    opacity:.5;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
    }

    /* Post content */
    .post-content {

    }
    .post-content .excerpt {
    margin-bottom:1.5em;
    }
    .pagination {

    }
    .pagination a {
    display:inline-block;
    padding:0 5px;
    background:#eee;
    }

    /* Post footer */
    article.post footer {
    clear:both;
    }
    article.single-post footer {
    margin-top:20px;
    }

    /* Meta information for post */
    .post-meta {
    width:100%;
    overflow:hidden;
    margin-bottom:1em;
    font-size:11px;
    font-style:italic;
    color:#979797;
    }
    .post-meta a {
    color:#979797;
    text-decoration:none;
    }
    .post-meta a:hover {
    color:#000;
    }

    .post-navigation {

    }

    p.gravatar {
    float:left;
    margin-right:20px;
    }

    /* Post edit link */
    .post-edit-link {
    display:block;
    position:absolute;
    right:0;
    top:0;
    padding:2px 7px;
    background:#000;
    color:#fff;
    font-size:10px;
    text-transform:uppercase;
    text-decoration:none;
    border-radius:3px;
    }
    .post-edit-link:hover {
    background:#666;
    }

    /* Image styling */
    .alignleft {
    float:left;
    margin:0 20px 10px 0;
    }
    .alignright {
    float:right;
    margin:0 0 10px 20px;
    }
    .aligncenter {
    text-align:center;
    margin:0 auto;
    }
    .alignnone {
    margin:0 0 10px 0;
    }
    article .post-content img {
    max-width:710px;
    }

    .frame {
    padding:7px;
    background:#fff;
    border:1px solid #dbdbdb;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    text-align:center;
    }
    .frame img.alignleft,
    .frame img.alignright{
    margin:0;
    padding:0;
    border:none;
    }

    /* Page Navigaton (wp-pagenavi) */
    .wp-pagenavi {
    overflow:hidden;
    border-top:1px solid #d6d6d6;
    padding:27px 0 0 0;
    }
    .wp-pagenavi a, .wp-pagenavi span {
    display:inline-block;
    text-decoration: none;
    padding: 3px 9px;
    background:#fff;
    margin-right:10px;
    color:#000;
    }
    .wp-pagenavi a:hover, .wp-pagenavi span.current {
    background:#28adb2;
    color:#fff;
    }
    .wp-pagenavi .pages {
    float:right;
    border:none;
    color:#999;
    }

    /* Older and newer navigation */
    nav.oldernewer {
    width:100%;
    overflow:hidden;
    margin-bottom:1.5em;
    }
    .older {
    float:left;
    }
    .newer {
    float:right;
    }

    /* Author
    —————————————- */
    #post-author {
    overflow:hidden;
    padding:30px;
    margin-bottom:2em;
    background:#fff;
    }
    #author-link {
    margin-top:1.2em;
    }
    #post-author .gravatar {
    margin:0 20px 0 0;
    }
    #post-author .gravatar img {
    background:#fff;
    border:1px solid #dbdbdb;
    padding:5px;
    }
    #author-description {

    }

    /* Recent author posts */
    #recent-author-posts {
    margin-bottom:3em;
    }

    /* Recent author comments */
    #recent-author-comments {

    }

    .author-info {
    width:100%;
    overflow:hidden;
    margin-bottom:3em;
    padding-bottom:2em;
    border-bottom:1px dashed #c8cbc0;
    }
    .author-info .avatar {
    margin:0 20px 0 0;
    }
    .author-info .avatar img {
    float:left;
    background:#fff;
    padding:7px;
    border:1px solid #dbdbdb;
    }

    .author-meta {
    margin-bottom:20px;
    overflow:hidden;
    width:100%;
    }
    .author-meta p.gravatar {
    margin:0;
    }

    /* 404
    —————————————- */
    #error404 {
    padding:30px 0 100px 0;
    }
    .error404-num {
    font-size:250px;
    line-height:1.2em;
    text-align:center;
    }
    #error404 hgroup {
    margin:0 0 2em 0;
    padding-top:50px;
    }
    #error404 hgroup h1 {
    font-size:3em;
    margin-bottom:.2em;
    }

    /* Portfolio
    —————————————- */
    .latestwork {
    width:100%;
    overflow:hidden;
    list-style-type:none;
    padding:0;
    margin:0;
    }
    .latestwork li {
    float:left;
    margin-right:20px;
    }

    /* Header Title */
    .header-title {
    margin-bottom:2.4em;
    }
    .header-title h1 {
    margin-bottom:.1em;
    font-size:21px;
    }
    .header-title .page-desc {
    font-size:.91em;
    color:#999;
    }

    /* Default layout 3 columns */
    #gallery {

    }
    #gallery .portfolio {
    width:100%;
    overflow:hidden;
    list-style-type:none;
    padding:0;
    margin:0;
    border:none;
    }
    #gallery .portfolio li {
    display:-moz-inline-box;
    display:inline-block;
    zoom:1;
    vertical-align:top;
    width:300px;
    margin:0 16px 50px 0;
    position:relative;
    padding:0;
    border:none;
    text-transform:none;
    }
    #gallery .portfolio li a {
    display:inline;
    font-size:12px;
    text-indent:0 !important;
    color:#28adb2;
    padding:0;
    }
    #gallery .portfolio li a:hover {
    color:#fff;
    }
    * + html #gallery .portfolio li {
    display:inline;
    }
    #gallery .portfolio li.nomargin {
    margin-right:0 !important;
    }
    #gallery .portfolio li span.image-border {
    display:block;
    height:210px;
    width:300px;
    position:relative;
    }
    #gallery .portfolio li a.image-wrap {
    display:block;
    overflow:hidden;
    width:300px;
    height:210px;
    position:relative;
    background:#fff url(images/loading.gif) 50% 50% no-repeat;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    }
    #gallery .portfolio li a.image-wrap:hover {

    }
    #gallery .portfolio li a.image-wrap img {
    float:left;
    }

    #gallery .portfolio .folio-desc {
    margin-bottom:0;
    padding:30px 0 0 0;
    }
    #gallery h4 {
    font-size:12px;
    }
    #gallery h4 a {
    color:#28adb2;
    background:none;
    display:inline;
    }
    #gallery h4 a:hover {
    color:#000 !important;
    }
    #gallery .portfolio p.excerpt {
    padding:0;
    }

    .zoom-icon {
    display:block;
    position:absolute;
    left:0;
    top:-200px;
    width:300px;
    height:210px;
    background:url(images/magnify.png) 50% 50% no-repeat;
    cursor:pointer;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    }
    #gallery .portfolio li a.image-wrap:hover .zoom-icon {
    top:0;
    }

    /* 1 column portfolio*/
    #gallery.one_column .portfolio li {
    width:100%;
    margin-right:0;
    margin-left:0;
    }
    #gallery.one_column .portfolio li span.image-border {
    width:540px;
    height:295px;
    float:left;
    }
    #gallery.one_column .portfolio li a.image-wrap {
    width:540px;
    height:295px;
    }
    #gallery.one_column .zoom-icon {
    top:-252px;
    width:540px;
    height:295px;
    }
    #gallery.one_column .folio-desc {
    float:left;
    margin:0 0 0 20px;
    overflow:hidden;
    width:350px;
    padding:0;
    }
    #gallery.one_column header {
    margin-bottom:1.5em;
    }
    #gallery.one_column header h2 {
    margin-bottom:.1em;
    }
    #gallery.one_column header time {
    font-size:11px;
    color:#999;
    }

    /* 2 columns portfolio*/
    #gallery.two_columns .portfolio li {
    width:460px;
    margin-right:17px;
    }
    #gallery.two_columns .portfolio li span.image-border {
    width:460px;
    height:295px;
    }
    #gallery.two_columns .portfolio li a.image-wrap {
    width:460px;
    height:295px;
    }
    #gallery.two_columns .zoom-icon {
    top:-252px;
    width:460px;
    height:295px;
    }

    /* 4 columns portfolio*/
    #gallery.four_columns .portfolio li {
    width:220px;
    margin-right:17px;
    }
    #gallery.four_columns .portfolio li span.image-border {
    width:220px;
    height:156px;
    }
    #gallery.four_columns .portfolio li a.image-wrap {
    width:220px;
    height:156px;
    }
    #gallery.four_columns .zoom-icon {
    top:-152px;
    width:220px;
    height:156px;
    }

    /* Sidebar
    —————————————- */
    #sidebar {
    padding:35px 0 0 0;
    }
    #widget-sidebar {

    }
    .widget {
    margin-bottom:65px;
    }

    /* Calendar */
    #calendar_wrap {
    padding:0;
    }
    #wp-calendar {
    width:100%;
    }
    #wp-calendar caption {
    text-align:center;
    }
    #wp-calendar td {
    text-align:center;
    padding:6px 0;
    border:none;
    }
    #wp-calendar caption {
    font-size:16px;
    color:#000;
    font-weight:bold;
    padding:4px 0;
    margin-bottom:5px;
    }
    #wp-calendar thead th {
    padding:7px 0;
    font-size:14px;
    background:#fff;
    color:#000;
    text-align:center;
    }
    #wp-calendar #prev {
    text-align:left;
    }
    #wp-calendar #next {
    text-align:right;
    }

    /* Custom widgets
    —————————————- */

    /* Posts Type widget */
    .post_list {
    list-style-type:none;
    padding:0;
    margin:0;
    }
    .post_list li {
    overflow:hidden;
    padding-top:1.5em;
    padding-bottom:1.5em;
    border-top:1px solid #dbdbdb;
    margin:0;
    }
    .post_list li:first-child {
    border:none;
    padding-top:0;
    }
    .post_list li img {
    float:left;
    margin:0 15px 0 0;
    }

    /* Popular posts */
    .popular-posts {
    list-style-type:none;
    padding:0;
    margin:0;
    }
    .popular-posts li {
    overflow:hidden;
    margin:0 0 2em 0;
    }
    .popular-posts li .post-thumb {
    float:left;
    margin-right:20px;
    width:100px;
    height:100px;
    overflow:hidden;
    padding:1px;
    border:1px solid #dbdbdb;
    }
    .popular-posts li .post-thumb.empty-thumb {
    background:url(images/empty_thumb.gif) no-repeat 50% 50% #ececec;
    }
    .popular-posts li h5 {
    font-size:1em;
    margin-bottom:.5em;
    }
    .popular-posts li .excerpt {
    margin-bottom:.8em;
    }

    /* Post Cycle */
    .post_cycle {
    padding:0;
    margin:0;
    }
    #post-cycle .cycle_item {
    display:none;
    }
    #post-cycle .cycle_item:first {
    display:block;
    }

    /* Folio Cycle */
    .folio_cycle {
    list-style-type:none;
    padding:0;
    margin:0;
    width:100%;
    overflow:hidden;
    }
    .folio_cycle .folio_item {
    overflow:hidden;
    display:none;
    }
    .folio_cycle .folio_item:first {
    display:block;
    }
    .folio_cycle .folio_item figure.thumbnail {
    width:270px;
    overflow:hidden;
    }
    #folio-controls {
    text-align:center;
    overflow:hidden;
    }
    #folio-controls ul {
    list-style-type:none;
    margin:0;
    padding:0;
    }
    #folio-controls ul li {
    padding:0 5px 0 0;
    display:inline;
    }
    #folio-controls ul li a {
    display:inline-block;
    text-decoration:none;
    width:8px;
    height:8px;
    background:#000;
    font-size:0;
    line-height:0;
    }
    #folio-controls ul li a:hover {
    background:#999;
    }

    /* Recent Comments */
    #recentcomments li {
    text-transform:none;
    }
    #recentcomments li a {
    display:inline-block;
    color:#28adb2;
    text-indent:0;
    background:none;
    }
    #recentcomments li a:hover, {
    color:#000;
    text-decoration:underline;
    }

    /* Categories */
    li.current-cat a {
    background:#28adb2;
    color:#fff;
    text-decoration:none;
    text-indent:12px;
    }

    /* Recent Posts */
    .latestpost {
    list-style-type:none;
    margin:0;
    padding:0 20px 0 0;
    }
    .latestpost li {
    margin:0 0 2em 0;
    list-style-type:none;
    }
    .latestpost li a {
    text-decoration:none !important;
    color:#000;
    }
    .latestpost li a:hover {
    text-decoration:underline;
    }
    .latestpost li h5 {
    margin-bottom:.3em;
    }
    .latestpost li h5 a {
    font-size:11px !important;
    color:#000 !important;
    }
    .latestpost li h5 a:hover {
    text-decoration:underline !important;
    }
    .latestpost li .meta {
    font-style:italic;
    font-size:11px;
    color:#979797;
    padding:0 0 4px 0;
    }
    .latestpost li .meta a {
    font-size:11px !important;
    color:#979797 !important;
    }
    .latestpost li .meta a:hover {
    color:#000 !important;
    }

    /* Twitter widget */
    .twitter_update_list {
    overflow:hidden;
    }
    .twitter ul li {
    list-style-type:none;
    margin:0 0 15px 0;
    padding:8px 0 8px 0;
    margin-bottom:0;
    text-transform:none;
    }
    .twitter ul li a {
    color:#000;
    display:inline;
    text-indent:0 !important;
    }
    .twitter ul li a:hover {
    color:#fff;
    }
    .twitter .profileLink {

    }

    /* Flickr widget */
    .flickrImages {
    overflow:hidden;
    position:relative;
    }
    .flickrImages a {
    float:left;
    display:block;
    width:75px;
    height:75px;
    background:#000;
    margin:0 1px 1px 0;
    }
    .flickrImages a img {
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    }
    .flickrImages a:hover img {
    opacity:.5;
    }
    .flickrImages a.link {
    display:inline;
    float:none;
    width:auto;
    height:auto;
    margin:0;
    background:none;
    }

    /* Banner widget */
    .banners-holder {
    list-style-type:none;
    padding:14px 0 10px 0;
    margin:0;
    background:#fff;
    border:none;
    }
    .banners-holder li {
    border:none;
    list-style-type:none;
    float:left;
    margin:0 7px 0 7px;
    padding:0;
    }
    .banners-holder li a {
    padding:0;
    text-indent:0 !important;
    }
    .banners-holder li img {
    vertical-align:top;
    float:left;
    opacity:.5;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    }
    .banners-holder li img:hover {
    opacity:1;
    }

    /* Shortcodes
    —————————————- */

    /* Recent Posts */
    .recent-posts {
    margin:0;
    padding:0;
    width:100%;
    overflow:hidden;
    border:none;
    }
    .recent-posts li {
    margin:0 0 20px 0;
    padding:0;
    border:none;
    }
    .recent-posts li img.thumb {
    float:left;
    margin:0 20px 0 0;
    }
    .recent-posts li h5 {
    font-size:1em;
    margin-bottom:0;
    }
    .recent-posts li .excerpt {
    margin-bottom:1.5em;
    }
    .recent-posts li span.meta {
    display:block;
    margin-bottom:.5em;
    font-size:10px;
    color:#888;
    text-transform:uppercase;
    }

    /* Featured Charities */
    .recent-posts.feat_charities {
    list-style-type:none;
    padding:0 0 20px 0;
    margin:0;
    overflow:hidden;
    border:none;
    }
    .recent-posts.feat_charities li {
    float:left;
    width:300px;
    margin:0 10px 30px 10px;
    background:none;
    padding:0 0 30px 0;
    background:#fff;
    text-transform:none;
    border:none;
    }
    .recent-posts.feat_charities li a {
    display:inline;
    background:none;
    font-size:1em;
    text-transform:none;
    color:#28adb2;
    }
    .recent-posts.feat_charities li a:hover {
    color:#000;
    text-decoration:underline;
    }
    .recent-posts.feat_charities li .thumb-wrap {
    margin:0;
    float:none;
    overflow:hidden;
    }
    .recent-posts.feat_charities li img.thumb {
    margin:0;
    overflow:hidden;
    margin:0 0 25px 0;
    }
    .recent-posts.feat_charities li h3 {
    padding:20px 20px 19px 20px;
    margin:0;
    }
    .recent-posts.feat_charities li h3 a {
    color:#000;
    text-transform:uppercase;
    }
    .recent-posts.feat_charities li h3 a:hover {
    color:#28adb2;
    text-decoration:none;
    }
    .recent-posts.feat_charities li .excerpt {
    padding:0 15px 0 20px;
    }
    .recent-posts.feat_charities footer {
    padding:0 0 0 20px;
    }

    /* Upcoming Charities */
    .recent-posts.upcoming_charities {
    list-style-type:none;
    padding:0;
    margin:0;
    overflow:hidden;
    border:none;
    }
    .recent-posts.upcoming_charities li {
    font-size:12px;
    text-transform:none;
    overflow:hidden;
    margin:0 0 34px 0;
    }
    .recent-posts.upcoming_charities li .thumb-wrap {
    float:left;
    display:block;
    margin:0;
    }
    .recent-posts.upcoming_charities li .thumb-wrap img {

    }
    .recent-posts.upcoming_charities li a {
    display:inline !important;
    padding:0 !important;
    text-indent:0 !important;
    }
    .recent-posts.upcoming_charities li h3 {
    font-family:Georgia, “Times New Roman”, Times, serif;
    font-size:12px;
    text-transform:none;
    margin-bottom:.5em;
    }
    .recent-posts.upcoming_charities li h3 a {
    display:inline-block;
    font-size:12px;
    color:#5c5c5c;
    text-decoration:underline;
    background:none;
    padding:0;
    }
    .recent-posts.upcoming_charities li h3 a:hover {
    color:#5c5c5c;
    text-indent:0;
    text-decoration:none;
    }
    .recent-posts.upcoming_charities li .excerpt {
    display:inline;
    }

    /* Charities */
    .recent-posts.charities {
    list-style-type:none;
    padding:0 0 50px 0;
    margin:0;
    overflow:hidden;
    border:none;
    }
    .recent-posts.charities li {
    float:left;
    width:262px;
    text-transform:none;
    font-size:12px;
    background:url(images/icon1.png) no-repeat 0 2px;
    padding:0 0 0 38px;
    margin:0 20px 25px 0;
    }
    .recent-posts.charities li:nth-child(2n) {
    margin-right:0;
    }
    .recent-posts.charities li.nomargin {
    margin-right:0;
    }
    .recent-posts.charities li a {
    display:inline;
    }
    .recent-posts.charities li h3 {
    font-family:Georgia, “Times New Roman”, Times, serif;
    font-weight:bold;
    font-size:12px;
    margin-bottom:.3em;
    }
    .recent-posts.charities li h3 a {
    color:#28adb2;
    text-decoration:none;
    background:none;
    }
    .recent-posts.charities li h3 a:hover {
    text-decoration:underline;
    color:#000;
    }
    .recent-posts.charities li .excerpt {
    margin:0;
    }

    /* Tags */
    .tags-cloud a, .tagcloud a {
    display:inline-block;
    background:#fff;
    padding:5px 9px;
    text-decoration:none;
    color:#000;
    margin:0 1px 4px 0;
    font-size:11px !important;
    line-height:1.5em;
    vertical-align:top;
    }
    .tags-cloud a:hover, .tagcloud a:hover {
    background:#28adb2;
    color:#fff;
    }

    /* Recent Comments */
    .recent-comments {
    list-style-type:none;
    padding:0;
    margin:0;
    }
    .recent-comments li {
    padding:0;
    margin:0;
    border:none;
    padding-bottom:.5em;
    }

    /* Footer
    —————————————- */
    #footer {
    padding:35px 0;
    }

    /* Copyright */
    #copyright {
    font-style:italic;
    color:#000;
    }
    #copyright a {
    color:#000;
    text-decoration:none;
    }
    #copyright a:hover {
    text-decoration:underline;
    }
    #copyright a.site-name {
    color:#28adb2;
    }
    #copyright a.site-name:hover {
    color:#000;
    }

    /* Footer widget */
    #widget-footer {
    width:100%;
    overflow:hidden;
    padding:0 0 35px 0;
    }
    #widget-footer ul {
    border:none;
    }
    #widget-footer ul li {
    border:none;
    text-transform:none;
    }
    #widget-footer ul li a {
    font-size:12px;
    color:#5c5c5c;
    text-decoration:underline;
    padding:0;
    display:inline;
    }
    #widget-footer ul li a:hover {
    text-decoration:none;
    color:#000;
    background:none;
    text-indent:0;
    }

    #widget-footer .social-networks li {
    list-style-type:none;
    padding:0;
    margin:0 2px 0 0;
    float:left;
    }
    #widget-footer .social-networks li img {
    opacity:.3;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    }
    #widget-footer .social-networks li img:hover {
    opacity:1;
    }

    /* Footer navigation */
    nav.footer {
    float:right;
    }
    nav.footer ul {
    border:none;
    }
    nav.footer ul li {
    list-style-type:none;
    float:left;
    margin:0;
    border:none;
    padding:0 0 0 15px;
    }
    nav.footer ul li a {
    text-indent:0;
    padding:0;
    background:none;
    }
    nav.footer ul li a:hover {
    color:#000;
    text-decoration:underline;
    }

    /* Misc
    —————————————- */
    .button {
    display:inline-block;
    padding:7px 15px;
    background:#000;
    color:#fff;
    text-decoration:none;
    }
    .button:hover {
    background:#999;
    }
    .no-results {

    }

    /* Tabs */
    .tabs {
    margin: 1px 0 20px 0;
    }

    .tabs .tab-wrapper {
    border: 1px solid #dddddd;
    border-radius: 0 5px 5px 5px;
    -moz-border-radius: 0 5px 5px 5px;
    -webkit-border-radius: 0 5px 5px 5px;
    margin: -1px 0 0 0;
    }

    .tabs .tab-menu ul {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    }

    .tabs .tab-menu li {
    display: inline;
    float: left;
    margin: 0;
    padding: 0;
    }

    .tabs .tab-menu a {
    background-color: #fafafa;
    border: 1px solid #dddddd;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    color: #aaaaaa;
    display: block;
    font-size: 12px;
    letter-spacing: 1px;
    margin: 0 2px 0 0;
    padding: 8px 20px;
    }

    .tabs .tab-menu a:hover {
    background-color: #f2f2f2;
    color: #666666;
    }

    .tabs .tab-menu a.active {
    background-color: #ffffff;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#f6f6f6′, endColorstr=’#fafafa’);
    background: -moz-linear-gradient(bottom , #fafafa 0px, #f6f6f6 90%) repeat scroll 0 0 transparent;
    background: -webkit-gradient(linear,left bottom,left top, color-stop(0, #fafafa),color-stop(90%, #f6f6f6));
    border-bottom: none;
    color: #666666;
    padding: 8px 20px 9px 20px;
    }

    .tabs .tab {
    background-color: #fafafa;
    border-radius: 0 5px 5px 5px;
    -moz-border-radius: 0 5px 5px 5px;
    -webkit-border-radius: 0 5px 5px 5px;
    padding: 20px;
    }

    /* Toggle */
    .toggle {
    padding: 0 0 2px 0;
    }
    .toggle .trigger {
    background-color: #f5f5f5;
    background: -moz-linear-gradient(bottom, #F2F2F2 0px, #ffffff 100%);
    background: -webkit-gradient(linear,left bottom,left top, color-stop(0, #f2f2f2),color-stop(1, #ffffff));
    border: 1px solid #dddddd;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    color: #666666;
    display: block;
    padding: 10px 12px 10px 40px;
    position: relative;
    text-decoration:none;
    height:1%;
    }

    .toggle .trigger span {
    background: url(includes/images/toggle.png) 0 0 no-repeat;
    display: block;
    position: absolute;
    top: 9px;
    left: 10px;
    text-indent: -9999px;
    width: 22px;
    height: 20px;
    }

    .toggle .trigger:hover,
    .toggle .active {
    background:#191919;
    color:#fff;
    }
    .toggle .active span {
    background-position: 0 -20px;
    }

    .toggle .box {
    background-color: #fafafa;
    border: 1px solid #dddddd;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 20px;
    }

    /* Dropcap */
    .dropcap {
    display:block;
    float:left;
    font-size:4em;
    line-height:1em;
    margin:0 10px 0 0;
    text-transform:uppercase;
    }

    .widget-area {

    }

    .hr {
    height:1px;
    background:#eee;
    overflow:hidden;
    font-size:0;
    line-height:0;
    margin:30px 10px;
    }
    .grid_1 .hr, .grid_2 .hr, .grid_3 .hr, .grid_4 .hr, .grid_5 .hr, .grid_6 .hr, .grid_7 .hr, .grid_8 .hr, .grid_9 .hr, .grid_10 .hr, .grid_11 .hr, .grid_12 .hr {
    margin-left:0;
    margin-right:0;
    }

    /* Address */
    .address {
    overflow:hidden;
    width:100%;
    margin:0;
    padding:0;
    }
    .address dt {
    float:left;
    width:165px;
    margin-right:20px;
    padding:0 0 0 55px;
    background:none;
    font-size:1em;
    line-height:18px;
    background:url(images/address-icon1.png) no-repeat 0 3px;
    }
    .address dd {
    float:left;
    width:217px;
    padding:0 0 0 53px;
    background:url(images/address-icon2.png) no-repeat 0 3px;
    }
    .address dd ul {
    list-style-type:none;
    padding:0;
    margin:0;
    border:none;
    }
    .address dd ul li {
    background:none;
    padding:0;
    border:none;
    }
    .address dd ul li a {
    display:inline;
    }
    .address dd span {
    float:left;
    width:100px;
    }
    .address dd a {
    color:#191919;
    text-decoration:underline;
    }
    .address dd a:hover {
    text-decoration:none;
    }

    /* VIDEO */
    .video-wrap {
    margin-bottom: 10px;
    position:relative;
    zoom:1;
    }
    .video-wrap object {
    position:relative;
    z-index:2;
    }
    .video-bg {
    background-color:black;
    position:absolute;
    left:0;
    top:0;
    z-index:1;
    }

    /* AUDIO */
    .audio-wrapper {
    margin-bottom:1.5em;
    }
    .audio-desc {
    font-size:.91em;
    color:#999;
    padding:.5em 0 0 0;
    }
    .audiojs audio { position: absolute; left: -1px; }
    .audiojs { width: 460px; height: 36px; background: #404040; overflow: hidden; font-family: monospace; font-size: 12px;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444), color-stop(0.5, #555), color-stop(0.51, #444), color-stop(1, #444));
    background-image: -moz-linear-gradient(center top, #444 0%, #555 50%, #444 51%, #444 100%);
    -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
    -o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); }
    .audiojs .play-pause { width: 25px; height: 40px; padding: 4px 6px; margin: 0px; float: left; overflow: hidden; border-right: 1px solid #000; }
    .audiojs p { display: none; width: 25px; height: 40px; margin: 0px; cursor: pointer; }
    .audiojs .play { display: block; }
    .audiojs .scrubber { position: relative; float: left; width: 280px; background: #5a5a5a; height: 14px; margin: 10px; border-top: 1px solid #3f3f3f; border-left: 0px; border-bottom: 0px; overflow: hidden; }
    .audiojs .progress { position: absolute; top: 0px; left: 0px; height: 14px; width: 0px; background: #ccc; z-index: 1;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ccc), color-stop(0.5, #ddd), color-stop(0.51, #ccc), color-stop(1, #ccc));
    background-image: -moz-linear-gradient(center top, #ccc 0%, #ddd 50%, #ccc 51%, #ccc 100%); }
    .audiojs .loaded { position: absolute; top: 0px; left: 0px; height: 14px; width: 0px; background: #000;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #222), color-stop(0.5, #333), color-stop(0.51, #222), color-stop(1, #222));
    background-image: -moz-linear-gradient(center top, #222 0%, #333 50%, #222 51%, #222 100%); }
    .audiojs .time { float: left; height: 36px; line-height: 36px; margin: 0px 0px 0px 6px; padding: 0px 6px 0px 12px; border-left: 1px solid #000; color: #ddd; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); }
    .audiojs .time em { padding: 0px 2px 0px 0px; color: #f9f9f9; font-style: normal; }
    .audiojs .time strong { padding: 0px 0px 0px 2px; font-weight: normal; }
    .audiojs .error-message { float: left; display: none; margin: 0px 10px; height: 36px; width: 400px; overflow: hidden; line-height: 36px; white-space: nowrap; color: #fff;
    text-overflow: ellipsis; -o-text-overflow: ellipsis; -icab-text-overflow: ellipsis; -khtml-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; }
    .audiojs .error-message a { color: #eee; text-decoration: none; padding-bottom: 1px; border-bottom: 1px solid #999; white-space: wrap; }

    .audiojs .play { background: url(js/audiojs/player-graphics.gif) -2px -1px no-repeat; }
    .audiojs .loading { background: url(js/audiojs/player-graphics.gif) -2px -31px no-repeat; }
    .audiojs .error { background: url(js/audiojs/player-graphics.gif) -2px -61px no-repeat; }
    .audiojs .pause { background: url(js/audiojs/player-graphics.gif) -2px -91px no-repeat; }

    .playing .play, .playing .loading, .playing .error { display: none; }
    .playing .pause { display: block; }

    .loading .play, .loading .pause, .loading .error { display: none; }
    .loading .loading { display: block; }

    .error .time, .error .play, .error .pause, .error .scrubber, .error .loading { display: none; }
    .error .error { display: block; }
    .error .play-pause p { cursor: auto; }
    .error .error-message { display: block; }

    /* Alert boxes
    —————————————- */
    .alert-box, .wpcf7-response-output {
    padding:20px 20px 20px 90px !important;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    font-size:.91em;
    line-height:1.4em;
    border:1px solid #dbdbdb;
    font-family:Georgia, “Times New Roman”, Times, serif;
    margin-bottom:15px;
    }
    .error-box, .wpcf7-mail-sent-ng {
    border-color:#ff9999;
    color:#c31b00;
    background:url(images/icons/alert/icon-error.png) no-repeat 20px 50% #ffcccc;
    }
    .attention-box, .wpcf7-validation-errors, .wpcf7-spam-blocked {
    border-color:#e6c555;
    color:#9e660d;
    background:url(images/icons/alert/icon-note.png) no-repeat 20px 50% #fdebae;
    }
    .notice-box {
    border-color:#68a2cf;
    color:#2e6093;
    background:url(images/icons/alert/icon-info.png) no-repeat 20px 50% #bfe4f9;
    }
    .approved-box, .wpcf7-mail-sent-ok {
    border-color:#a3c159;
    color:#5e6f33;
    background:url(images/icons/alert/icon-download.png) no-repeat 20px 50% #ccff99;
    }

    /* Forms
    —————————————- */

    /* Form defaults */
    input, select, textarea {
    font-family:Georgia, “Times New Roman”, Times, serif;
    font-size:1em;
    vertical-align:middle;
    font-weight:normal;
    border:1px solid #dbdbdb;
    outline:none;
    }
    input[type=”text”], textarea {
    background:#fff;
    padding:6px 5px 6px 5px;
    border:none;
    }
    input[type=”submit”], input[type=”reset”] {
    position:relative;
    display:inline-block;
    padding:0 18px;
    line-height:28px;
    background:#000;
    color:#ecede9;
    text-decoration:none;
    font-size:12px;
    border:none;
    height:28px;
    cursor:pointer;
    margin-right:4px;
    }
    input[type=”submit”]:hover, input[type=”reset”]:hover {
    background-color: #28adb2;
    color:#fff;
    }

    /* Comment form */
    #commentform {

    }
    #commentform p.field {
    margin-bottom:14px;
    font-style:italic;
    color:#7d7d7d;
    font-size:10px;
    }
    #commentform small {
    color:#8b8b8b;
    }
    #commentform label {
    display:block;
    }
    #commentform input[type=text] {
    width:215px;
    padding:8px;
    margin-bottom:6px;
    font-size:12px;
    }
    #commentform textarea {
    padding:8px;
    width:435px;
    max-width:435px;
    min-width:435px;
    height:195px;
    min-height:195px;
    overflow:auto;
    font-size:12px;
    }

    /* Contact form */
    .wpcf7-form p.field {
    margin-bottom:12px;
    overflow:hidden;
    vertical-align:top;
    width:380px;
    position:relative;
    }
    .wpcf7-form p.field label {
    float:left;
    width:79px;
    padding-top:6px;
    }
    .wpcf7-form p.field input {
    float:left;
    width:280px;
    padding:8px;
    }
    .wpcf7-form p.field small {
    color:red;
    }
    .wpcf7-form textarea {
    float:left;
    width:280px;
    max-width:280px;
    min-width:280px;
    height:235px;
    min-height:235px;
    padding:8px;
    overflow:auto;
    margin-bottom:17px;
    }
    .wpcf7-form .submit-wrap {
    padding:0 0 0 79px;
    margin:0;
    }
    span.wpcf7-form-control-wrap {
    display:block;
    }
    .wpcf7-not-valid-tip {
    width:285px !important;
    position:absolute;
    left:79px !important;
    top:0 !important;
    padding:4px 0 4px 10px !important;
    background:#f3b7b7 !important;
    color:red !important;
    border:1px solid red !important;
    font-size:11px !important;
    }

    /* Newsletter */
    #wpsb .widget.module {
    position:relative;
    overflow:hidden;
    margin:0;
    padding:5px 0 0 0;
    zoom:1;
    }
    .wpsb_form_label {
    display:inline;
    }
    p.error-mess {
    color:red;
    display:block;
    padding:0 0 .5em 0;
    margin-bottom:0;
    }
    #wpsb .widget.module br {
    display:none;
    }
    #wpsb input[type=”radio”] {
    display:none;
    }
    #wpsb input[type=”text”] {
    width:190px;
    float:left;
    margin:0;
    font-size:12px;
    text-transform:none;
    border:none;
    font-style:italic;
    font-size:10px;
    color:#7d7d7d;
    padding:7px 5px 8px 10px;
    }
    #wpsb input[type=”submit”] {
    float:left;
    margin:0;
    }
    #wpsb input[type=”submit”]:hover {
    background-color:#28adb2;
    color:#fff;
    }
    #wpsb .error {
    position:absolute;
    left:0;
    top:30px;
    color:red;
    }
    #wpsb .wpsb_form_label {
    margin:0;
    }

    /* Sidebar search form */
    #searchform {
    overflow:hidden;
    width:100%;
    }
    #searchform .searching {
    width:200px;
    margin-right:0;
    border:none;
    padding:6px 5px 7px 10px;
    float:left;
    }
    #searchform .submit {
    width:79px;
    cursor:pointer;
    padding-left:0;
    padding-right:0;
    float:left;
    }

    /* Fluid Columns */
    .one_half{ width:48%; }
    .one_third{ width:30.66%; }
    .two_third{ width:65.33%; }
    .one_fourth{ width:22%; }
    .three_fourth{ width:74%; }
    .one_fifth{ width:16.8%; }
    .two_fifth{ width:37.6%; }
    .three_fifth{ width:58.4%; }
    .four_fifth{ width:79.2%; }
    .one_sixth{ width:13.33%; }
    .five_sixth{ width:82.67%; }
    .one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth{ position:relative; margin-right:4%; float:left; }
    .last { margin-right:0 !important; clear:right; }

    .fleft { float:left;}
    .fright { float:right;}
    .clear { clear:both;}

    .wrapper {
    width:100%;
    overflow:hidden;
    }
    .extra-wrap {
    overflow:hidden;
    }

    /* Clear Floated Elements */
    .clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
    }

    .clearfix:after {
    clear: both;
    content: ‘ ‘;
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
    }

    .clearfix {
    display: inline-block;
    }

    * html .clearfix {
    height: 1%;
    }

    .clearfix {
    display: block;
    }
    #wp-admin-bar-root-default,
    #wp-admin-bar-root-default li,
    #wp-admin-bar-top-secondary,
    #wp-admin-bar-top-secondary li{
    border:none;
    }
    #wp-admin-bar-root-default li a,
    #wp-admin-bar-top-secondary li a{
    text-indent:0 !important;
    }

    /* Always remember to compress your live stylesheet and keep an uncompressed backup */`

    Header Code: `<!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    <title><?php if ( is_category() ) {
    echo ‘Category Archive for "’; single_cat_title(); echo ‘" | ‘; bloginfo( ‘name’ );
    } elseif ( is_tag() ) {
    echo ‘Tag Archive for "’; single_tag_title(); echo ‘" | ‘; bloginfo( ‘name’ );
    } elseif ( is_archive() ) {
    wp_title(”); echo ‘ Archive | ‘; bloginfo( ‘name’ );
    } elseif ( is_search() ) {
    echo ‘Search for "’.wp_specialchars($s).’" | ‘; bloginfo( ‘name’ );
    } elseif ( is_home() || is_front_page() ) {
    bloginfo( ‘name’ ); echo ‘ | ‘; bloginfo( ‘description’ );
    } elseif ( is_404() ) {
    echo ‘Error 404 Not Found | ‘; bloginfo( ‘name’ );
    } elseif ( is_single() ) {
    wp_title(”);
    } else {
    echo wp_title( ‘ | ‘, false, right ); bloginfo( ‘name’ );
    } ?></title>
    <meta name=”description” content=”<?php wp_title(); echo ‘ | ‘; bloginfo( ‘description’ ); ?>” />
    <meta charset=”<?php bloginfo( ‘charset’ ); ?>” />
    <link rel=”profile” href=”https://gmpg.org/xfn/11&#8243; />
    <link rel=”icon” href=”<?php bloginfo( ‘template_url’ ); ?>/favicon.ico” type=”image/x-icon” />
    <link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>” />
    <link rel=”alternate” type=”application/rss+xml” title=”<?php bloginfo( ‘name’ ); ?>” href=”<?php bloginfo( ‘rss2_url’ ); ?>” />
    <link rel=”alternate” type=”application/atom+xml” title=”<?php bloginfo( ‘name’ ); ?>” href=”<?php bloginfo( ‘atom_url’ ); ?>” />
    <!– The HTML5 Shim is required for older browsers, mainly older versions IE –>
    <!–[if lt IE 9]>
    <script src=”https://html5shim.googlecode.com/svn/trunk/html5.js”></script&gt;
    <![endif]–>
    <!–[if lt IE 8]>
    <div style=’ clear: both; text-align:center; position: relative;’>
    <a href=”https://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode”><img src=”https://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg&#8221; border=”0″ alt=”” /></a>
    </div>
    <![endif]–>
    <link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo( ‘template_url’ ); ?>/css/normalize.css” />
    <link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>” />
    <link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo( ‘template_url’ ); ?>/css/prettyPhoto.css” />
    <link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo( ‘template_url’ ); ?>/css/grid.css” />
    <link href=’https://fonts.googleapis.com/css?family=Antic&#8217; rel=’stylesheet’ type=’text/css’>
    <?php
    /* We add some JavaScript to pages with the comment form
    * to support sites with threaded comments (when in use).
    */
    if ( is_singular() && get_option( ‘thread_comments’ ) )
    wp_enqueue_script( ‘comment-reply’ );

    /* Always have wp_head() just before the closing </head>
    * tag of your theme, or you will break many plugins, which
    * generally use this hook to add elements to <head> such
    * as styles, scripts, and meta tags.
    */
    wp_head();
    ?>

    <script type=”text/javascript”>
    // initialise plugins
    jQuery(function(){
    // main navigation init
    jQuery(‘ul.sf-menu’).superfish({
    delay: <?php echo of_get_option(‘sf_delay’); ?>, // one second delay on mouseout
    animation: {opacity:'<?php echo of_get_option(‘sf_f_animation’); ?>’,height:'<?php echo of_get_option(‘sf_sl_animation’); ?>’}, // fade-in and slide-down animation
    speed: ‘<?php echo of_get_option(‘sf_speed’); ?>’, // faster animation speed
    autoArrows: <?php echo of_get_option(‘sf_arrows’); ?>, // generation of arrow mark-up (for submenu)
    dropShadows: <?php echo of_get_option(‘sf_shadows’); ?> // drop shadows (for submenu)
    });

    // prettyphoto init
    jQuery(“a[rel^=’prettyPhoto’]”).prettyPhoto({
    animation_speed:’normal’,
    slideshow:5000,
    autoplay_slideshow: false
    });

    jQuery(“.recent-posts.charities li:nth-child(2n)”).addClass(“nomargin”);
    jQuery(“ul ul li:last-child”).addClass(“last-child”);

    });

    // Init for audiojs
    audiojs.events.ready(function() {
    var as = audiojs.createAll();
    });
    </script>

    <script type=”text/javascript”>
    jQuery(window).load(function() {
    // nivoslider init
    jQuery(‘#slider’).nivoSlider({
    effect: ‘<?php echo of_get_option(‘sl_effect’); ?>’,
    slices:<?php echo of_get_option(‘sl_slices’); ?>,
    boxCols:<?php echo of_get_option(‘sl_box_columns’); ?>,
    boxRows:<?php echo of_get_option(‘sl_box_rows’); ?>,
    animSpeed:<?php echo of_get_option(‘sl_animation_speed’); ?>,
    pauseTime:<?php echo of_get_option(‘sl_pausetime’); ?>,
    directionNav:<?php echo of_get_option(‘sl_dir_nav’); ?>,
    directionNavHide:<?php echo of_get_option(‘sl_dir_nav_hide’); ?>,
    controlNav:<?php echo of_get_option(‘sl_control_nav’); ?>,
    captionOpacity:<?php $sl_caption_opacity = of_get_option(‘sl_caption_opacity’); if ($sl_caption_opacity != ”) { echo of_get_option(‘sl_caption_opacity’); } else { echo ‘0’; } ?>
    });<

Viewing 1 replies (of 1 total)

  • Sean,
    Did you ever figure this out? I have a client that purchased the same template and would like to change the color of the navigation as well. I tried finding the turquoise color and replacing it in the CSS but it didn’t have any effect.

    Thanks in advance for anything you can do to help.

Viewing 1 replies (of 1 total)
  • The topic ‘CSS/HTML Help for Template | Navigation Link Spacing and Shape’ is closed to new replies.