/* 
author: Anil Patel MSc IT programme: Object Magic Ltd 
project stream:  Static HTML 5 website project: JavaMagic Ltd (independent) 
date: 7th April  2025 
Unravelling : header, footer, container 
*/

 body {
     background:white;
     margin-top:0;
     margin-bottom:12px;
     font-size:12px;
     line-height:1.5;
     font-family: Arial, Helvetica;
}
 h1, h2 {
     margin:0;
}
 a:link{
     color: #808080;
     text-decoration:none;
}
 a:visited {
     color: #808080;
     text-decoration:none;
}
 a:focus, a:hover, a:active {
     text-decoration:none;
     font-weight:bold;
     color:#820F0F;
}
 ul{
     font-size:10pt;
     list-style-type: square;
}
.line-through{
     text-decoration: line-through;
}
.colTitle{
     font-family:arial,arial;
     font-weight:normal;
     font-size: 18pt;
     color:#820F0F;
}
.redText {
     color:#820F0F;
}
.gryText {
     text-decoration:none;
     color: #808080;
}
 img {
     margin:0;
     border:0;
     border-color:transparent;
}
 img.odd {
     float:left;
     padding-right: 10px;
     border:0;
}
 img.even {
     float:right;
     padding-left: 10px;
     border:0;
}
 img.float {
     position:relative;
     float:right;
     padding-right:0px;
     padding-top:0px;
     padding-bottom: 0px;
}
 table {
     margin: 0.1em;
     border-collapse: collapse;
     font-size:8pt;
     color: #555555;
}
 .td, .th {
     padding: .1em;
     border: 1px #ccc solid;
}
 .odd{
     background-color:#E1DDD6;
}
 .even{
     background-color:#EFEBE7;
}
 header {
     background: #85ff00;
}
 header h1 {
     font-size: 24px;
}
 .container {
     width: 100%;
}
 nav, section {
     float: left;
     padding: 20px;
     min-height: 170px;
     box-sizing: border-box;
}

 section {
     width: 80%;
     padding-top: 3%;
     padding-left: 22%;
}
 nav {
     width: 20%;
}
 nav ul {
     font-size:8pt;
     list-style: none;
     line-height: 24px;
     padding: 0px;
}
 nav ul li a {
}
 .clearfix:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
}
 footer {
     top:620px;
     width:690px;
     text-align: center;
     padding: 5px;
     background-color: #ffffff;
}
 #om_logo {
     position:relative;
     left: 110px;
     width: 100px;
     margin:0px;
     padding-top: 0px;
     padding-bottom: 0px;
     border-color:transparent;
     background-color: #ffffff;
}
 #om_title {
     position:relative;
     margin-left:-20px;
     width:500px;
     border:0;
     border-color:#ffffff;
     background-color: #ffffff;
     overflow:hidden;
}
 #om_subtitle {
     position:relative;
     margin-top:15px;
     margin-left:-20px;
     padding-bottom: 0px;
     border:0;
     border-color:#ffffff;
     width:500px;
     background-color: #ffffff;
     overflow:hidden;
}
 #om_footer {
     position:relative;
     width: 690px;
     margin:0px;
     padding-top: 10px;
     padding-bottom: 3px;
     border-color:#ffffff;
     background: #ff4500;
     background-color: #ffffff;
}
 #om_top_logo {
     position:relative;
     width: 700px;
     margin:0px;
     padding-top: 10px;
     padding-bottom: 3px;
     border-color:#ffffff;
     background-color: #ffffff;
}
 #om_top_nav_bar {
     position:relative;
     top:5px;
     width: 700px;
     margin:0;
     height:0px;
     background-color: #ffffff;
     z-index: 10;
}
 #column_one{
     position:relative;
     left: -5px;
     margin-top: 66px;
     padding: 5px;
     font-family: Arial, Helvetica;
     font-size:9pt;
     text-align: right;
     color:#000000;
     float:left;
     background-color: #ffffff;
     z-index: 12;
}
 #column_two{
     position:absolute;
     width: 600px;
     height:420px;
     margin-top:20px;
     padding-left:120px;
     padding-right:10px;
     padding-top:20px;
     padding-bottom:0px;
     font-family: Arial, Helvetica;
     color:#363636;
     background-color: #ffffff;
     overflow:auto;
}
 #om_bottom_footer {
     position:relative;
     top:460px;
     width:700px;
     text-align:right;
     margin:0px;
     padding-top: 40px;
     padding-bottom: 3px;
     border-color:#ffffff;
     background-color: #ffffff;
}
 #column_title{
     position:relative;
     text-align:center;
     margin:0;
     padding-left:0px;
     padding-right:10px;
     padding-top:20px;
     padding-bottom:10px;
     width: 590px;
     font-family: Arial, Helvetica;
     background-color: #ffffff;
     overflow:auto;
}
 #column_title2{
     position:relative;
     left: 100px;
     margin:0;
     padding-left:0px;
     padding-right:10px;
     padding-top:20px;
     padding-bottom: 20px;
     width: 490px;
     height:400px;
     font-family: Arial, Helvetica;
     color:#363636;
     background-color: #ffffff;
     overflow:hidden;
}