/*
Theme Name:     Ruby's Theme
Theme URI:      http://rubykatilius.com
Description:    Ruby's Theme
Author:         Trevor Mills
Author URI:     http://topquark.com
Template:       twentytwelve
Version:        0.1.0
*/

@import url("../twentytwelve/style.css");

html,body{
	height:100%;
}
h1.site-title{
	background:white;
}
a{
	text-decoration:none;
}
body{
	color:#666;
}
h1.site-title a,
h2.site-description,
footer[role="contentinfo"],
footer[role="contentinfo"] a{
	color:#010000;
}
#page{
	margin-left:140px;
	height:100%;
	padding:0;
}
.site-header{
	padding:0;
	height:25%;
	min-height:100px;
	position:relative;
}
#main{
	height:50%;
	min-height:300px;
	position:relative;
}

footer[role="contentinfo"]{
	border:none;
	max-width:none;
	padding:0;
	padding-bottom:60px;
	width:100%;
	background:white;
	font-size:18px;
	line-height:1em;
	letter-spacing:0.21em;
}

h1.site-title{
	font-size:48px;
	letter-spacing:0.42em;
	text-transform:uppercase;
	line-height: 1em;
	color:#010000;
	position:absolute;
	bottom:0.7em;
}

h2.site-description{
	line-height: 1em;
	font-size:20px;
	letter-spacing:0.21em;
	font-style:italic;
	position:absolute;
	bottom:0;
}

body.home h1.entry-title{
	display:none;
}
body.home #page{
	overflow:visible;
}

.video-wrapper{
	display:inline-block;
    position:relative;
	width:266px;
    height:158px;
	margin:0 10px 2em 0;
	vertical-align:top;
    overflow:hidden;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent; /* For some Androids */
}
.video-wrapper .description{
    width:266px;
    height:158px;
    background:white;
    display:block;
    white-space:pre-wrap;
}
.video-wrapper-inner{
    position:absolute;
    top:-158px;
}
.video-wrapper img{
	border:1px solid transparent;
	border-radius: none;
	box-shadow: none;
}
.video-wrapper.hover img{
	border:1px solid black;
}
.entry-content iframe{
	margin-bottom:0;
}
#video-page-wrapper{
	position:fixed;
	top:0;
	left:0;
	background:black;
	width:100%;
	height:100%;
	z-index:1000;
}
.template-front-page .site-content,
.template-front-page article {
		overflow: visible;
}
footer.entry-meta{
	display:none;
}
.list-previous, .list-next{
    position:absolute;
	width:38px;
	height:37px;
	top:50px;
	text-indent:-1000px;
	overflow:hidden;
	background:url(images/list-nav.png) 0 0 no-repeat;
	cursor:pointer;
}
.list-previous{
	right:-6px;
    top:86px;
}
.list-next{
	right:0;
	background-position: -38px 0;
}

#ruby-main{
    padding-right:40px;
    position:relative;
}
.spacer{
	display:none;
}
@media screen and (max-height: 600px) {
	footer[role="contentinfo"]{
		position:static;
		padding-left:0;
	}
	
}
@media screen and (max-width: 1010px) {
	#page{
		margin-left:40px;
	}
	footer[role="contentinfo"]{
		padding-left:40px;
	}
    #ruby-main{
        padding-right:0;
    }
}
@media screen and (max-width: 650px) {
	#main{
		height:auto;
		padding-bottom:7em;
	}
	.site-header{
		height:auto;
	}
	footer[role="contentinfo"]{
		padding-left:0;
		height:60px;
	}
	footer[role="contentinfo"] .site-info{
		width:auto;
		text-align:center;
	}
	#ruby-main{
		text-align:center;
        padding-right:0;
	}
	.video-wrapper{
		margin:0 0 2em 0;
		display:block;
		margin:auto;
	}
	.video-wrapper .description{
		text-align:left;
	}

	h1.site-title{
		margin-top:0;
		text-align:center;
		width:100%;
		position:static;
		width:300px;
		margin:auto;
		padding-left:0.3em;
	}
	.spacer{
		display:inline;
	}
	
	h2.site-description{
		text-align:center;
		width:100%;
		position:static;
	}
	#page{
		margin-left:0;
		padding:0 !important;
	}
	#ruby-main{
		margin:auto;
        width:2
        max-width:265px;
	}
	#video-page-wrapper{
		padding-left:0 !important;
	}
	
	.list-previous, .list-next{
		width:20px;
		height:20px;
		background-size:40px auto;
	}
	.list-next{
		margin-left:134px;
		background-position: -20px 0;
	}
	.list-previous{
		margin-left:-154px;
	}
}
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter:alpha(opacity=80);
    -moz-opacity:0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    z-index: 10000;
}
#video_grid_embed{
    position:absolute;
    background-color: #000;
    z-index: 10001;
}