*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}


body{
	background: #656667;
	font-family: 'Helvetica', arial, sans-serif;
	font-size: 14px;
}

p{
	margin-bottom: 10px;
	line-height: 1.5em;
}

h1{
	font-size: 24px;
}

h2{
	font-size: 20px;
}

h3{
	font-size: 16px;
}

a{
	text-decoration: none;
	color: #333;
}
a:hover{
	/*color: #a60e0e;*/
	background-color : #cfdf9b;
}


.container{
	max-width: 1080px;
	margin: 20px auto;
	background: #fff;
	overflow: hidden;
	padding: 10px;
	border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 8px rgba(0,0,0,0.5);
}


.header{
	/*border: 1px solid #dedede;
	background-color : #0559ad;*/
	color : #fff;
	padding: 5px;
	margin: 5px;
	float: left;
}

/* Main */
	.right{
		width: 870px;
		border: 1px solid #dedede;
		padding: 10px;
		margin: 10px;
		float: left;
	}
	.right ul{
		list-style-type: none;
	}
	.right ul li{
		display: block;
	}
	.right ul li a{
		display: block;
		margin-bottom: 10px;
		padding: 5px 5px;
	}
	.right ul li a:hover{
		color: blue;
	}

.footer{
	clear: both;
	height: 40px;
	padding: 5px;
	margin: 10px;
	text-align: center;
	color : white;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* untuk ukuran 1080px kebawah */
@media screen and (max-width: 1080px) {
	
	.container {
		width: 100%;
	}

	.right {
		clear: both;
		padding: 1% 4%;
		width: auto;
		float: none;
	}
}


/* untuk ukuran layar 700px kebawah */
@media screen and (max-width: 780px) {
	
	.header, 
	.footer{
		text-align: center;
	}

	.right {
		width: auto;
		float: none;
	}

}
/*--------- button ------------- */
.button{
    background-color: white;
    color: black;
    border: 1px solid #6b6669;
    border-radius: 3px;
    /*box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);*/
    text-align: center;
    margin: 5px 2px;
    padding: 5px 25px;
    cursor: pointer;
}
.button:hover{
    background-color: #e2e3ed;
    color: 9f9fa9;
}
/*-------- form --------- */

form {
	border: 0px ;
}
form input {
	font-size: 13px;
	width:auto;
	margin: 0 0 5px 0px;
	height : 30px;
	padding-top : 4px;
	padding-left : 5px;
	padding-bottom : 5px;
}
form input.highlight {
	font-size: 13px;
	width:auto;
	margin: 0 0 5px 0px;
	height : 30px;
	padding-left : 5px;
	padding-bottom : 5px;
}
.input1{
	font-size: 13px;
	width:auto;
	margin: 0 0 5px 0px;
	height : 30px;
	padding-left : 5px;
	padding-bottom : 5px;
}
/*------ box ---- */
.box{
	width: auto;
	height: auto;
	border: 1px solid #dedede;
	background: #efffd7;
	margin: 0 1px 0px 10px;
	padding-left : 5px;
	padding-right : 5px;
	float: left;
}