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

/* BASE (Initital Setup)
=====================================
	#RESET
	#HTML5
	#CLEARFIX
	#BASE TYPOGRAPHY
===================================== */

/* #RESET
================================================== */

* {
	margin: 0;
	padding: 0;
}


/* #HTML5
================================================== */

header, section, footer, aside, nav, article, figure {
	    display: block;
}

/* #CLEARFIX
================================================== */
.group:before,
.group:after {
    content: "";
    display: table;
} 
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

/* #BASE TYPOGRAPHY
================================================== */

/*
=================================================
	Basic text sizing
=================================================
	Set your main font size for paragraph

	Reference
	62.5%  => 10px
	68.8%  => 11px
	75%    => 12px
	81.3%  => 13px
	87.5%  => 14px
	100%   => 16px
	112.5% => 18px
	125%   => 20px

*/


/* #BASE TYPOGRAPHY
================================================== */

/*
=================================================
	Basic text sizing
=================================================
	Set your main font size for paragraph

	Reference
	62.5%  => 10px
	68.8%  => 11px
	75%    => 12px
	81.3%  => 13px
	87.5%  => 14px
	100%   => 16px
	112.5% => 18px
	125%   => 20px

*/

body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 100%; /* 16px */
	line-height: 1.5em;
			/* background: #060; testing */
}

/*
Using a Traditional scale: 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72
	if base is 16:
	h1 = 48 pixels → 48 ÷ 16 = 3 em
	h2 = 36 pixels → 36 ÷ 16 = 2.25 em
	h3 = 24 pixels → 24 ÷ 16 = 1.5 em
	h4 = 21 pixels → 21 ÷ 16 = 1.3125 em
	h5 = 18 pixels → 18 ÷ 16 = 1.125 em
	h6 = 16 pixels → 16 ÷ 16 = 1 em
*/
h1, h2, h3, h4, h5, h6 { margin-bottom: .5em; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 3em; line-height: 1.15em; }
h2 { font-size: 2.25em; line-height: 1.2em; }
h3 { font-size: 1.5em; line-height: 1.25em; }
h4 { font-size: 1.3125em; line-height: 1.3em; }
h5 { font-size: 1.125em; line-height: 1.35em; }
h6 { font-size: 1em; line-height: 1.4em; }


/* #Paragraphs 
================================================== */
p { 
	margin-bottom: 1.25em; 
}


/* #Links
================================================== */

a { color: #39C; text-decoration: none; outline: 0; }
a:hover, a:focus { color: #39c; }
p a, p a:visited { line-height: inherit; }


/* #Lists
================================================== */
ul, ol { 
	margin: 0 0 1.25em 0; 
	/* clear: both; */
}

ul li ul, ul li ol, ol li ul, ol li ol {
	margin: 0; 
}

li {
	/* clear: both; */
	margin: 0 0 0 1.875em;
}


/* #Block Quotes
================================================== */
blockquote {
  margin: 1em 0;
  padding: 1em;
  border-top: 3px solid #aaa;
  border-bottom: 3px solid #aaa;
  background: #eee;
  color: #444;
}

/* #Images
================================================== */
img.scale-with-grid { /* Chris likes this */
	max-width: 100%;
	height: auto; 
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

a img { /* Chris doesn't like Microsoft border likes this */
	border: none;
}

/* LAYOUT/GRID
===================================== */
.container {
	width: 960px;
	margin: 0 auto;
		/* border:1px solid red; */
}


/* HEADER	
===================================== */
/* my approach here was to make line-height to 0em to h1 and p.tagline but I needed to do also to a to eliminate the space between the Company Name (h1) and the tagline(p.tagline) */
header h1 {
	margin-top: 120px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 3em;
	line-height: 0em;
	text-align: center;
	line-height:0em;
	color: #000;
		/* border:1px solid red; */
}

header h1 a, a:hover { 
	color: #000;
	line-height: 0em;
		/*border:1px solid red; this a: hover affects also each maintabs*/
 } 
 
header p.tagline {
	text-align: center;
	text-transform: uppercase;
	font-size: 0.75em;
	line-height: 0em;
	padding:  16px 0 0 0;
	margin: 0 0 60px 0;
	color: #666;
		/* border:1px solid red; */
}

/* I was mistakenly using "Arial Black" instead of Helvetica for header h1 and a as blow
a {
	font-family: "Arial Black", Helvetica, Arial, sans-serif;
	font-size: 1em;
	line-height: 1.1em;
}
*//*
NAVIGATION
=================
	border-top:2px solid #aaa;
	border-bottom:2px solid #aaa;
		width: 100%;
		float:left;
		position:relative;
}==================== */

#mainnav {
	float:left;
	width:100%;
	background:#fff;
	overflow:hidden;
	position:relative;
	padding-top: 2px;
	padding-bottom: 2px;
   	border-top:2px solid #ddd;
	border-bottom:2px solid #ddd;
}

#mainnav ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
   		/* border:1px solid red; */
}

#mainnav ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
      	/* border:1px solid black; */
}

#mainnav ul li a {
   display:block;
   margin:0 2px 0 2px;
   padding:10px 10px 5px 10px;
   background:#fff;
   color:#000;
   text-decoration:none;
   line-height:1em;
   	width: 100px; /* width of tab determins along with padding */
}

#mainnav ul li a:hover {
   background:#6FF;
   color:#000;
   text-decoration:none;
   /*line-height:1em; no needed as line-height is inherited from a above */
}

#mainnav ul li a.active {
	background-color: #ececec;
}

small {
	color: #999;
	font-size: 10px;
	display: block;
}

/* SITE SPECIFIC CSS
===================================== */

.main {
	clear: both; /* to get rid of wraping into mainnav */
	padding-top: 7px;
	/*added class group in html code again to push footer background down. */
	/* initially, I was using <setion id="main" class="group"> in html source code, but the class="goup" was ignored so added #main { clear: both; } This corrected the distance differences between safari and firefox. Also making main into class and change the source to <section class="main group"> works */
		 /* border:1px solid blue; */
}

 
#section1 {
	margin-top: 30px;
	padding-top: 0px;
	width: 100%;
	height: 380px;
	background: #ececec;
	/* Here on rounding 4-edges */
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
		/*border:1px solid #000;*/
}

#section1 #HeadLine {
	padding-top: 60px;
	margin:0;
	text-align: center;
	font-size: 92px;
		/* border:1px solid #000;*/	
}

#section1 .textbox {
	/*  clear: both; works but added .group in html code */
	width: 720px;
	margin:0 auto;
	padding-top: 10px;
		 /*border:1px solid black; */
}
#section1 p {
	/*clear: both;
	width: 720px; 
	margin:0 auto; you need to create div box to center p */
	text-align: center;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 21px;	
	line-height: 30px;
		/* border:1px solid red; */
}

#section2 {
	font-size:16px;
	line-height: 24px;
	margin-top: 50px;
		/*　border:1px solid red; */
}

#section2 h3 {
	font-size: 34px;
	margin: 0;
	padding: 0;
		/* border:1px solid red;  */
}

#section2 small {
	font-size: 10px;
	color: #555;
	padding: 0;
	margin: 0;
	margin-bottom: 15px;
	line-height:1px;
		/* border:1px solid red; */
}

#section2 .col1 p {
	font: 16px;
	line-height: 24px;
		/* border:1px solid red;  */
}

img {
	margin: 0px;
		/* border:1px solid red;*/
}

.col1{
	width: 33.2%;
	float: left;
		 /* border:1px solid red; */
}

.col2{
	width: 33.1%;
	float: left;
		 /*border:1px solid black; */
}
.col3{
	width: 33%;
	float: right;
		/*border:1px solid red;  */
}

#section2 .col1 a, .col2 a, .col3 a {
	font: 16px;
	font-wight: regular;
	color: #99cc;
}

#section2 .col1 a:hover, #section2 .col2 a:hover, #section2 .col3 a:hover {
	font: 16px;
	font-wight: regular;
	color: #0fF;
}

#section3 {
	text-align:  center;
		/* border:1px solid #000; */
}

#section3 h2 {
	margin: 50px 0;
	padding: 20px 0;
	border-top: 2px solid #ddd;
	border-bottom: 2px solid #ddd;
	text-transform: uppercase;
	font-size: 22px;
	font-weight: bold;
		/*border:1px solid #000;*/
}

#section3 p {
	margin:  0 60px;
	padding: 0 100px 30px 100px;
	border-bottom: 2px solid #ddd;
		/*border:1px solid #000;*/
}
#section4 {
	margin-top: 50px;
	margin-bottom:50px;
		/*border:1px solid #000;*/  
}

/*****
#licol1 ul li a {
	float: left;
		border:1px solid red;
}
testing start *******/
#box {
	width: 280px;
	height: auto;/* auto to adjust to #unit HD instead of originally set 150px*/
	margin-left: 120px;
			/* border:1px solid black; */
}
#unitmrk {
	float: left;
	height: 50px;
			/* border:1px solid black; */
}
#unitHD {
	float: left;
	font-size: 20px;
	padding-top: 20px;
	padding-left: 10px;
	width: 200px;

			/* border:1px solid red; */
}

#unitHD h4 {
	font-size: 18px;
}

#unitHD p {
	font-size: 14px;
	line-height: 20px;
}

.licol1  {
	width: 450px;
	padding: 0 0 50px 0; /*adding space to footer */
	float: left;
		/* border:1px solid red; */
}
	
.licol1 ul, li, i {
	margin: 0;
	padding: 0;
}

.licol1 ul li {
	list-style: none; 
	float: left;
		/* border:1px solid red;*/
}

/*****testing start *******/
.licol1 ul li i {
	float: left;
	margin-top: 20px;
	width: 50px;
	height: 70px;
		/* border:1px solid red; */
}

#section2 p {
	padding-right: 10px;
}

/*
#licol2 {
	width: 49%;
	list-style: none;
	float: left;
		border:1px solid red;
}
*/

#section1 h2 {
	text-align: center;
	list-style: none;
		/* border:1px solid #6FC;*/
}

#section1 p {
	float:right;
	display:block;
}

footer {
	/*position:relative;*/
	padding-top: 20px;
	height:500px;
	background: #ececec;
	border-top:1px solid #ddd;
}

footer #footerlogo {
	float:left;
}

footer .container h1 {
	margin: 10px 0 0 0;
	padding:0px;
	font-size:2em;
	width: 450px;
			/* border:1px solid red; */
}

footer p#copyright {
	width: 300px;
	margin: 0px;
	padding:0px;
	clear: both;
	font-size: 0.75em;
	color: #999;
	   		/*border:1px solid red;*/
}
	
#footernav {
	float:right; 
	width:455px;
	background:#ececec;
	overflow:hidden;
	position:relative;
	padding:10px;
}

#footernav ul {
   clear:right;
   float:right;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   text-align:right;
   		/* border:1px solid red; */
}

#footernav ul li {
	   position:relative;
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
		/*  right:50%;*/
      	/* border:1px solid black; */
}

#footernav ul li a {
   display:block;
   margin:10px 0 0 1px;
   padding:3px 16px;
   color:#000;
   text-decoration:none;
   line-height:1.3em;
   /*border:1px solid black;*/
}

#footernav ul li a:hover {
	color:#6FF;
   /*border-top: 1px #6FF;*/
}

#footernav  ul li small {
	color: #999;
	font-weight: normal;
}



/* MEDIA QUERIES
===================================== */

/* Tablet */
@media only screen and (min-width: 768px) and (max-width: 959px) {

}

/* MOBILE */
@media only screen and (max-width: 767px) {

}