@charset "utf-8";

/*
   Front-End-Web Development Project Plan
    CA1 2019
    
    Card selling webpage(Odyssey)
    Author: Lim Pei Xian      
    Date: 4/5/19  

*/

/* HTML Styles */
body {
   width: 1280px;
   margin-left: auto;
   margin-right: auto;
}

html {
   background-image: url(aku.jpg) ;
   background-color: rgb(136, 156, 245);  
}

/* Page Body Styles */

nav#topLinks{
   background-color: rgb(212, 195, 195);
   color:rgb(255,255,255);
   display:block;
   line-height: 1.7em;
   text-align: right;
   padding: 5px 10px 5px 0px;
}
nav#mainLinks ul li {
   background-color: rgb(212, 195, 195);	
   display: block;
   float: left;
   text-align: center;
   width: 20%;	
}

nav#mainLinks {
   color: rgb(255,255,255);	
   display: block;
   height: 2.5em;	
   text-align: center;
   line-height: 2.5em;	
}

nav#mainLinks a:link, nav#mainLinks a:visited {
 color: rgb(255,255,255);
}
nav#topLinks a:link, nav#topLinks a:visited {
color: rgb(255,255,255);
}
nav#mainLinks a:hover, nav#topLinks a:hover{
   color: rgb(75, 75, 75);  
}

/*forms styles*/
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
   color: rgb(75, 75, 75);
   width: 100%; /* Full width */
   padding: 15px; /* Some padding */  
   border: 1px solid #ccc; /* Gray border */
   border-radius: 4px; /* Rounded borders */
   box-sizing: border-box; /* Make sure that padding and width stays in place */
   margin-top: 10px; /* Add a top margin */
   margin-bottom: 20px; /* Bottom margin */
   resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
 }
 
 /* Style the submit button with a specific background color etc */
 input[type=submit] {
   background-color:rgb(85, 85, 85);
   color: white;
   padding: 12px 20px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
 }
 input[type=submit]:hover {
   background-color: rgb(75, 75, 75);
 }
.container {
      border-radius: 5px;
      background-color:rgb(212, 195, 195);
      padding: 20px;
}

/*embeded Google maps*/
.flex-container {
   display: flex;
 }
 
.flex-container > div {
   margin: 10px;
   padding: 20px;
   color: rgb(255,255,255);
   font-size:1.2em;
   letter-spacing: 3px;
 }

iframe{
width:600px;
height:450px;
margin-bottom:20px;
}


/* Footer Styles */
footer{
   background-color:rgb(212, 195, 195);
   color: rgb(255,255,255);
   font-size: 0.9em;
	padding: 25px;
}

nav#footerLinks{
   background-color: rgb(212, 195, 195);
   color: rgb(255,255,255);
   display:block;
   line-height: 1.7em;
   text-align: left;
   padding: 5px 10px 5px 0px;
}

nav#footerLinks a:link, nav#footerLinks a:visited {
   color: rgb(255,255,255);
} 

nav#footerLinks a:hover, nav#footerLinks a:hover{
   color: rgb(75, 75, 75);  
}
h2{
   background-color:rgb(212, 195, 195);
   color: rgb(255,255,255);
   font-size: 0.9em;
   text-align: right;
}