/* ################################ */
/* ###       Project JFFM       ### */
/* ###   Sidebar SubTheme CSS   ### */
/* ###          By TDK          ### */
/* ################################ */


/* Sidebar Layout Container */

div.layout_sidebar {
 position: absolute;
 top: 180px;
 left:16px;
 height: 500px;
 width: 162px;

 background: rgba(199,199,199,1);
 background: -moz-linear-gradient(-45deg, rgba(199,199,199,1) 0%, rgba(26,26,26,0.91) 13%, rgba(102,102,102,0.84) 23%, rgba(38,38,38,0.76) 35%, rgba(71,71,71,0.69) 46%, rgba(0,0,0,0.61) 57%, rgba(59,59,59,0.56) 65%, rgba(43,43,43,0.48) 77%, rgba(84,84,84,0.37) 93%, rgba(19,19,19,0.32) 100%);
 background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(199,199,199,1)), color-stop(13%, rgba(26,26,26,0.91)), color-stop(23%, rgba(102,102,102,0.84)), color-stop(35%, rgba(38,38,38,0.76)), color-stop(46%, rgba(71,71,71,0.69)), color-stop(57%, rgba(0,0,0,0.61)), color-stop(65%, rgba(59,59,59,0.56)), color-stop(77%, rgba(43,43,43,0.48)), color-stop(93%, rgba(84,84,84,0.37)), color-stop(100%, rgba(19,19,19,0.32)));
 background: -webkit-linear-gradient(-45deg, rgba(199,199,199,1) 0%, rgba(26,26,26,0.91) 13%, rgba(102,102,102,0.84) 23%, rgba(38,38,38,0.76) 35%, rgba(71,71,71,0.69) 46%, rgba(0,0,0,0.61) 57%, rgba(59,59,59,0.56) 65%, rgba(43,43,43,0.48) 77%, rgba(84,84,84,0.37) 93%, rgba(19,19,19,0.32) 100%);
 background: -o-linear-gradient(-45deg, rgba(199,199,199,1) 0%, rgba(26,26,26,0.91) 13%, rgba(102,102,102,0.84) 23%, rgba(38,38,38,0.76) 35%, rgba(71,71,71,0.69) 46%, rgba(0,0,0,0.61) 57%, rgba(59,59,59,0.56) 65%, rgba(43,43,43,0.48) 77%, rgba(84,84,84,0.37) 93%, rgba(19,19,19,0.32) 100%);
 background: -ms-linear-gradient(-45deg, rgba(199,199,199,1) 0%, rgba(26,26,26,0.91) 13%, rgba(102,102,102,0.84) 23%, rgba(38,38,38,0.76) 35%, rgba(71,71,71,0.69) 46%, rgba(0,0,0,0.61) 57%, rgba(59,59,59,0.56) 65%, rgba(43,43,43,0.48) 77%, rgba(84,84,84,0.37) 93%, rgba(19,19,19,0.32) 100%);
 background: linear-gradient(135deg, rgba(199,199,199,1) 0%, rgba(26,26,26,0.91) 13%, rgba(102,102,102,0.84) 23%, rgba(38,38,38,0.76) 35%, rgba(71,71,71,0.69) 46%, rgba(0,0,0,0.61) 57%, rgba(59,59,59,0.56) 65%, rgba(43,43,43,0.48) 77%, rgba(84,84,84,0.37) 93%, rgba(19,19,19,0.32) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7c7c7', endColorstr='#131313', GradientType=1 );

 box-shadow: -1px 0px 8px rgba(255,0,255,1);

 -webkit-border-top-left-radius: 6px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
 -webkit-border-bottom-left-radius: 6px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
 -moz-border-radius-topleft: 6px; /* Firefox 1-3.6 */
 -moz-border-radius-bottomleft: 6px; /* Firefox 1-3.6 */
 border-top-left-radius: 6px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
 border-bottom-left-radius: 6px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
 border-left: 1px solid rgba(255,255,255,0.5);
 border-right: 1px solid rgba(255,255,255,0.3);
 border-top: 1px solid rgba(255,255,255,0.5);
 border-bottom: 1px solid rgba(255,255,255,0.3);
}




/*~~~~~~~~~~[ Light Keyboard ]~~~~~~~~~~~~*/

/* Sidebar Light Keyboard Container */

.keyboard_light {
 position:absolute;
 left:10px;
 top:12px;
 display:block;
}

/* Sidebar Light Keyboard Label */

p.lightkey_label {
 color: rgba(64,64,64,0.5);
 text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
 font-style: oblique;
 font-size:20px;
 padding:0px;
 margin:-3px 0px 0px 0px;
}

/* Light Keyboard Button Container */

.gbutton_lightkey {
 position:relative;
 top: 0px;
 left: 0px;
 height:32px;
 width:130px;

 display:block;
 cursor:pointer;
}

/* Light Keyboard Keyboard Button Content */

.gbutton_lightkey div {
 position:absolute;
 left:0;
 height:28px;
 width:150px;

 opacity: 1;
 box-shadow: -2px 2px 3px #000000;

 -webkit-transition: opacity 1s ease-in-out;
 -moz-transition: opacity 1s ease-in-out;
 -o-transition: opacity 1s ease-in-out;
 -ms-transition: opacity 1s ease-in-out;    
 transition: opacity 1s ease-in-out;
}

/* Light Keyboard Button Highlight */

 .gbutton_lightkey div.highlight {
 background-color:rgba(200,200,200,0.8);
 background: linear-gradient(270deg, rgba(215,215,215,1), rgba(162,162,162,1.0));

 color: rgba(92,92,92,1.0);
 text-shadow: 1px 1px rgba(255,255,255,0.7);
 text-align:center;

 -webkit-border-top-left-radius: 6px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
 -webkit-border-bottom-left-radius: 6px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
 -moz-border-radius-topleft: 6px; /* Firefox 1-3.6 */
 -moz-border-radius-bottomleft: 6px; /* Firefox 1-3.6 */
 border-top-left-radius: 6px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
 border-bottom-left-radius: 6px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
 border: 1px solid rgba(128,128,128,1.0);

 padding: 3px 0px 0px 0px;
 }

 /* Light Keyboard Button Normal */

.gbutton_lightkey div.normal {
 background-color:rgba(64,64,64,1.0);
 background: linear-gradient(180deg, rgba(235,235,235,1), rgba(192,192,192,1.0));

 color: rgba(200,200,200,1.0);
 text-shadow: 1px 1px rgba(0,0,0,0.7);
 text-align:center;

 -webkit-border-top-left-radius: 6px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
 -webkit-border-bottom-left-radius: 6px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
 -moz-border-radius-topleft: 6px; /* Firefox 1-3.6 */
 -moz-border-radius-bottomleft: 6px; /* Firefox 1-3.6 */
 border-top-left-radius: 6px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
 border-bottom-left-radius: 6px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
 border: 1px solid rgba(128,128,128,1.0);

 padding: 3px 0px 0px 0px;
}

.gbutton_lightkey div.normal:hover {
 opacity:0;
}

 /* Light Keyboard Button Active */

.gbutton_lightkey div.active {
 background-color:rgba(200,200,200,0.8);
 background: linear-gradient(180deg, rgba(235,235,235,1), rgba(192,192,192,1.0));

 color: rgba(92,92,92,1.0);
 text-shadow: 1px 1px rgba(255,255,255,0.7);
 text-align:center;

 -webkit-border-top-left-radius: 6px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
 -webkit-border-bottom-left-radius: 6px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
 -moz-border-radius-topleft: 6px; /* Firefox 1-3.6 */
 -moz-border-radius-bottomleft: 6px; /* Firefox 1-3.6 */
 border-top-left-radius: 6px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
 border-bottom-left-radius: 6px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
 border: 1px solid rgba(128,128,128,1.0);

 padding: 3px 0px 0px 0px;
}

.gbutton_lightkey div.active:hover {
 opacity:1;
}




/*~~~~~~~~~~[ Dark Keyboard Button ]~~~~~~~~~~~~*/

/* Sidebar Dark Keyboard Container */

.keyboard_dark {
 position:absolute;
 left: 50px;
 top:64px;
 display:block;
}

/* Sidebar Dark Keyboard Label */

p.darkkey_label {
 color: rgba(255,255,255,0.7);
 text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
 font-style: oblique;
 font-size:16px;
 padding:0px;
 margin:-3px 0px 0px 0px;
}

/* Dark Keyboard Button Container */

.gbutton_darkkey {
 position:relative;
 top: 0px;
 left: 0px;
 height:14px;
 width:110px;

 display:block;
 margin-bottom:18px;

 cursor:pointer;
}

/* Dark Keyboard Button Content */

.gbutton_darkkey div {
 position:absolute;
 left:0;
 height:18px;
 width:110px;

 opacity: 1;
 box-shadow: -2px 2px 3px #000000;

 -webkit-transition: opacity 1s ease-in-out;
 -moz-transition: opacity 1s ease-in-out;
 -o-transition: opacity 1s ease-in-out;
 -ms-transition: opacity 1s ease-in-out;    
 transition: opacity 1s ease-in-out;
}

/* Dark Keyboard Button Highlight */

 .gbutton_darkkey div.highlight {
 background-color:rgba(200,200,200,0.8);
 background: linear-gradient(90deg, rgba(155,155,155,1), rgba(64,64,64,1.0));
   
 opacity: 1;
 color: rgba(92,92,92,1.0);
 text-shadow: 1px 1px rgba(255,255,255,0.7);
 text-align:center;
 margin-left: auto;
 margin-right: auto;

 -webkit-border-top-left-radius: 6px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
 -webkit-border-bottom-left-radius: 6px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
 -moz-border-radius-topleft: 6px; /* Firefox 1-3.6 */
 -moz-border-radius-bottomleft: 6px; /* Firefox 1-3.6 */
 border-top-left-radius: 6px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
 border-bottom-left-radius: 6px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
 border: 1px solid rgba(128,128,128,1.0);

 padding: 3px 0px 0px 0px;
 }

 /* Dark Keyboard Button Normal */

.gbutton_darkkey div.normal {
 background-color:rgba(64,64,64,1.0);
 background: linear-gradient(180deg, rgba(92,92,92,1), rgba(48,48,48,1.0));

 color: rgba(200,200,200,1.0);
 text-shadow: 1px 1px rgba(0,0,0,0.7);
 text-align:center;
 margin-left: auto;
 margin-right: auto;

 -webkit-border-top-left-radius: 6px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
 -webkit-border-bottom-left-radius: 6px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
 -moz-border-radius-topleft: 6px; /* Firefox 1-3.6 */
 -moz-border-radius-bottomleft: 6px; /* Firefox 1-3.6 */
 border-top-left-radius: 6px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
 border-bottom-left-radius: 6px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
 border: 1px solid rgba(92,92,92,1.0);
 
 padding: 3px 0px 0px 0px;
}

.gbutton_darkkey div.normal:hover {
 opacity:0;
}

.gbutton_darkkey div.highlight:hover {
 opacity:1;
}

 /* Dark Keyboard Button Active */

.gbutton_darkkey div.active {
 background-color:rgba(64,64,64,0.8);
 background: linear-gradient(180deg, rgba(148,0,148,1), rgba(92,0,92,1.0));
 box-shadow: 0px 0px 12px rgba(200,0,200,0.8);

 color: rgba(200,200,200,1.0);
 text-shadow: 1px 1px rgba(0,0,0,0.7);
 text-align:center;
 margin-left: auto;
 margin-right: auto;

 -webkit-border-top-left-radius: 6px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
 -webkit-border-bottom-left-radius: 6px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
 -moz-border-radius-topleft: 6px; /* Firefox 1-3.6 */
 -moz-border-radius-bottomleft: 6px; /* Firefox 1-3.6 */
 border-top-left-radius: 6px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
 border-bottom-left-radius: 6px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
 border: 1px solid rgba(128,128,128,1.0);

 padding: 3px 0px 0px 0px;
}

.gbutton_darkkey div.active:hover {
 opacity:1;
}

 /* Dark Keyboard Button Hidden */

.gbutton_darkkey div.hidden {
 background-color:rgba(200,200,200,0.8);
 background: linear-gradient(180deg, rgba(235,235,235,1), rgba(192,192,192,1.0));

 color: rgba(92,92,92,1.0);
 text-shadow: 1px 1px rgba(255,255,255,0.7);
 text-align:center;
 margin-left: auto;
 margin-right: auto;

 opacity:0;
 cursor:default;

 -webkit-border-top-left-radius: 6px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
 -webkit-border-bottom-left-radius: 6px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
 -moz-border-radius-topleft: 6px; /* Firefox 1-3.6 */
 -moz-border-radius-bottomleft: 6px; /* Firefox 1-3.6 */
 border-top-left-radius: 6px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
 border-bottom-left-radius: 6px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
 border: 1px solid rgba(128,128,128,1.0);
}

.gbutton_darkkey div.hidden:hover {
 opacity:0;
 cursor:default;
}