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

body{

font-size:12px;
font-family:'Arial', Helvetica, sans-serif;
margin:auto;
background:#000 url(images/bg.jpg);
background-position:center top;

background-repeat:no-repeat;
}

a{
	color:#ffb129;
	text-decoration:none;
}

a:hover{
	color:#f36e21;
}

.wrap{
	width:980px;
	height:auto;
	margin:auto;
}

.content{
	width:980px;
	min-height:900px;
	padding-bottom:20px;
	float:left;
	background: rgba(0,0,0,0.8);
}

.menu{
	width:845px;
	height:auto;
	padding:10px;
	float:left;
	border-bottom:5px solid #F00;
	margin-top:30px;
	
	margin-left:67px;
	font-size:20px;
	text-align:center;
}

.home{
	width:38px;
	height:34px;
	float:left;
	background:url(images/home.png);
}

.home:hover{
	width:38px;
	height:34px;
	float:left;
	background:url(images/home1.png);
}

.user{
	width:520px;
	height:auto;
	float:left;
	margin-left:230px;
	padding:10px;
	margin-bottom:20px;
	background:#f00;
	
	font-weight:bold;
	font-size:14px;
	text-align:right;
}


.demos_tittle{
	width:980px;
	height:452px;
	float:left;
	text-align:center;
}

.demos_distortion{
	width:940px;
	height:auto;
	float:left;
	margin-left:20px;
	margin-top:20px;
	
}

.demos_profil{
	width:220px;
	height:auto;
	float:left;
	margin-left:10px;
}

.demos_profil_detail{
	width:940px;
	height:auto;
	float:left;
	margin-left:0px;
	margin-bottom:20px;
}

.foto_profil{
	width:200px;
	height:200px;
	float:left;
	margin-bottom:5px;
	margin-left:10px;
}

.foto_profil img{
	width:200px;
	height:200px;
}

.tittle_profil{
	width:190px;
	height:18px;
	padding:5px;
	overflow:hidden;
	font-size:16px;
	float:left;
	color:#ffdc00;
	text-align:center;
	margin-left:10px;
	background:#403e3c;
	margin-bottom:1px
}

.tittle_profil_detail{
	width:930px;
	height:18px;
	padding:5px;
	overflow:hidden;
	font-size:16px;
	float:left;
	color:#ffdc00;
	text-align:center;
	background:#403e3c;
	margin-bottom:1px
}

.paging{
	width:920px;
	height:auto;
	padding:10px;
	border-top:5px dashed #fff;
	float:left;
	margin-top:20px;
	text-align:center;
	font-size:18px;
	color:#ffb129;
	
}

.demos_rules{
	width:630px;
	height:auto;
	float:lruleseft;
	margin-left:190px;
	color:#fff;
	font-size:20px;
	line-height:34px;
}

.demos_rules span{
	color:#ffdc00;
}

.dicari{
	width:570px;
	height:auto;
	float:left;
	margin-left:195px;
	border-top:5px dashed #fff;
	padding:10px;
	text-transform:uppercase;
	color:#fff;
	text-align:center;
	font-weight:bold;
	font-size:28px;
	padding-top:15px;
}

.dicari span{
	color:#ffdc00;
}

.login{
	width:590px;
	height:260px;
	float:left;
	margin-left:195px;
	background:url(images/bg-login.png);
}

.box-login{
	width:430px;
	height:auto;
	float:left;
	margin:40px 0px 20px 70px;
	font-size:18px
}

.form-5 {
    /* Size and position */
    width: 430px;
    float:left;

    /* Styles */
   
}

.form-5 p {
    width: 70%;
    float: left;
    border-radius: 5px 0 0 5px;
    border: 1px solid #fff;
    border-right: none;
}

.form-5 input[type=text],
.form-5 input[type=password] {
    /* Size and position */
    width: 250px;
    height: 50px;
    padding: 0 10px;

    /* Styles */
    border: none; /* Remove the default border */
    background: #52bdea; /* Fallback */
    background: rgba(0,0,0,0.3);
    box-shadow: 
        inset 0 0 10px rgba(255,255,255,0.5);

    /* Font styles */
    font-family: 'Montserrat', sans-serif;
    text-indent: 10px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    font-size: 20px;       
}

.form-5 input[type=text],
.form-5 input[type=password]
 {
    border: 1px solid #000; /* Fallback */
    border: 1px solid rgba(0,0,0,0.7);
    border-radius: 5px;
}

.form-5 input[type=text]:hover,
.form-5 input[type=password]:hover,
.form-5 input[type=text]:focus,
.form-5 input[type=password]:focus {
    background: #322e29; /* Fallback */
    background: rgba(50,46,41,0.6);
    outline: none;
}

.form-5 input[type=text].anak{
	width: 535px;
    height: 50px;
    padding: 0 10px;
	/* Styles */
    border: none; /* Remove the default border */
    background: #e898f2; /* Fallback */
    background: rgba(235,131,247,0.3);
    box-shadow: 
        inset 0 0 10px rgba(255,255,255,0.5);

    /* Font styles */
    font-family: 'Montserrat', sans-serif;
    text-indent: 10px;
    color: #c925dc;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    font-size: 20px;  
	
	border: 1px solid #d964e7; /* Fallback */
    border: 1px solid rgba(217,100,231,0.7);
    border-radius: 5px;    
}

.form-5 input[type=text].anak:hover{
	/* Styles */
    background: #4abbe8; /* Fallback */
    background: rgba(215,102,228,0.4);
    outline: none;    
}



/* Placeholder style (from http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css) */

.form-5 input::-webkit-input-placeholder {
    color: #322e29;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
    font-family: 'Vademecum', cursive;
}

.form-5 input:-moz-placeholder {
    color: #322e29;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
    font-family: 'Vademecum', cursive;
}

.form-5 input:-ms-input-placeholder {
    color: #322e29;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
    font-family: 'Vademecum', cursive;
}

.buttons a, .buttons button{
    display:block;
    float:right;
    margin:0 0px 0 0;
    background-color:#010101;
	background: -webkit-gradient(linear, left top, left bottom, from(#282a29), to(#090909));
	background: -moz-linear-gradient(top, #282a29, #090909);
    border:1px solid #1a5189;
    font-family:Arial, "Helvetica", sans-serif;
    font-size:12px;
    line-height:0px;
    text-decoration:none;
	letter-spacing:2px;
    color:#fff;
    cursor:pointer;
	border-radius:5px;
    
}
.buttons button{
    width:auto;
	height:25px;
    
    
}
.buttons button[type]{
    
    line-height:17px; /* Safari */
}
*:first-child+html button[type]{
    padding:4px 10px 3px 7px; /* IE7 */
}


/* STANDARD */

button:hover, .buttons a:hover{
    background-color:#2b2b2b;
	background: -webkit-gradient(linear, left top, left bottom, from(#505050), to(#2b2b2b));
	background: -moz-linear-gradient(top, #505050, #2b2b2b);
	border:1px solid #181616;
    color:#f8a12c;
	
}
.buttons a:active{
    background-color:#6299c5;
    border:1px solid #6299c5;
    color:#fff;
}

.submit{
	width:111px;
	height:34px;
	float:left;
	margin-left:10px;
	background:url(images/submit.png);

}

.submit:hover{
	width:111px;
	height:34px;
	float:left;
	background:url(images/submit1.png);
}

.distortion{
	width:200px;
	height:34px;
	float:left;
	background:url(images/distortion.png);
	margin-left:30px;
}

.distortion:hover{
	width:200px;
	height:34px;
	float:left;
	background:url(images/distortion1.png);
}

.rules{
	width:111px;
	height:34px;
	float:left;
	background:url(images/rules.png);
	margin-left:20px;
}

.rules:hover{
	width:111px;
	height:34px;
	float:left;
	background:url(images/rules1.png);
}

.demos_howto{
	width:980px;
	height:auto;
	float:left;
	text-align:center;
}

.howto, .cover, .cover:hover{
	width:111px;
	height:34px;
	float:left;
	background:url(images/howto.png);
	margin-left:20px;
}

.cover, .cover:hover {
	width:167px;
	height:63px;
	background:url(images/cover1.png);
		margin-top:-15px;
}

.cover:hover {
	background:url(images/cover2.png);
}

.howto:hover {
	width:111px;
	height:34px;
	float:left;
	background:url(images/howto1.png);
}

.footer{
	width:980px;
	height:auto;
	float:left;
	background: rgba(0,0,0,0.8);
	padding-bottom:10px;
}

.haidemos{
	width:171px;
	height:67px;
	float:left;
	margin-left:280px;
	
}

.link{
	width:242px;
	height:auto;
	float:left;
}



.submitlagu input[type=text] {
    /* Size and position */
    width: 250px;
    height: 50px;
    padding: 0 10px;

    /* Styles */
    border: none; /* Remove the default border */
    background: #52bdea; /* Fallback */
    background: rgba(255,255,255,0.3);
    box-shadow: 
        inset 0 0 10px rgba(0,0,0,0.5);

    /* Font styles */
    font-family: 'Montserrat', sans-serif;
    text-indent: 10px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    font-size: 20px;       
}

.submitlagu input[type=text],

 {
    border: 1px solid #000; /* Fallback */
    border: 1px solid rgba(0,0,0,0.7);
    border-radius: 5px;
}

.submitlagu input[type=text]:hover,
.submitlagu input[type=text]:focus, {
    background: #322e29; /* Fallback */
    background: rgba(80,80,80,0.6);
    outline: none;
}

.submitlagu input[type=text].anak{
	width: 535px;
    height: 50px;
    padding: 0 10px;
	/* Styles */
    border: none; /* Remove the default border */
    background: #e898f2; /* Fallback */
    background: rgba(235,131,247,0.3);
    box-shadow: 
        inset 0 0 10px rgba(255,255,255,0.5);

    /* Font styles */
    font-family: 'Montserrat', sans-serif;
    text-indent: 10px;
    color: #c925dc;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    font-size: 20px;  
	
	border: 1px solid #d964e7; /* Fallback */
    border: 1px solid rgba(217,100,231,0.7);
    border-radius: 5px;    
}

.submitlagu input[type=text].anak:hover{
	/* Styles */
    background: #4abbe8; /* Fallback */
    background: rgba(215,102,228,0.4);
    outline: none;    
}



/* Placeholder style (from http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css) */

.submitlagu input::-webkit-input-placeholder {
    color: #ffdc00;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
    font-family: helvetica;
	font-size:13px;
}

.submitlagu input:-moz-placeholder {
    color: #ffdc00;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
    font-family: helvetica;
	font-size:13px;
}

.submitlagu input:-ms-input-placeholder {
    color: #ffdc00;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
    font-family: helvetica;
}



.button1 a, .button1 button{
    display:block;
    float:right;
	
    margin:0 0px 0 0;
    background-color:#ef1e1e;
	background: -webkit-gradient(linear, left top, left bottom, from(#ef1e1e), to(#c42a2a));
	background: -moz-linear-gradient(top, #ef1e1e, #c42a2a);
    border:1px solid #c42a2a;
    font-family:Arial, "Helvetica", sans-serif;
    font-size:12px;
    line-height:0px;
    text-decoration:none;
	letter-spacing:2px;
    color:#fff;
    cursor:pointer;
	border-radius:5px;
    margin-right:80px;
}
.button1 button{
    width:auto;
	height:35px;
    
    
}
.button1 button[type]{
    
    line-height:17px; /* Safari */
}
*:first-child+html button[type]{
    padding:4px 10px 3px 7px; /* IE7 */
}


/* STANDARD */

button:hover, .button1 a:hover{
    background-color:#b71515;
	background: -webkit-gradient(linear, left top, left bottom, from(#b71515), to(#891010));
	background: -moz-linear-gradient(top, #b71515, #891010);
	border:1px solid #891010;
    color:#fff;
	
}
.button1 a:active{
    background-color:#6299c5;
    border:1px solid #6299c5;
    color:#fff;
}

.soundcloud{
	width:940px;
	height:auto;
	float:left;
	margin-bottom:10px;
	margin-top:50px;

}

.youtube{
	width:auto;
	height:auto;
	float:left;
	margin-bottom:10px;
	margin-top:50px;
	margin-left:250px;

}

.vimeo{
	width:500px;
	height:auto;
	float:left;
	margin-bottom:10px;
	margin-top:50px;
	margin-left:230px;

}

.poster {
	border:2px solid #fff;
	-webkit-box-shadow:0 0 5px #fff;
}