@charset "utf-8";

#container, #container * {max-height: 1000000px;}
#container {width: 100%; max-width: 1024px; 
  background: #fff; 
	-webkit-box-shadow: 0 3px 2px #000;
	-moz-box-shadow: 0 3px 2px #000;
	box-shadow: 0 3px 2px #000;
	margin: 2% auto;	
}
#header {width: 100%; text-align: center; height: 0; padding-bottom: 57%; }
#header img {width: 100% !important;}

.menu {width: 100%; background: #0a0a0a;
 background: linear-gradient(to bottom, #252525 0%, #0a0a0a 100%); clear: both; display: block; margin: 0 auto 0.3em; text-align: center;}

.menu a {display: inline-block; padding: 0.25em; margin: 0.5em 1%; font-size: 0.8em; color: #fff; }
.menu a.currp {color: #aaa;}

 
.mlsmrs {width: 96%; margin: 1em auto; text-align: center;}
.mls, .mrs {display: inline-block; margin: 0 1%; vertical-align: top; }

.mls {width: 65%; text-align: left;}
 
.contact {text-align: center; margin-top: 1em; line-height: 1.25em;}
.mrs {width: 30%;}

.fbfeed {width: 96%; max-width: 400px;  margin: 0 auto;  height: 350px; border: 1px solid #fff;}
.fb-page, .fb-page span, .fb-page span iframe[style] {width: 100% !important; }  

.blurb { line-height: 2em;}
.blurb p {margin-top: 1em;}

/* calendar page */
.calcs {width: 90%; margin: 2em auto; padding-bottom: 2em;  text-align: center;  border-bottom: 6px double  #333;}
.calcs1 {font-size: 1.5em; margin-bottom: 1em; color: #f00;}
.calcs2 {color: #000;}

#calmthslinks  {width: 100%; text-align: center; margin: 1em auto; color: #000; display: none;}
#calmthslinks a { display: inline-block; width: 22%; margin: 1em 1%; }
.calendar {text-align: center; width: 90%; margin: 0 auto; font-size: 0.9em;}
.month { clear: both; margin: 2em auto; background-color: #fefefe;  box-shadow: 0 1px 1px #000; padding-bottom: 0.5em;}
.monthname {width: 100%; text-align: center; font-weight: 600; letter-spacing: 0.2em; font-size: 1.25em; background: #eae4ce; padding: 0.25em 0; margin: 1px 0 1em;}
.evdets {margin: 0.3em 0;}
.calendar p {margin-bottom: 1em;}
.day, .event, .moredets {float: left;}
.day {/*width: 13%;*/ width: 10%; text-align: left; padding-left: 2%;  }
.event {/*width: 70%;*/ width: 78%; text-align: left;  }

.moredets {/*width: 15%;*/ width: 10%; font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; font-style: italic; font-size: 0.8em;}

.colr {color: #f00;}
.rd {font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; font-style: italic; font-size: 0.8em;}

/*breakfast club page */
 .bfcimg img {width: 65%; margin: 2em auto;}


/* Events */

.events {text-align: center; width: 100%; margin: 0 auto;}
.eventlink { width: 30%; display: inline-block;  margin: 2em 1%;}
.eventlink { border: 1px solid #eee;   box-shadow: 0 1px 1px #000;}
.eventlink:hover { box-shadow: 0 1px 1px #fff; opacity: 0.5;}
.eventlink img {width: 100%;} 
.evpyp {font-size: 0.8em; text-align: center; font-style: italic; margin: 2em auto 1em;}
.eventslist {margin: 2em auto; text-align: center; width: 100%;  padding: 1em 0.5em; border: 1px solid #ddd; border-radius: 0.25em; box-shadow: 0px 1px 1px #000; display: inline-block; background: #d4e4ef; /*for older browswers */ background: linear-gradient(to bottom,  #fafafa 0%, #d4e4ef 100%);}
.eventslist p {color: #0a0a0a; font-weight: bold; font-size: 1.3em;}
.eltitle { }
.eventslist a {padding: 0.25em; margin: 0.5em auto; display: block; color: #666; font-weight: bold; font-size: 1.3em;}

.eventsst {font-size: 1.2em; font-weight: 600; margin: 2em auto; text-align: center; color: #000;}
.eventdets {margin: 2em auto 6em; width: 94%; }
.eventdets p {margin-top: 1em;}
#eventimgs { margin-top: 3em;
line-height: 0;
-webkit-column-count: 4;
  -webkit-column-gap:   2px;
  -moz-column-count:    4;
  -moz-column-gap:      2px;
  column-count:         4;
  column-gap:           2px;
   }

#eventimgs img {
  width: 100% !important;
  height: auto !important;
  margin-top: 2px;
} 

.eventfewimgs {text-align: center; margin-top: 3em; }
.eventfewimgs img {width: 25%; /*max-width: 250px;*/ margin: 0 2%; display: inline-block;}
.eventfewimgs.w40 img {width: 40%; /*max-width: 250px;*/ margin: 0 2%; display: inline-block;}


/*officers page */
.officers {text-align: center; width: 100%; margin: 0 auto;}
.officer { width: 47%; display: inline-block;  margin: 1em 1%; }
.officer, .offboard {background: #fefefe;   border: 1px solid #ddd;}
.officer p, .offboard p {margin-bottom: 0;}
.offtitle {width: 100%; text-align: center; font-weight: 500; font-size: 1.25em; background: #eae4ce; padding: 0.25em 0;}
.offdets {width: 100%; text-align: center; }
.offimg, .offcont {display: inline-block; vertical-align: middle; margin: 0.5em 1%; }
.offimg {width: 32%;}
.offimg img {width: 96%; margin: 0 auto; border: 1px solid #ccc;}
.offcont {width: 63%; text-align: left;}
.offboard { width: 96%; margin: 1em auto;  }
.offdir  {width: 17%; display: inline-block; vertical-align: top; margin: 0.5em 1%;}
.offdir img {width: 90%; margin 0.5em auto; border: 1px solid #ccc;}
.offname {font-size: 1.2em; font-weight: 500; padding-bottom: 1em;} 
.offemail {font-size: 0.9em; margin-top: 0.5em;}

/*members page */
.members {text-align: center; width: 100%; margin: 0 auto;}
.memblink, .membnolink { width: 30%; display: inline-block;  margin: 2em 1%;}
.memblink { border: 1px solid #eee;   box-shadow: 0 1px 1px #000;}
.memblink:hover { box-shadow: 0 1px 1px #fff; opacity: 0.5;}
.memblink img {width: 100%;} 
.memberdets {text-align: center;}
.memberdets p {margin-top: 1em;}

/* members bios */
.memcars {width: 96%; max-width: 800px; margin: 1em auto 2em; }
#memcarimg img {width: 100%;}
.memcarth {width: 100%; text-align: center;}
.memcarth img {display: inline-block; margin: 0.5em 3%; width: 12%;}
.memcarth img:hover {cursor: pointer; opacity: 0.6;}
.memberslist {margin: 2em auto; text-align: center; width: 90%;  padding: 1em 0.5em; border: 1px solid #ddd; border-radius: 0.25em; box-shadow: 0px 1px 1px #000; display: inline-block; background: #d4e4ef; /*for older browswers */ background: linear-gradient(to bottom,  #fafafa 0%, #d4e4ef 100%);}
.memberslist p {color: #0a0a0a; font-weight: bold; font-size: 1.1em;}

.memberslist a {padding: 0.25em; margin: 0.25em auto; display: block; color: #666;  }


/*application */
.appform {width: 90%; margin: 1em auto; text-align: center;}
.appform p {margin-top: 2em;}
.subt {font-size: 2em; letter-spacing: 1px; color: #0a0a0a; font-weight: 500;}
.appgrpimg {width: 100%; margin-top: 2em;}

/*Links page */
.linksimgs {width: 100%; margin: 2em auto 4em; text-align: center;}
.lki {width: 22%; margin: 1em 1%; display: inline-block; font-size: 0.5em; vertical-align: middle; border: 1px solid #eee; box-shadow: 0 1px 1px #000; padding-bottom: 0.5em;}
.lki img {width: 90%; max-width: 225px; margin: 0 auto;}
.lki a {color: inherit;}
.lki:hover {opacity: 0.5; box-shadow: 0 1px 1px #fff;}

/*Members only area */
.button.logout {float: right;}
.nopassword {display: none;} /*hide the comment that says no password */

.loginform {margin: 2em auto 4em;}
input.pwenter {margin-top: 2em; margin-right: 1em; margin-bottom: 2em border: 1px solid #ccc; padding-left: 0.25em;  font-size: 2em; width: 4em;}

.malsrs {width: 46%; display:inline-block; vertical-align: middle; margin: 2em 1%;}
.malogout:hover { cursor: pointer; opacity: 0.5;}
.malogout {margin: 2em auto;}
#logmess {color: #f00; font-size: 1.2em; padding-top: 2em; display: none;}


/* newsletters */
.newsletters {text-align: center; width: 100%;}
.newsletterintro {width: 80%; margin: 3em auto; }
.vamls, .vamrs {display: inline-block; margin: 0 auto; vertical-align: middle; }
.newsletterintro .vamls {width: 30%;}
.newsletterintro .vamls img {width: 100%; max-width: 150px; margin: 0 auto; box-shadow: 0 1px 1px #000;}
.newsletterintro .vamrs {width: 60%; }
.newsletterh {font-size: 1.2em; font-weight: 500; padding-bottom: 0.5em; text-decoration: underline; color: #1a1a1a; display: none;}
.newsletterlinks > div {display: inline-block; width: 25%; margin: 2em 3%; padding: 0.5em 0; border: 3px double #fafafa; background-color:  #eae4ce;}
.newsletterlinks a {padding: 0.25em 0; color: #0a0a0a;  font-weight: 400 !important; font-size: 1.1em;}

/* story page */
.storyintro {text-align: center; width: 90%; margin: 2em auto;}
.storyintro img {border: 1px solid #fff; box-shadow: 0 1px 1px #000;}
.storyintro .vamls {width: 60%;}
.storyintro .vamrs {width: 30%; margin: 0 2%;}

.storytitle, .storyby {font-size: 1.2em; text-align: center;  line-height: 2em;}
.storyby { margin: 0.5em auto;}

.storylinks {width: 100%; text-align: center;}
 .stlink {display: inline-block;  margin: 1em auto; padding: 0.25em 2em; border: 3px double #fafafa; background-color:  #eae4ce;}

.storylinks a {padding: 0.25em 0.5em; color: #0a0a0a;  font-weight: 400 !important; font-size: 1.1em;}

.storyintro img, .newsletterintro img, .postfont img {border: 1px solid #fff; box-shadow: 0 1px 1px #000;}

/*presidents message */

.presmessst { font-size: 1.2em; font-weight: 600; margin: 2em auto; text-align: left; color: #000;}
.pmdate { margin-left: 1em;}
#presmess p {font-size: 0.9em; font-weight: 400; color: #0a0a0a; width: 90%; margin: 1em auto ; text-align: left;}
img.pm {width: 30%; max-width: 236px; margin: 0 1em 1em 0; float: left;}
.pressig {font-size: 2em; font-weight: 500; color: #000; font-family: 'mrdafoe';}
 .prevmessst {font-size: 1.2em; color: #000; margin: 2em auto 0; text-align: center; font-weight: 500;}
.prevmesslinks {width: 90%; text-align: center; margin: 0 auto;}
.prevmesslinks > div {display: inline-block; width: 25%; margin: 2em 3%; padding: 0.5em 0; border: 3px double #fafafa; background-color:  #eae4ce;}
.prevmesslinks a {padding: 0.25em 0; color: #0a0a0a;  font-weight: 400 !important; font-size: 1.1em;}
.presrem { color: #0a0a0a; width: 80%; margin: 0.5em auto; font-size: 0.9em; text-align: left; font-style: italic;}
.presrem li {margin: 0.5em auto;}

table.idnt2 {display: inline-block; margin: 1em auto; font-size: 0.9em;}
.idnt2 td {text-align: left; padding: 0.25em 0.5em;}

.idnt3 {width: 90%; margin: 0 auto; font-size: 0.9em;}
.diam {padding: 0.5em;}
.presdates {width: 100%; text-align: center;}


/* button links */
.buttonlink, .applink, .memalink, .eventsmenulink, .memstorieslink {margin: 0.75em auto; padding: 0.25em 0.4em;    border: 1px solid #ddd; border-radius: 0.25em; box-shadow: 0px 1px 1px #000; display: inline-block;
 background: #d4e4ef; background: linear-gradient(to bottom,  #fafafa 0%, #d4e4ef 100%); }

.buttonlink a {text-align: center; font-size: 0.8em; font-weight: 500; color: #0a0a0a; text-decoration: none; font-family: 'handlee';}
.buttonlink:hover, .applink:hover, .memalink:hover, .eventslink:hover {box-shadow: 0 1px 1px #fff; opacity: 0.6; } 

.applink, .eventsmenulink, .memstorieslink {margin: 3em auto 1.5em;}
.memalink {padding: 0.25em 0.5em; width: 60%; margin: 1em auto; text-align: center;}

 .cruiselink , .logoutlink {margin: 0.75em auto; padding: 0.25em 0.7em;    border: 1px solid #ddd; border-radius: 0.25em; box-shadow: 0px 1px 1px #000; display: inline-block;
 background:  #ebad28;
 background: linear-gradient(to bottom,  #f84909 0%, #ebad28 100%);
 color: #fff; text-shadow: 0 1px 1px #000;
 }
  
 
.dullit {opacity: 0.4;}
.fillp {height: 6em;}
#memberstoriesp .fillp {height: 3em;}

#footer {width: 100%; text-align: center; margin-top: 5em; padding: 1em 0; }
.footlr, .footm { display: inline-block; vertical-align: middle; margin: 0 0.5%; }
.footlr {width: 37%;}
.footccp {font-size: 0.5em; font-style: italic; font-family:  Helvetica, Arial, sans-serif;}
.footrs {font-weight: 500; color: #222; line-height: 1.25em; font-size: 0.7em;}
.footm {width: 20%;}
.footm img {padding: 0.5em; border: 1px solid #aaa; box-shadow: 0 1px 1px #000;  margin: 0 auto; max-width: 100px; }

.fonthandlee {font-family: 'handlee';}
.w80 {width: 80%; margin: 0 auto;}
.mt3 {margin-top: 3em;}

@media screen and (max-width: 750px) and  (orientation: portrait) {
.footlr, .footm {width: 90%; margin: 1em auto;}

}
	
	
@media (max-width: 1024px) {
#container { font-size: 16px; margin: 0 auto; padding-top: 1em;}

h1 {text-shadow: none;}
	}

@media (max-width: 900px) {
	.offdir  {width: 26%;  margin: 1em 3%;}
	.offdir img {width: 80%;}
}
@media (max-width: 800px) {
.lki {width: 26%;}

#calmthslinks {display: none;}
.memcont {width: 46%; border: 1px solid #eae4ce; margin: 0.25em 1%; display: inline-block;  padding: 0.25em; vertical-align: middle; background-color: #fff;}

/*reset prev block colours before setting 1st and 4th to be coloured backgrounds */
.memcont:nth-child(2n+1) {background-color: #fff; }
.memcont:nth-child(4n+1), .memcont:nth-child(4n+4) {background-color: #eae4ce; }

.memc1, .memc2, .memc3, .memc4 {width: 96%; margin: 0.2em auto; padding: 0 ; float: none; }
.memc4 {padding-top: 0.25em;}
 .officer  { width: 70%; display: block;  margin: 1em auto; }


	}


@media (max-width: 700px) {
#container { font-size: 14px; }
}
@media (max-width: 600px) {
#container { font-size: 12px; }
.mls , .mrs , .malsrs {width: 90%; margin: 1em auto 0; float: none;}
	 .officer  { width: 98%; display: block;  margin: 1em auto; }
	 .offimg {width: 30%;}
	 .offcont {width: 64%;}
	.offname {padding-bottom: 0.25em;}
	.lki {width: 45%;}
.memalink { margin: 2em auto; width: 50%;}
.memcont {width: 96%; border: 1px solid #ccc; margin: 0.5em auto; display: block;  padding: 0.25em; background-color: #fff;}

/*reset prev block colours before setting  every other to be coloured background */
.memcont:nth-child(4n+1), .memcont:nth-child(4n+4) {background-color: #fff; }
.memcont:nth-child(2n+1) {background-color: #eae4ce; }
.calendar { width: 96%; }
.month {box-shadow: none;}

}
@media (max-width: 500px) {
#container { font-size: 10px; }
 .offemail{font-size: 0.8em;}

}