@charset "UTF-8";
/* CSS Document */


 @font-face {
                        font-family: 'Edition-Regular';
                        src: url('../fonts/EditionRegular.eot');
       }

 @font-face {
                        font-family: 'Edition-Regular';
                        src: url('../fonts/EditionRegular.woff') format('woff'),
                        url('../fonts/EditionRegular.svg#EditionRegular') format('svg');
       }

 @font-face {
                        font-family: 'QuicksandLight-Regular';
                        src: url('../fonts/Quicksand_Light.eot');
       }

      @font-face {
                        font-family: 'QuicksandLight-Regular';
                        src: url('..fonts/Quicksand_Light.woff') format('woff'),
                        url('../fonts/Quicksand_Light.svg#QuicksandLight-Regular') format('svg');
       }


body{
	margin-top:0px;
	margin-bottom:0px;
}
#main{
	display:block;
	position:relative;
	width:980px;
	min-height:600px;
	margin-right: auto;
	margin-left: auto;
	background-image: url('side-panel-bg.png');
	background-repeat: repeat-y;	
}


/* -----------------------------------------------------  SIDE PANEL  */
#side-panel{
	width:290px;
	min-height:400px;
	padding-top:50px;
	/* background-color: #f6f6f6; */
}

#side-panel img{
	padding-left:15px;
	padding-right:15px;
	padding-top:15px;
	padding-bottom:15px;
}

#side-panel p{
	padding-left:20px;
	padding-right:20px;
}

#side-panel div {
	color:#000;
	text-align: center;
	cursor:pointer;
	font-family: 'QuicksandLight-Regular';
	font-size: 20px;
	padding-bottom:5px;
}

#side-panel div:hover {
	color:#666;
	text-align: center;
}

.f-nav{
	font-family: 'QuicksandLight-Regular';
	font-size: 18px;
	text-align: center;
	margin-top:0px;
	margin-bottom: 0px;
}

/* ---------------------------------------------------- Video Panel */
#video-panel{
	width:680px;
	height:400px;
	position:absolute;
	top:50px;
	left:300px;

}

/* ----------------------------------------------------  Thumb Panel */

#thumb-panel{

	width:780px;
	min-height:400px;
	position:relative;
	margin-left: 200px;
	margin-top:15px;
}

.v-btn{
	display:block;
	position:relative;
	width:245px;
	height: 130px;
	float:left;
	margin-left:15px;
	margin-bottom:15px;
	cursor:pointer;
}

.clear-t{
	display:block;
	width:100px;
	height:10px;
	clear:both;
}

#thumb-panel img {
	width:245px;
	height:130px;
	overflow: hidden;

}

.grayscale{

		filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */


}

#thumb-panel img:hover{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

.color{
	filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");


}





.l-thumb{
	display:block;
	width:245px;
	height:30px;
	position:absolute;
	top:95px;
	text-align: center;
	color:#FFF;
	font-family: 'QuicksandLight-Regular';
	font-size: 25px;
}

/* social net ---------------------------------------------- */

#footer{
	display:block;
	position relative;
	width:780px;
	height:50px;
}



.footer-txt{
	display:block;
	font-family: arial;
	font-size: 10px;
	color:#6e769e;
	font-weight: 900;
	float:left;
	padding-right:10px;
	padding-top:5px;
	padding-left:70px;
}

a:link.social-btn {
	display:block;
	width:25px;
	height:24px;
	background-color: #ccc;
	float:left;
	margin-right:2px;
}