/**********************************************
 ***************** ABOUT STYLES ***************
 **********************************************/

#about-content-wrapper #left{ width: 165px; height: auto; float: left; display: inline;}
#about-content-wrapper  #middle{ width: 505px; height: auto; float: left; display: inline; padding: 10px;  padding-bottom:40px; text-align: justify;}
#about-content-wrapper #right{ width: 250px; float: right; display: inline; padding-top: 10px; margin-top: 10px;  padding-bottom:40px;}*/

.right-container-green .middle .about {width:216px;}
.right-container-green .middle .about li{margin:5px;}

.about-wrapper{ width: auto; height: 215px;}
/*div containing bio picture*/
#about-left{ float: left; width: 190px; height: 215px; margin-bottom: 10px;}

/*div containing bio name, title and navigation*/
#about-right{ float: left; width: 300px; height: 215px; margin-left: 10px; margin-bottom: 10px;}*/

#about-right h1{ color: #669933; margin: 90px 0 0 0; padding:0; }
#about-right p{ margin: 0; padding: 0; font-size: 1.3em; font-weight: 100;}
#about-right a{ text-decoration: none; font-size: 1.2em;}

/*Middle column bio navigation*/
.bio-nav{ width: auto; height: 20px; margin: 10px 0 0 20px;}
.bio-img{ border: 0; vertical-align: middle;}
.bio-nav span{ margin-left: 40px;}

#signature{ background: url(/img/signature.jpg) no-repeat; width: 160px; height: 60px; margin: -15px 10px 10px auto;}

#about-imagesection {
    float: left;
    width: 600px;
    height: 215px;
    margin-left: 10px;
    margin-bottom: 10px;
}
    #about-imagesection h1 {
        color: #669933;
        margin: 90px 0 0 0;
        padding: 0;
    }


/**********************************************
 **************** LEFT MENU  ******************
 **********************************************/

.menu_list{ width: 165px; }
.menu_head{ padding: 5px 10px; cursor: pointer; position: relative; margin: 2px; color: #669933;  border-bottom: dotted 1px #848383; }
.menu_head a{ color: #669933; text-decoration: none; }
.menu_head a:hover{ color: #447315; text-decoration: underline;}
.menu_head a.noactive{background: url(/img/left-closed-arrow.png) center right no-repeat; padding-right:20px; }
.menu_head a.noactive:hover{ text-decoration: none;}

.menu_body{ display: none; margin: 2px; }
.menu_body a{ display: block; color: #3e7507; padding-left: 30px; text-decoration: none; background:white;}
.menu_body a:hover{ color: #447315; text-decoration: underline;}

.left-menu-container{width:99%; height:auto; float:left; margin-top:28px;}
.left-menu-container .left{background:url(/img/right-menu-left.png) no-repeat; height:56px; width:8px; float:left;}
.left-menu-container .middle{background:url(/img/right-menu-middle.png) repeat-x; height:auto; width:145px; float:left; margin:0;}
.left-menu-container .right{background:url(/img/right-menu-right.png) no-repeat; height:56px; width:8px; float:left}

.left-menu-container .middle h1{color:#FFF; padding:0 0 0 10px; font-size:1em;}
.left-menu-container .middle UL{ list-style: none; padding: 0; margin: 0;}
.left-menu-container .middle UL LI{padding: 8px 0 0 0;}
.left-menu-container .middle a{ margin-left:3px;}
.left-menu-container .middle ul a{margin-left:0;}


/**********************************************
 **************** RIGHT MENU  ******************
 **********************************************/
 #right p{ margin: 0; padding: 0;}

/*used in about-us (Solstice at a Glance)*/
.right-container{width:auto;  height:auto; margin:5px 0 20px 0;}
.right-container h2{  font-size:1.2em; margin: 0; padding: 0; line-height: 20px; font-weight:bold; color: #669933; }
.right-container h2 a{ color: #669933; text-decoration: none;}
.right-container h2 a:hover{ text-decoration: underline;}
.right-container .adobe{float:left; width:100%; margin-bottom:20px;}

.right-menu-container{width:99%; height:auto; float:left; margin-bottom:28px;}
.right-menu-container .left{background:url(/img/right-menu-left.png) no-repeat; height:56px; width:8px; float:left;}
.right-menu-container .middle{background:url(/img/right-menu-middle.png) repeat-x; height:auto; width:220px; float:left; margin:0;}
.right-menu-container .right{background:url(/img/right-menu-right.png) no-repeat; height:56px; width:8px; float:left}

.right-menu-container .middle h2{color:#FFF; font-size:1.1em;  margin:0 0 10px 0; padding:7px 0 7px 10px;}
.right-menu-container .middle UL{ list-style: none; padding: 0; margin: 0;}
.right-menu-container .middle UL LI{padding: 5px 0 0 0;}
.right-menu-container .middle a{ margin-left:3px;}
.right-menu-container .middle ul a{margin-left:0;}
.right-menu-container .middle p{margin:2px 0 0 0;}


/**********************************************
 ****************** VALUES ********************
 **********************************************/
 
.solstice
{
    /*background: #fff;*/ 
    height: 211px;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.solstice:hover .solstice-next, .solstice:hover .solstice-prev, .solstice:focus .solstice-next, .solstice:focus .solstice-prev
{
    opacity: 0.7;
}
.solstice:hover .solstice-next:hover, .solstice:hover .solstice-next:focus, .solstice:hover .solstice-prev:hover, .solstice:hover .solstice-prev:focus, .solstice:focus .solstice-next:hover, .solstice:focus .solstice-next:focus, .solstice:focus . solstice-rev:hover, .solstice:focus .solstice-prev:focus
{
    border: 0;
    opacity: 1;
}
.solstice img
{
    bottom: 0;
    display: block;
    left: 0;
    position: absolute;
    max-width: 100%;
}
.solstice .solstice-slide
{
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    
    -webkit-transform-origin: 50.2% 190%;
    -moz-transform-origin: 50.2% 190%;
    -ms-transform-origin: 50.2% 190%;
    -o-transform-origin: 50.2% 190%;
    transform-origin: 50.2% 190%;
    
    -webkit-transform: rotate(45deg) translateZ(-1px);
    -moz-transform: rotate(45deg) translateZ(-1px);
    -ms-transform: rotate(45deg) translateZ(-1px);
    -o-transform: rotate(45deg) translateZ(-1px);
    transform: rotate(45deg) translateZ(-1px);
    
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    opacity: 0;
    visibility: hidden;
}
.solstice .prev
{
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.solstice .active
{
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    opacity: 1;
    visibility: visible;
}
@media screen and (min-width: 450px)
{
    .solstice
    {
        height: 150px;
    }
}
@media screen and (min-width: 650px)
{
    .solstice
    {
        height: 211px;
    }
}
@media screen and (min-width: 800px)
{
    .solstice
    {
        height: 211px;
    }
}
@media screen and (min-width: 960px)
{
    .solstice img
    {
        margin-left: -250px;
        position: absolute;
        left: 50%;
    }
}
.solstice-title h2
{
    margin-top: 0;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    color: #616161;
}


.solstice-prev, .solstice-next
{
    margin-top: -15px;
    position: absolute;
    top: 30%;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
    margin-top: 21px;
    opacity: 0.4;
}
.solstice-prev
{
    height: 15px;
    width: 15px;
    background: url(/img/about/fs.prevnext.png) 0px -15px no-repeat;
}
.solstice-next
{
    height: 15px;
    width: 15px;
    background: url(/img/about/fs.prevnext.png) -15px -15px no-repeat;
    right: 0px;
}

.solstice-content
{
   height: 100px;
   position: relative;
}

#customers, #skyHigh, #mirror, #thinking, #family
{
    position: absolute;
    top: 0;
}

.hidden { display: none }