/*
---------------------------------------
APOLLO
---------------------------------------
by Ryan Clark
www.ryanvsclark.com
---------------------------------------                                                                                                          
*/


/* ---------- GLOBAL STYLING RULES & RESETS ---------- */
* {
	margin: 0px;
	padding: 0px;
}



body {
    background: #ffffff;
	font: normal 12px 'Helvetica', Helvetica, Arial, sans-serif;
	color:#616161;
	line-height: 1.5;
    font-family: 'Helvetica', Helvetica, Arial, sans-serif,serif; 
}

hr { display: none; }

#page hr {
    display: block;
    border: none 0; 
    border-top: 1px solid #ffffff;
    width: 100%;
    height: 1px;
    margin: 0 0 20px 0;
}

input, option, textarea, 
button {
	font: normal 12px 'Helvetica', Helvetica, Arial, sans-serif;
}

ul, ol {
    list-style-type: none;
}

q:before, q:after { content: ""; }

big   { font-size: 12px; }
small { font-size: 9px; }

img   { border: none; }

a {
	color: #c9c5c5;
	text-decoration: none;
	outline: none;
}

a:hover {
	color: #8c8c8c;
}

#footer a {
	color: #8c8c8c;
	text-decoration: none;
	outline: none;
}

#footer a:hover {
	color: #b3b3b3;
}

p, h1, h2, h3, h4, h5, h6,
ol, ul {
    line-height: 1.5;
}
#container_right p {
    line-height: 150%;
}
#page #description h2, #page #blog .text h3 {
    font-size: 1.5em;
    font-family: 'Helvetica', Helvetica, Arial, sans-serif;
}

.homepage #page #description h2 {
    margin: 10px 0 0 0;
    font-size: 1.5em;
}

.homepage #page #description h3 {
    font-size: 1.2em;
    font-family: 'Helvetica', Helvetica, Arial, sans-serif;
    color:#888;
}

#header_wrapper, #page_wrapper, #footer_wrapper  {
    width:100%;
    position:relative;
}



/* ---------- HEADER ---------- */

div#header_wrapper {
    width:100%;
    background: #ffffff;
    z-index: 2;
}

div#header {
	width:960px;
	margin:0 auto;
	padding:35px 0 25px;
}
	#header h1 {
		font: normal 24px'Helvetica', Helvetica, Arial, sans-serif;
		line-height: 100%;
	}
	
		#header h1 a,
		#header h1 a:hover {
			color: #000000;
		}
		
		#header h1 img {
		    display: block;
		    max-width: 300px;
		}
	
	#header h2 {
		font-weight: bold;
		font-size: 12px;
		font-family: 'Helvetica', Helvetica, Arial, sans-serif;
		color: #8c8c8c;
		line-height: 110%;
		padding-top: 6px;
	}
	
	#header #page_title {
	   float:left;
    }
	#header #site_nav {
	   float:right;
	   margin-top: 22px;
	}
	
#display_name {width: 300px;}
	
    #display_name h2 {color:#8c8c8c; text-transform: uppercase;}
	

/* ---------- NAVIGATION ---------- */

div#site_nav {
	display: block;
    max-width: 650px;
}

#site_nav ul li {
	display: inline;
	position: relative;
	font-size: 12px;
	font-family: 'Helvetica', Helvetica, Arial, sans-serif;
	font-weight: bold;
	letter-spacing: .2px;
}

#site_nav div.clear {
	display: none;
}

    #site_nav li.section:after { content: " "; }

	#site_nav li.section ul { display: none; } 
	#site_nav li.section:hover ul { display: block; }
	#site_nav li.section ul {
		position: absolute;
		top: 12px;
		left: 10px;
		width: 200px;
		z-index: 111;
		padding-top: 10px;
	}
		#site_nav li.section ul li {
			float: none;
			display: block;
			font: normal 12px;
			background: #ffffff;
			margin: 0;
			padding: 7px 7px 5px 7px;
			letter-spacing: 0;
			text-align: left;
			line-height: 1.5;
			border-bottom: 1px solid #ffffff;
		}
		    #site_nav li.section ul li:last-child {border-bottom: none;}
		  
			#site_nav li.section ul li a {
				text-transform: none;
				letter-spacing: 0;
				padding: 4px 7px 4px 3px;
				font: 'Helvetica', Helvetica, Arial, sans-serif;
				display: block;
			}

    #site_nav ul li a, 
    #site_nav ul li.section {
    	cursor: pointer;
    	padding: 0 12px;
    	font: 'Helvetica', Helvetica, Arial, sans-serif;
    	color: #c9c5c5;
    }
    #site_nav ul li a:hover,
    #site_nav ul li.section:hover {
    	color: #8c8c8c;
    }
    #site_nav ul li.active, #site_nav ul li.active a {
    	color: #8c8c8c;
    }

    #site_nav ul li.active ul li a {
        color: #c9c5c5;
    }
    
    #site_nav ul li.active ul li a:hover {
        color: #8c8c8c;
    }
    
    #site_nav ul li.active ul li.active a {
        color: #8c8c8c;
        cursor: default;
    }


/* ---------- PAGE ---------- */

div#page_wrapper {
    background: #ffffff;
    z-index: 1;
}

div#page {
	width:960px;
	margin:0 auto;
	padding:25px 0 15px;
	overflow: hidden;
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
}

body.index div#page {padding-bottom: 0;}

#page div#description {
    position: relative;
	padding: 0;
	width:600px;
}
    #page #description p, #page #description h2, #page #description h3, #page #description h4, #page #description h5, #page #description h6 {
        padding: 0 0 15px 0;
    }
    
    #page #description ul li, #page #description ol li {padding: 0 0 5px 0;}

    #page #description h2 {line-height: 1.3;}

div#share {
    display: block;
    position: relative;
    clear: both;
    padding: 10px 0 0 0;
}

#page #title {
    display: none;
}
 

/* ---------- SIDEBAR ---------- */

div#widgets {
    font-size: 11px;
    overflow: hidden;
    line-height: 0;
    font-family: 'Helvetica', Helvetica, Arial, sans-serif;
}

div#widgets:after {
    display: block;
	visibility: hidden;
	clear: both;
	content: " ";
}

    #widgets .module {
        display: block;
        float: left;
        width: 300px;
    	padding: 0 0 20px 0;
    	margin: 0 30px 0 0;
    }
    #widgets .last_module {margin: 0;} 
    
        #widgets .module h4 {
            font: italic 12px 'Helvetica', Helvetica, Arial, sans-serif;
            color: #8c8c8c;
            letter-spacing: .2px;
            padding: 0 0 10px 0;
            margin-bottom:10px;
            border-bottom: 1px solid #8c8c8c;
        }
    	    #widgets h4 a { color: #8c8c8c; }
    	    #widgets h4 a:hover { color: #b3b3b3; }
    	    
	    #widgets .module p {
            font-size: 12px;
            line-height: 150%;
            padding: 0;
        }
        
            #widgets .module.twitter ul li span a,
            #widgets .module.lastfm ul.recent_plays li span {
                color: #8c8c8c;
            }
            #widgets .module.twitter ul li span a:hover {
                color: #616161;
            }
            
        #widgets .module.lastfm ol {
		    list-style-type: decimal;
    		list-style-position: inside;
		}

            #widgets .module.twitter ul, 
		    #widgets .module.lastfm ul.upcoming_events,
		    #widgets .module.lastfm ul.recent_plays {
		        margin-bottom: -10px;
		    }

            #widgets .module.twitter ul li,
		    #widgets .module.lastfm ul.upcoming_events li,
		    #widgets .module.lastfm ul.recent_plays li {
    	        padding-bottom: 10px;
    	    }

    	        #widgets .module.lastfm ol li img { display: none; }
    
        #widgets .count_2, #widgets .count_5, #widgets .count_8, #widgets .count_11, #widgets .count_14, #widgets .count_17 {
            margin: 0;
        }
    
    
    /* AUDIO PLAYER */

	.module.audio_player ul {
		display: block;
		width: 278px;
		background: #fff;
		border: solid 1px #ddd;
		border-radius: 5px;
		padding: 10px 10px 15px 10px;
		overflow: hidden;
	}
	.module.audio_player li .album_image {
		height: 75px;
		width: 75px;
		padding: 5px 15px 5px 5px;
		margin-bottom: 10px;
		display: block;
		float:left;
	}
	.module.audio_player li .album_image img {
	   height:75px;
	   width:75px;
	}
	
	.module.audio_player li {
		display: none;
	}
	.module.audio_player li.selected {
		display: block;
	}
	#widgets .module.audio_player li h3 {
		text-align: left;
		font-size: 12px;
		padding-bottom: 2px;
	}
		#widgets .module.audio_player li h3 .download {
			display: none;
		}
	#widgets .module.audio_player ul h4 {
		display: block;
		text-align: left;
		font: normal 12px 'Helvetica', Helvetica, Arial, sans-serif;
		text-transform: none;
		border: none;
		letter-spacing: 0;
		padding: 0 0 2px 0;
		margin: 0;
		color: #616161;
	}
	.module.audio_player .controls {
		display: block;
        float: left;
        margin:5px 0 10px 0;
        text-align: left;
        padding-bottom: 10px;
        width: 180px;
        border-bottom: 1px solid #ffffff;
	}
		.module.audio_player .controls .prev,
		.module.audio_player .controls .next {
			display: inline-block;
			width: 20px;
			height: 30px;
		}
		.module.audio_player .controls .prev a,
		.module.audio_player .controls .next a {
			display: inline-block;
			width: 20px;
			height: 30px;
			overflow: hidden;
			text-indent: 1000px;
			-moz-border-radius: 7px;
			-webkit-border-radius: 7px;
			border-radius: 7px;
		}
		.module.audio_player .controls .prev a {
			background: url(http://g.virbcdn.com/_assets/_themes/apollo/graphics/sprite_controls.png) no-repeat left -7px;	
		}
		.module.audio_player .controls .next a {
			background: url(http://g.virbcdn.com/_assets/_themes/apollo/graphics/sprite_controls.png) no-repeat right -7px;
		}

		.module.audio_player .controls .playpause {
			display: inline-block;
			height: 30px;
			width: 35px;
			overflow: hidden;
		}
			.module.audio_player .controls .playpause a {
				display: block;
				height: 30px;
				width: 35px;
				overflow: hidden;
				text-indent: 1000px;
				background: #616161 url(http://g.virbcdn.com/_assets/_themes/apollo/graphics/sprite_controls.png) no-repeat center -7px;
				-moz-border-radius: 7px;
    			-webkit-border-radius: 7px;
    			border-radius: 7px;
			}
			.module.audio_player .playing .controls .playpause a {
				background: #c9c5c5 url(http://g.virbcdn.com/_assets/_themes/apollo/graphics/sprite_controls.png) no-repeat center -52px;
			}

    .module.audio_player audio {
	    width: 150px;
	    padding: 15px 5px 0px 5px;
	}

	.module.audio_player .length {
		display: block;
		height: 6px;
		width: 150px;
		border: solid 1px #ddd;
		background: #ddd;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;	
		position: relative;	
		margin-top: 9px;
		float:left;
		margin-left:95px;
	}
		.module.audio_player .length .load {
			height: 6px;
			width: 0%;
			display: block;
			background: #616161;
			position: absolute;
		}
		.module.audio_player .length .progress {
			height: 6px;
			width: 0%;
			display: block;
			background: #c9c5c5;
			position: absolute;
		}
		.module.audio_player .length .time {
			color: #616161;
			font-size: 12px;
			position: absolute;
			left: 157px;
			top: -4px;
		}
		
		

/* ---------- FOOTER ---------- */

div#footer {
	width:960px;
	margin:0 auto;
	padding:25px 0;
	font-family: 'Helvetica', Helvetica, Arial, sans-serif;
	color: #8c8c8c;
}		

span#virb_customize_footer {
    color: #666666;
    padding-top: 10px;
    width:100%;
    display: block;
}



/* ---------- PAGE: COLLECTION ---------- */
	
#collection {
   position:relative;
}
   
   #page #collection #title {
       border:none;
       width:600px;
       margin:0px;
   }
   #page #collection h2 {
       font-size: 12px;
       font-weight: bold;
       padding-bottom: 5px;
   }

body.collection.horizontal div#page {
    width: auto;
}

#media ul.thumbs {
   overflow: hidden;
   padding: 0 0 30px;
   width: 980px;
}

#media ul.thumbs li {
	float: left;
    max-width: 225px;
    height:auto;
    margin: 0 20px 0 0;
    padding: 15px 0 0 0;
	opacity: 1.00;
	-moz-opacity: 1.00;
	filter:alpha(opacity=100);
}
#media ul.thumbs li:hover {
    opacity: 0.80;
    -moz-opacity: 0.80;
    filter:alpha(opacity=80);
}

	#media ul.thumbs li img {
		position: relative;
		display: block;
		padding: 0;
		border: 0;
		height: 150px;
	}
	
/*  #media ul.thumbs li.thumb_3, #media ul.thumbs li.thumb_7, #media ul.thumbs li.thumb_11, #media ul.thumbs li.thumb_15, #media ul.thumbs li.thumb_19, #media ul.thumbs li.thumb_23, #media ul.thumbs li.thumb_27, #media ul.thumbs li.thumb_31, #media ul.thumbs li.thumb_35 {
       margin:0;
    } 

    #media ul.thumbs li.thumb_4, #media ul.thumbs li.thumb_8, #media ul.thumbs li.thumb_12, #media ul.thumbs li.thumb_16, #media ul.thumbs li.thumb_20, #media ul.thumbs li.thumb_24, #media ul.thumbs li.thumb_28, #media ul.thumbs li.thumb_32, #media ul.thumbs li.thumb_36 {
       clear: both;
    } 
    
    #media ul.thumbs li.key_3, #media ul.thumbs li.key_7, #media ul.thumbs li.key_11, #media ul.thumbs li.key_15, #media ul.thumbs li.key_19, #media ul.thumbs li.key_23, #media ul.thumbs li.key_27, #media ul.thumbs li.key_31, #media ul.thumbs li.key_35 {
       margin:0;
    } 

    #media ul.thumbs li.key_4, #media ul.thumbs li.key_8, #media ul.thumbs li.key_12, #media ul.thumbs li.key_16, #media ul.thumbs li.key_20, #media ul.thumbs li.key_24, #media ul.thumbs li.key_28, #media ul.thumbs li.key_32, #media ul.thumbs li.key_36 {
       clear: both;
    } */
	
#page #collection div#description {
	width: 600px;
}
    
    #page #collection #description p {
        padding: 0 0 20px 0;
    }

#page p.slideshow_nav {
	padding: 0 0 10px 0;
	color: #c9c5c5;
	width: 100%;
	text-align: right;
}
	span.prev, 
	span.arrow.left {
		padding: 0 3px 0 0;
	}
	span.next, 
	span.arrow.right {
		padding: 0 0 0 3px;
	}
	span.count {
		padding: 0 0 0 5px;
		display: inline-block;
		width: 60px;
		text-align: center;
		color: #666666;
	}
	.slideshow_nav span {
		text-transform: lowercase;
	}
	
	.slideshow_nav span.thumbs a {
	    color: #666666;
	    margin-left:10px;
	}
	
	  .slideshow_nav span.arrow,
	  .slideshow_nav span.paren,
	  .slideshow_nav span.back {
	      display: none;
	  }
	  
	  .slideshow_nav a#backToThumbnails {font-style: italic; margin:0;}
	
	
#media #photo_meta {
   overflow: hidden;
   padding:0 0 15px;
   margin:0 0 20px;
   border-bottom: 1px solid #ffffff;
}	
	
div.entry.photo, div.entry.video {
   overflow:hidden;
   padding-bottom: 5px;
}

    body.collection.slideshow_thumbnails .slideshow_nav, 
    body.collection.slideshow_thumbnails ul.slideshow {
        display: none;
    }

div.media.photo, div.media.video  {
    background: #ffffff;
} 

	div.media.photo img {
	    border: 0;
	    padding: 0;
	    max-width: 960px;
	}
	
	   ul.slideshow div.media.photo img {
	       max-height: 640px;
	   }
	
	#page div.media.photo p, #page div.media.video p {
	    padding: 0;
	    margin:0;
	    line-height: 0;
	    text-align: center;
	}

#media .details {
    max-width: 275px;
    padding: 15px 3px 0 0;
	float:right;
}

    body.vertical #media .details {padding: 15px 3px 15px 0;}

body.slideshow_thumbnails #media ul.thumbs .details { display: none; }

#media .details h3 {
    font-weight: normal;
	font-size: 12px;
	padding: 0;
}

#media .details p {
    font-weight: normal;
    font-style: italic;
    color: #666666
	font-size: 12px;		
}

#media .details h3 {
   font-weight: bold;
}