style.css

/*
Theme Name: Vidpress
Author: Carlos Fonseca
Author URI: fonziemedia.com
Description: Custom theme.
Version: 0.01 (alpha)
*/

@import url('css/bootstrap.min.css');

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

strong {
font-weight: bold;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	font-family: sans-serif;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

h1,h2,h3,h4,h5,h6,h7,h8 {
	font-family: sans-serif;
	color: #4b4b4b;
}
section{
	margin-top: 60px;
}
h1 {
	font-size: 1.7em;
	line-height: 2em;
	margin-bottom: 0;
}
h2 {
	font-size: 1.6em;
}
h3 {
	font-size: 1.5em;	
}
h4 {
	font-size: 1.4em;
}
h5 {
	font-size: 1.3em;
}
h6 {
	font-size: 1.2em;
}
h7 {
	font-size: 1.1em;
}
h8 {
	font-size: 1.05em;
	font-weight: bold;
}


/* ======================= NAVBAR ============================== */


.navbar {
	-webkit-backface-visibility: hidden; /* stopping fixed navbar flickering */
	font-family: proxima-nova-soft, 'helvetica neue', helvetica, arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
}



.navbar-brand {
	-webkit-backface-visibility: hidden; /* stopping fixed navbar flickering */
	font-family: proxima-nova-soft, 'helvetica neue', helvetica, arial, sans-serif;
	font-size: 14px;
	font-weight: bold;
}

.navbar-brand img {
	position: relative;
	bottom: 15px;
}

.sub-btn, .sub-btn a {
	color: #fff !important;
}

.btn-geckoboard {
	background: #d16155;
	text-decoration: none ! important;
	transition: all 0.3s ease-in-out 0s;		
	-webkit-transition: all 0.3s ease-in-out 0s;		
}
.btn-geckoboard:hover {
	background: #ba0200;
	color: #fff;
}

/* ======================= SEARCH ============================== */

/* removing caret from search menu button */
.svs-search-icon a span.caret { 
	display: none;
}

#menu-item-290 {  /* this is the child element of the search glyphicon */
	padding: .5em;
}

.svs-search label {
	margin-bottom: 0;
	color: #777;
}

#searchfield {
	max-height: 28px;
	font-size: 16px;
	margin: 0 20px 0 15px;
}


 
.nav-search-div{
	white-space: nowrap;
	margin: 10px 10px 10px 10px;
}
 
 
#svs-search button {
	margin-left: 6px;
}

/* ==================== FEATURED POSTS ======================== */

.featured-container {
	margin-left: 4.5%;
}

#featured {
	padding: 0px;
}

.feat-page-links {
	position: absolute;
	width: 98%;
	bottom: 55%;
	right: 5.2%;
	margin: 0px;
	padding: 0px;
}

.glyphicon-chevron-right, .glyphicon-chevron-left {
	color: #B5BDC8;
	font-size: 40px;	
	display: inline;	
}

.glyphicon-chevron-right:hover, .glyphicon-chevron-left:hover {
	color: #28343B;
	text-decoration: none;
}

#load-icon {
	position: absolute;
	left: 43%;
	bottom: 52%;
}


/* ======================= BANNER ============================== */


.container-fluid {
	margin-top: 40px;
}

.container-fluid .row { 						/* THIS IS HOW YOU TARGET A CLASS WITH 2 NAMES!!! YA NUMPTY! THERE ARE TWO CHILD ROWS SO IT CREATES 2 GRADIENTS ONE ON TOP OF EACH OTHER */

	min-height: 200px;
	background: rgb(40,52,59); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(40,52,59,1) 0%, rgba(130,140,149,1) 64%, rgba(181,189,200,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(40,52,59,1)), color-stop(64%,rgba(130,140,149,1)), color-stop(100%,rgba(181,189,200,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(40,52,59,1) 0%,rgba(130,140,149,1) 64%,rgba(181,189,200,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(40,52,59,1) 0%,rgba(130,140,149,1) 64%,rgba(181,189,200,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(40,52,59,1) 0%,rgba(130,140,149,1) 64%,rgba(181,189,200,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(40,52,59,1) 0%,rgba(130,140,149,1) 64%,rgba(181,189,200,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28343b', endColorstr='#b5bdc8',GradientType=0 ); /* IE6-9 */
}

.title{
	display:inline;
	float: left;
	font-size: 30px;
	font-weight: bold;
	margin-top: 6% ;
}

.logo{
	display:inline;
}

.logo img {
	float: right;
}


/* ======================= VIDEO DISPLAY ============================== */

.main-section {
	margin-top: 10px;
}

/*.section-border {
margin-top: 10px;
border-right: 2px solid #C9C9C9;
}*/

#latest-container {
	height: 600px;
}

.the-post {
	float: left;
	height: 210px;
	box-sizing: border-box; /*keeps it tidy within a box? check for -web-kit and cross browser compatibility*/
	font-weight: bold;
	color: #4b4b4b;
	margin: 15px 0 15px 0;
}


.the-post.featured {
	position: relative;
	height: 250px;
	width: 30%;
	border-bottom: none;
}

.the-post.featured a {
	color: #28343B;
}

.the-post.featured a:hover {
	color: #545D69;
}

.vid-col-featured {
	width: 90%;
}

.next-posts {
	display: inline;
	position: relative;
	float: left;
}

.prev-posts {
	display: inline;
	position: relative;
	float: right;
}


.sidebar-list .vid-thumb {
	float: left;
	width: 100%;	
	border-right: none;
}

.vid-col {
	width: 92%;
}

.vid-title {
	position: relative;
	margin-bottom: 3px;
}

.content-show {
	font-size: 12px;
}

.content-hide {
	display: none;
	font-size: 12px;
}

.content-layout {
	height: 120px;
	position: relative;
	margin-bottom: 3px;
}

.content-layout.featured {
	position: relative;
	height: 185px;
}

.vid-desc {
	font-size: 12px;
	font-color: black;
}

.vid-meta-top, .vid-meta-bottom {
	position: relative;
	color: #6b6b6b;
	font-size: 11px;
	margin: 2px 0 2px 0;
}

.vid-meta-top.featured, .vid-meta-bottom.featured {
	color: #545D69;

}

.vid-meta-auth, .vid-meta-date {
	display:inline;
	font-weight: normal;
}

.vid-meta-views {
	display:inline;
	float: right;
}

.vid-meta-edit {
	display: inline;
	float: right;
}


/* ================= VIDEO DISPLAY BUTTONS ======================== */

#vids-menu {
	position: relative;
}

#vids-menu li {
	display: inline;
	height: 50px;
}

#latest-tab {
	border: 2px solid black;
}

#latest-tab a, .cat-items a {	
	color: black;
	margin: 10px 10px 10px;
	width: 100%;
}

.btn-primary.pagination {
position: relative;
width: 20%;
left: 40%;
}


/* ======================== WIDGETS ================================ */

.widget {
margin: 30px 10px 20px 10px;
}


/* ======================= SINGLE.PHP ============================== */

.top-content {
margin-top: 80px;
}

aside .x-container {
	margin-top: 100px;
	background: #E4E4E4;
	height: 250px;
}

aside li a {
	display: block;
	padding: 10px;
	color: #4b4b4b;
	text-decoration: none;
	 -webkit-transition: all .2s ease;
	  -moz-transition: all .2s ease;
	   -o-transition: all .2s ease;
	    transition: all .2s ease;
}

aside li a:hover {
	background: #eee;
}

aside li {
	border: 1px solid #eee;
	border-bottom: none;	
}

aside ul {
	border-bottom: 1px solid #eee;
}

.tags {
	margin: 2px 10px 10px 0;
}

.tags a {
	padding: 3px;
	background: #eee;
	color: #4b4b4b;
	text-decoration: none;
	font-size: .75em;
	text-decoration: uppercase;
}

/* ======================= COMMENTS ============================== */

.comment-header img {
	float: left;
	margin-right: 10px;
}

.comment-header {
	height: 50px;
}

.comment-list li.comment {
	margin-bottom: 40px;
}

.comment-list .depth-2, .depth-3 {
	margin: 20px 0 0 20px;
	border-top: 1px dotted #CCC;
	padding-top: 20px;
}

.comment-list a, #respond a{
	text-decoration: none;
	font-weight: bold;
	color: #4b4b4b;
}

.comment-list a:hover, #respond a:hover{
	text-decoration: underline;
	color: #262626;
}

.comment-list p {
	clear: both;
	margin: 10px 0;
}

.logged-in-as {
	margin: 15px 0;
}

#submit {
	background: #56C928;
	border: none;
	padding: 10px;
	color: #fff;
	cursor: pointer;
}

#respond label {
	clear: both;
	display: block;
}

/* ======================= FOOTER ============================== */

footer {
	color: #4b4b4b;
	line-height: 1.2em;
	padding-bottom: 25px;
}

footer li {
	border: 1px solid #eee;
	border-bottom: none;
}

footer ul {
	border-bottom: 1px solid #eee;
}

footer li a {
	color: #4b4b4b;
	text-decoration: none;
	display: block;
	padding: 10px;
}

footer li a:hover {
	color: #121212;
}


.credits {
font-size: 11px;
float: right;
margin: 30px 0 30px 0;
 
}


/* ======================= ACF TWEAKS ============================== */

/* for ACF form field titles */
.label {
	text-align: left;
}

/* for ACF form field li */
.inside li {
	padding-left: 20px;
}

/* for ACF form data picker */
.ui-datepicker-year, .ui-datepicker-month {
	color: black;
}


/* ======================= MEDIA QUERIES ============================== */



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

	.vid-col {
		width: 200px;
	
	}

	.featured-video p {
		display: none;
	}

	.video-thumb-content {
	margin-left: 5px;
	}
	
	h4 {
	height: 50px;
	}	
	
	.the-post {
		float: none;
		width: 100%;
		height: 100%;
		margin-bottom: 100px;
	}	
	
}



@media only screen and (max-width: 767px) {
	
	.featured-video .caption {
		width: 85%;
		opacity: .70;
	}	

	.main-nav ul ul {
		position: relative;
		top: 0;
	}
	.main-nav ul li:hover > ul {
		position: relative;
	}
	.main-nav ul ul a {
		padding: 0 20px 0 40px;
		width: auto;
		line-height: 50px;
	}
	.main-nav ul li {
		float: none;
	}
	.nav-bar { 
		height: inherit;
	} 
	.main-nav {
		display: none;
	}
	#show-nav {
		display: block;
	}

	.the-post {
		float: none;
		width: 100%;
		height: 100%;
		margin-bottom: 100px;
	}	
	
}