@charset "UTF-8";
@import url('navigation.css');

/* 1. INDEX
---------------------------------------------------------------------- */

.index{
background: #007311
}

.index #wrapper{
font-size: 17px;
margin: 0 auto;
width: 960px;
height: 100%
}

.index #wrapper #content{
text-transform: uppercase;
font-weight: 100;
color: #fff;
float: right;
margin-right: 40px;
width: 440px
}

.index #wrapper #content a b{
font-weight: 800
}

.index #wrapper #content a{
color: #fff;
text-decoration: none
}

.index #wrapper #content a:hover{
text-decoration: underline
}

.index #wrapper #header{
float: left;
position: fixed;
}

.index #wrapper #footer{
float: left;
position: fixed;
bottom: 0
}

/* 2. PORTFOLIO
---------------------------------------------------------------------- */

.portfolio{
background: #fff url(../gambar/portfolio/kotak.png) center top repeat
}

.portfolio #wrapper{
margin: 0 auto;
font-size: 17px;
width: 875px;
height: 100%
}

.portfolio #wrapper #margintop{
margin-top: 5px
}

.portfolio #wrapper #porto{
margin-left: 1px
}

.portfolio #wrapper #porto div{
width: 394px;
padding: 2px;
height: 169px;
background: #fff;
float: left;
margin-top: 44px;
margin-bottom: 33px
}

.portfolio #wrapper #porto div#port2{
margin-left: 78px
}

.portfolio #wrapper a b{
font-weight: 800
}

.portfolio #wrapper a{
color: #000;
text-decoration: none
}

.portfolio #wrapper a:hover{
text-decoration: underline
}

.portfolio #wrapper #marginbottom{
height: 25px
}

/* 3. SERVICES
---------------------------------------------------------------------- */

.services{
background: #333;
}

.services #wrapper{
text-align: left;
font-family: Verdana;
color: #cccccc;
font-size: 14px;
letter-spacing: 0.8px;
line-height: 18px
}

.services #wrapper #content{
width: 700px;
margin: 0 auto
}

.services #wrapper #content i{
text-shadow: 0 0 5px #ffffff;
}

.services #wrapper #content h1{
font-size: 40px;
font-weight: 500
}

.services #wrapper #content h2{
font-size: 25px;
font-weight: 500
}

.services #wrapper #content h2 .white{
color: #fff;
text-shadow: 0 0 5px #ffffff;
}

.services a.packet{
opacity: 1;
filter: alpha(opacity=100)
}

.services a.packet:hover{
opacity: 0.3;
filter: alpha(opacity=30)
}

.services #wrapper #content a{
color: #fff;
text-decoration: none
}

.services #wrapper #content a:hover{
text-decoration: underline
}

/* 4. CONTACT
---------------------------------------------------------------------- */

.contact{
background: #fff;
color: #5d5c5c;
font-size: 12px;
font-family: "Trebuchet MS", sans-serif
}

.contact .container .content{
width: 375px;
margin: 0 auto
}

.contact .container .content h1{
margin: 20px 0 20px 0;
font-size: 36px;
font-weight: lighter
}

.contact .container .content a{
color: #5d5c5c;
text-decoration: underline
}

.contact .container .content a:hover{
color: #000
}

.contact .container .content h3{
margin: 0 0 10px 0;
font-size: 17px;
font-weight: normal
}

/* 5. ABOUT
---------------------------------------------------------------------- */

.about{
background: #0084b4
}

.about #wrapper{
width: 800px;
height: 800px;
margin: 0 auto
}

.about #wrapper #about1, .about #wrapper #about2, .about #wrapper #about3{
width: 800px;
float: left
}

.about #wrapper #img1, .about #wrapper #img2, .about #wrapper #img3{
float: right
}

.about #wrapper #about1{
margin: 0 0 150px 0
}

.about #wrapper #about2{
margin: 0
}

.about #wrapper #about3{
margin: 0 0 100px 0
}