@import url("tabs.css");


body {
    background-color: #504E5C;
    color: #575757;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    margin: 0;
    padding: 0;
}

#body {
    background-color: #ffffff;
    display: table;
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
}

#head {
    background: url('/randomheaderimages.php')  0px -10px no-repeat;
    height: 177px;
}

#head a {
    color: #333333;
    font-weight: bold;
    text-decoration: none;
}

#head a:hover {
    color: #ffffff;
    font-weight: bold;
    text-decoration: underline;
}

#logolink {
    display: block;
    float: left;
    height: 123px;
    width: 350px;
}

#smlogin {
    float: right;
    margin: 10px 10px 0px 0px;
    text-align: right;
}

#nav {
    border-bottom:10px solid #504e5c;
}

#nav div {
    padding: 10px;
}

#nav a, #nav a:hover, #nav a:visited {
    font-weight: bold;
    height: 37px;
    vertical-align: middle;
}

#prinav {
    background-color: #888888;
    background: url(./backgrounds.png) repeat-x scroll 0 0;
}

#prinav a, #prinav a:hover, #prinav a:visited {
    color: #ffffff;
}

#secnav {
    background-color: #ffa00a;
    background: url(./backgrounds.png) repeat-x scroll 0 -74px;
}

#secnav a, #secnav a:hover, #secnav a:visited {
    color: #ffffff;
}

#trinav {
    background-color: #cccccc;
    background: url(./backgrounds.png) repeat-x scroll 0 -37px;
}

#trinav a, #trinav a:hover, #trinav a:visited {
    color: #333333;
}

#pageTitle{
    position:relative;
    float:left;
    height:73px;
    width:100%;
    background: url(./backgrounds.png) 0 -296px;
    background-repeat: repeat-x;
    border-left:#e5e5e5;
    margin-left:0;
}

#pageTitle h1 {
    font-family: Arial, Verdana, Geneva, sans-serif;
    color: #fefece;
    font-size: 22px;
    font-weight: bold;
    margin: 0.5em 0;
    padding: 8px;
    width: 98%;
}

#page {
	background-color:#FFFFFF;
    clear: both;
    float: left;
	height:100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

#pagecols {
    float: none;
    left: 0;
    position: relative;
    width: 100%;
	height:100%;
	border-left:1px solid #cdcdcb;
	background-color:#ffffff;
}

#contentwrap {
    float: none;
    padding-bottom: 1em;
    padding-top: 1em;
    position: relative;
    width: 100%;
	height:100%;
}

#content {
    color: #2a2a2a;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	height:100%;
	line-height: 1.7em;
	margin: 0;
    overflow: hidden;
    position: relative;
    right: 0;
    width: 100%;
    float: right;
    
}
#content.sidebarIncluded {
    width: 70%;
}


#sidebar {
    float: left;
    height: 100%;
    position: relative;
    right: 0;
    width: 30%;
}

#leftnav {
    border: none;
    width: 249px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.smallSlider {
  text-align: center;
  padding: 10px;
}

#leftnav li {
    background-image: none;
    margin-top: 0px;
    padding-left: 0px;
}

#leftnav li a {
    font-family:Verdana, Geneva, sans-serif;
    font-size:13px;
    font-weight:bold;
    height: 28px;
    text-decoration: none;
}

#leftnav li a:link, #leftnav li a:visited {
    background: url(./backgrounds.png) 0 -223px;
    background-repeat: repeat-x;
    color: #888;
    display: block;
    padding: 8px 0 0 10px;
}

#leftnav li a:active, #leftnav li a.menu_current, #leftnav li a:hover {
    background: url(./backgrounds.png) 0 -260px;
    background-repeat:repeat-x;
    color: #283a50;
    padding: 8px 0 0 10px;
}

#foot
{
        border-top: 5px solid #9896a1;
        color: #9896a1;
        clear: both;
}

#left-foot
{
    padding-left:15px;
    font-size: 10px;
    padding-top: 10px;
    padding-bottom: 15px;
    text-align: left;
    width:590px;
    float:left;
}

#right-foot
{
    float:left;
    height: 30px;
    margin-top:15px;
    width: 370px;
}
#twitter-box {
	margin: 20px 20px;
	overflow: scroll;
	max-height: 170px;

}
.twitter-article {
    margin: 10px 5px;
}
.twitterSearchTitle {
	position: relative;
}
.twitterSearchBird {
	border: medium none;
    height: 65px;
    left: 575px;
    position: absolute;
    top: -10px;
    width: 65px;
}

.pieMain { width:350px;height:351px;margin:-30px auto; }

#footer-twitter, #footer-facebook, #footer-blog, #footer-donate, #footer-linkedin { margin-left: 5px; width: 49px; height:48px; float: left; display: block;}

#footer-linkedin { background: url('/images/footer-in.png') 0px 0px no-repeat; margin-right: -1px; }
#footer-facebook { background: url('/images/footer-facebook-button.png') 0px 0px no-repeat; }
#footer-twitter { background: url('/images/footer-twitter-button.png') 0px 0px no-repeat; }
#footer-blog { background: url('/images/footer-blog-button.png') 0px 0px no-repeat; }
#footer-donate { background: url('/images/footer-donate-button.png') 0px 0px no-repeat; }

#footer-share { margin-top:1px; width: 95px; height:48px; float: left; display: block; background: url('/images/icons/social/footer-share-button.png') 0px 0px no-repeat; }

#outer-small-login-container { width: 400px; }
.login-section { height: 115px; width: 210px; float: right;}
#login-left { padding-top: 15px; height: 100px; }
#login-right { position: relative; width: 110px; height: 117px; background: url('/images/connect/alternative-login-background.png'); }
#trust-button { display:block; width: 95px; height: 63px; background: url('/images/connect/opnli_baseline_card-small.png'); }
#login-right #trust-button { position:absolute; top:30px; left: 13px;  }

#mnuBtn {
    display: none;
}



/* start responsiveness */


/* Desktop
------------------------- */
@media (max-width: 992px) {
  /* layout */
  #body, #primary-tab-set, #upper-content, 
  #horizontal-content-split, 
  #contentwrap
   {
    width: 100%;  
  }
  #primary-tab-set .tab.left.highlight, 
  #primary-tab-set .tab.middle.highlight,
  #primary-tab-set .tab.short-highlighted,
  .tab.middle
  {
    background-image: none;
    width: 10% !important;
    padding: 0% 1% !important;
  }
  .tab.middle.active {
    width: 10% !important
  }
  div:not(#mtn) .active a {
    font-size: 13px !important;
  }
  #primary-tab-set .tab.left.active.highlight,
  #primary-tab-set .tab.middle.active.highlight, 
  .tab.middle.active {
    background-image: none !important;
  }
  
  #horizontal-content-split,
  #lower-content,
  #upper-content {
    width: 100%;
    height: auto;
    background:none;
  } 
  
  #pagecols {
    float: none;
    width: 100%;
  }
  #page {
    float: none;
    background-color: transparent;
    width: 100%;
  }
  #content {
    right: 0;
  }
  #primary-tab-set {
     margin-top: 0px;
    background: rgb(50, 50, 50)
  }
  div:not(#mtn) .tab a {
    font-weight: normal;
  }
  #primary-tab-set .tab.multiline a {
    margin-top: 0px;
    font-weight: normal;
  }
  #primary-tab-set .tab:nth-of-type(3)
  {
    max-width: 51px !important; 
  }
  #primary-tab-set .tab:nth-of-type(4) ,
  #primary-tab-set .tab:nth-of-type(5) ,
  #primary-tab-set .tab:nth-of-type(6),
  #primary-tab-set .tab:nth-of-type(7) {
    padding-left: 1px !important; 
    padding-right: 1px !important;
    min-width: 98px;
  }
  #primary-tab-set .tab:nth-of-type(4) a,
  #primary-tab-set .tab:nth-of-type(5) a,
  #primary-tab-set .tab:nth-of-type(6) a,
  #primary-tab-set .tab:nth-of-type(7) a {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 12px;
    
  }
  #primary-tab-set .tab.active {
    background-color: #000000;
  }
  #primary-tab-set .tab.short-highlighted, .tab.right {
    background-image: none;
    width: 8% !important;
  }
  img {
    max-width: 100%;
  }
  .module-img-right img {
    padding-left: 5%;
    width: 95%;
  }
  .module-img-left img {
    padding-right: 5%;
    width: 95%;
  }
  .content_vertical,
  .module {
    height: auto !important;
  }
  /* footer */ 
  #webinar-box, #twitter-box-out, #news-box {
    width: 30%;
    background-size: cover;
    background-size: contain;  
    margin-left: 1%;
  }
  #webinar-box img, #twitter-box-out img, #news-box img {
    max-width: 100%;
  }
  .twitterSearchTitle {
    display: none;
  }
  /* home */ 
  #upper-frame {
    width: 100%;
    background-image: none;
    background-color: #FFFDEF;
    margin-left: 0px;  
  }
  #rotating-content-nav {
    margin: 0;
    width: 5%;
  }
  #rotating-content-area {
    width: 42%;
  }
  #rotating-content-area .slide {
    background-size: cover;
    background-size: contain;
    margin: 0 auto;  
  }
  #rotating-content-area .slide[style] {
    width: 400px !important;
    margin: 0 auto;
  }
  #registration-box {
    width: 50%;
    background-size: contain;
  }
  .startbox .btn-gray {
    width: 100%;
    padding: 3px 0;
  }
  .halfbox .btn {
    margin-top: 0;
  }
  #right-upper-content {
    width: 50%;
  }
  #mission-statement {
    background-size: contain;
    height: 100px;
    background-position: center center;
    width: 100%;
  }
  #testimonials {
    width: 100%;
    margin-left: 0;
  }
  #testimonialsNav {
    margin-left: 0;
    padding-left: 0;
    background-image: none;
    width: 100%;
  }
  /* pages */
 #slideshow {
   margin-right: 0 !important;
 }
 div.module_slides {
   padding: 0 !important;
 }
 #slides .slide {
     max-width: 60% !important;
     
 }
 .module_slides .slide_content {
   width: 100% !important;
   max-width: 370px;
   padding-left: 20px;
 }
 .module_slides .texts {
   width: 100% !important;
 }
 #slide-1[style] {
   right:90% !important;
 }
 #slide-2[style] {
   right:85% !important;
 }
 #slide-3[style] {
   right:80% !important;
 }
 #slide-4[style] {
   right: 75% !important;
 }
 #slide-5[style] {
   right: 70% !important;
 }
 #slide-6[style] {
   right: 65% !important;
 }
 #slide-7[style] {
   right: 60% !important;
 }
 #contentwrap {
   
   
 }
  #sidebar {
    float: left;
    height: 100%;
    position: relative;
    right: 0;
    width: 29%;
  }
  #leftnav {
    width: 100%;
  }
  /* registration */
 #micro-header {
   width: 100% !important;
 }
 .mainTable {
    width: 100%;
  }
  
}

/* Tablet
------------------------- */
@media (max-width: 767px) {
  /* header */
 #head {
   height: 140px;
 }
  #logolink {
    width: 50%;
  }
  #sthoverbuttons {
    display: none;
  }
  #page {
    background-color: #FFFFFF;
  }
  #nav div {
    min-height: 40px;
    width: 100%;
  }
  #sidebar embed{
    width: 100%;
    vertical-align: top;  
  }
  #mnuBtn {
    display: none;
    -moz-user-select: none;
  background: #857e85 !important;
  background-image: -webkit-linear-gradient(top, #857e85, #616161) !important;
  background-image: -moz-linear-gradient(top, #857e85, #616161) !important;
  background-image: -ms-linear-gradient(top, #857e85, #616161) !important;
  background-image: -o-linear-gradient(top, #857e85, #616161) !important;
  background-image: linear-gradient(to bottom, #857e85, #616161) !important;
    border-color: #2e6da4;
    border-radius: 4px;
    clear: both;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    float: left;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857;
    margin-bottom: 0;
    margin-left: 5px;
    margin-top: -20px;
    padding: 6px 12px;
    position: relative;
    text-align: center;
    text-shadow: 1px 1px 1px #0d0d0d;
    vertical-align: middle;
    white-space: nowrap;
    z-index: 50;
  }
  #primary-tab-set {
    display: none;
    height: 400px;
    margin-top: 6px;
  }
  #pageTitle h1 {
    
    width: 90%;
    padding: 8px 4%;
  }
  #nav {
  border-bottom: 10px solid #504e5c;
  position: relative;
  bottom: 0;
  height: 0;
  top: 400px;;
  padding: 0px 0 0 0;  
  
  width: 100%;
  }
  #nav div {
    padding: 0 10px;
  }
  #primary-tab-set .tab.left.highlight, #primary-tab-set .tab.middle.highlight, #primary-tab-set .tab.short-highlighted, .tab.middle, 
  #primary-tab-set .tab.left.active.highlight, #primary-tab-set .tab.middle.active.highlight, .tab.middle.active {
  background: #857e85 !important;
  background-image: -webkit-linear-gradient(top, #857e85, #616161) !important;
  background-image: -moz-linear-gradient(top, #857e85, #616161) !important;
  background-image: -ms-linear-gradient(top, #857e85, #616161) !important;
  background-image: -o-linear-gradient(top, #857e85, #616161) !important;
  background-image: linear-gradient(to bottom, #857e85, #616161) !important; 
  -webkit-border-radius: 6;
  -moz-border-radius: 6;   
  border-radius: 6px;
    font-family: Arial;
    color: #ffffff;
    font-size: 18px;
    line-height: 18px !important;
    padding: 0px 5% !important;
    text-decoration: none;
    width: 90% !important;
    height: 44px !important;
  }
  #primary-tab-set .tab.active {
    background-color: #857e85;
    background-image: -webkit-linear-gradient(top, #857e85, #616161);
  background-image: -moz-linear-gradient(top, #857e85, #616161);
  background-image: -ms-linear-gradient(top, #857e85, #616161);
  background-image: -o-linear-gradient(top, #857e85, #616161);
  background-image: linear-gradient(to bottom, #857e85, #616161);
  }
  #primary-tab-set li a {
    font-size: 18px !important;
    padding: 0 !important;
    line-height: 40px !important;
  }
  #primary-tab-set .tab:nth-of-type(4), #primary-tab-set .tab:nth-of-type(5), #primary-tab-set .tab:nth-of-type(6), #primary-tab-set .tab:nth-of-type(7) {
    padding: 0px 5% !important;
    line-height: 40px !important;
  }
  #primary-tab-set .tab:nth-of-type(3) {
    max-width: 800px !important;
  }
  .tab.middle.next-active {
    width: 90% !important
  }
  .tab.left {
    margin-left: 0px !important;
  }
  div:not(#mtn) .active a {
    font-size: 18px !important;
  }
  #secnav {
    position: absolute;
    top: -30px;
    background-color: orange;
    height: 40px;
   padding: 0 !important;
  }
  
  /* home */
  #rotating-content-area {
    width: 340px;
    margin: 0 auto;
    float: none;
  }
  #pageTitle h1 {
    font-size: 18px;
    font-weight: normal;
  }
  .rotating-content {
      border: 2px solid gray;
    padding: 10px 5%;
    width: 80%;
    margin: 0 auto;
    border-radius: 10px;

  }
  #registration-box {
    width: 90%;
    clear: both;
    margin: 10px 5%;
    background-size: cover;
  }
  .startbox {
    margin-top: 62px;
  }
  /* footer */
  #left-foot {
    width: 90%;
    padding-right: 5%;
    padding-left: 5%;
  }
  #right-foot {
    height: auto;
    width: 90%;
    padding-right: 5%;
    padding-left: 5%;
  }
  .module, 
  .module_special {
    padding: 20px !important;
  }
  .content_vertical {
    width: 80% !important;
    padding: 0 20px 0 0 !important;
  }
  .module_special.module-odd .content_vertical,
  .module.module-odd .content_vertical {
    padding: 0 0 0 20px !important;
  }
  .module img, 
  .module_special img {
    margin-top: 0 !important;
    margin:1px;
    border: 1px solid lightgray;
    border-radius: 10px;
    padding: 1px !important;
    
  }
  .module-img-left img {
    padding-right: 0%;
    width: 100%;
  }
  .module-img-right img {
    padding-right: 0%;
    width: 100%;
  }
  .pieMain {
    
  }
  .module.pie-group {
    display: block;
  }
  .module.pie-group .content_vertical {
    float: none;
    display: block;
    width: 95% !important;
    padding-top: 20px !important;
    clear: both;
  }
   .module.pie-group .module-img-left .image {
     float: none;
   }
   .module_special h1 {
    margin-top: 0px !important;
  }
  .module_special_table {
    margin: 0 0 30px 0;
  }
  #smlogin {
    background: rgba(255,255,255,.9);
    padding: 5px;
  }
  .smallSlider {
    display: none;
  }
}
/*end 767 */

/* Landscape phones
------------------------- */
@media (max-width: 480px) {
  #head {
    background-size: 170%;
    background-position: -20px 0;
  }
  #smlogin {
    background: rgba(255,255,255,.9);
    margin: 5px;
  }
  #leftnav li a:active, #leftnav li a.menu_current, #leftnav li a:hover {
    padding-top: 0px;
  }
  #leftnav li a:link, #leftnav li a:visited {
    min-height: 34px;
  }
  #logolink {
    width: 20%;
  }
  #registration-box {
    background-size: contain;
  }
  #rotating-content-nav {
    display: none;
  }
  .rotating-content {
    border: 0px solid gray;
    padding: 10px 0%;
    width: 100%;
  }
 /* #sidebar {
    float: none; 
    width: 100%;
  }
  #content.sidebarIncluded {
      width: 90%;
    margin: 0 5%;
  }*/
  .btn-lg, .btn-group-lg>.btn {
  padding: 4px 16px;
  }
  .module,
  .module_special.module-odd .content_vertical,
  .module.module-odd .content_vertical {
    display: block;
    padding: 10px 0 !important;
  }
  .content_vertical {
    display: block !important;
    width: 100% !important;
    padding: 20px 0 20px 0 !important;
    clear: both;
  }
  .module-img-left img, 
  .module-img-right img {
    width: 90%;
    margin: 0 auto;
    float: none !important;
  }  
  .module {
    display: block;
    width: 90%;
    margin: 0 auto;
  }
  .module .module-txt-left, 
  .module .module-txt-right {
    float: none !important;
  }
  .pieMain {
    margin: 0 auto;
  }
  .large-box {
    max-width: 80%;
    border: 1px solid lightgray;
    margin: 0 auto;
  }
  #pageTitle h1 {
    padding-top: 0 !important;
  }
  
}

/* iPhones
------------------------- */
@media (max-width: 320px) {
  .pieMain {
  width: 290px;
  }
  iframe, .step, .animation-plane {
    width: 100%;
  }
  #steps {
    height: 500px;
  }
  #right-column {
  width: 513px;
  margin-left: 0;
  }
  .btn-lg, .btn-group-lg>.btn {
    padding: 4px 6px;
    font-size: 17px;
  }
  #registration-box {
    width: 100%;
    clear: both;
    margin: 10px 0%;
    background-size: cover;
  }
  #pie-group {
    
    margin-top: 250px;
    
  }
#rotating-content-area {
  width: 320px;
  margin: 0 auto;
  float: none;
}
    
 
  
}