@charset "utf-8";
/* CSS Document */

body {
	background:#EEE;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;
	padding:0;
	margin:0;
	
	
	
}

input[type="text"], input[type="password"], select, textarea {
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;
	padding:5px;
	border:1px solid #CCC;
}
	
	input[type="text"]:hover, input[type="password"]:hover, select:hover, textarea:hover {
		border:1px solid #333;
	}
	
	input[type="text"]:focus, input[type="password"]:focus, select:focus, textarea:focus {
		border:1px solid #333;
		box-shadow:0px 0px 3px #666666 inset;
	}

input[type="submit"] {
	background:#426CFF url(../images/button-save.png) 5px 5px no-repeat;
	border:1px solid #03F;
	padding:5px 10px 5px 23px;
	font-weight:bold;
	color:#FFF;
	cursor:pointer;
}

	input[type="submit"]:hover {
		background:#09F url(../images/button-save.png) 5px 5px no-repeat;
	}
	
	input[type="submit"]:active {
		background:#03F url(../images/button-save.png) 5px 5px no-repeat;
		box-shadow:0px 0px 3px #555;
	}

#container {
	margin:0 auto;
	height:800px;
	
}

#header {

	padding:10px 20px;
	color:#FFF;
	background: url('../images/bg.jpg') no-repeat scroll;
	background-size: 100% 100%;
	min-height: 100px;
}

	#header #logo {
		float:left;
	}
	
	#header a {
		color:#CCC;
	}



#shortcut {
	text-align:center;
}

	#shortcut a {
		background:#FFF;
		display:inline-block;
		border:1px solid #999;
		height:85px;
		width:85px;
		text-align:center;
		color:#444;
		text-decoration:none;
		padding:5px;
		margin:0px 5px;
		box-shadow:1px 1px 3px #CCC;
	}
	
		#shortcut a:hover {
			box-shadow:0px 0px 5px #555;
		}

#content {
	margin:20px;
	color:#555;
}

	#content #body {
		background:#FFF;
		margin-bottom:20px;
		border:1px solid #CCCCCC;
		box-shadow:0px 0px 3px #CCC;
	}
		
		#content #body .title {
			background:url(../images/bg-body-title.png) repeat-x;
			padding:7px 10px;
			font-size:14px;
			font-weight:bold;
			text-shadow:1px 1px 2px #DDD;
			color:#000;
		}
		
		#content #body .body {
			padding:7px 10px;
		}
		
			#content #body .body a.submenu {
				display:block;
				font-weight:bold;
				text-decoration:none;
				color:#555;
				font-size:14px;
				padding:7px 10px;
				border-bottom:1px dotted #555;
			}
			
				#content #body .body a.submenu img {
					margin:0 5px -4px 0;
				}
				
				#content #body .body a.submenu:hover {
					color:#000;
					border-bottom:1px dotted #000;
					text-shadow:1px 1px 2px #CCC;
				}
				
				#content #body .body #stat {
					font-size:14px;
					font-weight:bold;
					padding:7px 5px;
					border-bottom:1px dotted #555;
				}
				
					#content #body .body #stat .value {
						float:right;
					}

#footer {
	background-color:#300505;
	padding:10px 20px;
	color:#FFF;
	text-align:center;
}

.table {
	border-collapse:collapse;
	box-shadow:0px 0px 3px #CCC;
	margin-bottom:20px;
}

	.table, .table th, .table td {
		border:1px solid #CCC;
		padding:7px 10px;
	}
	
	.table .th {
		background:url(../images/bg-body-title.png) repeat-x;
		font-size:14px;
		font-weight:bold;
		color:#000000;
		text-shadow:1px 1px 2px #DDD;
	}
		
		.table td img {
			margin:0 5px -3px 5px;
		}
		
		.table tr.td:hover {
			background:#AFD7FE;
			color:#000000;
			text-transform:1px 1px 2px #777;
		}
		
a.red {
	display:inline-block;
	background:#F74F4F;
	color:#FFF;
	font-weight:bold;
	padding:6px 10px;
	text-decoration:none;
	border:1px solid #900;
	margin:5px;
}

	a.red img {
		margin:0 5px -4px 0;
	}

a.orange {
	display:inline-block;
	background:#F90;
	color:#FFF;
	font-weight:bold;
	padding:6px 10px;
	text-decoration:none;
	border:1px solid #F63;
	margin:5px;
}

	a.orange img {
		margin:0 5px -4px 0;
	}

a.green {
	display:inline-block;
	background:#72FF6F;
	color:#FFF;
	font-weight:bold;
	padding:6px 10px;
	text-decoration:none;
	border:1px solid #090;
	margin:5px;
}

	a.green img {
		margin:0 5px -4px 0;
	}
	
a.blue {
	display:inline-block;
	background:#426CFF;
	color:#FFF;
	font-weight:bold;
	padding:6px 10px;
	text-decoration:none;
	border:1px solid #03F;
	margin:5px;
}

	a.blue img {
		margin:0 5px -4px 0;
	}

.mgs-blue {
	border:1px solid #03F;
	background:#7D9AFF;
	padding:5px 10px;
	color:#FFF;
	margin:5px;
}

	.mgs-blue img {
		float:left;
		padding-right:10px;
	}

.mgs-red {
	border:1px solid #F53434;
	background:#F97777;
	padding:5px 10px;
	color:#FFF;
	margin:5px;
}

	.mgs-red img {
		float:left;
		padding-right:10px;
	}

.mgs-green {
	border:1px solid #090;
	background:#39E146;
	padding:5px 10px;
	color:#FFF;
	margin:5px;
}

	.mgs-green img {
		float:left;
		padding-right:10px;
	}		
	
	
.desc {
	font-size:10px;
	color:#999;
}

.clear {
	clear:both;
}
#wrapper-footer{
	background:#2b2b2b;
	height:50px; 
	line-height : 50px;
	text-align : center;
	color : #8f8f8f;
}
#main_container {
	position: relative; 
	width: 1360px; 
	margin: 0 auto; 
	padding: 0; 

	
	
	}
/*Drop down menu*/
	
.menu, .menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
position:relative;
}
.menu {
    height: 58px;
	position:absolute;
	
}
.menu li {
    background:#22313F;
    min-width: 160px;
	
}
.menu > li {
    display: block;
    float: left;
    position: relative;
	position:relative;
}
.menu > li:first-child {
    border-radius: 0;
	
}
.menu a {
    color: #fff;
    display: block;
    font-family: 'Lucida Console';
    font-size: 20px;
    line-height: 54px;
    padding: 0 127.7px;
    text-decoration: none;
    text-transform: uppercase;
	

}

.menu li:hover {
    background-color: #16a085;
}
.menu li:hover > a {
    border-radius: 0;
    color: #2c3e50;
}

/* submenu styles */
.submenu {
    left: 0;
    max-height: 0;
    position: absolute;
    top: 100%;
    z-index: 0;

    -webkit-perspective: 400px;
    -moz-perspective: 400px;
    -ms-perspective: 400px;
    -o-perspective: 400px;
    perspective: 400px;
}
.submenu li {
    opacity: 0;

    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);

    -webkit-transition: opacity .4s, -webkit-transform .5s;
    -moz-transition: opacity .4s, -moz-transform .5s;
    -ms-transition: opacity .4s, -ms-transform .5s;
    -o-transition: opacity .4s, -o-transform .5s;
    transition: opacity .4s, transform .5s;
}
.menu .submenu li:hover a {
    border-radius: 0;
    color: #2c3e50;
}
.menu > li:hover .submenu, .menu > li:focus .submenu {
    max-height: 2000px;
    z-index: 10;
}
.menu > li:hover .submenu li, .menu > li:focus .submenu li {
    opacity: 1;

    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}

/* CSS3 delays for transition effects */
.menu li:hover .submenu li:nth-child(1) {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
.menu li:hover .submenu li:nth-child(2) {
    -webkit-transition-delay: 50ms;
    -moz-transition-delay: 50ms;
    -ms-transition-delay: 50ms;
    -o-transition-delay: 50ms;
    transition-delay: 50ms;
}
.menu li:hover .submenu li:nth-child(3) {
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -ms-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}
.menu li:hover .submenu li:nth-child(4) {
    -webkit-transition-delay: 150ms;
    -moz-transition-delay: 150ms;
    -ms-transition-delay: 150ms;
    -o-transition-delay: 150ms;
    transition-delay: 150ms;
}
.menu li:hover .submenu li:nth-child(5) {
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}
.menu li:hover .submenu li:nth-child(6) {
    -webkit-transition-delay: 250ms;
    -moz-transition-delay: 250ms;
    -ms-transition-delay: 250ms;
    -o-transition-delay: 250ms;
    transition-delay: 250ms;
}
.menu li:hover .submenu li:nth-child(7) {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}
.menu li:hover .submenu li:nth-child(8) {
    -webkit-transition-delay: 350ms;
    -moz-transition-delay: 350ms;
    -ms-transition-delay: 350ms;
    -o-transition-delay: 350ms;
    transition-delay: 350ms;
}

.submenu li:nth-child(1) {
    -webkit-transition-delay: 350ms;
    -moz-transition-delay: 350ms;
    -ms-transition-delay: 350ms;
    -o-transition-delay: 350ms;
    transition-delay: 350ms;
}
.submenu li:nth-child(2) {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}
.submenu li:nth-child(3) {
    -webkit-transition-delay: 250ms;
    -moz-transition-delay: 250ms;
    -ms-transition-delay: 250ms;
    -o-transition-delay: 250ms;
    transition-delay: 250ms;
}
.submenu li:nth-child(4) {
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}
.submenu li:nth-child(5) {
    -webkit-transition-delay: 150ms;
    -moz-transition-delay: 150ms;
    -ms-transition-delay: 150ms;
    -o-transition-delay: 150ms;
    transition-delay: 150ms;
}
.submenu li:nth-child(6) {
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -ms-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}
.submenu li:nth-child(7) {
    -webkit-transition-delay: 50ms;
    -moz-transition-delay: 50ms;
    -ms-transition-delay: 50ms;
    -o-transition-delay: 50ms;
    transition-delay: 50ms;
}
.submenu li:nth-child(8) {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
/*------------------------------------------------*/
.kolom {
	width : 280px;
	margin-right : 40px;

	float : left;
	line-height : 150%;
	padding : 15px 0;
	text-align : justify;
}


/* basic styling first By : www.alexjoen.web.id  */

.lifted_content_box {
    display: block;
    width: 500px;
    margin: 0 auto;
    position: relative;
	float : right;
}

.lifted_content_box h1 {
    font-size: 14px;
    font-weight: bold;
    line-height: 2em;
    margin: 0; /* for the triangular shape/cut */
    height: 0;
    border-bottom: 25px solid #505050; /* kinda acts as the height */
    border-right: 15px solid transparent; /* adjust to change the angle */
    display: inline-block;
    color: #fff;
    text-shadow: 1px 1px 0 #585858;
    padding: 0 10px;
    vertical-align: bottom; /* fixes the mysterious gaps bug */
}

.lifted_content_box div {
    padding: 10px;
    background: #fff;
    border-top: 5px solid #505050; /* was just experimenting. gives a nice look and feel: D */;
    -webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.20);
    -moz-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.20);
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.20);
}

.lifted_content_box p {
    margin: 0 0 10px;
    color: #555;
    line-height: 1.5em;
}

/* lifted shadows  */

.lifted_content_box::before,
.lifted_content_box::after {
    content: '';
    position: absolute;
    width: 50%; /* maybe we could set a max-width for larger content boxes ? */
    height: 20px;
    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    -webkit-transform: rotate(-5deg) skew(-10deg);
    -moz-transform: rotate(-5deg) skew(-10deg);
    -o-transform: rotate(-5deg) skew(-10deg);
    -ms-transform: rotate(-5deg) skew(-10deg);
    transform: rotate(-5deg) skew(-10deg);
    left: 10px;
    bottom: 13px;
    z-index: -1;
}

.lifted_content_box::after {
    left: auto;
    right: 10px;
    -webkit-transform: rotate(5deg) skew(10deg);
    -moz-transform: rotate(5deg) skew(10deg);
    -o-transform: rotate(5deg) skew(10deg);
    -ms-transform: rotate(5deg) skew(10deg);
    transform: rotate(5deg) skew(10deg);
}
/*------------------------------------------------*/