/*
* HTML5 ✰ Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*
* Detailed information about this CSS: h5bp.com/css
*
* ==|== normalize ==========================================================
*/
/* =============================================================================
HTML5 display definitions
========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/* =============================================================================
Base
========================================================================== */
/*
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Force vertical scrollbar in non-IE
* 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
*/
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; overflow-x: hidden;
max-width: 100%;}
body { margin: 0; font-size: 100%; line-height: 1.231; }
body, button, input, select, textarea { font-family: helvetica, arial,"lucida grande", verdana, "メイリオ", "ＭＳ Ｐゴシック", sans-serif; color: #222; }
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate
* Also: hot pink! (or customize the background color to match your design)
*/
::selection { text-shadow: none; background-color: highlight; color: highlighttext; }
/* =============================================================================
Links
========================================================================== */
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
/* =============================================================================
Typography
========================================================================== */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* =============================================================================
Lists
========================================================================== */
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
/* =============================================================================
Embedded content
========================================================================== */
/*
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/e
*/
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
/*
* Correct overflow not hidden in IE9
*/
svg:not(:root) { overflow: hidden; }
/* =============================================================================
Figures
========================================================================== */
figure { margin: 0; }
/* =============================================================================
Forms
========================================================================== */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }
/*
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
*/
legend { border: 0; *margin-left: -7px; padding: 0; }
/*
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
*/
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
/*
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
*/
button, input { line-height: normal; }
/*
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
* 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
*/
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
/*
* Consistent box sizing and appearance
*/
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
/*
* Remove inner padding and border in FF3/4: h5bp.com/l
*/
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
/*
* 1. Remove default vertical scrollbar in IE6/7/8/9
* 2. Allow only vertical resizing
*/
textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
/* =============================================================================
Tables
========================================================================== */
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
/* ==|== primary styles =====================================================
Author:
========================================================================== */
/* ==|== media queries ======================================================
PLACEHOLDER Media Queries for Responsive Design.
These override the primary ('mobile first') styles
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 480px) {
/* Style adjustments for viewports 480px and over go here */
}
@media only screen and (min-width: 768px) {
/* Style adjustments for viewports 768px and over go here */
}
/* ==|== non-semantic helper classes ========================================
Please define your styles before this section.
========================================================================== */
/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
/* ==|== print styles =======================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
table { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
/* reflow reset for -webkit-margin-before: 1em */
p { margin: 0; }
html {
overflow-y: auto;
background-color: transparent;
height: 100%;
}
body {
background: #fff;
font: normal 100%;
position: relative;
height: 100%;
}
body, div, img, p, button, input, select, textarea {
box-sizing: border-box;
}
.image {
display: block;
}
/* -------------- boilerplate END -------------- */
/* -------------- sidr START -------------- */
.sidr{max-height:0px;z-index:999999;width:100%;overflow:hidden;font-size:15px;background:#333;color:#fff;-webkit-box-shadow:inset -6px 0px 14px #000;-moz-box-shadow:inset -6px 0px 14px #000;box-shadow:inset -6px 0px 14px #000;transition: max-height 1s;-webkit-transition: max-height 1s;-moz-transition: max-height 1s;-o-transition: max-height 1s;}.sidr .sidr-inner{padding:0 0 15px}.sidr .sidr-inner>p{margin-left:15px;margin-right:15px}.sidr.right{left:auto;right:-260px}.sidr.left{left:-260px;right:auto}.sidr h1,.sidr h2,.sidr h3,.sidr h4,.sidr h5,.sidr h6{font-size:11px;font-weight:normal;padding:0 15px;margin:0 0 5px;color:#fff;line-height:24px;background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #1a1a1a));background-image:-webkit-linear-gradient(#4d4d4d,#1a1a1a);background-image:-moz-linear-gradient(#4d4d4d,#1a1a1a);background-image:-o-linear-gradient(#4d4d4d,#1a1a1a);background-image:linear-gradient(#4d4d4d,#1a1a1a);-webkit-box-shadow:0 5px 5px 3px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 5px 3px rgba(0,0,0,0.2);box-shadow:0 5px 5px 3px rgba(0,0,0,0.2)}.sidr p{font-size:13px;margin:0 0 12px}.sidr p a{color:rgba(255,255,255,0.9)}
.sidr>p{margin-left:15px;margin-right:15px}
.sidr ul{display:block;margin:0 0 15px;padding:0;border-top:1px solid #1a1a1a;border-bottom:1px solid #4d4d4d}
.sidr ul li{display:block;margin:0;line-height:48px;border-top:1px solid #4d4d4d;border-bottom:1px solid #1a1a1a}
.sidr ul li:hover,.sidr ul li.active,.sidr ul li.sidr-class-active{border-top:none;line-height:49px}.sidr ul li:hover>a,.sidr ul li:hover>span,.sidr ul li.active>a,.sidr ul li.active>span,.sidr ul li.sidr-class-active>a,.sidr ul li.sidr-class-active>span{-webkit-box-shadow:inset 0 0 15px 3px #222;-moz-box-shadow:inset 0 0 15px 3px #222;box-shadow:inset 0 0 15px 3px #222}.sidr ul li a,.sidr ul li span{padding:0 15px;display:block;text-decoration:none;color:#fff}.sidr ul li ul{border-bottom:none;margin:0;max-height:0px;overflow:hidden;transition: max-height 1s;-webkit-transition: max-height 1s;-moz-transition: max-height 1s;-o-transition: max-height 1s;}.sidr ul li ul li{line-height:40px;font-size:13px}.sidr ul li ul li:last-child{border-bottom:none}.sidr ul li ul li:hover,.sidr ul li ul li.active,.sidr ul li ul li.sidr-class-active{border-top:none;line-height:41px}.sidr ul li ul li:hover>a,.sidr ul li ul li:hover>span,.sidr ul li ul li.active>a,.sidr ul li ul li.active>span,.sidr ul li ul li.sidr-class-active>a,.sidr ul li ul li.sidr-class-active>span{-webkit-box-shadow:inset 0 0 15px 3px #222;-moz-box-shadow:inset 0 0 15px 3px #222;box-shadow:inset 0 0 15px 3px #222}.sidr ul li ul li a,.sidr ul li ul li span{color:rgba(255,255,255,0.8);padding-left:30px}.sidr form{margin:0 15px}.sidr label{font-size:13px}.sidr input[type="text"],.sidr input[type="password"],.sidr input[type="date"],.sidr input[type="datetime"],.sidr input[type="email"],.sidr input[type="number"],.sidr input[type="search"],.sidr input[type="tel"],.sidr input[type="time"],.sidr input[type="url"],.sidr textarea,.sidr select{width:100%;font-size:13px;padding:5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;border:none;background:rgba(0,0,0,0.1);color:rgba(255,255,255,0.6);display:block;clear:both}.sidr input[type=checkbox]{width:auto;display:inline;clear:none}.sidr input[type=button],.sidr input[type=submit]{color:#333;background:#fff}.sidr input[type=button]:hover,.sidr input[type=submit]:hover{background:rgba(255,255,255,0.9)}.sidr-open {max-height:1000px!important;}.sidr span{cursor: pointer;}
/* -------------- sidr END -------------- */
@-o-keyframes swing{ 0%{-o-transform:rotate(-2deg)} 50%{-o-transform:rotate(2deg)} 100%{-o-transform:rotate(-2deg)} }
@-moz-keyframes swing{ 0%{-moz-transform:rotate(-2deg)} 50%{-moz-transform:rotate(2deg)} 100%{-moz-transform:rotate(-2deg)} }
@-webkit-keyframes swing{ 0%{-webkit-transform:rotate(-2deg)} 50%{-webkit-transform:rotate(2deg)} 100%{-webkit-transform:rotate(-2deg)} }
@keyframes swing{ 0%{transform:rotate(-1deg)} 50%{transform:rotate(1deg)} 100%{transform:rotate(-1deg)} }
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
@-o-keyframes open{ from {height:10px;} to {height:40px; } }
@-moz-keyframes open{ from {height:10px;} to {height:40px;} }
@-webkit-keyframes open{ from {height:10px;} to {height:40px;} }
@keyframes open{ from {height:10px;} to {height:40px;} }
body {
color: #fff;
background-color: rgb(110, 84, 68);
font-family: helvetica;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
a, a:active, a:focus { outline-width: 0px; background: none; /*IE Fix*/ }
.clearLastLetter {
letter-spacing: 0px;
}
.primaryContainer {
height: auto;
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 100%;
min-width: 0px;
background-image:url("img/Bg.jpg");
background-attachment: scroll;
background-size: auto;
background-position: 0% 0%;
background-repeat: repeat repeat;
}
#Top {
float: none;
height: 327px;
margin-left: auto;
margin-top: 0px;
clear: none;
width: 100%;
min-width: 0px;
margin-right: auto;
position: relative;
top: 0px;
left: 0px;
background-image:url("img/topBg.jpg");
background-attachment: scroll;
background-size: auto;
box-shadow: rgb(0, 0, 0) 0px 5px 20px 0px;
z-index: 1;
border-bottom-color: rgba(255, 255, 255, 0.0666667);
border-bottom-width: 0px;
border-bottom-style: solid;
background-position: 0% 0%;
background-repeat: repeat repeat;
}
#topWood {
float: none;
height: 40px;
margin-left: auto;
margin-top: 0px;
clear: none;
width: 100%;
min-height: 0px;
margin-right: auto;
position: relative;
top: 0px;
left: 0px;
background-image:url("img/woodBg.jpg");
background-attachment: scroll;
background-size: auto;
display: block;
background-position: 0% 0%;
background-repeat: repeat repeat;
}
#mainTopSpace {
float: none;
height: 13px;
margin-left: auto;
margin-top: 0px;
clear: none;
width: 100%;
min-height: 0px;
margin-right: auto;
position: relative;
top: 0px;
left: 0px;
border-top-width: 1px;
border-top-color: rgba(255, 255, 255, 0.34902);
border-top-style: solid;
box-shadow: rgb(0, 0, 0) 0px -3px 25px -2px;
}
#Features {
float: none;
height: auto;
margin: 0px auto;
clear: none;
width: 100%;
min-height: 0px;
background-color: rgba(255, 255, 255, 0.117647);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-color: rgba(255, 255, 255, 0.478431);
border-top-style: solid;
border-bottom-color: rgba(255, 255, 255, 0.380392);
border-bottom-style: solid;
position: relative;
top: 0px;
left: 0px;
display: block;
padding-bottom: 0px;
}
#Menu {
float: none;
height: 78px;
margin-left: auto;
margin-top: 0px;
clear: none;
width: 990.94px;
margin-right: auto;
position: relative;
top: 0px;
left: 0px;
}
#FeaturesTitle {
float: left;
height: auto;
margin-left: 0%;
margin-top: 12px;
clear: none;
width: 100%;
background-color: rgba(0, 0, 0, 0.239216);
display: block;
padding-top: 10px;
padding-bottom: 10px;
}
#FeaturesTitle p {
float: none;
font-size: 1.9em;
width: 900px;
height: auto;
text-align: center;
font-weight: 900;
line-height: 1em;
word-wrap: break-word;
margin-left: auto;
margin-top: 0px;
clear: none;
min-height: 0px;
text-transform: uppercase;
text-shadow: rgb(0, 0, 0) -2px 2px 0px;
letter-spacing: 0.2em;
font-family: 'Russo One', sans-serif;
max-width: none;
margin-right: auto;
}
.grayText {
color: rgb(213, 213, 213);
}
#featuresLeft, #featuresRight {
float: left;
font-size: 0.8em;
width: auto;
height: auto;
text-align: left;
font-weight: normal;
line-height: 1.7em;
word-wrap: break-word;
min-height: 0px;
text-transform: uppercase;
}
#featuresRight {
margin-left: 56.022569%;
margin-top: -147px;
}
#featuresLeft {
margin-left: 1.425347%;
margin-top: -99px;
}
#Main {
float: none;
height: auto;
margin: 0px auto;
clear: none;
width: 100%;
position: relative;
top: 0px;
left: 0px;
background-image:url("img/Bg.jpg");
background-attachment: scroll;
background-size: auto;
overflow: hidden;
background-position: 0% 0%;
background-repeat: repeat repeat;
}
#topLeftWood {
float: left;
height: 327px;
clear: none;
width: 17px;
position: absolute;
background-image:url("img/topLeft.jpg");
background-attachment: scroll;
background-size: auto;
z-index: 100;
top: 0px;
left: 0px;
bottom: auto;
right: auto;
background-position: 0% 0%;
background-repeat: repeat repeat;
}
#topRightWood {
float: left;
height: 327px;
clear: none;
width: 17px;
position: absolute;
top: 0px;
left: auto;
right: 0px;
background-image:url("img/topRight.jpg");
background-attachment: scroll;
background-size: auto;
z-index: 100;
background-position: 0% 0%;
background-repeat: repeat repeat;
}
#beatCounter {
float: left;
height: 36px;
clear: none;
width: 190.046875px;
background-image:url("img/sprite.png");
position: absolute;
top: 255px;
left: 35.9324856px;
background-position: -853px -300px;
background-repeat: no-repeat;
}
#beatCounterNumber {
float: left;
font-size: 12px;
width: 25.1775313515625px;
height: auto;
text-align: center;
font-weight: normal;
line-height: 1em;
word-wrap: break-word;
margin-left: 8.205213%;
margin-top: 12px;
clear: none;
min-height: 0px;
color: rgb(211, 244, 255);
}
#countTag {
float: left;
height: 17px;
margin-left: 4.546576%;
margin-top: 9px;
clear: none;
width: 140px;
background-color: rgba(140, 200, 227, 0.239216);
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
#countTag p {
float: left;
font-size: 11px;
width: auto;
height: auto;
text-align: left;
font-weight: normal;
line-height: 1em;
word-wrap: break-word;
margin-left: 5.758929%;
margin-top: 3px;
clear: none;
min-height: 12px;
color: rgb(0, 0, 0);
text-shadow: rgba(255, 255, 255, 0.137255) -1px 1px 0px;
}
#topSwitch {
float: left;
height: 39px;
clear: none;
width: 114px;
position: absolute;
top: 255px;
left: auto;
right: 30px;
background-image:url("img/sprite.png");
background-attachment: scroll;
background-size: auto;
background-position: -853px -384px;
background-repeat: no-repeat no-repeat;
}
#featuresContent b {
float: none;
font-size: 1.4em;
line-height: 1em;
font-weight: 900;
}
#featuresContent {
float: none;
height: auto;
margin-left: auto;
margin-top: 0px;
clear: both;
width: 900px;
margin-right: auto;
padding-top: 20px;
padding-bottom: 30px;
position: relative;
top: 0px;
left: 0px;
}
#topCenter {
float: none;
height: 403px;
margin-left: auto;
margin-top: -78px;
clear: none;
width: 582px;
border-width: 0px;
border-style: solid;
margin-right: auto;
position: relative;
top: 0px;
left: 0px;
background-image:url("img/sprite.png");
background-attachment: scroll;
background-size: auto;
z-index: 3;
background-position: 0px 0px;
background-repeat: no-repeat no-repeat;
}
#Vynil {
float: left;
max-width: 100%;
clear: none;
position: absolute;
top: -114px;
left: 11.361684%;
bottom: auto;
-webkit-animation:spin 2s linear infinite;
-moz-animation:spin 2s linear infinite;
animation:spin 2s linear infinite;
background-image: url('img/sprite.png');
background-position: 0px -405px;
background-repeat: no-repeat;
width: 447px;
height: 447px;
}
#Logo {
float: left;
max-width: 100%;
clear: none;
color: rgb(0, 0, 0);
position: absolute;
top: -1px;
left: 26.844394%;
z-index: 2;
background-image: url('img/sprite.png');
background-position: -584px 0px;
background-repeat: no-repeat;
width: 449px;
height: 242px;
}
#Tag {
float: left;
width: 209px;
height: 268px;
max-width: 100%;
margin-left: 0px;
margin-top: 0px;
clear: none;
position: absolute;
top: -5px;
left: 348.91px;
z-index: 6;
bottom: auto;
-o-animation:swing 2s 0 ease-in-out infinite;
-o-transform-origin:71% 0;
-ms-animation:swing 2s 0 ease-in-out infinite;
-ms-transform-origin:71% 0;
-moz-animation:swing 2s 0 infinite ease-in-out;
-moz-transform-origin:71% 0;
-webkit-animation:swing 2s 0 ease-in-out infinite;
-webkit-transform-origin:71% 0;
animation:swing 2s infinite ease-in-out;
transform-origin:71% 0;
background-image: url('img/sprite.png');
background-position: -449px -610px;
background-repeat: no-repeat;
}
#Gift {
float: left;
width: 71px;
height: 44px;
max-width: 100%;
margin-left: 0px;
margin-top: 0px;
clear: both;
position: absolute;
top: 88px;
left: 613.97px;
bottom: auto;
background-image: url('img/sprite.png');
background-position: -853px -338px;
background-repeat: no-repeat;
}
#Hd_icon {
float: left;
max-width: 100%;
margin-left: 0px;
margin-top: 0px;
clear: none;
position: absolute;
left: 19.8px;
top: 23px;
background-repeat: no-repeat;
width: 25px;
height: 11px;
}
#Cutted_icon {
float: left;
max-width: 100%;
margin-left: 0px;
margin-top: 0px;
clear: both;
position: absolute;
top: 57px;
left: 18.91px;
background-repeat: no-repeat;
width: 25px;
height: 23px;
}
#Sfx_icon {
float: left;
width: auto;
max-width: 100%;
height: auto;
margin-left: 0px;
margin-top: 0px;
clear: both;
color: rgb(0, 0, 0);
position: absolute;
top: 105px;
left: 18.66px;
background-repeat: no-repeat;
width: 25px;
height: 14px;
}
#Video_icon {
float: left;
max-width: 100%;
margin-left: 0px;
margin-top: 0px;
clear: both;
position: absolute;
top: 140.5px;
left: 18.66px;
background-repeat: no-repeat;
width: 25px;
height: 25px;
}
#Tempo_icon {
float: left;
max-width: 100%;
margin-left: 0px;
margin-top: 0px;
clear: none;
position: absolute;
top: 14px;
left: 395.64px;
bottom: auto;
background-repeat: no-repeat;
width: 21px;
height: 25px;
}
#Versions_icon {
float: left;
max-width: 100%;
margin-left: 0px;
margin-top: 0px;
clear: none;
position: absolute;
left: 393.75px;
top: 62px;
background-repeat: no-repeat;
width: 25px;
height: 17px;
}
#Loop_icon {
float: left;
max-width: 100%;
margin-left: 0px;
margin-top: 0px;
clear: none;
position: absolute;
left: 393.67px;
top: 106px;
background-repeat: no-repeat;
width: 25px;
height: 13px;
}
#Doc_icon {
float: left;
max-width: 100%;
margin-left: 0px;
margin-top: 0px;
clear: none;
position: absolute;
left: 397.45px;
top: 141px;
background-repeat: no-repeat;
width: 21px;
height: 25px;
}
#everyBeat {
float: left;
font-size: 1.9em;
width: 330px;
height: auto;
text-align: left;
font-weight: normal;
line-height: 0.9em;
word-wrap: break-word;
clear: none;
min-height: 67px;
position: absolute;
top: -67px;
left: 9.8125px;
font-family: 'Gloria Hallelujah', cursive;
z-index: 0;
color: rgba(255, 255, 255, 0.329412);
}
#mainCenter {
float: none;
height: 100%;
margin: 0px auto;
clear: none;
width: 747px;
padding: 10px 0px 70px;
}
.beatPreviewOut {
float: left;
height: 300px;
clear: none;
width: 247px;
position: relative;
top: 0px;
left: 0px;
background-image:url("img/discCover.jpg");
background-attachment: scroll;
background-size: auto;
margin: 24px 0px 0px 0.2%;
background-position: 48px 80px;
background-repeat: no-repeat no-repeat;
}
.beatPreviewIn {
float: none;
height: 289px;
margin-left: auto;
margin-top: auto;
clear: none;
width: 245px;
position: relative;
top: 0px;
left: 0px;
margin-right: auto;
background-image:url("img/mobileSprite.png");
background-attachment: scroll;
background-size: auto;
background-position: -194px -332px;
background-repeat: no-repeat no-repeat;
}
.Number {
float: none;
font-size: 9px;
width: auto;
height: auto;
text-align: center;
font-weight: normal;
line-height: 1em;
word-wrap: break-word;
margin-left: auto;
margin-top: 179px;
clear: none;
min-height: 15px;
color: rgb(69, 69, 69);
margin-right: auto;
position: relative;
top: 0px;
left: 0px;
}
.getItNow {
float: left;
width: 176px;
max-width: 100%;
height: 76px;
margin-left: 38.171875px;
margin-top: -9px;
clear: none;
background-image: url('img/mobileSprite.png');
background-position: 0px -336px;
background-repeat: no-repeat no-repeat;
}
.beatPreviewIn:hover .getItNow {
background-position-y: -412px;
}
.beatPreviewIn:active .getItNow:active, .beatPreviewIn:hover .getItNow.activeFix {
background-position-y: -488px;
}
.getItNow a {
display: block;
width:90%;
height:54%;
margin:11px auto;
text-indent: -9999px;
}
#newsLetterTitle {
float: none;
font-size: 24px;
width: auto;
height: auto;
text-align: center;
font-weight: 900;
line-height: normal;
word-wrap: break-word;
margin: auto;
clear: both;
min-height: 0px;
letter-spacing: 27px;
color: rgba(255, 255, 255, 0.772549);
text-shadow: rgb(0, 0, 0) 0px 0px 6px;
position: relative;
padding: 50px 50px 0px;
}
#newsLetterSlogen {
float: none;
font-size: 11px;
width: auto;
height: auto;
text-align: center;
font-weight: 900;
line-height: normal;
word-wrap: break-word;
margin-left: auto;
margin-top: 12px;
clear: none;
min-height: 0px;
margin-right: auto;
letter-spacing: 5px;
color: rgba(255, 255, 255, 0.772549);
text-shadow: rgb(0, 0, 0) 0px 0px 6px;
text-transform: uppercase;
}
#newsLetterInput {
float: none;
font-size: 13px;
width: 335px;
height: 55px;
padding: 19px 24px;
text-align: center!important;
font-weight: 900;
line-height: normal;
word-wrap: break-word;
margin: 23px auto 0px;
clear: none;
min-height: 0px;
letter-spacing: 2px;
color: rgba(255, 255, 255, 0.772549);
text-shadow: rgb(0, 0, 0) 0px 0px 6px;
text-transform: uppercase;
background-image:url("img/mobileSprite.png");
background-attachment: scroll;
background-size: auto;
padding-top: 21px;
background-position: 0px -279px;
background-repeat: no-repeat no-repeat;
background-color: rgba(255, 255, 255, 0);
border: none;
outline-width: 0px;
display: block;
}
#subscribe {
float: none;
width: 200px;
margin: 10px auto 0px;
clear: none;
color: #241206;
display: block;
border-radius: 15px;
padding: 7px 0px 5px 0px;
background-color: rgba(255, 255, 255, 0.09);
box-shadow: inset -1px 1px 2px rgba(255, 255, 255, 0.56), inset 0px 0px 5px rgba(0, 0, 0, 0.6), 0px 0px 4px 1px rgba(0, 0, 0, 0.74);
border: none;
text-shadow: 1px -1px 1px rgba(255, 255, 255, 0.29);
font-weight: bold;
letter-spacing: 0.2em;
outline-width: 0!important;
}
#subscribe:hover {
background-color: rgba(255, 253, 211, 0.1);
}
#subscribe:active {
color: rgba(36,17,6,0.83);
background-color: rgba(255, 255, 255, 0.06);
box-shadow: inset -1px 1px 2px rgba(35,35,35,0.56), inset 0px 0px 6px 1px rgba(0, 0, 0, 0.7), 0px 0px 3px 0px rgba(0, 0, 0, 0.74);
text-shadow: 1px -1px 1px rgba(255, 255, 255, 0.14);
padding: 8px 0px 4px 0px;
}
#menuContainer {
float: none;
height: 78px;
margin-left: auto;
margin-top: 0px;
clear: none;
width: 100%;
margin-right: auto;
position: relative;
}
#Menu a, #link2 {
float: left;
font-size: 12px;
height: auto;
text-align: center;
font-weight: 500;
line-height: 1em;
word-wrap: break-word;
clear: none;
min-height: 0px;
position: relative;
top: 0px;
left: 0px;
color: rgb(211, 244, 255);
z-index: 50;
text-decoration: none;
cursor: pointer;
}
#Menu ul li ul {
position: absolute;
top: 20px;
left: 6px;
background: rgba(255, 255, 255, 0.11);
border-radius: 5px;
padding: 10px 16px;
border: 1px solid rgba(255, 255, 255, 0.09);
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.47);
width: 150px;
display: none;
opacity: 0;
}
#Menu ul li { height: 30px; }
#filterLink { display: block; }
#Menu ul li:hover ul, #Menu ul li:focus ul {
display: block;
opacity: 1;
}
#Menu ul li ul li a {
margin: 5px 0px 5px 0px;
text-align: left;
clear: left;
}
#Menu ul li ul li a:hover {
text-decoration: underline;
}
#link1 {
margin: 26px 0px 0px 2.19%;
}
#link2 {
margin: 26px 0px 0px 2.398297%;
}
#filterV {
margin-left: 63px;
margin-top: -9px;
}
#sidr img {
margin-left: 16px;
}
#link3 {
margin: 26px 0px 0px 59.594765%;
}
#link4 {
margin: 26px 0px 0px 2.896563%;
}
#mobileBar {
display: none;
position: relative;
width: 100%;
border-bottom: 1px solid rgba(255, 255, 255, 0.13);
display: block;
z-index: 30;
background: url("img/topBg.jpg") repeat;
box-shadow: inset 0px -3px 10px #000;
}
#topCenterMobile {
display: none;
float: none;
height: 277px;
margin-left: auto;
margin-top: 0px;
clear: none;
width: 400px;
margin-right: auto;
background-image:url("img/mobileSprite.png");
background-attachment: scroll;
background-size: auto;
background-position: 0px 0px;
background-repeat: no-repeat no-repeat;
}
#mobileMenu {
float: left;
font-size: 1.1em;
width: 69.66px;
height: auto;
text-align: left;
font-weight: normal;
line-height: 1em;
word-wrap: break-word;
margin: -11px 0px 0px 12.08px;
clear: none;
min-height: 18px;
letter-spacing: 4px;
color: rgba(255, 255, 255, 0.388235);
text-shadow: rgb(0, 0, 0) 0px 3px 3px;
text-decoration: none;
}
#mobileMenuButton {
float: none;
height: 32px;
clear: none;
width: 115px;
background-color: rgba(0, 0, 0, 0.168627);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
box-shadow: rgb(0, 0, 0) 0px 0px 7px 0px inset, rgba(255, 255, 255, 0.0784314) -1px 1px 1px 0px;
margin:12px auto;
clear: none;
background-color: rgba(0, 0, 0, 0.168627);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
z-index: 20;
width: 115px;
cursor: pointer;
}
#mobilePas1, #mobilePas2, #mobilePas3 {
float: left;
height: 5px;
margin-left: 5.421196%;
clear: both;
width: 20px;
box-shadow: rgba(0, 0, 0, 0.560784) 1px 1px 3px 0px inset;
background-color: rgba(255, 255, 255, 0.117647);
border-top-left-radius: 1px;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 1px;
}
#mobilePas1 { margin-top: 6px; } #mobilePas2, #mobilePas3 { margin-top: 2px; }
#Footer {
float: none;
height: 90px;
margin: 0px auto;
clear: none;
width: 100%;
min-height: 0px;
position: relative;
top: 0px;
left: 0px;
background-image:url("img/woodBg.jpg");
background-attachment: scroll;
background-size: auto;
overflow: hidden;
background-position: 0% 0%;
background-repeat: repeat repeat;
}
a.sm2_button {
display: block;
float: left;
width: 23px;
height: 23px;
margin-left: 111px;
margin-top: 45px;
clear: none;
color: rgb(0, 0, 0);
position:relative;
text-indent:-9999px;
overflow:hidden;
}
a.sm2_button:focus {
outline:none;
}
a.sm2_button {
background-image:url('img/mobileSprite.png');
background-repeat:no-repeat;
background-position:0px -595px;
}
a.sm2_button.sm2_playing {
background-position:-23px -595px;
}
#GezerWeb {
display: block;
margin: 21px auto 0px auto;
width: 270px;
height: auto;
text-align: center;
background: rgba(255, 255, 255, 0.03);
box-shadow: 0px 0px 13px 1px #000;
color: #fff;
padding: 17px;
text-decoration: none;
border-top: 1px solid rgba(255, 255, 255, 0.19);
}
#GezerWeb h5 { font-size: 15px; margin: 2px 0px; letter-spacing: 7px; }
.Orange { color: #F8AB23; }
#GezerWeb p { font-size: 10px; }
@media only screen and (min-width: 10px) {
#Top {
height: 225px;
background-image:url("img/topBg.jpg");
background-attachment: scroll;
background-size: auto;
background-position: 0% 100%;
background-repeat: repeat repeat;
}
#featuresRight, #featuresLeft {
letter-spacing: normal;
font-size: 0.7em;
margin-top: 2px;
clear: none;
line-height: 1.8em;
}
#featuresRight {
margin-left: 10.322096%;
}
#featuresLeft {
margin-left: 6.61859%;
}
#Tempo_icon {
clear: none;
top: 15px;
left: 381.625px;
background-image:url("img/mobileSprite.png");
background-position: -84px -566px;
}
#Versions_icon {
clear: none;
bottom: auto;
top: 60px;
left: 379.75px;
background-image:url("img/mobileSprite.png");
background-position: -43px -570px;
}
#Loop_icon {
clear: none;
bottom: auto;
top: 103px;
left: 379.65625px;
background-image:url("img/mobileSprite.png");
background-position: -120px -599px;
}
#Doc_icon {
clear: none;
bottom: auto;
top: 136px;
left: 383.4375px;
background-image:url("img/mobileSprite.png");
background-position: -158px -594px;
}
#featuresContent {
width: 749px;
}
#Features {
display: none;
}
#Hd_icon {
bottom: auto;
top: 23px;
left: 15.796875px;
background-image:url("img/mobileSprite.png");
background-position: -84px -601px;
}
#Cutted_icon {
clear: none;
bottom: auto;
top: 56px;
left: 14.90625px;
background-image:url("img/mobileSprite.png");
background-position: -154px -566px;
}
#Sfx_icon {
clear: none;
bottom: auto;
top: 102px;
left: 14.65625px;
background-image:url("img/mobileSprite.png");
background-position: -117px -573px;
}
#Video_icon {
clear: none;
bottom: auto;
top: 135.5px;
left: 14.65625px;
background-image:url("img/mobileSprite.png");
background-position: -3px -566px;
}
#FeaturesTitle p {
letter-spacing: 0em;
width: 750px;
font-size: 1.9em;
}
#Menu {
width: 792.94px;
display: none;
}
#link1 {
margin-top: 26px;
margin-left: 0.2500000309875px;
clear: none;
width: 74px;
}
#link2 {
margin-top: 26px;
margin-left: -31.21875px;
clear: none;
width: 74px;
}
#link3 {
margin-top: 26px;
margin-left: 570.953124435px;
clear: none;
width: 74px;
}
#link4 {
margin-top: 26px;
margin-left: -0.53124996673125px;
clear: none;
width: 74px;
}
#Gift {
top: 88px;
left: 571.96875px;
display: none;
}
#topSwitch {
display: none;
}
#beatCounter {
display: none;
width: 0px;
height: 0px;
}
#topCenter {
width: 582px;
height: 403px;
display: none;
}
#menuContainer {
width: 100%;
height: 78px;
display: none;
}
#topLeftWood {
width: 17px;
height: 225px;
background-image:url("img/mobileSprite.png");
background-attachment: scroll;
background-size: auto;
display: none;
background-position: -402px -102px;
background-repeat: repeat repeat;
}
#topRightWood {
width: 17px;
height: 225px;
background-image:url("img/mobileSprite.png");
background-attachment: scroll;
background-size: auto;
display: none;
background-position: -421px -102px;
background-repeat: repeat repeat;
}
#topCenterMobile {
display: block;
width: 100%;
max-width: 400px;
background-image:url("img/mobileSprite.png");
background-attachment: scroll;
background-size: auto;
background-position: 0px 0px;
background-repeat: no-repeat no-repeat;
}
#mainCenter {
width: 247px;
}
#newsLetter {
display: none;
}
}
@media only screen and (min-width: 484px) {
#mainCenter {
width: 497px;
}
#newsLetter {
display: block;
}
#topRightWood {
display: block;
}
#topLeftWood {
display: block;
}
#topCenterMobile {
width: 400px;
}
}
@media only screen and (min-width: 754px) {
#vinylSound {
display: hidden;
}
#topCenter {
display: none;
}
#menuContainer {
display: none;
}
#topLeftWood {
height: 225px;
}
#topRightWood {
height: 225px;
}
#mobileBar { display: block; }
#topCenterMobile {
display: block;
clear: none;
}
#Top {
height: 225px;
background-image:url("img/topBg.jpg");
background-attachment: scroll;
background-size: auto;
background-position: 0px 100%;
background-repeat: repeat repeat;
}
#Features {
display: block;
}
#mainCenter {
width: 747px;
}
#FeaturesTitle p {
font-size: 1.6em;
width: 750px;
}
}
@media only screen and (min-width: 821px) {
#topSwitch {
display: block;
}
#beatCounter {
display: block;
width: 190px;
height: 36px;
}
#Menu {
display: block;
}
#link1 {
width: 74px;
}
#link2 {
margin-left: -3.21875px;
margin-top: 26px;
clear: none;
width: 74px;
}
#link3 {
margin-top: 26px;
margin-left: 508.953125px;
clear: none;
width: 74px;
}
#link4 {
margin-top: -29px;
margin-left: 730.859375px;
clear: both;
}
#Gift {
display: block;
}
#topCenter {
display: block;
}
#menuContainer {
display: block;
}
#mobileBar { display: none; }
#topCenterMobile {
display: none;
}
#Top {
height: 327px;
background-image:url("img/topBg.jpg");
background-attachment: scroll;
background-size: auto;
background-position: 0px 0%;
background-repeat: repeat repeat;
}
#topLeftWood {
height: 327px;
background-position: -901px -425px;
background-image:url("img/sprite.png");
}
#topRightWood {
height: 327px;
background-position: -918px -425px;
background-image:url("img/sprite.png");
}
#Hd_icon {
background-image: url('img/sprite.png');
background-position: -853px -519px;
}
#Cutted_icon {
background-image: url('img/sprite.png');
background-position: -853px -452px;
}
#Sfx_icon {
background-image: url('img/sprite.png');
background-position: -853px -532px;
}
#Video_icon {
background-image: url('img/sprite.png');
background-position: -853px -594px;
}
#Tempo_icon {
background-image: url('img/sprite.png');
background-position: -853px -548px;
}
#Versions_icon {
background-image: url('img/sprite.png');
background-position: -853px -575px;
}
#Loop_icon {
background-image: url('img/sprite.png');
background-position: -853px -504px;
}
#Doc_icon {
background-image: url('img/sprite.png');
background-position: -853px -477px;
}
.beatPreviewIn {
background-position: -584px -300px;
background-image:url("img/sprite.png");
}
a.sm2_button {
background-image:url('img/sprite.png');
background-position:-853px -425px;
}
a.sm2_button.sm2_playing {
background-position:-876px -425px;
}
#newsLetterInput {
background-image:url('img/sprite.png');
background-position:-584px -243px;
}
.getItNow {
background-image:url('img/sprite.png');
background-position:-660px -591px;
}
.beatPreviewIn:hover .getItNow {
background-position-y: -667px;
}
.beatPreviewIn:active .getItNow:active, .beatPreviewIn:hover .getItNow.activeFix {
background-position-y: -743px;
}
}
@media only screen and (min-width: 1028px) {
#mainCenter {
width: 998px;
}
#FeaturesTitle p {
width: 986px;
letter-spacing: 0.2em;
}
#everyBeat {
top: -67px;
left: -5.1875px;
}
#featuresContent {
width: 982px;
}
#featuresRight, #featuresLeft {
font-size: 0.8em;
margin-top: 2px;
clear: none;
}
#featuresLeft {
margin-left: 5.083694%;
}
#featuresRight {
margin-left: 16.291688%;
}
#Tempo_icon {
top: 17px;
left: 507.625px;
}
#Versions_icon {
top: 69px;
left: 505.75px;
}
#Loop_icon {
top: 116px;
left: 505.65625px;
}
#Doc_icon {
top: 156px;
left: 509.4375px;
}
#Video_icon {
top: 155.5px;
left: 8.65625px;
}
#Sfx_icon {
top: 116px;
left: 8.65625px;
}
#Cutted_icon {
top: 64px;
left: 8.90625px;
}
#Hd_icon {
top: 26px;
left: 9.796875px;
}
#link3 {
height: auto;
clear: none;
width: 74px;
margin-left: 586.984375px;
margin-right: 0px;
margin-top: 26px;
float: left;
}
#link1 {
height: auto;
clear: none;
width: 74px;
float: left;
}
#link2 {
height: auto;
clear: none;
margin: 26px 0px 0px 42.71875px;
width: 74px;
float: left;
}
#menuContainer {
margin-left: auto;
margin-right: auto;
margin-top: 0px;
width: 100%;
height: 78px;
}
#topLeftWood {
width: 17px;
height: 327px;
}
#Menu {
margin-top: 0px;
clear: none;
width: 955.94px;
}
#link4 {
height: auto;
clear: none;
width: 74px;
margin-left: 25.6875px;
margin-right: 0px;
margin-top: 26px;
float: left;
}
#Top {
width: 100%;
}
#topWood {
width: 100%;
height: 40px;
}
#mainTopSpace {
width: 100%;
height: 13px;
margin-top: 0px;
clear: none;
}
#Features {
width: 100%;
clear: none;
}
#Main {
clear: none;
width: 100%;
}
#topRightWood {
width: 17px;
height: 327px;
}
#beatCounter {
width: 190.046875px;
height: 36px;
}
#topCenter {
width: 582px;
height: 403px;
}
#topSwitch {
width: 114px;
height: 39px;
}
#Gift {
clear: none;
bottom: auto;
top: 88px;
left: 624.96875px;
}
#mobileBar { display: none; }
#topCenterMobile {
margin-top: 0px;
clear: none;
display: none;
}
}
@media only screen and (min-width: 1450px) {
#mainCenter {
width: 1251px;
}
#Menu {
width: 1073.94px;
}
#FeaturesTitle p {
width: 1260px;
letter-spacing: 0.3em;
}
#everyBeat {
top: -67px;
left: -16.1875px;
letter-spacing: 6px;
}
#featuresContent {
width: 1226px;
}
#Tempo_icon {
top: 17px;
left: 618.625px;
}
#Versions_icon {
top: 69px;
left: 616.75px;
}
#Loop_icon {
top: 116px;
left: 616.65625px;
}
#Doc_icon {
top: 156px;
left: 620.4375px;
}
#featuresLeft, #featuresRight {
font-size: 0.8em;
letter-spacing: 2px;
margin-top: 2px;
clear: none;
}
#featuresLeft {
margin-left: 4.936022%;
}
#featuresRight {
margin-left: 14.917669%;
}
#Hd_icon {
top: 25px;
left: 18.796875px;
}
#Cutted_icon {
top: 63px;
left: 17.90625px;
}
#Sfx_icon {
top: 115px;
left: 17.65625px;
}
#Video_icon {
top: 156.5px;
left: 17.65625px;
}
#link3 {
margin-top: 26px;
margin-left: 682.984375px;
clear: none;
}
#link2 {
margin-top: 26px;
margin-left: 49.71875px;
clear: none;
}
#link4 {
margin-top: 26px;
margin-left: 40.6875px;
clear: none;
}
#Gift {
top: 88px;
left: 665.96875px;
}
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
#FeaturesTitle p {
font-size: 1.5em;
}
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
#FeaturesTitle p {
font-size: 1.5em;
}
}