html {
    background: none repeat scroll 0 0 #FFFFFF;
}

#interior { position: relative;}


/* STRUCTURE
-------------------------------------------------------------- */


#main  {
    -moz-box-shadow:    0 0 10px rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.5);
  box-shadow:         0 0 10px rgba(0,0,0,.5);
  width: 990px; 
  margin: auto; 
  position: relative; 
  min-height: 500px; 
}

#content, #options {
    float: left;
}

#content {
    margin: 60px 30px 30px 200px;
    width: 470px;
}

#content article {
    margin-bottom: 1em;
}

#options {
    padding: 0 0 30px;
    width: 260px;
    margin-top:100px; 
}


/* NAV PANEL
-------------------------------------------------------------- */

nav {
  background: #fff;
  padding: 20px;
  position: relative;
}

.panel {
  background: none repeat scroll 0 0 #634085;
  position: absolute;
  width: 250px;
  z-index: 99;
  left: -80px;
  margin-left: 0;
    -moz-box-shadow:    0 0 6px rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 6px rgba(0,0,0,.5);
  box-shadow:         0 0 6px rgba(0,0,0,.5);
}

.panel .headline {
    display: block;
    padding: 10px 20px;
}

.panel h1 {
 color: #fff; 
 margin-bottom: 5px;
 text-transform: uppercase;
  font-size: 22px;
}

.panel h2 {
 color: #fff; 
 font-size: 15px;
}

nav li:before {
    content: ">";
    font-family: "trilogyicons";
    font-size: 13px;
    left: 0;
    padding-left: 20px;
    position: absolute;
    color: #FFA500; }
    
nav li {
    font-size: 17px;
    margin-bottom: 10px;
    padding-left: 17px;
    list-style: none;
}

nav li:last-child {
  margin-bottom: 0;
}

.dropdown {
    display: none;
}


/* FOOTER
-------------------------------------------------------------- */

footer {
    position: relative;
    width: 980px;
}

.info {
    display: inline-block;
    float: left;
    font-size: 12px;
    margin: 0;
    padding-top: 0;
    text-align: left;
}

.links {
    display: block;
    float: right;
    font-size: 18px;
    padding-top: 20px;
    text-align: center;
}

.links h3 {
    color: #F47321;
    font-size: 16px;
    text-transform: uppercase;
}

.links .icons {
    color: #4A4A4A;
    margin-right: 8px;
    opacity: 0.6;
}

#logo {
  float: left;
  display: block;
  padding-top: 20px; 
  opacity: .8;
}

#logo:hover {
  opacity: 1;
}

.share { float: left; } 

/* TABLES
-------------------------------------------------------------- */

table {
    font-size: 13px;
    line-height: 1.2;
    margin-bottom: 1.4em;
    width: 100%;  
    border: 1px solid #b9b9b9;
}

tr:nth-child(2n) {
    background: none repeat scroll 0 0 #F2F1E8;
    border-top: 1px solid #b9b9b9;
    border-bottom: 1px solid #b9b9b9;
}

/* CALLOUTS
-------------------------------------------------------------- */



.callout.orange {
    background: none repeat scroll 0 0 #F47321;}
.callout.teal { background: none repeat scroll 0 0 #19bcb9; }
.callout.purple { background: none repeat scroll 0 0 #49176d; }

.callout h1 {
  text-transform: uppercase;
  color: #fff;
  font-size: 24px;
  margin-bottom: 10px;
}

.callout h2 {
  color: #fff;
  font-size: 20px;
}

.callout p, .callout ul {
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
}

.callout li {
  line-height: 19px;
  margin-bottom: 10px;
}

.callout .text {
   padding: 25px;
   display: block;
}

.callout img {
   width: 260px;
}


.downloads {
 padding: 20px;
 background: #F2F1E8;
 text-align: center;
 margin-bottom: 20px;
}

/* LISTS
-------------------------------------------------------------- */

.subsections {
    background: none repeat scroll 0 0 #F2F1E8;
}

#main .subsections ul {
    padding: 20px 20px 10px;
    margin: 0;
}


#main .subsections ul li {
  left: 0;
  font-size: 17px;
  list-style: none outside none;
  padding-left: 20px;
  padding-bottom: 10px;
  padding-right: 10px;
}
#main .subsections ul li:last-child { margin-bottom: 0; }

#main .subsections li:before {
    color: #FFA500;
    content: ">";
    display: inline-block;
    font-family: trilogyicons;
    font-size: 13px;
    left: 0;
    position: absolute;
}



/* HOME
-------------------------------------------------------------- */

.above {
  background: url("/theme/img/hero.png") no-repeat scroll center 0;
   width: 990px;
   position: relative;
}

.below {
  width: 990px;
  margin: auto;
  background: #e9e9e9;
  padding: 4rem 0 0 0;
}

.root .panel {
  width: 390px;
    -moz-box-shadow:    0 0 10px rgba(0,0,0,.8);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.8);
  box-shadow:         0 0 10px rgba(0,0,0,.8);
  position: absolute;
  left: 180px;
  }

.root .panel h1 {
  font-size: 30px; 
}

.root .panel h2 {
  font-size: 19px;
}

.quick-links h3, .quick-links4 h3 {
    margin-top: 40px;
    padding: 10px;
    text-align: center;
    margin-bottom: 15px;
}

.quick-links a {
    color: #4A4A4A;
    display: inline-block;
    margin-right: 1%;
    margin-left: 1%;
    position: relative;
    width: 31%;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px; /* border radius */
}


.quick-links4 a {
    color: #4A4A4A;
    display: inline-block;
    margin: 0;
    padding: 10px 0;
    position: relative;
}

.quick-links4 {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
}

.quick-links4 a:last-child {
}

@media only screen and (max-width: 990px){
   .quick-links4 {
      display: block;
   }
}

.quick-links .icon, .quick-links4 .icon {
    left: 50%;
    position: absolute;
    width: 32px;
    margin-left: -16px;
    margin-top: 10px;
    height:32px;
    background-color: #7f4fa2;
        -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px; /* border radius */
}

.quick-links .men .icon, .quick-links4 .men .icon { background-color: #00ced0; }
.quick-links .questions .icon, .quick-links4 .questions .icon {  background-color: #F47321; }
.quick-links4 .aca .icon {  background-color: #f9d54d; }

.quick-links a:hover h3, .quick-links4 a:hover h3 {
  color: #fff;
}  

.quick-links a:hover, .quick-links4 a:hover {
  background: #7f4fa2;
}

.quick-links a.men:hover { background-color: #00ced0;}
.quick-links a.questions:hover { background-color: #F47321;}
.quick-links a.aca:hover { background-color: #f9d54d;}

.quick-links4 a.men:hover { background-color: #00ced0;}
.quick-links4 a.questions:hover { background-color: #F47321;}
.quick-links4 a.aca:hover { background-color: #f9d54d;}



#download, .download {
    background: none repeat scroll 0 0 #00B0AD;
    color: #FFFFFF;
    padding: 7px;
    font-size: 15px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px; /* border radius */
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    -moz-box-shadow:    0 0 6px rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 6px rgba(0,0,0,.5);
    box-shadow:         0 0 6px rgba(0,0,0,.5);
}

#download {
      bottom: 170px;
      position: absolute;
    right: 170px;

}

.download {
    display: inline-block;
    padding: 10px 10px 10px 30px;
    position: relative;
}

#download:hover, .download:hover, .download:active {
      background: none repeat scroll 0 0 #F47321; color: #fff;
}

.download:before {
    content: "2";
    font-family: "trilogyicons";
    left: 10px;
    position: absolute;
    top: 8px;
}



/* SERVICES
-------------------------------------------------------------- */

.services #content h2 {
    border-bottom: 1px solid #9F9F9F;
    padding-bottom: 5px;
    text-transform: uppercase;
}


/* ADDTHIS
-------------------------------------------------------------- */

.addthis_toolbox {
    display: block;
    float: left;
    font-size: 20px;
    left: 20px;
    position: absolute;
    top: 500px;
    width: 120px;
}
.addthisbox .addthis_toolbox  { margin-left: 0 !important; }
.addthis_floating_style { position: relative !important; }

.addthis_floating_style {
    background: none repeat scroll 0 0 transparent;
    padding: 5px;
    position: fixed;
    text-align: center;
    z-index: 1;
    border-radius: 0;
}

.at300b, .at300bo, .at300m, .at300bs {
    margin-top: 2px;
}

.breadcrumbs {
    display: block;
    font-size: 12px;
    margin-bottom: 10px;
    line-height: 1.2;
}

.breadcrumbs .icons {
    font-size: 7px;
}

.breadcrumbs a {
color: #15adaa; 
}

.breadcrumbs a:hover { 
   color: #693590;   
}



.next {
    background: none repeat scroll 0 0 #fff;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px; /* border radius */
    display: inline-block;
    float: right;
    padding: 10px 20px 10px 10px;
    position: relative;
     background-color: #F2F1E8; 
}


.next:after {
    content: ">";
    font-family: "trilogyicons";
    font-size: 13px;
    right: 0;
    padding-right: 5px;
    position: absolute;
    color: #FFA500; }


.previous {
    background: none repeat scroll 0 0 #fff;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px; /* border radius */
    display: inline-block;
    float: left;
    padding: 10px 10px 10px 25px;
    position: relative;
     background-color: #F2F1E8; 
}

.previous:before {
    content: "<";
    font-family: "trilogyicons";
    font-size: 13px;
    left: 10px;
    padding-right: 5px;
    position: absolute;
    color: #FFA500; }
    
.next:hover, .previous:hover {
 background-color: #F2F1E8; 
}



.toggle {
    background: none repeat scroll 0 0 #00B0AD;
    color: #FFFFFF;
    padding: 5px;
    font-weight:700;
    font-size: 15px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 0 0 2px 2px;
    width: 80px;
    position: absolute;
    text-align: center;
    right:100px;
    top: 0;
    -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.4);
    -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.4);
    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.4);
    z-index: 9999;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f4f1f6+0,b9a5c7+100 */
    background: #f4f1f6; /* Old browsers */
    background: -moz-linear-gradient(top, #f4f1f6 0%, #b9a5c7 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #f4f1f6 0%,#b9a5c7 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #f4f1f6 0%,#b9a5c7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f1f6', endColorstr='#b9a5c7',GradientType=0 ); /* IE6-9 */
}

@media (max-width : 1160px) {
    

    #content {
    margin: 60px 30px 30px 200px;
    width: 538px; }
    #options { margin: 0 0 0 200px; padding-top: 0; }
    
    #main, footer {
    width: 768px;
}


    
          
}

@media (max-width : 925px) {
  
  #main { width: 100%; box-shadow: none; }
  footer { width: 96%; box-shadow: none; padding:2%; }
  
  .panel {
   left: 0; }
  
  #content {
    margin: 60px 20px 30px 290px;
    width: 440px; }
  
  #options { margin: 0 0 0 290px; padding: 0; }



}


@media (max-width : 990px) {
      #main, footer  {
    width: 768px; }
 
 .above {
    background-position: left center;
    width: 768px; }
    
  .below { width: 768px; }  
  
  #download {
    bottom: 170px;
    position: absolute;
    right: 20px; }

  .root .panel {
    width: 385px; left: 170px;}

  .quick-links h3 {
   font-size:16px; 
  }
  


.quick-links4 a {
    color: #4A4A4A;
    display: block;
    margin: 0 auto;
    padding: 10px 0;
    position: relative;
    width: 245px;
}

.toggle {
  right: 60px;
}

}

 
@media (min-width : 750px) {
  .above {
  height: 460px; }
}

@media (max-width : 750px) {
  


    .above {
      background: url("/theme/img/mobile-bg.png") no-repeat scroll left 0;
      position: relative;
      width: 100%;
      padding-top: 200px; }
    
    .below {
      width: 100%;
      margin: auto;
      background: #e9e9e9;
      padding: 20px 0; }
    
    .root .panel {
      background: none repeat scroll 0 0 #634085;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      left: 0;
      margin: 0;
      position: relative;
      width: 100%;
      z-index: 99; }

    .quick-links a {
      border-radius: 2px;
      color: #4A4A4A;
      display: inline-block;
      margin-left: 3%;
      margin-right: 3%;
      position: relative;
      width: 100%; !important }
      
      
    
    #logo {
      display: block;
      float: none;
      opacity: 0.8;
      padding-top: 10px; }
    
    footer {
      background-color: #ffffff;
      position: relative;
      text-align: center;
      width: 100%;
      padding: 0; }
        
    #logo > img {
      margin-right: 0; }    
    
    .links, .info {
      float: none; }
    
    .info { text-align: center; }
    
    .links {
     background-color: #634085;
     padding: 10px 0;
     margin-top:10px;
     color: #fff; }
    
    .links h3, .links .icons {
      color: #fff; }
    
    #content {
      box-shadow: none;
      padding: 5%;
      width: 90%;
      margin: 0; }
    
    #main {
      width: 100%;
      box-shadow: none;
      margin: 0; }
    
    #options {
      padding: 0 5% 30px;
      width: 260px;
      margin: auto; }
    
    .panel { 
      position: relative;
      margin: 0; width: 100%; left: 0; margin: 0 0 20px; }
    
    .panel h1, .panel h2 { text-align: center;}
    .panel h1, .root .panel h1 { font-size: 22px; }
    .root .panel h2 { font-size: 15px; }
    
    .addthis_toolbox {
      float: none;
      left: 0;
      margin-bottom: 10px;
      position: relative;
      top: 0;
      display: inline-block; }
  
    .share { float: none; }
    
    a.dropdown {
      background: none repeat scroll 0 0 #fff;
      bottom: -30px;
      color: #FFA500;
      display: none;
      height: 30px;
      position: absolute;
      text-align: center;
      width: 50px; 
      left:50%;
      margin-left: -25px;
      font-family: 'trilogyicons'; 
      content: attr(data-icon); 
      speak: none; 
      font-weight: normal; 
      font-variant: normal; 
      text-transform: none; 
      font-size: 19px;
      line-height: 30px; 
        -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
        -moz-box-shadow:    0 0 6px rgba(0,0,0,.5);
        -webkit-box-shadow: 0 0 6px rgba(0,0,0,.5);
      box-shadow:         0 0 6px rgba(0,0,0,.5);
        -moz-border-radius: 0 0 2px 2px;
        -webkit-border-radius: 0 0 2px 2px;
      border-radius: 0 0 2px 2px; /* border radius */ }
      
.toggle {
    right: 20px;
}

#download {
    top: 165px;
    right: 20px;
    height:25px;
}
      

}  

@media (max-width : 750px){
    a.dropdown { display:block; }
    
    .nav-wrap {
      height: 0px;
      overflow: hidden;
      position: relative;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out; }
    
    .nav-wrap.show { height: auto; }
    
    .nav-wrap nav { position:relative; }
    

}