html, body{
background-color: #000;
color: #fff;
font-family: "Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
}

.hide{ display:none;}

.box{ background-color: transparent}

#outer-region{
    background: #FBFED3 url(../img/sidebg.gif) 100% 0 repeat-y;
    color: #333;
}

.noUget{
background:  transparent url(../img/work-mainz.jpg) 100% 0 no-repeat;
}
.uget{
background:  transparent url(../img/wm.gif) 100% 0 no-repeat;
}
#hd { 
overflow: hidden; height:231px;
background-image: url(../img/hd-bgo.jpg);
background-position: 0 0;
background-repeat: no-repeat;
}

#hd h1 {
    margin: 0px;
    text-indent: -999em;
    padding-left: 68px;
    padding-top: 0px;
}

#hd h1 a {
    text-indent: -999em;
    display: block;
    background: transparent url(../img/g.png) 0 0 no-repeat;
    height: 140px;
    width: 74px;
}
/**
.head-about{background: transparent url(../img/about-hd.jpg) 0 0 no-repeat;}
.head-work{background: transparent url(../img/work-hd.jpg) 0 0 no-repeat;}
.head-contact{background: transparent url(../img/contact-hd.jpg) 0 0 no-repeat;}
**/
.head-about{
background-image: url(../img/hd-bgo.jpg) !important;
background-position: 0 -231px !important;
}
.head-contact{
background-image: url(../img/hd-bgo.jpg) !important;
background-position: 0 -462px !important;
}


#topnav{
    padding: 0px 0px 122px 0;
    margin: 0px 0px 0px 12px;
    list-style: none;
}

#topnav li{
    padding: 0px;
    margin: 0px;    
    display: inline;
    text-indent: -999em;
}

#topnav li a:link,
#topnav li a:visited,
#topnav li a:active{
    display: block;
    height: 94px;
    float: left;    
    border-bottom: 3px solid #FBFED3;
}

#topnav li a.about:link,
#topnav li a.about:visited,
#topnav li a.about:active{
    width: 61px;
    background: transparent url(../img/menuebel.jpg) 0 0 no-repeat;
}

#topnav li.current-page a.about,
#topnav li a.about:hover{
    background-position: 0 -94px;
}


#topnav li a.work:link,
#topnav li a.work:visited,
#topnav li a.work:active{
    background: transparent url(../img/menuebel.jpg) -62px 0 no-repeat;
    width: 56px;
}


#topnav li.current-page a.work,
#topnav li a.work:hover
{
    background-position:-62px -94px;
}

#topnav li a.contact:link,
#topnav li a.contact:visited,
#topnav li a.contact:active{
    background: transparent url(../img/menuebel.jpg) -120px 0 no-repeat;
    width: 56px;
}


#topnav li.current-page a.contact,
#topnav li a.contact:hover
{
    background-position:-120px -94px;
}


#bd{
    padding-top: 24px;
    background-color: transparent;
    color: #000;
}

#main-content{
    
}

#side-content{
    text-align: left;
    padding-top: 430px;
}

#side-content .box{
    padding-right: 100px;
}

#side-content h2{
    text-indent: -999em;
    margin: 0px;
    padding: 0px;
}

#side-content h2 span{
    display: block;
    height: 32px;
    border-bottom: 1px solid #000;
}

.pony img{
    padding: 10px 0;
}

.project-item{padding: 12px 0 20px 0;}
.ganjil{ background: transparent url(../img/dash.gif) 0 100% no-repeat;}
.genap{ background: transparent url(../img/dash-genap.gif) 0 100% no-repeat;}
.project-image{text-align: right;}
.project-data{font-family: Georgia, "Times New Roman", serif;}

p.project-description{
    font-style: italic;
    padding: 0px;
    margin: 0 0 8px 0;
}
.project-meta p{
    padding: 0;
    margin: 0;
    color: #666;
}
.project-meta strong{
    color: #000;
}
.project-data h3{
    margin: 0 0 8px 0;
}
.project-data h3,
.project-data h3 span{
text-indent: -999em;
height: 25px;
display: block;
}


/* contact */
.contactform{
        
}

.contactform form{}
.contactform form label{
text-transform: uppercase;
}
.contactform form input{
width: 390px;
border: 1px solid #BBBBBB;
padding: 5px;
}

.contactform form input.submit{
width: auto !important;
border: auto !important;
}

.contactform form textarea{}

/* flat */
.flat{
    background: transparent url(../img/aboutbg.jpg) -5px 100% no-repeat;
}

.page-content{
    padding-bottom: 280px;
    color: #333;
    font-family: "Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
    font-size: larger;
}

.page-content a:link,
.page-content a:visited,
.page-content a:active
{
    font-weight: bold;
    color: #000;
}

.page-content h2{}
.page-content h3,
.page-content h4{
    font-family: "Lucida Console", "Courier New", Courier, monospace;    
    font-weight: bold;
    font-size: 24px;
    font-style: italic;
    color: #ff3300;
    margin-bottom: 2px;
    padding: 0 0 2px 12px;    
    line-height: 100%;
    background: #FBFED3 url(../img/04.gif) 0 13px no-repeat;

}

.page-content p{
}


#ft {
   background-color: #000;
   color: #ff3300;
   font-size: 2.0em;
   font-family: "Lucida Console", "Courier New", "Courier", monospace;
} 

#ft .box{ padding: 1.2em 1.2em 0 1.2em}
sup.wip{
color: red;
font-family: Verdana, Arial, Helvetica, Sans-serif;
}


.portf-online{
color: green !important;
}

.portf-cached_offline{
color: #ff6600 !important;
}

.portf-offline{
color: red !important;
}