html, body {
	margin: 0;
	padding: 0;
background-image: url("sos.png");
}


.leftmarge{
margin-left:5px;
background-color:#fafaf1;
border:1px solid #ececec;
padding:8px;
}

.ichead{color:#fff;background-color:#e4011b;margin-left:5px;padding:8px;font-weight: bold;}
.ichead img{width:20px;float:right;}

.cchead{color:#fff;background-color:#70c836;margin-left:5px;padding:8px;font-weight: bold;}
.cchead img{width:20px;float:right;}



.leftmargeWR{
margin-left:5px;
background-color:#ffe8e8;
border:1px solid #ececec;
padding:8px;
}

.leftmargeRI{
margin-left:5px;
background-color:#f5fbef;
border:1px solid #ececec;
padding:8px;
}

@font-face {
    font-family: hedn;
    src: url('hedn.ttf'); 
	 
    }


a:link {
	text-decoration: none;
	 
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}


.pixbox{width:25%;height:auto;float:left;box-sizing:border-box;border:2px solid grey;}
.pixbox img{width:100%;float:left;}
.caption{width:100%;float:left; text-align:center;background-color:white;font-size:20px;}

#clearme{clear:both;float:none;}
#hundred{width:100%;height:auto;}
.title1{width:46%;padding:1%;margin:1px;float:left;font-size:18px;BACKGROUND-COLOR: #DADFE1;margin-bottom:1px;margin-top:0px;height:25px;}
.title2{width:46%;padding:1%;margin:1px;float:left;font-size:18px;BACKGROUND-COLOR: #DADFE1;margin-bottom:1px;margin-top:0px;height:25px;}
.cell1{width:46%;padding:1%;margin:1px;float:left;BACKGROUND-COLOR: #ECF0F1;margin-top:0px;height:25px;}
.cell2{width:46%;padding:1%;margin:1px;float:left;BACKGROUND-COLOR: #ECF0F1;margin-top:0px;height:25px;}

.title13{width:30%;padding:1%;margin:1px;float:left;font-size:18px;BACKGROUND-COLOR: #DADFE1;margin-bottom:1px;margin-top:0px;height:25px;}
.title23{width:30%;padding:1%;margin:1px;float:left;font-size:18px;BACKGROUND-COLOR: #DADFE1;margin-bottom:1px;margin-top:0px;height:25px;}
.cell13{width:30%;padding:1%;margin:1px;float:left;BACKGROUND-COLOR: #ECF0F1;margin-top:0px;height:40px;}
.c3triple{height:60px;}

.celltype3{width:30%;padding:1%;margin:1px;float:left;BACKGROUND-COLOR: #ECF0F1;margin-top:0px;height:40px;}
.celltype3b{width:64%;padding:1%;margin:1px;float:left;BACKGROUND-COLOR: #ECF0F1;margin-top:0px;height:40px;}

#bar1{width:100%;background-color:#34495E;}
#bar2{width:100%;padding-top:0px;padding-bottom:0px;background-color:#ff9478;}

#bannerb{width:800px;height:auto;margin:auto;}
#banners{display:none;}
#promo{margin-bottom:5px;}

#butang{width:100px;text-align:center;background-color:#5C97BF;height:20px;padding:5px;font-size:16px;color:#fff;font-family:sans-serif;cursor:pointer;border-radius:5px;}
#butang:hover{opacity:.6;}

.maintitle{font-size:45px;font-family:hedn,Arial;}
.subtitle1x{width:auto;color:#3C3C3C;font-weight:bold;border-top:2px solid #EC644B;border-bottom:2px solid #EC644B;margin-top:8px;font-size:22px;}
.subtitle1{width:auto;color:#3C3C3C;font-weight:bold;border-bottom:2px solid #fde3a7;margin-top:8px;font-size:22px;}
#header {
	 
	background: #666666;
	height: 80px;
	background-image: url("title780.png");
	background-repeat:no-repeat;
	background-position:center;
}

#filler {height: 10px;}

#footer {
	text-align: center;
	 
	background: #67809F;
font-family: 'Open Sans', sans-serif;
	color:#EECE67;}

#footer a:link {text-decoration: none;
		color:#EECE67;}
#footer a:visited {text-decoration: none;
		color:#EECE67;}
#footer a:hover {text-decoration: none;
		color:#EECE67;}
#footer a:active {text-decoration: none;
		color:#EECE67;}



#content {
	width:900px;
	margin:auto;
      font-size:14px;
	color:#333333;
	font-family: 'Open Sans', sans-serif;
	background-color:white;	
	 padding:15px;
	 margin-top:10px;
	box-sizing:border-box;
}
#content a:hover{text-decoration: none;color:#D24D57;}

#content a:visited{text-decoration: none;color:#663399;  }

#content a:link{text-decoration: none;color:#96281B;font-weight:600;}
#content a:active{
    text-decoration: none;color:#96281B;
}
 

#element2 {
	 		
}

#nav1{
padding-left:5px;
padding-right:5px;
 width:20px;
 height:40px;
 	background-image: url("goback.png");
	 background-repeat:no-repeat;
	 background-position:center;
 	float:right;
	margin-top:-10px;
}	 

#nav1:hover{opacity:0.6;}
#nav2:hover{opacity:0.6;}
#snav1:hover{opacity:0.6;}
#snav2:hover{opacity:0.6;}
	 
#nav2{
padding-left:5px;
padding-right:5px;
 width:20px;
 height:40px;
 background-image: url("goforward.png");
 background-repeat:no-repeat;
 background-position:center;
 float:right;
 margin-top:-10px;
}

#snav1{
  
 width:40px;
 height:40px;
 	background-image: url("goback2.png");
 	 
 
background-size: 100%;
}	 
	 
#snav2{
  
 width:40px;
 height:40px;
 background-image: url("goforward2.png");
  float:left;margin-left:45px;
background-size: 100%;
}

/*Three column layout*/

div#left {
    float: left;
    width: 33%;
    
}
div#right {
    float: right;
    width: 33%;
     
}
div#middle {
	 
	width: 34%;
	float: left;
}





div#mytable{float:left;text-align:left;
width: 100%;
 
}

div#mytable td{
 
padding-left:2px; 
}


div#mytable td{
	height: 30px;width:300px;
	BACKGROUND-COLOR: #ECECEC;
}




div#mytable2{
width: 100%;
}


div#mytable2 td{
	height: 30px;
	BACKGROUND-COLOR: #EED5BB;
}

.cstyle1 {color: #8b00ff;BACKGROUND-COLOR: #8b00ff;}
.cstyle2 {color: #30d5c8;BACKGROUND-COLOR: #30d5c8;}
.cstyle3 {color: tan;BACKGROUND-COLOR: tan;}
.cstyle4 {color: #ff2400;BACKGROUND-COLOR: #ff2400;}
.cstyle5 {color: #ff007f;BACKGROUND-COLOR: #ff007f;}
.cstyle6 {color: maroon;BACKGROUND-COLOR: maroon;}
.cstyle7 {color: limegreen;BACKGROUND-COLOR: limegreen;}
.cstyle8 {color: #00a86b;BACKGROUND-COLOR: #00a86b;}
.cstyle9 {color: #b57edc;BACKGROUND-COLOR: #b57edc;}
.cstyle10 {color: beige;BACKGROUND-COLOR: beige;}
.cstyle11 {color: #00416a;BACKGROUND-COLOR: #00416a;}
.cstyle12 {color: #cd7f32;BACKGROUND-COLOR: #cd7f32;}
.cstyle13 {color: #cccccc;BACKGROUND-COLOR: #cccccc;}

.cstyle1a {color: orange;BACKGROUND-COLOR: orange;}
.cstyle2a {color: red;BACKGROUND-COLOR: red;}
.cstyle3a {color: white;BACKGROUND-COLOR: white;}
.cstyle4a {color: blue;BACKGROUND-COLOR: blue;}
.cstyle5a {color: black;BACKGROUND-COLOR: black;}
.cstyle6a {color: green;BACKGROUND-COLOR: green;}
.cstyle7a {color: yellow;BACKGROUND-COLOR: yellow;}
.cstyle8a {color: pink;BACKGROUND-COLOR: pink;}
.cstyle9a {color: purple;BACKGROUND-COLOR: purple;}
.cstyle10a {color: gray;BACKGROUND-COLOR: gray;}



@media screen and (max-width:930px) {
 
 
#content{width:90%;}
 

}




@media screen and (max-width:820px) {
 
 #header{background-image: url("title400.png");
         background-position: left;}
#content{width:90%;}
div#left {float:none; width:100%;}
div#middle {float:none;  width:100%;}
div#right {float:none;  width:100%;}
div#mytable {font-size:14px;}
div#mytable2 {font-size:14px;}

}

@media screen and (min-width:1000px) {
 #footer {position:fixed;width:100%;bottom:0;}
}

@media screen and (max-width:850px) {
 
}


@media screen and (max-width:700px) {
 .pixbox{width:33%;height:auto;float:left;}
}

@media screen and (max-width:500px) {
 .pixbox{width:50%;height:auto;float:left;}
}

@media screen and (max-width:390px) {
 .pixbox{width:100%;height:auto;float:left;}
}

@media screen and (min-width:400px) {
 
 #snav1 {visibility:hidden;height:0px;}
#snav2 {visibility:hidden;height:0px;}

}

@media screen and (max-width:430px) {


.c430{height:40px;}

}

@media screen and (max-width:400px) {

 #nav1 {visibility:hidden;}
#nav2 {visibility:hidden;}
.bigpic img{width:100%; }
.title1{height:50px;}
.title2{height:50px;}
.cell1{height:40px;}
.cell2{height:40px;}
.title13{height:50px;font-size:15px;}
.title23{font-size:15px;height:50px;}
.cell13{height:40px;}
.cell13long{font-size:12px}
}


@media screen  and (max-width:820px){
#bannerb{width:100%;}
#bannerb img{width:100%;}
#bar1{}
}


@media screen  and (max-width:600px){
#bannerb{display:none;}
#banners{width:100%;display:inline;}
#banners img{width:100%;}
#bar1{}
}

@media screen  and (max-width:350px){

	#banner img{width:100%;height:auto;}
}