body {
/* background:#CCCCCC;*/
 margin-left:10px;
 margin-right:20px;
 margin-top:55px;
 margin-bottom:0px;
 min-width:920px; /* settingan lama : min-width:1000px; */
 min-height:530px;
 
 padding: 0;
}

img {
    /* max-width: 100%;*/
	 border:none;
    }

#container {
    width:100%;  
   /* text-align:center; */
	font-family: sans-serif; 
	
	/* For WebKit (Safari, Google Chrome etc) */
		background: -webkit-gradient(linear, right bottom, right top, from(#e6e8e9), to(#e6e8e9));
		/*background: -webkit-gradient(linear, left top, left bottom, from(#495678), to(#7bc5a0));
		*//* For Mozilla/Gecko (Firefox etc) */
		/*background: -moz-linear-gradient(top, #1884d8, #b63535);*/
		background: -moz-linear-gradient(top, #e6e8e9, #e6e8e9);
		/* For Internet Explorer 5.5 - 7 */
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e6e8e9, endColorstr=#e6e8e9);
		/* For Internet Explorer 8 */
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#e6e8e9, endColorstr=#e6e8e9)";
  
}

.left{
  
  margin-left:5px; 
  margin-bottom:10px;
  padding:10px;
  float:inherit;
  /*width:30%;*/
  
  border:solid 1px white;
  overflow:auto;
  
 /* border-radius: 100%;*/ /*#5cabff*/
  background: -webkit-radial-gradient(100px 100px, circle, #cccccc, #495678);
  background: -moz-radial-gradient(100px 100px, circle, #cccccc, #495678);
  background: radial-gradient(100px 100px, circle, #cccccc, #495678);
  
  -webkit-box-shadow: 1px 15px 20px 15px rgba(, , , 1);
	box-shadow: 1px 3px 10px 1px rgba(242,247,164, 255);
  
  /* untuk di ie */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#495678, endColorstr=#cccccc);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1884d8, endColorstr=#7bc5a0)";
}

.leftdalam{
 
  margin-left:3px; 
  /*background-color:#FFFFFF; */
  margin-bottom:10px;
  padding:10px;
  float:left;
  /*width:30%;*/
  
  border:solid 1px white;
  overflow:auto;
  
 /* border-radius: 100%;*/ /*#5cabff*/
 /* background: -webkit-radial-gradient(100px 100px, circle, #cccccc, #3397d2);
  background: -moz-radial-gradient(100px 100px, circle, #cccccc, #3397d2);
  background: radial-gradient(100px 100px, circle, #cccccc, #3397d2);
  
  -webkit-box-shadow: 1px 15px 20px 15px rgba(, , , 1);
	box-shadow: 1px 3px 10px 1px rgba(242,247,164, 255);*/
  
  /* untuk di ie */
  /* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#495678, endColorstr=#cccccc);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1884d8, endColorstr=#7bc5a0)";*/

}

.right{ 
  margin-left:10px;
  margin-bottom:10px;
  padding:10px;
  float:left;
  width:60%;
  border:solid 1px red;
  overflow:auto;
  
   border-radius: 100%;
  background: -webkit-radial-gradient(100px 100px, circle, #5cabff, #000);
  background: -moz-radial-gradient(100px 100px, circle, #5cabff, #000);
  background: radial-gradient(100px 100px, circle, #5cabff, #000);
}

.circle2 {
  
  display: block;
  background: black;
  border-radius: 100%;
  height: 250px;
  width: 250px;
  margin: 0;
  background: -webkit-radial-gradient(100px 100px, circle, #5cabff, #000);
  background: -moz-radial-gradient(100px 100px, circle, #5cabff, #000);
  background: radial-gradient(100px 100px, circle, #5cabff, #000);
/*  <div class="circle2"></div>*/
}

p {
/*font-size: 1em;
line-height: 0.5em;
margin: 1.25em 0;
letter-spacing: -1px;*/
}

h1{
color:#FFFFFF;
font-variant: normal;
}

#rotator img {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out; 
-o-transition: all 1s ease-in-out; 
-ms-transition: all 1s ease-in-out; 
}

#rotator img:hover { 
-webkit-transform: rotate(360deg); 
-moz-transform: rotate(360deg); 
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg); 
}

.kecil {
	/* dipake di infodokumen */
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}

.sedang3 {
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
}

.sedang4 {
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}


.Header {
	font-family: Arial, Helvetica, sans-serif;
	color: #0056A2;
	font-size: 16px;
}


.Besar {
	font-family: Arial, Helvetica, sans-serif;
	color: #0056A2;
	
}

.Besar2 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	size:inherit;
	color: #0056A2;
}

.Besar2FontPutih {
	font-family: Arial, Helvetica, sans-serif;
	size:inherit;
	color: #FFFFFF;
}

#gradient {
		/* For WebKit (Safari, Google Chrome etc) */
		background: -webkit-gradient(linear, right bottom, right top, from(#495678), to(#CCCCCC));
		/*background: -webkit-gradient(linear, left top, left bottom, from(#495678), to(#7bc5a0));
		*//* For Mozilla/Gecko (Firefox etc) */
		/*background: -moz-linear-gradient(top, #1884d8, #b63535); #495678*/
		background: -moz-linear-gradient(left, #FFFFFF, #CCCCCC);
		/* For Internet Explorer 5.5 - 7 */
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCCCCC, endColorstr=#495678);
		/* For Internet Explorer 8 */
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#495678)";
		
	}  
	
	
	
.reflected {
    position: relative;
}
.reflected:before, .reflected:after {
    display: block;
    position: absolute;
    bottom: -.8em; /* You should change this value to fit your font */
    left: 0;
    right: 0;
}
.reflected:before {
    content: 'Monthly Monthly Line Report';
    opacity: .1;
    /* This is how the text is flipped vertically */
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
}
.reflected:after {
    /* Fading using CSS gradient */
   /* background: -webkit-gradient(linear, left top, left center, from(rgba(255,255,255,0)), to(rgb(255,255,255)));
    background: -moz-linear-gradient(top, rgba(255,255,255,0), rgb(255,255,255));*/
    content: ' ';
    height: 1em;
}


.numberCircle {
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    border-radius: 999px;
    behavior: url(PIE.htc);

    width: 10px;
    height: 10px;
    padding: 1px;

    background: #fff;
    border: 2px solid #666;
    
    text-align: center;
	font-weight:bold;
    font-size:10px;
	font-style:Arial;
}

.ranking {
    font-size:11px;
	text-align: center;
	margin-top:-12px;
	font-weight:bold;
	
}
.ranking6 {
    font-size:11px;
	color:#FFF;
	text-align: center;
	margin-top:-12px;
	font-weight:bold;
	
}

.ranking2 {
	text-align:center;
	width:50%;
	border:2px solid gray;
	margin-left:35px;
	background-color:#FFF;
	margin-top:8px;
	margin-bottom:8px;
    font-size:11px;
	text-align: center;
	font-weight:bold;
	
}


.ranking26 {
	text-align:center;
	width:50%;
	border:2px solid gray;
	margin-left:35px;
	background-color:#FFF;
	margin-top:8px;
	margin-bottom:8px;
    font-size:11px;
	text-align: center;
	font-weight:bold;
	
}


.shadow {
	-webkit-box-shadow: inset -0.5px -0.5px 5px 4px rgba(1, 1, 1, 0.3);
box-shadow: inset -0.5px -0.5px 5px 4px rgba(1, 1, 1, 0.3);
	
}





.tooltip {
			border-bottom: 1px dotted #000000; color: #000000; outline: none;
			cursor: help; text-decoration: none;
			position: relative;
		}
		.tooltip span {
			margin-left: -999em;
			position: absolute;
		}
		.tooltip:hover span {
			border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
			box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
			font-family: Calibri, Tahoma, Geneva, sans-serif;
			position: absolute; left: 1em; top: 2em; z-index: 99;
			margin-left: 0; width: 250px;
		}
		.tooltip:hover img {
			border: 0; margin: -10px 0 0 -55px;
			float: left; position: absolute;
		}
		.tooltip:hover em {
			font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
			display: block; padding: 0.2em 0 0.6em 0;
		}
		.classic { padding: 0.8em 1em; }
		.custom { padding: 0.5em 0.8em 0.8em 2em; }
		* html a:hover { background: transparent; }
		.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
		.critical { background: #FFCCAA; border: 1px solid #FF3334;	}
		.help { background: #9FDAEE; border: 1px solid #2BB0D7;	}
		.info { background: #9FDAEE; border: 1px solid #2BB0D7;	}
		.warning { background: #FFFFAA; border: 1px solid #FFAD33; }
		
		
		
-->



.kotak_div_utama {
-webkit-box-shadow: 1px 5px 20px 5px rgba(, , , 1);  box-shadow: 1px 3px 5px 3px rgba(193,189,189, 1);
border-style:solid; border-width:1; border-color:#FFF; 
   	
}

.kotak_div_isi {
-webkit-box-shadow: inset -0.5px -0.5px 5px 4px rgba(1, 1, 1, 0.3);
box-shadow: 		inset -0.5px -0.5px 5px 4px rgba(1, 1, 1, 0.3);
}

.kotak_div_isi_tanpa_shadow {
-webkit-box-shadow: inset -0.1px 0.1px 0.5px 1px rgba(1, 1, 1, 0.3);
box-shadow: 		inset -0.1px 0.1px 0.5px 1px rgba(1, 1, 1, 0.3);
}


.kotak_div_judul {

 font-size:10px;
text-transform: uppercase;
 font-weight:bold; 
 /*color:#4a8db3; */
 color:#8b1019;
 text-shadow: 0px 15px 5px rgba(0,0,0,0.1),
                 10px 20px 5px rgba(0,0,0,0.05),
                 -10px 20px 5px rgba(0,0,0,0.05);
/* margin-bottom:15px;*/
}
.kotak_div_header {
     
	font-family: Arial, Helvetica, sans-serif;
	color: #0056A2;
	font-size: 20px;
	text-shadow: 1px 1px 1px #fff, 2px 2px 2px #111;
}


.kotak_neon{
color: #FFFFFF; background-color:#333333;
text-shadow: 0 0 0px #FFFFFF, 0 0 20px #FFFFFF, 0 0 20px #FFFFFF, 0 0 30px #FF00DE, 0 0 10px #FF00DE, 0 0 10px #FF00DE, 0 0 50px #FF00DE, 0 0 50px #FF00DE;
    
}