* { outline:none; }
header, article, footer, nav, figure, figcaption { display:block; }
html, body  { margin:0 auto; padding:0; background:#1a1a1a; color:#fff; font:normal 100% "Segoe UI", helvetica, arial, sans-serif; text-align:justify; }
html, body, article { height:100%; }
body > article { height:auto; min-height:100%; margin:0 auto; }
a     { background:transparent; color:#000; text-decoration:none; }
a img { border:none; }
form { margin:0; padding:0; }
.button { margin:.3em; padding:3px 7px; border:1px solid #000; color:#444; font:bold 100% verdana, arial, sans-serif; text-align:center; cursor:pointer; background-color:#111; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; border-radius:5px; }
.button:hover { background-color:rgba(0, 0, 0, .8); }
header    { margin:0 auto; padding:0; background:transparent; 

	background-image:-webkit-linear-gradient(top, #666, #444, #222, #000);
	background-image:   -moz-linear-gradient(top, #666, #444, #222, #000);
	background-image:    -ms-linear-gradient(top, #666, #444, #222, #000);
	background-image:     -o-linear-gradient(top, #666, #444, #222, #000);
	background-image:        linear-gradient(top, #666, #444, #222, #000);

}
header h1 { float:left; width:200px; margin:0; padding:10px; color:#ccc; text-shadow:0 1px 0 #333; font:normal 15px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; }
header h1:before { 
	display:inline-block; width:16px; height:16px; margin-right:5px; content:''; 
	background-color:rgb(30, 91, 214); 
	background-image:-webkit-gradient(linear, left top, left bottom, from(rgb(30, 91, 214)), to(rgb(20, 59, 137))); 
	background-image:-webkit-linear-gradient(top, rgb(30, 91, 214), rgb(20,59,137));
	background-image:   -moz-linear-gradient(top, rgb(30, 91, 214), rgb(20,59,137));
	background-image:    -ms-linear-gradient(top, rgb(30, 91, 214), rgb(20,59,137));
	background-image:     -o-linear-gradient(top, rgb(30, 91, 214), rgb(20,59,137));
	background-image:        linear-gradient(top, rgb(30, 91, 214), rgb(20,59,137));
	-webkit-transition:all .8s ease-out;
	-moz-transition:all .8s ease-out;
	-ms-transition:all .8s ease-out;
	-o-transition:all .8s ease-out;
	transition:all .8s ease-out;
}
header:hover h1:before { 
-webkit-transform: rotate(360deg); 
   -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
     -o-transform: rotate(360deg); 
        transform: rotate(360deg);
}
header nav   { float:right; width:100px; text-align:right; margin:0; padding:0; }
header nav a { float:right; color:#fff; font-size:13px;  width:50px; height:20px; margin:0; padding:10px; }
header nav a:hover {
background:rgba(0, 0, 0, .3); 
}

.content h1 { 
	font-family:'Arvo',  "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Sans-Serif;
	-webkit-transform:rotate(-90deg); -webkit-transform-origin:0 0; 
	-moz-transform:rotate(-90deg); -moz-transform-origin:0 0; 
	-ms-transform:rotate(-90deg); -ms-transform-origin:0 0; 
	-o-transform:rotate(-90deg); -o-transform-origin:0 0; 
	transform:rotate(-90deg); transform-origin:0 0; 
}
.exclu { padding:5px 5px 20px; border:solid rgb(0, 137, 211); border-width:0 0 5px 0; background:#fff; color:#444; position:relative; }
.exclu h1 { margin:0; padding:0; color:#666; position:absolute; left:40px; top:350px; font-size:48px; }
.exclu iframe { -moz-box-shadow:0 1px 8px #1a1a1a; -webkit-box-shadow:0 1px 8px #1a1a1a; box-shadow:0 1px 8px #1a1a1a; }
.exclu figure { display:block; margin:0 auto; padding:5px; text-align:center; color:#444; }
.exclu figcaption { font:bold 28px Arvo, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial,Sans-serif; text-align:center; color:#111; }
.exclu figcaption a { display:block; width:300px; margin:.3em auto 0; border-radius:7px; background:rgba(0, 0, 0, .3); color:#666; text-shadow:0 1px 0 rgba(255, 255, 255, .5); }
.exclu figcaption a:hover { background:rgba(0, 0, 0, .3); color:#333; }

.cdlist { padding-bottom:30px; position:relative; }
.cdlist h1 { margin:0; padding:0; color:#666; position:absolute; left:40px; top:450px; -moz-transform:rotate(-90deg); -moz-transform-origin:0 0; font-size:48px; }
.cdlist img { display:block; width:150px; height:150px; padding:1px; margin:0 auto; background-color:#f5f5f5; }
.cdlist ul  { list-style:none; width:900px; margin:.3em auto; padding:0; font-size:70%; }
.cdlist li  { float:left; width:200px; height:260px; padding:.5% .5% .5% 1%; margin:.5%; border:1px solid #333; opacity:.8;
background-color:rgba(0, 0, 0, .3); 
-webkit-transition:.3s all ease-in; 
   -moz-transition:.3s all ease-in; 
    -ms-transition:.3s all ease-in; 
     -o-transition:.3s all ease-in; 
        transition:.3s all ease-in;
}
.cdlist li a      { color:#444; }
.cdlist li:hover        { border-color:#f80; background-color:rgba(255, 136, 0, .1); opacity:1; }
.cdlist ul:hover li:not(:hover) { opacity:.3;  }
.cdlist li:hover a      { color:#f5f5f5; }
.cdlist li:hover img    { background:#f5f5f5; }
.cdlist li:hover strong { color:#f80; }
.cdlist li:hover .button { color:#fff; }
.cdlist li:hover .buy, 
.cdlist li:hover .buy:hover {
border:1px solid rgb(0, 137, 211);
background:rgb(0, 137, 211); 
background-image:-webkit-gradient(linear, left top, left bottom, from(rgb(80, 175, 224)), to(rgb(0, 137, 211)));
background-image:-webkit-linear-gradient(rgb(80, 175, 224), rgb(0, 137, 211));
background-image:   -moz-linear-gradient(rgb(80, 175, 224), rgb(0, 137, 211)); 
background-image:    -ms-linear-gradient(rgb(80, 175, 224), rgb(0, 137, 211));
background-image:     -o-linear-gradient(rgb(80, 175, 224), rgb(0, 137, 211));
background-image:        linear-gradient(rgb(80, 175, 224), rgb(0, 137, 211));
box-shadow:0 2px 4px rgba(0, 0, 0, .5);
}
.cdlist li:hover .minisite , 
.cdlist li:hover .minisite:hover { 
background-image:-webkit-gradient(linear, left top, left bottom, from(#fc8fb2), to(#ef2f6c)); 
background-image:-webkit-linear-gradient(#fc8fb2, #ef2f6c); 
background-image:   -moz-linear-gradient(#fc8fb2, #ef2f6c); 
background-image:    -ms-linear-gradient(#fc8fb2, #ef2f6c); 
background-image:     -o-linear-gradient(#fc8fb2, #ef2f6c); 
background-image:        linear-gradient(#fc8fb2, #ef2f6c); 
}
.group:after { visibility:hidden; display:block; height:0; clear:both; font-size:0; content:' '; }

footer p { text-align:right; }
footer p em { position:fixed; bottom:5px; right:5px; 
margin:0 3px; padding:5px;
color:#fff; font-size:11px; border-radius:3px; font-style:normal;
background:rgb(0, 137, 211); 
background-image:-webkit-gradient(linear, left top, left bottom, from(rgb(80, 175, 224)), to(rgb(0, 137, 211)));
background-image:-webkit-linear-gradient(rgb(80, 175, 224), rgb(0, 137, 211));
background-image:   -moz-linear-gradient(rgb(80, 175, 224), rgb(0, 137, 211)); 
background-image:    -ms-linear-gradient(rgb(80, 175, 224), rgb(0, 137, 211));
background-image:     -o-linear-gradient(rgb(80, 175, 224), rgb(0, 137, 211));
background-image:        linear-gradient(rgb(80, 175, 224), rgb(0, 137, 211));
box-shadow:0 2px 4px rgba(0, 0, 0, .5);
}

.ie .content h1 {
	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=6.123233995736766e-17, M12=1, M21=-1, M22=6.123233995736766e-17, SizingMethod='auto expand')";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=6.123233995736766e-17, M12=1, M21=-1, M22=6.123233995736766e-17, SizingMethod='auto expand');
}

@media only screen and (max-width:850px) {
	figure iframe { width:373px; height:240px; }
	.cdlist ul { width:80%; min-width:440px; }
	.content h1 {
		position:static;
		text-align:center;
		-webkit-transform:none;
		-moz-transform:none;
		-ms-transform:none;
		-o-transform:none;
		transform:none;
	}
	footer p em { position:static; }
}