@import url(http://fonts.googleapis.com/css?family=Rokkitt:400,700);

/*****************
Johns Island
font-family: 'Rokkitt', serif;
font-family: 'Open Sans', sans-serif;
******************/

* {font-family: 'Open Sans', sans-serif;-webkit-font-smoothing:antialiased;}
h1,  h3, h4, h5, h6,
html.club_scripts_search_search .content-right form span, .srch_sectionTitle, .birthdays table th{
    float: none;
    width: 100%;
    font-family: 'Rokkitt', serif;
    font-weight: normal;
}
html.club_scripts_search_search .content-right form span, .srch_sectionTitle, .birthdays table th{ width: auto;}
body {
    background: #fff;
    margin: 0px;
}
#website {}
.wrapper{
    width: 100%;
    float: left;
    position: relative;
}
.wrap {
    margin: 0 auto;
    width: 960px;
    height: auto;
    position: relative;
}
/********************
        HEADER
*********************/
.header {
    height: auto;
    margin: 0px;
    z-index: 100;
    position: fixed;
    top:0;
}
.loggedIn .header{margin-top:33px;}
.navTop{
    background-color:rgba(255,255,255,.8);
    margin: 0px;
    padding: 0px;
    width:100%;
    height:80px;
}
.logo {
    margin: 14px 0px 0px 30px;
    display: inline-block;
}
.header ul.social{
    display:inline-block;
    width:220px;
    padding:0;
    list-style: none;
   vertical-align: middle;
   cursor:default;
      text-align: right;
}
.header ul.social li{
    display:inline;
    cursor:default;
}
.header li a{
    text-decoration: none;
    font-size: 17px;
    margin-right:6px;
    color:#df9c59;
    cursor:pointer;
}
.navTop .welcome-back li a:hover{
    color:#df9c59;
}
.header ul.social li a:hover{
    color:#008299;
}
.navBottom ul.social {
    margin:0;
    top:13px;
    right:-220px;
    position: absolute; 
    transition: all .3s linear ;

}
.navBottom ul.social li a:hover{color:white;}
a.loginButton{
    display:block;
    padding:30px 25px;
    text-transform: uppercase;
    font-size:15px;
    color:white;
    background-color:#535246;
    font-style: normal;
}
a.loginButton:hover{
    color:white;
}
.NavRight{float:right;}
.homepage .navTop a.loginButton{
    padding:30px 24px;
}
.navTop a.loginButton{
    
    display:inline-block;
    padding:30px 25px;
    text-transform: uppercase;
    font-size:15px;
    margin:0;
}
.navTop a.loginButton:after{clear:both;}
.navBottom a.loginButton{
    
    position: absolute;
  top: 0;
  right: -168px;
  padding: 16px 25px;
  line-height: 21px;
  transition: all .3s linear ;
}
a.loginButton span{
    display:inline-block;    
    transition: all .1s linear;
}
a.loginButton:hover span{
    -webkit-animation:move .6s;
    -moz-animation:move .6s;
    -o-animation:move .6s;
    animation:move .6s;
} 
@-webkit-keyframes move {
  0%,100% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
  }
  35% {
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
        -o-transform: translateY(-2px);
        transform: translateY(-2px);
  }
  
}
@-moz-keyframes move {
  0%,100% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
  }
  35% {
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
        -o-transform: translateY(-2px);
        transform: translateY(-2px);
  }
  
}
@-o-keyframes move {
  0%,100% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
  }
  35% {
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
        -o-transform: translateY(-2px);
        transform: translateY(-2px);
  }
  
}
   @keyframes move {
  0%,100% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
  }
  35% {
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
        -o-transform: translateY(-2px);
        transform: translateY(-2px);
  }
  
}
.navBottom{
    background-color:rgba(0,121,135,.7);
    position: relative;
    transition:all .3s linear;
}
.navigation {
    margin: 10px ;
    padding: 0px;
    list-style: none;
    display:inline-block;
}
.navigation li {
    width: auto;
    display:inline;
}

.navigation li.active {}
.navigation li a {
    padding: 6px 8px;
    height:31px;
    font-size: 14px;
    line-height: 15px;
    font-style: normal;
    color: white;
    display:inline-block;
    text-decoration: none;
    box-sizing:border-box;
    transition:none;
    -webkit-transition:none;
    -moz-transition:none;
}
.navigation li.active a,.navigation li a:hover {border:2px solid white;padding: 6px 6px;}
/*SEARCH BOX*/
#box-search{
    width: 168px;
    height:53px;
    position: relative;
    margin:0px;
}
#box-search form{
    margin: 0px auto;
    width:100%;
    height:100%;
}
#box-search form input#SRCH_TEXT{
    position: absolute;
    left: 100%;
    height:100%;
    width:114px;
    background-color:rgb(182, 216, 220);
    box-sizing:border-box;
    padding: 5px 10px;
    border:0px;
    overflow: visible;
    transition: all .2s linear;
}
#box-search form input.bt-search{
    background-color:rgb(182, 216, 220);
    cursor: pointer;
      padding: 17px 17px;
  height: 19px;
  width: 20px;
  position: absolute;
  right: 0;
}
#box-search form input::-webkit-input-placeholder{
    overflow:visible;
    font-size:15px;
    color: white;
    opacity:1;
    font-style: normal;
}
#box-search form input:-webkit-input-placeholder{
    overflow:visible;
    font-size:15px;
    color: white;
    opacity:1;
    font-style: normal;
}

#box-search form input:-moz-placeholder{
    overflow:visible;
    font-size:15px;
    color: white;
    opacity:1;
    font-style: normal;
} 
 
#box-search form input::-moz-placeholder{
    overflow:visible;
    font-size:15px;
    color: white;
    opacity:1;
    font-style: normal;
} 
#box-search form input:-ms-input-placeholder{
    overflow:visible;
  font-size:15px;
    color: white;
    opacity:1;
    font-style: normal;
}
#box-search form input::placeholder{
    overflow:visible;
    font-size:15px;
    color: white;
    opacity:1;
    font-style: normal;
}
#box-search form input:placeholder{
    overflow:visible;
    font-size:15px;
    color: white;
    opacity:1;
    font-style: normal;
}
#box-search{position: absolute;top:0;right:0;}
.private .navTop a.loginButton{padding:20px 25px;}
.private .navTop{height:60px;}

/********************
      MEMBER LOGIN
*********************/
.closeLogin {
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    
}
.memberLogin {
    transition:all .3s ease;
    height:246px;
    width: 400px;
    display: none;
    position: absolute;
   right:15px;
    top: 80px;
    z-index: 1000;
    font-size: 10px;
    background-image:url(/custom/design/images/login_bg.png);
    background-size:cover;
    background-position: center;
    background-repeat:no-repeat;
    text-align: center;
}
.memberLogin div.closeButton{
      position: absolute;
  top: 15px;
  right: 11px;
  color: white;
  font-size: 25px;
  font-family: sans-serif;
  cursor:pointer;
  z-index:10000;
}
.memberLogin h2 {
    position: relative;
  color: #FFF;
  margin-top: 25px;
  letter-spacing:1px;
  font-size: 25px;
  font-style: normal;
  text-align: center;
  text-transform: none;
  margin-bottom: 15px;
}
form#memberLogin{
    position: relative;
    float: left;
    display: block;
    padding-bottom: 65px;
}
form#memberLogin input[type="text"],
form#memberLogin input[type="password"] {
    width: 329px;
    height: 30px;
    box-sizing:border-box;
    position: relative;
    padding: 0px 10px;
    margin: 0px auto 15px;
    outline: 0 none;
    font-size: 15px;
    color: #fff;
    border: 0px;
    background-color: #535246;
    -moz-box-shadow:    inset 1px 1px 0px rgba(0,0,0,.6);
    -webkit-box-shadow: inset 1px 1px 0px rgba(0,0,0,.6);
    box-shadow: inset 1px 1px 0px rgba(0,0,0,.6); 
}
form#memberLogin input::-webkit-input-placeholder{
    overflow:visible;
    font-size:15px;
    color: white;
    opacity:1;
    font-style: normal;
}
form#memberLogin input:-webkit-input-placeholder{
    overflow:visible;
    font-size:15px;
    color: white;
    opacity:1;
    font-style: normal;
}

form#memberLogin input:-moz-placeholder{
    overflow:visible;
    font-size:15px;
    color: white;
    opacity:1;
    font-style: normal;
} 
 
form#memberLogin input::-moz-placeholder{
    overflow:visible;
    font-size:15px;
    color: white;
    opacity:1;
    font-style: normal;
} 
form#memberLogin input:-ms-input-placeholder{
    overflow:visible;
  font-size:15px;
    color: white;
    opacity:1;
    font-style: normal;
}
form#memberLogin input::placeholder{
    overflow:visible;
    font-size:15px;
    color: white;
    opacity:1;
    font-style: normal;
}
form#memberLogin input:placeholder{
    overflow:visible;
    font-size:15px;
    color: white;
    opacity:1;
    font-style: normal;
}
form#memberLogin input.remember {
    bottom: 20px;
    left: 36px;
    position: absolute;
    cursor:pointer;
}
form#memberLogin label.remember {
    bottom: 17px;
    left: 56px;
    position: absolute;
    font-size: 12px;
    line-height: 22px;
    color: #fff;
}
form#memberLogin input.submit {
    border: 0 none;
    bottom: 10px;
    cursor: pointer;
    height: 40px;
    outline: 0 none;
    position: absolute;
    right: 34px;
    width: 95px;
    background-color:#df9c59;
    color:white;
    box-sizing:border-box;
    text-transform: uppercase;
    font-size:15px;
    transition:all .3s ease;
}
form#memberLogin input.submit:hover{
    box-shadow: 1px 1px 3px white;
}
form#memberLogin .help {
      bottom: 87px;
  right: 50px;
  position: absolute;
  color: #fff;
  font-size: 12px;
  line-height: 15px;
  background-color: rgb(223, 156, 89);
  border-radius: 50%;
  padding: 0px 5px 0 4px;
}
form#memberLogin input::-webkit-input-placeholder{
    overflow:visible;
    opacity:1;
    font-style: normal;
}
form#memberLogin input:-webkit-input-placeholder{
    overflow:visible;
    opacity:1;
    font-style: normal;
}
form#memberLogin input:-moz-placeholder{
    overflow:visible;
    opacity:1;
    font-style: normal;
} 
form#memberLogin input::-moz-placeholder{
    overflow:visible;
    opacity:1;
    font-style: normal;
} 
form#memberLogin input:-ms-input-placeholder{
    overflow:visible;
    opacity:1;
    font-style: normal;
}
form#memberLogin input::placeholder{
    overflow:visible;
    opacity:1;
    font-style: normal;
}
form#memberLogin input:placeholder{
    overflow:visible;
    opacity:1;
    font-style: normal;
}
/****membership information****/
.memberLogin .membership{
    float: left;
    position: relative;
    width: 100%;
    margin-top: 40px;
    padding: 15px 0px;
    border-top: 1px solid #13507e;
}
.memberLogin .membership a{
    color:#fff;
    width: 100%;
    display: block;
    text-align: center;
    text-transform: uppercase;
    font-size: 13px;
    font-family: 'Open Sans',sans-serif;
}
.memberLogin .membership a:hover{color:#9A8241;}
/********************
      BANNERS
*********************/
/****static banner****/
.box-banner {
    z-index: 1;
    position: relative;
    margin-top:80px;
}

.loggedIn .box-banner{margin-top:113px;}
.box-banner .images {
    min-width: 100%;
    float: left;
    height:450px;
    background-position: center;
    background-repeat: no-repeat;
}

.private .box-banner{ margin-top:60px;}
.loggedIn .private .box-banner{margin-top:93px;}
.private .box-banner .images{}
.box-banner .colorLine{
    width:100%;
    position: absolute;
    bottom:0;
    left:0;
    right:0;
}
/****banner with slideshow****/
.box-slideshow {
    z-index: 1;
}
.box-slideshow .images {
    width: 100%;
    float: left;
    background-position: center;
    background-repeat: no-repeat;
}
/********************
     WELCOME BOX
*********************/
.welcome-back{display:inline;}
.welcome-back ul{
    list-style: none;
    text-align: center;
    padding: 0px;
    margin: 25px 0 0px;
    display:inline;
}
.welcome-back ul li{
    display: inline-block;
    margin: 15px 5px 0px 0px;
    padding: 0px 10px;
}

.welcome-back ul li a{
    color:#008299;
    font-size:14px;
    font-weight: 600;
}

/********************
      MAIN AREA
*********************/
.main {
    z-index: 10;
    margin:0;
}
.main .content-right {
    width: 710px;
    float: none;
    display:inline-block;
    margin: 0px;
    padding: 40px 0 40px 255px;
    vertical-align: top;
    background-color:white;
    min-height:650px;
}
/****TEXT STYLES****/
h1, .content-right h1 {
    margin: 0 0 15px 0px;
    font-size: 56px;
    line-height: 54px;
    font-family: 'Rokkitt',serif;
    color:#008299;
}
h2, .content-right h2, html.club_scripts_search_search .content-right form span  /*KEEP THIS!! THIS IS TO HELP STYLE SEARCH PAGE*/ {
    font-size: 24px;
    line-height: 38px;
    color:#84ad64;
    text-transform: uppercase;
    margin: 30px 0px;
    letter-spacing: 2px;
    font-weight: 600;

}
h3, .content-right h3, .srch_sectionTitle /*KEEP THIS!! THIS IS TO HELP STYLE SEARCH PAGE*/ {
    font-size: 24px;
    line-height: 33px;
    font-style: normal;
    margin: 15px 0px;
    color:#575646;
}
h4, .content-right h4, .birthdays table th {
    font-size: 20px;
    line-height: 30px;
    font-style: italic;
    margin: 15px 0px;
}
h5, .content-right h5 {
    font-size: 18px;
    line-height: 28px;
    font-style: italic;
    margin: 15px 0px;
}
h6, .content-right h6 {
    font-size: 16px;
    line-height: 26px;
    font-style: italic;
    margin: 15px 0px;
}
p, .main .content-right p,
ul li, .main .content-right ul li,
ol li, .main .content-right ol li, .content-right table td{
    margin: 0px 0px 20px;
    font-size: 16px;
    color: #575646;
    line-height: 30px;
}
ul li, .main .content-right ul li, ol li, .main .content-right ol li{margin:0px;}
a, .main .content-right a {
    color: #008299;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.1s linear;
}
a:hover, .main .content-right a:hover {
    text-decoration: underline;
    transition: all 0.1s linear;
}
html.club_scripts_member_member_profile a, html.club_scripts_member_member_profile .main .content-right a, html.club_scripts_member_member_profile  a:hover, html.club_scripts_member_member_profile .main .content-right a:hover,
html.club_scripts_member_member_search a, html.club_scripts_member_member_profile .main .content-right a, html.club_scripts_member_member_profile  a:hover, html.club_scripts_member_member_profile .main .content-right a:hover{transition: normal;}
blockquote, .main .content-right blockquote {
    margin: 50px 0px 50px 140px;
    font-size: 24px;
    line-height: 30px;
    color: #575646;
}
span{font-family: inherit;}
/****SIDEBAR****/
.sidebarBlue{
      position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background-color: #198ea3;
}
#sidebar {
    width: 230px;
    float: none;
    margin: 0px ;
    z-index: 10;
    display:inline-block;
    vertical-align: top;
    background-color: #198ea3;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}
#sidebar .sidebar-nav {
    width: 220px;
    padding: 0;
    margin: 55px 0px 0 auto;
    list-style: none;
    padding-bottom:10px;
    background-color:#198ea3;
    position: relative;
    z-index:10;
}
#sidebar .sidebar-nav li {
    width: 100%;
    text-align: left;
}
#sidebar .sidebar-nav li:first-child {background: transparent;}
#sidebar .sidebar-nav li a {
    width: 190px;
    padding: 11px 7%;
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    line-height: 18px;
    text-align: left;
    text-decoration: none;
    color:white;
    font-weight: 600;
}

#sidebar .sidebar-nav > li:hover > a, #sidebar .sidebar-nav li.active >a,.dn_bylaws #sidebar ul.sidebar-nav>li:nth-of-type(4)>a {color: #198ea3;background-color:white;}
#sidebar .sidebar-nav li ul {
    width: 180px;
    margin: 8px 0px 8px 20px;
    list-style: none;
    padding: 0px;
}
#sidebar .sidebar-nav li.active ul li, #sidebar .sidebar-nav li ul li {
    width: 100%;
    background: none;
}
#sidebar .sidebar-nav li.active ul li a, #sidebar .sidebar-nav li ul li a {
    font-size: 13px;
    color: #fff;
    padding: 4px 7%;
    text-transform: none;
    background: none;
    box-sizing:border-box;
}
#sidebar .sidebar-nav li.active ul li:hover a, #sidebar .sidebar-nav li.active ul li.active a, #sidebar .sidebar-nav li ul li:hover a, #sidebar .sidebar-nav li ul li.active a, .dn_bylaws #sidebar ul.sidebar-nav li:nth-child(4) ul li:nth-of-type(2) a {text-decoration: underline;}
#sidebar .sidebarTree{
    position: absolute;
    bottom:0;
    right:0;
    height:330px;
    z-index:0;
}
/****LISTS****/
.main .content-right ul, .main .content-right ol {margin: 12px 0px 15px 25px;}
.main .content-right ul ul, .main .content-right ol ol {
    margin-top: 0;
    text-indent: -13px;
    margin-left: 38px;
    list-style-position: inside;
}
.ie6 .main .content-right .text ul ul, .ie7 .main .content-right .text ul ul, .ie8 .main .content-right .text ul ul, .ie9 .main .content-right .text ul ul {text-indent: -18px;}
.ie6 .main .content-right .text ol ol, .ie7 .main .content-right .text ol ol, .ie8 .main .content-right .text ol ol, .ie9 .main .content-right .text ol ol {text-indent: -18px;}
/*** FORMS ***/
form#signUpForm input{
    float: left;
    font-size:14px;
    border:0px;
}
form#signUpForm input.error{color: red;}
form#signUpForm label.error{display: none !important;}
form#signUpForm input[type="text"]{
    padding: 8px 10px;
    background: #fff;
}
form input.send{
    float: right;
    cursor: pointer;
}
/********************
   SIDE CALLOUT
*********************/
/*** WITH PHOTO ***/
.side-image {
    float: right;
    height:150px;
    width:230px;
    border:1px solid white;
    box-shadow:0 0 5px gray;
    margin: 3px 0px 10px 15px;
}
.side-image img {float: left;}
/*** WITHOUT PHOTO ***/
.public-callout {
    float: right;
    border: 3px solid #fff;
    position: relative;
    margin: 3px 0px 10px 15px;
}
.public-callout p{
    position: absolute;
    bottom: 0px;
    left: 0px;
    margin: 0px !important;
    padding: 10px 15px;
    width: 91%;
    z-index: 2;
    color:#fff;
}
.public-callout img {float: left;}
/********************
     ANNOUNCEMENTS
*********************/
.private-announcements {
    margin-top: 0px;
    background: #fff;
  display: block;
  position: relative;
    float:none;
    z-index: 100;
    margin-bottom:0;
    border:7px solid #e4a259;
}
.private-announcements .wrap-announcements{float:none;min-height: 75px;}
.private-announcements div.title {float: none;padding-left: 30px;}
.private-announcements div.title h2 {
    font-size:24px;
    float:none;
font-weight: 600;
color:#84ad64;
margin-top:0;
margin-bottom:10px;
}

.private-announcements div.title i{
    color:#e4a259;
    font-size:26px;
}
.private-announcements ul.announcements {
    float: none;
    padding: 10px 0px 10px 50px;
}
.private-announcements ul.announcements li a {
    font-size: 14px;
    font-weight: 600;
    color:#008299;
    line-height: 24px;
    text-decoration: none;
    padding-left: 12px;
    float:none;
}
.private-announcements ul.announcements li a:hover{text-decoration: underline;}
/********************
FEATURED HIGHLIGHTS
*********************/
div.MHDivider{
    display:block;
    border-bottom:2px solid #df9c59;
    width:400px;
}
.private h2.welcomeHeading{
    font-size:18px;
    margin-top:20px;
    margin-bottom:45px;
}
.private_highlight{
    z-index:1;
    position: relative;
    overflow: hidden;
    border:2px solid white;
    box-shadow: 0 0 5px gray;
    box-sizing:border-box;
    padding:50px 20px;
    background-color:rgba(230,239,224,.9);
}
.private_highlight h2{
    font-size:24px;
    font-family: 'Rokkitt',serif;
    text-transform: none;
    color:#575646;
    line-height:22px;
    margin:0 0 20px;
}
.private_highlight img{
    position: absolute;
  top: 0;
  bottom: 0;
  min-height: 100%;
  min-width: 100%;
  left: 0;
  right: 0;
  z-index: -1;
}
.main .content-right .private_highlight p{
    font-size:14px;
    color:#575646;
    line-height:24px;
    margin-bottom:0px;
}
.main .content-right .private_highlight p a.more{
    color:#008299;
    font-weight: 600;
    font-size:14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top:0;
}
/********************
     HIGHLIGHTS
*********************/
.content-right ul.highlights {margin: 0px;}
.content-right ul.highlights li {margin-bottom: 35px;}
.content-right ul.highlights h3 {margin-top: 0px;}
.content-right ul.highlights span.img_highlight {}
.content-right span.img_highlight img{box-sizing:border-box;border:1px solid white; box-shadow:0 0 5px gray;width:130px; height:95px;margin-top:8px;}
.content-right ul.highlights li div {}
.content-right ul.highlights li div p {margin-bottom: 2px;}
.content-right ul.highlights li div p a.more {}
.content-right ul.highlights li div.wide {}
/********************
     BUTTONS
*********************/
.private_right{width:240px;}
.content-right .btn_links {width: 235px;text-align: center;margin-bottom:50px;}
.content-right .btn_links .btn-item a, a.mrm-button, .content-right a.mrm-button {
    width: 235px;
    font-size: 14px;
    line-height: 16px;
    color: #008299;
    padding: 10px 15px;
    font-style: normal;
    text-decoration: none;
    background: #e2e2df;
    text-transform: uppercase;
    box-sizing:border-box;
}

a.mrm-button, .content-right a.mrm-button{
    width: auto;
    margin: 0px 0px 15px 0px;
    background-color:#e2e2df;
    color:#008299;
    font-weight: 600;
    transition:all .2s ease;
}
.content-right .btn_links .btn-item a:hover, a.mrm-button:hover, .content-right a.mrm-button:hover{
    color:#e2e2df;
    background-color:#008299;
    text-decoration: none;
}
.content-right .btn_links .btn-item.featured a, .content-right .btn_links .btn-item a.featured, a.mrm-button.featured, .content-right a.mrm-button.featured {
    color:white;
    background-color:#df9c59;
}
.content-right .btn_links .btn-item.featured a:hover,.content-right .btn_links .btn-item a.featured:hover, a.mrm-button.featured:hover, .content-right a.mrm-button.featured:hover{
    color:#e2e2df;
    background-color:#008299;
}
/********************
   UPCOMING EVENTS
*********************/
/*** GENERAL ***/
.content-right div.events {}
.content-right div.events h2 {
    text-align: center;
    margin-top:0;
    line-height:28px;
}
.content-right ul.side_calendar_list {margin: 0px;}
.content-right ul.side_calendar_list li {
    margin-bottom: 9px;
    border-bottom: 2px solid #df9c59;
}
.content-right ul.side_calendar_list h3 {
    line-height: 28px;
    margin-left: 0px;
    color:#575646;
    font-size:24px;
    text-align: center;
    display: inline-block;
}
.content-right ul.side_calendar_list h3 span {
    float: none;
    display: inline-block;
    font-size:28px;
}
.content-right ul.side_calendar_list.left .wrap-event{
    padding: 0px;
    border-left:2px solid #df9c59;
    width:70%;
}
.content-right ul.side_calendar_list .day_desc {
    width: 81%;
    padding-right: 0%;
    padding-left:10%;
    float: left;
    min-height:57px;
}
.content-right ul.side_calendar_list li a.desc {
    margin: 8px 0px;
    font-size: 12px;
    line-height: 16px;
    text-decoration: none;
}
.content-right ul.side_calendar_list.left .event_date {width: 29%;}
.content-right ul.side_calendar_list.left li a.desc {padding-right: 0%;}
/*** PAGINATOR ***/
.paginator_wrapper {width: 100%;}
.paginator a.inactive {
    background:url(/custom/design/images/dots.png) no-repeat 0 0px;
    width:13px;
    height:13px;
    text-indent:-9999px;
    color:#233b20;
    text-decoration: none;
    line-height: 18px;
}
.paginator a {
    background:url(/custom/design/images/dots.png) no-repeat -14px 0px;
    width:13px;
    height:13px;    
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline;
    margin:0px -1px;
    font-size: 12px;
    line-height: 18px;
    text-indent:-9999px;
    color: #233b20;
    font-weight: normal;
    text-decoration: none;
    opacity: 1;
}
.paginator a.prev,
.paginator a.next{
    width: 50px;
    height: 18px;
    float: left;
    display: block;
    position: absolute;
    text-indent: 0;
    top: 0;
    margin: 0;
    background-image: none;
    font-weight: 600;
    letter-spacing:1.5px;
}
.paginator a.prev {
    left: 0px;
}
.paginator a.next {
    right: 0px;
}
.paginator a.next.inactive, .paginator a.prev.inactive{opacity: .5;cursor:default;}/********************
   SIDE AREA INSERT
*********************/
/*** Without photos ***/
.content-right div.specialinserts {
    width: 100%;
    float: left;
    box-sizing:border-box;
    background-color:#d5eaed;
    padding:20px;
}
.content-right div.specialinserts div.insert {width:100%;margin:0;}
.content-right div.specialinserts h3 {text-align: center;}
.content-right div.specialinserts div.text {
    margin-bottom: 10px;

}
.content-right div.specialinserts div.insert  img{
    width: 100%;
     box-sizing:border-box;
    border:1px solid white;
    box-shadow:0 0 5px gray;
}
.content-right div.specialinserts div.text p, .content-right div.specialinserts div.text ul, .content-right div.specialinserts div.text {
    text-align: center;
    margin: 25px 0px;
}
.content-right div.specialinserts div.text p, .content-right div.specialinserts div.text ul li{font-size:14px;line-height:25px;color:#575646;}
.content-right div.specialinserts div.text ul{text-align: left;}
.content-right div.specialinserts div.text p a {
    color:#008299;
    text-transform: uppercase;
    font-size:14px;
    letter-spacing:1.5px;
}

/********************
     FOOTER
*********************/
.wrap-footer {background-color:#535246;}
.private .wrap-footer {text-align: center;}
.public .wrap-footer .wrap,.homepage .wrap-footer .wrap{margin-top:75px;}
.footerDivider{
    width:200px;
    display:block;
    border-bottom:2px solid #a77e51;
}
.leftColumn{
    width:240px;
    display:inline-block;
    vertical-align: top;
    margin-right:100px;
}
.leftColumn .footerLogo{
    width: 140px;
    margin-left: 30px;
    margin-bottom:30px;
}
.private ul.footerSocial{text-align: center;margin-top:15px; margin-bottom:10px;}
ul.footerSocial{
    padding:0;
    margin:20px 0;
    list-style: none;
    text-align: left;
}
ul.footerSocial li{
    display: inline-block;
}
ul.footerSocial li a{
    text-decoration: none;
    border:0px;
    color:white;
    font-size:17px;
    margin:0 3px;
}
ul.footerSocial li a:hover{color:#008299;}
.private .phone{margin:0 auto 20px;width:220px;}
.leftColumn p i, .private .phone p i{
    color:#df9c59;
    font-size:24px;
      margin-left: -25px;
  margin-right: 5px;
}
.leftColumn p, .private .phone p{
    font-size:14px;
    color:white;
    text-align: left;
    margin-left:30px;
    margin-bottom:30px;
}
.leftColumn p a, .private .phone p a{
    color:white;
}
.leftColumn p a:hover, .private .phone p a:hover{
    color:#008299;
}
.private .phone p{text-align: center;margin:0;}
.centerColumn{
    width:240px;
    display:inline-block;
    vertical-align: top;
    text-align: center;
    margin-right:130px;
    margin-top:40px;
}
.centerColumn p {
    font-size:16px;
    color:white;
    text-transform: uppercase;
    margin-bottom:26px;
}
.centerColumn a{
    color:#008299;
    background-color:#cfcfcb;
    box-sizing:border-box;
    display:block;
    margin-bottom:65px;
    font-style: normal;
    height:45px;
    width:245px;
    letter-spacing:2px;
    padding-top:10px;
    text-transform: uppercase;
    transition:all .1s ease;
}
.centerColumn a:hover{
    background-color:#008299;
    color:#cfcfcb;
    text-decoration: none;
}
.rightColumn{
    width:240px;
    display:inline-block;
    vertical-align: top;
}
.rightColumn #box-weather  {margin-left:30px;margin-bottom:20px;}
.private #box-weather{text-align: center;margin-bottom:50px;}
#box-weather .weatherpic{
display:inline;
width:95px;
}
#box-weather h2{
    color:white;
    font-family:'Rokkitt',serif;
    font-size:30px;
    font-style: normal;
    vertical-align: top;
    display:inline;
}
#box-weather span{
    font-size:14px;
    color:white;
    display:block;
    margin-top:-20px;
}
#box-weather a{
    font-family: 'Rokkitt',serif;
    font-size:22px;
    color:#e9b581;
    font-style: normal;
}
#box-weather a i.fa-inverse{
    color:inherit;
    font-size:14px;
}
#box-weather a:hover{
    text-decoration: underline;
}

.wrap-nav-footer {
    width: 100%;
    float: left;
    margin-top: 0px;
}
/*NAVIGATION*/
.nav-footer {
    list-style: none;
    float: none;
    padding: 0px 0px 10px;
    text-align: left;
    margin-left:30px;
    margin-bottom:30px;
}
.nav-footer li {
    width: auto;
    float: none;
    margin: 0px 10px;
}
.nav-footer li a {
    float: none;
    font-size: 15px;
    text-transform: uppercase;
    font-style: normal;
    color: white;
    line-height:28px;
    text-decoration: none;
}
.nav-footer li a:hover {text-decoration: underline;}
.private ul.nav-footer{
    margin:45px auto 0;
    text-align: center;
}
.private .nav-footer li{display:inline;text-align: center;}


/*COPYRIGHT*/
.copyright {
    width: 100%;
    margin:0px;
    padding:20px 0;
    font-size: 13px;
    line-height: 16px;
    text-align: center;
    color: white;
    background-color:#007987;
    position: relative;
}
.copyright a {
    color: #e9b581;
    text-decoration: none;
    font-style: normal;
    font-size:13px;
}
.copyright a:first-of-type{color:white;}
.copyright a:hover {text-decoration: underline;}
.copyright a.toTopBtn{
    background-color:#df9c59;
    text-decoration: none;
    position: fixed;
    right: 0;
    z-index: 1000;
    bottom: -57px;
    height: 56px;
    display: block;
    width:56px;
    text-align: center;
    cursor:pointer;
    transition:all .3s ease;
}
.copyright a.toTopBtn i{
    color:white;
    font-size:24px;
    padding-top: 8px;
    padding-bottom: 5px;
}

.copyright a.toTopBtn span {
    color: white;
    text-transform: uppercase;
}
.copyright a.toTopBtn:hover{
    background-color:white;
}

.copyright a.toTopBtn:hover span {
    color: #df9c59;
}
.copyright a.toTopBtn:hover i{
    color:#df9c59;
}
/********************
     HOMEPAGE
*********************/
.homepage div.masthead{
    position: relative;
    z-index: 1;
    min-height:650px;
}
.homepage div.cycle-slideshow{
    height:100%;
}
.homepage div.cycle-slide .bannerText{
    position: absolute;
    top: 40%;
    left:50%;
}
.homepage div.cycle-slide .bannerText img{
    position: absolute;
  left: 50%;
  width: 800px;
  margin-left: -400px;
  top: 0;
  margin-top: -150px;
}
.homepage div.cycle-slide h1{
    text-align: center;
    color:white;
    font-family: 'Rokkitt',serif;
    font-size:72px;
    margin-top:0;
    margin-bottom:10px;
    position: relative;
    text-shadow:1px 1px 3px rgba(0,0,0,.3); 
}
.homepage div.cycle-slide h2{
    text-align: center;
    color:white;
    margin:0;
    position: relative;
    font-weight: 700;
    font-size:32px;
    text-shadow:1px 1px 3px rgba(0,0,0,.3); 
}
.homepage div.cycle-slide{
    right:0;
    width:100%;
    height:100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.homepage div.cycle-pager{
    position: absolute;
    top:80%;
    width:100%;
    text-align: center;
    z-index:110;
}
.homepage div.cycle-pager span{
    background: url(/custom/design/images/hp_pager.png) no-repeat -22px 0px;
  color: transparent;
  width: 19px;
  display: inline-block;
  cursor:pointer;
}
.homepage div.cycle-pager span.cycle-pager-active{
    background-position: 0 0;
}
.homepage div.masthead a.mrm-button{
    position: absolute;
    left:50%;
    margin-left:-120px;
    z-index:102;
    font-size:18px;
    letter-spacing: 2px;
    text-transform: uppercase;
    width:240px;
    box-sizing:border-box;
    text-align: center;
    font-weight: 700;
    padding:15px 0;
    top:120%;
}
.homepage .callouts{
    height:35%;
    padding-bottom:45px;
    box-sizing:border-box;
}
.homepage .callouts .callout{
    display:inline-block;
    width:25%;
    box-sizing:border-box;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin:0 -2px;
    padding:0;
    height:100%;
    position: relative;
    text-decoration: none;
    border-top:10px solid;
    cursor:pointer;
    vertical-align: top;
}
.homepage .callouts .callout:first-of-type{margin-left:0;border-color:#9dd5de;}
.homepage .callouts .callout:nth-of-type(2){border-color:#84ad64;}
.homepage .callouts .callout:nth-of-type(3){border-color:#008299;}
.homepage .callouts .callout:last-of-type{border-color:#e4a259;}
.homepage .callouts .callout h2{
    color:white;
    font-size:40px;
    font-family: 'Rokkitt',serif;
    text-transform: none;
    text-align: center;
    margin:0;
    position: relative;
    z-index:2;
}
.homepage .callouts .callout .calloutMask{
    position: absolute;
    z-index:1;
    top: 0;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,.3);
}
.homepage .callouts .callout:hover{text-decoration: none;}
.homepage .callouts .callout:hover .calloutMask{}
.homepage .callouts .callout:first-of-type:hover .calloutMask{background-color:#9dd5de;opacity:.6;transition:all .2s ease;}
.homepage .callouts .callout:nth-of-type(2):hover .calloutMask{background-color:#84ad64;opacity:.6;transition:all .2s ease;}
.homepage .callouts .callout:nth-of-type(3):hover .calloutMask{background-color:#008299;opacity:.6;transition:all .2s ease;}
.homepage .callouts .callout:last-of-type:hover .calloutMask{background-color:#e4a259;opacity:.6;transition:all .2s ease;}
.homepage .scrollMore{
    width:100%;
    height:45px;
    position: absolute;
    text-align: center;
    bottom:0;
    z-index:200;
    background-color:#d5eaed;
    cursor:pointer;
}
.homepage .scrollMore i{
    color:#008299;
    font-size:36px;
}
.homepage .overview{
    padding:70px 0;
    min-height:220px;
}
.homepage .overview .overviewHeading{
    float:left;
    width:450px;
    height:260px;
    margin-left:50px;
    margin-right:60px;
    text-align: center;
    background-image:url(/custom/design/images/HP_tree.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

}
.homepage .overview .overviewHeading h2{
    font-size:18px;
    margin-top:60px;
    margin-bottom:0;
}
.homepage .overview .overviewHeading h1{
    font-size:56px;
}
.homepage .overview p{
    padding-right:50px;
    padding-left:560px;

}
.homepage .featured{
    background-color:#d5eaed;
    padding:10px 0;
    display:block;
    min-height:420px;
}
.homepage .featured .featuredImage{
    float:left;
    width:350px;
    height:420px;
    margin-left:10px;
}
.homepage .featured .featuredImage:last-of-type{margin-right:70px;}
.homepage .featured .featureText{text-align: center;}
.homepage .featured .featureText h2{
    font-size:16px;
    margin-top:60px;
    margin-bottom:0;
}
.homepage .featured .featureText h1{
    font-size:36px;
    margin-top:0;
    margin-bottom:35px;
}
.homepage .featured .featureText p{
    margin-top:25px;
    font-size:24px;
    font-family: 'Rokkitt',serif;
}
.homepage .featured .featureText p a{
    color:#008299;
    font-size: 14px;
    line-height:28px;
    text-transform: uppercase;
}
/********************
    MRM HACKS
*********************/
/*** ADMIN BAR ***/
table.siteAdminTopBar{
    position: fixed !important;
    z-index:900 !important;
}
/*** MRM CALENDAR ***/
table.cal_main tr.day_title td {background:#198EA3;}
table.cal_main tr.day_box td {background:#F6F4F3;}
table.cal_main tr.day_box td a {}
table.cal_main tr.day_title td a {color:#fff;}
table.cal_main tr.day_title td.today_title{background-color:#E4A259;}
table.cal_main tr.day_title td.today_title a{
    color:#fff;
    text-transform:uppercase;
}
table.cal_add_form input.form_btn {
    background:#D4D0C8;
    color:#000;
    font-weight:bold;
    border:2px outset #D4D0C8;
}
/*** Business Directory ***/
.businessCard.featured img.featured{
    position: absolute;
    top: -3px;
    right: -3px;
}
.business_form_row input[type="submit"] {
    color: #fff;
    background: #547034;
}
/*** SURVEYS ***/
html.club_scripts_survey_survey_list .content-right table tr.title td{border-bottom: 1px solid #5A6944;}
html.club_scripts_survey_survey_list .content-right table h2{font-size: 14px;text-align: center;line-height: 16px;width: 143px;margin: 0 auto;}

/*** User Org List ***/
html.club_scripts_member_member_search_orgs .member-search-orgs h2{font-size: 24px;}
html.club_scripts_member_member_search_orgs .member-search-orgs h3{font-size: 16px;}
html.club_scripts_member_member_search_orgs .member-search-orgs tr.line td{border-top: 2px solid #67784E;}
html.club_scripts_member_member_search_orgs .member-search-orgs tr.board-list_2 td{border-top: 1px solid #E3E0D2;}

/*** Member Directory ***/
.memdir-atoz a.letterLink:hover span, .memdir-atoz a.active span{background:#B38414;}
#memberdirectory-search-btn, .memdir-atoz a.letterLink:hover span, .memdir-atoz a.active span{background-color: #B38414 !important;}
.memdir-atoz a.letterLink:hover span, .memdir-atoz a.active span{
    border: 1px solid #B38414 !important;
    box-shadow: 0 1px 0 0 #DAA21A inset, 0 0 6px 0 rgba(0, 0, 0, 0.4) !important;
}
.dk_theme_black .dk_toggle, .dk_theme_black.dk_open .dk_toggle{width:140px !important;}
/*** File Library List ***/
html.club_scripts_filelib_view_filelib_list .file-library-list h2{border-bottom:;}
/*** Member Profile ***/
h3.memberprofile-user-activities-title{font-size:18px;}
.memberprofile-user-details-right h1.memberprofile-user-name {margin-bottom: 14px;}
.memberprofile-details a.memberprofile-btn-edit {background-color: #6D7B56;}
.memberprofile-details a.memberprofile-btn-edit-photo {background-color: #6D7B56;}
.memberprofile-details a.memberprofile-btn-addfriend {background-color: #6D7B56;}
.memberprofile-user-content-box h6{font-size: 13px !important;}

/*** ClubPersonnel ***/
/*Two Column Card*/
.clubPersonnelCard.twoColumn .clubPersonnelContentWrap{font-size: 11px;}
.clubPersonnelCard.twoColumn .clubPersonnelContentWrap h4{
    font-weight: normal;
    font-size:12px;
    line-height: 14px;
    font-style:italic;
    text-transform: uppercase;
}
.clubPersonnelCard.twoColumn .clubPersonnelContentWrap h3{
    font-weight: normal !important;
    font-size:15px !important;
    line-height: 18px !important;
}
.clubPersonnelCard.twoColumn .clubPersonnelContentWrap p{line-height:18px !important;}
/*Club Personel List - Basic With Photo*/
.pers_listing{border-bottom: 1px solid #ccc;}
/*Club Personel List - Original Table*/
table.club_staff_title_bar{
    background-color:rgba(0,0,0,0);
    border-bottom: 2px solid #000;
}
table.club_staff_title_bar h3{margin:5px 0px 0px;}
.personnel_list table.staff_list{
    border-bottom: 1px solid #cecece;
    margin: 7px 0px 2px 0px;
}
/*** BIRTHDAYS & ANNIVERSARIES ***/
.birthdays table th{
    border-bottom: 1px solid #2d6437;
    margin: 0px;
    font-size:20px;
    width: auto;
}
.birthdays table th:first-of-type{width:55px;}
.birthdays table td{
    padding:5px;
    border-bottom: 1px solid #ccc;
}
.main .content-right .msgnavlink,.main .content-right .msgnavlinksel{font-size:12px; line-height:10px;color:white;
}
.main .content-right .msgnavcellsel{background-color:#E4A259;}
.main .content-right .msgnavlinksel {color:white;}
.main .content-right .msgnavcell{background-color:#008299;}
.main .content-right .msgheader2light{ 
 color: white;
  background-color: rgb(0, 130, 153);}
.main .content-right .msgformbgcolor{
    background-color:#9DD5DE;
}
.club_scripts_msgboard_msgboard_summary .main .content-right tr[bgcolor="#CCCCCC"] {background-color:#008299;}
.club_scripts_msgboard_msgboard_summary .main .content-right tr[bgcolor="#CCCCCC"] td{color:white;}
#reservations-content #reservations-main table.data td.reservation .popover h3{box-sizing:border-box;}
.dk_theme_black .dk_toggle, .dk_theme_black.dk_open .dk_toggle{transition:none !important;}
/********************
    MEDIA QUERIES
*********************/

@media(max-width:1340px){
    .homepage .featured .featureText h1{
        margin-bottom:20px;
        line-height: 40px;
    }
    .homepage .featured .featureText h2{
        margin-top:45px;
    }
    .private .navBottom ul.social{display:none !important;}
    .homepage .featured .featuredImage:last-of-type{margin-right:15px;}
}
@media (max-width: 1260px){
    .navBottom ul.social{display:none !important;}
    .homepage .featured{min-height:390px;}
    .homepage .featured .featuredImage{
        height:375px;
        width:275px;
    }
    .navBottom .navigation li a{
        padding:6px 4px;
    }
    .homepage .featured .featureText h2{margin-top:20px;}
}
@media (max-width:1030px){
    .navBottom .navigation li a{
        padding:6px 0;
        margin-right:4px;
    }
}