@font-face {
	font-family: PT Sans Narrow;
	src: url(../fonts/PTSansNarrow.eot);
	src: url(../fonts/PTSansNarrow.ttf);
	font-weight: normal;
    font-style: normal;
}

body,div,ul,li,p,th,td { 
	margin:0;
	padding:0;
	overflow:  hidden;
}

html,body {
	height: 100%;
	min-height: 600px;
	min-width: 900px;
}

body {
	font-family: PT Sans Narrow, Arial, sans-serif;
	background: #000;
	font-size: 14px;
	color: #FFFFFF;
	overflow-y: scroll;
	overflow-x: hidden;
	background-image: url(../images/background/b1.jpg);
	background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
}

a {
	text-decoration: none;
	font-family: PT Sans Narrow, Arial, sans-serif;
	font-size: 30px;
	color: inherit;
}

.codrops {
	width: 300px;
	height: 100%;
	margin-left: 150px;
	padding: 0 20px;
	background: url(../images/black.png);
	z-index: 2;
	position: relative;
	-moz-box-shadow: 0px 0px 4px #000;
	-webkit-box-shadow: 0px 0px 4px #000;
	box-shadow: 0px 0px 4px #000;
}
.pattern {
	content: '';
    background: transparent url(../images/pattern.png) repeat top left;
	position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
}

tr.b1 {
	height: 30%;
	text-align: center;
	width: 100%;
	vertical-align: top;
	opacity: 0.9;
}

td.b2 {
	display: block;
	background: url(../images/color_1.png);
	background-repeat: no-repeat;
	padding-left: 35px;
    text-align: left;
	vertical-align: top;
	opacity: 0.8;
}

td.b2:hover {
	background-position: 0 -55px;
	opacity: 1;
}

td.b3 {
	display: block;
	background: url(../images/color_2.png);
	background-repeat: no-repeat;
	padding-left: 35px;
    text-align: left;
	vertical-align: top;
	opacity: 0.8;
}

td.b3:hover {
	background-position: 0 -55px;
	opacity: 1;
}

td.b4 {
	display: block;
	background: url(../images/color_3.png);
	background-repeat: no-repeat;
	padding-left: 35px;
    text-align: left;
	vertical-align: top;
	opacity: 0.8;
}

td.b4:hover {
	background-position: 0 -55px;
	opacity: 1;
}

td.b5 {
	display: block;
	background: url(../images/color_4.png);
	background-repeat: no-repeat;
	padding-left: 35px;
    text-align: left;
	vertical-align: top;
	opacity: 0.8;
}

td.b5:hover {
	background-position: 0 -55px;
	opacity: 1;
}

td.b6 {
	display: block;
	background: url(../images/color_5.png);
	background-repeat: no-repeat;
	padding-left: 35px;
    text-align: left;
	vertical-align: top;
	opacity: 0.8;
}

td.b6:hover {
	background-position: 0 -55px;
	opacity: 1;
}

td.b7 {
	display: block;
	background: url(../images/color_6.png);
	background-repeat: no-repeat;
	padding-left: 35px;
    text-align: left;
	vertical-align: top;
	opacity: 0.8;;
}

td.b7:hover {
	background-position: 0 -55px;
	opacity: 1;
}

td.b8 {
	display: block;
	background: url(../images/color_7.png);
	background-repeat: no-repeat;
	padding-left: 35px;
    text-align: left;
	vertical-align: top;
	opacity: 0.8;;
}

td.b8:hover {
	background-position: 0 -55px;
	opacity: 1;
}

td.b9 {
	display: block;
	background: url(../images/color_8.png);
	background-repeat: no-repeat;
	padding-left: 35px;
    text-align: left;
	vertical-align: top;
	opacity: 0.8;
}

td.b9:hover {
	background-position: 0 -55px;
	opacity: 1;
}

td.b10 {
	display: block;
	background: url(../images/color_9.png);
	background-repeat: no-repeat;
	padding-left: 35px;
    text-align: left;
	vertical-align: top;
	opacity: 0.8;
}

td.b10:hover {
	background-position: 0 -55px;
	opacity: 1;
}

td.b11 {
	font-size: 18px;
	opacity: 0.8;
}

td.b12 {
    height: 35px;
	text-align: left;	
	opacity: 0.8;