@font-face {
    font-family: 'impactregular';
    src: url('fonts/impact-webfont.eot');
    src: url('fonts/impact-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/impact-webfont.woff') format('woff'),
         url('fonts/impact-webfont.ttf') format('truetype'),
         url('fonts/impact-webfont.svg#impactregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'topmenufont';
    src: url(fonts/topmenufont.eot);
    src: url(fonts/topmenufont.eot?#iefix) format('eot'),
         url(fonts/topmenufont.woff) format('woff'),
         url(fonts/topmenufont.ttf) format('truetype'),
         url(fonts/topmenufont.svg#topmenufont) format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'futura';
    src: url(fonts/futurabt-webfont.eot);
    src: url(fonts/futurabt-webfont.eot?#iefix) format('eot'),
         url(fonts/futurabt-webfont.woff) format('woff'),
         url(fonts/futurabt-webfont.ttf) format('truetype'),
         url(fonts/futurabt-webfont.svg#futurabt-webfont) format('svg');
    font-weight: normal;
    font-style: normal;
}


html {
    font: 16px "futura", "Tahoma", "sans-serif";
    line-height: 1.2em;
    color: #ffffff;
    height: 100%;
}

body {
    min-height: 100%;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background-color: #000;
}

h1 {
    margin: 0px 0px 20px 0px;
    font-size: 18px;
    font-weight: bold;
    color: #cccccc;
}

h2 {
    margin: 0px 0px 10px 0px;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    padding: 0px 0px 0px 25px;
    background-image: url(img/beat_h2.png);
    background-repeat: no-repeat;
    background-position: top left;
    text-transform: uppercase;
}

h3 {
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 5px 0px;
    font-size: 18px;
    font-weight: bold;
    color: #999 !important; /*beat light: #d42951;*/
    text-transform: uppercase;
    border-bottom: 1px solid #333333;
}

h4 {
    color: #ffffff;
    font-size: 40px;
    line-height: 36px;
    text-transform: uppercase;
    margin: 0px;
    padding: 0px;
    font-family: 'impactregular';
    font-weight: normal;
}

.dark_h4 {
    color: #333333;
}

.lightdark {
    color: #666666;
}

h5 {
    color: #eeeeee;
    text-transform: uppercase;
    margin: 0px;
    padding: 0px;
    font-size: 30px;
    line-height: 26px;
    font-family: 'impactregular';
    font-weight: normal;
}

h6 {
    color: #ffffff;
    font-size: 60px;
    line-height: 52px;
    text-transform: uppercase;
    margin: 0px;
    padding: 0px;
    font-family: 'impactregular';
    font-weight: normal;
}

a, a:visited {
    text-decoration: none;
    color: #0391e1;
}

a:hover, a:active {
    color: #4e4e67;
}

a.loginlink, a.loginlink:visited, a.loginlink:hover, a.loginlink:active {
    color: #ffffff;
    font-weight: bold;
    text-decoration: underline;
}

#d_container {
    margin: 0;
    padding: 0;
	background-image: url(img/black_twill.png);
}

#d_header {
    width: 100%;
    position: fixed;
    z-index: 1000;
    background-color: #ffffff;
    background-image: url(img/d_header_2.png);
    background-position: bottom left;
    background-repeat: repeat-x;
    box-shadow:         3px 3px 5px 3px #666;
    -moz-box-shadow:    3px 3px 5px 3px #666;
    -webkit-box-shadow: 3px 3px 5px 3px #666;
}

#d_login {
    width: 150px;
    visibility: hidden;
    right: 0px;
    position: absolute;
    padding: 10px;
    margin: 10px;
    background-color: #333333;
    border-radius: 5px;
    box-shadow:         1px 3px 5px 3px #333;
    -moz-box-shadow:    1px 3px 5px 3px #333;
    -webkit-box-shadow: 1px 3px 5px 3px #333;
}

#d_login_close_btn {
    position: absolute; 
    width: 16px; 
    margin: -3px 0px 0px 140px;
}

#d_logged_in {
    font-family: "topmenufont";
    font-weight: normal;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: -0.6pt;

    right: 20px;
    position: absolute;
}

#d_flag {
    height: 24px;
    margin: 20px 0px 0px 20px;
	border: none;
}

#d_logo {
    position: absolute;
    height: 54px;
    margin: 4px 0px 0px 5px;
	border: none;
}

#d_topmenu_mobile_logo {
    height: 40px;
    margin: 5px 5px 1px 10px;
}

#d_topmenu {
    margin: 0px 100px 0px 180px;
    font-family: "topmenufont";
    font-weight: normal;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: -0.6pt;
}

.topmenuentry {
    float: left;
    height: 38px;
    padding: 24px 20px 0px 20px;
    border-left: 1px solid #ffffff;
}

.topmenuentry_end {
    border-right: 1px solid #ffffff;
}

.topmenuentry_mobile {
    border: none;
    display: block;
    float: none;
    border-bottom: 1px solid #999999;
    font-size: 30px;
    padding: 40px 0px 20px 10px;
}

a.topmenulink, a.topmenulink:visited {
    color: #4e4e67;
}

a.topmenulink:hover, a.topmenulink:active {
    color: #0391e1;
}

a.topmenulinkactive, a.topmenulinkactive:visited, a.topmenulinkactive:hover, a.topmenulinkactive:active {
    color: #0391e1;
}

#d_topmenu_mobile_icon {
    position: absolute;
    width: 0px;
}

#d_topmenu_mobile {
    visibility: hidden;
    width: 200px;
    height: 100%;
    background-color: #ffffff;
    position: fixed;
    box-shadow:         3px 3px 5px 1px #666;
    -moz-box-shadow:    3px 3px 5px 1px #666;
    -webkit-box-shadow: 3px 3px 5px 1px #666;
}

.moveright {
    animation: moveright_animation 0.4s forwards;
    -webkit-animation: moveright_animation 0.4s forwards;
}

@keyframes moveright_animation {
    0%  { margin-left: 0px; }
    100% { margin-left: 200px;}
}

@-webkit-keyframes moveright_animation {
    0%  { margin-left: 0px; }
    100% { margin-left: 200px;}
}

.moveleft {
    animation: moveleft_animation 0.2s forwards;
    -webkit-animation: moveleft_animation 0.2s forwards;
}

@keyframes moveleft_animation {
    0%  { margin-left: 200px; }
    100% { margin-left: 0px;}
}

@-webkit-keyframes moveleft_animation {
    0%  { margin-left: 200px; }
    100% { margin-left: 0px;}
}

#d_content {
    padding: 62px 0px 0px 0px;
    min-height: 100%;
    height: auto;
    _height: 100%;
}

#d_content_inner {
    margin: 30px 0px 0px 0px;
}

.d_content_sidebar {
	position: absolute;
	width: 300px;
	right: 0px;
	padding: 10px 40px 0px 0px;
	background-color: #181818;
}

.d_content_section {
    padding: 10px 40px 10px 40px;
	margin-right: 340px;
}

#d_footer {
    background-color: #181818;
    margin: 60px 0px 0px 0px;
    padding: 40px 40px 0px 40px;
}

.footer_triple {
    width: 28%;
    margin: 0% 5% 3% 0%;
    float: left;
}

#d_register {
    max-width: 600px;
}

.home_page {
    min-height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'impactregular';
    font-weight: normal;
    font-size: 26px;
    line-height: 26px;
    color: #cccccc;
}

.fat {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.small {
	font-size: 0.8em;
}

.red {
    color: #ff0000;
}

.green {
    color: #00ff00;
}

.input2 {
    width: 98%;
    padding: 1%;
    font-weight: bold;
    border-radius: 5px;
    border: none;
    border-top: 1px solid #eeeeee;
    border-left: 1px solid #eeeeee;
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
}

.input2submit {
    width: 100%;
    min-height: 40px;
    border-radius: 5px;
    padding: 1%;
    border: 1px solid #bbbbbb;
    color: #333333;
}

.input2submit:hover, .input2submit:active {
    color: #0391e1;
}

.inputlogin {
    width: 95px;
    height: 15px;
    background-color: #ffffff;
    border: none;
    padding: 2px;
    font-size: 10px;
}

.inputloginsubmit {
    border: none;
    color: #666666;
    height: 19px;
}

#inputsearch {
	margin: 4px 0px 0px 0px;
	width: 150px;
	height: 24px;
	font-size: 16px;
	border: none;
}

.logintext {
    color: #ffffff;
}

.package_container {
    float: left;
    width: 22%;
    margin: 0% 2% 2% 0%;
    border: 1px dotted #333333;
    cursor: pointer;
}

.package_title {
    position: absolute; 
    width: 140px; 
    height: 30px;
    padding: 10px 5px 0px 5px;
    margin: 20px 0px 0px 0px; 
    font-size: 22px; 
    background: url(img/transparent.png);
    color: #ffffff; 
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}

.plugin_container {
    float: left; 
    width: 20%;
    height: 240px;
    margin: 0% 2% 2% 0%;
    overflow: hidden;
    cursor: pointer;
    padding: 1%;
    color: #aaaaaa;
    background-color: #191919;
    border: 1px dotted #333333;
}

.plugin_container_image {
    margin: -6% -6% 6% -6%;
    height: 140px;
    background-size: cover;
    border-bottom: 1px dotted #333333;
}

.plugin_container_os {
	margin-top: 210px;
	float: right;
}

.plugin_container_os_icon {
	width: 32px;
	height: 32px;
}

.plugin_details_image {
    float: left; 
    width: 30%; 
    margin-right: 3%;
}

.plugin_details {
    float: left; 
    width: 66%;
}

.beatbox {
    border: 1px solid #d9d9d9;
    background-color: #f6f6f6;
    padding: 10px;
    margin: 0px 0px 20px 0px;
}

.genrebox, a.genrebox, a.genrebox:visited, a.genrebox:active, a.genrebox:hover {
    background-color: #0391e1;
    color: #ffffff;
    padding: 6px 12px 5px 12px;
    margin: 0px 10px 10px 0px;
    float: left;
    text-align: center;
    font-family: "topmenufont";
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: -0.6pt;
}

a.genrebox_selected, a.genrebox_selected:visited, a.genrebox_selected:active, a.genrebox_selected:hover {
    background-color: #ffffff;
    color: #4e4e67;
}

.genrebox_nodownload {
    background-color: #cccccc;
}

.genrebox_pages {
    background-color: #cccccc;
    color: #000000;
}

.genrebox_spacer {
    padding: 6px 12px 5px 12px;
    margin: 0px 10px 10px 0px;
    float: left;
    text-align: center;
    font-family: "topmenufont";
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: -0.6pt;
}

.pages {
    margin: 20px 0px 0px 0px;
}

.pagenav_select {
}

.img {
    border: none;
    margin: 0px 20px 20px 0px;
    width: 200px;
}

.img_L {
    border: none;
    margin: 0px 20px 20px 0px;
}

.img_R {
    border: none;
    margin: 0px 20px 0px 20px;
}

.package_details_container {
    border-top: 1px solid #444444; 
    margin: 15px 0px 0px 0px;
    padding: 15px 0px 0px 0px;
}

.package_details_image {
    position: absolute;
    width: 200px;
}

.package_details_box {
    position: absolute;
    width: 200px;
    font-size: 10px;
}

.comment {
    font-style: italic;
}



/* Register form */

.form-checkboxes {
    float: none;
    clear: both;
}

.form-item {
    float: left;
    width: 100%;
}

.form-item input.error,.form-item textarea.error,.form-item select.error {
    border:2px solid red;
}

.form-item .description {
    font-size:0.85em;
}

.form-item label {
    clear: both;
    display: block;
    font-weight: bold;
}

.form-item label.option {
    display: inline;
    font-weight: normal;
}

fieldset {
  border: 1px solid #444444;
}

legend {
  font-weight: bold;
  color: #ffffff;
}



/* Startpage */

#startpage_2 {
    width: 90%; 
    height: 100%; 
    padding: 10% 0% 0% 10%; 
    /*
    background-image: url(img/startpage_back_2.jpg); 
    background-repeat: no-repeat; 
    background-position: bottom right; 
    background-size: contain;
    */
}

#startpage_2_text {
    width: 50%;
}

#startpage_3_image {
    width: 45%;
	position: absolute;
}

#startpage_3_daws {
    width: 90%;
    margin: 50px 0px 50px 0px;
}

.startpage_3_text {
    width: 40%; 
    padding: 5% 0% 0% 50%;
}

#startpage_4_image {
    width: 70%; 
    margin: 0% 0% 0% 15%;
}

#startpage_4_text {
    width: 45%; 
    padding: 5% 0% 0% 17%;
}

.absmiddle {
	vertical-align: middle;
}