@charset "utf-8";

* {
	margin:0px;
	padding:0px;
}

body {
	margin:0px;
	padding:0px;
	background:linear-gradient(to bottom, #f2f2f2 25%, #cccccc 75%);
	background: -webkit-linear-gradient(to bottom, #f2f2f2 25%, #cccccc 75%); /* For Safari 5.1 to 6.0 */
 	background: -o-linear-gradient(to bottom, #f2f2f2 25%, #cccccc 75%); /* For Opera 11.1 to 12.0 */
 	background: -moz-linear-gradient(to bottom, #f2f2f2 25%, #cccccc 75%); /* For Firefox 3.6 to 15 */
	overflow-y:scrool;
}

a {
	text-align:left;
	margin:20px 15px 10px 0px;
	font:13px Helvetica Neue, Helvetica, Arial, sans-serif;
	color:#007800;
	text-decoration:none;
}

a:hover {
	color:#007800;
	text-decoration:underline;
}

p {
	text-align:justify;
	margin:10px 15px;
	font:15px Helvetica Neue, Helvetica, Arial, sans-serif;
	color:#1a4e38;
}

.faa{
	text-align:left;
	padding:0px;
	margin:10px 0px 0px 70px;
	font:65px Ar Berkley;
	color:#8BD423;
	font-weight:bold;
	float:left;
	text-shadow:1.5px 1.5px #4d4d4d;
}

.mare {
	width:88px;
}

#himg {
	width:160px;
	float:left;
	margin:10px 0px 10px 50px;
}

.title {
	text-align:left;
	padding:0px;
	margin-top:50px;
	font:18px Georgia, serif;
	color:#333333;
	font-weight:bold;
}

.art {
	text-align:left;
	padding:0px;
	margin-top:20px;
	font:18px Georgia, serif;
	color:#333333;
	font-weight:bold;
}

.footer {
	text-align:left;
	margin:0px 5px;
	padding:10px;
	font:14px Georgia, serif;
	color:#ffffff;
}

.gal {
	margin:10px;
}

#container {
	width:1000px;
	height:auto;
	margin-top:15px;
	margin-left:auto;
	margin-right:auto;
	background:none;
}

#header {
	width:1000px;
	height:auto;
}

#aslan {
	width:200px;
	margin-top:15px;
}

#top {
	background:#fff;
	width:1000px;
	float:left;
	margin-bottom:15px;
	box-shadow: 2px 2px 2px 2px #888888;
}

#content {
	width:1000px;
	height:auto;
	padding:0px;
	background:#fff;
	margin-bottom:15px;
	float:left;
	position:relative;
	box-shadow: 2px 2px 2px 2px #888888;
}

#mywrapper {
	width:760px;
	height:auto;
	float:left;
	margin:15px 0px 5px 0px;
}

#footer {
	width:1000px;
	height:35px;
	background:#007800;
	float:left;
	text-align:left;
}

.leftdivac {
	margin:15px 69px 15px 69px;
	padding:0px;
	width:900px;
	float:left;
}

.leftdivar {
	margin:0px 79px 10px 79px;
	padding:0px;
	width:600px;
	position:relative;
	float:left;
	border:1px solid #cccccc;
}

.leftdivarc {
	margin:0px 79px 10px 79px;
	padding:0px;
	width:600px;
	height: 203px;
	position:relative;
	float:left;
	border:1px solid #cccccc;
}

.leftdivan {
	margin:15px 67px 15px 67px;
	padding:0px;
	width:620px;
	float:left;
	border-radius:15px;
	border:1px solid #333;
}

#sidebar {
	margin:15px 40px 0px 0px;
	padding:0px;
	width:200px;
	float:right;
	position:relative;
	background:none;
	display:block;
}
#logo {
	display:block;
	height:120px;
	margin-left:auto;
	margin-right:auto;
}

#contact {
	float:left;
	width:380px;
	margin-bottom:20px;
}

#form {
	float:left;
	width:240px;
	margin:30px 0px 0px 0px;
}

.thumbimg {
	margin:10px 10px 30px 10px;
	width:100px;
	height:80px;
	float:left;
}

.thumb {
	width:100px;
	position:relative;
	vertical-align:middle;
}

.galimg {
	margin:0px 20px 20px 0px;
	width:186px;
	height:105px;
	float:left;
}

.gal {
	position:relative;
	vertical-align:middle;
}

.data {
	text-align:left;
	margin:0px 5px 0px 0px;
	font:13px Helvetica Neue, Helvetica, Arial, sans-serif;
	color: #737373;
	text-decoration:none;
}

.rgt {
	text-align:right;
	font-style:italic;
}

.lft {
	text-align:left;
	font-style:italic;
}

.sign {
	width:288px;
	height:auto;
	margin:0px 0px 10px 13px;
	float:left;
}

#banner {
	margin:0px 0px 10px 0px;
	padding:0px;
}

.fb-like-box {
	width:200px;
	height:300px;
	margin-top:10px;
}

#feli {
	margin:0px;
	padding:0px;
	width:860px;
}

/* ------ Menu ------ */

#menubar {
	height:35px;
	background:none;
	width:1000px;
	float:left;
	margin-top:0px;
	border-bottom:1px solid #cccccc;
	background:#007800;
	box-shadow: 2px 2px 2px 2px #888888;
}

#menubar ul {
	list-style:none;
}

#menubar ul li a {
	float:left;
	text-decoration:none;
	color:#ffffff;
	padding:9px 25px;
	text-align:center;
	line-height:35px;
	height:35px;
	width:92px;
	font:14px Sans Serif;
	background:#007800;
	margin:0px;
}

#menubar ul li a:hover {
	color:#007800;
	font:14px Sans Serif;
	text-shadow:1px 1px #d3d3d3;
	background:linear-gradient(to bottom, #ffffff 50%, #acacac);
	background: -webkit-linear-gradient(to bottom, #ffffff 50%, #acacac); /* For Safari 5.1 to 6.0 */
 	background: -o-linear-gradient(to bottom, #ffffff 50%, #acacac); /* For Opera 11.1 to 12.0 */
 	background: -moz-linear-gradient(to bottom, #ffffff 50%, #acacac); /* For Firefox 3.6 to 15 */
}

#menubar ul li a.active {
	background:linear-gradient(to top, #ffffff 50%, #acacac);
	background: -webkit-linear-gradient(to top, #ffffff 50%, #acacac); /* For Safari 5.1 to 6.0 */
 	background: -o-linear-gradient(to top, #ffffff 50%, #acacac); /* For Opera 11.1 to 12.0 */
 	background: -moz-linear-gradient(to top, #ffffff 50%, #acacac); /* For Firefox 3.6 to 15 */
	color:#007800;
	text-shadow:1px 1px #d3d3d3;
}

/* ------ Gallery ------ */

#gallery {position:relative; width:620px;}
#image {position:relative; width:620px; height:250px; background:#FFF url(images/loading.gif) center center no-repeat}
#image img {position:absolute; top:0px; left:0px}
#thumbwrapper {margin-top:10px; width:620px; height:100px;}
#thumbarea {position:relative; overflow:hidden; height:100px; width:620px; }
#thumbarea ul{ margin:0; padding: 0px;}
#thumbs {position:absolute; list-style:none; height:100px; width:10000px;}
#thumbs li {float:left; margin-right:5px; cursor:pointer}
.imgnav {position:absolute; height:250px; width:20%; z-index:100; height:250px	; width:20%; z-index:100; outline:none; cursor:pointer}
#previmg {left:0; background:url(images/left.gif) left center no-repeat;}
#previmg:hover {opacity:1; filter:alpha(opacity=100)}
#nextimg {right:0; background:url(images/right.gif) right center no-repeat;}
#nextimg:hover {opacity:1; filter:alpha(opacity=100)}

#templatemo_container #templatemo_gallery_panel {
	clear: both;
	overflow: hidden;
	width: 620px;
	height: 1000px; /* expend this if u wanna put thumbnail */
	padding: 0;
	border-bottom: 10px solid #0a1521;
}




#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#26262c;
  display:none;
}  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:90%;
  height:auto;
  display:none;
  z-index:9900;
  padding:20px;
  border-radius: 5px;
  text-align: center;
}
#boxes #dialog {
  width:90%; 
  height:auto;
  padding: 10px 10px 10px 10px;
  background-color:#ffffff;
  font-size: 15pt;
}

.agree:hover{
  background-color: #D1D1D1;
}
.popupoption:hover{
	background-color:#D1D1D1;
	color: green;
}
.popupoption2:hover{
	color: red;
}



a.popup-link {
		padding:17px 0;
		text-align: center;
		margin:10% auto;
		position: relative;
		width: 90%;
		color: #fff;
		text-decoration: none;
		background-color: #FFBA00;
		border-radius: 3px;
		box-shadow: 0 5px 0px 0px #eea900;
		display: block;
	}
	a.popup-link:hover {
		background-color: #ff9900;
		box-shadow: 0 3px 0px 0px #eea900;
		-webkit-transition:all 1s;
		transition:all 1s;
	}
	/* end link popup*/
	/* animasi popup */

	@-webkit-keyframes autopopup {
		from {opacity: 0;margin-top:-200px;}
		to {opacity: 1;}
	}
	@-moz-keyframes autopopup {
		from {opacity: 0;margin-top:-200px;}
		to {opacity: 1;}
	}
	@keyframes autopopup {
		from {opacity: 0;margin-top:-200px;}
		to {opacity: 1;}
	}







	#popup {
		background-color: rgba(0,0,0,0.8);
		position: fixed;
		top:0;
		left:0;
		right:0;
		bottom:0;
		margin:0;
		-webkit-animation:autopopup 2s;
		-moz-animation:autopopup 2s;
		animation:autopopup 2s;
	}
	#popup:target {
		-webkit-transition:all 1s;
		-moz-transition:all 1s;
		transition:all 1s;
		opacity: 0;
		visibility: hidden;
	}

	@media (min-width: 768px){
		.popup-container {
			width:90%;
		}
	}
	@media (max-width: 767px){
		.popup-container {
			width:90%;
		}
	}
	.popup-container {
		position: relative;
		margin:7% auto;
		padding:30px 50px;
		background-color: #fafafa;
		color:#333;
		border-radius: 3px;
	}

	a.popup-close {
		position: absolute;
		top:3px;
		right:3px;
		background-color: #333;
		padding:7px 10px;
		font-size: 20px;
		text-decoration: none;
		line-height: 1;
		color:#fff;
	}







	.popup-form {
		margin:10px auto;
	}
		.popup-form h2 {
			margin-bottom: 5px;
			font-size: 37px;
			text-transform: uppercase;
		}
		.popup-form .input-group {
			margin:10px auto;
		}
			.popup-form .input-group input {
				padding:17px;
				text-align: center;
				margin-bottom: 10px;
				border-radius:3px;
				font-size: 16px; 
				display: block;
				width: 100%;
			}
			.popup-form .input-group input:focus {
				outline-color:#FB8833; 
			}
			.popup-form .input-group input[type="email"] {
				border:0px;
				position: relative;
			}
			.popup-form .input-group input[type="submit"] {
				background-color: #FB8833;
				color: #fff;
				border: 0;
				cursor: pointer;
			}
			.popup-form .input-group input[type="submit"]:focus {
				box-shadow: inset 0 3px 7px 3px #ea7722;
			}
