/* spiffy background and or normal fail over. */
/* The HTML body component.*/
body {   
	font-size: 14px;
	font-family: Calibri, Sans-serif;
    background-color: #f2f2f2;
}
/* Begin Navigation Bar Styling */

/* The Navigational portion of the website, NAV is a uniform list <ul> */
#nav {
	width: 100%;
	float: left;
	margin: 0 0 1em 0;
	padding: 0;
	list-style: none;
	background-color: #f2f2f2;
	border-bottom: 1px solid #ccc; 
	border-top: 1px solid #ccc; 
}

/* Font to be used within the <ul> NAV */
.navfont {
	font-weight: bold;
	color: #069; 
}

/* Used for when you inject a new <li> tag or html element into the nav bar.*/
.nav {
    display: block; padding: 8px 15px;
}

/* Dicates the position of <li> tags in NAV*/
#nav li {
	float: left; 
}

/* Dictates how links look within the NAV */
#nav li a {
	display: block;
	padding: 8px 15px;
	text-decoration: none;
	font-weight: bold;
	color: #069;
	border-right: 1px solid #ccc; 
}

/* Dictates how links look within the NAV */
#nav li a:hover {
	color: #c00;
	background-color: #fff; 
} 

/* Dictates how a span functions in NAV */
#nav span {
	padding-right:10px;
	float:right;
	text-align:right;
}
/*End of Navigation Styling

/*Registration, Sign in, Sign out etc layout */
.centreLogin {
  width: 210px;
  display: block;
  margin: 0 auto;
  padding-left: 60px;
  padding-top: 150px;
}

/*TAB Menu Generic */
.tab {
	width: 100%;
	float: left;
	margin: 0 0 1em 0;
	padding: 0;
	list-style: none;
	background-color: #f2f2f2;
	border-bottom: 1px solid #ccc; 
	border-top: 1px solid #ccc; 
}

/* Font to be used within the <ul> NAV */
.tabfont {
	font-weight: bold;
	color: #069; 
}

/* Used for when you inject a new <li> tag or html element into the nav bar.*/
.tabnav {
    display: block; padding: 8px 15px;
}

/* Dicates the position of <li> tags in NAV*/
.tab li {
	float: left; 
}

/* Dictates how links look within the NAV */
.tab li a {
	display: block;
	padding: 8px 15px;
	text-decoration: none;
	font-weight: bold;
	color: #069;
	border-right: 1px solid #ccc; 
}

/* Dictates how links look within the NAV */
.tab li a:hover {
	color: #c00;
	background-color: #fff; 
} 

/* Dictates how a span functions in NAV */
.tab span {
	padding-right:10px;
	float:right;
	text-align:right;
}


thank you: http://www.cssnewbie.com/example/horizontal-menu/
*/ 

/*The Main part of the website, in the middle of the screen. */
#content { 
    background-color:#fafafa;
    padding: 5px 5px 15px 5px;
    margin: auto;
	width: 97%; 
}

/* Styling for a Modal-Popups overlay, the black screen the blankests the site while the popup is in effect.*/
#modaloverlay {
    display:none;
	background-color: black; 
	position:fixed; 
	top:  0px;
	left: 0px;
	float:left;
	z-index:1001;
	opacity:0.4; filter: alpha(opacity=40); 
	width:100%; 
	height:100%; 
}

/* Styling for the Modal-Popup itself. Only dictates its position on the screen. */
#modalpopup {
    z-index: 1002;
	display: none;
    position:absolute;  
	top:  15%;  
	left: 50%;
	margin-left:-25%; 
	background-color: white;
	text-align:top; 
	vertical-align:middle;
	padding: 15px 15px;
	width:50%;
}

/*
Default font and styles.
*/


/*
Default styling for the rest of the website.    
    The styling is for the contemporary (2015) Flat-design, which is prevelant in websites and allows
    large re-consumability by pc's, tablets', phones and tv's
So far this styling is only applied to Hom/
*/
.flatstyle {
    width: 100%; 
    font-size: 1.5em;
}

.flatstyle div {
    padding-left: 15%;
    padding-right: 15%; 
    
}

.flatstyle h3 {
    font-size: 3em;
}

.flatstyle ul {
    list-style-type: square;
} 

.flatstyle ol {
    list-style-type: square;
    padding: 5px;
}

.flatstyle li {
    padding: 5px;
    margin-left: 15px;
}

.section {
    padding-bottom: 2%;
    padding-top: 4%;
}

.section h3 {
    font-size:1.5em;
}

.sectionfooter {
    padding-bottom: 1%;
    padding-top: 5%;
}

.color_1 {
    background-color: cadetblue;
}

.color_2 {
    background-color: inherit;
}

.color_3 {
    background-color: black;
    color: whitesmoke; 
    text-align: center;
    vertical-align: middle;
}

/*
 BObject Service Selector at top-left of screen
 These provide styling to the Services selector, top-left within the NAV
*/
 .topdropdown { 
        font-family: inherit;
        font-size: inherit;
        font-weight: bold;
        color: inherit;
        border: none; 
        text-decoration: inherit; 
        color: #069;
        background: transparent;
        width: 100%;
        height:100%;
        margin-right: 25px;
        padding: 5px 5px 5px 5px; 
        border: none; 
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        cursor: pointer;
        background: url(http://www.midbase.co.za/favicon.ico) 96% / 15% no-repeat; 
}

    .topdropdown:hover {
        /*background-color:white;*/
        background-color: #B83344;
    }

    .topdropdown::selection {
        border: none;
    }

    .topdropdown:target {
        border: none;
    }

/* FONT STYLING */
/* The following styles brings consitent usage to common HTML tags. 
    You probably wont' be changing these.
    Note: The em values are calculated based on percentile differences, 
    this allows you to change the font-size (under body {} css ) and it will
    scale up with the rest of the em'd tags.
*/
p,ol,ul {
    padding: 10px;
}

li {
    padding-left: 5px; 
    padding-top: 5px;
}

i {
    font-style: italic;
    padding-left: 3px; padding-right: 3px;
}

b {
    font-style: oblique;
    font-weight:bold;
    padding-left: 3px;
    padding-right: 3px;
}

.small {
    font-size: 0.75em;
}

.xsmall {
    font-size: 0.6em;
}

.large {
    font-size: 1.2em;
}

h1, h2, h3, h4, h5, h6 {
    padding: 10px;
}

h6 {
    font-size: 0.75em;
}

h5 {
    font-size: 0.83em;
}

h4 {
    font-size: 1em;
}

h3 {
    font-size: 1.17em; 
    font-weight:700;
}

h2 {
    font-size: 1.5em; 
    font-weight:700;
}

h1 {
    font-size: 2em; 
    font-weight:700;
}