@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Lora);
@import url(https://fonts.googleapis.com/css?family=Lato);
@import url(https://fonts.googleapis.com/css?family=Arimo:400italic);

html,body {
	font: 100% 'Open Sans', sans-serif;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */

	height: 100%;
    background: #000;
    color: #fff;        
    

}

#box-link {	
	background: #f00;
	text-align: center;	

}

#box-sulam {		
	text-align: center;	
}

.box-tengah {
		margin: 0 35px;
}

#galeri {
	width: 700px;
	padding: 0 40px 0 40px;
}

#contentnya {
	padding: 0 4px 0 42px;	
	max-height: 1100px;
	overflow: auto;
}

#contentnya a {
	font-size: 14px;
}


@media (min-width: 640px) {
  .image-row {
  	left: auto;  	
    text-align: left; } 
}

.nav-image {
	  width: 57px;
    height: 57px;
    padding: 5px;     
}

.nav-lin {
	  border: solid 1px #f00;
    margin: 2px;
    float: left; 
}

.galeri-image {
    width: 127px;
    height: 127px;
    padding: 5px;        
}

.galeri-sulam {
    width: 85px;
    height:85px;
    padding: 5px;        
}

.galeri-tv {
    width: 40px;
    height:40px;
    padding: 5px;        
}

.galeri-image-link {
    display: inline-block;
    padding: 4px;
    margin: 0 0.5rem 1rem 0.5rem;
    border: #f00 1px solid;
    line-height: 0;
    transition: background-color 0.5s ease-out;
}

.galeri-image-link-judul {
    display: inline-block;    
    padding: 4px 4px 4px 4px;
    margin: 0 0.5rem 1rem 0.5rem;
    border: #f00 1px solid;
    line-height: 0;
    width: 140px;  
    transition: background-color 0.5s ease-out;
    float: left;
}

.galeri-tv-link-judul {
    display: inline-block;    
    padding: 2px 2px 2px 2px;
    margin: 0 0.2rem 0.4rem 0.2rem;
    border: #f00 1px solid;
    line-height: 0;
    width: 50px;  
    transition: background-color 0.5s ease-out;
    float: center;
}

.galeri-sulam-link-judul {
    display: inline-block;    
    padding: 4px 4px 4px 4px;
    margin: 0 0.5rem 1rem 0.5rem;
    border: #f00 1px solid;
    line-height: 0;
    width: 95px;  
    transition: background-color 0.5s ease-out;
    float: center;
}

.sulam-judul {
	width: 5.4rem;
	min-height: 14px;
	font-size: 11px;
	text-align: center;
	background: #300 linear-gradient(to bottom, #400, #000);	
	padding: 4px 0 0 0;
	margin: 1px 4px 0px 5px;
	line-height: 100%;	
	height: 25px;
	overflow-x: hidden;
	overflow-y: auto;
	
}


.galeri-judul {
	width: 8rem;
	min-height: 14px;
	font-size: 11px;
	text-align: center;
	background: #300 linear-gradient(to bottom, #400, #000);	
	padding: 4px 0 0 0;
	margin: 1px 4px 0px 5px;
	line-height: 100%;	
	height: 35px;
	overflow-x: hidden;
	overflow-y: auto;
	
}

td, th {
	font: 100% 'Open Sans', sans-serif;
	font-size: 13px;
}

#halaman-muka {
    background: url("/bewara/home.jpg") no-repeat scroll center top transparent;
    height: 100%;
    min-height: 1248px;
    margin: 0;
    min-width: 976px;
    padding: 0;
}

#tabel-muka {
	width: 976;
	text-align: center;
	margin-top: 505px;
	margin-left:auto;
	margin-right:auto;
	 position: relative;
	
}

#muka-bahasa {
	width: 300px;
	padding: 10px 10px 10px 10px;	
	text-align: center;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.handap {
	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
	color: #FFFFFF;

}

a:link {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	color: #dd0000;
	text-decoration: none;
}

a:hover {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	color: #1929FF;	
	text-decoration: underline;
}
.main-gede {
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	font-weight: bold;
	color: #eeeeee;
}
.main {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	color: #FFFFFF;
}
.main-hideung {
font-family: Tahoma;
	font-size: 13px;
	color: #000000;
}
.abu {
	font-family: Tahoma;
	font-size: 10px;
	color: #dddddd;
}
.putih-kecil {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #CCCCCC;
}
a:visited {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	color: #CC0000;
	text-decoration: none;
}

.kotax {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	color: #000000;

	border: solid 1px #1f6598;
	margin: 0px;
	padding: 0px 0px 0px 4px;


}
.button {
	font-family: 'Open Sans', sans-serif;
	font-size: 10px;
	color: #333333;
}
.
.tindik {
	font-family: Tahoma;
	font-size: 12px;
	font-weight: bold;
	color: #FF0000;
}
.errornya {
	font-family: Tahoma;
	font-size: 11px;
	font-style: italic;
	font-weight: bold;
	color: #CC3333;
}
.kecil {
	font-family: 'Open Sans', sans-serif;
	font-size: 10px;
	color: #ee2222;
	text-decoration: none;
}
.kecil:link {
	font-family: 'Open Sans', sans-serif;
	font-size: 10px;
	color: #ee2222;
	text-decoration: none;
}
.kecil:visited{
	font-family: 'Open Sans', sans-serif;
	font-size: 10px;
	color: #ee2222;
	text-decoration: none;
}
.kecil:hover {
	font-family: 'Open Sans', sans-serif;
	font-size: 10px;
	color: #ee2222;
	text-decoration: underline;
}

.hd {
	FONT-WEIGHT: bold; FONT-SIZE: 10px; BORDER-LEFT-COLOR: #4186de; BORDER-BOTTOM-COLOR: #549af2; COLOR: #074181; BORDER-TOP-COLOR: #98bfef; FONT-FAMILY: Verdana; BACKGROUND-COLOR: #d6e5f7; BORDER-RIGHT-COLOR: #6ba4eb
}.atas {
	font-family: Tahoma;
	font-size: 10px;
	color: #000033;
}
.judz {
	font-family: Tahoma;
	font-size: 12px;
	color: #FFFFFF;
}
.afa {
	FONT-SIZE: 12px; FILTER: Alpha(Opacity=100, StartOpacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=200, FinishY=200); COLOR: #000000; FONT-FAMILY: 'Open Sans', sans-serif
}
#zupa {
	border: 1px solid #800;

}

#page {
    background: #ff0 no-repeat scroll center top transparent;
    height: 100%;
    margin: 0;
    min-width: 976px;
    padding: 0;
}

#container {
	width: 980px;  /* this will create a container 80% of the browser width */

	text-align: left;
	border: 0px none #fff;

	padding: 0px;
	margin-top: 15;
	margin-right: auto;
	margin-bottom: 5px;
	margin-left: auto;
	
}
.clear-kanan {
	clear: right;
}

.clear {
	clear: both;
}

.clearfix {
    overflow: auto;
}

#header {
	padding: 0 0 0 0;
	margin: 5px 5px 0px 5px;
	background: url(../bewara/head.jpg) center top no-repeat;		
	width: 100%;
	clear: both;
	height: 211px;
	float: none;

}

#kotak-tengah {
	padding: 0px 0px 0px 0px;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	height: auto;
}

#header2 {	
	margin: 0px 5px 0px 5px;
	padding: 0 0 0 0;
	width: 100%;
	clear: both;

	position: relative;
}

.isi-header {
	height: 35px;
	width: 980px;
	
	position: relative;
	text-align: center;
	margin: auto;
	font-family: 'Lora',serif;
	font-size: 15px;
	color: #fff;
}

.isi-header a {
	font-family: 'Lora',serif;
	font-size: 15px;
	color: #fff;
}

.header-kiri {
	vertical-align: middle;
	clear: none;
	height: auto;
	width: 350px;
	padding: 10px 0px 4px 22px;	
	text-align: left;
	float: left;
}

.header-tengah {
	height: auto;
	width: 200px;
	clear: none;	
	font-size: 19px;
	padding: 5px 0px 4px 0px;
	vertical-align: middle;
	text-align: center;
	margin: 0 auto;
	
}

.header-tengah a {
	font-size: 19px;
}

.header-kanan {
	height: auto;
	width: 350px;
	clear: none;
	float: right;
	padding: 10px 22px 4px 0px;
	vertical-align: middle;
	text-align: right;

}

#menu-kiri {
	min-height: 500px;
	width: 190px;
	text-align: right;
	padding: 10px 10px 10px 25px;
	border-top-color: #FFFFFF;
	border-bottom-width: 1px;
	border-bottom-color: #FF0000;
	float: left;
	clear: left;
}

#box-tengah {
	min-height: 1000px;
	width: 730px;	
	margin: 10px 12px 0px 4px;
	padding-top: 0px;
	float: right;
	position: relative;
	background: url(/assets/cucuk.jpg) bottom center no-repeat;

}

#box-judul {
	width: auto;	
	margin: 5px 17px 5px 17px;
	padding-top: 0px;
	float: right;
	position: relative;
	text-align: right;
	font-family: 'Arimo', sans-serif;
	font-size: 24px;
	color: #f00;
}

#tengah {
	left: auto;
	text-align: center;
	height: auto;
	overflow: auto;	
}

#desc {
	width: auto;	
	min-height: 60px;
	max-height: 250px;	
	padding: 5px 5px 5px 10px;
	margin: 15px 5px 15px 0;
	background-image: url(../images/gradz2.jpg);
	border-top: solid 1px #333;
	border-bottom: solid 1px #333;
	overflow: auto;
}

::-webkit-scrollbar
{
  width: 12px;  /* for vertical scrollbars */
  height: 12px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track
{
  background: rgba(80, 80, 80, 0.3);
}

::-webkit-scrollbar-thumb
{
  background: rgba(150, 150, 150, 1);
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}



.kotak-depan-judul {
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
	font-size: 16px;
	color: #f00;
	text-align: center;
	margin: 2px 0px 2px 0px;
	padding: 5px 2px 5px 0px;
}

.kotak-depan {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	color: #fff;
	margin: 2px;
	text-align: justify;
	padding: 5px 2px 5px 0px;
}

#social {
	width: 100%;
	margin: 5px 0px 0px 0px;	
}

#social1{
	width: 32%;
	float: left;

	margin: 10px 10px 0px 0px;		
}

#social2{
	width: 25%;
	float: left;

	margin: 10px 10px 0px 0px;		
}

#footer {
	margin: 10px 0px 0px 0px;	
	border-top: solid 1px #f00;
	width: 730px;
	font-family: 'Lora',serif;
	font-size: 14px;	
}

#footer-kiri {
	padding: 5px 0px 10px 0px;
	width: 44%;	
	float: left;	
}

#footer-kanan {
	padding: 15px 0px 10px 12px;
	width: 51%;	
	float: right;	
	text-align: right;
}

#right{
	text-align: center;
}

#footer .merah {
	padding: 10px 0px 5px 0px;
	color: #f00;
	font-size: 15px;
}

.merah {
	color: #f00;
}

#menu-bawah {
border: #333 solid 1px;
	min-height: 50px;
	padding: 0 0 0 0;
	margin: 8px 0 0 0;
	text-align: left;
}

#menu-bawah-pisan {
	border: #333 solid 1px;
	min-height: 50px;
	padding: 0 0 0 0;
	margin: 8px 0px 0 4px;
	text-align: right;
	width: 180px;
	float: right;
}

label{
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
float: left;
width: 80px;
text-align: right;
padding: 0 10px 0 0px;
}

input, textarea{
width: 180px;
margin-bottom: 5px;
}

.jam{
width: 40px;
}

textarea{
width: 250px;
height: 150px;
}



.boxes{
width: 1em;
}

#submitbutton{
margin-left: 120px;
margin-top: 5px;
width: 90px;
}
#field-tengah {	
	width: 500px;	
	margin: 10px 12px 0px 4px;
	padding-top: 0px;
	float: right;
	position: relative;
}

#nav-bawah {
	font: 100% 'Open Sans', sans-serif;
	font-size: 12px;
	width: 450px;
	margin-left: auto;
	margin-right: auto;
}

#nav-polos-kiri {
	width: 30%;
	float: left;	
	padding: 4px;
	text-align: right;
		clear:right;
}

#nav-polos-kanan {
	width: 64%;
	float: right;	
	padding: 4px 4px 4px 10px;

}

#nav-polos-kanan h3 {
	margin-top: 0px;
	min-height: 120px;
}

#nav-bawah-kiri {
	width: 30%;
	float: left;
	background: #c00;
	padding: 4px;
	text-align: center;
}

#nav-bawah-kanan {
	width: 64%;
	float: right;
	background: #800;
	padding: 4px 4px 4px 10px;
}

#nav-bawah a {
	color: #fff;
}

.lb-profile {
  display: block;
  min-width: 150px;
  width: auto;
  height: auto;
  min-height: 100px;
  max-width: inherit;
  border-radius: 0px;
  margin: 4px 0 0 5px;
  float: left;
 text-align: center;
}

.profile-atas {
	
	width: 150px;
	height: 213px;
	background: url(../bewara/galeri-atas.jpg) no-repeat left top;
	 z-index: 100;
}

.profile-bawah {
	width: 150px;
	height: 148px;
	overflow: hidden;
	margin: 10px 0 0px 2px;	 
	top: auto;
}

.profile-text{
	position: absolute;
	top: 50%,
	left: 5px;
	text-align: center;
	width: 150px;
	height: 100px;
	padding-top: 10px;
	padding-right: 5px;
	font-size: 12px;
	line-height: 102%;
	overflow-x: hidden;
	overflow-y: auto;
}

.profile-img{
	position: absolute;
	bottom: 6px;
	left: 7px;
	width: 150px;
	height: 150px;
}

.profile-bawah .tulisan {	
   position: absolute;
   bottom: 18px;
   left: 12px;
}

#tabel-agenda{
	width: 100%;	
}



.table {
 width: 95%;    
 margin-left: auto;
 margin-right: auto;
}

.border {
	border: 1px #f00 solid;
}
.table .th {
 background: #500;
 color: #fff;
 font-weight: bold;
 height: 22px;
 text-align: center;
 padding: 2px;
 
}

.table .tr:nth-child(even) {
 background-color: #200; 
 border-top: 1px solid #800; 
 background: #000 url(../images/gradz2.jpg) no-repeat center top;
}

.table .tr:nth-child(odd) {
 background-color: #000; 
 border-top: 1px solid #800;
 position:relative;  
}
.table .td {
 float: left;
 padding-left: 2%; 
 padding: 2px 2px 2px 5px;
}

.table .tabel-no {	
	width: 5%;	
	text-align: center;
}

.table .tabel-hari {
	width: 20%;	
	text-align: center;
}

.table .tabel-agenda {	
	width: 40%;		
}

.table .tabel-tempat{	
	width: 30%;		
}

.table .tabel-kiri {
	width: 38%;	

}
.table .tabel-kanan{
	width: 55%;	

}

.table .td .tengah {
	 position: relative;
	 margin-top: 25px;
}

#guest {
	font: 100% 'Open Sans', sans-serif;
	font-size: 12px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;	
	padding: 2px;
	border: 1px #900 solid; 
	background: #000 url(../images/gradz2.jpg) no-repeat center top;
}

#guest-tengah {
	width: '100%';
	height: 25px;
	margin: 0px 0px 0 0px;
	padding: 4px 0px 0px 8px;
	text-align: left;	
	clear:both;
	background: #800;
	
}

.guest-image {
		display: block;    
    padding: 10px 15px 10px 10px;        
    margin-left: auto;
    margin-right: auto;
}


.guest-nama {
	float: left;
	font-size: 17px;
	font-family: 'Lora',serif;
	padding: 0px 10px 2px 0px;	
}

#guest-kiri {
	width: 30%;
	float: left;	
	padding: 4px;
	text-align: right;
	clear:right;
}

#guest-kanan {
	width: 64%;
	float: right;	
	padding: 12px 4px 4px 10px;
}

.guest-appointment {
	float: right;
	padding: 0px 10px 2px 10px;	
}

.guest-appointment a {
	color: #fff;
	font-size: 13px;
}


#second{
	width:90%;
	margin-left: auto;
	margin-right: auto;
}

.marquee {
	position:relative;
  overflow:hidden;
  width:96%;
  height:22px;
	margin: 5px 20px 5px 18px;
	color: #f00;
	font: 95% 'Open Sans', sans-serif;
	font-size: 14px;
}

.marquee span {
	white-space:nowrap;	
}