@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700);

body {background: #7c5218;font-family: 'Open Sans',Arial,helvetica, sans-serif;}


h1 {font-size: 1.5em; text-align: center; text-decoration: none; color: #7c5218; font-weight: bold; font-family: verdana}

h2 {font-size: 1.3em; text-align: left; text-decoration: none; color: #0066ff; font-weight: bold; font-family: verdana}

h3 {font-size: 1.0em; text-align: left; text-decoration: none; color: #0066ff; font-weight: bold; font-family: verdana}

h4 {font-size: 1em; text-align: left; text-decoration: none; color: #006666; font-weight: bold; font-family: verdana}

@media all and (min-width: 1000px) 
{ #container
   {
	padding:1em 1em 2em 1em; 
	margin: auto;
	background:#ffffff;
	width:85%; 

   }
}

@media all and (min-width: 840px)  and (max-width: 1000px) 
{ #container
   {
	padding:1em 2em 2em 1em; 
	margin: auto;
	background:#ffffff;
	width:98%; 

   }
}


@media all and (max-width: 840px) 
{ #container 
   {
	padding:1em 2em 2em 1em; 
	margin: auto;
	background:#ffffff;
	width:96%; 

   }
}


@media all and (min-width: 840px)
{ #header 
   {
	width:100%; 
        height:70px;
        margin: 0 auto; 
        text-align: center;
   } 
}  

@media all and (max-width: 840px)
{ #header 
   {
        background-image: none; 
        background: #ffffff; 
        margin: 0 auto; 
   } 
}  

#contact 
   {
        width: 100%;
        padding: 1.3%;
        text-align: center;  
        color:#ffffff;
        background: #900000;
        font-size: 1.0em;
        font-family: verdana      
   } 
 
#topcontent #bottomcontent #processpic #footnote
   {
        width: 100%;
        padding: 1.3%;
   } 
 
@media all and (min-width: 840px)
{ #linkmenu 
   {
        background-image: none; 
        background: #ffffff; 
        float: left; 
        width: 32%;
   
   } 
}   

@media all and (max-width: 840px)
{ #linkmenu 
   {
        background-image: none; 
        background: #ffffff; 
        width: 100%;
   } 
}   

@media all and (min-width: 840px)
{ #linkmenu2 
   {
        display: none; 
   } 
}  

@media all and (max-width: 840px)
{ #link2kiri
   {
        float: left; 
        width: 40%;
   } 
}  

@media all and (max-width: 840px)
{ #link2kanan
   {
        float: right; 
        width: 60%;
   } 
}   



@media all and (min-width: 840px)
{ #linkmenu1 
   {
        background-image: none; 
        background: #ffffff; 
        width: 90%;
   } 
} 

@media all and (min-width: 840px)
{ #cartadaftar
   {
        background-image: none; 
        background: #ffffff; 
        width: auto;
	float:left;
   } 
}  

img.daftar
{
    max-width:600px;
    width: auto;
    height: auto;

}

@media all and (max-width: 840px)
{ #linkmenu1
   {
        display: none; 
   } 
} 

@media all and (max-width: 840px)
{ #cartadaftar
   {
	display:none;
   } 
} 

@media all and (max-width: 840px)
{ #linkmenu2
   {
        background:#ffffff;
        display:block;
        color:#000099;
   } 
} 

@media all and (max-width: 840px)
{ #processpic
   {
        display: none; 
   } 
} 

@media all and (min-width: 840px)
{ #processpic
   {
        background-color: #ffffff; 
   } 
} 

.thumbnail {
    float: left;
    width: 90px;
    height: 120px;
    margin: 5px;
}

.text-line {
    clear: both;
}

#tinybox {position:absolute; display:none; padding:10px; background:#fff url(images/preload.gif) no-repeat 50% 50%; border:10px solid #e3e3e3; z-index:2000}#tinymask {position:absolute; display:none; top:0; left:0; height:100%; width:100%; background:#000; z-index:1500}#tinycontent {background:#fff}.button {font:11px Arial; margin-bottom:5px; padding:0px 0px 0px; border:0px solid #fff; background:#fff; cursor:pointer}.button:hover {border:0px solid #000; background:#fff}
.button {font:11px Arial; margin-bottom:5px; padding:0px 0px 0px; border:0px solid #fff; background:#fff; cursor:pointer}
.button:hover {border:0px solid #000; background:#fff}

@media all and (max-width: 840px)
{ #jakim
   {
        display: none; 
   } 
} 

@media all and (min-width: 840px)
{ #jakim 
   {
        background-image: none; 
        float: right; 
        width: 68%;
        border:2px solid #a1a1a1;
        padding:5px 30px; 
        background:#dddddd;
   } 
}   


@media all and (max-width: 840px)
{ #cv
   {
   
        background-image: none; 
        width: 90%;
        padding:5px 30px; 
        background:#ffffff;
   
   } 
} 

@media all and (min-width: 840px)
{ #cv 
   {
        background-image: none; 
        float: right; 
        width: 68%;
        border:2px solid #a1a1a1;
        padding:5px 30px; 
        background:#dddddd;
   } 
}   



@media all and (min-width: 840px)
{ #botleft 
   {
        background-image: none; 
        background: #ffffff; 
        float: left; 
        width: 45%;
        padding: 0.5em;
   } 
}   

@media all and (min-width: 840px)
{ #botright 
   {
        background-image: none; 
        background: #ffffff; 
        float: right; 
        width: 45%;
        padding: 0.5em;
   } 
}  

@media all and (min-width: 840px)
    { #bottext { width: 100%;
          -webkit-column-count: 2; /* Chrome, Safari, Opera */
          -moz-column-count: 2; /* Firefox */
           column-count: 2;
           background-color: #ffffff; 

	  -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    	  -moz-column-gap: 40px; /* Firefox */
    	  column-gap: 40px;
    }
}

@media all and (max-width: 840px)
{ #bottext
   {
        background-image: none; 
        background: #ffffff; 
        width: 100%;

   } 
}   

@media all and (max-width: 750px)
{ #botright 
   {
        background-image: none; 
        background-color: #ffffff; 
        width: 100%;
   } 
}  

#chartadaftar

   {
        background-image: none; 
        background-color: #ffffff; 
        width: 100%;
        float:left;
   } 
  
#copyright
   {  
        width: 97.5%;
        padding: 0 1.3%;
        background: #990000;
        margin: auto;

   }

p {font-size: 1.0em;

   text-align: justify;

 }

p.header {font-size: 1.2em;
   font-family: palatino;
   text-align: center;
   color: #0000ff;
 }

p.footer {font-size: 1.0em;
   font-family: palatino;
   text-align: center;
   background: #660000;
   color:#ffff00;
 }

p.main2 {font-size: 16px;

   text-align: justify;
   color: #000000;
 }



li {font-size: 16px;

   text-align: justify;
   margin: 10px 0px
   }

ul.header  {font-size: 1.3em;
   font-family: palatino;
   text-align: justify;
   color:#990000;
   }

ul {font-size: 16px;

   text-align: justify;
   color:#000000;
   }

ol {font-size: 16px;

   text-align: justify;
   color:#000000;
   }

.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 210px; /* Main Menu Item widths */
border-bottom: 1px solid #ccc;
}
 
.sidebarmenu ul li{
position: relative;
}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #012D58; /*background of tabs (default state)*/
}

.sidebarmenu ul li a:visited{
color: white;
}

.sidebarmenu ul li a:hover{
background-color: #f65527;
}

/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 90%; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}

.sidebarmenu a.subfolderstyle{
background: url(images/right.gif) no-repeat 97% 50%;
}

 
/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */

.hometxt {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #1c5d09;
	text-align: justify;
	text-decoration:none;
}

.leftpic {
    float:left;
    margin:2%;
}

img.leftpic
{
    max-width:162px;
    width: auto;
    height: auto;
}

.lefttxt {
    width: 55%;
    float:right;
    padding:0;
    margin:0;
}

@media all and (max-width: 750px)
{ .leftpic
   {
        background: #ffffff; 
        width: 100%;
   } 
}  

@media all and (max-width: 750px)
{ .lefttxt
   {
        background: #ffffff; 
        width: 100%;
   } 
} 


img
{
    max-width:100%;
    width: auto;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto
}

img.grad
{
    max-width:100%;
    width: auto;
    height: auto;
    display: block;
    margin-left: 0;
}

.lokasi {
        background-color: #ffffff; 
        color: #cc0000; 
        font-weight: bold; 
        text-align: center;
        text-decoration: none
}

.amaran
{
        font-family: palatino; 
        font-size: 1.5em; 
        color: #cc0000; 
        font-weight: bold; 
        text-decoration: none
}

a:link {font-family: palatino; font-size: 1.0em; color: #3399cc; font-weight: bold; text-decoration: none} 
a:visited {font-family: palatino; font-size: 1.0em; color: #3399cc; font-weight: bold; text-decoration: none} 
a:hover {font-family: palatino; font-size: 1.0em; color: #ff9933; font-weight: bold; text-decoration: none} 
a:active {font-family: palatino; font-size: 1.0em; color: #999900; font-weight: bold; text-decoration: none}

a.leftlink:link {font-family: verdana; font-size: 1.0em; color: #1c5d09; font-weight: normal; text-decoration: none} 
a.leftlink:visited {font-family: verdana; font-size: 1.0em; color: #3399cc; font-weight: normal; text-decoration: none} 
a.leftlink:hover {font-family: verdana; font-size: 1.0em; color: #ff9933; font-weight: normal; text-decoration: none} 
a.leftlink:active {font-family: verdana; font-size: 1.0em; color: #999900; font-weight: normal; text-decoration: none}

a.hline:link {font-family: verdana; font-size: 1.0em; color: #cccc00; font-weight: normal; text-decoration: none} 
a.hline:visited {font-family: verdana; font-size: 1.0em; color: #cccc00; font-weight: normal; text-decoration: none} 
a.hline:hover {font-family: verdana; font-size: 1.0em; color: #ffffff; font-weight: normal; text-decoration: none} 
a.hline:active {font-family: verdana; font-size: 1.0em; color: #ffff00; font-weight: normal; text-decoration: none}

a.hometxt:link {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #1c5d09; text-align: justify;  text-decoration: none; font-weight:bold}
a.hometxt:visited {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #1c5d09; text-align: justify;  text-decoration: none;  font-weight:bold}
a.hometxt:hover {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000099; text-align: justify;  text-decoration: none}
a.hometxt:active {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #1c5d09; text-align: justify;  text-decoration: none}

a.main1:link {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #1c5d09; text-align: justify;  text-decoration: none; font-weight:bold}
a.main1:visited {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #1c5d09; text-align: justify;  text-decoration: none;  font-weight:bold}
a.main1:hover {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000099; text-align: justify;  text-decoration: none}
a.main1:active {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #1c5d09; text-align: justify;  text-decoration: none}

table { font-size: 100%; border: 0; }
th { text-align: left; }
tr.tblhdr { background: #999; }

#legal { font-size: .9em; color: #666; }
strong { font-weight: bold; color: #1c5d09; }



.div1 {
    width: 80%;
    padding: 0em 1em;
    border: 1px solid red;
    margin: 0 auto;
}