.fix{background-image:url(../image/WebP-Backgrounds.jpg);  background-repeat:repeat; background-attachment: fixed; margin:auto;}

.fixed{background-image:url(../image/001.jpg);  background-repeat:no-repeat; background-attachment: fixed; margin:auto;}

.image{
background-image:url(../image/zzz.png);
color:#000;
border:2px solid #d80041;
padding:2px;}

.box{
background:#FFF;
text-align:center;
padding:2px;}

img {max-width: 700px;width: expression(this.width >700 ? 700: true);}
.art {max-width: 200px;width: expression(this.width >200 ? 300: true);}
.foto 
{float:left; 
margin:1px;
max-width: 140px;width: expression(this.width >140 ? 140: true);}


div.figure {
float:left;
margin:6px;
        width:145px;
        height:145px;
        overflow:hidden;
border:1px solid #999;
    }
    div.figure > div {
        width:145px;
        height:145px;
        vertical-align:top;
    }
    div.figure > div img {
		max-width: 143px; width: expression(this.width >143 ? 143: true);
        *width:145px;
		display:block;
        margin:0 auto;
    }
    div.figure:hover {
		border:1px dashed #d80041;
    }


#metro {
text-align:center;
}

#metro a:nth-child(1){background:#d80041;}
#metro a:nth-child(2){background:#60F;}
#metro a:nth-child(3){background:#d41;}
#metro a:nth-child(4){ background-color:#363;}

#metro a {
display:block;
height:110px;
width:300px;
overflow:hidden;
text-decoration:none;
float:left;
margin:2px;
}

#metro h6{
color:#FFF;
text-transform:uppercase;
margin:0px;
padding:0px;
font:2.5em/100px "Trebuchet MS", Arial, Helvetica, sans-serif;
transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
}

#metro div{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFF;
opacity:0;
height:40px;
line-height:60px;
transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
}

#metro a:hover h6{
padding:0px;
transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
}

#metro a:hover div{
opacity:1;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
line-height:30px;
background:#000;
opacity:0.5;
height:30px;
margin-top:-20px;
}



#sidebar ul{
background:#999;
        margin:auto;
		padding:0; /*setting margin dan padding jadi 0*/
        list-style:none; /*menghilangkan tanda list-type ul*/
        float:left; /*float ke kiri, dirapatkan ke kiri*/
        width:180px; /*setting lebar 200 pixel*/
        padding-bottom:20px; /*padding bagian bawah 20 pixel*/
        box-shadow:3px 3px 3px black;
    }
    #sidebar li{
        width:100%; /*setting width untuk li ,100% sehingga otomatis sesuai panjang ul*/
        margin:0;padding:0; /*margin dan padding 0*/
        list-style:none; /*menghilangkan tanda list-type li*/
    }
    #sidebar h3{
        margin:10px 0 4px 0; /*setting margin, atas=10px; kanan=0; bawah=4px; kiri=0;*/
        padding:0 12px; /*setting padding atas dan bawah = 0;  dan kanan ,kiri = 12px;*/
        color:#FFFFFF; /*setting warna font putih*/
        font-size:14px; /*ukuran font 14px*/
    }
    #sidebar a{
        display:block; /*display block artinya membuat panjang dan lebar menjadi satu block; */
        padding:3px 10px; /*setting padding atas,bawah=3px; kanan,kiri=10px;*/
        text-decoration:none; /*setting text decoration dari link =none;(menghilangkan garis bawah pada link)*/
        color:#FFFF00; /*setting warna font link */
        border-bottom:1px dotted #f2f2f2; /*setting border bawah sebuah link;*/
    }
    #sidebar a:hover{
        background:#000; /*setting backgorund warna saat link di hover (dilewati mouse) menjadi biru muda*/
 
	}


#corner {
text-align:center;
}


#corner a {
background-color:#39C;
display:block;
height:158px;
width:158px;
overflow:hidden;
text-decoration:none;
float:left;
margin:2px;
}

#corner h6{
color:#FFF;
text-transform:uppercase;
margin:0px;
padding:0px;
font:2em/158px "Trebuchet MS", Arial, Helvetica, sans-serif;
transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
}

#corner div{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#000;
opacity:0;
height:100px;
line-height:100px;
transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
}

#corner a:hover h6{
padding:0px;
transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
}

#corner a:hover div{
opacity:1;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
line-height:50px;
background:#FFFFFF;
opacity:0.5;
height:50px;
margin-top:-50px;
}





hr{
border-top:1px dashed #999;
width:auto;}


.container{
display:block;
font:12px "Trebuchet MS", Arial, Helvetica, sans-serif;
text-align:left;
width: 960px;
margin:auto;
margin-bottom:15px;
padding: 10px;
background:#FFF;
color:#999;
box-shadow:0px 0px 2px black;
-moz-box-shadow:0px 0px 2px black;
-o-box-shadow:0px 0px 2px black;
-webkit-box-shadow:0px 0px 2px black;
overflow:hidden;
}


.content{
font:11px "Trebuchet MS", Arial, Helvetica, sans-serif;
width:230px;
margin:4px;
height:auto;
padding:2px;
float:right;
}

.main{
background-image:url(../image/zzz.png);
color:#000000;
width:900px;
margin:auto;
margin-right:10px;
box-shadow:0px 0px 3px black;
height:auto;
padding:5px;
float:left;
}


input[type="text"] {
font:1.2em/12px "Trebuchet MS", Arial, Helvetica, sans-serif;
border-radius:2px;
margin:5px;
 border:3px solid #dcdcdc;
  background-color:#fafafa;
  padding:2px;
}

.style1 {
	font-size: 16px;
	color: #999;
}

input[type="password"] {
font:1.2em/12px "Trebuchet MS", Arial, Helvetica, sans-serif;
border-radius:2px;
color:#FFFFFF;
 border:3px solid #dcdcdc;
  padding:2px;
margin:5px;}

textarea {
  font:bold 12px Verdana,Sans-Serif;
  border:5px solid #dcdcdc;
  margin:5px;
  background-color:#fafafa;
  -webkit-box-shadow:inset 0 0 5px #666;
  -moz-box-shadow:inset 0 0 5px #666;
  box-shadow:inset 0 0 5px #666;
  padding:2px;
}

input[type="text"]:focus,
textarea:focus {
  background-color:#FFE4B5;
}

input[type="password"]:focus{
    background-color:#990000;
}


.notif{
background-image:url(../image/notif.gif);
width:5px
height:5px;
padding:2;
color:#FFF;}
}

.light{
font-style:strong;
border-radius:1px;
background-color:#333333;
padding: 3px;
margin:2px;
color:#FFF;}

.light:hover {
color:;
background: #0066CC;

}

.label{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-align:center;
color:#FFFFFF;
margin:2px;
padding:2px;
font-style:strong;
border:0;
background:#333333;}

a:link {
	color:#d80041;
	text-decoration: none;
}

a:visited {
	color:#d80041;
	text-decoration: none;
}

a:hover {
	color:#ff0;
	text-decoration:underline;
}

 .gambar{
 opacity:0.7;
 box-shadow:3px 3px 3px #999;
 -moz-box-shadow:3px 3px 3px #999;
 -o-box-shadow:3px 3px 3px #999;
 -webkit-box-shadow:3px 3px 3px #999;
  margin:3px;
  float:left;
  overflow:hidden;
  padding:2px;
 }
 .gambar:hover{
  background:#d80041;
  opacity:1;
 }
 .gambar img{
  
 }

.header{
background-image:url(../image/label2.png);
margin-left:60px;
margin-top:-20px;
margin-right:20px;
margin-bottom:60px;
float:left;
width:120px;
height:117px;
padding:10px;
color:#FFF;
}

.header2{
background-image:url(../image/label.png);
margin-left:1000px;
margin-top:-20px;
margin-right:20px;
margin-bottom:20px;
width:120px;
height:120px;
padding:10px 10px 10px 8px;
color:#FFF;
}


#buttons {
text-align:center;
}

#buttons a {
display:block;
height:30px;
width:50px;
background-color:#d80041;
overflow:hidden;
text-decoration:none;
float:left;
margin:1px;
}

#buttons h2{
margin:0px;
padding:2px;
transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
}

#buttons div{
color:#FFF;
opacity:0;
height:30px;
line-height:30px;
transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
}

#buttons a:hover h2{
font-style:strong;
margin-left:-100px;
padding:0px;
transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
}

#buttons a:hover div{
opacity:1;
margin-top:-30px;
}

#footer {
font:11px "Trebuchet MS", Arial, Helvetica, sans-serif;
background-image:url(../image/label.jpg);
 width: auto;
 border-top:2px dotted  #fff;
  list-style-type: none;
  padding:0px;
  margin: -15px;
  margin-top:5px;
  position: relative;
  color:#FFF;
  text-align:center;
}
.left {
  float: left;
}

#menu {
text-align:center;

}
#menu a:nth-child(1){background-color:#666;}
#menu a:nth-child(2){background:#63F;}
#menu a:nth-child(3){background:#96C;}
#menu a:nth-child(4){background-color:#363;}
#menu a:nth-child(5){background:#63F;}
#menu a:nth-child(6){background:#d80041;}
#menu a:nth-child(7){background:#96C;}
#menu a:nth-child(8){background-color:#363;}

#menu a {
display:block;
height:120px;
width:110px;
overflow:hidden;
text-decoration:none;
float:left;
margin:1px;
}

#menu h6{
margin:0px;
padding-top:20px;
transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
}

#menu div{

text-align:left;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#000;
background-image:url(../image/1.png);
opacity:0;
padding-left:2px;
height:30px;
line-height:30px;
transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
}

#menu a:hover h6{
padding-top:20px;
transition: all 0.3s ease out;
-moz-transition: all 0.3s ease out;
-o-transition: all 0.3s ease out;
-webkit-transition: all 0.3s ease out;
}

#menu a:hover div{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
line-height:30px;
background-image:url(../image/1.png);
opacity:1;
height:30px;
padding-left:2px;
margin-top:-15px;
}