Center a logo image and Header - Wordpress

  • AGOTAY
  • Born
  • Born
  • AGOTAY
  • Posts: 3

Post 3+ Months Ago

I need help to center a logo image, it will be nice if can be something like on the capture jpg attached. I also need to decrease the header bar size to the minimum possible. I see some forums/post about editing a CSS file, but I'm not sure what file or part of it should be. I'm new on this web dev, take it easy on me...

I have to delete/remove some http address in order to summit the code here...

Any suggestion will be appreciate.
AGOTAY

Here the style.css code (I'm assuming this is .css file needed).

Code: [ Select ]
/* =======================================================================
                                Setup
======================================================================= */

@import "css/reset.css";

body{
    background:#f0f0f0 url(images/noise-2.png) repeat;
    font-size:12px;
    color:#4b5054;
}

.clearfix{
    clear:both;
    float:none;
    display:block;
}

img, video, embed, object, iframe{
    max-width: 100%;
}

.post-content img, .feat-img, .entry img, .page-entry img{
    height: auto !important;
}

/* =======================================================================
                                Typography
======================================================================= */

a, a.more-link p{
    color:#3A80BC;
    text-decoration:none;
}
a:hover{
    text-decoration:underline;
}
.timeline a:hover{
    text-decoration: none;
}

h1{    
    font-size: 24px;
    margin-bottom: 20px;
}
h1.post-title{
    margin-bottom: 5px;
}

#page h2, #full-page h2{
    font-size: 20px;
    margin-bottom:20px;
    font-weight:normal;
}
#page h2{
    margin: 30px 0 15px;
    padding-bottom:5px;
}
.box h2{
    font-size:14px;
    color:#333;
    margin-bottom:10px;
}
#archives-page .box h2{
    font-size: 16px;
    margin-bottom: 10px;
}

#archives-page .box-content{
    padding: 15px;
    width: 300px;
}

.box h2 a{
    color: #333;
    text-decoration: none;
}
.box h2 a:hover{
    text-decoration: underline;
}
.timeline h2{
    margin: 30px 0 15px 10px;
}

h3{
    font-size: 16px;
    font-weight:normal;
    margin-top:30px;
    margin-bottom:15px;
    padding-bottom:5px;
}
h3.widget-title{
    background: #6e7b82;
    background: rgba(57, 75, 86, 0.7);
    border:none 0;
    font-size: 16px;
    padding: 5px 10px;
    color: #FFF;
    text-shadow: 0 -1px rgba(0,0,0,0.45);
    margin-bottom: 15px;
}
h3.widget-title a{ color:#FFF; }

h4{
    font-size: 14px;
    margin: 20px 0 10px;
    padding-bottom:5px;
}

h5{
    font-size:14px;
    text-transform:uppercase;
    margin-top:20px;
    margin-bottom:15px;
    padding-bottom:5px;
}

h6{
    text-transform:uppercase;
    font-weight:bold;
    margin:5px 0 10px 0;
}

h1, h2, h3{
    color: #1a1a1a;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child{
    margin-top:0;
}

#comments h2, #comments h3{
    border-bottom:none 0;
    margin-top:0;
    margin-left:0;
}

/* =======================================
                 Lists
======================================== */
ul, ol{ margin-left:20px; }
ul.roman{ list-style:upper-alpha; }
ul.roman ul{ list-style:upper-roman; }
.box p, .box ul{
    line-height:16px;
    margin-bottom:10px;
}
.box, .box p, .box ul, .box ol{
    font-size: 11px;
}
#archives-page .box, #archives-page .box p, #archives-page .box ul, #archives-page .box ol{
    font-size: 12px;
}
.box ul li{
    margin: 0 0 5px 5px;
}

/* =======================================
            Paragraphs
======================================== */
#page p, #full-page p{
    margin-bottom:20px;
    line-height:1.5;
}
#footer p{
    font-size:11px;
}
hr{
    background:none;
    border-bottom:1px dotted #d4d4d6;
    clear:both;
}
/* =======================================
            Quotes
======================================== */
blockquote{
    background:url(images/quote.png) left top no-repeat;
    padding-left:30px;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-style:italic;
    font-size:14px;
    line-height:21px;
    color:#494949;
    margin:0 30px 15px 30px;
}
.box blockquote{
    font-size:12px;
    background:none;
    margin:0 0 10px 0;
    padding:0;
}
#sidebar blockquote{
    margin:0 15px 15px;
}
    
cite{
    display:block;
    font-style:normal;
    font-size:11px;
    text-align:right;
    margin:-5px 30px 20px 0;
}
#sidebar cite{
    margin:0 15px 0 0;
}
.box cite{
    margin:0 0 15px 0;
}

.format-quote p{
    font-size: 18px;
    line-height: 1.5;
    font-style: italic;
}
.col1 .format-quote p{
    font-size: 14px;
}
.col3 .format-quote p, .col4 .format-quote p, .quote .entry p:not(.post-details){
    font-size: 21px;
    font-style: italic;
}
    
/* =======================================
            Font Families
======================================== */    
pre {
    font-family: "Courier 10 Pitch", Courier, monospace;
}
code {
    font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
.post-info p, #archives-page .box .post-info p, .jta-tweet-timestamp, cite, .box, .box blockquote{
    color:#6f777d;
}

/* =======================================================================
                                Header
======================================================================= */
#header{
    margin-bottom: 30px;
    background:#FFF url(images/header-gradient.png) bottom repeat-x;
    padding: 30px 0 30px 15px;
    border-bottom:1px solid #FFF;
}

#logo{
    font-size: 24px;
    margin-bottom: 8px;
    line-height: 1.1;
}
img#logo{
    margin-bottom: 0;
}

#site-info a{
    font-weight:normal;
    color:#333;
    margin: 0 40px 0 0;
    text-decoration:none;
    text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
#site-info a:hover{
    opacity:0.75;
}

#site-info{
    margin: 9px 80px 0 0;
    float: left;
}

#site-description{
    font-weight:normal;
    font-size:12px;
    text-transform:uppercase;
    color:#999;
    margin-top:-5px;
}

.header-nav select{
    display: none;
}

.header-nav ul{
    list-style:none;
    padding:0;
    margin: 25px 0 0;
    float: left;
}

.header-nav li{
    display: inline;
    float: left;
    font-size: 14px;
    text-transform: uppercase;
    margin-left: 40px;
    position: relative;
    z-index: 99;
}    
.header-nav li:first-child{ margin-left:0; }

.header-nav li a{
    text-decoration:none;
    color:#616161;
}
li.parent a{
    background:url(images/parent-bg.png) right no-repeat;
    padding-right:13px;
}
li.parent li a{
    background:none;
    padding-right:0;
}
.header-nav li a:hover,
li.current-menu-item li a:hover,
li.current-menu-item a,
li.current_page_ancestor a,
li.current_page_ancestor li a:hover,
li.current_page_ancestor li.current-menu-item a{
    color:#3a80bc;
}
li.current-menu-item li a,
li.current_page_ancestor li a{
    color:#616161;
}

    /* ==========================
        Second Level
    ===========================*/
    .header-nav li li a{ border-bottom:none 0; }
    
    .header-nav ul ul{
        margin:0;
        position:absolute;
        top:35px;
        left:0;
        z-index:99;
        width:120px;
        background:#FFF;
        background:rgba( 255, 255, 255, 0.87 );
        padding:12px 20px;
        display:none;
        
        -webkit-box-shadow:0 3px 3px rgba(0,0,0,0.2);
        -moz-box-shadow:0 3px 3px rgba(0,0,0,0.2);
        box-shadow:0 3px 3px rgba(0,0,0,0.2);
        
        -moz-border-radius:10px;
        border-radius:10px;
    }
    
    .header-nav ul ul li a{
        font-size:12px;
        font-family:Arial, Helvetica, sans-serif;
        text-transform:none;
        display:block;
        font-weight:bold;
        padding:8px 0;
    }
    
    .header-nav ul ul li{
        display:block;
        clear:both;
        margin:0;
        line-height:12px;
        position:relative;
        width:100%;
        background:url(images/dotted-border.png) bottom repeat-x;
    }
    .header-nav ul ul li:last-child{ background: none; }
        
    /* ==========================
        Third Level
    ===========================*/
    .header-nav ul ul ul{
        position:relative;
        background:none;
        top:0;
        left:0;
        padding:0;
        margin-left:10px;
        margin-top:-3px;
        width:auto;
        -webkit-box-shadow:none;
        -moz-box-shadow:none;
        box-shadow:none;
    }
    .header-nav ul ul ul li a{
        font-weight:normal;
        font-size:11px;
        padding:4px 0;
    }
    
/* ==========================
    Social Networks
===========================*/
#social-networks{
    float:right;
    clear:right;
    margin: 20px 10px 0 0;
    
    background:-webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(243,243,243)),
        color-stop(1, rgb(247,247,247))
    );
    background:-moz-linear-gradient(
        center bottom,
        rgb(243,243,243) 0%,
        rgb(247,247,247) 100%
    );
    
    -webkit-box-shadow:0 1px 0 #dddddd;
    -moz-box-shadow:0 1px 0 #dddddd;
    box-shadow:0 1px 0 #dddddd;
}

#social-networks a{
    margin: 5px;
    display:inline-block;
    line-height: 0.75;
}
#social-networks a:first-child{ margin-left: 10px; }
#social-networks a:last-child{ margin-right: 10px; }

/* =======================================================================
                           Layout
======================================================================= */
#page{
    width: 680px;
    float: left;
}
.wrap{
    width: 1010px;
    margin: auto;
}

body.page-template-template-timeline-php .wrap, body.page-template-template-timeline-php .isotope, .month-header{
  width: 940px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

body.blog .wrap, #filtering-nav, body.blog .navigation, .isotope{
  min-width: 940px;
}

/* =======================================================================
                    Isotope Grid
======================================================================= */
.sort, #sort{
  margin: auto;
}
.isotope,
.isotope .isotope-item {
 /* change duration value to whatever you like */
 -webkit-transition-duration: 0.8s;
   -moz-transition-duration: 0.8s;
     transition-duration: 0.8s;
}
.isotope-item {
 z-index: 2;
}
.isotope-hidden.isotope-item {
 pointer-events: none;
 z-index: 1;
}

.box{
    margin:10px 10px 0;
    padding-bottom:10px;
    float:left;
    position: relative;
}
.content{
    padding-bottom:10px;
    position: relative;
}
.box:after, .content:after, .box:before, .content:before{
    content:"";
  position:absolute;
  z-index:-2;
  bottom: 30px;
  left: 10px;
  width: 50%;
  height: 20px;
  max-width:300px;
  -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.5); 
    -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.5);
      box-shadow:0 15px 10px rgba(0, 0, 0, 0.5);
  -webkit-transform:rotate(-3deg);  
    -moz-transform:rotate(-3deg); 
    -ms-transform:rotate(-3deg); 
      transform:rotate(-3deg);
}
.box:after, .content:after{
    right:10px;
  left:auto;
  -webkit-transform:rotate(3deg); 
    -moz-transform:rotate(3deg); 
    -ms-transform:rotate(3deg); 
      transform:rotate(3deg);
}

.timeline .box:after, .timeline .box:before{
    display: none;
}

.box img, .box object{
    z-index:0;
}

.box-content{
    -moz-border-radius: 6px;
    border-radius: 6px;
    background: #FFF;
    padding: 5px;
    overflow: hidden;
}

.not-found{
  padding: 20px;
}

.box .post-content{
    padding: 10px 10px 0;
}

.col1 .box-content{
    width:145px;
}
.col2 .box-content{
    width:320px;
}
.col3 .box-content{
    width:495px;
}
.col4 .box-content, .content .box-content{
    width:670px;
}

.invis{
    display:none;
}

.more-link{display:block; margin-top:5px;}

img.loop-ad{
    margin-bottom:3px;
}

.feat-img{
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}

.vid-container{
    margin-bottom: 5px;
}
.vid-container p{
    margin: 0;
}

.img-container{
    position: relative;
    background: #000;
    margin-bottom: 5px;
    line-height: 0;
    -moz-border-radius:5px;
    border-radius:5px;
}

.box .img-container{
    text-align:center;
}

.img-container:hover .actions{
    display: block;
    opacity: 1;
}

.img-container:hover a img.feat-img{
    opacity: 0.65;
}

.actions{
    position:absolute;
    display:none;
    top:30%;
    left:50%;
    margin-left:-133px;
    z-index:10;
    text-align:center;
    font-size:11px;
    text-transform:uppercase;
    opacity: 0;
}
.col1 .actions{
    margin-left:-30px;
    top: 20px;
    left: 50%;
}

.actions > a{
    background-color: #000;
    background-color:rgba(0,0,0,0.75);
    background-repeat:no-repeat;
    background-position:50% 12px;
    display:block;
    margin-right:10px;
    width:80px;
    height:18px;
    padding-top:62px;
    text-align:center;
    display:inline-block;
    color:#c9c9c9;
}
.actions > a:hover{
    background-color: #000;
}

a.view{
    background-image:url(images/enlarge.png);
}

a.play{
    background-image:url(images/play.png);
}

a.share{
    background-image:url(images/share.png);
    cursor:pointer;
    position:relative;
}

a.comment{
    background-image:url(images/comments.png);
    margin-right:0;
    position:relative;
}
a.comment span{
    position:absolute;
    left: 0;
    top: 27px;
    color:#222;
    font-size:12px;
    font-weight:bold;
    text-align: center;
    display: block;
    width: 100%;
}
a.closed{
    opacity: 0.6;
}
.col1 a.comment span{
    display: none;
}
.col1 a.view, .col1 a.share, .col1 a.comment, .col1 a.play{
    background-image:none;
    height:14px;
    width:60px;
    line-height:1;
    padding:3px;
    display:block;
    clear:both;
    margin-bottom:3px;
}

.comments-hidden{
    margin-left: -88px;
}

.share-container{
    background:url(images/share-triangle.png) top center no-repeat;
    padding-top:7px;
    position:absolute;
    left: 50%;
    margin-left: -47px;
    width: 95px;
    z-index:999;
}
.comments-hidden .share-container{
    margin-left: -6px;
}
.col1 .share-container{
    margin-left: -54px;
}

.share-icons{
    overflow:hidden;
    background:#FFF;
    background:-webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(224,224,224)),
        color-stop(1, rgb(255,255,255))
    );
    background:-moz-linear-gradient(
        center bottom,
        rgb(224,224,224) 0%,
        rgb(255,255,255) 100%
    );
    padding:0 5px;
    text-align:center;
}
#sidebar .share-icons{
    background:none;
    padding:0;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    -o-box-shadow:none;
    box-shadow:none;
    text-align:left;
}
.share-icons a{
    height:16px;
    width:16px;
    display:inline-block;
    margin:5px;
}

.post-footer{
    border-top:#ddd 1px solid;
    margin-top: 8px;
    overflow:hidden;
    padding: 8px 5px 4px;
}
.no-content .post-footer{
    border-top:none 0;
}

.category-ic{
    background:url(images/folder-ic.png) left no-repeat;
    padding-left:25px;
}
.shortlink{
    display:block;
    float:right;
    background:url(images/link-ic.png) center center no-repeat;
    width:18px;
    height:8px;
    margin-top:3px;
    text-indent:-9999px;
}

/* =======================================================================
                Filter Navigation and Basic Form Styles
======================================================================= */
#filtering-nav{
    padding-left:10px;
    margin: auto;
}
#filtering-nav ul{
    padding:0 0 5px;
    margin:0;
    overflow:hidden;
}
#filtering-nav li{
    display:inline;
    float:left;
    clear:right;
    list-style:none;
    margin-right:5px;
    margin-left:0;
}

#filtering-nav li a, input[type="submit"], input.submit, .navigation a{
    display:inline-block;
    padding:5px 10px;
    text-decoration:none;
    background:rgb(43,43,43);
    background: -moz-linear-gradient(top, #7b7b7b 0%, #2b2b2b 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7b7b7b), color-stop(100%,#2b2b2b));
    background: -webkit-linear-gradient(top, #7b7b7b 0%,#2b2b2b 100%);
    background: -ms-linear-gradient(top, #7b7b7b 0%,#2b2b2b 100%);
    background: linear-gradient(top, #7b7b7b 0%,#2b2b2b 100%);
    color:#FFF;
    cursor:pointer;
}
#filtering-nav li a:hover, input[type="submit"]:hover, input.submit:hover, .navigation a:hover{
    background: #111;
    background: -moz-linear-gradient(top, #444444 0%, #0a0a0a 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#0a0a0a));
    background: -webkit-linear-gradient(top, #444444 0%,#0a0a0a 100%);
    background: -ms-linear-gradient(top, #444444 0%,#0a0a0a 100%);
    background: linear-gradient(top, #444444 0%,#0a0a0a 100%);
}

a.filter-btn span{
    display:block;
    background:url(images/filter-ic.png) no-repeat;
    background-position:90% 50%;
    padding:4px 16px 4px 8px;
}
a.filter-btn{
    background:#FFF;
    background:-webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(233,233,233)),
        color-stop(1, rgb(255,255,255))
    );
    background:-moz-linear-gradient(
        center bottom,
        rgb(233,233,233) 0%,
        rgb(255,255,255) 100%
    );
    text-decoration:none;
    font-size:11px;
    text-transform:uppercase;
    color:#666;
    font-family:Verdana, Geneva, sans-serif;
    display:inline-block;
    margin-bottom:10px;
}
a.filter-btn:hover{
    -webkit-box-shadow:0 0 13px rgba(0,0,0,0.40);
    -moz-box-shadow:0 0 13px rgba(0,0,0,0.40);
    box-shadow:0 0 13px rgba(0,0,0,0.40);
}
/* =======================================================================
                            Single Post Page
======================================================================= */
.entry{
    text-align: left;
    padding: 30px;
    font-size: 13px;
}

.post-media{
    text-align: center;
}
#page .post-media p{
    margin-bottom: 0;
}

.post-details{
    font-size: 11px;
}
.postmetadata{
    background: #e3e3e3;
    font-size: 11px;
    text-align: center;
    padding: 6px 10px;
    clear: both;
}
.postmetadata, .postmetadata a{
    color:#4b5054;
}
.postmetadata strong{
    margin-left: 20px;
}
.postmetadata strong:first-child{
    margin-left: 0;
}

.minimal-content .entry{
    padding:15px 0 0;
}

.minimal-content .category{
    font-size: 11px;
}

/* =======================================================================
                            Comments
======================================================================= */
#comments{
    margin:0 30px;
}
.minimal-post #comments{
    margin-top: 30px;
}

#comments .navigation{
    margin:20px 0;
}

.author-avatar{
    line-height: 0.75;
    float: left;
    margin: 0 10px 0 0;
    width: 35px;
    height: 35px;
}

ol.commentlist{
    margin:0 0 30px;
}
ol.commentlist li{
    list-style: none;
    padding: 15px;
    margin: 0 0 15px 0;
    color: #6d747a;
    background: #f5f5f5;
    border: 1px solid #ccc;
}
ol.commentlist li.thread-alt{
    background: none;
}

ol.commentlist li h3#reply-title{
    margin-top:15px;
}

.no-comments #reply-title{
    display: none;
}

.comment-meta{
    margin-bottom:20px;
}
.author-name{
    font-size: 12px;
    font-weight: bold;
    display:block;
    color:#4b5054
}
.author-name a{
    color:#4b5054;
}
.comment-date, .reply a{
    color:#93979a;
    font-size:11px;
}

.reply a{
    background:url(images/reply-ic.png) left no-repeat;
    padding:3px 0 3px 20px;
    display:inline-block;
}

ol.commentlist .children{
    margin-top:30px;
}

input, textarea{
    background:#fff;
    background:rgba(255,255,255,0.75);
    font-family:Arial, Helvetica, sans-serif;
    color:#777;
    padding:5px 10px;
    margin-top:2px;
}
input:focus{
    -webkit-box-shadow:0 -2px 3px rgba(0,0,0,0.1);
    -moz-box-shadow:0 -2px 3px rgba(0,0,0,0.1);
    box-shadow:0 -2px 3px rgba(0,0,0,0.1);
}
input[type=text],input[type=password], textarea{
    display:block;
    border:1px solid #c9c9c9;
    -webkit-box-shadow:0 2px 3px rgba(0,0,0,0.1);
    -moz-box-shadow:0 2px 3px rgba(0,0,0,0.1);
    box-shadow:0 2px 3px rgba(0,0,0,0.1);
}
input[type=text],input[type=password]{
    width:310px;
    margin-bottom:10px;
}
input[type="password"]{
    width:200px;
}
input[type="submit"], input.submit{
    width:auto;
    border:0 none;
}
    
textarea{
    width:485px;
    padding:10px;
}
ol.commentlist li textarea{
    width:90%;
}
.form-allowed-tags{
    display: none;
}

label{
    font-size: 13px;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 5px;
}
.dsq-postid{
    display:none;
}

/* =======================================================================
                           Gallery
======================================================================= */
.box-content.solo-gallery{
    padding:0 10px 10px 10px;
}

.gallery-thumbs{
    overflow: hidden;
}
.gallery-thumb{
    margin: 5px 10px 5px 0;
    display: block;
    float: left;
    width: 216px;
    position: relative;
}

.gallery-link-list{
    display: none;
}

.slider-container{
    position:relative;
    margin-bottom: 5px;
    overflow: hidden;
}
.slides_container {
    overflow:hidden;
    position:relative;
    text-align:center;
    width: 100%;
}
.slides_container a{
    display:block;
    text-align:center;
}

.slider{
    position:absolute;
    z-index:100;
}

/* Different slider dimensions based on box size */
.col1 .slider-container, .col1 .slides_container, .col1 .slides_container a{
    width: 145px;
    height: 96px;
}
.col2 .slider-container, .col2 .slides_container, .col2 .slides_container a{
    width: 320px;
    height: 212px;
}
.col3 .slider-container, .col3 .slides_container, .col3 .slides_container a{
    width: 495px;
    height: 330px;
}
.col4 .slider-container, .col4 .slides_container, .col4 .slides_container a{
    width: 670px;
    height: 446px;
}

.slider .next, .slider .prev{
    position:absolute;
    bottom:15px;
    display:block;
    width:28px;
    height:28px;
    z-index:10;
    opacity: 0.75;
}
.slider .next:hover, .slider .prev:hover{ opacity: 1; }
.slider .prev{
    left: 50%;
    margin-left: -33px;
}
.slider .next{
    right: 50%;
    margin-right: -33px;
}

.col1 .slider .next, .col1 .slider .prev{
    display: none;
}

.enlarge-ic{
    background:url(images/enlarge-mini-ic.png) no-repeat;
    width:28px;
    height:28px;
    position:absolute;
    bottom:15px;
    right:15px;
    text-indent:-9999px;
    display:block;
    z-index:10;
    opacity: 0;
}

.gallery-thumb:hover .enlarge-ic{ opacity: 1; }

/* =======================================================================
                           Sidebar
======================================================================= */
#sidebar{
    float:left;
    width: 310px;
    margin: 20px 0 0 20px;
}
.box-content #sidebar {
    float: none;
    margin: 0;
    width: auto;
}

#sidebar li{
    background:url(images/dotted-border.png) bottom repeat-x;
    padding:6px;
    margin:0;
    list-style:none;
}
#sidebar li:last-child{
    background:none;
}

#sidebar ul, .textwidget{
    margin:0 15px;
}
#sidebar ul ul{
    margin-left:0;
    padding-left:15px;
    background:url(images/dotted-border.png) top repeat-x;
}
#sidebar .widget ul:last-child{
    margin-bottom:0;
}

body.blog #sidebar input[type="text"], body.blog #sidebar input[type="email"], body.blog #sidebar textarea{
  width: 95%;
}
body.blog #sidebar #s{
  margin-left: 12px;
  width: 210px;
}

.widget{
    margin-bottom:15px;
}

.widget input[type="text"]:not(#s), .widget textarea{
  width: 92%;
}
/* ================================================================
                            Widgets
================================================================ */

/* =============================
Related Posts and Cat. Posts
============================== */
#sidebar .rel-post-widget ul, #sidebar ul.cat-posts{
    margin: 0 10px;
}
#sidebar .rel-post-widget li, #sidebar ul.cat-posts li, .recent-posts li{
    padding: 10px 0;
}
.post-thumb{
    width:75px;
    padding:2px;
    float:left;
    background:#FFF;
    margin:0 10px 5px 0;
    line-height: 0.8;
}
.post-thumb img{
    max-width: 75px;
}
.no-excerpt{
    padding-top:25px;
}
.post-info p, #archives-page .box .post-info p{
    font-size:11px;
    margin-bottom: 0;
}

.widget ul h3, .widget .cat-post-item h3, .recent-posts h3{
    font-size:14px;
    margin:0 0 5px;
    padding:0;
    border:0 none;
}
.widget ul h3 a, .widget .cat-post-item h3 a, .recent-posts h3 a{
    color:#4b5054;
}

/* =============================
        Twitter
============================== */
#twitter_update_list li{
    overflow:hidden;
}

#sidebar li.jta-tweet-list-item
{
    overflow: hidden;
    padding:6px 6px 6px 0;
}
.jta-tweet-profile-image
{
    width: 48px;
    display: inline;
    float: left;
    padding:3px;
    background:#FFF;
}

.jta-tweet-timestamp
{
  display: block;
  font-size: 11px;
  margin-top: 3px;
}
.jta-login-info-profile-image
{
    width: 48px;
    display: inline;
    float: left;
}

.jta-login-info-block, .jta-tweet-body-list-profile-image-present
{
    margin-left: 62px;
}
.jta-error
{
  color: #f00;
}

.jta-clear
{
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

/* =============================
        Ads
============================== */

.sidebar-ad{
    margin-right:10px;
    margin-bottom:7px;
}
.last-ad, .last{
    margin-right:0;
}

/* =============================
        Flickr
============================== */
.flickr_photos{
    overflow:hidden;
    margin-bottom:15px;
}
.flickr_badge_image{
    display:inline;
    float:left;
    clear:right;
    margin:0 0 10px 15px;
    background:#FFF;
    padding:4px;
}

.rss-date{
    color:#747c82;
    font-size:11px;
    margin-bottom:1.25em;
    display:block;
}

/* =============================
        Other Widgets
============================== */
#wp-calendar {
    width:100%;
}
#wp-calendar caption {
    font-weight: bold;
    color: #222;
    text-align: left;
    font-size:14px;
    padding-bottom: 4px;
}
#wp-calendar thead {
    font-size:11px;
}
#wp-calendar thead th {
}
#wp-calendar tbody {
    color: #aaa;
}
#wp-calendar tbody td {
    padding: 3px 0 2px;
    background: #f5f5f5;
    border:1px solid #fff;
    text-align: center;
}
#wp-calendar tbody .pad {
    background: none;
}
#wp-calendar tfoot #next {
    text-align: right;
}

/* =======================================================================
                             Pages
======================================================================= */

.page-entry{ padding:20px; }

/* =======================================================================
                             Archives Page
======================================================================= */
.recent-posts{
    list-style:none;
    margin:0;
    padding:0;
}
.recent-posts li{
    background:url(images/dotted-border.png) bottom repeat-x;
    padding:8px 0;
}

.recent-posts li:last-child{
    background: none;
    padding-bottom: 0;
}

/* =======================================================================
                             Footer
======================================================================= */        
#footer{
    margin-top:60px;
    background:#FFF url(images/footer-gradient.png) top repeat-x;
    background:url(images/footer-gradient.png) top repeat-x, url(images/header-gradient.png) bottom repeat-x #FFF;
    border-bottom:1px solid #fff;
    padding: 30px 0;
    color:#999;
    clear:both;
}
#footer p{
    margin-bottom:0;
}

/* =======================================================================
                                 WordPress Specific
======================================================================= */
.alignleft,
.post img.alignleft {
    display: inline;
    float: left;
    margin-right: 20px;
    margin-top: 4px;
}
.alignright,
.post img.alignright {
    display: inline;
    float: right;
    clear:right;
    margin-left: 20px;
    margin-top: 4px;
}
#footer .alignright{
  margin-top: 0;
}
.aligncenter,
.post img.aligncenter {
    text-align:center;
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.post img.alignleft,
.post img.alignright,
.post img.aligncenter {
    margin-bottom: 20px;
}
.post .wp-caption {
    line-height: 1.5;
    font-size:11px;
    text-align: center;
    margin-bottom: 20px;
    padding: 5px;
    background:#f0f0f0 url(images/white-noise.png) repeat;
    -webkit-box-shadow:-1px -1px 0 rgba(0,0,0,0.12);
    -moz-box-shadow:-1px -1px 0 rgba(0,0,0,0.12);
    box-shadow:-1px -1px 0 rgba(0,0,0,0.12);
}
.post .wp-caption img {
    margin: 5px;
}
#page .wp-caption p, #full-page {
    margin-bottom:0;
}
#single .post .wp-caption p.wp-caption-text {
    margin: 5px;
    font-size: 11px;
}
.post .wp-smiley {
    margin:0;
}
.post .gallery {
    margin: auto;
}
.post .gallery .gallery-item {
    float: left;
    margin-top: 0;
    text-align: center;
    width: 33%;
}
.post .gallery img {
    border: 2px solid #cfcfcf;
}
.post .gallery .gallery-caption {
    color: #888;
    font-size: 12px;
    margin: 0 0 12px;
}
.post .gallery dl {
    margin: 0;
}
.post .gallery img {
    border: 2px solid #f1f1f1;
}
.post .gallery br+br {
    display: none;
}
.page-link {
    color: #000;
    font-weight:bold;
    margin:0 0 22px 0;
    word-spacing:0.5em;
}
.page-link a:link,
.page-link a:visited {
    background: #f1f1f1;
    color:#333;
    font-weight:normal;
    padding:0.5em 0.75em;
    text-decoration:none;
}
.page-link a:active,
.page-link a:hover {
    color: #D27E1C;
}
#post-image{
    text-align:center;
}
#post-image img{
    margin-bottom:28px;
    -moz-border-radius:7px;
    border-radius:7px;
}

.navigation{
    padding-left:10px;
    margin: auto;
}
.navigation a{
    padding:5px 10px;
}
#nav-above{
    margin-bottom:15px;
}
#nav-below{    
    margin-top:20px;
}
.nav-previous{
    float:left;
    clear:right;
    margin-right:20px;
}
.nav-next{
    float:right;
    clear:right;
    margin-right:20px;
}
#comments .nav-next{
    margin-right:0;
}

#s{ /* This keeps the search inputs in line */
    float:left;
    clear:left;
    width:210px;
}
#searchsubmit{
    float:left;
    clear:right;
    margin-left:10px;
}
#searchform{
    margin-bottom:15px;
    overflow:hidden;
}

/* Infinite Scroll Compatibility */

#infscr-loading {
 position: fixed;
 bottom: 30px;
 left: 42%;
 z-index: 100;
 background: white;
 background: hsla( 0, 0%, 100%, 0.9 );
 padding: 20px;
 color: #222;
 font-size: 15px;
 font-weight: bold;
 -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
     border-radius: 10px;
}

/* =======================================================================
                             Common Styles
======================================================================= */
.box, .menu li a, #header h1 a, a.filter-btn, input, .slider .next, .slider .prev{
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    transition: all 200ms ease;
}
#logo, .flickr_badge_image, .jta-tweet-profile-image, .enlarge-ic, .feat-img, .actions, .wrap, #filtering-nav{
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    transition: all 300ms ease;
}
a.view, a.share, a.comment, .share-icons, ol.commentlist li{
    -moz-border-radius:8px;
    -webkit-border-radius: 8px;
    border-radius:8px;
}
#social-networks, a.filter-btn, #filtering-nav li a, input, textarea, .navigation a, .postmetadata, .author-avatar img, .slider-container, .gallery-thumb img, .feat-img{
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
a.filter-btn, #filtering-nav li a, .share-icons, .navigation a{
    -webkit-box-shadow:0 1px 0 #FFF;
    -moz-box-shadow:0 1px 0 #FFF;
    box-shadow:0 1px 0 #FFF;
}

.flickr_badge_image, .jta-tweet-profile-image, .box-content, .post-thumb{
    -moz-box-shadow:0px 0px 3px rgba(0,0,0,0.15);
    -webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.15);
    box-shadow:0px 0px 3px rgba(0,0,0,0.15);
}

.box:hover .box-content, .flickr_badge_image:hover, .jta-tweet-profile-image:hover{
    -moz-box-shadow:0px 0px 4px rgba(0,0,0,0.4);
    -webkit-box-shadow:0px 0px 4px rgba(0,0,0,0.4);
    box-shadow:0px 0px 4px rgba(0,0,0,0.4);
}

a.filter-btn, a.comment span{
    text-shadow:0 1px #FFF;
}

@media screen and (max-width: 1024px) {
    #sidebar{
        width: 240px;
    }
    .wrap{
      width: 940px;
    }
}

/* iPad */
@media screen and (max-width: 768px) and (orientation:portrait) {
  
  /* ********************************
                Header
    ******************************** */
    #header{
        padding: 20px;
    }
    
    #header .wrap, #footer .wrap{
      min-width: 0;
      width: 95% !important;;
    }
    
    body.page-template-template-timeline-php .wrap, body.page-template-template-timeline-php .isotope, .month-header{
      width: auto !important;
    }
    
    body.blog .wrap, #filtering-nav, body.blog .navigation, .isotope{
    min-width: 0;
  }
    
    #site-info{
        margin-bottom: 15px;
        margin-top: 0 !important;
        margin-right: 0;
        float: none;
        text-align: center;
    }
    
    #logo a{
        margin: 0;
    }
    
    .header-nav select{
        display: block;
    width: 95%;
    max-width: 400px;
        margin: 0 auto 15px;
        margin-bottom: 15px;
    }
    
    .header-nav ul{
        display: none;
    }
        
    #social-networks{
        float: none;
        width: 95%;
        margin: auto !important;
        text-align: center;
        background: none !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
    }
  
  .wrap{
    width: 99%;
  }
  
    #page{
        width: 480px;
        margin-left: 10px;
    }
    
    .content .box-content{
        width: 460px;
    }
    
    #s{
      width: 145px;
    }
    
    textarea{
      width: 93%;
    }
}

/* Small Screens */
@media screen and (max-width: 500px) {
  
    #page, #site-info, .header-nav select, #sidebar, #full-page, #archives-page .col2, .isotope-item, .wrap{
        width: 95%;
        margin: auto;
    }
    
    /* ********************************
                Gallery Posts
    ******************************** */
    
    #grid{
        padding: 0;
    }
    
    .sort{
      width: 96% !important;
      margin: auto;
    }
    
    .sort .box{
      width: 100% !important;
      margin: 10px 0;
      padding-bottom: 10px;
      float: none;
    }
    
    .sort .box.col1{
      width: 155px !important;
      margin: auto;
    }
    
    .timeline .sort .box.col1{
    float: left;
    margin: 0 10px;
    }
    
    .timeline .sort{
      overflow: hidden;
    }
    
    .timeline .month-header{
      text-align: center;
    }
    
    #gallery-sidebar{
        display: none;
        height: 0;
        overflow: hidden;
        margin-top: -20px;
    }
    
    #archives-page #grid{
        padding: 0 10px;
    }
    
    .col2, .col3, .col5{
        width: 95%;
    }
    
     .col2 .box-content,
     .col3 .box-content,
     .col4 .box-content,
     .content .box-content,
     #archives-page .box-content{
        width: 95%;
        margin: auto;
        float: none;
    }
    
    iframe{
        height: 200px;
    }
    
    .col2 .slider-container, .col2 .slides_container, .col2 .slides_container a,
    .col3 .slider-container, .col3 .slides_container, .col3 .slides_container a,
    .col4 .slider-container, .col4 .slides_container, .col4 .slides_container a{
        width: 280px;
        height: 212px;
        margin: auto;
        background: none;
    }
    
    .col2 .slider-container img, .col3 .slider-container img, .col4 .slider-container img{
        height: auto !important;
        width: auto !important;
        max-width: 95%;
        max-height: 100%;
        margin: auto !important;
    }
    
    .img-container{
        background: none;
    }
    
    .img-container img{
        width: 100%;
    }
    
    .img-container:hover .actions{
        display: none;
        opacity: 0;
    }
    
    .img-container:hover a img.feat-img{
        opacity: 1;
    }
    
    /* ********************************
            Single Post / Pages
    ******************************** */
    
    #page, #sidebar{
        float: none;
    }
    
    #sidebar{
        margin-top: 30px;
        width: 90%;
    }
    
    .entry{
        padding: 10px;
    }
    
    .gallery-thumb{
        width: 108px;
    }
    
    .gallery-thumb img{
        height: auto !important;
    }
    
    .postmetadata{
        margin-bottom: 20px;
    }
    
    #comments{
        margin: 0 10px;
    }
    
    input[type="text"], textarea{
        width: 90%;
    }
    
    #footer{
        margin-top: 20px;
        padding: 15px 0;
    }
    
    #footer .alignright{
        float: none;
        display: block;
        margin: 10px 0 0;
    }
}
  1. /* =======================================================================
  2.                                 Setup
  3. ======================================================================= */
  4. @import "css/reset.css";
  5. body{
  6.     background:#f0f0f0 url(images/noise-2.png) repeat;
  7.     font-size:12px;
  8.     color:#4b5054;
  9. }
  10. .clearfix{
  11.     clear:both;
  12.     float:none;
  13.     display:block;
  14. }
  15. img, video, embed, object, iframe{
  16.     max-width: 100%;
  17. }
  18. .post-content img, .feat-img, .entry img, .page-entry img{
  19.     height: auto !important;
  20. }
  21. /* =======================================================================
  22.                                 Typography
  23. ======================================================================= */
  24. a, a.more-link p{
  25.     color:#3A80BC;
  26.     text-decoration:none;
  27. }
  28. a:hover{
  29.     text-decoration:underline;
  30. }
  31. .timeline a:hover{
  32.     text-decoration: none;
  33. }
  34. h1{    
  35.     font-size: 24px;
  36.     margin-bottom: 20px;
  37. }
  38. h1.post-title{
  39.     margin-bottom: 5px;
  40. }
  41. #page h2, #full-page h2{
  42.     font-size: 20px;
  43.     margin-bottom:20px;
  44.     font-weight:normal;
  45. }
  46. #page h2{
  47.     margin: 30px 0 15px;
  48.     padding-bottom:5px;
  49. }
  50. .box h2{
  51.     font-size:14px;
  52.     color:#333;
  53.     margin-bottom:10px;
  54. }
  55. #archives-page .box h2{
  56.     font-size: 16px;
  57.     margin-bottom: 10px;
  58. }
  59. #archives-page .box-content{
  60.     padding: 15px;
  61.     width: 300px;
  62. }
  63. .box h2 a{
  64.     color: #333;
  65.     text-decoration: none;
  66. }
  67. .box h2 a:hover{
  68.     text-decoration: underline;
  69. }
  70. .timeline h2{
  71.     margin: 30px 0 15px 10px;
  72. }
  73. h3{
  74.     font-size: 16px;
  75.     font-weight:normal;
  76.     margin-top:30px;
  77.     margin-bottom:15px;
  78.     padding-bottom:5px;
  79. }
  80. h3.widget-title{
  81.     background: #6e7b82;
  82.     background: rgba(57, 75, 86, 0.7);
  83.     border:none 0;
  84.     font-size: 16px;
  85.     padding: 5px 10px;
  86.     color: #FFF;
  87.     text-shadow: 0 -1px rgba(0,0,0,0.45);
  88.     margin-bottom: 15px;
  89. }
  90. h3.widget-title a{ color:#FFF; }
  91. h4{
  92.     font-size: 14px;
  93.     margin: 20px 0 10px;
  94.     padding-bottom:5px;
  95. }
  96. h5{
  97.     font-size:14px;
  98.     text-transform:uppercase;
  99.     margin-top:20px;
  100.     margin-bottom:15px;
  101.     padding-bottom:5px;
  102. }
  103. h6{
  104.     text-transform:uppercase;
  105.     font-weight:bold;
  106.     margin:5px 0 10px 0;
  107. }
  108. h1, h2, h3{
  109.     color: #1a1a1a;
  110. }
  111. h1:first-child,
  112. h2:first-child,
  113. h3:first-child,
  114. h4:first-child,
  115. h5:first-child,
  116. h6:first-child{
  117.     margin-top:0;
  118. }
  119. #comments h2, #comments h3{
  120.     border-bottom:none 0;
  121.     margin-top:0;
  122.     margin-left:0;
  123. }
  124. /* =======================================
  125.                  Lists
  126. ======================================== */
  127. ul, ol{ margin-left:20px; }
  128. ul.roman{ list-style:upper-alpha; }
  129. ul.roman ul{ list-style:upper-roman; }
  130. .box p, .box ul{
  131.     line-height:16px;
  132.     margin-bottom:10px;
  133. }
  134. .box, .box p, .box ul, .box ol{
  135.     font-size: 11px;
  136. }
  137. #archives-page .box, #archives-page .box p, #archives-page .box ul, #archives-page .box ol{
  138.     font-size: 12px;
  139. }
  140. .box ul li{
  141.     margin: 0 0 5px 5px;
  142. }
  143. /* =======================================
  144.             Paragraphs
  145. ======================================== */
  146. #page p, #full-page p{
  147.     margin-bottom:20px;
  148.     line-height:1.5;
  149. }
  150. #footer p{
  151.     font-size:11px;
  152. }
  153. hr{
  154.     background:none;
  155.     border-bottom:1px dotted #d4d4d6;
  156.     clear:both;
  157. }
  158. /* =======================================
  159.             Quotes
  160. ======================================== */
  161. blockquote{
  162.     background:url(images/quote.png) left top no-repeat;
  163.     padding-left:30px;
  164.     font-family:Georgia, "Times New Roman", Times, serif;
  165.     font-style:italic;
  166.     font-size:14px;
  167.     line-height:21px;
  168.     color:#494949;
  169.     margin:0 30px 15px 30px;
  170. }
  171. .box blockquote{
  172.     font-size:12px;
  173.     background:none;
  174.     margin:0 0 10px 0;
  175.     padding:0;
  176. }
  177. #sidebar blockquote{
  178.     margin:0 15px 15px;
  179. }
  180.     
  181. cite{
  182.     display:block;
  183.     font-style:normal;
  184.     font-size:11px;
  185.     text-align:right;
  186.     margin:-5px 30px 20px 0;
  187. }
  188. #sidebar cite{
  189.     margin:0 15px 0 0;
  190. }
  191. .box cite{
  192.     margin:0 0 15px 0;
  193. }
  194. .format-quote p{
  195.     font-size: 18px;
  196.     line-height: 1.5;
  197.     font-style: italic;
  198. }
  199. .col1 .format-quote p{
  200.     font-size: 14px;
  201. }
  202. .col3 .format-quote p, .col4 .format-quote p, .quote .entry p:not(.post-details){
  203.     font-size: 21px;
  204.     font-style: italic;
  205. }
  206.     
  207. /* =======================================
  208.             Font Families
  209. ======================================== */    
  210. pre {
  211.     font-family: "Courier 10 Pitch", Courier, monospace;
  212. }
  213. code {
  214.     font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
  215. }
  216. .post-info p, #archives-page .box .post-info p, .jta-tweet-timestamp, cite, .box, .box blockquote{
  217.     color:#6f777d;
  218. }
  219. /* =======================================================================
  220.                                 Header
  221. ======================================================================= */
  222. #header{
  223.     margin-bottom: 30px;
  224.     background:#FFF url(images/header-gradient.png) bottom repeat-x;
  225.     padding: 30px 0 30px 15px;
  226.     border-bottom:1px solid #FFF;
  227. }
  228. #logo{
  229.     font-size: 24px;
  230.     margin-bottom: 8px;
  231.     line-height: 1.1;
  232. }
  233. img#logo{
  234.     margin-bottom: 0;
  235. }
  236. #site-info a{
  237.     font-weight:normal;
  238.     color:#333;
  239.     margin: 0 40px 0 0;
  240.     text-decoration:none;
  241.     text-shadow: rgba(0,0,0,.01) 0 0 1px;
  242. }
  243. #site-info a:hover{
  244.     opacity:0.75;
  245. }
  246. #site-info{
  247.     margin: 9px 80px 0 0;
  248.     float: left;
  249. }
  250. #site-description{
  251.     font-weight:normal;
  252.     font-size:12px;
  253.     text-transform:uppercase;
  254.     color:#999;
  255.     margin-top:-5px;
  256. }
  257. .header-nav select{
  258.     display: none;
  259. }
  260. .header-nav ul{
  261.     list-style:none;
  262.     padding:0;
  263.     margin: 25px 0 0;
  264.     float: left;
  265. }
  266. .header-nav li{
  267.     display: inline;
  268.     float: left;
  269.     font-size: 14px;
  270.     text-transform: uppercase;
  271.     margin-left: 40px;
  272.     position: relative;
  273.     z-index: 99;
  274. }    
  275. .header-nav li:first-child{ margin-left:0; }
  276. .header-nav li a{
  277.     text-decoration:none;
  278.     color:#616161;
  279. }
  280. li.parent a{
  281.     background:url(images/parent-bg.png) right no-repeat;
  282.     padding-right:13px;
  283. }
  284. li.parent li a{
  285.     background:none;
  286.     padding-right:0;
  287. }
  288. .header-nav li a:hover,
  289. li.current-menu-item li a:hover,
  290. li.current-menu-item a,
  291. li.current_page_ancestor a,
  292. li.current_page_ancestor li a:hover,
  293. li.current_page_ancestor li.current-menu-item a{
  294.     color:#3a80bc;
  295. }
  296. li.current-menu-item li a,
  297. li.current_page_ancestor li a{
  298.     color:#616161;
  299. }
  300.     /* ==========================
  301.         Second Level
  302.     ===========================*/
  303.     .header-nav li li a{ border-bottom:none 0; }
  304.     
  305.     .header-nav ul ul{
  306.         margin:0;
  307.         position:absolute;
  308.         top:35px;
  309.         left:0;
  310.         z-index:99;
  311.         width:120px;
  312.         background:#FFF;
  313.         background:rgba( 255, 255, 255, 0.87 );
  314.         padding:12px 20px;
  315.         display:none;
  316.         
  317.         -webkit-box-shadow:0 3px 3px rgba(0,0,0,0.2);
  318.         -moz-box-shadow:0 3px 3px rgba(0,0,0,0.2);
  319.         box-shadow:0 3px 3px rgba(0,0,0,0.2);
  320.         
  321.         -moz-border-radius:10px;
  322.         border-radius:10px;
  323.     }
  324.     
  325.     .header-nav ul ul li a{
  326.         font-size:12px;
  327.         font-family:Arial, Helvetica, sans-serif;
  328.         text-transform:none;
  329.         display:block;
  330.         font-weight:bold;
  331.         padding:8px 0;
  332.     }
  333.     
  334.     .header-nav ul ul li{
  335.         display:block;
  336.         clear:both;
  337.         margin:0;
  338.         line-height:12px;
  339.         position:relative;
  340.         width:100%;
  341.         background:url(images/dotted-border.png) bottom repeat-x;
  342.     }
  343.     .header-nav ul ul li:last-child{ background: none; }
  344.         
  345.     /* ==========================
  346.         Third Level
  347.     ===========================*/
  348.     .header-nav ul ul ul{
  349.         position:relative;
  350.         background:none;
  351.         top:0;
  352.         left:0;
  353.         padding:0;
  354.         margin-left:10px;
  355.         margin-top:-3px;
  356.         width:auto;
  357.         -webkit-box-shadow:none;
  358.         -moz-box-shadow:none;
  359.         box-shadow:none;
  360.     }
  361.     .header-nav ul ul ul li a{
  362.         font-weight:normal;
  363.         font-size:11px;
  364.         padding:4px 0;
  365.     }
  366.     
  367. /* ==========================
  368.     Social Networks
  369. ===========================*/
  370. #social-networks{
  371.     float:right;
  372.     clear:right;
  373.     margin: 20px 10px 0 0;
  374.     
  375.     background:-webkit-gradient(
  376.         linear,
  377.         left bottom,
  378.         left top,
  379.         color-stop(0, rgb(243,243,243)),
  380.         color-stop(1, rgb(247,247,247))
  381.     );
  382.     background:-moz-linear-gradient(
  383.         center bottom,
  384.         rgb(243,243,243) 0%,
  385.         rgb(247,247,247) 100%
  386.     );
  387.     
  388.     -webkit-box-shadow:0 1px 0 #dddddd;
  389.     -moz-box-shadow:0 1px 0 #dddddd;
  390.     box-shadow:0 1px 0 #dddddd;
  391. }
  392. #social-networks a{
  393.     margin: 5px;
  394.     display:inline-block;
  395.     line-height: 0.75;
  396. }
  397. #social-networks a:first-child{ margin-left: 10px; }
  398. #social-networks a:last-child{ margin-right: 10px; }
  399. /* =======================================================================
  400.                            Layout
  401. ======================================================================= */
  402. #page{
  403.     width: 680px;
  404.     float: left;
  405. }
  406. .wrap{
  407.     width: 1010px;
  408.     margin: auto;
  409. }
  410. body.page-template-template-timeline-php .wrap, body.page-template-template-timeline-php .isotope, .month-header{
  411.   width: 940px !important;
  412.   margin-right: auto !important;
  413.   margin-left: auto !important;
  414. }
  415. body.blog .wrap, #filtering-nav, body.blog .navigation, .isotope{
  416.   min-width: 940px;
  417. }
  418. /* =======================================================================
  419.                     Isotope Grid
  420. ======================================================================= */
  421. .sort, #sort{
  422.   margin: auto;
  423. }
  424. .isotope,
  425. .isotope .isotope-item {
  426.  /* change duration value to whatever you like */
  427.  -webkit-transition-duration: 0.8s;
  428.    -moz-transition-duration: 0.8s;
  429.      transition-duration: 0.8s;
  430. }
  431. .isotope-item {
  432.  z-index: 2;
  433. }
  434. .isotope-hidden.isotope-item {
  435.  pointer-events: none;
  436.  z-index: 1;
  437. }
  438. .box{
  439.     margin:10px 10px 0;
  440.     padding-bottom:10px;
  441.     float:left;
  442.     position: relative;
  443. }
  444. .content{
  445.     padding-bottom:10px;
  446.     position: relative;
  447. }
  448. .box:after, .content:after, .box:before, .content:before{
  449.     content:"";
  450.   position:absolute;
  451.   z-index:-2;
  452.   bottom: 30px;
  453.   left: 10px;
  454.   width: 50%;
  455.   height: 20px;
  456.   max-width:300px;
  457.   -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.5); 
  458.     -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.5);
  459.       box-shadow:0 15px 10px rgba(0, 0, 0, 0.5);
  460.   -webkit-transform:rotate(-3deg);  
  461.     -moz-transform:rotate(-3deg); 
  462.     -ms-transform:rotate(-3deg); 
  463.       transform:rotate(-3deg);
  464. }
  465. .box:after, .content:after{
  466.     right:10px;
  467.   left:auto;
  468.   -webkit-transform:rotate(3deg); 
  469.     -moz-transform:rotate(3deg); 
  470.     -ms-transform:rotate(3deg); 
  471.       transform:rotate(3deg);
  472. }
  473. .timeline .box:after, .timeline .box:before{
  474.     display: none;
  475. }
  476. .box img, .box object{
  477.     z-index:0;
  478. }
  479. .box-content{
  480.     -moz-border-radius: 6px;
  481.     border-radius: 6px;
  482.     background: #FFF;
  483.     padding: 5px;
  484.     overflow: hidden;
  485. }
  486. .not-found{
  487.   padding: 20px;
  488. }
  489. .box .post-content{
  490.     padding: 10px 10px 0;
  491. }
  492. .col1 .box-content{
  493.     width:145px;
  494. }
  495. .col2 .box-content{
  496.     width:320px;
  497. }
  498. .col3 .box-content{
  499.     width:495px;
  500. }
  501. .col4 .box-content, .content .box-content{
  502.     width:670px;
  503. }
  504. .invis{
  505.     display:none;
  506. }
  507. .more-link{display:block; margin-top:5px;}
  508. img.loop-ad{
  509.     margin-bottom:3px;
  510. }
  511. .feat-img{
  512.     -webkit-backface-visibility:hidden;
  513.     backface-visibility:hidden;
  514. }
  515. .vid-container{
  516.     margin-bottom: 5px;
  517. }
  518. .vid-container p{
  519.     margin: 0;
  520. }
  521. .img-container{
  522.     position: relative;
  523.     background: #000;
  524.     margin-bottom: 5px;
  525.     line-height: 0;
  526.     -moz-border-radius:5px;
  527.     border-radius:5px;
  528. }
  529. .box .img-container{
  530.     text-align:center;
  531. }
  532. .img-container:hover .actions{
  533.     display: block;
  534.     opacity: 1;
  535. }
  536. .img-container:hover a img.feat-img{
  537.     opacity: 0.65;
  538. }
  539. .actions{
  540.     position:absolute;
  541.     display:none;
  542.     top:30%;
  543.     left:50%;
  544.     margin-left:-133px;
  545.     z-index:10;
  546.     text-align:center;
  547.     font-size:11px;
  548.     text-transform:uppercase;
  549.     opacity: 0;
  550. }
  551. .col1 .actions{
  552.     margin-left:-30px;
  553.     top: 20px;
  554.     left: 50%;
  555. }
  556. .actions > a{
  557.     background-color: #000;
  558.     background-color:rgba(0,0,0,0.75);
  559.     background-repeat:no-repeat;
  560.     background-position:50% 12px;
  561.     display:block;
  562.     margin-right:10px;
  563.     width:80px;
  564.     height:18px;
  565.     padding-top:62px;
  566.     text-align:center;
  567.     display:inline-block;
  568.     color:#c9c9c9;
  569. }
  570. .actions > a:hover{
  571.     background-color: #000;
  572. }
  573. a.view{
  574.     background-image:url(images/enlarge.png);
  575. }
  576. a.play{
  577.     background-image:url(images/play.png);
  578. }
  579. a.share{
  580.     background-image:url(images/share.png);
  581.     cursor:pointer;
  582.     position:relative;
  583. }
  584. a.comment{
  585.     background-image:url(images/comments.png);
  586.     margin-right:0;
  587.     position:relative;
  588. }
  589. a.comment span{
  590.     position:absolute;
  591.     left: 0;
  592.     top: 27px;
  593.     color:#222;
  594.     font-size:12px;
  595.     font-weight:bold;
  596.     text-align: center;
  597.     display: block;
  598.     width: 100%;
  599. }
  600. a.closed{
  601.     opacity: 0.6;
  602. }
  603. .col1 a.comment span{
  604.     display: none;
  605. }
  606. .col1 a.view, .col1 a.share, .col1 a.comment, .col1 a.play{
  607.     background-image:none;
  608.     height:14px;
  609.     width:60px;
  610.     line-height:1;
  611.     padding:3px;
  612.     display:block;
  613.     clear:both;
  614.     margin-bottom:3px;
  615. }
  616. .comments-hidden{
  617.     margin-left: -88px;
  618. }
  619. .share-container{
  620.     background:url(images/share-triangle.png) top center no-repeat;
  621.     padding-top:7px;
  622.     position:absolute;
  623.     left: 50%;
  624.     margin-left: -47px;
  625.     width: 95px;
  626.     z-index:999;
  627. }
  628. .comments-hidden .share-container{
  629.     margin-left: -6px;
  630. }
  631. .col1 .share-container{
  632.     margin-left: -54px;
  633. }
  634. .share-icons{
  635.     overflow:hidden;
  636.     background:#FFF;
  637.     background:-webkit-gradient(
  638.         linear,
  639.         left bottom,
  640.         left top,
  641.         color-stop(0, rgb(224,224,224)),
  642.         color-stop(1, rgb(255,255,255))
  643.     );
  644.     background:-moz-linear-gradient(
  645.         center bottom,
  646.         rgb(224,224,224) 0%,
  647.         rgb(255,255,255) 100%
  648.     );
  649.     padding:0 5px;
  650.     text-align:center;
  651. }
  652. #sidebar .share-icons{
  653.     background:none;
  654.     padding:0;
  655.     -webkit-box-shadow:none;
  656.     -moz-box-shadow:none;
  657.     -o-box-shadow:none;
  658.     box-shadow:none;
  659.     text-align:left;
  660. }
  661. .share-icons a{
  662.     height:16px;
  663.     width:16px;
  664.     display:inline-block;
  665.     margin:5px;
  666. }
  667. .post-footer{
  668.     border-top:#ddd 1px solid;
  669.     margin-top: 8px;
  670.     overflow:hidden;
  671.     padding: 8px 5px 4px;
  672. }
  673. .no-content .post-footer{
  674.     border-top:none 0;
  675. }
  676. .category-ic{
  677.     background:url(images/folder-ic.png) left no-repeat;
  678.     padding-left:25px;
  679. }
  680. .shortlink{
  681.     display:block;
  682.     float:right;
  683.     background:url(images/link-ic.png) center center no-repeat;
  684.     width:18px;
  685.     height:8px;
  686.     margin-top:3px;
  687.     text-indent:-9999px;
  688. }
  689. /* =======================================================================
  690.                 Filter Navigation and Basic Form Styles
  691. ======================================================================= */
  692. #filtering-nav{
  693.     padding-left:10px;
  694.     margin: auto;
  695. }
  696. #filtering-nav ul{
  697.     padding:0 0 5px;
  698.     margin:0;
  699.     overflow:hidden;
  700. }
  701. #filtering-nav li{
  702.     display:inline;
  703.     float:left;
  704.     clear:right;
  705.     list-style:none;
  706.     margin-right:5px;
  707.     margin-left:0;
  708. }
  709. #filtering-nav li a, input[type="submit"], input.submit, .navigation a{
  710.     display:inline-block;
  711.     padding:5px 10px;
  712.     text-decoration:none;
  713.     background:rgb(43,43,43);
  714.     background: -moz-linear-gradient(top, #7b7b7b 0%, #2b2b2b 100%);
  715.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7b7b7b), color-stop(100%,#2b2b2b));
  716.     background: -webkit-linear-gradient(top, #7b7b7b 0%,#2b2b2b 100%);
  717.     background: -ms-linear-gradient(top, #7b7b7b 0%,#2b2b2b 100%);
  718.     background: linear-gradient(top, #7b7b7b 0%,#2b2b2b 100%);
  719.     color:#FFF;
  720.     cursor:pointer;
  721. }
  722. #filtering-nav li a:hover, input[type="submit"]:hover, input.submit:hover, .navigation a:hover{
  723.     background: #111;
  724.     background: -moz-linear-gradient(top, #444444 0%, #0a0a0a 100%);
  725.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#0a0a0a));
  726.     background: -webkit-linear-gradient(top, #444444 0%,#0a0a0a 100%);
  727.     background: -ms-linear-gradient(top, #444444 0%,#0a0a0a 100%);
  728.     background: linear-gradient(top, #444444 0%,#0a0a0a 100%);
  729. }
  730. a.filter-btn span{
  731.     display:block;
  732.     background:url(images/filter-ic.png) no-repeat;
  733.     background-position:90% 50%;
  734.     padding:4px 16px 4px 8px;
  735. }
  736. a.filter-btn{
  737.     background:#FFF;
  738.     background:-webkit-gradient(
  739.         linear,
  740.         left bottom,
  741.         left top,
  742.         color-stop(0, rgb(233,233,233)),
  743.         color-stop(1, rgb(255,255,255))
  744.     );
  745.     background:-moz-linear-gradient(
  746.         center bottom,
  747.         rgb(233,233,233) 0%,
  748.         rgb(255,255,255) 100%
  749.     );
  750.     text-decoration:none;
  751.     font-size:11px;
  752.     text-transform:uppercase;
  753.     color:#666;
  754.     font-family:Verdana, Geneva, sans-serif;
  755.     display:inline-block;
  756.     margin-bottom:10px;
  757. }
  758. a.filter-btn:hover{
  759.     -webkit-box-shadow:0 0 13px rgba(0,0,0,0.40);
  760.     -moz-box-shadow:0 0 13px rgba(0,0,0,0.40);
  761.     box-shadow:0 0 13px rgba(0,0,0,0.40);
  762. }
  763. /* =======================================================================
  764.                             Single Post Page
  765. ======================================================================= */
  766. .entry{
  767.     text-align: left;
  768.     padding: 30px;
  769.     font-size: 13px;
  770. }
  771. .post-media{
  772.     text-align: center;
  773. }
  774. #page .post-media p{
  775.     margin-bottom: 0;
  776. }
  777. .post-details{
  778.     font-size: 11px;
  779. }
  780. .postmetadata{
  781.     background: #e3e3e3;
  782.     font-size: 11px;
  783.     text-align: center;
  784.     padding: 6px 10px;
  785.     clear: both;
  786. }
  787. .postmetadata, .postmetadata a{
  788.     color:#4b5054;
  789. }
  790. .postmetadata strong{
  791.     margin-left: 20px;
  792. }
  793. .postmetadata strong:first-child{
  794.     margin-left: 0;
  795. }
  796. .minimal-content .entry{
  797.     padding:15px 0 0;
  798. }
  799. .minimal-content .category{
  800.     font-size: 11px;
  801. }
  802. /* =======================================================================
  803.                             Comments
  804. ======================================================================= */
  805. #comments{
  806.     margin:0 30px;
  807. }
  808. .minimal-post #comments{
  809.     margin-top: 30px;
  810. }
  811. #comments .navigation{
  812.     margin:20px 0;
  813. }
  814. .author-avatar{
  815.     line-height: 0.75;
  816.     float: left;
  817.     margin: 0 10px 0 0;
  818.     width: 35px;
  819.     height: 35px;
  820. }
  821. ol.commentlist{
  822.     margin:0 0 30px;
  823. }
  824. ol.commentlist li{
  825.     list-style: none;
  826.     padding: 15px;
  827.     margin: 0 0 15px 0;
  828.     color: #6d747a;
  829.     background: #f5f5f5;
  830.     border: 1px solid #ccc;
  831. }
  832. ol.commentlist li.thread-alt{
  833.     background: none;
  834. }
  835. ol.commentlist li h3#reply-title{
  836.     margin-top:15px;
  837. }
  838. .no-comments #reply-title{
  839.     display: none;
  840. }
  841. .comment-meta{
  842.     margin-bottom:20px;
  843. }
  844. .author-name{
  845.     font-size: 12px;
  846.     font-weight: bold;
  847.     display:block;
  848.     color:#4b5054
  849. }
  850. .author-name a{
  851.     color:#4b5054;
  852. }
  853. .comment-date, .reply a{
  854.     color:#93979a;
  855.     font-size:11px;
  856. }
  857. .reply a{
  858.     background:url(images/reply-ic.png) left no-repeat;
  859.     padding:3px 0 3px 20px;
  860.     display:inline-block;
  861. }
  862. ol.commentlist .children{
  863.     margin-top:30px;
  864. }
  865. input, textarea{
  866.     background:#fff;
  867.     background:rgba(255,255,255,0.75);
  868.     font-family:Arial, Helvetica, sans-serif;
  869.     color:#777;
  870.     padding:5px 10px;
  871.     margin-top:2px;
  872. }
  873. input:focus{
  874.     -webkit-box-shadow:0 -2px 3px rgba(0,0,0,0.1);
  875.     -moz-box-shadow:0 -2px 3px rgba(0,0,0,0.1);
  876.     box-shadow:0 -2px 3px rgba(0,0,0,0.1);
  877. }
  878. input[type=text],input[type=password], textarea{
  879.     display:block;
  880.     border:1px solid #c9c9c9;
  881.     -webkit-box-shadow:0 2px 3px rgba(0,0,0,0.1);
  882.     -moz-box-shadow:0 2px 3px rgba(0,0,0,0.1);
  883.     box-shadow:0 2px 3px rgba(0,0,0,0.1);
  884. }
  885. input[type=text],input[type=password]{
  886.     width:310px;
  887.     margin-bottom:10px;
  888. }
  889. input[type="password"]{
  890.     width:200px;
  891. }
  892. input[type="submit"], input.submit{
  893.     width:auto;
  894.     border:0 none;
  895. }
  896.     
  897. textarea{
  898.     width:485px;
  899.     padding:10px;
  900. }
  901. ol.commentlist li textarea{
  902.     width:90%;
  903. }
  904. .form-allowed-tags{
  905.     display: none;
  906. }
  907. label{
  908.     font-size: 13px;
  909.     font-weight: bold;
  910.     display: inline-block;
  911.     margin-bottom: 5px;
  912. }
  913. .dsq-postid{
  914.     display:none;
  915. }
  916. /* =======================================================================
  917.                            Gallery
  918. ======================================================================= */
  919. .box-content.solo-gallery{
  920.     padding:0 10px 10px 10px;
  921. }
  922. .gallery-thumbs{
  923.     overflow: hidden;
  924. }
  925. .gallery-thumb{
  926.     margin: 5px 10px 5px 0;
  927.     display: block;
  928.     float: left;
  929.     width: 216px;
  930.     position: relative;
  931. }
  932. .gallery-link-list{
  933.     display: none;
  934. }
  935. .slider-container{
  936.     position:relative;
  937.     margin-bottom: 5px;
  938.     overflow: hidden;
  939. }
  940. .slides_container {
  941.     overflow:hidden;
  942.     position:relative;
  943.     text-align:center;
  944.     width: 100%;
  945. }
  946. .slides_container a{
  947.     display:block;
  948.     text-align:center;
  949. }
  950. .slider{
  951.     position:absolute;
  952.     z-index:100;
  953. }
  954. /* Different slider dimensions based on box size */
  955. .col1 .slider-container, .col1 .slides_container, .col1 .slides_container a{
  956.     width: 145px;
  957.     height: 96px;
  958. }
  959. .col2 .slider-container, .col2 .slides_container, .col2 .slides_container a{
  960.     width: 320px;
  961.     height: 212px;
  962. }
  963. .col3 .slider-container, .col3 .slides_container, .col3 .slides_container a{
  964.     width: 495px;
  965.     height: 330px;
  966. }
  967. .col4 .slider-container, .col4 .slides_container, .col4 .slides_container a{
  968.     width: 670px;
  969.     height: 446px;
  970. }
  971. .slider .next, .slider .prev{
  972.     position:absolute;
  973.     bottom:15px;
  974.     display:block;
  975.     width:28px;
  976.     height:28px;
  977.     z-index:10;
  978.     opacity: 0.75;
  979. }
  980. .slider .next:hover, .slider .prev:hover{ opacity: 1; }
  981. .slider .prev{
  982.     left: 50%;
  983.     margin-left: -33px;
  984. }
  985. .slider .next{
  986.     right: 50%;
  987.     margin-right: -33px;
  988. }
  989. .col1 .slider .next, .col1 .slider .prev{
  990.     display: none;
  991. }
  992. .enlarge-ic{
  993.     background:url(images/enlarge-mini-ic.png) no-repeat;
  994.     width:28px;
  995.     height:28px;
  996.     position:absolute;
  997.     bottom:15px;
  998.     right:15px;
  999.     text-indent:-9999px;
  1000.     display:block;
  1001.     z-index:10;
  1002.     opacity: 0;
  1003. }
  1004. .gallery-thumb:hover .enlarge-ic{ opacity: 1; }
  1005. /* =======================================================================
  1006.                            Sidebar
  1007. ======================================================================= */
  1008. #sidebar{
  1009.     float:left;
  1010.     width: 310px;
  1011.     margin: 20px 0 0 20px;
  1012. }
  1013. .box-content #sidebar {
  1014.     float: none;
  1015.     margin: 0;
  1016.     width: auto;
  1017. }
  1018. #sidebar li{
  1019.     background:url(images/dotted-border.png) bottom repeat-x;
  1020.     padding:6px;
  1021.     margin:0;
  1022.     list-style:none;
  1023. }
  1024. #sidebar li:last-child{
  1025.     background:none;
  1026. }
  1027. #sidebar ul, .textwidget{
  1028.     margin:0 15px;
  1029. }
  1030. #sidebar ul ul{
  1031.     margin-left:0;
  1032.     padding-left:15px;
  1033.     background:url(images/dotted-border.png) top repeat-x;
  1034. }
  1035. #sidebar .widget ul:last-child{
  1036.     margin-bottom:0;
  1037. }
  1038. body.blog #sidebar input[type="text"], body.blog #sidebar input[type="email"], body.blog #sidebar textarea{
  1039.   width: 95%;
  1040. }
  1041. body.blog #sidebar #s{
  1042.   margin-left: 12px;
  1043.   width: 210px;
  1044. }
  1045. .widget{
  1046.     margin-bottom:15px;
  1047. }
  1048. .widget input[type="text"]:not(#s), .widget textarea{
  1049.   width: 92%;
  1050. }
  1051. /* ================================================================
  1052.                             Widgets
  1053. ================================================================ */
  1054. /* =============================
  1055. Related Posts and Cat. Posts
  1056. ============================== */
  1057. #sidebar .rel-post-widget ul, #sidebar ul.cat-posts{
  1058.     margin: 0 10px;
  1059. }
  1060. #sidebar .rel-post-widget li, #sidebar ul.cat-posts li, .recent-posts li{
  1061.     padding: 10px 0;
  1062. }
  1063. .post-thumb{
  1064.     width:75px;
  1065.     padding:2px;
  1066.     float:left;
  1067.     background:#FFF;
  1068.     margin:0 10px 5px 0;
  1069.     line-height: 0.8;
  1070. }
  1071. .post-thumb img{
  1072.     max-width: 75px;
  1073. }
  1074. .no-excerpt{
  1075.     padding-top:25px;
  1076. }
  1077. .post-info p, #archives-page .box .post-info p{
  1078.     font-size:11px;
  1079.     margin-bottom: 0;
  1080. }
  1081. .widget ul h3, .widget .cat-post-item h3, .recent-posts h3{
  1082.     font-size:14px;
  1083.     margin:0 0 5px;
  1084.     padding:0;
  1085.     border:0 none;
  1086. }
  1087. .widget ul h3 a, .widget .cat-post-item h3 a, .recent-posts h3 a{
  1088.     color:#4b5054;
  1089. }
  1090. /* =============================
  1091.         Twitter
  1092. ============================== */
  1093. #twitter_update_list li{
  1094.     overflow:hidden;
  1095. }
  1096. #sidebar li.jta-tweet-list-item
  1097. {
  1098.     overflow: hidden;
  1099.     padding:6px 6px 6px 0;
  1100. }
  1101. .jta-tweet-profile-image
  1102. {
  1103.     width: 48px;
  1104.     display: inline;
  1105.     float: left;
  1106.     padding:3px;
  1107.     background:#FFF;
  1108. }
  1109. .jta-tweet-timestamp
  1110. {
  1111.   display: block;
  1112.   font-size: 11px;
  1113.   margin-top: 3px;
  1114. }
  1115. .jta-login-info-profile-image
  1116. {
  1117.     width: 48px;
  1118.     display: inline;
  1119.     float: left;
  1120. }
  1121. .jta-login-info-block, .jta-tweet-body-list-profile-image-present
  1122. {
  1123.     margin-left: 62px;
  1124. }
  1125. .jta-error
  1126. {
  1127.   color: #f00;
  1128. }
  1129. .jta-clear
  1130. {
  1131.     clear: both;
  1132.     display: block;
  1133.     overflow: hidden;
  1134.     visibility: hidden;
  1135.     width: 0;
  1136.     height: 0;
  1137. }
  1138. /* =============================
  1139.         Ads
  1140. ============================== */
  1141. .sidebar-ad{
  1142.     margin-right:10px;
  1143.     margin-bottom:7px;
  1144. }
  1145. .last-ad, .last{
  1146.     margin-right:0;
  1147. }
  1148. /* =============================
  1149.         Flickr
  1150. ============================== */
  1151. .flickr_photos{
  1152.     overflow:hidden;
  1153.     margin-bottom:15px;
  1154. }
  1155. .flickr_badge_image{
  1156.     display:inline;
  1157.     float:left;
  1158.     clear:right;
  1159.     margin:0 0 10px 15px;
  1160.     background:#FFF;
  1161.     padding:4px;
  1162. }
  1163. .rss-date{
  1164.     color:#747c82;
  1165.     font-size:11px;
  1166.     margin-bottom:1.25em;
  1167.     display:block;
  1168. }
  1169. /* =============================
  1170.         Other Widgets
  1171. ============================== */
  1172. #wp-calendar {
  1173.     width:100%;
  1174. }
  1175. #wp-calendar caption {
  1176.     font-weight: bold;
  1177.     color: #222;
  1178.     text-align: left;
  1179.     font-size:14px;
  1180.     padding-bottom: 4px;
  1181. }
  1182. #wp-calendar thead {
  1183.     font-size:11px;
  1184. }
  1185. #wp-calendar thead th {
  1186. }
  1187. #wp-calendar tbody {
  1188.     color: #aaa;
  1189. }
  1190. #wp-calendar tbody td {
  1191.     padding: 3px 0 2px;
  1192.     background: #f5f5f5;
  1193.     border:1px solid #fff;
  1194.     text-align: center;
  1195. }
  1196. #wp-calendar tbody .pad {
  1197.     background: none;
  1198. }
  1199. #wp-calendar tfoot #next {
  1200.     text-align: right;
  1201. }
  1202. /* =======================================================================
  1203.                              Pages
  1204. ======================================================================= */
  1205. .page-entry{ padding:20px; }
  1206. /* =======================================================================
  1207.                              Archives Page
  1208. ======================================================================= */
  1209. .recent-posts{
  1210.     list-style:none;
  1211.     margin:0;
  1212.     padding:0;
  1213. }
  1214. .recent-posts li{
  1215.     background:url(images/dotted-border.png) bottom repeat-x;
  1216.     padding:8px 0;
  1217. }
  1218. .recent-posts li:last-child{
  1219.     background: none;
  1220.     padding-bottom: 0;
  1221. }
  1222. /* =======================================================================
  1223.                              Footer
  1224. ======================================================================= */        
  1225. #footer{
  1226.     margin-top:60px;
  1227.     background:#FFF url(images/footer-gradient.png) top repeat-x;
  1228.     background:url(images/footer-gradient.png) top repeat-x, url(images/header-gradient.png) bottom repeat-x #FFF;
  1229.     border-bottom:1px solid #fff;
  1230.     padding: 30px 0;
  1231.     color:#999;
  1232.     clear:both;
  1233. }
  1234. #footer p{
  1235.     margin-bottom:0;
  1236. }
  1237. /* =======================================================================
  1238.                                  WordPress Specific
  1239. ======================================================================= */
  1240. .alignleft,
  1241. .post img.alignleft {
  1242.     display: inline;
  1243.     float: left;
  1244.     margin-right: 20px;
  1245.     margin-top: 4px;
  1246. }
  1247. .alignright,
  1248. .post img.alignright {
  1249.     display: inline;
  1250.     float: right;
  1251.     clear:right;
  1252.     margin-left: 20px;
  1253.     margin-top: 4px;
  1254. }
  1255. #footer .alignright{
  1256.   margin-top: 0;
  1257. }
  1258. .aligncenter,
  1259. .post img.aligncenter {
  1260.     text-align:center;
  1261.     clear: both;
  1262.     display: block;
  1263.     margin-left: auto;
  1264.     margin-right: auto;
  1265. }
  1266. .post img.alignleft,
  1267. .post img.alignright,
  1268. .post img.aligncenter {
  1269.     margin-bottom: 20px;
  1270. }
  1271. .post .wp-caption {
  1272.     line-height: 1.5;
  1273.     font-size:11px;
  1274.     text-align: center;
  1275.     margin-bottom: 20px;
  1276.     padding: 5px;
  1277.     background:#f0f0f0 url(images/white-noise.png) repeat;
  1278.     -webkit-box-shadow:-1px -1px 0 rgba(0,0,0,0.12);
  1279.     -moz-box-shadow:-1px -1px 0 rgba(0,0,0,0.12);
  1280.     box-shadow:-1px -1px 0 rgba(0,0,0,0.12);
  1281. }
  1282. .post .wp-caption img {
  1283.     margin: 5px;
  1284. }
  1285. #page .wp-caption p, #full-page {
  1286.     margin-bottom:0;
  1287. }
  1288. #single .post .wp-caption p.wp-caption-text {
  1289.     margin: 5px;
  1290.     font-size: 11px;
  1291. }
  1292. .post .wp-smiley {
  1293.     margin:0;
  1294. }
  1295. .post .gallery {
  1296.     margin: auto;
  1297. }
  1298. .post .gallery .gallery-item {
  1299.     float: left;
  1300.     margin-top: 0;
  1301.     text-align: center;
  1302.     width: 33%;
  1303. }
  1304. .post .gallery img {
  1305.     border: 2px solid #cfcfcf;
  1306. }
  1307. .post .gallery .gallery-caption {
  1308.     color: #888;
  1309.     font-size: 12px;
  1310.     margin: 0 0 12px;
  1311. }
  1312. .post .gallery dl {
  1313.     margin: 0;
  1314. }
  1315. .post .gallery img {
  1316.     border: 2px solid #f1f1f1;
  1317. }
  1318. .post .gallery br+br {
  1319.     display: none;
  1320. }
  1321. .page-link {
  1322.     color: #000;
  1323.     font-weight:bold;
  1324.     margin:0 0 22px 0;
  1325.     word-spacing:0.5em;
  1326. }
  1327. .page-link a:link,
  1328. .page-link a:visited {
  1329.     background: #f1f1f1;
  1330.     color:#333;
  1331.     font-weight:normal;
  1332.     padding:0.5em 0.75em;
  1333.     text-decoration:none;
  1334. }
  1335. .page-link a:active,
  1336. .page-link a:hover {
  1337.     color: #D27E1C;
  1338. }
  1339. #post-image{
  1340.     text-align:center;
  1341. }
  1342. #post-image img{
  1343.     margin-bottom:28px;
  1344.     -moz-border-radius:7px;
  1345.     border-radius:7px;
  1346. }
  1347. .navigation{
  1348.     padding-left:10px;
  1349.     margin: auto;
  1350. }
  1351. .navigation a{
  1352.     padding:5px 10px;
  1353. }
  1354. #nav-above{
  1355.     margin-bottom:15px;
  1356. }
  1357. #nav-below{    
  1358.     margin-top:20px;
  1359. }
  1360. .nav-previous{
  1361.     float:left;
  1362.     clear:right;
  1363.     margin-right:20px;
  1364. }
  1365. .nav-next{
  1366.     float:right;
  1367.     clear:right;
  1368.     margin-right:20px;
  1369. }
  1370. #comments .nav-next{
  1371.     margin-right:0;
  1372. }
  1373. #s{ /* This keeps the search inputs in line */
  1374.     float:left;
  1375.     clear:left;
  1376.     width:210px;
  1377. }
  1378. #searchsubmit{
  1379.     float:left;
  1380.     clear:right;
  1381.     margin-left:10px;
  1382. }
  1383. #searchform{
  1384.     margin-bottom:15px;
  1385.     overflow:hidden;
  1386. }
  1387. /* Infinite Scroll Compatibility */
  1388. #infscr-loading {
  1389.  position: fixed;
  1390.  bottom: 30px;
  1391.  left: 42%;
  1392.  z-index: 100;
  1393.  background: white;
  1394.  background: hsla( 0, 0%, 100%, 0.9 );
  1395.  padding: 20px;
  1396.  color: #222;
  1397.  font-size: 15px;
  1398.  font-weight: bold;
  1399.  -webkit-border-radius: 10px;
  1400.    -moz-border-radius: 10px;
  1401.      border-radius: 10px;
  1402. }
  1403. /* =======================================================================
  1404.                              Common Styles
  1405. ======================================================================= */
  1406. .box, .menu li a, #header h1 a, a.filter-btn, input, .slider .next, .slider .prev{
  1407.     -webkit-transition: all 200ms ease;
  1408.     -moz-transition: all 200ms ease;
  1409.     transition: all 200ms ease;
  1410. }
  1411. #logo, .flickr_badge_image, .jta-tweet-profile-image, .enlarge-ic, .feat-img, .actions, .wrap, #filtering-nav{
  1412.     -webkit-transition: all 300ms ease;
  1413.     -moz-transition: all 300ms ease;
  1414.     transition: all 300ms ease;
  1415. }
  1416. a.view, a.share, a.comment, .share-icons, ol.commentlist li{
  1417.     -moz-border-radius:8px;
  1418.     -webkit-border-radius: 8px;
  1419.     border-radius:8px;
  1420. }
  1421. #social-networks, a.filter-btn, #filtering-nav li a, input, textarea, .navigation a, .postmetadata, .author-avatar img, .slider-container, .gallery-thumb img, .feat-img{
  1422.     -moz-border-radius: 4px;
  1423.     -webkit-border-radius: 4px;
  1424.     border-radius: 4px;
  1425. }
  1426. a.filter-btn, #filtering-nav li a, .share-icons, .navigation a{
  1427.     -webkit-box-shadow:0 1px 0 #FFF;
  1428.     -moz-box-shadow:0 1px 0 #FFF;
  1429.     box-shadow:0 1px 0 #FFF;
  1430. }
  1431. .flickr_badge_image, .jta-tweet-profile-image, .box-content, .post-thumb{
  1432.     -moz-box-shadow:0px 0px 3px rgba(0,0,0,0.15);
  1433.     -webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.15);
  1434.     box-shadow:0px 0px 3px rgba(0,0,0,0.15);
  1435. }
  1436. .box:hover .box-content, .flickr_badge_image:hover, .jta-tweet-profile-image:hover{
  1437.     -moz-box-shadow:0px 0px 4px rgba(0,0,0,0.4);
  1438.     -webkit-box-shadow:0px 0px 4px rgba(0,0,0,0.4);
  1439.     box-shadow:0px 0px 4px rgba(0,0,0,0.4);
  1440. }
  1441. a.filter-btn, a.comment span{
  1442.     text-shadow:0 1px #FFF;
  1443. }
  1444. @media screen and (max-width: 1024px) {
  1445.     #sidebar{
  1446.         width: 240px;
  1447.     }
  1448.     .wrap{
  1449.       width: 940px;
  1450.     }
  1451. }
  1452. /* iPad */
  1453. @media screen and (max-width: 768px) and (orientation:portrait) {
  1454.   
  1455.   /* ********************************
  1456.                 Header
  1457.     ******************************** */
  1458.     #header{
  1459.         padding: 20px;
  1460.     }
  1461.     
  1462.     #header .wrap, #footer .wrap{
  1463.       min-width: 0;
  1464.       width: 95% !important;;
  1465.     }
  1466.     
  1467.     body.page-template-template-timeline-php .wrap, body.page-template-template-timeline-php .isotope, .month-header{
  1468.       width: auto !important;
  1469.     }
  1470.     
  1471.     body.blog .wrap, #filtering-nav, body.blog .navigation, .isotope{
  1472.     min-width: 0;
  1473.   }
  1474.     
  1475.     #site-info{
  1476.         margin-bottom: 15px;
  1477.         margin-top: 0 !important;
  1478.         margin-right: 0;
  1479.         float: none;
  1480.         text-align: center;
  1481.     }
  1482.     
  1483.     #logo a{
  1484.         margin: 0;
  1485.     }
  1486.     
  1487.     .header-nav select{
  1488.         display: block;
  1489.     width: 95%;
  1490.     max-width: 400px;
  1491.         margin: 0 auto 15px;
  1492.         margin-bottom: 15px;
  1493.     }
  1494.     
  1495.     .header-nav ul{
  1496.         display: none;
  1497.     }
  1498.         
  1499.     #social-networks{
  1500.         float: none;
  1501.         width: 95%;
  1502.         margin: auto !important;
  1503.         text-align: center;
  1504.         background: none !important;
  1505.         -webkit-box-shadow: none !important;
  1506.         -moz-box-shadow: none !important;
  1507.         box-shadow: none !important;
  1508.     }
  1509.   
  1510.   .wrap{
  1511.     width: 99%;
  1512.   }
  1513.   
  1514.     #page{
  1515.         width: 480px;
  1516.         margin-left: 10px;
  1517.     }
  1518.     
  1519.     .content .box-content{
  1520.         width: 460px;
  1521.     }
  1522.     
  1523.     #s{
  1524.       width: 145px;
  1525.     }
  1526.     
  1527.     textarea{
  1528.       width: 93%;
  1529.     }
  1530. }
  1531. /* Small Screens */
  1532. @media screen and (max-width: 500px) {
  1533.   
  1534.     #page, #site-info, .header-nav select, #sidebar, #full-page, #archives-page .col2, .isotope-item, .wrap{
  1535.         width: 95%;
  1536.         margin: auto;
  1537.     }
  1538.     
  1539.     /* ********************************
  1540.                 Gallery Posts
  1541.     ******************************** */
  1542.     
  1543.     #grid{
  1544.         padding: 0;
  1545.     }
  1546.     
  1547.     .sort{
  1548.       width: 96% !important;
  1549.       margin: auto;
  1550.     }
  1551.     
  1552.     .sort .box{
  1553.       width: 100% !important;
  1554.       margin: 10px 0;
  1555.       padding-bottom: 10px;
  1556.       float: none;
  1557.     }
  1558.     
  1559.     .sort .box.col1{
  1560.       width: 155px !important;
  1561.       margin: auto;
  1562.     }
  1563.     
  1564.     .timeline .sort .box.col1{
  1565.     float: left;
  1566.     margin: 0 10px;
  1567.     }
  1568.     
  1569.     .timeline .sort{
  1570.       overflow: hidden;
  1571.     }
  1572.     
  1573.     .timeline .month-header{
  1574.       text-align: center;
  1575.     }
  1576.     
  1577.     #gallery-sidebar{
  1578.         display: none;
  1579.         height: 0;
  1580.         overflow: hidden;
  1581.         margin-top: -20px;
  1582.     }
  1583.     
  1584.     #archives-page #grid{
  1585.         padding: 0 10px;
  1586.     }
  1587.     
  1588.     .col2, .col3, .col5{
  1589.         width: 95%;
  1590.     }
  1591.     
  1592.      .col2 .box-content,
  1593.      .col3 .box-content,
  1594.      .col4 .box-content,
  1595.      .content .box-content,
  1596.      #archives-page .box-content{
  1597.         width: 95%;
  1598.         margin: auto;
  1599.         float: none;
  1600.     }
  1601.     
  1602.     iframe{
  1603.         height: 200px;
  1604.     }
  1605.     
  1606.     .col2 .slider-container, .col2 .slides_container, .col2 .slides_container a,
  1607.     .col3 .slider-container, .col3 .slides_container, .col3 .slides_container a,
  1608.     .col4 .slider-container, .col4 .slides_container, .col4 .slides_container a{
  1609.         width: 280px;
  1610.         height: 212px;
  1611.         margin: auto;
  1612.         background: none;
  1613.     }
  1614.     
  1615.     .col2 .slider-container img, .col3 .slider-container img, .col4 .slider-container img{
  1616.         height: auto !important;
  1617.         width: auto !important;
  1618.         max-width: 95%;
  1619.         max-height: 100%;
  1620.         margin: auto !important;
  1621.     }
  1622.     
  1623.     .img-container{
  1624.         background: none;
  1625.     }
  1626.     
  1627.     .img-container img{
  1628.         width: 100%;
  1629.     }
  1630.     
  1631.     .img-container:hover .actions{
  1632.         display: none;
  1633.         opacity: 0;
  1634.     }
  1635.     
  1636.     .img-container:hover a img.feat-img{
  1637.         opacity: 1;
  1638.     }
  1639.     
  1640.     /* ********************************
  1641.             Single Post / Pages
  1642.     ******************************** */
  1643.     
  1644.     #page, #sidebar{
  1645.         float: none;
  1646.     }
  1647.     
  1648.     #sidebar{
  1649.         margin-top: 30px;
  1650.         width: 90%;
  1651.     }
  1652.     
  1653.     .entry{
  1654.         padding: 10px;
  1655.     }
  1656.     
  1657.     .gallery-thumb{
  1658.         width: 108px;
  1659.     }
  1660.     
  1661.     .gallery-thumb img{
  1662.         height: auto !important;
  1663.     }
  1664.     
  1665.     .postmetadata{
  1666.         margin-bottom: 20px;
  1667.     }
  1668.     
  1669.     #comments{
  1670.         margin: 0 10px;
  1671.     }
  1672.     
  1673.     input[type="text"], textarea{
  1674.         width: 90%;
  1675.     }
  1676.     
  1677.     #footer{
  1678.         margin-top: 20px;
  1679.         padding: 15px 0;
  1680.     }
  1681.     
  1682.     #footer .alignright{
  1683.         float: none;
  1684.         display: block;
  1685.         margin: 10px 0 0;
  1686.     }
  1687. }
Attachments:
Logo Centered Example.JPG
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9089
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

Hi AGOTAY,

It's a bit hard to figure out without seeing your HTML either, but my guess would be that adding something like this to your img#logo or possibly the #logo statements in your CSS file might do the trick:

CSS Code: [ Select ]
margin:0 auto;


or possibly:

CSS Code: [ Select ]
text-align:center;
  • AGOTAY
  • Born
  • Born
  • AGOTAY
  • Posts: 3

Post 3+ Months Ago

Thanks for your reply!
Did you mean the source code correct or I need to upload something else? I cannot paste the url...

HTML source code on zip file.

Regards,
AGOTAY
Attachments:
html code.zip

(8.57 KiB) Downloaded 142 times

  • AGOTAY
  • Born
  • Born
  • AGOTAY
  • Posts: 3

Post 3+ Months Ago

I try both code and they didn't change the theme... I also create a Child Theme today to play with the code a litter bit more without risk but can't find the right code to edit/change.

Let me know what else I should try.

Thanks for your help,
AGOTAY
  • Veeramanikandan
  • Novice
  • Novice
  • Veeramanikandan
  • Posts: 20

Post 73 days ago

#logo{text-align:center; margin:0 auto; }

or otherwise adjusting the margin values.

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 53 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.