//* CSS Document */
body{
	background-color:White;
	background-position: center;
} 
#border{
    border: 1px solid black;
    margin-top: 1000px;
    margin-bottom: 1000px;
    margin-right: 1500px;
    margin-left: 1500px;
    background-color: #000000;

}


/*1. WRAPPER------------------------*/
#wrapper{
	width:1000px;
	height:300px;
	background-color:#666666;
	margin-right:auto;
	margin-left:auto;
	
}
/*2.Header---------------------------*/
#header{
	width:1000px;
	height:200px;
	margin-right:auto;
	margin-left:auto;
	background-color:violet;
	background-image:;
}	
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width:100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: center;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}	
}
/*3.SEARCH---------------------------*/
#search{
       width:255px;
	   height:25px;
	   float:right;
       padding-top:9px;
}
/*4.MENU-----------------------------*/
#menu{
        width:1000px;
		height:200px;
		margin-right:auto;
		margin-left:auto;
		background-color:;
}
#menu ul{
  list-style-type:none;/*membuang bullet/numbering*/
  margin:0;
  padding:0;
  overflow:hidden;/*mengawal kandungan samaada hidden,scroll*/
  background-color:silver;/*warna <ul>*/
  font-family:,Helvetica,sans-serif;/*menetapkan jenis tulisan*/
  font-size:18px;/*menetapkan saiz tulisan*/
} 
#menu li{
float:left;/*Kedudukan List Item*/
}
#menu li a{
  display:inline-block;/*Membentuk blok*/
  color:black;/*warna tulisan*/
  text-align:center ;/*(jajaran tulisan*/
  padding:9px 25px;
  text-decoration:none;/*membuang underline pada pautan*/
}
#menu li a:hover{
  background-color:#2099E2;/*warna bagi bila dituding/hover*/
 }
 /*---------------SUB MENU-------------------------*/
#menu li ul {
   position:absolute ;/*Kedudukan paparan submenu absolute-akan keluar dari posisi asal */
   display:none;/* None -submenu tidak dipaparkan jika tidak dituding*/
   width:inherit;
   } 
#menu li:hover ul{
   display:block;/*bentuk paparan submenu */


}
/*5.CONTENT--------------------------*/
#content{
        width:1000px;
		height:800px;
		margin-right:auto;
		margin-left:auto;
		background-color:white;
}
.card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 400px;
    height: 300px;
    background: #262626;
    overflow: hidden;
}
.card .imgBx,
.card .details {
    width: 400px;
    height: 300px;
    position: absolute;
    box-sizing: border-box;
    transition: .5s;
}
.card .imgBx {
    top: 0;
    left: 0;
}
.card:hover .imgBx {
    top: 0;
    left: -100%;
}
.card .imgBx img {
    width: 100%;
}
.card .details {
    background: #262626;
    top: 0;
    left: 100%;
    padding: 60px 30px;
}
.card:hover .details {
    top: 0;
    left: 0%;
}
.card .details h2 {
    color: #fff;
    text-align: center;
    margin: 0;
    padding: 0 0 10px;
    border-bottom: 2px solid #fff;

}
.card .details p {
    margin: 20px 0 0;
    color: #fff;
}

/*6.SUBCONTENT-----------------------*/
#subcontent{
        width:1000px;
		height:500px;
		margin-right:auto;
		margin-left:auto;
		background-color:white;
}
.main {
    max-width: 1000px;
    margin: auto;
}

h1 {
    font-size: 50px;
    word-break: break-all;
}

.row {
    margin: 10px -16px;
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
    padding: 8px;
}

/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 33.33%;
    display: none; /* Hide all elements by default */
}

/* Clear floats after rows */ 
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Content */
.content {
    background-color: white;
    padding: 10px;
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}
* {
    box-sizing: border-box;
}

input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

label {
    padding: 12px 12px 12px 0;
    display: inline-block;
}

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
}

input[type=submit]:hover {
    background-color: #45a049;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

.col-25 {
    float: left;
    width: 25%;
    margin-top: 6px;
}

.col-75 {
    float: left;
    width: 75%;
    margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .col-25, .col-75, input[type=submit] {
        width: 100%;
        margin-top: 0;
    }
}

/* DEMO-SPECIFIC STYLES */
.typewriter  {
  color: black;
  font-family: monospace;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}



.accordion {
    background-color:white;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align:center;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.active, .accordion:hover {
    background-color: #ccc; 
}

.panel {
    padding: 0 18px;
    display: none;
    background-color: white;
    overflow:hidden;
	text-align:center;
}
.panel a{
    padding: 0 18px;
    display: none;
    background-color: white;
    overflow: hidden;
	text-align:justify;
}
/*7.SIDEBAR--------------------------*/
#sidebar{
	width:400px;
	height:300px;
	background-color:Orange;
	float:justify;	
}

.card a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 400px;
    height: 300px;
    background: #262626;
    overflow: hidden;
}
.card .imgBx,
.card .details {
    width: 400px;
    height: 300px;
    position: absolute;
    box-sizing: border-box;
    transition: .5s;
}
.card .imgBx {
    top: 0;
    left: 0;
}
.card:hover .imgBx {
    top: 0;
    left: -100%;
}
.card .imgBx img {
    width: 100%;
}
.card .details {
    background: #262626;
    top: 0;
    left: 100%;
    padding: 60px 30px;
}
.card:hover .details {
    top: 0;
    left: 0%;
}
.card .details h2 {
    color: #fff;
    text-align: center;
    margin: 0;
    padding: 0 0 10px;
    border-bottom: 2px solid #fff;

}
.card .details p {
    margin: 20px 0 0;
    color: #fff;
}

/*7.SIDEBAR--------------------------*/
#Ayat{
	width:200px;
	height:255px;
	background-color:blue;
	float:right;	
}
/*FLASHBAR---------------------------*/
#flashbanner{
	width:1000px;
	height:300px;
	background-color:silver;
	float:right;
}
/*8.FOOTER----------------------------*/
#footer{
	width:1000px;
	height:50px;
	margin-right:auto;
	margin-left:auto;
	background-color:white;

}