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

#wrapper {
width:1080px;
margin:0 auto;
height:0 auto;
}
#header {
background:#FFF;
}
#header1 {
font-size:20px;
width:300px;
padding:0px 0px 0px 20px;
}
#header2 {
font-size:20px;
width:300px;
padding:0px 0px 0px 20px;
}
#header3 {
font-size:20px;
width:1070px;
height:300px;
padding:0px 0px 0px 20px;
}
#header4 {
font-size:20px;
width:300px;
padding:0px 0px 0px 20px;
}
input[type=text] {
width: 130px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
/* When the input field gets focus, change its width to 100% */
input[type=text]:focus {
width: 100%;
}
/* Add a black background color to the top navigation */
#navigation ul {
margin:0;
padding:0;
list-style-type:none;
float:center;
overflow:hidden;
background:#333;
width:100%;
}
#navigation ul li {
float:left;
width:auto;
}
#navigation ul li a {
display:block;
padding:20px 50px;
color:#000000;
text-decoration:none;
font-family:Calibri;
font-size:2.1em;
font-weight:bold;
text-align:center;
color:#FFF;
}
#navigation ul li a:hover:not(.active) {
color:#FFF;
background:#CCC;
}
#navigation .active{
background-color:#FCC;
}
#navigation ul li a:hover .dropdown:hover .dropbtn {
color:#FFF;
background:#F3C;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #666;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
#content_area {
clear:both;
padding-top:10px;
}
#content {
float:left;
width:50%;
height:480px;
border:double;
padding-right:0px;
}
#content1 {
float:left;
width:50%;
border:double;
font-size:25px;
}
#content2 {
float:left;
width:50%;
height:400px;
border:double;
padding-right:0px;
}
#content3 {
background:#FFF;
}
#content4 {
float:left;
width:100%;
height:auto;
border:double;
padding-right:0px;
background-image:url(../Images/Logo%20Tempahan%20Gelanggang.jpg);
color:#FFF;
}
#content5 {
float:left;
width:auto;
height:auto;;
padding-right:0px;
}
content6 {
float:left;
width:50%;
height:480px;
border:double;
padding-right:0px;
}
#content h1, #content p #content img{
padding:0 10px 0 20px;
}
#content h2 {
font-size:3.0em;
margin:0;
}
#content p {
font-size:1.2em;
}
#block {
float:right;
width:48%;
height:480px;
border:double;
}
#block2 {
float:left;
width:50%;
height:200px;
border:double;
}
#block3 {
}
.block {
border:1px solid #000;
padding:10px;
margin:5px;
}
#sidebar {
float:right;
width:48%;
height:410px;
border:double;
}
#sidebar2 {
float:right;
width:48%;
height:410px;
border:double;
}
#sidebar3 {
float:right;
width:48%;
height:710px;
border:double;
margin-top:-100px;
}
#sidebar4 {
float:right;
width:48%;
height:480px;
border:double;
margin-top:;
font-size:15px;
}
#footer {
clear:both;
background:#0F9;
width:100%;
}
#footer1 {
clear:both;
background:#0F9;
width:100%;
color:#06F;
font-size:1.5em;
}
#footer p {
padding:0px 0px;
color:#06F;
font-size:1.5em;
margin:0;
}
/* Style the tab */
div.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
div.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 15px 60px;
transition: 0.3s;
}
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
div.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
/* Suggestions */
input [type=text], select, textarea {
width:100%;
padding:12px;
border:1px solid #ccc;
border-radius:4px;
box-sizing:border-box;
margin-top:6px;
margin-bottom:16px;
resize:vertical;
}
input[type=submit] {
background-color:#4CAF50;
color:white;
padding:12px 20px;
border:none;
border-radius:4px;
cursor:pointer;
}
input[type=submit]:hover {
background-color:#45a049;
}
input[type=reset] {
background-color:#4caf50;
color:white;
padding:12px 20px;
border:none;
border-radius:4px;
cursor:pointer;
}
input[type=reset] {
background-color:#45a049;
}
.container {
border-radius:5px;
background-color:#f2f2f2;
padding:30px;
background-image:url(../Images/V.jpg);
color:#000;
}
/* Link */
.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
}
.fa:hover {
opacity: 0.7;
}
.fa-google {
background: #dd4b39;
color: white;
}
.fa-youtube {
background: #bb0000;
color: white;
}
.fa-facebook {
background: #3B5998;
color: white;
}
/* Navigation */
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 500px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
font-size:50px;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}