.ytsub{margin-top:25px;}

/*********** MENU *************/
.cbdb-menu {float:left; padding:22px 25px 0 0;}
.cbdb-menu li {
	display: inline-block;
	list-style:none;
	margin: 0 5px;
}
.cbdb-menu li a {
	/* This generators the gradient on top of the solid color */
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, rgba(255,255,255,.5)),
		color-stop(1, rgba(0,0,0,.1))
	);
	background-image: -moz-linear-gradient(
		center top,
		rgba(255,255,255,.5) 0%,
		rgba(0,0,0,.1) 100%
	);
	color: #f4f4f4;
	font:bold 14px 'PT Sans',sans-serif;		
	padding: 5px 10px;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px; 
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
	-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
	-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);	
}
	.cbdb-menu li a:active {
		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0,rgba(255,255,255,.5)),
			color-stop(.1,rgba(255,255,255,.2)),
			color-stop(.85, rgba(0,0,0,.2)),
			color-stop(100, rgba(0,0,0,.4))
		);
		background-image: -moz-linear-gradient(
			center bottom,
			rgba(255,255,255,.5) 0%,
			rgba(255,255,255,.2) 10%,
			rgba(0,0,0,.2) 85%,
			rgba(0,0,0,.4) 100%
		);
	}

/*********** COLORS *************/
/* Create your own class for your own colors */
.red {
	background: #B80202;
	border: #B80202 1px solid
}
	.red:hover, .red:focus{
		background-color:#e30606
	}
.green {
	background: #46c431;
	border: #46c431 1px solid
}
	.green:hover,.green:focus {
		background-color:#44e329
	}
.yellow {
	background: #D9CE1C;
	border: #D9CE1C 1px solid
}
	.yellow:hover,.yellow:focus {
		background-color:#eee117
	}
.cyan {
	background: #23c6de;
	border: #23c6de 1px solid
}
	.cyan:hover,.cyan:focus {
		background-color:#18d8f4
	}
.blue {
	background: #3271d9;
	border: #3271d9 1px solid
}
	.blue:hover,.blue:focus {
		background-color:#377ef2
	}
	
/*******************************/
/* Spidoche Tube reset*/
/*******************************/

.spidochetube,
.spidochetube div,
.spidochetube li,
.spidochetube ul,
.spidochetube p,
.spidochetube a {
    padding: 0;
    margin: 0;
}


/*******************************/
/* Spidoche navigation*/
/*******************************/

#spidochetube_nav {
    margin: auto;
    padding-top: 10px;
    clear: both;
}
#spidochetube_nav a {
    display: inline-block;
    text-decoration: none;
    color: #666;
}
#spidochetube_nav a:hover {
    color: #2FB48B;
    border-color: #93CAB9
}
#spidochetube_nav a.spidochetube_next {
    float: left;
    padding: 3px 8px 3px 5px;
}
#spidochetube_nav a.spidochetube_prev {
    float: right;
    padding: 3px 5px 3px 8px;
}
#spidochetube_nav a span {
    display: inline-block;
    vertical-align: middle;
}
#spidochetube_nav a {
    background: #EFF1F5;
    border-radius: 4px;
    border: 1px solid #CFD5DD;
    box-shadow: 0 1px 1px white;
    text-shadow: 0 1px 1px white;
}


/*******************************/
/* Spidoche Tube Mininal Style */
/*******************************/

/* CONTAINER */
body {
    background-color: #F8F9FA;
}
.spidochetube {
    margin: auto;
}
.spidochetube .spidochetube_inner {
    width: 100%;
    float: left;
}

/* PLAYER */
.spidochetube #spidochetube_player {
    border-bottom: #fff solid 1px;
    background: #CFD5DD;
    padding: 20px 0;
    background: #F8F9FA;
}
#spidochetube_player #player {
    margin: 20px auto;
    width: 90%;
    display: block;
    box-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}

/* PLAYLIST */
#spidochetube_list {
    margin: auto;
    width: 96%;
}
.spidochetube #spidochetube_list li {
    float: left;
    width: 23%;
    padding: 22px 0 10px 0;
    list-style: none;
    background-color: #EFF1F5;
    margin: 6px 1%;
    border: 1px solid #CFD5DD;
    box-sizing: border-box;
    border-radius: 1px;
    margin-bottom: 15px;
}
.spidochetube #spidochetube_list li:hover {
    border-color: #5B6674;
}
.spidochetube #spidochetube_list li a {
    padding: 0 10px;
    color: #666;
    text-decoration: none;
    text-shadow: 0 1px 1px #fff;
    display: block;
}
.spidochetube #spidochetube_list li a:hover {
    color: #000000;
}
.spidochetube #spidochetube_list li img {
    width: 100%
}
.spidochetube #spidochetube_list li a span {
    width: 100%;
	height:30px;
    display: block;
	padding:10px 0 0;
}
.spidochetube #spidochetube_list li.spidochetube_current {
    background: #FD560F;
}
.spidochetube #spidochetube_list li.spidochetube_current a {
    color: #eee;
    font-weight: bold;
    text-shadow: 0 1px 1px #2A4234;
}
#spidochetube_loadmore {
    display: block;
    clear: both;
    width: 90px;
    margin: auto;
    text-align: center;
    text-decoration: none;
    font-family: Arial, Sans-serif;
    font-size: 12px;
    padding: 10px 5px;
    background-color: #EFF1F5;
    border-radius: 3px;
    color: #6A6A6A;
    border: 1px solid #CFD5DD;
}
#spidochetube_loadmore:hover {
    border-color: #5B6674;
}


/*******************************/
/* MEDIAQUERIES */
/*******************************/

@media (max-width:640px) {
    .spidochetube #spidochetube_list li {
        width: 31.33%;
    }
}/* max-width:640px */

@media (max-width:480px) {
	.ytsub{text-align:left; padding-left:10px; }
	#spidochetube_player #player {width:100%; height:206px; !important}
	.spidochetube #spidochetube_player {padding:0 0 20px 0;}
    .spidochetube #spidochetube_list li {
        width: 50%;
        padding: 10px 5px 20px;
        margin: 0;
        border: none;
        border-bottom: 1px solid #ccc;
    }
    .spidochetube #spidochetube_list li img {
        width: 145px;
        display: table-cell;
        padding: 5px 10px;
    }
    .spidochetube #spidochetube_list li a span {
        display: table-cell;
        vertical-align: middle;
        overflow: inherit;
        white-space: inherit;
        padding: 4px 2% 4px 6%;
    }
    .spidochetube #spidochetube_list li a {
        margin: 0;
        padding: 0;
        text-shadow: none;
		display:block;
		height:133px;
    }
    #spidochetube_list {
        margin-left: auto;
        margin-right: auto;
        padding: 10px 0;
        width: 100%;
    }
	.cbdb-menu {padding-right:0}
	.cbdb-menu li{margin:5px 0 0; display:inline-flex;}
	.cbdb-menu li a {font-size:11px; padding:5px;}
}