Back To Website Design Forum

Center a logo image and Header - Wordpress

  • AGOTAY
  • Born
  • Born
  • No Avatar
  • Joined: Nov 13, 2012
  • Posts: 3
  • Status: Offline

Post November 13th, 2012, 1:29 pm

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

Post November 13th, 2012, 1:29 pm

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8925
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post November 13th, 2012, 5:13 pm

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;
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • AGOTAY
  • Born
  • Born
  • No Avatar
  • Joined: Nov 13, 2012
  • Posts: 3
  • Status: Offline

Post November 13th, 2012, 7:16 pm

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 85 times

  • AGOTAY
  • Born
  • Born
  • No Avatar
  • Joined: Nov 13, 2012
  • Posts: 3
  • Status: Offline

Post November 14th, 2012, 10:14 pm

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

Page 1 of 1

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 161 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.