* { margin: 0; padding: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
*::selection { background: #E1E6E2; /* Safari */ }
*::-moz-selection { background: #E1E6E2; /* Firefox */ }

img { max-width:100%; }
p {margin:1em 0;}
a, img { border:none; outline:none }
ul { list-style-type:none; }
table { width:100%; }
td { width: 25%; }

@media (min-width: 768px) { .mobilerss { display:none; } }
@media (max-width: 768px) { .desktoprss { display:none; } }

body {
	background: url('../images/bg.gif') repeat;
	z-index:-999;
	max-width:100%;
	overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6 {
	font-family: 'Russo One', sans-serif;
	font-size: 2.5em;
	color: #7cc552;
}

#logo table {width:100%;}
#logo td {vertical-align:middle; padding:10px;}

#show-logo {
	width:320px;
	margin: 70px auto 20px;
	display:block;
}

.one { width: 10%; }
.two { width: 20%; }
.three { width: 30%; }
.four { width: 40%; }
.five { width: 50%; }
.six { width: 60%; }
.seven { width: 70%; }
.eight { width: 80%; }
.nine { width: 90%; }
.ten { width: 100%; }



.date { 
	font-family: 'Russo One';
	font-size: 1.5em;
	font-weight:bold;
	color:#ffffff;
}

.next { 
	font-family: 'Russo One';
	font-size: 1.5em;
	color:#ffffff;
}

.guest {
	font-family: 'Russo One';
	font-size: 2em;
	line-height: 1.114285714em;
	color:#ffffff;
}

.details {
	font-family: 'Russo One';
	font-size: 1.5em;
	line-height: 1.114285714em;
	color:#000000;
}
.details-date {
	font-family: 'Russo One';
	font-size: 1em;
	line-height: 1.114285714em;
	color:#cccccc;
}
.details-time {
	font-family: 'Russo One';
	font-size: 1em;
	line-height: 1.114285714em;
	color:#cccccc;
}

.content h1, h2, h3, h4, h5, h6 { 
	text-align:center;
	padding-bottom:10px;
}

#wrapper {
	width:80%;
	height:auto;
	position:relative;
	margin-left:auto;
	margin-right:auto;
}

#bio {
	width:80%;
	height:auto;
	position:relative;
	margin-left:auto;
	margin-right:auto;
}

.cell-link a {
	display:block;
	text-decoration:none;
	color:#E1E6E2;
}

.cell-link a:hover {
	color: rgba(0, 0, 0, 0.6);
}

.cell-link td { width: 20%; text-align:center; }

#logo {
	background: url('../images/dark-paper.jpg') repeat;
	width:100%;
	margin-top:-5px;
	margin-left:auto;
	margin-right:auto; 
	padding-bottom:20px;
	overflow:auto;
	overflow-x: hidden;
}

#color2 {
	background: transparent;
	width:100%;
	margin-top:0;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:20px;
	overflow:auto;
	overflow-x: hidden;
}

.content {
	font-family: 'Electrolize', sans-serif;
	padding:20px;
	padding-bottom:30px;
	padding-top: 50px;
}

.content a { color: #7cc552; }

.content img {
	display:block;
	max-width:97%;
	margin-left:auto;
	margin-right:auto;
	padding: 0px 5px 0px 5px;
}

.episode-pad { padding:15px 0 5px 0; }

.top-20 { margin-top:20px; }
.top-15 { margin-top:15px; }

.bio-text {
	text-align:left;
	color:#ffffff;
}

.right { float:right; }
.left { float:left; }

.img-border {
	width:65px;
	align:left;
	border-radius:40px;
	border: #ffffff 3px solid;
	background:#7cc552;
	margin-bottom:15px;
	margin-top:15px;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

#footer {
	background: url('../images/dark-paper.jpg') repeat;
	position: relative;
	width:100%;
	margin:0 auto;
	text-align:center;
	padding-top:20px;
	color:#ffffff;
}

#footer a { font-family: 'Russo One', cursive; color: #7cc552; }

.social-icon { opacity: 1; filter: alpha(opacity=100); width:72px; margin:auto; }
.social-icon:hover { opacity: 0.3; filter: alpha(opacity=30); }

div.facebook { width: 48px; height:48px; background: url(../images/social-sprite.png) 0 0; background-color: #7cc552; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; }
div.twitter { width: 48px; height:48px; background: url(../images/social-sprite.png) 144px 0; background-color: #7cc552; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px;}
div.itunes { width: 48px; height:48px; background: url(../images/social-sprite.png) 96px 0; background-color: #7cc552; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px;}
div.rss { width: 48px; height:48px; background: url(../images/social-sprite.png) 48px 0; background-color: #7cc552; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px;}


/******************************************************/
/********* min-width: 480px  max-width: 768px *********/
/******************************************************/

@media screen and (min-width: 480px) and (max-width: 768px) {

body {
	background: url('../images/bg.gif') repeat;
	z-index:-999;
	max-width:100%;
}

#wrapper {
	width:100%;
	height:auto;
	background-color: #ffffff;
	padding-top:0%;
	margin-left:auto;
	margin-right:auto;
	top:0;
}

.cell-link a {
	display:block;
	text-decoration:none;
	color: rgba(0, 0, 0, 0.6);
}

.cell-link a:hover {
	color: rgba(255, 75, 0, 0.7);
}

.content {
	font-family: 'Electrolize', sans-serif;
	font-size: 0.875em;
	padding:1.2634238785%;
	padding-bottom:20px;
	padding-top: 48px;
}

#logo { margin-top:-4px; }

}

/************************************/
/********* max-width: 767px *********/
/************************************/

@media screen and (max-width: 767px) {

body {
	background: url('../images/bg.gif') repeat;
	z-index:-999;
	max-width:100%;
}

#show-logo { width:320px; margin-left:10px; margin-top:70px; float:left;}

.details {
	font-family: 'Russo One';
	font-size: 1.5em;
	line-height: 1.114285714em;
	color:#000000;
}

.one { width: 100%; }
.two { width: 100%; }
.three { width: 100%; }
.four { width: 100%; }
.five { width: 100%; }
.six { width: 100%; }
.seven { width: 100%; }
.eight { width: 100%; }
.nine { width: 100%; }
.ten { width: 100%; }

#wrapper {
	width:100%;
	height:auto;
	padding-top:0%;
	margin-left:auto;
	margin-right:auto;
	top:0;
}

.cell-link a {
	display:block;
	text-decoration:none;
	color: #5D6057;
}

.cell-link a:hover { color: #7cc552; }

.content {
	font-family: 'Electrolize', sans-serif;
	font-size: 0.875em;
	padding:1.2634238785%;
	padding-bottom:20px;
	padding-top: 48px;
}

#logo { margin-top:-4px; }

}

/********************************/
/********** NAVIGATION **********/
/********************************/
nav { -webkit-box-shadow: 0px 10px 48px 0px rgba(0,0,0,0.75);-moz-box-shadow: 0px 10px 48px 0px rgba(0,0,0,0.75);box-shadow: 0px 10px 48px 0px rgba(0,0,0,0.75); }

.nav-item a, .nav-item a:hover { text-decoration:none; }

ul, ol { list-style:none; }

/* Navigation styling */
.nav {
	display:inline-block;
	width:100%;
	font-family: 'Russo One', sans-serif;
	font-size: 1em;
	margin-left:0px;
	margin-top:0px;
	position:fixed;
	z-index:10;
}
.nav-bg { width:100%; position:absolute; margin-top:-40px; background:#7cc552; z-index:-99; text-align:center;}
.nav-text { margin-left:40px; margin-top:5px; font-size:1.5em; line-height:45px; color:#fff; }
.nav-list { width:100%; }
.nav-item {
	float:left;
	*display:inline;
	zoom:1;
	width:16.6666666666%;
	text-align:center;
}
.nav-item a {
	display:block;
	padding:15px 20px;
	color:#FFF;
	background:#7cc552;
}

.nav-item a:hover { background:#cccccc; }

/* Mobile Navigation */
.nav-mobile {
	display:none; /* Hide from browsers that don't support media queries */
	cursor:pointer;
	position:absolute;
	top:0;
	left:0;
	background:#7cc552 url(../images/nav-2.gif) no-repeat center center;
	height:40px;
	width:40px;
}

/*------------------------------------*\
    Media Queries
\*------------------------------------*/

@media only screen and (min-width: 0px) and (max-width: 768px) {
	.nav-mobile { display:block; padding-right:5px; }
	.nav { width:100%; padding:40px 0 0; }
	.nav-list { display:none; }
	.nav-item { width:100%; float:none; }
	.nav-item a { background:#666666; padding:10px; }
	.nav-active { display:block; }
}

/********************************/
/************* FONTS ************/
/********************************/
@font-face {
  font-family: 'Russo One';
  font-style: normal;
  font-weight: 400;
  src: local('Russo One'), local('RussoOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/russoone/v2/RO6e96EC9m6OLO0tr7J3zz8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

/********************************/
/********** modal *********/
/********************************/
/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(http://www.jacklmoore.com/colorbox/example1/images/overlay.png) repeat 0 0;}
#colorbox{outline:0;}
    #cboxTopLeft{width:21px; height:21px; background:url(http://www.jacklmoore.com/colorbox/example1/images/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(http://www.jacklmoore.com/colorbox/example1/images/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(http://www.jacklmoore.com/colorbox/example1/images/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(http://www.jacklmoore.com/colorbox/example1/images/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(http://www.jacklmoore.com/colorbox/example1/images/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(http://www.jacklmoore.com/colorbox/example1/images/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(http://www.jacklmoore.com/colorbox/example1/images/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(http://www.jacklmoore.com/colorbox/example1/images/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxLoadingOverlay{background:url(http://www.jacklmoore.com/colorbox/example1/images/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(http://www.jacklmoore.com/colorbox/example1/images/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(http://www.jacklmoore.com/colorbox/example1/images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(http://www.jacklmoore.com/colorbox/example1/images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(http://www.jacklmoore.com/colorbox/example1/images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

