html { padding: 0; margin: 0; }
body {
	padding: 10px 5px; margin: 0;
	font: 12px/16px Arial, Helvetica, sans-serif;
}
a, a:link, a:visited, a:active {
	color: #b70e0e;
	text-decoration: none;
}
a:hover {
}

.wrap {
	max-width: 95%;
	margin: 0 auto;
}
.wrap header {
	overflow: hidden;
	margin: 0 0 10px 0;
	padding: 0;
}
.wrap header h1 {
	float: left;
	font-size: 17px;
	line-height: 20px;
	font-weight: normal;
}
.wrap header h2 {
	float: right;
	font-weight: normal;
}

/* video player */
.startube .player {
	position: relative;
	background: #010101;
	padding-bottom: 56.25%;
	height: 0; overflow: hidden;
}
.startube .player iframe {
	display: block;
	margin: 0; padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* video title */
.startube .title {
	font-size: 25px;
	line-height: 20px;
}
.startube .title a,
.startube .title a:link,
.startube .title a:visited,
.startube .title a:active {
	color: #ffff00;
}
.startube .title a:hover {
	color: #b70e0e;
}
.startube .title span {
	color: #FFFF00;
}

/* video details pane */
.startube .details {
	margin-bottom: 20px;
	color: #66ccff;
}

/* categories list */



.videocategories {
	border: 0;
	background: #ff0000;
	}





.startube ul.cats {
	overflow: hidden;
	list-style: none;
	margin: 0 0 10px 0; padding: 4px 5px;
	font-size: 20px;
}
.startube ul.cats li {
	list-style: none;
	display: block; float: left;
}

/* categories list names */

.startube ul.cats a {
    
	display: block;
	padding: 2px 7px;
	color: #FFCC01;
	text-shadow: 0 0px #FF0000;
}
.startube ul.cats a:hover {
	color: #ffff00;
	
}
.startube ul.cats a.active,
.startube ul.cats a.active:hover {
	color: #ffff00;
}
.startube ul.cats {
	background: #010101;
}

.startube ul.thumbs {
	clear: both;
	overflow: hidden;
	margin: 0; padding: 0;
	width: 101%;
}
.startube ul.thumbs li {
	float: left;
	width: 49%;
	padding: 0;
	margin-right: 0.95%;
	margin-bottom: 5px;
	list-style: none;
}
.startube ul.thumbs li > a {
	padding: 1px;
	display: block;
}
.startube ul.thumbs li > a.thumb:focus {
	outline: none;
}
.startube ul.thumbs li > a.info {
	padding: 0;
	borde: 0;
	font-size: 12px; line-height: 15px;
	height: 30px;
	overflow: hidden;
	margin: 5px 0;
	clear: both;
}
.startube ul.thumbs li.selected > a {
	border: 2px solid #FFFF00;
	background: #ccc;
}
.startube ul.thumbs li > a > img {
	border: none;
	display: block;
	width: 100%; height: auto;
}

/* page pagination controls */
.startube .pager.above {
}
.startube .pager.below {
}
.startube .pager {
	float: left; clear: both;
	overflow: hidden;
	margin: 5px 0;
}
.startube .pager a,
.startube .pager span.active,
.startube .pager span.skip {
	font: 11px/13px Verdana, Arial, Helvetica, sans-serif;
	display: block;
	float: left;
	margin-right: 3px;
	padding: 3px 6px;
	margin-bottom: 5px;

	transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
}
.startube .pager span.skip {
	padding: 3px 5px;
}
.startube .pager span.active {
	cursor: pointer;
}
.startube .pager a.prev {
}
.startube .pager a.next {
}

/* previous & next video controls */
.startube .arrows {
	position: absolute; z-index: 1000;
	left: 10px; bottom: 50px;
}

.startube .arrows a {
	display: inline-block;
	margin-right: 2px;
	width: 16px; height: 20px;
	text-indent: -999999px;
	opacity: 0;
	background: #000;

	transition: opacity .5s ease-in-out;
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
}
.startube .arrows a.next { background: url(../images/next2.png) no-repeat; }
.startube .arrows a.prev { background: url(../images/prev2.png) no-repeat; }

.startube .player:hover .arrows a { opacity: 0.3; }
.startube .player:hover .arrows a:hover { opacity: 0.6; }
.startube .player:hover .arrows a:active { opacity: 1; }

/* media queries */
@media screen and (min-width: 321px) {
	body {
		padding: 10px 10px;
		font: 12px/16px Arial, Helvetica, sans-serif;
	}
	.startube ul.thumbs li {
		width: 32.35%;
	}
}
@media screen and (min-width: 481px) {
	.startube ul.thumbs li {
		width: 24%;
	}
	.startube .arrows a {
	    width: 25px; height: 35px;
    	margin-right: 5px;
	}
	.startube .arrows a.next { background: url(../images/next.png) no-repeat; }
	.startube .arrows a.prev { background: url(../images/prev.png) no-repeat; }
}
@media screen and (min-width: 600px) {
	body {
		padding: 10px 15px;
	}
}