/* CSS Document */
/*Based on Responsive Web Design tutorial in W3School */
/*First ensure that all HTML elements have the box-sizing property set to border-box. This makes sure that the padding and border are included in the total width and height of the elements.
*/
* {
    box-sizing: border-box;
}
/*The columns inside a row are all floating to the left, and are therefore taken out of the flow of the page, and other elements will be placed as if the columns do not exist.
To prevent this, we will add a style that clears the flow:*/

.row::after {
    content: "";
    clear: both;
    display: table;
}
/*All these columns should be floating to the left, and have a padding of 15px: */
[class*="col-"] {
    float: left;
    /*padding: 0px;*/
	padding-left:5px;
	padding-top:5px;
	padding-right:5px;
	padding-bottom:5px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

html {
    font-family: 'Source Sans Pro', sans-serif; 
	
	font-size:16px; /* basis for all em s later*/
	background-color:rgb(230,232,229);
	border:solid 0px  red;
	min-height:100%;
	font-weight:200;
	
}
.header {
	background-color: #0B3D8E; /* internal colour of Probus Logo */
    color: #ffffff;
    padding: 15px;
	width:100%;
	height:auto;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
	font-weight:400;
	
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color: #0B3F8C;
    
    /*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); */
	box-shadow: 3px 3px 2px  rgba(0,0,0,0.12);
}
.menu li:hover {
    background-color: #0099cc;
}


.menu a {
	/*font-family: Tahoma, Arial;*/
	/*color: #999966;*/
	/*color:#0F0;*/
	/*color:#FFFFFF; */
	/*color:rgb(250,162,27);*/ /*Reflex Blue */
	color:#F7BE3E; /*same as foreground colour on Probus Logo Image */
	padding: 0px 0px 0px 0px;	
}	

menu a:link {
	text-decoration: none;
	
}
menu a:visited {
	text-decoration: none;
	
}
menu a:hover {
	text-decoration: underline;
	color:blue;
}
menu a:active {
	text-decoration: none;
	
}



h1 {
	font-family:'Trirong', serif;
	font-size:2em;
	font-weight:400;
	margin-top:0;
	margin-bottom:.2em;
	padding-top:0;
	line-height: normal;
	font-style: normal;
	font-variant: normal;
	text-align:left;
}
h2 {
	font-family:'Trirong', serif;
	font-size:1.8em;
	font-weight:400;
	font-style: normal;
	text-align: left; /* TEST */
	}
h3 {font-family:'Trirong', serif; font-size:1.6em;font-weight:400;}
h4 {
	font-family:'Trirong', serif;
	font-size:1.4em;
	font-weight:200;
	font-style:italic;
	display:inline;
	}


/*If the browser window is smaller than 768px, the background color will change to lightblue: */
/*When the screen (browser window) gets smaller than 768px, each column should have a width of 100%: */
/*Instead of changing styles when the width gets smaller than 768px, we could change the design when the width gets larger than 768px.(min-width) This will make our design Mobile First: */



/*The web page will have a lightblue background if the orientation is in landscape mode: */

@media only screen and (orientation: landscape) {
    body {
        background-color: red;
    }
}

/*Using The max-width Property
If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:*/

img {
    max-width: 100%;
    height: auto;
	
}

body {
	
	border:solid 0px  white;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	/*background-color: rgb(56,74,156);*/ /* Reflex Blue */
	background-color:rgb(230,232,229);
	
	/*color: rgb(255,199,9);*/ /* Amber */
	color:black;
	min-height:100%;
	/*background-image: url("/images/disinterested-intellectual-curiosity-is-the-life-blood-of-real-civilization-george-macaulay-trevelyan.jpg");*/
	/*background-image: url("/images/KeepCalm.jpg"); */
	/*background-attachment:fixed;*/ 	/*background: url("/images/disinterested-intellectual-curiosity-is-the-life-blood-of-real-civilization-george-macaulay-trevelyan.jpg") no-repeat center center fixed;  */
	/*-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;  */
}
input, select, textarea, button{font-family:inherit; font-size:inherit;} /* form elements DON'T inherit font family by default */
ul, sl, ol {display:table} /* to allow lists to indent properly when floating around an image */

.logo {
	width:98px;
	height:98px;
	/*background-color:rgb(250,162,27); */
	/*background-color: rgb(56,74,156); */ /* Reflex Blue */
	float:left;
	padding:0;
	
	
}
.logo img {
	width:98px;
	width:98px;
	padding:0;
	

}
.logotext {
	/*font-family: "webfontregular", sans-serif; */
	font-family: 'Arima Madurai', cursive;
	font-size:1.5em;
	/*background-color: #FFCC33;*/
	/*color:#0F0; */
	color:rgb(255,199,9);
	width:calc(99% - 98px);
	text-align:right;
	padding-top: 1.3%;
	padding-right:1%;
	float:right;
	font-weight: 700;
}
.logotext span { /* for different colour for part of logotext */
	color:green;
	/* font-size:1.5em; */
}


.clearer {
	clear:both;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border: 0px;
	
}	


.centerwrapper {
	width: 100%;
	padding-left:0%;
	padding-right:0%;
	/*text-align: center;*/
	/* background-color: #CBD5F1; */
	
}
#content {
	
	font-size: 1em;
	width: 100%;
	padding-left:0.0%;
	padding-right:0.0%;
	
	/*color: white; */
	/*color:rgb(255, 199, 9);*/ /* Amber */
	margin: auto;
	/* text-align: justify; */
	text-align: left;
	
	
}

.contentTitle {
	width: 100%; 
	font-family:'Trirong', serif;
	font-size: 140%;
	font-weight:200;
	margin-top:0;
	margin-bottom:.2em;
	padding-top:0;
	line-height: normal;
	font-style: normal;
	font-variant: normal;
	border: solid 0px white;
	border-top:solid 1px white;
	border-bottom:solid 1px white;
	text-align: left;
	
	
	/*color: white; */
	/* color:rgb(250,162,27);*/ /* Orange */
	/*background-color:rgb(0,5,62); *//* Midnight Blue */
	height: 100%;
	padding-left:0.0%;
	padding-right:0.0%;
	margin-top:0%;

	
}

.contentLeftImage {
	width: auto;
	float:left; 
	padding: 0px 5px 5px 0px;
	
	
}
table.tblType1 { 

	border-collapse: collapse;
	background-color: #0B3D8E; /* same as header background */
	/*padding:0px;*/
	border: 2px ridge gray;
	/* leave out forcing a wide width. Do it instead in the html <table class-"tblType1" style="width:50%;" >   */
	/* use the style= in the html as HTML5 does NOT support width="50%" in the table tag, but it does support the style attribute */
	/* width:96%;
	padding-left:2%;
	padding-right:2%; */
	margin:auto; /* to center it */
	
	

	
	
}
.tblType1 caption {
	font-family:'Trirong', serif;
	font-size: 1.4em;
	text-align:left
}

.tblType1 th {
	font-weight: bold;
	font-style: italic;
	font-size:1.1em;
	color:rgb(250,162,27); /* Amber */
	padding:0px;
	border:2px ridge gray;
	padding:2px;
	background-image: url(/images/tablehead.jpg);
	background: -webkit-linear-gradient(90deg, #880000, black); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(90deg, #880000, black); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(90deg, #880000, black); /* For Firefox 3.6 to 15 */
	background: linear-gradient(90deg, #880000, black); /* Standard syntax */
	text-align:left
}


.tblType1 td {
	color:rgb(255,199,9); /* Amber  */
	padding:2px;
	border:2px ridge gray;
	/* background-image: url(/images/content_background.jpg); */
	/*background-color:#666666; */
	/*background-color:rgb(0,125,161);*/ /*Bondi Blue */
	
	text-align:left;
	
	
}
.tblType1 td.highlight {
	background-color:#888888;
}
.tblType1 td.newmember {
	color:yellow;
	font-style:italic;
}
	
.tblType1 td.future {
	background-color:#39F; /* for display of events in the future in user section */	
}

.tblType1 a:link {
	text-decoration: underline;
	color:rgb(255,199,9); /* Amber */
}
.tblType1 a:visited {
	text-decoration: underline;
	color:rgb(255,199,9); /* Amber */
}
.tblType1 a:hover {
	color:#CCCCCC;
	text-decoration: underline;
}
.tblType1 a:active {
	text-decoration: underline;
	color:rgb(255,199,9); /* Amber */
}

.tblType1 span.superscript {
	vertical-align: super;
	font-size:.7em;

}
.button {
	font-size:1em !important;
	text-align:center !important;
	color:white !important;
	/*border:solid 1px white !important; */
	/*padding:1px !important;*/
	padding-top:0px;
	padding-right:1px;
	padding-bottom:0px;
	padding-left:1px;
	background-color: rgb(0,125,161); /* Bondi Blue */
	background-color: #0B3D8E; /* internal colour of Probus Logo */

	
}

a.button:link {
	text-decoration: none !important;
	
	
}

a.button:visited {
	text-decoration: none !important;
	
}
a.button:hover {
	text-decoration: underline !important;
	color: white;	
}
a.button:active {
	text-decoration: none !important;
	
	
}

/*-------------------------------------------------------------------ADMIN----------------------------------------------------------------8/
/* Admin Edit Screen styles */

.admin_fs {
	width:90%;
	/*max-width:400px; */
	margin:auto;
	color:white;
	border-radius:5px 5px 5px 5px;
	/* test */
	/*background-color:#F30;*/
	/* end of test */
	
	
}
.admin_fs legend {
	color: white;
	border-radius:5px 5px 5px 5px;
	font-weight:bold;
	}	
	
.admin_fs label {
	text-align:left;
	float:left;
	background-color:#999999;
	color:#FFFFFF;
	border-radius:5px 5px 5px 5px;
	width:99.5%;
	padding:.5%; 
	margin-bottom: 0.3%;
	
	
	
 }
.admin_fs .nobr {
	display:none; } 
	 
.admin_fs .textfield {
	margin-bottom:3%;
	width:100%;
	color: green;
	border-radius:2px 2px 2px 2px;
	
	
    /*background: transparent; */
    /*border-bottom: 2px solid black; */
    
}


.admin_fs .textfield_right {
	margin:3px;
	height:13px;
	width:100px;
	text-align: right;
	font-size:1.0em;
}
.admin_fs .textarea {
	margin:.5%;
	height:50%;
	width:99.9%;
	color: green;
}

.admin_fs .optgroup {
	margin:3px;
	height:165px;
	width:100px; }	
.admin_fs  .optionarea {
	margin:3px;
	width:50px; 
	color:green;
	font-family: "Source Sans Pro", sans-serif;
	}	
.admin_fs .selectarea {
	margin:3px;
	width:80px;
	color: green;
	font-family: "Source Sans Pro", sans-serif;
	font-size:1.0em;
}
.admin_fs .selectareaYN {
	margin:3px;
	margin:0px 3px 3px 3px;
	padding:0px;
	width:40px;
	color: green;
	font-family: "Source Sans Pro", sans-serif;
	font-size:1.0em;
}

.admin_fs .selectareawide {
	margin:3px;
	width:157px;
	color: green;
	font-family: "Source Sans Pro", sans-serif;
	font-size:1.00em;
}
.admin_fs .selectareaverywide {
	margin:3px;
	width:380px;
	color: green;
	font-family: "Source Sans Pro", sans-serif;
	font-size:1.00em;
}
.admin_fs .notes {
	color: #999999;	
	padding: 0px 0px 0px 2px;
	
}

.admin_fs .submitbtn {
	margin-top:2%;
	margin-left: 0px;
	width:20%;
	color: red;
	background-color:black; 
	padding:0;
	border-radius: 5px 5px 5px 5px;
	border:2px solid red;
	
}
.admin_fs .cancelbtn {
	margin-top:2%;
	margin-left: 0px;
	width:20%;
	color: green;
	background-color:black; 
	padding:0;
	border-radius: 5px 5px 5px 5px;
	border:2px solid green;
	
}
.admin_fs .myselect { 
	margin-top:0.26em;
	margin-left: 0.25em;
	width:100px;
	color: green; 
	font-size:1.0em;
	padding:0.2em;
	font-family: "Source Sans Pro", sans-serif;
}

/* end of Admin Edit Screens Styles */


input, select, textarea, button{font-family:inherit; font-size:inherit;} /* form elements DON'T inherit font family by default */

/* Login Screen styles */
.log_fs {
	
	width:100%;
	max-width:400px;
	margin: auto;
	color: white;
	border-radius:5px 5px 5px 5px;	
}
.log_fs .legend {
	color: white;
	/* TEST OF ROUNDED CORNERS */
	border-radius:5px 5px 5px 5px;	
	/* END OF TEST  */
}

.log_fs label {
	text-align:left;
	width:100%;
	padding-left:1%;
	float:left;
	margin-bottom:2%;
	background-color:#999999;
	color:#FFFFFF;
	border-radius:5px 5px 5px 5px;	
 }
.log_fs .nobr {
	display:none; }  
.log_fs .textfield {
	
	width:100%;
	margin-bottom:6%;
	color: green; 
	 }
.log_fs .textfield_right {
	margin:3px;
	width:100px;
	text-align: right;
	color: green; 
}
.log_fs .textarea {
	margin:3px;
	height:50%;
	width:100%; }
	
.log_fs .submitbtn {
	margin-top:2%;
	width:40%;
	color: red; 
	padding:0;
	
}	


/* end of Login Screen Styles */


.error_msg {
	text-align: center;
	color: red;
	font-family: "Source Sans Pro", sans-serif;
	font-weight: 400;
}
.error_msg_big {
	text-align: center;
	color: red;
	font-family: "Source Sans Pro", sans-serif;
	font-weight: bold;
	font-size:36px;
}
.centred {
	
	/*color:white; */
	width:100%;
	text-align:center;
	margin:auto;
	padding-bottom:1%;	
}
/* Class stuff for newer Cycle2 jQuery plugin */

.cycle-slideshow {
	margin:auto;
	width:50%;
	max-width:730px; /* TEST */
	
}
.cycle-slideshow img {
	/*border-radius:2%;	
	border: solid 3px #85684c; */
	background-color: #000000;
	padding:0px;
	/*box-shadow:4px 4px 4px #AAAAAA; */
	/*box-shadow:0px 0px 15px 2px red; */
	width:100%;
}
.eventfirstphoto {
	width:20%;
	float:left; 
	padding:1% 0px 0px 0px;
	
	
}
.eventfirstphoto img {
	width:100%;
	float:left;	
}
.eventHeadlines {
	width:78%;
	text-align:right;
	float:right;
	padding:0px 1% 0px 1%;
	font-size:1.3em;
}
.eventTextDiv {
	width:100%;
	padding:0px 0% 0px 0%;
	/*background-color:blue; */
	margin:auto;	
}
.eventtext {
	
		
}
.biotext {
	color:rgb(255,199,9);
	color:black;
		
}
.memberphoto {
	width:40%;	
	float:left;
	padding: 1% 1% 1% 1%;
}
.memberphoto img {
	width: 100%;
    height: auto;
		
}
.memberbio {
	padding: 0px 1% 0px 1%;
	width:60%;
	color:red;	
	float:right;
}

.MailToAddresses {
	width:100%;
	font-family:"Courier New", Courier, monospace;
	height:70%;
	/*border: solid red 2px; */
	border-top:solid red 2px;
	border-bottom:solid red 2px;
	border-left:solid red 2px;
	border-right:solid red 2px;
	border-radius:5px 5px 5px 5px;
	float:left;
	overflow: auto;	
	padding: .5%;
	/*margin-left:2%;
	margin-right:2%;*/
	text-align:left;
}
.aboutphoto {
	width:29%;
	padding: 0px 1% 0px 0px;
	/*min-width:300px;*/
	float:left;	
	
}

.aboutphoto img {
	width:98%;
	padding:1%;
	

}

.aboutustextdiv {
	width:100%;
	padding: 0px 0px 0px 0px;
	text-align:justify;
	
}
.aboutustextdiv  p:first-child:first-letter {
  color: #903;
  float: left;
  font-family: Trirong;
  font-size: 3em;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 0px; 
	
}
.aboutustext{
}	
	
	

.future { /* to display a future date in events */
	background-color:red;
}
#map_canvas_container {position: relative;}
#map {
	position: absolute; top: 8%; right: 0; bottom: 0; left: 0;
	width: 100%;
	
	
	height:92%;

}
#map-streetview {
	width:20%;
	margin:auto;
	text-align:center;
}

.FB_Link {
	width:100%;
	margin:auto;	
}
.contactus {
	width:50%;
	margin:auto;		
}

/* following to display events one at a time, not in a table */
.event_date {
	/*border:red solid 5px; */
	background-color:#CCC; 
	width:10%;
	float:left;
	display:inline;
	margin-top:0.5%;
	background-color:rgb(0,5,62); /* Midnight Blue */
	
	border-radius:10px;
	
	
}
.event_date p {
	text-align:center;
	font-size:.8em;
	color: rgb(255,199,9); /* Amber */
	text-align:center;
	font-weight:bold;
	
		
}

.event_detail {
	float:left;
	text-align:justify;
	/* border:green solid 5px; */
	width:90%;
	padding: 0px 0.5% 0px 0.5%;
	margin-top:0;
	height:auto;
	
}
.event_detail p {
	/*font-size: 1.3em; inherit from Body */
	
}
.firstLetter{
  float       : left;
  font-size   : 3.0em;
  line-height : 0.5;
  margin      : 0.2em 0.153em 0 0;
  font-weight:bold;
  color: #903;
  float: left;
  font-family: Trirong;
  
}

.firstLetter + span{
  margin-left : -0.5em;
}


.event_detail img {
	width:30%;
	float:right;
	margin: 0px 0.5% 0px 0.5%;	
	
}

.event-detailul {
	margin: 0;
	padding: 0em; /* Set the distance from the list edge */
	list-style-type: none;
	list-style-position: outside;
	list-style-image: none;
	
}



/*.event_detail h1 {
	font-size:2em;
	margin-top:0px;
	padding-top:0px;
	text-align:left;
		
}*/

.event_detail hr {
	color:black;
	border-width: 1px;	
}
.event_detail a:link {
	color:black;
}
.event_detail a:visited {
	color:black;
}

.event_detail a:hover {
	color:green;
}

.event_detail a:active {
	color:red;
}

.event_photo {
	float:right;
	
}

/* colour the content link colors */
a {
	/*font-family: Tahoma, Arial;*/
	/*color: #999966;*/
	/*color:#0F0;*/
	/*color:#FFFFFF; */
	/*color:rgb(250,162,27);*/ /*Reflex Blue */
	color:rgb(0,0,0);
	padding: 0px 0px 0px 0px;	
}	

a:link {
	text-decoration: none;
	
}
a:visited {
	text-decoration: none;
	
}
a:hover {
	text-decoration: underline;
	color:rgb(250,162,27); /*Reflex Blue */
}
a:active {
	text-decoration: none;
	
}

/* classes for events drop-down list */
/* Dropdown Button */
.dropbtn {
	border:none;
	background-color: #0B3F8C;
	color:#F7BE3E;
	text-align:left;
	padding:0px;
	
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
	position:relative;
	display:inline-block;
	
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
	width:300px;
	display:none;
	position:absolute;
	z-index:1;
	background-color:grey;
	padding:0px 0px 0px 10px;
	border-radius:10px;
	box-shadow: 3px 3px 2px  rgba(0,0,0,1);
}

/* Links inside the dropdown */
.dropdown-content a {
	display:block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
	background-color: #0099cc;
	/*background-color: #33b5e5; */
	color:rgb(250,162,27); /*Reflex Blue */
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
	display:block;	
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
	background-color: #0099cc;
	background-color: #33B5E5; /* TEST */
	

	
}

/* styles for News and Secretary Reports Items display */

.newsheadline {
	font-family:'Trirong', serif;
    display: block;
    font-size:1.8em;
	font-weight: bold;
	/*background-color:#666666; */
    /*border-radius: 3px;*/
    /*box-shadow: 0px 0px 15px 2px yellow ;*/
	width:90%; 
}
.newsdate {
 	display: block;
    font-size: 0.8em;
    color: #CCC;
    margin: 10px 10px 10px 0px;       
}
.newstextdiv {
	/* background-color:blue; */	/*test */
}
.newstextdiv p:first-of-type {
	margin-top:0px; /* to line up with top of photo */
}
.newstext {
    /* width:420px; */
    /* display: inline; */
    /* float:left; */
	/* margin: 1px 0px 0px 0px; */
	margin-right:2%;
}
.newstextdiv  p:first-child:first-letter {
  color: #903;
  float: left;
  font-family: Trirong;
  font-size: 3em;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 0px; 
	
}
.newsphotosdiv {
	display: inline;	
	width:	30%;
	float:left;
	margin-right:2%;
}
.newsphoto {
 	/* float:left; */
    margin:  0px 0px 0px 0px; 
    padding: 0px 0px 0px 0px;
    /* box-shadow: 3px 3px 3px #888; */
    /*border: solid 3px #85684c;*/
	/*border-radius:3px;*/
	width:99%;

    }
	
.newslink {
 	font-size:0.8em;
    margin: 0px 0px 60px 0px;
     
    
}
.attention {
	color:red;
	width:20%;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
.attention img {
	width:100%;
	/*height:100%;	*/
}
.secphotocaption {
	color:green;
	font-size:.8em;	
	font-style:italic;
}
/* end of News styles */

/* Marquee effects for new headline on home page */
/* Call like <p class="microsoft marquee"><span>Windows 8 and ...</span></p> */
.marquee {
    width: 50%;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

.marquee span {
    display: inline-block;
    padding-left: 100%;  /* show the marquee just outside the paragraph */
    animation: marquee 20s linear infinite;
}

.marquee span:hover {
    animation-play-state: paused
}

/* Make it move */
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}
/* end of Marquee effects */
.gridbg {
	background-color:rgb(240,242,239);
	margin:3px;	
}
.thumbimg {
	/*max-width:100px; */
	max-width:100px;
	border:0px solid blue;
	margin:0px;
	padding:0px;	
}
.small {
	font-size:.6em;	
}
.newmember { /* put yellowish tinge */
	color:rgb(140,140,0);	
}
.circular--square { /* for rounded display of square thumbnails */
  border-radius: 50%;
  max-width:100%;
}

/* next styles are for displaying the photos */
.tblType2 table{table-layout:fixed; width:100%; border-collapse: collapse; }
.tblType2 .colw {width:25%;  /* allow for 4 across */ }
.tblType2 td {border:0px; vertical-align:top;}

.photothumb {
	/* width:190px; *//* to fit 4 across */
	float:left;
	text-align:left;
}
.photothumb img {
	/* padding:1px 1px 1px 1px; */
	display:inline;
	/* background:#cccccc; */
	border:1px solid #f0f0f0;
	/* margin: 0 20px 0 0; */
	/* float:left; */
	
}
.photothumb .location {
	font-size:.7em;
	color:green;

}

.photothumb .caption {
	color:#00CC00;
	vertical-align:bottom;

}

.photobig {
	width:766px;
	text-align:left;
}
.photobig img{
	display:inline;
	border:0px solid black;

}
.photobig .caption {
	color:#00CC00;

}
.photobig .takendate {
}
.photobig .photographer {
}
.MailToAddresses {
	width:99%;
	font-family:"Courier New", Courier, monospace;
	height:70%;
	/*border: solid red 2px; */
	border-top:solid red 2px;
	border-bottom:solid red 2px;
	border-radius:5px 5px 5px 5px;
	float:left;
	overflow: auto;	
	padding: .5%;
	/*margin-left:2%;
	margin-right:2%;*/
	text-align:left;
}

.photoleft {
	float:left;
	padding: 0px 10px 0px 0px;
}

.photoleft img {
	
	display:inline;
	border:1px solid #f0f0f0;
}

.photoright {
	float:right;
	padding:0px 0px 0px 10px;
}
.photoright img {
	display:inline;
	border:1px solid #f0f0f0;
}
.widthnames {
	width:200px;
	color: red;	
	display:inline;
	
}

/*  styles for the photo album background in walks photos */
.photoalbum {
	width:150px;
	height:150px;
	color:white;
	font-size:20px;
	color:#C93;
	text-align:center;
	background-image:url(file:///F|/Client%20Software/probus-dlm.com/web/images/album150x150.png);
	background-repeat:no-repeat;
	background-position:center;
	float:left;	

}

.albumpic { /* for showing on walk pic from album */
	width:100%;
	/*max-width:800px; */
	max-width:1900px; 
	margin:auto;
	
}
.committee {
	background-color:#FFC;
	width:40%;
	min-width:350px;
}
.committeephoto {
	width:40%;
	min-width:350px;		
}
.committeecaption {
	font-size:0.8em;
	font-style:italic;		
}

@media only screen and (max-width:500px) {
    
	/* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
	/* for tablet so that when in one column layout the width of the phot thumb is not too big */
	.circular--square { /* for rounded display of square thumbnails */
  	border-radius: 50%;
 	max-width:20%;
}
}