/*
Theme Name: TiSB
Theme URI: http://www.tisbcast.com
Author: Jeff Hudecek
Author URI: http://www.jeffandcompany.com
Description: The custom theme for This is Serious Business. 
Version: 1.0
*/


/* DESKTOP */

body {
    margin:0;
    background-color:#373737;
    background-image:url('images/bodybg.png');
    background-repeat:repeat-x;
    background-position:top center;
    font-family:'Roboto Condensed', sans-serif;
}

a:hover, li:hover {
    transition-duration:.5s;
}

ul {
    list-style-type:none;
}

img {
    border:0;
}

header {
    height:60px;
}

    header img.logo {
        float:left;
		margin-left:1%;
    }

    header ul {
        float:right;
        margin:0;
        padding:0 1% 0 0;
    }
    
        header ul li {
            float:right;
            width:5.6em;
            height:47px;
            padding-top:13px;
            background-color:#1bd4f0;
            background-image:url('images/libgcover.png');
            background-repeat:repeat-x;
            background-position:top center;
            border-left:1px solid #a0887e;
            text-align:center;
        }

		header ul li:first-child {
			border-right:1px solid #a0887e;
		}
        
            header ul li:hover {
                background-color:#f9f85f;
                transition-duration:.5s;
            }

			header ul li.current-menu-item {
				background-color:#f9f85f;
			}
        
            header ul li a {
                color:#fff;
                font-family:'Pathway Gothic One', sans-serif;
                font-size:1.2em;
                text-decoration:none;
            }

#container {
    margin:0 0 0 1%;
}

    #container div.grid {
        float: left;
        width:24%;
	height:395px;
        margin:15px 1% 0 0;
        color:#fff;
	overflow:hidden;
    }

	.home #container div.grid {
		height:425px;
	}
		
		.home #container div.grid .video_container {
			position:relative;
			padding-bottom: 56.25%;
		    padding-top: 35px;
		    height: 0;
		    overflow: hidden;
		}
		
			.home #container div.grid .video_container iframe {
				position: absolute;
				top:0;
				left: 0;
				width: 100%;
				height: 100%;
			}

		#container div.grid img.podcast {
			float:right;
			width:35%;
			height:auto;
			padding:20px 15px 10px 10px;
		}
		
		#container div.grid img.blog {
			width:90%;
			height:auto;
			padding:10px 15px 0px 15px;
		}
    
        #container div.mega {
            width:49%;
	    float:left;
        }
        
        #container div h2 {
            padding:15px;
	    margin:0;
	    background-color:#000;
            font-family:'Pathway Gothic One', sans-serif;
            font-size:1.2em;
	    font-weight:500;
        }
	
	    #container div.grid h2 {
		border-bottom:2px solid #F7F687;
	    }

	    .home #container div h2 {
            font-size:1.6em;
	    border-bottom:none;
        }

			#container div.grid h2 a {
				color:#fff;
				text-decoration:none;
			}
			
				#container div.grid h2 a:hover {
					color:#8f9fff;
				}
        
        #container div p {
            font-size:.9em;
            margin:10px 10px 0 15px;
        }
	
	    #container div p.bio {
		color:#333;
	    }
        
            #container div p a {
                color:#1bd4f0;
            }
            
                #container div p a:hover {
                    color:#f9f85f;
                }

				#container div p a.more {
					font-family:'Pathway Gothic One', sans-serif;
					color:#fff;
					text-decoration:none;
				}
				
				#container div p a.more:hover {
					color:#1bd4f0;
				}
				
	#container div ul.previous li {
		height:30px;
		border-top:2px solid #85402b;
		opacity:0.7;
	    }
	    
		#container div ul.previous li:hover {
		    opacity:1;
		}	    

		#container div ul.previous li p {
		    float:right;
		    line-height:30px;
		    font-size:.8em;
		}

		    #container div ul.previous li p a {
			color:#fff;
			text-decoration:none;
		    }

			#container div ul.previous li p a:hover {
			    color:#f9f85f;
			}
			
			#container div ul.previous li p.title {
			    float:left;   
			}
        
    #container #welcome {
        background-color:#000;
        background-image:url('images/welcomebg.png');
        background-position:bottom center;
        background-repeat:no-repeat;
    }
    
    #container #cast div {
        width:100%;
        margin:0;
    }
    
        #container #cast div.major {
            float:left;
	    height:245px;
        }

			#container #cast div.major img {
				float:left;
				padding:13px 2%;
				width:34%;
				height:auto;
				max-height:222px;
				background-color:#000;
			}
			
			#container #cast div.major h2 {
				margin:0;
				padding:0;
				line-height:60px;
				background-color:#000;
				width:100%;
				font-size:2em;
				border-bottom:2px solid #f9f85f;
			}
			
			#container #cast div.major div {
				float:left;
				height:175px;
				width:60.5%;
				margin:1.5% 0 0 1.5%;
				background-color:#616161;
			}
			
				#container #cast div.major div p a.more {
					font-size:1.4em;
				}
        
        #container #cast div.minor {
	    float:left;
            height:165px;
            margin-top:15px;
            background-color:#000;
        }
			
				#container #cast div.minor ul.previous {
					margin:0;
					padding:0;
				}
				
					#container #cast div.minor ul.previous li {
						background-color:#616161;
						margin:8px 1.5% 0 1.5%;
					}
						
						#container #cast div.minor ul.previous li p {
							margin:0 10px 0 0;
						}
						
							#container #cast div.minor ul.previous li p.title {
								margin:0 0 0 10px;
							}
							
							#container #cast div.minor ul.previous li p.featuring {
								font-size:.65em;
							}
				
				#container #cast div.minor ul.nav {
					margin:0;
					padding:10px 10px 0 10px;
				}
				
					#container #cast div.minor ul.nav li {
						float:left;
						padding:0 10px;
						font-family:'Pathway Gothic One', sans-serif;
						font-size:1em;
						border-left:1px solid #fff;
					}
					
						#container #cast div.minor ul.nav li:first-child {
							border-left:none;
						}
					
						#container #cast div.minor ul.nav li a {
							color:#fff;
							text-decoration:none;
						}
						
							#container #cast div.minor ul.nav li a:hover {
								text-decoration:underline;
							}

	#container #blog {
		background-color:#fff;
	}
	
	.home #container #blog, .home #container #video {
		background-color:#000;
	}
	
	    #container #blog h3 {
		color:#000;
		padding:15px 10px 0 15px;
		margin:0;
		font-size:1.1em;
	    }
	
			#container #blog h3 a {
				color:#000;
				text-decoration:none;
			}
	
	    #container #blog div {
		float:none;
		width:100%;
		background-color:#fff;
	    }
	
		.home #container #blog div {
			height:240px;
		}
	    
		#container #blog div p {
		    font-size:.8em;
		    color:#333;
		}
		
		    #container #blog div p.byline {
			color:#8c8c8c;
			font-size:.7em;
			margin:3px 10px 0 15px;
		    }
		    
			#container #blog div p.byline a {
			    color:#8c8c8c;
			}
			
				#container #blog div p.byline a:hover {
					color:#000;
				}
		
		    #container #blog div p a.more {
			color:#000;
			font-size:1.4em;
		    }
		
				#container #blog div p a.more:hover {
					color:#1bd4f0;
				}
		
	    #container #blog ul, #container #video ul {
		margin:0;
		padding:0;
	    }
	    
		#container #blog ul.previous li {
		    height:35px;
		}
	    
		#container #blog ul.previous li p {
		    margin:0 8px 0 0;
		    line-height:35px;
		}
		
		    #container #blog ul.previous li p.title {
			margin:0 0 0 8px;
		    }
		    
		    #container #blog ul.previous li p.featuring {
			font-size:.65em;
		    }
		
	#container div.pagination {
		background-color:#000;
	}
	
		#container div.pagination p {
			font-size:1.7em;
			text-align:center;
			margin:0;
			line-height:395px;
		}
		
			#container div.pagination p a {
				text-decoration:none;
			}
			
			
	#container #main {
		float:left;
		background-color:#fff;
		width:65%;
		margin:15px 1% 0 0;
		padding-bottom:15px;
	}
	
		#container #main h1 {
			padding:15px;
			margin:0;
			color:#fff;
			background-color:#000;
			font-weight:500;
			box-shadow:0px 5px 8px #777;
		}
		
		#container #main h2 {
			background-color:#fff;
			margin:15px;
			padding:0;
			font-size:1.4em;
		}
		
		#container #main h3 {
			margin:15px;
		}
		
		#container #main p {
			margin:10px 15px 5px 15px;
			line-height:1.6em;
		}
		
			#container #main p a {
				color:#777;
			}
		
				#container #main p a:hover {
					color:#1bd4f0;
				}
			
		#container #main img {
		    max-width:100%;
		    height:auto;
		}
		
		#container #main img.alignleft {
			float:left;
			max-width:36%;
			padding:0 10px 10px 0;
		}
			
		#container #main img.alignright {
			float:right;
			width:36%;
			padding:0 0 10px 10px;
		} 
		
		#container #main iframe {
			max-width:100%;
		}
		
		#container #main div.really_simple_share {
			margin:15px;
		}
		
		#container #main div.powerpress_player {
			margin:15px;
		}
		
		#container #main #disqus_thread {
			margin:20px 15px;
		}
		
	#container #sidebar {
		float:left;
		background-color:#000;
		width:32%;
		margin:15px 0 0 0;
		padding:0 0 20px 0;		
	}
	
	    #container #sidebar h3 {
		border-bottom: 2px solid #fff;
        	padding:15px 0 5px 0;
		margin:0 15px;
        	font-family:'Pathway Gothic One', sans-serif;
        	font-size:1.4em;
		font-weight:500;
		color:#fff;		
	    }
		
		#container #sidebar ul {
			padding:0;
			margin:10px 15px;
			list-style-type:none;
		}
		
			#container #sidebar ul li {
				background-image:url('images/libg.gif');
				background-position:left 3px;
				background-repeat:no-repeat;
				padding:3px 0 3px 20px;
				font-size:.9em;
				line-height:1.1em;
				color:#cdcdcd;
			}
			
				#container #sidebar ul li a {
					text-decoration:none;
					color:#b3b3b3;
				}
				
					#container #sidebar ul li a:hover {
						color:#fff;
					}
		
footer {
	float:left;
	clear:both;
	margin-top:15px;
	width:98%;
	padding:0 1%;
	background-color:#222;
	height:120px;
	border-top:1px #A9A9A8 solid;
}

    footer div.search {
	float:right;
	margin-top:15px;
    }
    
    footer p {
	font-family:'Pathway Gothic One', sans-serif;
	font-size:1.4em;
	margin:15px 0 0 0;
	color:#fff;
    }
    
	footer p.contact {
	    margin-top:0;
	    font-size:1.1em;
	}
	
	footer p.copy {
	    font-family:'Roboto Condensed', sans-serif;
	    font-size:.8em;
	}
    
	footer p a {
	    color:#b3b3b3;
	    text-decoration:none;
	}
	
	    footer p a:hover {
		color:#fff;
	    }
	
/* SUPER WIDE */

@media only screen and (min-width: 1400px) {

	#container div.grid {
		width:19%;
	}

		#container div.mega {
		    width:39%;
		}
		
	#container #main {
		width:900px;
	}
	
	#container #sidebar {
		width:300px;	
	}
	
}

/* TABLET */

@media only screen and (max-width: 1100px) {
		
		#container div.grid {
			width:32%;
		}
	
			#container div.mega {
        		width:66%;
    		}

			.home #container div h2 {
				font-size:2em;
			}
			
				#container #cast div.major div p a.more {
					font-size:1.8em;
				}

}

/* MOBILE */

@media only screen and (max-width: 760px) {
	
	header ul {
		padding:0;
		width:100%;
		background-color:#000;
	}
	
		header ul li {
			width:24.5%;
		}
	
	#container {
		margin:0 2%;
	}
	
		#container div h2 {
			font-size:1.6em;
		}
	
		#container div.grid {
			width:100%;
			margin:15px 0 0 0;
		}
	
			#container div.mega {
				width:100%;
			}
	
			#container div p {
				font-size:1em;
			}
			
				#container #cast div.major img {
					width:28%;
					height:auto;
				}
				
				#container #cast div.major div {
					height:175px;
					width:66.5%;
					margin:1.5% 0 0 1.5%;
					background-color:#616161;
				}
			
				#container #cast div.major div p {
					font-size:.8em;
				}
				
				#container #cast div.minor ul.previous li p.featuring {
					display:none;
				}
				
				#container #cast div.minor ul.nav li {
					width:24%;
					padding:0;
					text-align:center;
				}
				
	#container #main {
		width:100%;
	}
	
	#container #sidebar {
		width:100%;	
	}
	
	footer {
		padding:0 2%;
		width:96%;
		height:145px;
	}
	
		footer div.search {
			float:none;
		}
	
}