/* 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 5px: */
[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 */
	background-color: #727272;
    color: #ffffff;
    padding: 0px;
	width:100%;
	height:auto;
	text-align:center;
}

.header img {
	width:100%;
	margin:auto;
		
}
footer {
	background-color:#C00;
	width:100%;	
	padding:10px 0px 10px 10px;
}
footer p {
	color:white;
	font-size:.9em;
	text-align:center;
	
}
.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;
	color:#b21500; /* red-ish */
}
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: */





@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;
	

}
.logotextOLD {
	/*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 {
	/*font-family: "webfontregular", sans-serif; */
	/*font-family: 'Arima Madurai', cursive; */
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	word-wrap:normal;
	font-size:3em;;
	/*background-color: #FFCC33;*/
	/*color:#0F0; */
	
	width:100%;
	text-align:center;
	padding-top: 1.3%;
	padding-right:1%;
	font-weight: 700;
	position: absolute;
    top: 0px;
    left: 0px;
	text-shadow: 1.4px 1.4px 0px rgb(255, 255, 255), 2.1px 2.1px 0px rgba(23, 23, 23, 0.79);
	color: #B21500 !important;
	
}
.logotext2 {
	/*font-family: "webfontregular", sans-serif; */
	/*font-family: 'Arima Madurai', cursive; */
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	word-wrap:normal;
	font-size:1.5em;
	/*background-color: #FFCC33;*/
	/*color:#0F0; */
	
	width:100%;
	text-align:center;
	padding-top: 1.3%;
	padding-right:1%;
	font-weight: 700;
	position: absolute;
    top: 50px;
    left: 0px;
	text-shadow: 1.4px 1.4px 0px rgb(255, 255, 255), 2.1px 2.1px 0px rgba(23, 23, 23, 0.79);
	color: black;
	
}
.logotext3 {
	/*font-family: "webfontregular", sans-serif; */
	/*font-family: 'Arima Madurai', cursive; */
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	word-wrap:normal;
	font-size:1.5em;
	/*background-color: #FFCC33;*/
	/*color:#0F0; */
	
	width:100%;
	text-align:center;
	padding-top: 1.3%;
	padding-right:1%;
	font-weight: 700;
	position: absolute;
    top: 80px;
    left: 0px;
	text-shadow: 1.4px 1.4px 0px rgb(255, 255, 255), 2.1px 2.1px 0px rgba(23, 23, 23, 0.79);
	color: #B21500;
	
}

.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;
	
	
}
p span {
	color:#b21500; /* red-ish */
	font-weight: bold;	
}

.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;
	
	
}




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



.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%;	
}

.aboutphoto {
	width:29%;
	padding: 0px 1% 0px 0px;
	/*min-width:300px;*/
	float:left;	
	
}

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

}

.aboutustextdiv {
	width:98%;
	padding: 0px 1% 0px 1%;
	width:98%;
	padding: 0px 1% 0px 1%;
	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{
}	
	
	



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



/* 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;
	
}



.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 */


.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%;
}

@media only screen and (max-width:760px) {
    
	/* For mobile phones: */
    /*[class*="col-"] {
        width: 100%;
    }*/
	/* for tablet so that when in one column layout the width of the photo thumb is not too big */
	.circular--square { /* for rounded display of square thumbnails */
  	border-radius: 50%;
 	max-width:20%;
}
	.logotext {
		font-size:1.8em;
		text-shadow:none;	
	}
	.logotext2 {
		font-size:0.9em;
		text-shadow:none;
		top:30px;	
	}
	.logotext3 {
		font-size:0.9em;
		text-shadow:none;
		top:45px;	
	}
}


@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 photo thumb is not too big */
	.circular--square { /* for rounded display of square thumbnails */
  	border-radius: 50%;
 	max-width:20%;
}
	.logotext {
		font-size:1.6em;
		text-shadow:none;	
	}
	.logotext2 {
		font-size:0.8em;
		text-shadow:none;
		top:25px;		
	}
	.logotext3 {
		font-size:0.8em;
		text-shadow:none;
		top:40px;			
	}
	
}