/* CSS Document */


body{
	font-family: 'Ubuntu', sans-serif;
}
.content-join { margin-bottom: 20px; }
    .content-join .art-container { padding: 40px 50px 50px 50px; }

    .content-main.content-join .art-header { margin: 0 0 5px 0; }
/* Top Content */
#membershipOverview {
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 50px;
    padding-left: 120px;
    padding-right: 120px;
    width: 995px;
}

#membershipOverviewContainer {
	border: 1px solid #ccc;
    box-shadow: 0 0 2px #888888;
    padding-bottom: 25px;
    padding-left: 62px;
    padding-top: 15px;
}

.content-join a {
    text-decoration: none;
	font-weight:bold;
	color:#585858;
}
.content-join a:hover {
    text-decoration:underline;
}
    .content-join a .lite { font-weight: normal; }
.content-join #contentTop {
	max-width:860px; margin-bottom: 30px; 
}
    .content-join #contentTop p { font-size: 16px; line-height: 22px; color: #7d7d7d; }
#selMembership {
    display: inline-block;
    margin-right: 110px;
    width: 350px;
	cursor: pointer;
	vertical-align:top;
}
#selSupporter{
	width: 350px;
	display: inline-block;
	cursor: pointer;
	vertical-align:top;
}
.bulletOn {
    background-image: url("../images/membership/selectionBullets.png");
    background-position: center top;
    float: left;
    height: 14px;
    margin-right: 10px;
    margin-top: 4px;
    width: 14px;
}
.bulletOff{
	background-image: url("../images/membership/selectionBullets.png");
    background-position: center bottom;
    float: left;
    height: 14px;
    margin-right: 10px;
    margin-top: 4px;
    width: 14px
}
    #selMembership p, #selSupporter p { font-weight: 300; font-size: 16px; color: #7d7d7d; }
    #selMembership p.btn-choice, #selSupporter p.btn-choice { margin-bottom: 8px; font-weight: 300; font-size: 20px; color: #585858; }
/* Tabbed Content */
body.page-template-member-join .tab-content h1,
body.page-template-member-join .tab-content h2,
.sectionHeader{
	font-weight:500;
	text-transform:uppercase;
	color:#585858;
	font-size:17px;
}
body.page-template-member-join .tab-content h3,
body.page-template-member-join .tab-content h4,
body.page-template-member-join .tab-content h5,
.sectionSubHead{
	color:#585858;
	font-size:17px;
	font-weight:500; margin-bottom: 5px;
}
body.page-template-member-join .tab-content p, 
body.page-template-member-join .tab-content ol,
.sectionBody, 
.sectionNumItems {
	color:#7d7d7d;
	font-size:17px;
	padding-bottom:20px;
}
body.page-template-member-join .tab-content p {
	margin-bottom:0;
}
.sectionBody { padding-bottom: 0; line-height: 24px; }
body.page-template-member-join .tab-content ul,
.sectionItems {
	color:#7d7d7d; list-style: disc inside none; padding: 0 0 0 40px; margin: 0 0 20px 0;
}
	body.page-template-member-join .tab-content li,
    .sectionItems li { margin: 0 0 10px 0; list-style-position:outside; }

/* Supporter TABS */
#supporterTabbedSectionContainer{
	max-width:	995px;
	margin-left:auto;
	margin-right:auto;
}
#supportertab1 > div, 
#supportertab2 > div,
#supportertab3 > div{
	 border-right: 10px solid #f6f6f6;
	 border-left: 10px solid #f6f6f6;
	 border-bottom: 10px solid #f6f6f6;
	 border-top: 10px solid #ffffff;
    margin-left: 0;
    margin-right: 0;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 64px; padding-bottom: 40px;
}
/* Member TABS */
#memberTabbedSectionContainer{
	max-width:	995px;
	margin-left:auto;
	margin-right:auto;
}
#tab1 > div, 
#tab2 > div,
#tab3 > div{
	 border-right: 10px solid #f6f6f6;
	 border-left: 10px solid #f6f6f6;
	 border-bottom: 10px solid #f6f6f6;
	 border-top: 10px solid #ffffff;
    margin-left: 0;
    margin-right: 0;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 64px; padding-bottom: 40px;
}
body.page-template-member-join .tab-content ol,
ol.sectionNumItems { padding-left: 40px; }

	body.page-template-member-join .tab-content ol li,
    ol.sectionNumItems li { line-height: 24px; margin-bottom: 24px; }

.nav {
  margin-bottom: 18px;
  margin-left: 0px;
  padding-left: 0;
  list-style: none;
}

.nav > li > a {
  display: block;
}

.nav-tabs, .nav-tabs2{
  *zoom: 1;
}

.nav-tabs:before,
.nav-tabs:after,
.nav-tabs2:before,
.nav-tabs2:after  {
  display: table;
  content: "";
}

.nav-tabs:after,
.nav-tabs2:after  {
  clear: both;
}

.nav-tabs > li,
.nav-tabs2 > li {
  float: left;
}

.nav-tabs > li > a,
.nav-tabs2 > li > a {
	line-height: 14px;
	margin-right: 2px;
	padding-left: 32px;
	padding-right: 234px
}

.mem-form-con .nav-tabs > li > a,
.mem-form-con .nav-tabs2 > li > a {
	padding-right: 0;
}

.nav-tabs,
.nav-tabs2 {
  border-bottom: 8px solid #009cb0;
    margin-top: 0;
    position: absolute; width: 100%; max-width: 995px;
}
.nav-tabs:before,
.nav-tabs2:before { 
	background: url("../images/membership/lCorner.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    bottom: -18px;
    height: 10px;
    left: 0;
    position: absolute;
    width: 10px; 
}
.nav-tabs:after,
.nav-tabs2:after { 
	background: url("../images/membership/rCorner.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    bottom: -18px;
    float: right;
    height: 10px;
    position: relative;
    width: 10px;
}

.nav-tabs > li,
.nav-tabs2 > li {
  margin-bottom: -10px; width: 33.333%;
}

.nav-tabs > li > a, 
.nav-tabs2 > li > a {
	background-color: #86b5bb;
    border-radius: 9px 9px 0 0;
    color: #fff;
    line-height: 18px;
    padding-bottom: 6px;
    padding-top: 10px;
    text-decoration: none;
    text-transform: uppercase;
  border: 1px solid transparent;
  -webkit-border-radius: 9px 9px 0 0;
	 -moz-border-radius: 9px 9px 0 0;
		  border-radius: 9px 9px 0 0;
}

.nav-tabs > li > a:hover,
.nav-tabs2 > li > a:hover {
  border-color: #eeeeee #eeeeee #dddddd;
}

.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs2 > .active > a,
.nav-tabs2 > .active > a:hover {
  /*color: #555555;*/
  cursor: default;
  background-color: #009cb0;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
}

li {
  line-height: 18px;
}

.tab-content.active{
	display: block;
}

.tab-content.hide{
	display: none;
}

/** FORM **/
.oparegbox .panelTitle h4 { text-transform: uppercase; }
    .steppanel .opaRegFieldItem span { display: block; font-weight: normal; font-size: 14px; }
#fieldcontainer_opt_in { font-size: 16px; font-weight: 500; color: #585858; }
    #fieldcontainer_opt_in ol { padding-left: 15px; margin: 0 0 10px; font-size: 14px; font-weight: normal; }
    .mem-form-con input.checkbox { width: auto; margin: 5px 5px 0 0; float: left; }
    #fieldcontainer_opt_in label { max-width: 610px; float: left; }
#fieldcontainer_opt_in input[type="checkbox"]:checked + label:before { background-color: #f0f0f0; border: none; vertical-align: top; }

.mem-form-con { margin-top: 20px; }
.mem-form-con input, .mem-form-con textarea {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    color: #7f7f7f;
    padding: 8px 10px 7px;
	width:325px;	
}
.mem-form-con select {
    height: 40px;
	width: 325px;
}
.mem-form-con .fieldItem {
    display: inline-block;
    width: 375px;
}
.mem-form-con form {
   
}
.mem-form-con form label {
    color: #585858;
    display: block;
    margin-bottom: 0;
    margin-top: 0; font-weight: 500;
}
.mem-form-con .panelTitle { }
.nextPanelButton {
    margin-left: 160px;
    margin-top: 20px;
}
.mem-form-con .submit {
    margin-left: 249px;
    margin-top: 20px;
}

#recaptcha_area, #recaptcha_table {
    margin-top: 15px;
    width: 318px !important;
}
.mem-form-con .button{
	/*border: none;*/
    border-radius: 0;
    color: #fff;
    font-weight: bold;
    /*padding: 0;*/
    text-transform: uppercase;
    width: 180px;
}

.mem-form-con .button:hover{
	color:#0ea4b2;
}
#wp-submit,
#wp-submit2 {
    background-color: #17bacb;
    border-radius: 5px;
    color: #fff;
    height: 40px;
    width: 190px;
}


/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) { 

/* join dcn (membership) */
    .content-join .art-container { padding: 20px 15px; }
    #selMembership { max-width: 350px; width: 100%; margin-right: 0; }
    #selSupporter { max-width: 350px; width: 100%; }

    .nav-tabs > li > a, .nav-tabs2 > li > a { padding-left: 0; padding-right: 0; text-align: center; }
    #supportertab1 > div, #supportertab2 > div, #supportertab3 > div { padding: 64px 10px 20px; }
    #tab1 > div, #tab2 > div, #tab3 > div { padding: 64px 10px 20px; }