CSS





/*
a:link {
    color: #009CCC;
    text-decoration: none;
}

a:visited {
  color: #009CCC;
    text-decoration: none;
}

a:hover {
  color: #006180;

}

a:active {
  color: #FF8C19;

}

#active {
      color: #FF8C19;
   text-decoration: none;
}
*/

/*  Potential use for adding vertical space to lists (but this spaces all text lines within the list, rather than only spacing between list items.)
ul li, ol li {
     line-height:160%;
}
*/



ul li { margin-bottom: 20px; }

ol li { margin-bottom: 20px; }

h2 {
    text-align:left;
    font-size:30px;
    color: #32639a;
}

/*
body {
  background-image: url('/Images/ecoclip1.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

table { background-color: #ffffff; }
tr { background-color: #ffffff; }
td { background-color: #ffffff; }
*/

.bodycenter {
    text-align:center;
    font-size:20px;
}

.bodyleft {
    text-align:left;
    font-size:20px
}

.couchcredit
{
    text-align:right;
    font-family: Tahoma;
    font-size:16px;
    color: #000;
}

.header2
{
    text-align:left; 
    font-size:30px; 
    color:#32639a;
}

.header3
{
    text-align:left;
    font-size:26px;
    color: #32639a;
}

.header3black
{
    text-align:left;
    font-size:26px;
    color: #000;
}

.header3blackcenter
{
    text-align:center;
    font-size:26px;
    color: #000;
}

.header4
{
    text-align:left;
    font-size:20px;
    color: #000;
}

.headerorange
{
    text-align:left;
    font-size:20px;
    color: #994d00;
}

.blueaccent
{
    text-align:left;
    font-size:20px;
    color: #32639a;
}

.figurevision
{
    width: 400px; 
    float: right; 
    padding-left: 20px;
    padding-bottom: 10px;
    font-size:16px;
}

.navcontainerhome ul
{
padding-left: 0;
margin-left: 0;
margin-top: 0;
margin-bottom: 0;
border-bottom: 0;
border-top: 0;

font-family: Tahoma;
   background: #FFFFFF;
}




.navcontainerhome ul li { display: inline; }




.navcontainerhome ul li a
{
padding: 0.5em 2em;
color: #009CCC;
text-decoration: none;
float: left;
border-bottom: 0;
border-top: 0;
font-size:1em;
font-family: Tahoma;

}



.navcontainerhome ul li a:hover
{
color: #006180;
background-color: #ffffff;
}




.navcontainerhome ul li a:active
{
color: #006180;
background-color: #ffffff;
outline: 0;
}









.navcontainer ul
{
padding-left: 0;
margin-left: 0;
margin-top: 0;
margin-bottom: 0;
border-bottom: 0;
border-top: 0;

font-family: Tahoma;
   background: #FFFFFF;
}




.navcontainer ul li { display: inline; }




.navcontainer ul li a
{
padding: 0.5em 1.3em;
color: #009CCC;
text-decoration: none;
float: left;
border-bottom: 0;
border-top: 0;
font-size:1em;
font-family: Tahoma;

}



.navcontainer ul li a:hover
{
color: #006180;
background-color: #ffffff;
}




.navcontainer ul li a:active
{
color: #006180;
background-color: #ffffff;
outline: 0;
}





.sublinks  a
{
padding: 0.5em 1.1em;
color: #009CCC;
text-decoration: none;
border-bottom: 0;
border-top: 0;
font-family: Tahoma;

}

.sublinks a:hover
{
color: #006180;
background-color: #ffffff;
}

.sublinks a:active
{
color: #006180;
background-color: #ffffff;
outline: 0;
}


.sublinks2  a
{
padding: 0.5em 1.1em;
color: #B8B8B8;
text-decoration: none;
border-bottom: 0;
border-top: 0;
font-family: Tahoma;
text-align: right;

}

.sublinks2 a:hover
{
color: #006180;
background-color: #ffffff;
}

.sublinks2 a:active
{
color: #006180;
background-color: #ffffff;
outline: 0;
}


.button {
  background-color: #CC6600;
  border: none;
  color: #ffffff;
  padding: 10px 20px;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  font-family: Tahoma;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 6px;
}


.buttonaccent {
  background-color: #993300;
  border: 2px solid #eb984e;
  color: #ffffff;
  padding: 10px 20px;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  font-family: Tahoma;
  display: inline-block;
  font-size: 20px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 6px;
}


.buttonfaded {
  background-color:  #eb984e;
  border: none;
  color: #ffffff;
  padding: 10px 20px;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  font-family: Tahoma;
  display: inline-block;
  font-size: 20px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 6px;
}


.buttonfaded:hover {
  background-color:  #CC6600;
  border: none;
  color: #ffffff;
  padding: 10px 20px;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  font-family: Tahoma;
  display: inline-block;
  font-size: 20px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 6px;
}

.buttonplain {
  background-color: #CC6600;
  border: none;
  color: #ffffff;
  padding: 5px 10px;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  font-family: Tahoma;
  display: inline-block;
  font-size: 12px;
  margin: 2px 2px;
  cursor: pointer;
  border-radius: 6px;
}

.buttoncomments {
  background-color: #CC6600;
  border: none;
  color: #ffffff;
  padding: 12px 22px;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  font-family: Tahoma;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 6px;
}

.buttoncomments:hover {
  background-color: #eb984e;
  border: none;
  color: #ffffff;
  padding: 12px 22px;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  font-family: Tahoma;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 6px;
}

.buttoncomments2 {
  background-color: #ffffff;
  border: 1px solid #CC6600;
  color: #CC6600;
  padding: 12px 14px;
  text-align: center;
  vertical-align: top;
  text-decoration: none;
  font-family: Tahoma;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 6px;
}

.buttoncomments2:hover {
  background-color: #CC6600;
  border: 2px solid #ffffff;
  color: #ffffff;
  padding: 12px 14px;
  text-align: center;
  vertical-align: top;
  text-decoration: none;
  font-family: Tahoma;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 6px;
}

.buttonlearnmore {
  background-color:  #eb984e;
  border: none;
  color: #ffffff;
  padding: 10px 20px;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  font-family: Tahoma;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 6px;
}

.buttonlearnmore:hover
{
  background-color:  #CC6600;
  border: none;
  color: #ffffff;
  padding: 10px 20px;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  font-family: Tahoma;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 6px;
}

.dropbtn {
  background-color: #E0F3F9;
  color: #009CCC;
    padding-top: 16px;
  padding-right: 55px;
  padding-bottom: 16px;
  padding-left: 55px;
  font-size: 19px;
  border: none;
  font-family: Tahoma;

}

.dropbtnaccent {
  background-color: #E0F3F9;
  color: #32639a;
    padding-top: 14px;
  padding-right: 27px;
  padding-bottom: 14px;
  padding-left: 27px;
  font-size: 19px;
  border: none;
  font-family: Tahoma;

}
  

.dropbtn2 {
  background-color: #ffffff;
  color: #009CCC;
  padding: 16px;
  font-size: 35px;
  border: none;
  font-family: Tahoma;
  
}


.dropbtn3 {
  background-color: #ffffff;
  color: #CC6600;
      padding-top: 16px;
  padding-right: 40px;
  padding-bottom: 16px;
  padding-left: 40px;
  font-size: 19px;
  border: 2px solid #eb984e;
  font-family: Tahoma;
  
}

.dropbtn4 {
  background-color: #ffffff;
  color: #32639a;
  padding: 16px;
  font-size: 40px;
  border: none;
  font-family: Tahoma;
  
}

.dropbtn5 {
  background-color: #ffffff;
  color: #009CCC;
  padding: 12px;
  font-size: 30px;
  border: none;
  font-family: Tahoma;
  
}



.dropdown {
  position: relative;
  display: inline-block;

}




.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  min-width: 155px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  font-family: Tahoma;
}

.dropdown-content a {
  color: #009CCC;
  padding: 10px 12px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #2c3e50;}

.dropdown:a:active .dropbtn, {background-color: #eb984e;}

.dropdown:hover .dropbtnaccent {background-color: #2c3e50; color: #009CCC;}

.dropdown:a:active .dropbtnaccent, {background-color: #eb984e; color: #009CCC;}

.dropdown:hover .dropbtn2 {background-color: #2c3e50;}

.dropdown:a:active .dropbtn2, {background-color: #eb984e;}

.dropdown:hover .dropbtn3 {background-color: #eb984e; border: 2px solid #CC6600; color:#ffffff;}

.dropdown:hover .dropbtn4 {background-color: #E0F3F9;}

.dropdown:hover .dropbtn5 {background-color: #2c3e50;}

.dropdown:a:active .dropbtn5, {background-color: #eb984e;}


.bottom { vertical-align: bottom; }


.paddedtable  {
  background-color: #ffffff;
  border: 0;
  padding: 20px;
}

    .smallroundbutton {
        width: 120px;
        height: 120px;
        background: url("ButtonRound_Transportation3.png") no-repeat;
        display: inline-block;
    }
    .smallroundbutton:hover {
        background: url("ButtonRound_Transportation2.png") no-repeat;
    }


table.roundedCorners1 { 
  border: 0;
  border-radius: 30px; 
  border-spacing: 0;
  background-color: #FFFFFF;
  }
  
  table.roundedCorners2 { 
  border: 0;
  border-radius: 30px; 
  border-spacing: 0;
  background-color: #ffcc99;
  }


 /* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color:  #f2f4f4;
  color: #444;
  cursor: pointer;
  padding: 18px;
  border: none;
  width:100%;
  margin-left: 0px;
  text-align: left;
  outline: none;
  font-size: 18px;

}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
  border: none;
  margin-left: 0px;
  text-align: left;
} 


 /* Style the button that is used to open and close the collapsible content */
.collapsible2 {
  background-color:  #F8F8F8;
  color: #CC6600;
  cursor: pointer;
  padding: 8px;
  border: none;
  width:100%;
  margin-left: 0px;
  text-align: left;
  outline: none;
  font-size: 18px;

}


/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active2, .collapsible2:hover {
  background-color: #f2f2f2;
  color: #e67919;
}

/* Style the collapsible content. Note: hidden by default */
.content2 {
  padding: 0 8px;
  display: none;
  overflow: hidden;
  background-color: #F8F8F8;
  border: none;
  margin-left: 0px;
} 



 /* Style the button that is used to open and close the collapsible content */
.collapsible3 {
  background-color:  #ffe6cc;
  color: #000;
  cursor: pointer;
  padding: 10px;
  border: none;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  margin-left: 0px;
  text-align: center;
    width:100%;
  outline: none;
  font-size: 20px;
}


/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active3, .collapsible3:hover {
  background-color: #ffd9b3;
  color: #000;
}

/* Style the collapsible content. Note: hidden by default */
.content3 {
  padding: 18px;
  display: none;
  overflow: hidden;
  background-color: #fff2e6;
  border: none;
  margin-left: 0px;
} 




/* Make the container relative */
.swap-on-hover {
  position: relative;	
	margin:  0 auto;
	max-width: 120px;
}

/* Select the image and make it absolute to the container */
.swap-on-hover img {
  position: absolute;
  top:0;
  left:0;
	overflow: hidden;
	/* Sets the width and height for the images*/
	width: 120px;
	height: 120px;
}

/* 
	We set z-index to be higher than the back image, so it's alwyas on the front.

We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.swap-on-hover .swap-on-hover__front-image {
  z-index: 9999;

  cursor: pointer;
}

/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.swap-on-hover:hover > .swap-on-hover__front-image{
  opacity: 0;
}







#active
{
color: #006180;
outline: 0;
}


    section {

        position: fixed;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
}

.cmtx_container section {
    position: static;
    left: auto;
    margin-right: 0;
    transform: none;
}

 .center {
        position: absolute;
        top: 0%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-48%) 
}

 .center1 {
  position: absolute;
  left: 50%;
  margin-top: 0px;
  margin-left: -550px;
        transform: translate(-545px) 
}

.indentblock {
    margin-left: 20px;
    margin-right: 20px;
    background-color: #ffefe0;
    padding-top: 10px;
    padding-right: 30px;
    padding-bottom: 10px;
    padding-left: 30px;
    vertical-align: top;
    border: 2px solid #CC6600;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

.indentblock2 {
    margin-left: 0px;
    margin-right: 0px;
    background-color: #ffffff;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    vertical-align: top;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
}

.indentblock3 {
    margin-left: 0px;
    margin-right: 0px;
    background-color: #f4f4f4;
    padding-top: 10px;
    padding-right: 30px;
    padding-bottom: 10px;
    padding-left: 35px;
    vertical-align: top;
}

.indentblock4 {
    margin-left: 0px;
    margin-right: 0px;
    background-color: #ffffff;
    padding-top: 10px;
    padding-right: 200px;
    padding-bottom: 10px;
    padding-left: 200px;
    vertical-align: top;
}

.indentblock5 {
    margin-left: 20px;
    margin-right: 20px;
    background-color: #ffffff;
    padding-top: 10px;
    padding-right: 100px;
    padding-bottom: 10px;
    padding-left: 100px;
    vertical-align: top;
}

.visioncaption {
    margin-left: 0px;
    margin-right: 0px;
    background-color: #ffffff;
    padding-top: 0px;
    padding-right: 5px;
    padding-bottom: 0px;
    padding-left: 20px;
    vertical-align: top;
    font-size: 20px;
    text-align:left;
    font-family:Tahoma;
}

.visionblock {
    margin-left: 0px;
    margin-right: 0px;
    background-color: #ffffff;
    padding-top: 0px;
    padding-right: 5px;
    padding-bottom: 0px;
    padding-left: 10px;
    vertical-align: top;
    font-size: 20px;
    text-align:left;
    font-family:Tahoma;
}

.visionimage {
    margin-left: 0px;
    margin-right: 0px;
    background-color: #ffffff;
    padding-top: 0px;
    padding-right: 5px;
    padding-bottom: 0px;
    padding-left: 0px;
    vertical-align: top;
    font-size: 20px;
    text-align:left;
    font-family:Tahoma;
}

.commentcaption {
    margin-left: 0px;
    margin-right: 0px;
    background-color: #ffffff;
    padding-top: 0px;
    padding-right: 100px;
    padding-bottom: 0px;
    padding-left: 100px;
    vertical-align: top;
    font-size: 20px;
    text-align:left;
    font-family:Tahoma;
}