/* 
Tearsheet for Tumblr 
by Officially Rad
*/


body {
      background: #000 url(http://www.onebluebrick.com/blogs/matthew/images/granite.jpg) repeat top left;
      margin: 0;
      padding: 0;
      font-family: "Helvetica", Arial, Verdana, sans-serif;
    }
    
    .clear {
      clear: both;
      height: 1px;
    }
    
    a img {
      border: none;
    }
    
    a {color: #025c93;}
    
    h1 {font-size: 30px; color: #444; line-height: 32px;}
    
/* HEADER */
    
#topwhite {
	width:100%;
	margin:0px;
	padding: 0px;
	height: 90px;
	background: #fff url(http://www.onebluebrick.com/blogs/matthew/images/whitebar.jpg) repeat-x bottom left;
	}
	
#topblue {
	width:100%;
	margin:0px;
	padding: 0px 0px 10px 0px;
	height: 100%;
	background:#03265c url(http://www.onebluebrick.com/blogs/matthew/images/bluebar.jpg) no-repeat bottom center;
	}
	
.shadow {
	width: 100%;
	height: 7px;
	background: url(http://www.onebluebrick.com/blogs/matthew/images/shadow.png) repeat-x;
	margin: 0px;
	padding: 0px;
	}
	
.headerwrap {
	width: 960px;
	height: 100%;
	margin: 0px auto;
	}
	
#tagline {float:left; width: 800px; font-size:18px; color: #cedae1; text-shadow:#03265c 0px 1px; margin:18px 0px;}	

#name {float: left; padding-top: 20}
 
#readmore {float: right; margin:33px 0px;}

#readmore a:link, #readmore a:active, #readmore a:visited  {
                opacity: 0.8;
                filter: alpha(opacity=80);
                -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
                background:#03265c url(http://www.onebluebrick.com/blogs/matthew/images/bluebar.jpg) no-repeat top center;
                color: #03265c;
                text-decoration: none;
                font-size: 13px;
                font-weight: bold;
                padding:10px 15px;
                border-radius: 8px;
                -moz-border-radius: 8px;
                -webkit-border-radius: 8px;
                border: 3px solid #00588e;
             
              }
              
#readmore a:hover {
                opacity: 1.0;
                color: #fff;
                filter: alpha(opacity=100);
                -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
              }


	
#who {float: right;}

#who a:link {
                background: #025c93;
                color: #fff;
                font-size: 13px;
                font-weight: bold;
                padding:5px 7px;
                border-radius: 4px;
                -moz-border-radius: 4px;
                -webkit-border-radius: 4px;
              }
              
#who a:hover {
                opacity: 0.9;
                color: #fff;
                filter: alpha(opacity=90);
                -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
              }
	
#logo {
	height: 68px;
	float: left;	
	margin-top: 15px;
	}
	
#logo a {text-decoration: none; color: #333; font-size: 45px; text-shadow: #fff 2px 2px;}


/* FOOTER */

#footer {
	width:100%;
	height: 100%;
	margin:0px;
	margin-top: 20px;
	padding: 0px;
	background: #fff url(http://www.onebluebrick.com/blogs/matthew/images/whitebar.jpg);
	border-top: 4px solid #000;
	}
	
#footerwrap {
	width: 960px;
	margin: 0px auto;
	position: relative;
	padding: 10px 0px;
	}
	
#footerwrap p {color:#777; font-size: 13px; line-height: 22px;}
#footerwrap .left {float: left; width:400px; margin-right: 40px;}
#footerwrap .right {float: left; padding-top: 10px; text-align: left;  padding-left: 40px; border-left: 1px solid #ddd;}

#social {width:400px; padding: 0px; display: block;}

#social .site {float:left; width: 200px; display: inline; height: 66px; margin: 0px;}

#social .site .icon {float: left; height: 66px; width: 60px; padding: 0px;}

#social .site .name {float:left; width:140px; height: 66px; overflow: hidden; margin-top:22px; font-size: 17px; color: #111;}

#social .site .name a {text-decoration: none;}


/* SEARCH */

#search {
	width: 339px;
	height: 50px;
	padding: 10px 15px;
	overflow: hidden;
	background: url(http://www.onebluebrick.com/blogs/matthew/images/searchback.png) no-repeat top left;
	}

             #search form {
              margin: 0;
            }
        
               #search form .query {
                padding: 5px;
                border: none;
                background: transparent;
                outline: none;
                width: 250px;
                font-size: 15px;
                float: left;
              }
          
               #search form .submit {
              	background: url(http://www.onebluebrick.com/blogs/matthew/images/searchbutton.png) no-repeat top left;
              	height: 22px;
              	width: 22px;  
                border: none;
                margin: 2px 30px 2px 0;
                float: right;
			    cursor: pointer;
              }
              
               #search form .submit:hover {
                opacity: 0.9;
                filter: alpha(opacity=90);
                -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
              }
              
              

/* GLOBAL POST STYLE */

#content{
	width: 960px;
	margin: 0px auto;
	}
	
	
	
#posts {
	float: left;
	width: 630px;
	padding: 0px;
	margin: 30px 0px;
	}

.post {
	width: 630px;
	padding: 20px 10px;
	margin: 0px;
	margin-bottom: 30px;
	position: relative;
    background: #000 url(http://www.onebluebrick.com/blogs/matthew/images/granitelight.jpg) repeat top left;
    border: 2px solid #222;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;

	}

	

	
.container {margin: 10px 20px; line-height: 18px;}

    
    
           .post .media {
            text-align: center;
            margin-bottom: 10px;
          }
          
          
          
/* QUOTE */  
          
        
          
          
.post .quote {  
background: #025c93;  
padding: 15px; 
position: relative;  
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
color: #fff;
font-family: Georgia, Helvetica, Verdana, sans-serif;
font-size: 19px; line-height: 24px;
            
}  
  
.post .quote .mark {float: left; font-size: 120px; line-height: 100px; margin-right: 20px; height: 50px;}  

  
.post .quote .arrow {
background: url(http://www.imhere.at/tumblr/images/quotearrow.png) no-repeat top left;
width: 35px;
height: 18px;  
position: absolute;  
bottom: -18px;  
left: 15px;  
}  
          
          
.source {font-size: 14px; color:#fff; margin-top: 30px;}
            
           .post .copy {
            color: #ddd;
            font-size: 14px;
            line-height: 18px;
          }
          
             .post .copy a {
              color: #ddd;
              text-decoration: underline;
            }
        

/* AUDIO */    
          
          
           .post .audio {
            background: #eaeaea;
            float: left;
            padding: 7px;
            border-radius: 4px;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
          }
                            
             .post .audio .player {
              float: left;
            }
            
               .post .audio .player .audio_player embed {
                border: 1px solid #c8c8c8;
              }
            
             .post .audio .meta {
              padding: 8px 13px;
              height: 13px;
              float: left;
              color: #666;
              font-family: "Lucida Grande", Arial, Helvetica, Verdana, sans-serif;
              font-size: 11px;
            }
            
               .post .audio .meta a {
                color: #666;
                text-decoration: none;
              }
          
        
/* CHAT */           
        
        
           .post .title {
            color: #fff;  
            background: #333;
            font-size: 22px;
            line-height: 30px;
            font-weight: bold;
            margin-bottom: 15px;
            border-radius:4px;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            padding: 12px;
          }
          
                    
           .post .chat {
            font-size: 14px;
            margin: 0px 10px;
          }
                    
             .post .chat .lines {
            }
            
               .post .chat .lines .line {
                background-color: #fff;
                color: #494949;
                margin-bottom: 5px;
                padding: 10px;
                position: relative;
              }
            
            
            	.post .chat .lines .line .arrow {position: absolute; top:5px; left:-14px; width:14px; height: 15px; background: url(http://www.imhere.at/tumblr/images/arrowleft.png) no-repeat top left;}
            	.post .chat .lines .line .arrow.even {position: absolute; top:5px; left:570px; width:14px; height: 15px; background: url(http://www.imhere.at/tumblr/images/arrowright.png) no-repeat top left;}
            
            	.post .chat .lines .line .label {font-weight: bold; color:#025c93;}
            
               .post .chat .lines .line.even {
                background-color: #fff;
                 margin-bottom: 5px;
                   position: relative;
              }
          
          
          
/* LINK */
         
             .post .link {
              margin-bottom: 15px;
              padding: 8px;
            background: #fff url(http://www.onebluebrick.com/blogs/matthew/images/whitebar.jpg) repeat-x bottom left;	
       		border-radius: 4px;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
      
            }
              
 .post .link .left {font-size: 22px; font-weight: bold; line-height: 30px;}
          
 .sublink {float:left; color: #fff; margin-right: 10px;}  
         
 .sublink a:link, .sublink a:active, .sublink a:visited {
                background: #025c93;
                color: #fff;
                font-size: 13px;
                font-weight: bold;
                padding:4px 7px;
                border-radius: 4px;
                -moz-border-radius: 4px;
                -webkit-border-radius: 4px;
              }
              
.sublink a:hover {
                opacity: 0.9;
                color: #fff;
                filter: alpha(opacity=90);
                -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
              }

          
          
 /* POST META CONTENT */
 
 
           .post .footer {
            background: #333;
            border-radius: 4px;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            font-family: Helvetica, Arial, Verdana, sans-serif;
            font-size: 11px;
            color: #ddd;
            padding: 5px 10px;
            margin: 15px 20px 0px 20px;
          }
          
             .post .footer:hover {
              opacity: 0.9;
              filter: alpha(opacity=90);
              -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
            }
          
             .post .footer .date {
              width: 80%;
              float: left;
            }
            
             .post .footer .notes {
              width: 18%;
              float: right;
              text-align: right;
            }
            
               .post .footer .tags a {
                color: #025c93;
                text-decoration: underline;
              }
              
                 .post .footer .tags .tag-commas:last-child {
                  display: none;
                }
          
             .post a {
              color: #025c93;
              text-decoration: none;
            }
            
             .post .copy blockquote {
    	        margin: 10px 0px 10px 10px;
    	        padding-left: 15px;
    	        border-left: solid 4px #dcdcdc;
      	    }

    	         .post .copy  blockquote blockquote {
  	            border-left: solid 4px #cccccc;
        	    }

          	     .post .copy  blockquote blockquote blockquote {
    	            border-left: solid 4px #bcbcbc;
          	    }

        	         .post .copy  blockquote blockquote blockquote blockquote {
      	            border-left: solid 4px #acacac;
            	    }

              	     .post .copy  blockquote blockquote blockquote blockquote blockquote {
        	            border-left: solid 4px #9c9c9c;
              	    }

          	         .post .copy  blockquote blockquote blockquote blockquote blockquote blockquote {
        	            border-left: solid 4px #8c8c8c;
              	    }
            
       
             #navigation {
              text-align: left;
              padding-bottom: 35px;
            }
            
               #navigation a {
               
                padding: 5px 10px;
                text-decoration: none;
                color: #fff;
                margin-left: 25px;
              }
          
               #navigation a:hover {
                opacity: 0.9;
                filter: alpha(opacity=90);
                -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
              }
    
               .post .notecontainer {
                background: #333;
            border-radius: 4px;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            font-family: Helvetica, Arial, Verdana, sans-serif;
            font-size: 13px;
            color: #ddd;
            padding: 5px 10px;
            margin: 15px 20px 0px 20px;
              }

                   .post .notecontainer a {
                    color: #ddd;
                    text-decoration: underline;
                  }

                   .post .notecontainer ol.notes {
                    padding: 0px 0 10px 0;
                    list-style-type: none;
                    font-size: 13px;
                  }

                     .post .notecontainer ol.notes li.note {
                      padding: 10px 10px 0 10px;
                    }

                       .post .notecontainer ol.notes li.note img.avatar {
                        vertical-align: -4px;
                        margin-right: 10px;
                        width: 16px;
                        height: 16px;
                      }

                       .post .notecontainer ol.notes li.note span.action {
                        font-weight: normal;
                      }

                       .post .notecontainer ol.notes li.note .answer_content {
                        font-weight: normal;
                      }

                       .post .notecontainer ol.notes li.note blockquote {
                        border-left: 2px solid #666;
                        padding: 4px 10px;
                        margin: 10px 0px 0px 25px;
                      }

                         .post .notecontainer ol.notes li.note blockquote a {
                          text-decoration: none;
                        }
      
         #searchresults {
          color: #fff;
          margin: 0 0 15px 0;
          text-shadow: #2f2f2f 1px 3px 5px;
          font-size: 20px;
        }
      
      
  #comments {
  	width: 630px;
	padding: 20px 10px;
	margin: 0px;
	margin-top: 20px;
	position: relative;
    background: #000 url(http://www.onebluebrick.com/blogs/matthew/images/granitelight.jpg) repeat top left;
    border: 2px solid #222;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
  	} 
      
   #disqus_thread {width: 600px;}   
      
   
/* SIDEBAR */
   
   
       #sidebar {
        width: 260px;
        float: right;
        margin-top: 30px;
        
      }
      
     
           #sidebar  .heading#followontumblr:hover,
           #sidebar  .heading#twitter:hover {
            opacity: 0.9;
            filter: alpha(opacity=90);
            -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
          }
        

        
           #sidebar  .content {
            margin-top: 2px;
            padding: 7px 10px;
            background: #eaeaea;
            color: #666;
            font-size: 11px;
          }
          
             #sidebar  a {
              text-decoration: none;
            }
          
             #sidebar  #following-avatars.content {
              padding: 4px;
            }
          
                 #sidebar  #following-avatars.content a img {
                  margin: 5px;
                }
        
 
        
   			
       
      
 
 
 
  /* TWITTER */
  
  #tweets {margin-bottom: 10px;}
  
  #tweets .header {
 	width:260px;
 	margin-bottom: 25px;
	background: #000;
    border: 2px solid #222;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    position: relative;
  	}
  	
   #tweets .header .copy {
   margin: 6px;
   font-size: 19px;
   color: #fff;
   font-weight: bold;
   	}
  
   #tweets .header .icon {
   background: url(http://www.onebluebrick.com/blogs/matthew/images/bird.png) no-repeat top left;
   width: 51px;
   height: 63px;
   position: absolute;
   bottom: -10px;
   right: 5px;	
   }	
  
  
  .tweet {

  color: #888; 
  }
  
  .tweet .loading {
   background: #000 url(http://www.onebluebrick.com/blogs/matthew/images/granitelight.jpg) repeat top left;
    border: 1px solid #111;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 8px auto;
    text-align: center;

  }
  
  .tweet .tweet_list {
    margin: 0;
    padding: 0;
    width: 260px;
    }
    
  .tweet .tweet_list li {
  	background: #fff url(http://www.onebluebrick.com/blogs/matthew/images/whitebar.jpg) repeat-x bottom left;
	 position: relative;
      list-style: none;
      list-style-image: none;
      margin-bottom: 10px;
       border-radius: 8px;
            -moz-border-radius: 8px;
            -webkit-border-radius: 8px;
            
      }
  
    .tweet_content{  
      padding: 10px 15px;
      color: #111; 
      line-height: 20px;
      font-size: 14px;
      }
      
      
 .tweet .tweet_list li .top {  
background: url(http://www.imhere.at/tumblr/images/quotetop.png) no-repeat top left;
width: 28px;
height: 14px;  
position: absolute;  
top: -14px; 
right: 15px; 
}  


  
  .tweet .tweet_list li .tweet_date {
 	margin-top: 5px;
      }
      
  .tweet .tweet_list li a {
        color: #025c93; 
        }
    


/* FLICKR */

#flickr {margin-bottom: 20px;}

#flickr .header {
 	width:260px;
 	margin-bottom: 25px;
 	background: #000;
    border: 2px solid #222;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    position: relative;
  	}
  	
#flickr .header .copy {
   margin: 6px;
   font-size: 19px;
   color: #fff;
   font-weight: bold;
   	}
  
#flickr .header .icon {
   background: url(http://www.onebluebrick.com/blogs/matthew/images/camera.png) no-repeat top left;
   width: 51px;
   height: 63px;
   position: absolute;
   bottom: -10px;
   right: 5px;	
   }	

#flickr_badge_uber_wrapper {
text-align:center; 
width:260px;
}


#flickr_badge_wrapper {width:260px; padding-left:30px; text-align: center;}
.flickr_badge_image {margin:0px;}
.flickr_badge_image img {
	float: left;
	background: #000 url(http://www.onebluebrick.com/blogs/matthew/images/granitelight.jpg) repeat top left;
    border: 2px solid #222;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    padding: 5px;
    margin: 0px 15px 15px 0px;
	}
#flickr_badge_source {text-align:left; margin:0 10px 0 10px;}
#flickr_badge_icon {float:left; margin-right:5px;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}