/*
CSS3 Piano by Taufik Nurrohman
On: 1 December 2011
URL: http://hompimpaalaihumgambreng.blogspot.com/
Note: These experiments are under the God Almighty License.
Please do not replace or remove the attribution above if you want to save/modify this project legally.
Good luck!
*/
/* start rajeev's header definitions */

/* begin list definition */
#navcontainer rul
{
margin: 0;
padding: 0;
}

#navcontainer a
{
display: block;
color: #000;
background-color: #fff;
width: 12em;
padding: .0em .8em;
text-decoration: none;
background-image: url(quaver.jpg);
background-repeat: no-repeat;
}

#navcontainer a:hover
{
background-color: #C0C0C0;
color: #FFF;
}


rli
{
margin: 0 0 .2 em 0;
background-image: url(quaver.jpg);
background-repeat: no-repeat;
background-position: 0 .1em;
padding-left: .6em;
}

/* end list definition */


p { font-family: "Trebuchet MS", "Verdana",  "Helvetica", serif; }
h1, h2, h3, h4, h5, h6 { font-family: "Trebuchet MS", sans-serif; }
h1 {
	font-family: "Tempus Sans ITC", sans-serif;
  font-size: 400%;
  font-weight: 700;
  font-variant: small-caps;
}

h2 {
  font-size: 250%;
  font-weight: 700;
  font-variant: small-caps;
}
h2 {
	counter-reset: section; /* set section to 0 */
}


h3 {
  font-size: 200%;
  font-weight: 700;
  font-variant: small-caps;
}
h4 {
  font-size: 150%;
  font-weight: 700;
  font-variant: small-caps;
}
h5 {
  font-family: "Trebuchet MS";
  font-color: black;
  font-size: 150%;
  font-weight: 900;
  font-variant: small-caps;
}

h6 {
  font-size: 100%;
  font-weight: 100;
  font-variant: small-caps;
}
/* end rajeev's header definitions */

*{margin:0px;padding:0px;list-style:none;}
:focus{outline:none !important;}

body{
background:#FFFFFF;
/*
background:-webkit-radial-gradient(bottom left, cover, #FFFFFF, #C0C0C0);
background:-moz-radial-gradient(bottom left, cover, #FFFFFF, #C0C0C0);
background:-ms-radial-gradient(bottom left, cover, #FFFFFF, #C0C0C0);
background:-o-radial-gradient(bottom left, cover, #FFFFFF, #C0C0C0);
background:radial-gradient(bottom left, cover, #FFFFFF, #C0C0C0);
height:1000px;
*/
}
a{color:indigo;text-decoration:none;}
a:hover{text-decoration:underline;}

/* Piano Wrapper */
#p-wrapper{
background:#000;
background:-webkit-linear-gradient(-60deg, #000, #333, #000, #666, #333 70%);
background:-moz-linear-gradient(-60deg, #000, #333, #000, #666, #333 70%);
background:-ms-linear-gradient(-60deg, #000, #333, #000, #666, #333 70%);
background:-o-linear-gradient(-60deg, #000, #333, #000, #666, #333 70%);
background:linear-gradient(-60deg, #000, #333, #000, #666, #333 70%);
/* change width
width:1300px;
*/
width:725px;
/* position:relative; */
/* change left position */
/* left:-20px; */ 
/* left:210px; */
-webkit-box-shadow:0 2px 0px #666, 0 3px 0px #555, 0 4px 0px #444, 0 6px 6px #000, inset 0 -1px 1px rgba(255,255,255,0.5), inset 0 -4px 5px #000;
-moz-box-shadow:0 2px 0px #666, 0 3px 0px #555, 0 4px 0px #444, 0 6px 6px #000, inset 0 -1px 1px rgba(255,255,255,0.5), inset 0 -4px 5px #000;
-ms-box-shadow:0 2px 0px #666, 0 3px 0px #555, 0 4px 0px #444, 0 6px 6px #000, inset 0 -1px 1px rgba(255,255,255,0.5), inset 0 -4px 5px #000;
box-shadow:0 2px 0px #666, 0 3px 0px #555, 0 4px 0px #444, 0 6px 6px #000, inset 0 -1px 1px rgba(255,255,255,0.5), inset 0 -4px 5px #000;
border:2px solid #333;
-webkit-border-radius:0 0 5px 5px;
-moz-border-radius:0 0 5px 5px;
-ms-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px;
-webkit-animation:taufik 2s;
-moz-animation:taufik 2s;
-ms-animation:taufik 2s;
animation:taufik 2s;
}

/* Tuts */
ul#piano{
display:block;
width:100%;
height:240px;
border-top:2px solid #222;
}
ul#piano li{
list-style:none;
float:left;
display:inline;
background:#aaa;
width:40px;
position:relative;
}

ul#piano li a,ul#piano li div.anchor{
display:block;
height:220px;
background:#fff;
background:-webkit-linear-gradient(-30deg, #f5f5f5, #fff);
background:-moz-linear-gradient(-30deg, #f5f5f5, #fff);
background:-ms-linear-gradient(-30deg, #f5f5f5, #fff);
background:-o-linear-gradient(-30deg, #f5f5f5, #fff);
background:linear-gradient(-30deg, #f5f5f5, #fff);
border:1px solid #ccc;
-webkit-box-shadow:inset 0 1px 0px #fff, inset 0 -1px 0px #fff, inset 1px 0px 0px #fff, inset -1px 0px 0px #fff, 0 4px 3px rgba(0,0,0,0.7);
-moz-box-shadow:inset 0 1px 0px #fff, inset 0 -1px 0px #fff, inset 1px 0px 0px #fff, inset -1px 0px 0px #fff, 0 4px 3px rgba(0,0,0,0.7);
-ms-box-shadow:inset 0 1px 0px #fff, inset 0 -1px 0px #fff, inset 1px 0px 0px #fff, inset -1px 0px 0px #fff, 0 4px 3px rgba(0,0,0,0.7);
box-shadow:inset 0 1px 0px #fff, inset 0 -1px 0px #fff, inset 1px 0px 0px #fff, inset -1px 0px 0px #fff, 0 4px 3px rgba(0,0,0,0.7);
-webkit-border-radius:0 0 3px 3px;
-moz-border-radius:0 0 3px 3px;
-ms-border-radius:0 0 3px 3px;
border-radius:0 0 3px 3px;
}
ul#piano li a:active,ul#piano li div.anchor:active{
-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);
box-shadow:0 2px 2px rgba(0,0,0,0.4);
position:relative;
top:2px;
height:216px;
}
ul#piano li a:active:before,ul#piano li div.anchor:active:before{
content:"";
width:0px;
height:0px;
border-width:216px 5px 0px;
border-style:solid;
border-color:transparent transparent transparent rgba(0,0,0,0.1);
position:absolute;
left:0px;
top:0px;
}
ul#piano li a:active:after,ul#piano li div.anchor:active:after{
content:"";
width:0px;
height:0px;
border-width:216px 5px 0px;
border-style:solid;
border-color:transparent rgba(0,0,0,0.1) transparent transparent;
position:absolute;
right:0px;
top:0px;
}

/* Black Tuts */
ul#piano li span{
position:absolute;
top:0px;
left:-12px;
width:20px;
height:120px;
background:#333;
background:-webkit-linear-gradient(-20deg, #333, #000, #333);
background:-moz-linear-gradient(-20deg, #333, #000, #333);
background:-ms-linear-gradient(-20deg, #333, #000, #333);
background:-o-linear-gradient(-20deg, #333, #000, #333);
background:linear-gradient(-20deg, #333, #000, #333);
z-index:10;
border-width:1px 2px 7px;
border-style:solid;
border-color:#666 #222 #111 #555;
-webkit-box-shadow:inset 0px -1px 2px rgba(255,255,255,0.4), 0 2px 3px rgba(0,0,0,0.4);
-moz-box-shadow:inset 0px -1px 2px rgba(255,255,255,0.4), 0 2px 3px rgba(0,0,0,0.4);
-ms-box-shadow:inset 0px -1px 2px rgba(255,255,255,0.4), 0 2px 3px rgba(0,0,0,0.4);
box-shadow:inset 0px -1px 2px rgba(255,255,255,0.4), 0 2px 3px rgba(0,0,0,0.4);
-webkit-border-radius:0 0 2px 2px;
-moz-border-radius:0 0 2px 2px;
-ms-border-radius:0 0 2px 2px;
border-radius:0 0 2px 2px;
}
ul#piano li span:active{
border-bottom-width:2px;
height:123px;
-webkit-box-shadow:inset 0px -1px 1px rgba(255,255,255,0.4), 0 1px 0px rgba(0,0,0,0.8), 0 2px 2px rgba(0,0,0,0.4), 0 -1px 0px #000;
-moz-box-shadow:inset 0px -1px 1px rgba(255,255,255,0.4), 0 1px 0px rgba(0,0,0,0.8), 0 2px 2px rgba(0,0,0,0.4), 0 -1px 0px #000;
box-shadow:inset 0px -1px 1px rgba(255,255,255,0.4), 0 1px 0px rgba(0,0,0,0.8), 0 2px 2px rgba(0,0,0,0.4), 0 -1px 0px #000;
}

/* Tooltips */
ul#piano li b{
position:absolute;
top:0px;
margin-top:-10px;
background:#111;
color:#fff;
font:bold 14px 'Trebuchet MS',Arial,Sans-Serif;
border:2px solid #e6e6e6;
-webkit-border-radius:7px;
-moz-border-radius:7px;
-ms-border-radius:7px;
border-radius:7px;
width:100px;
height:30px;
padding:10px;
left:-40px;
z-index:100;
visibility:hidden;
opacity:0;
-webkit-box-shadow:0 2px 10px rgba(0,0,0,0.5);
-moz-box-shadow:0 2px 10px rgba(0,0,0,0.5);
-ms-box-shadow:0 2px 10px rgba(0,0,0,0.5);
box-shadow:0 2px 10px rgba(0,0,0,0.5);
-webkit-transition:all 0.2s ease-out;
-moz-transition:all 0.2s ease-out;
-ms-transition:all 0.2s ease-out;
-ms-transition:all 0.2s ease-out;
-o-transition:all 0.2s ease-out;
-transition:all 0.2s ease-out;
}

/* Tooltip Arrow */
ul#piano li b:before{
content:"";
display:block;
position:absolute;
top:100%;
left:50px;
border-width:8px;
border-style:solid;
border-color:#e6e6e6 transparent transparent transparent;
}
ul#piano li b:after{
content:"";
display:block;
position:absolute;
top:100%;
left:53px;
border-width:5px;
border-style:solid;
border-color:#111 transparent transparent transparent;
}

ul#piano li:hover b{
visibility:visible;
opacity:1;
margin-top:10px;
}

/* Drop Down Menus */
ul#piano li ul, #search, #contact{
position:absolute;
border:2px solid #e6e6e6;
margin-top:-100px;
top:100%;
left:0px;
z-index:1000;
visibility:hidden;
opacity:0;
-webkit-box-shadow:0 2px 7px #000;
-moz-box-shadow:0 2px 7px #000;
box-shadow:0 2px 7px #000;
-webkit-transition:all 0.2s ease-out 0.2s;
-moz-transition:all 0.2s ease-out 0.2s;
-ms-transition:all 0.2s ease-out 0.2s;
-o-transition:all 0.2s ease-out 0.2s;
transition:all 0.2s ease-out 0.2s;
}
#search, #contact{
background:#333;
padding:40px 10px 8px;
-webkit-border-radius:0 0 18px 0;
-moz-border-radius:0 0 18px 0;
-ms-border-radius:0 0 18px 0;
border-radius:0 0 18px 0;
}
#search input[type="text"], #contact input[type="text"]{
border:1px solid #aaa;
font:normal 12px Cambria,Georgia,Serif;
padding:2px 5px 2px;
width:120px;
margin-bottom:2px;
margin-right:2px;
position:relative;
color:#aaa;
-webkit-box-shadow:inset 0 0 5px #ccc;
-moz-box-shadow:inset 0 0 5px #ccc;
-ms-box-shadow:inset 0 0 5px #ccc;
box-shadow:inset 0 0 5px #ccc;
-webkit-border-radius:0 0 10px 0;
-moz-border-radius:0 0 10px 0;
-ms-border-radius:0 0 10px 0;
border-radius:0 0 10px 0;
}
#contact textarea{
border:1px solid #aaa;
font:normal 12px Cambria,Georgia,Serif;
padding:2px 5px;
width:270px;
height:100px;
margin-top:4px;
position:relative;
color:#aaa;
-webkit-box-shadow:inset 0 0 5px #ccc;
-moz-box-shadow:inset 0 0 5px #ccc;
-ms-box-shadow:inset 0 0 5px #ccc;
box-shadow:inset 0 0 5px #ccc;
-webkit-border-radius:0 0 10px 0;
-moz-border-radius:0 0 10px 0;
-ms-border-radius:0 0 10px 0;
border-radius:0 0 10px 0;
}
#contact input[type="submit"]{
background:-webkit-linear-gradient(top, #666,#000, #333);
background:-moz-linear-gradient(top, #666,#000, #333);
background:-ms-linear-gradient(top, #666,#000, #333);
background:-o-linear-gradient(top, #666,#000, #333);
background:linear-gradient(top, #666,#000, #333);
border:none;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-ms-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:0 1px 1px #000;
-moz-box-shadow:0 1px 1px #000;
-ms-box-shadow:0 1px 1px #000;
box-shadow:0 1px 1px #000;
padding:3px 10px 4px;
margin:4px 2px;
font:normal 10px Verdana,Arial,Sans-Serif;
color:#ccc;
float:right;
}
#search input:focus, #contct input:focus, #contact textarea:focus{color:#000;}

/* Loupe */
#search:after{
content:"";
width:5px;
height:5px;
border:1px solid #666;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
border-radius:10px;
position:absolute;
left:100%;
margin-left:-25px;
top:46px;
z-index:100;
}
#search:before{
content:"";
width:2px;
height:0px;
border:1px solid #666;
position:absolute;
z-index:3;
left:100%;
margin-left:-28px;
top:53px;
-webkit-transform:rotate(-42deg);
-moz-transform:rotate(-42deg);
-ms-transform:rotate(-42deg);
-o-transform:rotate(-42deg);
transform:rotate(-42deg);
}

ul#piano li li{
width:150px;
height:auto;
display:block;
float:none;
background:transparent;
}
ul#piano li li a, ul#piano li li a:active{
height:auto;
display:block;
padding:10px 15px;
background:#333;
font:normal 12px Arial,Sans-Serif;
color:#fff;
text-decoration:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
-ms-box-shadow:none;
box-shadow:none;
border-radius:0px;
-webkit-border-radius:0px;
-moz-border-radius:0px;
-ms-border-radius:0px;
border-width:1px 0;
border-style:solid;
border-color:#444 transparent #222 transparent;
top:0px;
margin-top:0px;
}
ul#piano li li a:active:before, ul#piano li li a:active:after{border:none !important;}
ul#piano li:hover ul, ul#piano li:hover #search, ul#piano li:hover #contact{
visibility:visible;
opacity:1;
margin-top:15px;
}
ul#piano li li a:hover{
background:#111;
border-top-color:#222;
border-bottom-color:#000;
}

.clear{clear:both;}

/* Animation */
@-webkit-keyframes taufik{
from{opacity:0;}
to{opacity:1;}
}
@-moz-keyframes taufik{
from{opacity:0;}
to{opacity:1;}
}
@-ms-keyframes taufik{
from{opacity:0;}
to{opacity:1;}
}
@keyframes taufik{
from{opacity:0;}
to{opacity:1;}
}