/* Some bootstrappy overridey styles */
ul {margin: 0; padding: 0;}
li {line-height:14px;}
.clear {clear:both;}
.tab-content {overflow:visible;}
.tab-pane.active {display:block;}
.critic-info p,
p.other,
.bio-box, 
div.secondary {font-family: Arial,sans-serif;}
p.other {margin:15px 0; padding-top:10px; font-weight:bold; font-size:18px; border-top:1px dotted #e5e6e7;}
#picks-container { margin-top: 15px; }
#picks-container h3 a,
#picks-container h3 a:hover,
#picks-container h3 a:visited,
#picks-container h3 a:link {color:#333;}

/* Main critics box */
.beatbox {
    clear:both;
    padding:15px 15px 0;
    border-left:1px solid #cccccc;
    border-right:1px solid #cccccc;
    border-bottom:2px solid #cccccc; 
}
.top-pick { margin-bottom:10px;}

/* 
 * Using responsive and intrinsic ratios for video, found here:
 * http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
 * and here:
 * http://webdesignerwall.com/tutorials/css-elastic-videos
 */
.pick-image {max-height:360px; display:block; margin:0 auto;}
.credit {text-align:right; font-size:12px; line-height:17px;}
.trailer-art {position:relative; padding-bottom: 56.25%; height:0; overflow:hidden; }
.trailer-art iframe,
.trailer-art object,
.trailer-art embed {position:absolute; top:0; left:0; width:100%; height:100%;}

.critic.topborder {margin-top:15px; padding-top:15px; border-top:1px dotted #e5e6e7;}
.critic p { color:#6e6e6e; }
.critic-info span.critic-name { font:normal 18px Georgia, "Times New Roman", Times, serif; line-height:24px; margin:0 10px 0 0; font-weight:normal}
.critic-info p { text-transform:uppercase; font-size:12px; color:#bd9f2f; font-weight:bold; padding:0; margin:0 0 2px 0;}
.critic p.top-description { font-size: 16px; margin-top: 8px; line-height:24px;}
.social-media {position:relative;}
.critic-info .twitter-follow-button,
.critic-info .facebook,
.bio {float:left; margin-right:10px;}
.facebook {min-width:110px;}
/* Override some puzzling FB styles*/
.social-media .facebook .fb_iframe_widget span {height:17px !important;}
a.bio { position:relative; top:3px; color:#6e6e6e; cursor: pointer; font-size: 14px; line-height:14px;}
.bio-box-holder {display:none;position:absolute; bottom:20px; left:90px; z-index:1000; }
.bio-box { background-color:#fff; padding:15px; width:370px; border:2px solid #ccc; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}
.bio-box-pointer {height:0px; width:0px; position:relative; left:25%; border-left:8px solid transparent; border-right:8px solid transparent; border-top:10px solid #ccc;}
.critic-info .mugshot {width:60px; float:left; margin-right:10px;}

.location {clear:both; text-align:right;}
.location a {font-size:14px; line-height:14px;}

/* Secondary Picks*/
.secondary-picks {margin-bottom:20px;}
.secondary {border:1px solid #e5e6e7; min-height:120px;}
.secondary.left {margin-left:0;}
.secondary h4,
.secondary p {padding:5px; margin-bottom:0;}
.secondary h4 {font-family: Arial, sans-serif; text-align:center; font-weight:bold; font-size:15px; background-color:#e5e6e7; margin:0; }
.secondary p {font-size:14px; margin-top: 4px; width: 95%; line-height:21px;}
.secondary .location {margin-bottom:0;}

/* Possibly work in to main styles */
#container {margin-top:20px;}
#contentBottom { margin-top:15px; padding-top:5px; border-top:1px solid #BCB9B9; font-family:Georgia, "Times New Roman", Times, serif;}
p.related_items {font-family:Georgia, 'Times New Roman', Times, serif; font-size:18px;}
table.cubeAd {margin:0 0 0 auto;}

/* A couple of extra small-screen CSS tweaks here */
@media (max-width: 767px) {
    .secondary {margin-top:15px;}
    #footer .span4 {border-right:0;}
    #footer .span4 li {text-align:center; padding:10px 0; border-bottom:1px solid #ccc;}
    .address {padding-top:10px;}
    .beatbox {border-top: 1px solid #e5e6e7;}
}

@media (min-width:980px){
    .row-fluid .secondary {min-height:120px;}
}

@media (max-width:979px) and (min-width: 768px){
    .page-header .span8 {width:100%;}
    #contentBottom .span8, 
    #contentBottom .span4 {display:block; width:100%;}
    .row-fluid .secondary { min-height: 160px;}
}

/* Tablet size and below */
@media (max-width:979px) {
    table.cubeAd {
        margin:0 auto;
    }  
}