@charset "utf-8";
/* CSS Document */

body{
	font-family: Arial, Helvetica, sans-serif;
	background: url(gambar/bacground.jpg);
	font-size: 12px;

}
p{
	line-height:1.5;
	}
strong h3{
	line-height:2.0;}

#wrapper{
	width:980px;
	margin:0 auto;
	margin-bottom:10px;
	margin-top:10px;	
	padding:0px;
	border:4px;
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 1);
	background-color:white;
	border-radius:10px;
	}
	
#header{
	max-width:100%;
	}
	
	.bahasa{
		margin-top:-130px;
		text-align:right;
		float:right;
		color:#FFF;
		position:relative;
	}
	
#header img{
	max-width: 100%;
	height: auto;
}

.terjemah {
	float:right;
	margin:50px 10px 50px 0px;

}

#menu{
	height:35px;
	background:#F00;
	width:980px;
		
		}

#menu ul{
	list-style:none;
	margin:0px;
	padding:0px;
	}
#menu ul li{
	list-style:none;
	padding:10px 20px 0 20px;
	height:25px;
	float:left;
	border-right:1px solid #CCC; 
	}
#menu li a{
	text-decoration:none;
	color:#FFF;
	font-weight:bold;
	font-size:12px;
	}
#menu li a:hover{
	text-decoration: underline;
	color: #FF0;
	font-size:12px;
	}

#konten{
	max-width:100%;
	}
	
#leftbar{
	width:980px;
	height: auto;
	float:left;
	font-family: Arial, Helvetica, sans-serif;
	text-align: justify;
	font-size: 12px;
	/*background: url(gambar/bgorengeputih.jpg)no-repeat;*/
	border-radius:8px;
	padding:0px 10px 0px 10px;
	margin-top:10px;	
	}
	
.leftimg{
	max-width: 100%;
	height: auto; 450px;
	border:2px;
	float:left;
	margin-right: 15px;
	margin-bottom:10px;
	}
	
.leftimg img{
	max-width: 100%;
	height: auto; 450px;
	border:2px;
	box-shadow: 0px 0px 9px rgba(0, 0, 0, 1);
	border-radius:4px;
	padding:5px;
	}
	
#rightbar{
	width:590px;
	height: auto;
	float:left;
	padding:5px;
	}
	
.judulabout{
	color: #CCC;
	padding:10px 17px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:11px;
	height: 50px; auto;
	width:auto;
	background-color:#090;
	line-height:3;
	margin-bottom:20px;
	}

.judulabout a{
	text-decoration:none;
	color: #FFF;
	}
.judulabout a:hover{
	text-decoration:none;
	color: #0F3;
	}
	
.gambarabout{
	padding:5px;
	width:350px;
	height:450px;
	border:2px;
	box-shadow: 0px 0px 9px rgba(0, 0, 0, 1);
	border-radius:4px;
	margin-left:30px;
	margin-top:5px;
	}

.isiabout{
	font-family: Arial, Helvetica, sans-serif;
	text-align: justify;
	font-size: 12px;
	/*background: url(gambar/bgorengeputih.jpg)no-repeat;
	border-radius:8px;*/
	float:left;
	max-width:100%;
	padding:5px;
	}

.isiabout p{
	margin-bottom:20px;
	}
p strong{
	margin-bottom:10px;
	}
	
.judulkategori{
	height:20px;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight:bold;
	padding:10px; margin:10px;
	}

.leftgambar{
	padding:10px;
	text-align: left;
	width:270px;
	height:50px;
	float:left;
	}

.judul{
	height:20px;
	background:#FC0;
	text-align:center;
	font-size:12px;
	padding:5px;
	border:1px solid #00F; 
	}
.isi-menu{
	font-size:12px;	 
	font-family:Arial, Helvetica, sans-serif;
	text-align: left;
	font-size:12px;
	margin:0px;
	border:1px solid #00F; 
	}	
.isi-menu ul li{ margin:0px;
				}
.isi-menu li a{
	text-decoration:none;
	color:#F00;
	}
.isi-menu li a:hver{
	text-decoration:none;
	color:#000;
	}


.statistik{
	padding:5px;
	text-align: center;
	width:300px;
	margin-left:415px;
	height:500px;
	
	}

	.hiters { 
		clear: both;
		}
	
#footer{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	height:50px;
	clear:both;
	padding:10px;
	}
	
	
	
.col_w900 { 
width: 900px; 
padding: 0 30px 70px 30px; 
margin-bottom: 0; }

.col_allw280 { 
	float: left; 
	width: 210px;
	margin-right: 10px;
	margin-top:10px;
	height:600px;
	 }
.frontpage_box h2 { 
	padding: 0; 
	margin-bottom: 5px; 
	color: #900; 
	}
.frontpage_box img { 
	float: left; 
	margin-right: 10px 
	}
.frontpage_box a.more { 
	margin-top: 10px
	 }
.tagline { display: block; 
	font-size: 12px; 
	font-weight: bold; 
	font-style: italic; color: #999; 
	margin-bottom: 5px 
	}




 /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700,800);

*,html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,label,fieldset,input,p,blockquote,th,td {
    margin: 0;
    padding: 0;
}

article,aside,figure,footer,header,hgroup,nav,section {
    display: block;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
}


nav {
    display: block;
    background:#060;
	max-width:980px;
}

.menu {
	font-size:12px;
    display: block;
}

.menu li {
    display: inline-block;
    position: relative;
    z-index: 100;
}

.menu li:first-child {
    margin-left: 0;
}

.menu li a {
    font-weight: 600;
    text-decoration: none;
    padding: 13px 20px;
    display: block;
    color: #fff;
    transition: all 0.2s ease-in-out 0s;
}

.menu li a:hover,.menu li:hover>a {
    color: #0F3;
    background: #090;
}

.menu ul {
    visibility: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 170px;
    position: absolute;
    left: 0px;
    background: #fff;
    z-index: 99;
    transform: translate(0,20px);
    transition: all 0.2s ease-out;
}

.menu ul:after {
    bottom: 100%;
    left: 20%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 6px;
    margin-left: -6px;
}

.menu ul li {
    display: block;
    float: none;
    background: none;
    margin: 0;
    padding: 0;
}

.menu ul li a {
    font-size: 12px;
    font-weight: normal;
    display: block;
    color: #FFF; #797979;
    background:#060;
	font-weight:600;
}

.menu ul li a:hover,.menu ul li:hover>a {
    background:#090;
    color: #0C0; #fff;
	font-weight:600;
}

.menu li:hover>ul {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

.menu ul ul {
    left: 169px;
    top: 0px;
    visibility: hidden;
    opacity: 0;
    transform: translate(20px,20px);
    transition: all 0.2s ease-out;
}

.menu ul ul:after {
    left: -6px;
    top: 10%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 6px;
    margin-top: -6px;
}

.menu li>ul ul:hover {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

.responsive-menu {
    display: none;
    width: 100%;
    padding: 20px 15px;
    background: #374147;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
}

.responsive-menu:hover {
    background: #374147;
    color: #fff;
    text-decoration: none;
}

nav a.homer {
    background: #090;
	color: #0F3;
}


@media (min-width: 768px) and (max-width: 979px) {
    .mainWrap {
        width: 768px;
    }

    .menu ul {
        top: 37px;
    }

    .menu li a {
        font-size: 12px;
    }

    a.homer {
        background: #374147;
    }
}

@media (max-width: 767px) {
    .mainWrap {
        width: auto;
        padding: 50px 20px;
    }

    .menu {
        display: none;
    }

    .responsive-menu {
        display: block;
		text-decoration:none;
    }

    nav {
        margin: 0;
        background: none;
		text-decoration:none;
    }

    .menu li {
        display: block;
        margin: 0;
    }

    .menu li a {
        background:#374147;
        color: #797979;
    }

    .menu li a:hover,.menu li:hover>a {
        background: #333;
        color: #fff;
    }

    .menu ul {
        visibility: hidden;
        opacity: 0;
        top: 0;
        left: 0;
        width: 100%;
        transform: initial;

    }

    .menu li:hover>ul {
        visibility: visible;
        opacity: 1;
        position: relative;
        transform: initial;
    }

    .menu ul ul {
        left: 0;
        transform: initial;
    }

    .menu li>ul ul:hover {
        transform: initial;
    }
}

@media (max-width: 480px) {
}

@media (max-width: 320px) {
}




/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* untuk ukuran 1080px kebawah */
@media screen and (max-width: 1080px) {
	
	.container {
		width: 100%;
	}
	
	#wrapper{
		height: auto;
		width:100%;
		}
	
	.bahasa{
		margin: -12% -1%;
		}
	
	.left {
		width: 25%;
		background: #fff000;
	}
	
	#leftbar {
		width: 25%;
		height: auto;
	}
	
	.isiteksberjalan
	{
		width: 25%;
		height: auto;
	}
	
	.tekline
	{
		width: 25%;
	}
	
	.isijenistoko
	{
		width: auto;
		margin:  0% 2%;
	}
	
	.kategori
	{
		width: 25%;
	}
	
	.isikategori
	{
		width: 25%;
	}
	
	#cp_contact_form
	{
		width: 25%;
	}
	
	.isiteksberjalan
	{
		width: auto;
		margin:  2% 2%;
	}
	
	.statistik
	{
		clear: both;
		width: auto;
		float: none;
	}
	
	table
		{
		width: 25%;
	}
	
	.leftgambar
	{
		clear: both;
		width: auto;
		float: none;
	}
	
	
	#rightbar
	{
		clear: both;
		width: auto;
		float: none;
	}
	
	.isikananalamat 
	{
		width: auto;
		float: none;
		margin-bottom: 1%;
		height:auto;
	}
	
	.gambar
	{
		clear: both;
		width: auto;
		float: none;
		margin:  0% 2%;
	}
	.kanan img
	{
		width: auto;
		float: none;
	}
	
	.kanan
	{
		width: auto;
		float: none;
		height:100%;
	}
	
	.col_w900
	{
	width: auto;
	float: none;	
	}
	
	.promo
	{
	width: auto;
	float: none;
	height:auto;
	}
	
	.newtenant
	{
	width: auto;
	float: none;
	height:auto;
	}
	
	.banner
	{
	width: auto;
	float: none;
	height:auto;
	}
	
	.subtagline
	{
	width: auto;
	float: none;
	height:auto;
	}
	
	
	.middle {
		width: 68%;
		float: right;
	}
	
	.right {
		clear: both;
		padding: 1% 4%;
		width: auto;
		float: none;
	}
}


/* untuk ukuran layar 700px kebawah */
@media screen and (max-width: 780px) {
	
	#header, 
	#nav, 
	{
		text-align: left;
	}
	
	#wrapper
	{
		width: auto;
		height:auto;
	}
	
	
	.left {
		width: auto;
		float: none;
	}
	#leftbar {
		width: auto;
		float: none;
	}
	
	#cp_contact_form
	{
		width: auto;
		float: none;
	}
	
	.isiteksberjalan
	{
		width: auto;
		float: none;
	}
	
	.tekline
	{
		width: auto;
		float: none;
	}
	
	.isijenistoko
	{
		width: auto;
		float: none;
	}
	
	.kategori
	{
		width: auto;
		float: none;
	}
	
	.isikategori
	{
		width: auto;
		float: none;
	}
	
	.statistik
	{
		width: auto;
		float: none;
	}
	
	table
		{
		width: auto;
		float: none;
	}
	
	.leftgambar
	{
		width: auto;
		float: none;
	}
		
	.middle {
		width: auto;
		float: none;
	}
	
	#rightbar 
	{
		width: auto;
		float: none;
	}
	
	.isikananalamat 
	{
		width: auto;
		float: none;
	}
	
	.kanan 
	{
		width: auto;
		float: none;
	}
	.gambar 
	{
		width: auto;
		float: none;
	}
	
	#slider_wrapper,
	#slider, 
	{
		width: auto;
		float: none;
	}
	
	.col_w900
	{
	width: auto;
	float: none;	
	}
	
	.promo
	{
	width: auto;
	float: none;
	}
	
	.newtenant
	{
	width: auto;
	float: none;
	}
	
	.banner
	{
	width: auto;
	float: none;
	}
	
	.right {
		width: auto;
		float: none;
	}

}