﻿

body {
    background-color: none;
    background-image : url(images/washed-out-background3.png);
    background-repeat : repeat;
	margin : 0px;
    padding : 0px;
    font : 100% Verdana, sans-serif;
}

#container {
	width : 100%;
	max-width : 1200px;
	height : auto;
	background-color : none;
	margin : auto;
	padding : 0px;
	}

#container p {padding : 0px; margin : 0px;}		
	
#topbanner {
	width : 100%;
	height : auto;
	background-color : #185e71;
	}	
	
.topbanner {
	float: left;
	margin: 0px;
	padding: 0px;
	width: 33.3%;
	min-width : 360px;
	height : auto;
	min-height : 45px;
	max-height : none;
	background-color : #185e71;
	vertical-align : middle;
	}
	
.topbanner h1 {
	margin : 0px; 
	padding : 10px; 
	color : white; 
	text-align : center; 
	white-space: nowrap; 
	vertical-align : middle; 
	font-size : 110%;
}

.topbanner img {padding : 15px 0px 0px 20px; border : none;}

.social img {border : none;}

.social a:link {border : none; text-decoration : none;}
.social a:active {border : none; text-decoration : none;}
.social a:hover {border : none; text-decoration : none;}
	
.topbanner-right {
	text-align : right;
	margin : 0px;
	padding : 0px;
	}
	
.topbanner-right a {padding : 0px 10px 0px 0px; position : relative; top : 10px;}
.topbanner-right a:link {padding : 0px 10px 0px 0px; color : white; text-decoration : none;}
.topbanner-right a:visited {color : white; }
.topbanner-right a:hover {text-decoration : underline;}
.topbanner-right a:active {color : white; }

		
#logo-area {
height : auto;
min-height : 140px; 
padding-top : 20px; 
margin : 10px 0px 0px 0px;
background-color : none;
clear : both;
}

#logo {float : left; margin-left: 50px; background-color : white; padding-right : 15px;}
#logo img {border : none;}

#navLinks {
	float : right;
	width : auto;
	margin : 10px 20px 0px 20px;
	height : 55px;
	padding : 30px 0px 30px 0px;
	font-weight : bold;
	border : none;
}

#navLinks ul {
	list-style: none;
	margin : 0px;
	padding : 0px;
	padding-top : 20px;
	padding-bottom : 20px;
	border : none;
	}
                                        

#navLinks li {
	display : inline;
}

#navLinks li a {
	margin-top : 5px;
	padding : 55px 10px 40px 5px;
	text-decoration: none;
	color : #185E71;
	background-color : #E8EFF1;
	}

#navLinks li a:hover {
	background-color: #185E71;
	color : white;
}
	
#quote {
height : auto; 
min-height : 100px;
width : 100%; 
text-align : center;
margin : auto;
padding: 15px 0px 0px 0px; 
background-color : #185E71; 
color : white; 
clear : both;
}

/*
.quote {
font-size : 110%; 
width : 50%; 
height : auto;
text-align : center; 
margin : auto; 
padding : 0px;
padding-left : 10%;
padding-right : 10%;
}

.source {
font-style : italic; 
font-weight : lighter; 
font-size : 100%; 
text-align : center; 
width : 70%;
margin : auto;
height : auto;
clear : both;
padding : 20px 0px 20px 0px;
}
*/


#main-banner {
	padding : 0px; 
	margin-top : 0px; 
	clear : both; 
	width : 100%;
	background-size : 100% 100%;
    	background-repeat : no-repeat;
}


	
#main-banner h1 {
	position : relative; 
	top : 30px; 
	left : 20px; 
	color : white; 
	text-shadow: 5px 2px 2px rgba(72, 79, 91, 0.42); 
	background-color : rgba(90, 90, 90, 0.3); 
	border : none; 
	padding : 10px; 
	float :left;
}	
	
#main-content {margin : 0px; padding : 0px; background-color : none;}	

#vision {
	height : auto;
	min-height : 100px;
	width : 100%; 
	text-align : center;
	padding : 10px 0px 0px 0px; 
	clear : both; 
	border : none;
	}

.vision {
	padding : 1% 1% 1% 1%;
	margin : auto;
	font-size : 133%; 
	width : 48%; 
	text-align : center; 	
	color : #525254; 
	border : none; 
}

.vision a:link {color : #185e71; text-decoration : none;}
.vision a:visited {color : #185e71; text-decoration : none;}
.vision a:hover {color : #185e71; text-decoration : underline;}
.vision a:active {color : #185e71; text-decoration : none;}

.method {
	width : 50%;
	margin : auto; 
	margin-bottom : 20px;
	font-size : 120%; 
	font-weight : normal; 
	text-align : center;
	color : #525254;
	border : none;
}

#orange-box {
	width : 100%;
	background-color : #ED7D31;
	margin : 0px;
	padding : 1% 0% 2% 0%;
}
	
#green-box {
	width : 100%;
	background-color : #70AD47;
	margin : 0px;
	padding : 1% 0% 2% 0%;
}
	
#white-box {
	width : 100%;
	background-color : none;
	margin : 30px 0px 30px 0px;
	padding : 2% 0% 3% 0%;
}

#thin-white-box {
	width : 100%;
	background-color : limegreen;
	margin : 0px 0px 30px 0px;
	padding : 0% 0% 3% 0%;
}
	
#grey-box {
	width : 100%;
	background-color : lightgrey;
	margin : 0px;
	padding : 1% 0% 2% 0%;
}

#plum-box {
	width : 100%;
	background-color : #c27ba0;
	margin : 0px;
	padding : 1% 0% 2% 0%;
}

#orange-box:after, #green-box:after, #plum-box:after, #grey-box:after, #white-box:after {
    content:"";
    display: table;
    clear: both;
}	

#left {
	width : 40%;
	float : left;
	padding : 50px 3% 50px 7%;
	margin : 0px;
}

#right {
	width : 40%;
	float : right;
	padding : 50px 7% 50px 3%;
	margin : 0px;
}    

#left2 {
	width : 43%;
	float : left;
	padding : 50px 3% 50px 3%;
	margin : 0px;
}

#right2 {
	width : 43%;
	float : right;
	padding : 50px 3% 50px 3%;
	margin : 0px;
}  
    
.main-text {
	font : 160%/130% Verdana, sans-serif;
	color : white;
	padding : 0%;
	margin : 0%;
	text-align: justify;
}

.main-text1 { 
	width : 50%;
	margin : auto;
	text-align : center;
	font : bold 120%/150% Verdana, sans-serif;
	color : #185E71;
}

.main-text2 { 
	width : 50%;
	margin : auto;
	margin-top : 15px;
	text-align : center;
	font-style : italic;
	font : 120% Verdana,  
	color : #525254;
}

.main-text3 {
	font : 160%/130% Verdana, sans-serif;
	color : white;
	padding : 0%;
	margin : 0%;
	text-align: center;
}

.main-text4 {
	font : 160%/130% Verdana, sans-serif;
	color : black;
	padding : 0%;
	margin : 0%;
	text-align: left;
	vertical-align : middle;
}

.main-text5 {
	color : #185e71; 
	font-weight : bold;
}

#white-box h4 {color : black;}

.contact {margin-left : 44px;}

.main-text a:link {color : white; text-decoration : underline;}
.main-text a:visited {color : white; text-decoration : none;}
.main-text a:hover {text-decoration : underline;}
.main-text a:active {color : white; text-decoration : none;}

.source2 { font-style : italic; text-align : center; margin : 0px 0px 10px 0px; padding : 0px;}


/*#left, #right */ img {
    max-width: 100%;
    height: auto;
    vertical-align : middle;
    padding : 0%;
}

@media screen and (max-width: 1024px) {
    #left, #right {
        float: none;
        width: auto;
        padding : 20px 20px 20px 20px;
    }
    .main-text, .main-text4 {
    	padding : 0px 3px 0px 3px;
    	text-align : left;
	font-size : 120%;
    	}
    }
    
@media screen and (max-width: 480px) {
    #left, #right {
        float: none;
        width: auto;
        padding : 20px 0px 20px 0px;
    }
    .main-text, .main-text4 {
    	padding : 0px 3px 0px 3px;
    	font : 120%/110% Verdana, sans-serif;
    	text-align : left;
    	}
    	
    .vision, .method, .quote, .source, .main-text1, .main-text2 { 
		width : 80%;
		}
	
    	
    	}
    

	
/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
	padding-top : 10px;}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
	padding : 20px 5px 5px 5px;
	background-color : #f7f7f7;
	min-height : 300px;
	}

.col2 {
	min-height : 500px;
	}	
	
.section-icon {
	  display: block;
	  margin-left: auto;
	  margin-right: auto;
	  border : none;
  }	

.section-icon2 {
	  display: block;
	  margin-left: auto;
	  margin-right: auto;
	  border: thin solid #185e71;
	  border-bottom:thick solid #185e71;
}  
	
.col H2 {text-align : center; color : #185E71;}	


.col a:link {border : none; text-decoration : none;}
.col a:active {border : none; text-decoration : none;}
.col a:hover {border : none; text-decoration : underline;}

	
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF THREE  */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 64.10%; }
.span_1_of_3 { width: 30.20%; }

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}


.morebutton {color : black; margin : auto; text-align : center;}
.morebutton a:link {color : blue; text-decoration : none;}
.morebutton a:hover {color : red; text-decoration : underline;}
.morebutton a:active {color : #185E71; text-decoration : none;}


#footer {
	width : 100%;
	height : auto;
	background-color : #185e71;
	}	
	
.footer {
	float: left;
	margin: 0px;
	padding: 0px;
	width: 33.33%;
	min-width : 370px;
	height : auto;
	min-height : 330px;
	max-height : none;
	background-color : #185e71;
	text-align : center;
	}

.footer img {border : none;}	
	
	
#FooterLinks {
	width : 290px;
	margin : auto;
	height : auto;
	padding : 5px 10px 5px 10px;
	font-weight : bold;
	text-align : center;
}

#FooterLinks ul {
	list-style: none;
	width : 290px;
	margin : 0px;
	padding : 0px;
	}

#FooterLinks li {
	display : list-item;
	width : 290px;
	text-align : left;
	margin : 10px;
	padding : 5px;
}

#FooterLinks li a {
	width : 290px;
	margin-top : 30px;
	padding : 10px 50px 10px 30px;
	text-decoration: none;
	color : white;
	background-color : 185e71;
	}

#FooterLinks li a:hover {
	text-decoration : underline;
	color : white;
	width : 200px;
}

.footer-right {
	padding : 80px 10px 0px 0px;
}	
	
.footer-text {
	text-align : right;
	margin : 0px;
	padding : 0px;
	font-size : 80%;
	color : white;
	}
	
	.small, a.small {
	font-size:6pt;
}

.footer-text2 {
	text-align : right;
	margin : 0px;
	padding : 0px;
	font-weight : bold;
	font-size : 90%;
	color : white;
}

.small-foot { font-weight : normal;}
	
.footer-text a {color : white; text-decoration : none;}
.footer-text a:link {color : white; text-decoration : none;}
.footer-text a:visited {color : white; text-decoration : none;}
.footer-text a:hover {text-decoration : underline;}
.footer-text a:active {color : white; text-decoration : none;}

/*Quote Rotator*/
.cust-quotes {
  width: 100%;
  height: 120px;
  margin: : auto;
  position: relative;
 }

.cust-quotes blockquote {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  font-size: 14px;
  text-align: center;
  opacity: 0;
  z-index: 0;
  transition: opacity 0.75s ease-out 0s, transform 0.75s ease-in 2.5s;
}


/* IE < 10 fallback */

.no-csstransitions .cust-quotes blockquote,
.no-csstransforms .cust-quotes blockquote {
  position: relative;
}

.cust-quotes blockquote:first-child {
  opacity: 0;
  transform: translateY(-10px) scale(1.1);
}

.cust-quotes blockquote:first-child + blockquote {
  opacity: 1;
  z-index: 1;
  transition: opacity 1.6s ease 0s;
}

.cust-quotes blockquote p {
  font-size: 24px;
  font-weight: normal;
  font-style: normal;
  color: white;
  line-height: 30px;
  margin-bottom: 10px;
}

.cust-quotes blockquote p:before {
  content: '\201C';
}

.cust-quotes blockquote p:after {
  content: '\201D';
}

.cust-quotes blockquote cite {
  text-align: center;
  font-size: 14px;
  color: #898989;
}

.cust-quotes blockquote cite a {
  font-size: 14px;
  font-weight: normal;
}
/*
.container {
  max-width: 940px;
  margin: 0 auto;
}*/

#testimonials {
  margin: 0 auto;
  width: 100%;
}
		
	
/* .....responsive commands..... */	

/* smaller desktop screens */

	@media only screen and (max-width: 1279px) {
	    
	.topbanner, {text-align : center; vertical-align : middle; width: 30%;}
	
	.topbanner h1 {margin : 0px; padding : 0px; color : white; text-align : center; font-size : 1.5em;}
	.topbanner img {padding : 0px; max-width : 30%;}
	
	#logo-area {margin : 0px;}

	
	#logo {float : left; margin-left: 0px;}
	
	#navLinks {
	float : right;
	width : auto;
	margin : auto;
	height : 55px;
	padding : 30px 0px 30px 0px;
	border : none;
}

#navLinks ul {
	list-style: none;
	margin : 0px;
	padding : 20px 0px 20px 0px;
	border : none;
}

#navLinks li {
	display : inline;
	font : 95%;
		}

#navLinks li a {
	margin-top : 5px;
	padding : 35px 5px 30px 5px;
	text-decoration: none;
	color : #185E71;
	background-color : #E8EFF1;
}

#navLinks li a:hover {
	background-color: #185E71;
	color : white;
}

/* following is page specific */

#main-banner {
	padding : 0px; 
	margin-top : 0px; 
	clear : both; 
	width : 100%;
	background-size : 100% 100%;
    	background-repeat : no-repeat;
    }
	
 }


/* iPpad and smaller screens */

	@media only screen and (max-width: 1024px) {
	    
	#topbanner {width : 100%;}

	.topbanner, .topbanner-right {text-align : center; vertical-align : middle; float : none; width : 100%;}
	.topbanner h1 {margin : 0px; padding : 0px; color : white; text-align : center; font-size : 1.4em;}
	.topbanner img {padding : 0px; max-width : 50%;}
	
	#logo {float : none; margin-left: 0px; text-align : center;}
	
#navLinks {
	clear : both;
	width : 100%;
	text-align : center;
	margin : 0px 0px 0px 0px;
	height : 55px;
	border : none;
	padding : 30px 0px 30px 0px;
	border : 0px solid #185e71;
	background-color : white;
}

#navLinks ul {
	list-style: none;
	margin : 0px;
	padding : 0px;
	padding-top : 20px;
	padding-bottom : 20px;
	border : none;
}

#navLinks li {
	display : inline;
	padding : 5px 2px 5px 0px;
	width : 100%;
	font-size : 85%;
		}

#navLinks li a {
	margin-top : 15px;
	padding : 35px 5px 30px 5px;
	text-decoration: none;
	color : #185E71;
	background-color : #E8EFF1;
}

#navLinks li a:hover {
	background-color: #185E71;
	color : white;
}

#main-banner {
	padding : 0px; 
	margin-top : 0px; 
	clear : both; 
	width : 100%;
	background-size : 100% 100%;
        background-repeat : no-repeat;
	}
	
#footer {width : 100%;}	
	
.footer {text-align : center; vertical-align : middle; float : none; width : 100%; min-height : none; height : auto;}
.footer-text {text-align : center;}
	

	}


/* iPpad and smaller screens */

	@media only screen and (max-width: 980px) {
	    
	#topbanner {width : 100%;}

	.topbanner, .topbanner-right {text-align : center; vertical-align : middle; float : none; width : 100%;}
	.topbanner h1 {margin : 0px; padding : 0px; color : white; text-align : center; font-size : 1.4em;}
	.topbanner img {padding : 0px; max-width : 50%;}
	
	#logo {float : none; margin-left: 0px; text-align : center;}
	
#navLinks {
	clear : both;
	float : none;
	width : 300px;
	margin : auto;
	height : auto;
	border : none;
	padding : 0px;
	font-weight : bold;
	text-align : center;
}

#navLinks ul {
	list-style: none;
	margin : 0px;
	padding : 0px 0px 10px 0px;
	width : 300px;
	text-align : center;
	border : none;
	display : table;
	table-layout : fixed;
}

#navLinks ul li {
  	display: block;
  	width: 300px;
  	text-align: center;
	padding : 0px 0px 10px 0px;
	margin : 0px 0px 10px 0px;
	height : 30px;
	border : none;
}


#navLinks li {
	display : table-cell;
	padding : 0px;
	margin : 0px;
	width : 260px;
	} 

#navLinks li a {
	margin : 0px;
	height : 25px;
	padding : 10px 60px 5px 60px;
	text-decoration: none;
	color : #185E71;
	background-color : #E8EFF1;
	/*border-top : thin solid silver; 
	border-left : thin solid silver;
	border-right : thin solid #185E71;
	border-bottom : thin solid #185E71;*/
	width : 180px;
	display: block;
	font-size : 120%;
	}

#navLinks li a:hover {
	background-color: #185E71;
	color : white;
	}


#main-banner {
	padding : 0px; 
	margin-top : 0px; 
	clear : both; 
	width : 100%;
	background-size : 100% 100%;
        background-repeat : no-repeat;
	}

#main-banner h1 {
	position : relative; 
	top : 20px; 
	left : 15px; 
	color : white; 
	text-shadow: 5px 2px 2px rgba(72, 79, 91, 0.42); 
	background-color : rgba(90, 90, 90, 0.5); 
	padding : 7px; 
	float :left;
	font-size : 110%;
	}	
	
.cust-quotes blockquote {
	margin-bottom: 10px;
	}
	
.cust-quotes blockquote p {
	font-size:20px;
	line-height: 1.2;
	padding-bottom : 10px;
}	

.cust-quotes blockquote cite {
	font-size:small;
	line-height: 1.2;  

}	

	}






/*  Mobile viewport */

	@media only screen and (max-width: 480px) {
    body {
        background-color: none;
    }
	.topbanner, .topbanner-right {text-align : center; vertical-align : middle;}
	.topbanner h1 {margin : 0px; padding : 0px; color : white; text-align : center; font-size : 1.3em;}
	.topbanner img {padding : 0px; max-width : 50%;}
	
	#logo {float : none; margin-left: 0px;}
	
/*	#navLinks {
	clear : both;
	float : none;
	width : 100%;
	margin : 0px 0px 0px 5px;
	height : auto;
	border : none;
	padding : 10px 0px 20px 0px;
	font-weight : bold;
}

#navLinks ul {
	list-style: none;
	margin : 0px;
	padding : 0px;
	width : 100%;
	text-align : center;
	border : none;
}

#navLinks li {
	display : block;
	padding : 10px;
	width : 100%;
		}

#navLinks li a {
	margin : 10px 0px 30px 0px;
	height : 100px;
	padding : 5px 90px 5px 90px;
	text-decoration: none;
	color : #185E71;
	background-color : #E8EFF1;
	border : none;
	width : 400px;
}

#navLinks li a:hover {
	background-color: #185E71;
	color : white;
}
*/

#main-banner {
	padding : 0px; 
	margin-top : 0px; 
	clear : both; 
	width : 100%;
	background-size : 100% 100%;
        background-repeat : no-repeat;
	}

#main-banner h1 {
	position : relative; 
	top : 10px; 
	left : 10px; 
	color : white; 
	text-shadow: 5px 2px 2px rgba(72, 79, 91, 0.42); 
	background-color : rgba(90, 90, 90, 0.5); 
	padding : 7px; 
	float :left;
	font-size : 65%;
	}	
	
.footer {text-align : center; vertical-align : middle; float : none; width : 100%;}
.footer-text {text-align : center;}

.cust-quotes blockquote {
	margin-bottom: 5px;
	}
	
.cust-quotes blockquote p {
	font-size:14px;
	line-height: 1.1;
}	

.cust-quotes blockquote cite {
	font-size:12px;
	line-height: 1.0;  

}

	}